/* Classistry company site. Shared by every page.
   The CSP forbids inline styles, so every visual lives in this file or home.css,
   and scripts only touch CSS custom properties through the CSSOM. */
@font-face{font-family:Lato;src:url('/fonts/Lato-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Lato;src:url('/fonts/Lato-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Lato;src:url('/fonts/Lato-900.woff2') format('woff2');font-weight:900;font-display:swap}

:root{
  /* Brand guide: Midnight navy, Classistry blue, Pale sky, white. */
  --navy:#082B40;--navy-deep:#051D2C;--navy-soft:#123B53;
  --blue:#1478D4;           /* accents, the dot, large text only (4.5:1 on white fails by 0.01) */
  --blue-strong:#1270C8;    /* text links and filled buttons with white text (5.0:1) */
  --blue-ledge:#0F5DA6;
  --sky:#DCEBF6;--sky-soft:#EDF5FB;--paper:#F5F8FA;--white:#FFFFFF;
  --ink:#082B40;--ink-soft:#4A5D6A;--line:#CFDCE6;
  --on-dark:#FFFFFF;--on-dark-soft:#B9C8D3;
  --radius-s:10px;--radius-m:18px;--radius-l:28px;--radius-xl:clamp(28px,4.4vw,64px);
  --gutter:clamp(16px,5vw,72px);--max:1320px;
  --header-h:72px;
  /* Motion tokens: our own scale and curves. */
  --t-instant:100ms;--t-fast:180ms;--t-base:320ms;--t-slow:520ms;--t-story:800ms;
  --ease-out:cubic-bezier(.2,.7,.2,1);--ease-in-out:cubic-bezier(.45,0,.35,1);
  --ease-exit:cubic-bezier(.5,0,.9,.4);--ease-spring:cubic-bezier(.34,1.5,.5,1);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--navy);scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 Lato,system-ui,sans-serif;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:900;line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--white);color:var(--navy);padding:10px 16px;border-radius:999px;font-weight:700;text-decoration:none;transition:top var(--t-fast) var(--ease-out)}
.skip:focus{top:12px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Buttons with a raised edge ---------- */
.btn{--fill:var(--blue-strong);--edge:var(--blue-ledge);--text:var(--white);--depth:4px;
  position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:10px;min-height:48px;
  padding:12px 24px;margin-bottom:var(--depth);border:0;border-radius:999px;background:none;color:var(--text);
  font:700 17px/1.2 Lato,system-ui,sans-serif;text-decoration:none;cursor:pointer;
  transition:transform var(--t-instant) var(--ease-in-out)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--fill);
  box-shadow:0 var(--depth) 0 0 var(--edge);transition:box-shadow var(--t-instant) var(--ease-in-out),background-color var(--t-fast)}
.btn:hover::before{background:color-mix(in srgb,var(--fill) 88%,var(--white))}
.btn:active{transform:translateY(var(--depth))}
.btn:active::before{box-shadow:0 0 0 0 var(--edge)}
.btn--light{--fill:var(--white);--edge:#AFC6D6;--text:var(--navy)}
.btn--ghost{--fill:transparent;--edge:transparent;--text:currentColor;box-shadow:inset 0 0 0 2px currentColor;margin-bottom:0}
.btn--ghost:active{transform:none}
.btn--small{min-height:40px;padding:8px 18px;font-size:15px;--depth:3px}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:50;height:var(--header-h);color:var(--navy);
  transition:color var(--t-fast) var(--ease-out),background-color var(--t-base) var(--ease-out),box-shadow var(--t-base)}
.site-header[data-tone="dark"]{color:var(--white)}
.site-header[data-scrolled]{background:color-mix(in srgb,var(--paper) 86%,transparent);box-shadow:0 1px 0 var(--line);backdrop-filter:blur(14px) saturate(1.4)}
.site-header[data-scrolled][data-tone="dark"]{background:color-mix(in srgb,var(--navy) 84%,transparent);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.site-header .wrap{height:100%;display:flex;align-items:center;gap:clamp(12px,2.4vw,32px)}
.brand{display:inline-flex;align-items:center;text-decoration:none;margin-right:auto;min-height:44px}
.brand svg{height:34px;width:auto}
.brand .dot{fill:var(--blue)}
.brand .ink{fill:currentColor}
.brand__symbol{display:none}
.site-nav{display:flex;gap:clamp(14px,2vw,28px);font-size:16px;font-weight:700}
.site-nav a{text-decoration:none;padding:10px 2px;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 6px)/0 2px no-repeat;transition:background-size var(--t-base) var(--ease-out)}
.site-nav a:hover{background-size:100% 2px}
.site-nav a[aria-current="page"]{background-size:100% 2px}
/* The menu button appears below 901px; site.js opens the navigation as a panel. */
.menu-toggle{display:none;place-items:center;width:44px;height:44px;border:0;border-radius:999px;background:transparent;color:inherit;cursor:pointer}
.menu-toggle:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.menu-toggle svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.menu-toggle .icon-close,.menu-toggle[aria-expanded="true"] .icon-menu{display:none}
.menu-toggle[aria-expanded="true"] .icon-close{display:block}
.motion-toggle{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:999px;border:0;background:transparent;color:inherit;cursor:pointer}
.motion-toggle:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.motion-toggle svg{width:20px;height:20px}
.motion-toggle .icon-play{display:none}
.motion-toggle[aria-pressed="true"] .icon-play{display:block}
.motion-toggle[aria-pressed="true"] .icon-pause{display:none}
.header-cta{transition:transform var(--t-base) var(--ease-out),opacity var(--t-base) var(--ease-out)}
/* The header CTA drops in only once the hero CTA has left the screen (set by site.js). */
.site-header[data-cta="hidden"] .header-cta{opacity:0;transform:translate3d(0,-150%,0);pointer-events:none;
  transition:transform var(--t-fast) var(--ease-exit),opacity var(--t-fast) var(--ease-exit)}

/* ---------- Footer ---------- */
.site-footer{position:relative;background:var(--navy);color:var(--on-dark);overflow:hidden;padding-top:clamp(64px,9vw,120px)}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;padding-bottom:clamp(40px,6vw,72px)}
.footer-grid h2{font-size:15px;letter-spacing:0;font-weight:700;color:var(--on-dark-soft);margin-bottom:14px}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer-grid a{text-decoration:none;font-weight:700}
.footer-grid a:hover{text-decoration:underline;text-underline-offset:4px}
.footer-lead p{max-width:34ch;color:var(--on-dark-soft)}
.footer-lead .footer-mail{display:inline-block;margin-top:18px;font-size:clamp(20px,2.2vw,26px);font-weight:900;color:var(--white)}
.footer-stage{position:relative;padding-inline:var(--gutter);max-width:var(--max);margin-inline:auto}
.footer-word{position:relative;z-index:1;width:76%;height:auto;margin-bottom:-2%}
.footer-word path{fill:var(--white)}
/* The dot rises in the clear space to the right of the wordmark, never over it. */
.footer-dot{position:absolute;z-index:0;right:var(--gutter);bottom:0;width:13%;aspect-ratio:1;border-radius:50%;background:var(--blue);transform-origin:50% 100%}
/* Without scroll timelines, scroll.js feeds --rise (0 to 1). */
html[data-scroll-fallback] .footer-dot{transform:translateY(calc((1 - var(--rise,1)) * 80%))}
.footer-base{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;padding:22px max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter)));border-top:1px solid rgba(255,255,255,.12);background:var(--navy);font-size:15px;color:var(--on-dark-soft);max-width:none}
.footer-base a{text-decoration:none}
.footer-base a:hover{text-decoration:underline}

/* ---------- Page heroes and document pages ---------- */
.doc-hero{background:var(--navy);color:var(--on-dark);padding:calc(var(--header-h) + clamp(48px,8vw,110px)) 0 clamp(56px,7vw,96px);border-radius:0 0 var(--radius-xl) var(--radius-xl)}
.doc-hero .eyebrow{color:var(--on-dark-soft)}
.doc-hero h1{font-size:clamp(44px,7vw,92px);max-width:14ch}
.doc-hero p.lead{margin-top:22px;max-width:52ch;font-size:clamp(19px,1.6vw,22px);color:var(--on-dark-soft)}
.doc-hero{position:relative;isolation:isolate;overflow:hidden}
.doc-hero p.lead a{color:var(--white);font-weight:700;text-underline-offset:3px}
.doc-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:34px}
.doc-hero__actions .btn--ghost{color:var(--white)}
.doc-hero__meta{margin-top:18px;font-size:15px;font-weight:700;color:var(--on-dark-soft)}
.doc-hero--rings h1{font-size:clamp(42px,5.6vw,80px);max-width:16ch}
.doc-hero__rings{position:absolute;z-index:-1;right:-22%;top:50%;width:min(1000px,120%);transform:translateY(-50%);pointer-events:none}
.doc-hero__rings circle{fill:none;stroke:var(--white);stroke-opacity:.07;stroke-width:1.5}
.doc-hero__rings circle:first-child{fill:var(--blue);fill-opacity:.9;stroke:none}
.doc{max-width:760px;margin-inline:auto;padding:clamp(48px,7vw,88px) var(--gutter)}
.doc h2{font-size:clamp(26px,2.6vw,34px);margin:48px 0 14px}
.doc h2:first-child{margin-top:0}
.doc p+p{margin-top:14px}
.doc a{color:var(--blue-strong);font-weight:700;text-underline-offset:3px}
.doc ul{padding-left:22px}
.doc li+li{margin-top:8px}
.doc .link-list{list-style:none;padding:0;display:grid;gap:10px;margin:0 0 28px}
.doc .link-list li+li{margin-top:0}
.doc .note{margin-top:40px;padding:20px 24px;border-radius:var(--radius-m);background:var(--sky-soft);color:var(--ink-soft);font-size:16px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:700;margin-bottom:18px}
.eyebrow::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--blue);flex:none}

/* ---------- Section heads ---------- */
.section{padding-block:clamp(72px,10vw,140px)}
.section-head{max-width:780px;margin-bottom:clamp(32px,5vw,60px)}
.section-head h2{font-size:clamp(36px,4.8vw,68px)}
.section-head p{margin-top:18px;max-width:56ch;color:var(--ink-soft);font-size:clamp(18px,1.4vw,20px)}

/* ---------- FAQ ---------- */
.faq .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,96px)}
.faq-list{display:grid;gap:12px}
.faq details{border-radius:var(--radius-m);background:var(--white);box-shadow:0 0 0 1px var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:18px 22px;font-weight:900;font-size:19px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:var(--sky) no-repeat center/14px url('/assets/ui/plus.svg');transition:transform var(--t-base) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 22px 22px;color:var(--ink-soft)}
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:hidden;transition:block-size var(--t-base) var(--ease-out),content-visibility var(--t-base) allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}
.section-head a,.faq details a{color:var(--blue-strong);font-weight:700;text-underline-offset:3px}
.section--tint{background:var(--white);border-radius:var(--radius-xl);margin-inline:clamp(6px,1.4vw,20px)}

/* ---------- About ---------- */
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,6vw,96px);align-items:start}
.split__title{font-size:clamp(34px,4vw,56px)}
.prose p{font-size:clamp(18px,1.4vw,20px);color:var(--ink-soft)}
.prose p+p{margin-top:18px}
.principles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.principles li{padding:28px;border-radius:var(--radius-l);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.principles__num{display:block;font-weight:900;color:var(--blue-strong);font-size:15px;margin-bottom:22px}
.principles h3{font-size:22px;letter-spacing:-.015em}
.principles p{margin-top:10px;color:var(--ink-soft);font-size:16px}
.cta-band{margin:clamp(24px,4vw,56px) clamp(6px,1.4vw,20px) 0;border-radius:var(--radius-xl);background:var(--blue-strong);color:var(--white)}
.cta-band .wrap{padding-block:clamp(56px,8vw,110px);display:grid;justify-items:start;gap:18px}
.cta-band h2{font-size:clamp(36px,5vw,72px)}
.cta-band p{font-size:clamp(18px,1.5vw,21px)}
.cta-band__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:10px}
.cta-band__mail{font-weight:900;font-size:clamp(18px,1.8vw,22px);color:var(--white);text-underline-offset:4px}

/* ---------- FAQ page ---------- */
.faq-page .wrap{grid-template-columns:minmax(180px,260px) minmax(0,1fr)}
.faq-page__nav{position:sticky;top:calc(var(--header-h) + 24px);align-self:start}
.faq-page__nav ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.faq-page__nav a{display:block;padding:10px 14px;border-radius:12px;font-weight:700;text-decoration:none}
.faq-page__nav a:hover{background:var(--white)}
.faq-page__groups{display:grid;gap:clamp(48px,6vw,80px)}
.faq-group h2{font-size:clamp(28px,3vw,40px);margin-bottom:20px}

/* ---------- Support topics ---------- */
.help{padding-bottom:0}
.help-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.help-grid li{padding:26px;border-radius:var(--radius-l);background:var(--white);box-shadow:0 0 0 1px var(--line)}
.help-grid h3{font-size:21px;letter-spacing:-.015em}
.help-grid p{margin-top:10px;color:var(--ink-soft);font-size:16px}
.help-grid a,.help__more a{color:var(--blue-strong);font-weight:700;text-underline-offset:3px}
.help__more{margin-top:24px;color:var(--ink-soft)}

/* ---------- Contact and support forms ---------- */
.form-section--tight{padding-top:clamp(48px,6vw,80px)}
.form-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.form-card{padding:clamp(22px,4vw,48px);border-radius:var(--radius-l);background:var(--white);box-shadow:0 0 0 1px var(--line),0 30px 60px -40px rgba(8,43,64,.35)}
.form-card h2{font-size:clamp(28px,3vw,40px)}
.form-card__note{margin-top:10px;color:var(--ink-soft);font-size:15px}
.form{display:grid;gap:22px;margin-top:28px}
.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.field{display:grid;gap:8px;align-content:start}
.field label{font-weight:700;font-size:16px}
.field__optional{font-weight:400;color:var(--ink-soft)}
.field__hint{font-size:15px;color:var(--ink-soft)}
/* Field borders stay at 3:1 against white (WCAG 1.4.11). */
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:12px 16px;border:1.5px solid #7A93A6;border-radius:14px;background-color:var(--white);color:var(--ink);font:400 17px/1.4 Lato,system-ui,sans-serif}
.field textarea{min-height:176px;resize:vertical}
.field select{appearance:none;padding-right:46px;background:var(--white) no-repeat right 16px center/14px url('/assets/ui/chevron.svg')}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-color:var(--blue-strong);border-radius:14px}
.field [aria-invalid="true"]{border-color:#B42318;border-width:2px}
.field__error{font-size:15px;font-weight:700;color:#B42318}
.form__trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form .note{padding:16px 20px;border-radius:var(--radius-m);background:var(--sky-soft);color:var(--ink-soft);font-size:15px}
.form__privacy{font-size:15px;color:var(--ink-soft)}
.form__privacy a,.form-aside a{color:var(--blue-strong);font-weight:700;text-underline-offset:3px}
.form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.form__status{font-weight:700}
.form[aria-busy="true"] [data-submit]{opacity:.72;cursor:progress}
.form-done{margin-top:24px;padding:28px;border-radius:var(--radius-m);background:var(--sky-soft)}
.form-done h3{font-size:clamp(24px,2.4vw,30px)}
.form-done p{margin:10px 0 20px;color:var(--ink-soft)}
.form-aside{display:grid;gap:30px;padding-top:8px}
.form-aside h2{font-size:20px;letter-spacing:-.01em;line-height:1.2}
.form-aside p,.form-aside ol{margin-top:8px;color:var(--ink-soft);font-size:16px}
.form-aside ol{padding-left:20px;display:grid;gap:6px}

/* ---------- Legal documents ---------- */
.legal{padding-block:clamp(48px,7vw,96px)}
.legal__layout{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,760px);gap:clamp(32px,6vw,96px);justify-content:center}
.legal__toc{position:sticky;top:calc(var(--header-h) + 24px);align-self:start;max-height:calc(100svh - var(--header-h) - 48px);overflow-y:auto;padding-right:6px}
.legal__toc h2{font-size:15px;letter-spacing:0;color:var(--ink-soft);margin-bottom:12px}
.legal__toc ol{margin:0;padding-left:24px;display:grid;gap:6px;font-size:15px;color:var(--ink-soft)}
.legal__toc a{font-weight:700;text-decoration:none;color:var(--ink)}
.legal__toc a:hover{text-decoration:underline;text-underline-offset:3px}
.legal__body{font-size:17px}
.legal__body h2{font-size:clamp(24px,2.4vw,30px);line-height:1.15;margin:48px 0 12px}
.legal__body p+p,.legal__body ul+p,.legal__body p+ul,.legal__body div+p{margin-top:14px}
.legal__body ul{padding-left:22px;margin-bottom:0}
.legal__body li+li{margin-top:8px}
.legal__body a{color:var(--blue-strong);font-weight:700;text-underline-offset:3px}
.legal__summary{margin-top:32px;padding:24px 28px;border-radius:var(--radius-m);background:var(--sky-soft)}
.legal__summary h2{margin:0 0 10px;font-size:22px}
.legal__summary ul{margin-top:0}
.legal__table-wrap{overflow-x:auto;margin-top:14px}
.legal__table{width:100%;border-collapse:collapse;font-size:16px}
.legal__table th,.legal__table td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.legal__table thead th{font-size:14px;color:var(--ink-soft)}
.legal__table tbody th{font-weight:700;white-space:nowrap}

@media (max-width:1100px){
  .principles,.help-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .menu-toggle{display:inline-grid}
  /* Without scripts the button can't open anything; the footer carries every link. */
  html:not([data-js]) .menu-toggle{visibility:hidden}
  .site-nav{position:fixed;left:0;right:0;top:var(--header-h);display:none;flex-direction:column;gap:0;padding:8px var(--gutter) 28px;
    max-height:calc(100svh - var(--header-h));overflow-y:auto;background:var(--navy);color:var(--white);font-size:21px;box-shadow:0 30px 40px -30px rgba(0,0,0,.6)}
  .site-nav a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12);background:none}
  .site-nav a[aria-current="page"]{color:var(--sky)}
  .site-header[data-menu-open] .site-nav{display:flex}
  .site-header[data-menu-open][data-tone]{background:var(--navy);color:var(--white);box-shadow:none}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-lead{grid-column:1/-1}
  .faq .wrap,.split,.form-layout,.legal__layout{grid-template-columns:minmax(0,1fr)}
  .faq-page__nav,.legal__toc{position:static;max-height:none}
  .faq-page__nav ul{display:flex;flex-wrap:wrap;gap:8px}
  .faq-page__nav a{background:var(--white);box-shadow:0 0 0 1px var(--line);border-radius:999px;padding:8px 16px}
  .legal__toc{padding:22px 24px;border-radius:var(--radius-m);background:var(--white);box-shadow:0 0 0 1px var(--line)}
}
@media (max-width:520px){
  :root{--header-h:64px}
  .brand__full{display:none}
  .brand__symbol{display:block;height:32px}
  .header-cta{padding-inline:16px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .principles,.help-grid,.form__row{grid-template-columns:1fr}
  .legal__table tbody th{white-space:normal}
  .legal__table th,.legal__table td{padding-inline:8px}
  .form-card{border-radius:var(--radius-m)}
}
/* Motion paused by the visitor, or reduced by their system: everything rests. */
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .motion-toggle{display:none}
}
@media (forced-colors:active){.btn::before{border:2px solid ButtonText}.footer-dot{forced-color-adjust:none}}