/* =========================================================================
   METHOD — shared tokens and components for the marketing site, sign-in,
   welcome and account pages.

   Taken from METHOD itself (app/index.html): the same tokens, Instrument Sans
   with IBM Plex Mono for technical lines, the same controls. "Quiet interface,
   loud picture. One ink, one functional red (recording only)." The marketing
   pages add one display face for statements (Archivo, compressed); the
   interface itself stays METHOD's. Negative swaps the tokens and nothing else.
   ========================================================================= */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;
  src:url(../fonts/instrument-sans-var.woff2) format("woff2")}
/* type: Geist (Vercel, OFL) for headlines — precise, tight, sentence case; Doto (OFL) for the big numbers, a dot matrix like an
   instrument's display; IBM Plex Mono for every technical label; Instrument Sans for the little body copy there is. */
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/geist-var.woff2) format("woff2")}
@font-face{font-family:"Doto";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/doto-var.woff2) format("woff2")}
/* Archivo: kept for anything that still asks for it */
@font-face{font-family:"Archivo Display";font-style:normal;font-weight:400 900;font-stretch:62% 100%;font-display:swap;
  src:url(../fonts/archivo-display.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-500.woff2) format("woff2")}

:root{
  --paper:#F1F1EE; --surface:#F8F8F6; --well:#E7E7E3; --line:#DDDDD8; --line-2:#C9C9C3;
  --ink:#121213; --ink-2:#55565A; --ink-3:#8B8C8F; --stage:#E4E4E0; --rec:#E0352B; --rec-ink:#fff; --acc:#F0641E;
  --f:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  --dot:"Doto",var(--mono);
  --ease:cubic-bezier(.2,.7,.2,1); --t:.45s;
  --gut:clamp(16px,3.4vw,48px);
  color-scheme:light;
}
/* Negative: the whole page, or one section of it (.neg), on the inverse tokens */
:root[data-neg],.neg{
  --paper:#101011; --surface:#161617; --well:#1E1E20; --line:#27272A; --line-2:#37373A;
  --ink:#EEEEEB; --ink-2:#A9AAA6; --ink-3:#707170; --stage:#1A1A1C;
  color-scheme:dark;
}
/* a dark section stays dark under Negative and a light one turns dark: the page keeps its rhythm of paper and black */
:root[data-neg] .neg{--paper:#F1F1EE; --surface:#F8F8F6; --well:#E7E7E3; --line:#DDDDD8; --line-2:#C9C9C3;
  --ink:#121213; --ink-2:#55565A; --ink-3:#8B8C8F; --stage:#E4E4E0; color-scheme:light}
:root[data-neg] .neg.stay{--paper:#101011; --surface:#161617; --well:#1E1E20; --line:#27272A; --line-2:#37373A;
  --ink:#EEEEEB; --ink-2:#A9AAA6; --ink-3:#707170; --stage:#1A1A1C; color-scheme:dark}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:15px/1.5 var(--f);font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background var(--t) var(--ease),color var(--t) var(--ease)}
img,video,canvas,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;align-items:normal}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono);font-weight:400;letter-spacing:.02em}
.lab{font-size:12px;color:var(--ink-3);display:block}
.note{color:var(--ink-3);font-size:12.5px}
.link{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.link:hover{color:var(--ink);text-decoration-color:var(--ink)}
.link:disabled{color:var(--ink-3);text-decoration:none;cursor:default}

/* ---------------- buttons (the app's .btn, one step larger for the page) ---------------- */
.btn{height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--line-2);display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:500;font-size:13px;white-space:nowrap;transition:border-color .2s,background .2s,color .2s,opacity .2s}
.btn:hover{border-color:var(--ink-3)}
.btn.q{border-color:transparent;color:var(--ink-2)} .btn.q:hover{background:var(--well);color:var(--ink)}
.btn.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.solid:hover{opacity:.88}
.btn[hidden]{display:none}
/* the page's call to action: the record button's proportions, without its red (red is for recording only) */
.cta{position:relative;height:54px;padding:0 26px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-weight:600;font-size:14.5px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 1px var(--ink);transition:background .3s,color .3s,box-shadow .3s,opacity .2s}
.cta:hover{opacity:.9}
.cta.line{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.cta.line:hover{opacity:1;box-shadow:inset 0 0 0 1px var(--ink)}
.cta .arr{width:14px;height:14px;flex:none;transition:transform .35s var(--ease)}
.cta:hover .arr{transform:translateX(3px)}
.cta small{font-weight:500;font-size:12px;letter-spacing:.02em;text-transform:none;opacity:.7}
/* magnetic, exactly as the app's: the element leans toward the pointer and springs back */
.magnet{transition:transform .5s cubic-bezier(.2,.9,.3,1.2)}
.magnet.pull{transition:transform .12s linear}
.magnet>*{transition:transform .5s cubic-bezier(.2,.9,.3,1.2)}
.magnet.pull>*{transition:transform .12s linear}

/* Negative: a half-disc that turns over */
.neg-i{width:15px;height:15px;border-radius:50%;border:1.5px solid currentColor;position:relative;overflow:hidden;transition:transform var(--t) var(--ease);flex:none}
.neg-i::after{content:"";position:absolute;inset:0 50% 0 0;background:currentColor}
:root[data-neg] .neg-i{transform:rotate(180deg)}

/* ---------------- header (the app's top bar) ---------------- */
.top{position:fixed;left:0;right:0;top:0;z-index:30;height:56px;display:flex;align-items:center;gap:10px;padding:0 20px 0 24px;min-width:0;
  color:var(--ink);transition:color .45s var(--ease),background .45s var(--ease),box-shadow .45s var(--ease)}
.top::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--paper) 82%,transparent);
  -webkit-backdrop-filter:saturate(1.2) blur(14px);backdrop-filter:saturate(1.2) blur(14px);box-shadow:0 1px 0 var(--line);opacity:0;transition:opacity .45s var(--ease)}
.top.scrolled::before{opacity:1}
.brand{font-weight:600;font-size:15px;letter-spacing:.14em;white-space:nowrap}
.crumb{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink-3);white-space:nowrap;min-width:0}
.crumb b{font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.crumb:empty{display:none}
.top-nav{display:flex;align-items:center;gap:2px;margin-left:18px}
.top-r{margin-left:auto;display:flex;align-items:center;gap:6px}
.acct-slot{display:flex;align-items:center;gap:6px}
.acct-slot .btn{min-width:0}
.acct-slot[aria-busy=true]{visibility:hidden}
.av{border-radius:50%;background:var(--ink);color:var(--paper);display:inline-grid;place-items:center;font-weight:600;letter-spacing:.02em;overflow:hidden;flex:none}
.av img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------------- segmented control (the app's .seg) ---------------- */
.seg{display:flex;background:var(--well);border-radius:9px;padding:2px;gap:2px}
.seg button{flex:1 1 auto;min-width:0;height:28px;border-radius:7px;font-size:12.5px;color:var(--ink-2);transition:background .2s,color .2s,box-shadow .2s;white-space:nowrap;padding:0 10px;overflow:hidden;text-overflow:ellipsis}
.seg button:hover{color:var(--ink)}
.seg button[aria-checked=true],.seg button[aria-selected=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--line)}

/* ---------------- sheet (the app's modal + sign-in sheet) ---------------- */
.modal{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:16px}
.modal.on{display:flex}
.modal-card{background:var(--surface);color:var(--ink);border-radius:14px;padding:22px 24px;min-width:0;box-shadow:0 30px 80px -30px rgba(0,0,0,.6);animation:tin .35s var(--ease)}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}
.modal-card h2{font-size:16px;font-weight:500;margin-bottom:12px}
.modal-card.auth{width:min(380px,calc(100vw - 32px));padding:30px 28px 24px}
.au-mark{font-weight:600;letter-spacing:.14em;font-size:12px;color:var(--ink-2);margin-bottom:18px}
.modal-card.auth h2{font-size:21px;font-weight:500;letter-spacing:-.01em;margin-bottom:22px}
.au-btn{width:100%;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:500;font-size:14px;margin-top:8px;transition:background .2s,opacity .2s,box-shadow .2s}
.au-btn:disabled{opacity:.45;cursor:not-allowed}
.au-btn.google{background:#fff;color:#1f1f1f;box-shadow:inset 0 0 0 1px #747775;font-family:Roboto,var(--f)}
.au-btn.google:not(:disabled):hover{background:#f7f8f8}
.au-btn.apple{background:#000;color:#fff}
.au-btn.apple:not(:disabled):hover{background:#1c1c1e}
.au-btn.email{background:var(--well);color:var(--ink)}
.au-btn.primary{background:var(--ink);color:var(--paper)}
.au-btn.email:not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.au-ic{display:inline-grid;place-items:center;width:18px;height:18px}
.au-or{display:flex;align-items:center;gap:12px;margin:16px 0 8px;color:var(--ink-3);font-size:12px}
.au-or::before,.au-or::after{content:"";flex:1;height:1px;background:var(--line)}
.au-err{color:var(--rec);font-size:12.5px;margin-top:10px;text-align:center}
.au-err:empty{display:none}
.au-note{color:var(--ink-2);font-size:12.5px;margin-top:10px;text-align:center}
.au-note:empty{display:none}
.au-sub{font-size:13px;color:var(--ink-2);margin:-6px 0 12px}
.au-form{display:flex;flex-direction:column;gap:0}
.bin{height:32px;width:100%;min-width:0;border:1px solid var(--line);border-radius:8px;padding:0 10px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;
  transition:border-color .2s,background .3s,color .3s}
.bin:hover{border-color:var(--line-2)} .bin:focus{outline:none;border-color:var(--ink)}
.bin::placeholder{color:var(--ink-3)}
.au-in{height:44px;font-size:15px;border-radius:10px}
.au-in.code{letter-spacing:.12em;font-variant-numeric:tabular-nums;text-align:center}
.au-alt{font-size:12.5px;color:var(--ink-3);margin-top:18px;text-align:center}
.au-fine{font-size:11.5px;color:var(--ink-3);margin-top:14px;text-align:center;line-height:1.45}
.modal-card.auth.signin{width:min(400px,calc(100vw - 32px));padding:40px 36px 30px;border-radius:18px;border:1px solid var(--line);box-shadow:0 40px 90px -48px rgba(0,0,0,.4)}
.modal-card.auth.signin h2{font-size:26px;font-weight:500;letter-spacing:-.025em;line-height:1.15;margin-bottom:28px}
.modal-card.signin .au-btn{height:48px;border-radius:12px;font-size:14.5px}
.modal-card.signin .au-btn.email{background:none;box-shadow:inset 0 0 0 1px var(--line-2)}
.modal-card.signin .au-btn.email:not(:disabled):hover{box-shadow:inset 0 0 0 1px var(--ink)}
.modal-card.signin .au-or{margin:18px 0 10px}
.modal-card.signin .au-in{height:48px;border-radius:12px;font-size:16px;padding:0 14px;transition:border-color .2s,box-shadow .2s,background .3s,color .3s}
.modal-card.signin .au-in:focus{box-shadow:0 0 0 3px var(--line)}
.modal-card.signin .au-sub{font-size:14px;line-height:1.5;margin:-16px 0 20px}
.modal-card.signin .au-alt{margin-top:26px;font-size:13px}
.modal-card.signin .au-alt.tight{margin-top:8px}
.modal-card.signin .au-btn[aria-busy=true]{opacity:.7;cursor:progress}
.modal-card.signin .au-lead{margin:-14px 0 24px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.modal-card.signin .au-to{color:var(--ink);font-weight:500;overflow-wrap:anywhere}
.modal-card.signin .au-then{margin-top:12px}
.modal-card.signin .au-in.code{font-size:20px;font-weight:500;letter-spacing:.12em}
.modal-card.signin .au-in.code:placeholder-shown{font-size:16px;font-weight:400;letter-spacing:0}
.modal-card.auth.lic .au-fine{font-size:12px;color:var(--ink-3);text-align:center;margin:10px 0 0}
.modal-card.auth.lic .au-sub{margin:0 0 18px}
@media (max-width:420px){ .modal-card.auth.signin{padding:34px 24px 26px} .modal-card.auth.signin h2{font-size:24px;margin-bottom:24px} }

/* account menu (the app's .acct-pop) */
.acct-pop{position:fixed;top:50px;right:16px;z-index:46;width:264px;padding:6px;border-radius:12px;background:var(--surface);color:var(--ink);
  box-shadow:0 0 0 1px var(--line),0 18px 40px -18px rgba(0,0,0,.35);animation:tin .22s var(--ease)}
.am-who{display:flex;align-items:center;gap:10px;padding:8px 8px 10px}
.am-id{display:flex;flex-direction:column;min-width:0}
.am-id b{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-id span{font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-sep{height:1px;background:var(--line);margin:4px 2px}
.am-i{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;height:32px;padding:0 8px;border-radius:7px;font-size:13px;color:var(--ink)}
.am-i em{font-style:normal;font-size:12px;color:var(--ink-3)}
.am-i:hover,.am-i:focus-visible{background:var(--well);outline:none}
@media (max-width:760px){ .acct-pop{right:8px;left:8px;width:auto;top:52px} }

/* toast (the app's) */
.toasts{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:10px;font-size:13px;max-width:min(440px,calc(100vw - 32px));box-shadow:0 10px 30px -12px rgba(0,0,0,.4);animation:tin .35s var(--ease)}

/* the Negative wipe, as in the app: the new state wipes over the old, top to bottom */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
.vt-neg::view-transition-new(root){animation:negwipe .6s cubic-bezier(.65,0,.35,1) both}
@keyframes negwipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01s!important;animation-duration:.01s!important;scroll-behavior:auto!important}}
@media (max-width:760px){ .top{padding:0 12px 0 18px} .top-nav{display:none} .top .btn .t{display:none} }
@media (max-width:380px){ .top{padding:0 8px 0 14px;gap:6px} .brand{letter-spacing:.1em} .acct-slot .btn{padding:0 9px;font-size:12px} }
/* during the Negative wipe the new state is already final, so the wipe reveals it cleanly */
.vt-neg body,.vt-neg body *{transition:none!important}