/* =========================================================
   SERVOMIX — PRODUCT PAGES
   File: css/pages/product.css
   Used by: hytale-hosting, palworld, fivem-hosting,
   discord-hosting, mail-hosting. Their markup and copy are the
   originals; class prefixes (hytale-, pal-, fivem-, bot-, mail-)
   were normalised to prod-. Every value is a token.
========================================================= */

/* ---------------------------------------------------------
   SHARED
--------------------------------------------------------- */

:where(main[class*="page-"]) section[class^="prod-"],
:where(main[class*="page-"]) section[class*=" prod-"]{
    position:relative;
    padding-block:var(--s-7);
}

@media (min-width:1024px){

    :where(main[class*="page-"]) section[class^="prod-"],
    :where(main[class*="page-"]) section[class*=" prod-"]{
        padding-block:var(--s-8);
    }
}

.prod-container,
.prod-hero-container,
.prod-features-container,
.prod-faq-container,
.prod-panel-container,
.prod-hero > .prod-hero-content{
    width:min(var(--container), 100% - var(--gutter) * 2);
    margin-inline:auto;
}

/* decorative layers from the old design are not used */
.prod-glow,
.prod-glow-left,
.prod-glow-right,
.prod-glow-one,
.prod-glow-two,
.prod-hero-glow,
.prod-hero-grid,
.prod-hero-bg,
.prod-hero-overlay,
.prod-hero-bottom-fade,
.prod-cta-glow,
.prod-device-glow,
.prod-orbit,
.prod-orbit-one,
.prod-orbit-two{
    display:none;
}

/* <small> shrinks under 12 px inside 14 px text */
:where(main[class*="page-"]) small{
    font-size:var(--t-small);
}

.prod-badge,
.prod-hero-badge,
.prod-eyebrow,
.prod-plans-badge,
.prod-features-badge,
.prod-faq-badge,
.prod-section-badge{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    min-height:32px;
    padding:0 var(--s-3);
    border:1px solid var(--line);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--accent-strong);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    letter-spacing:.04em;
}

.prod-eyebrow-dot,
.prod-online-dot,
.prod-status-dot,
.prod-control-status-dot,
.prod-running-pulse{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--up-fill);
}

.prod-title,
.prod-main-title{
    font-size:min(var(--t-display), 11vw);
    line-height:1;
    font-weight:var(--w-display);
    font-stretch:var(--wd-display);
}

.prod-title span,
.prod-main-title span,
.prod-section-heading h2 span,
.prod-plans-header h2 span,
.prod-features-heading h2 span,
.prod-faq-heading h2 span,
.prod-cta-content h2 span{
    color:var(--accent);
}

.prod-subtitle,
.prod-hero-subtitle{
    color:var(--ink);
    font-size:var(--t-h3);
    line-height:var(--lh-h3);
    font-weight:var(--w-h3);
}

.prod-description,
.prod-hero-description{
    max-width:58ch;
    color:var(--ink-2);
    font-size:var(--t-lead);
    line-height:1.55;
}

.prod-title-divider,
.prod-plan-divider,
.prod-price-divider{
    height:1px;
    width:100%;
    background:var(--line);
}

.prod-btn,
.prod-btn-primary,
.prod-btn-secondary,
.prod-primary-btn,
.prod-secondary-btn,
.prod-plan-btn,
.prod-cta-btn,
.prod-faq-support-btn,
.prod-compose-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--s-2);
    min-height:var(--btn-h);
    padding:0 var(--btn-pad-x);
    border:1px solid var(--line-strong);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--ink);
    font-weight:var(--w-strong);
    text-decoration:none;
    transition:background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.prod-btn-primary,
.prod-primary-btn,
.prod-plan-btn-primary,
.prod-cta-btn,
.prod-compose-btn{
    border-color:transparent;
    background:var(--accent);
    color:var(--ink-on-accent);
}

.prod-btn:hover,
.prod-btn-secondary:hover,
.prod-secondary-btn:hover,
.prod-plan-btn:hover,
.prod-faq-support-btn:hover{
    border-color:var(--accent);
    color:var(--accent-strong);
}

.prod-btn-primary:hover,
.prod-primary-btn:hover,
.prod-plan-btn-primary:hover,
.prod-cta-btn:hover,
.prod-compose-btn:hover{
    background:var(--accent-strong);
    color:var(--ink-on-accent);
}

:where(.prod-btn, .prod-plan-btn, .prod-cta-btn, .prod-primary-btn, .prod-secondary-btn, .prod-faq-support-btn):focus-visible{
    outline:none;
    box-shadow:var(--focus-ring);
}


/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.prod-hero-container,
.prod-hero > .prod-container{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-7);
    align-items:center;
}

@media (min-width:1024px){

    .prod-hero-container:has(.prod-hero-visual),
    .prod-hero > .prod-container:has(.prod-hero-visual){
        grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);
        gap:var(--s-8);
    }
}

.prod-hero-container:not(:has(.prod-hero-visual)) .prod-hero-content{
    max-width:840px;
}

.prod-hero-content{
    display:grid;
    justify-items:start;
    gap:var(--s-4);
    min-width:0;
    width:100%;
}

.prod-hero-art{
    width:100%;
    max-width:580px;
    height:auto;
    border-radius:var(--r-card);
    border:1px solid var(--line-strong);
    box-shadow:var(--shadow-card);
    object-fit:cover;
    transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}

.prod-hero-art:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-float);
}

.prod-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-3);
}

.prod-hero-price,
.prod-price-info{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:var(--s-2);
    padding:var(--s-3) var(--s-4);
    border:1px solid var(--glass-edge);
    border-radius:var(--r-card);
    background:var(--glass);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    color:var(--ink-2);
    font-size:var(--t-small);
}

.prod-hero-price strong,
.prod-price-info strong{
    color:var(--ink);
    font-size:var(--t-h2);
    font-weight:var(--w-h2);
    line-height:1;
}

.prod-hero-features,
.prod-hero-mini-features,
.prod-hero-trust,
.prod-trust{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-2) var(--s-5);
    color:var(--ink-2);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.prod-hero-feature,
.prod-hero-features > *,
.prod-hero-mini-features > *{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
}

.prod-hero-feature .icon,
.prod-hero-features .icon,
.prod-hero-mini-features .icon{
    color:var(--up);
}

.prod-hero-feature-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--s-2);
    width:100%;
}

.prod-hero-feature-card{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    padding:var(--s-3);
    border:1px solid var(--line);
    border-radius:var(--r-control);
    background:var(--surface);
    font-size:var(--t-small);
}

.prod-hero-feature-card .icon{
    color:var(--accent);
}

.prod-trust-avatars{
    display:flex;
}

.prod-trust-avatars img{
    width:28px;
    height:28px;
    border:2px solid var(--surface);
    border-radius:50%;
}

.prod-trust-avatars img + img{
    margin-left:-8px;
}

.prod-trust-info{
    display:grid;
    line-height:1.3;
}

.prod-stars{
    color:var(--up);
}

.prod-hero-visual,
.prod-device-visual{
    position:relative;
    display:grid;
    place-items:center;
    min-width:0;
}

/* the icon box also starts with "prod-float-", so both attribute
   selectors exclude it; otherwise its padding squeezes the icon */
.prod-floating-card,
[class^="prod-float-"]:not(.prod-float-icon),
[class*=" prod-float-"]:not(.prod-float-icon){
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    padding:var(--s-2) var(--s-3);
    border:1px solid var(--line);
    border-radius:var(--r-control);
    background:var(--surface);
    box-shadow:var(--shadow-card);
    color:var(--ink);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.prod-float-icon{
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border-radius:var(--r-control);
    background:var(--accent-soft);
    color:var(--accent);
}


/* ---------------------------------------------------------
   SECTION HEADINGS
--------------------------------------------------------- */

.prod-section-heading,
.prod-plans-header,
.prod-features-heading,
.prod-faq-heading,
.prod-panel-header{
    display:grid;
    justify-items:start;
    gap:var(--s-3);
    margin-bottom:var(--s-6);
}

.prod-section-heading p,
.prod-plans-header p,
.prod-features-heading p,
.prod-faq-heading p,
.prod-panel-header p{
    max-width:62ch;
    color:var(--ink-2);
    font-size:var(--t-lead);
    line-height:1.55;
}


/* ---------------------------------------------------------
   PLANS
--------------------------------------------------------- */

.prod-plan-grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-4);
}

@media (min-width:640px){

    .prod-plan-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (min-width:1100px){

    .prod-plan-grid{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}

.prod-plan-card{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:var(--s-3);
    min-width:0;
    padding:var(--s-5);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
    transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.prod-plan-card:hover,
.prod-plan-card.prod-card-hover,
.prod-plan-card.prod-card-active{
    border-color:var(--accent);
    box-shadow:var(--shadow-card);
}

.prod-plan-card.prod-plan-popular,
.prod-plan-popular{
    border:2px solid var(--accent);
}

.prod-popular-badge{
    position:absolute;
    top:var(--s-4);
    right:var(--s-4);
    padding:2px var(--s-2);
    border-radius:var(--r-pill);
    background:var(--accent);
    color:var(--ink-on-accent);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.04em;
}

.prod-plan-icon{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    border-radius:var(--r-control);
    background:var(--accent-soft);
    color:var(--accent);
}

.prod-plan-type{
    color:var(--accent-strong);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
}

.prod-plan-card h3{
    font-size:var(--t-h3);
    line-height:var(--lh-h3);
}

.prod-plan-description{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.prod-plan-price{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:var(--s-1);
    color:var(--ink-2);
    font-variant-numeric:tabular-nums;
}

.prod-plan-price strong{
    color:var(--ink);
    font-size:var(--t-h2);
    font-weight:var(--w-h2);
    font-stretch:var(--wd-h2);
    line-height:1;
}

.prod-plan-specs{
    display:grid;
    gap:var(--s-2);
    margin:0;
    padding:0;
    list-style:none;
    color:var(--ink-2);
    font-size:var(--t-small);
}

.prod-plan-specs li{
    display:flex;
    align-items:center;
    gap:var(--s-2);
}

.prod-plan-specs .icon{
    color:var(--up);
}

.prod-plan-specs strong{
    color:var(--ink);
}

.prod-plan-included,
.prod-included-bar{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:var(--s-2) var(--s-5);
    margin-top:var(--s-5);
    padding:var(--s-4);
    border-block:1px solid var(--line);
    color:var(--ink);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.prod-plan-included > *,
.prod-included-bar > *{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
}

.prod-plan-included .icon,
.prod-included-bar .icon{
    color:var(--up);
}

.prod-plan-card .prod-plan-btn{
    margin-top:auto;
}


/* ---------------------------------------------------------
   FEATURES
--------------------------------------------------------- */

.prod-features-grid,
.prod-feature-grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-4);
}

@media (min-width:700px){

    .prod-features-grid,
    .prod-feature-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (min-width:1100px){

    .prod-features-grid,
    .prod-feature-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}

.prod-feature-card{
    display:flex;
    flex-direction:column;
    gap:var(--s-3);
    padding:var(--s-5);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
}

.prod-feature-icon,
.prod-feature-card-icon,
.prod-feature-large-icon,
.prod-feature-strip-icon,
.prod-cta-icon,
.prod-faq-support-icon{
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:48px;
    height:48px;
    border-radius:var(--r-control);
    background:var(--accent-soft);
    color:var(--accent);
}

.prod-feature-card h3{
    font-size:var(--t-body);
    font-weight:var(--w-strong);
}

.prod-feature-card p{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.prod-feature-card-meta{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    margin-top:auto;
    color:var(--accent-strong);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.prod-feature-strip{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-4);
    margin-top:var(--s-5);
    padding:var(--s-4) var(--s-5);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
}


/* ---------------------------------------------------------
   PANEL / CONTROL / DEVELOPER / DEVICES SHOWCASES
--------------------------------------------------------- */

.prod-panel-grid,
.prod-control-grid,
.prod-developer-grid,
.prod-devices-grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-6);
    align-items:center;
}

@media (min-width:1024px){

    .prod-panel-grid,
    .prod-control-grid,
    .prod-developer-grid,
    .prod-devices-grid{
        grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    }
}

.prod-panel-content,
.prod-control-content,
.prod-developer-content,
.prod-devices-content{
    display:grid;
    justify-items:start;
    gap:var(--s-4);
    min-width:0;
}

.prod-panel-content p,
.prod-control-content p,
.prod-developer-content p,
.prod-devices-content p{
    color:var(--ink-2);
}

.prod-panel-feature-list,
.prod-control-features,
.prod-developer-features,
.prod-device-list,
.prod-runtime-list{
    display:grid;
    gap:var(--s-3);
    width:100%;
}

.prod-panel-feature-list > *,
.prod-control-features > *,
.prod-developer-features > *,
.prod-device-list > *,
.prod-runtime{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    padding:var(--s-3);
    border:1px solid var(--line);
    border-radius:var(--r-control);
    background:var(--surface);
    font-size:var(--t-small);
}

.prod-panel-feature-list .icon,
.prod-control-features .icon,
.prod-developer-features .icon,
.prod-device-list .icon,
.prod-runtime .icon{
    color:var(--accent);
}

.prod-panel-small-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--s-3);
}

/* the mock dashboards and terminals */
.prod-control-panel,
.prod-control-showcase,
.prod-status-panel,
.prod-terminal-card,
.prod-console,
.prod-control-console,
.prod-app,
.prod-inbox-panel{
    min-width:0;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
    box-shadow:var(--shadow-card);
}

.prod-control-top,
.prod-panel-top,
.prod-terminal-header,
.prod-console-top,
.prod-control-header,
.prod-mini-header{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-2);
    padding:var(--s-3) var(--s-4);
    border-bottom:1px solid var(--line);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.prod-panel-brand,
.prod-panel-identity,
.prod-control-brand,
.prod-panel-logo{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
}

.prod-panel-tab{
    min-height:36px;
    padding:0 var(--s-3);
    border:1px solid var(--line);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--ink);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.prod-panel-tab.active{
    border-color:var(--accent);
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.prod-control-main,
.prod-control-stats,
.prod-panel-stats{
    display:grid;
    gap:var(--s-3);
    padding:var(--s-4);
}

.prod-control-stats,
.prod-panel-stats{
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.prod-control-stats > *,
.prod-panel-stats > *{
    display:grid;
    gap:2px;
    padding:var(--s-3);
    border-radius:var(--r-control);
    background:var(--surface-sunken);
    font-size:var(--t-small);
}

.prod-stat-bar{
    height:6px;
    border-radius:var(--r-pill);
    background:var(--surface-sunken);
    overflow:hidden;
}

.prod-stat-bar > *{
    display:block;
    height:100%;
    border-radius:inherit;
    background:var(--accent);
}

.prod-control-actions,
.prod-control-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-2);
    padding:0 var(--s-4) var(--s-4);
}

.prod-control-btn,
.prod-control-start,
.prod-control-stop,
.prod-control-restart{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    min-height:40px;
    padding:0 var(--s-3);
    border:1px solid var(--line-strong);
    border-radius:var(--r-control);
    background:var(--surface);
    color:var(--ink);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.prod-control-btn.active,
.prod-control-start.active,
.prod-control-stop.active,
.prod-control-restart.active{
    border-color:var(--accent);
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.prod-console,
.prod-control-console,
.prod-terminal-body,
.prod-console-lines{
    background:var(--console);
    color:var(--console-ink);
    font-family:ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size:var(--t-small);
}

.prod-terminal-body,
.prod-console-lines{
    display:grid;
    gap:2px;
    padding:var(--s-4);
}

.prod-console .prod-console-top,
.prod-terminal-card .prod-terminal-header{
    border-color:var(--console-ink-2);
    color:var(--console-ink);
    background:var(--console);
}

.prod-online-status,
.prod-running-status,
.prod-status-online{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    color:var(--up);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.prod-status-online.offline,
.prod-running-status.offline{
    color:var(--down);
}

.offline .prod-running-pulse,
.offline .prod-status-dot{
    background:var(--down);
}

/* mail app mock */
.prod-app{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
}

@media (min-width:640px){

    .prod-app{
        grid-template-columns:180px minmax(0, 1fr);
    }
}

.prod-app-sidebar,
.prod-control-sidebar{
    display:grid;
    align-content:start;
    gap:var(--s-1);
    padding:var(--s-3);
    border-right:1px solid var(--line);
    background:var(--surface-sunken);
}

.prod-sidebar-item{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    min-height:40px;
    padding:0 var(--s-3);
    border:0;
    border-radius:var(--r-control);
    background:transparent;
    color:var(--ink);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    text-align:left;
}

.prod-sidebar-item.active{
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.prod-message-list,
.prod-account-list{
    display:grid;
}

.prod-message,
.prod-mini-message,
.prod-account-row{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    padding:var(--s-3) var(--s-4);
    border-bottom:1px solid var(--line);
    font-size:var(--t-small);
}

.prod-message.active{
    background:var(--accent-soft);
}

.prod-avatar,
.prod-account-avatar{
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:36px;
    height:36px;
    border-radius:50%;
    background:var(--accent-soft);
    color:var(--accent-strong);
    font-weight:var(--w-strong);
}

.prod-account-details{
    display:grid;
    flex:1 1 auto;
    min-width:0;
}

.prod-account-active{
    color:var(--up);
    font-weight:var(--w-strong);
}

.prod-laptop,
.prod-phone{
    border:1px solid var(--line-strong);
    border-radius:var(--r-card);
    background:var(--surface);
    box-shadow:var(--shadow-card);
    overflow:hidden;
}

.prod-laptop-screen,
.prod-phone-mail{
    padding:var(--s-4);
    font-size:var(--t-small);
}

.prod-laptop-base{
    height:12px;
    background:var(--surface-sunken);
}

.prod-phone{
    width:min(220px, 70%);
}

.prod-phone-top{
    height:20px;
    background:var(--surface-sunken);
}


/* ---------------------------------------------------------
   FAQ
--------------------------------------------------------- */

.prod-faq-container{
    display:grid;
    gap:var(--s-6);
}

@media (min-width:1024px){

    .prod-faq-container:has(.prod-faq-support){
        grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);
        align-items:start;
    }
}

.prod-faq-list{
    display:grid;
    gap:var(--s-2);
}

.prod-faq-item{
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
    overflow:hidden;
}

.prod-faq-item.active{
    border-color:var(--accent);
}

.prod-faq-question{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-3);
    width:100%;
    min-height:56px;
    padding:var(--s-3) var(--s-4);
    border:0;
    background:transparent;
    color:var(--ink);
    font-size:var(--t-body);
    font-weight:var(--w-strong);
    text-align:left;
}

.prod-faq-question:focus-visible{
    outline:none;
    box-shadow:inset var(--focus-ring);
}

.prod-faq-question .icon{
    flex:0 0 auto;
    color:var(--accent);
    transition:transform var(--dur-fast) var(--ease);
}

.prod-faq-item.active .prod-faq-question .icon{
    transform:rotate(45deg);
}

.prod-faq-answer{
    display:none;
    padding:0 var(--s-4) var(--s-4);
    color:var(--ink-2);
}

.prod-faq-item.active .prod-faq-answer{
    display:block;
}

.prod-faq-support{
    display:grid;
    justify-items:start;
    gap:var(--s-3);
    padding:var(--s-5);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
}

.prod-faq-support-text{
    display:grid;
    gap:var(--s-1);
}

.prod-faq-support-text p{
    color:var(--ink-2);
    font-size:var(--t-small);
}


/* ---------------------------------------------------------
   CALL TO ACTION
--------------------------------------------------------- */

.prod-cta{
    display:grid;
    gap:var(--s-6);
    width:min(var(--container), 100% - var(--gutter) * 2);
    margin-inline:auto;
    padding:var(--s-7) var(--s-6);
    border:1px solid var(--glass-edge);
    border-radius:var(--r-panel);
    background:var(--glass);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    backdrop-filter:blur(var(--glass-blur)) saturate(160%);
}

@media (min-width:1024px){

    .prod-cta{
        grid-template-columns:minmax(0, 1.3fr) minmax(0, .7fr);
        align-items:center;
        padding:var(--s-8);
    }
}

.prod-cta-content{
    display:grid;
    justify-items:start;
    gap:var(--s-4);
}

.prod-cta-content p{
    max-width:56ch;
    color:var(--ink-2);
    font-size:var(--t-lead);
}

.prod-cta-right,
.prod-cta-action{
    display:grid;
    justify-items:start;
    gap:var(--s-3);
}

.prod-cta-price{
    display:flex;
    align-items:baseline;
    gap:var(--s-1);
    color:var(--ink-2);
}

.prod-cta-price strong{
    color:var(--ink);
    font-size:var(--t-h1);
    font-weight:var(--w-h1);
    line-height:1;
}

.prod-cta-small{
    color:var(--ink-2);
    font-size:var(--t-small);
}


/* ---------------------------------------------------------
   MAIL PAGE: hero price, inbox mock, status chips, devices
   Layout only; the words are the page's own.
--------------------------------------------------------- */

/* price: amount | divider | mailboxes, one flat card */
.page-mail-hosting .prod-hero-price{
    flex-wrap:nowrap;
    align-items:center;
    gap:var(--s-5);
    padding:var(--s-4) var(--s-5);
}

.page-mail-hosting .prod-hero-price > div:first-child{
    display:grid;
    gap:var(--s-1);
}

.page-mail-hosting .prod-hero-price > div:first-child > div{
    display:flex;
    align-items:baseline;
    gap:var(--s-1);
}

.page-mail-hosting .prod-hero-price small{
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
}

.page-mail-hosting .prod-price-divider{
    flex:none;
    align-self:stretch;
    width:1px;
    height:auto;
}

.page-mail-hosting .prod-price-info{
    flex-wrap:nowrap;
    align-items:center;
    gap:var(--s-3);
    padding:0;
    border:0;
    background:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
}

.page-mail-hosting .prod-price-info > .icon{
    flex:none;
    width:40px;
    height:40px;
    padding:10px;
    border-radius:var(--r-control);
    background:var(--accent-soft);
    color:var(--accent);
}

.page-mail-hosting .prod-price-info > div{
    display:grid;
    gap:2px;
}

.page-mail-hosting .prod-price-info strong{
    font-size:var(--t-h3);
    font-weight:var(--w-h3);
}

.page-mail-hosting .prod-price-info small{
    letter-spacing:0;
    font-weight:400;
    font-size:var(--t-small);
}

@media (max-width:479px){

    .page-mail-hosting .prod-hero-price{
        flex-direction:column;
        align-items:flex-start;
        gap:var(--s-3);
    }

    .page-mail-hosting .prod-price-divider{
        width:100%;
        height:1px;
    }
}

/* inbox panel: title over address, sender / subject / preview */
.page-mail-hosting .prod-hero-visual{
    grid-template-columns:minmax(0, 1fr);
    justify-items:stretch;
    gap:var(--s-3);
}

.page-mail-hosting .prod-panel-logo{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:var(--r-control);
    background:var(--accent-soft);
    color:var(--accent);
}

.page-mail-hosting .prod-panel-brand > div:last-child{
    display:grid;
    line-height:1.3;
}

.page-mail-hosting .prod-panel-brand span{
    color:var(--ink-2);
    font-weight:400;
}

.page-mail-hosting .prod-message{
    align-items:flex-start;
}

.page-mail-hosting .prod-message > div:nth-child(2){
    display:grid;
    flex:1 1 auto;
    min-width:0;
    line-height:1.4;
}

.page-mail-hosting .prod-message strong{
    color:var(--ink);
}

.page-mail-hosting .prod-message span{
    color:var(--ink);
}

.page-mail-hosting .prod-message p{
    max-width:none;
    color:var(--ink-2);
}

.page-mail-hosting .prod-message small{
    flex:none;
    color:var(--ink-2);
    white-space:nowrap;
}

/* status chips: one even row under the panel */
.page-mail-hosting .prod-floating-card{
    display:flex;
    min-width:0;
    padding:var(--s-3);
    border-radius:var(--r-card);
}

.page-mail-hosting .prod-float-icon{
    flex:none;
}

.page-mail-hosting .prod-floating-card > div:nth-child(2){
    display:grid;
    min-width:0;
    line-height:1.3;
}

.page-mail-hosting .prod-floating-card small{
    color:var(--ink-2);
    font-size:var(--t-micro);
    letter-spacing:.06em;
}

.page-mail-hosting .prod-floating-card .prod-status-dot{
    flex:none;
    margin-left:auto;
}

@media (min-width:640px){

    .page-mail-hosting .prod-hero-visual{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }

    .page-mail-hosting .prod-inbox-panel{
        grid-column:1 / -1;
    }

    /* icon and status dot on top, label and value under them */
    .page-mail-hosting .prod-floating-card{
        display:grid;
        grid-template-columns:auto minmax(0, 1fr);
        grid-template-areas:
            "icon dot"
            "text text";
        align-self:stretch;
        align-content:start;
        row-gap:var(--s-3);
    }

    .page-mail-hosting .prod-float-icon{ grid-area:icon; }
    .page-mail-hosting .prod-floating-card > div:nth-child(2){ grid-area:text; }

    .page-mail-hosting .prod-floating-card .prod-status-dot{
        grid-area:dot;
        justify-self:end;
        align-self:start;
        margin:var(--s-1) var(--s-1) 0 0;
    }
}

/* devices: phone notification overlaps the laptop's corner */
.page-mail-hosting .prod-device-visual{
    grid-template-columns:minmax(0, 1fr);
    grid-template-areas:"stack";
    place-items:start;
    justify-self:center;
    width:min(480px, 100%);
    padding-bottom:var(--s-7);
}

.page-mail-hosting .prod-laptop,
.page-mail-hosting .prod-phone{
    grid-area:stack;
}

.page-mail-hosting .prod-laptop{
    width:calc(100% - var(--s-6));
}

.page-mail-hosting .prod-laptop-screen{
    display:grid;
    padding:0;
}

.page-mail-hosting .prod-laptop-base{
    display:none;
}

.page-mail-hosting .prod-mini-header{
    justify-content:flex-start;
}

.page-mail-hosting .prod-mini-header .icon{
    color:var(--accent);
}

.page-mail-hosting .prod-mini-message{
    align-items:flex-start;
}

.page-mail-hosting .prod-mini-message:last-child{
    border-bottom:0;
}

/* the empty span is the unread marker */
.page-mail-hosting .prod-mini-message > span{
    flex:none;
    width:8px;
    height:8px;
    margin-top:6px;
    border-radius:50%;
    background:var(--accent);
}

.page-mail-hosting .prod-mini-message > div{
    display:grid;
    line-height:1.4;
}

.page-mail-hosting .prod-mini-message small{
    color:var(--ink-2);
}

.page-mail-hosting .prod-phone{
    align-self:end;
    justify-self:end;
    width:auto;
    margin-bottom:calc(-1 * var(--s-6));
    border-radius:var(--r-card);
    box-shadow:var(--shadow-float);
}

.page-mail-hosting .prod-phone-top{
    display:none;
}

.page-mail-hosting .prod-phone-mail{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    padding:var(--s-3) var(--s-4);
}

.page-mail-hosting .prod-phone-mail .icon{
    color:var(--accent);
}

.page-mail-hosting .prod-phone-mail small{
    color:var(--ink-2);
    font-size:var(--t-small);
}