/* Shared across every page. Extracted from home.html so the pages cannot drift. */

/* ══════════════════════════════════════════════════════════════════════════
   THE TOP OF THE SITE: hero, walk, coop, in the order a visitor meets them.

   HERO belongs to the buyer. That was Michael's call: clarity and commerce
   over company. So it opens on recognition (four real first-person sentences
   from painCards.ts) instead of the abstract "what brings you here?" fork, and
   the headline is the promise that used to sit 1,240px down the page. The
   negation subhead is gone, not rewritten: the cards prove the point.

   THE WALK is the answer to the hero. She walks, the real screens pass her.

   THE COOP is the crescendo, and it is product-true. The Coop is a real
   surface (AppShell routes it, icon 'nest') with a real progression the app
   states in its own words: "You've grown from Hatchling to Hen. Settled into
   the Coop." So she arrives AS A HEN. That completes the brand metaphor in its
   own direction, egg to chick to hen, and nothing is ever cooked.

   MASCOTS are the canonical Icon.tsx artwork (henway-icons, 2026-08-16), the
   same set the product uses, not the old photographic chick. Flat variants sit
   in walk-assets/flat if the register should change.

   DEGRADES BY DEFAULT. The stacked layout is the default: no JS, reduced
   motion, or a phone all get the whole argument. The horizontal walk is an
   enhancement. Nothing is behind a click.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --yellow:#FFCC00; --yolk:#ffbf00; --gold:#a8790a;
  --ink:#1d1810; --muted:#6b6353;
  --paper:#fbf7ef; --border:#e6ddca; --egg:#efe7d6; --offwhite:#f4edde;
  --tightest:-0.036em;   /* display only: h1 and the big numbers */
  --tight:-0.014em;     /* sub-heads. Same value at h3 size closes the counters. */
  /* Raleway is the brand font and it was third here, behind two faces that ship
     with macOS and Windows, so nobody on either platform ever saw it and the
     Google Fonts request on every page was dead weight. */
  --sans:Archivo,"Helvetica Neue",Inter,ui-sans-serif,system-ui,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
     font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:800;text-wrap:balance}
h1{letter-spacing:var(--tightest)}
h2,h3{letter-spacing:var(--tight)}
p{margin:0 0 1em}
/* There was no anchor reset at all, so any link without its own component rule
   rendered as default browser blue-and-underlined. That was every item in the
   header nav. Components that want an underline ask for one explicitly. */
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.eyebrow{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.26em;
         color:var(--gold);margin:0 0 16px;display:block}
.lede{font-size:1.12rem;color:var(--muted);max-width:60ch}

/* ── NAV ──────────────────────────────────────────────────────────────── */
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0;
     border-bottom:1px solid var(--border)}
.nav .brand{display:block;line-height:0}
.nav .brand img{height:32px;width:auto;display:block}
.nav .links{display:flex;gap:24px;font-size:14.5px;font-weight:600;color:var(--muted);align-items:center}
.nav .links a{color:var(--muted);transition:color .15s}
.nav .links a:hover{color:var(--ink)}
.nav .links a.login{color:var(--ink);font-weight:700;text-decoration:none}
.nav .links a.login:hover{text-decoration:underline;text-underline-offset:3px}
.nav .go{background:var(--yellow);color:var(--ink);font-weight:800;font-size:14px;
         padding:10px 20px;border-radius:99px;border:0}
.nav .menu-btn{display:none;background:none;border:1px solid var(--border);border-radius:10px;
  padding:9px 11px;line-height:0;cursor:pointer}
.nav .menu-btn svg{display:block}
@media (max-width:820px){
  .nav{position:relative}
  .nav .links{display:none}
  .nav .menu-btn{display:block}
  .nav .links.open{display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:calc(100% + 1px);left:-22px;right:-22px;z-index:50;
    background:var(--paper);border-bottom:1px solid var(--border);
    box-shadow:0 24px 40px rgba(40,32,4,.12);padding:6px 22px 16px}
  .nav .links.open a{padding:13px 0;border-bottom:1px solid var(--border);font-size:16px;color:var(--ink)}
  .nav .links.open a:last-child{border-bottom:0}
  .nav .links.open .go{margin-top:12px;text-align:center;padding:13px 20px}
}

/* ── HERO ─────────────────────────────────────────────────────────────── */
.hero{padding:66px 0 74px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.04;margin:0 0 16px}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .sub{font-size:1.16rem;color:var(--muted);margin:0;max-width:32ch}

.offer{position:relative;padding-left:92px}
.offerer{position:absolute;left:0;bottom:78px;width:92px;
         filter:drop-shadow(0 10px 16px rgba(40,32,4,.16));
         animation:offer-bob 2.8s ease-in-out infinite}
@keyframes offer-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.offerer{animation:none}}

.pcard{background:#fff;border:1px solid var(--border);border-radius:22px;padding:24px 26px;
       box-shadow:0 14px 40px rgba(40,32,4,.09);transition:opacity .28s ease,transform .28s ease}
.pcard.swap{opacity:0;transform:translateY(6px)}
.pcard .cat{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
            text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:10px}
.pcard .q{margin:0;font-size:1.32rem;font-weight:700;line-height:1.33;letter-spacing:var(--tightest)}

.acts{display:flex;gap:10px;align-items:center;margin-top:18px;flex-wrap:wrap}
.acts .primary{display:inline-block;text-decoration:none;color:var(--ink);background:var(--yellow);border:0;border-radius:99px;padding:14px 28px;font-weight:800;font-size:15.5px}
.acts .ghost{background:none;border:0;color:var(--muted);font-weight:700;font-size:14.5px;text-decoration:underline;text-underline-offset:3px}
.who{margin:16px 0 0;font-size:13.5px;color:var(--muted)}
.who button,.who a{background:none;border:0;padding:0;font-size:13.5px;font-weight:700;color:var(--ink);
            text-decoration:underline;text-underline-offset:3px}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .offer{padding-left:52px}
  .offerer{width:62px;bottom:auto;top:-26px;left:-6px}
}

/* The hen at the door: centered in the hero's dead middle, gazing at the
   pain card (the asset faces right). She ushers, she does not decorate. */
.hero-grid{position:relative}
.hero-hen{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:2;
  pointer-events:none;animation:hen-settle 4.5s ease-in-out infinite}
.hero-hen .hh-hen{width:158px;display:block;filter:drop-shadow(0 18px 26px rgba(120,86,10,.20))}
.hero-hen .hh-egg{width:42px;position:absolute;left:-24px;bottom:2px;
  filter:drop-shadow(0 8px 12px rgba(40,32,4,.2))}
@keyframes hen-settle{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 6px))}}
@media (prefers-reduced-motion:reduce){.hero-hen{animation:none}}
@media (max-width:900px){
  .hero-hen{position:relative;left:auto;top:auto;transform:none;margin:0 auto;width:max-content;animation:none}
  .hero-hen .hh-hen{width:104px}
  .hero-hen .hh-egg{width:30px;left:-18px}
}

/* The hatch at the thesis line: the shell-hat chick appears beside "about
   seven minutes", the reward for scrolling, one beat before the shades-chick
   punchline. */
.collapse-row{display:flex;align-items:center;gap:34px;justify-content:space-between}
.collapse-row .hatchling{width:96px;flex:none}
@media (max-width:700px){
  .collapse-row{flex-direction:column;gap:18px}
  .collapse-row .hatchling{width:74px}
}

/* The companion shot on /consultants: two speaker tags so a skimmer can tell
   the client's paste from Henway's reply without reading the header. */
.shotwrap{position:relative;max-width:300px;margin:0 auto}
.shotwrap img{width:100%;display:block;border-radius:16px;border:1px solid var(--border);
  box-shadow:0 20px 50px rgba(40,32,4,.14)}
.shotwrap .tag{position:absolute;left:14px;font-family:var(--mono);font-size:9px;
  letter-spacing:.11em;text-transform:uppercase;font-weight:700;border-radius:99px;
  padding:4px 9px;box-shadow:0 4px 10px rgba(40,32,4,.16);white-space:nowrap;line-height:1.2}
/* The chips carry the voices: ink for the client (the grey bubble), yellow for
   Henway (the reply card). Each straddles its bubble's top border, never text. */
.shotwrap .t-client{background:var(--ink);color:var(--paper)}
.shotwrap .t-henway{background:var(--yellow);color:var(--ink)}

/* ── WALK INTRO ───────────────────────────────────────────────────────── */
/* The thesis line above the film. The em was inheriting plain italic, which
   is the one place on the page that should not be quiet. */
.walk h2 em{font-style:normal;color:var(--gold)}
.walk{background:var(--offwhite);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.walk-intro{padding:78px 0 40px}
.walk-intro h2{font-size:clamp(1.9rem,5vw,3.1rem);line-height:1.08}
.film{margin:28px 0 0;max-width:820px}
.film-center{margin:22px auto 26px}
.film video{display:block;width:100%;border-radius:22px;background:#000;box-shadow:0 30px 70px rgba(40,32,4,.18)}
.film .film-tall{display:none}
.film figcaption{font-size:.9rem;color:var(--muted);margin-top:10px}
@media (max-width:820px){.film .film-wide{display:none}.film .film-tall{display:block;max-width:400px;margin:0 auto}}

/* ── DEFAULT (and fallback): stations stacked ─────────────────────────── */
.stations{display:grid;gap:22px;padding-bottom:70px}
.station{background:#fff;border:1px solid var(--border);border-radius:22px;padding:24px;
         display:grid;grid-template-columns:300px minmax(0,1fr);gap:30px;align-items:center;
         max-width:820px}
.station .cap p{max-width:42ch}
.station .shot{background:var(--egg);border-radius:16px;overflow:hidden;
               border:1px solid var(--border);aspect-ratio:1/1;width:100%}
.station .shot img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:760px){.station{grid-template-columns:1fr;gap:18px}
  .station .shot{max-width:340px}}
.stamp{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
       color:var(--gold);font-weight:700}
.station h3{margin:6px 0;font-size:1.45rem}
.station p{margin:0;color:var(--muted);font-size:15.5px;max-width:46ch}

/* the walk's furniture belongs to the walk, hidden unless it is live */
.ground,.ticks,.walker,.clock,.origin,.trail,.coop-mark{display:none}

/* ── THE COOP ─────────────────────────────────────────────────────────── */
.coop{padding:8px 0 104px}
.coop .card{background:#fff;border:1px solid var(--border);border-radius:26px;
            padding:38px;display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center}
.coop .art{position:relative;width:190px;flex:none}
.coop .art .nest{width:190px;display:block}
.coop .art .hen{position:absolute;left:52%;bottom:52%;width:112px;translate:-50% 0}
.coop h2{font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.1;margin:0 0 12px;max-width:18ch}
.coop h2 em{font-style:normal;color:var(--gold)}
.coop .rank{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
            color:var(--gold);font-weight:700;margin-bottom:14px;display:block}
.coop p{color:var(--muted);max-width:52ch;font-size:16px}
.kept{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
.kept i{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
        text-transform:uppercase;color:var(--muted);border:1px solid var(--border);
        background:var(--paper);border-radius:99px;padding:6px 13px}
.coop .cta{display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.coop .cta .primary{display:inline-block;text-decoration:none;color:var(--ink);background:var(--yellow);border:0;border-radius:99px;padding:14px 27px;font-weight:800;font-size:15px}
.coop .cta .ghost{display:inline-block;text-decoration:none;background:#fff;border:1px solid var(--border);border-radius:99px;padding:14px 24px;font-weight:700;font-size:15px;color:var(--muted)}

/* ── THE COLLAPSE LINE ────────────────────────────────────────────────── */
.collapse{padding:0 0 110px}
.collapse .big{font-size:clamp(1.6rem,3.6vw,2.5rem);font-weight:800;letter-spacing:var(--tightest);
               line-height:1.14;max-width:22ch;margin:0 0 14px}
.collapse .big em{font-style:normal;color:var(--gold)}

/* ══ ENHANCEMENT: the sticky horizontal walk ═══════════════════════════ */
.walk-live .scroller{position:relative;height:380vh}
.walk-live .stage{position:sticky;top:0;height:100vh;overflow:hidden;
                  display:flex;flex-direction:column;justify-content:flex-start;padding-top:3vh}
.walk-live .stage::before,.walk-live .stage::after{content:'';position:absolute;top:0;bottom:0;
                  width:15vw;z-index:3;pointer-events:none}
.walk-live .stage::before{left:0;background:linear-gradient(90deg,var(--offwhite) 18%,transparent)}
.walk-live .stage::after{right:0;background:linear-gradient(270deg,var(--offwhite) 18%,transparent)}

.walk-live .ground{display:block;position:absolute;left:0;right:0;bottom:16%;height:2px;z-index:2;
                   background:linear-gradient(90deg,transparent,var(--border) 8%,var(--border) 92%,transparent)}
.walk-live .ticks{display:block;position:absolute;left:0;bottom:calc(16% - 9px);height:9px;width:200%;z-index:2;
                  background-image:radial-gradient(circle at 3px 3px,#d9cfb8 1.6px,transparent 1.7px);
                  background-size:44px 9px;will-change:transform}

.walk-live .rail{display:flex;align-items:flex-start;gap:9vw;position:relative;z-index:1;
                 padding-left:26vw;padding-right:34vw;will-change:transform}
.walk-live .stations{display:contents}
.walk-live .station{display:block;max-width:none;flex:0 0 auto;width:var(--card,clamp(340px,44vh,600px));background:none;border:0;padding:0;
                    opacity:.26;transition:opacity .45s ease,transform .45s ease;
                    transform:translateY(10px) scale(.94);transform-origin:bottom center}
.walk-live .station.on{opacity:1;transform:none}
.walk-live .station .shot{box-shadow:0 24px 60px rgba(40,32,4,.13);aspect-ratio:1/1}
.walk-live .station .shot img{object-fit:cover;width:100%;height:100%}
.walk-live .station .cap{margin-top:16px}
.walk-live .station h3{font-size:1.2rem}
.walk-live .station p{font-size:14px}

/* the walker. Two mascots, crossfaded: she GROWS as she arrives. */
.walk-live .walker{display:block;position:absolute;left:13%;bottom:16%;width:118px;z-index:5;
                   transform-origin:bottom center;pointer-events:none;
                   animation:bob .62s ease-in-out infinite}
.walk-live .walker img{position:absolute;bottom:0;left:0;width:100%;display:block;
                       filter:drop-shadow(0 9px 15px rgba(40,32,4,.16));transition:opacity .6s ease}
.walk-live .walker img[data-m]{opacity:0}
.walk-live .walker.home{animation:none;transform:none}
.walk-live .walker .spacer{position:static;visibility:hidden}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-8px) rotate(1.5deg)}}

/* the egg she came from, and the nest she is walking toward */
.walk-live .origin{display:block;position:absolute;left:4%;bottom:calc(16% - 2px);width:44px;z-index:4;
                   opacity:.55;transition:opacity .5s ease;text-align:center}
.walk-live .origin img{width:100%;display:block}
.walk-live .origin span{position:absolute;left:50%;translate:-50% 0;top:calc(100% + 10px);
                        white-space:nowrap;text-align:center;
                        font-family:var(--mono);font-size:10px;
                        letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.walk-live .coop-mark{display:block;position:absolute;right:7%;bottom:calc(16% - 6px);width:132px;z-index:4;
                      opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease;text-align:center}
.walk-live .coop-mark img{width:100%;display:block}
.walk-live .coop-mark span{display:block;margin-top:6px;font-family:var(--mono);font-size:10px;
                           letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700}
.walk-live .coop-mark.on{opacity:1;transform:none}

.walk-live .clock{display:block;position:static;flex:none;text-align:center;pointer-events:none;margin-bottom:1vh}
.walk-live .clock b{font-family:var(--mono);font-size:clamp(1.7rem,4vw,3.4rem);font-weight:700;
                    letter-spacing:-.02em;display:block;line-height:1}
.walk-live .clock span{font-family:var(--mono);font-size:11px;letter-spacing:.22em;
                       text-transform:uppercase;color:var(--muted);display:block;margin-top:9px}

.walk-live .trail{display:flex;position:absolute;left:0;right:0;bottom:6.5vh;justify-content:center;gap:9px;z-index:5}
.walk-live .trail i{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
                    text-transform:uppercase;color:var(--muted);border:1px solid var(--border);
                    background:#fff;border-radius:99px;padding:6px 13px;opacity:0;
                    transform:translateY(7px);transition:opacity .5s ease,transform .5s ease}
.walk-live .trail i.on{opacity:1;transform:none}

@media (max-width:820px){
  .coop .card{grid-template-columns:1fr;padding:26px;text-align:center}
  .coop .art{margin:0 auto}
  .coop .card .cta{justify-content:center}
  .coop .card .chips,.coop .card .acts{justify-content:center}
  .card .tiericon{margin-left:auto;margin-right:auto}
  .coop .art{width:150px}.coop .art .nest{width:150px}.coop .art .hen{width:90px}
  .nav .links{display:none}
}

/* ── PAGE FURNITURE (shared by every page but home's walk) ──────────────── */
.page{padding:56px 0 20px}
.page h1{font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.05;max-width:20ch;margin:0 0 16px}
.page h1 em{font-style:normal;color:var(--gold)}
.page .lede{font-size:1.16rem;max-width:56ch}
.sec{padding:56px 0;border-top:1px solid var(--border)}
.sec h2{font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.1;margin:0 0 12px;max-width:24ch}
.sec h2 em{font-style:normal;color:var(--gold)}
.sec .lede{margin-bottom:26px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:24px}
.card h3{font-size:1.18rem;margin:0 0 8px}
.card p{margin:0;color:var(--muted);font-size:15px}
.card .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
         text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:9px}
.fact{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--border)}
.fact:last-child{border-bottom:0}
.fact img{width:34px;flex:none;margin-top:2px}
.fact b{display:block;font-size:1.05rem;margin-bottom:4px}
.fact p{margin:0;color:var(--muted);font-size:15px;max-width:62ch}
.pill{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
      text-transform:uppercase;color:var(--muted);border:1px solid var(--border);
      background:#fff;border-radius:99px;padding:7px 14px;margin:0 6px 8px 0;
      transition:all .5s}
/* The scanning glow that hops across the tools (ported from the React Home):
   the section shows Henway weighing all of them for you. */
.pill-active{border-color:var(--yellow);color:#000;background:rgba(255,204,0,.06);
      transform:translateY(-2px) scale(1.05);
      box-shadow:0 0 0 3px rgba(255,204,0,.20),0 10px 26px rgba(255,204,0,.32)}
@media (prefers-reduced-motion:reduce){.pill-active{transform:none;box-shadow:none}}
.cta-band{padding:52px 0 96px}
.cta-band .card{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:32px}
.cta-band h2{margin:0;max-width:20ch}
.btn{background:var(--yellow);border:0;border-radius:99px;padding:14px 28px;font-weight:800;
     font-size:15.5px;color:var(--ink);text-decoration:none;display:inline-block}
.btn.ghost{background:#fff;border:1px solid var(--border);color:var(--muted);font-weight:700}
.foot{border-top:1px solid var(--border);padding:30px 0 60px;color:var(--muted);font-size:14px}
.foot a{color:var(--muted);margin-right:18px;transition:color .15s}
.foot a:hover{color:var(--paper)}
.plan{display:flex;flex-direction:column}
.plan .price{font-size:2rem;font-weight:800;letter-spacing:var(--tightest);margin:6px 0 4px}
.plan ul{margin:14px 0 0;padding-left:18px;color:var(--muted);font-size:14.5px}
.plan li{margin-bottom:6px}
.plan.hot{border-color:var(--yellow);box-shadow:0 14px 40px rgba(255,204,0,.16)}
@media(max-width:900px){.g2,.g3{grid-template-columns:1fr}}

/* Short laptop windows: reclaim the clock's band for the cards. */
@media (max-height:1150px){
  .walk-live .clock b{font-size:1.75rem}
  .walk-live .clock span{margin-top:5px;font-size:10px}
  .walk-live .clock{margin-bottom:.6vh}
  .walk-live .stage{padding-top:2vh}
}

/* SHORT WINDOWS. Every fixed thing gives, so the CARDS keep their size. The
   clock band, the walker and the caption type were eating the room on a normal
   laptop and starving the screens down to nothing. */
@media (max-height:1150px){
  .walk-live .stage{padding-top:1.4vh}
  .walk-live .clock b{font-size:1.35rem}
  .walk-live .clock span{font-size:9px;margin-top:3px;letter-spacing:.18em}
  .walk-live .clock{margin-bottom:.4vh}
  .walk-live .walker{width:74px}
  .walk-live .coop-mark{width:88px}
  .walk-live .coop-mark span{font-size:9px}
  .walk-live .origin{width:30px}
  .walk-live .origin span{font-size:9px;top:-18px}
  .walk-live .station .cap{margin-top:10px}
  .walk-live .station h3{font-size:1.02rem}
  .walk-live .station p{font-size:12.5px;line-height:1.45}
  .walk-live .station .stamp{font-size:9.5px}
  .walk-live .trail{bottom:3vh}
  .walk-live .trail i{font-size:9px;padding:4px 9px}
}

/* THE PAYOFF. Dropped by accident when this page was rebuilt from scratch
   rather than edited. It is the canonical line and it pays off exactly once,
   at the very end, never in a hero. */
.payoff{padding:96px 0 120px;text-align:center;background:#2a2216;border-top:0;color:#f3ece0}
.payoff h2{color:#fff}
.payoff .one{color:#a89b83;position:relative;z-index:1;margin-bottom:18px}
.payoff img{width:150px;margin-bottom:22px;position:relative;z-index:1}
.payoff .one{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
             color:var(--muted);margin-bottom:14px}
.payoff h2{font-size:clamp(1.9rem,4.4vw,2.9rem);margin:0 0 12px;letter-spacing:var(--tightest)}
.payoff .punch{font-size:clamp(1.35rem,3.4vw,1.8rem);font-weight:800;letter-spacing:var(--tightest);margin-bottom:30px}
.payoff .punch em{font-style:normal;background:var(--yellow);padding:2px 9px;border-radius:6px}

/* THE SHELL. The texture was always right: a fine craquelure, which is what a
   cracking shell looks like. What broke it was inverting it onto a near-black
   stage, where the hairlines read as dry earth instead of eggshell. Kept light,
   over the paper, it does what it was always meant to do, and it gives the
   sections a surface instead of a flat fill. */
.hero, .payoff{position:relative;isolation:isolate}
.hero::before, .payoff::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('/walk-assets/shell.webp') center/1500px repeat;
  mix-blend-mode:multiply;opacity:.11}
/* On the dark ground the same texture is inverted: the cracks read as light. */
.payoff::before{mix-blend-mode:screen;opacity:.10;filter:invert(1)}
/* The fringe is fixed in the ASSET (chick-shades-matte.png), so he needs
   nothing behind him. Two attempts at adding something (a glow, then a contact
   shadow) both put a floating artifact on the page while the actual defect sat
   untouched in the file. Fix the asset, add nothing. */
.payoff .punch{color:#fff}
.payoff .punch em{color:var(--ink)}
.payoff .btn{background:var(--yellow);color:var(--ink)}
.hero > *, .payoff > *{position:relative;z-index:1}

/* A pinned section is a corridor: if you do not want it you still have to walk
   it. This turns the corridor into a choice, the same way "or say it in your
   own words" sits beside the cards. */
.skip{display:none}
.walk-live .skip{display:block;position:absolute;right:2.4vw;top:2.6vh;z-index:6;
  background:#fff;border:1px solid var(--border);border-radius:99px;padding:9px 16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:700;text-decoration:none;transition:.15s}
.walk-live .skip:hover{border-color:var(--gold);color:var(--ink)}
.walk-live .skip:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-height:1150px){.walk-live .skip{top:1.6vh;padding:7px 13px;font-size:9.5px}}

/* ── PROOF / CASE STUDY ────────────────────────────────────────────────── */
.proof{padding:74px 0 20px}
.proof h2{font-size:clamp(1.8rem,4vw,2.7rem);line-height:1.08;margin:0 0 14px;max-width:20ch}
.proof h2 em{font-style:normal;color:var(--gold)}
.proof .lede{margin-bottom:26px;max-width:62ch}
.quote{margin:0;padding:26px 30px;background:#fff;border:1px solid var(--border);
       border-left:4px solid var(--yellow);border-radius:16px;max-width:62ch}
.quote p{margin:0;font-size:1.35rem;font-weight:700;letter-spacing:var(--tightest);line-height:1.35}
.quote .who{margin-top:12px;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:0}
.pending{display:inline-block;margin-left:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
         text-transform:uppercase;color:#8a6d1f;background:#f7efd8;border-radius:99px;padding:3px 9px}

/* ══ RICHER PAGE FURNITURE ═══════════════════════════════════════════════
   The pages were scaffolding: generic cards on a flat fill, while a whole
   mascot set, the shell, and real product screens sat unused. */

/* A page hero that carries a mascot and the shell, like the home page does. */
.phero{position:relative;isolation:isolate;padding:60px 0 64px;overflow:hidden}
.phero::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('/walk-assets/shell.webp') center/1500px repeat;mix-blend-mode:multiply;opacity:.10}
.phero > *{position:relative;z-index:1}
.phero .row{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.phero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.05;margin:0 0 16px;max-width:20ch}
.phero h1 em{font-style:normal;color:var(--gold)}
.phero .lede{font-size:1.14rem;max-width:46ch}
.phero .art{text-align:center}
.phero .art img{max-width:100%;filter:drop-shadow(0 18px 30px rgba(40,32,4,.16))}
.phero .art .mascot{width:180px}
@media(max-width:900px){.phero .row{grid-template-columns:1fr;gap:28px}.phero .art .mascot{width:130px}}

/* Two-column story rows (text beside a screen). They were inline styles that
   never collapsed, so phones got a ribbon of text beside a lost image. */
.split{display:grid;gap:44px;align-items:center}
.split.s-11{grid-template-columns:1fr 1fr}
.split.s-tw{grid-template-columns:1.1fr .9fr}
.split.s-wt{grid-template-columns:.9fr 1.1fr}
.split.s-mth{grid-template-columns:1.05fr .95fr}
@media(max-width:820px){
  .split{grid-template-columns:1fr !important;gap:26px}
  .split img{margin:0 auto}
}

/* A dark band, so long pages have a beat instead of one endless tone. */
.band{background:#2a2216;color:#f3ece0;padding:66px 0;position:relative;isolation:isolate;overflow:hidden}
.band::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('/walk-assets/shell.webp') center/1500px repeat;
  mix-blend-mode:screen;opacity:.10;filter:invert(1)}
.band > *{position:relative;z-index:1}
.band h2{color:#fff;font-size:clamp(1.7rem,3.6vw,2.5rem);margin:0 0 12px;max-width:22ch}
.band h2 em{font-style:normal;color:var(--yellow)}
.band .lede{color:#cfc4b0;max-width:58ch}
.band .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#f3ece0}
.band .card h3{color:#fff}
.band .card p{color:#c6bba6}
.band .card .k{color:var(--yellow)}
.band .pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#cfc4b0}

/* Cards that carry a mascot or a real screen. */
.card .ico{width:52px;display:block;margin-bottom:14px}
.shotcard{background:#fff;border:1px solid var(--border);border-radius:20px;overflow:hidden;
  display:block;color:inherit;text-decoration:none;transition:transform .18s,box-shadow .18s}
a.shotcard:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(29,24,16,.12)}
.shotcard .im{background:var(--egg);border-bottom:1px solid var(--border);aspect-ratio:1/1;overflow:hidden}
.shotcard .im img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.shotcard .bd{padding:20px 22px 24px}
.shotcard h3{margin:0 0 6px;font-size:1.15rem}
.shotcard p{margin:0;color:var(--muted);font-size:14.5px}
.shotcard .k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
             text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:8px}

/* The plan tiers ARE the hatch: egg, chick, hen, nest. */
.plan .tiericon{width:58px;display:block;margin-bottom:10px}

/* Very short windows: a laptop with a dock and two toolbars can leave under
   660px of viewport, which was falling back to the stacked layout. Shrink the
   furniture harder so the SCREENS keep their size, since the screens are the
   argument. */
@media (max-height:700px){
  .walk-live .stage{padding-top:1vh}
  .walk-live .clock b{font-size:1.35rem}
  .walk-live .clock span{display:none}
  .walk-live .clock{margin-bottom:.2vh}
  .walk-live .walker{width:62px}
  .walk-live .coop-mark{width:74px}
  .walk-live .coop-mark span{font-size:8.5px}
  .walk-live .origin{width:26px}
  .walk-live .station .cap{margin-top:8px}
  .walk-live .station h3{font-size:.95rem}
  .walk-live .station p{font-size:11.5px;line-height:1.4}
  .walk-live .station .stamp{font-size:9px}
  .walk-live .trail{bottom:2vh}
  .walk-live .trail i{font-size:8.5px;padding:3px 8px}
  .walk-live .skip{top:1vh;padding:6px 11px;font-size:9px}
}
.why-stacked{margin:16px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--gold);background:#f7eccc;border:1px solid #e8d9a8;border-radius:10px;
  padding:10px 14px;display:inline-block}

/* Examples: each app shown twice from the SAME share link — desktop capture
   in a browser window, mobile capture in a phone — so the responsiveness is
   visible, not claimed. Both are real headless captures (tools/shoot-examples.mjs). */
.ex .shotcard .im{aspect-ratio:1/1;position:relative;padding:0;overflow:hidden}
.ex .shotcard h3 .nm{color:var(--gold)}
.ex .devices{position:absolute;inset:0}
.ex .dev-desktop{position:absolute;left:4.5%;top:7%;width:82%;border-radius:10px;overflow:hidden;
  background:#fff;border:1px solid var(--border);box-shadow:0 14px 34px rgba(29,24,16,.14)}
.ex .dev-desktop .bar{display:flex;align-items:center;gap:5px;height:24px;padding:0 10px;
  background:#f1ece0;border-bottom:1px solid var(--border)}
.ex .dev-desktop .bar i{width:7px;height:7px;border-radius:50%;background:#d8d0bd;display:block}
.ex .dev-desktop .bar span{flex:1;margin-left:6px;background:#fff;border-radius:99px;height:13px;
  font-family:var(--mono);font-size:8px;line-height:13px;color:#a89e88;padding:0 8px;overflow:hidden;
  white-space:nowrap;text-align:left}
.ex .dev-desktop img{width:100%;height:auto;display:block;aspect-ratio:1280/700;object-fit:cover;object-position:top center}
.ex .dev-phone{position:absolute;right:4.5%;bottom:6%;width:29%;border-radius:14%/6.6%;
  background:#1d1810;padding:3.2% 1.6%;box-shadow:0 18px 40px rgba(29,24,16,.28)}
.ex .dev-phone::before{content:'';position:absolute;top:1.7%;left:50%;transform:translateX(-50%);
  width:32%;height:1.6%;border-radius:99px;background:#3a3325}
.ex .dev-phone img{width:100%;height:auto;display:block;aspect-ratio:390/760;object-fit:cover;object-position:top center;
  border-radius:9%/4.4%}

/* Questions, straight answers: the FAQ that fell out of the migration,
   restored for the humans and the answer engines both. JSON-LD on the page
   mirrors it verbatim. */
.faq{display:grid;gap:10px;max-width:760px}
.faq details{background:#fff;border:1px solid var(--border);border-radius:14px;padding:0}
.faq summary{cursor:pointer;font-weight:700;padding:16px 20px;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:20px;top:50%;transform:translateY(-50%);
  color:var(--gold);font-weight:800;font-size:18px}
.faq details[open] summary::after{content:'\2013'}
.faq details p{margin:0;padding:0 20px 18px;color:var(--muted);font-size:15.5px;max-width:64ch}

/* ── FOUNDING POOLS ────────────────────────────────────────────────────── */
.founding{background:#2a2216;color:#f3ece0;padding:58px 0;position:relative;isolation:isolate;overflow:hidden}
.founding::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('/walk-assets/shell.webp') center/1500px repeat;mix-blend-mode:screen;opacity:.09;filter:invert(1)}
.founding > *{position:relative;z-index:1}
/* A white card inside the dark band must not inherit the band's cream text.
   Caught 2026-09-12 by measuring: .price had no colour of its own, so every
   headline price rendered #f3ece0 on white and was invisible. */
.founding .card{color:var(--ink)}
.founding .head{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-bottom:26px}
.founding .head img{width:66px;flex:none}
.founding h2{color:#fff;font-size:clamp(1.6rem,3.4vw,2.3rem);margin:0;max-width:24ch}
.founding h2 em{font-style:normal;color:var(--yellow)}
.founding .sub{color:#cfc4b0;max-width:60ch;margin:0}
.plan .price s{color:var(--muted);font-weight:700;margin-right:6px;text-decoration-thickness:2px}
.plan .price .per{font-size:.9rem;font-weight:700;color:var(--muted);margin-left:7px;letter-spacing:0}
.plan .fh{font-size:12.5px;font-weight:800;letter-spacing:.04em;color:#8a6d00;margin:0 0 6px}
a.pool{display:block;text-decoration:none;transition:transform .15s,border-color .15s}
a.pool:hover{transform:translateY(-2px);border-color:var(--yellow)}
.pool .poolgo{display:inline-block;margin-top:12px;font-size:13px;font-weight:800;color:var(--yellow)}
.pool.gone{opacity:.55}.pool.gone .poolgo{color:#c6bba6}
.pools{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pool{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:22px}
.pool .lab{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
           text-transform:uppercase;color:var(--yellow);font-weight:700;margin-bottom:10px}
.pool .amt{font-size:1.9rem;font-weight:800;letter-spacing:var(--tightest);color:#fff;line-height:1}
.pool .term{font-size:13.5px;color:#c6bba6;margin:6px 0 14px}
.pool .seats{display:flex;align-items:center;gap:8px;font-size:13px;color:#f3ece0;font-weight:700}
.pool .dots{display:flex;gap:3px;flex-wrap:wrap;max-width:130px}
.pool .dots i{width:6px;height:6px;border-radius:50%;background:var(--yellow);opacity:.85}
.founding .foot-note{margin:24px 0 0;font-size:14px;color:#cfc4b0}
@media(max-width:900px){.pools{grid-template-columns:1fr}}

/* the home banner */
.fbanner{background:var(--yellow);color:var(--ink);padding:20px 0}
.fbanner .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between}
.fbanner .l{display:flex;align-items:center;gap:14px}
.fbanner img{width:42px;flex:none}
.fbanner b{display:block;font-size:1.06rem;letter-spacing:var(--tightest)}
.fbanner span{font-size:14px;color:#5c4a12}
.fbanner a{background:var(--ink);color:var(--yellow);border-radius:99px;padding:12px 22px;
           font-weight:800;font-size:14.5px;text-decoration:none;white-space:nowrap}
.coop-offer{margin:24px 0 0;font-size:14.5px;color:var(--muted);max-width:72ch}
.coop-offer b{color:var(--ink)}
.coop-offer a{color:var(--gold);font-weight:700;white-space:nowrap}
.caps{margin:10px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
      text-transform:uppercase;color:var(--gold);font-weight:700}
.shotcard.todo{border-style:dashed;background:transparent}
.shotcard .im.empty{display:flex;align-items:center;justify-content:center;background:var(--egg);
      border-bottom-style:dashed}
.shotcard .im.empty span{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
      text-transform:uppercase;color:var(--muted)}

/* Subprocessor disclosure. It belongs on the page (a DPA has to list them, and
   a client security review asks), but not as a peer to the promises above: it
   is a compliance artifact, not an argument. Closed by default, so you find it
   only if you came looking. */
.cta-band .subs{flex-basis:100%;margin-top:22px;border-top:1px solid var(--border);padding-top:16px}
.cta-band .subs summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--muted);
  letter-spacing:.02em;list-style:none;display:inline-flex;align-items:center;gap:7px}
.cta-band .subs summary::-webkit-details-marker{display:none}
.cta-band .subs summary::before{content:'+';font-size:15px;line-height:1;opacity:.6}
.cta-band .subs[open] summary::before{content:'\2212'}
.cta-band .subs summary:hover{color:var(--ink)}
.cta-band .subs p{margin:10px 0 0;font-size:13px;line-height:1.65;color:var(--muted);max-width:62ch}

/* The discovery brief is a tall page (2760x5100). Shown full height it made
   /examples twice as long; cropped it hid the honest half (what still needs
   another tool). A fixed-height frame that scrolls shows all of it in the space
   of one screen. */
.briefframe{max-width:560px;margin-left:auto;margin-right:auto;text-align:center}
.briefscroll{height:520px;overflow-y:auto;-webkit-overflow-scrolling:touch;border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);background:#fff;overscroll-behavior:contain}
.briefscroll img{display:block;width:100%;height:auto}
.briefscroll:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.briefhint{margin:12px 0 0;font-size:13px;color:var(--muted)}
@media(max-width:560px){.briefscroll{height:440px}}

.foot .legal,.legal{margin:18px 0 0;font-size:.86rem;color:var(--muted)}
.legal a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;margin:0}

.dpa{max-width:760px}
.dpa h2{font-size:1.25rem;margin:34px 0 8px}
.dpa p,.dpa li{color:var(--muted);font-size:1.02rem;line-height:1.6}
.dpa ul{padding-left:20px}
.dpa li{margin:0 0 8px}
.dpa strong{color:var(--ink)}
.dpa a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ── THE NINE ─────────────────────────────────────────────────────────
   One capability at a time. The tab labels are the promises themselves,
   so a click is a choice about what you want to see rather than a filter
   whose result you have to interpret. */
.ntabs{display:flex;gap:8px;margin:22px 0 26px;overflow-x:auto;padding-bottom:6px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ntabs::-webkit-scrollbar{display:none}
.ntab{flex:0 0 auto;border:1px solid rgba(0,0,0,.16);background:transparent;border-radius:999px;
  padding:9px 16px;font:inherit;font-size:15px;color:var(--ink,#3A3A3A);cursor:pointer;
  white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.ntab:hover{border-color:rgba(0,0,0,.4)}
.ntab.on{background:#000;color:#fff;border-color:#000}
.ntab:focus-visible{outline:2px solid var(--gold,#FFCC00);outline-offset:2px}
/* The attribute must win. `display:grid` beats [hidden]'s default display:none,
   so without this every panel renders and the section is nine times too long. */
.npanel[hidden]{display:none!important}
.npanel{display:block;max-width:1000px;margin:0 auto;border:1px solid rgba(0,0,0,.1);
  border-radius:20px;padding:30px 30px 24px;background:rgba(255,255,255,.55)}
.npanel > .nquote{font-size:clamp(20px,2.4vw,27px);line-height:1.28;font-weight:700;
  margin:0 0 26px;letter-spacing:-.01em;text-wrap:balance}
.ntwo{display:grid;grid-template-columns:minmax(0,1fr) 196px;gap:14px;align-items:start;margin-bottom:22px}
.nshot{margin:0;border-radius:12px;overflow:hidden;background:#EFEAE0}
/* Both captures are scrolled so the control being claimed is centred, so the
   crop centres too. Capping the height is what keeps one beat to one screen. */
.nshot img{display:block;width:100%;height:340px;object-fit:cover;object-position:center}
/* The laptop shot keeps the app's own header, so it reads as the whole app.
   The phone shot centres, because that is where the control being claimed is. */
.nshot-desk img{object-position:top}
.nshot-phone img{height:340px;object-position:center}
.nshot figcaption{font:600 11px/1 inherit;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(58,58,58,.62);padding:11px 13px}
.ncaps{display:grid;grid-template-columns:1fr 1fr;gap:12px;list-style:none;padding:0;margin:0 0 20px}
.nc{border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:15px 16px;background:#fff}
.nc.on{border-color:var(--gold,#FFCC00);box-shadow:inset 0 0 0 1px var(--gold,#FFCC00)}
.nc b{display:block;font:700 12px/1.3 inherit;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:7px;color:rgba(58,58,58,.55)}
.nc.on b{color:#8A6A00}
.nc span{display:block;font-size:15px;line-height:1.5;color:rgba(58,58,58,.9)}
.nfootline{display:flex;align-items:center;gap:14px;margin:0}
.nfootline .nopen{font-weight:700;font-size:17px;text-decoration:none;
  border-bottom:2px solid var(--gold,#FFCC00);padding-bottom:2px}
.nwho{font:600 11px/1 inherit;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid rgba(0,0,0,.18);border-radius:999px;padding:5px 10px;color:rgba(58,58,58,.75)}
/* The three client-work apps are genuinely blue, because they belong to a
   white-label consultancy and an app wears its owner's brand, not ours. The
   tag matches so the colour reads as the point rather than as a mistake. */
.nwho[data-who="consultant"]{color:#1F6FEB;border-color:rgba(31,111,235,.42);
  background:rgba(31,111,235,.06)}
.nnum{margin-left:auto;font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;color:rgba(58,58,58,.5)}
.nnum i{font-style:normal;opacity:.6}
@media (max-width:860px){
  .npanel{padding:18px 16px 16px;border-radius:16px}
  .ntwo{grid-template-columns:1fr;gap:10px}
  /* Narrow: a cover-crop of a 1240-wide laptop shot cuts the app's own name off.
     Show the whole frame scaled down instead, and let the phone shot carry detail. */
  .nshot-desk img{height:auto;object-fit:contain}
  .nshot-phone{max-width:100%;justify-self:center;width:210px}
  .nshot-phone img{height:300px;object-position:center}
  .ncaps{grid-template-columns:1fr}
  .nfootline{flex-wrap:wrap;gap:10px}
}


/* The step buttons lost their styling when the panel was rebuilt as a card and
   fell back to the browser's default chrome, which looked like a bug. */
.nfoot{display:flex;gap:10px;justify-content:flex-end;align-items:center;
  max-width:1000px;margin:18px auto 0}
.nstep{border:1px solid rgba(0,0,0,.16);background:transparent;border-radius:999px;
  padding:10px 20px;font:inherit;font-size:15px;font-weight:600;color:var(--ink,#3A3A3A);
  cursor:pointer;transition:border-color .15s,background .15s}
.nstep:hover{border-color:#000}
.nstep#nnext{background:#000;color:#fff;border-color:#000}
.nstep#nnext:hover{opacity:.85}
.nstep:focus-visible{outline:2px solid var(--gold,#FFCC00);outline-offset:2px}
@media (max-width:860px){.nfoot{justify-content:space-between}}