/* ============================================================================
   Relay 2026 — shared stylesheet (multi-page)
   Mirrors the app's AppTheme tokens. Warm cream identity, Geist (Vercel) for headings + body.
   Motion system lives at the bottom (§ MOTION), fully gated for reduced motion.
   ========================================================================== */
:root{
  --lumen:#FFFFEB;         /* app ground */
  --card:#FFFFFF;          /* soft card */
  --ink:#1A1A1A;           /* text + pills */
  --ink2:#111;             /* dark band */
  --sub:#8A8A80;           /* muted, warm-biased like the app */
  --hair:#E4E4D0;          /* hairline borders, not shadows */
  --safe:#2F7D53;          /* semantic ok / SUCCESS (verified·unlocked·sent) — darkened for cream contrast */
  --blue:#5B7BFF;          /* Relay blue = IDENTITY (wordmark "y", file-type badges) */
  --danger:#B5473A;        /* semantic denied */
  --serif:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* was EB Garamond */
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* was Figtree */
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:18px;                /* the app's card radius */
  --pad:clamp(20px,5vw,32px);
  /* premium easing */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --spring:cubic-bezier(.34,1.4,.5,1);
  color-scheme: light;     /* light-first like the app — never follow the OS to dark */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  background:var(--lumen); color:var(--ink); font-family:var(--sans);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--pad)}
.tight{max-width:680px}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2.7rem,9vw,5rem);line-height:1.02}
h2{font-size:clamp(1.95rem,5.6vw,3rem);line-height:1.08;margin-bottom:.5em}
h3{font-size:1.28rem;line-height:1.25}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.78rem;font-weight:650;letter-spacing:.13em;text-transform:uppercase;color:var(--sub);
}
.eyebrow::before{content:"";width:14px;height:14px;flex:none;
  background:currentColor;
  -webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><path d="M20 16 L40 36 L20 56" stroke="black" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M38 16 L58 36 L38 56" stroke="black" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity=".45"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><path d="M20 16 L40 36 L20 56" stroke="black" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M38 16 L58 36 L38 56" stroke="black" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity=".45"/></svg>') center/contain no-repeat;
}
.lead{font-size:clamp(1.04rem,2.6vw,1.2rem);color:var(--sub);max-width:36em}
.lead b,.lead strong{color:var(--ink);font-weight:600}
.center{text-align:center}
.center .lead,.center .eyebrow{margin-left:auto;margin-right:auto}
.center .lead{max-width:32em}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font:600 1rem var(--sans);color:var(--lumen);background:var(--ink);
  border:0;border-radius:999px;padding:15px 26px;cursor:pointer;text-decoration:none;
  transition:transform .2s var(--ease-out),box-shadow .25s var(--ease-out),opacity .12s ease;
  min-height:50px;white-space:nowrap;box-shadow:0 1px 2px rgba(26,26,26,.12);
}
.btn:hover{opacity:.96;transform:translateY(-2px);box-shadow:0 10px 24px rgba(26,26,26,.20)}
.btn:active{transform:translateY(0) scale(.98)}
.btn svg{width:1.15em;height:1.15em;flex:none;transition:transform .25s var(--ease-out)}
.btn:hover svg:last-child{transform:translateX(2px)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--hair);box-shadow:none}
.btn.ghost:hover{border-color:var(--ink);opacity:1;box-shadow:0 6px 18px rgba(26,26,26,.08)}
.btn.lg{padding:17px 30px;font-size:1.05rem;min-height:56px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.card{
  background:var(--card);border:1px solid var(--hair);border-radius:var(--r);
  box-shadow:0 2px 6px rgba(0,0,0,.03);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s var(--ease-out);
}
.card.lift:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(26,26,26,.10);border-color:color-mix(in srgb,var(--ink) 22%,var(--hair))}
section{padding:clamp(64px,12vw,120px) 0;border-top:1px solid var(--hair);position:relative}
section.flush{border-top:0}

/* ---------- platform chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  display:inline-flex;align-items:center;gap:.5em;text-decoration:none;
  background:var(--card);border:1px solid var(--hair);border-radius:999px;
  padding:9px 15px;font-size:.86rem;font-weight:600;color:var(--ink);
  transition:border-color .2s var(--ease-out),transform .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.chip:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 8px 18px rgba(26,26,26,.10)}
.chip:active{transform:scale(.96)}
.chip svg{width:15px;height:15px;flex:none}
.chip .soon{font-size:.66rem;font-weight:600;color:var(--sub);letter-spacing:.04em}
.chip.reco{border-color:var(--ink);box-shadow:0 0 0 3px rgba(26,26,26,.06)}
.avail{font-size:.9rem;color:var(--sub);margin:16px 0 12px}
.avail b{color:var(--ink);font-weight:600}

/* ---------- nav ---------- */
.nav{position:sticky;top:12px;z-index:80;margin:12px var(--pad) 0}
.nav .bar{
  max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:8px;
  background:color-mix(in srgb,var(--card) 84%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--hair);border-radius:999px;padding:9px 9px 9px 18px;
  transition:box-shadow .3s var(--ease-out),background .3s var(--ease-out);
}
.nav.scrolled .bar{box-shadow:0 10px 30px rgba(26,26,26,.10);background:color-mix(in srgb,var(--card) 92%,transparent)}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-size:1.3rem;font-weight:600;text-decoration:none;flex:none}
.wy{color:var(--blue)}  /* the blue "y" — brand identity accent */
.brand svg{width:22px;height:22px}
.navlinks{display:none;align-items:center;gap:2px;margin-left:6px}
@media(min-width:960px){.navlinks{display:flex}}
.navlink{
  display:inline-flex;align-items:center;gap:.35em;text-decoration:none;color:var(--ink);
  font-size:.94rem;font-weight:550;padding:9px 13px;border-radius:999px;background:none;border:0;cursor:pointer;
  font-family:var(--sans);transition:background .2s var(--ease-out),transform .2s var(--ease-out);
}
.navlink:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);transform:translateY(-1px)}
.navlink[aria-current="page"]{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.navlink .caret{width:11px;height:11px;transition:transform .25s var(--ease-out)}
/* product mega */
.has-mega{position:relative}
.mega{
  position:absolute;top:calc(100% + 12px);left:0;min-width:320px;
  background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:10px;
  box-shadow:0 20px 50px rgba(26,26,26,.14);
  opacity:0;visibility:hidden;transform:translateY(8px) scale(.99);transition:opacity .22s var(--ease-out),transform .22s var(--ease-out),visibility .22s;
}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:none}
.has-mega:hover .caret{transform:rotate(180deg)}
.mega .mhead{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--sub);padding:8px 12px 4px}
.mitem{display:flex;gap:11px;align-items:flex-start;padding:9px 12px;border-radius:11px;text-decoration:none;transition:background .15s var(--ease-out),transform .15s var(--ease-out)}
.mitem:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);transform:translateX(2px)}
.mitem .mi{width:20px;height:20px;flex:none;color:var(--ink);margin-top:2px}
.mitem b{display:block;font-size:.94rem;font-weight:600}
.mitem small{color:var(--sub);font-size:.8rem}
.nav-spacer{margin-left:auto}
.nav .btn{padding:11px 18px;min-height:44px;font-size:.9rem}
/* The desktop nav CTA (e.g. use-cases/business "Get Relay") is hidden on mobile — the hamburger menu
   and the sticky .mcta bar cover it there. Without this it overflows the bar (nav can't shrink). */
.bar>.btn{display:none}
@media(min-width:960px){.bar>.btn{display:inline-flex}}
.hamb{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;
  border:1px solid var(--hair);background:var(--card);cursor:pointer;flex:none}
.hamb svg{width:20px;height:20px}
@media(min-width:960px){.hamb{display:none}}
/* mobile drawer */
.drawer{display:none;margin:10px var(--pad) 0;max-width:1120px;position:sticky;top:68px;z-index:79}
.drawer.open{display:block}
@media(min-width:960px){.drawer{display:none!important}}
.drawer .card{padding:10px}
.drawer a{display:block;padding:13px 16px;border-radius:12px;text-decoration:none;font-weight:600;font-size:1rem;transition:background .15s var(--ease-out)}
.drawer a:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.drawer .btn{width:100%;margin-top:6px}

/* ---------- hero ---------- */
.hero{padding:clamp(38px,7vw,72px) 0 clamp(10px,2vw,24px)}
.hero .wrap{display:grid;gap:clamp(34px,6vw,60px)}
@media(min-width:960px){.hero .wrap{grid-template-columns:1.02fr .98fr;align-items:center}}
.hero h1 .quiet{color:var(--sub)}
.hero .lead{margin:20px 0 22px}
.hero .btn-row{margin-bottom:6px}
.micro{display:flex;flex-wrap:wrap;gap:10px 12px;margin:26px 0 clamp(38px,6vw,64px);font-size:1rem;color:var(--ink)}
.micro span{display:inline-flex;align-items:center;gap:.5em;background:var(--card);border:1px solid var(--hair);
  border-radius:999px;padding:9px 16px;font-family:var(--sans);font-weight:500}
.micro svg{width:15px;height:15px;color:var(--safe)}
.center .micro{justify-content:center}

/* ---------- page hero (inner pages) ---------- */
.phero{padding:clamp(48px,10vw,100px) 0 clamp(20px,5vw,44px);border-top:0;text-align:center}
.phero .lead{margin:18px auto 26px}
.phero h1{font-size:clamp(2.3rem,7vw,4rem)}

/* ---------- phone demo ---------- */
.stage{display:flex;justify-content:center}
.phone{
  width:min(340px,88vw);border-radius:44px;padding:10px;
  background:var(--ink);box-shadow:0 24px 60px rgba(26,26,26,.18);
}
.screen{border-radius:36px;overflow:hidden;background:#FDFDF6;display:flex;flex-direction:column;height:742px}
.app-top{padding:14px 16px 10px;background:#FFF;border-bottom:1px solid #EEEEE2}
.app-top .who{font-weight:650;font-size:.95rem;color:#1A1A1A}
.app-top .sub2{font-size:.74rem;color:#8A8A80}
.chat{flex:1;overflow:hidden;padding:12px 12px 4px;display:flex;flex-direction:column;justify-content:flex-end}
.thread{display:flex;flex-direction:column;gap:7px}
.msg{max-width:82%;font-size:.78rem;line-height:1.45;color:#1A1A1A;
  opacity:0;transform:translateY(8px) scale(.98);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.msg.show{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .msg{opacity:1;transform:none;transition:none} }
.bubble{padding:9px 13px;border-radius:16px}
.bubble.in{align-self:flex-start;background:#FFF;border:1px solid #EEEEE2;border-bottom-left-radius:6px}
.bubble.out{align-self:flex-end;background:#1A1A1A;color:#FFFFEB;border-bottom-right-radius:6px}
.bubble.out small{color:#B9B9A6}
.msg .docimg{
  width:134px;height:76px;border-radius:10px;margin:-3px -7px 7px;display:block;
  background:
    radial-gradient(circle at 26% 45%, #C9C2AE 0 14%, transparent 15%),
    linear-gradient(0deg, transparent 62%, rgba(255,255,255,.25) 62% 64%, transparent 64%),
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(26,26,26,.25) 10px 11px),
    linear-gradient(135deg,#8E8672,#6E6858);
  border:1px solid rgba(255,255,235,.25);
}
.mrz{font-family:var(--mono);font-size:.54rem;white-space:nowrap;letter-spacing:.04em;opacity:.75;display:block;margin-top:6px}
.loc{align-self:flex-end;width:170px;border-radius:14px;overflow:hidden;border:1px solid #EEEEE2;background:#FFF}
.loc .map{height:58px;position:relative;background:
  repeating-linear-gradient(0deg,#EAF2E4 0 22px,#DCE9D4 22px 23px),
  repeating-linear-gradient(90deg,transparent 0 30px,rgba(120,150,110,.25) 30px 31px)}
.loc .map::after{content:"";position:absolute;left:24%;top:0;bottom:0;width:11px;background:#F3EBD3;transform:skewX(-16deg)}
.loc .pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-80%);font-size:1.15rem;z-index:2}
.loc .lab{padding:6px 9px;font-size:.68rem;color:#1A1A1A}
.loc .lab small{display:block;color:#8A8A80}

/* keyboard — the REAL Relay keyboard, light monochrome */
.kb{background:#FFFFEB;border-top:1px solid #E4E4D0;padding:8px 8px calc(8px + 6px);position:relative}
.kbtop{display:flex;gap:7px;margin-bottom:7px}
.kpill{display:inline-flex;align-items:center;gap:.4em;background:#FFF;border:1px solid #E4E4D0;border-radius:999px;
  padding:5px 11px;font-size:.7rem;font-weight:600;color:#1A1A1A;white-space:nowrap}
.kpill .dot{width:6px;height:6px;border-radius:50%;background:#2F7D53}
.kpill.grow{flex:1;color:#8A8A80;font-weight:500}
.ktabs{display:flex;gap:6px;overflow:hidden;margin-bottom:8px}
.ktab{font-size:.78rem;font-weight:650;color:#8A8A80;padding:5px 11px;border-radius:999px;white-space:nowrap}
.ktab.on{background:#1A1A1A;color:#FFFFEB}
.ktiles{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.ktile{
  background:#FFF;border:1px solid #E4E4D0;border-radius:13px;padding:8px 11px;
  font-size:.74rem;font-weight:600;color:#1A1A1A;position:relative;
  display:flex;flex-direction:column;gap:2px;transition:transform .18s var(--ease-out),border-color .18s var(--ease-out);
}
.ktile small{font-weight:500;color:#8A8A80;font-size:.66rem}
.ktile .cp{position:absolute;top:8px;right:9px;font-size:.62rem;color:#8A8A80}
.ktile.tap{transform:scale(.94);border-color:#1A1A1A}
/* stock qwerty that slides away */
.qwerty{position:absolute;inset:0;background:#E8E8DE;padding:10px 6px 12px;display:flex;flex-direction:column;gap:7px;
  justify-content:flex-end;transition:transform .5s cubic-bezier(.6,0,.3,1);z-index:3}
.qwerty.away{transform:translateY(105%)}
.qhint{text-align:center;font-size:.68rem;color:#6E6E64;padding-bottom:2px}
.qhint b{color:#1A1A1A}
.qrow{display:flex;gap:5px;justify-content:center}
.qk{background:#FFF;border-radius:6px;box-shadow:0 1px 0 rgba(0,0,0,.18);min-width:26px;padding:8px 0;
  text-align:center;font-size:.78rem;color:#1A1A1A}
.qk.fn{min-width:40px;background:#D5D5C9;font-size:.7rem}
.qk.space{flex:1;max-width:120px}
.qk.globe{min-width:64px;background:#1A1A1A;color:#FFFFEB;font-weight:650;display:inline-flex;align-items:center;justify-content:center;gap:.35em}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.qk.globe.pulse{animation:pulse 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){ .qk.globe.pulse{animation:none} }

/* ---------- dark "every app" band ---------- */
.band-dark{background:var(--ink2);color:#F4F4E4;border:0;overflow:hidden;text-align:center;border-radius:clamp(24px,4vw,44px) clamp(24px,4vw,44px) 0 0}
.band-dark + .band-dark,.band-dark.flush{border-radius:0}
.band-dark h2{color:#FFFFEB}
.band-dark .lead{color:#B9B9AC;margin:14px auto 0}
.band-dark .chips{justify-content:center;margin-bottom:26px}
.band-dark .chip{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#F4F4E4}
.band-dark .chip:hover{border-color:rgba(255,255,255,.5)}
.band-dark .chip .soon{color:#9A9A8C}
.band-dark .btn.ghost{color:#FFFFEB;border-color:rgba(255,255,255,.28)}
.band-dark .btn.ghost:hover{border-color:#FFFFEB}
/* radiating accent behind a dark-band heading */
.rays{position:relative}
.rays::before{content:"";position:absolute;left:50%;top:-14px;width:min(560px,80vw);height:220px;transform:translateX(-50%);pointer-events:none;
  background:
    conic-gradient(from 180deg at 50% 100%,
      transparent 0 8deg, rgba(127,207,158,.14) 9deg 10deg, transparent 11deg 22deg,
      rgba(127,207,158,.12) 23deg 24deg, transparent 25deg 40deg,
      rgba(127,207,158,.10) 41deg 42deg, transparent 43deg 60deg,
      rgba(127,207,158,.12) 61deg 62deg, transparent 63deg 80deg,
      rgba(127,207,158,.14) 81deg 82deg, transparent 83deg 98deg,
      rgba(127,207,158,.12) 99deg 100deg, transparent 101deg 118deg,
      rgba(127,207,158,.10) 119deg 120deg, transparent 121deg 180deg);
  -webkit-mask:radial-gradient(120px 200px at 50% 100%, transparent 40%, #000 70%);
          mask:radial-gradient(120px 200px at 50% 100%, transparent 40%, #000 70%);
  opacity:.9;z-index:0}
.rays>*{position:relative;z-index:1}
.appwall{
  position:relative;display:flex;justify-content:center;align-items:flex-start;
  gap:clamp(6px,1.2vw,14px);margin:44px auto 8px;max-width:920px;flex-wrap:nowrap;
  padding-bottom:52px;   /* reserve space for the arc's translateY(46px) so icons don't overlap the caption */
}
.app{
  width:clamp(46px,7vw,64px);height:clamp(46px,7vw,64px);border-radius:22%;
  background:#FFF;display:flex;align-items:center;justify-content:center;flex:none;
  font-size:clamp(20px,3.4vw,28px);box-shadow:0 8px 22px rgba(0,0,0,.35);
  will-change:transform;
}
.app.mid{outline:2px solid rgba(255,255,235,.9);outline-offset:3px}
.app svg{width:54%;height:54%}
.mq-item .mgl svg{width:17px;height:17px;display:block}
/* The fanned arc only fits when the band is wider than the ~1017px icon span;
   below that it would be clipped at the viewport edges, so wrap into a tidy block. */
@media(max-width:1080px){
  .appwall{flex-wrap:wrap;gap:12px;max-width:460px;padding-bottom:0}
  .app{transform:none!important}
}
.wall-cap{margin-top:26px;font-size:.9rem;color:#9A9A8C}

/* ---------- steps ---------- */
.steps{display:grid;gap:14px;margin-top:34px}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{padding:24px}
.step .n{font-family:var(--serif);font-size:2rem;color:var(--sub)}
.step h3{margin:6px 0 8px}
.step p{font-size:.95rem;color:var(--sub)}

/* ---------- kpi band ---------- */
.kpis{display:grid;gap:14px;margin-top:34px}
@media(min-width:700px){.kpis{grid-template-columns:repeat(3,1fr)}}
.kpi{padding:26px 24px;text-align:left}
.kpi .num{font-family:var(--serif);font-size:clamp(2.6rem,8vw,3.4rem);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi .lbl{margin-top:8px;font-size:.9rem;color:var(--sub)}

/* ---------- demos ---------- */
.demos{display:grid;gap:22px;margin-top:34px}
@media(min-width:820px){.demos{grid-template-columns:1fr 1fr}}
.demo .vframe{border-radius:var(--r);overflow:hidden;border:1px solid var(--hair);background:#000;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.demo:hover .vframe{transform:translateY(-4px);box-shadow:0 18px 40px rgba(26,26,26,.14)}
.demo video{width:100%;aspect-ratio:9/16;object-fit:cover}
@media(min-width:820px){.demo video{aspect-ratio:9/18}}
.demo .cap{margin-top:14px}
.demo .cap .tag{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sub)}
.demo .cap h3{margin-top:4px}
.demo .cap p{font-size:.94rem;color:var(--sub);margin-top:4px}

/* ---------- try it live ---------- */
.scenrow{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 28px}
.scen{font-family:var(--sans);font-size:.92rem;font-weight:600;color:var(--sub);
  background:var(--card);border:1px solid var(--hair);border-radius:999px;padding:10px 17px;cursor:pointer;
  transition:color .2s var(--ease-out),background .2s var(--ease-out),border-color .2s var(--ease-out),transform .2s var(--ease-out)}
.scen:hover{color:var(--ink);transform:translateY(-2px)}
.scen.on{background:var(--ink);color:var(--lumen);border-color:var(--ink)}
#try .kb{overflow:hidden}
#try .qwerty.away{opacity:0!important;visibility:hidden;transform:translateY(320px);pointer-events:none}
.tryfoot{display:flex;justify-content:center;margin-top:18px}
.replay{font:inherit;font-size:.86rem;font-weight:600;color:var(--sub);background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:.4em}
.replay:hover{color:var(--ink)}

/* realistic dummy documents shown inside an outgoing message */
.card-doc{width:174px;border-radius:12px;overflow:hidden;margin:-2px -6px 9px;display:block;position:relative;
  box-shadow:0 3px 10px rgba(0,0,0,.18);font-family:var(--sans);color:#fff;line-height:1.35}
.card-doc .spec{position:absolute;right:8px;bottom:6px;font-size:.48rem;letter-spacing:.14em;opacity:.5}
.card-doc .face{width:32px;height:38px;border-radius:5px;flex:none;background:
  radial-gradient(circle at 50% 32%, #ded9cb 0 32%, transparent 33%),
  radial-gradient(circle at 50% 108%, #ded9cb 0 46%, transparent 47%), #b3ad9c}
.doc-ins{background:linear-gradient(135deg,#1f8f8c,#124e57);padding:11px 12px}
.doc-ins .brand{font-size:.6rem;font-weight:800;letter-spacing:.07em;opacity:.92;display:flex;align-items:center;gap:6px}
.doc-ins .brand::before{content:"";width:10px;height:10px;border-radius:3px;background:#fff;opacity:.9}
.doc-ins .nm{font-size:.86rem;font-weight:800;margin-top:9px;letter-spacing:.01em}
.doc-ins .rowk{display:flex;justify-content:space-between;gap:8px;font-size:.58rem;opacity:.9;margin-top:5px;font-variant-numeric:tabular-nums}
.doc-lic{background:linear-gradient(135deg,#4a5db8,#8a5ba0);padding:10px 11px}
.doc-lic .hd{font-size:.54rem;font-weight:800;letter-spacing:.1em;opacity:.92}
.doc-lic .body{display:flex;gap:9px;margin-top:7px}
.doc-lic .info{font-size:.57rem;opacity:.94;line-height:1.55;font-variant-numeric:tabular-nums}
.doc-lic .info b{font-size:.74rem;display:block;font-weight:800}
.doc-bank{background:linear-gradient(135deg,#2b2b2b,#494943);padding:12px 13px;min-height:98px}
.doc-bank .chip{width:24px;height:17px;border-radius:3px;background:linear-gradient(135deg,#ecd692,#b8973b)}
.doc-bank .no{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;margin-top:15px}
.doc-bank .brow{display:flex;justify-content:space-between;gap:8px;font-size:.53rem;opacity:.9;margin-top:9px;letter-spacing:.04em}

/* ---------- documents / scanner ---------- */
.split{display:grid;gap:clamp(28px,5vw,56px);align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}}
.split.rev>*:first-child{order:2}
@media(max-width:899px){.split.rev>*:first-child{order:0}}
.doccard{padding:22px}
.doccard .row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-top:1px solid var(--hair)}
.doccard .row:first-child{border-top:0}
.doccard .row svg{width:20px;height:20px;color:var(--sub);flex:none}
.doccard .row b{display:block;font-size:.95rem}
.doccard .row small{color:var(--sub);font-size:.82rem}
.mapshot{border-radius:var(--r);overflow:hidden;border:1px solid var(--hair);background:var(--card);
  max-width:min(360px,84vw);margin:0 auto}
.mapshot img{width:100%;height:auto;display:block;max-height:560px;max-height:min(620px,calc(100svh - 240px));object-fit:cover;object-position:center 42%}

/* ---------- feature grid (features page) ---------- */
.fgrid{display:grid;gap:16px;margin-top:34px}
@media(min-width:680px){.fgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.fgrid{grid-template-columns:repeat(3,1fr)}}
.fcard{padding:26px 24px}
.fcard .ic{width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--ink) 5%,transparent);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.fcard .ic svg{width:22px;height:22px;color:var(--ink)}
.fcard h3{margin-bottom:6px}
.fcard p{font-size:.94rem;color:var(--sub)}

/* ---------- trust ---------- */
.manifest{font-family:var(--mono);font-size:.8rem;overflow:hidden}
.manifest .mtop{padding:12px 16px;border-bottom:1px solid var(--hair);color:var(--sub);display:flex;align-items:center;gap:.6em}
.manifest .mtop i{width:9px;height:9px;border-radius:50%;background:var(--danger);box-shadow:14px 0 0 #D9A441,28px 0 0 var(--safe);margin-right:28px}
.perm{display:grid;grid-template-columns:22px 1fr;gap:2px 10px;padding:11px 16px;border-top:1px solid var(--hair)}
.perm:first-of-type{border-top:0}
.perm .mark{font-weight:700}
.perm.ok .mark{color:var(--safe)} .perm.no .mark{color:var(--danger)}
.perm .name{font-weight:600}
.perm .note{grid-column:2;color:var(--sub);font-size:.72rem}
.ticks{display:grid;gap:12px 26px;margin-top:32px}
@media(min-width:700px){.ticks{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.ticks{grid-template-columns:repeat(4,1fr)}}
.tick{display:flex;gap:.6em;align-items:flex-start;font-size:.95rem}
.tick svg{width:17px;height:17px;color:var(--safe);flex:none;margin-top:3px}
.pull{font-family:var(--serif);font-size:clamp(1.15rem,3vw,1.45rem);line-height:1.4;margin-top:26px;max-width:30em}
.pull b{color:var(--danger)}

/* ---------- pricing ---------- */
.plans{display:grid;gap:16px;margin-top:36px}
@media(min-width:760px){.plans{grid-template-columns:1fr 1fr;max-width:820px;margin-left:auto;margin-right:auto}}
/* three-plan layout (Free / Pro / Teams & Enterprise) */
.plans.three{max-width:1120px}
@media(min-width:760px){.plans.three{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.plans.three{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.plan .price .permo{font-family:var(--sans);font-size:.92rem;color:var(--sub);font-weight:500}
.plan.feature .price .permo{color:#B9B9A6}
.plan .annual{display:flex;align-items:center;gap:.5em;flex-wrap:wrap;font-size:.9rem;margin:2px 0 4px}
.plan .annual .bv{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  background:var(--safe);color:#fff;border-radius:999px;padding:3px 8px}
.plan.feature .annual .bv{background:#7FCF9E;color:#0d3b23}
.plan .annual b{font-weight:700}
.plan .billnote{font-size:.82rem;color:var(--sub);margin:-2px 0 14px}
.plan.feature .billnote{color:#B9B9A6}
.plan .tier{border-top:1px solid var(--hair);margin-top:16px;padding-top:16px}
.plan .tier:first-of-type{border-top:0;margin-top:0;padding-top:0}
.plan .tier .tname{font-weight:700;font-size:1rem}
.plan .tier .tprice{font-family:var(--serif);font-size:1.5rem;line-height:1.1;margin:2px 0 4px}
.plan .tier .tprice small{font-family:var(--sans);font-size:.8rem;color:var(--sub);font-weight:500}
.plan .tier p{font-size:.86rem;color:var(--sub);margin:0}
/* founding lifetime strip under the cards */
.founding{max-width:820px;margin:22px auto 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  background:color-mix(in srgb,var(--ink) 4%,transparent);border:1px dashed var(--hair);border-radius:999px;padding:14px 22px;text-align:center}
.founding .fkey{font-size:1.1rem;flex:none}
.founding p{font-size:.9rem;color:var(--sub);margin:0}
.founding p b{color:var(--ink)}
.founding a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.plan{padding:28px 26px;display:flex;flex-direction:column}
.plan .pname{font-family:var(--serif);font-size:1.35rem}
.plan .price{font-family:var(--serif);font-size:2.6rem;line-height:1;margin:14px 0 2px;letter-spacing:-.02em}
.plan .price small{font-family:var(--sans);font-size:.9rem;color:var(--sub);font-weight:500}
.plan .pdesc{color:var(--sub);font-size:.92rem;margin-bottom:16px}
.plan ul{list-style:none;display:grid;gap:9px;margin:0 0 22px}
.plan li{display:flex;gap:.55em;align-items:flex-start;font-size:.93rem}
.plan li svg{width:15px;height:15px;color:var(--safe);flex:none;margin-top:4px}
.plan .btn{margin-top:auto;width:100%}
.plan.feature{background:var(--ink);color:var(--lumen);border-color:var(--ink)}
.plan.feature .pdesc,.plan.feature .price small{color:#B9B9A6}
.plan.feature li svg{color:#7FCF9E}
.plan.feature .btn{background:var(--lumen);color:var(--ink)}
.plan .badge{align-self:flex-start;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  background:rgba(255,255,235,.16);color:#FFFFEB;border-radius:999px;padding:5px 11px;margin-bottom:12px}
/* comparison table */
.compare{max-width:860px;margin:44px auto 0;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;background:var(--card)}
.compare .crow{display:grid;grid-template-columns:1.6fr 1fr 1fr;align-items:center}
.compare.four .crow{grid-template-columns:1.8fr 1fr 1fr 1fr}
@media(max-width:620px){
  .compare.four .crow>div{padding:11px 8px;font-size:.8rem}
  .compare.four .crow.head>div{font-size:.9rem}
  .compare.four .crow.head>div:first-child{font-size:.66rem}
}
.compare .crow+.crow{border-top:1px solid var(--hair)}
.compare .crow>div{padding:15px 16px;font-size:.92rem}
.compare .crow.head>div{font-weight:650;font-family:var(--serif);font-size:1.05rem}
.compare .crow.head>div:first-child{color:var(--sub);font-family:var(--sans);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:650}
.compare .crow>div:first-child{color:var(--ink);font-weight:600}
.compare .crow>div:not(:first-child){text-align:center;color:var(--sub)}
.compare .yes{color:var(--safe);font-weight:700}
.compare .no{color:var(--sub)}
.compare .plus{background:color-mix(in srgb,var(--ink) 4%,transparent)}

/* ---------- b2b ---------- */
.b2b .card{padding:clamp(24px,5vw,44px)}
.b2b ul{list-style:none;margin-top:18px;display:grid;gap:10px}
@media(min-width:760px){.b2b ul{grid-template-columns:1fr 1fr}}
.b2b li{display:flex;gap:.6em;align-items:flex-start;font-size:.95rem;color:var(--sub)}
.b2b li svg{width:15px;height:15px;flex:none;margin-top:4px;color:var(--ink)}
.b2b li b{color:var(--ink)}

/* ---------- faq ---------- */
.faq{max-width:760px;margin:34px auto 0}
details{border-top:1px solid var(--hair)}
details:last-child{border-bottom:1px solid var(--hair)}
summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 2px;font-weight:600;font-size:1.02rem;min-height:44px;
  transition:color .2s var(--ease-out);
}
summary::-webkit-details-marker{display:none}
/* the expand affordance: a circled + that swings to × when open — reads as "tap me" */
summary::after{
  content:"";width:30px;height:30px;flex:none;border:1px solid var(--hair);border-radius:50%;
  background:
    linear-gradient(var(--ink),var(--ink)) center/12px 1.8px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/1.8px 12px no-repeat,
    var(--card);
  transition:transform .3s var(--ease-out),border-color .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
summary:hover::after{border-color:var(--ink);box-shadow:0 4px 12px rgba(26,26,26,.10)}
details[open] summary::after{transform:rotate(45deg);border-color:var(--ink)}
details .a{padding:0 2px 18px;color:var(--sub);font-size:.95rem;max-width:64ch}
details .a b{color:var(--ink)}

/* ---------- long-form prose (privacy policy body) ---------- */
.prose{max-width:720px;margin:0 auto}
.prose .dateline{color:var(--sub);font-size:.9rem;margin-bottom:6px}
.prose h2{font-size:1.35rem;margin:1.5em 0 .25em}
.prose h2:first-of-type{margin-top:0}
.prose p,.prose li{margin:.6em 0;color:var(--sub)}
.prose p b,.prose li b,.prose p strong{color:var(--ink);font-weight:600}
.prose ul{margin:.4em 0 .4em 1.2em}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
/* Buttons inside prose (the post CTA row) must keep their own colours, not the body-link ink —
   otherwise the solid CTA renders dark text on its dark pill (an "empty" black box). */
.prose a.btn{color:var(--lumen);text-decoration:none}
.prose a.btn.ghost{color:var(--ink)}
.prose .card{margin:22px 0;padding:20px 22px}
.prose .card p{color:var(--ink)}

/* ---------- ask AI band ---------- */
.askai .card{padding:clamp(28px,5vw,48px);text-align:center}
.askai h2{font-size:clamp(1.5rem,4vw,2.1rem)}
.askrow{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}
.askbtn{display:inline-flex;align-items:center;gap:.55em;text-decoration:none;font-weight:600;font-size:.95rem;
  background:var(--lumen);border:1px solid var(--hair);border-radius:999px;padding:12px 20px;min-height:48px;
  transition:border-color .2s var(--ease-out),transform .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.askbtn:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 8px 18px rgba(26,26,26,.08)}
.askbtn:active{transform:scale(.97)}
.askbtn svg{width:18px;height:18px;flex:none}

/* ---------- pricing teaser (home) ---------- */
.teaser{display:grid;gap:16px;margin-top:34px}
@media(min-width:640px){.teaser{grid-template-columns:1fr 1fr;max-width:760px;margin-left:auto;margin-right:auto}}
.tcard{padding:26px 24px;text-align:left;display:flex;flex-direction:column}
.tcard .tp{font-family:var(--serif);font-size:1.2rem}
.tcard .tprice{font-family:var(--serif);font-size:2.2rem;line-height:1;margin:10px 0 4px}
.tcard .tprice small{font-family:var(--sans);font-size:.85rem;color:var(--sub)}
.tcard p{font-size:.92rem;color:var(--sub);margin-bottom:16px}
.tcard.dark{background:var(--ink);color:var(--lumen);border-color:var(--ink)}
.tcard.dark p,.tcard.dark .tprice small{color:#B9B9A6}
.tcard .go{margin-top:auto;font-weight:600;font-size:.92rem;display:inline-flex;align-items:center;gap:.4em;text-decoration:none;color:inherit}
.tcard .go svg{width:14px;height:14px;transition:transform .25s var(--ease-out)}
.tcard:hover .go svg{transform:translateX(3px)}

/* ---------- get / final cta ---------- */
.get{text-align:center}
.getgrid{display:grid;gap:12px;max-width:520px;margin:30px auto 0}
@media(min-width:560px){.getgrid{grid-template-columns:1fr 1fr}}
.store{
  display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  background:var(--ink);color:var(--lumen);border-radius:16px;padding:14px 18px;min-height:62px;
  transition:transform .2s var(--ease-out),box-shadow .25s var(--ease-out),opacity .12s ease;
}
.store:hover{opacity:.97;transform:translateY(-3px);box-shadow:0 14px 30px rgba(26,26,26,.22)}
.store:active{transform:scale(.98)}
.store svg{width:26px;height:26px;flex:none}
.store .tx{text-align:left;line-height:1.15}
.store .tx small{display:block;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.store .tx b{font-size:1.05rem;font-weight:600}
.store.soon{background:var(--card);color:var(--ink);border:1px solid var(--hair)}
.store.soon:hover{box-shadow:0 14px 30px rgba(26,26,26,.10)}
.store.soon .tx small{opacity:1;color:var(--sub)}
.store.reco{outline:2px solid var(--ink);outline-offset:3px}
.store.soon.reco{outline-color:var(--ink)}
/* beta email form */
.beta{max-width:480px;margin:28px auto 0}
.beta .lbl{font-size:.92rem;color:var(--sub);margin-bottom:12px}
.beta .lbl b{color:var(--ink)}
.signup{display:flex;gap:10px}
.signup input[type=email]{
  flex:1;min-width:0;font:400 1rem var(--sans);color:var(--ink);
  background:var(--card);border:1px solid var(--hair);border-radius:999px;
  padding:14px 20px;outline:none;min-height:52px;transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.signup input[type=email]:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(26,26,26,.06)}
.signup input[type=email]::placeholder{color:var(--sub)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:480px){ .signup{flex-direction:column} .signup .btn{width:100%} }
.form-done{display:none;margin-top:14px;font-weight:600;color:var(--safe)}
.form-done.show{display:block}
.form-err{display:none;margin-top:14px;font-weight:600;color:var(--danger)}
.form-err.show{display:block}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--hair);padding:56px 0 calc(30px + env(safe-area-inset-bottom));color:var(--sub);font-size:.9rem;overflow:hidden}
.foot-cols{display:grid;gap:30px 24px;grid-template-columns:1fr 1fr}
@media(min-width:700px){.foot-cols{grid-template-columns:repeat(4,1fr)}.foot-lead{grid-column:1/-1;max-width:34em}}
@media(min-width:1060px){.foot-cols{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr}.foot-lead{grid-column:auto}}
.foot-cols h4{font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--ink);margin-bottom:12px}
.foot-cols a{display:block;text-decoration:none;padding:5px 0;font-size:.9rem;transition:color .15s var(--ease-out),transform .15s var(--ease-out)}
.foot-cols a:hover{color:var(--ink);transform:translateX(2px)}
.foot-lead{max-width:24em}
.foot-lead .brand{font-size:1.2rem;color:var(--ink);margin-bottom:12px}
.footmark{margin-top:48px;display:flex;align-items:center;gap:clamp(12px,3vw,26px);color:var(--ink);opacity:.9}
.footmark svg.chevmark{width:clamp(52px,10vw,96px);height:auto;flex:none}
.footmark .word{font-family:var(--serif);font-weight:600;font-size:clamp(4.5rem,20vw,13rem);line-height:.8;letter-spacing:-.03em}
.foot-bottom{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;border-top:1px solid var(--hair);padding-top:22px}
.foot-bottom .right{margin-left:auto;display:flex;gap:20px}
.foot-bottom a{text-decoration:none}
.foot-bottom a:hover{color:var(--ink)}

/* ---------- sticky mobile cta ---------- */
.mcta{
  position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:70;
  display:none;transform:translateY(120%);transition:transform .4s var(--ease-out);
}
.mcta.show{transform:none}
.mcta .btn{width:100%;box-shadow:0 10px 30px rgba(26,26,26,.25)}
@media(max-width:760px){.mcta{display:block}}
@media (prefers-reduced-motion:reduce){ .mcta{transition:none} }

/* ============================================================================
   § MOTION SYSTEM  — all gated behind prefers-reduced-motion
   ========================================================================== */

/* --- scroll reveal (fade + rise, with directional & transform variants) --- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);will-change:opacity,transform}
.rv[data-rv="left"]{transform:translateX(-34px)}
.rv[data-rv="right"]{transform:translateX(34px)}
.rv[data-rv="scale"]{transform:scale(.92);transform-origin:center}
/* .on must beat the directional variants (which used to win on source order and left revealed
   elements permanently shifted / clipped on mobile) — the [data-rv] form outranks them outright. */
.rv.on,.rv.on[data-rv]{opacity:1;transform:none}
.rv[data-rv="clip"]{opacity:1;clip-path:inset(0 0 100% 0);transform:translateY(14px)}
.rv[data-rv="clip"].on{clip-path:inset(0 0 0 0);transform:none}
.rv[data-rv="blur"]{filter:blur(8px)}
.rv[data-rv="blur"].on{filter:none;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out),filter .7s var(--ease-out)}

/* --- hero entrance (runs on load; reduced-motion => no animation) --- */
@media (prefers-reduced-motion:no-preference){
  @keyframes heroRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  /* the phone NEVER changes size (Michael, 13 Jul) — entrance is a fade + rise only */
  @keyframes heroPhone{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
  @keyframes lineReveal{from{transform:translateY(105%)}to{transform:translateY(0)}}
  .hero [data-in],.phero [data-in]{opacity:0;animation:heroRise .85s var(--ease-out) forwards}
  .hero [data-in="1"],.phero [data-in="1"]{animation-delay:.06s}
  .hero [data-in="2"],.phero [data-in="2"]{animation-delay:.16s}
  .hero [data-in="3"],.phero [data-in="3"]{animation-delay:.28s}
  .hero [data-in="4"],.phero [data-in="4"]{animation-delay:.40s}
  .hero [data-in="5"],.phero [data-in="5"]{animation-delay:.52s}
  .hero .stage{opacity:0;animation:heroPhone 1.05s var(--ease-out) .30s forwards}
  /* headline line-by-line clip reveal */
  .linewrap{display:block;overflow:hidden}
  .linewrap>span{display:block;transform:translateY(105%);animation:lineReveal .9s var(--ease-out) forwards}
  .linewrap:nth-of-type(1)>span{animation-delay:.10s}
  .linewrap:nth-of-type(2)>span{animation-delay:.22s}
}
/* fallback: if animations are disabled, everything is visible */
@media (prefers-reduced-motion:reduce){
  .hero [data-in],.hero .stage,.phero [data-in]{opacity:1;animation:none}
  .linewrap>span{transform:none;animation:none}
}

/* --- animated Relay chevron logo (double-chevron: a forward nudge + opacity
      wave that travels front-to-back in sequence, matching the desktop app mark) --- */
.brand svg .cv1,.brand svg .cv2,.chevmark .cv1,.chevmark .cv2{transform-box:fill-box;transform-origin:center}
.brand svg .cv2,.chevmark .cv2{opacity:.45}
@media (prefers-reduced-motion:no-preference){
  /* leading chevron nudges first; trailing chevron follows a beat later with an
     opacity swell — the wave reads front-to-back every ~2.4s, ease-in-out */
  @keyframes chevLead{0%,58%,100%{transform:translateX(0)}26%{transform:translateX(2.6px)}}
  @keyframes chevTrail{0%,62%,100%{transform:translateX(0);opacity:.4}30%{transform:translateX(4.6px);opacity:.9}}
  .brand svg .cv1{animation:chevLead 2.4s var(--ease-io) infinite}
  .brand svg .cv2{animation:chevTrail 2.4s var(--ease-io) infinite;animation-delay:.16s}
  .chevmark .cv1{animation:chevLead 3s var(--ease-io) infinite}
  .chevmark .cv2{animation:chevTrail 3s var(--ease-io) infinite;animation-delay:.2s}
  /* on hover the loop pauses and the mark leans forward as one, then resumes */
  .brand:hover svg .cv1,.brand:hover svg .cv2{animation-play-state:paused}
}
.brand:hover svg .cv1{transform:translateX(3px)}
.brand:hover svg .cv2{transform:translateX(6px);opacity:.7}
.brand svg .cv1,.brand svg .cv2{transition:transform .3s var(--spring),opacity .3s var(--ease-out)}

/* --- floating app icons on the dark arc --- */
@media (prefers-reduced-motion:no-preference) and (min-width:1081px){
  @keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -8px}}
  .appwall .app{animation:floaty 4.5s ease-in-out infinite;animation-delay:calc(var(--i,0) * .18s)}
}
/* stagger the arc icons in on reveal */
.appwall.reveal .app{opacity:0;transform:translateY(24px) scale(.8)}
.appwall.reveal.on .app{opacity:1;transform:none;transition:opacity .6s var(--ease-out),transform .7s var(--spring);transition-delay:calc(var(--i,0) * .05s)}
@media (prefers-reduced-motion:reduce){
  .appwall.reveal .app{opacity:1;transform:none}
}

/* --- marquee (infinite horizontal scroll) --- */
.marquee{position:relative;overflow:hidden;margin-top:30px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;gap:14px;width:max-content;will-change:transform}
.mq-item{display:inline-flex;align-items:center;gap:.55em;white-space:nowrap;
  background:var(--card);border:1px solid var(--hair);border-radius:999px;padding:11px 18px;font-weight:600;font-size:.92rem;color:var(--ink)}
.mq-item .mgl{font-size:1.05rem}
.band-dark .mq-item{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#F4F4E4}
@media (prefers-reduced-motion:no-preference){
  @keyframes mqscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .marquee .track{animation:mqscroll 34s linear infinite}
  .marquee:hover .track{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask:none;mask:none}
  .marquee .track{flex-wrap:wrap;width:auto;justify-content:center}
  .marquee .track .dupe{display:none}
}

/* --- signature moment: a detail RELAYS from the vault into an app --- */
.relay-scene{position:relative;max-width:760px;margin:40px auto 0;padding:clamp(22px,4vw,34px);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(14px,4vw,40px);overflow:hidden}
.relay-vault,.relay-app{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.relay-node{width:96px;height:96px;border-radius:24px;display:flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--hair);box-shadow:0 8px 22px rgba(26,26,26,.08);position:relative}
.relay-node.dark{background:var(--ink);color:var(--lumen)}
.relay-node svg{width:38px;height:38px}
.relay-node .emoji{font-size:38px;line-height:1}
.relay-cap{font-size:.82rem;color:var(--sub);font-weight:600}
.relay-track{position:relative;height:76px;min-width:90px;flex:1;display:flex;align-items:center;justify-content:center}
.relay-line{position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,var(--hair) 0 7px,transparent 7px 14px)}
.relay-pill{position:absolute;left:0;top:50%;transform:translate(-6px,-50%) scale(.9);opacity:0;
  display:inline-flex;align-items:center;gap:.4em;white-space:nowrap;
  background:var(--ink);color:var(--lumen);border-radius:999px;padding:7px 13px;font-size:.76rem;font-weight:650;
  box-shadow:0 8px 20px rgba(26,26,26,.28);z-index:2}
.relay-pill .cv{width:12px;height:12px;flex:none}
.relay-app .relay-node{transition:transform .3s var(--spring),box-shadow .3s var(--ease-out)}
.relay-check{position:absolute;right:-4px;bottom:-4px;width:26px;height:26px;border-radius:50%;background:var(--safe);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.8rem;opacity:0;transform:scale(.4)}
@media(max-width:560px){
  .relay-scene{grid-template-columns:1fr;justify-items:center;gap:8px}
  .relay-track{transform:rotate(90deg);height:64px;min-width:64px;width:64px;margin:6px 0}
}
@media (prefers-reduced-motion:no-preference){
  @keyframes relayFly{
    0%{transform:translate(-6px,-50%) scale(.9);opacity:0}
    12%{opacity:1;transform:translate(0,-50%) scale(1)}
    78%{opacity:1;transform:translate(calc(100% - 6px),-50%) scale(1)}
    90%{opacity:0;transform:translate(calc(100% + 6px),-50%) scale(.85)}
    100%{opacity:0}
  }
  @keyframes appPop{0%,100%{transform:none}40%{transform:translateY(-4px) scale(1.05)}}
  @keyframes checkPop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
  .relay-scene.go .relay-pill{animation:relayFly 2.4s var(--ease-io) infinite}
  .relay-scene.go .relay-app .relay-node{animation:appPop 2.4s var(--ease-io) infinite}
  .relay-scene.go .relay-check{animation:checkPop .5s var(--spring) 1.7s infinite}
}
@media (prefers-reduced-motion:reduce){
  .relay-pill{opacity:1;position:static;transform:none}
  .relay-track{justify-content:center}
  .relay-check{opacity:1;transform:none}
}

/* --- parallax helper (JS sets --py) --- */
[data-parallax]{will-change:transform}
@media (prefers-reduced-motion:reduce){ [data-parallax]{transform:none!important} }

/* --- section decorative floating chevron accents (ambient) --- */
.amb{position:absolute;pointer-events:none;color:var(--ink);opacity:.05;z-index:0}
.amb svg{width:100%;height:100%}
@media (prefers-reduced-motion:no-preference){
  @keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-14px)}}
  .amb{animation:drift 9s ease-in-out infinite}
}
.wrap,.hero .wrap,section>.wrap{position:relative;z-index:1}

/* ============================================================================
   § SIGNATURE SCENES — Relay's three scroll-driven story moments
   Each: a detail leaves the vault (top) and RELAYS into its destination (bottom).
   Trigger: site.js toggles `.go` on `.sscene` when in view. All transform/opacity.
   ========================================================================== */
.sig-grid{display:grid;gap:18px;margin-top:40px}
@media(min-width:820px){.sig-grid{grid-template-columns:repeat(3,1fr)}}
.sscene{position:relative;padding:22px 20px;display:flex;flex-direction:column;overflow:hidden}
.sscene .st{font-weight:650;font-size:1.05rem}
.sscene .ss{font-size:.86rem;color:var(--sub);margin:3px 0 16px;min-height:2.6em}
.sscene-stage{position:relative;flex:1;min-height:238px;border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,#FBFBF2,#F1F1E2);border:1px solid var(--hair)}
/* the source keyboard tile at top */
.sscene-src{position:absolute;left:16px;top:16px;right:16px;display:flex;align-items:center;gap:9px;
  background:#FFF;border:1px solid var(--hair);border-radius:12px;padding:9px 12px;z-index:2;
  box-shadow:0 2px 6px rgba(26,26,26,.05);transition:transform .3s var(--ease-out)}
.sscene-src .si{width:26px;height:26px;border-radius:8px;background:color-mix(in srgb,var(--ink) 6%,#fff);
  display:flex;align-items:center;justify-content:center;font-size:15px;flex:none}
.sscene-src b{font-size:.82rem;font-weight:650;display:block}
.sscene-src small{font-size:.66rem;color:var(--sub)}
.sscene-src .tapdot{margin-left:auto;width:30px;height:30px;border-radius:50%;flex:none;position:relative;
  background:var(--ink);display:flex;align-items:center;justify-content:center}
.sscene-src .tapdot svg{width:15px;height:15px;color:var(--lumen)}
/* destination area at bottom */
.sscene-dest{position:absolute;left:16px;right:16px;bottom:16px;z-index:1}
/* a mini chat bubble (passport + pin scenes) */
.sbubble{max-width:78%;background:#FFF;border:1px solid #EAEADD;border-radius:14px;border-bottom-left-radius:5px;
  padding:8px 10px;font-size:.74rem;color:#1A1A1A;box-shadow:0 3px 10px rgba(26,26,26,.06);position:relative}
.sbubble.me{margin-left:auto;background:var(--ink);color:var(--lumen);border:0;border-radius:14px;border-bottom-right-radius:5px}
.sbubble .schk{position:absolute;right:-7px;bottom:-7px;width:22px;height:22px;border-radius:50%;background:var(--safe);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.72rem;opacity:0;transform:scale(.3)}
/* the flying artifact */
.sfly{position:absolute;z-index:3;left:50%;top:52px;opacity:0;will-change:transform,opacity}
.sfly .mini-pass{width:118px;border-radius:9px;overflow:hidden;box-shadow:0 10px 26px rgba(26,26,26,.28);
  background:linear-gradient(135deg,#2f7d53,#155e46);color:#eafff2;padding:8px 9px;font-family:var(--sans)}
.mini-pass .pl{font-size:.5rem;letter-spacing:.14em;font-weight:800;opacity:.85}
.mini-pass .pn{font-size:.72rem;font-weight:800;margin-top:5px}
.mini-pass .pm{font-family:var(--mono);font-size:.44rem;opacity:.72;margin-top:5px;letter-spacing:.05em}
.sfly .mini-pin{font-size:30px;filter:drop-shadow(0 6px 8px rgba(26,26,26,.3))}
.sfly .mini-iban{background:var(--ink);color:var(--lumen);border-radius:999px;padding:6px 12px;font-family:var(--mono);
  font-size:.68rem;font-weight:600;white-space:nowrap;box-shadow:0 10px 24px rgba(26,26,26,.28)}
/* mini map inside the pin destination bubble */
.smap{height:58px;border-radius:9px;overflow:hidden;position:relative;margin-bottom:5px;
  background:repeating-linear-gradient(0deg,#EAF2E4 0 16px,#DCE9D4 16px 17px),repeating-linear-gradient(90deg,transparent 0 22px,rgba(120,150,110,.25) 22px 23px)}
.smap::after{content:"";position:absolute;left:26%;top:0;bottom:0;width:9px;background:#F3EBD3;transform:skewX(-16deg)}
.smap .drop{position:absolute;left:50%;top:-22px;transform:translateX(-50%);font-size:18px;opacity:0}
/* iban bank-form destination */
.sform{background:#FFF;border:1px solid #EAEADD;border-radius:12px;padding:11px 12px;box-shadow:0 3px 10px rgba(26,26,26,.06)}
.sform .fh{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sub);font-weight:700}
.sform .flabel{font-size:.62rem;color:var(--sub);margin:8px 0 3px}
.sform .ffield{height:26px;border-radius:7px;border:1.5px solid #E4E4D0;background:#FBFBF2;display:flex;align-items:center;
  padding:0 8px;font-family:var(--mono);font-size:.66rem;color:#1A1A1A;position:relative;overflow:hidden;transition:border-color .3s var(--ease-out)}
.sform .ffield .val{opacity:0;transform:translateX(-6px)}
.sform .fbtn{margin-top:9px;height:24px;border-radius:999px;background:var(--ink);color:var(--lumen);font-size:.64rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:.3em;opacity:.5;transition:opacity .3s var(--ease-out)}

/* static (reduced-motion / no-JS) end-state */
.sfly{display:none}
.sscene .schk,.sscene .smap .drop,.sform .ffield .val{opacity:1}
.sform .ffield .val{transform:none}

@media (prefers-reduced-motion:no-preference){
  .sscene .schk{opacity:0}
  .sscene .smap .drop{opacity:0}
  .sform .ffield .val{opacity:0}
  .sscene.go .sfly{display:block}
  .sscene .sfly{display:block;opacity:0}

  /* PASSPORT: tile taps, card lifts, flies down into the chat, check pops */
  @keyframes flyPass{
    0%{opacity:0;transform:translate(-50%,-30px) scale(.5) rotate(-8deg)}
    14%{opacity:1;transform:translate(-50%,-18px) scale(1) rotate(-5deg)}
    30%{transform:translate(-50%,-18px) scale(1) rotate(-5deg)}
    70%{opacity:1;transform:translate(-50%,86px) scale(.9) rotate(3deg)}
    82%{opacity:1;transform:translate(-50%,104px) scale(.62) rotate(0deg)}
    88%,100%{opacity:0;transform:translate(-50%,104px) scale(.55)}
  }
  @keyframes tapPress{0%,100%{transform:none}40%{transform:scale(.94)}}
  @keyframes chkPop{0%{opacity:0;transform:scale(.3)}70%{opacity:1;transform:scale(1.2)}100%{opacity:1;transform:scale(1)}}
  @keyframes bubbleIn{0%{opacity:0;transform:translateY(8px) scale(.96)}100%{opacity:1;transform:none}}
  .sscene[data-kind=pass].go .sfly{animation:flyPass 3.4s var(--ease-io) infinite}
  .sscene[data-kind=pass].go .sscene-src{animation:tapPress 3.4s var(--ease-io) infinite}
  .sscene[data-kind=pass].go .sbubble{animation:bubbleIn .5s var(--ease-out) 2.3s both}
  .sscene[data-kind=pass].go .schk{animation:chkPop .5s var(--spring) 2.7s infinite}
  .sscene[data-kind=pass] .sbubble{opacity:0}

  /* PIN: pin drops from the vault, arcs down, lands; a pin drops on the mini map + ripple */
  @keyframes flyPin{
    0%{opacity:0;transform:translate(-50%,-26px) scale(.4)}
    16%{opacity:1;transform:translate(-50%,-16px) scale(1)}
    30%{transform:translate(-50%,-16px) scale(1)}
    68%{opacity:1;transform:translate(-50%,58px) scale(.9)}
    80%{opacity:0;transform:translate(-50%,92px) scale(.5)}
    100%{opacity:0}
  }
  @keyframes pinDrop{0%,58%{opacity:0;transform:translateX(-50%) translateY(-22px) scale(.6)}
    72%{opacity:1;transform:translateX(-50%) translateY(2px) scale(1.1)}
    82%{transform:translateX(-50%) translateY(-4px) scale(1)}
    100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
  .sscene[data-kind=pin].go .sfly{animation:flyPin 3.4s var(--ease-io) infinite}
  .sscene[data-kind=pin].go .sscene-src{animation:tapPress 3.4s var(--ease-io) infinite}
  .sscene[data-kind=pin].go .sbubble{animation:bubbleIn .5s var(--ease-out) 2.2s both}
  .sscene[data-kind=pin].go .smap .drop{animation:pinDrop 1.1s var(--spring) 2.3s infinite}
  .sscene[data-kind=pin].go .schk{animation:chkPop .5s var(--spring) 2.9s infinite}
  .sscene[data-kind=pin] .sbubble{opacity:0}

  /* IBAN: the number slides from the vault into the bank form field, field lights, submit enables */
  @keyframes flyIban{
    0%{opacity:0;transform:translate(-50%,-28px) scale(.7)}
    16%{opacity:1;transform:translate(-50%,-18px) scale(1)}
    30%{transform:translate(-50%,-18px) scale(1)}
    66%{opacity:1;transform:translate(-50%,74px) scale(1)}
    76%{opacity:0;transform:translate(-50%,92px) scale(.85)}
    100%{opacity:0}
  }
  @keyframes valIn{0%,66%{opacity:0;transform:translateX(-6px)}80%,100%{opacity:1;transform:none}}
  @keyframes fieldLit{0%,66%{border-color:#E4E4D0}80%,100%{border-color:var(--ink)}}
  @keyframes btnOn{0%,74%{opacity:.5}88%,100%{opacity:1}}
  .sscene[data-kind=iban].go .sfly{animation:flyIban 3.4s var(--ease-io) infinite}
  .sscene[data-kind=iban].go .sscene-src{animation:tapPress 3.4s var(--ease-io) infinite}
  .sscene[data-kind=iban].go .ffield .val{animation:valIn 3.4s var(--ease-io) infinite}
  .sscene[data-kind=iban].go .ffield{animation:fieldLit 3.4s var(--ease-io) infinite}
  .sscene[data-kind=iban].go .fbtn{animation:btnOn 3.4s var(--ease-io) infinite}
}


/* ============ canon iPhone (the live-demo phone, reused site-wide) — auto-play hero variant ============ */
.cp-phone{width:min(392px,94vw);margin:0 auto;background:#111;border-radius:44px;padding:12px;
  box-shadow:0 30px 70px -22px rgba(26,26,26,.45)}
.cp-scr{background:#FBFBF3;border-radius:34px;overflow:hidden;display:flex;flex-direction:column;height:660px;position:relative}
@media(max-height:820px){.cp-scr{height:600px}}
/* Mobile: the whole phone must sit clearly BETWEEN the fixed nav and the bottom CTA bar —
   cap the screen against the real viewport so nothing hides behind the banners. */
@media(max-width:700px){
  .cp-phone{width:min(320px,84vw)}
  .cp-scr{height:560px;height:min(640px,calc(100svh - 150px))}
}
.cp-top{background:#fff;border-bottom:1px solid var(--hair);padding:13px 16px 11px;display:flex;align-items:center;gap:11px;flex:none}
.cp-top .face{width:34px;height:34px;border-radius:50%;background:var(--lumen);border:1px solid var(--hair);display:grid;place-items:center;font-size:1.05rem}
.cp-top b{font-family:var(--sans);font-size:.95rem;display:block;line-height:1.15;color:var(--ink)}
.cp-top small{color:var(--safe);font-size:.72rem;font-family:var(--sans)}
.cp-chat{flex:1;overflow:hidden;padding:16px 14px 10px;display:flex;flex-direction:column;gap:10px}
.cp-bb{max-width:84%;border-radius:16px;padding:10px 13px;font-family:var(--sans);font-size:.88rem;line-height:1.45;color:var(--ink);
  opacity:0;transform:translateY(14px) scale(.96);transition:opacity .34s cubic-bezier(.22,.9,.24,1),transform .34s cubic-bezier(.22,.9,.24,1)}
.cp-bb.show{opacity:1;transform:none}
.cp-bb.them{background:#fff;border:1px solid var(--hair);border-bottom-left-radius:6px;align-self:flex-start}
.cp-bb.me{background:var(--ink);color:var(--lumen);border-bottom-right-radius:6px;align-self:flex-end}
.cp-bb.me.wide{width:84%}
.cp-bb .ticks{display:block;text-align:right;font-size:.64rem;opacity:.65;margin-top:4px}
.cp-bb .ticks .t2{color:#7ab8ff}
.cp-typing{align-self:flex-start;background:#fff;border:1px solid var(--hair);border-radius:16px;border-bottom-left-radius:6px;
  padding:12px 15px;display:none;gap:4px}
.cp-typing.show{display:flex}
.cp-typing i{width:7px;height:7px;border-radius:50%;background:#b9b9ad;animation:cptp 1.1s infinite}
.cp-typing i:nth-child(2){animation-delay:.15s}.cp-typing i:nth-child(3){animation-delay:.3s}
@keyframes cptp{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.cp-pay{margin-top:8px;border-radius:12px;overflow:hidden;color:#fff;font-family:var(--sans);width:100%}
.cp-card{padding:11px 12px;font-size:.62rem}
.cp-card .hd{display:flex;justify-content:space-between;font-weight:800;letter-spacing:.06em;opacity:.9;font-size:.56rem}
.cp-card .nm{font-size:.8rem;font-weight:700;margin-top:8px}
.cp-card .row{display:flex;justify-content:space-between;margin-top:4px;opacity:.85;font-variant-numeric:tabular-nums}
.cp-map{background:linear-gradient(135deg,#dfeee2,#cfe4d6);position:relative;height:106px;color:var(--ink)}
.cp-map .rd{position:absolute;background:#fff;opacity:.85;height:7px;border-radius:4px}
.cp-map .pin{position:absolute;left:50%;top:42%;transform:translate(-50%,-120%);font-size:1.6rem}
.cp-map.dropped .pin{animation:cppin .55s cubic-bezier(.2,1.6,.4,1) both}
@keyframes cppin{from{transform:translate(-50%,-320%);opacity:0}to{transform:translate(-50%,-120%);opacity:1}}
.cp-map .addr{position:absolute;left:8px;bottom:8px;right:8px;background:#fff;border-radius:8px;padding:6px 9px;
  font-size:.64rem;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.12)}
/* min-height = the taller (Relay) panel, so the qwerty→Relay swap never changes the keyboard's
   height — without it the whole phone interior jolted 7px at every swap (the "glitch"). */
.cp-kbd{background:#ECECE2;border-top:1px solid #DEDED2;padding:10px 10px 14px;flex:none;position:relative;overflow:hidden;min-height:212px}
.cp-kpanel{transition:opacity .32s cubic-bezier(.22,.9,.24,1),transform .32s cubic-bezier(.22,.9,.24,1)}
.cp-kpanel.gone{opacity:0;transform:translateY(14px);position:absolute;inset:10px 10px 14px;pointer-events:none}
.cp-qrow{display:flex;justify-content:center;gap:5px;margin-bottom:7px}
.cp-qk{background:#fff;border-radius:6px;box-shadow:0 1px 0 rgba(0,0,0,.18);font-family:var(--sans);
  font-size:.82rem;color:var(--ink);min-width:8.2%;padding:9px 0;text-align:center;user-select:none}
.cp-qk.util{background:#D9D9CE;font-size:.7rem;min-width:11%}
.cp-qk.space{flex:1;max-width:44%}
.cp-qk.globe{position:relative;font-size:.95rem;border-radius:6px}
.cp-qk.globe.hot{background:var(--ink);color:var(--lumen);animation:cppulse 1.6s ease-in-out infinite}
@keyframes cppulse{0%,100%{box-shadow:0 6px 18px -6px rgba(26,26,26,.35);transform:scale(1)}50%{box-shadow:0 8px 28px -4px rgba(26,26,26,.6);transform:scale(1.05)}}
/* radiating tap-me ring — same beat as the live demo keyboard */
.cp-qk.globe.hot::after,.cp-tile.hot::after{content:"";position:absolute;inset:-3px;border-radius:inherit;
  border:2px solid var(--ink);opacity:0;animation:cpring 1.6s cubic-bezier(.22,.9,.24,1) infinite;pointer-events:none}
@keyframes cpring{0%{opacity:.55;transform:scale(.96)}70%{opacity:0;transform:scale(1.22)}100%{opacity:0;transform:scale(1.22)}}
.cp-toast{position:absolute;left:50%;top:14px;transform:translate(-50%,8px);background:var(--ink);color:var(--lumen);
  font-family:var(--sans);font-size:.78rem;font-weight:600;border-radius:10px;padding:8px 14px;display:flex;align-items:center;gap:7px;
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:3}
.cp-toast.show{opacity:1;transform:translate(-50%,0)}
.cp-chrome{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.cp-lock{display:flex;align-items:center;gap:5px;background:#fff;border-radius:999px;padding:6px 10px;
  font-family:var(--sans);font-size:.66rem;font-weight:600;color:var(--ink)}
.cp-lock i{width:7px;height:7px;border-radius:50%;background:var(--safe)}
.cp-search{flex:1;background:#fff;border-radius:999px;padding:6px 12px;font-family:var(--sans);font-size:.7rem;color:var(--sub)}
.cp-tabs{display:flex;gap:4px;margin-bottom:9px}
.cp-tab{font-family:var(--sans);font-size:.7rem;font-weight:600;color:var(--sub);padding:6px 12px;border-radius:999px;transition:all .25s}
.cp-tab.on{background:var(--ink);color:var(--lumen)}
.cp-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cp-tile{background:#fff;border:1.5px solid transparent;border-radius:13px;padding:10px 8px 9px;text-align:center;
  font-family:var(--sans);user-select:none;position:relative;transition:transform .16s cubic-bezier(.22,.9,.24,1),box-shadow .2s,opacity .2s,border-color .2s}
.cp-tile .ic{font-size:1.25rem;display:block}
.cp-tile b{display:block;font-size:.66rem;font-weight:600;margin-top:4px;color:var(--ink);line-height:1.2}
.cp-tile.hot{border-color:var(--ink);animation:cppulse 1.6s ease-in-out infinite}
.cp-tile.pressed{transform:scale(.93);border-color:var(--ink)}
/* the ghost finger that shows WHERE the auto-play taps */
.cp-ghost{position:absolute;width:40px;height:40px;border-radius:50%;background:rgba(26,26,26,.28);
  border:2px solid rgba(26,26,26,.4);transform:translate(-50%,-50%) scale(.4);opacity:0;pointer-events:none;z-index:9}
.cp-ghost.tap{animation:cpghost .55s cubic-bezier(.22,.9,.24,1) both}
@keyframes cpghost{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}30%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}}
@media (prefers-reduced-motion: reduce){.cp-bb,.cp-tile,.cp-kpanel,.cp-ghost{transition:none !important;animation:none !important}}

/* ============================================================================
   § RESOURCES PAGES — blog, use-cases, support, affiliates + privacy extras
   ========================================================================== */

/* ---------- "what we never see" data table (privacy) ---------- */
.dtable{max-width:860px;margin:36px auto 0;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;background:var(--card)}
.dtable .drow{display:grid;grid-template-columns:1.5fr 1fr 1fr;align-items:center}
.dtable .drow+.drow{border-top:1px solid var(--hair)}
.dtable .drow>div{padding:14px 16px;font-size:.92rem}
.dtable .drow.head>div{font-weight:650;font-family:var(--serif);font-size:1.02rem}
.dtable .drow.head>div:first-child{color:var(--sub);font-family:var(--sans);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;font-weight:650}
.dtable .drow>div:first-child{font-weight:600}
.dtable .drow>div:first-child small{display:block;font-weight:500;color:var(--sub);font-size:.78rem}
.dtable .drow>div:not(:first-child){text-align:center}
.dtable .you{color:var(--safe);font-weight:650}
.dtable .us{color:var(--sub)}
.dtable .us b{color:var(--danger);font-weight:700}
@media(max-width:560px){
  .dtable .drow{grid-template-columns:1.3fr 1fr 1fr}
  .dtable .drow>div{padding:11px 9px;font-size:.78rem}
  .dtable .drow.head>div{font-size:.88rem}
}

/* ---------- blog index cards ---------- */
.bloglist{display:grid;gap:16px;margin-top:36px}
@media(min-width:820px){.bloglist{grid-template-columns:repeat(3,1fr)}}
.postcard{display:flex;flex-direction:column;padding:0;text-decoration:none;overflow:hidden}
.postcard .pimg{height:170px;display:flex;align-items:center;justify-content:center;font-size:3rem;
  border-bottom:1px solid var(--hair);position:relative;overflow:hidden}
.postcard .pimg::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 20% 10%,rgba(26,26,26,.05),transparent 55%)}
.postcard .pbody{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.postcard .ptag{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);font-weight:700}
.postcard h3{margin:8px 0 8px;font-size:1.22rem}
.postcard p{font-size:.9rem;color:var(--sub);flex:1}
.postcard .pmeta{margin-top:16px;font-size:.8rem;color:var(--sub);display:flex;gap:.6em;align-items:center}
.postcard .go{font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:.4em;margin-top:10px;color:var(--ink)}
.postcard .go svg{width:14px;height:14px;transition:transform .25s var(--ease-out)}
.postcard:hover .go svg{transform:translateX(3px)}

/* ---------- article page ---------- */
.post-hero{padding:clamp(44px,9vw,90px) 0 clamp(16px,3vw,28px);text-align:center;border-top:0}
.post-hero h1{font-size:clamp(2rem,5.6vw,3.4rem);max-width:19em;margin:14px auto 0}
.post-hero .pmeta{margin-top:18px;color:var(--sub);font-size:.9rem;display:flex;gap:.7em;justify-content:center;align-items:center;flex-wrap:wrap}
.post-hero .pmeta b{color:var(--ink);font-weight:600}
.prose h3{font-size:1.12rem;margin:1.4em 0 .2em}
.prose blockquote{border-left:3px solid var(--ink);margin:1.2em 0;padding:.2em 0 .2em 1.1em;
  font-family:var(--serif);font-size:1.18rem;line-height:1.5;color:var(--ink)}
.prose hr{border:0;border-top:1px solid var(--hair);margin:2em 0}
.prose .postcta{display:flex;gap:12px;flex-wrap:wrap;margin:2em 0 0}

/* ---------- use-case persona cards ---------- */
.fcard .em{width:46px;height:46px;border-radius:13px;background:color-mix(in srgb,var(--ink) 5%,transparent);
  display:flex;align-items:center;justify-content:center;font-size:1.45rem;margin-bottom:16px}
ul.asks{list-style:none;margin:14px 0 0;display:grid;gap:7px;padding:0}
ul.asks li{display:flex;gap:.5em;align-items:flex-start;font-size:.88rem;color:var(--sub)}
ul.asks li::before{content:"";width:13px;height:13px;flex:none;margin-top:4px;background:var(--safe);
  -webkit-mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12l5 5L20 7" stroke="black" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12l5 5L20 7" stroke="black" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat}
.fcard .try{margin-top:16px;font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:.4em;text-decoration:none;color:var(--ink)}
.fcard .try svg{width:14px;height:14px;transition:transform .25s var(--ease-out)}
.fcard:hover .try svg{transform:translateX(3px)}

/* ---------- FAQ search (support) ---------- */
.faqsearch{max-width:760px;margin:28px auto 0;position:relative}
.faqsearch input{width:100%;font:400 1rem var(--sans);color:var(--ink);background:var(--card);
  border:1px solid var(--hair);border-radius:999px;padding:14px 20px 14px 48px;outline:none;min-height:52px;
  transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.faqsearch input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(26,26,26,.06)}
.faqsearch input::placeholder{color:var(--sub)}
.faqsearch .fsi{position:absolute;left:18px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--sub);pointer-events:none}
.faqcount{max-width:760px;margin:10px auto 0;font-size:.82rem;color:var(--sub);text-align:right;min-height:1.2em}
.faq .fgroup{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--sub);font-weight:700;
  margin:30px 0 4px;padding-top:6px}
.faq .fgroup:first-child{margin-top:0}
.faq details.hide,.faq .fgroup.hide{display:none}
.faqnone{display:none;text-align:center;padding:30px 0 10px;color:var(--sub)}
.faqnone.show{display:block}
.faqnone b{color:var(--ink)}

/* ---------- support / contact card ---------- */
.helpgrid{display:grid;gap:16px;margin-top:36px}
@media(min-width:820px){.helpgrid{grid-template-columns:1fr 1fr 1fr}}
.helpcard{padding:26px 24px;text-align:left;display:flex;flex-direction:column;text-decoration:none}
.helpcard .ic{width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--ink) 5%,transparent);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:1.25rem}
.helpcard .ic svg{width:22px;height:22px;color:var(--ink)}
.helpcard h3{margin-bottom:6px}
.helpcard p{font-size:.92rem;color:var(--sub);flex:1}
.helpcard .go{margin-top:16px;font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:.4em;color:var(--ink)}
.helpcard .go svg{width:14px;height:14px;transition:transform .25s var(--ease-out)}
.helpcard:hover .go svg{transform:translateX(3px)}

/* ---------- affiliate steps ---------- */
.affsteps{display:grid;gap:14px;margin-top:34px}
@media(min-width:760px){.affsteps{grid-template-columns:repeat(3,1fr)}}
.affkpi{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.affkpi .k{background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:18px 26px;text-align:center;min-width:150px}
.affkpi .k b{display:block;font-family:var(--serif);font-size:1.9rem;line-height:1.1}
.affkpi .k small{color:var(--sub);font-size:.82rem}

/* ---------- Use-cases: audience switch + ask→answered vignettes ---------- */
.uc-switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;background:var(--card);
  border:1px solid var(--hair);border-radius:999px;padding:5px;margin:26px auto 0;min-width:min(320px,80vw)}
.uc-switch .uc-knob{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);background:var(--ink);
  border-radius:999px;transition:transform .34s cubic-bezier(.22,.9,.24,1);box-shadow:0 6px 18px -8px rgba(26,26,26,.45)}
.uc-switch.work .uc-knob{transform:translateX(calc(100% - 5px + 5px))}
.uc-switch .uc-seg{position:relative;z-index:1;appearance:none;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-weight:700;font-size:.92rem;padding:11px 26px;border-radius:999px;
  color:var(--sub);transition:color .25s ease}
.uc-switch .uc-seg.on{color:var(--lumen)}
.uc-subline{color:var(--sub);font-size:.95rem;margin:14px 0 0;min-height:1.4em;transition:opacity .25s ease}

.ucgrid{transition:opacity .24s ease,transform .24s ease}
.ucgrid.uc-off{opacity:0;transform:translateY(10px)}

.uc-scene{position:relative;background:#F6F6EA;border:1px solid var(--hair);border-radius:14px;
  padding:12px 12px 30px;margin-bottom:16px;min-height:118px;overflow:hidden;text-align:left}
.uc-scene .uc-ask{display:inline-block;background:#fff;border:1px solid var(--hair);color:var(--ink);
  border-radius:13px 13px 13px 4px;padding:8px 11px;font-size:.76rem;max-width:88%;
  opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.uc-scene .uc-ans{display:flex;align-items:center;gap:6px;background:var(--ink);color:var(--lumen);
  border-radius:13px 13px 4px 13px;padding:8px 11px;font-size:.76rem;font-weight:600;max-width:88%;
  margin:8px 0 0 auto;width:fit-content;
  opacity:0;transform:translateY(8px);transition:opacity .4s ease .5s,transform .4s ease .5s}
.uc-scene .uc-ans .e{font-size:.9rem}
.uc-scene .uc-ans .tick{color:#8CC7A3;font-size:.66rem;margin-left:2px}
.uc-scene .uc-time{position:absolute;left:12px;bottom:9px;font-size:.62rem;font-weight:700;color:var(--sub);
  letter-spacing:.04em;text-transform:uppercase;opacity:0;transition:opacity .4s ease 1s}
.uc-scene.go .uc-ask,.uc-scene.go .uc-ans{opacity:1;transform:none}
.uc-scene.go .uc-time{opacity:1}
@media (prefers-reduced-motion:reduce){
  .uc-scene .uc-ask,.uc-scene .uc-ans,.uc-scene .uc-time{transition:none;opacity:1;transform:none}
}

/* interim SmartScreen guidance under the Windows download (removed once the exe is signed) */
.winnote{max-width:560px;margin:14px auto 0;color:var(--sub);font-size:.8rem;line-height:1.5;text-align:center}
.winnote b{color:var(--ink)}