/* =========================================================================
   AnyDaruma — marketing site. Faithful build of the Claude Design handoff
   (design_handoff_website). Vermilion on washi, sumi dark bands.
   Single accent; green is status-only. English-only. Self-hosted fonts.
   ========================================================================= */

/* ---- Fonts (self-hosted, OFL 1.1) -------------------------------------- */
@font-face { font-family:'Hanken Grotesk'; src:url('assets/fonts/HankenGrotesk-Regular.ttf') format('truetype');  font-weight:400; font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; src:url('assets/fonts/HankenGrotesk-Medium.ttf') format('truetype');   font-weight:500; font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; src:url('assets/fonts/HankenGrotesk-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; src:url('assets/fonts/HankenGrotesk-Bold.ttf') format('truetype');     font-weight:700; font-display:swap; }
@font-face { font-family:'Geist Mono'; src:url('assets/fonts/GeistMono-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Geist Mono'; src:url('assets/fonts/GeistMono-Medium.ttf') format('truetype');  font-weight:500; font-display:swap; }

/* ---- Tokens ------------------------------------------------------------ */
:root {
  /* accent system — recolor the whole site from one hex */
  --accent: #D2473B;
  --accent-glow: rgba(210,71,59,.50);
  --accent-ring: rgba(210,71,59,.10);
  --accent-wash: rgba(210,71,59,.06);

  /* washi (light) */
  --bg: #F4F1EA;
  --bg-deep: #ECE7DD;
  --band-line: #E2DBCD;
  --surface: #FCFAF5;
  --white: #FFFFFF;
  --ink: #1C1A17;
  --lead: #5E594F;
  --card-body: #6B665B;
  --secondary: #79746A;
  --faint: #A8A296;
  --eyebrow: #9C9789;
  --line: #E6E0D4;
  --line-inner: #EFE9DE;
  --line-ghost: #DDD6C9;
  --line-tag: #D3CDC1;

  /* status (green is status-only, never a 2nd brand color) */
  --green: #3F9D6B;

  /* type */
  --sans: 'Hanken Grotesk','PingFang SC','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono: 'Geist Mono',ui-monospace,'SF Mono','Cascadia Code',Menlo,Consolas,monospace;

  /* layout */
  --ct: 1180px;
  --pad: 40px;
}

/* sumi (dark) bands recolor accent to the brightened-for-dark vermilion */
.band-dark {
  --accent: #E2564A;
  --accent-glow: rgba(226,86,74,.50);
}

/* ---- Reset / base ------------------------------------------------------ */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body {
  font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.6;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:inherit; text-decoration:none; }
img,svg { display:block; max-width:100%; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
::selection { background:rgba(210,71,59,.16); }

/* ---- Layout primitives ------------------------------------------------- */
.ct { width:100%; max-width:var(--ct); margin-inline:auto; padding-inline:var(--pad); }
.section { padding-block:clamp(72px,9vw,112px); }
.section--tight { padding-block:clamp(48px,6vw,76px); }
.band-deep { background:var(--bg-deep); border-top:1px solid var(--band-line); border-bottom:1px solid var(--band-line); }
.band-dark { background:#161410; color:#EFEBE1; }

/* eyebrow (kanji kicker + mono label) */
.eyebrow { display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--eyebrow); }
.band-dark .eyebrow { color:#8C8676; }

.lead { font-size:clamp(16px,1.4vw,18.5px); line-height:1.62; color:var(--lead); }
.band-dark .lead { color:#B8B2A4; }

h1,h2,h3 { font-weight:700; letter-spacing:-1.2px; line-height:1.1; }
.sec-h2 { font-size:clamp(30px,3.8vw,46px); letter-spacing:-1.2px; }
.sec-head { margin-bottom:clamp(36px,5vw,60px); }
.sec-head .eyebrow { margin-bottom:18px; }
.sec-head h2 { margin-bottom:0; }

/* section head with right-side lead (how it works / studio pattern) */
.head-split { display:flex; flex-wrap:wrap; gap:28px 56px; align-items:flex-end; justify-content:space-between; }
.head-split h2 { flex:1 1 420px; }
.head-split .lead { flex:0 1 380px; }

/* ---- Buttons ----------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; font-weight:600; transition:transform .18s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space:nowrap; }
.btn-primary { background:var(--accent); color:#fff; box-shadow:0 16px 32px -12px var(--accent-glow); padding:15px 26px; font-size:15.5px; }
.btn-primary:hover { transform:translateY(-2px); }
.btn-ghost { background:var(--surface); color:var(--ink); border:1px solid var(--line-ghost); padding:15px 26px; font-size:15.5px; }
.btn-ghost:hover { border-color:var(--accent); }
.btn .chev { width:7px; height:7px; border-right:2px solid currentColor; border-top:2px solid currentColor; transform:rotate(45deg); margin-left:1px; }

/* ---- Nav --------------------------------------------------------------- */
.nav { position:sticky; top:0; z-index:50; background:rgba(244,241,234,.82); -webkit-backdrop-filter:saturate(1.5) blur(16px); backdrop-filter:saturate(1.5) blur(16px); border-bottom:1px solid rgba(230,224,212,.7); }
.nav .ct { display:flex; align-items:center; justify-content:space-between; height:70px; }
.brand { display:inline-flex; align-items:center; gap:11px; }
.brand .dot { width:14px; height:14px; border-radius:50%; background:var(--accent); box-shadow:0 4px 12px -2px var(--accent-glow); flex:none; }
.brand .name { font-size:19px; font-weight:700; letter-spacing:-.3px; }
.brand .tag { font-family:var(--mono); font-size:10.5px; color:#8A857A; border:1px solid var(--line-tag); border-radius:6px; padding:3px 7px; letter-spacing:.5px; }
.nav-links { display:flex; gap:30px; }
.nav-links a { font-size:14.5px; font-weight:500; color:#4D4840; transition:color .2s ease; }
.nav-links a:hover { color:var(--accent); }
.nav-right { display:flex; align-items:center; gap:16px; }
.dl-pill { background:var(--accent); color:#fff; border-radius:999px; padding:10px 18px; font-size:14px; font-weight:600; box-shadow:0 12px 26px -12px var(--accent-glow); transition:transform .18s ease; display:inline-flex; align-items:center; gap:7px; }
.dl-pill:hover { transform:translateY(-1px); }

/* ---- Hero -------------------------------------------------------------- */
.hero { padding-top:clamp(56px,7vw,96px); padding-bottom:clamp(64px,8vw,104px); }
.hero .ct { display:flex; flex-wrap:wrap; gap:72px; align-items:flex-start; }
.hero-copy { flex:1 1 460px; min-width:320px; }
.hero-copy h1 { font-size:clamp(42px,5.4vw,68px); line-height:1.04; letter-spacing:-2px; margin:20px 0 0; }
.hero-copy .lead { margin-top:24px; max-width:520px; }
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.trust { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:26px; font-family:var(--mono); font-size:12px; color:#8A857A; }
.trust .sep { color:#D3CCBE; }

/* hero phone stage */
.phone-col { flex:0 1 390px; position:relative; display:flex; justify-content:center; }
.phone-stage { position:relative; }
.phone-stage::before { content:""; position:absolute; width:540px; height:540px; left:50%; top:46%; transform:translate(-50%,-50%); background:radial-gradient(closest-side, var(--accent-wash), transparent 72%); pointer-events:none; z-index:0; }
.phone-stage::after { content:""; position:absolute; width:512px; height:512px; left:50%; top:46%; transform:translate(-50%,-50%); border:1px solid #E6E0D4; border-radius:50%; pointer-events:none; z-index:0; }
.phone-wrap { position:relative; z-index:1; transform-origin:top center; }

/* ---- How it works (#how) ---------------------------------------------- */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:22px; }
.step { background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:26px; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.step:hover { transform:translateY(-3px); border-color:#DCD2C4; box-shadow:0 22px 44px -28px rgba(40,30,20,.32); }
.step-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.step-idx { font-family:var(--mono); font-size:14px; font-weight:500; color:var(--accent); letter-spacing:1px; }
.overline { font-size:12px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--faint); }
.step h3 { font-size:18px; font-weight:600; letter-spacing:-.2px; margin-top:18px; }
.step p { font-size:14.5px; line-height:1.6; color:var(--card-body); margin-top:8px; }

/* mini-UIs inside step cards */
.mini { display:flex; flex-direction:column; gap:12px; }
.mini-code { display:flex; align-items:center; justify-content:space-between; background:#fff; border:1.5px solid var(--accent); border-radius:14px; padding:14px 16px; box-shadow:0 0 0 4px var(--accent-wash); }
.mini-code .code { font-family:var(--mono); font-size:15px; letter-spacing:1.5px; color:var(--ink); }
.mini-code .paste { font-size:13.5px; font-weight:600; color:var(--accent); }
.mini-valid { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--secondary); }
.mini-valid .tick { width:18px; height:18px; border-radius:50%; background:rgba(63,157,107,.14); color:var(--green); display:grid; place-items:center; flex:none; }
.mini-valid .tick svg { width:11px; height:11px; }
.mini-valid .site { font-family:var(--mono); color:var(--ink); }
.mini-pill { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:7px 13px; font-family:var(--mono); font-size:12.5px; color:var(--secondary); }
.mini-pill .lock { width:11px; height:11px; color:var(--secondary); }
.mini-field { background:#fff; border:1px solid var(--line); border-radius:12px; padding:13px 15px; font-size:14px; color:var(--secondary); }
.mini-field.dots { letter-spacing:3px; }
.mini-chip { align-self:center; display:inline-flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:8px 15px; }
.mini-chip .gdot { width:7px; height:7px; border-radius:50%; background:var(--green); }
.mini-chip .nm { font-size:13px; font-weight:600; }
.mini-chip .div { width:1px; height:11px; background:var(--line); }
.mini-chip .ms { font-family:var(--mono); font-size:12px; color:var(--secondary); }
.mini-connect { display:flex; flex-direction:column; align-items:center; gap:0; padding:6px 0 2px; }
.mini-btn { width:96px; height:96px; border-radius:50%; background:var(--accent); display:grid; place-items:center; box-shadow:0 16px 34px -14px var(--accent-glow), inset 0 0 0 1px rgba(255,255,255,.18), inset 0 0 0 6px rgba(255,255,255,.10); }
.mini-connect .st { font-size:15px; font-weight:600; margin-top:16px; }
.mini-connect .tm { font-family:var(--mono); font-size:12px; color:var(--secondary); margin-top:6px; letter-spacing:1.5px; }

/* power glyph (reusable, two sizes) */
.power { position:relative; display:grid; place-items:center; }
.power .ring { border-radius:50%; border-style:solid; border-color:#fff; }
.power .gap { position:absolute; left:50%; transform:translateX(-50%); background:var(--accent); }
.power .bar { position:absolute; left:50%; transform:translateX(-50%); background:#fff; border-radius:2px; }
.power--sm { width:30px; height:30px; }
.power--sm .ring { width:30px; height:30px; border-width:2.4px; opacity:.95; }
.power--sm .gap { top:-1px; width:7px; height:6px; }
.power--sm .bar { top:4px; width:2.4px; height:11px; }

/* ---- Features (#features) --------------------------------------------- */
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:20px; }
.feat { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:30px 26px 32px; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.feat:hover { transform:translateY(-3px); border-color:#DCD2C4; box-shadow:0 22px 44px -28px rgba(40,30,20,.3); }
.feat h3 { font-size:19px; font-weight:600; letter-spacing:-.2px; margin-top:22px; }
.feat p { font-size:15px; line-height:1.64; color:var(--card-body); margin-top:10px; }

/* feature icons — CSS primitives (no SVG art) */
.ic { width:52px; height:52px; position:relative; }
.ic-provider .c { position:absolute; top:11px; width:30px; height:30px; border-radius:50%; }
.ic-provider .c1 { left:0; border:2px solid var(--ink); }
.ic-provider .c2 { left:16px; border:2px solid var(--accent); }
.ic-privacy .dia { position:absolute; top:9px; left:9px; width:34px; height:34px; border:2px solid var(--ink); border-radius:6px; transform:rotate(45deg); }
.ic-privacy .pdot { position:absolute; top:21.5px; left:21.5px; width:9px; height:9px; border-radius:50%; background:var(--accent); }
.ic-apple .sq { position:absolute; top:6px; left:6px; width:40px; height:40px; border:2px solid var(--ink); border-radius:11px; }
.ic-apple .isq { position:absolute; top:19px; left:19px; width:14px; height:14px; border-radius:4px; background:var(--accent); }
.ic-theme .ring { position:absolute; top:9px; left:9px; width:34px; height:34px; border-radius:50%; border:2px solid var(--accent); overflow:hidden; }
.ic-theme .ring::before { content:""; position:absolute; inset:0; width:50%; background:#F4F1EA; }
.ic-theme .ring::after { content:""; position:absolute; inset:0; left:50%; width:50%; background:#1C1A17; }

/* ---- Privacy (added) --------------------------------------------------- */
.privacy-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:20px; }
.guard { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:26px; }
.guard .gh { display:flex; align-items:center; gap:12px; }
.guard .tick { width:26px; height:26px; border-radius:50%; background:rgba(63,157,107,.14); color:var(--green); display:grid; place-items:center; flex:none; }
.guard .tick svg { width:14px; height:14px; }
.guard h3 { font-size:16.5px; font-weight:600; letter-spacing:-.1px; }
.guard p { font-size:14.5px; line-height:1.62; color:var(--card-body); margin-top:12px; }

/* ---- FAQ (added) ------------------------------------------------------- */
.faq { display:grid; gap:12px; max-width:820px; }
.faq details { background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; transition:border-color .2s ease; }
.faq details[open] { border-color:#DCD2C4; }
.faq summary { list-style:none; cursor:pointer; padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:16px; font-weight:600; letter-spacing:-.1px; }
.faq summary::-webkit-details-marker { display:none; }
.faq .pm { position:relative; width:18px; height:18px; flex:none; }
.faq .pm::before,.faq .pm::after { content:""; position:absolute; background:var(--faint); border-radius:2px; transition:transform .2s ease; }
.faq .pm::before { left:0; right:0; top:8px; height:2px; }
.faq .pm::after { top:0; bottom:0; left:8px; width:2px; }
.faq details[open] .pm::after { transform:scaleY(0); }
.faq .ans { padding:0 22px 20px; font-size:15px; line-height:1.65; color:var(--card-body); }
.faq .ans a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

/* ---- Disclaimer -------------------------------------------------------- */
.disc { display:flex; flex-wrap:wrap; gap:32px; background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:clamp(28px,4vw,44px); }
.disc .mk { flex:none; width:46px; height:46px; border-radius:50%; border:2px solid var(--line-ghost); display:grid; place-items:center; }
.disc .mk .ex { width:4px; height:22px; background:var(--accent); border-radius:2px; position:relative; }
.disc .mk .ex::after { content:""; position:absolute; bottom:-9px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--accent); }
.disc .body { flex:1 1 460px; }
.disc .body .ov { font-size:12px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--faint); margin-bottom:14px; }
.disc .body p { font-size:19px; line-height:1.6; color:#3F3B33; letter-spacing:-.2px; }
.disc .body p.sub { font-size:14.5px; color:var(--secondary); margin-top:14px; letter-spacing:0; }

/* ---- Footer ------------------------------------------------------------ */
.footer { padding-block:clamp(56px,7vw,80px); }
.footer .top { display:flex; flex-wrap:wrap; gap:40px 64px; justify-content:space-between; }
.footer .fb { max-width:340px; }
.footer .fb .brand .name { color:#EFEBE1; }
.footer .fb .blurb { color:#8C8676; font-size:14px; line-height:1.6; margin-top:16px; }
.footer .cols { display:flex; flex-wrap:wrap; gap:40px 64px; }
.fcol h4 { font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:1px; text-transform:uppercase; color:#6A6457; margin-bottom:16px; }
.fcol a { display:block; font-size:14.5px; color:#C6C0B2; padding:6px 0; transition:color .2s ease; }
.fcol a:hover { color:var(--accent); }
.footer .bar { display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; margin-top:48px; padding-top:24px; border-top:1px solid #2C281F; font-family:var(--mono); font-size:12px; color:#6A6457; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width:980px){
  .hero .ct { gap:48px; }
  .phone-col { flex-basis:100%; order:-1; }
}
@media (max-width:780px){
  .nav-links { display:none; }
}
@media (max-width:520px){
  :root { --pad:22px; }
  .phone-wrap { transform:scale(.8); }
  .phone-stage::before,.phone-stage::after { display:none; }
  .btn, .dl-pill { }
  .hero-cta .btn { flex:1 1 auto; }
}

/* ---- Legal pages (privacy / terms) ------------------------------------ */
.legal { padding-top:clamp(48px,6vw,80px); padding-bottom:clamp(48px,6vw,72px); }
.legal-head { max-width:760px; margin-bottom:clamp(32px,5vw,56px); }
.legal-head h1 { font-size:clamp(30px,4.4vw,46px); letter-spacing:-1.4px; margin-top:16px; }
.legal-head .updated { font-family:var(--mono); font-size:13px; color:var(--faint); margin-top:16px; }
.legal-head .intro { margin-top:18px; color:var(--lead); line-height:1.72; }
.legal-toc { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.legal-toc a { font-family:var(--mono); font-size:12px; color:var(--secondary); padding:7px 13px; border:1px solid var(--line); border-radius:999px; background:var(--surface); transition:border-color .2s ease, color .2s ease; }
.legal-toc a:hover { color:var(--ink); border-color:var(--faint); }
.legal-body { max-width:760px; }
.legal-sec { padding-block:clamp(22px,3vw,30px); border-top:1px solid var(--line); }
.legal-sec:first-child { border-top:none; }
.legal-sec h2 { display:flex; gap:14px; align-items:baseline; font-size:20px; font-weight:600; letter-spacing:-.3px; }
.legal-sec h2 .num { font-family:var(--mono); font-size:14px; font-weight:500; color:var(--accent); flex:none; }
.legal-sec p { margin-top:12px; color:var(--card-body); line-height:1.75; }
.legal-sec ul { margin-top:12px; padding-left:0; list-style:none; display:grid; gap:10px; }
.legal-sec li { position:relative; padding-left:22px; color:var(--card-body); line-height:1.7; }
.legal-sec li::before { content:""; position:absolute; left:4px; top:11px; width:5px; height:5px; border-radius:50%; background:var(--accent); }
.legal-sec strong { color:var(--ink); font-weight:600; }
.legal-sec a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after { transition-duration:.001ms !important; animation-duration:.001ms !important; }
}