/* ==========================================================================
   Wooly — marketing site layout (woolyai.app)
   Depends on brand.css. Every band gets its rhythm from .band alone so
   section paddings can never fight each other.
   ========================================================================== */

body { background: var(--tusk); overflow-x: hidden; }

.shell {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.shell--narrow { max-width: 840px; }

.band { padding-block: clamp(4rem, 8vw, 6.5rem); }
.band--mist { background: var(--mist); }
.band--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.band-head { max-width: 42ch; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.band-head .eyebrow { display: block; margin-bottom: 0.875rem; }
.band-head h2 { margin-bottom: 0.875rem; }
.band-head--center { margin-inline: auto; text-align: center; max-width: 46ch; }
.band-head--center .lede { margin-inline: auto; }

/* --- masthead ------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 251, 242, 0.9);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.masthead-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 72px;
}

.brandmark {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--chestnut);
}
.brandmark svg { height: 30px; width: auto; }
.brandmark .wordmark { font-size: 1.625rem; }

.masthead-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-size: 1rem;
  color: var(--ink-soft);
}
.masthead-nav a:not(.btn):hover { color: var(--chestnut); }

.masthead-toggle { display: none; }

@media (max-width: 860px) {
  .masthead-nav {
    display: none;
    position: absolute;
    inset: 72px 1.5rem auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    background: var(--tusk);
    border: var(--stitch-width) dashed var(--stitch);
    border-radius: var(--r-lg);
    padding: 1rem;
    box-shadow: var(--shadow-lift);
  }
  .masthead-nav[data-open="true"] { display: flex; }
  .masthead-nav a:not(.btn) { padding: 0.75rem 0.5rem; font-size: 1.0625rem; }
  .masthead-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--chestnut);
    padding: 0.625rem;
    min-height: 44px;
  }
  .masthead-toggle svg { height: 18px; width: 22px; }
}

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

.hero {
  background: linear-gradient(178deg, var(--mist) 0%, var(--mist) 42%, var(--tusk) 100%);
  padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero-copy .yarns { margin-bottom: 1.5rem; }
.hero-copy h1 { margin-bottom: 1.125rem; }
.hero-copy h1 em {
  font-style: normal;
  color: var(--chestnut);
}
.hero-copy .lede { max-width: 40ch; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 1.875rem;
}
.hero-fine {
  margin-top: 1.125rem;
  font-size: 0.9375rem;
  color: var(--fog);
}

@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .hero-copy .lede { margin-inline: auto; }
  .hero-copy .yarns { justify-content: center; }
  .hero-actions { justify-content: center; }
}

/* --- the demonstration: two phones and a thread --------------------------- */
/* This is the signature. The dashed stitch of the brand becomes a live
   thread that physically carries the memory from one phone to the other. */

/* Every in-page anchor has to clear the sticky masthead, or the target
   lands underneath it and looks like the link did nothing. */
[id] { scroll-margin-top: 92px; }

.demo { position: relative; }

.demo-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}

/* The thread lives in the gap and stitches into both phones. Fixed pixel
   size so the 2.5px stroke never distorts, centred on the seam. */
.demo-thread {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 160px;
  height: 72px;
  margin-left: -80px;
  margin-top: -36px;
  pointer-events: none;
  overflow: visible;
  z-index: 4;
}
.demo-thread path {
  fill: none;
  stroke: var(--chestnut);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 6 7;
  opacity: 0;
  transition: opacity 0.35s ease;
}
/* Once the memory is in flight the thread stays, and the dashes keep
   travelling — thread being pulled through, not a line being drawn.
   data-thread: off (no thread at all, e.g. the My Shelf scene)
                send (the memory is crossing right now)
                on   (it has crossed; the thread rests) */
.demo[data-thread="send"] .demo-thread path {
  opacity: 0.9;
  animation: thread-pull 1.4s linear infinite;
}
.demo[data-thread="on"] .demo-thread path {
  opacity: 0.4;
  animation: thread-pull 3.6s linear infinite;
}
@keyframes thread-pull {
  to { stroke-dashoffset: -26; }
}

/* The bead is the memory itself, riding the thread across. */
.demo-bead {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 13px;
  height: 13px;
  margin-left: -80px;
  margin-top: -36px;
  border-radius: 50%;
  background: var(--marigold);
  box-shadow: 0 0 0 2.5px var(--chestnut), 0 4px 10px -2px rgba(90, 60, 50, 0.5);
  opacity: 0;
  z-index: 5;
  pointer-events: none;
}
.demo[data-thread="send"] .demo-bead {
  animation: bead-travel 1.15s var(--ease-thread) forwards;
}
/* Four stops trace the S-curve of the path above. */
@keyframes bead-travel {
  0%   { opacity: 0;   transform: translate(-4px, 51px) scale(0.5); }
  12%  { opacity: 1;   transform: translate(6px, 48px) scale(1); }
  38%  { opacity: 1;   transform: translate(46px, 10px) scale(1.1); }
  62%  { opacity: 1;   transform: translate(108px, 12px) scale(1.1); }
  88%  { opacity: 1;   transform: translate(150px, 48px) scale(1); }
  100% { opacity: 0;   transform: translate(160px, 51px) scale(0.5); }
}

.phone {
  position: relative;
  z-index: 2;
  background: var(--tusk);
  border: var(--stitch-width) dashed var(--stitch);
  border-radius: var(--r-xl);
  padding: 1.25rem;
  box-shadow: var(--shadow-lift);
  min-height: 260px;
  display: flex;
  flex-direction: column;
}
.phone-who {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fog);
  margin-bottom: 0.875rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}
.phone-who i {
  width: 9px; height: 9px; border-radius: 50%;
  display: block;
}

.bubble {
  border-radius: var(--r-md);
  padding: 0.8125rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-bottom: 0.625rem;
  max-width: 94%;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.32s ease, transform 0.32s var(--ease-thread);
}
.bubble[data-shown="true"] { opacity: 1; transform: none; }
/* The typing indicator must not hold its space when it isn't showing, or the
   answer arrives with a dead gap above it. */
.bubble[data-typing]:not([data-shown="true"]) { display: none; }
.bubble--me { background: var(--mist); margin-left: auto; }
.bubble--ai { background: var(--surface-warm); }
.bubble--hit {
  background: var(--good-bg);
  border: 1px solid var(--good-line);
  color: var(--good-ink);
  font-weight: 700;
}

.bubble-typing { display: inline-flex; gap: 4px; align-items: center; height: 12px; }
.bubble-typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fog);
  animation: typing 1.05s ease-in-out infinite;
}
.bubble-typing i:nth-child(2) { animation-delay: 0.14s; }
.bubble-typing i:nth-child(3) { animation-delay: 0.28s; }
@keyframes typing {
  0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Scenes vary a lot in length. The phones are therefore a FIXED height and
   the conversation is anchored to the bottom, the way a real messaging app
   behaves: new lines rise from the bottom, the frame never resizes, and
   nothing on the page below can be pushed around by the loop. */
.phone { height: 404px; }
.phone-log {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.phone-foot {
  flex: none;
  padding-top: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4375rem;
}

/* A text-message surface reads as Messages, not as an assistant. */
.phone[data-surface="sms"] .bubble--me { background: #dcf3e4; }
.phone[data-surface="sms"] .phone-who { color: var(--yarn-moss); }
.phone[data-surface="wooly"] .phone-who { color: var(--chestnut); }

/* Wooly speaking on its own initiative — the whole point of "speaks up
   first", so it gets its own voice rather than reusing the assistant's. */
.bubble--wooly {
  background: var(--chestnut);
  color: var(--tusk);
  font-weight: 600;
}
.bubble--wooly::before {
  content: "🐘";
  margin-right: 0.4375rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--r-sm);
  padding: 0.4375rem 0.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tag[data-shown="true"] { opacity: 1; }
.tag--saved { background: var(--marigold); color: var(--ink-on-marigold); }
.tag--shelf {
  background: #e7def2;
  color: #4c3a6b;
  border: 1px solid #cbb9e4;
}
.tag--connected {
  background: var(--good-bg);
  color: var(--good-ink);
  border: 1px solid var(--good-line);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  white-space: normal;
  text-align: left;
  line-height: 1.4;
}

/* ---- the scene rail: caption + scene markers ---------------------------- */

.demo-rail {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  margin-top: 0.75rem;
}
.demo-caption {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1.9vw, 1.375rem);
  color: var(--chestnut);
  text-align: center;
  /* Captions differ in length and the longest wraps to two lines. Reserve
     both lines, or the demo column changes height and the centred hero
     copy beside it shifts every time the loop advances. */
  min-height: 3.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 34ch;
}

/* The dots are a real control, so each one carries a 44px-tall touch target
   with no horizontal overlap between neighbours — drawn small, tapped big.
   Swiping the demo is the primary gesture on a phone; see site.js. */
.demo-dots {
  display: flex;
  gap: 0;
  align-items: center;
}
.demo-dot {
  position: relative;
  width: 26px;
  height: 44px;
  padding: 0;
  background: none;
  display: grid;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* The visible dot is drawn by the pseudo-element; the button itself is the
   (much larger) hit area. */
.demo-dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(124, 74, 58, 0.26);
  transition: width 0.3s var(--ease-thread), background-color 0.3s ease;
}
.demo-dot:hover::before { background: rgba(124, 74, 58, 0.5); }
.demo-dot[aria-current="true"]::before { width: 22px; background: var(--marigold); }
.demo-dot:focus-visible { outline-offset: -6px; }

/* A quiet hint that the row is swipeable, phones only. */
.demo-swipe {
  display: none;
  font-size: 0.8125rem;
  color: var(--fog);
}
@media (max-width: 680px) {
  .demo-swipe { display: block; }
  .demo { touch-action: pan-y; }
  .demo-dot { width: 30px; }
}

@media (max-width: 680px) {
  .demo-stage { grid-template-columns: 1fr; gap: 1.25rem; }
  .demo-thread,
  .demo-bead { display: none; }
  /* Stacked, the phones are wider, so the same copy needs fewer lines —
     but the height stays fixed for the same reason as on desktop. */
  .phone { height: 322px; }
  .demo-caption { min-height: 3.4em; }
}

/* --- the ledger: what fell through --------------------------------------- */
/* Not a sequence, so it gets no numbers. It gets a torn thread instead. */

.ledger { display: grid; gap: 1.125rem; }

.ledger-item {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: start;
  background: var(--tusk);
  border: var(--stitch-width) dashed var(--stitch);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.625rem;
}
.ledger-item h3 { margin-bottom: 0.375rem; font-size: 1.1875rem; }
.ledger-item p { color: var(--ink-soft); font-size: 1rem; }
.ledger-snip { color: var(--chestnut); opacity: 0.55; }
.ledger-snip svg { width: 44px; height: 26px; }
.ledger-cost {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--chestnut);
  white-space: nowrap;
  padding-top: 0.125rem;
}

@media (max-width: 720px) {
  .ledger-item { grid-template-columns: 1fr; gap: 0.625rem; padding: 1.25rem; }
  .ledger-snip { display: none; }
  .ledger-cost { order: -1; }
}

/* --- the sequence: how it works ------------------------------------------- */
/* These ARE ordered — the numbers carry real information. */

.sequence { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

.step {
  position: relative;
  background: var(--tusk);
  border: var(--stitch-width) dashed var(--stitch);
  border-radius: var(--r-lg);
  padding: 1.75rem 1.625rem 1.625rem;
}
.step-n {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--chestnut);
  background: var(--surface-warm);
  border-radius: 999px;
  padding: 0.25rem 0.6875rem;
  display: inline-block;
  margin-bottom: 1rem;
}
.step h3 { margin-bottom: 0.5rem; font-size: 1.1875rem; }
.step p { color: var(--ink-soft); font-size: 1rem; }
.step-glyph { color: var(--chestnut); margin-bottom: 1rem; }
.step-glyph svg { height: 40px; width: auto; }

@media (max-width: 860px) { .sequence { grid-template-columns: 1fr; } }

/* --- rooms ---------------------------------------------------------------- */

.rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

.room {
  border: var(--stitch-width) dashed var(--stitch);
  border-radius: var(--r-lg);
  padding: 1.625rem;
  background: var(--tusk);
}
.room-tile {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.room h3 { margin-bottom: 0.25rem; font-size: 1.1875rem; }
.room .room-who {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--chestnut);
  margin-bottom: 0.75rem;
}
.room p { color: var(--ink-soft); font-size: 1rem; }

.rooms-note {
  margin-top: 1.5rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: 1rem;
}
.rooms-note a { color: var(--chestnut); text-decoration: underline; }

/* A way into the demo family. Not a signup — it says so — but it needs to be
   findable, which it wasn't once the signup CTAs came out. */
.try {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
  margin-top: 2.25rem;
  background: var(--tusk);
  border: var(--stitch-width) dashed var(--stitch);
  border-radius: var(--r-lg);
  padding: 1.75rem 2rem;
}
.try h3 { font-size: 1.25rem; margin-bottom: 0.375rem; }
.try p { color: var(--ink-soft); font-size: 1rem; max-width: 56ch; }
.try .btn { flex: none; }

@media (max-width: 760px) {
  .try { flex-direction: column; align-items: flex-start; padding: 1.5rem; }
  .try .btn { width: 100%; }
}

@media (max-width: 860px) { .rooms { grid-template-columns: 1fr; } }

/* --- the slab: objection + close ------------------------------------------ */

.slab {
  background: var(--chestnut);
  color: var(--tusk);
  border-radius: var(--r-xl);
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.75rem, 5vw, 3.5rem);
  box-shadow: var(--shadow-deep);
}
.slab .eyebrow { color: #e0c6b8; }
.slab h2 { color: var(--tusk); margin-block: 0.875rem 1.125rem; }
.slab p { color: #eddcd2; font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); max-width: 58ch; }
.slab p + p { margin-top: 1rem; }
.slab .hl { color: var(--marigold); font-weight: 700; }
.slab--center { text-align: center; }
.slab--center p { margin-inline: auto; }
.slab--center h2 { font-size: clamp(2rem, 4.4vw, 2.9rem); }

.quote-mark {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 0.6;
  color: var(--marigold);
  opacity: 0.5;
  display: block;
  margin-bottom: 0.5rem;
}

/* --- owed to us ----------------------------------------------------------- */

.owed-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.owed-total {
  background: var(--chestnut);
  color: var(--tusk);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  text-align: center;
  margin-bottom: 1.125rem;
}
.owed-total b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.25rem;
  display: block;
  line-height: 1;
  margin-bottom: 0.375rem;
}
.owed-total span { color: #eddcd2; font-size: 0.9375rem; }

.owed-list { display: grid; gap: 0.75rem; }
.owed-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.875rem 1rem;
  align-items: center;
  background: var(--tusk);
  border: var(--stitch-width) dashed var(--stitch);
  border-radius: var(--r-md);
  padding: 1rem 1.125rem;
}
.owed-amt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--chestnut);
}
.owed-item p { font-size: 0.9375rem; color: var(--ink-soft); grid-column: 1 / -1; }
.due {
  justify-self: start;
  border-radius: 8px;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 800;
}
.due--soon { background: var(--warn-bg); color: var(--warn-ink); }
.due--ok { background: var(--good-bg); color: var(--good-ink); }
.owed-item > .due { grid-column: 2; justify-self: end; }

@media (max-width: 900px) { .owed-grid { grid-template-columns: 1fr; } }

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

.cycle {
  display: inline-flex;
  gap: 0.25rem;
  background: var(--tusk);
  border: var(--stitch-width) dashed var(--stitch);
  border-radius: 999px;
  padding: 0.3125rem;
  margin: 0 auto clamp(2rem, 4vw, 2.75rem);
}
.cycle button {
  border-radius: 999px;
  padding: 0.625rem 1.25rem;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink-soft);
}
.cycle button[aria-pressed="true"] { background: var(--chestnut); color: var(--tusk); }
.cycle .save { font-size: 0.8125rem; opacity: 0.85; }

.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}
.plan {
  display: flex;
  flex-direction: column;
  background: var(--tusk);
  border: var(--stitch-width) dashed var(--stitch);
  border-radius: var(--r-lg);
  padding: 1.75rem;
}
.plan--feature {
  background: var(--chestnut);
  color: var(--tusk);
  border-style: solid;
  border-color: var(--chestnut);
  box-shadow: var(--shadow-deep);
}
.plan-flag {
  align-self: flex-start;
  background: var(--marigold);
  color: var(--ink-on-marigold);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.25rem 0.6875rem;
  margin-bottom: 0.875rem;
}
.plan-name { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }
.plan-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.75rem;
  line-height: 1.1;
  margin-top: 0.5rem;
}
.plan-per { font-size: 0.875rem; color: var(--fog); min-height: 2.6em; }
.plan--feature .plan-per { color: #eddcd2; }
.plan ul { margin: 1.25rem 0 1.5rem; flex: 1; display: grid; gap: 0.5rem; }
.plan li { position: relative; padding-left: 1.625rem; font-size: 1rem; }
.plan li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--yarn-teal);
  border-bottom: 2px solid var(--yarn-teal);
  transform: rotate(-45deg);
}
.plan--feature li::before { border-color: var(--marigold); }
.plan-note { font-size: 0.875rem; color: var(--fog); margin-top: 0.75rem; text-align: center; }
.plan--feature .plan-note { color: #eddcd2; }

@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }

/* --- trust ---------------------------------------------------------------- */

.promises {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}
.promise {
  border: var(--stitch-width) dashed var(--stitch);
  border-radius: var(--r-md);
  padding: 1.25rem;
  background: var(--tusk);
}
.promise b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  margin-bottom: 0.25rem;
}
.promise span { font-size: 0.9375rem; color: var(--ink-soft); }

@media (max-width: 900px) { .promises { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .promises { grid-template-columns: 1fr; } }

/* --- waitlist ------------------------------------------------------------- */

.waitform {
  display: flex;
  gap: 0.625rem;
  max-width: 460px;
  margin: 1.75rem auto 0;
}
.waitform input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 251, 242, 0.96);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  padding: 0.9375rem 1.125rem;
  font-size: 1.0625rem;
  color: var(--slate);
  min-height: 52px;
}
.waitform input::placeholder { color: #9aa4b5; }
.waitform input:focus {
  outline: none;
  border-color: var(--marigold);
}
.waitform button { flex: none; }
.waitform[data-done="true"] input { opacity: 0.55; }
.waitform[data-done="true"] button { opacity: 0.85; cursor: default; }

.waitnote {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: #d8c3b7;
  max-width: 46ch;
  margin-inline: auto;
}
.waitnote[data-tone="good"] { color: #a8e6cf; font-weight: 700; }
.waitnote[data-tone="warn"] { color: #ffc9bd; font-weight: 700; }

@media (max-width: 560px) {
  .waitform { flex-direction: column; }
  .waitform button { width: 100%; }
}

/* --- faq ------------------------------------------------------------------ */

.faq { display: grid; gap: 0.75rem; }
.faq details {
  background: var(--tusk);
  border: var(--stitch-width) dashed var(--stitch);
  border-radius: var(--r-md);
  padding: 0 1.375rem;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  padding: 1.125rem 2rem 1.125rem 0;
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.25rem; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--chestnut);
  border-bottom: 2px solid var(--chestnut);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.18s var(--ease-thread);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { color: var(--ink-soft); font-size: 1rem; padding-bottom: 1.25rem; max-width: 66ch; }
.faq details p + p { padding-top: 0.75rem; }

/* --- closer + footer ------------------------------------------------------ */

.closer {
  background: var(--chestnut);
  color: var(--tusk);
  text-align: center;
  padding-block: clamp(4rem, 8vw, 6rem);
}
.closer .yarns { justify-content: center; margin-bottom: 1.5rem; }
.closer h2 {
  color: var(--tusk);
  font-size: clamp(2.25rem, 5.4vw, 3.5rem);
  margin-bottom: 1.5rem;
}
.closer p { color: #eddcd2; margin-top: 1.125rem; font-size: 0.9375rem; }

.footer {
  background: var(--slate);
  color: #aeb8c7;
  padding-block: 3rem 2rem;
  font-size: 0.9375rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.footer .brandmark { color: var(--tusk); margin-bottom: 0.875rem; }
.footer-blurb { max-width: 30ch; color: #8f9aab; }
.footer h4 {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6f7b8c;
  margin-bottom: 0.875rem;
}
.footer li { margin-bottom: 0.5rem; }
.footer a:hover { color: var(--tusk); text-decoration: underline; }
.footer-base {
  border-top: 1px solid #333e4e;
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: #6f7b8c;
  font-size: 0.875rem;
}

@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   THE FOUNDERS WALL
   A family photo wall on brick. The brick is a tiled SVG in running bond —
   no image request, crisp at any zoom, and tuned warm so it sits beside
   chestnut rather than fighting it.
   ========================================================================== */

.wall {
  position: relative;
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 6vw, 4.5rem);
  background-color: #9c6350;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Crect width='120' height='80' fill='%23c0a998'/%3E%3Cg fill='%239e6552'%3E%3Crect x='1' y='1' width='57' height='37' rx='1.5'/%3E%3Crect x='61' y='1' width='57' height='37' rx='1.5'/%3E%3Crect x='-29' y='41' width='57' height='37' rx='1.5'/%3E%3Crect x='31' y='41' width='57' height='37' rx='1.5'/%3E%3Crect x='91' y='41' width='57' height='37' rx='1.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 80px;
}
/* Light falling from the top-left, so the wall reads as a room. */
.wall::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 22% 0%, rgba(255, 246, 230, 0.34), transparent 62%),
    linear-gradient(180deg, rgba(60, 32, 22, 0) 55%, rgba(60, 32, 22, 0.22) 100%);
  pointer-events: none;
}
.wall > * { position: relative; }

/* --- the taped banner ----------------------------------------------------- */

.wall-banner {
  max-width: 34ch;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  background: #f7f1e6;
  color: var(--slate);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 2.4vw, 1.5rem);
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  padding: 0.875rem 1.5rem;
  border-radius: 4px;
  box-shadow: 0 10px 22px -10px rgba(50, 26, 18, 0.55);
  transform: rotate(-0.5deg);
}

/* --- the gallery grid ----------------------------------------------------- */
/* Desktop: three columns with the sketch in the middle spanning two rows,
   exactly as in the reference. Mobile: one column, no rotation. */

.gallery {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 3vw, 2rem);
  grid-template-columns: 1fr;
  justify-items: center;
}

@media (min-width: 900px) {
  .gallery {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
  }
  .gallery > .frame--hero {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .gallery > .frame--tl { grid-column: 1; grid-row: 1; }
  .gallery > .frame--tr { grid-column: 3; grid-row: 1; }
  .gallery > .frame--bl { grid-column: 1; grid-row: 2; }
  .gallery > .frame--br { grid-column: 3; grid-row: 2; }
  .gallery > .valuecard { grid-column: 2; grid-row: 3; }
}

/* --- a frame -------------------------------------------------------------- */

.frame {
  --tilt: 0deg;
  width: 100%;
  max-width: 340px;
  margin: 0;
  transform: rotate(var(--tilt));
  transition: transform 0.25s var(--ease-thread);
}
.frame:hover { transform: rotate(0deg) scale(1.015); }
.frame--hero { max-width: 400px; }

@media (max-width: 899px) {
  .frame { transform: none; max-width: 420px; }
  .frame:hover { transform: scale(1.01); }
}

/* The mat is what actually holds the picture. */
.frame-mat {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #efe6d8;
  box-shadow: 0 18px 34px -14px rgba(48, 24, 16, 0.62);
}
.frame-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* A stitched placeholder until the real photo lands, so the layout is final
   from the first commit and nothing jumps when the files arrive. */
.frame-mat::after {
  content: "Photo coming";
  position: absolute;
  inset: 6px;
  display: grid;
  place-content: center;
  border: 2px dashed rgba(124, 74, 58, 0.4);
  border-radius: 10px;
  background: #f3ebdd;
  color: rgba(124, 74, 58, 0.75);
  font-family: var(--font-display);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Once the image has decoded, cover the placeholder. A broken/missing file
   never decodes, so the placeholder simply stays. */
.frame-photo { position: relative; z-index: 1; }
.frame-photo:not([src=""]) { background: #f3ebdd; }

/* --- frame styles --------------------------------------------------------- */

/* Tablet/screen: the dark bezel from the reference. */
.frame--tablet .frame-mat {
  border: 11px solid #23201f;
  border-radius: 14px;
  box-shadow: 0 20px 36px -14px rgba(40, 20, 14, 0.7), inset 0 0 0 1px #3a3634;
}

.frame--wood .frame-mat {
  border: 13px solid #9a6a3c;
  border-radius: 3px;
  box-shadow: 0 18px 32px -14px rgba(48, 24, 16, 0.6),
    inset 0 0 0 2px rgba(255, 245, 225, 0.35);
}

.frame--silver .frame-mat {
  border: 12px solid #c9cbcd;
  border-radius: 3px;
  box-shadow: 0 18px 32px -14px rgba(48, 24, 16, 0.55),
    inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

/* Polaroid: white border, deeper at the bottom. */
.frame--polaroid .frame-mat {
  border: 12px solid #fdfaf3;
  border-bottom-width: 40px;
  border-radius: 2px;
}

/* --- the centre: the founders, in the brand's sketch style ---------------- */
/* An ordinary photograph goes in and comes out as warm graphite, so there is
   no hand-drawn asset to commission or keep in sync with the real people. */

.frame--sketch .frame-mat {
  aspect-ratio: 1 / 1;
  background: #fbf7ee;
  padding: 26px 26px 30px;
  border: 1px solid rgba(124, 74, 58, 0.18);
  border-radius: 3px;
  box-shadow: 0 24px 44px -16px rgba(48, 24, 16, 0.6);
}
.frame--sketch .frame-photo {
  filter: grayscale(1) contrast(1.42) brightness(1.12) sepia(0.16);
  mix-blend-mode: multiply;
  border-radius: 2px;
}
.frame--sketch .frame-mat::after {
  content: "Founders sketch";
  inset: 26px;
}

/* --- the label taped underneath ------------------------------------------ */

.frame-label {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: -0.5rem 0 0 0.75rem;
  position: relative;
  z-index: 2;
  background: #f7f1e6;
  color: var(--slate);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
  padding: 0.5rem 0.875rem;
  border-radius: 3px;
  box-shadow: 0 8px 16px -8px rgba(50, 26, 18, 0.6);
  transform: rotate(calc(var(--tilt) * -1.4));
}
.frame-label--wide {
  margin-inline: auto;
  text-align: center;
  font-size: 1rem;
}
.frame-sub {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--chestnut);
  margin-top: 0.125rem;
}

/* --- the values card, as in the reference -------------------------------- */

.valuecard {
  width: 100%;
  max-width: 340px;
  background: #f7f1e6;
  border-radius: 10px;
  padding: 1.25rem 1.375rem;
  box-shadow: 0 16px 30px -12px rgba(50, 26, 18, 0.55);
  transform: rotate(0.6deg);
}
.valuecard p {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--slate);
  margin-bottom: 0.75rem;
}
.valuecard ul { display: grid; gap: 0.375rem; }
.valuecard li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.valuecard li svg { width: 17px; height: 17px; color: var(--yarn-teal); flex: none; }

/* --- the pinned marks ---------------------------------------------------- */

.pin {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #f7f1e6;
  place-items: center;
  box-shadow: 0 8px 16px -6px rgba(50, 26, 18, 0.6);
  z-index: 3;
}
.pin img { opacity: 0.85; }

@media (min-width: 900px) {
  .pin { display: grid; position: absolute; }
  .pin--1 { top: 30%; left: 30%; }
  .pin--2 { top: 30%; right: 30%; }
  .pin--3 { bottom: 26%; left: 32%; }
  .gallery { position: relative; }
}

/* --- the bottom bar ------------------------------------------------------ */

.wall-foot {
  margin-top: clamp(2rem, 5vw, 3.25rem);
  background: #faf5ec;
  border-radius: 6px;
  padding: 1rem 1.25rem;
  text-align: center;
  box-shadow: 0 12px 24px -12px rgba(50, 26, 18, 0.5);
}
.wall-foot b {
  font-family: var(--font-wordmark);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--slate);
}
.wall-foot span { color: var(--ink-soft); font-size: 0.9375rem; }

/* ==========================================================================
   The story, and the team
   ========================================================================== */

.story p { color: var(--ink-soft); font-size: 1.0625rem; }
.story p + p { margin-top: 1.125rem; }
.story strong { color: var(--slate); }
.story-sign {
  margin-top: 1.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--chestnut);
}

.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
}

.member {
  background: var(--tusk);
  border: var(--stitch-width) dashed var(--stitch);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.375rem;
  text-align: center;
}
.member-photo {
  width: 104px;
  height: 104px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-warm);
  border: 3px solid var(--tusk);
  box-shadow: 0 0 0 2px rgba(124, 74, 58, 0.22);
}
.member-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.member h3 { font-size: 1.1875rem; margin-bottom: 0.125rem; }
.member-role {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chestnut);
  margin-bottom: 0.625rem;
}
.member-line { font-size: 0.9375rem; color: var(--ink-soft); line-height: 1.5; }

/* --- legal / doc pages ---------------------------------------------------- */

.doc { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(4rem, 8vw, 6rem); }
.doc h1 { font-size: clamp(2.125rem, 5vw, 3rem); margin-bottom: 0.75rem; }
.doc .doc-meta { color: var(--fog); font-size: 0.9375rem; margin-bottom: 2.5rem; }
.doc h2 { font-size: 1.5rem; margin-block: 2.5rem 0.875rem; }
.doc h3 { font-size: 1.125rem; margin-block: 1.75rem 0.5rem; }
.doc p, .doc li { color: var(--ink-soft); max-width: 68ch; }
.doc p + p { margin-top: 1rem; }
.doc ul { margin: 1rem 0; display: grid; gap: 0.5rem; }
.doc ul li { position: relative; padding-left: 1.375rem; }
.doc ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 7px; height: 2px;
  background: var(--chestnut);
}
.doc a:not(.btn) { color: var(--chestnut); text-decoration: underline; }

.notice {
  background: var(--warn-bg);
  border: var(--stitch-width) dashed rgba(192, 57, 43, 0.35);
  border-radius: var(--r-md);
  padding: 1.125rem 1.375rem;
  margin-bottom: 2.5rem;
}
.notice b { color: var(--warn-ink); display: block; margin-bottom: 0.25rem; font-family: var(--font-display); }
.notice p { color: #8f4437; font-size: 0.9375rem; max-width: none; }