/* HoopReady — "Linen & Spec" (redesign directions 01 + 05, redesign/pilot).
   Linen, serif and real thread carry the feeling (hero, steps, questions); white graph paper, monospaced
   numbers and coral dimension lines carry the evidence (the free check, pricing, every order page).
   System fonts only, no dependencies, and every page is readable with JavaScript off. */

:root {
  --linen: #f1eadc; --linen-2: #e8dfcd; --paper: #fcfbf7;
  --ink: #1d2230; --ink-2: #454a58; --muted: #7a7466; --rule: #d9d2c3;
  --coral: #f0512b; --coral-2: #d9401b; --saffron: #f5b21d; --wood: #c89a62; --green: #2f8a57; --amber: #8a5a00;
  --grid-major: rgba(64, 104, 140, .14); --grid-minor: rgba(64, 104, 140, .07);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --wrap: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font: 17px/1.62 var(--sys); -webkit-font-smoothing: antialiased; }
a { color: var(--coral-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; }
.mono { font-family: var(--mono); font-size: .92em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 6px; }

/* ---------- surfaces ---------- */
/* The linen lives on the body so sections never show a seam between them; .linen marks a section that sits on it. */
body {
  background-color: var(--linen);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .16 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, rgba(110, 86, 52, .06) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(110, 86, 52, .05) 0 1px, transparent 1px 3px);
}
.linen { background: transparent; }
.graph {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
  background-position: -1px -1px;
}

/* ---------- header and footer ---------- */
.bar { display: flex; align-items: center; gap: 20px; padding: 12px max(26px, calc((100vw - var(--wrap)) / 2)); position: sticky; top: 0; z-index: 20;
  background: rgba(241, 234, 220, .82); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); }
.bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(200, 154, 98, .75) 0 9px, transparent 9px 15px); opacity: .7; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 600 23px/1 var(--serif); letter-spacing: -.01em; }
.brand img { width: 40px; height: auto; transition: transform .8s var(--ease); }
.brand:hover img { transform: rotate(-14deg); }
.bar nav { margin-left: auto; display: flex; gap: 22px; align-items: center; font-size: 15px; }
.bar nav a { color: var(--ink); text-decoration: none; position: relative; }
.bar nav a:not(.cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--coral) 0 6px, transparent 6px 10px); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.bar nav a:not(.cta):hover::after { transform: scaleX(1); }
.bar .cta { background: var(--coral); color: #fff; padding: 9px 16px; border-radius: 999px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 18px -10px var(--coral); }
/* the sign-out form sits in the nav and must read like its neighbours */
.inline { display: inline; margin: 0; }
button.link { background: none; border: 0; padding: 0; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; }
button.link:hover { text-decoration: underline; }
.foot { position: static; color: var(--muted); font-size: 14px; background: var(--linen-2); margin-top: 40px; }
.foot::after { top: 0; bottom: auto; }
.foot nav a { color: var(--muted); }

/* ---------- page frame ----------
   The landing page is full-bleed: every section brings its own padding. Every other page is one column. */
main { display: block; }
main.wrap { max-width: 980px; margin: 0 auto; padding: 36px 24px 30px; }
section { position: relative; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
h1 { font-size: clamp(34px, 4.6vw, 62px); line-height: 1.05; margin: 0 0 16px; }
.hero h1 { font-size: clamp(42px, 5.4vw, 74px); line-height: 1.02; margin: 0; }
h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.1; margin: 38px 0 12px; }
h3 { font-size: 21px; line-height: 1.2; margin: 24px 0 8px; }
.eyebrow { font: 600 12px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--coral-2); margin: 0 0 16px; }
.lede { font-size: 19px; color: var(--ink-2); max-width: 620px; }
.lede b { color: var(--ink); font-weight: 600; background: linear-gradient(transparent 62%, rgba(245, 178, 29, .38) 62%); }
.fine { color: var(--muted); font-size: 14px; max-width: 620px; }
.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 22px 0; }
.crumbs { color: var(--muted); font-size: 13px; font-family: var(--mono); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
p { max-width: 70ch; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 13px 22px; font: 600 16px/1 var(--sys);
  text-decoration: none; color: var(--ink); border: 1.5px solid var(--ink); background: transparent; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; }
.btn.go { background: var(--coral); border-color: var(--coral); color: #fff; box-shadow: 0 14px 26px -14px var(--coral-2); position: relative; overflow: hidden; }
.btn.go::after { content: ""; position: absolute; inset: 5px; border-radius: 999px; border: 1.5px dashed rgba(255, 255, 255, .55); pointer-events: none; }
.btn.go:hover { box-shadow: 0 18px 30px -14px var(--coral-2); }
.btn.quiet { border-color: transparent; padding-left: 6px; padding-right: 6px; text-decoration: underline; text-decoration-style: dashed; text-decoration-color: var(--coral); text-underline-offset: 6px; }
.btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.btn:active { transform: scale(.97); }

/* ---------- forms ---------- */
label { display: block; font: 600 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; }
input, select, textarea { display: block; width: 100%; margin-top: 6px; font: 500 15px var(--sys); color: var(--ink);
  background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; text-transform: none; letter-spacing: 0; }
input[type=number], input[type=file] { font-family: var(--mono); }
input[type=range] { accent-color: var(--coral); padding: 0; border: 0; background: none; }
textarea { resize: vertical; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin: 18px 0; }
/* A .fields form holds fields side by side, but its headings, textareas, buttons and notes are not fields:
   they take the whole row, or a heading ends up in one column and its own textarea in the next. */
.fields > :not(label) { grid-column: 1 / -1; }
.fields > h2, .fields > h3 { margin: 6px 0 0; }
.fields > textarea { margin-top: 0; }
.width-row { display: grid; grid-template-columns: 1fr 88px; gap: 12px; align-items: center; }
.cf-turnstile:empty { display: none; }

/* the free check's file drop */
.drop { position: relative; display: grid; place-items: center; text-align: center; gap: 4px; padding: 34px 20px; border-radius: 16px; cursor: pointer;
  background: rgba(255, 255, 255, .72); border: 2px dashed rgba(240, 81, 43, .55); text-transform: none; letter-spacing: 0; font: inherit;
  transition: background .25s, border-color .25s, transform .25s var(--ease); }
.drop:hover, .drop.over { background: #fff; border-color: var(--coral); }
.drop.over { transform: scale(1.015); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.drop-icon { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--coral); position: relative; margin-bottom: 6px; }
.drop-icon::before { content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 2px; margin-left: -1px; background: repeating-linear-gradient(var(--coral) 0 4px, transparent 4px 7px); }
.drop-icon::after { content: ""; position: absolute; left: 50%; top: 9px; width: 10px; height: 10px; margin-left: -5px; border-left: 2px solid var(--coral); border-top: 2px solid var(--coral); transform: rotate(45deg); }
.drop-title { font-weight: 600; font-size: 16px; color: var(--ink); }
.drop-hint { color: var(--muted); font-size: 14px; }
.drop-hint u { text-decoration-color: var(--coral); text-decoration-style: dashed; text-underline-offset: 4px; }
.drop-file { font-size: 12.5px; color: var(--coral-2); margin-top: 6px; }

/* ---------- paper: the sheet (landing) and the card (every other page) ---------- */
.sheet-wrap { padding: 40px max(26px, calc((100vw - var(--wrap)) / 2)) 70px; }
.sheet { position: relative; border-radius: 4px; padding: 46px 48px 40px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 30px 60px -40px rgba(60, 40, 10, .55), 0 0 0 1px rgba(120, 100, 70, .12); }
.sheet::before { content: ""; position: absolute; top: -10px; left: 50%; width: 120px; height: 22px; transform: translateX(-50%) rotate(-1.5deg);
  background: rgba(245, 178, 29, .55); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.sheet-head { max-width: 640px; margin-bottom: 26px; }
.sheet-head h2 { margin-top: 0; }
.sheet-head p:not(.eyebrow) { color: var(--ink-2); margin: 0; }

/* background-color, not the shorthand: .card.graph keeps the grid .graph paints */
.card { position: relative; background-color: rgba(252, 251, 247, .82); border-radius: 4px; padding: 24px 26px; margin: 28px 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .03), 0 22px 44px -38px rgba(60, 40, 10, .6), 0 0 0 1px rgba(120, 100, 70, .16); }
.card.graph { background-color: var(--paper); }
.card h2, .card h3 { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
/* a card that carries a message rather than a panel of facts */
.card.note { border-left: 3px solid var(--wood); box-shadow: none; background-color: rgba(252, 251, 247, .7); }
.card.note.warn { border-left-color: var(--coral); color: inherit; }

/* ---------- tables, lists, definitions ---------- */
table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
th { text-align: left; color: var(--muted); font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 9px 10px; border-bottom: 1px solid var(--rule); }
td { padding: 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
ol, ul.rules { padding-left: 20px; }
ol li, ul.rules li { margin: 10px 0; }
dl dt { font: 600 19px/1.3 var(--serif); margin-top: 20px; }
dl dd { margin: 6px 0 0; color: var(--ink-2); }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1.02fr .98fr; gap: 40px; align-items: center;
  padding: 70px max(26px, calc((100vw - var(--wrap)) / 2)) 90px;
  background: radial-gradient(1000px 560px at 22% 0%, rgba(255, 255, 255, .5), transparent 70%); }
.runstitch { display: block; width: min(100%, 520px); height: 40px; margin: 14px 0 6px; overflow: visible; }
.rs-thread { fill: none; stroke: var(--coral); stroke-width: 4.2; stroke-linecap: round; stroke-dasharray: 15 9; filter: drop-shadow(0 1.5px 0 rgba(120, 40, 10, .25)); }
.rs-reveal { fill: none; stroke: #fff; stroke-width: 20; stroke-dasharray: 1; stroke-dashoffset: var(--rs, 1); }
.rs-needle { opacity: 0; transition: opacity .3s; }
.rs-needle.on { opacity: 1; }
.rs-needle line { stroke: #8d8f96; stroke-width: 2.6; stroke-linecap: round; }
.rs-needle ellipse { fill: none; stroke: #6c6e75; stroke-width: 1.2; }

.bench { margin: 0; }
.bench-in { position: relative; aspect-ratio: 1; width: 100%; max-width: 580px; margin-left: auto; }
.art-card { position: absolute; left: 0; top: 47%; width: 40%; background: #fff; padding: 9px 9px 26px; transform: rotate(-6deg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 18px 30px -18px rgba(60, 40, 10, .55); z-index: 1; transition: transform .6s var(--ease); }
.art-card img { display: block; }
.art-card span { position: absolute; left: 10px; bottom: 6px; font: 11px var(--mono); color: var(--muted); }
.art-card:hover { transform: rotate(-3deg) translateY(-4px); }
/* The hoop is a photo keyed out of chroma green. The fabric circle inside it is measured there: centre
   --fx/--fy and the patch radius --pr, as fractions of the square. The stitch simulation lies on it. */
.hoop { position: absolute; left: 30%; top: 10%; width: 68%; aspect-ratio: 1; z-index: 2; --fx: .4974; --fy: .5216; --pr: .334;
  filter: drop-shadow(0 4px 4px rgba(60, 35, 10, .22)) drop-shadow(0 26px 24px rgba(60, 35, 10, .28));
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }
.hoop-photo { width: 100%; height: 100%; display: block; }
.hoop .patch { position: absolute; left: calc((var(--fx) - var(--pr)) * 100%); top: calc((var(--fy) - var(--pr)) * 100%); width: calc(var(--pr) * 200%); aspect-ratio: 1;
  filter: drop-shadow(0 1px 1px rgba(40, 25, 5, .45)) drop-shadow(0 3px 5px rgba(40, 25, 5, .16)); }
/* the simulation is rendered on a flat beige square and the patch fills it edge to edge: clip the corners away */
.hoop .patch img { width: 100%; height: 100%; clip-path: circle(49.4%); display: block; }
/* the photo's light falls from the upper left: give the patch the same */
.hoop .patch::after { content: ""; position: absolute; inset: .6%; border-radius: 50%; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .35), transparent 55%), radial-gradient(circle at 78% 82%, rgba(50, 30, 8, .35), transparent 60%); }

.spec { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.spec line, .spec path { fill: none; stroke: var(--coral); stroke-width: .32; stroke-linecap: round; stroke-linejoin: round; }
.spec .ext { stroke-dasharray: .8 .8; stroke-width: .22; }
.spec .sew, .spec .sew-head { stroke-width: .7; }
.spec .sew { stroke-dasharray: 1.8 1.1; }
.spec .ext, .spec .sew { opacity: 0; transition: opacity .6s .8s; }
.bench.drawn .ext { opacity: .7; } .bench.drawn .sew { opacity: 1; }
[data-draw] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.6, 0, .2, 1); }
.dim-label { position: absolute; left: 63.8%; top: 5%; transform: translate(-50%, -135%); font-size: 13px; color: var(--coral-2); background: var(--linen);
  padding: 0 6px; z-index: 4; opacity: 0; transition: opacity .5s .7s; }
.spec-tag { position: absolute; right: 0; top: 80%; margin: 0; background: var(--paper); border: 1px solid var(--rule); padding: 10px 12px 8px; font-size: 12.5px; z-index: 4;
  box-shadow: 0 16px 26px -20px rgba(60, 40, 10, .5); min-width: 210px; transform: translateY(8px); opacity: 0; transition: opacity .5s .9s, transform .6s .9s var(--ease); }
.spec-tag div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px dashed var(--rule); padding: 2px 0; }
.spec-tag div:last-child { border: 0; }
.spec-tag dt { color: var(--muted); font: inherit; margin: 0; }
.spec-tag dd { margin: 0; color: var(--coral-2); font-weight: 600; }
.bench figcaption { font: 12.5px/1.55 var(--mono); color: var(--muted); max-width: 520px; margin: 18px 0 0 auto; }
.bench.drawn [data-draw] { stroke-dashoffset: 0; }
.bench.drawn .dim-label { opacity: 1; }
.bench.drawn .spec-tag { opacity: 1; transform: none; }

/* ---------- the free check, drawn ---------- */
.check-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items: start; }
#check-out { display: block; }
.drawing { display: block; background: rgba(255, 255, 255, .55); border: 1.5px solid var(--ink); }
.draw-area { position: relative; height: 400px; padding-top: 40px; display: grid; place-items: center; border-bottom: 1.5px solid var(--ink); overflow: hidden; }
.draw-art { width: min(var(--art-w, 58%), 290px); aspect-ratio: 1; transition: width .35s var(--ease); }
.draw-art img { width: 100%; height: 100%; object-fit: contain; box-shadow: 0 0 0 1px rgba(29, 34, 48, .18), 0 14px 22px -16px rgba(0, 0, 0, .35); }
.draw-dim { position: absolute; top: 18px; left: 50%; width: min(var(--art-w, 58%), 290px); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; color: var(--coral-2); font-size: 13px; transition: width .35s var(--ease); }
.draw-dim i { flex: 1; height: 1.5px; background: var(--coral); position: relative; transform: scaleX(0); transition: transform .9s cubic-bezier(.6, 0, .2, 1); }
.draw-dim i:first-child { transform-origin: right; }
.draw-dim i:last-child { transform-origin: left; }
.draw-dim i::before { content: ""; position: absolute; top: -5px; width: 1.5px; height: 11px; background: var(--coral); }
.draw-dim i:first-child::before { left: 0; } .draw-dim i:last-child::before { right: 0; }
.drawing.drawn .draw-dim i { transform: none; }
.cross { position: absolute; width: 16px; height: 16px; }
.cross::before, .cross::after { content: ""; position: absolute; background: var(--ink); }
.cross::before { left: 7px; top: 0; width: 1.5px; height: 16px; } .cross::after { top: 7px; left: 0; height: 1.5px; width: 16px; }
.cross.tl { left: 14px; top: 14px; } .cross.br { right: 14px; bottom: 14px; }
.title-block { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 0; }
.title-block th, .title-block td { border-bottom: 1px solid var(--ink); border-right: 1px solid var(--ink); padding: 8px 10px; text-align: left; vertical-align: middle; }
.title-block tr > :last-child { border-right: 0; }
.title-block tr:last-child th, .title-block tr:last-child td { border-bottom: 0; }
.title-block th { font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; width: 22%; font-family: var(--mono); }
.title-block td { color: var(--ink); font-weight: 600; }
.title-block td em { font-style: normal; font-weight: 400; color: var(--muted); }
.draw-foot { border-top: 1px solid var(--ink); padding: 12px 14px; }
.draw-note { margin: 0; padding: 0; font-size: 14px; color: var(--ink-2); max-width: none; }
.draw-note.warn, .title-block td.warn { color: var(--coral-2); }
.draw-cta { margin: 14px 0 0; }
.warn { color: var(--coral-2); }
ul.warnings { list-style: none; padding: 0; margin: 0 0 8px; }
ul.warnings li { font-size: 14px; color: var(--coral-2); padding: 4px 0 4px 18px; position: relative; }
ul.warnings li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 8px; height: 1.5px; background: var(--coral); }

.swatches { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.swatches i, .swatch { width: 14px; height: 14px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.swatch { display: inline-block; vertical-align: -2px; margin-right: 3px; }

/* a status, wherever it appears: the free check's verdict and an order's state */
.verdict { display: inline-block; font: 600 11.5px/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  background: rgba(29, 34, 48, .07); color: var(--ink-2); }
.verdict.AUTO_REVIEW, .verdict.st-paid, .verdict.st-ready { background: rgba(47, 138, 87, .13); color: var(--green); }
.verdict.HUMAN, .verdict.st-draft, .verdict.st-prep_wait, .verdict.st-revision { background: rgba(245, 178, 29, .22); color: var(--amber); }
.verdict.st-queued, .verdict.st-running, .verdict.st-review { background: rgba(240, 81, 43, .12); color: var(--coral-2); }
.verdict.st-cancelled, .verdict.st-refunded { background: rgba(29, 34, 48, .07); color: var(--muted); text-decoration: line-through; }
h1 .verdict { vertical-align: middle; margin-left: 10px; }

/* ---------- steps ---------- */
.steps { padding: 80px max(26px, calc((100vw - var(--wrap)) / 2)) 70px; }
.steps-track { position: relative; margin-top: 34px; }
.steps-thread { position: absolute; left: 0; right: 0; top: 7px; width: 100%; height: 60px; overflow: visible; z-index: 2; pointer-events: none; }
.st-line { fill: none; stroke: var(--coral); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 13 9; vector-effect: non-scaling-stroke; }
.st-reveal { fill: none; stroke: #fff; stroke-width: 70; stroke-dasharray: 1; stroke-dashoffset: var(--st, 1); vector-effect: none; }
.steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; position: relative; }
.steps li { position: relative; background: #f7f1e5; padding: 62px 18px 20px; border-radius: 14px; font-size: 15px; color: var(--ink-2); margin: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 16px 28px -22px rgba(60, 40, 10, .55); transition: transform .45s var(--ease); }
.steps li::before { content: ""; position: absolute; inset: 7px; border: 1.5px dashed rgba(200, 154, 98, .9); border-radius: 9px; pointer-events: none; }
.steps li:hover { transform: translateY(-6px) rotate(-.6deg); }
.steps li b { display: block; color: var(--ink); font: 600 19px/1.2 var(--serif); margin-bottom: 6px; }
.steps .n { position: absolute; top: 20px; left: 18px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--paper); color: var(--coral-2); box-shadow: 0 0 0 1.5px var(--coral); z-index: 3; }

/* ---------- pricing plans ---------- */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; margin: 10px 0 22px; }
.plan { position: relative; display: flex; flex-direction: column; background: rgba(255, 255, 255, .82); border: 1px solid #cfd5dc; border-radius: 12px;
  padding: 22px 18px 18px; transition: opacity .9s var(--ease), transform .9s var(--ease), translate .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; }
/* lifts use `translate`, so they never fight the reveal's `transform`; a stitched outline appears on hover */
.plan::before { content: ""; position: absolute; inset: 6px; border-radius: 8px; border: 1.5px dashed transparent; pointer-events: none; transition: border-color .35s; }
.plan:hover { translate: 0 -6px; box-shadow: 0 26px 40px -30px rgba(60, 40, 10, .55); }
.plan:hover::before { border-color: rgba(240, 81, 43, .45); }
.plan.featured { border: 1.5px solid var(--coral); background: linear-gradient(180deg, rgba(240, 81, 43, .08), rgba(240, 81, 43, .03) 60%), rgba(255, 255, 255, .9);
  translate: 0 -10px; box-shadow: 0 30px 44px -30px rgba(217, 64, 27, .55); }
.plan.featured:hover { translate: 0 -14px; }
.plan header { text-align: center; padding-bottom: 16px; border-bottom: 1px solid #cfd5dc; }
.plan h3 { font: 600 22px/1.1 var(--serif); margin: 0 0 6px; }
.plan .price { font: 600 30px/1 var(--mono); margin: 0; letter-spacing: -.02em; }
.plan .fits { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); margin: 10px 0 0; min-height: 2.9em; }
.plan ul { list-style: none; margin: 0 0 18px; padding: 0; flex: 1; }
.plan li { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 42px; padding: 0 6px; margin: 0; border-bottom: 1px solid #e3e6ea; font-size: 13px; color: var(--muted);
  border-radius: 6px; transition: background-color .2s; }
.plan li .k { font: 500 11px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.plan li .v { color: var(--ink); font-weight: 600; font-size: 14px; }
.plan li .v.part { color: var(--ink-2); font-weight: 500; font-size: 12.5px; }
.plans[data-hl="0"] [data-row="0"], .plans[data-hl="1"] [data-row="1"], .plans[data-hl="2"] [data-row="2"],
.plans[data-hl="3"] [data-row="3"], .plans[data-hl="4"] [data-row="4"], .plans[data-hl="5"] [data-row="5"] { background-color: rgba(245, 178, 29, .16); }
.tick { width: 20px; height: 20px; flex: none; }
.tick path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .5s cubic-bezier(.6, 0, .2, 1); transition-delay: calc(var(--d, 0) * 70ms); }
.tick.no path { stroke: #a9aeb6; }
.plans.drawn .tick path { stroke-dashoffset: 0; }
.plan .btn { justify-content: center; width: 100%; padding: 12px 14px; font-size: 14.5px; white-space: nowrap; }

/* ---------- questions ---------- */
.faq { padding: 70px max(26px, calc((100vw - var(--wrap)) / 2)) 60px; }
.qa { max-width: 860px; border-top: 1.5px solid var(--ink); }
.qa details { border-bottom: 1px dashed rgba(29, 34, 48, .35); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 4px; font: 600 23px/1.25 var(--serif); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ink);
  background: linear-gradient(var(--ink), var(--ink)) center/12px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center/1.5px 12px no-repeat; transition: transform .35s var(--ease), background-color .25s; }
.qa details[open] summary::after { transform: rotate(45deg); background-color: var(--coral); box-shadow: 0 0 0 1.5px var(--coral); }
.qa details p { margin: 0 4px 24px; color: var(--ink-2); max-width: 700px; }

/* ---------- closing ---------- */
.closing { padding: 30px max(26px, calc((100vw - var(--wrap)) / 2)) 80px; }
.closing-in { display: grid; grid-template-columns: 250px 1fr; gap: 40px; align-items: center; padding: 40px 48px; border-radius: 26px; background: rgba(252, 251, 247, .7);
  box-shadow: 0 0 0 1.5px rgba(200, 154, 98, .55) inset, 0 30px 60px -44px rgba(60, 40, 10, .6); }
.closing-in img { width: 100%; animation: sway 7s ease-in-out infinite; transform-origin: 50% 8%; }
@keyframes sway { 50% { transform: rotate(-3deg); } }
.closing h2 { margin-top: 0; }
.closing p { color: var(--ink-2); max-width: 560px; }

/* ---------- account and order pages ---------- */
.auth { max-width: 560px; margin: 10px auto 40px; }
/* Upload · Package · Pay · Preview */
.stepper { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; padding: 0; margin: 0 0 22px; counter-reset: step; font: 500 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.stepper li { display: flex; align-items: center; gap: 8px; margin: 0; }
.stepper li::before { counter-increment: step; content: counter(step); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--rule); font-size: 11px; }
.stepper li.done { color: var(--ink-2); }
.stepper li.done::before { content: "\2713"; background: var(--green); box-shadow: none; color: #fff; }
.stepper li.active { color: var(--ink); font-weight: 700; }
.stepper li.active::before { box-shadow: inset 0 0 0 1.5px var(--coral); color: var(--coral-2); }

.order-check { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 700px) { .order-check { grid-template-columns: 260px 1fr; } }
.artwork { width: 100%; max-height: 260px; object-fit: contain; background: #fff; border: 1px solid var(--rule); border-radius: 4px; padding: 10px; }
.order-head { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; margin: 22px 0; }
.thumb { margin: 0; }
.thumb img { width: 100%; background: #fff; border: 1px solid var(--rule); border-radius: 4px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 26px 0; }
.pair img { background: #fff; border: 1px solid var(--rule); border-radius: 4px; }
.pair figcaption { grid-column: 1 / -1; color: var(--muted); font: 12.5px/1.55 var(--mono); }
/* the preview the customer approves: full width inside a card is far too big */
.prep-art { max-width: 480px; background: #fff; border: 1px solid var(--rule); border-radius: 4px; }
ul.files { list-style: none; padding-left: 0; margin: 10px 0 18px; }
ul.files li { margin: 8px 0; }

/* facts in two columns, the label in mono like a title block */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; font-size: 15px; margin: 14px 0; }
.kv div:nth-child(odd) { color: var(--muted); font: 500 11px/1.9 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.kv div:nth-child(even) { overflow-wrap: anywhere; }

.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline li { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; padding: 10px 0 10px 18px; margin: 0; border-bottom: 1px dashed var(--rule); font-size: 15px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 18px; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--coral); }
/* the list runs oldest first, so the filled dot marks where the order stands now */
.timeline li:last-child::before { background: var(--coral); }
.timeline time { color: var(--muted); white-space: nowrap; font-family: var(--mono); font-size: 13px; }

/* ---------- reveal ----------
   Everything is visible by default. motion.js adds .anim to <html> as its first act, so a page whose script
   fails or never loads is still readable — and so is the version a crawler sees. */
.anim [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.anim [data-reveal].in { opacity: 1; transform: none; }
/* without the script every drawing is shown finished */
html:not(.anim) [data-draw], html:not(.anim) .rs-reveal, html:not(.anim) .st-reveal { stroke-dashoffset: 0; }
html:not(.anim) .dim-label, html:not(.anim) .spec-tag, html:not(.anim) .spec .sew { opacity: 1; transform: none; }
html:not(.anim) .spec .ext { opacity: .7; }
html:not(.anim) .draw-dim i { transform: none; }
html:not(.anim) .tick path { stroke-dashoffset: 0; }

/* ---------- small screens ---------- */
@media (max-width: 1180px) {
  .plans { grid-template-columns: 1fr 1fr; gap: 20px; }
  .plan.featured, .plan.featured:hover { translate: none; }
}
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; padding-top: 44px; }
  .bench-in { margin: 10px auto 0; }
  .bench figcaption { margin: 18px auto 0; }
  .check-grid { grid-template-columns: 1fr; }
  .steps ol { grid-template-columns: 1fr 1fr; }
  .steps-thread { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .bar { gap: 10px; }
  .bar nav a:not(.cta), .bar nav form { display: none; }
  .bar .cta { padding: 8px 13px; font-size: 14px; }
  .sheet { padding: 34px 20px 26px; }
  .steps ol { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .plan .fits { min-height: 0; }
  .title-block th { width: auto; }
  .closing-in { grid-template-columns: 1fr; padding: 30px 22px; text-align: center; }
  .closing-in img { width: 150px; margin: 0 auto; }
  .closing .row { justify-content: center; }
  .spec-tag { min-width: 0; font-size: 11px; }
  .dim-label { font-size: 11px; }
  /* A spec table has one column per fact and a phone has room for three. Rather than fold "130 mm" onto two
     lines and lose the last two columns off the edge, the card scrolls sideways and the table keeps its shape. */
  .card { overflow-x: auto; }
  .card table { min-width: 520px; }
  .order-head { grid-template-columns: 1fr; }
  .pair { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .anim [data-reveal] { opacity: 1; transform: none; }
}