/* =========================================================
   SERVOMIX — LEGAL PAGES
   File: css/pages/legal.css
   Used by: privacy, terms, refund-policy. Their markup and copy
   are the originals; class prefixes (privacy-, terms-, refund-)
   were normalised to legal-. Every value is a token.
========================================================= */

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

.legal-container,
.legal-policy-layout,
.legal-hero-container{
    width:min(var(--container), 100% - var(--gutter) * 2);
    margin-inline:auto;
}

.legal-policy-section,
.legal-bottom-cta{
    padding-block:var(--s-7);
}

@media (min-width:1024px){

    .legal-policy-section,
    .legal-bottom-cta{
        padding-block:var(--s-8);
    }
}

:where(main[class*="page-"]) small{
    font-size:var(--t-small);
}


/* ---------------------------------------------------------
   BREADCRUMB
--------------------------------------------------------- */

.legal-breadcrumb{
    padding-top:var(--s-5);
}

.breadcrumb-inner{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-2);
    color:var(--ink-2);
    font-size:var(--t-small);
}

.breadcrumb-inner a{
    display:inline-flex;
    align-items:center;
    gap:var(--s-1);
    min-height:32px;
    color:var(--ink-2);
    text-decoration:none;
}

.breadcrumb-inner a:hover{
    color:var(--accent-strong);
}

.breadcrumb-inner > .icon{
    width:14px;
    height:14px;
    color:var(--ink-3);
}

.breadcrumb-inner > span{
    color:var(--ink);
    font-weight:var(--w-strong);
}


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

.legal-hero{
    padding-block:var(--s-6) var(--s-5);
}

.legal-hero-container{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-5);
    align-items:end;
}

@media (min-width:1024px){

    .legal-hero-container:has(> :nth-child(2)){
        grid-template-columns:minmax(0, 1fr) auto;
    }
}

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

.legal-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;
}

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

.legal-hero h1 span{
    color:var(--accent);
}

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

/* last updated / effective date strip */
.legal-updated,
.legal-date-card,
.legal-updated-card{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-3) var(--s-5);
    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%);
    box-shadow:var(--shadow-card);
}

.legal-updated-item,
.legal-date-item,
.legal-updated-card{
    display:flex;
    align-items:center;
    gap:var(--s-3);
}

.legal-updated-card{
    width:max-content;
    max-width:100%;
}

.legal-updated-item > .icon,
.legal-date-item > .icon,
.legal-updated-card > .icon{
    width:var(--icon);
    height:var(--icon);
    color:var(--accent);
}

.legal-updated-item span,
.legal-date-item span,
.legal-updated-card span{
    display:block;
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.04em;
    text-transform:uppercase;
}

.legal-updated-item strong,
.legal-date-item strong,
.legal-updated-card strong{
    display:block;
    color:var(--ink);
    font-weight:var(--w-strong);
}

.legal-updated-divider,
.legal-date-divider{
    width:1px;
    align-self:stretch;
    background:var(--line);
}


/* ---------------------------------------------------------
   LAYOUT: sticky contents + cards
--------------------------------------------------------- */

.legal-policy-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-6);
    align-items:start;
}

@media (min-width:1024px){

    .legal-policy-layout{
        grid-template-columns:280px minmax(0, 1fr);
        gap:var(--s-7);
    }
}

.legal-main{
    display:grid;
    gap:var(--s-5);
    min-width:0;
}

.legal-sidebar{
    min-width:0;
}

@media (min-width:1024px){

    .legal-sidebar{
        position:sticky;
        top:calc(var(--nav-h) + var(--s-5));
        max-height:calc(100vh - var(--nav-h) - var(--s-7));
        overflow:auto;
        scrollbar-width:thin;
    }
}

.legal-sidebar-card{
    display:grid;
    gap:var(--s-4);
    padding: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%);
    box-shadow:var(--shadow-card);
}

.legal-sidebar-label,
.legal-sidebar-title{
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

.legal-sidebar-nav{
    display:grid;
    gap:2px;
}

/* on phones the contents become a scrolling chip row */
@media (max-width:1023px){

    .legal-sidebar-nav{
        display:flex;
        gap:var(--s-2);
        overflow-x:auto;
        padding-bottom:var(--s-1);
        scrollbar-width:thin;
    }

    .legal-sidebar-nav a{
        flex:none;
        border:1px solid var(--line);
    }
}

.legal-sidebar-nav a{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    min-height:40px;
    padding:var(--s-2) var(--s-3);
    border-radius:var(--r-control);
    color:var(--ink-2);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    text-decoration:none;
    transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.legal-sidebar-nav a span{
    color:var(--ink-3);
    font-size:var(--t-micro);
    font-variant-numeric:tabular-nums;
}

.legal-sidebar-nav a:hover{
    background:var(--surface-sunken);
    color:var(--ink);
}

.legal-sidebar-nav a.active{
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.legal-sidebar-nav a.active span{
    color:var(--accent-strong);
}

.legal-sidebar-nav a:focus-visible,
.legal-sidebar-help a:focus-visible{
    outline:none;
    box-shadow:var(--focus-ring);
}

.legal-sidebar-help{
    display:grid;
    gap:var(--s-2);
    padding:var(--s-4);
    border-radius:var(--r-control);
    background:var(--surface-sunken);
}

.legal-help-icon{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:var(--r-control);
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.legal-sidebar-help h4{
    font-size:var(--t-body);
    font-weight:var(--w-strong);
}

.legal-sidebar-help p{
    color:var(--ink-2);
    font-size:var(--t-small);
    line-height:var(--lh-small);
}

.legal-sidebar-help a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    border-radius:var(--r-pill);
    background:var(--accent);
    color:var(--ink-on-accent);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    text-decoration:none;
}

.legal-sidebar-help a:hover{
    background:var(--accent-strong);
}


/* ---------------------------------------------------------
   POLICY CARDS
--------------------------------------------------------- */

.legal-policy-card{
    display:grid;
    gap:var(--s-4);
    padding:var(--card-pad);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
    scroll-margin-top:calc(var(--nav-h) + var(--s-5));
}

@media (min-width:768px){

    .legal-policy-card{
        padding:var(--card-pad-lg);
    }
}

.policy-heading{
    display:flex;
    align-items:center;
    gap:var(--s-4);
}

.policy-icon{
    flex:none;
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border-radius:var(--r-control);
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.policy-icon .icon{
    width:var(--icon);
    height:var(--icon);
}

.policy-heading > div > span,
.policy-number{
    display:block;
    color:var(--ink-3);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
    font-variant-numeric:tabular-nums;
}

.policy-heading h2{
    font-size:var(--t-h3);
    line-height:var(--lh-h3);
    font-weight:var(--w-h3);
}

.policy-body{
    display:grid;
    gap:var(--s-4);
    color:var(--ink-2);
    line-height:var(--lh-body);
}

.policy-body > p,
.policy-body > .legal-list{
    max-width:72ch;
}

.policy-body h3{
    color:var(--ink);
    font-size:var(--t-body);
    font-weight:var(--w-strong);
}

.policy-body strong{
    color:var(--ink);
}

.policy-body a:not([class]){
    color:var(--accent-strong);
}

.legal-list{
    display:grid;
    gap:var(--s-2);
    padding:0;
    list-style:none;
}

.legal-list li{
    position:relative;
    padding-left:var(--s-5);
}

.legal-list li::before{
    content:"";
    position:absolute;
    left:var(--s-1);
    top:.7em;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--accent);
}

/* information grids */
.policy-grid,
.legal-types-grid,
.processing-grid,
.full-refund-requirements{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-3);
}

@media (min-width:640px){

    .policy-grid,
    .legal-types-grid,
    .processing-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

.policy-mini-card,
.legal-type-card,
.processing-card,
.requirement-item{
    display:grid;
    align-content:start;
    gap:var(--s-2);
    padding:var(--s-4);
    border:1px solid var(--line);
    border-radius:var(--r-control);
    background:var(--surface-sunken);
}

.processing-card,
.requirement-item{
    grid-template-columns:auto minmax(0, 1fr);
    align-items:start;
    gap:var(--s-3);
}

.policy-mini-card > .icon,
.processing-card > .icon,
.requirement-item > .icon{
    width:var(--icon);
    height:var(--icon);
    color:var(--accent);
}

.policy-mini-card p,
.legal-type-card p,
.processing-card p,
.requirement-item p{
    font-size:var(--t-small);
    line-height:var(--lh-small);
}

.processing-card span{
    display:block;
    color:var(--ink-3);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
}

.processing-card strong,
.requirement-item strong{
    display:block;
    color:var(--ink);
}

.legal-type-icon{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:var(--r-control);
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.legal-type-card.full .legal-type-icon{
    background:var(--up-soft);
    color:var(--up);
}

.legal-type-label{
    color:var(--ink-3);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

/* chip grids: prohibited uses and non-refundable cases */
.prohibited-grid,
.non-refundable-grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-2);
}

@media (min-width:640px){

    .prohibited-grid,
    .non-refundable-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

.prohibited-item,
.non-refundable-item{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    min-height:44px;
    padding:var(--s-2) var(--s-3);
    border:1px solid var(--line);
    border-radius:var(--r-control);
    background:var(--surface-sunken);
    color:var(--ink);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.prohibited-item .icon,
.non-refundable-item .icon{
    flex:none;
    color:var(--down);
}


/* ---------------------------------------------------------
   NOTES AND CALLOUTS
--------------------------------------------------------- */

.legal-note,
.legal-warning,
.legal-retention-info,
.maintenance-banner,
.success-note{
    display:flex;
    align-items:flex-start;
    gap:var(--s-3);
    padding:var(--s-4);
    border:1px solid var(--line);
    border-left:3px solid var(--accent);
    border-radius:var(--r-control);
    background:var(--accent-tint);
    color:var(--ink-2);
    font-size:var(--t-small);
    line-height:var(--lh-small);
}

.legal-note > .icon,
.legal-warning > .icon,
.legal-retention-info > .icon,
.maintenance-banner > .icon,
.success-note > .icon{
    flex:none;
    width:var(--icon);
    height:var(--icon);
    color:var(--accent-strong);
}

.legal-note strong,
.maintenance-banner strong,
.success-note strong{
    display:block;
    margin-bottom:var(--s-1);
    color:var(--ink);
}

.maintenance-banner span{
    display:block;
}

.legal-warning,
.legal-note.danger{
    border-left-color:var(--warn);
    background:var(--warn-soft);
}

.legal-warning > .icon,
.legal-note.danger > .icon{
    color:var(--warn);
}

.success-note,
.legal-note.success{
    border-left-color:var(--up);
    background:var(--up-soft);
}

.success-note > .icon,
.legal-note.success > .icon{
    color:var(--up);
}


/* ---------------------------------------------------------
   TIMELINES (retention, renewal, refund requests)
--------------------------------------------------------- */

.retention-timeline{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-3);
}

@media (min-width:640px){

    .retention-timeline{
        grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    }
}

.retention-line,
.renewal-line{
    display:none;
}

.retention-step{
    display:grid;
    align-content:start;
    gap:var(--s-2);
    padding:var(--s-4);
    border:1px solid var(--line);
    border-top:3px solid var(--accent);
    border-radius:var(--r-control);
    background:var(--surface-sunken);
}

.retention-dot{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:50%;
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.retention-step > span,
.renewal-day{
    color:var(--accent-strong);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
}

.retention-step h3{
    font-size:var(--t-small);
}

.retention-step p{
    font-size:var(--t-small);
    line-height:var(--lh-small);
}

.legal-renewal-timeline,
.request-steps{
    display:grid;
    gap:var(--s-2);
    padding-left:var(--s-4);
    border-left:2px solid var(--line-strong);
}

.renewal-step,
.request-step{
    position:relative;
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    gap:var(--s-3);
    align-items:start;
    padding:var(--s-3) var(--s-4);
    border:1px solid var(--line);
    border-radius:var(--r-control);
    background:var(--surface-sunken);
}

.renewal-step::before,
.request-step::before{
    content:"";
    position:absolute;
    left:calc(var(--s-4) * -1 - 6px);
    top:var(--s-4);
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 3px var(--page);
}

.renewal-day{
    min-width:7ch;
    padding-top:2px;
}

.renewal-step h3,
.request-step strong{
    display:block;
    color:var(--ink);
    font-size:var(--t-body);
    font-weight:var(--w-strong);
}

.renewal-step p,
.request-step p{
    font-size:var(--t-small);
    line-height:var(--lh-small);
}

.request-step > span{
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--accent);
    color:var(--ink-on-accent);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}


/* ---------------------------------------------------------
   REFUND EXAMPLE AND DOWNTIME
--------------------------------------------------------- */

.legal-example{
    display:grid;
    gap:var(--s-3);
    padding:var(--s-4);
    border:1px solid var(--line);
    border-radius:var(--r-control);
    background:var(--surface-sunken);
}

.legal-example-top{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    color:var(--ink);
}

.legal-example-top .icon{
    color:var(--accent);
}

.legal-calculation{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-2) var(--s-3);
}

.legal-calculation > div{
    display:grid;
    gap:2px;
    padding:var(--s-2) var(--s-3);
    border:1px solid var(--line);
    border-radius:var(--r-control);
    background:var(--surface);
}

.legal-calculation > div.result{
    border-color:transparent;
    background:var(--accent);
    color:var(--ink-on-accent);
}

.legal-calculation span{
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.04em;
}

.legal-calculation strong{
    color:inherit;
    font-size:var(--t-h3);
    line-height:1.1;
}

.legal-calculation > div:not(.result) strong{
    color:var(--ink);
}

.legal-calculation > .icon{
    color:var(--ink-3);
}

.downtime-card{
    display:flex;
    align-items:center;
    gap:var(--s-4);
    padding:var(--s-4);
    border:1px solid var(--line);
    border-radius:var(--r-control);
    background:var(--surface-sunken);
}

.downtime-icon{
    flex:none;
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border-radius:var(--r-control);
    background:var(--warn-soft);
    color:var(--warn);
}

.downtime-card span{
    display:block;
    color:var(--ink-3);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
}

.downtime-card strong{
    display:block;
    color:var(--ink);
    font-size:var(--t-h3);
    line-height:var(--lh-h3);
}


/* ---------------------------------------------------------
   LINKS AND CONTACT
--------------------------------------------------------- */

.legal-policy-link{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    width:max-content;
    max-width:100%;
    min-height:var(--btn-h-sm);
    padding:0 var(--s-4);
    border:1px solid var(--line-strong);
    border-radius:var(--r-pill);
    color:var(--accent-strong);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    text-decoration:none;
}

.legal-policy-link:hover{
    border-color:var(--accent);
}

.legal-contact-options{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-3);
}

@media (min-width:640px){

    .legal-contact-options{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

.legal-contact-option{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    min-height:64px;
    padding:var(--s-3) var(--s-4);
    border:1px solid var(--line);
    border-radius:var(--r-control);
    background:var(--surface-sunken);
    color:var(--ink);
    text-decoration:none;
    transition:border-color var(--dur-fast) var(--ease);
}

.legal-contact-option:hover{
    border-color:var(--accent);
}

.legal-contact-option > .icon{
    flex:none;
    width:var(--icon);
    height:var(--icon);
    color:var(--accent);
}

.legal-contact-option span{
    display:block;
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.04em;
}

.legal-contact-option strong{
    display:block;
    overflow-wrap:anywhere;
}

.legal-policy-link:focus-visible,
.legal-contact-option:focus-visible,
.legal-cta-card > a:focus-visible{
    outline:none;
    box-shadow:var(--focus-ring);
}


/* ---------------------------------------------------------
   BOTTOM CTA
--------------------------------------------------------- */

.legal-bottom-cta{
    padding-top:0;
}

.legal-cta-card{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-4);
    align-items:center;
    padding:var(--card-pad-lg);
    border-radius:var(--r-panel);
    background:var(--console);
    color:var(--console-ink);
}

@media (min-width:768px){

    .legal-cta-card{
        grid-template-columns:auto minmax(0, 1fr) auto;
        gap:var(--s-5);
    }
}

.legal-cta-icon{
    display:grid;
    place-items:center;
    width:52px;
    height:52px;
    border-radius:var(--r-control);
    background:var(--accent);
    color:var(--ink-on-accent);
}

.legal-cta-icon .icon{
    width:var(--icon-lg);
    height:var(--icon-lg);
}

.legal-cta-content{
    display:grid;
    gap:var(--s-2);
}

.legal-cta-card > div > span:first-child,
.legal-cta-label{
    color:var(--console-ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

.legal-cta-card h2,
.legal-cta-card h2 span{
    color:var(--console-ink);
    font-size:var(--t-h2);
    line-height:var(--lh-heading);
    font-weight:var(--w-h2);
}

.legal-cta-card p{
    max-width:60ch;
    color:var(--console-ink-2);
}

.legal-cta-card > a{
    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-radius:var(--r-pill);
    background:var(--accent);
    color:var(--ink-on-accent);
    font-weight:var(--w-strong);
    text-decoration:none;
    white-space:nowrap;
}

.legal-cta-card > a:hover{
    background:var(--accent-strong);
}