/* Revivloom: a memory quilt. Every region is a fabric block on one module; every block edge carries a running stitch. */
:root {
  --indigo: #1E2B57;
  --indigo-deep: #16203F;
  --red: #A8232B;
  --butter: #EBC35B;
  --calico: #F1E9DA;
  --calico-2: #E6DCC7;
  --sage: #46603F;
  --ink: #1B1A1F;
  --ink-soft: #4A4540;
  --thread: #F6EFE2;
  --thread-dark: #3B3530;
  --error: #8E1F25;
  --display: "Zilla Slab", "Rockwell", Georgia, serif;
  --text: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --pad: clamp(22px, 3.2vw, 48px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --st-h-light: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%226%22%3E%3Cline x1=%222%22 y1=%223.4%22 x2=%2213%22 y2=%223.6%22 stroke=%22rgba(0,0,0,.35)%22 stroke-width=%223%22 stroke-linecap=%22round%22/%3E%3Cline x1=%2218%22 y1=%223.4%22 x2=%2226%22 y2=%223.6%22 stroke=%22rgba(0,0,0,.35)%22 stroke-width=%223%22 stroke-linecap=%22round%22/%3E%3Cline x1=%2231%22 y1=%223.4%22 x2=%2243%22 y2=%223.6%22 stroke=%22rgba(0,0,0,.35)%22 stroke-width=%223%22 stroke-linecap=%22round%22/%3E%3Cline x1=%222%22 y1=%222.6%22 x2=%2213%22 y2=%222.4%22 stroke=%22%23F6EFE2%22 stroke-width=%222.6%22 stroke-linecap=%22round%22/%3E%3Cline x1=%2218%22 y1=%222.6%22 x2=%2226%22 y2=%222.4%22 stroke=%22%23F6EFE2%22 stroke-width=%222.6%22 stroke-linecap=%22round%22/%3E%3Cline x1=%2231%22 y1=%222.6%22 x2=%2243%22 y2=%222.4%22 stroke=%22%23F6EFE2%22 stroke-width=%222.6%22 stroke-linecap=%22round%22/%3E%3Cline x1=%223.5%22 y1=%221.9%22 x2=%2211%22 y2=%221.8%22 stroke=%22rgba(255,255,255,.35)%22 stroke-width=%22.8%22 stroke-linecap=%22round%22/%3E%3Cline x1=%2219.5%22 y1=%221.9%22 x2=%2224%22 y2=%221.8%22 stroke=%22rgba(255,255,255,.35)%22 stroke-width=%22.8%22 stroke-linecap=%22round%22/%3E%3Cline x1=%2232.5%22 y1=%221.9%22 x2=%2241%22 y2=%221.8%22 stroke=%22rgba(255,255,255,.35)%22 stroke-width=%22.8%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --st-v-light: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%226%22 height=%2248%22%3E%3Cline x1=%223.4%22 y1=%223%22 x2=%223.6%22 y2=%2213%22 stroke=%22rgba(0,0,0,.35)%22 stroke-width=%223%22 stroke-linecap=%22round%22/%3E%3Cline x1=%223.4%22 y1=%2219%22 x2=%223.6%22 y2=%2228%22 stroke=%22rgba(0,0,0,.35)%22 stroke-width=%223%22 stroke-linecap=%22round%22/%3E%3Cline x1=%223.4%22 y1=%2233%22 x2=%223.6%22 y2=%2244%22 stroke=%22rgba(0,0,0,.35)%22 stroke-width=%223%22 stroke-linecap=%22round%22/%3E%3Cline x1=%222.6%22 y1=%223%22 x2=%222.4%22 y2=%2213%22 stroke=%22%23F6EFE2%22 stroke-width=%222.6%22 stroke-linecap=%22round%22/%3E%3Cline x1=%222.6%22 y1=%2219%22 x2=%222.4%22 y2=%2228%22 stroke=%22%23F6EFE2%22 stroke-width=%222.6%22 stroke-linecap=%22round%22/%3E%3Cline x1=%222.6%22 y1=%2233%22 x2=%222.4%22 y2=%2244%22 stroke=%22%23F6EFE2%22 stroke-width=%222.6%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --st-h-dark: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%226%22%3E%3Cline x1=%222%22 y1=%223.4%22 x2=%2213%22 y2=%223.6%22 stroke=%22rgba(0,0,0,.18)%22 stroke-width=%223%22 stroke-linecap=%22round%22/%3E%3Cline x1=%2218%22 y1=%223.4%22 x2=%2226%22 y2=%223.6%22 stroke=%22rgba(0,0,0,.18)%22 stroke-width=%223%22 stroke-linecap=%22round%22/%3E%3Cline x1=%2231%22 y1=%223.4%22 x2=%2243%22 y2=%223.6%22 stroke=%22rgba(0,0,0,.18)%22 stroke-width=%223%22 stroke-linecap=%22round%22/%3E%3Cline x1=%222%22 y1=%222.6%22 x2=%2213%22 y2=%222.4%22 stroke=%22%233B3530%22 stroke-width=%222.6%22 stroke-linecap=%22round%22/%3E%3Cline x1=%2218%22 y1=%222.6%22 x2=%2226%22 y2=%222.4%22 stroke=%22%233B3530%22 stroke-width=%222.6%22 stroke-linecap=%22round%22/%3E%3Cline x1=%2231%22 y1=%222.6%22 x2=%2243%22 y2=%222.4%22 stroke=%22%233B3530%22 stroke-width=%222.6%22 stroke-linecap=%22round%22/%3E%3Cline x1=%223.5%22 y1=%221.9%22 x2=%2211%22 y2=%221.8%22 stroke=%22rgba(255,255,255,.35)%22 stroke-width=%22.8%22 stroke-linecap=%22round%22/%3E%3Cline x1=%2219.5%22 y1=%221.9%22 x2=%2224%22 y2=%221.8%22 stroke=%22rgba(255,255,255,.35)%22 stroke-width=%22.8%22 stroke-linecap=%22round%22/%3E%3Cline x1=%2232.5%22 y1=%221.9%22 x2=%2241%22 y2=%221.8%22 stroke=%22rgba(255,255,255,.35)%22 stroke-width=%22.8%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --st-v-dark: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%226%22 height=%2248%22%3E%3Cline x1=%223.4%22 y1=%223%22 x2=%223.6%22 y2=%2213%22 stroke=%22rgba(0,0,0,.18)%22 stroke-width=%223%22 stroke-linecap=%22round%22/%3E%3Cline x1=%223.4%22 y1=%2219%22 x2=%223.6%22 y2=%2228%22 stroke=%22rgba(0,0,0,.18)%22 stroke-width=%223%22 stroke-linecap=%22round%22/%3E%3Cline x1=%223.4%22 y1=%2233%22 x2=%223.6%22 y2=%2244%22 stroke=%22rgba(0,0,0,.18)%22 stroke-width=%223%22 stroke-linecap=%22round%22/%3E%3Cline x1=%222.6%22 y1=%223%22 x2=%222.4%22 y2=%2213%22 stroke=%22%233B3530%22 stroke-width=%222.6%22 stroke-linecap=%22round%22/%3E%3Cline x1=%222.6%22 y1=%2219%22 x2=%222.4%22 y2=%2228%22 stroke=%22%233B3530%22 stroke-width=%222.6%22 stroke-linecap=%22round%22/%3E%3Cline x1=%222.6%22 y1=%2233%22 x2=%222.4%22 y2=%2244%22 stroke=%22%233B3530%22 stroke-width=%222.6%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --st-h-red: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%226%22%3E%3Cline x1=%222%22 y1=%223.4%22 x2=%2213%22 y2=%223.6%22 stroke=%22rgba(0,0,0,.25)%22 stroke-width=%223%22 stroke-linecap=%22round%22/%3E%3Cline x1=%2218%22 y1=%223.4%22 x2=%2226%22 y2=%223.6%22 stroke=%22rgba(0,0,0,.25)%22 stroke-width=%223%22 stroke-linecap=%22round%22/%3E%3Cline x1=%2231%22 y1=%223.4%22 x2=%2243%22 y2=%223.6%22 stroke=%22rgba(0,0,0,.25)%22 stroke-width=%223%22 stroke-linecap=%22round%22/%3E%3Cline x1=%222%22 y1=%222.6%22 x2=%2213%22 y2=%222.4%22 stroke=%22%23A8232B%22 stroke-width=%222.6%22 stroke-linecap=%22round%22/%3E%3Cline x1=%2218%22 y1=%222.6%22 x2=%2226%22 y2=%222.4%22 stroke=%22%23A8232B%22 stroke-width=%222.6%22 stroke-linecap=%22round%22/%3E%3Cline x1=%2231%22 y1=%222.6%22 x2=%2243%22 y2=%222.4%22 stroke=%22%23A8232B%22 stroke-width=%222.6%22 stroke-linecap=%22round%22/%3E%3Cline x1=%223.5%22 y1=%221.9%22 x2=%2211%22 y2=%221.8%22 stroke=%22rgba(255,255,255,.35)%22 stroke-width=%22.8%22 stroke-linecap=%22round%22/%3E%3Cline x1=%2219.5%22 y1=%221.9%22 x2=%2224%22 y2=%221.8%22 stroke=%22rgba(255,255,255,.35)%22 stroke-width=%22.8%22 stroke-linecap=%22round%22/%3E%3Cline x1=%2232.5%22 y1=%221.9%22 x2=%2241%22 y2=%221.8%22 stroke=%22rgba(255,255,255,.35)%22 stroke-width=%22.8%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --st-v-red: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%226%22 height=%2248%22%3E%3Cline x1=%223.4%22 y1=%223%22 x2=%223.6%22 y2=%2213%22 stroke=%22rgba(0,0,0,.25)%22 stroke-width=%223%22 stroke-linecap=%22round%22/%3E%3Cline x1=%223.4%22 y1=%2219%22 x2=%223.6%22 y2=%2228%22 stroke=%22rgba(0,0,0,.25)%22 stroke-width=%223%22 stroke-linecap=%22round%22/%3E%3Cline x1=%223.4%22 y1=%2233%22 x2=%223.6%22 y2=%2244%22 stroke=%22rgba(0,0,0,.25)%22 stroke-width=%223%22 stroke-linecap=%22round%22/%3E%3Cline x1=%222.6%22 y1=%223%22 x2=%222.4%22 y2=%2213%22 stroke=%22%23A8232B%22 stroke-width=%222.6%22 stroke-linecap=%22round%22/%3E%3Cline x1=%222.6%22 y1=%2219%22 x2=%222.4%22 y2=%2228%22 stroke=%22%23A8232B%22 stroke-width=%222.6%22 stroke-linecap=%22round%22/%3E%3Cline x1=%222.6%22 y1=%2233%22 x2=%222.4%22 y2=%2244%22 stroke=%22%23A8232B%22 stroke-width=%222.6%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scrollbar-color: var(--indigo) var(--calico-2); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--indigo); color: var(--thread); font: 400 19px/1.6 var(--text); -webkit-font-smoothing: antialiased; caret-color: var(--red); }
::selection { background: var(--butter); color: var(--ink); }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1.5px; }
:focus-visible { outline: 3px solid var(--butter); outline-offset: 3px; border-radius: 2px; }
.sheet :focus-visible, .fab-calico :focus-visible, .fab-butter :focus-visible, .fab-sack :focus-visible { outline-color: var(--indigo); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.04; letter-spacing: -.005em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 4.6vw, 4.3rem); }
h2 { font-size: clamp(2rem, 3.4vw, 3.1rem); }
h3 { font-size: 1.35rem; line-height: 1.2; }
p { margin: 0 0 1em; max-width: 36em; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 20; background: var(--butter); color: var(--ink); padding: 10px 14px; font-weight: 700; }
.skip:focus { left: 8px; }

/* Fabrics */
.fab-indigo { background-color: var(--indigo); color: var(--thread); }
.fab-red { background-color: var(--red); color: var(--thread); }
.fab-butter { background-color: var(--butter); color: var(--ink); }
.fab-calico { background-color: var(--calico); color: var(--ink); }
.fab-sage { background-color: var(--sage); color: var(--thread); }
.fab-gingham { background-color: var(--calico); color: var(--ink);
  background-image: linear-gradient(90deg, rgba(168,35,43,.62) 50%, transparent 50%), linear-gradient(rgba(168,35,43,.62) 50%, transparent 50%);
  background-size: 24px 24px; }
.fab-ticking { background-color: var(--calico); color: var(--ink);
  background-image: repeating-linear-gradient(90deg, transparent 0 13px, rgba(30,43,87,.32) 13px 15px, transparent 15px 19px, rgba(30,43,87,.32) 19px 20px, transparent 20px 34px); }
.fab-sack { background-color: var(--calico); color: var(--ink);
  background-image: radial-gradient(circle at 25% 30%, rgba(30,43,87,.22) 0 2.2px, transparent 2.8px), radial-gradient(circle at 72% 68%, rgba(168,35,43,.24) 0 2.2px, transparent 2.8px), radial-gradient(circle at 70% 22%, rgba(70,96,63,.22) 0 1.6px, transparent 2.2px);
  background-size: 26px 26px; }
.fab-chambray { background-color: #34477A; color: var(--thread);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 5px); }

/* The weave: real plain-weave cloth over every block, and pressed seams between blocks */
.block { position: relative; isolation: isolate; box-shadow: inset 0 0 0 1px rgba(0,0,0,.16), inset 0 0 22px rgba(0,0,0,.10); }
.block::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .85; mix-blend-mode: soft-light;
  background: url("/static/tex/weave.png") 0 0 / 256px 256px repeat; }

/* Running stitch along a block's edge: thread with body (light thread on dark fabric, dark thread on light) */
.stitch { --st-h: var(--st-h-light); --st-v: var(--st-v-light); }
.stitch.fab-butter, .stitch.fab-calico, .stitch.fab-gingham, .stitch.fab-ticking, .stitch.fab-sack, .status-card, .item, .summary { --st-h: var(--st-h-dark); --st-v: var(--st-v-dark); }
.stitch::after, .status-card::after, .item::after, .summary::after { content: ""; position: absolute; inset: 10px; pointer-events: none; z-index: 2; opacity: .9;
  background: var(--st-h) top left / 48px 6px repeat-x, var(--st-h) bottom left / 48px 6px repeat-x,
    var(--st-v) top left / 6px 48px repeat-y, var(--st-v) top right / 6px 48px repeat-y; }

/* A sewn-on fabric label: how states and verdicts print themselves */
.label { display: inline-flex; align-items: center; gap: 8px; font: 700 .9rem/1.1 var(--text); letter-spacing: .01em;
  padding: 9px 15px; background: var(--thread); color: var(--ink); position: relative;
  box-shadow: 0 1px 0 rgba(0,0,0,.18), 0 6px 14px -8px rgba(0,0,0,.45); }
.label::after { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; right: 4px; pointer-events: none; opacity: .55;
  background: linear-gradient(0deg, var(--thread-dark) 55%, transparent 0) left top / 2px 8px repeat-y, linear-gradient(0deg, var(--thread-dark) 55%, transparent 0) right top / 2px 8px repeat-y; }
.label.red { background: var(--red); color: var(--thread); }
.label.red::after { background: linear-gradient(0deg, var(--thread) 55%, transparent 0) left top / 2px 8px repeat-y, linear-gradient(0deg, var(--thread) 55%, transparent 0) right top / 2px 8px repeat-y; }
.label.butter { background: var(--butter); }
.label.sage { background: var(--sage); color: var(--thread); }
.label.sage::after { background: linear-gradient(0deg, var(--thread) 55%, transparent 0) left top / 2px 8px repeat-y, linear-gradient(0deg, var(--thread) 55%, transparent 0) right top / 2px 8px repeat-y; }

/* Buttons: a sewn patch of ink */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 700 1.12rem/1.15 var(--text);
  color: var(--butter); background: var(--ink); border: 0; border-radius: 5px; padding: 1.05em 1.55em; text-decoration: none; cursor: pointer;
  position: relative; box-shadow: 0 2px 0 rgba(0,0,0,.25), 0 14px 26px -16px rgba(0,0,0,.6); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.btn::after { content: ""; position: absolute; inset: 5px; border-radius: 3px; pointer-events: none; opacity: .5;
  background: linear-gradient(90deg, var(--butter) 55%, transparent 0) top left / 10px 1.5px repeat-x, linear-gradient(90deg, var(--butter) 55%, transparent 0) bottom left / 10px 1.5px repeat-x; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 2px 0 rgba(0,0,0,.25), 0 20px 30px -16px rgba(0,0,0,.65); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .55; cursor: progress; transform: none; }
.btn.light { background: var(--thread); color: var(--ink); }
.btn.light::after { background: linear-gradient(90deg, var(--ink) 55%, transparent 0) top left / 10px 1.5px repeat-x, linear-gradient(90deg, var(--ink) 55%, transparent 0) bottom left / 10px 1.5px repeat-x; opacity: .35; }
.btn-wide { width: 100%; }
.link-btn { background: none; border: 0; padding: 4px 0; font: 700 .95rem/1 var(--text); color: inherit; text-decoration: underline; cursor: pointer; }

/* Masthead: an indigo binding strip */
.masthead { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 18px var(--pad) 22px; background: var(--indigo); color: var(--thread); position: relative; }
.masthead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 6px; opacity: .75; background: var(--st-h-light) left / 48px 6px repeat-x; }
.wordmark { font: 700 2rem/1 var(--display); color: var(--thread); text-decoration: none; display: inline-flex; align-items: center; gap: 12px; }
.wordmark svg { width: 32px; height: 32px; flex: none; }
.mast-nav { display: flex; align-items: center; gap: 26px; font-size: 1.02rem; }
.mast-nav a { text-decoration: none; color: var(--thread); }
.mast-nav a:hover { text-decoration: underline; }
.mast-nav .mast-cta { background: var(--butter); color: var(--ink); font-weight: 700; padding: 11px 16px; border-radius: 4px; }
.mast-nav .mast-cta:hover { text-decoration: none; background: #F2D07A; }

/* ===== Home: the hero quilt ===== */
.hero-quilt { --hero-h: clamp(660px, calc(100vh - 78px), 980px); display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1.45fr) minmax(0, .85fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto; height: var(--hero-h); }
.hq-words { grid-column: 1; grid-row: 1 / 3; padding: calc(var(--pad) + 14px); display: flex; flex-direction: column; justify-content: center; gap: 22px; min-height: 0; }
.hq-words h1 { font-size: clamp(2.4rem, 3.6vw, 3.6rem); max-width: 9.5em; }
.hq-words p { font-size: 1.14rem; color: #F8E3DD; margin: 0; max-width: 26em; }
.hq-plate { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 34px var(--pad) 26px; min-height: 0; }
.hq-side-a { grid-column: 3; grid-row: 1; padding: 30px; display: grid; min-height: 0; overflow: hidden; }
.hq-side-a img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 20%; box-shadow: 0 10px 22px -12px rgba(0,0,0,.55); }
.hq-side-b { grid-column: 3; grid-row: 2; padding: 30px; display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow: hidden; }
.hq-side-b img { width: 100%; flex: 1 1 auto; min-height: 0; height: 0; object-fit: cover; object-position: 50% 14%; box-shadow: 0 10px 22px -12px rgba(0,0,0,.55); }
.hq-side-b p { font: 500 1.12rem/1.35 var(--display); margin: 0; }
.hq-act { grid-column: 1 / 3; grid-row: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; padding: 30px calc(var(--pad) + 14px); }
.hq-act p { margin: 0; font-size: 1.08rem; max-width: 24em; }
.hq-price { grid-column: 3; grid-row: 3; display: grid; place-content: center; text-align: center; padding: 24px; }
.hq-price strong { display: block; font: 700 2.1rem/1 var(--display); color: var(--indigo); }
.hq-price span { font-size: 1rem; }

/* The glass plate, the seam and the living moment */
.plate { position: relative; width: min(100%, 520px, calc((var(--hero-h) - 290px) * .735)); aspect-ratio: 1029 / 1400; flex: none;
  background: #2b2b2b; box-shadow: 0 2px 0 rgba(0,0,0,.2), 0 28px 50px -24px rgba(0,0,0,.65);
  transition: transform 1.2s var(--ease-out), box-shadow 1.2s var(--ease-out); touch-action: pan-y; user-select: none; }
.plate img, .plate video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plate .damaged { clip-path: inset(0 0 0 var(--seam, 0%)); }
.plate .living { opacity: 0; transition: opacity .8s ease; }
.plate.show-video .living { opacity: 1; }
.plate { transform-origin: 50% 92%; }
.plate.lifted { transform: scale(1.16); box-shadow: 0 2px 0 rgba(0,0,0,.2), 0 60px 90px -30px rgba(0,0,0,.75); z-index: 5; }
.hq-plate.breaking { z-index: 10; }
.hq-plate.breaking::after { opacity: .15; transition: opacity .8s ease; }
.seam { position: absolute; top: -10px; bottom: -10px; left: var(--seam, 0%); width: 3px; margin-left: -1.5px; pointer-events: none; z-index: 3;
  background: linear-gradient(0deg, var(--red) 58%, transparent 0) top / 3px 13px repeat-y; filter: drop-shadow(0 0 1.5px rgba(255,255,255,.95)); transition: opacity .6s ease; }
.seam svg { position: absolute; left: -9px; top: var(--needle, 42%); width: 21px; height: 74px; }
.plate.at-rest .seam, .plate.show-video .seam { opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
@media (prefers-reduced-motion: reduce) { .seam, .plate { transition: none !important; } }
.plate.comparing .seam { opacity: 1; visibility: visible; transition: none; }
.plate.show-video .seam { display: none; }
.posing .plate, .posing .plate * { transition: none !important; }
.plate .slider { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 4; -webkit-appearance: none; appearance: none; }
.plate:has(.slider:focus-visible) { outline: 3px solid var(--indigo); outline-offset: 4px; }
.plate-caption { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 16px; margin-top: 22px; max-width: 520px; text-align: center; }
.plate-caption .label { transform: rotate(-1.2deg); }
.plate-caption button { font: 700 1rem/1 var(--text); background: none; border: 0; color: var(--ink); text-decoration: underline; cursor: pointer; padding: 8px 2px; }

/* ===== Sections: each a row of the quilt ===== */
.row { display: grid; }
.row > .block { padding: calc(var(--pad) + 18px) calc(var(--pad) + 14px); }
.head h2 { margin-bottom: .45em; max-width: 15em; }
.row > .block.head { padding-top: calc(var(--pad) + 6px); padding-bottom: calc(var(--pad) + 2px); }
.head p:last-child { margin-bottom: 0; }
.head p { font-size: 1.12rem; max-width: 36em; }

/* How we check: one original tied by thread to each version */
.check-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: clamp(20px, 3vw, 44px); align-items: start; margin-top: 30px; }
.versions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 30px); }
.swatch { margin: 0; }
.swatch .pic { background: var(--thread); padding: 10px; box-shadow: 0 10px 22px -14px rgba(0,0,0,.55); }
.swatch img { width: 100%; aspect-ratio: 480 / 355; object-fit: cover; object-position: top; }
.swatch figcaption { margin-top: 14px; display: grid; gap: 10px; justify-items: start; }
.swatch figcaption span { font-size: 1rem; line-height: 1.45; }
.swatch.unpicked img { filter: saturate(.75) brightness(.9); }
.check-board { position: relative; }
.threads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.threads path { fill: none; stroke-linecap: round; }
.threads .sewn-shadow { stroke: rgba(0,0,0,.25); stroke-width: 3.6; stroke-dasharray: 10 7; }
.threads .sewn { stroke: var(--red); stroke-width: 3; stroke-dasharray: 10 7; }
.threads .cut { stroke: #6A6158; stroke-width: 2.6; stroke-dasharray: 10 7; }
.threads .fray { stroke: #6A6158; stroke-width: 1.3; }
.swatch .pic { position: relative; z-index: 2; }
.versions { padding-top: 54px; }
.check-note { margin: 32px 0 0; font-size: 1.08rem; }

/* Gallery of mended photos */
.gallery { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.7fr); }
.gallery .head { grid-column: 1 / -1; }
.gallery .ex { display: flex; flex-direction: column; gap: 18px; }
.compare { position: relative; overflow: hidden; background: #ccc; touch-action: pan-y; user-select: none; box-shadow: 0 12px 26px -16px rgba(0,0,0,.6); }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare .before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare .handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; pointer-events: none;
  background: linear-gradient(0deg, var(--red) 58%, transparent 0) top / 3px 13px repeat-y; filter: drop-shadow(0 0 1.5px #fff); }
.compare .slider { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.compare:has(.slider:focus-visible) { outline: 3px solid var(--indigo); outline-offset: 3px; }
.compare .sizer { position: relative; visibility: hidden; }
.ex-text h3 { margin-bottom: .3em; }
.ex-text p { font-size: 1rem; margin: 0; }
.version-switch { display: flex; gap: 6px; }
.version-switch button { font: 700 .92rem/1 var(--text); padding: 10px 13px; border-radius: 4px; border: 1.5px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
.version-switch button[aria-pressed="true"] { background: var(--ink); color: var(--butter); border-color: var(--ink); }

/* Photos people bring us */
.moments { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.moments .head { grid-column: 1 / -1; }
.moments .moment { min-height: 230px; display: flex; flex-direction: column; justify-content: flex-end; }
.moments h3 { font-size: clamp(1.35rem, 1.7vw, 1.6rem); }
.moments p { font-size: 1rem; margin: .5em 0 0; }

/* Living photo */
.living-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.living-row .copy { display: flex; flex-direction: column; justify-content: center; }
.living-row .copy .btn { align-self: flex-start; margin-top: 12px; }
.living-row .clip { display: grid; place-items: center; }
.clip-frame { position: relative; width: min(100%, 400px); aspect-ratio: 1029 / 1402; background: #222; box-shadow: 0 26px 46px -22px rgba(0,0,0,.7); }
.clip-frame video, .clip-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip-frame .btn { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); white-space: nowrap; }
.clip-frame .btn:hover { transform: translateX(-50%) translateY(-2px); }

/* How it works */
.steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps .head { grid-column: 1 / -1; }
.steps .step { display: flex; flex-direction: column; gap: 10px; }
.steps .n { font: 700 3.4rem/1 var(--display); }
.steps p { font-size: 1.02rem; margin: 0; }

/* Frames */
.frames { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.frame-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(14px, 2vw, 26px); align-items: end; }
.frame { margin: 0; text-align: center; }
.frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; padding: 10%; background: #FBFAF5; border: 11px solid #1C1C1A; box-shadow: 0 16px 28px -16px rgba(0,0,0,.6); }
.frame.white img { border-color: #F7F6F1; outline: 1px solid #CFC7B6; }
.frame figcaption { margin-top: 14px; }
.frame.landscape img { aspect-ratio: 5 / 4; }

/* Prices: tags pinned to bolts of fabric */
.prices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prices .head { grid-column: 1 / -1; }
.tag-list { list-style: none; margin: 0; padding: 0; display: grid; }
.tag-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 2px dotted currentColor; }
.tag-list li:last-child { border-bottom: 0; }
.tag-list strong { font: 700 1.5rem/1 var(--display); white-space: nowrap; }
.prices h3 { margin-bottom: 10px; }

/* Promise, questions, close */
.promise { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.promise h2 { max-width: 12em; }
.faq details { border-bottom: 2px dotted rgba(27,26,31,.35); max-width: 50em; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 18px; padding: 20px 0; font: 700 1.22rem/1.3 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2222%22 height=%2222%22%3E%3Cg stroke-linecap=%22round%22 stroke=%22%23A8232B%22 stroke-width=%222.6%22%3E%3Cline x1=%2211%22 y1=%222.5%22 x2=%2211%22 y2=%228%22/%3E%3Cline x1=%2211%22 y1=%2214%22 x2=%2211%22 y2=%2219.5%22/%3E%3Cline x1=%222.5%22 y1=%2211%22 x2=%228%22 y2=%2211%22/%3E%3Cline x1=%2214%22 y1=%2211%22 x2=%2219.5%22 y2=%2211%22/%3E%3C/g%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%221.6%22 fill=%22%231B1A1F%22/%3E%3C/svg%3E") center / 22px 22px no-repeat; }
.faq details[open] summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2222%22 height=%2222%22%3E%3Cg stroke-linecap=%22round%22 stroke=%22%23A8232B%22 stroke-width=%222.6%22%3E%3Cline x1=%222.5%22 y1=%2211%22 x2=%228%22 y2=%2211%22/%3E%3Cline x1=%2214%22 y1=%2211%22 x2=%2219.5%22 y2=%2211%22/%3E%3C/g%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%221.6%22 fill=%22%231B1A1F%22/%3E%3C/svg%3E"); }
.faq details p { font-size: 1.04rem; }
.closing { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.closing h2 { font-size: clamp(2.3rem, 4vw, 3.6rem); max-width: 11em; }
.closing .block:last-child { display: grid; place-items: center; }

/* Footer: the binding */
.foot { background: var(--indigo-deep); color: var(--thread); padding: 48px var(--pad) 40px; position: relative; font-size: .98rem; }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 6px; opacity: .7; background: var(--st-h-light) left / 48px 6px repeat-x; }
.foot-inner { max-width: 1240px; display: grid; gap: 12px; }
.foot-brand { font: 700 1.5rem/1 var(--display); margin: 0; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot-note { font-size: .9rem; color: #C6CEEC; max-width: 52em; margin: 0; }

/* ===== Working pages (builder, order, policies): calico ground, same stitches ===== */
body.sheet-body { background: var(--calico); color: var(--ink); }
body.sheet-body .foot { margin-top: 40px; }
.sheet { background: var(--calico); color: var(--ink); min-height: 60vh; }
.page { max-width: 820px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--pad); }
.page h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); margin-bottom: .5em; }
.page h2 { font-size: 1.6rem; margin: 1.6em 0 .5em; }
.page .lead { font-size: 1.2rem; }
.page ul { padding-left: 1.2em; }
.status-card { position: relative; background: #FBF7EE; padding: 26px 30px; margin: 22px 0; box-shadow: 0 10px 24px -18px rgba(0,0,0,.45); }
.status-card p:last-child { margin-bottom: 0; }
.progress { height: 8px; overflow: hidden; margin: 18px 0 8px; background: repeating-linear-gradient(90deg, var(--calico-2) 0 9px, transparent 9px 14px); }
.progress span { display: block; height: 100%; width: 38%; background: repeating-linear-gradient(90deg, var(--red) 0 9px, transparent 9px 14px); animation: sew 1.8s ease-in-out infinite; }
@keyframes sew { 0% { transform: translateX(-100%); } 100% { transform: translateX(270%); } }
@media (prefers-reduced-motion: reduce) { .progress span { animation: none; width: 100%; opacity: .6; } }
.form-error { color: var(--error); background: #F7E1DA; padding: 12px 14px; font: 400 1rem/1.45 var(--text); }
.fine { font-size: .92rem; color: var(--ink-soft); }
.downloads { list-style: none; padding: 0; margin: 0; }
.downloads li { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 13px 0; border-bottom: 2px dotted rgba(27,26,31,.25); }
.downloads a { font-weight: 700; white-space: nowrap; }
.result-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 22px 0; }
.result-pair.three { grid-template-columns: repeat(3, 1fr); }
.result-pair figure { margin: 0; background: var(--thread); padding: 8px; box-shadow: 0 10px 22px -16px rgba(0,0,0,.55); }
.result-pair figcaption { font-size: .9rem; color: var(--ink-soft); margin-top: 6px; }
.order-item { position: relative; padding-top: 30px; margin-top: 30px; }
.order-item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; opacity: .6; background: var(--st-h-dark) left / 48px 6px repeat-x; }
.order-item h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 .3em; font-size: 1.5rem; }
.files-toggle summary { cursor: pointer; font-weight: 700; padding: 10px 0; }
.living-result { margin: 18px 0; }
.living-result video { width: 100%; max-width: 340px; box-shadow: 0 14px 26px -16px rgba(0,0,0,.6); }

/* Builder */
.builder { max-width: 1280px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) var(--pad) 90px;
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(26px, 4vw, 52px); align-items: start; }
.builder h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.builder-lede { font-size: 1.12rem; margin-top: .5em; }
.drop { position: relative; display: grid; place-items: center; min-height: 190px; text-align: center; padding: 28px; cursor: pointer; background: #FBF7EE; transition: background .2s ease; }
.drop::after { content: ""; position: absolute; inset: 8px; pointer-events: none;
  background: var(--st-h-red) top left / 48px 6px repeat-x, var(--st-h-red) bottom left / 48px 6px repeat-x,
    var(--st-v-red) top left / 6px 48px repeat-y, var(--st-v-red) top right / 6px 48px repeat-y; }
.drop:hover, .drop.over { background: #FFF; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop:has(input:focus-visible) { outline: 3px solid var(--indigo); outline-offset: 3px; }
.drop-empty { font: 700 1.25rem/1.4 var(--display); }
.drop-empty small { display: block; font: 400 .95rem/1.5 var(--text); color: var(--ink-soft); margin-top: 6px; }
.items { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 26px; }
.item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; background: #FBF7EE; padding: 26px; box-shadow: 0 12px 26px -20px rgba(0,0,0,.5); }
.upload-ph { list-style: none; padding: 20px 24px; background: #FBF7EE; }
.item-media .plain { width: 100%; }
.item-wait { display: grid; align-content: center; justify-items: start; gap: 12px; min-height: 240px; background: var(--calico-2); padding: 22px; }
.wait-text { margin: 0; font-size: 1rem; }
.item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.item-note { font-size: .95rem; color: var(--ink-soft); margin: 8px 0 14px; }
.opt { display: flex; gap: 12px; align-items: flex-start; padding: 15px 0; border-top: 2px dotted rgba(27,26,31,.22); cursor: pointer; font-size: 1.04rem; }
.opt input { width: 22px; height: 22px; margin-top: 3px; accent-color: var(--red); flex: none; }
.opt em { font-style: normal; font-weight: 700; }
.opt small { display: block; font-size: .92rem; color: var(--ink-soft); margin-top: 2px; }
.opt-select { display: grid; gap: 8px; padding: 15px 0 6px; border-top: 2px dotted rgba(27,26,31,.22); font-weight: 700; font-size: 1rem; }
select, input[type=email], input[type=text], .shipping input { font: 400 1.05rem/1.3 var(--text); padding: 13px; border: 1.5px solid #8E8578; border-radius: 4px; background: #fff; color: var(--ink); width: 100%; }
select:focus-visible, input:focus-visible { outline: 3px solid var(--indigo); outline-offset: 1px; }
.print-more { display: grid; gap: 10px; margin-top: 10px; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button { font: 400 .98rem/1 var(--text); padding: 12px 13px; border: 1.5px solid #8E8578; background: #fff; border-radius: 4px; cursor: pointer; color: var(--ink); }
.seg button[aria-checked="true"] { border-color: var(--ink); background: var(--ink); color: var(--butter); font-weight: 700; }
.summary { position: sticky; top: 22px; padding: 30px; background: #FBF7EE; box-shadow: 0 12px 26px -20px rgba(0,0,0,.5); }
.summary h2 { font-size: 1.7rem; margin-bottom: .5em; }
.lines { list-style: none; padding: 0; margin: 0; font-size: 1rem; }
.lines li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 2px dotted rgba(27,26,31,.25); }
.saved { font-size: .95rem; margin: 10px 0 0; font-weight: 700; color: var(--sage); }
.total { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 0 22px; font: 700 1.3rem/1 var(--display); }
.total strong { font-size: 2rem; }
.field-label { display: block; font-weight: 700; margin-bottom: 8px; }
.shipping { border: 0; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.shipping legend { font-weight: 700; margin-bottom: 6px; }
.shipping label { display: grid; gap: 5px; font-size: .92rem; }
.row3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.summary .btn { margin-top: 18px; }

/* Narrow screens: the quilt folds into one column of blocks */
@media (max-width: 1080px) {
  .hero-quilt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; height: auto; }
  .hq-side-a, .hq-side-b { min-height: 300px; }
  .hq-side-b img { height: auto; aspect-ratio: 4 / 3; flex: none; }
  .hq-words, .hq-plate, .hq-act, .hq-price { grid-column: 1 / -1; grid-row: auto; }
  .hq-side-a, .hq-side-b { grid-column: auto; grid-row: auto; }
  .plate { width: min(100%, 500px); }
  .hq-plate { padding: 40px var(--pad) 30px; }
  .moments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prices { grid-template-columns: 1fr; }
  .builder { grid-template-columns: 1fr; }
  .summary { position: relative; top: 0; }
  .mast-nav a:not(.mast-cta) { display: none; }
}
@media (max-width: 760px) {
  body { font-size: 18px; }
  .gallery, .living-row, .frames, .promise, .closing, .check-board { grid-template-columns: 1fr; }
  .versions, .moments, .steps { grid-template-columns: 1fr; }
  .versions { padding-top: 0; padding-left: 30px; }
  .check-board > .swatch { margin-left: 30px; }
  .moments .moment { min-height: 0; }
  .hero-quilt { grid-template-columns: 1fr; }
  .hq-side-a { display: none; }
  .plate.lifted { transform: translateY(-62px) scale(1.03); }
  .hq-side-b { min-height: 0; }
  .hq-words { order: 1; } .hq-plate { order: 2; } .hq-act { order: 3; } .hq-price { order: 4; } .hq-side-b { order: 5; }
  .hq-side-b { flex-direction: row; align-items: center; }
  .hq-side-b img { width: 42%; }
  .item { grid-template-columns: 1fr; }
  .result-pair, .result-pair.three { grid-template-columns: 1fr; }
  .stitch::after { inset: 8px; }
  .row > .block { padding: 42px 26px; }
  .wordmark { font-size: 1.6rem; }
}

/* Launch-test stats table */
.stats { border-collapse: collapse; width: 100%; font-size: .95rem; background: #FBF7EE; }
.stats th, .stats td { text-align: right; padding: 10px 12px; border-bottom: 2px dotted rgba(27,26,31,.22); white-space: nowrap; }
.stats th:first-child, .stats td:first-child { text-align: left; }
.stats thead th, .stats tfoot th { font-weight: 700; }