/* =========================================================================
   Sapey website · shared styles
   Used by every page. Page-specific styles live next to each page.
   Source: approved visual direction (Azure) and the website base styles
   agreed in the language and visual direction delivery, October 2026.

   COLOR MEANING (never break these):
   - Azure      buttons, links, action moments
   - Sky        glow and graphics only, never text
   - Jade       only means Allowed (or a record that checks out)
   - Burgundy   only means Refused. Same weight as Allowed. Never an error
   - Amber      only means Waiting. Fill or marker, never text
   - Violet, mauve, stone   decoration only
   - Fault red  only a real system fault. Not used on the website
   ========================================================================= */

@font-face{font-family:"Hanken Grotesk";src:url("/assets/fonts/hanken-grotesk.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
/* the real italic, bold only (Hanken Grotesk, Open Font License), so italic words are never a slanted upright */
@font-face{font-family:"Hanken Grotesk";src:url("/assets/fonts/hanken-grotesk-italic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/assets/fonts/jetbrains-mono.woff2") format("woff2");font-weight:400 500;font-style:normal;font-display:swap}

:root{
  /* neutrals */
  --s-paper:#F8F7F4; --s-linen:#FFFFFF; --s-mist:#EEEDE9; --s-line:#E4E2DC;
  --s-ink:#26241F; --s-ink2:#6C685F;
  /* signal */
  --s-azure:#2D5BA8; --s-azure-light:#5682C4; --s-sky:#7FA8E0;
  --s-on-az:#FFFFFF; --s-on-az2:#E0E6F2;
  /* the three answers */
  --s-jade:#2A7D69; --s-burg:#7E3040; --s-amber:#E3A21C;
  /* decoration only */
  --s-violet:#6951B8; --s-mauve:#AF6A84; --s-stone:#8A9673; --s-stone-ink:#5F6B48; --s-mauve-ink:#94506A;
  /* tints */
  --s-az-tint:rgba(45,91,168,.07); --s-jade-tint:rgba(42,125,105,.12);
  --s-burg-tint:rgba(126,48,64,.10); --s-amber-tint:rgba(227,162,28,.18);
  /* shape */
  --s-r-card:18px; --s-r-input:12px; --s-r-pill:999px;
  /* type */
  --f-body:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* spacing (8 point rhythm) */
  --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:24px; --sp-5:32px; --sp-6:48px; --sp-7:64px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--s-paper);color:var(--s-ink);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
h1,h2,h3,h4,p{margin:0}
a{color:var(--s-azure)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--s-azure);outline-offset:3px;border-radius:6px}

.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--s-ink);color:#FFF;padding:10px 16px;border-radius:var(--s-r-input);text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* layout */
.sx{max-width:1200px;margin:0 auto;padding-inline:40px;position:relative}
.sec{padding-block:96px}
.hr{border-top:1px solid var(--s-line)}
.on-white{background:var(--s-linen)}

/* text */
.eb{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--s-ink2)}
.eb.dot::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:10px;vertical-align:1px;background:var(--dot,var(--s-azure))}
.pilltag{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--s-azure);border:1px solid rgba(45,91,168,.45);background:var(--s-linen);border-radius:8px;padding:6px 12px;text-decoration:none}
a.pilltag:hover{background:var(--s-az-tint)}
.h2{font-size:clamp(31px,4.6vw,49px);line-height:1.08;font-weight:700;letter-spacing:-.02em;margin:16px 0;text-wrap:balance}
.lead{font-size:18px;line-height:1.6;color:var(--s-ink2);max-width:58ch}
.center{text-align:center}
.center .lead,.center .h2{margin-inline:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--s-r-pill);background:var(--s-azure);color:#FFFFFF;text-decoration:none;font-weight:600;font-size:15px;border:0;cursor:pointer;white-space:nowrap;font-family:var(--f-body);transition:filter .15s ease,background .15s ease}
.btn:hover{filter:brightness(.92)}
.btn.line{background:transparent;color:var(--s-azure);box-shadow:inset 0 0 0 1.5px var(--s-azure)}
.btn.line:hover{filter:none;background:var(--s-az-tint)}
.btn.white{background:#FFFFFF;color:var(--s-azure)}
.btn.white:hover{filter:none;background:var(--s-paper)}

/* answer badge: ONE pattern for all three answers, same size and weight */
.ans{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:13px;line-height:1;color:var(--s-ink);padding:5px 11px 5px 6px;border-radius:var(--s-r-pill);white-space:nowrap;justify-self:start}
.ans svg{width:16px;height:16px;flex:none}
.ans.a{background:var(--s-jade-tint)} .ans.r{background:var(--s-burg-tint)} .ans.w{background:var(--s-amber-tint)}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--s-line)}
.head{display:flex;align-items:center;gap:28px;min-height:72px}
/* the wordmark: inline SVG, letters in ink and the dot in Azure. The box keeps the height of the old
   text wordmark and the letters sit where its letters sat, so nothing around it moves */
.word{display:block;width:fit-content;height:30px;padding-top:11px;color:var(--s-ink)}
.foot .word{height:31.4px}
.word svg{display:block;height:21.5px;width:auto;overflow:visible}
.word .dot{fill:var(--s-azure)}
.nav{display:flex;gap:28px;margin-left:auto;align-items:center;font-size:15px;font-weight:500}
.nav a{color:var(--s-ink);text-decoration:none;padding:10px 0}
.nav a:hover,.nav a[aria-current="page"]{color:var(--s-azure)}
.nav .signin{color:var(--s-ink2)}
.menu{display:none;margin-left:auto;background:var(--s-linen);border:1px solid var(--s-line);border-radius:var(--s-r-pill);min-height:44px;padding:0 16px;font:500 15px var(--f-body);color:var(--s-ink);cursor:pointer}
.drawer{display:none}

/* closing band, shared by every page */
.close{background:radial-gradient(45% 70% at 72% 100%,rgba(127,168,224,.55),rgba(127,168,224,0)),var(--s-azure);color:#FFFFFF;position:relative;overflow:hidden}
.close .sx{display:grid;justify-items:center;text-align:center;padding-block:88px;z-index:1}
.close h2{font-size:clamp(31px,4.6vw,49px);line-height:1.08;font-weight:700;letter-spacing:-.02em;margin:0 auto 12px;max-width:none;text-wrap:balance}
.close h2 .ln{margin-inline:auto}
.close p{color:var(--s-on-az2);margin:0 0 28px;font-size:16px}
.close p a{color:#FFFFFF}
/* the copy button next to the email address (added by site.js; without JavaScript the address stays a
   mailto link). A 44px touch target that does not make the line taller */
.copy-mail{display:inline-grid;place-items:center;width:44px;height:44px;margin:-12px 0 -12px 2px;vertical-align:middle;padding:0;border:0;border-radius:var(--s-r-input);background:transparent;color:#FFFFFF;cursor:pointer}
.copy-mail svg{width:18px;height:18px}
.copy-mail .i-done,.copy-mail.is-done .i-copy{display:none}
.copy-mail.is-done .i-done{display:block}
.copy-mail:hover{background:rgba(255,255,255,.16)}
.copy-mail:focus-visible{outline:2px solid #FFFFFF;outline-offset:0}
.copy-done{margin-left:var(--sp-1);font-size:14px;font-weight:600;color:#FFFFFF}
.close .mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:760px;margin-top:var(--sp-6);text-align:left}
.close .mini a{display:block;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-radius:14px;padding:20px 22px;color:#FFFFFF;text-decoration:none}
.close .mini a b{display:block;font-size:17px;margin-bottom:4px}
.close .mini a span{color:var(--s-on-az2);font-size:14px}
.close .mini a:hover{background:rgba(255,255,255,.16)}
.close .shapes{position:absolute;z-index:0;right:-40px;bottom:-60px;width:420px;height:300px;pointer-events:none;opacity:.9}

/* headlines that break between sentences. On desktop (1021px and wider) each sentence (.ln) starts on its
   own line and is never broken inside; a sentence marked .wrap may take two lines. On tablets and phones
   the lines wrap naturally. The text stays one heading, read as one sentence after the other.
   Use: <h2 class="h2 lines"><span class="ln">First sentence.</span> <span class="ln">Second one.</span></h2> */
@media (min-width:1021px){
  :is(h1,h2,h3).lines{max-width:none}
  .lines .ln{display:block;width:fit-content;white-space:nowrap}
  .lines .ln.wrap{width:auto;white-space:normal}
  .center .lines .ln{margin-inline:auto}
  /* the closing band: a headline built this way spans the whole band; the line, button and links go under it */
}

/* footer */
.foot{padding-block:56px 32px;background:var(--s-paper);font-size:14px;color:var(--s-ink2)}
.foot .row{display:flex;gap:32px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
.foot .tagline{margin:12px 0 0;max-width:34ch}
.foot .tagline.lines{max-width:none}
.foot .tagline .ln{display:block}
.foot nav{display:flex;gap:24px;flex-wrap:wrap}
.foot nav a{color:var(--s-ink);text-decoration:none;padding:12px 0}
.foot nav a:hover{color:var(--s-azure)}
.foot .legal{border-top:1px solid var(--s-line);margin-top:32px;padding-top:16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.foot .legal a{color:var(--s-ink2)}
.colorbar{display:flex;height:6px;border-radius:999px;overflow:hidden;margin-top:28px;max-width:240px}
.colorbar i{flex:1}

/* motion controls (WCAG 2.2.2: anything moving longer than 5 seconds can be paused) */
.motion-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--s-r-pill);border:1px solid var(--s-line);background:rgba(255,255,255,.92);color:var(--s-ink);font:500 13px var(--f-body);cursor:pointer}
.motion-btn:hover{background:#FFFFFF;border-color:var(--s-ink2)}
.motion-btn svg{width:14px;height:14px}
.motion-btn.icon{width:44px;min-height:44px;height:44px;padding:0;justify-content:center;background:rgba(255,255,255,.7);border-color:transparent;color:var(--s-ink2);opacity:.75}
.motion-btn.icon:hover,.motion-btn.icon:focus-visible{opacity:1;background:#FFFFFF;border-color:var(--s-line);color:var(--s-ink)}
.motion-btn.icon svg{width:12px;height:12px}
.is-paused *{animation-play-state:paused!important}

/* reveal on scroll: only added by script, so text is never hidden without it */
.rv{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease;transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* simple pages (sign in, coming soon, 404) */
.simple{min-height:calc(100vh - 73px - 260px);display:grid;align-items:center}
.simple .sx{padding-block:120px}
.simple .card{max-width:560px;background:var(--s-linen);border:1px solid var(--s-line);border-radius:var(--s-r-card);padding:40px}
.simple h1{font-size:clamp(31px,4vw,39px);line-height:1.15;letter-spacing:-.01em;margin:16px 0 12px}
.simple p{color:var(--s-ink2);margin-bottom:24px}
.simple .actions{display:flex;gap:12px;flex-wrap:wrap}

/* interface pieces, shared by every page: card, header row, list row, small label, meta text, stack,
   icon, pill, dashed pill, tag, moving dot, flowing line, the three answers card, the icon tile.
   They are small pieces of the Sapey interface. Only outcomes, never internal names or record fields. */
.ui-card{background:var(--s-linen);border:1px solid var(--s-line);border-radius:var(--s-r-input);box-shadow:var(--shadow,0 18px 40px color-mix(in srgb,var(--s-ink) 8%,transparent));overflow:hidden}
.ui-head{display:flex;align-items:center;gap:var(--sp-2);padding:var(--py,calc(var(--sp-2) + var(--sp-1))) var(--sp-3);border-bottom:1px solid var(--s-mist);font-size:15px;font-weight:700}
.ui-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:0 var(--sp-3);border-bottom:1px solid var(--s-mist)}
.ui-row:last-child{border-bottom:0}
.ui-label{font-family:var(--f-mono);font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--s-ink2)}
.ui-meta{font-size:12px;font-weight:400;color:var(--s-ink2)}
.ui-stack{display:flex;flex-direction:column;gap:var(--sp-1)}
.ui-i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ui-pill{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) 14px var(--sp-2) 10px;border-radius:var(--s-r-pill);background:var(--s-linen);border:1px solid var(--s-line);box-shadow:0 6px 18px color-mix(in srgb,var(--s-ink) 6%,transparent);font-size:13px;font-weight:600;white-space:nowrap}
.ui-dash,.ui-tag{display:inline-flex;align-items:center;padding:var(--sp-1) 10px;border-radius:var(--s-r-pill);border:1px dashed var(--s-stone);background:var(--s-linen);font-size:12px;font-weight:600;white-space:nowrap}
.ui-tag{border-style:solid;justify-self:end}
.ui-dot{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--dot,var(--s-azure));box-shadow:0 0 0 5px color-mix(in srgb,var(--dot,var(--s-azure)) 15%,transparent)}
.ui-flow{height:2px;background:repeating-linear-gradient(90deg,var(--line,color-mix(in srgb,var(--s-azure) 35%,transparent)) 0 5px,transparent 5px 14px)}
.run .ui-flow{animation:ui-flow 1.4s linear infinite}
@keyframes ui-flow{to{background-position:28px 0}}
@keyframes ui-flow-down{to{background-position:0 28px}}

/* the three answers card */
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px}
.xcard{position:relative;background:var(--s-linen);border:1px solid var(--s-line);border-radius:6px;padding:32px 28px;display:grid;gap:14px;align-content:start}
.xcard::before{content:"";position:absolute;left:-1px;top:-1px;width:56px;height:3px;border-radius:6px 0 0 0;background:var(--acc)}
.xcard.a{--acc:var(--s-jade)} .xcard.r{--acc:var(--s-burg)} .xcard.w{--acc:var(--s-amber)}
.xcard .val{font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;color:var(--s-ink2)}
.xcard h3{font-size:22px;line-height:1.3;font-weight:700}
/* tabs (Home "How it works", Product "Three answers"): one row of buttons in a white frame; site.js
   gives them the standard tab keys. On phones they wrap into a two column grid */
.tabs{display:inline-grid;grid-auto-flow:column;gap:4px;padding:4px;border:1px solid var(--s-line);border-radius:14px;background:var(--s-linen)}
.tab{font:500 16px var(--f-body);color:var(--s-ink2);background:transparent;border:0;border-radius:10px;padding:12px 22px;cursor:pointer;min-height:44px;display:flex;gap:8px;align-items:center}
.tab small{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:12px;color:var(--s-azure)}
.tab small::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.tab[aria-selected="true"]{background:var(--s-azure);color:#FFFFFF}
.tab[aria-selected="true"] small{color:var(--s-on-az2)}
.tab:not([aria-selected="true"]):hover{background:var(--s-az-tint);color:var(--s-ink)}

/* card titles: never one word alone on the last line (balance does it at every width; site.js keeps
   the last two words together where the browser has no text-wrap:balance) */
:is([class*="card"],.answer,.nitem) h3{text-wrap:balance}
.xcard p{font-size:15px;line-height:1.6;color:var(--s-ink2)}
.xcard .rc{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--s-azure)}

/* the icon tile */
.icon-tile{width:44px;height:44px;border-radius:12px;display:grid;place-items:center}
.icon-tile svg{width:22px;height:22px}
.icon-tile.v{background:rgba(105,81,184,.14);color:var(--s-violet)}
.icon-tile.m{background:rgba(175,106,132,.14);color:var(--s-mauve-ink)}
.icon-tile.s{background:rgba(138,150,115,.2);color:var(--s-stone-ink)}
.icon-tile.az{background:var(--s-az-tint);color:var(--s-azure)}

@media (max-width:760px){
  .tabs{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));display:grid;width:100%}
  .tab{padding:10px 12px;font-size:15px;justify-content:center}
  .tab:last-child:nth-child(odd){grid-column:1 / -1}
  .sx{padding-inline:20px}
  .sec{padding-block:64px}
  .nav,.head>.btn{display:none}
  .menu{display:inline-flex;align-items:center}
  .head{min-height:64px}
  .drawer.open{display:grid;gap:4px;padding:0 20px 20px;max-width:1200px;margin:0 auto}
  .drawer a{display:block;padding:12px 0;font-size:17px;color:var(--s-ink);text-decoration:none;border-bottom:1px solid var(--s-line)}
  .drawer .btn{display:flex;justify-content:center;padding:0 22px;margin-top:12px;border:0;color:#FFFFFF}
  .close .sx{padding-block:56px}
  .close .mini{grid-template-columns:minmax(0,1fr)}
  .close .btn{width:100%}
  .close .shapes{width:260px;height:200px;right:-60px;bottom:-80px}
  .simple .card{padding:28px}
  .cards3{grid-template-columns:minmax(0,1fr);margin-top:32px}
}