/* ==========================================================================
   GROUNDWORK — hub
   Direction: ToddSunn. Warm, personal, a real person on the page rather than
   a corporate slogan. Sand ground, one rust accent, no decoration.
   Type: Bricolage Grotesque (display) / Inter Tight (body) — moved off
   Source Serif 4 (15 September 2026): a serif body was reading as dated
   rather than warm. Bricolage Grotesque stays on every heading, so the
   site keeps its own voice instead of sliding into generic sans-everywhere.
   ========================================================================== */

:root{
  --ink:#1D1A15;
  --ink-2:#2E2A22;
  --ink-3:#3B2A1E;
  --rust:#B4472A;
  --rust-dk:#8E3620;
  --rust-soft:#F2E2DB;
  /* A second, sparing accent — used only where one dark section wants to
     read as the premium option next to a plainer one (the featured pricing
     card). Not the everyday brand colour; rust still carries that. */
  --gold:#E7A61A;
  /* One-off accent for the launch event banner/popup only — livelier than
     the rust used everywhere else, on purpose, so it reads as a moment
     rather than the everyday brand colour. */
  --event:#DD4321;
  --event-dk:#B7331A;

  --sand:#EDE7DA;
  --sand-2:#E3DBCA;
  --paper:#FBF9F5;
  --card:#FFFFFF;
  --text:#26221B;
  --muted:#6E665A;
  --line:#DDD5C6;
  --onDark:#EDE7DA;
  --onDark-mute:#A79E8D;

  --display:"Space Grotesk", "Trebuchet MS", sans-serif;
  --body:"Inter", "Helvetica Neue", Arial, sans-serif;
  --ui:"IBM Plex Mono", "SF Mono", monospace;

  --wrap:1160px;
  --ease:cubic-bezier(.22,.68,.32,1);
  --nav-h:80px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:100px; }
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--body); font-size:18px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
p{ margin:0 0 1em; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--rust); outline-offset:3px; }

h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:700; line-height:1.08; letter-spacing:-.022em; text-wrap:balance; }
.h1{ font-size:clamp(36px,5.4vw,62px); }
.h2{ font-size:clamp(27px,3.6vw,42px); }
.h3{ font-size:20px; letter-spacing:-.012em; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 26px; }
.wrap--narrow{ max-width:780px; }
.section{ padding:88px 0; }
.section--sand{ background:var(--sand); }
/* A real diagonal ombre — ink through a warmer, rust-tinted brown-black —
   rather than one flat block or two near-identical dark tones. */
.section--ink{ background:linear-gradient(155deg, var(--ink) 0%, var(--ink-3) 68%, var(--ink-2) 100%); color:var(--onDark); }
.section--card{ background:var(--card); }

.skip{ position:absolute; left:-9999px; top:6px; z-index:200; background:var(--ink); color:#fff; padding:10px 18px; border-radius:6px; }
.skip:focus{ left:12px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* the eyebrow carries a short rust stroke: it marks a section start, nothing else */
.eyebrow{
  font-family:var(--ui); font-size:12.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--rust); margin:0 0 14px;
  display:flex; align-items:center; gap:11px;
}
.eyebrow::before{ content:""; width:26px; height:3px; background:var(--rust); flex:0 0 auto; }
.section--ink .eyebrow{ color:#E08A66; }
.section--ink .eyebrow::before{ background:#E08A66; }
.lede{ font-size:19px; color:var(--muted); max-width:56ch; }
.section--ink .lede{ color:var(--onDark-mute); }
.sechead{ margin:0 0 48px; max-width:640px; }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--rust); --fg:#fff; --bd:var(--rust);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border:2px solid var(--bd); border-radius:8px;
  background:var(--bg); color:var(--fg);
  /* subtle diagonal sheen over the solid fill, plus a lift shadow tinted to
     match — same idea everywhere a solid button appears, not a one-off, so
     it reads as a deliberate finish rather than a random effect */
  background-image:linear-gradient(155deg, rgba(255,255,255,.2), rgba(0,0,0,.14)),
    linear-gradient(0deg, transparent 92%, rgba(255,255,255,.16) 100%);
  box-shadow:0 16px 32px -12px rgba(142,54,32,.5), inset 0 1px 0 rgba(255,255,255,.16);
  font-family:var(--ui); font-size:15.5px; font-weight:600; letter-spacing:-.005em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .18s, border-color .18s, color .18s, transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover{ --bg:var(--rust-dk); --bd:var(--rust-dk); transform:translateY(-2px); box-shadow:0 20px 40px -14px rgba(142,54,32,.6), inset 0 1px 0 rgba(255,255,255,.16); }
.btn--lg{ padding:16px 30px; font-size:16.5px; }
.btn--full{ width:100%; }
.btn--line{ --bg:transparent; --fg:var(--ink); --bd:var(--line); background-image:none; box-shadow:none; }
.btn--line:hover{ --bg:transparent; --fg:var(--rust); --bd:var(--rust); box-shadow:none; }
.btn--onInk{ --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.34); background-image:none; box-shadow:none; }
.btn--onInk:hover{ --bg:rgba(255,255,255,.09); --bd:#fff; box-shadow:none; }
.btn--flat{ --bg:var(--ink); --fg:#fff; --bd:var(--ink); }
.btn--flat:hover{ --bg:var(--ink-2); --bd:var(--ink-2); }
.btn[aria-disabled="true"]{ --bg:transparent; --fg:var(--onDark-mute); --bd:rgba(255,255,255,.2); cursor:not-allowed; background-image:none; box-shadow:none; }
.btn[aria-disabled="true"]:hover{ transform:none; }

/* ---------- nav ---------- */
.nav{
  background:var(--sand); position:sticky; top:0; z-index:100;
  border-bottom:1px solid var(--line); transition:box-shadow .28s var(--ease);
}
.nav__in{ height:var(--nav-h); display:flex; align-items:center; gap:26px; transition:height .28s var(--ease); }

/* once the page has moved the header gives some of the screen back */
.nav.is-scrolled{ --nav-h:56px; box-shadow:0 8px 24px rgba(29,26,21,.10); }
.nav.is-scrolled .brand__mark{ width:28px; height:28px; }
.nav.is-scrolled .brand__word{ font-size:20px; }
.nav.is-scrolled .nav__cta .btn{ padding:10px 20px; font-size:14.5px; }
.brand__mark,.brand__word,.nav__cta .btn{ transition:width .28s var(--ease), height .28s var(--ease), font-size .28s var(--ease), padding .28s var(--ease), background .18s, border-color .18s, color .18s, transform .18s var(--ease); }
/* No background chip — just the mark, sitting on the nav the same way the
   wordmark next to it does. margin-top nudges it to sit optically centred
   against the wordmark's cap-height rather than its full line-height. */
.brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.brand__mark{ width:34px; height:34px; flex:0 0 auto; margin-top:2px; }
.brand__word{ font-family:var(--display); font-size:23px; font-weight:700; letter-spacing:-.035em; color:var(--ink); }

.nav__links{ display:flex; gap:26px; margin-left:auto; }
.nav__links a{
  font-family:var(--ui); font-size:15px; font-weight:500; color:var(--ink); text-decoration:none;
  padding:5px 0; border-bottom:2px solid transparent; transition:color .18s, border-color .18s;
}
.nav__links a:hover, .nav__links a.is-current{ color:var(--rust); border-bottom-color:var(--rust); }

.burger{ display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer; padding:10px; margin-left:auto; }
.burger span{ display:block; height:2.5px; background:var(--ink); border-radius:2px; transition:transform .25s var(--ease), opacity .2s; }
.burger span + span{ margin-top:5px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* The menu hangs off the bottom of the header, so it covers the page rather than
   shoving it down, and it is still reachable when you are halfway down. */
.mnav{
  position:absolute; left:0; right:0; top:100%; z-index:5;
  background:var(--sand); border-bottom:1px solid var(--line);
  box-shadow:0 20px 34px rgba(29,26,21,.16);
  max-height:calc(100vh - var(--nav-h) - 12px);
  max-height:calc(100dvh - var(--nav-h) - 12px);
  overflow-y:auto; overscroll-behavior:contain;
}
.mnav[hidden]{ display:none; }
.mnav__in{ padding-top:6px; padding-bottom:20px; }
.mnav a{ display:block; padding:14px 0; border-bottom:1px solid var(--line); text-decoration:none; font-family:var(--ui); font-weight:500; }
.mnav .btn{ margin-top:16px; border-bottom-width:2px; }

.navscrim{ position:fixed; inset:0; z-index:90; background:rgba(29,26,21,.42); opacity:0; transition:opacity .26s var(--ease); }
.navscrim.is-on{ opacity:1; }
.navscrim[hidden]{ display:none; }
body.menu-open .totop{ opacity:0; visibility:hidden; }

/* ---------- hero: single airy column, dark and cinematic ---------- */
/* Ink instead of sand — the one section on the page that gets to feel like
   a moment rather than a scan. A soft warm glow behind the text, not a
   brand-colour gradient, so it reads as depth rather than decoration. */
.hero{
  background:
    radial-gradient(ellipse 1100px 620px at 15% -10%, rgba(212,99,58,.32), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 100%, rgba(231,166,26,.1), transparent 65%),
    linear-gradient(155deg, var(--ink) 0%, var(--ink-3) 68%, var(--ink-2) 100%);
}
.hero__in{ max-width:700px; margin-inline:auto; padding-top:156px; padding-bottom:132px; text-align:center; }

.hero__h1{ color:#fff; margin:0 0 28px; line-height:1.14; }
.hero__h1 em{ font-style:normal; color:#E08A66; }
.hero__sub{ font-size:19px; color:var(--onDark-mute); margin:0 auto 26px; max-width:48ch; }
.hero__where{ font-family:var(--ui); font-size:17px; font-weight:600; color:#fff; margin:0 0 32px; }
.hero__btns{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center; }
.hero__note{ font-size:15.5px; color:var(--onDark-mute); margin:24px 0 0; }

/* ---------- pitch ---------- */
.pitch{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:start; }
.pitch h2{ margin:0 0 20px; }
.ticks{ margin-top:26px; display:grid; gap:12px; }
.ticks li{ position:relative; padding-left:32px; color:var(--muted); }
.ticks li::before{
  content:""; position:absolute; left:0; top:.6em; width:16px; height:9px;
  border-left:3px solid var(--rust); border-bottom:3px solid var(--rust); transform:rotate(-45deg);
}

/* ---------- demo sites ---------- */
/* Used to pair the text with an abstract browser mockup here; dropped as
   dead weight next to a picker that now lists all seven trades — the list
   carries the section on its own. */
.trades-grid{ display:grid; grid-template-columns:1fr; }
/* Two columns: the pitch holds the left, the chips sit opposite it. */
.trades-grid > div{ display:grid; grid-template-columns:.8fr 1.2fr; column-gap:56px; align-items:start; }
.trades-grid .sechead{ margin-bottom:0; }

/* ---------- trade links (light teaser row; the full picker lives on examples.php) ---------- */
/* Two even columns rather than a wrapping row, so the chip edges line up. The
   "see all" chip closes the set, which makes it even at five trades. Add or
   drop one and the odd chip out spans the row instead of sitting half-width. */
.trade-links{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.trade-links > :last-child:nth-child(odd){ grid-column:1 / -1; }
.pk{
  position:relative; display:flex; align-items:center; gap:14px; width:auto; text-align:left;
  padding:12px 18px; border:1px solid rgba(255,255,255,.14); border-radius:10px;
  background:rgba(255,255,255,.03); color:var(--onDark); cursor:pointer; text-decoration:none;
  transition:background .22s, border-color .22s;
}
.pk:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.24); }
.pk__name{ font-family:var(--ui); font-size:16px; font-weight:600; display:flex; align-items:center; gap:9px; }
.pk__ico{ flex:0 0 auto; color:var(--rust); }
.pk--soon .pk__ico{ color:var(--onDark-mute); }
.pk__live{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--ui);
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#8FD6A6; background:rgba(143,214,166,.14); border:1px solid rgba(143,214,166,.32);
  border-radius:100px; padding:2px 8px 2px 6px; flex:0 0 auto;
}
.pk__live::before{ content:""; width:5px; height:5px; border-radius:50%; background:#8FD6A6; }
/* Not-live trades sit in the same row, muted rather than hidden — brought
   back 15 September 2026 at Ben's ask, having been hidden entirely on
   14 September. Not a link: there's nowhere real for it to go yet. */
.pk--soon{ cursor:default; opacity:.6; }
.pk--soon:hover{ background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.14); }
.pk__soon{
  display:inline-flex; align-items:center; font-family:var(--ui);
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--onDark-mute); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16);
  border-radius:100px; padding:2px 8px; flex:0 0 auto;
}
/* Closes the set. It's an action rather than a demo, so it takes the accent
   instead of reading as a sixth trade. */
.pk--all{
  justify-content:space-between; gap:12px;
  border-color:rgba(224,138,102,.34); background:rgba(224,138,102,.07); color:#E08A66;
}
.pk--all:hover{ background:rgba(224,138,102,.14); border-color:rgba(224,138,102,.58); }
.pk--all .pk__name{ color:#E08A66; }
.pk--all svg{ flex:0 0 auto; }

/* .chrome and .shot below are the browser-mockup frame examples.php uses for
   each demo screenshot; .chips is its tag-pill list. Kept for that page. */
.chrome{ border:1px solid rgba(255,255,255,.14); border-radius:12px; overflow:hidden; background:var(--ink-2); }
.chrome__bar{ display:flex; align-items:center; gap:7px; padding:11px 15px; background:rgba(0,0,0,.28); border-bottom:1px solid rgba(255,255,255,.1); }
.chrome__dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18); flex:0 0 auto; }
.chrome__url{ margin-left:10px; font-family:var(--ui); font-size:12.5px; color:var(--onDark-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 16:9 rather than 16:10, because real browser screenshots come in wide. A
   narrower frame would crop the sides off and clip the hero card. */
.chrome__screen{ position:relative; aspect-ratio:16/9; background:#14120E; }
.chrome__screen img{ width:100%; height:100%; object-fit:cover; }
.shot{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:10px; color:var(--onDark-mute); }
.shot svg{ width:32px; height:32px; opacity:.4; }
.shot span{ font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.chips li{ font-family:var(--ui); font-size:13px; color:var(--onDark); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); padding:6px 13px; border-radius:100px; }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.step{ position:relative; padding-top:24px; border-top:2px solid var(--line); }
.step__n{ font-family:var(--ui); font-size:13px; font-weight:700; letter-spacing:.1em; color:var(--rust); }
.step__h{ font-size:19px; margin:10px 0 8px; }
.step__p{ color:var(--muted); font-size:16px; margin:0; }

/* ---------- included ---------- */
.feats{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 52px; }
.feat{ padding:24px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:26px 1fr; gap:16px; }
.feat__tick{ width:22px; height:22px; border-radius:50%; background:var(--rust-soft); color:var(--rust); display:grid; place-content:center; margin-top:3px; }
.feat__tick svg{ width:12px; height:12px; }
.feat__h{ font-size:18px; margin:0 0 5px; }
.feat__p{ font-size:16px; color:var(--muted); margin:0; }

/* ---------- working with me ---------- */
.journey{ display:grid; grid-template-columns:.86fr 1.14fr; gap:64px; align-items:start; }
.journey__note{
  margin:26px 0 0; padding-left:18px; border-left:3px solid var(--rust);
  font-family:var(--ui); font-size:17px; font-weight:600; color:var(--ink);
}
/* one line down the side, a notch at each moment: the same ground line the
   brand mark uses, turned on its end */
.moments{ position:relative; padding-left:34px; }
.moments::before{ content:""; position:absolute; left:5px; top:12px; bottom:12px; width:2px; background:var(--line); }
.moment{ position:relative; padding-bottom:26px; }
.moment:last-child{ padding-bottom:0; }
.moment::before{
  content:""; position:absolute; left:-34px; top:7px; width:12px; height:12px;
  border-radius:50%; background:var(--paper); border:3px solid var(--rust);
}
.moment__h{ font-size:18.5px; margin:0 0 6px; }
.moment__p{ margin:0; font-size:16.5px; color:var(--muted); max-width:52ch; }

/* ---------- homepage teasers: hover or focus for the line underneath ----------
   Each title is the whole story at a glance; the sentence under it is the same
   one the linked page shows in full, collapsed here so the section stays
   scannable. It's hidden by height, not display, so it still reads fine with
   CSS off and still reaches a screen reader either way. Touch has no hover, so
   below that it just stays open — nothing to peek at, nothing lost either.
   "What you get" rejoined this group 15 September 2026 — its pinned-scroll
   heading still locks in place while the list scrolls past it (below), but
   each item's line now collapses/reveals the same as How it works, instead
   of sitting open the whole time. */
#how .step,
#working .moment,
#included .pin-item{ outline:none; }
#how .step:focus-visible,
#working .moment:focus-visible,
#included .pin-item:focus-visible{ outline:2px solid var(--rust); outline-offset:4px; border-radius:4px; }
@media (hover:hover) and (pointer:fine){
  #how .step__p,
  #working .moment__p,
  #included .pin-item__p{
    max-height:0; opacity:0; overflow:hidden;
    transition:max-height .32s var(--ease), opacity .22s var(--ease), margin-top .32s var(--ease);
  }
  #how .step:hover .step__p,     #how .step:focus-within .step__p,
  #working .moment:hover .moment__p, #working .moment:focus-within .moment__p,
  #included .pin-item:hover .pin-item__p, #included .pin-item:focus-within .pin-item__p{
    max-height:160px; opacity:1; margin-top:8px;
  }
  #how .step:hover .step__h,     #how .step:focus-within .step__h,
  #working .moment:hover .moment__h, #working .moment:focus-within .moment__h,
  #included .pin-item:hover .pin-item__h, #included .pin-item:focus-within .pin-item__h{
    color:var(--rust);
  }
}

/* ---------- "What you get": pinned scroll ---------- */
/* The heading stays sticky in the left column while the list scrolls past
   it in the right — the one section on the page that uses motion-by-scroll
   rather than a reveal-on-scroll fade. */
.pin-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:start; }
.pin-head{ position:sticky; top:calc(var(--nav-h) + 48px); }
.pin-head .more{ margin-top:24px; }
.pin-list{ display:grid; }
.pin-item{
  padding:44px 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:52px 1fr; gap:20px; align-items:start;
}
.pin-item:last-child{ border-bottom:1px solid var(--line); }
.pin-item__n{ font-family:var(--display); font-size:15px; font-weight:700; color:var(--rust); }
/* Three children, two explicit columns — without pinning both the heading
   and the paragraph to column 2, grid auto-placement wraps the paragraph
   into column 1 (the 52px number rail) and it renders one word per line.
   Caught 15 September 2026. */
.pin-item__h{ font-size:23px; margin:0 0 10px; grid-column:2; }
.pin-item__p{ font-size:16.5px; color:var(--muted); max-width:52ch; margin:0; grid-column:2; }
@media (max-width:900px){
  .pin-grid{ grid-template-columns:1fr; gap:28px; }
  .pin-head{ position:static; }
}

/* ---------- pricing ---------- */
.plans{ display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:start; }
.plan{ border:1px solid rgba(255,255,255,.15); border-radius:14px; padding:36px 32px; background:rgba(255,255,255,.035); }
.plan--main{
  background:linear-gradient(165deg, rgba(212,99,58,.3), rgba(180,71,42,.06));
  border-color:rgba(224,138,102,.4);
  box-shadow:0 32px 64px -24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1);
}
.plan--main .plan__flag{ background:linear-gradient(155deg, #F0B93E, var(--gold)); color:#3B2A0A; }
.plan__side{ display:grid; gap:20px; }
.plan--soon{ padding:26px 26px; }
.plan__flag{ display:inline-block; font-family:var(--ui); font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:#fff; background:var(--rust); padding:5px 12px; border-radius:100px; margin-bottom:18px; }
.plan__flag--dim{ background:rgba(255,255,255,.1); color:var(--onDark-mute); }
.plan__name{ font-size:28px; color:#fff; margin:0 0 8px; }
.plan__for{ color:var(--onDark-mute); font-size:16px; margin:0 0 24px; max-width:42ch; }
.plan__price{ display:flex; align-items:baseline; gap:2px; color:#fff; font-family:var(--display); }
.plan__cur{ font-size:28px; font-weight:700; }
.plan__amt{ font-size:62px; font-weight:700; line-height:1; letter-spacing:-.04em; }
.plan__per{ font-family:var(--body); font-size:17px; color:var(--onDark-mute); margin-left:6px; }
.plan__setup{ margin:9px 0 24px; font-size:16px; color:#E08A66; }
.plan__list{ display:grid; gap:10px; margin:0 0 28px; }
.plan__list li{ position:relative; padding-left:28px; font-size:16px; color:var(--onDark); }
.plan__list li::before{ content:""; position:absolute; left:0; top:.6em; width:14px; height:8px; border-left:2.5px solid #E08A66; border-bottom:2.5px solid #E08A66; transform:rotate(-45deg); }
.plan__list--dim li{ color:var(--onDark-mute); }
.plan__list--dim li::before{ border-color:var(--onDark-mute); }
.plan--soon .plan__list{ margin-bottom:0; }
.plan__fine{ margin:14px 0 0; font-size:14px; color:var(--onDark-mute); text-align:center; }

/* ---------- coverage ---------- */
.tradegrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.tradegrid li{ background:var(--card); border:1px solid var(--line); border-radius:8px; padding:13px 16px; font-family:var(--ui); font-size:15px; transition:border-color .2s; }
.tradegrid li:hover{ border-color:var(--rust); }
.tradegrid__ask{ background:var(--ink) !important; border-color:var(--ink) !important; }
.tradegrid__ask a{ color:#E08A66; text-decoration:none; font-weight:600; }
/* Collapsed, the grid runs eleven trades plus the ask tile: twelve cells, which
   is a whole number of rows at four, three and two columns. The rest are still
   in the HTML, so they are still indexed and still searchable on the page. */
.tradegrid:not(.is-open) > li:nth-child(n+12):not(.tradegrid__ask){ display:none; }
.tradegrid__more{ display:flex; align-items:center; gap:20px; margin-top:18px; }
.tradegrid__more::after{ content:""; flex:1 1 auto; height:1px; background:var(--line); }
.tradegrid__more .btn{ flex:0 0 auto; padding:12px 22px; font-size:15px; }

/* ---------- faq ---------- */
.faq{ border-top:2px solid var(--ink); }
.qa{ border-bottom:1px solid var(--line); }
.qa__q{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 2px; cursor:pointer; list-style:none; font-family:var(--display); font-size:19px; font-weight:700; letter-spacing:-.015em; }
.qa__q::-webkit-details-marker{ display:none; }
.qa__q:hover{ color:var(--rust); }
.qa__ico{ position:relative; width:15px; height:15px; flex:0 0 auto; }
.qa__ico::before,.qa__ico::after{ content:""; position:absolute; left:50%; top:50%; background:var(--rust); border-radius:2px; transform:translate(-50%,-50%); transition:transform .25s var(--ease), opacity .25s; }
.qa__ico::before{ width:15px; height:2.5px; }
.qa__ico::after{ width:2.5px; height:15px; }
.qa[open] .qa__ico::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.qa__a{ padding:0 2px 24px; max-width:66ch; }
.qa__a p{ margin:0; color:var(--muted); }

/* ---------- contact ---------- */
.cta__in{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start; }
.cta__in > div{ text-align:center; }
.cta__in > div .eyebrow{ justify-content:center; }
.cta h2{ color:#fff; margin:0 0 16px; }
.cta__p{ color:var(--onDark-mute); margin:0 auto 20px; max-width:52ch; }
.cta__mail{ font-family:var(--ui); font-weight:600; color:#E08A66; text-decoration:none; }
.form{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:grid; gap:6px; }
.field--full{ grid-column:1 / -1; }
.field label{ font-family:var(--ui); font-size:13.5px; font-weight:600; color:var(--onDark); }
.field .opt{ font-weight:400; color:var(--onDark-mute); }
.field input,.field textarea{
  font:inherit; font-size:16px; color:#fff; padding:12px 14px; width:100%;
  background:rgba(0,0,0,.26); border:1.5px solid rgba(255,255,255,.16); border-radius:8px;
}
.field input::placeholder,.field textarea::placeholder{ color:#8A8172; }
.field input:focus,.field textarea:focus{ outline:none; border-color:#E08A66; }
.field textarea{ resize:vertical; min-height:86px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* ---------- footer ---------- */
.foot{ background:var(--ink); color:var(--onDark-mute); padding:56px 0 0; border-top:1px solid rgba(255,255,255,.1); }
.foot__in{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:34px; padding-bottom:44px; }
.foot .brand__word{ color:#fff; }
.foot__tag{ margin:15px 0 6px; color:var(--onDark); font-size:16px; }
.foot__loc{ margin:0; font-size:15px; }
.foot__col h4{ font-family:var(--ui); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin:0 0 13px; }
.foot__col{ display:grid; gap:9px; align-content:start; }
.foot__col{ min-width:0; }
.foot__col a{ font-family:var(--ui); font-size:15px; text-decoration:none; overflow-wrap:anywhere; }
.foot__col a:hover{ color:#E08A66; }
.foot__legal{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:18px 26px; border-top:1px solid rgba(255,255,255,.12); font-size:14px; }

/* ---------- reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(16px); }
[data-reveal].shown{ opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:calc(var(--d,0) * 75ms); }
[data-d="1"]{ --d:1; } [data-d="2"]{ --d:2; } [data-d="3"]{ --d:3; }

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .hero__in{ padding-top:88px; padding-bottom:84px; }
  .pitch{ grid-template-columns:1fr; gap:44px; }
  .journey{ grid-template-columns:1fr; gap:36px; }
  .plans{ grid-template-columns:1fr; }
  .cta__in{ grid-template-columns:1fr; gap:32px; }
  .trades-grid > div{ grid-template-columns:1fr; }
  .trades-grid .sechead{ margin-bottom:34px; }
  .steps{ grid-template-columns:repeat(2,1fr); gap:28px; }
  .tradegrid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:820px){
  .nav__links,.nav__cta{ display:none; }
  .burger{ display:block; }
  .section{ padding:66px 0; }
  .feats{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  body{ font-size:17px; }
  /* left/right only — a shorthand `padding:0 18px` here was zeroing the
     top/bottom padding of anything that combines .wrap with a component
     class of its own (namely .hero__in), because .wrap comes later in the
     file at equal specificity. Caught 15 September 2026: it's why the hero
     heading sat flush against the nav on real phone widths with no gap
     above it at all. */
  .wrap{ padding-left:18px; padding-right:18px; }
  .hero__btns .btn{ width:100%; }
  .steps{ grid-template-columns:1fr; }
  .trade-links{ grid-template-columns:1fr; }
  .tradegrid{ grid-template-columns:repeat(2,1fr); }
  .form{ grid-template-columns:1fr; }
  .plan{ padding:26px 22px; }
  .plan__amt{ font-size:50px; }
  .foot__in{ grid-template-columns:1fr 1fr; gap:28px; }
  .section{ padding:52px 0; }
  .sechead{ margin-bottom:34px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
}

:root{
  --cc-bg:#1D1A15; --cc-fg:#EDE7DA; --cc-mute:#A79E8D;
  --cc-accent:#B4472A; --cc-accent-ink:#FFFFFF;
  --cc-line:rgba(255,255,255,.16); --cc-radius:8px;
  --cc-ui:var(--ui); --cc-body:var(--body);
}

/* ==========================================================================
   Cookie consent, back to top, legal strip
   Shared across all the sites. Colours come from the --cc-* tokens above.
   ========================================================================== */

.cookiebar{
  position:fixed; left:0; right:0; bottom:0; z-index:400;
  background:var(--cc-bg); color:var(--cc-fg); border-top:1px solid var(--cc-line);
  padding:18px 0; box-shadow:0 -8px 30px rgba(0,0,0,.18);
  transform:translateY(100%); transition:transform .4s cubic-bezier(.22,.68,.32,1);
}
.cookiebar.is-shown{ transform:none; }
.cookiebar[hidden]{ display:none; }
.cookiebar__in{
  width:100%; max-width:1160px; margin:0 auto; padding:0 26px;
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
}
.cookiebar__txt{ flex:1 1 380px; margin:0; font-family:var(--cc-body); font-size:15.5px; line-height:1.55; }
.cookiebar__txt a{ color:var(--cc-fg); text-decoration:underline; text-underline-offset:3px; }
.cookiebar__txt a:hover{ color:var(--cc-accent); }
.cookiebar__btns{ display:flex; gap:10px; flex:0 0 auto; }
.cookiebar__btn{
  font-family:var(--cc-ui); font-size:14.5px; font-weight:600; letter-spacing:.01em;
  padding:12px 24px; min-height:44px; border-radius:var(--cc-radius); cursor:pointer;
  border:1.5px solid transparent; transition:background .18s, border-color .18s, color .18s;
}
.cookiebar__btn--yes{ background:var(--cc-accent); color:var(--cc-accent-ink); border-color:var(--cc-accent); }
.cookiebar__btn--yes:hover{ filter:brightness(1.1); }
.cookiebar__btn--no{ background:transparent; color:var(--cc-fg); border-color:var(--cc-line); }
.cookiebar__btn--no:hover{ border-color:var(--cc-fg); }
.cookiebar__btn:focus-visible{ outline:3px solid var(--cc-accent); outline-offset:3px; }

/* ==========================================================================
   Launch event: banner + popup
   Static, not a marquee — it says its piece once and stays put. Both the
   bar and the popup point at the same form in interest.php.

   Pinned to the very top for as long as the visitor is there to read it,
   same as the nav below it (both position:sticky, so they stack in the
   order they sit in the document — no JS needed for that part). It goes
   away the moment they actually scroll, at the same 30px point the nav
   uses to shrink, so the two feel like one coordinated header rather than
   the banner permanently eating space over the whole site.
   ========================================================================== */
.evtbar{
  background:var(--event); color:#fff;
  display:flex; align-items:center; justify-content:center;
  position:sticky; top:0; z-index:101;
}
.evtbar[hidden]{ display:none; }
.evtbar.is-away{ display:none; }
.evtbar__in{
  flex:1 1 auto; display:flex; align-items:center; justify-content:center;
  gap:18px; flex-wrap:wrap; padding:13px 46px 13px 26px; text-align:center;
}
.evtbar__msg{ margin:0; font-size:15px; line-height:1.4; }
.evtbar__msg strong{ font-family:var(--ui); text-transform:uppercase; letter-spacing:.08em; font-size:12.5px; }
.evtbar__cta{
  flex:0 0 auto; font-family:var(--ui); font-size:13.5px; font-weight:700;
  color:#fff; background:rgba(0,0,0,.16); border:1.5px solid rgba(255,255,255,.5);
  border-radius:100px; padding:7px 16px; cursor:pointer; white-space:nowrap;
  transition:background .18s, border-color .18s;
}
.evtbar__cta:hover{ background:rgba(0,0,0,.28); border-color:#fff; }

body.modal-open{ overflow:hidden; }
.evtmodal{ position:fixed; inset:0; z-index:500; display:grid; place-items:center; padding:22px; }
.evtmodal[hidden]{ display:none; }
.evtmodal__scrim{ position:absolute; inset:0; background:rgba(29,26,21,.55); }
.evtmodal__card{
  position:relative; width:100%; max-width:440px; background:var(--paper);
  border-radius:18px; padding:40px 32px 32px; box-shadow:0 24px 60px rgba(29,26,21,.28);
  animation:evtIn .32s var(--ease);
}
@keyframes evtIn{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }
.evtmodal__mark{ position:absolute; top:22px; right:56px; width:26px; height:26px; color:var(--line); }
.evtmodal__close{
  position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
  display:grid; place-content:center; color:var(--muted); cursor:pointer; transition:background .18s, color .18s;
}
.evtmodal__close:hover{ background:var(--sand); color:var(--ink); }
.evtmodal__eyebrow{
  font-family:var(--ui); font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--event); margin:0 0 12px;
}
.evtmodal__h{ font-family:var(--display); font-size:26px; font-weight:700; line-height:1.15; letter-spacing:-.01em; margin:0 0 12px; color:var(--ink); }
.evtmodal__p{ font-size:15.5px; color:var(--muted); line-height:1.6; margin:0 0 22px; }
.evtmodal__form{ display:flex; gap:8px; flex-wrap:wrap; }
.evtmodal__form input[type="email"]{
  flex:1 1 200px; font-family:var(--ui); font-size:15px; padding:13px 16px;
  border:1.5px solid var(--line); border-radius:9px; background:var(--card); color:var(--text);
}
.evtmodal__form input[type="email"]:focus-visible{ outline:2px solid var(--event); outline-offset:1px; }
.evtmodal__form .btn{ flex:1 1 100%; background:var(--event); border-color:var(--event); }
.evtmodal__form .btn:hover{ background:var(--event-dk); border-color:var(--event-dk); }

@media (max-width:640px){
  .evtbar__in{ padding:12px 40px 12px 16px; text-align:left; justify-content:flex-start; }
  .evtmodal__card{ padding:34px 22px 26px; }
}

.totop{
  position:fixed; right:22px; bottom:22px; z-index:390;
  width:46px; height:46px; border-radius:50%;
  background:var(--cc-bg); color:var(--cc-fg); border:1px solid var(--cc-line);
  display:grid; place-content:center; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s, transform .3s cubic-bezier(.22,.68,.32,1), visibility .3s, bottom .3s;
  box-shadow:0 6px 20px rgba(0,0,0,.2);
}
.totop.is-on{ opacity:1; visibility:visible; transform:none; }
.totop:hover{ background:var(--cc-accent); color:var(--cc-accent-ink); border-color:var(--cc-accent); }
.totop:focus-visible{ outline:3px solid var(--cc-accent); outline-offset:3px; }
.totop svg{ width:19px; height:19px; }

.legalbar{ background:var(--cc-bg); border-top:1px solid var(--cc-line); padding:16px 0; }
.legalbar__in{
  width:100%; max-width:1160px; margin:0 auto; padding:0 26px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-family:var(--cc-body); font-size:14px; color:var(--cc-mute);
}
.legalbar__links{ display:flex; gap:20px; }
.legalbar__links a{ color:var(--cc-mute); text-decoration:none; }
.legalbar__links a:hover{ color:var(--cc-fg); text-decoration:underline; text-underline-offset:3px; }

@media (max-width:640px){
  .cookiebar__in{ padding:0 18px; gap:16px; }
  .cookiebar__btns{ width:100%; }
  .cookiebar__btn{ flex:1 1 0; padding:12px 14px; }
  .totop{ right:16px; bottom:16px; }
  .legalbar__in{ padding:0 18px; justify-content:center; text-align:center; }
}

@media (prefers-reduced-motion:reduce){
  .cookiebar, .totop{ transition:none; }
}

/* ==========================================================================
   SUBPAGES — how-it-works, faqs, pricing, examples
   The homepage keeps its own composition; these four share a quieter one so
   a deep page reads as a continuation of the hub rather than a new site.
   ========================================================================== */

/* ---------- page head ---------- */
.subhead{ background:var(--sand); border-bottom:1px solid var(--line); padding:34px 0 60px; }
.subhead__back{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--ui); font-size:15px;
  font-weight:600; color:var(--rust); text-decoration:none; margin-bottom:34px;
}
.subhead__back:hover{ text-decoration:underline; text-underline-offset:3px; }
.subhead__h1{ margin:0 0 18px; max-width:18ch; }
.subhead__lede{ font-size:19px; color:var(--muted); max-width:60ch; margin:0; }
.subhead__lede a{ color:var(--rust); font-weight:600; }

/* ---------- the process, one step per row ---------- */
/* A vertical run rather than the homepage's four columns: there are six of
   them here and each carries a time, which a narrow column cannot hold. */
.proc{ display:grid; gap:0; max-width:900px; }
.proc__step{ display:grid; grid-template-columns:78px 1fr; gap:28px; padding:34px 0; border-top:1px solid var(--line); }
.proc__step:last-child{ border-bottom:1px solid var(--line); }
.proc__mark{ padding-top:3px; }
.proc__n{
  display:grid; place-content:center; width:52px; height:52px; border-radius:50%;
  background:var(--rust-soft); color:var(--rust);
  font-family:var(--ui); font-size:16px; font-weight:700; letter-spacing:.04em;
}
.proc__top{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; margin:0 0 10px; }
.proc__h{ font-size:23px; margin:0; }
.proc__time{
  font-family:var(--ui); font-size:12.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
  border:1px solid var(--line); border-radius:100px; padding:5px 13px; background:var(--card);
}
.proc__p{ margin:0 0 10px; }
.proc__note{ margin:0; font-size:16px; color:var(--muted); padding-left:16px; border-left:3px solid var(--line); }

/* ---------- comparison table ---------- */
.cmp{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cmp__t{ width:100%; min-width:660px; border-collapse:collapse; font-size:16px; background:var(--card); }
.cmp__t th, .cmp__t td{ padding:16px 18px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.cmp__t thead th{
  font-family:var(--ui); font-size:12px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); border-bottom:2px solid var(--ink); white-space:nowrap;
}
.cmp__t tbody th{ font-family:var(--ui); font-size:15px; font-weight:600; width:22%; }
.cmp__t td{ color:var(--muted); }
/* the column that is us: tinted the whole height, so the eye reads down it */
.cmp__t .cmp__me{ background:var(--rust-soft); color:var(--text); font-weight:600; }
.cmp__t thead .cmp__me{ color:var(--rust); border-bottom-color:var(--rust); }
.cmp__t tbody tr:last-child th, .cmp__t tbody tr:last-child td{ border-bottom:0; }

/* ---------- faq contents strip ---------- */
.faqnav{ background:var(--paper); border-bottom:1px solid var(--line); padding:18px 0; position:sticky; top:var(--nav-h); z-index:40; }
.faqnav__list{ display:flex; flex-wrap:wrap; gap:9px; }
.faqnav__list a{
  display:flex; align-items:center; min-height:44px;   /* tap target floor */
  font-family:var(--ui); font-size:14px; font-weight:500; text-decoration:none;
  color:var(--muted); border:1px solid var(--line); border-radius:100px; padding:0 16px;
  background:var(--card); transition:color .18s, border-color .18s;
}
.faqnav__list a:hover{ color:var(--rust); border-color:var(--rust); }


/* a plain labelled row, used for "not included" and the notes on the demos */
.outrow{ padding:24px 0; border-bottom:1px solid var(--line); }
.outrow:last-child{ border-bottom:0; }
.outrow__h{ font-size:19px; margin:0 0 7px; }
.outrow__p{ margin:0; color:var(--muted); font-size:16.5px; }

/* ---------- demo sites ---------- */
.exlist{ display:grid; gap:14px; }
.ex{
  display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center;
  background:var(--ink); border-radius:16px; padding:34px; color:var(--onDark);
}
.ex:nth-child(even) .ex__shot{ order:2; }
/* Not-live trades stay in the list rather than vanishing — brought back
   15 September 2026 — just a touch dimmer so the live ones still lead. */
.ex--soon{ opacity:.72; }
.ex__top{ display:flex; align-items:center; gap:13px; margin:0 0 12px; }
.ex__h{ font-size:27px; margin:0; }
.ex__p{ color:var(--onDark-mute); font-size:16.5px; margin:0 0 20px; }

/* ---------- next-step cards, the foot of every subpage ---------- */
.nextcards{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.nextcard{
  display:grid; gap:5px; align-content:start; text-decoration:none;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:20px 22px; transition:border-color .2s, background .2s;
}
.nextcard:hover{ border-color:#E08A66; background:rgba(255,255,255,.08); }
.nextcard__k{ font-family:var(--ui); font-size:15px; font-weight:700; color:#fff; }
.nextcard__v{ font-size:15px; color:var(--onDark-mute); line-height:1.5; }
.nextcard--go{ background:var(--rust); border-color:var(--rust); }
.nextcard--go:hover{ background:var(--rust-dk); border-color:var(--rust-dk); }
.nextcard--go .nextcard__v{ color:rgba(255,255,255,.85); }

/* ---------- read-more link, used under the homepage summaries ---------- */
.more{
  display:inline-flex; align-items:center; gap:9px; margin-top:34px;
  font-family:var(--ui); font-size:16px; font-weight:600; color:var(--rust);
  text-decoration:none; border-bottom:2px solid rgba(180,71,42,.35); padding-bottom:2px;
}
.more:hover{ border-bottom-color:var(--rust); }
.more svg{ width:15px; height:15px; }
.section--ink .more{ color:#E08A66; border-bottom-color:rgba(224,138,102,.4); }
.section--ink .more:hover{ border-bottom-color:#E08A66; }
.section--ink .btn--line{ --fg:var(--onDark); --bd:rgba(255,255,255,.24); }
.section--ink .btn--line:hover{ --fg:#E08A66; --bd:#E08A66; }

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .ex{ grid-template-columns:1fr; gap:26px; }
  .ex:nth-child(even) .ex__shot{ order:0; }
}
@media (max-width:760px){
  .subhead{ padding:26px 0 44px; }
  .subhead__back{ margin-bottom:24px; }
  .proc__step{ grid-template-columns:1fr; gap:16px; padding:28px 0; }
  .proc__n{ width:44px; height:44px; font-size:15px; }
  .nextcards{ grid-template-columns:1fr; }
  .faqnav{ position:static; }
  .ex{ padding:22px; }
  .ex__h{ font-size:23px; }
}

@media (prefers-reduced-motion:reduce){
  .nextcard{ transition:none; }
}

/* ---------- google rating badge ---------- */
/* Only ever rendered when there are real reviews, so these rules describe a
   thing that does not exist yet. See _reviews.php. */
.gradge{
  display:inline-flex; align-items:center; gap:14px; margin-top:26px;
  padding:12px 20px 12px 16px; text-decoration:none;
  background:var(--card); border:1px solid var(--line); border-radius:100px;
  transition:border-color .2s;
}
.gradge:hover{ border-color:var(--rust); }
.gradge__score{
  font-family:var(--display); font-size:26px; font-weight:700; letter-spacing:-.02em;
  color:var(--ink); line-height:1;
}
.gradge__body{ display:grid; gap:3px; }
.gradge__stars{ display:flex; gap:2px; }
.gradge__star{ width:15px; height:15px; fill:var(--line); }
.gradge__star.is-on{ fill:#E7A61A; }
.gradge__meta{ font-family:var(--ui); font-size:13px; font-weight:500; color:var(--muted); }

/* on an ink section it inverts itself, the same way .eyebrow and .lede do */
.section--ink .gradge{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16); }
.section--ink .gradge:hover{ border-color:#E08A66; }
.section--ink .gradge__score{ color:#fff; }
.section--ink .gradge__star{ fill:rgba(255,255,255,.22); }
.section--ink .gradge__star.is-on{ fill:#E7A61A; }
.section--ink .gradge__meta{ color:var(--onDark-mute); }

@media (max-width:760px){
  .gradge{ padding:10px 18px 10px 14px; gap:12px; }
  .gradge__score{ font-size:23px; }
}
@media (prefers-reduced-motion:reduce){
  .gradge{ transition:none; }
}

/* ==========================================================================
   Scroll scenes (homepage)
   The moving parts added 23 September 2026: a demo on a phone in the hero, a photo
   band, the pinned demo showcase and the process diagram.
   site.js writes a few custom properties as you scroll (--hp, --bp, --sp2,
   --f) and toggles a few classes; everything that moves is done here.
   With reduced motion site.js writes nothing, and every default below is
   the finished, still state.
   ========================================================================== */

/* ---------- scroll progress ---------- */
.scrollbar{ position:fixed; top:0; left:0; right:0; height:3px; z-index:150; pointer-events:none; }
.scrollbar span{ display:block; height:100%; background:var(--rust); transform-origin:0 50%; transform:scaleX(var(--sp,0)); }

/* ---------- hero: text left, a real demo on a phone right ---------- */
.hero{ position:relative; overflow:hidden; }
.hero__in{
  max-width:var(--wrap); display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;
  padding-top:96px; padding-bottom:96px; text-align:left;
}
.hero__copy{ position:relative; z-index:1;
  transform:translate3d(0, calc(var(--hp,0) * -70px), 0); opacity:calc(1 - var(--hp,0) * 1.15); }
.hero__sub{ margin:0 0 26px; }
.hero__btns{ justify-content:flex-start; }

/* the phone drifts down as the hero scrolls away, slower than the page */
.hero__phone{ margin:0; display:grid; justify-items:center; gap:26px;
  transform:translate3d(0, calc(var(--hp,0) * 60px), 0); }

/* A dark frame, a rounded screen and a camera cut-out: enough to read as a
   phone without drawing a particular make. Tipped a few degrees so it sits
   like one put down on a desk, and it rises into place on load. */
.phone{
  position:relative; width:min(290px, 72vw); aspect-ratio:9/19; padding:10px;
  border-radius:46px; background:#0E0C09;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.14), 0 50px 90px -30px rgba(0,0,0,.85), 0 24px 50px -24px rgba(180,71,42,.4);
  transform:rotate(-4deg);
  animation:gw-phone-in 1.1s var(--ease) .15s both;
}
.phone::before{ content:""; position:absolute; z-index:2; top:21px; left:50%; width:82px; height:23px; margin-left:-41px; border-radius:20px; background:#0E0C09; }
.phone__screen{ position:relative; height:100%; border-radius:37px; overflow:hidden; background:#fff; }
/* the demo scrolls inside the screen as the page scrolls, the way a
   customer would thumb down it */
.phone__site{ display:block; width:100%; max-width:none; height:auto;
  transform:translate3d(0, calc(var(--hp,0) * -45%), 0); }
@keyframes gw-phone-in{
  from{ opacity:0; transform:translateY(46px) rotate(0deg); }
  to{ opacity:1; transform:rotate(-4deg); }
}
.hero__cap{ display:inline-flex; align-items:center; gap:8px; padding-bottom:3px;
  font-family:var(--ui); font-size:14px; font-weight:600; color:#E3906D; text-decoration:none;
  border-bottom:1px solid rgba(227,144,109,.4); transition:border-color .2s; }
.hero__cap:hover{ border-bottom-color:#E3906D; }

/* ---------- photo band ---------- */
.band{ position:relative; min-height:86vh; display:grid; align-items:end; overflow:hidden; background:var(--ink); color:#fff; isolation:isolate; }
.band__media{ position:absolute; inset:-14% 0; z-index:-2;
  transform:translate3d(0, calc((var(--bp,.5) - .5) * 22%), 0) scale(calc(1.06 - var(--bp,.5) * .06)); }
/* anchored left of centre, so the phone lands to the right of the words
   rather than under them */
.band__media img{ width:100%; height:100%; object-fit:cover; object-position:12% 50%; }
.band::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(0deg, rgba(20,17,13,.94) 0%, rgba(20,17,13,.55) 38%, rgba(20,17,13,.12) 72%, rgba(20,17,13,.3) 100%); }
.band__in{ padding-top:120px; padding-bottom:96px; }
.band__line{ margin:0; max-width:21ch; font-family:var(--display); font-weight:700; letter-spacing:-.024em; line-height:1.08;
  font-size:clamp(30px,4.4vw,56px); text-wrap:balance; }
.band__line span{ display:block; margin-top:.35em; color:#E08A66; }

/* ---------- demo showcase ---------- */
.showcase__in{ display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center; }
/* min-width:0 stops the phone's sideways card row from stretching its grid
   column (and so the whole page) to the width of every card laid end to end */
.showcase__in > *{ min-width:0; }
.showcase .sechead{ margin-bottom:30px; }
.showcase__list{ position:relative; display:grid; gap:2px; }
.showcase__list li{ display:block; }
.sc{
  display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:16px;
  padding:10px 14px 10px 10px; border-radius:12px; text-decoration:none;
  color:var(--onDark-mute); transition:color .3s var(--ease), background .3s var(--ease);
}
.sc .mark{ width:44px; height:44px; color:rgba(224,138,102,.5); transition:color .3s var(--ease); }
.sc__shot{ display:none; }            /* the phone cards' screenshot; the frame shows it on desktop */
.sc__name{ font-family:var(--display); font-size:clamp(20px,1.9vw,25px); font-weight:700; letter-spacing:-.018em; line-height:1.15; }
.sc__go{ display:inline-flex; align-items:center; gap:7px; font-family:var(--ui); font-size:13px; font-weight:600; color:#E3906D;
  opacity:0; transform:translateX(-6px); transition:opacity .3s var(--ease), transform .3s var(--ease); white-space:nowrap; }
.sc:hover, .sc:focus-visible, .sc.is-on{ color:#fff; background:rgba(255,255,255,.05); }
.sc:hover .mark, .sc:focus-visible .mark, .sc.is-on .mark{ color:#E08A66; }
.sc:hover .sc__go, .sc:focus-visible .sc__go, .sc.is-on .sc__go{ opacity:1; transform:none; }
/* pinned, scroll decides which trade is on; pointing at another only lifts it a little */
.showcase.is-pinned .sc:not(.is-on):hover, .showcase.is-pinned .sc:not(.is-on):focus-visible{ background:none; color:var(--onDark); }
.showcase.is-pinned .sc:not(.is-on) .sc__go{ opacity:0; }
/* the trade that comes on screen draws its mark in */
.sc.is-on .mark [pathLength]{ stroke-dasharray:1; animation:gw-mark .9s var(--ease) both; }
@keyframes gw-mark{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }

.showcase__stage{ position:relative; }
.showcase__chrome{ box-shadow:0 50px 90px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.04); }
.showcase__shot{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 0;
  opacity:0; transform:scale(1.05);
  transition:opacity .6s var(--ease), transform 1.6s var(--ease);
}
.showcase__shot:first-child, .showcase__shot.is-on{ opacity:1; transform:none; }
.showcase.is-live .showcase__shot:first-child:not(.is-on){ opacity:0; transform:scale(1.05); }
.showcase__count{ display:none; margin:18px 0 0; font-family:var(--ui); font-size:13px; font-weight:600; letter-spacing:.14em; color:var(--onDark-mute); }
.showcase__cur{ color:#E08A66; }

/* Pinned: the section is as tall as the scroll it takes to show every trade,
   and its inside sticks to the screen for that long. */
.showcase.is-pinned{ height:calc(100vh + var(--n,5) * 56vh); padding:0; }
.showcase.is-pinned .showcase__stick{
  position:sticky; top:0; height:100vh; height:100svh; display:flex; align-items:center;
  padding-top:68px;                     /* the nav once scrolled (56px), plus a little */
}
.showcase.is-pinned .showcase__count{ display:block; }
/* a rail down the side of the list, filling as you go */
.showcase.is-pinned .showcase__list::before,
.showcase.is-pinned .showcase__list::after{ content:""; position:absolute; left:-20px; top:12px; bottom:12px; width:2px; border-radius:2px; }
.showcase.is-pinned .showcase__list::before{ background:rgba(255,255,255,.12); }
.showcase.is-pinned .showcase__list::after{ background:#E08A66; transform-origin:50% 0; transform:scaleY(var(--sp2,0)); }

/* ---------- process diagram ---------- */
.process .step{ border-top:0; padding-top:0; }
.step__node{
  position:relative; z-index:1; display:grid; place-content:center; width:46px; height:46px; margin:0 0 18px;
  border-radius:50%; background:var(--paper); border:2px solid var(--rust); color:var(--rust);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.step__node svg{ width:22px; height:22px; }
/* the line to the next step: from this node's right edge, across the grid
   gap, to the next node */
.step__link{ position:absolute; left:46px; top:22px; width:calc(100% + 30px - 46px); height:2px; background:var(--line); overflow:hidden; }
.step__link::after{ content:""; position:absolute; inset:0; background:var(--rust); transform-origin:0 50%; transform:scaleX(var(--f,1)); }
.step:last-child .step__link{ display:none; }
.step.is-lit .step__node{ background:var(--rust); color:#fff; transform:scale(1.06); }
/* site.js dims every node the line has not reached yet */
.process.is-live .step:not(.is-lit) .step__node{ border-color:var(--line); color:var(--muted); }

/* ---------- bolder reveal ---------- */
[data-reveal]{ transform:translateY(28px); }
[data-reveal].shown{ transition:opacity .8s var(--ease), transform .9s var(--ease); transition-delay:calc(var(--d,0) * 90ms); }

/* ---------- scroll scenes: smaller screens ---------- */
@media (max-width:1020px){
  .hero__in{ grid-template-columns:1fr; gap:48px; padding-top:84px; padding-bottom:72px; }
  .phone{ width:min(260px, 68vw); }
  .showcase__in{ grid-template-columns:1fr; gap:36px; }
  .showcase__stage{ display:none; }

  /* The demos as a row of cards you swipe through. Each card is a little
     under the screen's width, so the next one shows at the edge and says
     "there's more this way" without a word. It runs to the screen's edges
     (the negative margin cancels the wrap's padding) and snaps card by card. */
  .showcase{ --gut:26px; }
  .showcase__list{
    display:flex; gap:14px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:var(--gut);
    margin:0 calc(var(--gut) * -1); padding:4px var(--gut) 20px;
  }
  @media (hover:none){
    .showcase__list{ scrollbar-width:none; }
    .showcase__list::-webkit-scrollbar{ display:none; }
  }
  .showcase__list li{ flex:0 0 min(80%, 400px); scroll-snap-align:start; }
  .sc{
    height:100%; grid-template-columns:auto 1fr; gap:0 12px; padding:0 16px 16px;
    border:1px solid rgba(255,255,255,.14); border-radius:14px; overflow:hidden;
    background:rgba(255,255,255,.04); color:#fff;
  }
  .sc:hover, .sc.is-on{ background:rgba(255,255,255,.04); }
  .sc__shot{
    display:block; grid-column:1 / -1; width:calc(100% + 32px); max-width:none; height:auto; margin:0 -16px 14px;
    aspect-ratio:16/10; object-fit:cover; object-position:50% 0; border-bottom:1px solid rgba(255,255,255,.1);
  }
  .sc .mark{ width:34px; height:34px; color:#E08A66; }
  .sc__name{ font-size:19px; }
  .sc__go{ display:none; }
  .sc.is-on .mark [pathLength]{ animation:none; }
  .steps .step:nth-child(2n) .step__link{ display:none; }
}
@media (max-width:600px){
  .hero__in{ padding-top:64px; padding-bottom:56px; }
  .band{ min-height:72vh; }
  .band__in{ padding-bottom:64px; }
  .band__media img{ object-position:52% 50%; }
  .showcase{ --gut:18px; }            /* the wrap's phone padding */
  .plan .btn{ white-space:normal; }   /* "Tell me when it's ready" must wrap on a 320px phone */
  /* one column: the line runs down the side instead of across */
  .process .step{ padding-left:64px; min-height:46px; }
  .step__node{ position:absolute; left:0; top:0; margin:0; }
  /* :nth-child(n) matches every step; it is there to out-rank the two-column
     rule above that hides every second link */
  .steps .step:nth-child(n) .step__link{ display:block; left:22px; top:46px; width:2px; height:calc(100% - 46px + 28px); }
  .steps .step:last-child .step__link{ display:none; }
  .step__link::after{ transform-origin:50% 0; transform:scaleY(var(--f,1)); }
}
@media (prefers-reduced-motion:reduce){
  .hero__copy, .hero__phone, .phone__site, .band__media{ transform:none; opacity:1; }
}