/* ==========================================================================
   Tixely — shared stylesheet
   Brand (fixed): Eerie Black #1b1b1b · Selective Yellow #ffb81c · White #ffffff
   Type (fixed): Montserrat (700 / 500 / 400) · Gochi Hand for small accents
   Depth: flat. No soft/blurred shadows or glows. Hard-edged offsets (4px 4px 0) are
   part of the pixel motif and allowed.
   Motif: the logomark is built on a grid of squares — squares are reused as
   list bullets and phase markers. Filled buttons show a design-tool style
   selection frame (violet outline + corner handles) on hover and focus.
   Corners: square everywhere. No border-radius anywhere in this file.
   ========================================================================== */

:root {
  /* Brand */
  --ink: #1b1b1b;
  --yellow: #ffb81c;
  --white: #ffffff;

  /* Tints & shades derived from the brand palette */
  --ink-2: #262626;        /* raised surface on dark */
  --ink-3: #333333;        /* borders on dark */
  --cream: #fffaf0;        /* white warmed toward the accent */
  --yellow-soft: #fff1cc;  /* highlight fills */
  --yellow-deep: #e9a100;  /* pressed state for yellow buttons */
  --line: #e9e5dc;
  --muted: #595959;        /* 7:1 on white */
  --muted-dark: #bdbdbd;   /* 10:1 on ink */

  /* The heavy black outline around boxes (cards, tables, toggles): one setting so they all match.
     Inner dividers (table rows) stay thin. */
  --frame: 4px solid var(--ink);

  /* Semantic defaults (light surface) */
  --bg: var(--white);
  --fg: var(--ink);
  --fg-muted: var(--muted);
  --border: var(--line);
  --focus: var(--ink);
  --eyebrow: var(--ink);

  /* Type */
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-hand: "Gochi Hand", "Comic Sans MS", cursive;
  --fs-sm: 0.875rem;
  --fs-base: 1.0625rem;
  --fs-lead: clamp(1.125rem, 1.6vw, 1.25rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
  --fs-h2: clamp(2rem, 4.2vw, 3rem);
  --fs-h1: clamp(2.625rem, 6.4vw, 4.75rem);

  /* Space (4/8 rhythm) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section-y: clamp(72px, 10vw, 128px);
  --gutter: clamp(16px, 4vw, 32px);
  --container: 1160px;

  /* Selection frame (button hover/focus) — the only non-brand color,
     borrowed from design-tool selection boxes */
  --select: #8b3dff;
  --frame-w: 2px;
  --handle: 10px;

  /* Motion — micro-interactions only */
  --dur: 180ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Layers */
  --z-tip: 20;
  --z-nav: 100;
  --z-skip: 1000;

  --nav-h: 64px;
  --bottomnav-h: 72px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
h4 { font-size: 1.0625rem; font-weight: 700; letter-spacing: 0; }
p { text-wrap: pretty; }
strong { font-weight: 700; }

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a, button, [role="button"], label { touch-action: manipulation; }

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

[id] { scroll-margin-top: calc(var(--nav-h) + 32px); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; left: var(--s-4); top: var(--s-4); z-index: var(--z-skip);
  padding: var(--s-3) var(--s-4); background: var(--yellow); color: var(--ink);
  font-weight: 700; text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- Surfaces ---------- */
.surface-dark {
  --bg: var(--ink);
  --fg: var(--white);
  --fg-muted: var(--muted-dark);
  --border: var(--ink-3);
  --focus: var(--yellow);
  --eyebrow: var(--yellow);
  background: var(--bg);
  color: var(--fg);
}
.surface-cream { --bg: var(--cream); background: var(--bg); }
.surface-yellow {
  --bg: var(--yellow);
  --fg: var(--ink);
  --fg-muted: #3d3d3d;
  --border: rgba(27, 27, 27, 0.2);
  --focus: var(--ink);
  --eyebrow: var(--ink);
  background: var(--bg);
  color: var(--fg);
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }

/* Full-screen sections: each fills at least one screen and centres its content.
   Taller sections (e.g. Pricing) simply grow. The final CTA + footer are excluded
   so they sit together at their natural height. */
.hero, .page-hero, .section {
  --screen-h: 100vh;
  min-height: var(--screen-h);
  display: flex; flex-direction: column; justify-content: center;
}
@supports (height: 100svh) { .hero, .page-hero, .section { --screen-h: 100svh; } }
@media (max-width: 899px) { /* leave room for the fixed bottom nav */
  .hero, .page-hero, .section { min-height: calc(var(--screen-h) - var(--bottomnav-h) - env(safe-area-inset-bottom, 0px)); }
}
.section__head { display: grid; gap: var(--s-4); max-width: 760px; margin-bottom: clamp(40px, 6vw, 64px); }
.section__head p { color: var(--fg-muted); font-size: var(--fs-lead); max-width: 60ch; }
.stack > * + * { margin-top: var(--s-4); }

/* ---------- Type helpers ---------- */
.eyebrow {
  font-family: var(--font-hand);
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--eyebrow);
}
.lead { font-size: var(--fs-lead); color: var(--fg-muted); }
.subhead { font-weight: 500; font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.35; letter-spacing: -0.01em; }
.label {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted);
}
.hand { font-family: var(--font-hand); font-weight: 400; letter-spacing: 0.01em; }

/* Hand-drawn yellow underline for a single accent word */
.scribble {
  position: relative;
  white-space: nowrap;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 11 C 40 4, 80 4, 120 8 S 180 13, 197 6' fill='none' stroke='%23ffb81c' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 0.32em;
  background-position: 0 100%;
  padding-bottom: 0.12em;
}

/* Square bullets — the logomark's pixel */
.list-squares { display: grid; gap: var(--s-3); }
.list-squares li { position: relative; padding-left: 26px; }
.list-squares li::before {
  content: ""; position: absolute; left: 2px; top: 0.62em;
  width: 9px; height: 9px; background: var(--yellow);
}
.surface-yellow .list-squares li::before { background: var(--ink); }

/* ---------- Buttons & links ---------- */
.btn {
  --btn-bg: var(--yellow);
  --btn-fg: var(--ink);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 52px; padding: 0 26px;
  border: 0; background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center;
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--dur) var(--ease); }
.btn:hover svg { transform: translateX(2px); }
.btn:active { background: var(--yellow-deep); }
.btn--dark { --btn-bg: var(--ink); --btn-fg: var(--white); }
.btn--dark:active { background: #000; }

/* Selection-frame hover — like a selected object in a design tool: a thin
   violet frame with square handles on the corners. Used on every filled button.
   ::before draws the frame, ::after draws the four handles. Nothing moves. */
.btn, .pkg__note { --frame-offset: -2px; }
.btn::before, .btn::after,
.pkg__note::before, .pkg__note::after {
  content: ""; position: absolute; pointer-events: none;
  opacity: 0; transition: opacity 120ms var(--ease);
}
.btn::before, .pkg__note::before {
  inset: var(--frame-offset);
  border: var(--frame-w) solid var(--select);
}
.btn::after, .pkg__note::after { /* 10px handles centred on the frame's corners */
  inset: calc(var(--frame-offset) + var(--frame-w) / 2 - var(--handle) / 2);
  --h-in: calc(var(--handle) - 2 * var(--frame-w));
  background:
    linear-gradient(var(--white), var(--white)) left var(--frame-w) top var(--frame-w) / var(--h-in) var(--h-in) no-repeat,
    linear-gradient(var(--white), var(--white)) right var(--frame-w) top var(--frame-w) / var(--h-in) var(--h-in) no-repeat,
    linear-gradient(var(--white), var(--white)) left var(--frame-w) bottom var(--frame-w) / var(--h-in) var(--h-in) no-repeat,
    linear-gradient(var(--white), var(--white)) right var(--frame-w) bottom var(--frame-w) / var(--h-in) var(--h-in) no-repeat,
    linear-gradient(var(--select), var(--select)) left top / var(--handle) var(--handle) no-repeat,
    linear-gradient(var(--select), var(--select)) right top / var(--handle) var(--handle) no-repeat,
    linear-gradient(var(--select), var(--select)) left bottom / var(--handle) var(--handle) no-repeat,
    linear-gradient(var(--select), var(--select)) right bottom / var(--handle) var(--handle) no-repeat;
}
@media (hover: hover) {
  .btn:hover::before, .btn:hover::after { opacity: 1; }
}
/* The "website included" sticker isn't interactive — it wears the frame permanently */
.pkg__note::before, .pkg__note::after { opacity: 1; }
/* Keyboard focus gets the same frame instead of the default outline */
.btn:focus-visible { outline: none; }
.btn:focus-visible::before, .btn:focus-visible::after { opacity: 1; }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4em;
  min-height: 44px;
  font-weight: 500; text-decoration: underline; text-decoration-color: var(--yellow);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.link-arrow svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg { transform: translateY(2px); }
.link-arrow--right:hover svg { transform: translateX(3px); }

/* ---------- Header / desktop floating nav ---------- */
.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: var(--z-nav);
  padding: var(--s-4) var(--gutter) 0;
}
.topnav {
  --focus: var(--yellow);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  max-width: var(--container); margin-inline: auto;
  min-height: var(--nav-h);
  padding: 0 var(--s-2) 0 var(--s-4);
  color: var(--white);
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; }
.brand img { width: 30px; height: 30px; }
.topnav__links, .topnav__cta { display: none; }

@media (min-width: 900px) {
  .site-header { position: fixed; padding-top: var(--s-4); pointer-events: none; }
  .topnav {
    pointer-events: auto;
    background: rgba(27, 27, 27, 0.92);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0 10px 0 18px;
  }
  .topnav__links { display: flex; gap: var(--s-1); }
  .topnav__links a {
    position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4);
    font-weight: 500; font-size: 0.9375rem; text-decoration: none; color: var(--muted-dark);
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }
  .topnav__links a:hover { color: var(--white); background: rgba(255, 255, 255, 0.06); }
  .topnav__links a.is-active, .topnav__links a[aria-current] { color: var(--white); }
  .topnav__links a.is-active::after, .topnav__links a[aria-current]::after {
    content: ""; position: absolute; left: 50%; bottom: 5px; width: 6px; height: 6px; margin-left: -3px; background: var(--yellow);
  }
  .topnav__cta { display: inline-flex; }
}

/* ---------- Mobile menu (below 900px) ----------
   A bar pinned to the bottom, where the thumb is: logo (home), a wide "Start a project" and Menu.
   Menu pops a yellow sheet of links up from the bar (initMobileMenu in js/main.js); a tap outside,
   a link, or Esc closes it. --bottomnav-h is the bar's height, kept free at the bottom of the page. */
.mnav { display: none; }
@media (max-width: 899px) {
  .mnav { display: block; }
  .mnav__bar {
    position: fixed; inset: auto 0 0 0; z-index: var(--z-nav);
    display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--white); border-top: var(--frame);
  }
  .mnav__home { display: block; }
  .mnav__home img { display: block; width: 48px; height: 48px; padding: 8px; background: var(--ink); }
  .mnav__cta { justify-content: center; min-height: 48px; padding-inline: 12px; }
  .mnav__toggle {
    display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px;
    border: var(--frame); background: var(--white); color: var(--ink);
    font: inherit; font-weight: 700; font-size: 0.9375rem; cursor: pointer;
  }
  .mnav__bars { display: grid; gap: 4px; width: 18px; }
  .mnav__bars i { display: block; height: 3px; background: currentColor; transition: transform 200ms var(--ease), opacity 200ms var(--ease); }
  .mnav.is-open .mnav__bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mnav.is-open .mnav__bars i:nth-child(2) { opacity: 0; }
  .mnav.is-open .mnav__bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mnav__scrim {
    position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1);
    background: rgba(27, 27, 27, 0.5);
    opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease), visibility 0s 200ms;
  }
  .mnav__sheet {
    position: fixed; left: 12px; right: 12px; z-index: var(--z-nav);
    bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + 12px);
    background: var(--yellow); border: var(--frame); box-shadow: 6px 6px 0 var(--ink);
    opacity: 0; visibility: hidden; transform: translateY(16px);
    transition: transform 250ms var(--ease), opacity 200ms var(--ease), visibility 0s 250ms;
  }
  .mnav.is-open .mnav__scrim, .mnav.is-open .mnav__sheet { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .mnav__sheet a {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    min-height: 64px; padding: 0 20px; border-bottom: var(--frame);
    font-size: 1.25rem; font-weight: 700; color: var(--ink); text-decoration: none;
  }
  .mnav__sheet a:last-child { border-bottom: 0; }
  .mnav__sheet a svg { width: 22px; height: 22px; flex: none; }
  .mnav__sheet a.is-active, .mnav__sheet a[aria-current] { background: var(--white); }
  .mnav__sheet a:focus-visible { outline: 3px solid var(--ink); outline-offset: -8px; }
  .mnav__sheet a.is-disabled { color: rgba(27, 27, 27, 0.45); cursor: default; pointer-events: none; }
  .mnav__soon { font-family: var(--font-hand); font-size: 1.125rem; font-weight: 400; }
  .mnav__toggle:focus-visible, .mnav__home:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

  body { padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)); }
  /* The bottom bar is the whole menu on phones (its logo is the home link), so the top one goes.
     Pages keep their top spacing (it's based on --nav-h), so nothing moves up under the status bar. */
  .site-header { display: none; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .mnav__sheet, .mnav__scrim, .mnav__bars i { transition: none; }
}

/* ---------- Hero ---------- */
/* Copy on white, the scene illustration (2560 x 600) pinned to the bottom of the first screen.
   Rows: gap / copy / gap / strip. Both gaps are 1fr, so the space between the menu and the
   eyebrow always equals the space between the button and the strip. */
.hero {
  --hero-gap: clamp(32px, 6vh, 72px);
  --hero-top: calc(var(--nav-h) + var(--s-4)); /* bottom edge of the floating menu */
  display: grid;
  grid-template-rows: minmax(var(--hero-gap), 1fr) auto minmax(var(--hero-gap), 1fr) auto;
  justify-content: stretch; /* undo the centring every full-screen section gets */
  padding-top: var(--hero-top); padding-bottom: 0;
  background: var(--white); color: var(--ink);
  overflow: hidden;
}
.hero__copy {
  grid-row: 2;
  display: grid; justify-items: center; gap: 12px;
  max-width: 820px; margin-inline: auto; padding-inline: var(--gutter);
  text-align: center;
}
.hero h1 { font-size: clamp(2.5rem, 4.6vw, 4.25rem); line-height: 0.98; letter-spacing: -0.045em; }
.hero h1 em { font-style: normal; background: linear-gradient(transparent 50%, var(--yellow) 50%); padding: 0 0.1em; } /* marker on the lower half only, clear of the line above */
.hero__copy p.lead { color: var(--muted); max-width: 52ch; }

/* The button sits dead centre; the hand-drawn note hangs off its right side (desktop only) */
.hero__cta-row { position: relative; display: flex; margin-top: 6px; }
.cta-note { display: none; }
@media (min-width: 1024px) {
  .cta-note {
    position: absolute; left: calc(100% + 4px); top: 50%;
    display: flex; align-items: center; gap: 6px;
    transform: translateY(-50%) rotate(-3deg); /* level with the button: clear of the paragraph above and the strip below */
    font-family: var(--font-hand); font-size: 1.625rem; line-height: 1.1; color: var(--ink);
  }
  .cta-note__arrow { width: 88px; height: auto; flex: none; }
  .cta-note span { white-space: nowrap; }
}

/* The strip: as tall as the screen allows, never taller than its natural size (the middle 1920
   units across the screen = 31.25vw, at most 600px). "slice" + bottom-centre: a shorter strip
   shows more of the sides, at its shortest (18.75vw) it trims up to 120 units off the top.
   --hero-copy-h is measured by initHeroScene(); 420px is a fallback. The yellow background
   continues past 2560px so very wide (or zoomed-out) screens don't show white sides. */
.hero__strip { grid-row: 4; background: var(--yellow); }
.hero__strip-box {
  position: relative;
  max-width: 2560px; margin-inline: auto;
  height: min(31.25vw, 600px, max(min(18.75vw, 600px),
    var(--screen-h) - var(--hero-top) - var(--hero-copy-h, 420px) - 2 * var(--hero-gap)));
}
.hero__scene, .hero__scene-live { display: block; width: 100%; height: 100%; }
/* The moving parts, in their own SVG on top (see build_site.py), so only it repaints */
.hero__scene-live { position: absolute; inset: 0; pointer-events: none; }

/* Scene interactions (see initHeroScene in js/main.js) */
.hero__scene-live #slider { pointer-events: auto; }
.hero__scene-live #slider-knob { cursor: grab; }
.hero__scene-live #slider-knob:focus { outline: none; }
.hero__scene-live #slider-knob:focus-visible { stroke: var(--select); stroke-width: 6; }
.hero__scene-live.is-dragging, .hero__scene-live.is-dragging #slider-knob { cursor: grabbing; }
.hero__scene-live #slider-track, .hero__scene-live #slider-fill { cursor: pointer; }
.hero__scene-live #tom-eyes-happy { display: none; }
.hero__scene-live.is-tom-happy #tom-eyes-happy { display: inline; }
.hero__scene-live.is-tom-happy #tom-eyes-open { display: none; }

/* Short laptop screens: tighter copy so the strip keeps some height */
@media (min-width: 900px) and (max-height: 760px) {
  .hero { --hero-gap: 16px; }
  .hero__copy { gap: 8px; }
  .hero h1 { font-size: clamp(2.25rem, 3.8vw, 3.25rem); }
  .hero__copy p.lead { font-size: 0.9375rem; }
}

/* Phones and tablet portrait: the page scrolls normally, the strip shows the middle 1040 units */
@media (max-width: 899px) {
  .hero { min-height: 0; grid-template-rows: var(--s-7) auto var(--s-7) auto; }
  .hero__strip-box { height: calc(100vw * 600 / 1040); }
}

/* ---------- How it works: three step cards ----------
   Header row (heading left, button right), then one card per phase:
   square illustration (1200×1200) on top, the phase summary below. */
.steps-head { display: grid; gap: var(--s-5); margin-bottom: clamp(32px, 5vw, 48px); }
@media (min-width: 900px) { .steps-head { grid-template-columns: 1fr auto; align-items: end; } }
.steps-head .btn { justify-self: start; }
.steps { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
/* No card border: the illustration sits on top, the text on a black panel under it */
.step { position: relative; display: grid; grid-template-rows: auto 1fr; }
.step__art { margin: 0; aspect-ratio: 1; background: var(--white); overflow: hidden; }
.step__art img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 640px) and (max-width: 899px) { .step { grid-template-columns: 2fr 3fr; grid-template-rows: none; } .step__art { align-self: start; } } /* image stays square, never cropped; the dark panel fills the row */
.step__body { position: relative; display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5); }
.step__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-1); }
.step__meta .phase__marker { width: 36px; height: 36px; font-size: 1rem; box-shadow: 3px 3px 0 var(--white); }
.step__meta .badge { margin-left: auto; }
.step__body p { color: #e6e6e6; font-size: 0.9375rem; line-height: 1.6; }
.step__body .badge { background: transparent; color: var(--white); border-color: var(--ink-3); }
.step__body .step__note { font-size: var(--fs-sm); color: var(--fg-muted); }
/* "free!" hangs off the bottom-right corner of the first text panel */
.step .steps__sticker { z-index: 1; top: auto; bottom: -16px; transform: rotate(-4deg); font-size: 1.5rem; }

/* Each phase is one bordered column; the middle one is flipped (picture on top), so the text
   panels zigzag across the row while each column still reads as one card. Phones always stack
   picture, then text. */
.steps--columns .step { border: var(--frame); }
@media (min-width: 900px) {
  .steps--columns .step { display: flex; flex-direction: column; }
  .steps--columns .step__body { flex: 1; }
  .steps--columns .step:nth-child(odd) .step__art { order: 2; }
}

.phase { display: grid; grid-template-columns: 48px 1fr; gap: var(--s-5); }
.phase__marker {
  display: grid; place-items: center; width: 48px; height: 48px;
  background: var(--yellow); color: var(--ink); font-weight: 700; font-size: 1.25rem;
  box-shadow: 4px 4px 0 var(--ink);
}
.phase__body { display: grid; gap: var(--s-3); min-width: 0; }
.phase__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.phase__head h3 { margin-right: var(--s-1); }
.phase__body > p, .phase__body li { color: #333; }
.phase__body .list-squares { margin-top: var(--s-1); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; background: var(--yellow-soft); color: var(--ink);
  font-size: 0.8125rem; font-weight: 500; line-height: 1.4; white-space: nowrap;
  border: 1px solid #f5d98c;
}
.badge svg { width: 14px; height: 14px; }



/* ---------- Pricing ---------- */
.pricing-head { display: grid; gap: var(--s-5); margin-bottom: clamp(40px, 6vw, 56px); }
.sub .pricing-head { margin-bottom: 0; } /* .sub already spaces its children */
@media (min-width: 900px) { .pricing-head { grid-template-columns: 1fr auto; align-items: end; } }

.currency { display: grid; gap: var(--s-2); }
.currency__label { font-size: var(--fs-sm); font-weight: 500; color: var(--fg-muted); }
/* Phones and tablets: label and picker centred, the picker at its natural width with three equal buttons */
@media (max-width: 899px) {
  .currency { justify-items: center; text-align: center; }
  .currency .segmented { display: grid; grid-template-columns: repeat(3, 1fr); }
  .currency .segmented button { min-width: 88px; }
}
.segmented { /* buttons sit edge to edge, split by the same heavy line as the frame */
  display: inline-flex;
  background: var(--white); border: var(--frame);}
.segmented button + button, .segmented label + label { border-left: var(--frame); }
.segmented button, .segmented label {
  min-width: 64px; min-height: 44px; padding: 0 var(--s-4);
  border: 0; background: transparent;
  font-weight: 700; font-size: 0.9375rem; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.segmented button:hover { color: var(--ink); background: var(--cream); }
.segmented button[aria-pressed="true"] { background: var(--ink); color: var(--white); }

.packages { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .packages { grid-template-columns: 1fr 1fr; align-items: stretch; } }

.card {
  position: relative; display: grid; align-content: start; gap: var(--s-5);
  padding: clamp(24px, 4vw, 40px); background: var(--white); border: var(--frame);}
.card.surface-dark { background: var(--ink); border-color: var(--ink); }
.pkg__head { display: grid; gap: var(--s-2); }
.pkg__name { font-size: 1.5rem; }
.pkg__for { color: var(--fg-muted); font-style: italic; }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2); }
.price__amount { font-size: clamp(2.75rem, 6vw, 3.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.price__unit { color: var(--fg-muted); font-weight: 500; }
.pkg__plus { font-weight: 700; }
.pkg__note {
  position: absolute; top: -16px; right: 24px; transform: rotate(3deg);
  background: var(--yellow); color: var(--ink); padding: 2px 12px; font-family: var(--font-hand); font-size: 1.25rem; line-height: 1.5;
}
.card .btn { justify-self: start; }
.card.surface-dark .list-squares li { color: #e6e6e6; }

/* Tooltip / info pattern (hover on desktop, tap-to-toggle on touch) */
.tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: 2px; }
.tip__btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -6px -4px;
  border: 0; background: transparent; color: var(--fg-muted);}
.tip__btn svg { width: 18px; height: 18px; }
.tip__btn:hover, .tip.is-open .tip__btn { color: var(--fg); }
.tip__bubble {
  position: absolute; z-index: var(--z-tip); bottom: calc(100% + 10px); left: 50%;
  width: min(280px, 78vw); transform: translateX(-50%);
  padding: var(--s-3) var(--s-4); background: var(--ink); color: var(--white); font-size: var(--fs-sm); line-height: 1.5; font-weight: 400;
  opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.tip__bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px;
  border: 6px solid transparent; border-top-color: var(--ink);
}
.surface-dark .tip__bubble { background: var(--white); color: var(--ink); }
.surface-dark .tip__bubble::after { border-top-color: var(--white); }
.tip.is-open .tip__bubble, .tip__btn:focus-visible + .tip__bubble { opacity: 1; visibility: visible; }
@media (hover: hover) { .tip:hover .tip__bubble { opacity: 1; visibility: visible; } }
@media (max-width: 700px) { .tip__bubble { left: auto; right: -12px; transform: none; } .tip__bubble::after { left: auto; right: 18px; } }

/* "Or keep us on hand" pointer at the bottom of the packages section */
/* Under the packages: a black strip pointing to the subscription right below */
.sub-teaser {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6);
  margin-top: var(--s-6); padding: var(--s-5) clamp(24px, 4vw, 40px);
}
.sub-teaser h3 { font-size: var(--fs-h3); }
.sub-teaser p { margin-top: 4px; color: #cfcfcf; }

/* Subscription */
.sub { display: grid; gap: clamp(32px, 5vw, 56px); }
.sub__head { display: grid; gap: var(--s-3); }   /* no max-width: the intro uses the full column */
.sub__head .lead { color: var(--fg-muted); }
.disclosure__body .fine { font-size: var(--fs-sm); color: var(--muted); }

/* Wide calculator card: price + tiers on the left, the claim and policy bullets beside it */
.calc { gap: var(--s-6); }
@media (min-width: 900px) {
  .calc { grid-template-columns: 1.35fr 1fr; align-items: center; }
  .calc__side { padding-left: var(--s-6); border-left: 1px solid var(--ink-3); }
}
.calc__main { display: grid; gap: var(--s-4); }
.calc__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-5); }
.calc__side { display: grid; gap: var(--s-4); align-content: center; }
/* Hours slider (dark card). Square thumb, like the questionnaire's sliders */
.calc__hours { display: grid; gap: var(--s-1); }
.calc__hours-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); }
.calc__hours-head label { font-weight: 700; }
.calc__hours-head output { font-weight: 700; font-size: 1.25rem; color: var(--yellow); font-variant-numeric: tabular-nums; }
.calc__range { -webkit-appearance: none; appearance: none; width: 100%; height: 40px; margin: 0; background: transparent; cursor: pointer; }
.calc__range:focus { outline: none; }
.calc__range::-webkit-slider-runnable-track { height: 4px; background: var(--ink-3); }
.calc__range::-moz-range-track { height: 4px; background: var(--ink-3); }
.calc__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -11px; background: var(--yellow); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--white); }
.calc__range::-moz-range-thumb { width: 22px; height: 22px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 0; box-shadow: 3px 3px 0 var(--white); } /* border-radius: 0 undoes Firefox's round thumb */
.calc__range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--yellow); outline-offset: 3px; }
.calc__range:focus-visible::-moz-range-thumb { outline: 3px solid var(--yellow); outline-offset: 3px; }
.calc__ticks { display: flex; justify-content: space-between; padding: 0 6px; font-size: 0.75rem; font-weight: 500; color: var(--muted-dark); }

/* "No commitment? Pay as you go" line under the calculator */
.payg-line { margin-top: calc(var(--s-2) * -1); color: var(--fg-muted); }
.payg-line strong { color: var(--fg); }
.payg-line a { color: var(--fg); text-decoration-color: var(--yellow); }

.calc__claim { font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.calc__claim span { color: var(--yellow); }
.calc fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.calc legend { font-weight: 700; margin-bottom: var(--s-3); padding: 0; }
.terms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 4px; background: var(--ink-2); }
.terms input { position: absolute; opacity: 0; pointer-events: none; }
.terms label {
  display: grid; place-items: center; min-height: 52px; padding: 6px 4px;  font-weight: 700; font-size: 0.9375rem; line-height: 1.1; text-align: center; color: var(--muted-dark); cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.terms label small { display: block; font-size: 0.6875rem; font-weight: 500; }
.terms label:hover { color: var(--white); }
.terms input:checked + label { background: var(--yellow); color: var(--ink); }
.terms input:focus-visible + label { outline: 3px solid var(--yellow); outline-offset: 2px; }
.calc__out { display: grid; gap: var(--s-1); }
.calc__save { justify-self: start; min-height: 26px; }
.calc__save:empty { visibility: hidden; }
.calc__save { font-family: var(--font-hand); font-size: 1.375rem; line-height: 1.1; color: var(--yellow); }
.calc__total { color: var(--muted-dark); font-variant-numeric: tabular-nums; }
.calc__total strong { color: var(--white); }
.calc__meta { display: grid; gap: var(--s-2); font-size: var(--fs-sm); color: var(--muted-dark); }
.calc__meta li { display: flex; gap: var(--s-2); }
.calc__meta svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--yellow); }

/* "Good to know": three short answers under the subscription calculator */
.sub-faq { display: grid; gap: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--border); }
.sub-faq__title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); }
.sub-faq__list { display: grid; gap: var(--s-4); margin: 0; }
@media (min-width: 900px) { .sub-faq__list { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.sub-faq__list dt { font-weight: 700; margin-bottom: var(--s-1); }
.sub-faq__list dd { margin: 0; color: #333; font-size: 0.9375rem; line-height: 1.55; }
.sub-faq .link-arrow { justify-self: start; }

/* Policies (details/summary) */
.policies { display: grid; gap: var(--s-3); margin-top: var(--s-2); }
.disclosure { border: var(--frame); background: var(--white); }
.disclosure summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 60px; padding: var(--s-3) var(--s-5); cursor: pointer; list-style: none;
  font-weight: 700;}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary svg { width: 20px; height: 20px; flex: none; transition: transform var(--dur) var(--ease); }
.disclosure[open] summary svg { transform: rotate(45deg); }
.disclosure summary:hover { background: var(--cream); }
.disclosure__body { display: grid; gap: var(--s-4); padding: 0 var(--s-5) var(--s-5); }
.disclosure__body p, .disclosure__body li { color: #333; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--frame); }
.data-table { width: 100%; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { padding: 12px 16px; text-align: left; border-bottom: var(--frame); vertical-align: top; }
.data-table thead th { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: var(--cream); font-weight: 700; }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table tbody th { font-weight: 700; }

/* Comparison: Freelancer vs Tixely vs Agency */
.compare .section__head { margin-bottom: var(--s-6); }
/* Three cards, one per option, read like a pricing table. Tixely's is yellow, raised above and
   below the other two (which stretch to the row, so no edge is left open) and casts the hard shadow.
   Phones stack them with Tixely first. */
.vs { display: grid; gap: var(--s-5); }
.vs__card { display: grid; align-content: start; gap: var(--s-4); padding: clamp(24px, 3vw, 32px); background: var(--white); border: var(--frame); }
.vs__card.is-us { position: relative; z-index: 1; background: var(--yellow); box-shadow: 8px 8px 0 var(--ink); }
.vs__name { display: flex; align-items: center; gap: 10px; font-size: 1.5rem; }
.vs__name img { width: 26px; height: 26px; background: var(--ink); padding: 3px; }
.vs__cost .cost { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.08em; color: var(--ink); }
.vs__cost .cost__off { opacity: 0.25; }
.vs dl { display: grid; gap: var(--s-4); margin: 0; }
.vs__row { display: grid; gap: 4px; padding-top: var(--s-4); border-top: 2px solid var(--ink); }
.vs__row dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.vs__row dd { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: #333; }
.vs__card.is-us .vs__row dd { color: var(--ink); font-weight: 500; }
@media (max-width: 899px) { .vs__card.is-us { order: -1; } }
@media (min-width: 900px) {
  .vs { grid-template-columns: 1fr 1.1fr 1fr; gap: 0; align-items: stretch; padding-block: 24px; }
  .vs__card:first-child { border-right: 0; }
  .vs__card:last-child { border-left: 0; }
  .vs__card.is-us { margin-block: -24px; padding-block: calc(clamp(24px, 3vw, 32px) + 24px); }
}

/* ---------- Our work: bento grid ---------- */
.work-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; }
  .tile--featured { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .work-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(240px, auto); gap: var(--s-5); }
  .tile--featured { grid-column: span 2; grid-row: span 2; }
  .tile--wide { grid-column: span 2; }
}
.tile {
  position: relative; display: block; overflow: hidden; background: var(--ink); color: var(--white); text-decoration: none; isolation: isolate;
  aspect-ratio: 4 / 3;
  --focus: var(--ink);
}
@media (min-width: 1024px) {
  .tile { aspect-ratio: auto; min-height: 260px; }
  .tile--featured { min-height: 540px; }
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 320ms var(--ease); }
.tile__caption {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 12px 12px 12px 16px; background: rgba(27, 27, 27, 0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.tile__text { display: grid; gap: 6px; min-width: 0; }
.tile__title { font-weight: 700; font-size: 1.125rem; line-height: 1.2; }
.tile--featured .tile__title { font-size: 1.375rem; }
.tile__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-block; padding: 2px 8px; font-size: 0.75rem; font-weight: 500; line-height: 1.5; background: rgba(255, 255, 255, 0.12); color: var(--white); }
.tile__arrow { display: grid; place-items: center; flex: none; width: 40px; height: 40px; background: var(--yellow); color: var(--ink); transition: transform var(--dur) var(--ease); }
.tile__arrow svg { width: 18px; height: 18px; }
.tile:hover img, .tile:focus-visible img { transform: scale(1.035); }
.tile:hover .tile__arrow, .tile:focus-visible .tile__arrow { transform: translate(2px, -2px); }
/* On hover-capable devices the caption tucks away and slides in on hover/focus */
@media (hover: hover) and (min-width: 1024px) {
  .tile__caption { opacity: 0; transform: translateY(8px); }
  .tile:hover .tile__caption, .tile:focus-visible .tile__caption { opacity: 1; transform: none; }
}
.work__foot { margin-top: var(--s-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); color: var(--fg-muted); }

/* ---------- Final CTA ---------- */
.final-cta { padding-block: clamp(56px, 6vw, 80px); position: relative; overflow: hidden; }
.final-cta__inner { position: relative; display: grid; gap: var(--s-5); justify-items: start; max-width: 780px; }
.final-cta p { font-size: var(--fs-lead); color: #2e2e2e; max-width: 52ch; }
/* Illustration (assets/illustrations/final-cta.svg, 1000 x 1000) beside the copy, up to 540px; hidden on phones.
   The drawing spans about y 74-929 of its artboard, so the box shows y 60-945 only
   (the percentage margin is relative to the box width, 1000 units). */
.final-cta__art { display: none; }
@media (min-width: 900px) {
  .final-cta__layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 40vw, 540px); align-items: center; gap: var(--s-6); }
  .final-cta__art { display: block; aspect-ratio: 1000 / 885; overflow: hidden; }
  .final-cta__art img { display: block; width: 100%; height: auto; margin-top: -6%; }
}

/* ---------- Footer ---------- */
.site-footer { padding-block: clamp(56px, 8vw, 80px) var(--s-6); }
.footer__grid { display: grid; gap: var(--s-7); }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s-6); } }
.footer__brand { display: grid; gap: var(--s-3); align-content: start; }
.footer__brand p { color: var(--muted-dark); }
.footer__company { font-size: var(--fs-sm); line-height: 1.6; }
.footer__col h2 { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-dark); font-weight: 700; margin-bottom: var(--s-3); }
.footer__col ul { display: grid; gap: 2px; list-style: none; padding: 0; }
.footer__col a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; font-weight: 500; transition: color var(--dur) var(--ease); }
.footer__col a:hover { color: var(--yellow); text-decoration: underline; }

/* Menu items that aren't live yet (e.g. Our Work): visible but greyed out and unclickable.
   They have no href; to re-enable, give the link its href back and drop the class. */
.topnav__links a.is-disabled,
.footer__col a.is-disabled { opacity: 0.4; cursor: default; pointer-events: none; text-decoration: none; }
.footer__soon { font-family: var(--font-hand); font-size: 1.125rem; color: var(--muted-dark); }
.footer__email { font-size: 1.125rem; font-weight: 700 !important; }
.footer__legal { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--ink-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); color: var(--muted-dark); }

/* ---------- Page hero (about, case studies) ---------- */
.page-hero { padding-top: calc(var(--nav-h) + clamp(40px, 7vw, 88px)); padding-bottom: clamp(48px, 7vw, 88px); position: relative; overflow: hidden; }
/* Phones have no top menu (see Mobile menu), so the space it used at the top comes back */
@media (max-width: 899px) {
  .hero { --hero-top: 0px; }
  .page-hero { padding-top: clamp(40px, 7vw, 88px); }
  [id] { scroll-margin-top: var(--s-6); }
}
.page-hero__inner { position: relative; display: grid; gap: var(--s-5); max-width: 820px; }
.page-hero .lead { max-width: 58ch; }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--fs-sm); color: var(--muted-dark); }
.crumbs a { color: var(--white); text-decoration-color: var(--yellow); }
.crumbs span[aria-hidden] { color: var(--muted-dark); }

/* ---------- About ---------- */
.prose { display: grid; gap: var(--s-4); max-width: 68ch; }
.prose p { color: #333; font-size: 1.0625rem; }
.split { display: grid; gap: var(--s-6); }
@media (min-width: 960px) { .split { grid-template-columns: 5fr 7fr; gap: var(--s-8); } }
.principles { display: grid; gap: var(--s-5); }
@media (min-width: 800px) { .principles { grid-template-columns: repeat(3, 1fr); } }
.principle { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-6); background: var(--white); border: var(--frame); }
.principle__icon { display: grid; place-items: center; width: 48px; height: 48px; background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); }
.principle__icon svg { width: 24px; height: 24px; }
.principle p { color: #333; }
/* ---------- Subscription page ---------- */
.page-hero__inner .btn { justify-self: start; }
/* Three short facts under a page title, each with a small yellow icon */
.hero__proof { display: grid; gap: var(--s-4); list-style: none; padding: 0; }
.hero__proof li {
  display: flex; align-items: center; gap: var(--s-3);
  padding-top: var(--s-4); border-top: 1px solid var(--ink-3);
  font-size: 0.9375rem; font-weight: 500; line-height: 1.4; color: var(--muted-dark);
}
.hero__proof svg { width: 20px; height: 20px; flex: none; color: var(--yellow); }
@media (min-width: 760px) { .hero__proof { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.sub-facts { margin-top: clamp(40px, 6vw, 56px); }
.principles--4 { margin-bottom: clamp(40px, 6vw, 56px); }
@media (min-width: 800px) { .principles--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .principles--4 { grid-template-columns: repeat(4, 1fr); } }
.sub-split { display: grid; gap: var(--s-7); }
@media (min-width: 900px) { .sub-split { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
.sub-split > div { display: grid; gap: var(--s-4); align-content: start; }
.sub-split p, .sub-split li { color: #333; }
.sub-note { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--fg-muted); }
.sub-table tbody th { width: 28%; }
.sub-table--two tbody th { width: 34%; }
.sub-table a, .sub-split a { text-decoration-color: var(--yellow); }
.sub-steps { display: grid; gap: var(--s-6); max-width: 760px; }
.sub-steps .phase__body p { color: #333; }
.price-grid th small { display: block; margin-top: 2px; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: var(--muted); }
.price-grid td strong { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.price-grid__total { display: block; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.payg { display: grid; gap: var(--s-5); margin-top: var(--s-7); padding: clamp(24px, 4vw, 40px); background: var(--cream); border: var(--frame); }
@media (min-width: 900px) { .payg { grid-template-columns: 5fr 7fr; gap: var(--s-8); align-items: start; } }
.payg__head { display: grid; gap: var(--s-2); }
.payg__head h3 { font-size: 1.5rem; }
.payg__head p:not(.label):not(.price) { color: var(--fg-muted); }
.payg .list-squares li { color: #333; }
.calc__meta a { color: var(--white); text-decoration-color: var(--yellow); }

/* Callout (About "The honest bit", Subscription "One designer"): a yellow card in the heavy frame
   with a hard shadow, Tom's illustration on white beside the text (on top on phones). */
.callout { display: grid; border: var(--frame); box-shadow: 8px 8px 0 var(--ink); }
.callout__art { margin: 0; background: var(--white); border-bottom: var(--frame); }
.callout__art img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.callout__body { display: grid; gap: var(--s-4); align-content: center; justify-items: start; padding: clamp(24px, 4vw, 56px); }
.callout h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.callout p { color: var(--ink); max-width: 60ch; }
.callout .link-arrow { text-decoration-color: var(--ink); }
@media (min-width: 760px) {
  .callout { grid-template-columns: minmax(220px, 4fr) 8fr; }
  .callout__art { align-self: stretch; display: grid; align-items: center; border-bottom: 0; border-right: var(--frame); }
}

/* ---------- Case study ---------- */
.cs-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-meta .tag { background: rgba(255, 255, 255, 0.1); font-size: 0.8125rem; padding: 4px 10px; }
.cs-hero-img { margin-top: clamp(40px, 6vw, 64px); overflow: hidden; background: var(--ink-2); }
.cs-hero-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cs-section { display: grid; gap: var(--s-5); }
@media (min-width: 960px) { .cs-section { grid-template-columns: 4fr 8fr; gap: var(--s-8); } }
.cs-section__label { display: grid; gap: var(--s-2); align-content: start; }
.cs-section__label .num { font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.12em; color: var(--muted); }
.cs-section__body { display: grid; gap: var(--s-4); max-width: 68ch; }
.cs-section__body p, .cs-section__body li { color: #333; font-size: 1.0625rem; }
.cs-divider { height: 1px; background: var(--border); margin-block: clamp(48px, 7vw, 80px); border: 0; }
.gallery { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 760px) { .gallery { grid-template-columns: 1fr 1fr; } .gallery figure:first-child { grid-column: span 2; } }
.gallery figure { display: grid; gap: var(--s-3); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--cream); border: 1px solid var(--border); }
.gallery figure:first-child img { aspect-ratio: 16 / 9; }
.gallery figcaption { font-size: var(--fs-sm); color: var(--muted); }
.result { font-size: clamp(1.375rem, 2.6vw, 1.875rem); font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink) !important; }
.next-case { display: grid; gap: var(--s-5); align-items: center; padding: clamp(24px, 4vw, 40px); background: var(--cream); border: var(--frame); text-decoration: none; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.next-case:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.next-case__title { font-size: var(--fs-h3); font-weight: 700; }
.next-case img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 760px) { .next-case { grid-template-columns: 1fr 280px; } }
.placeholder-flag { justify-self: start; background: var(--yellow); color: var(--ink); font-size: var(--fs-sm); font-weight: 500; padding: 6px 12px; }

/* ---------- Privacy / legal pages ---------- */
.page-hero--compact, .section--flow { min-height: 0; }
.section--joined { padding-top: 0; }
.section--snug { padding-block: clamp(56px, 7vh, 128px); } /* tall single-screen sections: padding scales with screen height */ /* continues the section above on the same background */
.page-hero--compact { padding-bottom: clamp(40px, 5vw, 64px); }
.legal h2 { font-size: var(--fs-h3); margin-top: var(--s-5); }
.legal ul { display: grid; gap: var(--s-2); padding-left: 1.2em; color: #333; }
.legal a { text-decoration-color: var(--yellow); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.footer__legal a { color: var(--muted-dark); text-decoration-color: var(--yellow); }
.footer__legal a:hover { color: var(--white); }

/* ---------- Start a project (/start) ----------
   One screen at a time; JS toggles [hidden]. Cards, fields and pills wear the heavy
   --frame like the landing page's boxes: hover adds a hard ink offset (cards) or a soft
   yellow fill (pills), selected turns ink, and keyboard focus is a second ink ring
   outside the frame with a gap of page color between them. */
.start-page { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 0; }
@supports (min-height: 100svh) { .start-page { min-height: 100svh; } }

.start-header { padding: var(--s-2) var(--gutter); }
.start-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); max-width: var(--container); min-height: var(--nav-h); margin-inline: auto; }
.start-header__home {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: 0.9375rem; font-weight: 500; color: var(--muted-dark);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
.start-header__home svg { width: 18px; height: 18px; }
.start-header__home:hover { color: var(--white); text-decoration-color: var(--yellow); }

.start { flex: 1; padding: clamp(32px, 6vw, 72px) var(--gutter) clamp(64px, 9vw, 112px); }
.start__inner { max-width: 760px; margin-inline: auto; }

.start-progress { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); font-size: var(--fs-sm); font-weight: 500; color: var(--fg-muted); }
.start-progress[hidden] { display: none; }
.start-progress__dots { display: flex; gap: 6px; }
.start-progress__dots span { width: 12px; height: 12px; border: 2px solid var(--ink); }
.start-progress__dots span.is-done { background: var(--yellow); }

.start-form { display: block; }
.start-screen { display: grid; gap: clamp(32px, 5vw, 44px); }
.start-screen[hidden], .start-screen [hidden] { display: none; }
.start-screen.is-entering { animation: start-in 260ms var(--ease); }
@keyframes start-in { from { opacity: 0; transform: translateY(8px); } }
.start-screen__head { display: grid; gap: var(--s-4); }
.start-screen__head h1 { font-size: clamp(2rem, 5vw, 3rem); }
.start-screen__head h1:focus { outline: none; }
.start-screen__head .lead { max-width: 60ch; }

/* A question: label, optional helper, field, error */
.q { display: grid; gap: var(--s-3); min-width: 0; }
fieldset.q { border: 0; margin: 0; padding: 0; }
.q__label { display: block; padding: 0; font-weight: 700; font-size: 1.125rem; line-height: 1.35; }
legend.q__label { margin-bottom: var(--s-3); }
legend.q__label + .q__help { margin-top: calc(var(--s-3) * -1); margin-bottom: var(--s-3); }
.q__help, .q__count { font-size: var(--fs-sm); color: var(--fg-muted); }
.q__label + .q__help { margin-top: calc(var(--s-2) * -1); }

.input {
  width: 100%; min-height: 52px; padding: 12px 16px;
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--white);
  border: var(--frame);
  transition: background-color var(--dur) var(--ease);
}
.input::placeholder { color: #767676; opacity: 1; }
.input:focus, .chipfield:focus-within { outline: 3px solid var(--focus); outline-offset: 4px; }
.input[aria-invalid="true"] { background: var(--yellow-soft); }
.input--area { min-height: 104px; resize: vertical; line-height: 1.55; }
.input--tall { min-height: 168px; }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer; }
.select::after { /* chevron */
  content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); pointer-events: none;
}

.field-error {
  padding: var(--s-2) var(--s-3); background: var(--yellow); border-left: var(--frame); /* full yellow, so it stands apart from an invalid field's soft fill */
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink);
}

/* Big radio cards (packages, website type) */
.choices { display: grid; gap: var(--s-3); }
@media (min-width: 640px) { .choices--packages { grid-template-columns: 1fr 1fr; } }
.choice { position: relative; display: grid; cursor: pointer; }
.choice input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }
.choice__card {
  position: relative; display: grid; align-content: start; gap: var(--s-2);
  padding: var(--s-5) calc(var(--s-5) + 32px) var(--s-5) var(--s-5);
  background: var(--white); border: var(--frame); color: var(--ink);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.choices--compact .choice__card { padding-block: var(--s-4); gap: 2px; }
.choice__name { font-weight: 700; font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.01em; }
.choices--compact .choice__name { font-size: 1.0625rem; }
.choice__price { font-weight: 700; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.choice__unit { font-weight: 500; color: var(--muted); }
.choice__desc { color: #333; font-size: 0.9375rem; line-height: 1.55; }
.choice__check { position: absolute; top: var(--s-5); right: var(--s-5); width: 22px; height: 22px; border: 2px solid var(--ink); background: var(--white); }
.choices--compact .choice__check { top: var(--s-4); }
@media (hover: hover) { .choice:hover .choice__card { box-shadow: 4px 4px 0 var(--ink); } } /* no sticky hover after a tap */
.choice--highlight .choice__card { background: var(--yellow-soft); }
.choice input:checked + .choice__card { background: var(--ink); color: var(--white); }
.choice input:checked + .choice__card .choice__desc { color: #e6e6e6; }
.choice input:checked + .choice__card .choice__unit { color: var(--muted-dark); }
.choice input:checked + .choice__card .choice__check {
  background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1b1b' stroke-width='3.5' stroke-linecap='square'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat;
  border-color: var(--yellow);
}
.choice input:focus-visible + .choice__card { outline: 3px solid var(--focus); outline-offset: 4px; }

/* Small options (single choice or pick any) */
.pills { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pill { position: relative; display: inline-flex; cursor: pointer; }
.pill input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }
.pill span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px;
  background: var(--white); border: var(--frame); font-weight: 500; font-size: 0.9375rem; line-height: 1.3;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
@media (hover: hover) { .pill:hover span { background: var(--yellow-soft); } }
.pill input:checked + span { background: var(--ink); color: var(--white); }
.pill input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 4px; }
.pill--check span::before { content: ""; width: 12px; height: 12px; flex: none; border: 2px solid currentColor; }
.pill--check input:checked + span::before { background: var(--yellow); border-color: var(--yellow); }

/* Sliders: a square thumb that stays grey until it's moved */
.sliders { display: grid; gap: var(--s-5); }
.slider { display: grid; gap: 2px; }
.slider__ends { display: flex; justify-content: space-between; gap: var(--s-4); font-weight: 700; }
.slider__meta { display: flex; justify-content: space-between; align-items: center; min-height: 32px; font-size: var(--fs-sm); color: var(--fg-muted); }
.slider__meta .textlink { margin-left: auto; }
.slider__input {
  -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; padding: 0;
  background: transparent; cursor: pointer;
}
.slider__input:focus { outline: none; }
.slider__input::-webkit-slider-runnable-track {
  height: 4px; background: linear-gradient(var(--ink), var(--ink)) center / 2px 100% no-repeat, #bdbdbd;
}
.slider__input::-moz-range-track {
  height: 4px; background: linear-gradient(var(--ink), var(--ink)) center / 2px 100% no-repeat, #bdbdbd;
}
.slider__input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -12px;
  background: #e0e0e0; border: 2px solid #8a8a8a;
}
/* border-radius: 0 only undoes Firefox's round default thumb (square corners everywhere) */
.slider__input::-moz-range-thumb { width: 24px; height: 24px; background: #e0e0e0; border: 2px solid #8a8a8a; border-radius: 0; }
.slider.is-set .slider__input::-webkit-slider-thumb { background: var(--yellow); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.slider.is-set .slider__input::-moz-range-thumb { background: var(--yellow); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.slider.is-set .slider__input::-webkit-slider-runnable-track { background: var(--ink); }
.slider.is-set .slider__input::-moz-range-track { background: var(--ink); }
.slider__input:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--ink); outline-offset: 3px; }
.slider__input:focus-visible::-moz-range-thumb { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Chip field for brand nouns */
.chipfield {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  min-height: 56px; padding: 6px; background: var(--white); border: var(--frame); cursor: text;
}
.chipfield__chips { display: contents; }
.chipfield__chips[hidden] { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 2px; min-height: 40px; padding: 0 2px 0 12px;
  background: var(--yellow-soft); border: 1px solid #f5d98c; font-weight: 500; font-size: 0.9375rem; line-height: 1.3;
}
.chip__remove { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; color: var(--ink); }
.chip__remove svg { width: 14px; height: 14px; }
.chip__remove:hover { background: #ffe8a8; }
.chipfield__input { flex: 1 1 12ch; min-width: 12ch; min-height: 40px; padding: 0 10px; border: 0; background: transparent; font-size: 1rem; }
.chipfield__input:focus { outline: none; }
.chipfield__input::placeholder { color: #767676; opacity: 1; }

/* Text-style buttons (skip, avoid toggle, clear) */
.textlink {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0;
  border: 0; background: none; font-weight: 500; text-align: left;
  text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.textlink svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.textlink[aria-expanded="true"] svg { transform: rotate(45deg); }
.textlink:hover { text-decoration-color: var(--ink); }
.textlink--sm { min-height: 32px; font-size: var(--fs-sm); }

/* Back / Next row */
.start-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-5); border-top: var(--frame); }
.start-actions .btn { margin-left: auto; }
.start-actions--done { border-top: 0; padding-top: 0; }
.start-actions--done .btn { margin-left: 0; }
.start-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 var(--s-2) 0 0;
  border: 0; background: none; font-weight: 700; color: var(--ink);
}
.start-back svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.start-back:hover svg { transform: translateX(-2px); }
.btn:disabled { cursor: progress; opacity: 0.75; }

.start-alert { padding: var(--s-4) var(--s-5); background: var(--yellow-soft); border: var(--frame); font-weight: 500; }
.start-alert a { font-weight: 700; }
.start-fine { margin-top: calc(var(--s-5) * -1); font-size: var(--fs-sm); color: var(--fg-muted); }
.start-fine a { color: var(--ink); text-decoration-color: var(--yellow); }
.turnstile:empty { display: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.next-steps { display: grid; gap: var(--s-5); list-style: none; padding: 0; }
.next-steps .phase__body { align-self: center; color: #333; }
.next-steps strong { color: var(--ink); }

.start-footer { padding: var(--s-5) var(--gutter); font-size: var(--fs-sm); color: var(--muted-dark); }
.start-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5); max-width: var(--container); margin-inline: auto; }
.start-footer a { color: var(--muted-dark); text-decoration-color: var(--yellow); }
.start-footer a:hover { color: var(--white); }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .next-case:hover { transform: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .tile:hover img, .tile:focus-visible img { transform: none; }
}