/* Veshtera visual system: tiles, type scale, buttons, device frames,
   highlights, compare table, pipeline mock, title band, global nav, footer.
   Breakpoints follow the 734px / 1068px steps used across the site. */

/* The sticky nav is 48px tall: in-page anchors (#booking-system) land below it. */
html { scroll-padding-top:64px; }

/* ---------- Tile themes ---------- */
.tile--dark  { --tile-bg:#000000; --tile-fg:#F5F5F7; --tile-muted:#86868B; --tile-link:#F2A93B; --tile-card:#1D1D1F; --tile-hairline:rgba(245,245,247,0.16); }
.tile--light { --tile-bg:var(--color-light-bg); --tile-fg:var(--color-light-fg); --tile-muted:var(--color-light-muted); --tile-link:var(--color-link-on-light); --tile-card:#FFFFFF; --tile-hairline:rgba(0,0,0,0.12); }
.tile--white { --tile-bg:#FFFFFF; --tile-fg:var(--color-light-fg); --tile-muted:var(--color-light-muted); --tile-link:var(--color-link-on-light); --tile-card:var(--color-light-bg); --tile-hairline:rgba(0,0,0,0.12); }
/* Device shadows on light surfaces: softer, and actually visible (see Device frames). */
.tile--light, .tile--white { --device-contact:rgba(0,0,0,0.3); --device-ambient:0 20px 24px -16px rgba(0,0,0,0.32); --device-shadow:0 22px 44px -18px rgba(0,0,0,0.3); }
.tile { background:var(--tile-bg); color:var(--tile-fg); text-align:center; padding:56px 24px 0; overflow:hidden; }
.tile p { color:var(--tile-muted); }
.tile a.tile-link { color:var(--tile-link); }

.tile-grid { display:grid; grid-template-columns:minmax(0, 1fr); gap:12px; padding:12px; }
.tile-grid > .tile { display:flex; flex-direction:column; align-items:center; }
@media (min-width: 734px) {
  .tile-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .tile-grid > .tile { grid-column:1 / -1; min-height:580px; }
  .tile-grid > .tile--half { grid-column:auto; }
  .tile-grid > .close-tile { justify-content:center; padding-top:0; }
}
/* Homepage half tiles: the visual fills the space below the links and sits
   centered in it, so paired tiles of different heights never leave a dead gap. */
.tile-grid > .tile--half > .tile-visual { flex:1; display:flex; align-items:center; justify-content:center; width:100%; padding:40px 0 56px; }
.tile-visual > .device-phone { margin:0; }
/* Games and Websites share a row: the fan's middle laptop leads larger and the
   phone is capped (about 380px tall at desktop), so the two visuals carry similar
   weight. 44% + 62% + 44% less two 25% overlaps = exactly 100% wide, never clipped. */
.tile-visual > .device-fan { width:100%; margin:0; }
.tile-visual > .device-fan > .device-laptop:not(:nth-child(2)) { width:44%; }
.tile-visual > .device-fan > .device-laptop:nth-child(2) { width:62%; margin:0 -25%; }
@media (min-width: 734px) { .tile-visual > .device-phone { width:clamp(120px, 14vw, 175px); } }
.tile-visual > .pipeline-figure { margin:0; }

/* ---------- Type scale ---------- */
.hero-headline,
.tile-headline,
.tile-subline,
.tile-eyebrow { margin:0 auto; max-width:980px; text-wrap:balance; }
.hero-headline { font-size:48px; font-weight:700; font-stretch:112.5%; letter-spacing:-0.02em; line-height:1.05; }
/* The descriptive line inside a one-word hero <h1> ("Websites for small
   businesses"): it reads as part of the heading but sits under the big word at
   eyebrow size in the muted color, so the headline still leads. */
/* The homepage H1 is the tagline (the header wordmark names Veshtera): two
   balanced lines, sized down from the one-word hero scale to fit a phrase. */
.hero-tagline { font-size:clamp(28px, 8.6vw, 40px); }
/* The outcome sentence under the tagline (2026-11-04): its own style, so the
   tagline is never repeated as a tile subline. */
.home-hero .hero-sub { font-size:19px; line-height:1.35; max-width:36ch; margin:14px auto 0; text-wrap:balance; }
.hero-tagline > span { display:block; text-wrap:balance; }
/* Semi-expanded display type is wide: phone and half-tile sizes scale with the
   viewport so whole phrases ("Your expertise.", "mean business.") keep a line. */
.tile-headline { font-size:clamp(32px, 10.5vw, 40px); font-weight:700; font-stretch:112.5%; letter-spacing:-0.015em; line-height:1.1; }
.tile-eyebrow { font-size:17px; font-weight:600; letter-spacing:-0.01em; line-height:1.2; margin-bottom:8px; color:var(--tile-fg); }
.tile-subline { font-size:21px; font-weight:500; letter-spacing:0.004em; line-height:1.24; margin-top:8px; }
.tile .tile-subline { color:var(--tile-fg); }
/* Stacked prices line up digit for digit (Mona Sans has tnum). Standalone prices
   keep proportional figures, which read better on their own. */
.service-check-price { font-variant-numeric:tabular-nums; }
/* From 734px, balance splits "Find them. Win them. Keep them." mid-sentence in a
   half tile; pretty keeps whole phrases together. Phones keep balance. */
@media (min-width: 734px) { .tile-grid .tile-headline { text-wrap:pretty; } }
@media (min-width: 734px) {
  .hero-headline { font-size:80px; }
  .hero-tagline { font-size:clamp(40px, 3.2vw, 46px); }
  .home-hero .hero-sub { font-size:21px; }
  .tile-headline { font-size:56px; line-height:1.07; }
  .tile-grid > .tile--half .tile-headline { font-size:clamp(40px, 5.2vw, 56px); }
  .tile-eyebrow { font-size:21px; }
  .tile-subline { font-size:28px; line-height:1.14; }
}

.tile-links { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:16px 32px; margin:20px auto 0; }
a.tile-link { font-size:17px; line-height:1.3; text-decoration:none; }
a.tile-link::after { content:'\00A0\203A'; }
a.tile-link:hover { text-decoration:underline; }
@media (min-width: 734px) { a.tile-link { font-size:19px; } }

/* ---------- Buttons ---------- */
.btn-pill {
  display:inline-flex; align-items:center; justify-content:center;
  background:#F2A93B; color:#000000;
  font-family:var(--font-body); font-size:17px; font-weight:500; line-height:1.2; letter-spacing:-0.01em;
  padding:11px 22px; border:0; border-radius:980px;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background-color 0.2s ease;
}
.btn-pill:hover { background:var(--color-accent-hover); }
.btn-pill:active { background:#E39A2C; }

/* ---------- Device frames (generic hardware: no notch, no logo) ----------
   Product renders in CSS only, one space-gray finish (--device-* in tokens.css).
   Laptop: a black glass lid with a machined rim, a camera dot, the display set
   in under the glass, on an aluminum base with a thumb cut-in and a shadow on the
   surface. Phone: a metal band with side buttons around a thin black border.
   All sizes are proportional, so every placement scales from hero to fan. */
.device-laptop { width:min(100%, 760px); margin:40px auto 0; }
.device-laptop > .device-screen {
  width:86%; margin:0 auto; aspect-ratio:16 / 10;
  padding:2%; background:var(--device-bezel);
  border-radius:1.4% 1.4% 0 0 / 2.24% 2.24% 0 0;
  box-shadow:inset 0 1px 0 var(--device-edge-hi), inset 0 0 0 1px var(--device-edge), var(--device-shadow);
}
/* Camera, centred in the top bezel (2% of the laptop = 1/26.875 of the lid's height). */
.device-laptop > .device-screen::before {
  content:''; position:absolute; z-index:0; left:50%; top:1.86%; translate:-50% -50%;
  width:max(1.5px, 0.42%); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, var(--device-lens), var(--device-bezel) 75%);
  box-shadow:0 0 0 0.5px var(--device-edge);
}
/* Base: lit lip on top, shading toward the front edge, a horizontal sheen for
   the brushed finish, and a shallow thumb cut-in under the display. */
.device-laptop::after {
  content:''; display:block; width:100%; height:0; padding-bottom:4%;
  background:
    radial-gradient(ellipse 7% 30% at 50% 0, var(--device-contact) 0 45%, transparent 90%),
    linear-gradient(var(--device-edge-hi) 0 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.3), var(--device-glare) 30%, var(--device-edge) 50%, var(--device-glare) 70%, rgba(0,0,0,0.3)),
    linear-gradient(var(--device-metal-light), var(--device-metal) 22%, var(--device-metal-dark));
  border-radius:0 0 14px 14px / 0 0 100% 100%;
  box-shadow:0 1px 1px var(--device-contact), var(--device-ambient);
}
.device-phone {
  position:relative; width:min(100%, 220px); margin:40px auto 0;
  padding:8px; border:2px solid transparent; border-radius:36px;
  background:
    linear-gradient(var(--device-bezel), var(--device-bezel)) padding-box,
    linear-gradient(150deg, var(--device-metal-light), var(--device-metal) 24%, var(--device-metal-dark) 50%, var(--device-metal) 76%, var(--device-metal-light)) border-box;
  box-shadow:inset 0 0 0 1px var(--device-edge), var(--device-shadow);
}
/* Side buttons, just proud of the band: two on the left, one on the right. */
.device-phone::before, .device-phone::after {
  content:''; position:absolute; left:-4px; top:21%; width:2px; height:15%;
  border-radius:1px 0 0 1px;
  background:linear-gradient(var(--device-metal) 0 42%, transparent 42% 58%, var(--device-metal) 58%);
}
.device-phone::after { left:auto; right:-4px; top:27%; height:10%; border-radius:0 1px 1px 0; background:var(--device-metal); }
.device-phone > .device-screen { width:100%; aspect-ratio:780 / 1688; border-radius:27px; }
/* contain, not cover: sub-pixel rounding at small sizes never crops the capture. */
.device-phone > .device-screen img { object-fit:contain; }
.device-screen { position:relative; overflow:hidden; background:var(--color-bg); }
.device-screen img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
/* Glass: a faint diagonal sheen and a soft inner edge where the display meets the
   bezel. Out of the flow, under the pause control (motion.css, z-index 1), and it
   never takes a click. On a laptop it covers the display area only (2% of the
   laptop is 3.72% of the lid's height and 2.33% of its width). */
.device-screen::after {
  content:''; position:absolute; z-index:0; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg, var(--device-glare), transparent 45%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.22), inset 0 1px 3px rgba(0,0,0,0.18);
}
.device-laptop > .device-screen::after { inset:3.72% 2.33%; border-radius:2px; }
/* Product clips (lib/motion.js) stay out of the layout until css/motion.css, loaded without blocking render, takes over. */
.motion-video, .motion-toggle { display:none; }
.device-laptop > .device-screen img { border-radius:2px; }

/* Three overlapping laptops: the middle one leads, the sides tuck behind.
   40% + 50% + 40% less two 15% overlaps = exactly 100% wide. */
.device-fan { display:flex; justify-content:center; align-items:flex-end; width:min(100%, 760px); margin:40px auto 0; }
.device-fan > .device-laptop { position:relative; flex:none; width:40%; margin:0; }
.device-fan > .device-laptop:nth-child(2) { z-index:2; width:50%; margin:0 -15%; }
.device-fan > .device-laptop:not(:nth-child(2)) { z-index:1; margin-bottom:2%; }

/* Hero family shot: a laptop with a phone overlapping its right edge. The phone
   is about 72% of the laptop's height (18.5% of the cluster wide, its screen at the
   capture's own aspect), and the cluster keeps 32px of bottom room so no bezel is clipped. */
.device-cluster { position:relative; width:min(100%, 880px); margin:40px auto 32px; padding-right:9%; }
.device-cluster > .device-laptop { width:100%; margin:0; }
.device-cluster > .device-phone { position:absolute; right:0; bottom:0; width:18.5%; margin:0; z-index:1; }
@media (max-width: 733px) {
  .device-cluster > .device-phone { padding:3px; border-width:1px; border-radius:16px; }
  .device-cluster > .device-phone::before { left:-2px; width:1px; }
  .device-cluster > .device-phone::after { right:-2px; width:1px; }
  .device-cluster > .device-phone > .device-screen { border-radius:12px; }
}

/* ---------- Highlights ---------- */
.highlights { display:grid; grid-template-columns:minmax(0, 1fr); gap:12px; max-width:980px; margin:40px auto 56px; text-align:left; }
.highlight { background:var(--tile-card); border-radius:18px; padding:28px 28px 32px; }
.highlight h3 { font-size:21px; font-weight:600; letter-spacing:-0.01em; line-height:1.2; margin:0 0 8px; color:var(--tile-fg); }
.highlight p { font-size:17px; line-height:1.47; margin:0; color:var(--tile-muted); }
/* 2 x 2 at every width from 734px: four across broke titles after a word or two.
   The band's heading is visually hidden, so the cards start at the tile's top padding. */
@media (min-width: 734px) { .highlights { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; } }
.line-highlights .highlights { margin-top:0; }

/* ---------- Compare ----------
   Phones: one column at a time scrolls inside the table; the next column peeks
   in by 20px (its hairline, inside its 24px padding, so no cut-off glyph) and
   the page never scrolls sideways. 734px and up: columns wrap into rows
   (2, then 4 per row) with a hairline between rows, so every option is visible. */
.compare { max-width:980px; margin:40px auto 56px; text-align:left; }
.compare:focus-visible { outline-offset:4px; }
.compare-grid { display:grid; align-items:stretch; }
.compare-col { display:flex; flex-direction:column; padding:8px 24px 24px; border-left:1px solid var(--tile-hairline); }
.compare-col:first-child { border-left:0; padding-left:0; }
.compare-col h3 { font-size:24px; font-weight:600; letter-spacing:-0.015em; line-height:1.17; margin:0 0 8px; color:var(--tile-fg); }
.compare-col p { font-size:14px; line-height:1.43; margin:0 0 12px; }
.compare-col ul { list-style:none; padding:16px 0 0; margin:16px 0 20px; border-top:1px solid var(--tile-hairline); }
.compare-col li { position:relative; padding:6px 0 6px 24px; font-size:14px; line-height:1.43; }
.compare-col li::before { content:'\2713'; position:absolute; left:0; color:var(--tile-link); font-weight:600; }
.compare-col p.compare-price { font-size:17px; font-weight:600; color:var(--tile-fg); margin-bottom:4px; }
.compare-col p.compare-timeline { margin-bottom:12px; }
.compare-col .btn-pill { font-size:14px; padding:8px 16px; margin-top:auto; align-self:flex-start; }

@media (max-width: 733px) {
  .compare { overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:thin; }
  .compare-grid { grid-auto-flow:column; grid-auto-columns:calc(100% - 20px); }
  .compare-col { scroll-snap-align:start; }
}
@media (min-width: 734px) {
  .compare { overflow-x:visible; }
  .compare-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:32px; }
  .compare-col:nth-child(2n+1) { border-left:0; padding-left:0; }
  .compare-col:nth-child(n+3) { border-top:1px solid var(--tile-hairline); padding-top:32px; }
}
/* Two per row: an odd last option sits centered under the pair, never orphaned left. */
@media (min-width: 734px) and (max-width: 1067px) {
  .compare-col:last-child:nth-child(odd) { grid-column:1 / -1; justify-self:center; width:50%; padding-left:24px; }
}
/* Rows from data-count (lib/line-page.js): 8 -> 4+4, 4 -> 4, 2 -> 2. */
@media (min-width: 1068px) {
  .compare-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .compare-col:nth-child(n) { border-left:1px solid var(--tile-hairline); padding-left:24px; border-top:0; padding-top:8px; }
  .compare-col:nth-child(4n+1) { border-left:0; padding-left:0; }
  .compare-col:nth-child(n+5) { border-top:1px solid var(--tile-hairline); padding-top:32px; }
  .compare-grid[data-count="2"] { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .compare-grid[data-count="6"] { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .compare-grid[data-count="6"] > .compare-col:nth-child(4) { border-left:0; padding-left:0; }
  .compare-grid[data-count="6"] > .compare-col:nth-child(n+4) { border-top:1px solid var(--tile-hairline); padding-top:32px; }
  .compare-grid[data-count="6"] > .compare-col:nth-child(5) { border-left:1px solid var(--tile-hairline); padding-left:24px; }
}
/* Columns in a row share its rows (subgrid), so prices and CTAs line up however
   many lines a heading, blurb, or list takes; spare height collects above the
   price and under the shorter lists. Without subgrid each column stays a flex column with its CTA
   pushed to the bottom (above). */
@supports (grid-template-rows: subgrid) {
  .compare-grid { row-gap:0; }
  .compare-col { display:grid; grid-row:span 6; grid-template-rows:subgrid; row-gap:0; }
  .compare-col > .compare-head { grid-row:1; }
  .compare-col > .compare-price { grid-row:2; }
  .compare-col > .compare-timeline { grid-row:3; }
  .compare-col > ul { grid-row:4; align-self:start; }
  .compare-col > .btn-pill { grid-row:5; margin-top:0; justify-self:start; }
  .compare-col > .compare-estimate { grid-row:6; justify-self:start; }
}

/* ---------- Proof (Built with Veshtera) ---------- */
.proof-list { display:grid; grid-template-columns:minmax(0, 1fr); gap:40px; max-width:980px; margin:40px auto 0; padding-bottom:56px; }
.proof-item { display:flex; flex-direction:column; align-items:center; }
.proof-icon { display:block; width:72px; height:72px; border-radius:16px; object-fit:contain; margin-bottom:16px; }
.proof-item h3 { font-size:21px; font-weight:600; letter-spacing:-0.01em; line-height:1.2; margin:0 0 8px; color:var(--tile-fg); }
.proof-item p { max-width:420px; margin:0 0 8px; font-size:17px; line-height:1.47; }
/* Side by side, the items share rows (icon, name, credit, figures, link) so
   the figures and links line up across columns. */
@media (min-width: 734px) {
  .proof-list:has(> .proof-item:nth-child(2)) { grid-template-columns:repeat(3, minmax(0, 1fr)); row-gap:0; }
  .proof-list:has(> .proof-item:nth-child(2)) > .proof-item { display:grid; grid-row:span 5; grid-template-rows:subgrid; justify-items:center; align-items:start; }
}
/* Measured figures (data/proof-metrics.json): a spec-sheet row of big numerals
   over small labels, then the always-visible source line. */
.proof-figures { width:100%; }
.proof-stats { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px 16px; width:100%; max-width:360px; margin:20px auto 0; padding-top:24px; border-top:1px solid var(--tile-hairline); }
.proof-stat { display:flex; flex-direction:column-reverse; align-items:center; }
.proof-stat dd { margin:0; font-family:var(--font-display); font-size:40px; font-weight:600; font-stretch:112.5%; letter-spacing:-0.02em; line-height:1; color:var(--tile-fg); }
.proof-stat dt { margin-top:8px; font-size:14px; line-height:1.29; color:var(--tile-muted); }
.tile p.proof-note { max-width:420px; margin:16px auto 12px; font-size:12px; line-height:1.33; color:var(--tile-muted); }
.line-games .proof-stats { margin-top:48px; }
/* One proof item (Software) has the room to run its figures in a single row. */
@media (min-width: 734px) { .proof-list:not(:has(> .proof-item:nth-child(2))) .proof-stats:has(> :nth-child(4)) { grid-template-columns:repeat(4, minmax(0, 1fr)); max-width:620px; } }
.game-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:32px 20px; max-width:980px; margin:40px auto 0; }
.game-card { display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--tile-fg); text-decoration:none; font-size:17px; font-weight:600; line-height:1.3; }
.game-card .game-icon { display:block; width:88px; height:88px; margin:0; border-radius:20px; }
.game-card:hover span { text-decoration:underline; }
.line-games > .tile-links { padding-bottom:56px; }
.close-tile { padding-bottom:64px; }
@media (min-width: 734px) { .game-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:48px 24px; } }
@media (min-width: 1068px) {
  .game-grid { grid-template-columns:repeat(6, minmax(0, 1fr)); }
  .game-card .game-icon { width:112px; height:112px; border-radius:26px; }
}

/* ---------- Pipeline mock (Growth; illustrative, captioned) ---------- */
.pipeline-figure { width:min(100%, 560px); margin:40px auto 56px; }
.pipeline {
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px;
  padding:14px 14px 0; background:var(--tile-card); border-radius:18px; text-align:left;
  box-shadow:0 0 0 1px var(--tile-hairline), 0 24px 48px rgba(0,0,0,0.08);
}
.pipeline-caption { margin-top:16px; font-size:14px; line-height:1.43; color:#0B0B0C; }
.pipeline-col { display:flex; flex-direction:column; gap:6px; min-width:0; padding-bottom:14px; }
.pipeline-col > :not(.pipeline-card) { margin:0 0 2px; font-size:11px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--tile-muted); }
.pipeline-card {
  padding:8px 9px; border-radius:8px; background:var(--tile-bg);
  box-shadow:0 0 0 1px var(--tile-hairline); font-size:12px; line-height:1.3; color:var(--tile-fg);
  overflow-wrap:normal; word-break:normal; hyphens:none;
}
.pipeline-card > * { display:block; margin:0; }
.pipeline-card > :not(:first-child) { color:var(--tile-muted); font-size:11px; }
/* A half tile below 1068px is too narrow for four columns: the board goes 2 x 2. */
@media (min-width: 734px) and (max-width: 1067px) {
  .tile-grid .pipeline { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 733px) {
  .pipeline { gap:6px; padding:10px 10px 0; }
  .pipeline-card { padding:6px 7px; font-size:11px; }
  .pipeline-col > :not(.pipeline-card) { font-size:10px; letter-spacing:0.02em; }
}
.pipeline-col:last-child .pipeline-card { box-shadow:inset 3px 0 0 var(--tile-link), 0 0 0 1px var(--tile-hairline); }

/* ---------- Line sections: timeline, packages, story ----------
   One rhythm for every line: a section headline, then content at 980px max,
   56px to the tile's bottom edge. */
.timeline, .package-cards, .story { max-width:980px; margin:48px auto 0; padding:0 0 56px; text-align:left; }

/* Software: four numbered steps on one hairline rail; stacked on phones. */
.timeline { list-style:none; display:grid; grid-template-columns:minmax(0, 1fr); gap:32px; }
.timeline-step { position:relative; padding-top:20px; border-top:2px solid var(--tile-hairline); }
.timeline-step:first-child { border-top-color:var(--tile-link); }
.timeline-step h3 { font-size:24px; font-weight:600; letter-spacing:-0.015em; line-height:1.17; margin:0 0 8px; color:var(--tile-fg); }
.timeline-step p { font-size:17px; line-height:1.47; margin:0; }
@media (min-width: 734px) { .timeline { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:40px 32px; } }
@media (min-width: 1068px) { .timeline { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px; } }

/* Websites: Launch and Pro as two large cards, side by side from 734px. */
.package-cards { display:grid; grid-template-columns:minmax(0, 1fr); gap:16px; }
.package-card { display:flex; flex-direction:column; padding:36px 32px 32px; background:var(--tile-card); border-radius:24px; }
.package-card h3 { font-size:32px; font-weight:700; font-stretch:112.5%; letter-spacing:-0.015em; line-height:1.1; margin:0 0 12px; color:var(--tile-fg); }
.package-card p { margin:0; }
.package-card .package-price { font-size:28px; font-weight:600; letter-spacing:-0.015em; line-height:1.14; color:var(--tile-fg); }
.package-card .package-timeline { font-size:14px; margin-top:4px; }
.package-card .package-blurb { font-size:17px; line-height:1.47; margin-top:20px; }
.package-card ul { list-style:none; padding:20px 0 0; margin:20px 0 28px; border-top:1px solid var(--tile-hairline); }
.package-card li { position:relative; padding:6px 0 6px 26px; font-size:17px; line-height:1.41; color:var(--tile-fg); }
.package-card li::before { content:'\2713'; position:absolute; left:0; color:var(--tile-link); font-weight:600; }
.compare-col li.addon::before, .package-card li.addon::before { content:'+'; }
.compare-col li.addon a, .package-card li.addon a { color:var(--tile-link); }
.package-card .btn-pill { margin-top:auto; align-self:flex-start; }
@media (min-width: 734px) { .package-cards { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; } .package-card { padding:44px 40px 40px; } }

/* Growth: Find, Win, Keep on a shared top rule. Keep tells two services, so its
   two items sit side by side; every beat then ends at about the same depth. */
.story { display:grid; grid-template-columns:minmax(0, 1fr); gap:40px; }
.story-beat { padding-top:20px; border-top:2px solid var(--tile-fg); }
.story-beat h3 { font-size:40px; font-weight:700; font-stretch:112.5%; letter-spacing:-0.015em; line-height:1.1; margin:0 0 20px; color:var(--tile-fg); }
.story-items { display:grid; gap:28px; }
.story-item p { font-size:17px; line-height:1.47; margin:0 0 8px; }
.story-item p.story-title { font-size:21px; font-weight:600; letter-spacing:-0.01em; line-height:1.2; color:var(--tile-fg); }
@media (min-width: 734px) {
  .story { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:48px 32px; }
  .story-items:has(> :nth-child(2)) { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:32px; }
}
/* Tablet: Find | Win, then Keep across the full width. Desktop: one row, Keep 2fr. */
@media (min-width: 734px) and (max-width: 1067px) { .story-beat:nth-child(3) { grid-column:1 / -1; } }
@media (min-width: 1068px) { .story { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); } }

/* Games stays dark from top to bottom: a hairline marks where sections meet. */
.tile--dark + .tile--dark:not(.close-tile) { box-shadow:inset 0 1px 0 var(--tile-hairline); }

/* ---------- Title band (interior pages) ---------- */
.title-band { background:#000000; color:#F5F5F7; text-align:center; padding:48px 24px; }
.title-band h1 { font-size:clamp(32px, 10.5vw, 40px); font-weight:700; font-stretch:112.5%; letter-spacing:-0.02em; line-height:1.08; margin:0 auto; max-width:980px; text-wrap:balance; }
.title-band p { color:#86868B; font-size:19px; margin:12px auto 0; max-width:640px; }
@media (min-width: 734px) { .title-band h1 { font-size:56px; } }

/* ---------- Global nav ---------- */
.site-header {
  position:sticky; top:0; z-index:50; height:48px;
  background:rgba(0,0,0,.8);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background:#000; }
}
.site-header .container { display:flex; align-items:center; justify-content:space-between; height:48px; padding:0 22px; }
.wordmark { display:inline-flex; align-items:center; font-size:21px; color:#F5F5F7; --vw-gap:#000; text-decoration:none; opacity:0.92; transition:opacity 0.2s ease; }
.wordmark:hover { opacity:1; }
.header-right { display:flex; align-items:center; gap:28px; }
.main-nav { display:flex; align-items:center; gap:32px; }
.main-nav a { color:#F5F5F7; opacity:0.8; font-size:12px; letter-spacing:-0.01em; line-height:1.2; padding:4px 0; text-decoration:none; transition:opacity 0.2s ease; }
.main-nav a:hover, .main-nav a[aria-current="page"] { opacity:1; }
.btn-pill.header-cta { font-size:12px; font-weight:500; padding:5px 12px; letter-spacing:0; }
/* Call button: icon only (the number is in its aria-label); a 44px halo under 734px. */
.header-call { position:relative; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; color:#F5F5F7; background:rgba(255,255,255,0.12); transition:background 0.2s ease; }
.header-call:hover { background:rgba(255,255,255,0.22); }
.header-call::after { content:''; position:absolute; inset:-6px; }
.header-call .contact-icon { width:15px; height:15px; fill:currentColor; }
/* The toggle comes first in the markup so Tab moves from it into the open sheet;
   order keeps it at the far right on screen. */
.nav-toggle { display:none; order:2; }

@media (max-width: 733px) {
  .header-right { gap:14px; }
  .nav-toggle {
    display:inline-flex; align-items:center; height:32px; padding:0 4px;
    background:none; border:0; color:#F5F5F7; opacity:0.8;
    font-family:var(--font-body); font-size:12px; cursor:pointer;
  }
  .nav-toggle:hover, .nav-toggle[aria-expanded="true"] { opacity:1; }
  /* The header's backdrop-filter makes it the containing block, so the sheet
     hangs from its bottom edge with an explicit viewport height. */
  .main-nav {
    position:absolute; top:100%; left:0; right:0;
    height:calc(100vh - 48px); height:calc(100dvh - 48px); overflow-y:auto;
    flex-direction:column; align-items:stretch; gap:0;
    padding:20px 48px 48px; background:#000000;
    visibility:hidden; opacity:0;
    transition:opacity 0.24s ease, visibility 0s linear 0.24s;
  }
  .main-nav.open { visibility:visible; opacity:1; transition:opacity 0.24s ease; }
  .main-nav a {
    font-size:28px; font-weight:600; letter-spacing:-0.015em; line-height:1.2;
    padding:8px 0; opacity:1; color:#E8E8ED;
    transform:translateY(-6px); transition:transform 0.32s ease, color 0.2s ease;
  }
  .main-nav.open a { transform:none; }
  .main-nav a:hover, .main-nav a[aria-current="page"] { color:#FFFFFF; }
}

/* ---------- Footer ---------- */
.site-footer { --tile-link:var(--color-link-on-light); background:var(--color-light-bg); color:var(--color-light-muted); font-size:12px; line-height:1.33; padding:36px 0 24px; }
.footer-columns { display:grid; grid-template-columns:repeat(2, minmax(0, 200px)); gap:24px; padding-bottom:24px; border-bottom:1px solid rgba(0,0,0,0.12); }
.footer-heading { font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:0; line-height:1.33; color:var(--color-light-fg); margin:0 0 10px; }
.footer-col a { display:table; color:var(--color-light-muted); text-decoration:none; margin-bottom:8px; }
.footer-col a:hover { color:var(--color-light-fg); text-decoration:underline; }
/* Phone and social icons: 44px targets, pulled left so the first glyph lines up with the text. */
.footer-contact { display:flex; flex-wrap:wrap; margin:12px 0 0 -12px; }
.footer-contact a { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; color:var(--color-light-muted); transition:color 0.2s ease, background 0.2s ease; }
.footer-contact a:hover { color:var(--color-light-fg); background:rgba(0,0,0,0.05); }
.footer-contact .contact-icon { width:20px; height:20px; fill:currentColor; }
/* Under 360px (iPhone SE, 320px) the header row and the seven icons only fit with tighter spacing. */
@media (max-width: 359px) {
  .site-header .container { padding:0 16px; }
  .header-right { gap:10px; }
  .footer-contact a { width:40px; }
}
.footer-legal { margin:4px 0 0; font-size:12px; color:var(--color-light-muted); }
.footer-legal-links { display:flex; flex-wrap:wrap; margin-top:8px; }
.footer-legal-links a { display:inline-flex; align-items:center; color:var(--color-light-fg); text-decoration:none; }
.footer-legal-links a + a::before { content:''; width:1px; height:12px; margin:0 10px; background:rgba(0,0,0,0.2); }
.footer-legal-links a:hover { text-decoration:underline; }

/* ---------- Touch targets ----------
   Under 734px every tile link, footer link, and pill offers a 44px hit area,
   grown with padding (or an invisible halo on the compact header pill), not type. */
@media (max-width: 733px) {
  a.tile-link { display:inline-flex; align-items:center; min-height:44px; }
  .tile-links { gap:0 28px; }
  .footer-col a { display:flex; align-items:center; min-height:44px; margin-bottom:0; }
  .footer-legal-links { gap:0 20px; }
  .footer-legal-links a { display:inline-flex; align-items:center; min-height:44px; }
  .footer-legal-links a + a::before { display:none; }
  .btn-pill { min-height:44px; }
  .btn-pill.header-cta { position:relative; min-height:0; }
  .btn-pill.header-cta::after { content:''; position:absolute; inset:-10px -4px; }
  /* Header Menu (40x32) and the wordmark (about 16px tall): invisible halos reach 44px. */
  .nav-toggle { position:relative; }
  .nav-toggle::after { content:''; position:absolute; inset:-6px -2px; }
  .wordmark { position:relative; }
  .wordmark::after { content:''; position:absolute; inset:-14px -8px; }
  /* "Estimate yours" (29px): 44px tall, text kept where it was. Its ::after is the arrow. */
  .compare-col .compare-estimate { display:inline-flex; align-items:center; min-height:44px; margin-top:4px; padding:0; }
}
/* 734px and up: invisible halos sized to the measured gaps between targets, so
   nothing visibly moves. Footer rows sit 8px apart, so they become 44px rows. */
@media (min-width: 734px) {
  .main-nav a { position:relative; }
  .main-nav a::after { content:''; position:absolute; inset:-11px -4px; }
  .btn-pill { position:relative; }
  .btn-pill::after { content:''; position:absolute; inset:-6px -2px; }
  .btn-pill.header-cta::after { inset:-10px -4px; }
  /* "Estimate yours" sits 12px under the compare pill: both halos grow away from
     that gap (nothing sits above the pill or below the link) and keep 4px apart. */
  .compare-col .btn-pill::after { inset:-10px -2px -2px; }
  .compare-col .compare-estimate { position:relative; }
  .compare-col .compare-estimate::before { content:''; position:absolute; inset:-6px 0 -10px; }
  a.tile-link { position:relative; }
  a.tile-link::before { content:''; position:absolute; inset:-10px 0; }
  .footer-col a { display:flex; align-items:center; min-height:44px; margin-bottom:0; }
}

/* ---------- Motion ----------
   Only hide .reveal content once the inline head script has added .js to <html>,
   so the page reads in full without JavaScript. */
.js .reveal { opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
.js .reveal.is-visible { opacity:1; transform:none; }
/* Compare columns are #anchor targets (#seo): a slide would move them 24px up
   after the jump and tuck them under the nav, so this tile only fades. */
.js .line-compare.reveal { transform:none; }
.js .reveal .device-laptop, .js .reveal .device-phone { transform:scale(.96); transition:transform 1s ease; }
.js .reveal.is-visible .device-laptop, .js .reveal.is-visible .device-phone { transform:none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-visible,
  .js .reveal .device-laptop, .js .reveal .device-phone,
  .js .reveal.is-visible .device-laptop, .js .reveal.is-visible .device-phone { transition:none; transform:none; opacity:1; }
  .main-nav, .main-nav.open, .main-nav a, .btn-pill, .wordmark, .skip-link, .header-call, .footer-contact a { transition:none; transform:none; }
}

/* ---------- Payback calculator (homepage "Your numbers") ---------- */
.tile-grid > .payback { min-height:0; padding-bottom:48px; }
.payback-form { display:flex; flex-wrap:wrap; justify-content:center; gap:16px 24px; margin:28px auto 0; }
.payback-field { display:grid; gap:8px; text-align:left; }
.payback-field label { font-size:15px; font-weight:600; color:var(--tile-fg); }
.payback-money, .payback-step { display:flex; align-items:center; height:52px; border:1.5px solid var(--tile-hairline); border-radius:12px; background:var(--tile-card); }
.payback-money { padding-left:14px; font-size:21px; color:var(--tile-muted); }
.payback-field input { font-family:var(--font-display); font-size:21px; font-weight:600; color:var(--tile-fg); background:none; border:0; height:100%; padding:0 12px 0 6px; width:9ch; }
.payback-step input { width:4ch; text-align:center; padding:0; }
.payback-step button { width:48px; height:100%; border:0; background:none; font-size:24px; color:var(--tile-link); cursor:pointer; border-radius:10px; }
.payback-field input:focus-visible, .payback-step button:focus-visible { outline:2px solid var(--tile-link); outline-offset:2px; border-radius:8px; }
.payback-out { margin:28px auto 0; max-width:640px; }
.tile .payback-big { font-size:clamp(32px, 9vw, 48px); font-weight:700; font-stretch:112.5%; letter-spacing:-0.015em; line-height:1.1; color:var(--tile-fg); margin:0; text-wrap:balance; }
.payback-detail { font-size:19px; line-height:1.4; margin:12px auto 0; max-width:38ch; text-wrap:pretty; }
.payback-note { font-size:13px; line-height:1.4; margin:20px auto 0; max-width:52ch; }

/* ---------- Industry links (Websites line page) and industry pages ---------- */
.industry-links { list-style:none; margin:32px auto 0; padding:0; max-width:880px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.industry-links a { display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:980px; background:var(--tile-card); color:var(--tile-fg); font-size:15px; text-decoration:none; }
.industry-links a:hover, .industry-links a:focus-visible { box-shadow:inset 0 0 0 1px var(--tile-link); }
.industry-more { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 28px; margin:28px 0 0; font-size:17px; }
.industry-more a { color:var(--tile-link); }

/* ========== Identity (owner, 2026-11-10) ==========
   One system on every page: C, The Cut (amber field, black type, a black slash
   at the V mark's own 24.4 degree angle) and A, Blueprint (a 24px grid on paper
   and on black). The homepage adds its showcase in css/home.css. Motion only
   where scroll timelines exist and motion is allowed; every word stays real text. */
:root { --v-amber:#F2A93B; --v-ink:#0B0B0C; --v-paper:#F3EFE6; }
.tile--dark { --tile-bg:#0B0B0C; background-color:#0B0B0C; background-image:linear-gradient(90deg, rgba(245,245,247,0.06) 1px, transparent 1px), linear-gradient(rgba(245,245,247,0.06) 1px, transparent 1px); background-size:24px 24px; }
.tile--light, .tile--white { --tile-bg:#F3EFE6; background-color:#F3EFE6; background-image:linear-gradient(90deg, rgba(11,11,12,0.06) 1px, transparent 1px), linear-gradient(rgba(11,11,12,0.06) 1px, transparent 1px); background-size:24px 24px; }
.site-footer { background-color:#F3EFE6; color:#55524B; }
.site-footer .footer-col a, .site-footer .footer-legal-links a, .site-footer .footer-legal { color:#4A4741; }

/* Inner heroes: product pages (.line-hero) and every other page (.title-band). */
.line-hero, .title-band { position:relative; isolation:isolate; overflow:hidden; background-color:#F2A93B;
  background-image:linear-gradient(90deg, rgba(11,11,12,0.07) 1px, transparent 1px), linear-gradient(rgba(11,11,12,0.07) 1px, transparent 1px); background-size:24px 24px;
  color:#0B0B0C; --tile-bg:#F2A93B; --tile-fg:#0B0B0C; --tile-muted:rgba(11,11,12,0.78); --tile-link:#0B0B0C; --tile-hairline:rgba(11,11,12,0.2); }
.line-hero > *, .title-band > * { position:relative; z-index:1; }
.line-hero::before, .title-band::before { content:''; position:absolute; z-index:0; top:0; right:5%; width:9vw; height:62%; background:#0B0B0C; transform:skewX(-24.4deg); transform-origin:top; pointer-events:none; }
.title-band::before { height:100%; width:7vw; }
.line-hero::after { content:''; position:absolute; z-index:0; left:0; right:0; bottom:0; height:clamp(160px, 24vw, 360px); background-color:#0B0B0C;
  background-image:linear-gradient(90deg, rgba(245,245,247,0.06) 1px, transparent 1px), linear-gradient(rgba(245,245,247,0.06) 1px, transparent 1px); background-size:24px 24px;
  clip-path:polygon(0 26%, 100% 0, 100% 100%, 0 100%); }
.title-band h1, .line-hero .hero-headline { color:#0B0B0C; }
.title-band p { color:rgba(11,11,12,0.8); }
.line-hero .btn-pill, .title-band .btn-pill { background-color:#0B0B0C; color:#F5F5F7; }
.line-hero a.tile-link, .title-band a { color:#0B0B0C; }
@media (max-width: 733px) {
  .line-hero::before, .title-band::before { right:3%; width:9vw; height:56px; }
}

/* 4: product visuals stand on an angled amber panel. */
.tile-visual { position:relative; isolation:isolate; }
.tile-visual::before { content:''; position:absolute; z-index:-1; left:50%; top:6%; bottom:6%; width:28%; background:#F2A93B; transform:translateX(-50%) skewX(-24.4deg); pointer-events:none; }

/* 5: craft. A sheen at the V angle (90 + 24.4 = 114.4 degrees) crosses buttons on
   hover; text links grow an underline; focus rings are thicker. */
.btn-pill { background-image:linear-gradient(114.4deg, transparent 42%, rgba(255,255,255,0.38) 50%, transparent 58%); background-size:260% 100%; background-position:120% 0; background-repeat:no-repeat; transition:background-position 0.6s ease, background-color 0.2s ease; }
.btn-pill:hover { background-position:-20% 0; }
a.tile-link { text-decoration:none; background-image:linear-gradient(currentColor, currentColor); background-repeat:no-repeat; background-position:0 100%; background-size:0 2px; padding-bottom:2px; transition:background-size 0.25s ease; }
a.tile-link:hover { text-decoration:none; background-size:100% 2px; }
:focus-visible { outline:3px solid var(--tile-link, #F2A93B); outline-offset:3px; }

/* 2: the signature moment. Each section cuts in along the diagonal as it enters. */
@keyframes v-cut { from { clip-path:polygon(0 0, 0 0, 0 100%, 0 100%); } to { clip-path:polygon(0 0, 145% 0, 100% 100%, 0 100%); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tile-grid > .tile, main > .tile.reveal { animation:v-cut linear both; animation-timeline:view(); animation-range:entry 0% entry 70%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-pill, a.tile-link { transition:none; }
}

/* ========== Identity: pages (owner, 2026-11-10: "do 2 and 3 and 4") ==========
   The cut-card system replaces soft gray cards everywhere: paper, a crisp black
   outline, a hard offset shadow, and an amber corner cut at the V angle. Section
   headings are left-aligned posters that open with an amber slash. Product page
   heroes are posters like the homepage. */
.package-card, .highlight, .price-card, .compare-col, .proof-item, .faq-item { --tile-fg:#0B0B0C; --tile-muted:#4A4741; --tile-link:var(--color-link-on-light); --tile-hairline:rgba(0,0,0,0.12); color:var(--tile-fg); position:relative; background:#FFFDF8; border:1.5px solid #0B0B0C; border-radius:14px; box-shadow:6px 6px 0 #0B0B0C; overflow:hidden; }
.package-card::after, .highlight::after, .price-card::after, .compare-col::after { content:''; position:absolute; bottom:-12px; right:22px; width:26px; height:44px; background:#F2A93B; transform:skewX(-24.4deg); pointer-events:none; }
.compare-grid { column-gap:22px; row-gap:26px; padding:0 6px 8px 0; }
.compare-col, .compare-col:first-child, .compare-col:nth-child(2n+1), .compare-col:nth-child(n+3) { padding:28px 24px 26px; border:1.5px solid #0B0B0C; }
/* Beats the older per-position layout rules (e.g. the 4th and 5th of six), so every card keeps its padding and outline. */
.compare-grid[data-count] > .compare-col:nth-child(n) { padding:28px 24px 26px; border:1.5px solid #0B0B0C; }
@media (max-width: 733px) { .compare { padding-bottom:12px; } }
.proof-item { padding:28px 22px 24px; }
.faq-item { margin:0 0 14px; padding:0 20px; border-bottom:1.5px solid #0B0B0C; }
.dark-cards .package-card, .tile--dark .package-card, .tile--dark .highlight { --tile-fg:#F5F5F7; --tile-muted:#A1A1A6; --tile-link:#F2A93B; --tile-hairline:rgba(245,245,247,0.16); background:#16161A; border-color:#F5F5F7; box-shadow:6px 6px 0 #F2A93B; }

/* Section headings: left-aligned posters with an amber slash. */
main > .tile:not(.line-hero):not(.title-band):not(.home-hero) > .tile-headline { text-align:left; width:100%; max-width:980px; margin-left:auto; margin-right:auto; font-size:clamp(36px, 7vw, 72px); letter-spacing:-0.04em; line-height:1.0; }
main > .tile:not(.line-hero):not(.title-band):not(.home-hero) > .tile-subline,
main > .tile:not(.line-hero):not(.title-band):not(.home-hero) > .tile-links { text-align:left; justify-content:flex-start; width:100%; max-width:980px; margin-left:auto; margin-right:auto; }
.tile-headline::before, .section > h2::before { content:''; display:inline-block; width:0.32em; height:0.78em; margin-right:0.28em; vertical-align:-0.04em; background:#F2A93B; transform:skewX(-24.4deg); }
.tile-grid .tile-headline::before, .close-tile .tile-headline::before, .home-hero .tile-headline::before { display:none; }
.section > h2 { font-size:clamp(28px, 4.6vw, 44px); letter-spacing:-0.03em; }

/* Product page heroes: left-aligned posters. */
.line-hero { text-align:left; padding-left:max(24px, calc((100% - var(--container-width)) / 2 + 22px)); padding-right:max(24px, calc((100% - var(--container-width)) / 2 + 22px)); }
.line-hero .hero-headline { margin:0; max-width:none; font-size:clamp(56px, 11vw, 160px); font-weight:850; font-stretch:112.5%; letter-spacing:-0.05em; line-height:0.88; }
.line-hero .tile-subline { margin:16px 0 0; max-width:none; text-align:left; font-size:clamp(22px, 2.6vw, 34px); }
.line-hero .tile-links { justify-content:flex-start; margin:28px 0 0; }
.line-hero .device-cluster, .line-hero > .device-laptop, .line-hero .tile-visual { margin-left:auto; margin-right:auto; }
.line-hero::before { animation:v-draw 0.7s cubic-bezier(0.2, 0.7, 0.1, 1) 0.15s both; }
@keyframes v-draw { from { clip-path:inset(0 0 100% 0); } to { clip-path:inset(0 0 0 0); } }

/* Closing tiles end on amber, like the homepage. */
.line-close.close-tile { background-color:#F2A93B; background-image:linear-gradient(90deg, rgba(11,11,12,0.07) 1px, transparent 1px), linear-gradient(rgba(11,11,12,0.07) 1px, transparent 1px); background-size:24px 24px; --tile-fg:#0B0B0C; --tile-muted:rgba(11,11,12,0.78); color:#0B0B0C; }
.line-close .btn-pill { background-color:#0B0B0C; color:#F5F5F7; }

/* Industry chips: outlined in ink, amber on hover. */
.industry-links a { border:1.5px solid #0B0B0C; color:#0B0B0C; background:#FFFDF8; }
.industry-links a:hover, .industry-links a:focus-visible { background:#F2A93B; box-shadow:none; }

@media (prefers-reduced-motion: reduce) {
  .line-hero::before { animation:none; }
}

/* Title bands (Pricing, FAQ, Get started, Support, legal): left-aligned posters too. */
.title-band { text-align:left; padding:64px max(24px, calc((100% - var(--container-width)) / 2 + 22px)) 64px; }
.title-band h1 { margin:0; max-width:16ch; font-size:clamp(44px, 7.4vw, 104px); font-weight:850; font-stretch:112.5%; letter-spacing:-0.045em; line-height:0.92; text-align:left; }
.title-band p { margin:20px 0 0; max-width:46ch; text-align:left; }
.title-band .tile-eyebrow, .title-band > p:first-child { margin:0 0 14px; font-weight:700; }

/* Sweep (owner, 2026-11-10): the last soft gray cards join the cut-card system.
   Scoped under main / .page-body so they beat industry.css, gift.css and the
   .page-body re-points in main.css. The journey's phone keeps its phone frame. */
main .journey-screen:not(.journey-phone), main .ww-col, main .gift-checks li, .page-body .price-card, .page-body .summary-card, .page-body .guarantee-line { background:#FFFDF8; border:1.5px solid #0B0B0C; border-radius:14px; box-shadow:6px 6px 0 #0B0B0C; }
.page-body .price-card:hover { background:#FFFDF8; border-color:#0B0B0C; box-shadow:8px 8px 0 #0B0B0C; }
main .ww-with { background:#FFF4DE; box-shadow:6px 6px 0 #F2A93B; }