/* =========================================================
   ASTORRE X — PRODUCT PREVIEW PAGES

   Shared by /smart, /opportunity and /phone. These three products are not
   commercially available, and the page has to say so without apologising for
   it — hence the stage banner at the top of every one of them, before any
   capability is described.

   The legal pages under /legal/ use it too; their long-form styles are in
   the LEGAL PAGES section at the end.

   Built on the tokens already defined in style.css, so these pages inherit the
   site's palette rather than inventing a second one.
   ========================================================= */

.preview-page{
    --pv-gap:clamp(20px,2vw,34px);
    --pv-shell:min(calc(100% - 72px),1180px);
    color:var(--text,#f4f7f8);
}

.preview-shell{
    width:var(--pv-shell);
    margin-inline:auto;
}


/* ---------------------------------------------------------
   STAGE BANNER
   The first thing on the page, deliberately. A visitor should
   know what they are looking at before they read a feature.
   --------------------------------------------------------- */

.pv-stage{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:10px 18px;
    border:1px solid var(--line-strong,rgba(207,242,250,.24));
    border-radius:999px;
    background:rgba(131,222,241,.06);
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--cold-2,#83def1);
}

.pv-stage::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--cold-2,#83def1);
    box-shadow:0 0 0 4px rgba(131,222,241,.16);
}


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

.pv-hero{
    position:relative;
    padding:clamp(72px,9vw,132px) 0 clamp(48px,6vw,84px);
    overflow:hidden;
}

.pv-hero::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.14;
    background-image:
        linear-gradient(rgba(132,218,237,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(132,218,237,.035) 1px,transparent 1px);
    background-size:70px 70px;
    mask-image:linear-gradient(180deg,#000,transparent 82%);
}

.pv-hero > .preview-shell{
    position:relative;
    z-index:2;
}

.pv-hero h1{
    margin:26px 0 0;
    max-width:17ch;
    font-size:clamp(2.5rem,6vw,4.4rem);
    line-height:1.02;
    letter-spacing:-.02em;
    font-weight:600;
}

.pv-lede{
    margin:24px 0 0;
    max-width:62ch;
    font-size:clamp(1.02rem,1.5vw,1.2rem);
    line-height:1.62;
    color:var(--text-soft,#d9e1e4);
}

.pv-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:38px;
}

.pv-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 26px;
    border-radius:10px;
    border:1px solid var(--line-strong,rgba(207,242,250,.24));
    font-size:.94rem;
    font-weight:600;
    letter-spacing:.01em;
    text-decoration:none;
    color:var(--text,#f4f7f8);
    transition:border-color .18s ease,background-color .18s ease;
}

.pv-btn:hover,
.pv-btn:focus-visible{
    border-color:var(--cold-2,#83def1);
    background:rgba(131,222,241,.08);
}

.pv-btn-primary{
    border-color:transparent;
    background:linear-gradient(120deg,#83def1,#d9f9ff);
    color:#02171c;
}

.pv-btn-primary:hover,
.pv-btn-primary:focus-visible{
    background:linear-gradient(120deg,#9ce8f7,#ffffff);
    color:#02171c;
}


/* ---------------------------------------------------------
   SECTIONS
   --------------------------------------------------------- */

.pv-section{
    padding:clamp(52px,6.5vw,94px) 0;
    border-top:1px solid var(--line,rgba(207,242,250,.12));
}

.pv-section h2{
    margin:0 0 10px;
    max-width:24ch;
    font-size:clamp(1.6rem,3vw,2.35rem);
    line-height:1.14;
    letter-spacing:-.015em;
    font-weight:600;
}

.pv-section-intro{
    margin:0 0 clamp(30px,3.5vw,46px);
    max-width:62ch;
    line-height:1.62;
    color:var(--muted,#8f9ca3);
}

.pv-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
    gap:var(--pv-gap);
}

.pv-card{
    padding:26px 26px 28px;
    border:1px solid var(--line,rgba(207,242,250,.12));
    border-radius:14px;
    background:var(--panel,rgba(255,255,255,.028));
}

.pv-card h3{
    margin:0 0 10px;
    font-size:1.05rem;
    font-weight:600;
    letter-spacing:-.005em;
}

.pv-card p{
    margin:0;
    font-size:.95rem;
    line-height:1.6;
    color:var(--muted,#8f9ca3);
}


/* ---------------------------------------------------------
   LIMITS
   The honest-limits block. It is styled as prominently as the
   capability grid on purpose: a reader who skims must still
   hit it.
   --------------------------------------------------------- */

.pv-limits{
    padding:clamp(28px,3.5vw,42px);
    border:1px solid var(--line-strong,rgba(207,242,250,.24));
    border-radius:16px;
    background:rgba(255,255,255,.022);
}

.pv-limits ul{
    margin:0;
    padding:0;
    list-style:none;
    display:grid;
    gap:14px;
}

.pv-limits li{
    position:relative;
    padding-left:26px;
    line-height:1.6;
    color:var(--text-soft,#d9e1e4);
}

.pv-limits li::before{
    content:"";
    position:absolute;
    left:0;
    top:.62em;
    width:12px;
    height:1px;
    background:var(--cold-3,#397f90);
}


/* ---------------------------------------------------------
   CLOSING
   --------------------------------------------------------- */

.pv-final{
    padding:clamp(56px,7vw,104px) 0 clamp(72px,8vw,120px);
    border-top:1px solid var(--line,rgba(207,242,250,.12));
}

.pv-final h2{
    margin:0 0 16px;
    max-width:20ch;
    font-size:clamp(1.7rem,3.4vw,2.6rem);
    line-height:1.1;
    letter-spacing:-.018em;
    font-weight:600;
}

.pv-final p{
    margin:0 0 32px;
    max-width:58ch;
    line-height:1.62;
    color:var(--muted,#8f9ca3);
}


@media (max-width:760px){
    .preview-page{
        --pv-shell:min(calc(100% - 40px),1180px);
    }

    .pv-actions .pv-btn{
        flex:1 1 100%;
    }
}


/* =========================================================
   LEGAL PAGES — /legal/privacy, /legal/terms, /legal/delete-account

   Long-form reading on the same tokens. The measure is held to
   about 72 characters, headings carry the structure, and tables
   scroll inside their own box on a phone instead of pushing the
   page sideways.
   ========================================================= */

.legal-page .pv-hero h1{
    max-width:20ch;
}

.lg-meta{
    margin:22px 0 0;
    font-size:.86rem;
    letter-spacing:.04em;
    color:var(--muted-2,#66767d);
}

.lg-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:clamp(28px,4vw,56px);
}

@media (min-width:1040px){
    .lg-layout{
        grid-template-columns:230px minmax(0,1fr);
        align-items:start;
    }
}

.lg-toc{
    padding:20px 22px;
    border:1px solid var(--line,rgba(207,242,250,.12));
    border-radius:14px;
    background:var(--panel,rgba(255,255,255,.028));
}

@media (min-width:1040px){
    .lg-toc{
        position:sticky;
        top:110px;
    }
}

.lg-toc b{
    display:block;
    margin-bottom:12px;
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--muted-2,#66767d);
}

.lg-toc ol{
    margin:0;
    padding:0 0 0 1.2em;
    display:grid;
    gap:8px;
    font-size:.9rem;
    line-height:1.4;
    color:var(--muted,#8f9ca3);
}

.lg-toc a{
    color:var(--text-soft,#d9e1e4);
}

.lg-toc a:hover,
.lg-toc a:focus-visible{
    color:var(--cold-2,#83def1);
}

.lg-doc{
    max-width:72ch;
    min-width:0;
    font-size:1rem;
    line-height:1.7;
    color:var(--text-soft,#d9e1e4);
    overflow-wrap:break-word;
}

.lg-doc h2{
    margin:56px 0 14px;
    font-size:clamp(1.3rem,2.4vw,1.65rem);
    line-height:1.2;
    letter-spacing:-.01em;
    font-weight:600;
    color:var(--text,#f4f7f8);
    scroll-margin-top:110px;
}

.lg-doc h2:first-child{
    margin-top:0;
}

.lg-doc h3{
    margin:30px 0 8px;
    font-size:1.05rem;
    font-weight:600;
    color:var(--text,#f4f7f8);
}

.lg-doc p,
.lg-doc ul,
.lg-doc ol{
    margin:0 0 16px;
}

.lg-doc ul,
.lg-doc ol{
    padding-left:1.3em;
}

.lg-doc li{
    margin-bottom:8px;
}

.lg-doc li::marker{
    color:var(--cold-3,#397f90);
}

.lg-doc strong{
    color:var(--text,#f4f7f8);
    font-weight:600;
}

.lg-doc a{
    color:var(--cold-2,#83def1);
    text-decoration:underline;
    text-decoration-color:rgba(131,222,241,.4);
    text-underline-offset:3px;
}

.lg-doc a:hover,
.lg-doc a:focus-visible{
    text-decoration-color:currentColor;
}

.lg-path{
    display:inline;
    padding:2px 8px;
    border:1px solid var(--line,rgba(207,242,250,.12));
    border-radius:6px;
    background:rgba(131,222,241,.06);
    font-weight:600;
    color:var(--text,#f4f7f8);
    white-space:normal;
}

.lg-table-wrap{
    margin:0 0 20px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border:1px solid var(--line,rgba(207,242,250,.12));
    border-radius:12px;
}

.lg-table{
    width:100%;
    min-width:540px;
    border-collapse:collapse;
    font-size:.92rem;
    line-height:1.55;
}

.lg-table th,
.lg-table td{
    padding:12px 16px;
    text-align:left;
    vertical-align:top;
    border-bottom:1px solid var(--line,rgba(207,242,250,.12));
}

.lg-table tr:last-child td{
    border-bottom:0;
}

.lg-table th{
    font-size:.74rem;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--muted,#8f9ca3);
    background:rgba(255,255,255,.02);
}

.lg-table td:first-child{
    color:var(--text,#f4f7f8);
    font-weight:600;
}

.lg-note{
    margin:0 0 20px;
    padding:18px 20px;
    border-left:2px solid var(--cold-2,#83def1);
    border-radius:0 12px 12px 0;
    background:rgba(131,222,241,.05);
}

.lg-note p:last-child{
    margin-bottom:0;
}


/* Delete-account: the steps are the page, so they get cards. */

.lg-steps{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:var(--pv-gap,24px);
}

.lg-step{
    padding:28px 26px 30px;
    border:1px solid var(--line-strong,rgba(207,242,250,.24));
    border-radius:16px;
    background:var(--panel,rgba(255,255,255,.028));
}

.lg-step-kicker{
    display:block;
    margin-bottom:10px;
    font-size:.74rem;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--cold-2,#83def1);
}

.lg-step h3{
    margin:0 0 14px;
    font-size:1.2rem;
    font-weight:600;
    line-height:1.3;
}

.lg-step ol{
    margin:0 0 16px;
    padding-left:1.3em;
    display:grid;
    gap:8px;
    line-height:1.6;
    color:var(--text-soft,#d9e1e4);
}

.lg-step li::marker{
    color:var(--cold-2,#83def1);
    font-weight:600;
}

.lg-step p{
    margin:0 0 12px;
    font-size:.95rem;
    line-height:1.6;
    color:var(--muted,#8f9ca3);
}

.lg-step p:last-child{
    margin-bottom:0;
}

.lg-step a{
    color:var(--cold-2,#83def1);
    text-decoration:underline;
    text-underline-offset:3px;
    overflow-wrap:anywhere;
}

.lg-step .pv-actions{
    margin-top:20px;
}


/* Pricing: the two prices read as figures, not as sentences. */

.pv-price{
    display:flex;
    align-items:baseline;
    gap:8px;
    margin:4px 0 14px;
}

.pv-price strong{
    font-size:clamp(2rem,4vw,2.6rem);
    font-weight:600;
    letter-spacing:-.02em;
    color:var(--text,#f4f7f8);
}

.pv-price span{
    font-size:.95rem;
    color:var(--muted,#8f9ca3);
}

.pv-card .pv-actions{
    margin-top:22px;
}

.pv-price-foot{
    margin:clamp(24px,3vw,36px) 0 0;
}

/* Inline links in running text. The global reset strips underlines from every
   link, which leaves a link inside a sentence indistinguishable from the words
   around it. Buttons keep their own styling. */
.preview-page p a:not(.pv-btn){
    color:var(--cold-2,#83def1);
    text-decoration:underline;
    text-decoration-color:rgba(131,222,241,.4);
    text-underline-offset:3px;
}

.preview-page p a:not(.pv-btn):hover,
.preview-page p a:not(.pv-btn):focus-visible{
    text-decoration-color:currentColor;
}

.pv-price-note{
    display:inline-block;
    margin:0 0 14px;
    padding:4px 12px;
    border-radius:999px;
    background:rgba(131,222,241,.1);
    font-size:.8rem;
    font-weight:600;
    letter-spacing:.04em;
    color:var(--cold-2,#83def1);
}


@media (max-width:760px){
    .lg-doc h2{
        margin-top:44px;
    }

    .lg-steps{
        grid-template-columns:minmax(0,1fr);
    }

    .lg-step{
        padding:22px 20px 24px;
    }
}


/* Legal tables on a phone: one card per row instead of a sideways scroll. */

@media (max-width:640px){
    .lg-table-wrap{
        overflow:visible;
    }

    .lg-table{
        min-width:0;
    }

    .lg-table thead{
        position:absolute;
        width:1px;
        height:1px;
        overflow:hidden;
        clip:rect(0 0 0 0);
        white-space:nowrap;
    }

    .lg-table,
    .lg-table tbody,
    .lg-table tr,
    .lg-table td{
        display:block;
    }

    .lg-table tr{
        padding:14px 16px;
        border-bottom:1px solid var(--line,rgba(207,242,250,.12));
    }

    .lg-table tr:last-child{
        border-bottom:0;
    }

    .lg-table td{
        padding:0;
        border-bottom:0;
    }

    .lg-table td + td{
        margin-top:6px;
    }

    .lg-table td[data-label]::before{
        content:attr(data-label) ": ";
        font-weight:600;
        color:var(--muted,#8f9ca3);
    }
}