/* ─── Envoy site — shared tokens, chrome and layout ─────────
   Used by index.html, docs.html and legal.html. Page-specific
   styles stay inline in each page.
   ─────────────────────────────────────────────────────────── */
:root{
  color-scheme: light;

  --ink:#0A0A0A;
  --ink-secondary:#6B6B6B;
  --ink-tertiary:#9A9A9A;
  --surface:#FFFFFF;
  --surface-sunken:#FAFAFA;
  --hairline:#E6E6E6;
  --sun:#FF7A1A;

  /* from envoy-appv2 tokens */
  --claude:#D97757;
  --success:#1E8E3E;
  --success-tint:rgba(52,199,89,.18);
  --toggle-on:#34C759;
  --link:#2B6FD0;

  --font-sans:"Geist","Geist Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:"Faculty Glyphic",Georgia,serif;

  --text-meta:15px;
  --text-label:12px;

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:24px;
  --radius-pill:999px;

  /* One horizontal rhythm for every section. Content width is always
     viewport − 2 × gutter, so all sections share the same edges. */
  --gutter:200px;
  --header-h:88px;
}
@media (max-width:1240px){ :root{ --gutter:72px; } }
@media (max-width:820px){  :root{ --gutter:20px; --header-h:64px; } }
/* large desktop monitors: double the laptop margin */
@media (min-width:1680px){ :root{ --gutter:400px; } }
/* very wide (4K at 1x, ultrawide): hold content at 1600px */
@media (min-width:2400px){ :root{ --gutter:calc((100vw - 1600px) / 2); } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.5;
  font-synthesis:none;
  overflow-wrap:break-word;
}
body.is-locked{ overflow:hidden; }
h1,h2,h3,p,figure,ol,ul{ margin:0; }
ol,ul{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
svg{ display:block; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ─── type roles ─────────────────────────────────────────── */
.eyebrow{
  font-family:var(--font-mono); font-weight:500;
  font-size:var(--text-label); line-height:16px; letter-spacing:.1em;
  color:var(--ink-tertiary); text-transform:uppercase;
}
.h-hero{ font-family:var(--display); font-weight:400; font-size:72px; line-height:76px; letter-spacing:-.03em; }
.h-section{ font-family:var(--display); font-weight:400; font-size:44px; line-height:50px; letter-spacing:-.025em; }
@media (max-width:1100px){
  .h-hero{ font-size:clamp(42px,6.4vw,72px); line-height:1.06; }
  .h-section{ font-size:clamp(32px,4.4vw,44px); line-height:1.14; }
}

/* ─── buttons ────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:48px; padding:0 22px;
  border-radius:10px;
  font-weight:500; font-size:var(--text-meta); line-height:18px;
  white-space:nowrap; user-select:none;
  transition:background .18s ease, box-shadow .18s ease, transform .12s ease, border-color .18s ease;
}
/* skeuomorphic black: lit top edge, tight inner sheen, a real drop */
.btn--dark{
  color:#fff; text-shadow:0 -1px 0 rgba(0,0,0,.5);
  background:linear-gradient(180deg,#2E2E2E 0%,#161616 52%,#0B0B0B 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -1px 2px rgba(255,255,255,.08),
    0 0 0 1px #050505,
    0 1px 1px rgba(0,0,0,.22),
    0 3px 6px -2px rgba(0,0,0,.3);
}
.btn--dark:hover{
  background:linear-gradient(180deg,#3A3A3A 0%,#1D1D1D 52%,#101010 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 2px rgba(255,255,255,.1),
    0 0 0 1px #050505,
    0 2px 2px rgba(0,0,0,.2),
    0 6px 12px -3px rgba(0,0,0,.34);
  transform:translateY(-1px);
}
.btn--dark:active{
  background:linear-gradient(180deg,#0A0A0A 0%,#141414 55%,#1B1B1B 100%);
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,.65),
    inset 0 -1px 0 rgba(255,255,255,.07),
    0 0 0 1px #050505,
    0 1px 0 rgba(255,255,255,.5);
  transform:translateY(1px);
  transition-duration:.06s;
}
.btn--dark:focus-visible{ outline:2px solid #59AFFF; outline-offset:3px; }
.btn--lg{ height:54px; padding:0 34px; font-size:16px; line-height:20px; }

/* ─── header with progressive blur ───────────────────────── */
.header{
  position:sticky; top:0; z-index:40;
  height:var(--header-h); display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gutter);
}
.header__blur{ position:absolute; left:0; right:0; top:0; height:calc(100% + 44px); z-index:-1; pointer-events:none; }
.header__blur > i{ position:absolute; inset:0; }
.header__blur > i:nth-child(1){ backdrop-filter:blur(1px);  -webkit-backdrop-filter:blur(1px);  -webkit-mask-image:linear-gradient(#000 0%,#000 55%,transparent 100%); mask-image:linear-gradient(#000 0%,#000 55%,transparent 100%); }
.header__blur > i:nth-child(2){ backdrop-filter:blur(2px);  -webkit-backdrop-filter:blur(2px);  -webkit-mask-image:linear-gradient(#000 0%,#000 45%,transparent 85%); mask-image:linear-gradient(#000 0%,#000 45%,transparent 85%); }
.header__blur > i:nth-child(3){ backdrop-filter:blur(4px);  -webkit-backdrop-filter:blur(4px);  -webkit-mask-image:linear-gradient(#000 0%,#000 35%,transparent 70%); mask-image:linear-gradient(#000 0%,#000 35%,transparent 70%); }
.header__blur > i:nth-child(4){ backdrop-filter:blur(8px);  -webkit-backdrop-filter:blur(8px);  -webkit-mask-image:linear-gradient(#000 0%,#000 25%,transparent 55%); mask-image:linear-gradient(#000 0%,#000 25%,transparent 55%); }
.header__blur > i:nth-child(5){ backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); -webkit-mask-image:linear-gradient(#000 0%,transparent 40%); mask-image:linear-gradient(#000 0%,transparent 40%); }
.header__blur::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.62) 55%,rgba(255,255,255,0) 100%); }
.header__home{ display:block; color:var(--ink); }
.header__logo{ width:127px; height:24px; }
.header__right{ display:flex; align-items:center; gap:28px; }
.header__link{ font-weight:500; font-size:15px; line-height:18px; color:#3A3A3A; }
.header__link:hover{ color:var(--ink); }
.header__link[aria-current="page"]{ color:var(--ink); text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; }
.header .btn{ height:42px; padding:0 20px; }
@media (max-width:820px){
  .header__logo{ width:106px; height:20px; }
  .header__right{ gap:20px; }
  .header .btn{ height:38px; padding:0 16px; font-size:14px; }
}

/* ─── trust badges ───────────────────────────────────────── */
.trust{ display:flex; flex-wrap:wrap; gap:8px; }
.badge{
  display:inline-flex; align-items:center; gap:8px;
  height:32px; padding:0 12px 0 10px; border-radius:var(--radius-sm);
  background:var(--surface); border:1px solid #E8E8E8;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  font-weight:500; font-size:13px; line-height:16px; color:#2A2A2A; white-space:nowrap;
}
.badge svg{ width:16px; height:16px; flex:none; color:var(--ink); }

/* ─── footer ─────────────────────────────────────────────── */
.footer{ overflow:hidden; border-top:1px solid var(--hairline); padding:64px var(--gutter) 48px; }
.footer__row{ display:flex; align-items:center; justify-content:space-between; gap:24px 32px; flex-wrap:wrap; }
.footer__links{ display:flex; align-items:center; gap:40px; flex-wrap:wrap; }
.footer__links a{ font-size:var(--text-meta); line-height:18px; color:#3A3A3A; }
.footer__links a:hover{ text-decoration:underline; text-underline-offset:4px; }
.footer__mark{ position:relative; margin-top:64px; aspect-ratio:1292 / 244; color:var(--ink); }
.footer__mark svg{ position:absolute; inset:0; width:100%; height:100%; opacity:.07; }
.footer__mark canvas{ position:absolute; inset:0; width:100%; height:100%; }
.footer__mark.is-live svg{ opacity:0; }
.footer__mark.is-paper > svg{ opacity:0; }
/* the lockup in folded black paper (assets/footer-fold.js): lying on the page, a hair raised by its folds */
.footer__mark canvas.ff{ filter:drop-shadow(0 .5px .5px rgba(20,16,8,.3)) drop-shadow(0 3px 4px rgba(20,16,8,.12)) drop-shadow(0 12px 18px rgba(20,16,8,.08)); }
.footer__legal{
  display:flex; align-items:flex-start; justify-content:space-between; gap:32px; flex-wrap:wrap;
  margin-top:40px; padding-top:24px; border-top:1px solid #EDEDED;
}
.footer__legal small{ font-size:13px; line-height:21px; color:var(--ink-tertiary); }
.footer__legal p{ width:520px; max-width:100%; text-align:right; font-size:13px; line-height:21px; color:var(--ink-tertiary); }
@media (max-width:820px){
  .footer{ padding-top:44px; padding-bottom:32px; }
  .footer__row{ flex-direction:column; align-items:stretch; gap:28px; }
  .footer__row .trust{ align-self:flex-start; }
  /* the links in a tidy two-column grid instead of a ragged wrap */
  .footer__links{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px 24px; }
  .footer__links a{ font-size:14px; line-height:20px; }
  .footer__mark{ margin-top:44px; }
  .footer__legal{ margin-top:28px; flex-direction:column; gap:10px; }
  .footer__legal p{ text-align:left; }
}

/* ─── QR on paper ────────────────────────────────────────── */
.qrb{ display:flex; align-items:center; gap:22px; text-align:left; }
.qrb > b{ font-weight:500; font-size:16px; line-height:20px; }
.paper{
  --size:168px;
  position:relative; flex:none; width:var(--size); height:var(--size); padding:calc(var(--size) * .085);
  border-radius:4px; cursor:pointer;
  background:var(--ink);
  box-shadow:
    0 0 0 .5px rgba(60,50,30,.1),
    0 1px 1px rgba(40,30,10,.06),
    0 4px 8px -2px rgba(40,30,10,.08),
    0 16px 32px -10px rgba(40,30,10,.2);
  transform:perspective(700px) rotateX(0) rotateY(0) translateZ(0);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
/* soft lighting that follows the press point */
.paper::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(circle at var(--px,50%) var(--py,50%), rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 45%),
             linear-gradient(155deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 40%);
  opacity:0; transition:opacity .3s ease;
}
.paper.is-hover::after{ opacity:1; }
.paper.is-hover{
  box-shadow:
    0 0 0 .5px rgba(60,50,30,.12),
    0 1px 1px rgba(40,30,10,.08),
    0 2px 4px -1px rgba(40,30,10,.1),
    0 8px 16px -8px rgba(40,30,10,.18);
  transition-duration:.18s;
}
.paper.is-pressed{
  box-shadow:
    0 0 0 .5px rgba(60,50,30,.14),
    0 2px 3px rgba(40,30,10,.14),
    0 10px 18px -4px rgba(40,30,10,.24),
    0 26px 48px -12px rgba(40,30,10,.32);
  transition-duration:.12s;
}
.paper [data-qr], .paper [data-qr] svg{ width:100%; height:100%; }
.paper svg path{ fill:#FFFFFF; }
@media (prefers-reduced-motion:reduce){ .paper{ transition:none; } }

.only-phone{ display:none !important; }
@media (max-width:820px){
  .not-phone{ display:none !important; }
  .only-phone{ display:inline-flex !important; }
}

/* ─── Envoy app icon ─────────────────────────────────────── */
.app-icon{
  display:flex; align-items:center; justify-content:center;
  width:120px; height:120px; border-radius:27px; background:#0A0A0A;
  box-shadow:0 18px 40px rgba(10,10,10,.25);
}
.app-icon svg{ width:56%; height:auto; color:#fff; }

/* ─── get-the-app sheet ──────────────────────────────────── */
.modal{
  position:fixed; inset:0; z-index:100;
  display:none; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(12,12,12,.42);
}
.modal.is-open{ display:flex; }
.modal__card{
  position:relative; width:100%; max-width:780px; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--surface); border-radius:var(--radius-lg);
  box-shadow:0 60px 140px rgba(0,0,0,.3);
}
.modal__art{
  position:relative; min-height:500px; overflow:hidden;
  display:flex; justify-content:center; align-items:center;
  background:
    radial-gradient(ellipse 90% 70% at 10% 0%, rgba(255,150,90,.32) 0%, rgba(255,150,90,0) 60%),
    radial-gradient(ellipse 90% 70% at 95% 5%, rgba(96,140,255,.28) 0%, rgba(96,140,255,0) 58%),
    linear-gradient(180deg, #FFFFFF 0%, #F4F4F4 100%);
}
.modal__art .app-icon{ margin-top:190px; }
.modal__art .device{ --w:220 !important; }
.modal__body{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:48px 40px; text-align:center; }
.modal__close{
  position:absolute; top:16px; right:16px; z-index:2;
  width:34px; height:34px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center; background:#F3F3F3;
}
.modal__close:hover{ background:#E8E8E8; }
.modal__title{ font-family:var(--display); font-weight:400; font-size:32px; line-height:36px; letter-spacing:-.02em; }
.modal__body .eyebrow{ font-size:11px; line-height:14px; }
.modal__body p{ max-width:260px; font-size:15px; line-height:23px; color:var(--ink-secondary); }
.modal__body .paper{ --size:220px; margin:12px 0 10px; }
@media (max-width:760px){
  .modal__card{ grid-template-columns:1fr; max-width:420px; }
  .modal__art{ min-height:0; height:260px; align-items:flex-start; padding-top:28px; }
  .modal__art .device{ --w:150 !important; }
  .modal__art .app-icon{ margin-top:50px; }
}

@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }