/* NanoPorter — round 2, sample E, "rail and stage".
   Built on round 1's sample C (RedSun's measured geometry: container 1200/1144,
   section 100px, card radius 24 with a bottom inset glow, button radius 15 with
   a bottom-centre radial bloom, blurred light rig). New in E: a left rail that
   collapses to a top bar, one background object across the first two screens,
   and the skins on a lateral arc whose ground follows the chosen skin.
   Only transform and opacity animate. Every word is in the HTML at first byte. */

@font-face {
  font-family: "InterVar";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --page:   #0E1618;
  --ink:    #F1F7F5;
  --body:   #D3E2DD;
  --muted:  #7B8A86;
  --rule:   #334441;
  --tint:   #18211F;
  --accent: #299771;
  --accent-lift: #3FBF90;
  --accent-deep: #1B6E51;
  --ramp-a: #10A06B;
  --ramp-b: #3B8B82;

  --rail-w: 232px;
  --bar-h: 60px;

  --container: 1200px;
  --gutter: 28px;
  --r-card: 24px;
  --r-panel: 12px;
  --r-btn: 15px;
  --r-pill: 60px;

  --surface: rgba(24, 33, 31, .55);
  --hairline: .8px solid rgba(41, 151, 113, .18);
  --lip: inset 0 -9px 24px rgba(41, 151, 113, .18);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* controls that only work with JavaScript stay hidden until JavaScript unhides
   them, and a display rule on the element itself must not defeat that */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
/* clip, not hidden: hidden would make the body a scroll container and break
   the sticky object in act one */
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--page);
  color: var(--body);
  font-family: "InterVar", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--ink); font-weight: 500; margin: 0; letter-spacing: -.015em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
img { max-width: 100%; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--accent); color: var(--page); padding: 10px 16px; border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent-lift); outline-offset: 3px; border-radius: 4px; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 15px; line-height: 18px;
  padding: 11px 16px;
  border-radius: var(--r-btn);
  text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-glow {
  color: var(--page); font-weight: 600;
  background-color: var(--accent);
  background-image: radial-gradient(circle farthest-corner at 50% 100%, var(--accent-lift), rgba(41, 151, 113, 0) 79%);
  border: .8px solid var(--accent-deep);
  box-shadow: 0 0 30px rgba(41, 151, 113, .42);
}
.btn-glow:hover { box-shadow: 0 0 38px rgba(41, 151, 113, .58); }

.btn-quiet, .btn-chip {
  color: var(--ink);
  background: var(--surface);
  border: var(--hairline);
  box-shadow: var(--lip);
}
.btn-quiet:hover, .btn-chip:hover { border-color: rgba(41, 151, 113, .45); }

.btn-chip { border-radius: var(--r-pill); padding: 11px 18px; text-align: left; }
.btn-chip.is-active {
  border-color: rgba(41, 151, 113, .6);
  box-shadow: inset 0 -10px 26px rgba(41, 151, 113, .3), 0 0 22px rgba(41, 151, 113, .18);
}

.round {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 22px; line-height: 1; color: var(--ink);
  background: rgba(11, 18, 17, .82); border: var(--hairline); box-shadow: var(--lip);
  cursor: pointer;
}
.round:hover { border-color: rgba(41, 151, 113, .5); }

/* ---------------------------------------------------------------- the rail */

.rail {
  position: fixed; z-index: 40;
  inset: 0 0 auto 0;
  height: var(--bar-h);
  display: flex; align-items: center;
  background: rgba(14, 22, 24, .62);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  border-bottom: .8px solid rgba(51, 68, 65, .5);
}
.rail-inner {
  width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 20px;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.lockup { display: block; height: 26px; width: auto; }

/* collapsed: no chapters at all, by Justin's own answer to the portrait question */
.chapters { display: none; }
.rail-sub { display: flex; gap: 18px; margin-inline: auto; }
.rail-sub a { color: var(--body); text-decoration: none; font-size: 14px; opacity: .85; }
.rail-sub a:hover { opacity: 1; color: var(--ink); }
.rail-sub-more { display: none; }
.rail-cta { flex: 0 0 auto; }

@media (min-width: 1024px) and (orientation: landscape) {
  .rail {
    inset: 0 auto 0 0;
    width: var(--rail-w); height: auto;
    display: block;
    background: transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom: 0;
    border-right: .8px solid rgba(51, 68, 65, .55);
  }
  .rail-inner {
    height: 100%; max-width: none; margin: 0;
    padding: 30px 26px 28px 30px;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
  }
  .lockup { height: 30px; }

  .chapters { display: block; position: relative; margin-top: 34px; }
  .chapters ol { display: flex; flex-direction: column; gap: 4px; }
  .chapters a {
    display: flex; align-items: baseline; gap: 12px;
    padding: 6px 0 6px 16px;
    text-decoration: none; color: var(--muted);
    font-size: 14px; line-height: 1.3;
    transition: color .3s var(--ease);
  }
  .chapters a:hover { color: var(--body); }
  .chapters a.is-current { color: var(--ink); }
  .ch-num { font-size: 11px; letter-spacing: .12em; color: var(--muted); flex: 0 0 22px; }
  .chapters a.is-current .ch-num { color: var(--accent-lift); }
  /* the tick slides between chapters on transform; with JavaScript off it sits
     at the first chapter and no chapter is lit */
  .ch-tick {
    position: absolute; left: 0; top: 0;
    width: 2px; height: 22px; border-radius: 2px;
    background: var(--accent-lift); box-shadow: 0 0 12px rgba(63, 191, 144, .7);
    transform: translateY(var(--tick-y, 9px));
    transition: transform .5s var(--ease), opacity .3s var(--ease);
    opacity: 0;
  }
  .js .ch-tick { opacity: 1; }

  .rail-sub {
    margin: 22px 0 0; padding-top: 16px;
    border-top: .8px solid rgba(51, 68, 65, .55);
    display: flex; flex-wrap: wrap; gap: 8px 16px;
  }
  .rail-sub a { font-size: 13px; color: var(--muted); opacity: 1; }
  .rail-sub a:hover { color: var(--ink); }
  .rail-sub-more { display: inline; }
  .rail-cta { margin-top: auto; align-self: stretch; }

  main, .foot { padding-left: var(--rail-w); }
  .rail-inner { padding-inline-start: 30px; }
}

/* ---------------------------------------------------------------- section rhythm */

.section { padding: 100px 0; position: relative; }
.hero { padding: 132px 0 40px; }

.section-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
/* the chapter title was getting lost under the headline (Justin, 10 Sept): bigger, heavier,
   and with real air under it */
.eyebrow {
  display: inline-flex; align-items: baseline; gap: 10px;
  margin-bottom: 4px;
  font-size: 14px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-lift);
}
.eyebrow-num { color: var(--muted); letter-spacing: .12em; font-weight: 500; }
.section-title { font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.16; max-width: 620px; }
.section-sub { color: var(--muted); max-width: 560px; font-size: 15px; }

/* ---------------------------------------------------------------- act one: the object */

.act { position: relative; isolation: isolate; }

/* Without JavaScript the object is a static, faint backdrop behind the hero. */
.object {
  position: absolute; inset: 0 0 auto 0; height: 100vh; height: 100svh;
  z-index: 0; pointer-events: none; overflow: visible;
}
/* With JavaScript it is pinned for the whole of act one and driven by scroll. */
.js .object {
  position: sticky; top: 0;
  margin-bottom: -100vh; margin-bottom: -100svh;
}
.object-inner {
  position: absolute; left: 50%; top: 50%;
  width: min(30vh, 46vw); aspect-ratio: 930 / 1059;
  translate: -50% -50%;
}
.object-move {
  position: absolute; inset: 0;
  transform: translate3d(26vw, -14vh, 0) scale(1);
  will-change: transform;
}
.object-mark {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block;
  will-change: opacity;
}
.object-lit { opacity: .32; }
.js .object-lit { opacity: .9; }
.object-bloom {
  position: absolute; left: 50%; top: 50%;
  width: 190%; aspect-ratio: 1; translate: -50% -50%;
  background: radial-gradient(circle,
    rgba(41, 151, 113, .34) 0%,
    rgba(41, 151, 113, .14) 30%,
    rgba(41, 151, 113, .04) 52%,
    rgba(41, 151, 113, 0) 70%);
  filter: blur(22px);
  opacity: 0;
}
.js .object-bloom { opacity: 1; }

@media (max-width: 1023px), (orientation: portrait) {
  .object-inner { width: min(30vh, 56vw); }
  /* further right and lower than it was: the top of the mark was being cut by the top bar,
     and the band above the copy was mostly empty (Justin, 10 Sept) */
  .object-move { transform: translate3d(0, -6vh, 0) scale(1.35); }
}

/* ---------------------------------------------------------------- hero */

.hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 2; }
.hero-copy { display: flex; flex-direction: column; align-items: center; width: 100%; }

.light-rig { position: absolute; inset: -64px 0 auto 0; height: 1000px; z-index: 0; pointer-events: none; overflow: hidden; }
.glow-circle {
  position: absolute; left: 50%; top: -300px; translate: -50% 0;
  width: min(620px, 108vw); aspect-ratio: 1;
  background: radial-gradient(circle,
    rgba(63, 191, 144, .58) 0%,
    rgba(41, 151, 113, .30) 26%,
    rgba(41, 151, 113, .08) 46%,
    rgba(41, 151, 113, 0) 66%);
  filter: blur(34px);
}
.light {
  position: absolute; top: -180px; width: 132px; height: 760px;
  background: linear-gradient(rgba(241, 247, 245, .16) 4%, rgba(241, 247, 245, 0) 62%);
  filter: blur(11px);
}
.light-left  { left: 26%; rotate: 15deg; }
.light-mid   { left: 50%; translate: -50% 0; width: 210px; height: 880px; opacity: .55; }
.light-right { right: 26%; rotate: -15deg; }

/* stretch, not center: when the text wraps to two lines the pill grows with the housing
   instead of floating in the middle of it (Justin, 10 Sept) */
.badge {
  display: inline-flex; align-items: stretch; gap: 10px;
  padding: 1px 16px 1px 1px;
  border-radius: var(--r-pill);
  background: var(--surface); border: var(--hairline); box-shadow: var(--lip);
  font-size: 14px; color: var(--body);
}
.badge-pill {
  display: inline-flex; align-items: center;
  padding: 7px 14px; border-radius: var(--r-pill);
  background-color: var(--accent);
  background-image: radial-gradient(circle at 50% 100%, var(--accent-lift), rgba(41, 151, 113, 0) 59%);
  color: var(--page); font-weight: 600; font-size: 13px;
}
.badge-text { align-self: center; }

.hero-title {
  margin-top: 26px;
  font-size: clamp(2.4rem, 7.4vw, 4.0625rem);
  line-height: 1.2;
  max-width: 620px;
}
.hero-sub { margin-top: 16px; max-width: 520px; color: var(--muted); }

.chips { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.chips-note { margin-top: 14px; color: var(--muted); font-size: 14px; }

/* at desktop the copy sits left and the object to its right, the Planets composition */
@media (min-width: 1024px) and (orientation: landscape) {
  .hero-inner { align-items: flex-start; text-align: left; }
  .hero-copy { align-items: flex-start; max-width: 600px; }
  .chips { justify-content: flex-start; }
  .light-rig { inset: -64px 0 auto 0; }
  .glow-circle { left: 34%; }
  .light-left { left: 16%; } .light-mid { left: 34%; } .light-right { right: 44%; }
}

/* the stage: a client site with the widget in its corner. It passes OVER the object. */
.stage { margin-top: 56px; width: 100%; position: relative; z-index: 3; }
.stage-panel {
  position: relative;
  max-width: 1000px; margin-inline: auto;
  aspect-ratio: 16 / 10;
  padding: 8px;
  background: #0B1211;
  border: .8px solid rgba(211, 226, 221, .12);
  border-radius: var(--r-panel);
  box-shadow: inset 0 24px 48px rgba(199, 211, 234, .05), 0 40px 90px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.site-mock { height: 100%; border-radius: 8px; background: #0F1817; overflow: hidden; text-align: left; }
.site-bar { height: 34px; display: flex; align-items: center; gap: 6px; padding-inline: 12px; border-bottom: .8px solid rgba(51, 68, 65, .55); }
.site-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(123, 138, 134, .5); }
.site-url {
  margin-left: 10px; padding: 3px 12px; border-radius: 20px;
  background: rgba(51, 68, 65, .35); color: rgba(123, 138, 134, .95); font-size: 10px; letter-spacing: .02em;
}
.site-nav {
  display: flex; align-items: center; gap: 18px;
  padding: 12px clamp(16px, 4vw, 40px);
  border-bottom: .8px solid rgba(51, 68, 65, .4);
  font-size: 11px; color: rgba(123, 138, 134, .9);
}
.site-nav b { color: rgba(211, 226, 221, .8); font-weight: 600; margin-right: auto; letter-spacing: .04em; }
.site-nav i { font-style: normal; }
.site-body { padding: 20px clamp(16px, 4vw, 40px); display: flex; flex-direction: column; gap: 12px; }
.site-hero {
  height: clamp(72px, 12vw, 128px); border-radius: 8px;
  background: linear-gradient(115deg, rgba(51, 68, 65, .65), rgba(24, 33, 31, .45) 62%);
  display: flex; align-items: flex-end; padding: 12px 16px;
}
/* the demo site's own main heading, set at an H1's scale (Justin, 7 Sept) */
.site-hero-line { color: rgba(241, 247, 245, .92); font-size: clamp(18px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; }
.site-line { height: 9px; border-radius: 5px; background: rgba(51, 68, 65, .5); }
.site-line.w70 { width: 70%; } .site-line.w52 { width: 52%; } .site-line.w60 { width: 60%; } .site-line.w40 { width: 40%; }
.site-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-block: 6px; }
.site-grid i { height: clamp(40px, 7vw, 76px); border-radius: 8px; background: rgba(51, 68, 65, .38); }

/* ---------------------------------------------------------------- the widget, our look
   A dark card: header row with the mark, "The assistant", a green dot and "Ready to answer";
   assistant bubbles a slightly lighter dark; the visitor's bubble in brand green with dark
   text; a pill input with a round green send button; a soft green glow bleeding into the page. */

/* The real assistant is the one widget on the page, loaded by widget.js and fixed bottom-right.
   Inside the demo frame its corner is an INVISIBLE, id'd rectangle the size of the launcher:
   the engine's anchor feature positions the real launcher over it. Nothing is drawn here
   (Justin, 7 Sept: the dotted placeholder "looks rubbish"). Never a second widget. */
.widget-anchor {
  position: absolute; right: 20px; bottom: 20px;
  width: 60px; height: 60px; z-index: 6;
  pointer-events: none;
}

.skin-widget {
  --w: var(--skin, var(--accent));
  --w-soft: var(--skin-soft, var(--accent-lift));
  --w-ink: var(--skin-ink, #08100E);
  background: #0B1211;
  border: .8px solid color-mix(in srgb, var(--w) 34%, transparent);
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 0 46px color-mix(in srgb, var(--w) 26%, transparent), 0 24px 48px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.widget-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: .8px solid rgba(51, 68, 65, .6);
}
.widget-mark { width: 18px; height: 20px; display: block; flex: 0 0 auto; }
.widget-name { color: var(--ink); font-size: 13px; font-weight: 600; }
.widget-state { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--body); opacity: .8; font-size: 11px; white-space: nowrap; }
.widget-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--w-soft); box-shadow: 0 0 10px var(--w-soft); }
.widget-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.bubble { font-size: 13px; line-height: 1.5; padding: 9px 12px; border-radius: 14px; }
.bubble-you {
  align-self: flex-end; max-width: 88%;
  background: var(--w); color: var(--w-ink); font-weight: 500;
  border-bottom-right-radius: 5px;
}
.bubble-bot { background: var(--tint); color: var(--ink); border-bottom-left-radius: 5px; }
.bubble-bot a { color: var(--w-soft); }
.widget-foot { display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px; }
.widget-input {
  flex: 1; font-size: 12px; color: var(--body); opacity: .72;
  padding: 9px 14px; border-radius: var(--r-pill);
  background: var(--tint); border: .8px solid rgba(51, 68, 65, .7);
}
.widget-send {
  color: var(--w-ink); background: var(--w); width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px; font-weight: 700; flex: 0 0 auto;
  box-shadow: 0 0 16px color-mix(in srgb, var(--w) 55%, transparent);
}

.stage-fade {
  position: absolute; inset: auto 0 0 0; height: 24%;
  background: linear-gradient(rgba(14, 22, 24, 0), var(--page) 82%);
  pointer-events: none; z-index: 4;
}
.stage-caption { margin: 18px auto 0; max-width: 560px; color: var(--muted); font-size: 13px; text-align: center; }

.scroll-cue {
  margin-top: 34px; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted);
  align-self: center;
}

/* answers: both exist at first byte; JS only chooses which is shown */
.js .answer[hidden] { display: none; }

/* ---------------------------------------------------------------- the three beats */

.beats .container { position: relative; z-index: 2; }
.beat-grid {
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.beat {
  padding: 34px 30px 32px;
  background: rgba(24, 33, 31, .72); border: var(--hairline); border-radius: var(--r-card); box-shadow: var(--lip);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.beat-num {
  font-size: 13px; color: var(--accent-lift); letter-spacing: .12em;
  padding-bottom: 14px; margin-bottom: 18px; border-bottom: .8px solid var(--rule);
}
.beat-title { font-size: 22px; line-height: 1.25; }
.beat-body { margin-top: 12px; color: var(--body); font-size: 15px; }
.beats-close { margin: 40px auto 0; max-width: 620px; text-align: center; color: var(--body); font-size: 17px; }

/* ---------------------------------------------------------------- skins: the arc */

/* tight: the whole section sits inside one screen at desktop and at phone (Justin, 7 Sept) */
.skins { isolation: isolate; overflow: hidden; padding: 56px 0 48px; }
.skin-ground {
  position: absolute; inset: 0; z-index: -1;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.skin-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .55s var(--ease); }
.skin-layer.is-on { opacity: 1; }
.skin-layer[data-layer="malachite"] { background:
  radial-gradient(70% 48% at 50% 58%, rgba(41, 151, 113, .46), rgba(41, 151, 113, 0) 72%),
  linear-gradient(180deg, rgba(41, 151, 113, .05), rgba(41, 151, 113, .11)); }
.skin-layer[data-layer="ember"] { background:
  radial-gradient(70% 48% at 50% 58%, rgba(224, 102, 43, .38), rgba(224, 102, 43, 0) 72%),
  linear-gradient(180deg, rgba(224, 102, 43, .04), rgba(224, 102, 43, .10)); }
.skin-layer[data-layer="cobalt"] { background:
  radial-gradient(70% 48% at 50% 58%, rgba(68, 136, 224, .40), rgba(68, 136, 224, 0) 72%),
  linear-gradient(180deg, rgba(68, 136, 224, .05), rgba(68, 136, 224, .11)); }
.skin-layer[data-layer="plum"] { background:
  radial-gradient(70% 48% at 50% 58%, rgba(169, 107, 214, .40), rgba(169, 107, 214, 0) 72%),
  linear-gradient(180deg, rgba(169, 107, 214, .05), rgba(169, 107, 214, .11)); }
.skin-layer[data-layer="sand"] { background:
  radial-gradient(70% 48% at 50% 58%, rgba(216, 174, 58, .30), rgba(216, 174, 58, 0) 72%),
  linear-gradient(180deg, rgba(216, 174, 58, .03), rgba(216, 174, 58, .08)); }
.skin-layer[data-layer="slate"] { background:
  radial-gradient(70% 48% at 50% 58%, rgba(126, 150, 166, .36), rgba(126, 150, 166, 0) 72%),
  linear-gradient(180deg, rgba(126, 150, 166, .04), rgba(126, 150, 166, .10)); }

.skins-inner { position: relative; }
.skins-head { margin-bottom: 0; }
.skins .section-sub { color: var(--body); }

.arc { position: relative; }

/* the guaranteed control: chevrons either side of the centre card, always present */
.chev {
  position: absolute; top: 50%; z-index: 5;
  transform: translateY(-50%);
  border-color: color-mix(in srgb, var(--live-skin, var(--accent)) 45%, transparent);
  transition: border-color .4s var(--ease), opacity .3s var(--ease);
}
.chev:hover { border-color: color-mix(in srgb, var(--live-skin, var(--accent)) 80%, transparent); }
.chev[disabled] { opacity: .3; cursor: default; }
.chev-prev { left: calc(50% - var(--card-w) / 2 - 64px); }
.chev-next { right: calc(50% - var(--card-w) / 2 - 64px); }

/* Without JavaScript: the base's proven scroll-snap track on the default ground. */
.skin-track {
  --card-w: min(320px, 80vw);
  display: flex; gap: 28px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: 14px 24px;
  width: 100vw; margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - var(--card-w) / 2);
}
.skin-track::-webkit-scrollbar { display: none; }
.arc { --card-w: min(320px, 80vw); }

.skin-card {
  position: relative;
  flex: 0 0 var(--card-w);
  scroll-snap-align: center;
  padding-bottom: 6px;
}
/* the widget floats above its launcher pin, as it does in the corner of a site */
.skin-stage { position: relative; padding: 0 30px 34px 0; }
.skin-widget { position: relative; text-align: left; }
.skin-pin {
  position: absolute; right: 0; bottom: 0;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--skin); box-shadow: 0 0 24px color-mix(in srgb, var(--skin) 55%, transparent), 0 10px 24px rgba(0, 0, 0, .5);
  border: 2px solid rgba(11, 18, 17, .6);
}
.skin-pin img { width: 22px; height: auto; display: block; }
.skin-meta { margin-top: 10px; text-align: center; }
.skin-label { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 15px; }
.skin-label em { color: var(--body); opacity: .8; font-style: normal; font-size: 13px; }
.swatch { width: 14px; height: 14px; border-radius: 5px; background: var(--skin); box-shadow: 0 0 14px color-mix(in srgb, var(--skin) 60%, transparent); }
.skin-tier {
  margin: 10px auto 0; display: inline-block;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: rgba(11, 18, 17, .7); border: .8px solid color-mix(in srgb, var(--skin) 40%, transparent);
  color: var(--body); font-size: 12px; letter-spacing: .01em;
}

/* With JavaScript: the arc. Planets' selector: the chosen one centre and large, the
   neighbours smaller, further out and higher on a shallow bowl. Cards are placed by
   transform only; the section's ground and the two chevrons take the live colour. */
.js .skin-track {
  display: block; overflow: visible;
  /* The mask clips to the track's box, so the track needs headroom: the neighbours rise 47 px
     and every card carries a 46 px glow. Cards start 94 px down; without that the glows and
     the raised neighbours were cut by a hard line at the track's top edge (Justin, 7 Sept). */
  height: var(--arc-h, 480px);
  padding: 0; margin-inline: calc(50% - 50vw);
  scroll-snap-type: none;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.js .skin-card {
  position: absolute; left: 50%; top: 60px;
  width: var(--card-w); margin-left: calc(var(--card-w) / -2);
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) scale(var(--s, 1));
  opacity: var(--o, 1);
  transition: transform .6s var(--ease), opacity .6s var(--ease);
  will-change: transform, opacity;
}
.js .skin-card:not(.is-live) { pointer-events: none; }
.js .skin-meta { opacity: 0; transition: opacity .35s var(--ease); }
.js .skin-card.is-live .skin-meta { opacity: 1; transition-delay: .2s; }

.skin-controls { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 0; }
.skin-dots { display: flex; gap: 6px; }
.skin-dots button {
  width: 32px; height: 32px; border-radius: 3px; border: 0; cursor: pointer;
  padding: 14px 2px; background-clip: content-box;
  background-color: rgba(211, 226, 221, .22); transition: background-color .3s var(--ease);
}
.skin-dots button.is-on { background-color: var(--dot, var(--accent-lift)); }
.skin-hint { color: var(--body); font-size: 12px; opacity: .75; }

/* Inside the carousel the ground is tinted, so the muted token is not used here. */
.skins-foot { margin: 34px auto 0; max-width: 560px; text-align: center; color: var(--body); font-size: 13px; }

/* ---------------------------------------------------------------- pricing */

.vat-toggle { margin: 30px auto 0; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); font-size: 13px; }
.seg {
  display: inline-flex; align-items: center; gap: 2px;
  margin: 0; padding: 3px; border-radius: var(--r-pill);
  background: var(--surface); border: var(--hairline); box-shadow: var(--lip);
}
.seg legend { float: left; padding: 0 12px 0 10px; line-height: 34px; color: var(--muted); }
.seg input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.seg label {
  font-size: 13px; padding: 7px 14px; border-radius: var(--r-pill);
  color: var(--muted); cursor: pointer; user-select: none;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.seg input:checked + label { background: var(--accent); color: var(--page); font-weight: 600; }
.seg input:focus-visible + label { outline: 2px solid var(--accent-lift); outline-offset: 2px; }

/* The switch itself is CSS: both figures are in the HTML and this only chooses
   which one is displayed, so it works with JavaScript off. */
html:has(#vat-inc:checked) [data-ex] { display: none !important; }
html:has(#vat-inc:checked) [data-inc] { display: inline !important; }

/* ONE grid, each column a tier card. border-spacing gives the gap between the column cards;
   every cell of a column carries the card's side borders and ground, the header its top and the
   last row its bottom, so the column reads as one card while the rows stay a real table. */
/* the 14 px column gap is absorbed by the WRAP's negative margin, so the table is never wider
   than its scroll container: a table wider than the wrap by 28 px gave a permanent horizontal
   scrollbar at every width (Justin, 7 Sept) */
/* overflow-y hidden, with padding to spare: `overflow-x: auto` alone makes the other axis auto
   too, and the rows arriving 12 px low put a vertical scrollbar on the grid until the wave had
   finished (Justin, 7 Sept) */
.tiers-wrap { margin: 36px -14px 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 20px; }
.tiers {
  width: 100%; min-width: 900px;
  border-collapse: separate; border-spacing: 14px 0;
  font-size: 14px; color: var(--body);
  --card-bg: rgba(24, 33, 31, .55);
  --card-line: rgba(41, 151, 113, .18);
  --card-bg-hi: rgba(28, 44, 40, .72);
  --card-line-hi: rgba(41, 151, 113, .55);
}
.tiers th, .tiers td { text-align: left; vertical-align: top; padding: 12px 18px; }
.tiers .row-label, .tiers th[scope="row"] { width: 17%; min-width: 148px; padding-left: 0; padding-right: 10px; color: var(--body); font-weight: 500; line-height: 1.4; }
.tiers th[scope="row"] { padding-top: 14px; }
.fn-mark { display: inline-grid; place-items: center; min-width: 24px; min-height: 24px; margin: -4px 0 -4px -2px; color: var(--accent-lift); text-decoration: none; font-weight: 700; }

/* the column card */
.tiers .tier { background: var(--card-bg); border-left: .8px solid var(--card-line); border-right: .8px solid var(--card-line); }
.tiers thead .tier { position: relative; border-top: .8px solid var(--card-line); border-radius: var(--r-panel) var(--r-panel) 0 0; padding: 36px 18px 18px; vertical-align: top; }
.tiers tbody tr:last-child .tier { border-bottom: .8px solid var(--card-line); border-radius: 0 0 var(--r-panel) var(--r-panel); padding-bottom: 22px; }
.tiers tbody .tier { border-top: .8px solid rgba(51, 68, 65, .55); }
.tiers tbody .row-price .tier { border-top: 0; padding-top: 6px; }
/* Enhanced is visibly the default */
.tiers .tier.is-featured { background: var(--card-bg-hi); border-left-color: var(--card-line-hi); border-right-color: var(--card-line-hi); }
.tiers thead .tier.is-featured { border-top-color: var(--card-line-hi); }
.tiers tbody tr:last-child .tier.is-featured { border-bottom-color: var(--card-line-hi); box-shadow: inset 0 -14px 34px rgba(41, 151, 113, .18); }

/* the column header: name and who it is for */
/* the tag sits in the header's top band, so every tier name lines up across the row */
.tier-tag { position: absolute; top: 13px; left: 18px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-lift); }
.tier-name { display: block; color: var(--ink); font-size: 20px; font-weight: 600; line-height: 1.2; }
.tier-for { display: block; margin-top: 8px; color: var(--body); opacity: .85; font-size: 13px; line-height: 1.45; font-weight: 400; }

/* the price block: list price struck, the introductory price standing out */
.row-price .was { display: block; color: var(--muted); font-size: 15px; text-decoration-color: rgba(123, 138, 134, .8); }
.row-price .now { display: block; margin-top: 2px; color: var(--ink); font-size: clamp(30px, 2.6vw, 38px); line-height: 1.05; font-weight: 700; letter-spacing: -.02em; }
.row-price .now small { font-size: 14px; font-weight: 400; color: var(--muted); }
.row-price .was + .now { color: var(--accent-lift); text-shadow: 0 0 22px rgba(63, 191, 144, .45); }
.row-price .per { display: block; margin-top: 6px; color: var(--body); font-size: 13px; line-height: 1.35; }
.row-price .tier { padding-bottom: 16px; }

.tick { color: var(--accent-lift); font-weight: 600; }
.no { color: var(--muted); }
.row-cta .tier { padding-top: 18px; }
.row-cta .btn { width: 100%; font-size: 14px; padding: 12px 6px; white-space: nowrap; }

.footnotes { margin: 22px auto 0; max-width: 760px; display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.footnotes li { padding-left: 0; }
.footnotes li:first-child { color: var(--body); }

@media (max-width: 620px) {
  .tiers { min-width: 860px; }
  .tiers .row-label, .tiers th[scope="row"] { position: sticky; left: 0; z-index: 2; background: var(--page); min-width: 140px; width: 150px; padding-right: 12px; }
  .tiers th[scope="row"] { box-shadow: 8px 0 12px -8px rgba(0, 0, 0, .7); }
}

/* ---------------------------------------------------------------- footer */

/* padding-block only: the rail breakpoint sets padding-left on the footer, and a shorthand
   here reset it to 0, which put the footer's lockup under the rail's button (Justin, 7 Sept) */
.foot { position: relative; border-top: .8px solid var(--rule); padding-block: 40px 56px; }
/* the real assistant's launcher is fixed bottom-right; the footer keeps clear of it */
.foot-inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-right: 108px; }
.lockup-foot { height: 22px; }
/* At desktop the footer's lockup sits in the rail's column, bottom-left, at the rail lockup's
   size, and app.js lifts the rail's button so it always stays above the footer's top rule
   (Justin, 7 Sept: the button from the bottom up to above the bar, the mark into the corner). */
@media (min-width: 1024px) and (orientation: landscape) {
  /* the footer's rule starts where the content does, so the rail reads as one column to the bottom */
  .foot { border-top: 0; }
  .foot::before { content: ""; position: absolute; left: var(--rail-w); right: 0; top: 0; border-top: .8px solid var(--rule); }
  .rail-inner { overflow-y: auto; scrollbar-width: none; }
  .foot-inner .brand { position: absolute; left: 30px; top: 50%; translate: 0 -50%; }
  .lockup-foot { height: 30px; }
  .foot-links { margin-inline: 0 auto; }
  .rail-cta { transition: box-shadow .25s var(--ease); will-change: transform; }
}
.foot-links { display: flex; gap: 22px; margin-inline: auto; }
.foot-links a { color: var(--muted); text-decoration: none; font-size: 14px; padding: 10px 0; display: inline-block; }
.foot-links a:hover { color: var(--ink); }
.foot-note { color: var(--muted); font-size: 12px; }

/* ---------------------------------------------------------------- motion
   Hero: the five-step load stagger as CSS keyframes, so it runs with JavaScript off.
   Below the fold: `.arrive` elements are visible by default. JavaScript marks only the
   ones still below the viewport at load as waiting, and reveals them in order as they
   come into view. Nothing is ever hidden by CSS alone, so no scroll mechanism can
   strand a paragraph. */

@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .stage-1, .stage-2, .stage-3, .stage-4, .stage-5 {
    animation: rise .8s var(--ease) both;
  }
  .stage-1 { animation-delay: .05s; }
  .stage-2 { animation-delay: .16s; }
  .stage-3 { animation-delay: .28s; }
  .stage-4 { animation-delay: .40s; }
  .stage-5 { animation-delay: .54s; }

  /* Waves: the three cards arrive one at a time left to right, the price rows one at a time
     top to bottom. The per-element delay is data-step times the wave's step, set inline by
     app.js, so the same rule serves both waves. Table rows take transform in every current
     browser, so a <tr> can arrive like any other block. */
  /* a long, soft fade: 1.1 s with the page's ease, so a block is seen arriving rather than
     found already there (Justin, 7 Sept: "they seem to just appear") */
  .arrive { transition: opacity 1.1s cubic-bezier(.33, .02, .2, 1), transform 1.1s cubic-bezier(.33, .02, .2, 1); transition-delay: var(--arrive-delay, 0s); }
  .arrive.is-waiting { opacity: 0; transform: translate3d(0, 22px, 0); }
  .beat.arrive.is-waiting { transform: translate3d(0, 34px, 0); }
  tr.arrive.is-waiting { transform: translate3d(0, 12px, 0); }
}

/* Reduced motion: nothing animates and nothing eases. The skin swap becomes
   instant, the object stands still, nothing waits to arrive. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .skin-track { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .arrive.is-waiting { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .beat-grid { grid-template-columns: 1fr; gap: 20px; }
  .section { padding: 76px 0; }
  .hero { padding: 116px 0 24px; }
  .stage-panel { aspect-ratio: 4 / 5; }
  .widget { width: min(320px, 86%); }
  .site-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  :root { --gutter: 20px; }
  .chips { flex-direction: column; align-items: stretch; }
  .btn-chip { text-align: center; }
  .stage { margin-top: 40px; }
  .stage-panel { aspect-ratio: 3 / 4; }
  .price { font-size: 38px; }
  .foot-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .foot-links { margin-inline: 0; flex-wrap: wrap; }
  .skin-track, .arc { --card-w: min(300px, 78vw); }
  .js .skin-track { --arc-h: 490px; }
  .skins { padding: 48px 0 40px; }
  .chev-prev { left: 4px; }
  .chev-next { right: 4px; }
  .rail-cta { padding: 12px 14px; font-size: 13px; }
  .btn-chip { padding: 13px 18px; }
  .rail-sub { display: none; }
  .rail-inner { justify-content: space-between; }
  .lockup { height: 30px; }   /* was 22 and read as small (Justin, 10 Sept) */
  .eyebrow { font-size: 13px; letter-spacing: .16em; }
  /* The down-glow read GREY on a phone (Justin, 10 Sept). The green core is 108vw wide and
     sits 300 px above the fold, so almost none of it is on screen, while the three white
     beams run the full height and win. Widen and lower the green, and take the white down. */
  .glow-circle { width: min(820px, 170vw); top: -230px; }
  .light { opacity: .3; }
  .light-mid { opacity: .18; }
  /* the mark now sits behind this paragraph from the first frame, which lifts the ground
     under it, so the sub goes to body colour: muted would measure about 3.5:1 over it */
  .hero-sub { color: var(--body); }
  /* The mark is NOT in the phone hero. At 390 px there is no room for a lit object beside the
     copy: put it in a band of its own and the band reads as empty, put it alongside and it
     covers the headline or runs off the edge. Both were reported (Justin, 10 Sept). On a phone
     it starts invisible and rises as you scroll, doing its real job behind the three cards. */
  /* the three demo cards stack on a phone, which kills the comparison: one card at a time
     with a business switcher instead (Justin, 10 Sept: "doesn't work on the mobile phone") */
  .demo-grid { grid-template-columns: 1fr; }
  .js .demo-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .demo-tab { font-size: 12px; padding: 8px 6px; line-height: 1.3; }
  .js .demo-card { display: none; }
  .js .demo-card.is-shown { display: flex; }
  /* six chips wrapping one per row ate most of a screen */
  .demo-chips { margin-top: 24px; gap: 8px; }
  .demo-chips .btn-chip { font-size: 13px; padding: 10px 13px; min-height: 40px; }
  .handoff-label { margin-top: 18px; font-size: 14px; }
  .demos .section-sub.wide + .section-sub.wide { margin-top: 10px; }
}

/* Collapsed rail (narrow or portrait): the object gets its own band above the copy, so
   it never sits under the headline. Last in the file so it wins over the width rules. */
@media (max-width: 1023px), (orientation: portrait) {
  /* 204 left a dead band under the bar. The mark now sits to the right of the badge rather
     than in a band of its own, so the whole hero lifts and the chips clear the launcher. */
  .hero { padding-top: 96px; }
}

/* ================================================================ the rest of the site, 8 Sept
   Seven new sections and four pages, in the same system: same tokens, same surfaces, the same
   arrival waves, the motion budget still spent at the top of the page. */

/* shared: a copy column beside an asset, stacking on narrow screens */
.two-up { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; }
.two-up-rev .two-up-copy { order: 2; }
.two-up-copy .eyebrow { margin-bottom: 14px; }
.section-title.left, .two-up-copy .section-title { text-align: left; max-width: none; }
.lede { margin-top: 18px; color: var(--body); font-size: 17px; line-height: 1.6; max-width: 34em; }
.lede-2 { margin-top: 14px; color: var(--muted); font-size: 15px; max-width: 34em; }
.section-sub.wide { max-width: 720px; color: var(--body); }
@media (max-width: 900px) {
  .two-up { grid-template-columns: 1fr; gap: 28px; }
  .two-up-rev .two-up-copy { order: 0; }
}

/* an email shown as real HTML text: a light card on the dark page */
.email-frame {
  border-radius: var(--r-panel);
  background: #F1F7F5;
  border: .8px solid rgba(211, 226, 221, .18);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(41, 151, 113, .12);
  overflow: hidden;
}
.email-scroll { max-height: 640px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.email-scroll table { font-variant-numeric: tabular-nums; }
/* rows beyond Enhanced fade; the caption row above them stays sharp */
.email-scroll tr.fe-fade { opacity: .38; }
.email-placeholder {
  min-height: 320px; display: grid; place-items: center;
  background: var(--tint); border: .8px solid var(--rule); box-shadow: none;
}
.placeholder-tag { color: var(--muted); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-align: center; padding: 20px; }
.disclosure { margin-top: 18px; color: var(--muted); font-size: 13px; max-width: 34em; }

/* the demo trio */
/* the business switcher: phone only, and only with JavaScript. Without it all three cards
   read one after another, which is the no-JS fallback the section always had. */
.demo-tabs { display: none; margin-top: 20px; gap: 8px; justify-content: center; flex-wrap: wrap; }
.demo-tab {
  flex: 1 1 auto; min-height: 44px; padding: 10px 12px;
  border-radius: var(--r-pill); border: var(--hairline);
  background: var(--surface); color: var(--body);
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.demo-tab.is-on { color: var(--ink); border-color: rgba(41, 151, 113, .55); box-shadow: inset 0 -8px 20px rgba(41, 151, 113, .22); }

.demo-chips { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.demo-chips .btn-chip { padding: 12px 16px; min-height: 44px; font-size: 14px; }
.demo-chips .btn-chip.is-on {
  border-color: rgba(41, 151, 113, .6);
  box-shadow: inset 0 -10px 26px rgba(41, 151, 113, .3), 0 0 22px rgba(41, 151, 113, .18);
}
/* always visible (Justin, 8 Sept): it is the line that makes people click the last question */
.handoff-label { margin: 22px auto 0; max-width: 640px; text-align: center; color: var(--body); font-size: 15px; }
/* the three cards share one row height, and every exchange in a card sits in the same grid
   cell, so switching questions never changes a card's height and the page never jumps */
.demo-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.demo-card {
  display: flex; flex-direction: column;
  background: #0B1211; border: .8px solid rgba(41, 151, 113, .3); border-radius: 18px;
  box-shadow: 0 0 46px rgba(41, 151, 113, .14), 0 24px 48px rgba(0, 0, 0, .5);
  overflow: hidden; text-align: left;
}
.demo-note {
  margin-top: auto; padding: 10px 14px 12px;
  border-top: .8px solid rgba(51, 68, 65, .6);
  color: var(--body); opacity: .85; font-size: 12px; line-height: 1.5;
}
.demo-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: .8px solid rgba(51, 68, 65, .6); }
.demo-biz { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.2; }
.demo-letterhead { display: block; color: var(--muted); font-size: 11px; font-weight: 400; letter-spacing: .02em; }
.demo-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.demo-x { display: flex; flex-direction: column; gap: 8px; }
.demo-x + .demo-x { padding-top: 12px; border-top: .8px dashed rgba(51, 68, 65, .6); }
.js .demo-body { display: grid; flex: 1 0 auto; }
.js .demo-x { grid-area: 1 / 1; align-self: start; visibility: hidden; opacity: 0; transition: opacity .35s var(--ease), visibility 0s .35s; }
.js .demo-x.is-on { visibility: visible; opacity: 1; transition-delay: 0s; }
.js .demo-x + .demo-x { padding-top: 0; border-top: 0; }
.demo-q {
  align-self: flex-end; max-width: 90%;
  margin: 0; font-size: 13px; line-height: 1.5; font-weight: 500;
  padding: 9px 12px; border-radius: 14px; border-bottom-right-radius: 5px;
  background: var(--accent); color: #08100E;
}
.demo-card .bubble-bot { font-size: 13px; }
.handoff-state {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  margin-top: 2px; padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(41, 151, 113, .12); border: .8px solid rgba(41, 151, 113, .4);
  color: var(--accent-lift); font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.handoff-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-lift); box-shadow: 0 0 10px var(--accent-lift); }
@media (max-width: 1080px) { .demo-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* the framing questions under the demos */
.framing { margin: 56px auto 0; max-width: 820px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
.framing-q h3 { font-size: 17px; line-height: 1.3; font-weight: 600; }
.framing-q p { margin-top: 8px; color: var(--body); font-size: 14px; line-height: 1.6; }
@media (max-width: 720px) { .framing { grid-template-columns: 1fr; } }

/* what it will not do */
.wont-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.wont-list { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.wont-list li {
  position: relative; padding: 16px 18px 16px 44px;
  background: var(--surface); border: var(--hairline); border-radius: var(--r-panel); box-shadow: var(--lip);
  color: var(--ink); font-size: 15px; line-height: 1.5;
}
.wont-list li::before {
  content: ""; position: absolute; left: 18px; top: 22px; width: 12px; height: 2px; border-radius: 1px;
  background: var(--accent-lift); box-shadow: 0 0 10px rgba(63, 191, 144, .6);
}
.wont-second { padding-top: 46px; }
.roadmap { margin: 44px auto 0; max-width: 620px; text-align: center; color: var(--muted); font-size: 14px; }
@media (max-width: 900px) { .wont-grid { grid-template-columns: 1fr; gap: 32px; } .wont-second { padding-top: 0; } }

/* how it works */
.steps { margin-top: 44px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step {
  padding: 26px 24px 24px;
  background: var(--surface); border: var(--hairline); border-radius: var(--r-card); box-shadow: var(--lip);
}
.step-num {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--page); font-weight: 700; font-size: 15px;
  box-shadow: 0 0 18px rgba(41, 151, 113, .5);
}
.step-title { margin-top: 16px; font-size: 18px; line-height: 1.3; }
.step-body { margin-top: 8px; color: var(--body); font-size: 14px; }
.ownership { margin: 34px auto 0; max-width: 620px; text-align: center; color: var(--ink); font-size: 17px; }
.option { margin: 14px auto 0; max-width: 620px; text-align: center; color: var(--muted); font-size: 14px; }
@media (max-width: 1080px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .steps { grid-template-columns: 1fr; } }

/* questions */
.qa-list { margin: 40px auto 0; max-width: 760px; display: flex; flex-direction: column; gap: 22px; }
.qa { padding: 22px 26px; background: var(--surface); border: var(--hairline); border-radius: var(--r-panel); box-shadow: var(--lip); }
.qa h3 { font-size: 18px; line-height: 1.3; font-weight: 600; }
.qa p { margin-top: 10px; color: var(--body); font-size: 15px; line-height: 1.6; }
/* on the main page the five boxes are collapsed to their question; the chevron at the right
   end opens the answer. Native details/summary, so it works with JavaScript off and every
   answer is in the HTML at first byte. */
details.qa { padding: 0; }
details.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 22px 20px 26px; cursor: pointer; list-style: none;
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary h3 { flex: 1; }
details.qa summary:hover h3 { color: var(--accent-lift); }
details.qa summary:focus-visible { outline: 2px solid var(--accent-lift); outline-offset: -2px; border-radius: var(--r-panel); }
.qa-chevron {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(11, 18, 17, .82); border: var(--hairline);
  position: relative; transition: transform .35s var(--ease), border-color .25s var(--ease);
}
.qa-chevron::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; border-right: 2px solid var(--accent-lift); border-bottom: 2px solid var(--accent-lift);
  translate: -50% -70%; rotate: 45deg;
}
details.qa[open] .qa-chevron { transform: rotate(180deg); border-color: rgba(41, 151, 113, .5); }
details.qa > p { margin: 0; padding: 0 70px 22px 26px; }
/* the /faq page wraps multi-paragraph answers and the HELD tag in .qa-body */
details.qa .qa-body { padding: 0 70px 22px 26px; }
details.qa .qa-body p { margin: 0; }
details.qa .qa-body p + p { margin-top: 10px; }
.faq-group details.qa { margin-top: 12px; }
@media (max-width: 620px) { details.qa > p, details.qa .qa-body { padding-right: 26px; } }
.faq-more { margin-top: 26px; text-align: center; }
.more-link { display: inline-block; padding: 12px 4px; min-height: 44px; color: var(--accent-lift); text-decoration: none; font-size: 15px; font-weight: 600; }
.more-link:hover { color: var(--ink); }

/* get in touch */
.contact-sub { margin-top: 8px; color: var(--accent-lift); font-size: 18px; font-weight: 500; }
.contact .lede a { color: var(--ink); }
.contact-cta { margin-top: 26px; }
.btn-big { font-size: 17px; padding: 15px 26px; }
.contact-lines { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.contact-line { color: var(--body); text-decoration: none; font-size: 15px; padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; }
.contact-form .btn { min-height: 44px; }
.contact-line:hover { color: var(--ink); }
.contact-form {
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px; background: var(--surface); border: var(--hairline); border-radius: var(--r-card); box-shadow: var(--lip);
}
.field { display: flex; flex-direction: column; gap: 6px; color: var(--body); font-size: 13px; }
.field input, .field textarea {
  font: inherit; font-size: 15px; color: var(--ink);
  padding: 11px 14px; border-radius: 10px;
  background: var(--tint); border: .8px solid rgba(51, 68, 65, .8);
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent-lift); outline-offset: 1px; border-color: transparent; }
.field textarea { resize: vertical; min-height: 110px; }
.form-note { color: var(--muted); font-size: 12px; }

/* footer legal */
/* the registered company details live on /company (noindex), one click from every footer */
.foot-company { color: var(--body); text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; }
.foot-company:hover { color: var(--ink); }

/* ================================================================ pages: about, faq, privacy, terms */
.page { padding: 132px 0 80px; }
.page-inner { max-width: 760px; }
.page-title { font-size: clamp(1.9rem, 3.6vw, 2.75rem); line-height: 1.12; }
.page-lede { margin-top: 12px; color: var(--muted); font-size: 16px; }
.prose { margin-top: 32px; color: var(--body); font-size: 16px; line-height: 1.7; }
.prose h1 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); line-height: 1.12; }
.prose h2 { margin-top: 38px; font-size: 22px; line-height: 1.3; }
.prose h3 { margin-top: 26px; font-size: 18px; line-height: 1.3; font-weight: 600; }
.prose p { margin-top: 14px; }
.prose ul { margin-top: 12px; padding-left: 22px; list-style: disc; }
.prose li { margin-top: 8px; }
.prose li::marker { color: var(--accent-lift); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent-lift); }
mark.held, .held { background: rgba(224, 102, 43, .18); color: var(--ink); border: .8px solid rgba(224, 102, 43, .5); border-radius: 6px; padding: 0 6px; }
.held-note { margin-top: 10px; display: inline-block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
/* the text wraps around the photo (Justin, 8 Sept) */
.about-grid { margin-top: 32px; }
.about-grid::after { content: ""; display: block; clear: both; }
.about-grid .prose { margin-top: 0; }
.headshot { float: left; width: 250px; max-width: 45%; height: auto; margin: 6px 32px 14px 0; border-radius: 18px; border: .8px solid rgba(41, 151, 113, .3); box-shadow: 0 0 46px rgba(41, 151, 113, .18), 0 24px 48px rgba(0, 0, 0, .5); }
.about-grid .prose p:first-child { margin-top: 0; }
@media (max-width: 720px) { .headshot { width: 160px; margin: 4px 18px 8px 0; } }
.faq-group { margin-top: 40px; }
.faq-group h2 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-lift); font-weight: 500; }
.faq-group .qa { margin-top: 16px; }
.terms-shell { margin-top: 32px; padding: 40px; text-align: center; background: var(--tint); border: .8px solid var(--rule); border-radius: var(--r-panel); }
@media (max-width: 620px) { .page { padding: 110px 0 60px; } .foot-legal { padding-right: 0; } }

/* short pages: the footer sits at the bottom of the screen, not mid-page */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }