/* Font metric fallbacks to reduce layout shift */
  @font-face{
    font-family:'Figtree Fallback';
    src:local('Arial');
    size-adjust:96%;
    ascent-override:92%;
    descent-override:24%;
    line-gap-override:0%;
  }
  @font-face{
    font-family:'Garamond Fallback';
    src:local('Georgia');
    size-adjust:94%;
  }

  :root{
    /* Mindless brand palette */
    --cream:#FCFCF8;         /* App Background, also light-on-dark text */
    --cream-2:#F1F3EC;       /* Primary Surface, tinted panels */
    --white:#FFFFFF;         /* Elevated Surface */
    --dark:#0D1110;          /* Dark App Background */
    --dark-2:#171C1A;        /* Dark Primary Surface */
    --dark-3:#232927;        /* Dark Elevated Surface */
    --ink:#111111;           /* Typography primary (light) */
    --cta:#B8EE63;           /* Primary Lime CTA fill */
    --cta-hover:#A3DF4A;     /* Lime Hover */
    --cta-press:#89C933;     /* Lime Pressed */
    --accent:#5E8F24;        /* Lime Deep, eyebrows/labels (>=3:1) */
    --link:#3F6C17;          /* darker lime for body-size links (>=4.5:1) */
    --night-glow:#D7F89A;    /* Lime Night Glow, accents on dark */
    --lime-200:#D8F39A;      /* selected states / active */
    --lime-50:#F6FDE7;       /* soft lime card wash */
    --mint:#9FE0C8;          /* semantic mint (was cyan) */
    --lavender:#B8A7C9;      /* semantic lavender */
    --amber:#D6AA7A;         /* semantic amber */
    --success:#3BC97F;       /* functional success */
    --alert:#B23A3A;         /* time-lost/cost accent, passes 4.5 on white */
    --gray:#5B6158;          /* Typography secondary (light) */
    --gray-soft:#B7BDB5;     /* Typography secondary (dark) */
    --text-dark:#F5F5F5;     /* Typography primary (dark) */
    --border:#111111;        /* strong 2px borders */
    --border-soft:#D9DED3;   /* soft dividers */
    --border-dark:#343B38;   /* borders in dark sections */
    --shadow:rgba(60,80,40,.08);
    --radius-card:32px;
    --radius-panel:48px;
    --serif:'EB Garamond','Garamond Fallback', Georgia, serif;
    --sans:'Figtree','Figtree Fallback',-apple-system,BlinkMacSystemFont,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--sans);
    background:var(--cream);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    line-height:1.55;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%}
  ::selection{background:var(--lime-200);color:var(--ink)}

  /* Accessibility helpers */
  .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .skip-link{position:absolute;left:12px;top:-64px;z-index:200;background:var(--dark);color:var(--cream);padding:11px 18px;border-radius:12px;font-weight:600;transition:top .2s ease}
  .skip-link:focus{top:12px}
  a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
  .dark a:focus-visible,.dark button:focus-visible,.dark summary:focus-visible,.dark [tabindex]:focus-visible{outline-color:var(--night-glow)}

  .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
  .serif{font-family:var(--serif);font-weight:400}
  .italic{font-style:italic}
  section{position:relative}

  h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.06}
  h1{font-size:clamp(40px,7.5vw,92px)}
  h2{font-size:clamp(34px,5.4vw,64px)}
  h3{font-size:clamp(24px,3.2vw,34px)}
  p{font-size:clamp(16px,1.4vw,18px)}

  .eyebrow{
    font-family:var(--sans);
    font-weight:700;
    font-size:12px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--accent);
    display:inline-block;
    margin-bottom:20px;
  }
  .dark .eyebrow{color:var(--night-glow)}

  /* Buttons */
  .btn{
    display:inline-flex;align-items:center;gap:9px;
    font-family:var(--sans);font-weight:600;font-size:15px;
    padding:14px 26px;border-radius:100px;
    border:2px solid var(--border);
    background:var(--cta);color:var(--ink);
    cursor:pointer;transition:all .28s ease;
    white-space:nowrap;
  }
  .btn:hover{background:var(--cta-hover);transform:translateY(-2px)}
  .btn:active{background:var(--cta-press)}
  .btn-ghost{background:transparent;color:var(--ink)}
  .btn-ghost:hover{background:rgba(17,17,17,.05)}
  .dark .btn-ghost{color:var(--cream);border-color:var(--cream)}
  .dark .btn-ghost:hover{background:rgba(245,245,245,.08)}
  .btn-light{background:var(--cta);color:var(--ink);border-color:var(--ink)}
  .btn-light:hover{background:var(--cta-hover);transform:translateY(-2px)}
  .btn-light:active{background:var(--cta-press)}
  .support{font-size:14px;color:var(--gray);margin-top:16px}
  .dark .support{color:var(--gray-soft)}
  /* Tertiary text-link CTA with arrow */
  .cta-text{
    display:inline-flex;align-items:center;gap:7px;margin-top:16px;
    font-family:var(--sans);font-weight:600;font-size:15px;color:var(--link);
    border-bottom:1px solid rgba(63,108,23,.4);padding-bottom:2px;
    transition:gap .2s ease,color .2s ease;
  }
  .cta-text:hover{gap:11px;color:var(--accent)}
  .cta-text .arrow{transition:transform .2s ease}
  .cta-text:hover .arrow{transform:translateX(3px)}
  .dark .cta-text{color:var(--night-glow);border-bottom-color:rgba(215,248,154,.4)}
  .dark .cta-text:hover{color:var(--night-glow)}

  /* Announcement bar */
  .announce{
    background:var(--dark);color:var(--cream);
    font-size:13.5px;font-weight:500;
    display:flex;align-items:center;justify-content:center;gap:10px;
    padding:9px 24px;text-align:center;
  }
  .announce a{color:var(--night-glow);font-weight:600;border-bottom:1px solid rgba(215,248,154,.4)}
  .announce .glyph{opacity:.85}

  /* Nav */
  nav{
    position:sticky;top:0;z-index:100;
    background:rgba(252,252,248,.86);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--border-soft);
  }
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
  .wordmark{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:26px;font-weight:500}
  .wordmark svg{flex:none}
  .nav-links{display:flex;align-items:center;gap:6px}
  .nav-item{position:relative}
  .nav-item>a,.nav-item>.nav-trigger{
    display:inline-flex;align-items:center;gap:6px;
    font-family:var(--sans);font-weight:600;font-size:15px;padding:10px 14px;border-radius:10px;
    transition:background .2s ease;background:none;border:none;color:inherit;cursor:pointer;
  }
  .nav-item>a:hover,.nav-item>.nav-trigger:hover{background:rgba(17,17,17,.05)}

  .nav-item>a svg,.nav-item>.nav-trigger svg{transition:transform .25s ease;opacity:.5}
  .nav-item:hover>.nav-trigger svg,.nav-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
  .dropdown{
    position:absolute;top:calc(100% + 6px);left:0;
    background:var(--cream);border:2px solid var(--border);border-radius:20px;
    padding:10px;min-width:290px;
    opacity:0;visibility:hidden;transform:translateY(8px);
    transition:all .26s ease;box-shadow:0 18px 40px -20px rgba(60,80,40,.28);
  }
  .nav-item:hover .dropdown,.dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}
  .drop-link{display:block;padding:11px 13px;border-radius:12px;transition:background .18s ease}
  .drop-link:hover{background:rgba(94,143,36,.10)}
  .drop-link b{display:block;font-weight:700;font-size:15px;margin-bottom:2px}
  .drop-link span{display:block;font-size:12.5px;color:var(--gray);line-height:1.4}
  .nav-right{display:flex;align-items:center;gap:14px}
  .nav-toggle{display:none;background:none;border:2px solid var(--border);border-radius:10px;width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center}
  .nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);position:relative}
  .nav-toggle span::before,.nav-toggle span::after{content:'';position:absolute;left:0;width:18px;height:2px;background:var(--ink)}
  .nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}

  /* Reveal animation.
     Content is visible by default; the hidden pre-reveal state is only applied
     once JS adds .js-reveal, so a JS or IntersectionObserver failure still shows
     every section instead of leaving it stuck invisible. */
  .reveal{transition:opacity .7s ease,transform .7s ease}
  .reveal.js-reveal{opacity:0;transform:translateY(16px)}
  .reveal.in{opacity:1;transform:none}

  /* Sections spacing */
  .sec{padding:clamp(72px,10vw,130px) 0}
  .sec-tight{padding:clamp(56px,7vw,90px) 0}
  .center{text-align:center}
  .lead{font-size:clamp(17px,1.7vw,21px);color:var(--gray);max-width:620px;line-height:1.55}
  .center .lead{margin-left:auto;margin-right:auto}

  /* Dark sections */
  .dark{background:var(--dark);color:var(--cream)}
  .dark h1,.dark h2,.dark h3{color:var(--cream)}
  .dark .lead{color:var(--gray-soft)}
  .panel{border-radius:var(--radius-panel);margin:0 24px}
  @media(max-width:640px){.panel{margin:0 12px;border-radius:34px}}

  /* HERO */
  .hero{padding:clamp(56px,8vw,96px) 0 clamp(60px,8vw,100px);text-align:center}
  .hero h1{max-width:14ch;margin:0 auto 26px}
  .hero .lead{margin:0 auto 32px}
  .hero-cta{display:flex;flex-direction:column;align-items:center;gap:0}
  .hero-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .hero-cta .btn{font-size:16px;padding:16px 30px}

  /* Phone demo */
  .demo-stage{margin:clamp(44px,6vw,68px) auto 0;max-width:390px}
  .phone{
    border:2px solid var(--border);border-radius:44px;background:var(--cream-2);
    padding:14px;position:relative;box-shadow:0 40px 80px -50px rgba(60,80,40,.4);
  }
  .phone-notch{width:120px;height:26px;background:var(--dark);border-radius:0 0 16px 16px;margin:0 auto 8px;position:relative;z-index:3}
  .screen{
    position:relative;height:520px;border-radius:32px;overflow:hidden;
    background:var(--cream);border:1px solid var(--border-soft);
  }
  .stage{position:absolute;inset:0;padding:20px;transition:opacity .9s ease-out;opacity:0;pointer-events:none}
  .stage.active{opacity:1;pointer-events:auto}

  /* Stage 1 doomscroll */
  .doom-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
  .doom-counter{font-size:12.5px;font-weight:700;color:var(--alert)}
  .doom-counter b{font-family:var(--sans)}
  .doom-app{font-size:12px;font-weight:600;color:var(--gray)}
  .feed{position:absolute;left:20px;right:20px;top:52px;bottom:0;overflow:hidden}
  .feed-track{position:absolute;left:0;right:0;top:0;animation:scrollFeed 6s linear infinite}
  .skel{border:1px solid var(--border-soft);border-radius:16px;padding:12px;margin-bottom:12px;background:#fff}
  .skel-row{display:flex;gap:9px;align-items:center;margin-bottom:10px}
  .skel-av{width:30px;height:30px;border-radius:50%;background:#E4E8DF;flex:none}
  .skel-lines{flex:1}
  .skel-line{height:8px;border-radius:5px;background:#E4E8DF;margin-bottom:6px}
  .skel-img{height:82px;border-radius:12px;background:#ECEFE7}
  .skel-actions{display:flex;gap:14px;margin-top:10px}
  .skel-dot{width:20px;height:8px;border-radius:5px;background:#E4E8DF}
  @keyframes scrollFeed{from{transform:translateY(0)}to{transform:translateY(-50%)}}

  /* Stage 2 intention */
  .intent{display:flex;flex-direction:column;height:100%;justify-content:center;padding:6px 6px}
  .intent-badge{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
  .intent-q{font-family:var(--serif);font-size:23px;line-height:1.28;min-height:150px}
  .caret{display:inline-block;width:2px;height:1em;background:var(--ink);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}
  .chips-row{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap;opacity:0;transition:opacity .6s ease-out}
  .chips-row.show{opacity:1}
  .chip-soft{border:2px solid var(--border);border-radius:100px;padding:9px 16px;font-size:13.5px;font-weight:600;background:var(--cream)}
  .chip-soft.lav{background:var(--lavender)}
  .chip-soft.cy{background:var(--mint)}

  /* Stage 3 done */
  .done{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center}
  .done-check{width:74px;height:74px;border-radius:50%;background:var(--success);display:flex;align-items:center;justify-content:center;margin-bottom:22px}
  .done h3{font-size:26px;margin-bottom:8px}
  .done p{font-size:15px;color:var(--gray)}
  .done .back{font-family:var(--serif);font-size:34px;color:var(--accent);margin-top:6px}

  .demo-dots{display:flex;gap:7px;justify-content:center;margin-top:22px}
  .demo-dots i{width:7px;height:7px;border-radius:50%;background:var(--border-soft);transition:all .4s ease-out}
  .demo-dots i.on{background:var(--accent);width:22px;border-radius:5px}

  /* App chip cloud */
  .cloud{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:820px;margin:38px auto 0}
  .app-chip{
    border:2px solid var(--border);border-radius:100px;padding:10px 18px;
    font-weight:600;font-size:14.5px;background:var(--cream);
    display:inline-flex;align-items:center;gap:8px;transition:all .25s ease;
  }
  .app-chip:hover{transform:translateY(-3px);border-color:var(--accent);background:var(--cream-2)}
  .app-chip.any{background:var(--cream-2);border-style:dashed}

  /* Marquee */
  .marquee-wrap{overflow:hidden;width:100%;margin-top:40px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .marquee{display:flex;width:max-content;padding:8px 0;animation:marqL 40s linear infinite}
  .marquee-group{display:flex;flex-shrink:0;align-items:center;gap:16px;padding-right:16px}
  .marquee-wrap:hover .marquee,.marquee-wrap:focus-within .marquee,.marquee-wrap.paused .marquee{animation-play-state:paused}
  @keyframes marqL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .badge{
    border:2px solid rgba(245,245,245,.28);border-radius:100px;
    padding:12px 24px;font-weight:600;font-size:15px;white-space:nowrap;color:var(--cream);
  }
  .badge b{color:var(--night-glow);font-family:var(--sans)}

  /* Race compare */
  .race{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:840px;margin:48px auto 0}
  .race-card{border:2px solid var(--border);border-radius:var(--radius-card);padding:28px;background:var(--cream)}
  .race-card.calm{background:var(--cream-2)}
  .race-label{font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;color:var(--gray)}
  .race-card.calm .race-label{color:var(--accent)}
  .race-num{font-family:var(--serif);font-size:clamp(30px,4vw,44px);margin-bottom:18px;line-height:1}
  .bar{height:14px;border-radius:100px;background:rgba(17,17,17,.06);overflow:hidden;border:1px solid var(--border-soft)}
  .bar i{display:block;height:100%;width:0;border-radius:100px;transition:width 2.4s cubic-bezier(.2,.7,.2,1)}
  .bar .fill-fast{background:var(--amber)}
  .bar .fill-calm{background:var(--cta)}
  .race-cap{font-size:13px;color:var(--gray);margin-top:12px}

  /* Persona tabs */
  .tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:34px 0 34px}
  .tab{
    border:2px solid var(--border);border-radius:100px;padding:11px 20px;
    font-family:var(--sans);font-weight:600;font-size:14.5px;background:var(--cream);cursor:pointer;transition:all .25s ease;color:var(--ink);
  }
  .tab:hover{background:var(--cream-2)}
  .tab[aria-selected="true"]{background:var(--lime-200);color:var(--ink);border-color:var(--ink)}
  .persona-card{
    max-width:720px;margin:0 auto;border:2px solid var(--border);border-radius:var(--radius-card);
    padding:clamp(30px,5vw,52px);background:var(--cream-2);text-align:left;min-height:220px;
    transition:opacity .4s ease-out,transform .4s ease-out;
  }
  .persona-card.fade{opacity:0;transform:translateY(10px)}
  .persona-card .tag{display:inline-block;border:2px solid var(--border);border-radius:100px;padding:5px 13px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px;background:var(--lime-200)}
  .persona-card h3{margin-bottom:14px}
  .persona-card p{color:var(--gray);font-size:17px}

  /* Feature hero (mechanism) */
  .feat-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .feat-card{border:2px solid var(--border);border-radius:var(--radius-card);padding:26px;background:var(--cream-2)}
  .flow-step{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--border-soft)}
  .flow-step:last-child{border-bottom:none}
  .flow-n{width:30px;height:30px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none;background:var(--cream)}
  .flow-step.hi .flow-n{background:var(--lime-200)}
  .flow-step b{display:block;font-weight:700;font-size:15.5px;margin-bottom:3px}
  .flow-step span{font-size:14px;color:var(--gray)}

  /* Pull quote */
  .pull{max-width:900px;margin:0 auto;text-align:center}
  .pull .q{font-size:clamp(28px,4.4vw,50px);line-height:1.18}
  .pull .attr{margin-top:22px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--night-glow);font-family:var(--sans);font-weight:600}

  /* Three sub-feature cards */
  .three{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
  .sub-card{border:2px solid var(--border);border-radius:var(--radius-card);padding:30px;background:var(--cream);transition:all .28s ease}
  .sub-card:hover{transform:translateY(-5px);border-color:var(--accent)}
  .sub-ic{width:52px;height:52px;border-radius:16px;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:20px;background:var(--cream-2)}
  .sub-card h3{font-size:26px;margin-bottom:10px}
  .sub-card p{font-size:15px;color:var(--gray);margin-bottom:18px}
  .mini-chips{display:flex;flex-wrap:wrap;gap:7px}
  .mini-chip{border:2px solid var(--border);border-radius:100px;padding:5px 12px;font-size:12px;font-weight:600;background:var(--cream-2)}
  .mini-chip.a{background:var(--mint)}.mini-chip.b{background:var(--lavender)}.mini-chip.c{background:var(--amber)}

  /* Pillars dark */
  .pillars{max-width:960px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(36px,6vw,64px)}
  .pillar{font-size:clamp(26px,4.2vw,46px);line-height:1.2;font-family:var(--serif)}
  .pillar .idx{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--night-glow);letter-spacing:.1em;display:block;margin-bottom:14px}

  /* Testimonials */
  .letters{columns:3;column-gap:22px;margin-top:52px}
  .letter{
    break-inside:avoid;border:2px solid var(--border);border-radius:var(--radius-card);
    padding:26px;background:var(--cream);margin-bottom:22px;
  }
  .letter.note{background:var(--dark);color:var(--cream)}
  .letter.soft{background:var(--lime-50)}
  .letter.surface{background:var(--cream-2)}
  .letter p{font-size:16px;line-height:1.5;font-family:var(--serif)}
  .letter.note p{font-family:var(--serif)}
  .letter .who{display:flex;align-items:center;gap:11px;margin-top:20px}
  .av{
    width:40px;height:40px;flex-shrink:0;
    border-radius:50%;border:2px solid var(--border);
    display:flex;align-items:center;justify-content:center;
    padding:0;margin:0;line-height:1;text-align:center;overflow:hidden;
    font-family:var(--sans);font-weight:600;font-size:15px;
    color:#111111;background:var(--lavender);
  }
  .av.lav{background:var(--lavender)}
  .av.mint{background:var(--mint)}
  .av.lime{background:var(--lime-200)}
  .av.amber{background:var(--amber)}
  .letter.note .av{background:var(--lime-200);color:#111111}
  .who b{font-size:14px;font-weight:700;font-family:var(--sans)}
  .who span{display:block;font-size:12.5px;color:var(--gray)}
  .letter.note .who span{color:var(--gray-soft)}
  .letter.note .who b{color:var(--cream)}

  /* FAQ */
  .faq-list{max-width:760px;margin:44px auto 0;text-align:left}
  .faq{border:2px solid var(--border);border-radius:24px;background:var(--cream);margin-bottom:14px;overflow:hidden}
  .faq summary{list-style:none;cursor:pointer;padding:22px 26px;font-family:var(--serif);font-size:clamp(19px,2.4vw,25px);display:flex;align-items:center;justify-content:space-between;gap:16px;line-height:1.2}
  .faq summary::-webkit-details-marker{display:none}
  .fq-ic{flex:none;width:26px;height:26px;border:2px solid var(--border);border-radius:50%;position:relative;transition:transform .3s ease}
  .fq-ic::before,.fq-ic::after{content:'';position:absolute;background:var(--ink);left:50%;top:50%}
  .fq-ic::before{width:11px;height:2px;transform:translate(-50%,-50%)}
  .fq-ic::after{width:2px;height:11px;transform:translate(-50%,-50%);transition:transform .3s ease}
  .faq[open] .fq-ic::after{transform:translate(-50%,-50%) scaleY(0)}
  .fq-body{padding:0 26px 24px;font-size:16px;color:var(--gray);line-height:1.6}
  .fq-body a{color:var(--link);font-weight:600;border-bottom:1px solid rgba(63,108,23,.4)}

  /* Final CTA */
  .final{text-align:center;padding:clamp(64px,9vw,110px) 24px}
  .final h2{max-width:16ch;margin:0 auto 18px}
  .final .lead{margin:0 auto 30px}
  .final-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

  /* Footer */
  footer{background:var(--cream);padding:80px 0 40px;border-top:1px solid var(--border-soft)}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:56px}
  .foot-col h2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin-bottom:16px;font-family:var(--sans);font-weight:700;line-height:1.4}
  .foot-col a{display:block;font-size:15px;padding:6px 0;color:var(--ink);transition:color .2s ease}
  .foot-col a:hover{color:var(--link)}
  .foot-brand .wordmark{font-size:34px;margin-bottom:14px}
  .foot-brand p{font-size:14px;color:var(--gray);max-width:280px}
  .foot-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:28px;border-top:1px solid var(--border-soft);flex-wrap:wrap;gap:16px}
  .foot-big{font-family:var(--serif);font-size:clamp(56px,13vw,150px);line-height:.9;color:var(--ink);opacity:.14;margin:20px 0;letter-spacing:-.02em}
  .foot-legal{display:flex;gap:20px;font-size:13.5px;color:var(--gray)}
  .foot-legal a:hover{color:var(--link)}
  .foot-social{display:flex;gap:18px;font-size:13.5px;color:var(--gray)}
  .copyright{font-size:13.5px;color:var(--gray)}

  /* Responsive */
  @media(max-width:900px){
    .feat-grid{grid-template-columns:1fr}
    .three{grid-template-columns:1fr;gap:18px}
    .letters{columns:2}
    .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  }
  @media(max-width:760px){
    .nav-links{
      position:absolute;top:70px;left:0;right:0;background:var(--cream);
      border-bottom:2px solid var(--border);flex-direction:column;align-items:stretch;
      padding:14px;gap:2px;display:none;
    }
    .nav-links.open{display:flex}
    .nav-item>a,.nav-item>.nav-trigger{padding:12px;width:100%;justify-content:space-between}
    .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0 0 8px 14px;min-width:0;background:transparent}
    .nav-item>a svg,.nav-item>.nav-trigger svg{display:none}
    .nav-toggle{display:flex}
    .nav-cta-btn{display:none}
  }
  @media(max-width:640px){
    .race{grid-template-columns:1fr}
    .letters{columns:1}
    .foot-grid{grid-template-columns:1fr}
    .tabs{gap:8px}
    .tab{padding:9px 15px;font-size:13px}
    .hero-cta .btn{width:100%;justify-content:center}
    .hero-cta-row{width:100%}
  }
  @media(max-width:400px){
    .wrap{padding:0 16px}
    .screen{height:480px}
  }

  /* Reduced motion.
     Owner decision: keep looping/ambient motion running (hero demo, marquee,
     doom counter, race counters, persona fades). Only reduce scroll-reveal
     translation, smooth scrolling, and hover lift/scale. No global animation
     kill-switch. */
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    /* Scroll reveals fade in place, never slide */
    .reveal.js-reveal{transform:none!important}
    .reveal.in{transform:none!important}
    /* Persona card transition stays, but opacity-only (no translate) */
    .persona-card.fade{transform:none!important}
    /* No hover lift or scale */
    .btn:hover,.btn-light:hover,.app-chip:hover,.sub-card:hover{transform:none!important}
    .cta-text:hover .arrow{transform:none!important}
  }

/* Ask an AI */
.ask-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.ask-btn .arrow{transition:transform .2s ease}
.ask-btn:hover .arrow{transform:translateX(3px)}
@media(max-width:640px){.ask-btn{width:100%;justify-content:center}}

/* Inside the app gallery */
.shots{display:flex;gap:22px;margin-top:52px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 6px 26px;-webkit-overflow-scrolling:touch}
.shot{flex:0 0 auto;width:240px;scroll-snap-align:center;text-align:center}
.shot:first-child{margin-left:auto}
.shot:last-child{margin-right:auto}
.shot-frame{border:2px solid var(--border);border-radius:36px;background:var(--cream-2);padding:10px;box-shadow:0 30px 60px -42px rgba(60,80,40,.4)}
.shot-frame img{display:block;width:100%;height:auto;border-radius:28px;border:1px solid var(--border-soft)}
.shot-cap{margin-top:14px;font-size:14px;font-weight:700}
.shot-cap span{display:block;font-weight:400;font-size:12.5px;color:var(--gray);margin-top:2px}
@media(max-width:640px){.shot{width:208px}}
@media (prefers-reduced-motion: reduce){.shots{scroll-behavior:auto}}