/* =========================================================
   Yarna · yarna.app landing · shared styles
   Mobile-first. Brand: saffron #E8B339 · charcoal #1C1714 · cream #FAF7F2
   ========================================================= */

:root{
  --saffron:    #E8B339;
  --saffron-2:  #C99224;
  --saffron-3:  #F0CC6F;
  --saffron-9:  #6B4E14;

  --char-1: #1C1714;
  --char-2: #241E19;
  --char-3: #332B23;
  --char-4: #4A3F33;
  --char-9: #0F0B08;

  --cream-1: #FAF7F2;
  --cream-2: #F6F1E8;
  --cream-3: #EDE6D8;
  --sand:    #D9D0BD;
  --stone:   #8A8276;
  --stone-2: #5A5246;
  --ink:     #231D17;

  --ok:   #5C8A66;
  --err:  #C45642;
  --warn: #D89B2C;

  --serif: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --sans:  "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --maxw: 1180px;
  --pad: 20px;
  --radius: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(15,11,8,.06), 0 2px 6px rgba(15,11,8,.05);
  --shadow-md: 0 8px 24px -8px rgba(15,11,8,.14);
  --shadow-lg: 0 30px 70px -28px rgba(15,11,8,.34);
  --shadow-phone: 0 50px 90px -30px rgba(15,11,8,.5), 0 0 0 1.5px rgba(255,255,255,.04) inset;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--cream-1);
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none}
::selection{background:var(--saffron-3); color:var(--ink)}

/* ---------- layout ---------- */
.container{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); width:100%}
.section{padding:72px 0}
.section-sm{padding:48px 0}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--saffron-2);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:22px; height:1.5px; background:var(--saffron); display:inline-block}
.eyebrow.center{justify-content:center}

h1,h2,h3{font-family:var(--serif); font-weight:400; line-height:1.08; letter-spacing:-.02em; color:var(--ink)}
.h-hero{font-size:clamp(34px, 7.5vw, 60px); font-weight:380; line-height:1.04; letter-spacing:-.025em}
.h-hero em{font-style:italic; color:var(--saffron-2)}
.h-sec{font-size:clamp(28px, 5.4vw, 42px); line-height:1.06; letter-spacing:-.02em}
.h-sec em{font-style:italic; color:var(--saffron-2)}
.h-card{font-family:var(--serif); font-size:21px; font-weight:500; letter-spacing:-.01em; line-height:1.2}
.lede{font-size:clamp(17px,2.4vw,20px); line-height:1.5; color:var(--stone-2)}
.muted{color:var(--stone)}
.serif{font-family:var(--serif)}

/* dark section inverts */
.dark{background:var(--char-1); color:var(--cream-2)}
.dark h1,.dark h2,.dark h3{color:var(--cream-1)}
.dark .lede{color:rgba(246,241,232,.7)}
.dark .muted{color:rgba(246,241,232,.5)}
.dark .h-hero em,.dark .h-sec em{color:var(--saffron)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-weight:600; font-size:15px;
  padding:14px 22px; border-radius:999px; transition:transform .14s ease, background .14s ease, box-shadow .14s;
  white-space:nowrap; line-height:1;
}
.btn-primary{background:var(--saffron); color:var(--char-1); box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--saffron-3); transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--sand)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--saffron-2); color:var(--saffron-2)}
.dark .btn-ghost{color:var(--cream-1); box-shadow:inset 0 0 0 1.5px var(--char-4)}
.dark .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--saffron); color:var(--saffron)}
.btn-lg{padding:16px 28px; font-size:16px}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,247,242,.82); backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid transparent; transition:border-color .2s, background .2s;
}
.site-header.scrolled{border-bottom-color:var(--cream-3)}
.header-inner{display:flex; align-items:center; gap:16px; height:64px}
.logo{display:flex; align-items:center; gap:9px; font-family:var(--serif); font-size:23px; font-weight:400; letter-spacing:-.02em; color:var(--ink)}
.logo svg{width:23px; height:23px; color:var(--saffron-2)}
.logo .knot{color:var(--saffron-2)}
.header-spacer{flex:1}
.header-nav{display:none; align-items:center; gap:28px}
.header-nav a{font-size:14.5px; font-weight:500; color:var(--stone-2); transition:color .14s}
.header-nav a:hover{color:var(--ink)}
.header-actions{display:flex; align-items:center; gap:10px}

/* language switcher */
.lang-switch{position:relative}
.lang-btn{
  display:inline-flex; align-items:center; gap:6px; padding:8px 11px;
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  color:var(--stone-2); border-radius:999px; box-shadow:inset 0 0 0 1.5px var(--cream-3);
  transition:box-shadow .14s, color .14s;
}
.lang-btn:hover{color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--sand)}
.lang-btn svg{width:13px; height:13px; opacity:.6}
.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:168px;
  background:var(--cream-1); border:1px solid var(--cream-3); border-radius:12px;
  box-shadow:var(--shadow-md); padding:6px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s, transform .16s, visibility .16s; z-index:120;
}
.lang-switch.open .lang-menu{opacity:1; visibility:visible; transform:translateY(0)}
.lang-menu button{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  padding:9px 12px; border-radius:8px; font-size:14px; font-weight:500; color:var(--ink); text-align:left;
  transition:background .12s;
}
.lang-menu button:hover{background:var(--cream-2)}
.lang-menu button .code{font-family:var(--mono); font-size:11px; color:var(--stone); text-transform:uppercase}
.lang-menu button.active{color:var(--saffron-2)}
.lang-menu button.active .code{color:var(--saffron-2)}

/* mobile menu toggle */
.menu-toggle{display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:10px; color:var(--ink)}
.menu-toggle:hover{background:var(--cream-2)}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding-top:36px; padding-bottom:56px}
.hero-thread{position:absolute; inset:0; pointer-events:none; opacity:.5; z-index:0}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:44px; align-items:center}
.hero-copy{max-width:560px}
.hero h1{margin-top:20px}
.hero .lede{margin-top:20px; max-width:480px}
.hero-cta{margin-top:30px}
.hero-trust{margin-top:18px; display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13.5px; color:var(--stone)}
.hero-trust span{display:inline-flex; align-items:center; gap:7px}
.hero-trust svg{width:15px; height:15px; color:var(--ok); flex-shrink:0}

/* store badges — always shown. Muted "soon" state by default,
   live links once <body class="launched"> (one flag in app.js). */
.store-badges{display:flex; gap:12px; flex-wrap:wrap}
.store-badge{
  position:relative;
  display:inline-flex; align-items:center; gap:11px; padding:11px 18px 11px 16px;
  background:var(--char-1); color:var(--cream-1); border-radius:13px;
  transition:transform .14s, box-shadow .14s;
}
.store-badge svg{width:26px; height:26px}
.store-badge .sb-small{font-size:10px; letter-spacing:.04em; opacity:.7; line-height:1.1}
.store-badge .sb-big{font-family:var(--serif); font-size:18px; line-height:1.1; letter-spacing:-.01em}
.store-badge .sb-small,.store-badge .sb-big{display:block}
.store-badge .sb-soon{display:none}

/* on dark sections the badge needs a hairline to read against charcoal */
.dark .store-badge{box-shadow:inset 0 0 0 1px var(--char-4)}

/* launched: live links, interactive */
body.launched .store-badge:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
body.launched .stores-note{display:none}

/* pre-launch ("soon"): muted, non-clickable, "Em breve" pill */
body:not(.launched) .store-badge{
  opacity:.5; filter:saturate(.7); pointer-events:none; cursor:default;
}
body:not(.launched) .store-badge .sb-soon{
  position:absolute; top:-9px; right:10px;
  display:inline-block; padding:2px 9px;
  font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--char-1); background:var(--saffron); border-radius:999px; opacity:1;
}
.stores-note{font-size:13px; color:var(--stone); margin-top:14px}

/* ---------- phone mockup ---------- */
.phone-stage{display:flex; justify-content:center; position:relative}
.phone-glow{position:absolute; width:78%; height:70%; top:14%; left:11%;
  background:radial-gradient(ellipse at center, rgba(232,179,57,.22), transparent 68%); filter:blur(34px); z-index:0}
.phone{
  position:relative; z-index:1;
  width:288px; height:592px; border-radius:46px; padding:13px;
  background:linear-gradient(165deg,#2c2419,#171210); box-shadow:var(--shadow-phone);
}
.phone-screen{
  position:relative; width:100%; height:100%; border-radius:34px; overflow:hidden;
  background:var(--char-1);
}
.phone-notch{position:absolute; top:12px; left:50%; transform:translateX(-50%); width:104px; height:28px; background:#0a0807; border-radius:16px; z-index:30}
.phone-status{position:absolute; top:16px; left:0; right:0; display:flex; justify-content:space-between; padding:0 26px; z-index:25; color:#fff; font-size:12px; font-weight:600; font-family:var(--sans)}
.phone-status .s-r{display:flex; gap:5px; align-items:center; font-size:10px; letter-spacing:.02em}

/* app screen */
.app{position:absolute; inset:0; padding:54px 18px 18px; display:flex; flex-direction:column; color:var(--cream-1)}
.app-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.app-top .a-title{font-family:var(--serif); font-size:19px; color:var(--cream-1)}
.app-top .a-av{width:30px; height:30px; border-radius:50%; background:var(--char-3); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:var(--saffron-3); font-family:var(--mono)}

/* animation scenes share this container */
.scene{position:absolute; left:18px; right:18px; top:84px; bottom:18px; opacity:0; transition:opacity .5s ease; pointer-events:none}
.scene.active{opacity:1}

/* scene 1: record */
.rec-wrap{height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px}
.rec-hint{font-size:12.5px; color:rgba(246,241,232,.55); text-align:center; max-width:180px; line-height:1.45}
.rec-btn{width:96px; height:96px; border-radius:50%; background:var(--saffron); display:flex; align-items:center; justify-content:center; position:relative; box-shadow:0 0 0 0 rgba(232,179,57,.45)}
.rec-btn svg{width:38px; height:38px; color:var(--char-1)}
.scene.active .rec-btn{animation:recpulse 2s ease-out infinite}
@keyframes recpulse{0%{box-shadow:0 0 0 0 rgba(232,179,57,.4)}70%{box-shadow:0 0 0 22px rgba(232,179,57,0)}100%{box-shadow:0 0 0 0 rgba(232,179,57,0)}}

/* scene 2: waveform + transcribing */
.wave-wrap{height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px}
.wave{display:flex; align-items:center; gap:4px; height:64px}
.wave span{width:4px; border-radius:3px; background:var(--saffron); height:18px}
.scene.active .wave span{animation:wavebar 1s ease-in-out infinite}
@keyframes wavebar{0%,100%{height:12px; opacity:.5}50%{height:52px; opacity:1}}
.transcribe{display:flex; align-items:center; gap:9px; font-size:13px; color:rgba(246,241,232,.7)}
.transcribe .dots{display:inline-flex; gap:3px}
.transcribe .dots i{width:5px; height:5px; border-radius:50%; background:var(--saffron); display:inline-block}
.scene.active .transcribe .dots i{animation:tdot 1.2s ease-in-out infinite}
@keyframes tdot{0%,100%{opacity:.25}50%{opacity:1}}
.quote-snip{font-family:var(--serif); font-style:italic; font-size:14.5px; line-height:1.4; color:rgba(246,241,232,.82); text-align:center; max-width:210px}

/* scene 3: client card assembling */
.cardview{height:100%; display:flex; flex-direction:column; gap:11px; overflow:hidden}
.cv-head{display:flex; align-items:center; gap:11px; padding-bottom:4px}
.cv-av{width:42px; height:42px; border-radius:50%; background:linear-gradient(150deg,var(--saffron),var(--saffron-2)); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:18px; color:var(--char-1); flex-shrink:0}
.cv-name{font-family:var(--serif); font-size:17px; color:var(--cream-1); line-height:1.1}
.cv-sub{font-size:11px; color:rgba(246,241,232,.5); font-family:var(--mono); letter-spacing:.02em; margin-top:2px}
.cv-row{background:var(--char-2); border:1px solid var(--char-3); border-radius:12px; padding:11px 13px; opacity:0; transform:translateY(8px)}
.scene.active .cv-row{animation:cvin .5s ease forwards}
.scene.active .cv-row:nth-child(2){animation-delay:.15s}
.scene.active .cv-row:nth-child(3){animation-delay:.4s}
.scene.active .cv-row:nth-child(4){animation-delay:.65s}
.scene.active .cv-row:nth-child(5){animation-delay:.9s}
@keyframes cvin{to{opacity:1; transform:translateY(0)}}
.cv-row .cv-label{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--saffron-3); display:block; margin-bottom:3px}
.cv-row .cv-val{font-size:13px; color:var(--cream-2); line-height:1.35}
.cv-row.promise{border-color:rgba(232,179,57,.32); background:rgba(232,179,57,.08)}
.cv-row.promise .cv-val{display:flex; align-items:flex-start; gap:7px}
.cv-row.promise svg{width:14px; height:14px; color:var(--saffron); flex-shrink:0; margin-top:1px}

/* scene 4: push brief */
.pushview{height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:0 4px}
.push-card{width:100%; background:rgba(246,241,232,.97); border-radius:18px; padding:14px 15px; box-shadow:0 18px 40px -16px rgba(0,0,0,.5); transform:translateY(-12px) scale(.96); opacity:0}
.scene.active .push-card{animation:pushin .6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes pushin{to{transform:translateY(0) scale(1); opacity:1}}
.push-head{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.push-ic{width:22px; height:22px; border-radius:6px; background:var(--char-1); display:flex; align-items:center; justify-content:center}
.push-ic svg{width:14px; height:14px; color:var(--saffron)}
.push-app{font-size:11px; font-weight:600; color:var(--char-3); flex:1}
.push-time{font-size:10px; color:var(--stone)}
.push-title{font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:3px}
.push-body{font-size:12.5px; color:var(--stone-2); line-height:1.4}
.push-foot{font-family:var(--serif); font-style:italic; font-size:13px; color:rgba(246,241,232,.6); text-align:center}

/* scene progress dots */
.scene-dots{position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:20}
.scene-dots i{width:6px; height:6px; border-radius:50%; background:rgba(246,241,232,.25); transition:background .3s, width .3s}
.scene-dots i.on{background:var(--saffron); width:18px; border-radius:3px}

/* ---------- logos / social proof strip (NO fake numbers) ---------- */
.context-strip{padding:26px 0; border-top:1px solid var(--cream-3); border-bottom:1px solid var(--cream-3)}
.context-strip .ctx{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 28px; text-align:center}
.context-strip .ctx span{font-size:13.5px; color:var(--stone); display:inline-flex; align-items:center; gap:9px}
.context-strip .ctx svg{width:17px; height:17px; color:var(--saffron-2)}

/* ---------- how it works ---------- */
.steps{display:grid; grid-template-columns:1fr; gap:18px; margin-top:44px; counter-reset:step}
.step{position:relative; background:#fff; border:1px solid var(--cream-3); border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--shadow-sm)}
.step-num{font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.1em; color:var(--saffron-2); margin-bottom:16px; display:flex; align-items:center; gap:10px}
.step-num::before{counter-increment:step; content:"0" counter(step); font-family:var(--serif); font-size:30px; font-weight:400; color:var(--saffron); letter-spacing:0}
.step-ic{width:46px; height:46px; border-radius:13px; background:var(--cream-2); display:flex; align-items:center; justify-content:center; margin-bottom:16px}
.step-ic svg{width:24px; height:24px; color:var(--saffron-2)}
.step h3{margin-bottom:9px}
.step p{font-size:15px; color:var(--stone-2); line-height:1.55}

/* ---------- features ---------- */
.features{display:grid; grid-template-columns:1fr; gap:16px; margin-top:44px}
.feature{background:#fff; border:1px solid var(--cream-3); border-radius:var(--radius-lg); padding:26px 24px; transition:border-color .16s, transform .16s; box-shadow:var(--shadow-sm)}
.feature:hover{border-color:var(--saffron-2); transform:translateY(-3px)}
.feature-ic{width:48px; height:48px; border-radius:13px; background:var(--cream-2); display:flex; align-items:center; justify-content:center; margin-bottom:18px}
.feature-ic svg{width:25px; height:25px; color:var(--saffron-2)}
.feature h3{margin-bottom:9px}
.feature p{font-size:14.5px; color:var(--stone-2); line-height:1.55}

/* ---------- trust ---------- */
.trust-inner{display:grid; grid-template-columns:1fr; gap:36px; align-items:center}
.trust-points{display:grid; grid-template-columns:1fr; gap:16px; margin-top:30px}
.trust-point{display:flex; gap:14px; align-items:flex-start}
.trust-point .tp-ic{width:42px; height:42px; border-radius:11px; background:rgba(232,179,57,.12); display:flex; align-items:center; justify-content:center; flex-shrink:0}
.trust-point .tp-ic svg{width:21px; height:21px; color:var(--saffron)}
.trust-point h3{font-family:var(--serif); font-size:17px; font-weight:500; color:var(--cream-1); margin-bottom:4px; letter-spacing:-.01em}
.trust-point p{font-size:14px; color:rgba(246,241,232,.62); line-height:1.5}

/* ---------- pricing ---------- */
.pricing-card{
  max-width:440px; margin:44px auto 0; background:#fff; border:1px solid var(--cream-3);
  border-radius:26px; padding:38px 32px; box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.pricing-card::before{content:""; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg,var(--saffron),var(--saffron-2))}
.price-badge{display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--saffron-2); background:rgba(232,179,57,.12); padding:6px 12px; border-radius:999px; margin-bottom:20px}
.price-name{font-family:var(--serif); font-size:26px; font-weight:500; letter-spacing:-.01em}
.price-amount{display:flex; align-items:baseline; gap:6px; margin:14px 0 6px}
.price-amount .amt{font-family:var(--serif); font-size:56px; font-weight:400; letter-spacing:-.03em; line-height:1}
.price-amount .per{font-size:16px; color:var(--stone)}
.price-trial{font-size:15px; color:var(--stone-2); margin-bottom:24px}
.price-trial strong{color:var(--ink)}
.price-list{list-style:none; display:flex; flex-direction:column; gap:13px; margin-bottom:28px}
.price-list li{display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--stone-2)}
.price-list svg{width:19px; height:19px; color:var(--ok); flex-shrink:0; margin-top:1px}
.price-card .btn{width:100%}
.price-promo{margin-top:14px; font-size:12.5px; color:var(--stone); text-align:center}

/* ---------- FAQ ---------- */
.faq{max-width:760px; margin:40px auto 0}
.faq-item{border-bottom:1px solid var(--cream-3)}
.faq-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 4px; text-align:left; font-family:var(--serif); font-size:18px; font-weight:500; color:var(--ink); letter-spacing:-.01em}
.faq-q .faq-icon{flex-shrink:0; width:22px; height:22px; position:relative; transition:transform .25s}
.faq-q .faq-icon::before,.faq-q .faq-icon::after{content:""; position:absolute; background:var(--saffron-2); border-radius:2px; top:50%; left:50%; transform:translate(-50%,-50%)}
.faq-q .faq-icon::before{width:14px; height:2px}
.faq-q .faq-icon::after{width:2px; height:14px; transition:transform .25s}
.faq-item.open .faq-icon::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease}
.faq-a-inner{padding:0 4px 22px; font-size:15px; color:var(--stone-2); line-height:1.6; max-width:660px}

/* ---------- final CTA ---------- */
.final-cta{text-align:center; position:relative; overflow:hidden}
.final-cta .container{position:relative; z-index:1}
.final-cta .h-sec{max-width:680px; margin:18px auto 0}
.final-cta .lede{max-width:520px; margin:18px auto 0}
.final-cta .waitlist,.final-cta .store-badges{margin:30px auto 0; justify-content:center}
.final-cta-thread{position:absolute; inset:0; opacity:.4; pointer-events:none}

/* ---------- footer ---------- */
.site-footer{background:var(--char-9); color:rgba(246,241,232,.6); padding:56px 0 32px}
.footer-top{display:grid; grid-template-columns:1fr; gap:34px; padding-bottom:34px; border-bottom:1px solid var(--char-3)}
.footer-brand .logo{color:var(--cream-1)}
.footer-brand p{font-size:14px; margin-top:14px; max-width:300px; line-height:1.55; color:rgba(246,241,232,.5)}
.footer-cols{display:grid; grid-template-columns:1fr 1fr; gap:28px}
.footer-col h4{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(246,241,232,.4); margin-bottom:14px; font-weight:500}
.footer-col ul{list-style:none; display:flex; flex-direction:column; gap:11px}
.footer-col a{font-size:14px; color:rgba(246,241,232,.68); transition:color .14s}
.footer-col a:hover{color:var(--saffron)}
.footer-bottom{display:flex; flex-direction:column; gap:14px; padding-top:28px; font-size:13px; color:rgba(246,241,232,.4)}
.footer-langs{display:flex; gap:8px; flex-wrap:wrap}
.footer-langs button{font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:rgba(246,241,232,.55); padding:6px 11px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--char-3); transition:color .14s, box-shadow .14s}
.footer-langs button:hover,.footer-langs button.active{color:var(--saffron); box-shadow:inset 0 0 0 1px var(--saffron-9)}

/* ---------- legal pages ---------- */
.legal-hero{padding:48px 0 28px; border-bottom:1px solid var(--cream-3)}
.legal-hero .eyebrow{margin-bottom:14px}
.legal-hero h1{font-size:clamp(30px,6vw,46px)}
.legal-hero .legal-meta{margin-top:14px; font-family:var(--mono); font-size:12px; color:var(--stone); letter-spacing:.03em}
.legal-body{max-width:760px; margin:0 auto; padding:44px var(--pad) 80px}
.legal-body h2{font-family:var(--serif); font-size:24px; font-weight:500; margin:38px 0 14px; letter-spacing:-.01em}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{font-family:var(--serif); font-size:18px; font-weight:500; margin:24px 0 10px}
.legal-body p{font-size:15px; color:var(--stone-2); line-height:1.7; margin-bottom:14px}
.legal-body ul{margin:0 0 16px 0; padding-left:22px}
.legal-body li{font-size:15px; color:var(--stone-2); line-height:1.7; margin-bottom:8px}
.legal-body a{color:var(--saffron-2); text-decoration:underline; text-underline-offset:2px}
.legal-body strong{color:var(--ink)}
.legal-toc{background:var(--cream-2); border:1px solid var(--cream-3); border-radius:16px; padding:22px 24px; margin-bottom:34px}
.legal-toc h4{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); margin-bottom:12px; font-weight:500}
.legal-toc ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.legal-toc a{font-size:14px; color:var(--stone-2); text-decoration:none}
.legal-toc a:hover{color:var(--saffron-2)}
.legal-table{width:100%; border-collapse:collapse; margin:8px 0 20px; font-size:14px}
.legal-table th,.legal-table td{text-align:left; padding:11px 14px; border:1px solid var(--cream-3); vertical-align:top; line-height:1.55}
.legal-table th{background:var(--cream-2); font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--stone-2); font-weight:500}
.legal-table td{color:var(--stone-2)}
.legal-note{background:rgba(232,179,57,.08); border:1px solid rgba(232,179,57,.28); border-radius:14px; padding:16px 18px; margin:20px 0; font-size:13.5px; color:var(--stone-2); line-height:1.6}
.back-home{display:flex; width:fit-content; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--saffron-2); margin-bottom:20px}
.back-home:hover{gap:11px}
.back-home svg{width:16px; height:16px}

/* ---------- helpers ---------- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  .reveal{opacity:1; transform:none}
}

/* mobile menu drawer */
.mobile-drawer{
  position:fixed; inset:0 0 0 auto; width:min(82%,320px); background:var(--cream-1);
  z-index:200; transform:translateX(100%); transition:transform .28s cubic-bezier(.3,.7,.3,1);
  box-shadow:var(--shadow-lg); padding:24px 22px; display:flex; flex-direction:column; gap:6px;
}
.mobile-drawer.open{transform:translateX(0)}
.mobile-backdrop{position:fixed; inset:0; background:rgba(15,11,8,.4); opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s; z-index:150}
.mobile-backdrop.open{opacity:1; visibility:visible}
.mobile-drawer .md-close{align-self:flex-end; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:10px; color:var(--ink)}
.mobile-drawer a{padding:14px 8px; font-size:17px; font-weight:500; color:var(--ink); border-bottom:1px solid var(--cream-3); font-family:var(--serif)}
.mobile-drawer .md-cta{margin-top:18px}
.mobile-drawer .md-cta .btn{width:100%}

/* ============ breakpoints ============ */
@media (min-width:680px){
  .steps{grid-template-columns:repeat(3,1fr)}
  .features{grid-template-columns:repeat(2,1fr)}
  .footer-cols{grid-template-columns:repeat(3,1fr)}
  .waitlist-note{padding-left:18px}
}
@media (min-width:900px){
  :root{--pad:32px}
  .section{padding:96px 0}
  .header-nav{display:flex}
  .menu-toggle{display:none}
  .hero{padding-top:56px; padding-bottom:80px}
  .hero-grid{grid-template-columns:1.05fr .95fr; gap:50px}
  .features{grid-template-columns:repeat(3,1fr)}
  .trust-inner{grid-template-columns:.9fr 1.1fr; gap:60px}
  .trust-points{grid-template-columns:1fr 1fr}
  .footer-top{grid-template-columns:1.3fr 2fr; gap:60px}
  .phone{width:300px; height:616px}
}
@media (min-width:1100px){
  .hero h1{font-size:60px}
}