/* ==========================================================================
   Marlo — joinmarlo.com  ·  shared stylesheet
   Ported from the Marlo.dc.html Claude Design export. Monochrome silver-on-dark, Switzer.
   Motion is opacity + transform only; reduced-motion + Save-Data honored in app.js.
   ========================================================================== */

:root{
  --bg:#0C0B0A; --text:#F4F2ED;
  --muted:#A8A49B; --muted2:#B7B3AA; --soft:#C9C5BC; --dim:#8A867F;
  --faint:#7E7A73; --faint2:#6E6A63;
  --gold:#E6E8EC; --gold-bright:#FFFFFF; --err:#E0926F;  /* monochrome: cool off-white + silver (was gold) */
  --card:#141312; --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.14);
  --sans:'Switzer',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --shell:1180px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-mask:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  position:relative;                 /* containing block for the document-height .bg-layers */
  background:var(--bg); color:var(--text);
  font-family:var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; line-height:1.5;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
input,button,textarea{font-family:inherit;}
input::placeholder,textarea::placeholder{color:#736F68;}
::selection{background:var(--gold); color:var(--bg);}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:6px;}

/* ---- background depth ---------------------------------------------------
   Absolute (not fixed) so the cool-white bloom SCROLLS WITH the document instead
   of pinning to the screen. An AtomAI-style hero light-wave + two whisper section
   glows down the page. Static (no drift), monochrome, contained = clean. */
.bg-layers{position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden;}
.blob{position:absolute; transform:translateX(-50%);}
/* AtomAI hero light-wave: a soft, cool-white horizontal streak CONTAINED inside
   the hero — sits below the nav, never spills above the fold or past the side
   edges (overflow:hidden on .bg-layers clips the falloff). */
.blob.b1{top:44px; left:50%; width:min(1060px,106%); height:520px;
  background:radial-gradient(62% 34% at 50% 30%, rgba(236,239,245,.09), rgba(12,11,10,0) 70%);}
/* two whisper-soft cool-white section glows for depth (mid + lower page);
   per-phone blooms (.feat-phone::before) carry the rest. No gold, no stray washes. */
.blob.b2{top:40%; left:50%; width:min(900px,94%); height:520px;
  background:radial-gradient(54% 38% at 50% 50%, rgba(236,239,245,.04), rgba(12,11,10,0) 72%);}
.blob.b3{top:76%; left:50%; width:min(900px,94%); height:520px;
  background:radial-gradient(54% 38% at 50% 50%, rgba(236,239,245,.034), rgba(12,11,10,0) 72%);}
.vignette{position:fixed; inset:0; pointer-events:none; z-index:59;
  background:radial-gradient(125% 85% at 50% 28%, rgba(0,0,0,0) 56%, rgba(0,0,0,.42) 100%);}
.noise{position:fixed; inset:0; pointer-events:none; z-index:60; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;}

/* ---- shell -------------------------------------------------------------- */
.shell{position:relative; z-index:1; width:100%; max-width:var(--shell); margin:0 auto;
  padding:0 clamp(20px,4vw,32px);}
/* contain decorative bleed (hero fan + tilted/paired phones + per-phone blooms) at any
   width — overflow:clip is sticky-safe (no scroll container), unlike overflow:hidden.
   The sticky nav lives outside <main>, so it's unaffected. */
main{overflow-x:clip;}

/* ---- type --------------------------------------------------------------- */
.eyebrow{text-transform:uppercase; letter-spacing:.2em; font-size:12px; font-weight:600; color:var(--gold);}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.03em; line-height:1.06;}
.lede{color:var(--muted); line-height:1.5; text-wrap:pretty;}

/* ---- buttons ------------------------------------------------------------ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
  font-weight:600; border-radius:100px; border:1px solid transparent;
  transition:transform .18s var(--ease), background .2s ease, box-shadow .2s ease, color .15s ease, opacity .15s ease;}
.btn-primary{background:var(--text); color:var(--bg);}
.btn-primary:hover{background:#fff; transform:translateY(-1px);}
.btn-primary:active{transform:scale(.97);}
.btn-lg{font-size:16px; padding:15px 28px;}
.btn-md{font-size:14px; padding:11px 20px;}

/* ---- nav ---------------------------------------------------------------- */
.nav{position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:clamp(14px,2vw,18px) 0;
  background:rgba(12,11,10,0); border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;}
.nav.solid{background:rgba(12,11,10,.82); border-bottom-color:rgba(255,255,255,.07);
  backdrop-filter:saturate(150%) blur(16px); -webkit-backdrop-filter:saturate(150%) blur(16px);}
.brand{display:inline-flex; align-items:center; gap:6px; color:var(--text); font-weight:600;
  font-size:22px; letter-spacing:-.02em;}
.spark{color:var(--gold); font-size:15px; margin-left:1px;}
.nav-links{display:flex; align-items:center; gap:30px;}
.nav-links a:not(.btn){color:var(--muted2); font-size:15px; font-weight:500; transition:color .15s ease;}
.nav-links a:not(.btn):hover{color:var(--text);}
/* the nav CTA is a solid, fully-opaque white pill with dark text in BOTH nav states */
.nav-links a.btn-primary{background:#F4F2ED; color:var(--bg);}
.nav-links a.btn-primary:hover{background:#fff; color:var(--bg);}
.menu-btn{display:none; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:12px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05);
  color:var(--text); cursor:pointer;}
.nav-cta-mobile{display:none;}   /* compact header CTA — mobile only, beside the hamburger */
/* mobile menu is an absolute dropdown anchored to the sticky nav (top:100%), so it
   stays under the header at ANY scroll position instead of detaching to the page top. */
.nav-mobile{display:none; position:absolute; top:100%; left:0; right:0; z-index:55;
  flex-direction:column; gap:4px; padding:10px clamp(16px,4vw,28px) 18px;
  background:rgba(12,11,10,.97); backdrop-filter:saturate(150%) blur(16px); -webkit-backdrop-filter:saturate(150%) blur(16px);
  border-bottom:1px solid rgba(255,255,255,.1); box-shadow:0 24px 50px -22px rgba(0,0,0,.75);}
.nav-mobile.open{display:flex;}
.nav-mobile a{color:#E4E0D8; font-size:18px; font-weight:500; padding:11px 8px;}
.nav-mobile .btn{margin-top:8px; font-size:16px; padding:14px;}

/* ---- hero --------------------------------------------------------------- */
.hero{position:relative; text-align:center; padding:clamp(30px,5vw,54px) 0 0;}
.hero-scaler{position:relative; transform-origin:50% 30%; will-change:transform, opacity;}
.hero-copy{position:relative; max-width:780px; margin:0 auto;}
.hero h1{font-size:clamp(40px,8vw,76px); line-height:1.02; letter-spacing:-.035em; margin:18px 0 0; text-wrap:balance;}
.hero .lede{max-width:540px; margin:20px auto 0; font-size:clamp(17px,2vw,20px);}
.hero-actions{display:flex; gap:14px; justify-content:center; align-items:center; margin-top:30px; flex-wrap:wrap;}
.hero-actions .ghost-link{color:var(--soft); font-weight:500; font-size:16px; padding:14px 8px;}
.hero-actions .ghost-link:hover{color:#fff;}
.hero-primary:hover{box-shadow:0 10px 34px -8px rgba(255,255,255,.45); transform:translateY(-2px);}

/* desktop phone fan — an Apple-style straight-on lineup. Every device is a clean
   DEAD-FORWARD render (no CSS rotation), so we only place + size. Bigger + wider-spread
   than a tilted fan so each screen's UI stays legible. Sized by HEIGHT: center reads
   largest, flanks step down + rise symmetrically outward. ~25-30% overlap, no overflow
   at the 1180 shell. */
.hero-stage{position:relative; height:590px; margin-top:64px;}
.hero-fan{position:absolute; inset:0;}
.fan-pos{position:absolute; left:50%; bottom:30px;}
.fan-float{will-change:transform;}
.hero-fan .shot{width:auto; height:var(--h);}
/* tight, symmetric Apple-style arc: --h decreases + phones rise outward. --from-x
   is the opening-animation start offset (phones fan OUT from near-center). */
.fan-pos.p-reports {--h:365px; --from-x:160px;  transform:translateX(-50%) translate(-320px,-72px); z-index:2;}
.fan-pos.p-calendar{--h:430px; --from-x:82px;   transform:translateX(-50%) translate(-165px,-36px); z-index:3;}
.fan-pos.p-dash    {--h:500px; --from-x:0px;     transform:translateX(-50%) translate(0,0);          z-index:5;}
.fan-pos.p-inbox   {--h:430px; --from-x:-82px;   transform:translateX(-50%) translate(165px,-36px);  z-index:3;}
.fan-pos.p-clients {--h:365px; --from-x:-160px;  transform:translateX(-50%) translate(320px,-72px);  z-index:2;}
/* per-phone ground/contact shadow — soft blurred ellipse, sized to the phone and
   nudged to the lower-RIGHT (one consistent key light from the upper-left). It
   stays grounded while the device floats above it. Static only. */
.fan-pos::after{content:""; position:absolute; left:50%; bottom:-14px; z-index:-1;
  width:86%; height:30px; transform:translateX(-44%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.5), rgba(0,0,0,0) 72%);
  filter:blur(7px); pointer-events:none;}

/* mobile carousel */
.hero-carousel{display:none; margin-top:34px; flex-direction:column; align-items:center; gap:20px; max-width:100%;}
/* track stays exactly viewport-wide; cells overflow INTERNALLY (overflow-x:auto), never the page.
   min-width:0 defuses the flex min-content footgun so it can't push the hero wider on any device. */
.carousel-track{display:flex; gap:16px; width:100%; max-width:100%; min-width:0; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; padding:6px 0; scrollbar-width:none; overscroll-behavior-x:contain;}
.carousel-track::-webkit-scrollbar{display:none;}
.carousel-cell{flex:0 0 var(--cw,72%); max-width:300px; margin:0 auto; scroll-snap-align:center; scroll-snap-stop:always;
  transition:transform .4s var(--ease), opacity .4s ease; transform:scale(.88); opacity:.5;}
.carousel-cell.active{transform:scale(1); opacity:1;}
.dots{display:flex; gap:9px;}
.dot{position:relative; width:8px; height:8px; padding:0; border-radius:100px; border:none; cursor:pointer;
  background:rgba(255,255,255,.22); transition:background .25s ease, transform .25s var(--ease);}
.dot::before{content:""; position:absolute; inset:-13px;}   /* ~34px invisible tap target */
.dot.active{background:var(--gold); transform:scale(1.25);}

/* ---- 3D device renders — pre-angled photoreal iPhone shots (transparent .webp) ----
   The device body, screen, bezel, metal rails AND the camera angle are all baked
   into each image. So there's no CSS frame and no CSS tilt — we only float, glow,
   shadow, and gently parallax them. A static drop-shadow (it follows the alpha
   silhouette, unlike box-shadow) grounds the floating device; background removal
   stripped the studio shadow. Static filter only — all MOTION stays
   transform/opacity, per the locked motion rule (no animated blur/filter/shadow). */
/* subtle form shadow hugging the device silhouette; the GROUND contact shadow is a
   separate CSS ellipse per phone (.fan-pos::after / .feat-phone::after). */
.shot{display:block; width:100%; height:auto; pointer-events:none;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.4));}
.fan-float .shot,.carousel-cell .shot{will-change:transform;}

/* ---- showcase phones — premium floating product shot --------------------
   Each phone gets a dynamic RESTING pose (perspective + rotateY/rotateZ),
   alternating with the left/right section layout, a soft STATIC drop shadow,
   and one consistent subtle gold bloom behind it. The cursor/scroll 3D tilt
   (app.js) composes ON TOP of these resting angles; --ry/--rz are the baseline. */
/* isolation:isolate gives each composition its own stacking context, so the gold
   glow renders BEHIND the phones but ABOVE the page background — deterministically
   visible, no z-index escape. Layers: glow z0 < contact shadow z1 < phones z2/z3. */
.feat-phone{position:relative; isolation:isolate;}
/* a soft cool-white spotlight centered on the composition (~0.12 core → transparent),
   large enough to read as a gentle halo. Contained, not a stray margin orb
   (main{overflow-x:clip} holds the far edge). */
.feat-phone::before{content:""; position:absolute; z-index:0; left:50%; top:48%;
  width:460px; height:460px; transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(236,239,245,.12), rgba(12,11,10,0) 70%);}
/* soft STATIC ground/contact shadow — blurred ellipse nudged lower-RIGHT to match
   the consistent upper-left key light (no animated shadow) */
.feat-phone::after{content:""; position:absolute; z-index:1; left:50%; bottom:1%;
  width:62%; height:32px; transform:translateX(-44%); pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.5), rgba(0,0,0,0) 72%);
  filter:blur(7px);}
/* single feature device sits above the glow (z0) + contact shadow (z1) */
.feat-phone .shot{position:relative; z-index:2;}

/* overlapping pair — larger device in front (lower-right), related one behind
   (upper-left), diagonal so ~85-90% of both screens read. Pre-angled renders:
   no CSS tilt, just placement. */
.feat-phone.pair{display:block; width:clamp(300px,38vw,400px); max-width:94%; aspect-ratio:1 / 1.9;}
.feat-phone.pair::before{width:680px; height:600px;}   /* bigger spotlight behind the pair */
.feat-phone.pair .shot{position:absolute;}
.feat-phone.pair .pair-back{top:0; left:0; width:50%; z-index:2;}
.feat-phone.pair .pair-front{bottom:0; right:0; width:56%; z-index:3;}
.feat.rev .feat-phone.pair .pair-back{left:auto; right:0;}
.feat.rev .feat-phone.pair .pair-front{right:auto; left:0;}
/* floor shadow under the FRONT (lower) phone; the back floats higher, ungrounded */
.feat-phone.pair::after{width:50%; left:auto; right:4%; transform:none; bottom:0;}
.feat.rev .feat-phone.pair::after{left:4%; right:auto;}

/* ---- generic section ---------------------------------------------------- */
.section{padding:clamp(64px,10vw,116px) 0;}
.section.sm{padding:clamp(44px,7vw,72px) 0;}
.sec-head{text-align:center; max-width:680px; margin:0 auto clamp(40px,6vw,64px);}
.sec-head h2{margin-top:14px;}
.sec-head .lede{margin:16px auto 0; max-width:480px; font-size:17px;}
.h-inside{font-size:clamp(31px,5.5vw,52px);}

/* ---- pillars ------------------------------------------------------------ */
.pillars-line{font-size:clamp(29px,5vw,46px); line-height:1.22; letter-spacing:-.02em; font-weight:500;
  max-width:780px; margin:0 auto; color:#D7D3CB; text-wrap:balance; text-align:center;}
.pillars-line .on{color:#fff;}
.pillars{display:flex; gap:14px 40px; justify-content:center; flex-wrap:wrap; margin-top:30px;}
.pillar{display:inline-flex; align-items:center; gap:9px; text-transform:uppercase; letter-spacing:.16em;
  font-size:13px; font-weight:600; color:var(--muted2);}
.pillar .d{width:6px; height:6px; border-radius:100px; background:var(--gold);}

/* ---- features ----------------------------------------------------------- */
.feats{display:flex; flex-direction:column; gap:clamp(64px,9vw,112px);}
.feat{display:flex; flex-direction:row; gap:clamp(28px,6vw,72px); align-items:center;}
.feat.rev{flex-direction:row-reverse;}
.feat-phone{flex:0 0 auto; width:clamp(230px,30vw,300px); max-width:82%; margin:0 auto;
  display:flex; justify-content:center; will-change:transform;}
.feat-copy{flex:1; min-width:0; max-width:520px;}
.feat-copy h3{font-size:clamp(29px,5vw,46px); line-height:1.1; letter-spacing:-.025em; margin:14px 0 0; text-wrap:balance;}
.benefits{display:flex; flex-direction:column; gap:15px; margin-top:24px;}
.benefit{display:flex; gap:12px; align-items:flex-start;}
.benefit svg{flex:none; margin-top:2px;}
.benefit span{color:#BFBBB2; font-size:17px; line-height:1.45;}

/* ---- pills (accordion) -------------------------------------------------- */
.pills{max-width:680px; margin:38px auto 0; display:flex; flex-direction:column; gap:12px;}
.pill{border:1px solid var(--line); background:var(--card); border-radius:18px; overflow:hidden;}
.pill-btn{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 22px; background:transparent; border:none; cursor:pointer; color:var(--text);
  font-size:18px; font-weight:500; text-align:left;}
.pill-btn .lbl{display:inline-flex; align-items:center; gap:12px;}
.pill-btn .lbl .s{color:var(--gold); font-size:14px;}
.marker{color:var(--gold); font-size:26px; font-weight:300; width:18px; text-align:center; line-height:1;
  display:inline-block; transform:rotate(0deg); transition:transform .42s var(--ease);}
/* collapse only when JS runs — without JS the panels stay open + readable */
.js .pill-panel,.js .faq-panel{max-height:0; overflow:hidden; transition:max-height .42s var(--ease);}
.pill.open .marker,.faq-item.open .marker{transform:rotate(45deg);}
.pill-panel p{margin:0; padding:0 22px 20px; color:#9A968E; font-size:16px; line-height:1.55;}

/* ---- stats -------------------------------------------------------------- */
.stats{display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(38px,5vw,60px); text-align:center;}
.stat{min-width:200px;}
.stat-num{font-size:clamp(66px,11vw,104px); font-weight:600; letter-spacing:-.03em; color:var(--gold-bright); line-height:1;}
.stat-cap{color:var(--muted); font-size:16px; margin-top:12px;}

/* ---- pricing ------------------------------------------------------------ */
.price-card{max-width:480px; margin:0 auto; background:linear-gradient(180deg,#161512,#121110);
  border:1px solid var(--line2); border-radius:28px; padding:40px 34px; text-align:center;}
.price-card .brand{justify-content:center; font-size:20px;}
.price-head{font-size:46px; font-weight:600; letter-spacing:-.03em; margin:18px 0 4px;}
.price-sub{color:#9A968E; font-size:15px;}
.price-rule{height:1px; background:rgba(255,255,255,.08); margin:28px 0;}
.includes{display:flex; flex-direction:column; gap:13px; text-align:left;}
.inc{display:flex; gap:11px; align-items:flex-start;}
.inc svg{flex:none; margin-top:2px;}
.inc span{color:#C7C3BA; font-size:16px; line-height:1.4;}
.price-card .btn{display:flex; width:100%; margin-top:28px; font-size:16px; padding:15px;}
.price-note{color:var(--faint); font-size:13px; line-height:1.5; margin:18px 0 0;}

/* ---- faq ---------------------------------------------------------------- */
.faq{max-width:720px; margin:0 auto;}
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-btn{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 4px; background:transparent; border:none; cursor:pointer; color:var(--text);
  font-size:19px; font-weight:500; text-align:left;}
.faq-panel p{margin:0; padding:0 40px 24px 4px; color:#A19D95; font-size:16px; line-height:1.6;}

/* ---- waitlist CTA ------------------------------------------------------- */
.cta-band{position:relative; overflow:hidden; background:linear-gradient(180deg,#181511,#111010);
  border:1px solid rgba(255,255,255,.14); border-radius:32px; padding:clamp(48px,7vw,76px) 28px; text-align:center;}
/* soft wash centered IN the card — unified intensity, no bright top-edge hotspot */
.cta-band .glow{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:920px; max-width:150%;
  height:560px; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.06), rgba(12,11,10,0) 72%);}
.cta-inner{position:relative; max-width:560px; margin:0 auto;}
.cta-inner h2{font-size:clamp(32px,6vw,56px); line-height:1.06; letter-spacing:-.03em; text-wrap:balance;}
.cta-inner .lede{margin:18px auto 0; max-width:440px; font-size:17px;}
.waitlist-form{max-width:460px; margin:26px auto 0; text-align:left;}
.field-row{display:flex; gap:10px; flex-wrap:wrap;}
.input{flex:1; min-width:200px; background:rgba(255,255,255,.05); border:1px solid var(--line2);
  border-radius:100px; padding:15px 22px; color:var(--text); font-size:16px; outline:none; transition:border-color .2s ease;}
.input:focus{border-color:var(--gold);}
.waitlist-form .btn{padding:15px 26px; font-size:16px;}
.consent{display:flex; gap:10px; align-items:flex-start; margin-top:16px; cursor:pointer;}
.consent input{margin-top:3px; width:16px; height:16px; accent-color:var(--gold); flex:none;}
.consent span{color:var(--muted); font-size:13px; line-height:1.5;}
.consent a{color:var(--gold); text-decoration:underline;}
.fineprint{color:var(--faint); font-size:12px; line-height:1.5; margin:14px 0 0;}
.fineprint a{color:#9A968E; text-decoration:underline;}
.form-err{color:var(--err); font-size:13px; margin:10px 0 0;}
.success{margin:28px auto 0; max-width:440px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.3); border-radius:18px; padding:22px; text-align:center;}
.success .s{font-size:30px; color:var(--gold-bright);}
.success .t{margin:8px 0 0; font-size:18px; font-weight:600; color:var(--text);}
.success .d{margin:6px 0 0; color:var(--muted); font-size:15px;}
[hidden]{display:none !important;}

/* ---- footer ------------------------------------------------------------- */
.footer{border-top:1px solid rgba(255,255,255,.08); padding:56px 0 40px; margin-top:20px;}
.foot-top{display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between;}
.foot-brand{max-width:300px;}
.foot-brand .brand{font-size:22px;}
.foot-brand p{color:var(--dim); font-size:15px; line-height:1.55; margin:14px 0 0;}
.foot-cols{display:flex; gap:48px; flex-wrap:wrap;}
.foot-col{display:flex; flex-direction:column; gap:12px;}
.foot-col h4{text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:600; color:var(--faint2); margin:0;}
.foot-col a{color:var(--muted2); font-size:15px;}
.foot-col a:hover{color:var(--text);}
.foot-legal{border-top:1px solid rgba(255,255,255,.07); margin-top:36px; padding-top:22px;
  display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between;}
.foot-legal span{color:var(--faint2); font-size:13px;}

/* ---- cookie banner ------------------------------------------------------ */
.cookie{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); width:calc(100% - 28px);
  max-width:560px; z-index:80; background:rgba(20,19,18,.94);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:16px 18px;
  display:flex; gap:14px; align-items:center; flex-wrap:wrap; box-shadow:0 20px 50px -16px rgba(0,0,0,.7);}
.cookie p{margin:0; flex:1; min-width:200px; color:var(--muted2); font-size:13px; line-height:1.5;}
.cookie a{color:var(--gold); text-decoration:underline;}
.cookie .row{display:flex; gap:10px;}
.cookie .decline{border:1px solid rgba(255,255,255,.16); background:transparent; color:var(--soft);
  font-weight:500; font-size:14px; padding:9px 16px; border-radius:100px; cursor:pointer;}
.cookie .accept{border:none; background:var(--text); color:var(--bg); font-weight:600; font-size:14px;
  padding:9px 18px; border-radius:100px; cursor:pointer;}


/* ---- legal / content pages --------------------------------------------- */
.doc{max-width:760px; margin:0 auto; padding:clamp(30px,5vw,54px) 0 clamp(64px,10vw,116px);}
.doc.narrow{max-width:680px;}
.back{display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:14px; margin-bottom:24px;}
.back:hover{color:var(--text);}
.doc h1{font-size:clamp(32px,5vw,46px); letter-spacing:-.03em;}
.doc .updated{color:var(--faint); font-size:14px; margin:12px 0 0;}
.doc-body{margin-top:36px; display:flex; flex-direction:column; gap:28px;}
.doc-body h3{font-size:20px; font-weight:600; margin:0 0 10px;}
.doc-body p{color:#A19D95; font-size:16px; line-height:1.65; margin:0;}
.doc-body .intro{color:var(--muted2);}
.doc-body ul{color:#A19D95; font-size:16px; line-height:1.7; margin:12px 0 0; padding-left:20px;}
.doc-body strong{color:#C7C3BA;}
.doc-body a{color:var(--gold);}
.contact-card{margin-top:32px; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:24px;}
.contact-card .name{font-weight:600; font-size:18px;}
.contact-card .sup{margin-top:10px; color:#A19D95; font-size:16px;}
.contact-card .sup a{color:var(--gold);}
.contact-card .reply{margin-top:6px; color:var(--faint); font-size:14px;}
.contact-form{margin-top:24px; display:flex; flex-direction:column; gap:12px;}
.contact-form .input{border-radius:14px; min-width:0;}
.contact-form textarea.input{border-radius:14px; resize:vertical;}
.contact-form .btn{padding:15px; font-size:16px;}

/* ==========================================================================
   Motion — keyframes + reveal hooks (driven/gated by app.js)
   ========================================================================== */
/* hero opening: each phone fans OUT from near-center (--from-x), rises + scales +
   fades into place; staggered center-first → outward via --in-delay. */
@keyframes fanIn{from{opacity:0; transform:translate(var(--from-x,0px),56px) scale(.9);} to{opacity:1; transform:translate(0,0) scale(1);}}
@keyframes fadeUp{from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:none;}}
@keyframes floatY{0%,100%{transform:translateY(0);} 50%{transform:translateY(-11px);}}

/* hero load stagger (only when JS confirms motion is OK) */
.hero-anim .hero-eyebrow{animation:fadeUp .7s var(--ease) both; animation-delay:.05s;}
/* hero-h1 is owned by the line-mask reveal (js-lines), not the base fade */
.hero-anim .hero-sub{animation:fadeUp .7s var(--ease) both; animation-delay:.21s;}
.hero-anim .hero-actions{animation:fadeUp .7s var(--ease) both; animation-delay:.29s;}
.hero-anim .fan-float{animation:fanIn .95s var(--ease) both, floatY var(--float-dur,6.4s) ease-in-out var(--float-delay,1.6s) infinite; animation-delay:var(--in-delay,.3s), var(--float-delay,1.6s);}
/* mobile-only hero entrance (the carousel + dots are display:none on desktop) */
.hero-anim .hero-carousel{animation:fadeUp .85s var(--ease) both; animation-delay:.16s;}
.hero-anim .dots{animation:fadeUp .85s var(--ease) both; animation-delay:.32s;}

/* scroll reveal (JS-gated so content is visible without JS) */
.js [data-reveal]{opacity:0; transform:translateY(20px);}
.js [data-reveal].in{opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease);}

/* headline line-mask reveal (added by JS after splitting) */
/* hide marked headlines only while JS is present and motion is allowed, until split.
   app.js force-reveals on a safety timeout so a JS error can never leave them blank. */
.js .js-lines.pending{opacity:0;}
.line-mask{display:block; overflow:hidden;}
.line-inner{display:block; transform:translateY(100%); transition:transform .7s var(--ease-mask);}
.line-mask.in .line-inner{transform:none;}

/* tap feedback — explicit .tap class + a broad press state on touch devices */
.tap{transition:transform .12s ease, opacity .12s ease;}
.tap:active{transform:scale(.97); opacity:.85;}
@media (hover:none){
  .btn:active,.pill-btn:active,.faq-btn:active,.dot:active,.nav-mobile a:active,
  .brand:active,.back:active,.carousel-cell:active{transform:scale(.97); opacity:.9;}
}

/* ==========================================================================
   Responsive  (mobile < 760px)
   ========================================================================== */
@media (max-width:760px){
  .nav-links{display:none;}
  .menu-btn{display:inline-flex;}
  .nav{gap:12px;}
  .nav-cta-mobile{display:inline-flex; margin-left:auto; padding:10px 17px; font-size:14px;}
  .hero-stage{display:none;}
  .hero-carousel{display:flex;}
  .feat{flex-direction:column;}
  .feat.rev{flex-direction:column;}
  .foot-cols{gap:32px;}
  /* bottom sticky-cta removed on mobile — the header "Start free" is always visible */
  /* balance can overflow a long word on narrow screens — wrap normally instead */
  .hero h1{text-wrap:wrap;}
  .feat-copy h3,.cta-inner h2{text-wrap:wrap;}
  /* MOBILE: the staggered/paired phones are a DESKTOP-ONLY treatment; the hero
     becomes a real swipe-carousel (neighbors peek + fade, swipe to move, snap to
     centre). Base .carousel-cell already carries 72% / scale .9 / opacity .55 and
     .active = scale 1 / opacity 1; we just add side padding so the first/last cell
     can snap to centre with a peek either side. */
  /* fixed cell width + symmetric leading/trailing padding so the active phone sits
     DEAD-CENTRE (was left-shifted: % flex-basis resolved against the padded content
     box, so 14% padding under-centred cell 0). calc keeps first/last centerable. */
  .carousel-track{--cw:min(240px,70vw); padding:8px calc(50% - var(--cw) / 2); scroll-padding-inline:calc(50% - var(--cw) / 2);}

  /* feature phones: upright + centered, single device (paired back hidden) */
  .feat-phone::before{width:330px; height:330px;}        /* centered gold halo behind the single phone */
  .feat-phone::after{left:50%; right:auto; transform:translateX(-50%); width:58%;}
  /* show BOTH phones of the pair as the diagonal stack (back upper-left, front
     lower-right) — sized to fit the mobile column with zero overflow. The base
     absolute pair-back / pair-front + ::after shadow apply (no flatten override). */
  .feat-phone.pair{width:min(330px,86vw); max-width:100%; aspect-ratio:1 / 1.9;}
  .feat-phone.pair::before{width:min(400px,90vw); height:360px;}   /* contained glow */
}

/* keep the desktop nav CTA hidden on mobile, show hamburger only */
@media (min-width:761px){ .menu-btn{display:none;} .nav-mobile{display:none !important;} }

/* ==========================================================================
   Reduced motion  (belt-and-suspenders; app.js also checks)
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-delay:0ms !important;
    animation-iteration-count:1 !important; transition-duration:.001ms !important;
    scroll-behavior:auto !important;}
  .js [data-reveal]{opacity:1; transform:none;}
  .js .js-lines.pending{opacity:1;}
  .line-inner{transform:none;}
  .carousel-cell{opacity:1; transform:none;}
}

/* Official Marlo wordmark — replaces the text brand mark (nav / footer / pricing) */
.brand-logo{height:24px;width:auto;display:block}
.foot-brand .brand-logo{height:28px}
.price-card .brand-logo{height:22px}