/* ==========================================================================
   SculptScale — marketing site recipes.

   Every value here is the app's own value (index.css line refs in comments),
   re-authored onto marketing selectors. App furniture — #root, .layout,
   .sidebar, .viewer-*, .gate-*, .drop, .tabs — is deliberately left behind.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink-2);              /* 9.86:1 — body copy is never full --ink */
  font-size: 16px;
  line-height: 1.6;
}

img, svg { max-width: 100%; }
img { height: auto; }

/* Inter, self-hosted, variable — DISABLED until the file is committed.
   Enable by dropping InterVariable.woff2 (variable, latin subset, ~60KB) into
   public/fonts/ and uncommenting. Get it from the official release:
     https://github.com/rsms/inter/releases  →  InterVariable.woff2
   Ship the VARIABLE font, not statics: the app sets font-weight 590/540/510 in
   eight places, and static Inter 400/500/600 snaps those to something visibly
   heavier than the app.

   Until then the stack in tokens.css does the work, and it does it well —
   -apple-system means every Mac and iPhone already renders SF Pro, which is
   what the app renders. Windows gets Segoe UI, Android gets Roboto. No 404,
   no third-party request, nothing render-blocking.

@font-face {
  font-family: 'Inter';
  src: url('/fonts/InterVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*/

/* ————————————————————————— layout ————————————————————————— */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.band { padding: var(--band-y) 0; }
.band + .band { border-top: 1px solid var(--hairline); }
.band-dark + .band, .band + .band-dark { border-top: none; }
.prose { max-width: var(--measure); }

.two-up {
  display: grid; gap: clamp(28px, 5vw, 56px);
  grid-template-columns: 1fr 1fr; align-items: center;
}
.grid-3 { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); }

/* ————————————————————————— type ————————————————————————— */

h1, h2, h3 { color: var(--ink); letter-spacing: -0.028em; line-height: 1.12; font-weight: 600; }
h1 { font-size: clamp(34px, 6vw, 58px); }
h2 { font-size: clamp(26px, 3.6vw, 38px); }
h3 { font-size: clamp(17px, 2vw, 20px); letter-spacing: -0.018em; line-height: 1.25; }

p { max-width: var(--measure); }
p + p { margin-top: 0.9em; }
h2 + p, h3 + p, h1 + p { margin-top: 0.7em; }
.lede { font-size: clamp(16px, 2vw, 19px); line-height: 1.55; color: var(--ink-2); }
.small { font-size: 13px; line-height: 1.55; color: var(--gray); max-width: 62ch; }
strong, b { font-weight: 600; color: var(--ink); }

/* index.css:73-79 — one label style, everywhere. Quiet, not shouty.
   --gray-2 swapped for --label: 2.16:1 is not a contrast ratio. */
.eyebrow {
  font-size: 11px; font-weight: 590; letter-spacing: 0.055em;
  text-transform: uppercase; color: var(--label);
  margin-bottom: 14px;
}
h2 + .eyebrow, .eyebrow + h2 { margin-top: 0; }

a { color: var(--gold-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

/* ————————————————————————— controls (index.css:85-106) ————————————————————————— */

.btn {
  display: inline-block; font: inherit; font-size: 14px; font-weight: 510;
  letter-spacing: -0.005em; text-decoration: none; text-align: center;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 12px 20px;                /* app is 9px 16px — 44px touch target */
  cursor: pointer; background: var(--ink); color: #fff;
  transition: background .16s ease, opacity .16s ease, border-color .16s ease;
}
.btn:hover { background: #000; color: #fff; }
.btn:active { opacity: .82; }

/* Background is --gold-ink, not --gold: white on #a8813f is 3.57:1 and fails
   AA. White on #7d6229 is 5.75:1. --gold becomes the hover. */
.btn-gold { background: var(--gold-ink); }
.btn-gold:hover { background: var(--gold); color: #fff; }

.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--hairline); }
.btn-ghost:hover { background: #faf8f4; border-color: #ddd8cf; color: var(--ink); }
.band-dark .btn-ghost:hover { background: #2f2c26; border-color: #45413a; }

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 26px; }

/* index.css:116-119, extended. The app styles input:focus and select:focus and
   has no :focus-visible rule for buttons or links in 356 lines. Don't inherit
   that gap on a public page. */
:where(a, button, summary, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 4px rgba(168, 129, 63, .18);
}

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 99;
  background: var(--surface); color: var(--ink);
  padding: 10px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
}
.skip-link:focus { left: 12px; }

/* ————————————————————————— chips (index.css:127-133) ————————————————————————— */

.chip {
  display: inline-block; font-size: 11px; font-weight: 510;
  border-radius: 6px; padding: 3px 8px;
  background: #f4f1ec; color: var(--gray); border: none;
}
.band-dark .chip { background: #2f2c26; color: var(--ink-2); }
.chip-primary { background: var(--gold-soft); color: var(--gold-ink); }
.band-dark .chip-primary { color: var(--gold); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.status {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: .04em;
  color: var(--danger); text-transform: uppercase;
}

/* ————————————————————————— card (index.css:51-53, 69) ————————————————————————— */

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}
.card h3 { margin-bottom: 8px; }
.card > p { font-size: 14px; }

/* ————————————————————————— data rows (index.css:136-146) ————————————————————————— */

.spec {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; font-size: 14px; padding: 10px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.spec:last-child { border-bottom: none; }
.spec > span { color: var(--gray); }
.spec b {
  font-weight: 540; font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em; text-align: right; color: var(--ink);
}
.specs { margin-top: 8px; }

/* The four-figure proof row. Tabular numerals are doing the heavy lifting. */
.figures { display: grid; gap: 0; grid-template-columns: repeat(4, 1fr); margin-top: 34px; }
.figure { padding: 20px 22px 20px 0; border-left: 1px solid var(--hairline); padding-left: 22px; }
.figure:first-child { border-left: none; padding-left: 0; }
.figure b {
  display: block; font-size: clamp(22px, 3vw, 31px); font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
  color: var(--gold); line-height: 1.05;
}
.figure span { display: block; margin-top: 8px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }

/* ————————————————————————— notes and quotes (index.css:148-152) ————————————————————————— */

.note {
  background: #fbf4e8; border: 1px solid #ecdcc0; color: #6f5426;
  border-radius: var(--radius-sm); padding: 13px 15px;
  font-size: 13.5px; line-height: 1.5; max-width: var(--measure);
}
.band-dark .note { background: #2b2519; border-color: #423826; color: #e0cfa8; }

/* Machine output. Reads as the product speaking, not the copywriter. */
.machine {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.6; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-sm);
  padding: 15px 18px; margin-top: 16px; max-width: var(--measure);
}
.machine .status { display: block; margin-bottom: 8px; }

.pull {
  font-size: clamp(18px, 2.4vw, 23px); line-height: 1.4;
  letter-spacing: -0.02em; color: var(--gold);
  border-left: 2px solid var(--gold); padding-left: 22px;
  margin-top: 36px; max-width: 54ch;
}

/* ————————————————————————— step rail (index.css:291-305) ————————————————————————— */

.rail { list-style: none; padding: 0; margin-top: 30px; }
.rail li {
  position: relative; padding: 0 0 24px 30px;
  border-left: 1px solid var(--hairline);
}
.rail li:last-child { border-left-color: transparent; padding-bottom: 0; }
.rail li::before {
  content: ''; position: absolute; left: -4.5px; top: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--bg);
}
.rail h3 { font-size: 16px; margin-bottom: 4px; }
.rail p { font-size: 14px; }

/* ————————————————————————— disclosure (index.css:309-321) ————————————————————————— */

.faq { border-top: 1px solid var(--hairline); max-width: var(--measure); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  cursor: pointer; padding: 16px 0; font-size: 15px; font-weight: 540;
  color: var(--ink); list-style: none; display: flex;
  justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--gold-ink); font-weight: 400; font-size: 18px; }
.faq details[open] summary::after { content: '\2013'; }
.faq details > p { padding: 0 0 18px; font-size: 14.5px; }

/* ————————————————————————— nav ————————————————————————— */

/* index.css:34-40 verbatim values. Stays light always — it lives outside the
   bands, so it must not pick up a .band-dark rebind. */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--hairline);
}
.nav-in {
  max-width: var(--maxw); margin: 0 auto; padding: 12px var(--gutter);
  display: flex; align-items: center; gap: 12px;
}
/* Centre, not baseline. With baseline the image's BOTTOM edge lands on the text
   baseline, which dropped the eyebrow 7.5px below the wordmark's optical centre.
   The wordmark PNG's alpha padding is symmetric (8/10/8/10 of 1166x243), so
   centring the boxes centres the artwork with no nudge needed. */
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-brand img { display: block; height: 22px; width: auto; }
/* index.css:41-45, with --label for the same reason as .eyebrow */
.nav-brand .sub {
  color: var(--label); font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  line-height: 1;
  /* "SculptScale" carries a 'p' descender, so its ink centre sits a shade below
     its cap-height centre. One pixel up puts the small caps on the caps. */
  transform: translateY(-1px);
}
.nav-links { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.nav-links a { font-size: 14px; color: var(--ink-2); text-decoration: none; }
.nav-links a:hover { color: var(--ink); text-decoration: underline; }
.nav-links .btn { margin-left: 4px; }
.nav-drawer { display: none; margin-left: auto; }

/* ————————————————————————— diagrams ————————————————————————— */

.fig { margin: 0; }
.fig svg { display: block; width: 100%; height: auto; }
.fig figcaption { margin-top: 14px; font-size: 12.5px; color: var(--gray); max-width: 56ch; }
.dia-label {
  font-size: 10.5px; font-weight: 590; letter-spacing: .07em;
  text-transform: uppercase; fill: var(--label);
}
.dia-num { font-size: 12px; font-weight: 540; font-variant-numeric: tabular-nums; fill: var(--ink); }
.dia-sub { font-size: 10.5px; font-variant-numeric: tabular-nums; fill: var(--gray); }

/* ————————————————————————— pricing ————————————————————————— */

.price { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.price small { font-size: 13px; font-weight: 500; color: var(--gray); letter-spacing: 0; }
.per { font-size: 12.5px; color: var(--gold); font-variant-numeric: tabular-nums; margin-top: 4px; }
.card-featured { border-color: var(--gold); }

/* ————————————————————————— form ————————————————————————— */

.form { max-width: 640px; margin-top: 28px; }
.form-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.field { display: block; font-size: 13px; color: var(--gray); }
.field > span { display: block; margin-bottom: 5px; font-weight: 500; }
.field.wide { grid-column: 1 / -1; }
/* index.css:108-114 */
.field input, .field select, .field textarea {
  font: inherit; font-size: 14px; width: 100%;
  padding: 10px 12px; border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { min-height: 88px; resize: vertical; }
.hp { position: absolute; left: -9999px; }   /* never display:none on a focusable field */
.form-msg { margin-top: 14px; }

/* ————————————————————————— footer ————————————————————————— */

.foot { padding: 56px 0 34px; }
.foot-cols { display: grid; gap: 32px; grid-template-columns: 2fr 1fr 1fr 1fr; }
.foot h3 { font-size: 11px; font-weight: 590; letter-spacing: .055em; text-transform: uppercase; color: var(--label); margin-bottom: 12px; }
.foot ul { list-style: none; padding: 0; }
.foot li { margin-bottom: 8px; font-size: 13.5px; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot-brand img { height: 20px; width: auto; display: block; margin-bottom: 12px; }
.foot-legal {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: 12.5px; color: var(--gray);
}

/* ————————————————————————— responsive (index.css:325) ————————————————————————— */

@media (max-width: 900px) {
  .two-up, .grid-3, .grid-4, .form-grid { grid-template-columns: 1fr; }
  .figures { grid-template-columns: 1fr 1fr; }
  .figure { border-left: none; padding-left: 0; border-top: 1px solid var(--hairline); }
  .figure:first-child, .figure:nth-child(2) { border-top: none; }
  .foot-cols { grid-template-columns: 1fr 1fr; }

  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--hairline);
    padding: 8px var(--gutter) 18px;
  }
  .nav-drawer { display: block; }
  .nav-drawer summary {
    list-style: none; cursor: pointer; font-size: 14px; font-weight: 510;
    color: var(--ink); padding: 8px 4px;
  }
  .nav-drawer summary::-webkit-details-marker { display: none; }
  .nav-drawer[open] ~ .nav-links { display: flex; }
  .nav-links a { padding: 11px 0; width: 100%; }
  .nav-links .btn { margin: 8px 0 0; width: 100%; }
}

@media (max-width: 560px) {
  .figures { grid-template-columns: 1fr; }
  .figure { border-top: 1px solid var(--hairline); padding-left: 0; }
  .figure:nth-child(2) { border-top: 1px solid var(--hairline); }
  .btn-row .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

@media print {
  .nav, .btn-row, .form { display: none; }
  .band-dark { background: #fff; color: #000; }
}