/* ==========================================================================
   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;
  /* Brand Kit v1.0: the primary lockup is Slate, not Chestnut. */
  color: var(--slate);
}
.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); }

/* Six nav items plus the wordmark does not fit just above the mobile
   breakpoint, and .masthead-nav deliberately does not wrap - a wrapped
   masthead looks broken. Measured on the live page at a 861px viewport:
   shell padding takes 48px, leaving 813px; wordmark 115px + nav 755px = 894px,
   so the default spacing overflows by 81px. At gap .875rem / font .9rem the
   nav needs 642px, total 781px - 32px of slack, which survives font-rendering
   differences between machines. (1.1rem/.9375rem measured to exactly 0px of
   slack, which is not a margin, it is a coincidence.) */
@media (min-width: 861px) and (max-width: 1080px) {
  .masthead-nav { gap: 0.875rem; font-size: 0.9rem; }
}

/* The way into the founders story from the hero. Quiet on purpose: it must not
   compete with the two calls to action above it. Carries the stitch motif. */
.hero-meet { margin-top: 0.75rem; font-size: 0.9375rem; }
.hero-meet a {
  color: var(--chestnut);
  font-family: var(--font-display);
  font-weight: 600;
  border-bottom: var(--stitch-width) dashed var(--stitch);
  padding-bottom: 2px;
}
.hero-meet a:hover { border-bottom-style: solid; }

.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; }
  /* Third row is deliberately asymmetric — a photo wall that lines up
     perfectly stops reading as a wall and starts reading as a table. */
  .gallery > .frame--b2 { grid-column: 3; grid-row: 3; }
  .gallery > .valuecard { grid-column: 1 / span 2; grid-row: 3; justify-self: center; }
}

/* --- 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;
}
/* No placeholder behind the sketch. Its photo uses mix-blend-mode: multiply,
   which lets whatever sits underneath show through the light areas — so a
   placeholder here reads as ghost text printed across their faces. */
.frame--sketch .frame-mat::after { content: none; }

/* --- 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) {
  /* Only the two beside the sketch. A third sat on top of the values-card
     text — decoration must never land on something you have to read. */
  .pin--1,
  .pin--2 { display: grid; position: absolute; }
  .pin--1 { top: 30%; left: 30%; }
  .pin--2 { top: 30%; right: 30%; }
  .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; }