/* --------------------------------------------------------------------------
   The two fonts, served from this domain.

   They used to come from fonts.googleapis.com: a render blocking stylesheet on
   one host, then the font files themselves on a second host, all before a
   single word could be painted. On a shop's mobile connection that is two DNS
   lookups and two TLS handshakes standing between a customer and the first
   sentence.

   Both are the variable versions, so one file covers every weight the page
   uses: DM Sans carries 400 through 700, Source Serif carries the 600 the
   headings are set in. Both contain the rupee sign, which this page says more
   often than it says anything else. swap, so a slow line shows the system font
   immediately rather than nothing, exactly as the Google Fonts link asked for.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/dm-sans-v17.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("assets/fonts/source-serif-4-v14.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   B4BUY
   --------------------------------------------------------------------------
   Full bleed solid slabs, alternating deep peacock and pale teal. A serif for
   headings, a sans for reading, a monospace for every figure, and coral used
   only where something can be pressed.

   The page is a pitch delivered in order, so it reads as a series of rooms
   rather than cards floating on a neutral field. Solid fills only, and no
   coloured stripe down the edge of anything.

   Written phone first. The wider screens are additions at the bottom, because
   most shop owners open this between customers.
   ========================================================================== */

:root {
  --peacock:      #04302d;
  --peacock-2:    #0a423d;
  --peacock-deep: #022320;
  --peacock-line: rgba(210, 255, 250, 0.15);

  --sage:   #dbe8e3;
  --sage-2: #cfe1db;
  --paper:  #f7f4ee;
  --white:  #ffffff;
  --line:   #c3d8d1;

  --ink:       #0b2b28;
  --ink-soft:  #47635f;
  --ink-faint: #7a938f;

  --on-dark:       #f1f6f4;
  --on-dark-soft:  rgba(241, 246, 244, 0.74);
  --on-dark-faint: rgba(241, 246, 244, 0.52);

  --coral:      #f3574a;
  --coral-deep: #d8402f;
  --coral-pale: #ffd4cd;
  --teal-bright: #2fd0cb;
  --green-pale: #7fe0be;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --measure: 1120px;
  --pad: clamp(20px, 5vw, 56px);
  --slab: clamp(52px, 7.5vw, 96px);
  --r: 14px;
  --r-lg: 20px;
}

/* The visitor's own setting. Not an inversion: the peacock slabs stay put and
   the pale ones deepen, so the page keeps its shape in either. */
@media (prefers-color-scheme: dark) {
  :root {
    --sage: #073b36; --sage-2: #0a463f; --paper: #062f2b; --white: #0c4a44;
    --line: rgba(210, 255, 250, 0.16);
    --ink: #f1f6f4; --ink-soft: rgba(241, 246, 244, 0.74); --ink-faint: rgba(241, 246, 244, 0.5);
    --peacock: #021d1b; --peacock-2: #073430; --peacock-deep: #011513;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sage);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

:where(a, button, input, textarea, summary):focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--coral);
  color: #fff;
  padding: 12px 18px;
  z-index: 100;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- slabs ---------- */
.slab { padding: var(--slab) var(--pad); }
.on-peacock { background: var(--peacock); color: var(--on-dark); }
.on-sage    { background: var(--sage); }
.on-paper   { background: var(--paper); }
.inner { max-width: var(--measure); margin: 0 auto; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(34px, 5.6vw, 62px); line-height: 1.06; letter-spacing: -0.022em; }
h2 { font-size: clamp(27px, 3.9vw, 43px); line-height: 1.1; letter-spacing: -0.018em; }
h3 { font-size: 20px; line-height: 1.25; }
em { font-style: normal; color: var(--coral); }
.on-peacock em { color: var(--coral-pale); }

p { margin: 0; }
.lede {
  font-size: clamp(17px, 1.85vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 54ch;
  margin-top: 18px;
}
.on-peacock .lede { color: var(--on-dark-soft); }
.sub { font-size: 16px; color: var(--ink-soft); }
.on-peacock .sub { color: var(--on-dark-soft); }

.eyebrow {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--coral);
  margin: 0 0 12px;
}
.on-peacock .eyebrow { color: var(--teal-bright); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 26px;
  border-radius: 10px;
  font-size: 16.5px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  font-family: var(--sans);
  transition: background 0.14s ease;
  text-align: center;
}
.btn-solid { background: var(--coral); color: #fff; }
.btn-solid:hover { background: var(--coral-deep); }
.btn-line { background: transparent; border-color: var(--line); color: var(--ink); }
.on-peacock .btn-line { border-color: var(--peacock-line); color: var(--on-dark); }
.on-peacock .btn-line:hover { background: rgba(255, 255, 255, 0.09); }
.btn-full { width: 100%; }
.btn-sm { padding: 10px 18px; font-size: 15px; }

/* ---------- header ---------- */
.head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--peacock);
  color: var(--on-dark);
  border-bottom: 1px solid var(--peacock-line);
}
.head-in {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 12px var(--pad);
  display: flex;
  align-items: center;
  gap: 20px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand img { display: block; height: 34px; width: auto; }
.brand-word { font-family: var(--serif); font-size: 20px; font-weight: 600; }
.brand-word b { color: var(--coral); font-weight: 600; }
.nav { display: flex; gap: 20px; margin-left: auto; }
.nav a { color: var(--on-dark-soft); text-decoration: none; font-size: 15px; padding: 9px 0; }
.nav a:hover { color: var(--on-dark); }

.menu-btn {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
  margin-left: auto;
}
.menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--on-dark);
  border-radius: 2px;
}
.menu-btn span + span { margin-top: 5px; }

/* ---------- the hero, and the sum inside it ---------- */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(30px, 5vw, 60px);
  align-items: center;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero-cta .btn { flex: 1 1 auto; }

.sum { background: var(--peacock-2); border-radius: var(--r-lg); padding: 26px 28px; }
.sum-head {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  margin-bottom: 14px;
}
.sum-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 9px 0;
  font-size: 15.5px;
  color: var(--on-dark-soft);
}
.sum-row label { cursor: text; }
.sum-row .v { font-family: var(--mono); font-size: 19px; color: var(--on-dark); white-space: nowrap; }
.sum-rule { height: 1px; background: var(--peacock-line); margin: 8px 0 4px; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-top: 10px; }
.sum-total .k { font-size: 15.5px; color: var(--on-dark-soft); }
.sum-total .v {
  font-family: var(--mono);
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1;
  color: var(--coral-pale);
  white-space: nowrap;
}
.sum-note { margin-top: 14px; font-size: 14px; color: var(--on-dark-faint); }

/* He types his own two numbers, and they are the only numbers this page
   argues from. Nothing here is a figure we invented about his shop. */
.innum {
  font-family: var(--mono);
  font-size: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--on-dark);
  background: transparent;
  border: 0;
  border-bottom: 1.5px dashed var(--teal-bright);
  padding: 0 2px 2px;
  text-align: right;
  border-radius: 0;
}
.innum:focus { outline: none; border-bottom-style: solid; }

.insight {
  margin-top: 20px;
  background: var(--peacock-deep);
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--on-dark-soft);
}
.insight b {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--coral-pale);
  margin-bottom: 5px;
}

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 34px; }
.step {
  background: var(--white);
  border-radius: var(--r);
  padding: 24px 22px 26px;
  display: grid;
  gap: 9px;
  align-content: start;
}
.step b { font-family: var(--mono); font-size: 13px; color: var(--coral); letter-spacing: 0.1em; }
.step p { font-size: 15.5px; color: var(--ink-soft); }

/* ---------- what they see ---------- */
.sees-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 50px);
  align-items: center;
}

/* Bring your own machine: the software-only offer. One highlighted card,
   solid white on the sage slab with the coral flag the pricing cards already
   use, so an owner who owns a screen sees his cheaper door into the same
   product without hunting the QA rows for it. */
.byo {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 26px;
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 28px;
  align-items: center;
  box-shadow: 0 12px 32px rgba(11, 51, 46, 0.10);
}
.byo .fee-lab { display: block; margin-bottom: 4px; }
.byo-line { font-family: var(--serif); font-weight: 600; font-size: clamp(21px, 2.3vw, 27px); line-height: 1.25; display: block; margin-bottom: 8px; }
.byo-copy { font-size: 15.5px; color: var(--ink-soft); margin: 0; max-width: 56ch; }
.byo-copy em { font-style: normal; font-weight: 700; color: var(--coral); }
.byo-price { text-align: right; display: grid; justify-items: end; gap: 2px; }
.byo-price > b { font-family: var(--mono); font-size: clamp(34px, 4vw, 46px); line-height: 1; letter-spacing: -0.03em; }
.byo-price > span { font-size: 13px; color: var(--ink-faint); }
@media (max-width: 760px) {
  .byo { grid-template-columns: minmax(0, 1fr); }
  .byo-price { justify-items: start; text-align: left; }
}

/* ---------- the pause ---------- */
.slab.is-break {
  padding-top: clamp(56px, 8vw, 104px);
  padding-bottom: clamp(56px, 8vw, 104px);
  text-align: center;
}
.slab.is-break .inner { max-width: 900px; }
.slab.is-break h2 { font-size: clamp(30px, 4.6vw, 52px); }
.slab.is-break .lede { margin: 22px auto 0; max-width: 52ch; }

.film-notes { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 0; max-width: 480px; }
.film-notes li {
  padding: 12px 0 12px 26px;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  color: var(--ink-soft);
  position: relative;
}
.film-notes li:last-child { border-bottom: 1px solid var(--line); }
.film-notes li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 19px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--coral);
  border-bottom: 2px solid var(--coral);
  transform: rotate(-45deg);
}

/* ---------- the film ---------- */
.film {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--peacock-2);
  /* The exact shape of the file, 720 by 1036, so nothing is cropped. */
  aspect-ratio: 720 / 1036;
  max-width: 400px;
  margin-inline: auto;
  width: 100%;
}
.film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sound-btn {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: rgba(2, 35, 32, 0.78);
  color: var(--on-dark);
  border: 1px solid var(--peacock-line);
  padding: 9px 15px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--sans);
}

/* ---------- plans ---------- */
.plan-test { margin-top: 14px; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; margin-top: 16px; }
/* The rate line and the pay toggle share a row, so a laptop sees the heading,
   the three prices and their buttons together without scrolling. */
.price-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.price-head .lede { max-width: 56ch; }
.price-head .term-switch { margin-top: 0; flex: none; }
@media (max-width: 940px) { .price-head { display: block; } .price-head .term-switch { margin-top: 18px; } }
.plan {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 20px 18px;
  display: grid;
  gap: 4px;
  align-content: start;
}
.plan.is-pick { background: var(--peacock); color: var(--on-dark); border-color: var(--peacock); }
.plan-flag {
  display: inline-block;
  background: var(--coral);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  justify-self: start;
  margin-bottom: 8px;
}
.plan h3 { font-size: 20px; }
.plan-for { font-size: 14.5px; color: var(--ink-faint); }
.plan.is-pick .plan-for { color: var(--on-dark-faint); }
.plan-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.plan-was { font-family: var(--mono); font-size: 15px; color: var(--ink-faint); text-decoration: line-through; }
.plan.is-pick .plan-was { color: var(--on-dark-faint); }
.plan-now {
  font-family: var(--mono);
  font-size: clamp(25px, 2.6vw, 31px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}
.plan-now span { font-size: 0.62em; }
.plan-per { font-size: 14px; color: var(--ink-soft); }
.plan.is-pick .plan-per { color: var(--on-dark-soft); }
.plan-save { font-size: 13px; font-weight: 600; color: var(--coral); margin-top: 3px; }
.plan.is-pick .plan-save { color: var(--coral-pale); }
.plan-looks {
  font-family: var(--mono);
  font-size: 14px;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 9px;
  background: var(--sage);
}
.plan.is-pick .plan-looks { background: rgba(255, 255, 255, 0.1); }

/* The only test that matters, worked out from his own average bill. */
.payback { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.plan.is-pick .payback { border-top-color: var(--peacock-line); }
.payback .k { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--ink-faint); }
.plan.is-pick .payback .k { color: var(--on-dark-faint); }
.payback .v { font-family: var(--mono); font-size: 18px; color: #1a7f60; }
.plan.is-pick .payback .v { color: var(--green-pale); }
.payback .n { font-size: 13.5px; color: var(--ink-soft); }
.plan.is-pick .payback .n { color: var(--on-dark-soft); }

.plan ul { list-style: none; margin: 12px 0 14px; padding: 0; display: grid; gap: 6px; }
.plan li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  color: var(--ink-soft);
}
.plan.is-pick li { color: var(--on-dark-soft); }
.plan li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--coral);
  border-bottom: 2px solid var(--coral);
  transform: rotate(-45deg);
}
.plan.is-pick li::before { border-color: var(--teal-bright); }

.plans-note { margin-top: 16px; max-width: 78ch; }


/* ---------- the machine and the fee ---------- */
.fee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 18px;
  margin-top: 30px;
  /* Each card is its own height. Stretching made the one-price card a tall
     empty white box beside the refund table. */
  align-items: start;
}
.fee-cost, .fee-back {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 26px;
  display: grid;
  align-content: start;
  gap: 8px;
}
.fee-back { background: var(--peacock); color: var(--on-dark); }
.fee-lab {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-faint);
}
.fee-back .fee-lab { color: var(--on-dark-faint); }
/* The strongest reassurance on the page was a faint label. The owner asked
   for it to be impossible to miss: headline-weight, on the dark panel, the
   same serif-and-pale-coral voice the page's other dark statements use. */
.fee-promise { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; margin: 0 0 6px; }
.fee-promise em { color: var(--coral-pale); font-style: normal; }
.fee-cost > b {
  font-family: var(--mono);
  font-size: clamp(38px, 5vw, 52px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.fee-cost ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.fee-cost li { font-size: 15.5px; color: var(--ink-soft); }
.fee-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--peacock-line);
  font-size: 16px;
}
.fee-row:first-of-type { border-top: 0; margin-top: 6px; }
.fee-row b {
  font-family: var(--mono);
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--green-pale);
  white-space: nowrap;
}
.fee-note { margin-top: 14px; font-size: 14.5px; color: var(--on-dark-faint); }

.slab.is-narrow .inner { max-width: 860px; }

/* Every second call question, in rows. Readable in twenty seconds. */
.qa { margin: 26px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; }
.qa > div { padding: 15px 0; border-top: 1px solid var(--line); }
.qa dt { font-weight: 600; font-size: 16px; }
.qa dd { margin: 3px 0 0; font-size: 15.5px; color: var(--ink-soft); }

/* ---------- terms ---------- */
.terms { list-style: none; margin: 26px 0 0; padding: 0; display: grid; max-width: 760px; }
.terms li {
  padding: 15px 0;
  border-top: 1px solid var(--line);
  font-size: 16.5px;
  position: relative;
  padding-left: 26px;
}
.terms li:last-child { border-bottom: 1px solid var(--line); }
.terms li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 22px;
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--coral);
  border-bottom: 2px solid var(--coral);
  transform: rotate(-45deg);
}

/* ---------- booking ---------- */
.book-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 58px);
  align-items: start;
}
.note-from { margin-top: 26px; border-top: 1px solid var(--peacock-line); padding-top: 22px; }
.note-from p {
  font-family: var(--serif);
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.5;
  color: var(--on-dark);
  max-width: 48ch;
}
.note-from span { display: block; margin-top: 12px; font-size: 14px; color: var(--on-dark-faint); }

.reach { margin-top: 22px; display: grid; gap: 7px; font-size: 16px; }
.reach a { color: var(--on-dark); text-decoration: none; font-family: var(--mono); padding: 6px 0; display: inline-block; }
.reach a:hover { text-decoration: underline; }

.form { background: var(--white); border-radius: var(--r-lg); padding: 26px; display: grid; gap: 15px; }
.f { display: grid; gap: 6px; }
.f span { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.f input {
  font: inherit;
  font-size: 16.5px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--sage);
  color: var(--ink);
  width: 100%;
}
.f input::placeholder { color: var(--ink-faint); }
.f input[aria-invalid='true'] { border-color: var(--coral); }
/* A bot trap. Off screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.preview-lab {
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
  margin-bottom: 7px;
}
.preview {
  background: var(--sage);
  border-radius: 10px;
  padding: 15px 16px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.preview b { color: var(--ink); font-weight: 600; }
.preview em { font-style: normal; color: var(--ink-faint); }

.form-note { font-size: 13.5px; color: var(--ink-faint); }
.form-note.is-error { color: var(--coral); font-weight: 600; }

/* ---------- footer ---------- */
.foot { background: var(--peacock-deep); color: var(--on-dark); padding: 46px var(--pad) 40px; }
.foot-in {
  max-width: var(--measure);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
}
.foot p { color: var(--on-dark-faint); font-size: 14px; }

/* Follows the owner down the page on a phone, because the whole point of this
   page is the free hour. */
.sticky-cta {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: none;
  background: var(--coral);
  color: #fff;
  text-decoration: none;
  text-align: center;
  padding: 15px;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(2, 35, 32, 0.28);
}

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .hero-grid, .sees-grid, .book-grid { grid-template-columns: minmax(0, 1fr); }
  .steps, .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fee, .qa { grid-template-columns: minmax(0, 1fr); }

  /*
   * Stacked, the figure has to land BEFORE the buttons: it is the hook, and a
   * shop owner should not scroll past two buttons to reach it. The copy block
   * dissolves into the grid so its children can be reordered around the panel,
   * which keeps the buttons attached to the text on a wide screen.
   */
  .hero-copy { display: contents; }
  .hero-copy > h1 { order: 1; }
  .hero-copy > .lede { order: 2; }
  .hero-grid > .sum { order: 3; }
  .hero-copy > .hero-cta { order: 4; margin-top: 4px; }

  .menu-btn { display: block; }
  .head-cta { display: none; }
  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0;
    flex-direction: column;
    gap: 0;
    background: var(--peacock);
    border-bottom: 1px solid var(--peacock-line);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
  }
  .nav a { padding: 15px var(--pad); border-top: 1px solid var(--peacock-line); }
  .head.is-open .nav { max-height: 60vh; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .steps, .plans { grid-template-columns: minmax(0, 1fr); }
  .hero-cta .btn { width: 100%; flex: none; }
  .sum { padding: 22px 20px; }
  .sticky-cta { display: block; }
  .foot { padding-bottom: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- monthly / yearly switch ----------
   Two plain buttons rather than a slider: a shop owner reading this on a phone
   in a busy shop should see both choices at once, not discover the second by
   dragging something. */
.term-switch {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 28px;
  padding: 4px;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.14));
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.03);
}
.term-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.term-btn.is-on {
  background: var(--ink, #0d1b1a);
  color: #fff;
}
.term-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent, #ff6f61);
  color: #fff;
  font-size: 0.78em;
  font-weight: 700;
  white-space: nowrap;
}
.term-btn.is-on .term-tag { background: rgba(255, 255, 255, 0.22); }
.plan-yearly {
  margin: -4px 0 10px;
  font-weight: 600;
  opacity: 0.85;
}


/* ============ the live demo ============ */
#how [hidden] { display: none !important; }
/* Redesigned as a shelf, after a laptop at 125% scaling proved the columns
   wrong. The old layout stood a tall empty drop zone beside a 2x2 stack of
   designs, and on a ~670px viewport that stack never fit however small the
   tiles were squeezed: the choice read as two designs and a scrollbar. Now
   the drop zone is a slim strip and the four designs sit in ONE row beneath
   it, each larger than the squeezed tiles were, and the whole thing fits a
   670px screen with room over. The stage still grows naturally once a photo
   or a finished look is in it. */
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 26px; }
.demo-stage { position: relative; background: #fff; border-radius: 18px; box-shadow: 0 12px 32px rgba(11, 51, 46, 0.12); padding: 12px; display: grid; place-items: center; }
.demo-drop { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 2px; align-items: center; text-align: left; padding: 18px 24px; border: 2px dashed rgba(11, 51, 46, 0.25); border-radius: 14px; cursor: pointer; width: 100%; }
.demo-drop svg { grid-row: 1 / span 2; width: 40px; height: 40px; color: var(--peacock, #0b332e); }
.demo-drop b { font-size: 1.05rem; }
.demo-drop span { font-size: 0.85rem; color: rgba(11, 51, 46, 0.62); max-width: 78ch; }
#demoPhoto { max-width: 100%; max-height: min(500px, 68vh); border-radius: 14px; display: block; }

/*
   One screen while she is trying it: designs on the left, the look on the
   right. The shelf is for arriving; the moment a photo is in the stage
   (which is exactly when #demoPhoto loses its hidden attribute), the busy
   strip was pushing the designs off the page, so the grid folds into two
   columns instead. 78vh on the photo is what makes the right side honest on
   a 125%-scaled laptop, where the whole viewport is about 670 CSS pixels.
   Browsers without :has simply keep the shelf, which still works.
*/
.demo-grid:has(#demoPhoto:not([hidden])) { grid-template-columns: 330px minmax(0, 1fr); align-items: start; }
.demo-grid:has(#demoPhoto:not([hidden])) .demo-stage { order: 2; }
.demo-grid:has(#demoPhoto:not([hidden])) .demo-rail { order: 1; }
.demo-grid:has(#demoPhoto:not([hidden])) .demo-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* At 150px wide the full product name is soup; one honest line with an
   ellipsis, and the full name is still on the button's data-name and in the
   result line once the look is made. */
.demo-grid:has(#demoPhoto:not([hidden])) .demo-design span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-busy { position: absolute; inset: 14px; border-radius: 14px; background: rgba(11, 51, 46, 0.82); color: #fff; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; }
.demo-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; animation: demospin 0.9s linear infinite; }
@keyframes demospin { to { transform: rotate(360deg); } }
.demo-note { font-size: 0.85rem; color: rgba(11, 51, 46, 0.65); margin: 10px 0 0; }
/* In flow, under the picture. It used to be pinned to the stage's bottom
   edge, which meant it lay ACROSS the photo the moment the photo filled the
   stage: the owner's first real render came back with its own caption
   printed over the hem, unreadable on both. The photo cap below leaves room
   for it inside one screen. */
.demo-stage .demo-note { text-align: center; margin: 10px 0 2px; padding: 0 18px; }
.demo-reset { position: absolute; top: 20px; right: 20px; border: 0; background: rgba(11, 51, 46, 0.78); color: #fff; font: inherit; font-size: 0.8rem; padding: 7px 12px; border-radius: 999px; cursor: pointer; }
.demo-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.demo-tab { flex: 1; border: 1px solid rgba(11, 51, 46, 0.25); background: transparent; font: inherit; font-weight: 600; padding: 9px 0; border-radius: 999px; cursor: pointer; color: inherit; }
.demo-tab.is-on { background: var(--peacock, #0b332e); border-color: var(--peacock, #0b332e); color: #fff; }
.demo-set { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.demo-design { border: 2px solid transparent; padding: 0; background: #fff; border-radius: 14px; overflow: hidden; cursor: pointer; font: inherit; text-align: left; box-shadow: 0 8px 20px rgba(11, 51, 46, 0.10); }
/*
   height:auto is load bearing, and it is not decoration.

   These images carry width="600" height="800" attributes so Lighthouse can see
   their dimensions. A browser turns those into a presentational hint of
   height:800px, and a presentational hint beats nothing at all: this rule set
   width and aspect-ratio but never height, so 800px won, aspect-ratio was
   ignored, and every tile rendered 237 wide by 800 tall. object-fit then
   cropped a tall ribbon out of each design.

   height:auto is the author saying no, which lets aspect-ratio govern again.
   Any img on this page that gains dimension attributes needs the same.
*/
.demo-design img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.demo-design span { display: block; padding: 8px 10px; font-size: 0.82rem; line-height: 1.3; }
.demo-design.is-on { border-color: var(--coral, #e8604c); }
.demo-design[disabled] { opacity: 0.55; cursor: wait; }
@media (max-width: 760px) {
  .demo-set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* A phone has no second column to give: the look goes back on top. */
  .demo-grid:has(#demoPhoto:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .demo-grid:has(#demoPhoto:not([hidden])) .demo-stage { order: 0; }
}


/* ============ the blog ============
   Articles borrow the page's own slabs and type; nothing here invents a new
   look. The measure is capped where running text stays readable. */
.inner.is-post { max-width: 760px; }
.post h1 { font-size: clamp(30px, 4.4vw, 44px); line-height: 1.12; margin: 6px 0 14px; }
.post h2 { font-size: clamp(21px, 2.6vw, 26px); margin: 30px 0 8px; }
.post p { font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 14px; }
.post .lede { font-size: 18.5px; color: var(--ink); }
.post p a, .post li a { color: var(--peacock); text-decoration: underline; text-underline-offset: 3px; }
.post-card, .post-card b, .post-card p, .post-card span { text-decoration: none; }
.post-cta { margin-top: 30px; }
.post-cta .btn { text-decoration: none; color: #fff; }
.post-related { background: var(--sunk, #eef4f2); border-radius: var(--r-lg); padding: 18px 22px; margin-top: 34px; }
.post-related b { font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; }
.post-related ul { margin: 8px 0 0; padding-left: 18px; }
.post-related li { margin-top: 6px; font-size: 15.5px; }
.post-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.post-card { background: var(--white); border-radius: var(--r-lg); padding: 22px 24px; text-decoration: none; color: inherit; box-shadow: 0 10px 26px rgba(11, 51, 46, 0.08); display: grid; gap: 8px; align-content: start; }
.post-card h2, .post-card b { font-family: var(--serif); font-size: 20px; line-height: 1.25; margin: 0; }
.post-card p { font-size: 15px; color: var(--ink-soft); margin: 0; }
.post-card span { font-size: 13px; color: var(--ink-faint); }
@media (max-width: 760px) { .post-list { grid-template-columns: minmax(0, 1fr); } }

/* Links inside running copy, site-wide. Left unstyled they came out browser
   blue the first time an article was linked from a lede. Buttons and cards
   carry their own classes and are untouched. */
.inner p a:not(.btn) { color: var(--peacock); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.on-peacock .inner p a:not(.btn), .slab.is-break .inner p a:not(.btn) { color: var(--coral-pale); }