/* BotsOnDeck Paper system. Pass CURSOR-CRAFT-1.
   Full-bleed bands alternating Paper and Pit, launch-page rhythm.
   CURSOR-CRAFT: the hero is a centered cinematic stack, huge locked
   line over a quiet waitlist, with the living HERO-ALIVE draft fixture
   as the page's star demo and three sparse beats under it. Type scale
   and band air raised across the page; demo, capability, demo rhythm.
   Tokens: Paper #F6F4EF, ink #111111, mute #6B6560, hold #C47A2C.
   Pit bands: #0B0B0C with light ink #F3F1EC, mute #8A8680.
   Amber (hold) appears only on approve, waiting, the dashed seal,
   and the You step. Nowhere else. No second accent, no gradients. */

:root {
  --bg: #F6F4EF;
  --ink: #111111;
  --mute: #6B6560;
  --hold: #C47A2C;
  --pit: #0B0B0C;
  --pit-ink: #F3F1EC;
  --pit-mute: #8A8680;
  --pit-line: rgba(243, 241, 236, 0.16);
  --pit-line-soft: rgba(243, 241, 236, 0.09);
  --line: rgba(17, 17, 17, 0.16);
  --line-soft: rgba(17, 17, 17, 0.08);
  --card: #FCFBF7;
  --head-h: 4rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; /* FONT-1 (15 Sep 2026): system stack on purpose; the self-hosted Inter files were never in the folder */
  font-size: 1.125rem;
  line-height: 1.6;
}

a { color: var(--ink); text-underline-offset: 3px; }
a:hover, a:focus { text-decoration-color: var(--ink); }

:focus-visible { outline: 2px solid var(--hold); outline-offset: 3px; }

::selection { background: var(--ink); color: var(--bg); }
.band--pit ::selection { background: var(--pit-ink); color: var(--pit); }

/* ---- Layout: full-bleed bands, wide content ---- */

.content {
  max-width: 71rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.content--narrow { max-width: 46rem; }

.band { padding: clamp(6rem, 16vh, 11.5rem) 0; }
.band--tall {
  min-height: 86vh;
  min-height: 86svh;
  display: flex;
  align-items: center;
}
.band > .content { width: 100%; }

/* Deep ink band: light ink on near-black, like a hardware section */
.band--pit {
  background: var(--pit);
  color: var(--pit-ink);
}
.band--pit a { color: var(--pit-ink); }
.band--pit .mute,
.band--pit .micro,
.band--pit .kicker,
.band--pit .sub,
.band--pit .support,
.band--pit .eyebrow { color: var(--pit-mute); }

/* Soft card tint for quiet paper moments */
.band--tint { background: var(--card); }

/* ---- Cinematic hero: centered stack, demo-first ----
   Launch-page composition: kicker, the huge locked line, one claim,
   a quiet waitlist, then the living draft fixture as the star demo
   with three sparse beats under it. The fixture crests the fold at
   1440x900 so the first scroll lands on the product. */

.band--hero {
  padding: clamp(2.5rem, 5.5vh, 4.5rem) 0 clamp(5.5rem, 12vh, 9rem);
}

.hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-stack > p { margin-left: auto; margin-right: auto; }
.hero .kicker { margin-bottom: 0.3rem; }
.hero .display {
  max-width: 17ch;
  margin: 0.24em auto 0.26em;
}
.hero .hero-sub {
  max-width: 46rem;
  margin-bottom: 0.3rem;
}
.hero .micro { max-width: none; }
.hero .wl-form { justify-content: center; margin-top: 1.2rem; margin-bottom: 0.7rem; }
.hero .cta-row { justify-content: center; margin-top: clamp(2.2rem, 5vh, 3.4rem); }
.hero .wl-note { margin-left: auto; margin-right: auto; }

/* The star demo: the living draft card, big and centered in space.
   Its top edge crests the fold at 1440x900: the first scroll lands
   on the product. */
.hero-fixture {
  margin: clamp(2.6rem, 6vh, 4rem) auto 0;
  width: 100%;
  max-width: 46rem;
}
@media (min-width: 720px) {
  .hero-fixture .device-bar { padding: 0.78rem 1.4rem; font-size: 0.875rem; }
  .hero-sheet { margin: 1.4rem 1.4rem 0; padding: 1.5rem 1.7rem 2.7rem; }
  .hero-sheet-title { font-size: clamp(1.25rem, 1.8vw, 1.6rem); }
  .hero-sheet p { font-size: 1rem; padding-right: 4rem; }
  .hero-sheet .hero-photos-note { padding-right: 0; }
  .hero-sheet .seal { width: 6rem; height: 6rem; font-size: 0.875rem; right: -1rem; bottom: -1.15rem; }
  .hero-rail { padding: 1.05rem 1.4rem 1.2rem; font-size: 0.88rem; }
  .hero-rail .chip { font-size: 0.875rem; padding: 0.4rem 1rem; }
  .hero-openbar { font-size: 0.875rem; padding: 0.7rem 1.4rem 0.8rem; }
}

/* Three sparse beats under the demo: SuperGrok, the job, the seat */
.hero-beats {
  list-style: none;
  margin: clamp(3.5rem, 8vh, 5.5rem) auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem 3rem;
  max-width: 62rem;
  width: 100%;
  text-align: left;
}
.hero-beats li {
  border-top: 1px solid var(--line);
  padding-top: 1.05rem;
  color: var(--mute);
  font-size: 1.125rem;
  line-height: 1.55;
  max-width: none;
}
.hero-beats strong {
  display: block;
  color: var(--ink);
  font-size: 1.18rem;
  letter-spacing: -0.015em;
  font-weight: 650;
  margin-bottom: 0.3rem;
}
@media (max-width: 719px) {
  .hero-beats { grid-template-columns: 1fr; gap: 1.7rem; }
}

p, li { max-width: 62ch; }

#plugin, #dial, #packs { scroll-margin-top: calc(var(--head-h) + 1rem); }

/* ---- Sticky thin translucent nav ---- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(246, 244, 239, 0.9);
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-head {
    background: rgba(246, 244, 239, 0.72);
    -webkit-backdrop-filter: saturate(1.6) blur(18px);
    backdrop-filter: saturate(1.6) blur(18px);
  }
}
.head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--head-h);
}
.wordmark {
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.site-nav { display: flex; align-items: center; gap: clamp(0.9rem, 2.4vw, 1.6rem); }
.site-nav a {
  color: var(--mute);
  text-decoration: none;
  font-size: 1.04rem;
  white-space: nowrap;
}
.site-nav a:hover, .site-nav a:focus { color: var(--ink); }
.site-nav .nav-join {
  color: var(--bg);
  background: var(--ink);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-weight: 600;
}
.site-nav .nav-join:hover, .site-nav .nav-join:focus { color: var(--bg); background: #2A2A2A; }

@media (max-width: 519px) {
  .head-row { min-height: 2.75rem; }
  .wordmark { font-size: 1rem; }
  .site-nav { gap: 0.7rem; }
  .site-nav a { font-size: 1rem; }
  .site-nav .nav-join { padding: 0.4rem 0.9rem; }
}

/* ---- Type: display class 64 to 96px on desktop ---- */

h1, h2, h3 { margin: 0; text-wrap: balance; }

.display {
  font-size: clamp(2.8rem, 1.55rem + 5.2vw, 6rem);
  line-height: 0.99;
  letter-spacing: -0.042em;
  font-weight: 700;
  margin: 0.32em 0 0.34em;
}
.display-2 {
  font-size: clamp(2.2rem, 1.2rem + 3.9vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.036em;
  font-weight: 700;
  margin: 0.3em 0 0.4em;
}
.display-3 {
  font-size: clamp(1.7rem, 1.05rem + 2.4vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0 0 0.4em;
}
.statement + .display-3 { margin-top: clamp(4rem, 10vh, 6.5rem); }
h3 { font-size: 1.15rem; letter-spacing: -0.01em; margin-bottom: 0.3rem; }

.eyebrow {
  color: var(--mute);
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}
.kicker {
  color: var(--mute);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 600;
  margin: 0;
}
.sub {
  color: var(--mute);
  font-size: clamp(1.125rem, 1.7vw, 1.38rem);
  line-height: 1.5;
  margin: 0 0 1.4rem;
}
.support {
  color: var(--mute);
  font-size: clamp(1.125rem, 1.5vw, 1.28rem);
  margin: 0 0 2.6rem;
}
.mute { color: var(--mute); }
.micro { color: var(--mute); font-size: 0.95rem; }

.statement {
  font-size: clamp(1.8rem, 1rem + 3.1vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 650;
  max-width: 26ch;
  margin: 0;
}

/* Centered hero and centered section heads */
.center { text-align: center; }
.center .sub, .center .support, .center .statement, .center p { margin-left: auto; margin-right: auto; }
.center .wl-form { justify-content: center; }
.hero-sub { max-width: 44rem; }

/* Quiet aside line (how-it-works closing band) */
.follow-line {
  max-width: 41rem;
  margin: 1rem auto 0;
  color: var(--mute);
  font-size: clamp(1.125rem, 1.35vw, 1.2rem);
  line-height: 1.5;
}
.band--pit .follow-line { color: var(--pit-mute); }
.center .follow-line { margin-left: auto; margin-right: auto; }

/* ---- Buttons and forms ---- */

.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 0.74rem 1.5rem;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover, .btn:focus { background: #2A2A2A; }
.band--pit .btn {
  background: var(--pit-ink);
  color: var(--pit);
  border-color: var(--pit-ink);
}
.band--pit .btn:hover, .band--pit .btn:focus { background: #FFFFFF; }
.quiet {
  color: var(--ink);
  font-weight: 500;
}
.band--pit .quiet { color: var(--pit-ink); }

.wl-form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 1.9rem 0 0.8rem;
}
.wl-form input[type="email"] {
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.68rem 1.15rem;
  min-width: 16rem;
  flex: 0 1 21rem;
}
.wl-form input[type="email"]:focus { outline: none; border-color: var(--ink); }
.wl-form input[type="email"]::placeholder { color: var(--mute); }
.band--pit .wl-form input[type="email"] {
  color: var(--pit-ink);
  background: rgba(243, 241, 236, 0.06);
  border-color: var(--pit-line);
}
.band--pit .wl-form input[type="email"]:focus { border-color: var(--pit-ink); }
.band--pit .wl-form input[type="email"]::placeholder { color: var(--pit-mute); }

.wl-note {
  border: 1px dashed var(--line);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  color: var(--ink);
  max-width: 34rem;
}
.band--pit .wl-note { border-color: var(--pit-line); color: var(--pit-ink); }
.center .wl-note { margin-left: auto; margin-right: auto; }
.cta-row {
  display: flex;
  align-items: center;
  justify-content: inherit;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.center .cta-row { justify-content: center; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Scroll fade-in (subtle, JS-gated, reduced-motion safe) ---- */

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- The loop (lives on a Pit band; only You is warm) ---- */

.loop { position: relative; margin: 4rem auto 0; max-width: 64rem; }
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
  text-align: left;
}
.steps li { position: relative; padding: 2rem 0.6rem 0 0; }
.steps .dot {
  position: absolute;
  top: 0.3rem;
  left: 0;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--ink);
}
.band--pit .steps .dot { background: var(--pit-ink); }
.steps strong {
  display: block;
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  letter-spacing: -0.02em;
}
.steps small {
  display: block;
  color: var(--mute);
  font-size: 1.125rem;
  line-height: 1.5;
  margin-top: 0.3rem;
  max-width: 18rem;
}
.band--pit .steps small { color: var(--pit-mute); }
.steps .you .dot {
  background: inherit;
  border: none;
}
.steps .you strong { color: var(--hold); }

.track {
  position: absolute;
  top: 0.68rem;
  left: 0.4rem;
  right: 25%;
  border-top: 1px dashed var(--line);
}
.band--pit .track { border-top-color: rgba(243, 241, 236, 0.28); }
.flow {
  position: absolute;
  left: 0;
  top: -1px;
  height: 1px;
  background: var(--ink);
  width: 66.67%;
  transition: width 1.6s ease-out;
}
.band--pit .flow { background: var(--pit-ink); }
/* With JS the flow starts empty and grows until it stops at You. */
.js .flow { width: 0; }
.js .loop.play .flow { width: 66.67%; }

@media (prefers-reduced-motion: reduce) {
  .flow { transition: none; }
  .js .flow { width: 66.67%; }
}

@media (max-width: 719px) {
  .track { display: none; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps li { padding: 0 0 1.7rem 1.9rem; }
  .steps li:last-child { padding-bottom: 0; }
  .steps .dot { top: 0.45rem; }
  .steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0.37rem;
    top: 1.5rem;
    bottom: 0.3rem;
    border-left: 1px solid var(--ink);
  }
  .band--pit .steps li:not(:last-child)::after { border-left-color: var(--pit-ink); }
  .steps li.you::after { border-left-style: dashed; border-left-color: var(--line); }
  .band--pit .steps li.you::after { border-left-color: var(--pit-line); }
}

/* ---- Product in space: one dark fixture floating on Paper ---- */

.fixture { margin: 4rem auto 0; max-width: 62rem; }
.device {
  background: var(--pit);
  color: var(--pit-ink);
  border: 1px solid rgba(17, 17, 17, 0.55);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 80px 140px -60px rgba(11, 11, 12, 0.55),
    0 30px 60px -30px rgba(11, 11, 12, 0.35);
  text-align: left;
}
.band--pit .device {
  border-color: var(--pit-line);
  box-shadow: 0 80px 140px -60px rgba(0, 0, 0, 0.9);
}
.device-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.4rem;
  border-bottom: 1px solid var(--pit-line-soft);
  color: var(--pit-mute);
  font-size: 0.875rem;
}
.device-bar strong { color: var(--pit-ink); font-weight: 600; }
.device-body {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 0;
}

.sheet {
  background: var(--card);
  color: var(--ink);
  margin: 1.6rem 0 1.6rem 1.6rem;
  padding: 1.8rem 2rem 2.2rem;
  border-radius: 8px;
  position: relative;
}
.sheet-kicker {
  color: var(--mute);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 0.7rem;
}
.sheet h3 {
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.8rem;
}
.sheet p { font-size: 1rem; line-height: 1.55; margin: 0 0 0.8rem; }
.sheet ul {
  margin: 0;
  padding: 0 0 0 1.1rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--mute);
}

.seal {
  position: absolute;
  right: -1rem;
  bottom: -1rem;
  width: 7rem;
  height: 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px dashed var(--hold);
  border-radius: 50%;
  color: var(--hold);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(-8deg);
  padding: 0.6rem;
  background: rgba(246, 244, 239, 0.92);
}

.rail {
  padding: 1.8rem 1.7rem 1.8rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 1rem;
}
.rail-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--pit-line-soft);
  color: var(--pit-mute);
}
.rail-row b { color: var(--pit-ink); font-weight: 500; }
.rail-row .hold-text { color: var(--hold); }
.rail-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}
.chip {
  display: inline-block;
  border-radius: 999px;
  padding: 0.55rem 1.15rem;
  font-size: 1rem;
  font-weight: 600;
}
.chip-approve { background: var(--hold); color: var(--pit); }
.chip-back {
  border: 1px solid rgba(243, 241, 236, 0.35);
  color: var(--pit-ink);
}
.rail-note { color: var(--pit-mute); font-size: 0.875rem; margin: 1rem 0 0; }

.fixture figcaption {
  color: var(--mute);
  font-size: 0.875rem;
  padding: 1rem 0.2rem 0;
  text-align: center;
}

@media (max-width: 819px) {
  .device-body { grid-template-columns: 1fr; }
  .sheet { margin: 1.2rem 1.2rem 0; }
  .seal { right: 0.6rem; bottom: 0.6rem; width: 6rem; height: 6rem; }
  .rail { padding: 1.4rem 1.2rem 1.6rem; }
}

/* ---- Dial: the flagship add-on band (Pit). Same fixture hardware as
   the seat; amber stays in the approve family only: the dial hold
   ("Call, on hold"), the dashed seal, and the Approve chip. ---- */

.fixture--dial { max-width: 58rem; }
.band--tint .wl-form input[type="email"] { background: #FFFFFF; }

/* ---- Hero derivative of the seat fixture: compact, tilted, floating ---- */

.device--hero {
  border-radius: 16px;
  transform: rotate(-2deg);
  box-shadow:
    0 60px 110px -50px rgba(11, 11, 12, 0.6),
    0 24px 48px -24px rgba(11, 11, 12, 0.38);
}
.device--hero .device-bar { padding: 0.62rem 1.1rem; font-size: 0.875rem; }
.hero-sheet {
  background: var(--card);
  color: var(--ink);
  margin: 1.1rem 1.1rem 0;
  padding: 1.15rem 1.25rem 2.3rem;
  border-radius: 8px;
  position: relative;
  text-align: left;
}
.hero-sheet .sheet-kicker { margin-bottom: 0.5rem; }
.hero-sheet-title {
  color: var(--ink);
  font-weight: 700;
  font-size: clamp(1.08rem, 1.4vw, 1.3rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 0.5rem;
  text-wrap: balance;
}
.hero-sheet p { font-size: 1rem; line-height: 1.5; margin: 0; padding-right: 3.4rem; }
.hero-sheet .seal {
  width: 5rem;
  height: 5rem;
  right: -0.9rem;
  bottom: -1.1rem;
  font-size: 0.875rem;
}
.hero-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.95rem 1.2rem 1.15rem;
  font-size: 0.875rem;
  color: var(--pit-mute);
  text-align: left;
}
.hero-rail .hold-text { color: var(--hold); font-weight: 600; }
.hero-chips { display: flex; gap: 0.5rem; }
.hero-rail .chip { font-size: 0.875rem; padding: 0.32rem 0.8rem; }
.hero-fixture figcaption {
  color: var(--mute);
  font-size: 0.875rem;
  padding: 0.9rem 0.4rem 0;
  text-align: center;
}

/* ---- Facts, who, nots (grids read light on Pit) ---- */

.fact-grid, .nots {
  list-style: none;
  margin: 3.4rem auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.6rem 3.5rem;
  max-width: 58rem;
  text-align: left;
}
.fact-grid li, .nots li {
  border-top: 1px solid var(--line);
  padding-top: 1.15rem;
  color: var(--mute);
}
.band--pit .fact-grid li, .band--pit .nots li {
  border-top-color: var(--pit-line);
  color: var(--pit-mute);
}
.fact-grid strong, .nots strong {
  display: block;
  color: var(--ink);
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}
.band--pit .fact-grid strong, .band--pit .nots strong { color: var(--pit-ink); }
@media (max-width: 719px) {
  .fact-grid, .nots { grid-template-columns: 1fr; gap: 1.9rem; }
}

/* ---- Numbered steps (how it works, guides starters) ---- */

.hiw {
  list-style: none;
  margin: 4rem auto 0;
  padding: 0;
  counter-reset: step;
  max-width: 46rem;
  text-align: left;
}
.hiw > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 3rem 4.8rem;
  color: var(--mute);
}
.band--pit .hiw > li { color: var(--pit-mute); }
.hiw > li:last-child { padding-bottom: 0; }
.hiw > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1rem;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(17, 17, 17, 0.28);
  font-variant-numeric: tabular-nums;
}
.band--pit .hiw > li::before { color: rgba(243, 241, 236, 0.3); }
.hiw > li.hold::before { color: var(--hold); }
.hiw > li.hold > strong { color: var(--hold); }
.hiw strong {
  display: block;
  color: var(--ink);
  font-size: clamp(1.3rem, 1.9vw, 1.55rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.3rem;
}
.band--pit .hiw strong { color: var(--pit-ink); }
.band--pit .hiw a { color: var(--pit-ink); }
@media (max-width: 719px) {
  .hiw > li { padding-left: 3.4rem; }
  .hiw > li::before { font-size: 1.4rem; top: 0.3rem; }
}

/* ---- Grok expectation bands ---- */

.bands {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin: 4rem auto 0;
  max-width: 64rem;
  text-align: left;
}
.band-card { border-top: 1px solid var(--line); padding-top: 1.3rem; }
.band--pit .band-card { border-top-color: var(--pit-line); }
.band-card .amount {
  display: block;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.band-card .per {
  display: block;
  color: var(--mute);
  font-size: 0.95rem;
  margin: 0.5rem 0 1rem;
}
.band--pit .band-card .per { color: var(--pit-mute); }
.band-card p { color: var(--mute); font-size: 0.98rem; }
.band--pit .band-card p { color: var(--pit-mute); }
.band-card p strong { color: var(--ink); }
.band--pit .band-card p strong { color: var(--pit-ink); }
@media (max-width: 819px) { .bands { grid-template-columns: 1fr; gap: 2.2rem; } }

/* ---- Guides: two doors (ours and the official x.ai path) ---- */

.doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  margin: 3.6rem auto 0;
  max-width: 60rem;
  text-align: left;
}
.door { border-top: 1px solid var(--line); padding-top: 1.2rem; }
.band--pit .door { border-top-color: var(--pit-line); }
.door h3 {
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}
.door p { color: var(--mute); font-size: 0.98rem; }
.band--pit .door p { color: var(--pit-mute); }
@media (max-width: 819px) { .doors { grid-template-columns: 1fr; gap: 2.4rem; } }

/* ---- Prose pages (legal) ---- */

.prose p { color: var(--ink); }
.prose p + p { margin-top: 1.1rem; }

/* ---- Footer: deep ink close, like the hardware shot at the end ---- */

.site-foot {
  background: var(--pit);
  color: var(--pit-mute);
  padding: 2.4rem 0 3rem;
  font-size: 0.9rem;
}
.site-foot a { color: var(--pit-mute); }
.site-foot a:hover, .site-foot a:focus { color: var(--pit-ink); }
.site-foot p { margin: 0; max-width: none; }

/* ---- HERO-ALIVE: the hero draft opens ----
   Collapsed is the same tilted card. Open untilts and grows it a touch,
   slides a photo strip out under the body, and arms the chips.
   Amber stays in the approve family only. */

.device--hero {
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s ease;
}
.device--hero.open {
  cursor: auto;
  transform: rotate(0deg) scale(1.03);
  box-shadow:
    0 70px 120px -50px rgba(11, 11, 12, 0.65),
    0 28px 54px -24px rgba(11, 11, 12, 0.42);
}

.hero-more {
  display: grid;
  grid-template-rows: 1fr;
}
.device--hero.open .hero-more { grid-template-rows: 1fr; }
.hero-more-inner { overflow: hidden; min-height: 0; }
.draft-card .hero-more-inner { overflow: visible; min-height: auto; }
.hero-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding-top: 0.95rem;
}
.hero-photos img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #1a2430;
  border-radius: 5px;
  border: 1px solid var(--line-soft);
}
.hero-photos-note {
  color: var(--mute);
  font-size: 0.875rem;
  margin: 0.55rem 0 0.2rem;
  padding-right: 0;
}
.hero-sheet .hero-photos-note { padding-right: 0; }

/* The chips are real buttons now; collapsed they sit disabled as props. */
.hero-chips .chip {
  font-family: inherit;
  line-height: 1.6;
  border: 0;
  cursor: pointer;
}
.hero-chips .chip-back { border: 1px solid rgba(243, 241, 236, 0.35); background: transparent; }
.hero-chips .chip:disabled { cursor: default; }
.hero-chips .chip-approve:not(:disabled):hover,
.hero-chips .chip-approve:not(:disabled):focus { background: #D68A38; }
.hero-chips .chip-back:not(:disabled):hover,
.hero-chips .chip-back:not(:disabled):focus { border-color: var(--pit-ink); }

.hero-state { min-width: 0; }

/* Open and close control: a quiet full-width strip at the device foot. */
.hero-openbar {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pit-mute);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--pit-line-soft);
  padding: 0.6rem 1.2rem 0.7rem;
  cursor: pointer;
  text-align: center;
}
.hero-openbar:hover, .hero-openbar:focus { color: var(--pit-ink); }

/* Approve theater: amber wash over the rail, sealed solid. */
@keyframes hero-flash {
  0% { background: rgba(196, 122, 44, 0.45); }
  100% { background: transparent; }
}
.hero-rail.flash { animation: hero-flash 1.1s ease-out; }
.device--hero.approved .seal { border-style: solid; }
.device--hero.approved .hold-text { color: var(--hold); }

@media (prefers-reduced-motion: reduce) {
  .device--hero, .hero-more { transition: none; }
  .hero-rail.flash { animation: none; background: rgba(196, 122, 44, 0.2); }
}

/* ---- PHOTO-SHOWCASE: the photo beat gallery ----
   Large stills floating on studio white, product-in-space, not a grid
   dump. Amber stays in the approve family; the gallery adds no second
   accent. New selectors only; nothing above is modified. */

.gallery {
  margin: 3.8rem auto 0;
  max-width: 66rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.6rem 2.2rem;
}
.shot { margin: 0; text-align: left; }
.shot--wide { grid-column: 1 / -1; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow:
    0 60px 110px -55px rgba(11, 11, 12, 0.5),
    0 22px 44px -26px rgba(11, 11, 12, 0.3);
}
.shot figcaption {
  color: var(--mute);
  font-size: 0.88rem;
  padding: 0.85rem 0.35rem 0;
}
.shot figcaption strong {
  color: var(--ink);
  font-weight: 650;
  margin-right: 0.55rem;
}
#photos .micro { margin-top: 2.6rem; }
@media (max-width: 719px) {
  .gallery { grid-template-columns: 1fr; gap: 2rem; }
}

/* ==================================================================
   Shared extras kept from earlier passes: the self-hosted Inter
   variable faces and two small containment guards. Safe on all
   pages. The homepage identity layer (body.deck) follows below;
   the retired body.night layers were removed in XAI-BOT-INSPIRED-1. */

/* Containment guards (kept from CURSOR-LIVE-3; safe on all pages) */
img { max-width: 100%; height: auto; }
@media (max-width: 719px) {
  .site-nav a:not(.nav-join) { display: none; }
}
/* ==================================================================
   XAI-BOT-INSPIRED: the deck layer. Pass XAI-BOT-INSPIRED-1.
   Scoped to body.deck (index only). Structure studied from x.ai/bot:
   centered huge title, a living desktop window under the type, and a
   pill-driven catalog (NOCHAT pass: one wide capabilities card, no
   phone, no chat). Palette is ours: harbor ink (blue
   shifted, not their neutral near-black), warm sand type, brass on the
   approve family only, one green save dot. No pastel job accents, no
   cream painting. Everything below replaces the retired night layers;
   subpages never see body.deck. */

.deck {
  --harbor: #0F1722;
  --panel: #16222F;
  --panel-deep: #101B28;
  --sand: #EFE9DC;
  --sand-dim: #C9C2B3;
  --dmute: #8E9BAA;
  --brass: #C29B57;
  --ember: #E08A32;
  --signal: #6FB489;
  --dline: rgba(239, 233, 220, 0.1);
  --dline-strong: rgba(239, 233, 220, 0.2);
  /* Remap the shared component tokens so the loop, Dial fixture, and
     grids inherit the harbor palette without new selectors. The paper
     tokens (--ink, --bg, --card) stay light: the Dial sheet is still a
     paper sheet inside dark hardware. */
  --mute: #8E9BAA;
  --hold: #C29B57;
  --line: rgba(239, 233, 220, 0.14);
  --line-soft: rgba(239, 233, 220, 0.07);
  --pit: #0C1420;
  --pit-ink: #EFE9DC;
  --pit-mute: #93A0AF;
  --pit-line: rgba(239, 233, 220, 0.17);
  --pit-line-soft: rgba(239, 233, 220, 0.09);

  background:
    radial-gradient(80rem 44rem at 50% -14%, rgba(66, 88, 116, 0.38) 0%, rgba(66, 88, 116, 0) 62%),
    var(--harbor);
  color: var(--sand);
  overflow-x: clip;
}
@supports not (overflow-x: clip) {
  .deck { overflow-x: hidden; }
}
.deck ::selection { background: var(--sand); color: var(--harbor); }
.deck a { color: var(--sand); }
.deck .quiet { color: var(--sand); }
.deck :focus-visible { outline-color: var(--sand); }

.deck .display-2 { font-weight: 640; letter-spacing: -0.03em; }

/* ---- Nav on the harbor ---- */

.deck .site-head {
  background: rgba(15, 23, 34, 0.88);
  border-bottom: 1px solid var(--dline);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .deck .site-head {
    background: rgba(15, 23, 34, 0.66);
    -webkit-backdrop-filter: saturate(1.4) blur(16px);
    backdrop-filter: saturate(1.4) blur(16px);
  }
}
.deck .wordmark { color: var(--sand); }
.deck .site-nav a { color: var(--dmute); }
.deck .site-nav a:hover, .deck .site-nav a:focus { color: var(--sand); }
.deck .site-nav .nav-join {
  color: var(--sand);
  background: transparent;
  border: 1px solid rgba(239, 233, 220, 0.42);
  padding: 0.45rem 1rem;
}
.deck .site-nav .nav-join:hover, .deck .site-nav .nav-join:focus {
  color: var(--harbor);
  background: var(--sand);
  border-color: var(--sand);
}

/* ---- Hero: centered huge type, then the living window under it ---- */

.band--top { padding: clamp(2.6rem, 6vh, 4.8rem) 0 clamp(4.5rem, 9vh, 7rem); }

.hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--sand);
  border-radius: 999px;
  padding: 0.38rem 0.95rem;
  margin: 0 0 clamp(1.6rem, 3.5vh, 2.4rem);
  font-size: 0.875rem;
  color: #131A24;
  background: var(--sand);
}
.hero-pill strong { color: #131A24; font-weight: 650; }
.pill-dot { width: 3px; height: 3px; border-radius: 50%; background: #131A24; flex: none; opacity: 0.35; }
.hero-pill a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #3A4554;
  text-decoration: none;
}
.hero-pill a:hover, .hero-pill a:focus { color: #131A24; text-decoration: underline; }
.hero-pill svg { width: 11px; height: 11px; }

.hero-display {
  font-size: clamp(2.45rem, 1.1rem + 5.3vw, 5.3rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 640;
  max-width: 21ch;
  margin: 0 auto;
  text-wrap: balance;
}
.ember { color: var(--ember); }
.deck .ember { color: var(--ember); }

.hero-lede {
  color: var(--dmute);
  font-size: clamp(1.125rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  max-width: 44rem;
  margin: clamp(1.2rem, 2.6vh, 1.7rem) auto 0;
}

.hero-ctas { justify-content: center; gap: 0.85rem; margin-top: clamp(1.7rem, 3.6vh, 2.5rem); }
.btn-fill, .btn-ghost2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.72rem 1.6rem 0.78rem;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
}
.deck .btn-fill { background: var(--sand); color: #131A24; border: 1px solid var(--sand); }
.deck .btn-fill:hover, .deck .btn-fill:focus { background: #FFFFFF; border-color: #FFFFFF; color: #131A24; }
.deck .btn-ghost2 { border: 1px solid var(--dline-strong); color: var(--sand); }
.deck .btn-ghost2:hover, .deck .btn-ghost2:focus { border-color: var(--sand-dim); }

/* The window. One rounded desktop, alive on first paint. */

.hero-fixture { margin: clamp(3rem, 7vh, 4.8rem) auto 0; width: 100%; max-width: 66rem; }
.hero-win {
  background: linear-gradient(180deg, #182534, #141F2C);
  border: 1px solid var(--dline-strong);
  border-radius: 18px;
  overflow: hidden;
  text-align: left;
  box-shadow:
    0 70px 130px -50px rgba(0, 0, 0, 0.75),
    0 26px 52px -30px rgba(0, 0, 0, 0.5);
}
.win-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.72rem 1.15rem;
  border-bottom: 1px solid var(--dline);
  color: var(--dmute);
  font-size: 0.875rem;
}
.win-dots { display: inline-flex; gap: 0.42rem; flex: none; }
.win-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(239, 233, 220, 0.22); }
.win-title {
  flex: 1;
  text-align: center;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--sand-dim);
}
.win-free { flex: none; }
.win-sep {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  margin: 0 0.45rem 0.12rem;
  opacity: 0.7;
}
.win-free {
  justify-self: end;
  border: 1px solid var(--dline-strong);
  border-radius: 999px;
  padding: 0.18rem 0.68rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--sand-dim);
  white-space: nowrap;
}

.win-tools {
  display: flex;
  align-items: center;
  gap: 0.45rem 0.65rem;
  flex-wrap: wrap;
  padding: 0.62rem 1.15rem;
  border-bottom: 1px solid var(--dline);
  background: rgba(0, 0, 0, 0.14);
}
.win-tools.proof-bar { flex-direction: column; align-items: stretch; }
.proof-label {
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dmute);
}
.proof-pick {
  font: inherit;
  font-size: 1rem;
  color: var(--sand);
  background-color: #0F1926;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238E9BAA' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 10px 6px;
  border: 1px solid var(--dline-strong);
  border-radius: 9px;
  padding: 0.35rem 1.9rem 0.38rem 0.75rem;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.proof-pick:focus { outline: none; border-color: var(--sand-dim); }

.proof-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
}
.proof-more {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--sand-dim);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.proof-more:hover, .proof-more:focus { color: var(--sand); }
.proof-trades {
  width: 100%;
}
.proof-trades-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.45rem;
  overflow-x: auto;
  padding: 0.15rem 0 0.2rem;
  scrollbar-width: thin;
}
.proof-trades.is-open .proof-trades-track {
  flex-wrap: wrap;
  overflow: visible;
}
.proof-chip {
  flex: none;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 550;
  color: var(--sand-dim);
  background: transparent;
  border: 1px solid var(--dline-strong);
  border-radius: 999px;
  padding: 0.38rem 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}
.proof-chip:hover, .proof-chip:focus { color: var(--sand); border-color: var(--sand-dim); }
.proof-chip.is-on {
  color: var(--sand);
  border-color: var(--sand);
}

.win-hint { margin-left: auto; font-size: 0.875rem; color: var(--dmute); }

/* The draft card fills the window: cover left, article right. */

.draft-card {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  grid-template-areas:
    "cover body"
    "review review"
    "openbar openbar";
}
.draft-cover {
  grid-area: cover;
  position: relative;
  border-right: 1px solid var(--dline);
  min-height: 100%;
  overflow: hidden;
  touch-action: pan-y;
}
.cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cover-fade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.cover-fade.show { opacity: 1; }
.draft-save {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(9, 14, 21, 0.8);
  border: 1px solid rgba(239, 233, 220, 0.14);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.875rem;
  color: var(--sand-dim);
  z-index: 1;
}
.save-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); flex: none; }

.draft-body { grid-area: body; padding: 1.7rem 1.8rem 1.4rem; min-width: 0; }
.draft-title {
  font-size: clamp(1.5rem, 2.3vw, 2.05rem);
  letter-spacing: -0.022em;
  line-height: 1.08;
  font-weight: 640;
  color: var(--sand);
  margin: 0 0 0.4rem;
  min-height: 1.15em;
}
.draft-dek { color: var(--sand-dim); font-size: 1rem; margin: 0 0 0.95rem; min-height: 1.5em; }
.draft-para { color: var(--dmute); font-size: 1rem; line-height: 1.6; margin: 0; min-height: 4.5em; }
.draft-label {
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dmute);
  margin: 1.25rem 0 0.45rem;
}
.draft-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--sand-dim);
  font-size: 1rem;
  line-height: 1.65;
}

/* Type-on caret while the canned samples play */
.typing::after {
  content: "";
  display: inline-block;
  width: 0.45ch;
  height: 0.95em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: var(--sand);
  animation: deck-caret 0.9s steps(2, start) infinite;
}
@keyframes deck-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .typing::after { animation: none; }
}

/* Open draft: the rest of the article slides out inside the body */
.draft-card .hero-more, .draft-card.open .hero-more { grid-template-rows: 1fr; }
.deck .hero-photos { grid-template-columns: repeat(2, 1fr); }
.deck .hero-photos img { border-color: var(--dline); border-radius: 8px; }
.deck .hero-photos-note { color: var(--dmute); }

.draft-review {
  grid-area: review;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.4rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--dline);
  padding: 1.05rem 1.8rem;
  background: rgba(0, 0, 0, 0.16);
}
.review-copy { min-width: 0; }
.review-copy .draft-label { margin: 0 0 0.2rem; }
.review-note { margin: 0; font-size: 1rem; color: var(--sand-dim); }
.review-note em { font-style: normal; color: var(--sand); }
.review-actions { display: inline-flex; gap: 0.6rem; flex-wrap: wrap; }

.btn-brass {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--brass);
  color: #14100A;
  border: 1px solid var(--brass);
  border-radius: 999px;
  padding: 0.6rem 1.3rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  cursor: pointer;
}
.btn-brass svg { width: 16px; height: auto; }
.btn-brass:hover, .btn-brass:focus { background: #D2AC66; border-color: #D2AC66; }
.btn-dim {
  background: transparent;
  border: 1px solid var(--dline-strong);
  color: var(--sand);
  border-radius: 999px;
  padding: 0.58rem 1.2rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 550;
  cursor: pointer;
}
.btn-dim:hover, .btn-dim:focus { border-color: var(--sand-dim); }

.deck .hero-openbar { display: none; }
.deck .hero-openbar:hover, .deck .hero-openbar:focus { color: var(--sand); }

@keyframes deck-flash {
  0% { background: rgba(194, 155, 87, 0.42); }
  100% { background: rgba(0, 0, 0, 0.16); }
}
.deck .draft-review.flash { animation: deck-flash 1.1s ease-out; }
.draft-card.approved .review-note em { color: var(--brass); }
.draft-card.approved .save-dot { background: var(--brass); }
.draft-card.approved .draft-save { color: var(--brass); border-color: rgba(194, 155, 87, 0.5); }
@media (prefers-reduced-motion: reduce) {
  .deck .draft-review.flash { animation: none; background: rgba(194, 155, 87, 0.2); }
}

.proof-note { text-align: center; margin: 1.05rem 0 0; }
.deck .micro { color: var(--dmute); }
.deck .eyebrow, .deck .support, .deck .mute { color: var(--dmute); }
.hero-fixture figcaption {
  color: var(--dmute);
  font-size: 0.875rem;
  text-align: center;
  padding: 0.4rem 1rem 0;
}

/* ---- Three beats under the hero ---- */

.band--beats { padding-top: clamp(3.4rem, 8vh, 5.5rem); }
.deck .hero-beats { margin-top: 0; }
.deck .hero-beats strong { color: var(--sand); }
.deck .hero-beats li { color: var(--dmute); }
.beats-install { margin: 2.4rem auto 0; max-width: 62rem; }

/* ---- Template Bots catalog: pills over one wide capabilities card ---- */

.band--packs {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0) 22rem);
  border-top: 1px solid var(--dline);
}
.packs-head { text-align: center; max-width: 50rem; margin: 0 auto; }
.packs-head .support { margin-bottom: 0; }

.pack-stage {
  max-width: 62rem;
  margin: clamp(2.8rem, 6vh, 4.2rem) auto 0;
}
.pack-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(1.15rem, 3vh, 1.75rem);
  margin-top: clamp(1.8rem, 4vh, 2.6rem);
}
.pack-stack .pack-card { margin-top: 0; }
.pack-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; }
.pill {
  font: inherit;
  font-size: 1rem;
  font-weight: 550;
  color: var(--sand-dim);
  background: transparent;
  border: 1px solid var(--dline-strong);
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
a.pill { display: inline-flex; align-items: center; }
.pack-stack .pack-card { scroll-margin-top: calc(var(--head-h, 4.5rem) + 0.8rem); }
.pill:hover { color: var(--sand); border-color: var(--sand-dim); }
.pill.on {
  background: var(--sand);
  border-color: var(--sand);
  color: #16202D;
  font-weight: 650;
}

.pack-card {
  --tint: #C46A32;
  position: relative;
  overflow: hidden;
  margin-top: clamp(1.8rem, 4vh, 2.6rem);
  background: linear-gradient(180deg, #15202E, #121A28);
  border: 1px solid var(--dline-strong);
  border-radius: 22px;
  padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.3rem, 3.4vw, 2.8rem) clamp(1.7rem, 3.2vw, 2.6rem);
  box-shadow:
    0 50px 100px -52px rgba(0, 0, 0, 0.72),
    0 20px 40px -28px rgba(0, 0, 0, 0.45);
}
.pack-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--tint);
  opacity: 0.85;
}
.pack-id {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--dline);
}
.pack-disc {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: #17222F;
}
.pack-disc img { width: 88%; height: 88%; object-fit: contain; }
/* Crew face: 2D plate. Same family as crew.html.
   Square, readable, not a 3D bust. Letter-only packs stay circles. */
.pack-disc.has-face {
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 12px;
  overflow: hidden;
  background: #0C1420;
}
.pack-disc.has-face img {
  width: 4.6rem;
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: 0;
  border: 0;
}
.pack-who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.pack-who b { color: var(--sand); font-size: 1rem; font-weight: 650; }
.pack-who span { color: var(--dmute); font-size: 0.875rem; }
.pack-hold {
  margin-left: auto;
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dmute);
  border: 1px solid var(--dline);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  white-space: nowrap;
}
.pack-cols {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.8rem, 4vw, 3.6rem);
  align-items: start;
  margin-top: clamp(1.5rem, 3vh, 2.1rem);
}
/* display:grid outranks the UA [hidden] rule, so the Trades swap
   needs this to actually park the bot columns. */
.pack-cols[hidden],
.pack-card[hidden] { display: none; }
.pack-main { min-width: 0; }
.pack-lead {
  margin: 0;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  font-weight: 650;
  color: var(--sand);
}
.pack-body {
  margin: 0.95rem 0 0;
  max-width: 30rem;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--dmute);
}
.pack-side { min-width: 0; }
.pack-writes { list-style: none; margin: 0.2rem 0 0; padding: 0; }
.pack-writes li {
  border-top: 1px solid var(--dline);
  padding: 0.5rem 0;
  color: var(--sand-dim);
  font-size: 1rem;
}
.pack-writes li:last-child { border-bottom: 1px solid var(--dline); }
.pack-guard {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.15rem 0 0;
  color: var(--dmute);
  font-size: 1rem;
}
.pack-guard svg { width: 15px; height: 15px; flex: none; }

/* Trades tab: not a bot, a quiet index of the per-trade packs.
   Chips pick up the card tint through the --tint custom property. */
.pack-trades { margin-top: clamp(1.5rem, 3vh, 2.1rem); }
.pack-trades .pack-body { max-width: 40rem; }
.pack-trades .draft-label { margin-top: 1.6rem; }
.trade-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.75rem 0 0;
  padding: 0;
}
.trade-chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--dline-strong);
  border-radius: 999px;
  padding: 0.5rem 1.05rem;
  font-size: 1rem;
  font-weight: 550;
  color: var(--sand-dim);
}
.trade-chips li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tint, #98A4AF);
  opacity: 0.85;
  flex: none;
}
.trades-door {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--dline);
}
.trades-door-h {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 650;
  color: var(--sand);
}
.trades-door-cta {
  display: inline-block;
  margin-top: 0.7rem;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--sand);
  text-decoration: none;
  border-bottom: 1px solid var(--sand-dim);
}
.trades-door-cta:hover { border-bottom-color: var(--sand); }
.trades-closer {
  margin: 1.3rem 0 0;
  color: var(--dmute);
  font-size: 1.125rem;
}

.packs-money { text-align: center; margin: 1.8rem auto 0; max-width: 40rem; }

@keyframes deck-packfade {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}
.pack-card.swap { animation: deck-packfade 0.45s ease both; }
@media (prefers-reduced-motion: reduce) {
  .pack-card.swap { animation: none; }
}

/* ---- The loop on the harbor ---- */

.band--loop { border-top: 1px solid var(--dline); }
.deck .steps .dot { background: var(--sand); }
.deck .flow { background: var(--sand); }
.deck .track { border-top-color: rgba(239, 233, 220, 0.22); }
.deck .steps small { color: var(--dmute); }
.step-head { display: block; height: 5.4rem; margin-bottom: 0.75rem; overflow: visible; }
.step-head svg,
.step-head img { height: 100%; width: 5.4rem; display: block; object-fit: contain; }
.step-bot {
  width: 5.4rem;
  border-radius: 0;
  overflow: visible;
  background: none;
}
.step-you { color: var(--brass); }
.step-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.4rem;
  height: 5.4rem;
  border-radius: 50%;
  background: #0C1420;
  border: 1.5px solid rgba(239, 233, 220, 0.28);
  overflow: hidden;
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 1;
  font-size: 2.5rem;
  color: var(--sand);
}
.step-mark span:last-child { color: var(--ember); }
.step-mark-wp { font-size: 2.15rem; letter-spacing: -0.06em; color: var(--sand); }
.step-mark-wp span,
.step-mark-wp span:last-child { color: var(--sand); }
.loop .steps { border-top: none; padding-top: 0.4rem; }
@media (min-width: 720px) {
  .deck .steps { text-align: center; }
  .deck .steps li { padding: 2rem 0.4rem 0; }
  .deck .step-head { width: 5.4rem; margin-left: auto; margin-right: auto; }
  .deck .steps small { margin-left: auto; margin-right: auto; }
  .deck .steps .dot { left: 50%; transform: translateX(-50%); }
  .deck .track {
    left: calc((100% - 4.8rem) / 8);
    right: calc((100% - 4.8rem) / 8);
  }
}
@media (max-width: 719px) {
  .deck .steps li:not(:last-child)::after { border-left-color: rgba(239, 233, 220, 0.25); }
  .deck .steps li.you::after { border-left-color: var(--dline); }
  .step-head { height: 3.8rem; }
  .step-head svg,
  .step-head img { width: 3.8rem; }
  .step-mark { width: 3.8rem; height: 3.8rem; font-size: 1.75rem; }
  .step-mark-wp { font-size: 1.5rem; }
}

/* ---- Two-up: the seat by day, the phone at night ---- */

.duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  margin-top: clamp(2.6rem, 5vh, 3.8rem);
}
.duo-card {
  display: flex;
  flex-direction: column;
  background: #131E2C;
  border: 1px solid var(--dline);
  border-radius: 18px;
  padding: 1.9rem 1.9rem 0;
  overflow: hidden;
  min-width: 0;
}
.duo-card h3 { color: var(--sand); font-size: 1.16rem; margin: 0 0 0.45rem; }
.duo-card > p { color: var(--dmute); font-size: 1.125rem; line-height: 1.6; margin: 0 0 1.6rem; }

.mini-ed {
  margin-top: auto;
  background: #0F1926;
  border: 1px solid var(--dline-strong);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}
.mini-ed-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--dline);
  font-size: 0.875rem;
  color: var(--dmute);
  white-space: nowrap;
  min-width: 0;
}
.mini-ed-bar > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.mini-chips { display: inline-flex; gap: 0.35rem; flex: none; }
.mc {
  font-style: normal;
  border: 1px solid var(--dline);
  border-radius: 999px;
  padding: 0.14rem 0.55rem;
}
.mc-hold { color: var(--brass); border-color: rgba(194, 155, 87, 0.5); }
.mc-pub { opacity: 0.55; }
.mini-ed-body { padding: 1rem 0.95rem 1.25rem; display: flex; flex-direction: column; gap: 0.55rem; }
.mini-h { margin: 0 0 0.15rem; color: var(--sand); font-weight: 640; font-size: 1.03rem; letter-spacing: -0.01em; }
.mini-line { display: block; height: 8px; border-radius: 4px; background: rgba(239, 233, 220, 0.1); }
.w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; } .w90 { width: 90%; } .w95 { width: 95%; }
.mini-img {
  display: block;
  height: 5.4rem;
  border-radius: 6px;
  background: url("media/trades/job-v3/paint.webp") center / cover no-repeat;
  border: 1px solid var(--dline);
}

.mini-phone {
  width: min(15.5rem, 100%);
  margin: auto auto 0;
  background: #0F1926;
  border: 1px solid var(--dline-strong);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  padding: 1.15rem 1.05rem 1.3rem;
}
.mp-kicker {
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dmute);
  margin: 0 0 0.25rem;
}
.mp-app { font-size: 0.875rem; color: var(--dmute); margin: 0 0 0.85rem; }
.mp-title { color: var(--sand); font-weight: 640; font-size: 1.01rem; margin: 0 0 0.75rem; }
.mp-rows { margin: 0 0 0.95rem; }
.mp-rows div {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.875rem;
  padding: 0.34rem 0;
  border-top: 1px solid var(--dline);
}
.mp-rows dt { color: var(--dmute); }
.mp-rows dd { margin: 0; color: var(--sand-dim); }
.mp-actions { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.mp-actions .chip { font-size: 0.875rem; padding: 0.36rem 0.85rem; }
.mp-foot { margin: 0.85rem 0 0; font-size: 0.875rem; color: var(--dmute); }
.duo-honesty { text-align: center; margin-top: 1.5rem; }

/* ---- Dial hardware: inherit the harbor tokens; keep the paper sheet
   readable with the light-paper mute inside it ---- */

.deck .band--pit { border-top: 1px solid var(--dline); }
.deck .sheet { --mute: #6B6560; }
.deck .device { border-color: var(--pit-line); }

/* ---- Close: waitlist, the nots, footer ---- */

.band--close { border-top: 1px solid var(--dline); }
.deck .wl-form input[type="email"] {
  color: var(--sand);
  background: rgba(239, 233, 220, 0.06);
  border-color: var(--dline-strong);
}
.deck .wl-form input[type="email"]:focus { border-color: var(--sand-dim); }
.deck .wl-form input[type="email"]::placeholder { color: var(--dmute); }
.deck .btn.btn-outline {
  background: transparent;
  color: var(--sand);
  border: 1px solid rgba(239, 233, 220, 0.45);
}
.deck .btn.btn-outline:hover, .deck .btn.btn-outline:focus {
  background: var(--sand);
  color: var(--harbor);
  border-color: var(--sand);
}
.deck .wl-note { border-color: var(--dline-strong); color: var(--sand-dim); }

.nots-line {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin: 2.6rem auto 1.6rem;
  padding: 0;
}
.nots-line li {
  border: 1px solid var(--dline);
  border-radius: 999px;
  padding: 0.3rem 0.95rem;
  color: var(--dmute);
  font-size: 0.875rem;
}

.deck .site-foot {
  border-top: 1px solid var(--dline);
  padding: 2.2rem 0 2.6rem;
  color: var(--dmute);
  font-size: 0.875rem;
}
.deck .site-foot a { color: var(--sand-dim); }
.deck .site-foot a:hover, .deck .site-foot a:focus { color: var(--sand); }

/* ---- Responsive ---- */

@media (max-width: 1023px) {
  .pack-cols { grid-template-columns: 1fr; }
  .pack-body { max-width: 34rem; }
}

@media (max-width: 859px) {
  .draft-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "cover"
      "body"
      "review"
      "openbar";
  }
  .draft-cover { border-right: 0; border-bottom: 1px solid var(--dline); min-height: 0; }
  .cover-img { position: static; width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .draft-body { padding: 1.4rem 1.3rem 1.2rem; }
  .draft-review { padding: 1rem 1.3rem; }
  .draft-para { min-height: 0; }
  .duo-grid { grid-template-columns: 1fr; }
}

@media (max-width: 559px) {
  .win-hint { display: none; }
  .win-free { font-size: 0.875rem; padding: 0.18rem 0.6rem; }
  .win-dots { display: none; }
  .win-title { text-align: left; }
  .hero-pill { font-size: 0.875rem; padding: 0.34rem 0.8rem; }
  .hero-ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 22rem; margin-left: auto; margin-right: auto; }
  .btn-fill, .btn-ghost2 { text-align: center; }
  .review-actions { width: 100%; }
  .btn-brass, .btn-dim { flex: 1 1 auto; justify-content: center; text-align: center; }
  .pack-card { border-radius: 18px; }
  .pack-hold { display: none; }
  .pack-disc.has-face { width: 4.2rem; height: 4.2rem; }
  .pack-disc.has-face img { width: 4.2rem; }
  .duo-card { padding: 1.5rem 1.3rem 0; }
}


/* ---- Templates page: two shelves, ours then marketplace ---- */

.templates-page .tpl-grid {
  list-style: none;
  margin: clamp(2rem, 4vh, 2.8rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
}
.tpl-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1.35rem 1.4rem 1.5rem;
  background: #131E2C;
  border: 1px solid var(--dline);
  border-radius: 18px;
  min-width: 0;
}
.tpl-card h3 {
  color: var(--sand);
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 0 0 0.4rem;
}
.tpl-card > p {
  color: var(--dmute);
  font-size: 1.125rem;
  line-height: 1.55;
  margin: 0;
}
.tpl-label {
  margin: 0 0 0.85rem;
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sand-dim);
}
.tpl-id {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.95rem;
}
.tpl-face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.6rem;
  height: 4.6rem;
  overflow: hidden;
  flex: none;
  border-radius: 12px;
  background: #0C1420;
}
.tpl-face img {
  display: block;
  width: 4.6rem;
  height: auto;
  max-width: none;
}
.tpl-who { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.tpl-who b { color: var(--sand); font-size: 1.05rem; font-weight: 650; }
.tpl-who span { color: var(--dmute); font-size: 0.95rem; }
.tpl-trades {
  margin-top: 1.15rem;
  padding: 1.4rem 1.5rem 1.55rem;
  border: 1px solid var(--dline);
  border-radius: 18px;
  background: #131E2C;
}
.tpl-trades h3 { color: var(--sand); font-size: 1.2rem; margin: 0 0 0.4rem; }
.tpl-trades > p { color: var(--dmute); font-size: 1.125rem; margin: 0 0 0.9rem; }
.templates-page .micro { margin-top: 1.6rem; }

.tpl-grid--market { margin-top: 1.1rem; }
.tpl-card--market {
  background: var(--card);
  border-color: var(--line);
}
.tpl-card--market h3 { color: var(--ink); }
.tpl-card--market > p { color: var(--mute); }
.tpl-card--market .tpl-label { color: var(--mute); }
.tpl-card--market .tpl-who b { color: var(--ink); }
.tpl-card--market .tpl-who span { color: var(--mute); }
.tpl-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  background: #16222F;
  color: #EFE9DC;
  font-size: 1rem;
  font-weight: 650;
  flex: none;
}
.tpl-add {
  display: inline-block;
  margin-top: 1.05rem;
  font-size: 1rem;
  font-weight: 650;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
}
.tpl-add:hover { border-bottom-width: 2px; }
.tpl-day {
  margin: 2.2rem 0 0;
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--ink);
}
.packs-more { text-align: center; margin: 1.4rem 0 0; }

@media (max-width: 1023px) {
  .templates-page .tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .templates-page .tpl-grid { grid-template-columns: 1fr; }
  .site-nav a:not(.nav-join) { font-size: 0.95rem; }
}

.deck .tpl-day { color: var(--sand); }
.deck .tpl-add { color: var(--ink); border-bottom-color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); }
.deck .site-nav a[aria-current="page"] { color: var(--sand); }

@media (max-width: 719px) {
  .site-nav a:not(.nav-join) { display: none; }
  .site-nav a[href*="crew.html"] { display: inline; }
  .templates-page .band--hero { padding-bottom: 3.2rem; }
}
.packs-more { justify-content: flex-start; margin: 1.1rem 0 0; }
.templates-page .packs-more,
.templates-page .cta-row { margin-top: 1.1rem; }

.tpl-face {
  width: 4.6rem;
  height: 4.6rem;
  overflow: hidden;
  border-radius: 12px;
  background: #0C1420;
}
.tpl-face img {
  width: 4.6rem;
  height: auto;
  max-width: none;
  display: block;
}
.tpl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.15rem;
  align-self: flex-start;
  text-decoration: none;
}
.tpl-card .tpl-btn,
.tpl-card > .tpl-btn {
  margin-top: 1.25rem;
  padding: 0.72rem 1.6rem 0.78rem;
  min-height: 2.75rem;
  line-height: 1;
}
.tpl-card--market .btn-fill {
  background: #0F1722;
  color: #EFE9DC;
  border-color: #0F1722;
}
.tpl-card--market .btn-fill:hover,
.tpl-card--market .btn-fill:focus {
  background: #16222F;
  border-color: #16222F;
  color: #FFFFFF;
}


/* ---- Two Counters: cream marketplace shelf ---- */

.tpl-plate {
  display: inline-block;
  margin: 0 0 0.85rem;
  padding: 0 0 0.45rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand);
  border-bottom: 2px solid var(--sand);
}
.band--pit .tpl-plate + .display-2 { margin-top: 0.15em; }
.tpl-face, .tpl-face img {
  width: 5.3rem;
  height: 5.3rem;
}
.tpl-face img { object-fit: contain; }
.tpl-label { font-weight: 550; letter-spacing: 0.06em; opacity: 0.72; }
.tpl-trades {
  background: #101B28;
  border-color: rgba(239, 233, 220, 0.08);
}

.band--paper {
  background: #F6F4EF;
  color: #111111;
}
.deck .band--paper,
.deck .band--paper .eyebrow,
.deck .band--paper .support,
.deck .band--paper .display-2,
.deck .band--paper .micro,
.deck .band--paper .tpl-day,
.deck .band--paper .tpl-label,
.deck .band--paper h2,
.deck .band--paper h3,
.deck .band--paper p {
  color: #111111;
}
.deck .band--paper .support,
.deck .band--paper .micro,
.deck .band--paper .tpl-card--market > p,
.deck .band--paper .tpl-who span {
  color: #6B6560;
}
.deck .band--paper a { color: #111111; }
.deck .band--paper .tpl-plate {
  color: #111111;
  border-bottom-color: #111111;
}
.deck .band--paper .tpl-day { color: #111111; margin-top: 2rem; }
.tpl-card--market {
  background: #FCFBF7;
  border: 1px solid rgba(17, 17, 17, 0.14);
}
.tpl-card--market h3 { color: #111111; }
.tpl-card--market .tpl-who b { color: #111111; }
.tpl-mark {
  background: #0F1722;
  color: #EFE9DC;
  border-radius: 8px;
}
.tpl-out {
  width: 0.7rem;
  height: 0.7rem;
  margin-left: 0.4rem;
  flex: none;
}
.deck .band--paper .btn-fill {
  background: #0F1722;
  color: #EFE9DC;
  border: 1px solid #0F1722;
}
.deck .band--paper .btn-fill:hover,
.deck .band--paper .btn-fill:focus {
  background: #16222F;
  border-color: #16222F;
  color: #FFFFFF;
}
@media (max-width: 639px) {
  .tpl-card .tpl-btn,
  .tpl-card > .tpl-btn,
  .tpl-trades .btn-fill,
  .tpl-trades .btn-ghost2 {
    width: 100%;
    min-height: 3rem;
  }
}


/* Crew discs: full-bleed circular (ChatGPT set 2026-09-12) */
.pack-disc.has-face,
.tpl-face {
  border-radius: 50%;
  background: transparent;
  overflow: hidden;
}
.pack-disc.has-face img,
.tpl-face img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Same ChatGPT faces, harbor volume. Do not remake art. */
.pack-disc.has-face img,
.tpl-face img,
.step-bot img,
.step-head img {
  filter: saturate(0.74) brightness(0.96) contrast(0.98);
}

/* Plugin.html WP listing mock */
.plugin-search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--dline);
}
.plugin-search-label {
  color: var(--dmute);
  font-size: 0.875rem;
}
.plugin-search-box {
  flex: 1;
  border: 1px solid var(--dline-strong);
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  color: var(--sand);
  font-size: 0.95rem;
  font-weight: 600;
}
.plugin-result {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.15rem 1.35rem;
}
.plugin-result-face {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: contain;
  background: transparent;
  flex: none;
  display: block;
}
.plugin-result-who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.plugin-result-who b {
  color: var(--sand);
  font-size: 1.05rem;
}
.plugin-result-who span {
  color: var(--dmute);
  font-size: 0.9rem;
}
.plugin-activate {
  flex: none;
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  background: var(--sand);
  color: #131A24;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Cover slideshow + full-screen stills */
.cover-img { cursor: zoom-in; }
.cover-full {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  background: rgba(9, 14, 21, 0.8);
  border: 1px solid rgba(239, 233, 220, 0.14);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--sand-dim);
  cursor: pointer;
}
.cover-dots {
  position: absolute;
  left: 50%;
  bottom: 0.75rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.38rem;
  z-index: 2;
}
.cover-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(239, 233, 220, 0.35);
  cursor: pointer;
}
.cover-dot.on { background: var(--sand); }
.hero-photos img { cursor: zoom-in; }
.deck .hero-photos[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.photo-full {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(9, 14, 21, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 3rem 4.5rem;
  height: 100dvh;
  touch-action: pan-y;
}
.photo-full[hidden] { display: none !important; }
.photo-full.is-open { display: flex; }
.photo-full img {
  max-width: min(96vw, 1480px);
  max-height: 88dvh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.photo-full-x,
.photo-full-nav {
  position: absolute;
  z-index: 2;
  background: rgba(9, 14, 21, 0.8);
  border: 1px solid rgba(239, 233, 220, 0.14);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--sand-dim);
  cursor: pointer;
}
.photo-full-x { top: 1.1rem; right: 1.1rem; }
.photo-full-nav { top: 50%; transform: translateY(-50%); }
.photo-full-prev { left: 1.1rem; }
.photo-full-next { right: 1.1rem; }
body.photo-full-on { overflow: hidden; }
@media (max-width: 700px) {
  .photo-full { padding: 4.2rem 0.75rem 3.4rem; }
  .photo-full-nav {
    display: inline-flex;
    top: auto;
    bottom: max(1rem, env(safe-area-inset-bottom));
    transform: none;
    min-height: 44px;
  }
  .photo-full-prev { left: max(0.75rem, env(safe-area-inset-left)); }
  .photo-full-next { right: max(0.75rem, env(safe-area-inset-right)); }
  .photo-full-x {
    top: max(0.75rem, env(safe-area-inset-top));
    right: max(0.75rem, env(safe-area-inset-right));
    min-height: 44px;
    min-width: 64px;
    font-size: 1rem;
  }
  .photo-full img { max-height: 78dvh; }
}


/* ==================================================================
   HOME-CRAFT-1 (13 Sep 2026). Homepage below the hero rebuilt as
   show-don't-tell: one annotated article, the approval in three
   frames, search + answer illustrations, the six as guardrails, the
   loop, one close. Paper and harbor bands alternate so the page is
   not one dark slab. Scoped to body.deck. Prefix hc-. */

.deck .band--paper { border-top: 1px solid rgba(17, 17, 17, 0.08); }
.deck .band--paper .reveal { color: inherit; }
.deck .band--paper .hc-head .support { color: #6B6560; }
.deck .band--pit.hc-approve,
.deck .band--pit.hc-close { border-top: 1px solid var(--dline); }

.hc-head { text-align: center; max-width: 50rem; margin: 0 auto clamp(2.6rem, 6vh, 4.2rem); }
.hc-head .display-2 { max-width: 18ch; margin-left: auto; margin-right: auto; }
.hc-head .support { margin-bottom: 0; max-width: 40rem; margin-left: auto; margin-right: auto; }
.hc-foot { text-align: center; max-width: 46rem; margin: clamp(2rem, 4vh, 3rem) auto 0; }
.deck .band--paper .hc-foot { color: #6B6560; }

/* Numbered marker shared by the anatomy notes and install steps */
.hc-n {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
  background: #111111;
  color: #F6F4EF;
}
.band--pit .hc-n { background: var(--sand); color: #131A24; }

/* ---- Anatomy: the article on the left, the notes on the right ---- */
.hc-anatomy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 0.75fr);
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: start;
}
.hc-article {
  background: #FFFFFF;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 16px;
  box-shadow: 0 24px 60px -30px rgba(17, 17, 17, 0.35);
  overflow: hidden;
}
.hc-article-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.1rem;
  border-bottom: 1px solid rgba(17, 17, 17, 0.1);
  background: #FCFBF7;
  font-size: 0.82rem;
  color: #6B6560;
}
.hc-article-status { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: #111111; }
.hc-article-status i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #C29B57; }
.hc-article-body { padding: clamp(1.2rem, 2.6vw, 2rem) clamp(1.2rem, 3vw, 2.4rem) 1.4rem; font-size: 1rem; line-height: 1.55; }
.hc-article-body h4 { font-size: 1.05rem; margin: 1.3rem 0 0.35rem; letter-spacing: -0.01em; }
.hc-article-body p { margin: 0 0 0.6rem; }
.hc-cat { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 650; color: #6B6560 !important; }
.hc-cat span { margin: 0 0.5rem; }
.hc-title { font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.15; letter-spacing: -0.025em; margin: 0.3rem 0 0.8rem; }
.hc-answer { font-size: 1.06rem; }
.hc-fig { margin: 1rem 0 0.4rem; }
.hc-fig img { display: block; width: 100%; height: auto; border-radius: 10px; aspect-ratio: 3 / 2; object-fit: cover; }
.hc-fig figcaption { font-size: 0.85rem; color: #6B6560; margin-top: 0.5rem; }
.hc-faq { margin-top: 1.1rem; }
.hc-faq h4 { margin-top: 0; }
.hc-faq p { font-size: 0.96rem; }
.hc-credit { font-size: 0.82rem; color: #6B6560 !important; margin: 1.2rem 0 0 !important; padding-top: 0.8rem; border-top: 1px dashed rgba(17, 17, 17, 0.18); }

/* Callout marks. Numbered tags sit on the highlighted spans. */
.hc-mark {
  position: relative;
  background: rgba(224, 138, 50, 0.14);
  color: inherit;
  border-radius: 4px;
  padding: 0 0.15em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hc-mark--inline { background: rgba(224, 138, 50, 0.3); }
.hc-mark--img { display: block; padding: 0; background: none; }
.hc-mark--img img { outline: 3px solid rgba(224, 138, 50, 0.55); outline-offset: -3px; }
.hc-mark--block { display: block; padding: 0.7rem 0.9rem; border-radius: 10px; background: rgba(224, 138, 50, 0.1); }
.hc-mark::after,
.hc-mark--block::after {
  content: attr(data-n);
  position: absolute;
  top: -0.7rem;
  right: -0.5rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: #E08A32;
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35rem;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0;
  box-shadow: 0 0 0 2px #FFFFFF;
}
.hc-mark--inline::after { top: -1rem; right: -0.7rem; }
.hc-mark--img::after { top: 0.6rem; right: 0.6rem; }
.hc-mark--block::after { top: -0.6rem; right: -0.5rem; }

.hc-notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  position: sticky;
  top: calc(var(--head-h) + 1.5rem);
}
.hc-notes li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 12px;
  background: #FCFBF7;
  font-size: 0.97rem;
  line-height: 1.45;
  color: #3D3935;
}
.hc-notes li b { color: #111111; display: block; margin-bottom: 0.1rem; }
.hc-notes .hc-n { background: #E08A32; color: #FFFFFF; margin-top: 0.1rem; }

/* ---- Approval: three frames on a timeline ---- */
.hc-frames {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem);
  counter-reset: frame;
}
.hc-frame { position: relative; }
.hc-frame-when {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--dmute);
  margin: 0 0 0.7rem;
  padding-left: 1.2rem;
  position: relative;
}
.hc-frame-when::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--sand);
  transform: translateY(-50%);
}
.hc-frame:not(:last-child) .hc-frame-when::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: calc(-1 * clamp(1.2rem, 3vw, 2.4rem));
  top: 50%;
  border-top: 1px dashed var(--dline-strong);
}
.hc-frame h3 { font-size: 1.2rem; margin: 1.1rem 0 0.35rem; color: var(--sand); }
.hc-frame p:last-child { margin: 0; color: var(--dmute); font-size: 1rem; }
.hc-frame-card {
  min-height: 15.5rem;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  background: var(--panel);
  border: 1px solid var(--dline);
  color: var(--sand);
  font-size: 0.92rem;
}
.hc-frame-card--wp { background: #FFFFFF; color: #111111; border-color: rgba(17, 17, 17, 0.14); }
.hc-wpbar { display: flex; justify-content: space-between; font-size: 0.78rem; color: #6B6560; padding-bottom: 0.55rem; border-bottom: 1px solid rgba(17, 17, 17, 0.1); margin-bottom: 0.75rem; }
.hc-wp-held { border: 1px solid #C29B57; color: #8C6423; border-radius: 999px; padding: 0.05rem 0.55rem; font-weight: 600; }
.hc-wp-title { font-weight: 700; font-size: 1.05rem; margin: 0 0 0.6rem; letter-spacing: -0.015em; }
.hc-wp-lines { display: grid; gap: 0.4rem; margin-bottom: 0.7rem; }
.hc-wp-lines i { display: block; height: 0.5rem; border-radius: 3px; background: rgba(17, 17, 17, 0.09); }
.hc-wp-lines i.short { width: 62%; }
.hc-wp-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 8px; }

.hc-frame-card--phone { background: var(--panel-deep); border-color: var(--dline-strong); border-radius: 20px; }
.hc-ph-app { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dmute); margin: 0 0 0.6rem; }
.hc-ph-app span { margin: 0 0.35rem; }
.hc-ph-head { font-size: 0.8rem; color: var(--dmute); margin: 0 0 0.2rem; }
.hc-ph-title { font-weight: 700; font-size: 1.05rem; margin: 0 0 0.7rem; letter-spacing: -0.015em; }
.hc-ph-meta, .hc-trail { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; margin: 0 0 0.9rem; font-size: 0.86rem; }
.hc-ph-meta dt, .hc-trail dt { color: var(--dmute); }
.hc-ph-meta dd, .hc-trail dd { margin: 0; text-align: right; }
.hc-ph-actions { display: flex; gap: 0.5rem; margin: 0; }
.hc-ph-actions .btn-brass, .hc-ph-actions .btn-dim { flex: 1 1 auto; justify-content: center; text-align: center; cursor: default; }

.hc-frame-card--live { background: var(--panel); }
.hc-live-pill { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); margin: 0 0 0.6rem; }
.hc-live-pill i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(111, 180, 137, 0.18); }
.hc-live-url { font-size: 0.84rem; color: var(--sand-dim); word-break: break-all; margin: 0 0 0.9rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--dline); }
.hc-trail { margin-bottom: 0; }

.hc-auto {
  margin-top: clamp(2.4rem, 5vh, 3.6rem);
  display: grid;
  grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1.6fr);
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: center;
  padding: clamp(1.2rem, 2.5vw, 1.8rem) clamp(1.2rem, 3vw, 2.2rem);
  border: 1px solid var(--dline);
  border-radius: 16px;
  background: var(--panel-deep);
}
.hc-auto-toggle { display: flex; align-items: center; gap: 0.9rem; }
.hc-switch { flex: none; position: relative; width: 3.2rem; height: 1.85rem; border-radius: 999px; background: rgba(239, 233, 220, 0.14); border: 1px solid var(--dline-strong); }
.hc-switch i { position: absolute; top: 0.2rem; left: 0.2rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--sand); }
.hc-switch-label { font-weight: 650; line-height: 1.25; }
.hc-switch-label b { display: block; font-weight: 500; font-size: 0.84rem; color: var(--dmute); }
.hc-auto-copy h3 { font-size: 1.2rem; margin: 0 0 0.3rem; color: var(--sand); }
.hc-auto-copy p { margin: 0; color: var(--dmute); font-size: 1rem; }

/* ---- Found: search result and answer, side by side ---- */
.hc-found-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
}
.hc-serp, .hc-answer-card {
  background: #FFFFFF;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 16px;
  padding: 1.2rem 1.3rem 1rem;
  box-shadow: 0 24px 60px -34px rgba(17, 17, 17, 0.35);
  font-size: 0.95rem;
}
.hc-serp-q { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; padding: 0.55rem 0.9rem; border: 1px solid rgba(17, 17, 17, 0.18); border-radius: 999px; font-size: 0.95rem; color: #111111; }
.hc-serp-q svg { width: 1rem; height: 1rem; color: #6B6560; }
.hc-serp-site { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.2rem; font-size: 0.85rem; color: #111111; }
.hc-serp-site small { color: #6B6560; font-size: 0.78rem; }
.hc-serp-fav { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #0F1722; color: #EFE9DC; font-size: 0.75rem; font-weight: 700; }
.hc-serp-title { margin: 0 0 0.25rem; font-size: 1.12rem; color: #1A3D8F; text-decoration: underline; text-underline-offset: 3px; letter-spacing: -0.01em; }
.hc-serp-snip { margin: 0; color: #3D3935; font-size: 0.9rem; line-height: 1.45; }
.hc-serp-paa { margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid rgba(17, 17, 17, 0.1); }
.hc-serp-paa-h { font-weight: 650; margin: 0 0 0.4rem; font-size: 0.9rem; }
.hc-serp-paa p { margin: 0; padding: 0.45rem 0; border-top: 1px solid rgba(17, 17, 17, 0.08); font-size: 0.9rem; color: #111111; }
.hc-serp-paa p:last-child { border-bottom: 1px solid rgba(17, 17, 17, 0.08); }
.hc-serp-note { margin: 0.9rem 0 0; font-size: 0.78rem; color: #6B6560 !important; }
.hc-ans-q { font-weight: 650; font-size: 1.05rem; margin: 0 0 0.7rem; padding-bottom: 0.7rem; border-bottom: 1px solid rgba(17, 17, 17, 0.1); }
.hc-ans-a { margin: 0; line-height: 1.55; color: #111111; }
.hc-cite { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: 0.3rem; padding: 0.1rem 0.55rem 0.1rem 0.3rem; border: 1px solid rgba(17, 17, 17, 0.18); border-radius: 999px; font-size: 0.78rem; color: #111111; white-space: nowrap; vertical-align: middle; }
.hc-cite i { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 50%; background: #E08A32; color: #FFFFFF; font-style: normal; font-size: 0.65rem; font-weight: 700; }
.hc-three {
  list-style: none;
  margin: clamp(2.2rem, 5vh, 3.4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem);
}
.hc-three li { padding-top: 1rem; border-top: 1px solid rgba(17, 17, 17, 0.16); font-size: 1rem; line-height: 1.5; color: #3D3935; }
.hc-three li b { display: block; color: #111111; margin-bottom: 0.2rem; }

/* ---- The six as guardrails: keep the catalog hardware, reframe ---- */
.hc-crew .packs-head .support { margin-bottom: 1rem; }
.hc-crew .pack-guard { color: var(--sand); }

/* ---- The loop on paper ---- */
.deck .band--paper.band--loop { border-top: 1px solid rgba(17, 17, 17, 0.08); }
.deck .band--paper .steps .dot { background: #111111; }
.deck .band--paper .flow { background: #111111; }
.deck .band--paper .track { border-top-color: rgba(17, 17, 17, 0.22); }
.deck .band--paper .steps small { color: #6B6560; }
.deck .band--paper .steps strong { color: #111111; }
.deck .band--paper .step-mark { background: #FFFFFF; border-color: rgba(17, 17, 17, 0.22); color: #111111; }
.deck .band--paper .step-mark-wp span, .deck .band--paper .step-mark-wp span:last-child { color: #111111; }
.deck .band--paper .steps li.you strong { color: #B4631E; }
.deck .band--paper .step-you { color: #C46A32; }
@media (max-width: 719px) {
  .deck .band--paper .steps li:not(:last-child)::after { border-left-color: rgba(17, 17, 17, 0.2); }
}

/* ---- Close ---- */
.hc-close-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hc-close-copy .display-2 { max-width: 14ch; }
.hc-close-copy .support { max-width: 30rem; margin-bottom: 1.6rem; }
.hc-close-copy .cta-row { margin: 0 0 1.4rem; }
.hc-nots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hc-nots li { font-size: 0.85rem; color: var(--dmute); border: 1px solid var(--dline); border-radius: 999px; padding: 0.25rem 0.75rem; }
.hc-install { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.hc-install li {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  border: 1px solid var(--dline);
  border-radius: 12px;
  background: var(--panel-deep);
  font-size: 0.97rem;
  line-height: 1.45;
  color: var(--dmute);
}
.hc-install li b { display: block; color: var(--sand); margin-bottom: 0.1rem; }
.hc-install .hc-n { margin-top: 0.1rem; }
.hc-close .hc-foot { color: var(--dmute); }

/* ---- Responsive ---- */
@media (max-width: 959px) {
  .hc-anatomy-grid { grid-template-columns: 1fr; }
  .hc-notes { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-frames { grid-template-columns: 1fr; gap: 1.8rem; }
  .hc-frame:not(:last-child) .hc-frame-when::after { display: none; }
  .hc-frame-card { min-height: 0; }
  .hc-auto { grid-template-columns: 1fr; }
  .hc-found-grid { grid-template-columns: 1fr; }
  .hc-three { grid-template-columns: 1fr; gap: 1.2rem; }
  .hc-close-grid { grid-template-columns: 1fr; gap: 2.4rem; }
}
@media (max-width: 599px) {
  .hc-notes { grid-template-columns: 1fr; }
  .hc-article-body { padding: 1.1rem 1rem 1.1rem; }
  .hc-mark::after { right: -0.3rem; }
  .hc-close-copy .cta-row { flex-direction: column; align-items: stretch; }
  .hc-close-copy .btn-fill, .hc-close-copy .btn-ghost2 { text-align: center; }
}

/* ---- HOME-CRAFT-2: tell us your trade ---- */
.trade-find { margin: 1.4rem 0 0.4rem; max-width: 34rem; }
.trade-find-label { display: block; font-weight: 650; font-size: 0.98rem; margin-bottom: 0.5rem; color: var(--sand); }
.trade-find-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--dline-strong);
  border-radius: 999px;
  background: var(--panel-deep);
  color: var(--sand);
}
.trade-find-row:focus-within { border-color: var(--sand-dim); }
.trade-find-row svg { width: 1rem; height: 1rem; flex: none; color: var(--dmute); }
.trade-find-row input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--sand);
  font: inherit;
  font-size: 1.02rem;
}
.trade-find-row input::placeholder { color: var(--dmute); }
.trade-find-row input::-webkit-search-cancel-button { -webkit-appearance: none; }
.trade-find-hint { margin: 0.55rem 0 0 0.9rem; min-height: 1.3em; }
.trade-chips li[hidden] { display: none; }
.trades-door { transition: border-color 0.25s ease, background-color 0.25s ease; border-radius: 12px; }
.trades-door.lit {
  border: 1px solid var(--dline-strong);
  background: var(--panel-deep);
  padding: 1.1rem 1.2rem;
  margin-top: 1.2rem;
}
.trades-door.lit .trades-door-h { color: var(--sand); }



/* ==================================================================
   HOME-CRAFT-4: the BotsOnDeck screen inside wp-admin, as a fixture.
   The window is WordPress-shaped on purpose: dark admin rail, light
   work area, the post rendered on white, review cards beside it.
   Prefix hd- (demo controls, review, full screen) and wp- (the admin
   frame). Replaces HOME-CRAFT-3. */

.hd { margin: clamp(2.2rem, 5vh, 3.4rem) auto 0; max-width: 78rem; width: 100%; }

/* Demo controls sit above the window, outside the frame. */
.hd-demo { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin: 0 0 0.8rem; text-align: left; }
.hd-demo-tag { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--harbor); background: var(--sand); border-radius: 4px; padding: 0.2rem 0.45rem; }
.hd-pick { position: relative; display: flex; align-items: center; gap: 0.55rem; }
.hd-pick-label { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dmute); font-weight: 650; }
.hd-pick-btn {
  display: inline-flex; align-items: center; gap: 0.5rem; min-width: 11rem;
  padding: 0.5rem 0.8rem 0.5rem 0.95rem;
  border: 1px solid var(--dline-strong); border-radius: 10px;
  background: var(--panel-deep); color: var(--sand);
  font: inherit; font-weight: 650; font-size: 0.98rem; cursor: pointer;
}
.hd-pick-btn:hover, .hd-pick-btn:focus-visible { border-color: var(--sand-dim); }
.hd-pick-btn svg { width: 0.8rem; height: 0.8rem; margin-left: auto; color: var(--dmute); }
.hd-pick-panel {
  position: absolute; z-index: 40; top: calc(100% + 0.4rem); left: 0;
  width: 19rem; max-width: calc(100vw - 3rem);
  background: var(--panel); border: 1px solid var(--dline-strong); border-radius: 12px;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.7); padding: 0.55rem; text-align: left;
}
.hd-pick-q { width: 100%; box-sizing: border-box; padding: 0.5rem 0.7rem; border: 1px solid var(--dline-strong); border-radius: 8px; background: var(--harbor); color: var(--sand); font: inherit; font-size: 0.95rem; }
.hd-pick-q:focus { outline: none; border-color: var(--sand-dim); }
.hd-pick-q::-webkit-search-cancel-button { -webkit-appearance: none; }
.hd-pick-list { list-style: none; margin: 0.45rem 0 0; padding: 0; max-height: 15rem; overflow-y: auto; }
.hd-pick-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.42rem 0.6rem; border-radius: 6px; font-size: 0.95rem; color: var(--sand-dim); cursor: pointer; }
.hd-pick-list li:hover, .hd-pick-list li:focus-visible { background: rgba(239, 233, 220, 0.08); color: var(--sand); outline: none; }
.hd-pick-list li[aria-selected="true"] { color: var(--sand); font-weight: 650; }
.hd-pick-full { margin-left: auto; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass); font-weight: 700; }
.hd-pick-none { margin: 0.6rem 0.3rem 0.2rem; font-size: 0.86rem; color: var(--dmute); }
.hd-quick { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.hd-quick button { padding: 0.38rem 0.75rem; border: 1px solid var(--dline); border-radius: 999px; background: transparent; color: var(--sand-dim); font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; }
.hd-quick button:hover { border-color: var(--dline-strong); color: var(--sand); }
.hd-quick button.on { background: var(--sand); color: #131A24; border-color: var(--sand); }

/* The window */
.hd-win {
  background: #F0F0F1;
  border: 1px solid rgba(239, 233, 220, 0.22);
  border-radius: 16px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.35);
  overflow: hidden; text-align: left; color: #1D2327;
}
.hd-bar { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 1rem; background: var(--panel); border-bottom: 1px solid var(--dline); font-size: 0.82rem; color: var(--dmute); }
.hd-dots { display: inline-flex; gap: 0.35rem; }
.hd-dots i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: rgba(239, 233, 220, 0.18); }
.hd-url { flex: 1 1 auto; text-align: center; color: var(--sand-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-url > span { color: var(--dmute); }
.hd-free { border: 1px solid var(--dline-strong); border-radius: 999px; padding: 0.15rem 0.7rem; color: var(--sand); font-weight: 600; font-size: 0.78rem; }

/* Admin shell: rail + main */
.wp-shell { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); min-height: 40rem; }
.wp-rail { background: #1D2327; color: #C3C4C7; font-size: 0.82rem; padding: 0.6rem 0; }
.wp-rail ul { list-style: none; margin: 0; padding: 0; }
.wp-rail > ul > li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.45rem 0.8rem; }
.wp-rail > ul > li.on { background: #2271B1; color: #FFFFFF; }
.wp-rail > ul > li.on ul { flex-basis: 100%; margin: 0.35rem 0 0 -0.8rem; padding: 0.3rem 0 0.1rem 0; width: calc(100% + 1.6rem); background: #2C3338; }
.wp-rail > ul > li.on ul li { padding: 0.28rem 0.8rem 0.28rem 2.1rem; color: #C3C4C7; display: flex; align-items: center; gap: 0.4rem; }
.wp-rail > ul > li.on ul li.on { color: #FFFFFF; font-weight: 600; }
.wp-ico { width: 0.95rem; height: 0.95rem; border-radius: 3px; background: rgba(195, 196, 199, 0.35); flex: none; }
.wp-ico--bod { background: var(--ember); border-radius: 50%; }
.wp-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; border-radius: 999px; background: #D63638; color: #FFFFFF; font-size: 0.68rem; font-weight: 700; }
.wp-main { min-width: 0; display: flex; flex-direction: column; }
.wp-head { padding: 1rem 1.3rem 0.8rem; border-bottom: 1px solid #DCDCDE; background: #F6F7F7; }
.wp-h { margin: 0; font-size: 1.35rem; font-weight: 500; color: #1D2327; letter-spacing: 0; }
.wp-sub { margin: 0.1rem 0 0.7rem; font-size: 0.85rem; color: #646970; }
.wp-queue { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.wp-queue li { font-size: 0.8rem; padding: 0.28rem 0.7rem; border-radius: 999px; border: 1px solid #DCDCDE; background: #FFFFFF; color: #646970; max-width: 18rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-queue li.on { border-color: #1D2327; color: #1D2327; font-weight: 600; }
.wp-body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(17rem, 0.8fr); gap: 1rem; padding: 1rem 1.3rem 1.3rem; align-items: stretch; }

/* The post, rendered as it lands on the site */
/* The post pane takes the review column's height: height 0 keeps it
   from setting the row, min-height 100% fills whatever the review
   column needs, and the article scrolls inside. */
.wp-post { background: #FFFFFF; border: 1px solid #DCDCDE; border-radius: 6px; padding: clamp(1.2rem, 2.4vw, 2rem) clamp(1.2rem, 2.8vw, 2.4rem) 1.4rem; height: 0; min-height: 100%; box-sizing: border-box; overflow-y: auto; color: #1D2327; font-size: 0.98rem; line-height: 1.6; }
.wp-post.in { animation: hd-in 0.4s ease both; }
@keyframes hd-in { from { opacity: 0.4; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.wp-post-meta { margin: 0 0 0.4rem; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: #646970; font-weight: 650; }
.wp-post-meta span[aria-hidden] { margin: 0 0.45rem; }
.wp-post-title { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; margin: 0 0 0.4rem; color: #1D2327; }
.wp-post-dek { margin: 0 0 1rem; color: #50575E; font-size: 1.05rem; }
.wp-post-body p { margin: 0 0 0.85rem; }
.wp-answer { font-size: 1.04rem; color: #1D2327; padding: 0.7rem 0.9rem; border-left: 3px solid var(--ember); background: #FBF7F1; border-radius: 0 6px 6px 0; }
.wp-h2 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.015em; margin: 1.3rem 0 0.4rem; color: #1D2327; }
.wp-fig { margin: 0.9rem 0 1.1rem; }
.wp-fig--lead { margin-top: 0; }
.wp-fig-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 6px; overflow: hidden; }
.wp-fig-btn img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.wp-fig figcaption { font-size: 0.8rem; color: #646970; margin-top: 0.4rem; }
.wp-faq { margin-top: 1.2rem; padding: 0.9rem 1rem 0.3rem; background: #F6F7F7; border-radius: 6px; }
.wp-faq .wp-h2 { margin-top: 0; }
.wp-faq p { font-size: 0.94rem; }
.wp-outline-note { font-size: 0.85rem; color: #646970; font-style: italic; }
.wp-lines { display: grid; gap: 0.4rem; margin: 0.3rem 0 0.9rem; }
.wp-lines i { display: block; height: 0.55rem; border-radius: 3px; background: #E9E9EA; }
.wp-lines i.short { width: 62%; }
.wp-post-credit { margin: 1.1rem 0 0; padding-top: 0.7rem; border-top: 1px dashed #DCDCDE; font-size: 0.78rem; color: #646970; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.wp-post-credit p { margin: 0; }
.wp-credit-note { font-size: 0.72rem; line-height: 1.35; color: #646970; background: #F6F7F7; border: 1px solid #DCDCDE; border-radius: 4px; padding: 0.3rem 0.55rem; max-width: 20rem; }

/* Review column */
.wp-review { display: grid; gap: 0.8rem; position: sticky; top: 0; }
.wp-card { background: #FFFFFF; border: 1px solid #DCDCDE; border-radius: 6px; padding: 0.9rem 1rem; }
.wp-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin: 0 0 0.7rem; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: #1D2327; }
.wp-card-hint, .wp-draftno { font-size: 0.78rem; letter-spacing: 0; text-transform: none; font-weight: 500; color: #646970; }
.wp-draftno { font-weight: 650; color: #1D2327; }
.hd-steps { list-style: none; margin: 0; padding: 0; }
.hd-steps li { position: relative; padding: 0 0 0.7rem 1.5rem; color: #646970; }
.hd-steps li::before { content: ""; position: absolute; left: 0.4rem; top: 0.95rem; bottom: -0.15rem; border-left: 1px solid #DCDCDE; }
.hd-steps li:last-child::before { display: none; }
.hd-step-dot { position: absolute; left: 0; top: 0.28rem; width: 0.85rem; height: 0.85rem; border-radius: 50%; border: 1.5px solid #C3C4C7; background: #FFFFFF; }
.hd-steps li b { display: block; font-weight: 650; color: #50575E; font-size: 0.92rem; }
.hd-steps li small { display: block; font-size: 0.8rem; color: #646970; }
.hd-steps li.done b { color: #1D2327; }
.hd-steps li.done .hd-step-dot { background: #1D2327; border-color: #1D2327; }
.hd-steps li.now b { color: #1D2327; }
.hd-steps li.now .hd-step-dot { border-color: var(--brass); animation: hd-pulse 1.6s ease-in-out infinite; }
.hd-steps li.now small { color: #8C6423; }
.hd-steps li.done.now .hd-step-dot { background: #1E8A4C; border-color: #1E8A4C; box-shadow: 0 0 0 4px rgba(30, 138, 76, 0.18); animation: none; }
.hd-steps li.done.now small { color: #1E8A4C; }
@keyframes hd-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(194, 155, 87, 0.22); } 50% { box-shadow: 0 0 0 6px rgba(194, 155, 87, 0.08); } }
@media (prefers-reduced-motion: reduce) { .hd-steps li.now .hd-step-dot { animation: none; } .wp-post.in { animation: none; } }

.wp-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
.wp-tile { position: relative; border: 1px solid #DCDCDE; border-radius: 6px; overflow: hidden; background: #F6F7F7; }
.wp-tile.used { border-color: #1D2327; }
.wp-tile.lead { box-shadow: 0 0 0 2px var(--ember); border-color: var(--ember); }
.wp-tile-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.wp-tile-open img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.wp-tile:not(.used) .wp-tile-open img { opacity: 0.45; }
.wp-tile-row { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; padding: 0.35rem 0.45rem; font-size: 0.74rem; }
.wp-use { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; color: #1D2327; font-weight: 600; }
.wp-use input { margin: 0; width: 0.9rem; height: 0.9rem; accent-color: #1D2327; }
.wp-star { padding: 0.15rem 0.45rem; border: 1px solid #DCDCDE; border-radius: 999px; background: #FFFFFF; color: #50575E; font: inherit; font-size: 0.7rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.wp-star.on { background: var(--ember); border-color: var(--ember); color: #FFFFFF; }
.wp-star:not(.on):hover { border-color: #1D2327; color: #1D2327; }
.wp-tile-tag { position: absolute; top: 0.35rem; left: 0.35rem; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; padding: 0.12rem 0.4rem; border-radius: 4px; background: rgba(29, 35, 39, 0.82); color: #FFFFFF; }
.wp-setting { display: flex; align-items: baseline; gap: 0.45rem; margin: 0.7rem 0 0; font-size: 0.8rem; color: #646970; }
.wp-setting b { color: #1D2327; }
.wp-setting small { font-size: 0.72rem; }
.wp-link { margin-top: 0.4rem; padding: 0; border: 0; background: none; color: #2271B1; font: inherit; font-size: 0.8rem; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.wp-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; font-size: 0.84rem; color: #1D2327; line-height: 1.4; }
.wp-notes li { display: flex; gap: 0.5rem; align-items: flex-start; }
.wp-check { flex: none; display: inline-block; width: 0.9rem; height: 0.9rem; margin-top: 0.15rem; border-radius: 50%; background: #1E8A4C; position: relative; }
.wp-check::after { content: ""; position: absolute; left: 0.28rem; top: 0.12rem; width: 0.22rem; height: 0.42rem; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.wp-card--act { display: grid; gap: 0.75rem; }
.hd-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.hd-actions .btn-brass, .hd-actions .btn-dim { flex: 1 1 auto; justify-content: center; text-align: center; }
.wp-card .btn-dim { border-color: #C3C4C7; color: #1D2327; background: #FFFFFF; }
.wp-card .btn-dim:hover { border-color: #1D2327; }
.hd-actions .btn-brass[disabled] { opacity: 0.45; cursor: not-allowed; }
.hd-note label { display: block; font-size: 0.78rem; font-weight: 650; color: #1D2327; margin-bottom: 0.3rem; }
.hd-note textarea { width: 100%; box-sizing: border-box; padding: 0.5rem 0.65rem; border: 1px solid #C3C4C7; border-radius: 6px; font: inherit; font-size: 0.9rem; color: #1D2327; resize: vertical; }
.hd-note textarea:focus { outline: none; border-color: #2271B1; box-shadow: 0 0 0 1px #2271B1; }
.hd-note-row { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.5rem; }
.hd-note-row .wp-link { margin: 0; }
.hd-result { padding: 0.8rem 0.9rem; border: 1px solid #DCDCDE; border-radius: 6px; background: #F6F7F7; }
.hd-result-h { margin: 0 0 0.3rem; font-weight: 650; font-size: 0.94rem; color: #1D2327; }
.hd-result-p { margin: 0; font-size: 0.84rem; color: #50575E; line-height: 1.45; }
.hd-auto { display: flex; align-items: flex-start; gap: 0.7rem; padding-top: 0.75rem; border-top: 1px solid #DCDCDE; cursor: pointer; }
.hd-auto input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hd-auto-track { flex: none; position: relative; width: 2.5rem; height: 1.45rem; border-radius: 999px; background: #C3C4C7; transition: background 0.2s ease; margin-top: 0.1rem; }
.hd-auto-track i { position: absolute; top: 0.15rem; left: 0.15rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #FFFFFF; transition: transform 0.2s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.hd-auto input:checked + .hd-auto-track { background: #1E8A4C; }
.hd-auto input:checked + .hd-auto-track i { transform: translateX(1.05rem); }
.hd-auto input:focus-visible + .hd-auto-track { outline: 2px solid #2271B1; outline-offset: 2px; }
.hd-auto-text b { display: block; font-weight: 650; font-size: 0.9rem; color: #1D2327; }
.hd-auto-text small { display: block; font-size: 0.78rem; color: #646970; line-height: 1.35; }
.hd-auto input:checked ~ .hd-auto-text small { color: #1E8A4C; }
.hd-trail { margin: 0; font-size: 0.76rem; color: #646970; line-height: 1.4; }
.hd > figcaption { margin: 0.9rem auto 0; max-width: 56rem; font-size: 0.86rem; color: var(--dmute); text-align: center; }

/* Full screen */
.hd-fullbox { position: fixed; inset: 0; z-index: 1000; background: rgba(6, 10, 16, 0.94); display: flex; align-items: center; justify-content: center; padding: 3.5rem 4rem; }
.hd-fullbox[hidden], .hd-actions[hidden], .hd-note[hidden], .hd-result[hidden] { display: none; }
.hd-fullbox img { max-width: 100%; max-height: calc(100vh - 8rem); width: auto; height: auto; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.hd-full-cap { position: absolute; left: 0; right: 0; bottom: 1rem; margin: 0; text-align: center; font-size: 0.86rem; color: var(--sand-dim); padding: 0 1rem; }
.hd-full-x, .hd-full-nav { position: absolute; border: 1px solid rgba(239, 233, 220, 0.25); background: rgba(16, 27, 40, 0.85); color: var(--sand); font: inherit; cursor: pointer; border-radius: 999px; }
.hd-full-x { top: 1rem; right: 1rem; padding: 0.4rem 0.9rem; font-size: 0.86rem; font-weight: 600; }
.hd-full-nav { top: 50%; transform: translateY(-50%); width: 2.6rem; height: 2.6rem; font-size: 1.6rem; line-height: 1; }
.hd-full-prev { left: 1rem; } .hd-full-next { right: 1rem; }
.hd-full-x:hover, .hd-full-nav:hover { background: var(--sand); color: #131A24; }
body.hd-lock { overflow: hidden; }

@media (max-width: 1023px) {
  .wp-shell { grid-template-columns: 1fr; }
  .wp-rail { display: none; }
  .wp-body { grid-template-columns: 1fr; }
  .wp-review { position: static; }
  .wp-post { height: auto; min-height: 0; max-height: 34rem; }
}
@media (max-width: 559px) {
  .hd-win { border-radius: 12px; }
  .hd-dots { display: none; }
  .hd-url { font-size: 0.76rem; }
  .hd-quick { display: none; }
  .hd-pick-btn { min-width: 0; flex: 1 1 auto; }
  .hd-pick { flex: 1 1 auto; }
  .wp-head, .wp-body { padding-left: 0.9rem; padding-right: 0.9rem; }
  .wp-post { padding: 1rem 0.95rem; height: auto; min-height: 0; max-height: 30rem; }
  .wp-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hd-actions { flex-direction: column; }
  .hd-fullbox { padding: 3.2rem 0.6rem; }
  .hd-full-nav { width: 2.2rem; height: 2.2rem; }
  .hd-full-prev { left: 0.4rem; } .hd-full-next { right: 0.4rem; }
}

/* HOME-CRAFT-5: crew rename pass. Credit line carries the brand link. */
.wp-post-credit a { color: #2271B1; text-decoration: underline; text-underline-offset: 2px; }


/* ==================================================================
   HOME-CRAFT-6: the crew as a working line, and the loop as one
   draft's day. Replaces the catalog rail, the seven stacked cards,
   and the old loop. Prefix cw- and lp-. */

.deck .band--pit.cw { border-top: 1px solid var(--dline); }

/* The strip: six stops in rail order, joined by a line */
.cw-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.6rem;
  position: relative;
  margin: 0 0 1rem;
}
.cw-strip::before {
  content: "";
  position: absolute;
  left: 8%; right: 8%;
  top: 2.6rem;
  border-top: 1px dashed var(--dline-strong);
  z-index: 0;
}
.cw-stop {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0.4rem 0.6rem 0.9rem;
  border: 1px solid transparent; border-radius: 14px;
  background: transparent; color: var(--sand);
  font: inherit; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cw-stop:hover { background: rgba(239, 233, 220, 0.04); border-color: var(--dline); }
.cw-stop.on { background: var(--panel); border-color: var(--dline-strong); }
.cw-stop:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }
.cw-face {
  width: 4.4rem; height: 4.4rem; border-radius: 50%;
  background: var(--harbor);
  box-shadow: 0 0 0 3px var(--harbor), 0 0 0 4px var(--dline-strong);
  overflow: hidden; margin-bottom: 0.55rem;
  transition: box-shadow 0.15s ease;
}
.cw-stop.on .cw-face { box-shadow: 0 0 0 3px var(--harbor), 0 0 0 5px var(--tint, var(--brass)); }
.cw-face img { display: block; width: 100%; height: 100%; object-fit: contain; filter: saturate(0.74) brightness(0.96) contrast(0.98); }
.cw-stop b { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; }
.cw-stop small { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dmute); font-weight: 650; margin-top: 0.1rem; }
.cw-did { margin-top: 0.6rem; font-size: 0.82rem; line-height: 1.4; color: var(--sand-dim); }
.cw-stop.on .cw-did { color: var(--sand); }

/* The panel: one bot, open */
.cw-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(16rem, 0.9fr);
  gap: clamp(1.4rem, 3vw, 2.8rem);
  padding: clamp(1.3rem, 2.6vw, 2rem) clamp(1.3rem, 3vw, 2.4rem);
  background: var(--panel);
  border: 1px solid var(--dline-strong);
  border-left: 4px solid var(--tint, var(--brass));
  border-radius: 16px;
  margin-bottom: clamp(2.4rem, 5vh, 3.6rem);
}
.cw-panel.in { animation: cw-in 0.3s ease both; }
@keyframes cw-in { from { opacity: 0.5; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cw-panel.in { animation: none; } }
.cw-panel-who { margin: 0 0 0.5rem; display: flex; align-items: baseline; gap: 0.6rem; }
.cw-panel-who b { font-size: 1.05rem; color: var(--sand); }
.cw-panel-who span { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dmute); font-weight: 650; }
.cw-lead { font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 0.6rem; color: var(--sand); }
.cw-body { margin: 0; color: var(--dmute); font-size: 1.02rem; line-height: 1.55; }
.cw-label { margin: 0 0 0.45rem; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dmute); font-weight: 650; }
.cw-label--never { margin-top: 1.1rem; color: var(--brass); }
.cw-writes { list-style: none; margin: 0; padding: 0; }
.cw-writes li { padding: 0.45rem 0; border-top: 1px solid var(--dline); font-size: 0.95rem; color: var(--sand-dim); }
.cw-writes li:last-child { border-bottom: 1px solid var(--dline); }
.cw-never { margin: 0; padding: 0.7rem 0.9rem; border: 1px solid rgba(194, 155, 87, 0.4); border-radius: 10px; background: rgba(194, 155, 87, 0.08); color: var(--sand); font-size: 0.95rem; line-height: 1.45; }

/* The trade finder, inside the crew band */
.cw-trade {
  padding: clamp(1.3rem, 2.6vw, 2rem) clamp(1.3rem, 3vw, 2.4rem);
  border: 1px solid var(--dline);
  border-radius: 16px;
  background: var(--panel-deep);
}
.cw-trade-head { max-width: 44rem; }
.cw-trade-h { font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -0.02em; margin: 0 0 0.5rem; color: var(--sand); }
.cw-trade-p { margin: 0; color: var(--dmute); font-size: 1rem; line-height: 1.55; }
.cw-trade .trade-find { margin-top: 1.2rem; }
.cw-trade .cw-label { margin-top: 1.4rem; }
.cw-trade .trade-chips { margin-top: 0; }
.cw-trade .trades-door { margin-top: 1.2rem; }

/* The loop on paper: one draft's day */
.lp-day {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  position: relative;
}
.lp-day::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 4.55rem;
  border-top: 1px solid rgba(17, 17, 17, 0.22); z-index: 0;
}
.lp-day li { position: relative; z-index: 1; text-align: center; color: #111111; }
.lp-time { display: block; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 650; color: #6B6560; margin-bottom: 0.7rem; }
.lp-mark {
  display: flex; align-items: center; justify-content: center;
  width: 4.4rem; height: 4.4rem; margin: 0 auto 0.7rem; border-radius: 50%;
  background: #FFFFFF; border: 1.5px solid rgba(17, 17, 17, 0.22);
  font-weight: 700; font-size: 1.9rem; letter-spacing: -0.06em; line-height: 1; color: #111111;
  box-shadow: 0 0 0 4px #F6F4EF;
}
.lp-mark--bot { border-color: transparent; background: #F6F4EF; overflow: visible; }
.lp-mark--bot img { width: 4.6rem; height: 4.6rem; object-fit: contain; filter: saturate(0.74) brightness(0.96) contrast(0.98); }
.lp-mark--you { color: #C46A32; border-color: #C46A32; }
.lp-mark--you svg { width: 2.2rem; height: 2.2rem; }
.lp-day b { display: block; font-size: 1.05rem; margin-bottom: 0.3rem; }
.lp-day li.you b { color: #B4631E; }
.lp-day p { margin: 0 auto; max-width: 16rem; font-size: 0.95rem; line-height: 1.5; color: #6B6560; }
.js .lp-day li { opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s ease; }
.js .lp-day.play li { opacity: 1; transform: none; }
.js .lp-day.play li:nth-child(2) { transition-delay: 0.15s; }
.js .lp-day.play li:nth-child(3) { transition-delay: 0.3s; }
.js .lp-day.play li:nth-child(4) { transition-delay: 0.45s; }
@media (prefers-reduced-motion: reduce) { .js .lp-day li { opacity: 1; transform: none; transition: none; } }

@media (max-width: 1023px) {
  .cw-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cw-strip::before { display: none; }
  .cw-panel { grid-template-columns: 1fr; }
}
@media (max-width: 719px) {
  .cw-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .cw-stop { padding: 0.5rem 0.5rem 0.8rem; }
  .cw-face { width: 3.6rem; height: 3.6rem; }
  .cw-did { font-size: 0.78rem; }
  .lp-day { grid-template-columns: 1fr; gap: 1.4rem; }
  .lp-day::before { display: none; }
  .lp-day li { display: grid; grid-template-columns: 4.4rem 1fr; grid-template-areas: "mark time" "mark name" "mark text"; column-gap: 1rem; text-align: left; align-items: start; }
  .lp-time { grid-area: time; margin-bottom: 0.15rem; }
  .lp-mark { grid-area: mark; margin: 0; }
  .lp-day b { grid-area: name; }
  .lp-day p { grid-area: text; margin: 0; max-width: none; }
}


/* ---- HOME-CRAFT-7: trade finder, compact ---- */
.cw-trade-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr); gap: clamp(1.4rem, 3vw, 2.8rem); align-items: start; }
.cw-trade .trade-find { margin-top: 0; position: relative; max-width: none; }
.trade-hits { list-style: none; margin: 0.4rem 0 0; padding: 0.4rem; position: absolute; z-index: 30; left: 0; right: 0; background: var(--panel); border: 1px solid var(--dline-strong); border-radius: 12px; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.7); }
.trade-hits li { padding: 0.45rem 0.7rem; border-radius: 6px; font-size: 0.95rem; color: var(--sand-dim); cursor: pointer; }
.trade-hits li:hover, .trade-hits li:focus-visible { background: rgba(239, 233, 220, 0.08); color: var(--sand); outline: none; }
.trade-hits[hidden] { display: none; }
.trade-browse { padding: 0; border: 0; background: none; color: var(--sand); font: inherit; font-size: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.trade-pick { margin-top: 1.4rem; padding: 1.1rem 1.2rem; border: 1px solid rgba(194, 155, 87, 0.45); border-radius: 12px; background: rgba(194, 155, 87, 0.08); }
.trade-pick[hidden], .trades-door[hidden], .trade-all[hidden], .trade-find-hint[hidden] { display: none; }
.trade-pick-h { margin: 0 0 0.3rem; display: flex; gap: 0.4rem; align-items: baseline; flex-wrap: wrap; }
.trade-pick-h b { font-size: 1.15rem; color: var(--sand); }
.trade-pick-h span { color: var(--sand-dim); }
.trade-pick-p { margin: 0 0 0.9rem; color: var(--dmute); font-size: 0.98rem; }
.trade-pick-row { margin: 0; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.trade-pick-row .btn-brass svg { width: 14px; }
.cw-trade .trades-door.lit, .cw-trade .trades-door { margin-top: 1.4rem; border: 1px solid var(--dline-strong); background: var(--panel-deep); padding: 1.1rem 1.2rem; border-radius: 12px; }
.trade-all { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--dline); }
.trade-all .trade-chips li { font-size: 0.86rem; padding: 0.3rem 0.7rem; cursor: pointer; }
.trade-all .trade-chips li:hover { border-color: var(--sand-dim); color: var(--sand); }
@media (max-width: 899px) { .cw-trade-grid { grid-template-columns: 1fr; } }

/* HOME-CRAFT-8: crew screen, no credit line on a crew draft (14 Sep 2026) */
.wp-post-credit .wp-credit-off { color: #8C8F94; font-style: italic; }

/* HOME-CRAFT-9: live switch in the approval band; green when on, like wp-admin (14 Sep 2026) */
.hc-auto-toggle { cursor: pointer; user-select: none; }
.hc-auto-input { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }
.hc-switch { transition: background 0.2s ease, border-color 0.2s ease; }
.hc-switch i { transition: transform 0.2s ease; }
.hc-auto-input:checked ~ .hc-switch { background: #1E8A4C; border-color: #1E8A4C; }
.hc-auto-input:checked ~ .hc-switch i { transform: translateX(1.35rem); background: #FFFFFF; }
.hc-auto-input:focus-visible ~ .hc-switch { outline: 2px solid var(--sand); outline-offset: 3px; }
.hc-switch-label b { max-width: 16rem; }
.hc-tag { display: inline-block; vertical-align: middle; margin-left: 0.5rem; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.02em; color: var(--sand); border: 1px solid var(--dline-strong); background: rgba(239, 233, 220, 0.08); }

/* HOME-CRAFT-10: the crew log (14 Sep 2026). Replaces the strip and panel.
   All six shown, in order, one column; a sticky face rail on wide screens. */
.cr { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.6rem); align-items: start; margin-top: 1.6rem; }
.cr-rail { position: sticky; top: 5.2rem; }
.cr-rail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; position: relative; }
.cr-rail a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.35rem 0; text-decoration: none; color: var(--dmute); font-size: 0.72rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 12px; }
.cr-rail-face { width: 3.2rem; height: 3.2rem; border-radius: 50%; overflow: hidden; background: var(--harbor); border: 1px solid var(--dline); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.cr-rail-face img { display: block; width: 100%; height: 100%; object-fit: contain; filter: saturate(0.74) brightness(0.96) contrast(0.98); opacity: 0.72; transition: opacity 0.2s ease; }
.cr-rail a.on { color: var(--sand); }
.cr-rail a.on .cr-rail-face { box-shadow: 0 0 0 3px var(--harbor), 0 0 0 5px var(--tint, var(--brass)); transform: scale(1.06); }
.cr-rail a.on .cr-rail-face img, .cr-rail a:hover .cr-rail-face img { opacity: 1; }
.cr-rail a:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }

.cr-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.cr-entry, .cr-rail li { max-width: none; }
.cr-body, .cr-did { max-width: 62ch; }
.cr-entry { position: relative; border: 1px solid var(--dline); border-left: 3px solid var(--tint, var(--brass)); border-radius: 16px; background: var(--panel); padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.1rem, 2.4vw, 1.8rem); scroll-margin-top: 5.5rem; }
.cr-who { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.9rem; }
.cr-face { flex: none; width: 3.4rem; height: 3.4rem; border-radius: 50%; overflow: hidden; background: var(--harbor); box-shadow: 0 0 0 2px var(--tint, var(--brass)); }
.cr-face img { display: block; width: 100%; height: 100%; object-fit: contain; filter: saturate(0.74) brightness(0.96) contrast(0.98); }
.cr-name { display: flex; flex-direction: column; line-height: 1.15; }
.cr-name b { font-size: 1.1rem; color: var(--sand); letter-spacing: -0.01em; }
.cr-name small { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dmute); font-weight: 650; margin-top: 0.15rem; }
.cr-n { margin-left: auto; font-size: 0.78rem; font-weight: 700; color: var(--dmute); border: 1px solid var(--dline); border-radius: 999px; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; }
.cr-did { margin: 0 0 0.9rem; padding: 0.7rem 0.9rem; border-radius: 10px; background: rgba(239, 233, 220, 0.05); color: var(--sand); font-size: 0.98rem; line-height: 1.45; }
.cr-did::before { content: "On the furnace draft"; display: block; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tint, var(--brass)); font-weight: 700; margin-bottom: 0.25rem; }
.cr-lead { font-size: clamp(1.25rem, 1.9vw, 1.55rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.5rem; color: var(--sand); }
.cr-body { margin: 0; color: var(--dmute); font-size: 1rem; line-height: 1.55; }
.cr-more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--dline); }
.cr-more .cw-label--never { margin-top: 0; }
@media (max-width: 900px) {
  .cr { grid-template-columns: 1fr; }
  .cr-rail { display: none; }
  .cr-more { grid-template-columns: 1fr; gap: 1rem; }
}
/* HOME-CRAFT-10b: wide entries put the furnace-draft note beside the explanation */
@media (min-width: 901px) {
  .cr-entry { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; grid-template-areas: "who who" "lead did" "body did" "more more"; column-gap: 1.6rem; align-items: start; }
  .cr-who { grid-area: who; }
  .cr-did { grid-area: did; margin: 0; align-self: start; }
  .cr-lead { grid-area: lead; }
  .cr-body { grid-area: body; }
  .cr-more { grid-area: more; }
}

/* HOME-CRAFT-9b: "what is a crew license" info button and box (14 Sep 2026) */
.hc-tag { display: inline-flex; align-items: center; gap: 0.35rem; }
.hc-info { appearance: none; border: 1px solid var(--dline-strong); background: transparent; color: var(--sand); width: 1.15rem; height: 1.15rem; border-radius: 50%; font: italic 700 0.7rem/1 Georgia, "Times New Roman", serif; display: grid; place-items: center; cursor: pointer; padding: 0; transition: background 0.15s ease, border-color 0.15s ease; }
.hc-info:hover, .hc-info[aria-expanded="true"] { background: rgba(239, 233, 220, 0.14); border-color: var(--sand); }
.hc-info:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }
.hc-info-box { margin: 0.8rem 0 0.9rem; padding: 0.85rem 1rem; border: 1px solid var(--dline-strong); border-radius: 12px; background: rgba(239, 233, 220, 0.05); }
.hc-info-box p { margin: 0; color: var(--dmute); font-size: 0.95rem; line-height: 1.5; }
.hc-info-box p + p { margin-top: 0.5rem; }
.hc-info-box b { color: var(--sand); font-weight: 650; }
.hc-info-box a { color: var(--sand); text-decoration: underline; text-underline-offset: 3px; }

/* HOME-CRAFT-10c: no rail; room between cards and before the trade box (14 Sep 2026) */
.cr { grid-template-columns: 1fr; margin-top: 2rem; }
.cr-rail { display: none; }
.cr-log { gap: 1.4rem; }
.cr-entry { padding: clamp(1.4rem, 2.6vw, 2rem) clamp(1.3rem, 2.8vw, 2.2rem); background: rgba(239, 233, 220, 0.035); border-color: rgba(239, 233, 220, 0.12); }
.cr-who { margin-bottom: 1.1rem; }
.cr-lead { margin-bottom: 0.6rem; }
.cr-more { margin-top: 1.4rem; padding-top: 1.2rem; }
.cw .cw-trade { margin-top: clamp(2.4rem, 5vw, 4rem); }
.cw .hc-foot { margin-top: clamp(1.8rem, 3.5vw, 2.8rem); }
@media (min-width: 901px) {
  .cr-entry { grid-template-columns: minmax(0, 1fr) 20rem; column-gap: 2.2rem; }
}

/* HOME-CRAFT-11: the learning loop band inside the crew section (14 Sep 2026) */
.ll { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr); gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; margin-top: clamp(2.4rem, 5vw, 4rem); padding-top: clamp(2rem, 4vw, 3.2rem); border-top: 1px solid var(--dline); }
.ll-h { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 0.8rem; color: var(--sand); }
.ll-p { margin: 0 0 1.1rem; color: var(--dmute); font-size: 1.05rem; line-height: 1.55; }
.ll-list { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.ll-list li { padding: 0.5rem 0; border-top: 1px solid var(--dline); color: var(--sand-dim); font-size: 0.97rem; line-height: 1.45; max-width: none; }
.ll-list li:last-child { border-bottom: 1px solid var(--dline); }
.ll-list b { color: var(--sand); font-weight: 700; }
.ll-rules { margin: 0; padding: 0.8rem 1rem; border: 1px solid rgba(194, 155, 87, 0.4); border-radius: 10px; background: rgba(194, 155, 87, 0.08); color: var(--sand); font-size: 0.95rem; line-height: 1.5; }
.ll-card { color: #1D2327; }
.ll-filter { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.7rem; }
.ll-filter span { font-size: 0.74rem; padding: 0.18rem 0.6rem; border-radius: 999px; border: 1px solid #DCDCDE; color: #646970; background: #F6F7F7; }
.ll-filter span.on { background: #2271B1; border-color: #2271B1; color: #FFFFFF; }
.ll-rows { list-style: none; margin: 0; padding: 0; }
.ll-rows li { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0; border-top: 1px solid #F0F0F1; max-width: none; }
.ll-bot { flex: none; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #FFFFFF; background: var(--tint, #646970); padding: 0.15rem 0.5rem; border-radius: 999px; min-width: 3.6rem; text-align: center; }
.ll-rule { flex: 1; min-width: 0; font-size: 0.9rem; line-height: 1.3; color: #1D2327; display: flex; flex-direction: column; }
.ll-rule small { font-size: 0.74rem; color: #646970; margin-top: 0.1rem; }
.ll-clear { flex: none; appearance: none; background: #FFFFFF; border: 1px solid #C3C4C7; color: #2271B1; border-radius: 4px; font-size: 0.76rem; padding: 0.25rem 0.55rem; cursor: default; }
.ll-note { display: flex; justify-content: space-between; align-items: center; margin: 0.8rem 0 0; padding-top: 0.7rem; border-top: 1px solid #DCDCDE; font-size: 0.85rem; color: #646970; }
.ll-note b { color: #1D2327; background: #F0F0F1; border: 1px solid #DCDCDE; border-radius: 999px; padding: 0.1rem 0.6rem; font-weight: 650; }
.ll-cap { margin: 0.7rem 0 0; color: var(--dmute); }
@media (max-width: 900px) { .ll { grid-template-columns: 1fr; } }

/* HOME-CRAFT-12: centered section eyebrows were sitting in a 62ch box; and the fixture switch names the license (14 Sep 2026) */
.hc-head .eyebrow, .hc-head .support, .center .eyebrow, .center .kicker { margin-left: auto; margin-right: auto; }
.hd-auto-tag { display: inline-block; vertical-align: middle; margin-left: 0.35rem; padding: 0.08rem 0.45rem; border-radius: 999px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; color: #1D2327; background: #F0F0F1; border: 1px solid #DCDCDE; }

/* HOME-CRAFT-13: Free and Pro tiers, FAQ (14 Sep 2026). The Four actors band is retired; the crew log carries that story. */
.tier-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1.2rem, 3vw, 2.2rem); align-items: start; }
.tier { border: 1px solid rgba(17, 17, 17, 0.14); border-radius: 18px; background: #FFFFFF; padding: clamp(1.4rem, 2.8vw, 2.2rem); }
.tier--pro { border-color: rgba(17, 17, 17, 0.28); box-shadow: 0 1px 0 rgba(17, 17, 17, 0.04), 0 12px 32px rgba(17, 17, 17, 0.06); }
.tier-name { margin: 0 0 0.6rem; font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -0.03em; color: #111111; display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; max-width: none; }
.tier-name small { font-size: 0.85rem; font-weight: 500; letter-spacing: 0; color: #6B6560; }
.tier--pro .tier-name::after { content: "Paid"; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #FFFFFF; background: #111111; border-radius: 999px; padding: 0.2rem 0.6rem; margin-left: auto; }
.tier-lede { margin: 0 0 1rem; font-size: 1.05rem; line-height: 1.45; color: #111111; font-weight: 600; max-width: none; }
.tier-list { list-style: none; margin: 0 0 1.3rem; padding: 0; }
.tier-list li { position: relative; padding: 0.55rem 0 0.55rem 1.6rem; border-top: 1px solid rgba(17, 17, 17, 0.1); font-size: 0.97rem; line-height: 1.45; color: #2A2622; max-width: none; }
.tier-list li:last-child { border-bottom: 1px solid rgba(17, 17, 17, 0.1); }
.tier-list li::before { content: ""; position: absolute; left: 0.1rem; top: 0.95rem; width: 0.85rem; height: 0.5rem; border-left: 2px solid #111111; border-bottom: 2px solid #111111; transform: rotate(-45deg); }
.tier--pro .tier-list li::before { border-color: var(--ember, #E08A32); }
.tier-list b { color: #111111; }
.tier-cta { margin: 0; }
.hc-tiers .hc-foot { margin-top: clamp(1.4rem, 3vw, 2.2rem); }
@media (max-width: 860px) { .tier-grid { grid-template-columns: 1fr; } }

.faq { max-width: 52rem; margin: 0 auto; }
.faq-item { border-top: 1px solid var(--dline); }
.faq-item:last-child { border-bottom: 1px solid var(--dline); }
.faq-item summary { list-style: none; cursor: pointer; padding: 1rem 2.4rem 1rem 0; font-weight: 650; font-size: 1.08rem; color: var(--sand); position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; position: absolute; right: 0.4rem; top: 1.25rem; width: 0.6rem; height: 0.6rem; border-right: 2px solid var(--dmute); border-bottom: 2px solid var(--dmute); transform: rotate(45deg); transition: transform 0.2s ease; }
.faq-item[open] summary::after { transform: rotate(225deg); top: 1.5rem; }
.faq-item summary:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }
.faq-item p { margin: 0 0 1.1rem; color: var(--dmute); font-size: 1rem; line-height: 1.55; max-width: 62ch; }
.faq-item p a { color: var(--sand); text-decoration: underline; text-underline-offset: 3px; }
.deck .hc-faq .display-2 { margin-bottom: 0; }
.tier .btn-ghost2 { color: #111111; border-color: rgba(17, 17, 17, 0.4); }
.tier .btn-ghost2:hover, .tier .btn-ghost2:focus { border-color: #111111; color: #111111; }

/* LAUNCH-1 (14 Sep 2026): legal pages, footer maker line, tiers on plugin.html */
.legal-body { max-width: 46rem; margin: 0 auto; }
.deck .band--paper.legal h2 { font-size: 1.25rem; letter-spacing: -0.015em; margin: 2rem 0 0.6rem; }
.deck .band--paper.legal h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li { color: #2A2622; font-size: 1rem; line-height: 1.6; }
.legal-body ul { padding-left: 1.2rem; margin: 0.4rem 0 0.8rem; }
.legal-body li { margin: 0.35rem 0; }
.legal-body a { color: #111111; }
.foot-maker { margin-top: 0.6rem; font-size: 0.82rem; color: var(--dmute); }
.foot-maker a { color: var(--sand); }

.cr-more-p { margin: 0.7rem 0 0; color: var(--dmute); font-size: 0.97rem; line-height: 1.55; }
@media (min-width: 901px) { .cr-more-p { grid-area: morep; } .cw .cr-entry { grid-template-areas: "who who" "lead did" "body did" "morep morep" "more more"; } }
.tpl-trades { margin-top: clamp(2rem, 4vw, 3rem); }

/* LAUNCH-2: contact band with form (14 Sep 2026) */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr); gap: clamp(1.8rem, 5vw, 4.5rem); align-items: start; }
.contact-copy .display-2 { max-width: 12ch; }
.contact-copy .support { max-width: 30rem; margin-bottom: 1.2rem; }
.contact-why { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.contact-why li { padding: 0.65rem 0; border-top: 1px solid var(--line-soft); color: #2A2622; font-size: 0.95rem; line-height: 1.5; max-width: none; }
.contact-why li:last-child { border-bottom: 1px solid var(--line-soft); }
.contact-why b { color: var(--ink); }
.contact-alt a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ember); font-weight: 600; }
.contact-form { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: clamp(1.2rem, 3vw, 2rem); box-shadow: 0 18px 40px -28px rgba(17, 17, 17, 0.35), 0 1px 0 rgba(255, 255, 255, 0.6) inset; display: grid; gap: 1rem; }
.cf-row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cf-field { display: grid; gap: 0.4rem; max-width: none; }
.cf-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; padding: 0.8rem 0.95rem; transition: border-color 0.15s, box-shadow 0.15s; -webkit-appearance: none; appearance: none; }
.contact-form textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }
.contact-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 12px; padding-right: 2.4rem; }
.contact-form select:invalid { color: var(--mute); }
.contact-form ::placeholder { color: #A39D96; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px rgba(224, 138, 50, 0.22); }
.contact-form.cf-touched :invalid { border-color: #B8452B; }
.cf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; }
.cf-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.2rem; }
.cf-send { display: inline-flex; align-items: center; gap: 0.55rem; }
.cf-send svg { width: 15px; height: 15px; }
.cf-send:disabled { opacity: 0.6; cursor: wait; }
.cf-note { margin: 0; flex: 1 1 14rem; max-width: 22rem; }
.cf-status { margin: 0; font-size: 0.9rem; min-height: 0; }
.cf-status:empty { display: none; }
.cf-status.is-ok { color: #1E8A4C; }
.cf-status.is-err { color: #B8452B; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .cf-row--2 { grid-template-columns: 1fr; } }

/* HOME-CRAFT-14: why you bring SuperGrok (pit) + FAQ moved to paper (14 Sep 2026) */
.why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; margin-top: 2.2rem; }
.why-card { border: 1px solid var(--dline-strong); border-radius: 16px; padding: clamp(1.2rem, 2.4vw, 1.7rem) clamp(1.2rem, 2.4vw, 1.8rem); background: rgba(239, 233, 220, 0.03); }
.why-n { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--ember); margin: 0 0 0.6rem; }
.why-card h3 { margin: 0 0 0.5rem; font-size: 1.22rem; letter-spacing: -0.015em; color: var(--sand); }
.why-card p:last-child { margin: 0; color: var(--dmute); font-size: 0.98rem; line-height: 1.55; max-width: none; }
.hc-why .hc-foot { margin-top: 1.6rem; }
@media (max-width: 760px) { .why-grid { grid-template-columns: 1fr; } }
.band--paper .faq-item { border-color: var(--line); }
.band--paper .faq-item summary { color: var(--ink); }
.band--paper .faq-item summary::after { border-color: var(--mute); }
.band--paper .faq-item summary:focus-visible { outline-color: var(--ink); }
.band--paper .faq-item p { color: #3A3530; }
.band--paper .faq-item p a { color: var(--ink); }
.hc-contact { background: #FBF9F4; border-top: 1px solid var(--line-soft); }

/* HOME-CRAFT-15: learned-rules illustration, confirm state on Clear (Rob, 14 Sep 2026) */
.ll-rows li.ll-confirm { background: #FCF9F1; margin: 0 -0.4rem; padding-left: 0.4rem; padding-right: 0.4rem; border-radius: 6px; }
.ll-confirm .ll-rule small { color: #8A5A0E; }
.ll-confirm-btns { flex: none; display: inline-flex; gap: 0.35rem; }
.ll-clear--yes { background: #B8452B; border-color: #B8452B; color: #FFFFFF; }

/* HOME-CRAFT-16: tiers split, story rows left, Pro card right (14 Sep 2026) */
.tsplit { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(19rem, 0.9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.tsplit-copy .eyebrow, .tsplit-copy .support { margin-left: 0; margin-right: 0; text-align: left; }
.tsplit-copy .display-2 { text-align: left; max-width: 12ch; }
.tsplit-copy .support { max-width: 32rem; }
.trow-list { display: grid; gap: 0.7rem; margin-top: 1.8rem; }
.trow { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.2rem; align-items: start; background: var(--card); border: 1px solid var(--line-soft); border-radius: 14px; padding: 1.05rem 1.2rem; box-shadow: 0 10px 28px -24px rgba(17, 17, 17, 0.35); }
.trow-label b { display: block; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; }
.trow-label small { display: block; font-size: 0.78rem; color: var(--mute); margin-top: 0.15rem; }
.trow p { margin: 0; font-size: 0.95rem; line-height: 1.5; color: #2A2622; max-width: none; }
.trow p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.tcard { background: #FFFFFF; border: 1px solid var(--line); border-radius: 20px; padding: clamp(1.4rem, 2.8vw, 2rem); box-shadow: 0 30px 60px -36px rgba(17, 17, 17, 0.45), 0 1px 0 rgba(255,255,255,0.7) inset; position: sticky; top: calc(var(--head-h) + 1rem); }
.tcard-badge span { color: #F6F4EF; }
.tcard-badge { display: inline-block; margin: 0 0 0.8rem; padding: 0.22rem 0.6rem; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.tcard-h { margin: 0 0 0.9rem; font-size: 1.35rem; letter-spacing: -0.02em; color: var(--ink); }
.tcard-price { margin: 0; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.tcard-num { font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.tcard-per { font-size: 0.85rem; color: var(--mute); }
.tcard-sub { margin: 0.5rem 0 1.1rem; font-size: 0.86rem; color: var(--mute); max-width: none; }
.tcard-list { list-style: none; margin: 0 0 1.3rem; padding: 0; }
.tcard-list li { position: relative; padding: 0.42rem 0 0.42rem 1.55rem; font-size: 0.93rem; line-height: 1.42; color: #2A2622; max-width: none; }
.tcard-list li::before { content: ""; position: absolute; left: 0.15rem; top: 0.85rem; width: 0.8rem; height: 0.45rem; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.tcard-list b { color: var(--ink); }
.tcard-cta { margin: 0 0 0.8rem; }
.tcard-cta .btn-fill { display: block; text-align: center; width: 100%; }
.tcard-foot { margin: 0; font-size: 0.8rem; color: var(--mute); text-align: center; max-width: none; }
.tcard-foot a { color: var(--ink); }
@media (max-width: 900px) { .tsplit { grid-template-columns: 1fr; } .tcard { position: static; } }
@media (max-width: 560px) { .trow { grid-template-columns: 1fr; gap: 0.4rem; } }
/* HOME-CRAFT-16b: price on the card (Rob, 14 Sep 2026: $29/mo, $290/yr) */
.tcard-sub b { color: var(--ink); }

/* HOME-CRAFT-17: hero without the pill; facts line under the buttons; taller nav (Rob, 15 Sep 2026) */
.hero-center .hero-display { margin-top: clamp(0.6rem, 2vh, 1.4rem); }
.hero-facts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem; margin: 1.1rem 0 0; font-size: 0.86rem; color: var(--dmute); max-width: none; }
.hero-facts .pill-dot { background: var(--sand-dim); opacity: 0.6; }
.hero-facts a { color: var(--sand-dim); text-decoration: underline; text-underline-offset: 3px; }
.hero-facts a:hover { color: var(--sand); }
.site-nav .nav-join { padding: 0.55rem 1.15rem; }

/* HOME-CRAFT-18: comparison table inside the why band (15 Sep 2026) */
.cmp { margin-top: clamp(2.2rem, 5vw, 3.4rem); }
.cmp-head { text-align: center; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dmute); margin: 0 0 1rem; max-width: none; }
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--dline-strong); border-radius: 16px; background: rgba(239, 233, 220, 0.03); }
.cmp-table { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: 0.92rem; line-height: 1.4; }
.cmp-table th, .cmp-table td { padding: 0.8rem 0.9rem; vertical-align: top; text-align: left; border-top: 1px solid var(--dline); color: var(--sand-dim); max-width: none; }
.cmp-table thead th { border-top: 0; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dmute); padding-top: 1rem; }
.cmp-table tbody th { color: var(--sand); font-weight: 650; width: 11.5rem; }
.cmp-table .cmp-us { color: var(--sand); background: rgba(224, 138, 50, 0.07); }
.cmp-table thead th.cmp-us { color: var(--ember); }
.cmp-note { margin: 0.8rem 0 0; text-align: center; max-width: none; }

/* HOME-CRAFT-18b: two-model comparison replaces the competitor table; cards lose the numbers (15 Sep 2026) */
.why-grid { margin-top: 1.8rem; }
.why-card p:last-child { color: var(--sand-dim); font-size: 1rem; }
.cmp { margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.cmp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.cmp-col { border: 1px solid var(--dline-strong); border-radius: 16px; padding: clamp(1.2rem, 2.4vw, 1.7rem); background: rgba(239, 233, 220, 0.03); }
.cmp-col--us { border-color: rgba(224, 138, 50, 0.45); background: rgba(224, 138, 50, 0.07); }
.cmp-col h3 { margin: 0 0 0.2rem; font-size: 1.25rem; letter-spacing: -0.015em; color: var(--sand); }
.cmp-col--us h3 { color: var(--ember); }
.cmp-sub { margin: 0 0 0.9rem; font-size: 0.92rem; color: var(--dmute); max-width: none; }
.cmp-col ul { list-style: none; margin: 0; padding: 0; }
.cmp-col li { padding: 0.55rem 0; border-top: 1px solid var(--dline); font-size: 0.98rem; line-height: 1.5; color: var(--sand-dim); max-width: none; }
.cmp-col li b { color: var(--sand); font-weight: 650; }
.cmp-note a { color: var(--sand); text-decoration: underline; text-underline-offset: 3px; }
.cmp-table, .cmp-wrap, .cmp-table th, .cmp-table td { all: revert; }
@media (max-width: 760px) { .cmp-grid { grid-template-columns: 1fr; } }

/* HOME-CRAFT-18c: three benefit cards (15 Sep 2026) */
.why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; } }
.cmp-note, .hc-why .hc-foot { color: var(--sand-dim); }

/* SHORT: the shorter homepage revision (home-short.html), 15 Sep 2026. Scoped to body.short so index.html is untouched. */
.short .band { padding: clamp(3.6rem, 9vh, 6.5rem) 0; }
.short .band--top { padding-top: clamp(2.2rem, 6vh, 4rem); padding-bottom: clamp(3rem, 7vh, 5rem); }
.short .hc-head { margin-bottom: clamp(1.8rem, 4vh, 2.8rem); }
.short .hc-foot { margin-top: clamp(1.4rem, 3vh, 2.2rem); }
.short .hero-display { font-size: clamp(2.3rem, 1rem + 4.6vw, 4.6rem); }
.short .hero-lede { margin-top: 1rem; font-size: clamp(1.05rem, 1.3vw, 1.2rem); }
.short .hero-ctas { margin-top: 1.4rem; }
.ab-toggle { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 1.2rem; padding: 0.25rem 0.3rem 0.25rem 0.8rem; border: 1px dashed var(--dline-strong); border-radius: 999px; font-size: 0.78rem; color: var(--dmute); max-width: none; }
.ab-label { margin-right: 0.3rem; }
.ab-btn { appearance: none; border: 1px solid var(--dline-strong); background: transparent; color: var(--sand-dim); border-radius: 999px; padding: 0.3rem 0.7rem; font: inherit; font-size: 0.78rem; cursor: pointer; }
.ab-btn.is-on { background: var(--sand); color: var(--pit); border-color: var(--sand); }
.demo-steps { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.6rem; margin: clamp(1.8rem, 4vh, 2.6rem) 0 0.6rem; padding: 0; }
.demo-steps li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; color: var(--sand-dim); max-width: none; }
.demo-steps b { color: var(--sand); }
.demo-label { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 0 1rem; font-size: 0.8rem; color: var(--dmute); max-width: none; }
.demo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); }
.short .hero-fixture { margin-top: 0.4rem; }
.anno { margin-top: clamp(1.6rem, 3vh, 2.4rem); text-align: left; width: 100%; }
.anno-h { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dmute); margin: 0 0 0.8rem; text-align: center; max-width: none; }
.anno-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.8rem; }
.anno-list li { border: 1px solid var(--dline-strong); border-radius: 12px; padding: 0.85rem 0.95rem; font-size: 0.88rem; line-height: 1.45; color: var(--sand-dim); max-width: none; }
.anno-list b { display: block; color: var(--sand); margin-bottom: 0.2rem; }
.anno-foot { text-align: center; margin: 1rem auto 0; max-width: 52rem; }
@media (max-width: 1000px) { .anno-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .anno-list { grid-template-columns: 1fr; } .demo-steps { flex-direction: column; align-items: flex-start; gap: 0.5rem; } }
.ctl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.ctl-col .eyebrow { margin-left: 0; margin-right: 0; text-align: left; }
.ctl-col .display-3 { max-width: 16ch; }
.ctl-list { list-style: none; margin: 0.8rem 0 1.2rem; padding: 0; }
.ctl-list li { padding: 0.6rem 0; border-top: 1px solid var(--line-soft); font-size: 0.97rem; line-height: 1.5; color: #2A2622; max-width: none; }
.ctl-list li:last-child { border-bottom: 1px solid var(--line-soft); }
.ctl-list b { color: var(--ink); }
.ctl-p { color: #3A3530; font-size: 1rem; max-width: none; margin: 0.4rem 0 1rem; }
.short .hc-control .hc-auto { margin-top: 0.6rem; }
.short .hc-control .hc-auto-copy h3, .short .hc-control .hc-auto-copy p { color: var(--ink); }
.short .hc-control .hc-info-box { color: var(--ink); }
.px-ex { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr); gap: 0.8rem; align-items: center; }
.px-still { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #FFFFFF; }
.px-still img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.px-reason { margin: 0; padding: 0.6rem 0.75rem; font-size: 0.82rem; line-height: 1.4; color: #3A3530; max-width: none; }
.px-tag { display: inline-block; margin-right: 0.4rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: #B8452B; color: #FFFFFF; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; }
.px-arrow { font-size: 1.6rem; color: var(--mute); }
.px-rule { margin: 0; }
.ctl-foot { margin-top: 0.9rem; max-width: none; }
@media (max-width: 900px) { .ctl-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .px-ex { grid-template-columns: 1fr; } .px-arrow { transform: rotate(90deg); text-align: center; } }
.crew6 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.crew6 li { text-align: center; padding: 1.2rem 0.8rem 1.1rem; border: 1px solid var(--dline-strong); border-radius: 16px; background: rgba(239, 233, 220, 0.03); max-width: none; }
.crew6 img { display: block; width: 6.5rem; height: 6.5rem; margin: 0 auto 0.7rem; border-radius: 50%; border: 3px solid var(--tint); background: var(--pit); }
.crew6 b { display: block; font-size: 1.1rem; color: var(--sand); margin-bottom: 0.25rem; }
.crew6 span { display: block; font-size: 0.86rem; line-height: 1.4; color: var(--sand-dim); }
.crew6-cta { justify-content: center; margin-top: 1.4rem; max-width: none; margin-left: auto; margin-right: auto; }
.short .cw-trade { margin-top: clamp(2.2rem, 5vh, 3.4rem); }
@media (max-width: 1000px) { .crew6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .crew6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .crew6 img { width: 5rem; height: 5rem; } }
.found2-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.9fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.found2-grid .eyebrow { margin-left: 0; margin-right: 0; text-align: left; }
.found2-grid .display-3 { max-width: 16ch; }
.hc-serp--small { margin: 0; }
@media (max-width: 860px) { .found2-grid { grid-template-columns: 1fr; } }
.hc-tiers--dark .tsplit-copy .display-2, .hc-tiers--dark .tsplit-copy .support, .hc-tiers--dark .tsplit-copy .eyebrow { color: var(--sand); }
.hc-tiers--dark .tsplit-copy .support, .hc-tiers--dark .tsplit-copy .eyebrow { color: var(--dmute); }
.hc-tiers--dark .trow { background: rgba(239, 233, 220, 0.04); border-color: var(--dline-strong); box-shadow: none; }
.hc-tiers--dark .trow-label b { color: var(--sand); }
.hc-tiers--dark .trow-label small { color: var(--dmute); }
.hc-tiers--dark .trow p { color: var(--sand-dim); }
.hc-tiers--dark .trow p a { color: var(--sand); }
.twobills { margin: clamp(1.8rem, 4vh, 2.6rem) auto 0; max-width: 52rem; text-align: center; }
.twobills-h { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dmute); margin: 0 0 0.5rem; max-width: none; }
.twobills p:last-child { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--sand-dim); max-width: none; }
.twobills a { color: var(--sand); text-decoration: underline; text-underline-offset: 3px; }
.short .contact-copy .support { margin-bottom: 1rem; }
/* SHORT: the approval switch block on paper */
.short .hc-control .hc-auto { background: #FFFFFF; border-color: var(--line); grid-template-columns: 1fr; gap: 0.9rem; padding: 1.1rem 1.2rem; }
.short .hc-control .hc-switch-label { color: var(--ink); }
.short .hc-control .hc-switch-label b { color: var(--mute); }
.short .hc-control .hc-auto-copy h3 { color: var(--ink); font-size: 1.05rem; }
.short .hc-control .hc-auto-copy p { color: #3A3530; font-size: 0.93rem; }
.short .hc-control .hc-tag { color: var(--ink); border-color: var(--line); background: rgba(17, 17, 17, 0.05); }
.short .hc-control .hc-info { color: var(--ink); border-color: var(--line); }
.short .hc-control .hc-info-box { border-color: var(--line); background: #FBF9F4; color: var(--ink); }
.short .hc-control .hc-info-box p, .short .hc-control .hc-info-box a, .short .hc-control .hc-info-box b { color: var(--ink); }
.short .hc-control .hc-switch { background: #C3C4C7; border-color: #C3C4C7; }
.short .hc-control .hc-switch i { background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.short .hc-control .hc-auto-input:checked ~ .hc-switch { background: #1E8A4C; border-color: #1E8A4C; }
.short .hc-control .hc-auto-input:checked ~ .hc-switch-label b { color: #1E8A4C; }
.hc-tiers--dark .tcard .btn-fill { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.hc-tiers--dark .tcard .btn-fill:hover { background: #2A2A2A; }
@media (max-width: 560px) { .demo-steps li { align-items: flex-start; text-align: left; } .demo-steps .hc-n { margin-top: 0.1rem; } }
/* SHORT: finishing pass (ChatGPT review, 15 Sep 2026) */
.anno summary { list-style: none; cursor: pointer; }
.anno summary::-webkit-details-marker { display: none; }
.anno summary::after { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-left: 0.5rem; border-right: 2px solid var(--dmute); border-bottom: 2px solid var(--dmute); transform: rotate(45deg); vertical-align: 0.15rem; transition: transform 0.2s ease; }
.anno[open] summary::after { transform: rotate(225deg); vertical-align: -0.1rem; }
.demo-more { text-align: center; margin: 0.6rem 0 0.4rem; }
.demo-more .btn-ghost2 { font-size: 0.92rem; padding: 0.6rem 1.2rem; }
@media (max-width: 760px) {
  .hero-fixture.is-collapsed .wp-post-body { max-height: 11rem; overflow: hidden; position: relative; }
  .hero-fixture.is-collapsed .wp-post-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5rem; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFFFFF 85%); pointer-events: none; }
  .hero-fixture.is-collapsed .wp-post-credit { display: none; }
  .hero-fixture.is-collapsed .wp-photos .wp-card-h::after { content: ""; }
  .tsplit .tcard { order: -1; }
}
@media (min-width: 761px) { .demo-more { display: none; } }
.short .micro, .short .hc-foot, .short .anno-foot, .short .ll-cap, .short .ctl-foot { color: #5F5850; }
.short .band--pit .micro, .short .band--pit .hc-foot, .short .band--pit .anno-foot, .short .demo-label, .short .hero-facts, .short .twobills p:last-child, .short .cmp-note { color: #B9B2A5; }
.short .band--top figcaption { color: #B9B2A5; }
.short .tcard-sub, .short .tcard-per, .short .tcard-foot, .short .cf-note, .short .contact-alt, .short .cf-status { color: #5F5850; }
.short .trow-label small, .short .hc-switch-label b { color: #6B645C; }
.hc-tiers--dark .trow-label small { color: #B9B2A5; }
.short .band--top .micro, .short .band--top .anno-foot, .short .anno-list li { color: #C9C2B3; }
.short .band--top .anno-foot a { color: var(--sand); }
.demo-more .btn-ghost2 { color: var(--sand); border-color: var(--sand-dim); background: transparent; }
.demo-more .btn-ghost2:hover { border-color: var(--sand); }

/* SHORT-2: hero as one scene (15 Sep 2026, after ChatGPT's hero note). The three
   steps sit inside the demo frame as a toolbar; the hero gets an atmosphere:
   deep navy, an amber glow rising behind the demo, faint teal and blue at the
   edges (Scout and Pix), four fine paths traveling toward the demo with an
   occasional light. Calm behind the headline. Reduced motion stops the lights. */
.short .hero-short { position: relative; isolation: isolate; overflow: hidden; background: #0F1722; }
.short .hero-short > .content { position: relative; z-index: 1; }
.hero-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hd-halo { position: absolute; left: -14%; right: -14%; top: -520px; height: 520px; -webkit-mask-image: linear-gradient(to top, #000 0%, #000 12%, rgba(0,0,0,0.3) 32%, rgba(0,0,0,0) 55%); mask-image: linear-gradient(to top, #000 0%, #000 12%, rgba(0,0,0,0.3) 32%, rgba(0,0,0,0) 55%); z-index: -1; pointer-events: none; overflow: visible; }
.sky-glow { position: absolute; left: 50%; bottom: -6%; width: 84%; max-width: 1200px; aspect-ratio: 16 / 7; transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%, rgba(224, 138, 50, 0.75) 0%, rgba(224, 138, 50, 0.3) 18%, rgba(224, 138, 50, 0.05) 38%, rgba(224, 138, 50, 0) 52%);
  filter: blur(14px); animation: skyBreathe 14s ease-in-out infinite; }
.sky-edge { position: absolute; top: -10%; width: 42%; height: 80%; filter: blur(40px); opacity: 0.9; }
.sky-edge--l { left: -18%; background: radial-gradient(ellipse at 20% 40%, rgba(47, 183, 165, 0.16) 0%, rgba(47, 183, 165, 0) 62%); }
.sky-edge--r { right: -18%; background: radial-gradient(ellipse at 80% 40%, rgba(96, 140, 220, 0.16) 0%, rgba(96, 140, 220, 0) 62%); }
.sky-paths { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0.9; overflow: visible; }
.sky-spark { filter: drop-shadow(0 0 6px rgba(243, 212, 162, 0.9)); }
.sky-spark--teal { filter: drop-shadow(0 0 6px rgba(143, 217, 207, 0.9)); }
.sky-spark--blue { filter: drop-shadow(0 0 6px rgba(159, 191, 240, 0.9)); }
@keyframes skyBreathe { 0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .sky-glow { animation: none; } .sky-spark { display: none; } }
@media (max-width: 760px) { .sky-paths { display: none; } .sky-edge { width: 70%; height: 50%; } .hd-halo { top: -320px; height: 320px; left: -30%; right: -30%; } .sky-glow { width: 120%; bottom: -14%; animation: none; opacity: 0.55; } .short .hd-frame { background: rgba(13, 20, 30, 0.86); } }

/* Tighter stack so the demo's top edge shows under the buttons on a laptop screen. */
.short .band--top { padding-top: clamp(1.6rem, 4vh, 2.6rem); }
.short .hero-center .hero-display { margin-top: clamp(0.4rem, 1.5vh, 1rem); }
.short .hero-lede { margin-top: 0.8rem; }
.short .hero-ctas { margin-top: 1.2rem; }
.short .hero-facts { margin-top: 0.9rem; }
.short .hero-fixture { margin-top: clamp(1.4rem, 3.2vh, 2.2rem); }
.short .demo-steps, .short .demo-label { display: none; }

/* The frame: a restrained lit edge and real depth. */
.short .hero-fixture { position: relative; }
.short .hd-frame { position: relative; border-radius: 20px; padding: 0.9rem 0.9rem 0.9rem; background: rgba(13, 20, 30, 0.72); border: 1px solid rgba(239, 233, 220, 0.14);
  box-shadow: 0 0 0 1px rgba(224, 138, 50, 0.18), 0 -1px 0 0 rgba(243, 212, 162, 0.35) inset, 0 40px 110px -30px rgba(0, 0, 0, 0.85), 0 0 120px -20px rgba(224, 138, 50, 0.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.short .hd-frame::before { content: ""; position: absolute; left: 8%; right: 8%; top: -1px; height: 1px; background: linear-gradient(90deg, rgba(243, 212, 162, 0), rgba(243, 212, 162, 0.75), rgba(243, 212, 162, 0)); pointer-events: none; }
.short .hd-frame .hd-demo { margin: 0.7rem 0.2rem 0.8rem; }
.short .hd-frame .hd-win { border-radius: 14px; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.35); }

.hd-tour { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem 1.2rem; flex-wrap: wrap; padding: 0.35rem 0.2rem 0.55rem; border-bottom: 1px solid rgba(239, 233, 220, 0.1); }
.hd-tour-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.hd-tour-steps li { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.8rem 0.35rem 0.4rem; border-radius: 999px; border: 1px solid transparent; font-size: 0.86rem; font-weight: 600; color: var(--dmute); max-width: none; transition: color 0.25s, border-color 0.25s, background-color 0.25s; }
.hd-tour-n { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid rgba(239, 233, 220, 0.25); font-size: 0.74rem; font-weight: 700; color: var(--sand-dim); transition: background-color 0.25s, color 0.25s, border-color 0.25s; }
.hd-tour-steps li.is-on { color: var(--sand); border-color: rgba(224, 138, 50, 0.45); background: rgba(224, 138, 50, 0.1); }
.hd-tour-steps li.is-on .hd-tour-n { background: var(--ember); border-color: var(--ember); color: #131A24; }
.hd-tour-steps li.is-done { color: var(--sand-dim); }
.hd-tour-steps li.is-done .hd-tour-n { border-color: rgba(224, 138, 50, 0.6); color: var(--ember); }
.hd-tour-note { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.8rem; color: var(--dmute); max-width: none; white-space: nowrap; }
.hd-tour-sep { opacity: 0.6; }
@media (max-width: 760px) { .short .hd-frame { padding: 0.6rem; border-radius: 16px; } .hd-tour { justify-content: center; } .hd-tour-note { white-space: normal; } .hd-tour-steps li { font-size: 0.8rem; padding-right: 0.6rem; } }
@media (max-width: 480px) { .hd-tour-steps { gap: 0.25rem; } .hd-tour-steps li { padding: 0.3rem 0.6rem 0.3rem 0.35rem; } }

/* SHORT-3 (15 Sep 2026): headline A with the outcome line carried by the lede. */
.short .hero-lede--a { color: var(--sand-dim); font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.55rem); line-height: 1.5; max-width: 46rem; margin-top: 1.1rem; }
.short .hero-lede--a b { color: var(--sand); font-weight: 600; }

/* FIX (15 Sep 2026): photo tile row. The star button was clipped in the narrow review column; the label is shorter and the row may wrap. */
.wp-tile-row { gap: 0.25rem; padding: 0.35rem 0.4rem; }
.wp-use { flex: 0 0 auto; }
.wp-star { flex: 0 1 auto; min-width: 0; font-size: 0.66rem; padding: 0.14rem 0.42rem; overflow: hidden; text-overflow: ellipsis; }

/* SHORT-2b (15 Sep 2026): the panel under the demo. One surface, three rows, one footer. */
.short .demo-more { margin-top: 0.9rem; }
.draft-why { margin: clamp(1.2rem, 2.6vh, 1.8rem) auto 0; width: 100%; max-width: 66rem; text-align: left; background: #16202D; border: 1px solid rgba(239, 233, 220, 0.12); border-radius: 16px; padding: 1.15rem 1.35rem 1.05rem; }
.draft-why-h { margin: 0 0 0.85rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sand-dim); max-width: none; }
.draft-why-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.6rem; }
.draft-why-list li { display: flex; gap: 0.7rem; align-items: flex-start; max-width: none; }
.draft-why-list svg { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; color: var(--ember); }
.draft-why-list b { display: block; color: var(--sand); font-size: 0.98rem; margin-bottom: 0.15rem; }
.draft-why-list span { display: block; color: #C9C2B4; font-size: 0.92rem; line-height: 1.5; }
.draft-why-foot { margin: 1rem 0 0; padding-top: 0.85rem; border-top: 1px solid rgba(239, 233, 220, 0.1); font-size: 0.9rem; color: #C9C2B4; max-width: none; }
.draft-why-foot b { color: var(--sand); }
.draft-why-foot a { color: var(--sand); text-decoration: underline; text-underline-offset: 3px; margin-left: 0.35rem; }
@media (max-width: 760px) { .draft-why { padding: 1rem 1rem 0.9rem; border-radius: 12px; } .draft-why-list { grid-template-columns: 1fr; gap: 0.8rem; } }

/* CREW-FACES (15 Sep 2026): the ring sits behind the face instead of clipping it, so Captain's cap brim can cross the ring. */
.short .crew6 li { position: relative; }
.short .crew6 li::before { content: ""; position: absolute; left: 50%; top: 1.075rem; width: 6.75rem; height: 6.75rem; transform: translateX(-50%); border-radius: 50%; border: 2px solid var(--tint); opacity: 0.85; box-sizing: border-box; }
.short .crew6 img { position: relative; border: 0; border-radius: 0; background: transparent; width: 6.5rem; height: 6.5rem; }
/* Captain's ring: navy where the cap is, orange where the face is (ChatGPT, 15 Sep 2026). */
.short .crew6 li:first-child::before { border: 0; background: conic-gradient(from 0deg, #3A5390 0deg 70deg, #C46A32 76deg 284deg, #3A5390 290deg 360deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); }

/* SHORT-8 (15 Sep 2026, ChatGPT's FAQ and contact note). FAQ as a split on cream with a white panel; contact as a navy close with the form in a lit white panel. */
.short .hc-faq { padding: clamp(3rem, 7vh, 5rem) 0; }
.faq-split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.8rem, 5vw, 4.5rem); align-items: start; }
.faq-lead { text-align: left; }
.faq-lead .eyebrow, .faq-lead .display-2 { text-align: left; margin-left: 0; }
.faq-lead .display-2 { max-width: 10ch; }
.faq-more { max-width: 24rem; margin: 1rem 0 0; color: var(--mute); }
.faq-more a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.short .faq-panel { max-width: none; margin: 0; background: #FFFFFF; border: 1px solid var(--line); border-radius: 16px; padding: 0.35rem 1.35rem; box-shadow: 0 18px 40px -30px rgba(17, 17, 17, 0.3); }
.short .faq-panel .faq-item { border-top: 1px solid var(--line-soft); transition: background-color 0.2s ease; margin: 0 -1.35rem; padding: 0 1.35rem; }
.short .faq-panel .faq-item:first-child { border-top: 0; }
.short .faq-panel .faq-item:last-child { border-bottom: 0; }
.short .faq-panel .faq-item summary { font-size: 1.15rem; padding: 1.05rem 2.6rem 1.05rem 0; }
.short .faq-panel .faq-item summary::after { display: none; }
.short .faq-panel .faq-item summary::before { content: ""; position: absolute; right: 0.15rem; top: 50%; width: 1.4rem; height: 1.4rem; transform: translateY(-50%); border-radius: 50%; border: 1px solid var(--line); background:
  linear-gradient(var(--ink), var(--ink)) center / 0.7rem 2px no-repeat,
  linear-gradient(var(--ink), var(--ink)) center / 2px 0.7rem no-repeat; transition: background 0.2s ease, border-color 0.2s ease; }
.short .faq-panel .faq-item[open] { background: #FBF3E4; }
.short .faq-panel .faq-item[open]:first-child { border-radius: 15px 15px 0 0; }
.short .faq-panel .faq-item[open]:last-child { border-radius: 0 0 15px 15px; }
.short .faq-panel .faq-item[open] summary::before { border-color: var(--ember); background: linear-gradient(var(--ember), var(--ember)) center / 0.7rem 2px no-repeat; }
.short .faq-panel .faq-item p { font-size: 1rem; margin: 0; max-width: 64ch; }
.short .faq-panel .faq-item[open] { padding-bottom: 1.35rem; }
@media (max-width: 860px) { .faq-split { grid-template-columns: 1fr; gap: 1.4rem; } .faq-lead .display-2 { max-width: none; } }

.short .hc-contact--navy { position: relative; isolation: isolate; overflow: hidden; background: #0F1722; border-top: 0; padding: clamp(3.4rem, 8vh, 6rem) 0; }
.short .hc-contact--navy::before { content: ""; position: absolute; z-index: 0; right: -6%; top: 50%; width: 46rem; height: 34rem; transform: translateY(-50%); background: radial-gradient(ellipse at 60% 50%, rgba(224, 138, 50, 0.32) 0%, rgba(224, 138, 50, 0.12) 35%, rgba(224, 138, 50, 0) 65%); filter: blur(18px); pointer-events: none; }
.short .hc-contact--navy > .content { position: relative; z-index: 1; }
.short .hc-contact--navy .eyebrow { color: var(--sand-dim); }
.short .hc-contact--navy .display-2 { color: var(--sand); }
.short .hc-contact--navy .support { color: #C9C2B4; font-size: clamp(1.1rem, 1.3vw, 1.25rem); max-width: 22rem; }
.short .hc-contact--navy .contact-alt { color: var(--dmute); }
.short .hc-contact--navy .contact-alt a { color: var(--sand); }
.short .hc-contact--navy .contact-form { background: #FFFFFF; border-color: rgba(239, 233, 220, 0.2); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(224, 138, 50, 0.12), 0 0 90px -20px rgba(224, 138, 50, 0.3); }
.short .hc-contact--navy .cf-label { color: #3A3530; }
.short .hc-contact--navy .contact-form input, .short .hc-contact--navy .contact-form select, .short .hc-contact--navy .contact-form textarea { border-color: #CFC9BE; }
.short .hc-contact--navy .cf-note { color: #5C554D; }
@media (max-width: 760px) { .short .hc-contact--navy::before { right: -30%; width: 34rem; height: 26rem; top: 60%; } }
.short .faq-panel .faq-item summary::before { border-color: #CFC9BE; }
.short .hc-contact--navy .cf-send { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.short .hc-contact--navy .cf-send:hover { background: #2A2622; }

/* Contact: the person behind it (15 Sep 2026). */
.contact-who { display: flex; align-items: center; gap: 1rem; margin: 0.4rem 0 1.1rem; }
.contact-photo { width: 4.75rem; height: 4.75rem; border-radius: 50%; object-fit: cover; border: 2px solid rgba(239, 233, 220, 0.35); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.7); flex: none; }
.contact-name { margin: 0; font-weight: 700; color: var(--sand); font-size: 1.05rem; max-width: none; }
.contact-role { margin: 0.15rem 0 0; font-size: 0.88rem; color: var(--dmute); max-width: none; }
.short .hc-contact--navy .support { margin-top: 0; }

/* SHORT-9 (15 Sep 2026, ChatGPT's tiers note): one Free card left, the Pro card right, one SuperGrok strip beneath. */
.short .tsplit { grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.95fr); align-items: start; }
.short .tsplit-copy .support { font-size: clamp(1.1rem, 1.3vw, 1.25rem); }
.fcard { margin-top: 1.6rem; background: rgba(239, 233, 220, 0.04); border: 1px solid var(--dline-strong); border-radius: 20px; padding: clamp(1.4rem, 2.8vw, 2rem); max-width: 30rem; }
.fcard-badge { display: inline-block; margin: 0 0 0.9rem; padding: 0.22rem 0.6rem; border-radius: 999px; border: 1px solid var(--dline-strong); color: var(--sand); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; max-width: none; }
.fcard .tcard-num { color: var(--sand); font-size: clamp(2rem, 3.4vw, 2.6rem); }
.fcard .tcard-per { color: var(--dmute); font-size: 0.9rem; }
.fcard-lead { margin: 0.9rem 0 0.4rem; color: var(--sand); font-size: 1.05rem; font-weight: 600; max-width: none; }
.fcard-list { margin: 0 0 1.3rem; }
.fcard-list li { color: var(--sand-dim); font-size: 0.95rem; padding: 0.45rem 0 0.45rem 1.55rem; }
.fcard-list li::before { border-color: var(--sand); }
.fcard-cta { margin: 0; }
.fcard-cta .btn-ghost2 { display: inline-block; }
.short .tcard .tcard-num { font-size: clamp(2.2rem, 3.6vw, 2.9rem); }
.short .tcard .tcard-per { font-size: 0.92rem; }
.tcard-sub--year { margin: 0.7rem 0 0.2rem; font-size: 0.95rem; color: var(--ink); }
.tcard-sub--year b { font-weight: 700; }
.tcard-dot { margin: 0 0.45rem; color: var(--mute); }
.short .tcard .tcard-sub:not(.tcard-sub--year) { margin: 0 0 1.1rem; }
.grok-strip { margin: clamp(1.6rem, 3.5vh, 2.4rem) 0 0; padding: 1rem 1.3rem; border: 1px solid var(--dline-strong); border-radius: 14px; background: rgba(239, 233, 220, 0.03); display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.grok-strip p { margin: 0; color: var(--sand-dim); font-size: 0.95rem; line-height: 1.5; max-width: 46rem; flex: 1 1 28rem; }
.grok-strip b { color: var(--sand); }
.grok-strip a { color: var(--sand); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 860px) { .fcard { max-width: none; } }
@media (max-width: 900px) { .short .tsplit { grid-template-columns: 1fr; } .short .tsplit .tcard { order: 0; } }

/* SHORT-10 (15 Sep 2026): the interaction pass. Motion only on a visitor's choice. */
.is-flash { animation: bodFlash 1.3s ease-out; }
@keyframes bodFlash { 0% { box-shadow: 0 0 0 0 rgba(224, 138, 50, 0.0); } 15% { box-shadow: 0 0 0 4px rgba(224, 138, 50, 0.55); } 100% { box-shadow: 0 0 0 4px rgba(224, 138, 50, 0); } }
.hd-tour-steps li { padding: 0; border: 0; background: none; }
.hd-tour-btn { appearance: none; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.8rem 0.35rem 0.4rem; border-radius: 999px; border: 1px solid rgba(239, 233, 220, 0.16); background: transparent; color: var(--dmute); font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; transition: color 0.2s, border-color 0.2s, background-color 0.2s, transform 0.15s; }
.hd-tour-btn:hover { color: var(--sand); border-color: rgba(239, 233, 220, 0.4); transform: translateY(-1px); }
.hd-tour-btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.hd-tour-steps li.is-on .hd-tour-btn { color: var(--sand); border-color: rgba(224, 138, 50, 0.45); background: rgba(224, 138, 50, 0.1); }
.hd-tour-steps li.is-done .hd-tour-btn { color: var(--sand-dim); }
.wp-note-btn { appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline dotted rgba(29, 35, 39, 0.35); text-underline-offset: 3px; }
.wp-note-btn:hover { text-decoration-color: var(--ember); }
.wp-notes-hint { margin: 0.4rem 0 0; font-size: 0.72rem; color: #646970; max-width: none; }
.hd-review { margin-top: 0.6rem; border: 1px solid #E5D3B0; background: #FBF3E4; border-radius: 8px; padding: 0.6rem 0.7rem; font-size: 0.8rem; }
.hd-rv-h { margin: 0 0 0.45rem; font-weight: 700; color: #1D2327; font-size: 0.8rem; max-width: none; display: flex; align-items: center; gap: 0.4rem; }
.hd-rv-h .hc-tag { font-size: 0.62rem; padding: 0.05rem 0.4rem; margin: 0; color: #1D2327; border: 1px solid #E5D3B0; background: #fff; }
.hd-rv-row { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: 0.5rem; padding: 0.3rem 0; border-top: 1px solid rgba(29, 35, 39, 0.08); }
.hd-rv-row:first-of-type { border-top: 0; }
.hd-rv-k { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #646970; padding-top: 0.15rem; }
.hd-rv-row p { margin: 0; color: #1D2327; line-height: 1.4; max-width: none; }
.hd-rv-before p { text-decoration: line-through; text-decoration-color: #B8452B; color: #50575E; }
.hd-rv-after p { font-weight: 600; }
.dw-link { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-size: 0.92rem; color: var(--sand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dw-link:hover { color: #fff; }

/* Approval workflow example */
.wf { display: block; }
.wf-h { margin: 0 0 0.8rem; font-weight: 700; color: var(--ink); font-size: 1rem; max-width: none; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.wf-h .hc-tag { margin: 0; }
.wf-opts { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.wf-opt { appearance: none; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 0.45rem 0.9rem; font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
.wf-opt:hover { border-color: var(--ink); }
.wf-opt.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.wf-pro { display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.4rem; border-radius: 999px; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid currentColor; }
.wf-track { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.wf-track li { position: relative; padding: 0.55rem 0.8rem 0.55rem 2rem; border-radius: 10px; border: 1px solid var(--line-soft); background: #FBF9F4; opacity: 0.45; transition: opacity 0.3s, background-color 0.3s; max-width: none; }
.wf-track li::before { content: ""; position: absolute; left: 0.75rem; top: 0.95rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 2px solid #A39D96; background: #fff; }
.wf-track li b { display: block; font-size: 0.95rem; color: var(--ink); }
.wf-track li small { display: block; font-size: 0.8rem; color: var(--mute); margin-top: 0.1rem; }
.wf-track li.done { opacity: 1; }
.wf-track li.done::before { background: #1E8A4C; border-color: #1E8A4C; }
.wf-track li.now { opacity: 1; background: #FBF3E4; border-color: #E5D3B0; }
.wf-track li.now::before { border-color: var(--ember); background: var(--ember); }
.wf-track li.live { background: #E6F4EA; border-color: #BFE0C8; }
.wf-note { margin: 0.7rem 0 0; color: #5C554D; }
.wf-copy { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line-soft); }
.wf-copy h3 { margin: 0; }

/* Pix steps */
.px-steps { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.2rem 0 0.9rem; }
.px-step { appearance: none; display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 0.3rem 0.8rem 0.3rem 0.35rem; font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.px-step .hc-n { width: 1.4rem; height: 1.4rem; font-size: 0.72rem; }
.px-step.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.px-step.is-on .hc-n { background: var(--ember); color: #131A24; border-color: var(--ember); }
.px-frame { position: relative; border-radius: 10px; overflow: hidden; }
.px-frame img { display: block; }
.px-hl { position: absolute; left: 2%; top: 7%; width: 73%; height: 40%; border: 2px solid var(--ember); border-radius: 8px; box-shadow: 0 0 0 999px rgba(15, 23, 34, 0.35); opacity: 0; transition: opacity 0.3s; }
.px-hl i { position: absolute; left: 0.3rem; bottom: 0.3rem; font-style: normal; font-size: 0.74rem; font-weight: 700; color: #fff; background: var(--ember); padding: 0.15rem 0.5rem; border-radius: 4px; white-space: nowrap; }
.px-ex--1 .px-hl { opacity: 1; }
.px-reason-2 { display: none; }
.px-ex--2 .px-reason-1 { display: none; }
.px-ex--2 .px-reason-2 { display: inline; }
.px-ex--3 .px-reason-1 { display: none; }
.px-ex--3 .px-reason-2 { display: inline; }
.px-ex .px-rule { opacity: 0.35; transition: opacity 0.3s; }
.px-ex--3 .px-rule { opacity: 1; }
.px-ex--3 .px-arrow { color: var(--ember); }
.px-rule-note { margin: 0.6rem 0 0; color: #5C554D; }
.ll-clear--inert { cursor: default; opacity: 0.7; }

/* Crew cards open a panel */
.crew-btn { appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; text-align: center; cursor: pointer; width: 100%; display: block; }
.crew-btn b, .crew-btn span { display: block; }
.crew-btn span { max-width: none; }
.short .crew6 li { transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
.short .crew6 li:hover, .short .crew6 li:focus-within { transform: translateY(-3px); background: rgba(239, 233, 220, 0.06); border-color: rgba(239, 233, 220, 0.25); }
.short .crew6 li.is-open { border-color: var(--ember); background: rgba(224, 138, 50, 0.08); }
.crew-btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; border-radius: 12px; }
.crew-panel { margin: 1rem 0 0; }
.crew-panel-in { background: rgba(239, 233, 220, 0.05); border: 1px solid rgba(239, 233, 220, 0.16); border-radius: 16px; padding: 1.1rem 1.3rem 1.2rem; text-align: left; }
.crew-panel-h { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.7rem; max-width: none; }
.crew-panel-h img { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.crew-panel-h b { color: var(--sand); font-size: 1.05rem; }
.crew-panel-h span { color: var(--dmute); font-size: 0.9rem; }
.crew-panel-x { margin-left: auto; appearance: none; border: 1px solid rgba(239, 233, 220, 0.25); background: transparent; color: var(--sand-dim); border-radius: 999px; padding: 0.2rem 0.65rem; font: inherit; font-size: 0.78rem; cursor: pointer; }
.crew-panel-body p { color: #C9C2B4; font-size: 0.95rem; line-height: 1.5; margin: 0 0 0.5rem; max-width: 64ch; }
.crew-panel-body p b, .crew-panel-body li b { color: var(--sand); }
.crew-panel-body .micro { color: var(--dmute); }
.crew-panel-body a { color: var(--sand); text-decoration: underline; text-underline-offset: 3px; }
.cp-queue, .cp-rig { list-style: none; margin: 0 0 0.6rem; padding: 0; display: grid; gap: 0.4rem; }
.cp-queue li { padding: 0.55rem 0.8rem; border: 1px solid rgba(239, 233, 220, 0.12); border-radius: 10px; color: #C9C2B4; font-size: 0.92rem; max-width: none; }
.cp-queue li b { display: block; color: var(--sand); }
.cp-queue li span { font-size: 0.85rem; color: var(--dmute); }
.cp-rig li { color: #C9C2B4; font-size: 0.92rem; padding-left: 1.2rem; position: relative; max-width: none; }
.cp-rig li::before { content: ""; position: absolute; left: 0.1rem; top: 0.55rem; width: 0.55rem; height: 0.3rem; border-left: 2px solid var(--ember); border-bottom: 2px solid var(--ember); transform: rotate(-45deg); }
.cp-quote { margin: 0 0 0.6rem; padding: 0.8rem 1rem; border-left: 3px solid var(--ember); background: rgba(239, 233, 220, 0.04); color: var(--sand); font-size: 1rem; line-height: 1.55; border-radius: 0 10px 10px 0; }
.cp-review { margin: 0 0 0.6rem; background: #FBF3E4; border: 1px solid #E5D3B0; border-radius: 10px; padding: 0.7rem 0.9rem; font-size: 0.88rem; }
.cp-review .hd-rv-row p { color: #1D2327; }
.cp-review .hd-rv-h { color: #1D2327; }

/* Found band: annotated on demand */
.serp-keys { display: flex; gap: 0.4rem; margin: 0.8rem 0 0.5rem; flex-wrap: wrap; }
.serp-key { appearance: none; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 0.25rem 0.7rem; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.serp-key.is-on { background: var(--ember); border-color: var(--ember); color: #fff; }
.hc-serp .is-hl { background: #FBEBD2; box-shadow: 0 0 0 4px #FBEBD2; border-radius: 3px; }
.hc-serp-src { margin: 0.5rem 0 0; font-size: 0.8rem; color: #5C554D; max-width: none; }
.hc-serp-src span { font-weight: 700; color: var(--ink); }

/* Billing toggle */
.bill-toggle { display: inline-flex; padding: 0.2rem; border: 1px solid var(--line); border-radius: 999px; background: #F6F3EC; margin: 0 0 0.8rem; }
.bill-opt { appearance: none; border: 0; background: transparent; color: var(--mute); border-radius: 999px; padding: 0.35rem 0.85rem; font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; }
.bill-opt.is-on { background: var(--ink); color: #fff; }
.bill-save { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.05rem 0.4rem; border-radius: 999px; background: rgba(224, 138, 50, 0.18); color: #9A5A1A; }
.bill-opt.is-on .bill-save { background: var(--ember); color: #131A24; }
.short .tcard .tcard-price { min-height: 3rem; }

/* Trade finder preview */
.trade-pick-topics { margin: 0.3rem 0 0.8rem; font-size: 0.92rem; color: var(--sand-dim); max-width: none; }
.trade-pick-topics b { color: var(--sand); }
.hd-pick.is-flash { border-radius: 10px; }

/* Bigger controls on small screens */
@media (max-width: 760px) {
  .wp-tile-row { padding: 0.5rem 0.5rem; gap: 0.4rem; }
  .wp-use input { width: 1.15rem; height: 1.15rem; }
  .wp-star { font-size: 0.78rem; padding: 0.42rem 0.7rem; min-height: 2rem; }
  .wp-tile-open { display: block; }
  .hd-tour-btn { min-height: 2.2rem; }
}

/* SHORT-11 (15 Sep 2026): photographic pause between Contact and the close. Fixed background on desktop; static crop on phones and for reduced motion. */
.photo-break { position: relative; height: clamp(220px, 32vh, 340px); background-image: url("media/site/break-neighborhood.webp"); background-size: cover; background-position: center 40%; background-attachment: fixed; }
.photo-break::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 34, 0.55), rgba(15, 23, 34, 0.35) 40%, rgba(15, 23, 34, 0.55)); mix-blend-mode: multiply; }
.photo-break::after { content: ""; position: absolute; inset: 0; background: rgba(28, 46, 85, 0.22); }
.short .hc-contact--navy { box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.8); position: relative; z-index: 2; }
.short .hc-close { box-shadow: 0 -18px 40px -20px rgba(0, 0, 0, 0.8); position: relative; z-index: 2; }
@media (max-width: 760px), (hover: none) and (pointer: coarse) { .photo-break { background-attachment: scroll; height: 200px; } }
@media (prefers-reduced-motion: reduce) { .photo-break { background-attachment: scroll; } }

/* SHORT-11b: the two-line statement over the photograph. Scrolls normally over the fixed picture; fades in once. */
.photo-break { display: flex; align-items: center; justify-content: center; height: clamp(260px, 36vh, 380px); }
.photo-break::before { background: linear-gradient(180deg, rgba(15, 23, 34, 0.62), rgba(15, 23, 34, 0.5) 50%, rgba(15, 23, 34, 0.62)); }
.photo-break-line { position: relative; z-index: 1; margin: 0; padding: 0 1.25rem; text-align: center; color: var(--sand); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; font-size: clamp(1.6rem, 1rem + 2.6vw, 2.8rem); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); max-width: none; }
.photo-break-line span { white-space: nowrap; }
@media (max-width: 560px) { .photo-break-line span { white-space: normal; } }
.photo-break-line span { display: block; }
.photo-break-line.reveal { transition-duration: 0.9s; }
@media (max-width: 760px), (hover: none) and (pointer: coarse) { .photo-break { height: 240px; } }

/* SHORT-10b (15 Sep 2026): Proof shows the passage with the cut marked; bigger tap targets on phones; Pix note under the example. */
.hd-rv-passage { margin: 0 0 0.5rem; padding: 0.55rem 0.7rem; background: #fff; border: 1px solid #E5D3B0; border-radius: 6px; color: #1D2327; line-height: 1.5; max-width: none; }
.hd-rv-cut { color: #B8452B; text-decoration: line-through; text-decoration-color: #B8452B; background: rgba(184, 69, 43, 0.08); border-radius: 3px; }
.px-rule-note { margin: 0.8rem 0 0; color: #5C554D; max-width: 44rem; }
@media (max-width: 760px) {
  .wp-use { padding: 0.35rem 0.4rem 0.35rem 0; min-height: 2rem; }
  .dw-link { display: inline-block; padding: 0.4rem 0; min-height: 2rem; }
  .hc-info { width: 1.6rem; height: 1.6rem; font-size: 0.85rem; }
  .wp-note-btn { padding: 0.15rem 0; }
  .ll-clear { min-height: 2rem; }
  .serp-key, .px-step, .wf-opt, .bill-opt { min-height: 2.2rem; }
}

/* SHORT-12: approval action in navy and cream (ChatGPT, 15 Sep). The mustard
   button read as muddy on the white panel; the demo's primary action now
   matches the site's other primary buttons, ember reserved for focus. */
.short .btn-brass { background: #0D1722; color: #F3EDDF; border-color: #0D1722; }
.short .btn-brass:hover, .short .btn-brass:focus { background: #192A3A; border-color: #192A3A; color: #F3EDDF; }
.short .btn-brass:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.short .btn-brass svg { color: inherit; }
.short .hd-actions .btn-brass[disabled] { opacity: 0.45; }
.short .wp-card .btn-dim:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }


/* SHORT-13: demo depth (ChatGPT, 15 Sep). Prepared corrections, the hold
   window with Pause, revision recheck, note kinds, the inspection view. */
.hd-note-h { margin: 0 0 0.45rem; font-size: 0.8rem; color: #50575E; }
.hd-note-opts { display: flex; flex-direction: column; gap: 0.35rem; }
.hd-note-opt { text-align: left; padding: 0.5rem 0.7rem; border: 1px solid #C3C4C7; border-radius: 8px; background: #FFFFFF; color: #1D2327; font: inherit; font-size: 0.86rem; cursor: pointer; min-height: 2.2rem; }
.hd-note-opt.on { border-color: #0D1722; box-shadow: inset 0 0 0 1px #0D1722; font-weight: 600; }
.hd-note-opt:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.hd-hold { display: flex; flex-direction: column; gap: 0.55rem; }
.hd-hold[hidden] { display: none; }
.hd-hold-p { margin: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.hd-hold-p b { font-size: 0.95rem; color: #1D2327; }
.hd-hold-p small { font-size: 0.78rem; color: #646970; }
.hd-hold .btn-dim { width: 100%; justify-content: center; text-align: center; border-color: #C3C4C7; color: #1D2327; background: #FFFFFF; }
.hd-auto-inc { display: inline-block; margin-top: 0.25rem; padding: 0.25rem 0.6rem; border: 1px solid #1D2327; border-radius: 999px; background: #FFFFFF; color: #1D2327; font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.hd-auto-inc:hover { background: #1D2327; color: #FFFFFF; }
.wp-note-wrap { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.wp-note-kind { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #646970; }
.wp-note-kind--changed { color: #B4591A; }
.wp-note-kind--rechecked { color: #1E6E8A; }
.wp-queue li.queued { border-style: dashed; cursor: help; }
.wp-queue-hint { margin: 0.4rem 0 0; color: #646970; }
.wp-queue-hint[hidden] { display: none; }
.wp-answer--new { box-shadow: inset 3px 0 0 var(--ember); }
.hd-full-acts { position: absolute; left: 0; right: 0; bottom: 3.2rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem; padding: 0 1rem; }
.hd-full-meta { flex: 1 0 100%; text-align: center; font-size: 0.78rem; color: var(--sand-dim); margin-bottom: 0.2rem; }
.hd-fa { border: 1px solid rgba(239, 233, 220, 0.3); background: rgba(16, 27, 40, 0.85); color: var(--sand); font: inherit; font-size: 0.82rem; font-weight: 600; padding: 0.4rem 0.8rem; border-radius: 999px; cursor: pointer; min-height: 2.2rem; }
.hd-fa:hover, .hd-fa.on { background: var(--sand); color: #131A24; }
.hd-fa:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.hd-full-why { position: absolute; left: 0; right: 0; bottom: 6.4rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem; padding: 0 1rem; }
.hd-full-why > span { flex: 1 0 100%; text-align: center; font-size: 0.82rem; color: var(--sand); }
.hd-full-why[hidden], .hd-full-msg[hidden] { display: none; }
.hd-full-msg { position: absolute; left: 50%; top: 1rem; transform: translateX(-50%); max-width: 34rem; margin: 0; padding: 0.5rem 0.9rem; border-radius: 8px; background: rgba(239, 233, 220, 0.95); color: #131A24; font-size: 0.84rem; }
.hd-fullbox img { max-height: calc(100vh - 13rem); }
@media (max-width: 760px) {
  .hd-full-acts { bottom: 3.6rem; }
  .hd-full-why { bottom: 8rem; }
  .hd-fullbox img { max-height: calc(100vh - 16rem); }
}

.short .wp-tile-row { flex-wrap: wrap; gap: 0.3rem; }
.short .wp-star { flex: 1 0 100%; text-align: center; overflow: visible; font-size: 0.7rem; }
.short .hd-full-cap { display: none; }
@media (max-width: 760px) {
  .short .hd-fullbox { flex-direction: column; justify-content: center; gap: 0.6rem; padding: 3.2rem 0.6rem 1rem; }
  .short .hd-fullbox img { max-height: 46vh; }
  .short .hd-full-acts, .short .hd-full-why { position: static; padding: 0; }
  .short .hd-full-meta { margin-bottom: 0; }
}


/* SHORT-14: approval state and the sample public page (ChatGPT, 15 Sep). */
.hd-result-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.5rem; }
.hd-result-row .wp-link { margin: 0; }
.hd-result-row .btn-dim { border-color: #1D2327; color: #1D2327; background: #FFFFFF; }
.hd-result-row .btn-dim[hidden] { display: none; }
.hd-pub { position: fixed; inset: 0; z-index: 1000; background: #F3F1EC; overflow: auto; color: #1D2327; }
.hd-pub[hidden] { display: none; }
.hd-pub-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; padding: 0.55rem 1rem; background: #0D1722; color: #EFE9DC; font-size: 0.84rem; }
.hd-pub-url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; color: rgba(239, 233, 220, 0.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }
.hd-pub-url b { color: #EFE9DC; font-weight: 500; }
.hd-pub-tag { color: var(--ember); }
.hd-pub-back { margin-left: auto; border: 1px solid rgba(239, 233, 220, 0.35); background: transparent; color: #EFE9DC; font: inherit; font-size: 0.84rem; font-weight: 600; padding: 0.35rem 0.9rem; border-radius: 999px; cursor: pointer; min-height: 2.2rem; }
.hd-pub-back:hover { background: #EFE9DC; color: #0D1722; }
.hd-pub-back:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.hd-pub-page { max-width: 46rem; margin: 0 auto; padding: 0 1.2rem 4rem; }
.hd-pub-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem 0 1rem; border-bottom: 1px solid #D9D5CC; }
.hd-pub-brand { font-weight: 750; font-size: 1.15rem; letter-spacing: -0.01em; }
.hd-pub-head nav { display: flex; gap: 1.1rem; font-size: 0.9rem; color: #646970; }
.hd-pub-art { padding-top: 2rem; }
.hd-pub-meta { margin: 0 0 0.6rem; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: #646970; }
.hd-pub-art h1 { margin: 0 0 0.6rem; font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; }
.hd-pub-dek { margin: 0 0 1.4rem; font-size: 1.15rem; color: #50575E; }
.hd-pub-body { font-size: 1.05rem; line-height: 1.6; }
.hd-pub-body .wp-fig { margin: 1.4rem 0; }
.hd-pub-body .wp-fig img { width: 100%; height: auto; border-radius: 8px; display: block; }
.hd-pub-body figcaption { font-size: 0.82rem; color: #646970; margin-top: 0.4rem; }
.hd-pub-body .wp-h2 { font-size: 1.3rem; margin: 1.6rem 0 0.5rem; }
.hd-pub-body .wp-answer { background: #FBF6E9; border-left: 3px solid var(--ember); padding: 0.8rem 1rem; }
.hd-pub-body .wp-answer--new { box-shadow: none; }
.hd-pub-foot { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #D9D5CC; font-size: 0.82rem; color: #646970; }
@media (max-width: 760px) {
  .hd-pub-url { max-width: 100%; }
  .hd-pub-head nav { display: none; }
}


/* SHORT-15: the queue opens (Rob, 15 Sep). Three drafts per trade, each with its own state. */
.short .wp-queue li { padding: 0; border: 0; background: none; max-width: none; overflow: visible; white-space: normal; }
.wp-queue-btn { display: inline-flex; align-items: center; gap: 0.45rem; max-width: 20rem; font: inherit; font-size: 0.8rem; padding: 0.28rem 0.7rem; border-radius: 999px; border: 1px solid #DCDCDE; background: #FFFFFF; color: #646970; cursor: pointer; text-align: left; min-height: 2rem; }
.wp-queue-btn:hover { border-color: #1D2327; color: #1D2327; }
.wp-queue-btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.wp-queue li.on .wp-queue-btn { border-color: #1D2327; color: #1D2327; font-weight: 600; cursor: default; }
.wp-queue-tag { flex: none; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.1rem 0.4rem; border-radius: 4px; background: #F0F0F1; color: #50575E; }
.wp-queue-tag--open { background: #1D2327; color: #FFFFFF; }
.wp-queue-tag--drafting { background: #FBF0DF; color: #B4591A; }
.wp-queue-tag--live { background: #E3F3E8; color: #1E6E3A; }
.wp-lines--answer { margin: 0 0 1rem; }
.wp-check--wait { background: #C3C4C7; }
.wp-check--wait::after { display: none; }
.wp-note-wait { color: #646970; font-size: 0.85rem; }
@media (max-width: 760px) { .wp-queue-btn { max-width: 100%; white-space: normal; } }
.wp-photos > .wp-outline-note { grid-column: 1 / -1; margin: 0; }


/* SHORT-16: the owner's photos and the Pix switch (Rob, 15 Sep); live work shimmer. */
.wp-photo-src { margin: 0.6rem 0 0; font-size: 0.78rem; color: #50575E; }
.wp-own { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.55rem 0 0; padding: 0.6rem 0.7rem; border: 1px dashed #B9BDC2; border-radius: 8px; background: #FAFAFB; }
.wp-own-btn { align-self: flex-start; font: inherit; font-size: 0.8rem; font-weight: 650; padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid #1D2327; background: #FFFFFF; color: #1D2327; cursor: pointer; min-height: 2.2rem; }
.wp-own-btn:hover { background: #1D2327; color: #FFFFFF; }
.wp-own-btn:disabled { border-color: #C3C4C7; color: #646970; background: #F6F7F7; cursor: default; }
.wp-own-btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.wp-own-note { font-size: 0.76rem; color: #646970; }
.wp-setting--switch { align-items: center; cursor: pointer; }
.wp-setting--switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hd-auto-track--sm { flex: none; width: 1.9rem; height: 1.1rem; }
.hd-auto-track--sm i { width: 0.85rem; height: 0.85rem; }
.wp-setting--switch input:checked + .hd-auto-track--sm i { transform: translateX(0.8rem); }
.wp-setting--switch input:focus-visible + .hd-auto-track--sm { outline: 2px solid var(--ember); outline-offset: 2px; }
.wp-tile.own { border-color: #5A6B78; }
.wp-tile-tag--own { background: #2F6F9F; }
.wp-tile.off img { filter: grayscale(1); opacity: 0.45; }
.wp-tile.off .wp-tile-row { opacity: 0.5; }
.wp-tile-off { position: absolute; top: 0.35rem; right: 0.35rem; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; padding: 0.12rem 0.4rem; border-radius: 4px; background: rgba(29, 35, 39, 0.82); color: #FFFFFF; }
.wp-lines--live i { background: linear-gradient(90deg, #E9E9EA 0%, #E9E9EA 35%, #F7F7F8 50%, #E9E9EA 65%, #E9E9EA 100%); background-size: 220% 100%; animation: wp-shimmer 1.8s linear infinite; }
.wp-lines--live i:nth-child(2) { animation-delay: 0.25s; }
.wp-lines--live i:nth-child(3) { animation-delay: 0.5s; }
@keyframes wp-shimmer { 0% { background-position: 110% 0; } 100% { background-position: -110% 0; } }
.wp-outline-note--live { display: flex; align-items: flex-start; gap: 0.5rem; }
.wp-live-dot { flex: none; width: 0.6rem; height: 0.6rem; margin-top: 0.4rem; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 0 rgba(224, 138, 50, 0.5); animation: wp-live 1.6s ease-out infinite; }
@keyframes wp-live { 0% { box-shadow: 0 0 0 0 rgba(224, 138, 50, 0.5); } 100% { box-shadow: 0 0 0 8px rgba(224, 138, 50, 0); } }
.hd-steps li.live-work .hd-step-dot { border-color: var(--ember); background: #FFF6EC; }
@media (prefers-reduced-motion: reduce) { .wp-lines--live i { animation: none; background: #E4E6E8; } .wp-live-dot { animation: none; } }
.wp-setting--switch { position: relative; }
.wp-setting--switch input:checked + .hd-auto-track--sm { background: #1E8A4C; }
.hd-auto-track--sm i { top: 0.125rem; left: 0.125rem; }
.wp-tile.off .wp-tile-tag { display: none; }


/* SHORT-17: one publish rule, labels (ChatGPT, 15 Sep). */
.hd-needphoto { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.7rem; padding: 0.65rem 0.8rem; border: 1px solid #E5B28A; border-radius: 8px; background: #FFF6EC; font-size: 0.86rem; color: #1D2327; }
.hd-needphoto[hidden] { display: none; }
.hd-needphoto span { color: #50575E; font-size: 0.8rem; }
.hd-needphoto .btn-dim { align-self: flex-start; border-color: #1D2327; color: #1D2327; background: #FFFFFF; margin-top: 0.2rem; }
.hd-needphoto .btn-dim[hidden] { display: none; }
.wp-own-note--eg { color: #8A6A3A; }
.wp-eg-tag { display: inline-block; margin-left: 0.3rem; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.1rem 0.4rem; border-radius: 4px; background: #FBF0DF; color: #B4591A; font-style: normal; vertical-align: middle; }


/* PROTO (15 Sep 2026): review prototype screens inside the wp-admin demo. Off unless __BOD_PROTO. */
.wp-tabs { display: flex; align-items: center; gap: 0.3rem; padding: 0.55rem 1.3rem 0; background: #F6F7F7; flex-wrap: wrap; }
.wp-tabs[hidden] { display: none; }
.wp-tab { font: inherit; font-size: 0.82rem; font-weight: 600; padding: 0.4rem 0.8rem; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; background: transparent; color: #50575E; cursor: pointer; min-height: 2.2rem; }
.wp-tab.on { background: #FFFFFF; border-color: #DCDCDE; color: #1D2327; }
.wp-tab:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.wp-tabs-tag { margin-left: auto; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 4px; background: #FBF0DF; color: #B4591A; }
.is-proto #wp-rail-sub li { cursor: pointer; }
#wp-rail-sub li[hidden] { display: none; }
.wp-screen { padding: 1rem 1.3rem 1.3rem; display: flex; flex-direction: column; gap: 1rem; }
.wp-screen[hidden] { display: none; }
.wp-proto-note { margin: 0; padding: 0.5rem 0.8rem; border-radius: 6px; background: #FBF0DF; color: #7A4A14; font-size: 0.82rem; }
.wp-screen-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(16rem, 0.9fr); gap: 1rem; align-items: start; }
.pl-list, .ph-lib, .st-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.pl-item { padding: 0.7rem 0.8rem; border: 1px solid #DCDCDE; border-radius: 8px; }
.pl-item.held { background: #FAFAFB; color: #646970; }
.pl-item.dim { opacity: 0.5; }
.pl-item-h { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.92rem; color: #1D2327; }
.pl-item.held .pl-item-h b { color: #646970; }
.pl-why { margin: 0.3rem 0 0.5rem; font-size: 0.82rem; color: #50575E; }
.pl-acts { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.wp-screen .hd-fa { border-color: #C3C4C7; background: #FFFFFF; color: #1D2327; font-size: 0.78rem; padding: 0.3rem 0.7rem; min-height: 2rem; }
.wp-screen .hd-fa:hover { background: #1D2327; color: #FFFFFF; border-color: #1D2327; }
.wp-screen .hd-fa--ink { background: #0D1722; color: #F3EDDF; border-color: #0D1722; }
.wp-screen .hd-fa.warn { border-color: #B4591A; color: #7A4A14; background: #FBF0DF; }
.pl-done { font-size: 0.8rem; color: #1E6E3A; font-weight: 600; }
.pl-lab { display: block; margin: 0.6rem 0 0.25rem; font-size: 0.78rem; font-weight: 650; color: #1D2327; }
.pl-sel, .pl-in { width: 100%; box-sizing: border-box; padding: 0.45rem 0.6rem; border: 1px solid #C3C4C7; border-radius: 6px; font: inherit; font-size: 0.88rem; color: #1D2327; background: #FFFFFF; }
.pl-in[readonly] { background: #F6F7F7; }
.pl-static { margin: 0; font-size: 0.82rem; color: #646970; }
.pl-work-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; padding: 0.4rem 0; border-top: 1px solid #F0F0F1; font-size: 0.86rem; color: #50575E; }
.pl-work-row b { color: #1D2327; }
.ph-item { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0.7rem; align-items: start; }
.ph-item img { width: 100%; height: auto; border-radius: 6px; border: 1px solid #DCDCDE; }
.ph-item.never img { filter: grayscale(1); opacity: 0.6; }
.ph-meta { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: #50575E; }
.ph-meta b { color: #1D2327; font-size: 0.88rem; }
.ph-meta .pl-acts { margin-top: 0.3rem; }
.st-facts { margin: 0; display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0.5rem 0.8rem; font-size: 0.84rem; }
.st-facts dt { color: #646970; padding-top: 0.1rem; }
.st-facts dd { margin: 0; display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-start; }
.st-facts dd b { color: #1D2327; }
.st-facts dd small { font-size: 0.72rem; color: #646970; }
.st-facts dd .hd-fa { margin-top: 0.2rem; }
.st-rules li { display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-start; padding: 0.55rem 0.7rem; border: 1px solid #DCDCDE; border-radius: 8px; font-size: 0.84rem; }
.st-rules li b { color: #1D2327; }
.st-rules li small { font-size: 0.72rem; color: #646970; }
.hd-job { list-style: none; margin: 0.6rem 0 0; padding: 0.6rem 0 0; border-top: 1px solid #DCDCDE; display: flex; flex-direction: column; gap: 0.35rem; }
.hd-job[hidden] { display: none; }
.hd-job li { display: flex; flex-direction: column; font-size: 0.82rem; color: #646970; padding-left: 1.1rem; position: relative; }
.hd-job li::before { content: ""; position: absolute; left: 0; top: 0.35rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 1.5px solid #C3C4C7; background: #FFFFFF; }
.hd-job li.done::before { background: #1D2327; border-color: #1D2327; }
.hd-job li.now::before { border-color: var(--ember); background: #FFF6EC; }
.hd-job li b { color: #1D2327; font-weight: 600; }
.hd-job li.now b { color: #7A4A14; }
.hd-job li small { font-size: 0.74rem; }
.wp-toast { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%) translateY(10px); background: #1D2327; color: #FFFFFF; padding: 0.5rem 0.9rem; border-radius: 999px; font-size: 0.82rem; opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none; max-width: 90%; z-index: 5; }
.wp-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.wp-main { position: relative; }
@media (max-width: 760px) {
  .wp-screen-cols { grid-template-columns: 1fr; }
  .st-facts { grid-template-columns: 1fr; gap: 0.1rem 0; }
  .st-facts dt { margin-top: 0.5rem; }
  .ph-item { grid-template-columns: 6rem minmax(0, 1fr); }
}
.wp-head[hidden], .wp-body[hidden] { display: none; }


/* PROTO pass 2 (15 Sep): plainer helper text, facts as lists, receive button, destination line. */
.wp-screen .wp-notes-hint, .wp-screen .micro, .wp-screen .pl-static, .wp-screen .wp-card-hint { color: #50575E; }
.wp-screen .pl-why, .ph-meta, .st-facts dd small, .st-rules li small { color: #50575E; }
.st-list { margin: 0; padding: 0 0 0 1rem; color: #1D2327; font-weight: 600; }
.st-list li { margin: 0.05rem 0; }
.st-confirm { font-size: 0.8rem; color: #7A4A14; flex: 1 0 100%; }
.st-none { border-style: dashed; }
.st-rules li .pl-acts { margin-top: 0.3rem; }
.ph-dest { margin: 0 0 0.7rem; padding: 0.5rem 0.7rem; border-radius: 6px; background: #F6F7F7; font-size: 0.84rem; color: #50575E; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.ph-dest b { color: #1D2327; }
.ph-dest .wp-link { margin: 0; }
.hd-receive { margin-top: 0.7rem; width: 100%; justify-content: center; text-align: center; border-color: #0D1722; background: #0D1722; color: #F3EDDF; }
.hd-receive:hover { background: #192A3A; border-color: #192A3A; }
.hd-receive[hidden] { display: none; }

/* TPL-2 (16 Sep 2026): crew page rebuilt to match the homepage. */
.tb-hero { padding-bottom: clamp(3rem, 7vh, 5rem); }
.tb-hero .crew6 a.crew-btn { text-decoration: none; }
.tb-hero-foot { max-width: 46rem; margin: clamp(1.6rem, 4vh, 2.4rem) auto 0; text-align: center; font-size: 0.95rem; color: var(--sand-dim); }
.tb-hero-foot a { color: var(--sand); }
.tb-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.tb-card { position: relative; background: #FFFFFF; border: 1px solid #E2DED5; border-radius: 16px; padding: 1.4rem 1.5rem 1.5rem; box-shadow: 0 1px 0 rgba(17, 17, 17, 0.03); scroll-margin-top: 5rem; }
.tb-card::before { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--tint); }
.tb-who { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1rem; }
.tb-face { flex: none; width: 4.25rem; height: 4.25rem; border-radius: 50%; border: 2.5px solid var(--tint); display: grid; place-items: center; background: #F6F4EF; }
.tb-face img { width: 3.8rem; height: 3.8rem; display: block; }
.tb-name { display: flex; flex-direction: column; line-height: 1.15; }
.tb-name b { font-size: 1.35rem; letter-spacing: -0.01em; color: #111111; }
.tb-name small { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6B6560; margin-top: 0.15rem; }
.tb-n { margin-left: auto; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid #D9D5CC; display: grid; place-items: center; font-size: 0.85rem; font-weight: 700; color: #6B6560; }
.tb-did { margin: 0 0 1rem; padding: 0.75rem 0.9rem; border-radius: 10px; background: #F6F4EF; border-left: 3px solid var(--tint); font-size: 0.95rem; line-height: 1.5; color: #1D1B18; }
.tb-did-k { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6B6560; margin-bottom: 0.2rem; }
.tb-lead { margin: 0 0 0.5rem; font-size: 1.2rem; letter-spacing: -0.01em; color: #111111; }
.tb-body { margin: 0 0 1rem; font-size: 0.98rem; line-height: 1.6; color: #3A3530; }
.tb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-top: 1rem; border-top: 1px solid #ECE8E0; }
.tb-k { margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6B6560; }
.tb-k--rule { color: #B4591A; }
.tb-ul { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; line-height: 1.5; color: #3A3530; }
.tb-ul li { margin: 0.15rem 0; }
.tb-rule { margin: 0; font-size: 0.9rem; line-height: 1.5; color: #3A3530; }
.tb-after { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: clamp(1.6rem, 4vh, 2.4rem); }
.tb-after-card { background: #FFFFFF; border: 1px solid #E2DED5; border-radius: 16px; padding: 1.4rem 1.5rem; }
.tb-after-card h3 { margin: 0.2rem 0 0.5rem; font-size: 1.3rem; letter-spacing: -0.01em; color: #111111; }
.tb-after-card p { margin: 0; font-size: 0.98rem; line-height: 1.6; color: #3A3530; }
.tb-after-card p a { color: #111111; }
.tb-after-card .cta-row { margin-top: 1rem; }
.tb-micro { text-align: center; margin-top: 1.4rem; }
.tb-mkt { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.tb-mkt-card { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.9rem 1rem; align-items: start; padding: 1.2rem 1.3rem; border: 1px solid var(--dline-strong); border-radius: 16px; background: rgba(239, 233, 220, 0.03); }
.tb-mark { width: 2.6rem; height: 2.6rem; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; color: var(--sand); background: rgba(239, 233, 220, 0.08); border: 1px solid var(--dline-strong); }
.tb-mkt-card > div b { display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sand-dim); margin-bottom: 0.2rem; }
.tb-mkt-card h3 { margin: 0 0 0.35rem; font-size: 1.15rem; color: var(--sand); letter-spacing: -0.01em; }
.tb-mkt-card p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--sand-dim); }
.tb-add { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; }
.tb-add .tpl-out { width: 11px; height: 11px; }
@media (max-width: 860px) {
  .tb-list, .tb-after, .tb-mkt { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tb-card { padding: 1.2rem 1.1rem 1.3rem; }
  .tb-cols { grid-template-columns: 1fr; }
  .tb-mkt-card { grid-template-columns: 2.2rem minmax(0, 1fr); padding: 1rem; }
  .tb-add { grid-column: 1 / -1; }
}


/* SP-2 (16 Sep 2026): subpages in the homepage craft. */
.sp-hero { padding-bottom: clamp(3rem, 7vh, 5rem); }
.sp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; counter-reset: none; }
.sp-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-step { position: relative; padding: 1.2rem 1.2rem 1.3rem 1.2rem; border: 1px solid var(--dline-strong); border-radius: 16px; background: rgba(239, 233, 220, 0.03); display: flex; flex-direction: column; gap: 0.4rem; }
.sp-n { width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--dline-strong); display: grid; place-items: center; font-size: 0.85rem; font-weight: 700; color: var(--sand-dim); margin-bottom: 0.3rem; }
.sp-step b { font-size: 1.12rem; color: var(--sand); letter-spacing: -0.01em; }
.sp-step p { margin: 0; font-size: 0.93rem; line-height: 1.55; color: var(--sand-dim); }
.sp-step p a { color: var(--sand); }
.sp-step--you { border-color: rgba(224, 138, 50, 0.6); background: rgba(224, 138, 50, 0.07); }
.sp-step--you .sp-n { background: var(--ember); border-color: var(--ember); color: #14100A; }
.sp-steps--paper .sp-step { background: #FFFFFF; border-color: #E2DED5; }
.sp-steps--paper .sp-n { border-color: #D9D5CC; color: #6B6560; }
.sp-steps--paper .sp-step b { color: #111111; }
.sp-steps--paper .sp-step p { color: #3A3530; }
.sp-steps--paper .sp-step p a { color: #111111; }
.sp-steps--paper .sp-step--you { background: #FBF0DF; border-color: #E5B28A; }
.sp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.sp-card { background: #FFFFFF; border: 1px solid #E2DED5; border-radius: 16px; padding: 1.4rem 1.5rem; }
.sp-card h3 { margin: 0.2rem 0 0.5rem; font-size: 1.3rem; letter-spacing: -0.01em; color: #111111; }
.sp-card p { margin: 0; font-size: 0.98rem; line-height: 1.6; color: #3A3530; }
.sp-card p a { color: #111111; }
.sp-card .cta-row { margin-top: 1rem; }
.sp-cta { justify-content: center; max-width: none; margin-left: auto; margin-right: auto; margin-top: clamp(1.4rem, 3vh, 2rem); }
.sp-micro { text-align: center; margin-top: 1.2rem; max-width: 46rem; margin-left: auto; margin-right: auto; }
.sp-bands { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.sp-band { padding: 1.4rem 1.3rem; border: 1px solid var(--dline-strong); border-radius: 16px; background: rgba(239, 233, 220, 0.03); display: flex; flex-direction: column; gap: 0.25rem; text-align: center; }
.sp-amt { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em; color: var(--sand); line-height: 1; }
.sp-per { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sand-dim); margin-bottom: 0.6rem; }
.sp-band b { font-size: 1.05rem; color: var(--sand); }
.sp-band p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--sand-dim); }
.sp-band:first-child { border-color: rgba(224, 138, 50, 0.6); background: rgba(224, 138, 50, 0.07); }
@media (max-width: 900px) {
  .sp-steps, .sp-steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-bands { grid-template-columns: 1fr; }
  .sp-cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sp-steps, .sp-steps--4 { grid-template-columns: 1fr; }
}

/* ===== REV-1 (16 Sep 2026): ChatGPT review round 1 ===== */
.tb-more { margin: 0 0 14px; }
.tb-more summary { cursor: pointer; font-size: 14px; font-weight: 600; color: #3A3530; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.tb-more summary::-webkit-details-marker { display: none; }
.tb-more summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--tint, #C46A32); border-bottom: 1.5px solid var(--tint, #C46A32); transform: rotate(-45deg); transition: transform .15s; }
.tb-more[open] summary::before { transform: rotate(45deg); }
.tb-more p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2, #3b3a36); }
.wp-tile.frozen .wp-tile-row { opacity: .55; }
.wp-tile.frozen input, .wp-tile.frozen .wp-star { cursor: not-allowed; }

/* REV-2 (16 Sep 2026): two bill cards on the grok page, centered. */
.grok-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin-left: auto; margin-right: auto; }
@media (max-width: 900px) { .grok-two { grid-template-columns: 1fr; } }

/* ===== REV-3 (16 Sep 2026): ChatGPT review round 4 =====
   The demo's white panels sit inside the dark hero band, so the band's pale
   text colors were reaching them. Keep white-panel text dark. */
.short .band--top .wp-shell figcaption,
.short .band--top .wp-shell .micro { color: #646970; }
.short .band--top .wp-shell .wp-notes-hint { color: #646970; }
/* Full-screen viewer: the metadata line sat on the photo itself. Give it its own plate. */
.hd-full-meta {
  background: rgba(9, 14, 21, 0.9);
  border: 1px solid rgba(239, 233, 220, 0.14);
  border-radius: 10px;
  padding: 0.35rem 0.9rem;
  flex: 1 0 100%;
  margin: 0 0 0.5rem;
  color: #EFE9DC;
}
.hd-full-cap { background: rgba(9, 14, 21, 0.86); border-radius: 10px; padding: 0.3rem 0.8rem; display: inline-block; }
/* A disabled control has to look disabled. */
.hd-fa:disabled, .hd-fa.on:disabled { opacity: 0.45; cursor: not-allowed; background: rgba(16, 27, 40, 0.85); color: var(--sand-dim); border-color: rgba(239, 233, 220, 0.18); }
.hd-fa:disabled:hover { background: rgba(16, 27, 40, 0.85); color: var(--sand-dim); }

/* ===== NEEDS-INPUT (16 Sep 2026): the crew asks instead of guessing. Prototype only. ===== */
.hd-ask { margin: 0.6rem 0 0; padding: 0.75rem 0.85rem; border: 1px solid #C3C4C7; border-left: 3px solid #B4591A; border-radius: 8px; background: #FBF7F0; }
.hd-ask-h { margin: 0; font-size: 0.86rem; line-height: 1.45; color: #1D2327; }
.hd-ask-tag { display: inline-block; margin-right: 0.45rem; padding: 0.1rem 0.45rem; border-radius: 4px; background: #B4591A; color: #FFFFFF; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: 1px; }
.hd-ask-why { margin: 0.45rem 0 0.6rem; font-size: 0.78rem; line-height: 1.5; color: #50575E; }
.hd-ask-opts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.hd-ask .hd-fa { border-color: #C3C4C7; background: #FFFFFF; color: #1D2327; font-size: 0.78rem; padding: 0.3rem 0.7rem; min-height: 2rem; }
.hd-ask .hd-fa:hover { background: #1D2327; color: #FFFFFF; border-color: #1D2327; }
.hd-ask .hd-fa.on { background: #0D1722; color: #F3EDDF; border-color: #0D1722; }
.hd-ask-scope { margin: 0.7rem 0 0; padding: 0.6rem 0 0; border: 0; border-top: 1px solid #E3E1DC; }
.hd-ask-scope legend { padding: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #646970; }
.hd-ask-scope label { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.45rem 0; font-size: 0.78rem; line-height: 1.45; color: #50575E; cursor: pointer; }
.hd-ask-scope label b { color: #1D2327; }
.hd-ask-scope input { margin: 0.15rem 0 0; flex: 0 0 auto; }
.hd-job li.ask b { color: #8A4513; }
.hd-job li.ask::before { background: #B4591A; }
.wp-note-kind--answered { background: #EAF2EA; color: #2C5530; }
.wp-note-btn--flat { cursor: default; text-decoration: none; text-align: left; }

/* A job stopped on a question is not being written: the held placeholders stay still. */
.wp-outline-note--held { border-left: 3px solid #B4591A; padding-left: 0.6rem; }

/* ===== GROK-THREE (16 Sep 2026): three xAI plans, not two.
   Rob: showing only $30 and $300 makes the middle look like it does not exist
   and $300 reads as the only step up. The real ladder is 30 / 100 / 300. ===== */
.grok-three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1020px; margin-left: auto; margin-right: auto; align-items: stretch; }
/* Every card reserves the tag's height so all three prices sit on one line. */
.grok-three .sp-band { display: flex; flex-direction: column; position: relative; padding-top: 42px; }
.grok-three .sp-band p { margin-bottom: 0; }
.sp-band--pick { outline: 2px solid var(--tint, #C46A32); outline-offset: -2px; }
.sp-tag { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 3px 10px; border-radius: 999px; background: var(--tint, #C46A32); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.sp-note { max-width: 1020px; margin: 16px auto 0; font-size: 15px; line-height: 1.55; text-align: center; }
/* The hero band is dark; this note sits on it and must not be dark-on-dark. */
.band--pit .sp-note { color: #C9CBD0; }
.band--pit .sp-note b { color: #F2F0EC; }
@media (max-width: 980px) { .grok-three { grid-template-columns: 1fr; max-width: 560px; } .sp-note { text-align: left; } }

/* ===== GK-PICK (16 Sep 2026): which xAI plan to pick.
   Rob: "make sure this is explained perfectly clear." No article counts,
   because we do not have honest ones yet. ===== */
.gk-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1.6rem; }
.gk-pick-col { background: #FFFFFF; border: 1px solid #E2DED5; border-radius: 16px; padding: 1.4rem 1.5rem; }
.gk-pick-col h3 { margin: 0 0 0.5rem; font-size: 1.25rem; letter-spacing: -0.01em; color: #111111; }
.gk-pick-col > p { margin: 0 0 0.8rem; font-size: 0.98rem; line-height: 1.6; color: #3A3530; }
.gk-list { margin: 0; padding: 0; list-style: none; }
.gk-list li { position: relative; padding-left: 20px; margin: 0 0 0.7rem; font-size: 0.98rem; line-height: 1.6; color: #3A3530; }
.gk-list li:last-child { margin-bottom: 0; }
.gk-list li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--tint, #C46A32); }
.gk-list b { color: #111111; }
.band--paper .sp-note { color: #3A3530; text-align: left; max-width: 68ch; margin-left: 0; margin-right: auto; }
@media (max-width: 900px) { .gk-pick { grid-template-columns: 1fr; } }
.band--seam { border-top: 1px solid #E2DED5; }
/* Pre-existing, found 16 Sep: a ghost button inside a white .sp-card inherited the
   dark-theme border (cream at 0.2 alpha) and was effectively borderless on white.
   Same fix already applied to .tier cards. */
.sp-card .btn-ghost2 { color: #111111; border-color: rgba(17, 17, 17, 0.4); }
.sp-card .btn-ghost2:hover, .sp-card .btn-ghost2:focus { border-color: #111111; color: #111111; }