/* FillMyFilm app. Brand system: warm paper, deep navy, CMYK accents. */

:root {
  --bg: #f6f1e9;
  --panel: #ffffff;
  --panel-2: #fffdf9;
  --field: #f6f1e9;
  --line: #e3dbd0;
  --line-2: #e7dfd5;
  --line-3: #cfc4b6;
  --cyan: #00a7e8;
  --cyan-dim: #007db6;
  --ink: #071b3d;
  --muted: #5c687c;
  --dim: #334158;
  --faint: #6e7889;
  --fainter: #a59c91;
  --warn: #f07f23;
  --err: #d94269;

  --display: 'Archivo Black', Impact, sans-serif;
  --body: 'Manrope', system-ui, -apple-system, sans-serif;
  --mono: 'DM Mono', ui-monospace, 'Cascadia Mono', monospace;

  --maxw: 1440px;
  --pad: 56px;
  --radius: 10px;
}

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

/* Author display rules outrank the UA [hidden] rule. Anything the app hides
   with the attribute must actually stay hidden. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; color-scheme: light; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: #8beafb; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* Keyboard users land on the nav; the tool is five sections down. */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 100;
  transform: translate(-50%, -120%);
  background: var(--cyan);
  color: #04151a;
  font: 700 italic 14px var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: 0 0 8px 8px;
  transition: transform .18s ease-out;
}
.skip-link:focus { transform: translate(-50%, 0); color: #04151a; }

img { max-width: 100%; }

.section-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--pad);
}

/* ── Shared type treatments ─────────────────────── */

/* Headings are solid white. The chrome gradient lives in the logo lockup;
   running it through the type as well muddied the middle of every heading
   and dropped the darkest band to 4.9:1. */
.chrome { color: #fff; }
.accent { color: var(--cyan); }

/* The chrome-and-ice logo is a raster lockup; sizing is always by width so
   the aspect ratio comes from the intrinsic width/height attributes. */
.brand-logo { display: block; width: 190px; height: auto; }
.hero-logo { width: min(300px, 62vw); }        /* stacked lockup */
.footer-logo { width: 150px; opacity: .85; }
.brand .brand-logo { width: 168px; }

.hero-brand { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.hero-brand-tag {
  font: 600 12px var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  border-left: 1px solid var(--line-3);
  padding-left: 16px;
}
.wordmark-sub {
  font: 800 italic 15px/1 var(--display);
  letter-spacing: 0.06em;
  color: var(--dim);
  border-left: 1px solid var(--line-3);
  padding-left: 12px;
}

/* ── Nav ────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--pad);
  background: rgba(7, 10, 12, 0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid #131b21;
}
.nav-brand { display: flex; align-items: center; gap: 12px; }
.nav-links { display: flex; align-items: center; gap: 28px; }
/* :not(.nav-cta) matters — without it this rule outranks .nav-cta's own
   colour and paints the button's label grey on cyan (1.6:1). */
.nav-links a:not(.nav-cta) { font: 500 14px var(--body); color: var(--dim); }
.nav-links a:not(.nav-cta):hover { color: var(--ink); }

.nav-cta,
.btn-primary {
  font: 700 italic 14px var(--display);
  letter-spacing: 0.06em;
  background: var(--cyan);
  color: #04151a;
  padding: 11px 26px;
  border-radius: 6px;
  white-space: nowrap;
  transition: background .18s, transform .18s;
}
.nav-cta:hover,
.btn-primary:hover { color: #04151a; background: #6ae7fa; }

/* ── Hero ───────────────────────────────────────── */

.hero { position: relative; overflow: hidden; }
.hero-glow,
.hero-grid-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-glow {
  background: radial-gradient(ellipse 70% 55% at 72% 35%, rgba(53, 220, 245, 0.1), transparent 65%);
}
.hero-grid-bg {
  background-image:
    linear-gradient(rgba(53, 220, 245, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 220, 245, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
}
.hero-inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 64px var(--pad) 80px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 56px;
  align-items: start;
}
.hero-copy { padding-top: 20px; min-width: 0; }

h1 {
  margin: 0;
  font: 900 italic clamp(44px, 6.4vw, 92px)/0.95 var(--display);
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
/* Scoped to the hero: the tool page's h1 is a one-line section title and must
   not have its words forced onto separate lines. */
.hero h1 span { display: block; color: #fff; }
.hero h1 .accent { color: var(--cyan); text-shadow: 0 0 44px rgba(53, 220, 245, 0.45); }

.hero-sub {
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.6;
  max-width: 500px;
  text-wrap: pretty;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; align-items: center; }
.btn-primary { font-size: 18px; padding: 17px 36px; }
.btn-ghost {
  font: 600 15px var(--body);
  color: #c7d2da;
  border: 1px solid var(--line-3);
  padding: 16px 28px;
  border-radius: 6px;
  transition: border-color 0.2s, color 0.2s;
}
.btn-ghost:hover { border-color: var(--cyan); color: var(--ink); }

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 40px;
  border-top: 1px solid #1a2228;
  padding-top: 22px;
}
.hero-stat-value { font: 800 italic 32px var(--display); }
.hero-stat-label {
  font: 500 12px var(--mono);
  color: var(--faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* ── Hero nesting demo ──────────────────────────── */

.hero-demo { width: 420px; max-width: 100%; justify-self: end; }
.demo-readout {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font: 600 12px var(--mono);
  letter-spacing: 0.1em;
  color: var(--faint);
}
.demo-roll {
  position: relative;
  width: 100%;
  background: #0d1319;
  border: 1px solid rgba(53, 220, 245, 0.35);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(53, 220, 245, 0.12), inset 0 0 80px rgba(53, 220, 245, 0.04);
}
.demo-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 28px 28px;
}
.demo-scan {
  position: absolute;
  left: 0; right: 0; top: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0.6;
  animation: scanline 7s linear infinite;
}
/* Cells come from tools/demo-nest.mjs — the hero shows a genuine pack. */
/* Hero cells hold both packs. The box positions run first, then the same
   pieces move to their silhouette positions, which is the argument the page
   is making, animated. Geometry from tools/demo-nest.mjs. */
.demo-roll .nest-cell {
  position: absolute;
  left: var(--rl); top: var(--rt); width: var(--rw); height: var(--rh);
  opacity: 0;
  animation: renest 12s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.demo-roll .nest-cell img {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--riw); height: var(--rih);
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(var(--rr));
  animation: renest-art 12s steps(1, end) infinite;
  animation-delay: inherit;
}

@keyframes renest {
  0%        { opacity: 0; left: var(--rl); top: var(--rt); width: var(--rw); height: var(--rh); }
  6%        { opacity: 1; left: var(--rl); top: var(--rt); width: var(--rw); height: var(--rh); }
  40%       { opacity: 1; left: var(--rl); top: var(--rt); width: var(--rw); height: var(--rh); }
  56%, 92%  { opacity: 1; left: var(--sl); top: var(--st); width: var(--sw); height: var(--sh); }
  99%, 100% { opacity: 0; left: var(--sl); top: var(--st); width: var(--sw); height: var(--sh); }
}
@keyframes renest-art {
  0%   { width: var(--riw); height: var(--rih); transform: translate(-50%, -50%) rotate(var(--rr)); }
  48%  { width: var(--siw); height: var(--sih); transform: translate(-50%, -50%) rotate(var(--sr)); }
  100% { width: var(--riw); height: var(--rih); transform: translate(-50%, -50%) rotate(var(--rr)); }
}

/* The readout names the phase, so the re-nest reads as a measurement and not
   just as pieces shuffling. Same 12s timeline as the cells. */
.demo-readout-swap { position: relative; display: inline-block; min-width: 108px; text-align: right; }
.demo-readout-swap span { display: block; }
.demo-readout-swap .phase-shape { position: absolute; right: 0; top: 0; color: var(--cyan); }
.demo-readout-swap .phase-box { animation: phaseBox 12s steps(1, end) infinite; }
.demo-readout-swap .phase-shape { animation: phaseShape 12s steps(1, end) infinite; }
@keyframes phaseBox   { 0%, 47% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes phaseShape { 0%, 47% { opacity: 0; } 48%, 100% { opacity: 1; } }

/* Where the sheet ends: drops to the shorter length when the re-nest lands. */
.demo-cut {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  border-top: 1.5px dashed rgba(53, 220, 245, 0.55);
  animation: cutline 12s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes cutline {
  0%, 40%   { top: 100%; opacity: .0; }
  46%       { opacity: .9; }
  56%, 92%  { top: var(--cut); opacity: .9; }
  99%, 100% { top: var(--cut); opacity: 0; }
}

.demo-fill {
  margin-top: 12px;
  height: 6px;
  background: #151d24;
  border-radius: 3px;
  overflow: hidden;
}
.demo-fill i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
  border-radius: 3px;
  transform-origin: left;
  animation: fillup 7s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes nestIn {
  0%   { opacity: 0; transform: translate(-40%, -40%) rotate(-24deg) scale(.85); }
  8%, 93% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  99%, 100% { opacity: 0; }
}
@keyframes nestSpin {
  0%   { opacity: 0; transform: translate(45%, -35%) rotate(30deg) scale(.8); }
  8%, 93% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  99%, 100% { opacity: 0; }
}
@keyframes boxdrop {
  0%   { opacity: 0; transform: translateY(-60px); }
  8%, 93% { opacity: 1; transform: translateY(0); }
  99%, 100% { opacity: 0; }
}
@keyframes fillup {
  0%, 8% { transform: scaleX(0); }
  60%, 90% { transform: scaleX(0.92); }
  100% { transform: scaleX(0); }
}
@keyframes scanline { 0% { transform: translateY(0); } 100% { transform: translateY(600px); } }
@keyframes pulseGlow { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.pulse { animation: pulseGlow 3s infinite; }

/* ── Sections ───────────────────────────────────── */

.section { padding: 88px 0 40px; }
.section-label {
  font: 600 12px var(--mono);
  letter-spacing: 0.2em;
  color: var(--cyan);
  text-transform: uppercase;
}
.section-title {
  margin: 14px 0 0;
  font: 800 italic clamp(30px, 4vw, 52px) var(--display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.section-sub {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 17px;
  max-width: 620px;
  line-height: 1.6;
}

/* Gated on .js so the page is fully readable if the reveal script never runs. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .demo-roll .nest-cell, .demo-roll .nest-cell img, .demo-cut, .demo-readout-swap span,
  .demo-scan, .demo-fill i, .pulse, .blip { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: border-color .25s, transform .25s;
}
.step:hover { border-color: rgba(53, 220, 245, 0.45); transform: translateY(-4px); }
.step-num { font: 700 13px var(--mono); color: var(--cyan); letter-spacing: 0.16em; }
.step h3 { margin: 16px 0 10px; font: 700 italic 24px var(--display); text-transform: uppercase; }
.step p { margin: 0; color: var(--dim); font-size: 14px; line-height: 1.65; }

/* Compare */
.compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.compare-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 26px;
}
.compare-card.better {
  background: linear-gradient(135deg, var(--panel), rgba(53, 220, 245, 0.04));
  border-color: rgba(53, 220, 245, 0.35);
  box-shadow: 0 0 50px rgba(53, 220, 245, 0.07);
}
.compare-card-label { font: 700 12px var(--mono); letter-spacing: 0.14em; }
.compare-card-label.bad { color: var(--faint); }
.compare-card-label.good { color: var(--cyan); }

.compare-visual {
  position: relative;
  background: var(--bg);
  border: 1px solid #141c22;
  border-radius: 8px;
  margin-top: 18px;
  overflow: hidden;
}
.compare-card.better .compare-visual { border-color: rgba(53, 220, 245, 0.25); }
.visual-caption {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font: 500 11px var(--mono);
  letter-spacing: 0.06em;
  color: var(--faint);
}

/* Placements come from tools/demo-nest.mjs — a real pack, not a mock-up. */
.nest-cell { position: absolute; }
.nest-cell img {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Defaults matter: without them a cell whose generated inline style went
     missing falls back to the image's intrinsic size and blows the layout
     apart. The generator overrides these for rotated cells, where the image
     must be sized to its own box rather than to the rotated footprint. */
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  display: block;
}
.nest-cell.boxed {
  border: 1px dashed rgba(148, 163, 175, 0.45);
  background: rgba(148, 163, 175, 0.05);
  padding: 3px;
}
.rect-visual .nest-cell img { filter: grayscale(.35); opacity: .82; }

.compare-metric {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
}
.compare-metric:first-of-type { margin-top: 20px; padding-top: 16px; border-top: 1px solid #141c22; }
.compare-card.better .compare-metric:first-of-type { border-top-color: rgba(53, 220, 245, 0.2); }
.compare-metric-label { color: var(--dim); font-size: 14px; }
.compare-metric-value { font: 600 14px var(--mono); color: var(--faint); }
.compare-metric-value.accent { color: var(--cyan); }

/* Trust band */
.trust-band {
  border-top: 1px solid #131b21;
  border-bottom: 1px solid #131b21;
  background: var(--panel-2);
  margin-top: 56px;
}
.trust {
  padding-block: 64px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px;
}
.trust-kicker { font: 700 13px var(--mono); color: var(--cyan); letter-spacing: 0.16em; }
.trust-item h3 { margin: 12px 0 8px; font: 700 italic 20px var(--display); text-transform: uppercase; }
.trust-item p { margin: 0; color: var(--dim); font-size: 14px; line-height: 1.65; }

/* ── Tool ───────────────────────────────────────── */

/* ── The tool ───────────────────────────────────
   Everything above this is a landing page. This is the app. It gets its own
   surface, its own top rule and its own machine grid so arriving here reads
   as crossing a threshold rather than scrolling to another section. */

.tool-section {
  position: relative;
  padding: 0 0 80px;
  background:
    linear-gradient(180deg, rgba(53, 220, 245, 0.05), transparent 340px),
    linear-gradient(180deg, #04070a, #05080b 60%, var(--bg));
  border-top: 1px solid rgba(53, 220, 245, 0.3);
  box-shadow: inset 0 1px 0 rgba(53, 220, 245, 0.12), inset 0 24px 60px rgba(0, 0, 0, 0.55);
  scroll-margin-top: 72px;              /* the sticky nav must not clip it */
}
.tool-section::before {                  /* faint machine grid, same as the hero */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(53, 220, 245, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 220, 245, 0.028) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, #000 0, #000 420px, transparent 720px);
}
.tool-section > * { position: relative; }

/* The threshold marker sits on the section's top rule. */
.tool-threshold {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  transform: translateY(-9px);
}
.threshold-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(53, 220, 245, 0.45));
}
.threshold-rule:last-child { background: linear-gradient(90deg, rgba(53, 220, 245, 0.45), transparent); }
.threshold-label {
  font: 600 11px var(--mono);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cyan);
  background: #05080b;
  padding: 2px 16px;
  border: 1px solid rgba(53, 220, 245, 0.3);
  border-radius: 999px;
  white-space: nowrap;
}
.tool-heading {
  padding-top: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 22px;
}
.tool-privacy,
.privacy-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px var(--mono);
  color: var(--cyan);
  letter-spacing: 0.12em;
}
.blip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  animation: blink 2s infinite;
  flex-shrink: 0;
}

.tool-shell {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 15px 22px;
  border-bottom: 1px solid var(--line-2);
  background: #0a0e11;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .wordmark-sub { font-size: 12px; padding-left: 10px; }
.tag {
  font: 500 11px var(--mono);
  color: var(--faint);
  letter-spacing: 0.1em;
  border-left: 1px solid var(--line-3);
  padding-left: 12px;
  text-transform: uppercase;
}

.layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr) 280px;
  min-height: 680px;
}
.panel { padding: 22px 20px; background: var(--panel-2); display: flex; flex-direction: column; gap: 22px; }
.controls { border-right: 1px solid var(--line-2); }
.results { border-left: 1px solid var(--line-2); }

.panel-label {
  margin: 0;
  font: 600 11px var(--mono);
  color: var(--faint);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.card { display: flex; flex-direction: column; gap: 12px; }
.panel > .card + .card { padding-top: 22px; border-top: 1px solid var(--line-2); }

.add-artwork { display:flex; align-items:center; width:100%; gap:12px; padding:13px; color:var(--ink); text-align:left; background:var(--field); border:1px solid var(--line-3); border-radius:8px; cursor:pointer; transition:border-color .18s,background .18s,transform .18s; }
.add-artwork:hover { border-color:var(--cyan); background:rgba(53,220,245,.06); transform:translateY(-1px); }
.add-artwork strong { display:block; font:600 14px var(--body); }
.add-artwork small { display:block; margin-top:2px; font:400 10px var(--mono); color:var(--faint); letter-spacing:.03em; }
.add-artwork-icon { display:grid; flex:0 0 32px; width:32px; height:32px; place-items:center; color:#04151a; background:var(--cyan); border-radius:6px; font:500 25px/1 var(--body); }

.modal-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border: 2px dashed rgba(53, 220, 245, 0.4);
  border-radius: 12px;
  padding: 28px 22px 24px;
  text-align: center;
  color: var(--faint);
  font-size: 13px;
  cursor: pointer;
  background: var(--field);
  transition: border-color .2s, background .2s, box-shadow .2s, transform .2s;
}
.modal-dropzone:hover,
.modal-dropzone:focus-visible { border-color: var(--cyan); background: rgba(53, 220, 245, 0.05); }
.modal-dropzone.drag {
  border-color: var(--cyan);
  border-style: solid;
  background: rgba(53, 220, 245, 0.1);
}
.modal-dropzone p { margin: 0; }

.dropzone-icon {
  width: 38px;
  height: 38px;
  color: var(--cyan);
  transition: transform .2s;
}
.modal-dropzone:hover .dropzone-icon { transform: translateY(-2px); }
.modal-dropzone.drag .dropzone-icon { transform: translateY(-4px); }

.dropzone-title {
  font: 600 16px var(--body);
  letter-spacing: 0;
  color: var(--ink);
}
.dropzone-cta {
  display: inline-block;
  background: var(--cyan);
  color: #04151a;
  font: 600 13px var(--body);
  letter-spacing: 0.02em;
  padding: 9px 22px;
  border-radius: 6px;
  transition: background .18s;
}
.modal-dropzone:hover .dropzone-cta { background: #6ae7fa; }
.hint { font-size: 11px; color: var(--faint); line-height: 1.5; }

.artwork-modal { width:min(620px,calc(100vw - 32px)); margin:auto; padding:0; color:var(--ink); background:#0a0f13; border:1px solid var(--line-3); border-radius:14px; box-shadow:0 28px 90px rgba(0,0,0,.72); }
.artwork-modal::backdrop { background:rgba(2,5,7,.76); backdrop-filter:blur(5px); }
.artwork-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:24px 26px 18px; border-bottom:1px solid var(--line-2); }
.modal-kicker { margin:0 0 5px; color:var(--cyan); font:600 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.artwork-modal h2 { margin:0; font:700 26px/1.1 var(--body); letter-spacing:-.03em; }
.modal-close { width:36px; height:36px; padding:0; color:var(--muted); background:transparent; border:1px solid var(--line-3); border-radius:7px; cursor:pointer; font:300 28px/1 var(--body); }
.modal-close:hover { color:var(--ink); border-color:var(--cyan); }
.artwork-sources { display:flex; gap:8px; padding:18px 26px 0; }
.artwork-source { padding:9px 12px; color:var(--dim); background:transparent; border:1px solid transparent; border-radius:6px; font:600 12px var(--body); }
.artwork-source.is-active { color:var(--ink); background:var(--field); border-color:var(--line-3); }
.artwork-source:disabled { cursor:not-allowed; opacity:.55; }
.artwork-source span { margin-left:5px; color:var(--faint); font:500 9px var(--mono); text-transform:uppercase; }
.artwork-modal .modal-dropzone { margin:18px 26px; min-height:238px; justify-content:center; }
.modal-privacy { display:flex; align-items:center; gap:9px; margin:0; padding:16px 26px 22px; border-top:1px solid var(--line-2); color:var(--faint); font:500 10px/1.5 var(--mono); }
.modal-privacy .blip { animation:none; }

.sheet-setup-modal { width:min(1460px,calc(100vw - 28px)); height:min(860px,calc(100vh - 28px)); margin:auto; padding:0; color:var(--ink); background:#0a0f13; border:1px solid var(--line-3); border-radius:12px; box-shadow:0 30px 100px rgba(0,0,0,.75); }
.sheet-setup-modal::backdrop { background:rgba(2,5,7,.72); backdrop-filter:blur(4px); }
.sheet-setup-head { display:flex; justify-content:space-between; gap:24px; padding:24px 28px 18px; border-bottom:1px solid var(--line-2); }
.sheet-setup-head h2 { margin:0; font:700 25px/1.15 var(--body); }.sheet-setup-head p:not(.modal-kicker) { margin:7px 0 0; color:var(--muted); font-size:13px; }
.sheet-setup-body { display:grid; grid-template-columns:minmax(0,1fr) 340px; min-height:0; height:calc(100% - 142px); }
.sheet-setup-artwork { overflow:auto; padding:22px 28px; }.sheet-setup-artwork h3,.sheet-setup-preview h3 { margin:0 0 14px; color:var(--faint); font:600 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.sheet-setup-artwork .piece-list { grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }.sheet-setup-artwork .piece-add-btn { min-height:190px; }
.sheet-setup-preview { display:flex; flex-direction:column; gap:12px; padding:22px; border-left:1px solid var(--line-2); background:#090d10; min-width:0; }.setup-preview-head { display:flex; justify-content:space-between; align-items:start; }.setup-preview-head span { color:var(--faint); font:500 11px var(--mono); }
.sheet-setup-preview .canvas-wrap { flex:1; min-height:260px; }.sheet-setup-preview .zoombar { margin-top:0; }.setup-settings { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-top:12px; border-top:1px solid var(--line-2); }.setup-settings label { color:var(--faint); font:500 10px var(--mono); }.setup-settings input { width:100%; margin-top:5px; }
.sheet-setup-foot { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 28px; border-top:1px solid var(--line-2); color:var(--faint); font:500 11px var(--mono); }.setup-continue { border:0; border-radius:6px; padding:11px 18px; color:#04151a; background:var(--cyan); font:700 13px var(--body); cursor:pointer; }
@media (max-width:720px) { .sheet-setup-modal { width:calc(100vw - 16px); height:calc(100vh - 16px); }.sheet-setup-head { padding:18px; }.sheet-setup-body { grid-template-columns:1fr; overflow:auto; height:calc(100% - 138px); }.sheet-setup-preview { min-height:360px; border-left:0; border-top:1px solid var(--line-2); }.sheet-setup-artwork { padding:18px; }.sheet-setup-foot { padding:13px 18px; }.sheet-setup-foot span { display:none; } }

/* Cards, not rows. A 38px thumbnail is an icon — you cannot tell two versions
   of the same logo apart at that size, which is exactly the mistake a gang
   sheet punishes. The grid is auto-fill so the same markup is one column in
   the sidebar and several if the panel is ever given room. */
.piece-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
}
.piece-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--field);
  border: 1px solid #1e2830;
  border-radius: 9px;
  padding: 10px;
  position: relative;
}
.piece-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 6px;
  /* Checkerboard, because transparency is the thing being judged: art with a
     white box around it looks identical to cut-out art on a dark panel. */
  background: repeating-conic-gradient(#151d28 0 25%, #111820 0 50%) 0 0 / 12px 12px;
}
/* The add tile. Dashed and quiet — it is a slot waiting to be filled, and it
   must not compete with the cards that already hold real artwork. min-height
   rather than a fixed one so it never dictates the row height when it is the
   only item on a line. */
.piece-add { display: flex; }
.piece-add-btn {
  flex: 1;
  min-height: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed var(--line-3);
  border-radius: 9px;
  background: none;
  color: var(--faint);
  font: 500 12px var(--body);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.piece-add-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(53, 220, 245, 0.04);
}
.piece-add-plus { font: 300 22px var(--body); line-height: 1; }

.piece-info { flex: 1; min-width: 0; }
.piece-name {
  font: 600 13px var(--body);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.piece-meta { font: 400 11px var(--mono); color: var(--faint); margin-top: 2px; }
.piece-size {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font: 500 10px var(--mono);
  color: var(--faint);
  /* One line: `w [ ] x h [ ] in (lock)`. Wrapping splits the two halves of a
     single measurement across rows, which reads as two unrelated fields. */
  flex-wrap: nowrap;
}
.piece-size i { font-style: normal; color: var(--faint); }
.dim { display: inline-flex; align-items: center; gap: 3px; }
/* Fixed width so w and h line up down a column of cards; a size that shifts
   as you type reads as the layout being unsure of itself. */
/* Specific enough to beat `.field input, .field select, .piece-size input
   { width: 100% }` further down the file, which stretched both boxes to full
   width and wrapped w and h onto separate lines. */
.piece-size .dim input {
  width: 54px;
  flex: 0 0 54px;
  padding: 4px 5px;
  font-size: 12px;
  text-align: right;
}

.dim-lock {
  background: none;
  border: 0;
  padding: 2px;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  opacity: .55;
  filter: grayscale(1);
}
.dim-lock:hover { opacity: 1; }
/* Unlocked is the state worth noticing — it is the one that can distort the
   artwork — so it keeps its colour while locked stays quiet. */
.dim-lock.is-open { opacity: 1; filter: none; }

/* Background knockout. Sits under the print width because it is the same kind
   of decision — a property of this one file, not of the sheet. */
.piece-ko {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font: 500 10px var(--mono);
  color: var(--faint);
  letter-spacing: .06em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.ko-check {
  width: 13px;
  height: 13px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--cyan);
  cursor: pointer;
}
.ko-label { cursor: pointer; }
.piece-ko:hover .ko-label, .ko-check:focus-visible + .ko-label { color: var(--dim); }
.ko-keep { display: flex; align-items: center; gap: 5px; margin-left: 2px; }
.ko-keep-val { width: 42px; padding: 3px 5px; font-size: 12px; }
.ko-bulk {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 7px 10px;
  background: transparent;
  border: 1px dashed var(--line-3);
  border-radius: 6px;
  color: var(--faint);
  font: 500 11px var(--mono);
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.ko-bulk:hover:not(:disabled) { color: var(--cyan); border-color: var(--cyan-dim); }
.ko-bulk:disabled { opacity: .5; cursor: progress; }
.qty {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  /* Sized by its contents. Stretched across a card it reads as a slider. */
  align-self: flex-start;
  background: #151d24;
  border: 1px solid var(--line-3);
  border-radius: 6px;
}
.qty-btn {
  border: 0;
  background: transparent;
  color: var(--dim);
  font: 600 15px var(--mono);
  line-height: 1;
  padding: 6px 9px;
  cursor: pointer;
  transition: color .15s;
}
.qty-btn:hover:not(:disabled) { color: var(--cyan); }
.qty-btn:disabled { color: #2f3b45; cursor: not-allowed; }
.qty-val {
  width: 46px;
  border: 0;
  background: transparent;
  font: 600 13px var(--mono);
  color: var(--ink);
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 6px 0;
  -moz-appearance: textfield;
}
.qty-val::-webkit-outer-spin-button,
.qty-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-val:focus { outline: none; background: rgba(53, 220, 245, 0.08); border-radius: 4px; }
.qty:focus-within { border-color: var(--cyan); }
/* Top-right of the card, over the thumbnail. In a column layout a delete
   button in the flow sits at the bottom looking like a primary action for the
   card, which is the last thing it should look like. */
.piece-item .piece-remove {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  background: rgba(10, 14, 18, .72);
  backdrop-filter: blur(2px);
}
.piece-remove {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--line-3);
  background: #151d24;
  color: var(--dim);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.piece-remove:hover { color: var(--cyan); border-color: var(--cyan); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > span {
  font: 500 10px var(--mono);
  color: var(--faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.field input, .field select, .piece-size input {
  background: var(--field);
  border: 1px solid #1e2830;
  border-radius: 7px;
  color: var(--ink);
  font: 600 14px var(--body);
  padding: 9px 11px;
  width: 100%;
}
.field select { cursor: pointer; }
.field input:focus, .field select:focus, .piece-size input:focus { border-color: var(--cyan); }
.field-hint {
  display: block;
  font: 400 11px/1.5 var(--body);
  color: var(--faint);
  letter-spacing: 0;
  text-transform: none;
}
.field-hint em { color: var(--dim); font-style: normal; font-weight: 600; }

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--field);
  border: 1px solid #1e2830;
  border-radius: 8px;
}
.seg-btn {
  border: 0;
  border-radius: 5px;
  padding: 9px 6px;
  background: transparent;
  color: var(--dim);
  font: 600 12px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
}
.seg-btn:hover:not(.is-on) { color: var(--ink); background: rgba(53, 220, 245, 0.07); }
.seg-btn.is-on { background: var(--cyan); color: #04151a; }

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;          /* the label is the tap target, not the 18px box */
  font-size: 13px;
  color: var(--dim);
  cursor: pointer;
}
.check input { accent-color: var(--cyan); width: 18px; height: 18px; flex-shrink: 0; }

.primary {
  margin-top: auto;
  width: 100%;
  border: 0;
  border-radius: 7px;
  padding: 14px;
  font: 600 14px var(--body);
  letter-spacing: 0.04em;
  background: var(--cyan);
  color: #04151a;
  cursor: pointer;
  transition: background .18s;
}
.primary:hover:not(:disabled) { background: #6ae7fa; }
.primary:disabled { background: #1b2830; color: var(--faint); box-shadow: none; cursor: not-allowed; }
/* Reset is a destructive-ish action sitting where the primary used to be, so
   it reads as an outline control, not a call to action. */
.secondary {
  margin-top: auto;
  width: 100%;
  border: 1px solid var(--line-3);
  border-radius: 7px;
  padding: 13px;
  background: transparent;
  color: var(--dim);
  font: 600 13px var(--body);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.secondary:hover:not(:disabled) { border-color: var(--err); color: var(--err); }
.secondary:disabled { color: #2f3b45; border-color: var(--line-2); cursor: not-allowed; }

/* Stage */
.stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #080b0e;
}
.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line-2);
  font: 500 13px var(--body);
  color: var(--dim);
}
.statusbar.ok { color: var(--cyan); }
.statusbar.error { color: var(--err); }
.progress { display: flex; align-items: center; gap: 10px; font: 600 12px var(--mono); color: var(--dim); }
.progress .bar { width: 120px; height: 5px; border-radius: 3px; background: #151d24; overflow: hidden; }
.progress .bar i {
  display: block;
  height: 100%;
  background: var(--cyan);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .2s;
}

.canvas-wrap {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 24px;
  min-height: min(66vh, 720px);
  overflow: auto;
}
#preview {
  /* sized by applyZoom(); no CSS cap, or a tall sheet renders as a sliver */
  display: block;
  background: #0d1319;
  border: 1px solid var(--line-3);
  border-radius: 4px;
  box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.9);
}
.empty-state { text-align: center; max-width: 300px; }
.empty-state p:first-child {
  font: 700 13px var(--mono);
  letter-spacing: 0.18em;
  color: var(--faint);
  margin: 0 0 8px;
}
.empty-state .hint { margin: 0; }
.empty-state strong { color: var(--dim); }

/* Results rail: the sheet you buy, then the film you waste, then details. */

.results-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.result-state {
  font: 600 10px var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warn);
  border: 1px solid rgba(217, 154, 78, 0.4);
  border-radius: 999px;
  padding: 3px 10px;
}
.result-state.is-final { color: var(--cyan); border-color: rgba(53, 220, 245, 0.45); }

.sheet-meta { display: flex; flex-direction: column; gap: 14px; }
.result-size {
  margin: 0;
  font: 700 italic 34px/1 var(--display);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.result-size span { color: var(--faint); font-size: 0.6em; }
.result-caption {
  margin: -8px 0 0;
  font: 500 11px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.fill-bar {
  height: 8px;
  border-radius: 4px;
  background: #151d24;
  overflow: hidden;
  border: 1px solid var(--line-2);
}
.fill-bar i {
  display: block;
  height: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.fill-legend {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
  font: 500 11px var(--mono);
  letter-spacing: 0.06em;
  color: var(--faint);
}
.fill-legend .is-roomy { color: var(--cyan); }

.result-specs { margin: 0; display: flex; flex-direction: column; }
.result-specs > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #151c22;
}
.result-specs dt { font-size: 12px; color: var(--dim); }
.result-specs dd { margin: 0; font: 600 12px var(--mono); color: var(--ink); }
.result-note {
  margin: 0;
  font: 500 12px var(--body);
  color: var(--err);
}
/* Low resolution is amber by default and red only under 150: a soft transfer
   is a judgement call, an unprintable one is not, and colouring both the same
   teaches the operator to skip past both. */
#metaLowDpi { color: var(--warn); }
#metaLowDpi.is-bad { color: var(--err); }

.piece-dpi {
  /* Its own line under the size, not shoved to the right of it. The size row
     is now two boxes and a lock and has no spare width to push into. */
  margin-top: 5px;
  font: 500 10px var(--mono);
  letter-spacing: .04em;
  text-transform: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}
/* A tick, because "this is fine" is worth reading at a glance on a wall of
   cards — the ones without it are the ones that need attention. */
/* The literal glyph, not a ¹3 escape: CSS reads that as ¹ followed by a
   literal "3" and renders "³3". */
.piece-dpi.is-ok::before { content: "✓"; font-weight: 700; }
.piece-dpi.is-ok { color: var(--cyan); opacity: .8; }
.piece-dpi.is-warn { color: var(--warn); }
.piece-dpi.is-bad { color: var(--err); }
.sheet-meta:not([hidden]) + .results-idle { display: none; }
.results-idle { margin: 0; }

/* ── Zoom bar ───────────────────────────────────── */

.zoombar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--line-2);
  background: #0a0e11;
}
.zoom-btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--dim);
  font: 600 11px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.zoom-btn:hover { color: var(--ink); background: rgba(53, 220, 245, 0.07); }
.zoom-btn.is-on { color: var(--cyan); border-color: rgba(53, 220, 245, 0.4); }
.zoom-level {
  min-width: 76px;
  text-align: center;
  font: 600 11px var(--mono);
  color: var(--ink);
  letter-spacing: 0.06em;
}
.zoom-sep { width: 1px; height: 18px; background: var(--line-3); margin: 0 6px; }

.results .export { margin-top: 4px; }

.download-print {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 9px;
  padding: 16px 18px;
  text-align: center;
  background: var(--cyan);
  color: #04151a;
  cursor: pointer;
  box-shadow: 0 0 30px rgba(53, 220, 245, 0.22);
  transition: box-shadow .2s, background .18s;
}
.download-print:hover { background: #6ae7fa; box-shadow: 0 0 42px rgba(53, 220, 245, 0.4); }
.download-icon { font-size: 20px; line-height: 1; margin-right: 8px; vertical-align: -2px; }
.download-label {
  font: 700 italic clamp(16px, 1.4vw, 19px) var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.download-sub {
  display: block;
  margin-top: 4px;
  font: 500 10px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(4, 21, 26, 0.72);
}
.export-btn {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line-3);
  background: transparent;
  border-radius: 7px;
  padding: 11px 14px;
  font: 600 13px var(--body);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.export-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.results-foot {
  margin: auto 0 0;
  font: 400 11px var(--mono);
  color: var(--faint);
  line-height: 1.5;
}

/* ── Footer ─────────────────────────────────────── */

.footer {
  border-top: 1px solid #131b21;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 26px var(--pad);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.footer-note { font: 500 12px var(--mono); color: var(--faint); letter-spacing: 0.06em; }
.footer-note a { color: var(--faint); }
.footer-note a:hover { color: var(--cyan); }

/* ── Responsive ─────────────────────────────────── */

@media (max-width: 1240px) {
  .layout { grid-template-columns: 300px minmax(0, 1fr) 260px; }
}

@media (max-width: 1080px) {
  :root { --pad: 32px; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .hero-demo { justify-self: start; width: 100%; max-width: 420px; }
  .layout { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .controls { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .results { border-left: 0; border-top: 1px solid var(--line-2); }
  .primary { margin-top: 4px; }
  .results-foot { margin-top: 8px; }
}

@media (max-width: 900px) {
  .steps, .compare-grid, .trust { grid-template-columns: minmax(0, 1fr); }
  .trust { gap: 32px; }
}

@media (max-width: 720px) {
  :root { --pad: 20px; }
  .nav { padding: 12px var(--pad); }
  .nav-links { gap: 16px; }
  .nav-links a:not(.nav-cta) { display: none; }
  .hero-inner { padding: 44px var(--pad) 56px; }
  .hero-sub { font-size: 17px; }
  .hero-stats { gap: 24px; }
  .hero-stat-value { font-size: 26px; }
  .section { padding: 60px 0 28px; }
  .tool-section { padding: 0 0 52px; }
  .tool-heading { padding-top: 40px; }
  .threshold-label { font-size: 10px; letter-spacing: 0.18em; padding-inline: 12px; }
  .compare-visual { height: 220px; }
  .btn-primary, .btn-ghost { width: 100%; text-align: center; }

  /* The top bar already says NEST; the descriptor wrapped to four lines. */
  .tag { display: none; }

  /* Give the artwork row room: thumb + details on one line, the stepper and
     remove wrap to a second line instead of crushing the width field. */
  .piece-item { flex-wrap: wrap; }
  .piece-info { flex: 1 1 calc(100% - 52px); }
  .qty { margin-left: auto; }
  .qty, .piece-remove { margin-top: 6px; }
  .piece-size input { width: 88px; }
}

/* ── Accessibility and input-size utilities ─────── */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Looping decoration is suspended while it is off screen. js/reveal.js adds
   and removes the class; without it 31 of 33 animations kept running behind
   the operator while they worked in the tool. */
.anim-paused,
.anim-paused * { animation-play-state: paused !important; }

/* WCAG 2.5.8 wants 24x24 minimum. Touch pointers get the full 44. */
.qty-btn { min-width: 32px; min-height: 32px; }
.piece-remove { width: 32px; height: 32px; }
.field input, .field select { min-height: 40px; }
.seg-btn { min-height: 44px; }
.nav-cta { display: inline-block; padding-block: 13px; }
.footer-note a { display: inline-block; padding-block: 6px; }

@media (pointer: coarse) {
  .qty-btn { min-width: 44px; min-height: 44px; }
  .piece-remove { width: 44px; height: 44px; }
  .field input, .field select, .piece-size input, .ko-keep-val { min-height: 44px; }
  .ko-check { width: 20px; height: 20px; }
  .export-btn, .download-print { min-height: 48px; }
  .nav-links a { padding-block: 8px; }
}


/* ── Tool as its own page ───────────────────────── */

.tool-section.is-page {
  padding-top: 8px;
  border-top: 0;
  box-shadow: none;
  background: var(--bg);
}
.tool-page .tool-section::before { display: none; }
.tool-section.is-page .tool-heading { padding-top: 40px; align-items: flex-end; }
.tool-section.is-page .section-title { font-size: clamp(30px, 3.4vw, 44px); }
.tool-page .footer { margin-top: 8px; }
.nav-back {
  font: 600 13px var(--body);
  color: var(--dim);
  border: 1px solid var(--line-3);
  padding: 9px 18px;
  border-radius: 6px;
  transition: border-color .2s, color .2s;
}
.nav-back:hover { border-color: var(--cyan); color: var(--ink); }

/* ── Landing closer ─────────────────────────────── */

.closer {
  border-top: 1px solid #131b21;
  padding: 88px 0 96px;
  text-align: center;
  background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(53, 220, 245, 0.07), transparent 70%);
}
.closer .section-sub { margin-inline: auto; }
.closer .btn-primary { display: inline-block; margin-top: 32px; font-size: 18px; padding: 17px 40px; }

@media (max-width: 720px) {
  .closer { padding: 60px 0 68px; }
}


/* ── Live draft badge ───────────────────────────── */

.canvas-wrap { position: relative; }
.preview-badge {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(7, 10, 12, 0.9);
  border: 1px solid var(--line-3);
  backdrop-filter: blur(8px);
  font: 600 11px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  white-space: nowrap;
  pointer-events: none;
}
.preview-badge em {
  font: 400 11px var(--body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--faint);
}
.badge-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .preview-badge { font-size: 10px; padding: 6px 12px; }
  .preview-badge em { display: none; }
}

/* ── FillMyFilm workspace skin ──────────────────── */
.tool-page { background: #f6f1e9; }
.tool-page .nav {
  position: sticky; top: 0; z-index: 20; min-height: 74px;
  background: rgba(255, 253, 249, .92); border-color: #e7dfd5;
  backdrop-filter: blur(14px);
}
.fillmyfilm-logo { width: 38px; height: 38px; object-fit: cover; border-radius: 9px; mix-blend-mode: multiply; }
.nav-brand, .brand { gap: 9px; }
.app-wordmark { color: var(--ink); font: 800 16px/1 var(--body); letter-spacing: -.06em; white-space: nowrap; }
.app-wordmark span { color: #f600a7; }
.nav-links a:not(.nav-back) { color: #3d4b62; font-weight: 700; }
.nav-links a:not(.nav-back):hover { color: #f600a7; }
.nav-back { border-radius: 999px; border-color: #071b3d; color: #071b3d; font-weight: 800; }
.nav-back:hover { color: #fff; background: #071b3d; border-color: #071b3d; }
.tool-section.is-page { min-height: calc(100vh - 74px); padding: 0 0 64px; background: radial-gradient(circle at 88% 4%, rgba(0,167,232,.13), transparent 24rem), #f6f1e9; }
.tool-section.is-page .tool-heading { padding-top: clamp(30px, 5vw, 68px); margin-bottom: 24px; }
.tool-eyebrow { margin: 0 0 7px; color: #f600a7; font: 500 10px var(--mono); letter-spacing: .16em; }
.tool-dek { max-width: 290px; margin: 0 0 5px; color: #5c687c; font-size: 13px; font-weight: 600; line-height: 1.5; }
.tool-section.is-page .section-title { color: var(--ink); font-family: var(--display); font-weight: 400; letter-spacing: -.065em; line-height: .98; }
.tool-section.is-page .section-title .chrome { color: var(--ink); }
.tool-section.is-page .section-title .accent { color: #f600a7; }
.tool-shell { border: 1px solid #dcd2c6; border-radius: 18px; box-shadow: 0 22px 60px -38px rgba(7,27,61,.38); background: #fffdf9; }
.topbar { min-height: 65px; padding: 12px 18px; background: #071b3d; border-color: rgba(255,255,255,.12); }
.topbar .app-wordmark { color: #fff; }.topbar .app-wordmark span { color: #f600a7; }
.topbar .fillmyfilm-logo { width: 33px; height: 33px; border-radius: 8px; }
.tag { border-color: rgba(255,255,255,.2); color: #b9c5d6; font-size: 9px; }
.privacy-note { color: #fff; font-size: 9px; }.blip { background: #f600a7; box-shadow: 0 0 0 4px rgba(246,0,167,.14); }
.layout { grid-template-columns: 320px minmax(0, 1fr) 286px; min-height: 690px; }
.panel { background: #fffdf9; }.controls { border-color: #e7dfd5; }.results { border-color: #e7dfd5; }
.panel-label, .field > span { color: #64718a; letter-spacing: .12em; }
.panel > .card + .card { border-color: #e7dfd5; }
.add-artwork { border-color: #cfc4b6; border-radius: 11px; background: #f8f3ec; }.add-artwork:hover { color: var(--ink); border-color: #f600a7; background: #fff1fa; }
.add-artwork-icon { color: #fff; background: #f600a7; border-radius: 8px; }
.field input, .field select, .piece-size input { border-color: #d8cec1; background: #fff; color: #071b3d; border-radius: 8px; }
.field input:focus, .field select:focus, .piece-size input:focus { border-color: #00a7e8; box-shadow: 0 0 0 3px rgba(0,167,232,.12); }
.segmented { border-color: #d8cec1; background: #f6f1e9; }.seg-btn { color: #58677e; }.seg-btn:hover:not(.is-on) { color: #071b3d; background: #e8f8ff; }.seg-btn.is-on { background: #071b3d; color: #fff; }
.check input, .ko-check { accent-color: #f600a7; }.secondary { border-color: #cfc4b6; color: #58677e; }.secondary:hover:not(:disabled) { border-color: #d94269; color: #d94269; }
.stage { background: #071b3d; }.statusbar { background: #071b3d; border-color: rgba(255,255,255,.12); color: #c1cedd; }.statusbar.ok { color: #45d3ff; }
.progress .bar { background: #233a5e; }.progress .bar i { background: #f600a7; }
.canvas-wrap { background: linear-gradient(135deg, rgba(255,255,255,.045) 25%, transparent 25%) 0 0 / 18px 18px, #0a2248; }.empty-state p:first-child { color: #fff; }.empty-state .hint, .empty-state strong { color: #b9c5d6; }
#preview { background: #fff; border-color: rgba(255,255,255,.35); box-shadow: 0 24px 50px -26px #000; }
.preview-badge { color: #071b3d; background: #fffdf9; border: 0; box-shadow: 0 8px 24px rgba(0,0,0,.18); }.badge-dot { background: #f600a7; }
.zoombar { background: #071b3d; border-color: rgba(255,255,255,.12); }.zoom-btn { color: #b9c5d6; }.zoom-btn:hover { color: #fff; background: rgba(255,255,255,.11); }.zoom-btn.is-on { color: #fff; border-color: #00a7e8; }.zoom-level { color: #fff; }.zoom-sep { background: rgba(255,255,255,.18); }
.result-size { color: #071b3d; font-family: var(--display); font-style: normal; letter-spacing: -.06em; }.result-size span { color: #64718a; }.result-caption { color: #64718a; }
.fill-bar { border-color: #d8cec1; background: #f6f1e9; }.fill-bar i { background: linear-gradient(90deg, #00a7e8, #f600a7); }.fill-legend .is-roomy, .piece-dpi.is-ok { color: #008fc8; }
.result-specs > div { border-color: #e7dfd5; }.result-specs dd { color: #071b3d; }
.download-print { background: #f600a7; color: #fff; box-shadow: 0 14px 28px -16px rgba(246,0,167,.7); border-radius: 10px; }.download-print:hover { background: #d90094; box-shadow: 0 16px 34px -15px rgba(246,0,167,.75); }.download-sub { color: rgba(255,255,255,.75); }.download-label { font-family: var(--body); font-style: normal; letter-spacing: -.02em; text-transform: none; }
.artwork-modal, .sheet-setup-modal { background: #fffdf9; border-color: #d8cec1; color: #071b3d; box-shadow: 0 28px 90px rgba(7,27,61,.3); }.artwork-modal::backdrop, .sheet-setup-modal::backdrop { background: rgba(7,27,61,.68); }
.artwork-modal-head, .sheet-setup-head, .modal-privacy, .sheet-setup-foot { border-color: #e7dfd5; }.modal-kicker { color: #f600a7; }.modal-close { border-color: #d8cec1; color: #58677e; }.modal-close:hover { border-color: #f600a7; color: #f600a7; }
.artwork-source.is-active { background: #fff; border-color: #d8cec1; color: #071b3d; }.modal-dropzone { border-color: rgba(0,167,232,.65); background: #f4fbff; }.modal-dropzone:hover, .modal-dropzone:focus-visible { border-color: #f600a7; background: #fff1fa; }.modal-dropzone.drag { border-color: #f600a7; background: #fff1fa; }.dropzone-icon { color: #00a7e8; }.dropzone-title { color: #071b3d; }.dropzone-cta, .setup-continue { background: #071b3d; color: #fff; border-radius: 999px; }.sheet-setup-preview { background: #f6f1e9; border-color: #e7dfd5; }
/* A tall draft belongs inside the preview scroller, never on top of the setup action. */
.sheet-setup-preview .canvas-wrap { min-height: 0; overflow: auto; }
.piece-item { border-color: #d8cec1; background: #fff; box-shadow: 0 6px 16px -14px rgba(7,27,61,.35); }.piece-thumb { background: repeating-conic-gradient(#eef0f5 0 25%, #fff 0 50%) 0 0 / 12px 12px; }.qty { background: #f6f1e9; border-color: #d8cec1; }.qty-val { color: #071b3d; }.piece-item .piece-remove { background: rgba(255,253,249,.88); }.piece-remove { background: #fff; border-color: #d8cec1; color: #58677e; }.piece-remove:hover { color: #d94269; border-color: #d94269; }
@media (max-width: 980px) { .layout { grid-template-columns: 300px minmax(0,1fr); }.results { grid-column: 1 / -1; border-top: 1px solid #e7dfd5; border-left: 0; }.tool-dek { display: none; } }
@media (max-width: 720px) { .tool-section.is-page .tool-heading { padding-top: 28px; }.tool-heading { align-items: flex-start; }.topbar .tag { display: none; }.topbar { padding: 12px 14px; }.privacy-note { font-size: 8px; }.layout { grid-template-columns: 1fr; }.controls, .results { border: 0; border-bottom: 1px solid #e7dfd5; }.stage { min-height: 530px; }.fillmyfilm-logo { width: 32px; height: 32px; }.nav-links a:not(.nav-back) { display: none; } }