/* =========================================================
   Workflow Ops — site styles
   Format: product-site language. Near-black canvas, hairline
   rules, oversized display type, pill controls, a framed
   product panel in the hero, and a bento feature grid.
   ========================================================= */

:root {
  --bg: #05070C;
  --panel: #080B12;
  --panel-2: #0B0F17;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.17);
  --text: #F2F6FD;
  --muted: #96A3B8;
  --muted-dim: #728096;
  --cyan: #22D6E8;
  --cyan-bright: #3BE4EF;
  --blue: #2B7BF2;
  --ink: #071021;

  --font-display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 16px;
  --radius-sm: 9px;
  --max: 1160px;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* ---------- Ambient background ----------
   One soft light field drifting behind a hairline grid that fades out below
   the fold. A single element and a transform-only animation, so the
   compositor moves one texture instead of repainting the page. */

.bg-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.bg-glow {
  position: absolute;
  inset: -4%;
  display: block;
  background:
    radial-gradient(circle at 16% 10%, rgba(34, 214, 232, 0.16), rgba(34, 214, 232, 0.05) 34%, rgba(34, 214, 232, 0) 60%),
    radial-gradient(circle at 92% 30%, rgba(43, 123, 242, 0.19), rgba(43, 123, 242, 0.06) 36%, rgba(43, 123, 242, 0) 64%),
    radial-gradient(circle at 34% 94%, rgba(34, 214, 232, 0.10), rgba(34, 214, 232, 0.03) 38%, rgba(34, 214, 232, 0) 66%);
  will-change: transform;
  transform: translate3d(0, 0, 0);
  animation: drift-glow 68s ease-in-out infinite alternate;
}

.bg-grid {
  position: absolute;
  inset: 0;
  display: block;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.036) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.036) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 78% 55% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 82%);
  mask-image: radial-gradient(ellipse 78% 55% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 82%);
}

@keyframes drift-glow {
  from { transform: translate3d(-1.6%, 1.2%, 0); }
  to   { transform: translate3d(1.6%, -1.6%, 0); }
}

/* Keep page content above the ambience. */
main,
.site-footer {
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  .bg-grid { background-size: 48px 48px; }
  .bg-field { opacity: 0.85; }
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: rgba(34, 214, 232, 0.28); }

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

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 32px);
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-size: 0.85rem;
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 7, 12, 0.78);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.brand-mark { width: 26px; height: 26px; flex: none; overflow: visible; }

.brand-word-accent { color: var(--cyan); margin-left: 0.16ch; }

/* The header needle is aimed by main.js; the origin stays at the pivot. */
.brand .needle { transform-origin: 24px 24px; }

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: 18px;
  font-size: 0.875rem;
  color: var(--muted);
}
.nav a { transition: color 0.15s ease; }
.nav a:hover { color: var(--text); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.nav-cta { flex: none; }

.nav-toggle {
  display: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 14px;
  height: 1.5px;
  margin: 3px auto;
  background: var(--text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: #fff; color: #06080E; }
.btn-primary:hover { background: #E8EDF6; }

.btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--line-strong);
  color: var(--text);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.28); }

.btn-sm { padding: 9px 15px; font-size: 0.84rem; }
.btn-block { width: 100%; }

.btn-arrow { width: 15px; height: 15px; flex: none; transition: transform 0.16s ease; }
.btn:hover .btn-arrow { transform: translateX(2px); }

.btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  /* The pointer light can travel past the right edge; clip only sideways so
     it never adds a horizontal scrollbar, and let it still spill vertically. */
  overflow-x: clip;
  padding-block: clamp(52px, 7.5vw, 92px) clamp(48px, 6vw, 76px);
}

/* The oversized compass ring from the mark. Drawn once as SVG, sized to stay
   inside the hero vertically (the hero only clips sideways), and turning so
   slowly that it reads as ambient rather than animated. */
.hero-compass {
  position: absolute;
  top: clamp(-140px, -8vw, -60px);
  right: clamp(-220px, -10vw, -120px);
  /* The global `svg { max-width: 100% }` rule would shrink this to the
     column width, so it opts out and lets the hero clip it instead. */
  width: clamp(520px, 74vw, 1040px);
  max-width: none;
  aspect-ratio: 1;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
  transform-origin: 50% 50%;
  will-change: transform;
  animation: compass-turn 260s linear infinite;
}

@keyframes compass-turn {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* A soft highlight that trails the cursor across the hero. It stays at zero
   opacity until main.js adds .is-lit; that only happens for a hovering fine
   pointer, never for touch or reduced-motion visitors. */
.hero-spot {
  position: absolute;
  top: 0;
  left: 0;
  width: min(860px, 130vmin);
  aspect-ratio: 1;
  margin-top: calc(min(860px, 130vmin) / -2);
  margin-left: calc(min(860px, 130vmin) / -2);
  border-radius: 50%;
  /* Brighter than the first pass (0.11, 760px) but still inside AA: with the
     ambient glow behind it, the lede sits at 4.6:1 where the cursor touches
     it. 0.20 is where that number starts slipping under 4.5. */
  background: radial-gradient(circle,
    rgba(59, 228, 239, 0.17),
    rgba(34, 214, 232, 0.08) 38%,
    rgba(34, 214, 232, 0) 72%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.4s ease;
}

.hero.is-lit .hero-spot { opacity: 1; }

/* Keep the hero copy and panel above the light. */
.hero > .container {
  position: relative;
  z-index: 1;
}

.hero h1 {
  max-width: 19ch;
  font-size: clamp(2.4rem, 6vw, 4.75rem);
  font-weight: 600;
  line-height: 0.99;
  letter-spacing: -0.03em;
}

.hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: clamp(28px, 4vw, 40px);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.hero-new {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.86rem;
  color: var(--muted);
  transition: color 0.16s ease;
}
.hero-new:hover { color: var(--text); }
.hero-new svg { width: 14px; height: 14px; }

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(34, 214, 232, 0.14);
}

.hero-lede {
  max-width: 54ch;
  margin-top: clamp(20px, 2.6vw, 26px);
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  line-height: 1.6;
  color: var(--muted);
}

/* Product panel */

.shot { margin: clamp(36px, 5vw, 56px) 0 0; }

.shot-window {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  overflow: hidden;
  background: var(--panel);
  box-shadow:
    0 40px 120px -60px rgba(34, 214, 232, 0.55),
    0 0 0 1px rgba(5, 7, 12, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.shot-window::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59, 228, 239, 0.75), rgba(43, 123, 242, 0.4), transparent);
}

.shot-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding-inline: 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.shot-dots { display: inline-flex; gap: 6px; }
.shot-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.shot-url {
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  color: var(--muted-dim);
}

.shot-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 3px 9px;
  border: 1px solid rgba(34, 214, 232, 0.35);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
}
.shot-live::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.shot-body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

.shot-main { padding: 20px; min-width: 0; }

.shot-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.shot-title {
  margin-right: 6px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
}

.shot-chip {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.7rem;
  color: var(--muted-dim);
  white-space: nowrap;
}
.shot-chip.is-on {
  background: #fff;
  border-color: #fff;
  color: #06080E;
  font-weight: 500;
}

.jobs li {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) 118px 92px 44px;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.8rem;
}
.jobs li:last-child { border-bottom: 0; }

.job-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.jobs li:nth-child(1) .job-dot,
.jobs li:nth-child(5) .job-dot { background: var(--cyan); }

.job-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-client { color: var(--muted-dim); font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-due { color: var(--muted-dim); font-size: 0.72rem; text-align: right; }

.pill {
  justify-self: start;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 500;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.07);
  color: var(--muted);
}
.pill.is-active { background: rgba(34, 214, 232, 0.16); color: #8CEEF7; }
.pill.is-blocked { background: rgba(224, 90, 90, 0.18); color: #F3A3A3; }
.pill.is-done { background: rgba(74, 222, 128, 0.14); color: #9BEBB6; }

.shot-side {
  padding: 20px;
  border-left: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.015);
}

.shot-side-title {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

.automations { margin-top: 12px; display: grid; gap: 10px; }

.automations li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  color: var(--muted);
}
.automations .tick {
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(34, 214, 232, 0.5);
  position: relative;
}
.automations .tick::after {
  content: "";
  position: absolute;
  inset: 3px 3.5px 4px 3px;
  border-left: 1.2px solid var(--cyan);
  border-bottom: 1.2px solid var(--cyan);
  transform: rotate(-45deg);
}
.auto-time { margin-left: auto; font-size: 0.68rem; color: var(--muted-dim); }

.shot-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 74px;
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.shot-chart span {
  flex: 1;
  height: var(--h, 40%);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--cyan), rgba(43, 123, 242, 0.35));
  opacity: 0.85;
}

.shot-side-note {
  margin-top: 12px;
  font-size: 0.74rem;
  color: var(--muted-dim);
}
.shot-side-note strong { color: var(--text); font-weight: 600; }

.shot figcaption {
  margin-top: 14px;
  font-size: 0.76rem;
  color: var(--muted-dim);
}

/* ---------- Sections ---------- */

.section {
  border-top: 1px solid var(--line);
  padding-block: clamp(56px, 8vw, 100px);
}

.section-head { margin-bottom: clamp(32px, 4.5vw, 48px); }

.section-head h2 {
  max-width: 20ch;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.06;
  letter-spacing: -0.026em;
}

.section-head p {
  max-width: 58ch;
  margin-top: 18px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- Bento grid ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2.6vw, 28px);
  min-height: 250px;
  background: var(--bg);
  transition: background-color 0.2s ease;
}
.tile:hover { background: #080B13; }

.tile h3 {
  margin-top: auto;
  font-size: 1.02rem;
  letter-spacing: -0.015em;
}

.tile p {
  max-width: 42ch;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--muted);
}

/* Mock UI inside tiles */

.mock {
  display: flex;
  gap: 8px;
  height: 96px;
  margin-bottom: 8px;
  align-items: center;
}

.mock-rows { flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; }
.mock-rows span {
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 10px;
}
.mock-rows i {
  width: 13px;
  height: 13px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 3.5px;
}
.mock-rows span:nth-child(1) i { border-color: var(--cyan); background: rgba(34, 214, 232, 0.22); }
.mock-rows b {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
}
.mock-rows span:nth-child(2) b { width: 78%; }
.mock-rows span:nth-child(3) b { width: 62%; }
.mock-rows em {
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.mock-flow { gap: 0; }
.mock-flow span {
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  font-size: 0.7rem;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
}
.mock-flow span:nth-of-type(2) { border-color: rgba(34, 214, 232, 0.45); color: var(--text); }
.mock-flow i {
  position: relative;
  width: 18px;
  height: 1px;
  flex: none;
  background: var(--line-strong);
}
.mock-flow i::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2.5px;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
  transform: rotate(45deg);
}

.mock-chart { align-items: flex-end; padding-bottom: 2px; }
.mock-chart span {
  flex: 1;
  height: var(--h, 40%);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, rgba(34, 214, 232, 0.9), rgba(43, 123, 242, 0.25));
}

.mock-files { flex-direction: column; align-items: stretch; justify-content: center; gap: 11px; }
.mock-files span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.72rem;
  color: var(--muted);
}
.mock-files i {
  width: 12px;
  height: 14px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 2.5px;
  position: relative;
}
.mock-files i::after {
  content: "";
  position: absolute;
  inset: auto 2.5px 3px 2.5px;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
}
.mock-files em { margin-left: auto; font-style: normal; font-size: 0.66rem; color: var(--muted-dim); }

.mock-doc {
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 9px;
  width: 62%;
  height: 92px;
  margin-inline: auto;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
}
.mock-doc .doc-line {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.16);
}
.mock-doc .doc-line.is-key {
  width: 68%;
  background: rgba(34, 214, 232, 0.65);
}
.mock-doc .doc-line.short { width: 46%; }
.mock-doc em {
  position: absolute;
  top: -9px;
  right: -9px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--cyan);
  color: var(--ink);
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.mock-uptime { flex-direction: column; justify-content: center; gap: 2px; }
.mock-uptime strong {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}
.mock-uptime span { font-size: 0.72rem; color: var(--muted-dim); }

/* ---------- Process ---------- */

.spec { border-top: 1px solid var(--line); }

.spec li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 104px;
  gap: clamp(16px, 3vw, 40px);
  align-items: start;
  padding: clamp(20px, 2.6vw, 26px) 0;
  border-bottom: 1px solid var(--line);
}

.spec-num {
  font-size: 0.78rem;
  color: var(--muted-dim);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.spec-copy h3 { font-size: 1.12rem; letter-spacing: -0.02em; }

.spec-copy p {
  max-width: 56ch;
  margin-top: 8px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
}

.spec-time {
  justify-self: end;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--muted-dim);
  white-space: nowrap;
}

/* ---------- Form fields ---------- */

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.field { display: grid; gap: 7px; }

.field label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
}
.optional { font-weight: 400; color: var(--muted-dim); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
  appearance: none;
}

.field textarea { resize: vertical; min-height: 108px; line-height: 1.55; }

.field input::placeholder,
.field textarea::placeholder { color: var(--muted-dim); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: rgba(34, 214, 232, 0.6);
  box-shadow: 0 0 0 3px rgba(34, 214, 232, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

.field input:user-invalid,
.field textarea:user-invalid { border-color: rgba(255, 122, 122, 0.6); }

input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.45; }

/* ---------- Playground ---------- */

.playground {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 16px;
  align-items: stretch;
}

.demo-panel,
.preview-shell {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.demo-panel {
  display: grid;
  gap: 15px;
  align-content: start;
  padding: clamp(18px, 2.4vw, 26px);
}

.demo-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.demo-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
}

.demo-hint,
.demo-note { font-size: 0.72rem; color: var(--muted-dim); }

.field-narrow { max-width: 210px; }

.check-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

.check-label { font-size: 0.86rem; color: var(--text); }

.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}

.segmented input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.segmented label {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.16s ease, background-color 0.16s ease;
}

.segmented label:hover { color: var(--text); }

.segmented input:checked + label { background: #fff; color: #06080E; }

.segmented input[value="fail"]:checked + label { background: #E05A5A; color: #fff; }
.segmented input[value="na"]:checked + label { background: #3B4859; color: #ECF2FB; }

.segmented input:focus-visible + label { outline: 2px solid var(--cyan); outline-offset: 2px; }

.preview-shell {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.preview-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 0.72rem;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
}

.preview-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}

.preview-body {
  flex: 1;
  min-height: 430px;
  display: flex;
  padding: 16px;
  background: rgba(255, 255, 255, 0.012);
}

.preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
}

/* On-page facsimile of the generated PDF */

.pdf-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  color: #16233B;
  box-shadow: 0 22px 44px -28px rgba(0, 0, 0, 0.9);
}

.pdf-head {
  position: relative;
  padding: 18px 20px 20px;
  background: #0B172F;
  color: #fff;
}
.pdf-head::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan-bright), var(--blue));
}

.pdf-brand { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.pdf-mark { width: 22px; height: 22px; flex: none; }
.pdf-wordmark {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.pdf-wordmark span { color: var(--cyan); margin-left: 0.28ch; }

.pdf-kicker {
  margin: 0;
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #A2B3CB;
}

.pdf-title {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}

.pdf-site { margin: 2px 0 0; font-size: 10.5px; color: #C4D2E6; }

.pdf-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #E3E9F2;
}

.pdf-label {
  display: block;
  margin: 0 0 3px;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7D8FA9;
}
.pdf-value { font-size: 11.5px; color: #16233B; }

.pdf-list-label { padding: 14px 20px 4px; }

.pdf-rows { margin: 0; padding: 0 20px; list-style: none; }
.pdf-rows li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #EDF1F7;
  font-size: 11.5px;
  color: #16233B;
}

.pdf-pill {
  display: inline-flex;
  justify-content: center;
  padding: 3px 0;
  border-radius: 3px;
  background: var(--cyan);
  color: var(--ink);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.pdf-pill.fail { background: #E05A5A; color: #fff; }
.pdf-pill.na { background: #6B7C93; color: #fff; }
.pdf-num { font-size: 9.5px; color: #93A2B8; }

.pdf-summary {
  margin: 14px 20px 0;
  padding: 12px 14px;
  border-left: 3px solid var(--cyan);
  border-radius: 0 6px 6px 0;
  background: #F2F5FA;
}
.pdf-result { font-size: 12.5px; font-weight: 700; color: #0F1B2D; }
.pdf-result-note { margin-top: 3px; font-size: 10.5px; line-height: 1.45; color: #5A6B85; }

.pdf-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding: 14px 20px 16px;
  border-top: 1px solid #E3E9F2;
  font-size: 9px;
  color: #5A6B85;
}

/* ---------- Why ---------- */

.why {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.why-intro h2 {
  max-width: 16ch;
  font-size: clamp(1.85rem, 3.4vw, 2.7rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
}

.why-intro > p {
  max-width: 44ch;
  margin-top: 18px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
}

.quote {
  margin: clamp(28px, 4vw, 40px) 0 0;
  padding-left: 20px;
  border-left: 2px solid var(--cyan);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--text);
}
.quote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-style: normal;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--muted-dim);
}

.why-list { border-top: 1px solid var(--line); }

.why-list li {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.why-list h3 { font-size: 0.98rem; letter-spacing: -0.015em; }

.why-list p {
  max-width: 50ch;
  margin-top: 7px;
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- Engagements ---------- */

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(20px, 2.4vw, 26px);
  background: var(--bg);
}

.plan-featured {
  background: #0A0E16;
  box-shadow: inset 0 0 0 1px rgba(34, 214, 232, 0.28);
}

.plan-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(34, 214, 232, 0.14);
  color: var(--cyan);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.plan-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.plan-for { font-size: 0.82rem; color: var(--muted-dim); }

.plan-list {
  display: grid;
  gap: 9px;
  margin: 14px 0 26px;
}

.plan-list li {
  position: relative;
  padding-left: 16px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--muted);
}
.plan-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 1px;
  background: var(--cyan);
  opacity: 0.7;
}

.plan .btn { margin-top: auto; width: 100%; }

/* ---------- FAQ ---------- */

.faq { max-width: 900px; }

.faq-list { border-top: 1px solid var(--line); }

.faq-list details { border-bottom: 1px solid var(--line); }

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition: color 0.16s ease;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--cyan); }

.faq-list summary::after {
  content: "+";
  flex: none;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--muted-dim);
  transition: transform 0.2s ease, color 0.2s ease;
}
.faq-list details[open] summary::after {
  content: "−";
  color: var(--cyan);
}

.faq-list details p {
  max-width: 64ch;
  padding: 0 0 20px;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--muted);
}

/* ---------- Contact ---------- */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.contact-copy h2 {
  max-width: 15ch;
  font-size: clamp(1.85rem, 3.4vw, 2.7rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
}

.contact-copy > p {
  max-width: 42ch;
  margin-top: 18px;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--muted);
}

.contact-list {
  display: grid;
  gap: 14px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.contact-list li {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  font-size: 0.88rem;
  color: var(--text);
}

.contact-label {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--muted-dim);
}

.contact-list a { border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; }
.contact-list a:hover { color: var(--cyan); border-color: rgba(34, 214, 232, 0.5); }

/* ---------- Wizard ---------- */

.wizard {
  display: grid;
  gap: 15px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.wizard-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.wizard-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.wizard-progress-text {
  font-size: 0.7rem;
  color: var(--muted-dim);
  font-variant-numeric: tabular-nums;
}

.wizard-track {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.wizard-track span {
  display: block;
  width: 33.33%;
  height: 100%;
  border-radius: 999px;
  background: var(--cyan);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.wizard-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 0.74rem;
  color: var(--muted-dim);
}

.wizard-steps li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 0.16s ease;
}

.wizard-steps li::before {
  content: attr(data-step);
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--muted);
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.wizard-steps li.is-active { color: var(--text); }
.wizard-steps li.is-active::before { border-color: #fff; background: #fff; color: #06080E; }
.wizard-steps li.is-done::before { border-color: rgba(34, 214, 232, 0.5); color: var(--cyan); }

.wizard-panel { display: grid; gap: 14px; }
.wizard-panel[hidden] { display: none; }

.wizard-question {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.wizard-help { margin-top: 4px; font-size: 0.8rem; color: var(--muted-dim); }

.options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.84rem;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.option:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--text); }

.option input {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: none;
  margin: 0;
  border: 1.5px solid var(--line-strong);
  background: transparent;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

.option input[type="checkbox"] { border-radius: 4px; }
.option input[type="radio"] { border-radius: 50%; }

.option input:checked { border-color: #fff; background: #fff; }

.option input[type="checkbox"]:checked::after {
  content: "";
  width: 8px;
  height: 4.5px;
  border-left: 1.7px solid #06080E;
  border-bottom: 1.7px solid #06080E;
  transform: rotate(-45deg) translate(0, -1px);
}

.option input[type="radio"]:checked::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #06080E;
}

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

.option:has(input:checked) {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
}

.wizard-error {
  min-height: 1.1em;
  font-size: 0.76rem;
  color: #FF9B9B;
}

.wizard-recap {
  padding: 12px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--muted);
}
.wizard-recap strong { color: var(--text); font-weight: 600; }

.wizard-actions { display: flex; gap: 10px; margin-top: 2px; }
.wizard-actions .btn-primary { flex: 1; }

.wizard-note { font-size: 0.72rem; line-height: 1.55; color: var(--muted-dim); }

.form-status {
  min-height: 1.2em;
  font-size: 0.8rem;
  color: var(--cyan);
}
.form-status.is-error { color: #FF9B9B; }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(40px, 6vw, 64px) 22px;
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
}

.footer-brand .brand { font-size: 1.05rem; }

.footer-tagline {
  max-width: 34ch;
  margin-top: 14px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--muted-dim);
}

.footer-nav {
  display: grid;
  gap: 9px;
  align-content: start;
  font-size: 0.85rem;
  color: var(--muted);
}
.footer-nav a:hover { color: var(--text); }

.footer-contact {
  display: grid;
  gap: 9px;
  align-content: start;
  justify-items: start;
  font-size: 0.85rem;
  color: var(--muted);
}
.footer-contact a { border-bottom: 1px solid var(--line-strong); }
.footer-contact a:hover { color: var(--cyan); }
.footer-contact span { font-size: 0.76rem; color: var(--muted-dim); }

.footer-giant {
  margin: clamp(36px, 6vw, 64px) 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 12.5vw, 9rem);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: rgba(255, 255, 255, 0.05);
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: clamp(24px, 3vw, 36px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--muted-dim);
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .nav { gap: 20px; margin-left: 8px; }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }

  .nav {
    position: absolute;
    inset: 64px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px clamp(20px, 4vw, 32px) 16px;
    border-bottom: 1px solid var(--line);
    background: rgba(5, 7, 12, 0.98);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    display: none;
    font-size: 0.95rem;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 11px 0; border-bottom: 1px solid var(--line); }
  .nav a:last-child { border-bottom: 0; }

  .shot-body { grid-template-columns: minmax(0, 1fr); }
  .shot-side { border-left: 0; border-top: 1px solid var(--line); }

  .why,
  .contact,
  .playground { grid-template-columns: minmax(0, 1fr); }

  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan:last-child { grid-column: 1 / -1; }

  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .jobs li { grid-template-columns: 7px minmax(0, 1fr) auto; }
  .job-client,
  .job-due { display: none; }

  .bento { grid-template-columns: minmax(0, 1fr); }
  .tile { min-height: 0; }

  .spec li { grid-template-columns: 34px minmax(0, 1fr); }
  .spec-time { grid-column: 2; justify-self: start; margin-top: 4px; }

  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan:last-child { grid-column: auto; }

  .options { grid-template-columns: minmax(0, 1fr); }

  .check-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  .form-row { grid-template-columns: minmax(0, 1fr); }

  .preview-body { min-height: 380px; padding: 12px; }

  .contact-list li { grid-template-columns: minmax(0, 1fr); gap: 2px; }

  .footer-top { grid-template-columns: minmax(0, 1fr); }

  .hero-new { order: 3; }
}

@media (max-width: 480px) {
  .nav-cta { padding: 8px 12px; font-size: 0.78rem; }
  .hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .shot-main, .shot-side { padding: 14px; }
  .shot-toolbar .shot-chip:not(.is-on) { display: none; }
  .jobs li { font-size: 0.76rem; }
}

/* Narrow phones: tighten the header so the CTA, wordmark and menu fit. */
@media (max-width: 400px) {
  .container { padding-inline: 16px; }
  .header-inner { gap: 10px; }
  .header-actions { gap: 8px; }
  .brand { font-size: 0.9rem; gap: 7px; }
  .brand-mark { width: 22px; height: 22px; }
  .nav-cta { padding: 8px 11px; font-size: 0.74rem; }
}

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

  /* Freeze the ambience at a composed frame instead of its start position. */
  .bg-glow { transform: translate3d(0.6%, -1.2%, 0); }
  .hero-compass { animation: none; }
}

/* ---------- Proof ---------- */
/* Rendered by proof.js; the section stays hidden until a real entry exists. */

.proof {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  margin-top: clamp(20px, 3vw, 32px);
}

.proof-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.4vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.proof-outcome {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--cyan);
}

.proof-quote {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
}

.proof-shot {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.proof-who {
  margin-top: auto;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted-dim);
}

/* ---------- Composed brief ---------- */

.wizard-result {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--cyan);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(34, 214, 232, 0.05);
}

/* An author `display` beats the UA rule for [hidden], so it needs the same
   guard the wizard panels carry. */
.wizard-result[hidden] { display: none; }

.wizard-result-title { font-weight: 600; color: var(--text); }
.wizard-result-help { font-size: 0.8rem; line-height: 1.5; color: var(--muted); }

.wizard-brief {
  width: 100%;
  min-height: 168px;
  padding: 11px 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.79rem;
  line-height: 1.55;
  color: var(--text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  resize: vertical;
}

.wizard-brief:focus {
  outline: none;
  border-color: rgba(34, 214, 232, 0.6);
  box-shadow: 0 0 0 3px rgba(34, 214, 232, 0.12);
}

.wizard-result-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.wizard-address { font-size: 0.8rem; line-height: 1.5; color: var(--muted); }
.wizard-address a { color: var(--cyan); }

/* ---------- Touch and small-screen ergonomics ----------
   Mobile Safari zooms the viewport when a focused field is under 16px, and
   targets below 44px are miss-prone. Scoped to narrow screens and coarse
   pointers so the desktop density is unchanged. */

@media (max-width: 640px), (pointer: coarse) {
  .field input,
  .field select,
  .field textarea,
  .wizard-brief,
  .option {
    font-size: 16px;
  }

  .btn,
  .btn-sm,
  .nav-toggle,
  .hero-new,
  .option {
    min-height: 44px;
  }

  .nav-toggle { width: 44px; height: 44px; }
  .hero-new { padding-block: 10px; }
}