/* =====================================================================
   Homepage. Extends concept.css (tokens, buttons, steps, featured work).
   ===================================================================== */

/* ---------- Hero: the tagline, then the mark's line across the full width ----------
   The ground line draws in from the left edge, passes an idea, a prototype and the
   App Store, then turns up into the sprout (the logo, drawn large) at version two. */
.home-hero {
    --grow-h: clamp(240px, 26vw, 460px);     /* the sprout's box */
    --ground: calc(var(--grow-h) * 0.14);     /* where its soil line sits, from the bottom */
    --line-u: 0.8;                            /* line weight, in the sprout's 100-unit drawing */
    --line: calc(var(--grow-h) * var(--line-u) / 100);
    position: relative; overflow: hidden;
    padding-top: clamp(130px, 17vh, 190px);
    padding-bottom: calc(var(--ground) + clamp(60px, 7.5vh, 92px));
}
.hh-eyebrow { margin: 0 0 26px; }
.hh-title { font-size: clamp(56px, 8.2vw, 150px); line-height: 0.94; }
.hh-title em { color: var(--accent); font-style: italic; }
.hero-headline .word.w4 { animation-delay: 520ms; }
.hh-copy {
    display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
    margin-top: clamp(28px, 4.5vh, 48px);
    max-width: min(44rem, calc(100% - var(--grow-h) - 6vw));
}
.hh-lede {
    margin: 0;
    font-size: clamp(18px, 1.55vw, 24px); line-height: 1.5; font-weight: 350;
    color: var(--ink-soft); text-wrap: balance;
}
.hh-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* The three things that set the studio apart, in a line under the buttons */
.hh-pillars { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.hh-pillars li {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink-soft);
}
.hh-pillars li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* Everything below the headline follows it in, a beat apart */
.hh-eyebrow, .hh-lede, .hh-actions, .hh-pillars {
    opacity: 0; transform: translateY(16px);
    animation: footIn 900ms cubic-bezier(.2,.7,.2,1) forwards;
}
.hh-eyebrow { animation-delay: 60ms; }
.hh-lede { animation-delay: 620ms; }
.hh-actions { animation-delay: 740ms; }
.hh-pillars { animation-delay: 880ms; }

.grow { position: absolute; left: 0; right: 8vw; bottom: clamp(36px, 4.5vh, 56px); height: var(--grow-h); pointer-events: none; }
.grow-ground {
    position: absolute; left: 0; right: calc(var(--grow-h) * 0.9 - 2px);
    bottom: calc(var(--ground) - var(--line) / 2); height: var(--line);
    border-radius: 0 99px 99px 0; background: var(--mark);
    transform-origin: left center;
    animation: growGround 1500ms cubic-bezier(.55,.05,.35,1) 700ms backwards;
}
@keyframes growGround { from { transform: scaleX(0); } }
.grow-sprout { position: absolute; right: 0; bottom: 0; width: var(--grow-h); height: var(--grow-h); overflow: visible; }
.grow-sprout path {
    fill: none; stroke: var(--mark); stroke-width: var(--line-u);
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: growDraw 1600ms cubic-bezier(.45,.1,.25,1) 2150ms forwards;
}
@keyframes growDraw { to { stroke-dashoffset: 0; } }
.grow-stages { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.grow-stages li {
    position: absolute; left: var(--at); bottom: calc(var(--ground) - 17px);
    display: inline-flex; align-items: center; gap: 8px;
    height: 34px; padding: 0 15px 0 11px; border-radius: 999px;
    border: 1px solid var(--rule); background: var(--bg);
    font-size: 13px; color: var(--ink); white-space: nowrap;
    animation: stageIn 700ms cubic-bezier(.2,.8,.25,1.2) backwards;
    animation-delay: calc(900ms + var(--i) * 420ms);
}
.grow-stages li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mark); }
/* The sprout's two leaves carry the last two stages: the small leaf is launch,
   the big one is version two. Each appears as its leaf finishes drawing. */
.grow-stages .grow-stage--leaf { left: auto; }
.grow-stages .grow-stage--small { right: calc(var(--grow-h) * 0.7); bottom: calc(var(--grow-h) * 0.66); animation-delay: 3000ms; }
.grow-stages .grow-stage--big { right: calc(var(--grow-h) * 0.02); bottom: calc(var(--grow-h) * 0.9); animation-delay: 3500ms; }
.grow-stages .grow-stage--leaf::before { background: transparent; border: 1.5px solid var(--mark); }
@keyframes stageIn { from { opacity: 0; transform: translateY(8px) scale(0.92); } }

@media (max-width: 1024px) {
    .home-hero { --grow-h: clamp(180px, 30vw, 260px); --line-u: 1.1; padding-bottom: calc(var(--grow-h) + 48px); }
    .hh-copy { max-width: 40rem; }
    .grow { bottom: 28px; right: 24px; }
}
@media (max-width: 720px) {
    .home-hero { --grow-h: 150px; --line-u: 1.6; padding-top: 112px; }
    .hh-title { font-size: clamp(46px, 13.4vw, 84px); }
    .hh-pillars { gap: 8px 18px; }
    .hh-pillars li { font-size: 13px; }
    .grow-stages { display: none; }
}

/* ---------- What growth needs: the five conditions, on the timeline ---------- */
.needs { padding-top: clamp(56px, 10vh, 120px); padding-bottom: clamp(56px, 10vh, 120px); }
/* The strip: four stages on one line. The line draws across as the strip arrives,
   and each stage's graphic plays as the line reaches it. Final frames are the
   default; animations only describe arrival, so Reduce Motion shows them finished. */
.gs {
    --gs-step: 650ms;
    list-style: none; margin: 0; padding: 0; position: relative;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px);
}
.gs::before {   /* the brand line, through the middle of every graphic */
    content: ""; position: absolute; left: 0; right: 0; top: 92px; height: 2px; border-radius: 2px;
    background: var(--mark); opacity: .55; transform-origin: left center;
    animation: gsLine calc(var(--gs-step) * 3) cubic-bezier(.55,.05,.35,1) 200ms backwards;
}
@keyframes gsLine { from { transform: scaleX(0); } }
.js .gs:not(.in), .js .gs:not(.in) *, .js .gs:not(.in)::before, .js .gs:not(.in) *::before, .js .gs:not(.in) *::after { animation-play-state: paused !important; }
.gs-stage { --at: calc(200ms + var(--i) * var(--gs-step)); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gs-art {
    position: relative; height: 184px; margin-bottom: 14px; overflow: hidden;
    border: 1px solid var(--rule); border-radius: 22px;
    background: radial-gradient(90% 80% at 50% 110%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--bg-soft);
    animation: gsPop 600ms cubic-bezier(.2,.8,.25,1.15) var(--at) backwards;
}
@keyframes gsPop { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.gs-when { margin: 0; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.gs-title { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
/* The offer is the title and its price sits in the same header; the whole header is the link
   (wraps under the name when a narrow card has no room beside it). */
.gs-offer { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 16px; row-gap: 4px; color: inherit; text-decoration: none; border-radius: 6px; }
.gs-name { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 7px; transition: text-decoration-color 220ms ease, color 220ms ease; }
.gs-offer:hover .gs-name, .gs-offer:focus-visible .gs-name { color: var(--accent); text-decoration-color: currentColor; }
.gs-offer:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.gs-price { font-weight: 400; font-size: clamp(21px, 1.9vw, 26px); letter-spacing: -.01em; color: var(--accent); white-space: nowrap; }
.gs-time { margin: -2px 0 2px; align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.gs-price small { font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--ink-soft); }
/* Just above the stacking breakpoint the three cards are narrow (about 265px each, an iPad
   held sideways): a little smaller keeps every name and price on one row, all three alike. */
@media (min-width: 1001px) and (max-width: 1060px) {
    .gs-title { font-size: 22px; }
    .gs-price { font-size: 19px; }
    .gs-offer { column-gap: 10px; }
}
.gs-what { margin: 0 0 4px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
/* Soil: an Evaluation (the verdict, the bets worth making, what to leave alone) and the prototype
   its first bet becomes, joined by a line from that bet to the screen. Sized by the tile's
   own width so it holds from a narrow card to a wide one. */
.gs-art--soil { container-type: inline-size; display: flex; align-items: center; justify-content: center; }
.gs-eval {
    flex: 0 1 auto; width: clamp(140px, 56cqw, 232px); display: flex; flex-direction: column; gap: 8px;
    padding: 12px 12px 11px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg);
    box-shadow: 0 14px 30px -20px rgba(0,0,0,.45);
    animation: gsIn 500ms cubic-bezier(.2,.7,.2,1) calc(var(--at) + 200ms) backwards;
}
.gs-eval-tag { font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.gs-verdict {
    align-self: flex-start; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
    background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent);
    animation: gsPill 520ms cubic-bezier(.2,.8,.25,1.3) calc(var(--at) + 450ms) backwards;
}
.gs-parts { list-style: none; margin: 0; padding: 0; }
.gs-parts li {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 28px;
    border-top: 1px solid var(--rule); font-size: 11.5px; font-weight: 500; line-height: 1.2; color: var(--ink); white-space: nowrap;
    animation: gsIn 500ms cubic-bezier(.2,.7,.2,1) backwards;
}
.gs-parts li:nth-child(1) { animation-delay: calc(var(--at) + 700ms); }
.gs-parts li:nth-child(2) { animation-delay: calc(var(--at) + 820ms); }
.gs-parts li:nth-child(3) { animation-delay: calc(var(--at) + 940ms); }
.gs-parts b {
    min-width: 18px; height: 18px; border-radius: 99px; display: inline-grid; place-items: center;
    font-size: 10.5px; font-weight: 600; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
}
.gs-parts .is-lead b { background: var(--accent); color: var(--bg); }
.gs-link {
    flex: 0 0 auto; width: clamp(14px, 6cqw, 34px); height: 2px; margin-top: -9px; border-radius: 2px;
    background: var(--accent); transform-origin: left center; opacity: .7;
    animation: gsLine 500ms cubic-bezier(.55,.05,.35,1) calc(var(--at) + 1000ms) backwards;
}
.gs-proto {
    flex: 0 0 auto; width: clamp(60px, 22cqw, 90px); aspect-ratio: 1 / 1.75;
    border: 2px solid color-mix(in srgb, var(--ink) 55%, transparent); border-radius: 16px;
    padding: 14px 8px 8px; display: flex; flex-direction: column; gap: 6px; background: var(--bg);
    animation: gsPill 520ms cubic-bezier(.2,.8,.25,1.3) calc(var(--at) + 1150ms) backwards;
}
.gs-proto .gs-blk--hero { height: 34px; }
.gs-proto .gs-blk--btn { position: relative; margin-top: auto; }
.gs-tap {   /* a tap on the button: the prototype being used */
    position: absolute; right: 18%; top: 50%; width: 22px; height: 22px; margin: -11px -11px 0 0; border-radius: 50%;
    border: 2px solid var(--accent); opacity: 0; animation: gsTap 900ms ease-out calc(var(--at) + 1700ms) backwards;
}
@keyframes gsTap { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes gsIn { from { opacity: 0; transform: translateX(10px); } }

/* The wireframe-to-finished fill, shared by Soil's prototype and Light's phones */
.gs-blk { height: 10px; border-radius: 4px; background: var(--accent); animation: gsWire 900ms ease backwards; animation-delay: calc(var(--at) + 300ms); }
.gs-blk:nth-child(3) { width: 70%; }
.gs-blk--hero { height: 44px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 45%, var(--bg)); }
.gs-blk--btn { height: 16px; margin-top: 6px; border-radius: 99px; background: var(--ink); }
@keyframes gsWire { 0%, 55% { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent); } }
@keyframes gsPill { from { opacity: 0; transform: translateY(8px) scale(.85); } }

/* Light: the same screen, three times, each more finished than the last (sketched, built, live),
   on a track that fills as it goes and ends on the App Store. */
.gs-art--light { container-type: inline-size; }
.gl { --ph: 100px; position: absolute; inset: 14px 10px 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gl::before, .gl::after {   /* the track, then the fill that follows the phones */
    content: ""; position: absolute; left: calc(100% / 6); right: calc(100% / 6); top: calc(var(--ph) + 13px); height: 2px; border-radius: 2px;
}
.gl::before { background: color-mix(in srgb, var(--ink) 18%, transparent); }
.gl::after { background: var(--accent); transform-origin: left center; animation: gsLine 900ms cubic-bezier(.55,.05,.35,1) calc(var(--at) + 450ms) backwards; }
.gl-col { --d: calc(var(--at) + 250ms + var(--k) * 420ms); display: flex; flex-direction: column; align-items: center; min-width: 0; }
.gl-phone {
    position: relative; flex: none; height: var(--ph); width: calc(var(--ph) * .54);
    border: 1.5px solid color-mix(in srgb, var(--ink) 55%, transparent); border-radius: 11px; background: var(--bg);
    padding: 5px 4px 4px; display: flex; flex-direction: column; gap: 3px;
    animation: gsPill 520ms cubic-bezier(.2,.8,.25,1.3) var(--d) backwards;
}
.gl-phone > * { flex: none; }
.gl-bar { width: 38%; height: 3px; margin: 0 auto 1px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 45%, transparent); }
.gl-hero { height: 27px; border-radius: 5px; }
.gl-row { display: flex; align-items: center; gap: 3px; height: 10px; }
.gl-row::after { content: ""; flex: 1; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 32%, transparent); }
.gl-row b { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.gl-cta { height: 10px; margin-top: auto; border-radius: 99px; background: var(--ink); }
.gl-tabs { display: flex; justify-content: space-around; align-items: center; height: 10px; margin-top: auto; border-top: 1px solid var(--rule); padding-top: 3px; }
.gl-tabs u { width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 35%, transparent); }
.gl-tabs u:first-child { background: var(--accent); }
/* sketched: dashed outlines and an X where the picture goes */
.gl-phone--sketch { border-style: dashed; border-color: color-mix(in srgb, var(--ink) 38%, transparent); background: transparent; }
.gl-phone--sketch .gl-bar { background: color-mix(in srgb, var(--ink) 28%, transparent); }
.gl-phone--sketch .gl-hero, .gl-phone--sketch .gl-row, .gl-phone--sketch .gl-cta {
    border: 1px dashed color-mix(in srgb, var(--ink) 38%, transparent); background: transparent; border-radius: 4px;
}
.gl-phone--sketch .gl-hero { background: linear-gradient(to top right, transparent calc(50% - .5px), color-mix(in srgb, var(--ink) 30%, transparent) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)); }
.gl-phone--sketch .gl-row::after { display: none; }
/* built: filled in, working on a phone */
.gl-phone--built .gl-hero { background: color-mix(in srgb, var(--accent) 45%, var(--bg)); animation: gsWire 900ms ease backwards; animation-delay: calc(var(--d) + 300ms); }
/* live: the finished screen, with a tab bar, a glow and a tick */
.gl-phone--live { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), 0 14px 26px -12px color-mix(in srgb, var(--accent) 75%, transparent); }
.gl-phone--live .gl-hero { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 35%, var(--bg))); animation: gsWire 900ms ease backwards; animation-delay: calc(var(--d) + 300ms); }
.gl-ok {
    position: absolute; right: -7px; top: -7px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--accent); color: var(--bg); font: 700 10px/16px var(--sans); font-style: normal; text-align: center;
    animation: gsPill 480ms cubic-bezier(.2,.8,.25,1.4) calc(var(--d) + 650ms) backwards;
}
.gl-dot {
    position: relative; z-index: 1; flex: none; width: 10px; height: 10px; margin-top: 9px; border-radius: 50%;
    background: var(--accent); border: 2px solid var(--accent);
    animation: gsDot 480ms cubic-bezier(.2,.8,.25,1.4) calc(var(--d) + 150ms) backwards;
}
@keyframes gsDot { from { background: var(--bg-soft); border-color: color-mix(in srgb, var(--ink) 30%, transparent); transform: scale(.6); } }
.gl-col:last-child .gl-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent); }
.gl-lbl {
    margin-top: 5px; text-align: center; font-size: 11px; font-weight: 500; line-height: 1.15; color: var(--ink);
    animation: gsFade 500ms ease calc(var(--d) + 250ms) backwards;
}
.gl-lbl small { display: block; margin-top: 1px; font-size: 9.5px; font-weight: 400; color: var(--ink-soft); }
.gl-lbl.is-live { color: var(--accent); }

/* Water: one plant a month, growing out of the brand's own line. The strip's line runs on through this
   tile as the ground (same height, so it joins up), roots go down before each stem comes up, the third
   month blooms, and rain falls on the way in. The labels say what each month brought. */
.gw { position: absolute; inset: 0 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 114px 1fr; }
.gw-soil {
    position: absolute; left: -10px; right: -10px; top: 94px; bottom: 0;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 11%, transparent), transparent 80%);
    animation: gsFade 900ms ease calc(var(--at) + 400ms) backwards;
}
.gw-ground {
    position: absolute; left: -10px; right: -10px; top: 92px; height: 2px; border-radius: 2px; background: var(--mark); opacity: .6;
    transform-origin: left center; animation: gsLine 1100ms cubic-bezier(.55,.05,.35,1) calc(var(--at) + 100ms) backwards;
}
.gw-col { --d: calc(var(--at) + 350ms + var(--k) * 520ms); display: contents; }
.gw-plant { grid-row: 1; align-self: start; justify-self: center; width: 62px; height: 106px; margin-top: 5px; overflow: visible; }
.gw-root { fill: none; stroke: var(--mark); stroke-opacity: .5; stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 1; animation: gsDraw 700ms cubic-bezier(.45,.1,.25,1) calc(var(--d) - 150ms) backwards; }
.gw-stem { fill: none; stroke: var(--mark); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; animation: gsDraw 700ms cubic-bezier(.45,.1,.25,1) var(--d) backwards; }
.gw-leaf { fill: color-mix(in srgb, var(--accent) 62%, transparent); transform-box: fill-box; transform-origin: 0 50%; animation: gwPop 420ms cubic-bezier(.2,.8,.25,1.4) calc(var(--d) + 250ms + var(--n) * 110ms) backwards; }
.gw-bloom { transform-box: fill-box; transform-origin: center; animation: gwBloom 700ms cubic-bezier(.2,.8,.25,1.4) calc(var(--d) + 1000ms) backwards; }
.gw-bloom ellipse { fill: var(--accent); stroke: var(--bg-soft); stroke-width: .7; }
.gw-bloom circle { fill: var(--bg); }
@keyframes gwPop { from { transform: scale(0); } }
@keyframes gwBloom { from { transform: scale(0) rotate(-50deg); } }
.gw-drop {
    position: absolute; left: var(--x); top: var(--y); width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 0 50% 50% 50%; transform: rotate(45deg);
    background: color-mix(in srgb, var(--accent) 75%, transparent);
    animation: gwDrop 800ms cubic-bezier(.5,0,.9,.6) calc(var(--at) + var(--t)) backwards;
}
@keyframes gwDrop { from { opacity: 0; transform: translateY(-26px) rotate(45deg); } }
.gw-lbl {
    grid-row: 2; justify-self: center; max-width: 100%; margin-top: 4px; text-align: center; text-wrap: balance;
    font-size: 11px; font-weight: 500; line-height: 1.25; color: var(--ink);
    animation: gsFade 500ms ease calc(var(--d) + 350ms) backwards;
}
.gw-lbl small { display: block; margin-bottom: 2px; font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.gw-lbl.is-new { color: var(--accent); }
@keyframes gsDraw { from { stroke-dashoffset: 1; } }   /* the stems and roots here, and Seeds' sprigs */
@keyframes gsFade { from { opacity: 0; } }

/* Seeds: coming soon, so the sprigs are still just coming up */
.gs-stage--soon .gs-art { border-style: dashed; background: var(--bg); }
.gs-seeds { position: absolute; inset: 24px 8px 8px; width: calc(100% - 16px); height: calc(100% - 32px); }
.gs-seeds path { fill: none; stroke: var(--mark); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gs-soil { stroke-dasharray: 3 6; opacity: .6; }
.gs-sprig path { stroke-dasharray: 1; animation: gsDraw 1100ms cubic-bezier(.45,.1,.25,1) backwards; animation-delay: calc(var(--at) + 300ms + var(--d) * 220ms); }

@media (max-width: 1000px) { .gs { grid-template-columns: 1fr; row-gap: 40px; max-width: 560px; } .gs::before { display: none; } }
@media (max-width: 560px) { .gs { grid-template-columns: 1fr; } .gs-art { height: 172px; } .gl { --ph: 94px; inset: 12px 10px 8px; } }
@media (prefers-reduced-motion: reduce) { .gs::before, .gs *, .gs *::before, .gs *::after { animation: none !important; } }

/* What each stage includes, before its prices */
.gs-inc { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; align-content: start; flex: 1; }
.gs-inc li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.45; color: var(--ink); }
.gs-inc li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-size: 13px; }
.gs-stage--soon .gs-inc li { color: var(--ink-soft); }

/* Tend sits under Cultivate's list as a quiet alternative */
.need-alt { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.need-alt a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.needs-note { margin: clamp(32px, 5vh, 48px) 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; font-size: 16px; color: var(--ink-soft); }

/* ---------- Selected work: the apps themselves, big, before any reading ----------
   Each row is the project's live UI (its hero.html) on a stage tinted with the app's
   accent, with a few lines beside it. Rows alternate sides on wide screens. */
.page-home .featured-work { padding-top: clamp(56px, 10vh, 120px); padding-bottom: clamp(48px, 9vh, 110px); gap: clamp(36px, 6vh, 64px); }
.show-list { display: grid; gap: clamp(20px, 3vw, 32px); }
.show {
    --pa: var(--project-accent, var(--accent));
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center;
    gap: clamp(28px, 5vw, 88px);
}
html[data-theme="light"] .show { --pa: var(--project-accent-light, var(--project-accent, var(--accent))); }
.show--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.show--flip .show-stage { order: 2; }
.show-stage {
    position: relative; display: grid; place-items: center; overflow: hidden;
    min-height: clamp(460px, 44vw, 640px); padding: clamp(28px, 4vw, 56px) clamp(16px, 3vw, 48px);
    border: 1px solid var(--rule); border-radius: 32px;
    background:
        radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--pa) 26%, transparent), transparent 70%),
        color-mix(in srgb, var(--pa) 7%, var(--bg-soft));
    color: inherit; text-decoration: none; cursor: pointer;
    transition: border-color 300ms ease, transform 500ms cubic-bezier(.2,.7,.2,1);
}
.show-stage:hover { border-color: color-mix(in srgb, var(--pa) 50%, transparent); transform: translateY(-3px); }
.show-stage > * { width: 100%; max-width: 560px; }
.show-stage-icon { width: 160px; border-radius: 22%; }
/* A demo video sits in a thin tinted frame and fills it; the frame doesn't lift on hover,
   since the video isn't a link (it has its own pause button). */
.show-stage--reel { display: block; min-height: 0; padding: clamp(8px, 1vw, 14px); cursor: default; border-radius: clamp(22px, 2.4vw, 32px); }
.show-stage--reel:hover { transform: none; }
.show-stage--reel > .reel { max-width: none; }
.show-copy .link-row { margin-top: 10px; }
.show-copy .link-row .link-arrow { margin-top: 0; }
/* The UIs animate as they scroll into view, not while they're still offscreen */
.js .show-stage.reveal:not(.in) *, .js .show-stage.reveal:not(.in) *::before, .js .show-stage.reveal:not(.in) *::after { animation-play-state: paused !important; }
.show-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.show-top { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.show-icon { width: 56px; height: 56px; border-radius: 22%; box-shadow: 0 0 0 1px var(--icon-ring), 0 10px 26px -14px color-mix(in srgb, var(--pa) 70%, black); }
.show-name { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 3.4vw, 52px); letter-spacing: -0.025em; line-height: 1.02; }
.show-name a { color: var(--ink); text-decoration: none; }
.show-tagline { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(19px, 1.6vw, 23px); color: var(--pa); }
.show-summary { margin: 4px 0 0; max-width: 44ch; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.show-meta { margin: 0; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.show-copy .link-arrow { margin-top: 8px; }
.page-home .featured-work > .featured-work-all { justify-self: start; }
@media (max-width: 900px) {
    .show, .show--flip { grid-template-columns: 1fr; gap: 24px; }
    .show--flip .show-stage { order: 0; }
    .show-stage { min-height: 0; padding: 36px 18px; border-radius: 26px; }
    .show-stage--reel { padding: 6px; border-radius: 22px; }
    .show + .show { margin-top: 28px; }
    .show-summary { max-width: none; }
}

/* ---------- Where we fit: a cost scale, the sprout in the middle ---------- */
.fit { padding-top: clamp(56px, 10vh, 120px); padding-bottom: clamp(40px, 7vh, 80px); }
/* The sprout's own foot is the ground, 14% up its 100-unit drawing. The scale runs on that
   centre line, at the sprout's stroke weight, the way the hero's ground line meets its
   sprout: the sprout grows out of the scale instead of being cut by it. */
.fit-scale { --mark-size: 64px; --mark-u: 6; --scale-line: calc(var(--mark-size) * var(--mark-u) / 100); --ground: calc(var(--mark-size) * .14); position: relative; height: var(--mark-size); margin: 0 calc(100% / 6); }
.fit-track { position: absolute; left: 0; right: 0; bottom: calc(var(--ground) - var(--scale-line) / 2); height: var(--scale-line); border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 18%, transparent), var(--mark), color-mix(in srgb, var(--ink) 18%, transparent)); }
.fit-dot { position: absolute; left: var(--x); bottom: calc(var(--ground) - 6px); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--bg); border: 2px solid color-mix(in srgb, var(--ink) 30%, transparent); }
.fit-mark { position: absolute; left: 50%; bottom: 0; width: var(--mark-size); height: var(--mark-size); margin-left: calc(var(--mark-size) / -2); overflow: visible; }
.fit-mark path { fill: none; stroke: var(--mark); stroke-width: var(--mark-u); stroke-linecap: round; stroke-linejoin: round; }
.fit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin-top: 18px; align-items: stretch; }
.fit-col { display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2.4vw, 32px); border: 1px solid var(--rule); border-radius: 24px; }
.fit-col--us {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), var(--bg-soft);
    box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--accent) 60%, transparent);
    transform: translateY(-10px);
}
.fit-kicker { margin: 0; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
.fit-col--us .fit-kicker { color: var(--accent); }
.fit-col h3 { margin: 0 0 4px; font-family: var(--serif); font-weight: 300; font-size: clamp(23px, 2vw, 28px); letter-spacing: -.02em; line-height: 1.12; color: var(--ink); text-wrap: balance; }
.fit-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; }
.fit-col li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.fit-col li::before { position: absolute; left: 0; top: 0; font-size: 14px; }
.fit-col li.is-yes::before { content: "✓"; color: var(--accent); }
.fit-col li.is-no { color: var(--ink-soft); }
.fit-col li.is-no::before { content: "–"; color: var(--ink-faint); }
.fit-price { margin: 8px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.fit-col--us .fit-price { color: var(--accent); }
@media (max-width: 900px) {
    .fit-scale { display: none; }
    .fit-grid { grid-template-columns: 1fr; }
    .fit-col--us { transform: none; }
}

/* ---------- App Store sets ---------- */
.store-home { padding-top: clamp(48px, 8vh, 100px); padding-bottom: clamp(40px, 7vh, 90px); display: grid; gap: clamp(28px, 4vh, 44px); }

/* ---------- Promises ---------- */
.promises { padding-top: clamp(48px, 9vh, 110px); padding-bottom: clamp(48px, 9vh, 110px); }
.promise-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px);
    padding-top: 40px; border-top: 1px solid var(--rule);
}
.promise { display: flex; flex-direction: column; gap: 10px; }
.promise-icon { width: 34px; height: 34px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.promise h3 { margin: 4px 0 0; font-family: var(--serif); font-weight: 300; font-size: clamp(21px, 1.9vw, 25px); letter-spacing: -0.015em; line-height: 1.15; color: var(--ink); }
.promise p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 1024px) { .promise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .promise-grid { grid-template-columns: 1fr; } }

/* ---------- Founder ---------- */
.founder { padding-top: clamp(40px, 7vh, 90px); padding-bottom: clamp(40px, 7vh, 90px); }
.founder-card {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
    gap: clamp(24px, 4vw, 64px);
    padding: clamp(28px, 4vw, 56px);
    border: 1px solid var(--rule); border-radius: 28px; background: var(--bg-soft);
}
.founder-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.founder-copy .eyebrow { margin: 0; }
.founder-hi { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 3.6vw, 50px); letter-spacing: -0.025em; line-height: 1.05; color: var(--ink); }
.founder-hi em { font-style: normal; color: var(--accent); }
.founder-card { max-width: 1180px; margin-inline: auto; }
.founder-copy p:not(.eyebrow) { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
/* What sets the studio apart, in the first person */
.founder-points { list-style: none; margin: 4px 0 2px; padding: 0; display: grid; gap: 12px; }
.founder-points li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.founder-points li::before { content: ""; position: absolute; left: 0; top: .66em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.founder-points b { font-weight: 500; color: var(--ink); }
@media (max-width: 720px) {
    .founder-card { grid-template-columns: 1fr; }
    .founder-card .founder-photo { width: 104px; }
}

/* ---------- Closing ---------- */
.page-home .home-closing { min-height: 0; padding-top: clamp(64px, 12vh, 140px); padding-bottom: clamp(72px, 14vh, 160px); gap: 32px; }
.page-home .home-closing .display { font-size: clamp(40px, 6vw, 84px); }

@media (prefers-reduced-motion: reduce) {
    .hh-eyebrow, .hh-lede, .hh-actions, .hh-pillars { animation: none; opacity: 1; transform: none; }
    .grow-ground, .grow-stages li, .grow-sprout path { animation: none; }
    .grow-sprout path { stroke-dashoffset: 0; }
}