/* October web — black and white (19 Oct 2026), the October leaf logo, Cormorant Garamond
   display over the system font (SF on Apple), as on the old october-ai.com. Contrast (WCAG AA): ink #0B0B0B on white 20:1, muted #4A4A4A on
   white 8.9:1, #B8B8B8 on #0B0B0B 10.4:1. The old orange tokens now resolve to ink. */
:root {
  --ink: #0B0B0B;
  --muted: #4A4A4A;
  --faint: #5C5C5C;
  --line: #E4E4E4;
  --field: #8A8A8A;
  --bg: #FFFFFF;
  --tint: #F5F5F5;
  --orange: #0B0B0B;
  --orange-ink: #4A4A4A;
  --hover: #4A4A4A;
  --ok-bg: #E3F2E6; --ok: #1F5B2C;
  --work-bg: #FFF1DC; --work: #7A4206;
  --bad-bg: #FDE8E4; --bad: #8A2A1B;
  --radius: 18px;
  --focus: 0 0 0 3px #FFFFFF, 0 0 0 5px #16171A;
  color-scheme: light;
}
/* Cormorant Garamond, self-hosted (SIL OFL 1.1, public/fonts/OFL.txt): Google Fonts' own latin subset of the
   variable font, one file for both weights we use (500 and 600). layout() preloads it; the URL must stay
   identical to that preload or the browser fetches it twice. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url(/fonts/cormorant-garamond-latin-v21.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); font-size: 17px; line-height: 1.47; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
body.tint { background: var(--tint); }
a { color: var(--ink); }
a:hover { color: var(--hover); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.08; margin: 0 0 12px; }
h1 { font-size: clamp(32px, 6vw, 56px); font-weight: 700; }
.display { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: -0.005em; }
h2 { font-size: clamp(24px, 3.5vw, 32px); font-weight: 700; }
h3 { font-size: 20px; font-weight: 700; }
p { margin: 0 0 12px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
@media (min-width: 720px) { .wrap { padding-left: 32px; padding-right: 32px; } }
.plain { list-style: none; margin: 0; padding: 0; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.center { text-align: center; }
.big { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.label { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; margin: 0 0 8px; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-ink); margin: 0 0 14px; }
.lead { font-size: 19px; color: var(--muted); max-width: 640px; }

/* Header / footer */
.site-header { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding-top: 20px; padding-bottom: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 24px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }
.mark { display: block; width: 34px; height: auto; }
.mark-white { display: none; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; font-size: 15px; font-weight: 500; }
.site-header nav a:not(.btn) { text-decoration: none; padding: 8px 0; }
.site-header .lang { color: var(--muted); }
.site-footer { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; padding-top: 40px; padding-bottom: 40px; color: var(--muted); font-size: 14px; }
.inline { display: inline; margin: 0; }
.linklike { font: inherit; background: none; border: 0; padding: 8px 0; color: var(--ink); cursor: pointer; text-decoration: none; }
.linklike:hover { color: var(--hover); }

/* Buttons (real <a>/<button>, min 44px tap target) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px 22px; border-radius: 999px; font: inherit; font-weight: 500; font-size: 16px; letter-spacing: -0.01em; text-decoration: none; border: 2px solid transparent; cursor: pointer; text-align: center; }
.btn-sm { padding: 9px 18px; font-size: 15px; }
.btn-lg { padding: 15px 28px; font-size: 17px; }
.btn-block { display: flex; width: 100%; border-radius: 14px; }
.btn-orange { background: var(--ink); color: #fff; }
.btn-orange:hover { background: #2E2E2E; color: #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #2E2E2E; color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost-dark { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Landing */
.section { padding-top: 40px; padding-bottom: 40px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.step h3 { margin-top: 4px; }
.step p { color: var(--muted); margin: 0; }
.who { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.who li { border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.who span { color: var(--muted); font-size: 15px; }
.price-band { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; align-items: start; }
.plan { display: flex; flex-direction: column; gap: 4px; }
.plan h2 { margin-bottom: 4px; }
.price { margin: 4px 0 8px; }
.price .amount { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; }
.price .per { color: var(--muted); font-weight: 600; margin-left: 2px; }
.ticks { margin: 0 0 12px; padding-left: 20px; }
.ticks li { margin: 6px 0; }
.fourk { border: 2px solid var(--orange); border-radius: 14px; padding: 12px 14px; margin: 4px 0 12px; }
.fourk-line { font-weight: 800; margin: 0; }
.fourk-total { color: var(--muted); font-size: 15px; margin: 2px 0 0; }
.stack { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.choices { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.choice { display: flex; align-items: center; gap: 12px; border: 1px solid var(--field); border-radius: 12px; padding: 12px 14px; cursor: pointer; min-height: 44px; }
.choice:has(input:checked) { border: 2px solid var(--ink); padding: 11px 13px; }
.choice-label { flex: 1; font-weight: 600; }
.choice-price { font-weight: 800; font-size: 20px; }
.choice input, .check input, .seg input, .pill input { accent-color: var(--ink); width: 20px; height: 20px; margin: 0; }
.seg { border: 0; padding: 0; margin: 0; display: flex; gap: 16px; flex-wrap: wrap; }
.seg label, .check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.ent { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }

/* Forms */
.narrow { max-width: 480px; margin: 16px auto 40px; }
@media (max-width: 520px) { .narrow { margin-left: 16px; margin-right: 16px; } }
.form-card { padding: 32px 24px; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 520px) { .form-card { padding: 36px 32px; } }
.form-card h1 { font-size: 30px; margin: 0; }
.field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; }
.field label, .field legend { font-size: 15px; font-weight: 600; padding: 0; margin-bottom: 6px; }
.field input[type=email], .field input[type=text] { font: inherit; font-size: 16px; padding: 13px 14px; border: 1px solid var(--field); border-radius: 12px; background: #fff; color: var(--ink); width: 100%; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--field); border-radius: 999px; font-size: 15px; font-weight: 600; cursor: pointer; background: #fff; }
.pill:has(input:checked) { background: var(--ink); color: #fff; border-color: var(--ink); }
.pill:has(input:focus-visible) { box-shadow: var(--focus); }
.or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 14px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.flash { border-radius: 12px; padding: 12px 14px; margin: 0 0 8px; font-weight: 600; }
.flash-error { background: var(--bad-bg); color: var(--bad); }
.flash-info { background: var(--work-bg); color: var(--work); }

/* Account */
.account { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; padding-top: 8px; padding-bottom: 40px; }
.account-main { flex: 999 1 560px; min-width: 0; }
.account-side { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.row-between { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.row-between h1 { font-size: 34px; margin: 0; }
.table-card { padding: 0; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
th, td { text-align: left; padding: 14px 18px; }
thead th { color: var(--faint); font-size: 13px; font-weight: 600; }
tbody tr { border-top: 1px solid #EEECE8; }
tbody th { font-weight: 700; }
.badge { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--work-bg); color: var(--work); }
.badge-ready { background: var(--ok-bg); color: var(--ok); }
.badge-partial, .badge-retake, .badge-failed { background: var(--bad-bg); color: var(--bad); }
.empty { text-align: left; }
.side h3.label { margin-top: 16px; }
.receipts li { display: flex; justify-content: space-between; padding: 6px 0; font-weight: 700; }

/* ── Home (19 Oct 2026): Apple-like restraint. A black hero with the app beside what it delivers,
   a white band of four promises, the 3D model on a soft grey, industries, a black price band. ── */
body.dark { background: #fff; }
body.dark > .site-header { position: sticky; top: 0; z-index: 20; max-width: none; color: #fff; background: rgba(0,0,0,0.9); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(255,255,255,0.08); padding-top: 12px; padding-bottom: 12px; padding-left: max(16px, calc((100vw - 1120px) / 2)); padding-right: max(16px, calc((100vw - 1120px) / 2)); }
body.dark .site-header a, body.dark .site-header .linklike { color: #F5F5F7; }
body.dark .site-header nav { font-size: 14px; font-weight: 400; gap: 6px 26px; }
body.dark .site-header nav a:not(.btn):hover { color: #fff; opacity: 0.75; }
body.dark .brand { font-size: 20px; }
body.dark .mark { width: 28px; }
body.dark .mark-black { display: none; }
body.dark .mark-white { display: block; }
body.dark .nav-cta { background: #F5F5F7; color: var(--ink) !important; padding: 7px 16px; min-height: 34px; font-size: 14px; }

.hero-dark { background: #000; color: #F5F5F7; padding-bottom: 88px; }
.hero-dark a { color: #fff; }
.hero-head { padding-top: 72px; padding-bottom: 64px; max-width: 980px; text-align: center; }
.hero-dark .eyebrow { color: #86868B; }
.hero-dark h1.display { font-size: clamp(44px, 6.4vw, 88px); line-height: 1.0; letter-spacing: -0.02em; margin: 0 auto 22px; max-width: none; font-weight: 500; }
.h1-line { display: block; }
.hero-dark .lead { color: #A1A1A6; margin: 0 auto 10px; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.4; max-width: 620px; }
.hero-dark .actions { justify-content: center; margin-top: 28px; }
.btn-light { background: #F5F5F7; color: #000 !important; }
.btn-light:hover { background: #fff; }
.btn-outline-light { background: transparent; color: #F5F5F7; border: 1px solid rgba(245,245,247,0.4); }
.btn-outline-light:hover { border-color: #F5F5F7; color: #fff; }
.hero-dark :focus-visible, .price-cta :focus-visible { box-shadow: 0 0 0 3px #000, 0 0 0 5px #fff; }

/* The hero demo: the real app (left) → October at work (middle) → what came back (right).
   #demo[data-phase] = capture | process | deliver, driven by public/js/home.js. */
/* The break between the hero text and the demo: a hairline, a small heading and the three steps the
   demo plays, so the loop reads as its own section and starts only once the visitor has scrolled to it. */
.demo-intro { max-width: 1120px; margin-top: 24px; padding-top: 72px; padding-bottom: 48px; border-top: 1px solid #1F1F21; text-align: center; }
.demo-intro .eyebrow { margin-bottom: 10px; }
.demo-intro h2.display { font-size: clamp(30px, 3.6vw, 46px); font-weight: 500; color: #F5F5F7; margin: 0 0 22px; }
.demo-steps { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 28px; color: #A1A1A6; font-size: 15px; }
.demo-steps li { display: inline-flex; align-items: center; gap: 10px; }
.demo { max-width: 1120px; display: grid; grid-template-columns: minmax(150px, 300px) 170px minmax(0, 460px); justify-content: center; gap: 40px; align-items: center; }
.demo figure { margin: 0; min-width: 0; }
.demo figcaption { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; font-size: 15px; color: #86868B; transition: color 0.4s; }
.demo-k { width: 24px; height: 24px; border-radius: 999px; border: 1px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.demo[data-phase="capture"] .demo-in figcaption, .demo[data-phase="deliver"] .demo-out figcaption { color: #F5F5F7; }
.phone { position: relative; width: 100%; max-width: 300px; aspect-ratio: 9 / 19.5; margin: 0 auto; border-radius: 15% / 7%; background: #1A1A1A; padding: 3.6%; box-shadow: 0 0 0 1px #3A3A3A, 0 30px 80px rgba(0,0,0,0.6); transition: opacity 0.6s, transform 0.6s; }
.phone-island { position: absolute; top: 3.2%; left: 50%; width: 30%; height: 3.8%; transform: translateX(-50%); background: #000; border-radius: 999px; z-index: 3; }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 12% / 5.6%; overflow: hidden; background: #000; }
.phone-screen video { width: 100%; height: 100%; object-fit: cover; display: block; }
.demo[data-phase="deliver"] .phone { opacity: 0.45; transform: scale(0.97); }

.demo-mid { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.demo-track { width: 2px; height: 70px; background: #2A2A2A; border-radius: 2px; overflow: hidden; position: relative; }
.demo-fill { position: absolute; left: 0; right: 0; top: 0; height: 0; background: #F5F5F7; }
.demo[data-phase="process"] .demo-track:first-child .demo-fill { animation: fillDown 0.7s ease-out forwards; }
.demo[data-phase="process"] .demo-track:last-child .demo-fill { animation: fillDown 0.6s ease-out 1.3s forwards; }
.demo[data-phase="deliver"] .demo-fill { height: 100%; }
@keyframes fillDown { to { height: 100%; } }
.demo-ring { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.demo-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.demo-ring circle { fill: none; stroke: #2A2A2A; stroke-width: 2; }
.demo-ring circle.arc { stroke: #F5F5F7; stroke-linecap: round; stroke-dasharray: 132; stroke-dashoffset: 132; }
.demo[data-phase="process"] .demo-ring circle.arc { animation: ringFill 1.6s cubic-bezier(.4,0,.2,1) 0.4s forwards; }
.demo[data-phase="deliver"] .demo-ring circle.arc { stroke-dashoffset: 0; }
@keyframes ringFill { to { stroke-dashoffset: 0; } }
.demo-ring img { width: 22px; height: auto; opacity: 0.5; transition: opacity 0.4s; }
.demo[data-phase="process"] .demo-ring img, .demo[data-phase="deliver"] .demo-ring img { opacity: 1; }
.demo-status { display: grid; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.demo-status span { grid-area: 1 / 1; opacity: 0; transition: opacity 0.3s; white-space: nowrap; }
.demo[data-phase="capture"] .demo-wait { opacity: 1; color: #86868B; }
.demo[data-phase="process"] .demo-busy { opacity: 1; color: #F5F5F7; }
.demo[data-phase="deliver"] .demo-ready { opacity: 1; color: #F5F5F7; }
.demo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: #86868B; }
.demo-list li { display: flex; align-items: center; gap: 8px; transition: color 0.3s; }
.demo-list i { position: relative; flex: none; width: 16px; height: 16px; border-radius: 999px; border: 1px solid #3A3A3C; transition: background 0.3s, border-color 0.3s; }
.demo-list i::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #000; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); opacity: 0; transition: opacity 0.2s; }
.demo[data-phase="process"] .demo-list li { animation: tick 0.01s linear both; }
.demo[data-phase="process"] .demo-list li:nth-child(1) { animation-delay: 0.7s; }
.demo[data-phase="process"] .demo-list li:nth-child(2) { animation-delay: 1.15s; }
.demo[data-phase="process"] .demo-list li:nth-child(3) { animation-delay: 1.6s; }
@keyframes tick { to { color: #F5F5F7; } }
.demo[data-phase="process"] .demo-list li:nth-child(1) i { animation: tickI 0.25s ease 0.7s both; }
.demo[data-phase="process"] .demo-list li:nth-child(2) i { animation: tickI 0.25s ease 1.15s both; }
.demo[data-phase="process"] .demo-list li:nth-child(3) i { animation: tickI 0.25s ease 1.6s both; }
@keyframes tickI { to { background: #F5F5F7; border-color: #F5F5F7; } }
.demo[data-phase="process"] .demo-list li:nth-child(1) i::after { animation: tickC 0.2s ease 0.75s both; }
.demo[data-phase="process"] .demo-list li:nth-child(2) i::after { animation: tickC 0.2s ease 1.2s both; }
.demo[data-phase="process"] .demo-list li:nth-child(3) i::after { animation: tickC 0.2s ease 1.65s both; }
@keyframes tickC { to { opacity: 1; } }
.demo[data-phase="deliver"] .demo-list li { color: #F5F5F7; }
.demo[data-phase="deliver"] .demo-list i { background: #F5F5F7; border-color: #F5F5F7; }
.demo[data-phase="deliver"] .demo-list i::after { opacity: 1; }

.out-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.out-main { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #111; }
.out-main video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.out-photo { position: relative; aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; background: #111; }
.out-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Dimmed with opacity only: a filter (grayscale/blur) over a playing video is drawn on the CPU in Safari and
   made the demo stutter (27 Oct 2026). Opacity and transform stay on the GPU in every browser. */
.out-main, .out-photo { opacity: 0.12; transform: scale(0.985); transition: opacity 0.8s, transform 0.8s cubic-bezier(.2,.7,.2,1); }
.demo[data-phase="deliver"] .out-main, .demo[data-phase="deliver"] .out-photo { opacity: 1; transform: none; }
.demo[data-phase="deliver"] .out-main { transition-delay: 0.6s; }
.out-set { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.out-set li { position: relative; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; background: #111; opacity: 0.12; transform: translateY(6px); transition: opacity 0.6s, transform 0.6s cubic-bezier(.2,.7,.2,1); }
.out-set img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.out-set-more { display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px #3A3A3C; background: transparent !important; }
.out-set-more span { font-size: 11px; font-weight: 600; color: #F5F5F7; text-align: center; line-height: 1.15; }
.demo[data-phase="deliver"] .out-set li { opacity: 1; transform: none; }
.demo[data-phase="deliver"] .out-set li:nth-child(1) { transition-delay: 0.15s; } .demo[data-phase="deliver"] .out-set li:nth-child(2) { transition-delay: 0.22s; }
.demo[data-phase="deliver"] .out-set li:nth-child(3) { transition-delay: 0.29s; } .demo[data-phase="deliver"] .out-set li:nth-child(4) { transition-delay: 0.36s; }
.demo[data-phase="deliver"] .out-set li:nth-child(5) { transition-delay: 0.43s; } .demo[data-phase="deliver"] .out-set li:nth-child(6) { transition-delay: 0.5s; }
.chip { position: absolute; left: 12px; bottom: 12px; z-index: 2; background: rgba(0,0,0,0.62); color: #fff; font-size: 12px; font-weight: 500; padding: 5px 11px; border-radius: 999px; }

@media (max-width: 860px) {
  .demo { grid-template-columns: minmax(0, 36%) 44px minmax(0, 1fr); gap: 12px; }
  .demo-list { display: none; }
  .demo-ring { width: 40px; height: 40px; }
  .demo-ring img { width: 15px; }
  .demo-track { height: 40px; }
  .demo figcaption { font-size: 13px; margin-top: 12px; }
}
@media (max-width: 560px) {
  .hero-head { padding-top: 40px; padding-bottom: 32px; }
  /* phone and result side by side, October at work as a line underneath, so both are in view */
  .demo { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); grid-template-areas: "in out" "mid mid"; gap: 14px 12px; align-items: start; }
  .demo-in { grid-area: in; } .demo-out { grid-area: out; } .demo-mid { grid-area: mid; }
  .phone { max-width: none; }
  .demo figcaption { font-size: 12px; margin-top: 10px; gap: 6px; text-align: left; justify-content: flex-start; }
  .demo-k { width: 18px; height: 18px; font-size: 10px; }
  .demo-mid { flex-direction: row; justify-content: center; gap: 10px; }
  .demo-status { display: grid; font-size: 12px; }
  .demo-list { display: none; }
  .demo-ring { width: 32px; height: 32px; }
  .demo-ring img { width: 13px; }
  .demo-track { width: 36px; height: 2px; }
  .demo-fill { bottom: 0; height: auto; width: 0; right: auto; }
  .demo[data-phase="process"] .demo-track .demo-fill { animation-name: fillRight; }
  .demo[data-phase="deliver"] .demo-fill { width: 100%; }
  .out-grid { gap: 6px; }
  .out-photo, .out-main { border-radius: 10px; }
  .out-set { gap: 3px; } .out-set li { border-radius: 4px; }
  .out-set-more span { font-size: 8px; }
  .chip { font-size: 10px; left: 6px; bottom: 6px; padding: 3px 7px; }
}
@keyframes fillRight { to { width: 100%; } }

/* ── Before / after ── */
.compare-band { background: #000; color: #F5F5F7; padding: 112px 0 120px; }
.compare-band h2.display { font-size: clamp(36px, 5vw, 64px); font-weight: 500; margin-bottom: 14px; }
.compare-band .lead { color: #A1A1A6; margin: 0 auto 40px; }
.cmp-note { text-align: center; color: #86868B; font-size: 13px; margin: 18px 0 0; }
.cmp-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 200px)); justify-content: center; gap: 12px; margin-top: 28px; }
.cmp-tabs button { font: inherit; display: flex; align-items: center; gap: 12px; text-align: left; background: #111; color: #A1A1A6; border: 1px solid #262626; border-radius: 16px; padding: 8px; cursor: pointer; transition: border-color 0.3s, background 0.3s, color 0.3s; }
.cmp-tabs button img { width: 64px; height: 46px; object-fit: cover; border-radius: 10px; flex: none; opacity: 0.7; transition: opacity 0.3s; }
.cmp-tabs button strong { display: block; color: inherit; font-size: 15px; font-weight: 600; }
.cmp-tabs button small { display: block; font-size: 12px; color: #86868B; }
.cmp-tabs button:hover { border-color: #3A3A3C; color: #F5F5F7; }
.cmp-tabs button[aria-selected="true"] { border-color: #F5F5F7; color: #F5F5F7; background: #1A1A1A; }
.cmp-tabs button[aria-selected="true"] img { opacity: 1; }
@media (max-width: 1000px) { .cmp-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cmp-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cmp { --pos: 50%; position: relative; max-width: 1080px; margin: 0 auto; aspect-ratio: 3 / 2; border-radius: 22px; overflow: hidden; background: #111; user-select: none; }
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-after { clip-path: inset(0 0 0 var(--pos)); }
.cmp-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; box-shadow: 0 0 12px rgba(0,0,0,0.35); }
.cmp-knob { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 999px; background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,0.3); }
.cmp-knob::before, .cmp-knob::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -6px; border: 6px solid transparent; }
.cmp-knob::before { left: 9px; border-right-color: #000; }
.cmp-knob::after { right: 9px; border-left-color: #000; }
.cmp-tag { position: absolute; top: 16px; z-index: 2; background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 999px; pointer-events: none; }
.cmp-tag-l { left: 16px; } .cmp-tag-r { right: 16px; }
.cmp-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.cmp-range:focus-visible + * , .cmp:focus-within .cmp-knob { box-shadow: 0 0 0 3px #000, 0 0 0 5px #fff; }
@media (max-width: 560px) { .compare-band { padding: 72px 0 80px; } .cmp { border-radius: 14px; } .cmp-tag { font-size: 11px; top: 10px; } .cmp-tag-l { left: 10px; } .cmp-tag-r { right: 10px; } }

/* ── Footer ── */
.site-footer { padding: 0; border-top: 1px solid var(--line); display: block; }
.footer-in { display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; padding-top: 44px; padding-bottom: 28px; }
.footer-brand .brand { color: var(--ink); font-size: 20px; }
.footer-brand p { color: #6E6E73; font-size: 14px; margin: 10px 0 0; max-width: 36ch; }
.mark-foot { width: 26px; height: auto; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: flex-start; font-size: 14px; }
.footer-nav a { color: #424245; text-decoration: none; }
.footer-nav a:hover { color: var(--ink); }
.footer-base { border-top: 1px solid var(--line); padding-top: 18px; padding-bottom: 28px; color: #6E6E73; font-size: 12px; }

/* ── Why October: the four promises on top, the 3D model of how it works below ── */
.why-band { background: #F5F5F7; padding: 112px 0 104px; }
.why-band .promise { background: #fff; }
.flow-head { margin-top: 104px; margin-bottom: 40px; }
.flow-head h3.display { font-size: clamp(28px, 3.4vw, 40px); font-weight: 500; margin: 0; }
.center { text-align: center; }
.why-band h2.display, .who-band h2.display { font-size: clamp(32px, 4.6vw, 56px); font-weight: 500; line-height: 1.05; max-width: 23ch; margin-left: auto; margin-right: auto; }
.promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.promise { background: #F5F5F7; border-radius: 22px; padding: 32px 26px 30px; display: flex; flex-direction: column; opacity: 0; transform: translateY(16px); transition: opacity 0.7s, transform 0.7s cubic-bezier(.2,.7,.2,1); }
.seen .promise { opacity: 1; transform: none; }
.seen .promise:nth-child(2) { transition-delay: 0.12s; } .seen .promise:nth-child(3) { transition-delay: 0.24s; } .seen .promise:nth-child(4) { transition-delay: 0.36s; }
.pcheck { width: 40px; height: 40px; margin-bottom: 26px; }
.pcheck circle { fill: none; stroke: #0B0B0B; stroke-width: 2; stroke-dasharray: 139; stroke-dashoffset: 139; transition: stroke-dashoffset 0.9s ease-out; }
.pcheck path { fill: none; stroke: #0B0B0B; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 34; stroke-dashoffset: 34; transition: stroke-dashoffset 0.45s ease-out 0.7s; }
.seen .pcheck circle, .seen .pcheck path { stroke-dashoffset: 0; }
.seen .promise:nth-child(2) .pcheck circle { transition-delay: 0.12s; } .seen .promise:nth-child(2) .pcheck path { transition-delay: 0.82s; }
.seen .promise:nth-child(3) .pcheck circle { transition-delay: 0.24s; } .seen .promise:nth-child(3) .pcheck path { transition-delay: 0.94s; }
.seen .promise:nth-child(4) .pcheck circle { transition-delay: 0.36s; } .seen .promise:nth-child(4) .pcheck path { transition-delay: 1.06s; }
.promise-fig { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(34px, 3.4vw, 44px); font-weight: 600; line-height: 1; letter-spacing: -0.01em; margin: 0 0 6px; }
.promise h3 { font-size: 17px; font-weight: 600; margin: 0 0 10px; letter-spacing: -0.01em; }
.promise p:last-child { color: #6E6E73; font-size: 15px; margin: 0; }
.footnote { color: #86868B; font-size: 12px; margin-top: 28px; }
@media (max-width: 900px) { .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .promises { grid-template-columns: minmax(0, 1fr); } .why-band { padding: 72px 0 64px; } .flow-head { margin-top: 64px; } }

/* ── The 3D model ── */
.flow-stage { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: center; }
#flow-canvas { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 24px; background: #F4F4F2; }
.flow-steps { display: flex; flex-direction: column; gap: 4px; }
.flow-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; color: #6E6E73; transition: color 0.3s, background 0.3s, box-shadow 0.3s; }
.flow-steps li strong { display: block; color: inherit; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.flow-steps li span span { display: block; font-size: 14px; margin-top: 2px; }
.flow-steps li.on { color: #0B0B0B; background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,0.06); }
.flow-n { flex: none; width: 28px; height: 28px; border-radius: 999px; border: 1px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; margin-top: 1px; }
.flow-steps li.on .flow-n { background: #0B0B0B; color: #fff; border-color: #0B0B0B; }
@media (max-width: 900px) { .flow-stage { grid-template-columns: minmax(0, 1fr); } #flow-canvas { aspect-ratio: 4 / 3; } .flow-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .flow-steps { grid-template-columns: minmax(0, 1fr); } }

/* ── Industries and the price band ── */
.who-band { padding-top: 112px; padding-bottom: 104px; }
.who { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
.who li { border-radius: 18px; padding: 22px 20px; background: #F5F5F7; display: flex; flex-direction: column; gap: 6px; }
.who strong { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.who span { color: #6E6E73; font-size: 14px; }
@media (max-width: 1000px) { .who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .who { grid-template-columns: minmax(0, 1fr); } .who-band { padding-top: 72px; padding-bottom: 64px; } }
.price-cta { background: #000; color: #F5F5F7; }
.price-band { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; padding-top: 72px; padding-bottom: 72px; }
.price-band h2.display { font-size: clamp(32px, 4vw, 48px); font-weight: 500; margin: 0 0 8px; }
.price-band p { color: #A1A1A6; margin: 0; max-width: 52ch; }
.price-band .actions { margin-top: 0; }

/* ── Pricing: what you get, and what is coming ── */
.get { padding-top: 72px; }
.get h2, .soon-card h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.05; }
.get-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.get-card { background: #F5F5F7; border-radius: 22px; padding: 14px 14px 22px; }
.get-media { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #111; margin-bottom: 16px; }
.get-media > img, .get-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mini-phone { height: 88%; aspect-ratio: 9 / 19.5; border-radius: 18% / 8.3%; background: #1A1A1A; padding: 3%; box-shadow: 0 0 0 1px #3A3A3A, 0 14px 30px rgba(0,0,0,0.5); }
.mini-phone img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 14% / 6.5%; }
.get-badge { position: absolute; right: 10px; top: 10px; background: rgba(0,0,0,0.6); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; padding: 4px 9px; border-radius: 999px; }
.get-badge-4k { background: #fff; color: #000; }
.get-full { position: absolute; left: 10px; bottom: 10px; background: rgba(0,0,0,0.6); color: #fff; font: inherit; font-size: 12px; font-weight: 600; padding: 6px 11px 6px 26px; border: 0; border-radius: 999px; cursor: pointer; }
.get-full::before { content: ""; position: absolute; left: 11px; top: 50%; width: 0; height: 0; transform: translateY(-50%); border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.get-full:hover { background: rgba(0,0,0,0.8); color: #fff; }
.get-viewer { position: fixed; inset: 0; z-index: 50; background: #000; display: grid; place-items: center; }
.get-viewer video { width: 100%; height: 100%; object-fit: contain; }
.get-viewer-close { position: absolute; top: 14px; right: 14px; z-index: 1; background: rgba(255,255,255,0.14); color: #fff; font: inherit; font-size: 14px; padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer; }
.get-viewer-res { position: absolute; top: 20px; left: 18px; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; background: rgba(0,0,0,0.5); padding: 4px 10px; border-radius: 999px; }
.get-card h3 { font-size: 18px; font-weight: 600; margin: 0 6px 6px; letter-spacing: -0.01em; }
.get-card p { color: #6E6E73; font-size: 14px; margin: 0 6px; }
@media (max-width: 960px) { .get-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .get-grid { grid-template-columns: minmax(0, 1fr); } }

.soon-band { padding-top: 24px; }
.soon-card { background: #000; color: #F5F5F7; border-radius: 28px; padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.soon-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #F5A623; margin: 0 0 14px; }
.soon-ico { flex: none; width: 18px; height: 18px; border-radius: 999px; border: 2px solid rgba(245,166,35,0.3); border-top-color: #F5A623; animation: spin 1.1s linear infinite; }
.soon-card h2 { margin: 0 0 22px; }
.soon-list { display: flex; flex-direction: column; gap: 14px; }
.soon-list li { border-top: 1px solid #2A2A2A; padding-top: 14px; }
.soon-list strong { display: block; font-size: 17px; font-weight: 600; }
.soon-list span { color: #A1A1A6; font-size: 15px; }
.soon-form { background: #161617; border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.soon-form label[for] { font-size: 14px; font-weight: 600; }
.soon-form input[type=email] { font: inherit; font-size: 16px; padding: 14px; border-radius: 12px; border: 1px solid #3A3A3C; background: #000; color: #F5F5F7; }
.soon-form input[type=email]:focus-visible { outline: none; box-shadow: 0 0 0 3px #161617, 0 0 0 5px #F5F5F7; }
.soon-pick { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; color: #D1D1D6; }
.soon-pick label { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; }
.soon-pick input { accent-color: #F5A623; width: 18px; height: 18px; margin: 0; }
.soon-form .btn { margin-top: 4px; }
.soon-fine { color: #86868B; font-size: 12px; margin: 0; }
.soon-ok { background: rgba(48,209,88,0.14); color: #30D158; border-radius: 10px; padding: 10px 12px; margin: 0; font-weight: 600; }
.soon-bad { background: rgba(255,69,58,0.14); color: #FF6961; border-radius: 10px; padding: 10px 12px; margin: 0; font-weight: 600; }
@media (max-width: 860px) { .soon-card { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .soon-ico { animation: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
.page-head h1.display { font-size: clamp(40px, 5.4vw, 68px); font-weight: 500; letter-spacing: -0.015em; margin-top: 32px; }
.plan h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 30px; }
.ent h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 30px; }

/* Phones: one-line header (Log in + Get started; the rest is in the footer), real tap targets */
@media (max-width: 640px) {
  .site-header { flex-wrap: nowrap; }
  .site-header nav { flex-wrap: nowrap; gap: 14px; }
  .brand span { font-size: 18px; }
}
.actions { row-gap: 12px; }
.site-header nav a:not(.btn) { min-height: 44px; display: inline-flex; align-items: center; }
.footer-nav a { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 640px) { .site-header nav a.hide-sm { display: none; } body.dark > .site-header { padding-top: 8px; padding-bottom: 8px; } }
.real { color: #86868B; font-size: 12px; text-align: center; margin-top: 32px; }

/* ── FAQ, News, About, Contact ── */
.page-hero { position: relative; min-height: clamp(520px, 38vw, 720px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: #000; }
.page-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0) 70%), linear-gradient(transparent 55%, rgba(0,0,0,0.55)); }
.page-hero-in { position: relative; z-index: 1; padding-top: 120px; padding-bottom: 48px; width: 100%; }
.page-hero .eyebrow { color: #D1D1D6; }
.page-hero h1.display { font-size: clamp(42px, 6vw, 76px); font-weight: 500; line-height: 1.02; margin: 0 0 14px; max-width: 16ch; }
.page-hero .lead { color: #E5E5EA; max-width: 54ch; margin: 0; }
@media (max-width: 560px) { .page-hero { min-height: 420px; } .page-hero-img { object-position: 78% 40%; } .page-hero::after { background: linear-gradient(transparent 20%, rgba(0,0,0,0.85)); } .page-hero-in { padding-bottom: 28px; } }

.faq-wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; padding-top: 56px; padding-bottom: 96px; align-items: start; }
.faq-nav { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 2px; }
.faq-nav a { text-decoration: none; color: #6E6E73; font-size: 15px; padding: 8px 12px; border-radius: 10px; min-height: 40px; display: flex; align-items: center; }
.faq-nav a:hover { background: #F5F5F7; color: var(--ink); }
.faq-group { margin-bottom: 44px; scroll-margin-top: 84px; }
.faq-group h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: clamp(28px, 3vw, 36px); margin: 0 0 10px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 2px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; min-height: 44px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid #86868B; border-bottom: 2px solid #86868B; transform: rotate(45deg); margin-top: -4px; transition: transform 0.2s; }
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq-item p { color: #424245; margin: 0 2px 20px; max-width: 70ch; }
.faq-more { margin-top: 24px; background: #F5F5F7; border-radius: 20px; padding: 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.faq-more p { margin: 0; }
@media (max-width: 860px) { .faq-wrap { grid-template-columns: minmax(0, 1fr); gap: 16px; } .faq-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; } .faq-nav a { background: #F5F5F7; } }

.news { padding-bottom: 96px; }
.news-card { background: #F5F5F7; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; }
.news-big { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); margin-bottom: 20px; }
.news-img { position: relative; aspect-ratio: 16 / 9; background: #111; }
.news-big .news-img { aspect-ratio: auto; min-height: 340px; }
.news-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.news-text { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.news-big .news-text { justify-content: center; padding: 40px; }
.news-meta { display: flex; gap: 10px; align-items: center; color: #6E6E73; font-size: 13px; margin: 0; }
.news-tag { background: #fff; color: var(--ink); font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.news-text h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; margin: 4px 0 0; }
.news-big .news-text h2 { font-size: clamp(30px, 3.4vw, 44px); }
.news-text p { color: #424245; margin: 0; }
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .news-big { grid-template-columns: minmax(0, 1fr); } .news-big .news-img { min-height: 0; aspect-ratio: 16 / 9; } .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .news-grid { grid-template-columns: minmax(0, 1fr); } .news-big .news-text { padding: 26px; } }

.about-story { padding-top: 88px; padding-bottom: 72px; }
.about-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; }
.about-cols h2.display { font-size: clamp(32px, 4vw, 48px); font-weight: 500; line-height: 1.05; margin: 0; }
.about-cols p { font-size: 19px; line-height: 1.55; color: #424245; }
.about-band { background: #F5F5F7; padding: 96px 0; }
.about-band h2.display { font-size: clamp(32px, 4.4vw, 52px); font-weight: 500; margin-bottom: 40px; }
.about-principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.about-principles li { background: #fff; border-radius: 22px; padding: 28px 24px; }
.about-n { font-family: "Cormorant Garamond", Georgia, serif; font-size: 34px; font-weight: 600; color: #86868B; }
.about-principles h3 { font-size: 19px; font-weight: 600; margin: 10px 0 8px; letter-spacing: -0.01em; }
.about-principles p { color: #6E6E73; font-size: 15px; margin: 0; }
@media (max-width: 960px) { .about-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .about-cols { grid-template-columns: minmax(0, 1fr); gap: 24px; } .about-principles { grid-template-columns: minmax(0, 1fr); } }

.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; padding-top: 72px; padding-bottom: 104px; align-items: start; }
.contact-side h2 { font-size: 15px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #6E6E73; margin: 28px 0 8px; }
.contact-side h2:first-child { margin-top: 0; }
.contact-side p { font-size: 18px; margin: 0; color: #424245; }
.contact-side a { color: var(--ink); }
.contact-form { padding: 28px; display: flex; flex-direction: column; gap: 16px; border-radius: 22px; }
.contact-form select, .contact-form textarea { font: inherit; font-size: 16px; padding: 13px 14px; border: 1px solid var(--field); border-radius: 12px; background: #fff; color: var(--ink); width: 100%; }
.contact-form textarea { resize: vertical; min-height: 140px; }
.flash-ok { background: var(--ok-bg); color: var(--ok); }
@media (max-width: 860px) { .contact { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* footer columns */
.footer-nav { gap: 28px 56px; }
.footer-col { display: flex; flex-direction: column; gap: 2px; }
.footer-col span { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #6E6E73; margin-bottom: 4px; }
@media (max-width: 1100px) { .site-header nav a.hide-md { display: none; } }
/* light page heroes (bright mood photos): dark text over a soft white fade from the left */
.page-hero-light { color: var(--ink); background: #F5F5F7; }
.page-hero-light .page-hero-img { object-position: 42% 32%; }
.page-hero-light::after { background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.66) 34%, rgba(255,255,255,0) 57%); }
.page-hero-light .eyebrow { color: #6E6E73; }
.page-hero-light .lead { color: #424245; max-width: 44ch; }
/* on a phone: the photo as a band on top, the words below it on plain grey (no text over the person) */
@media (max-width: 560px) { .page-hero-light { flex-direction: column; align-items: stretch; min-height: 0; } .page-hero-light .page-hero-img { position: relative; height: 300px; object-position: 74% 35%; } .page-hero-light::after { display: none; } .page-hero-light .page-hero-in { padding-top: 28px; padding-bottom: 36px; } }

/* The legal page */
.legal { max-width: 760px; }
.legal-jump { margin: 18px 0 8px; }
.legal-part { padding-top: 48px; }
.legal-part h2.display { font-size: clamp(28px, 3.4vw, 40px); font-weight: 500; margin: 0 0 8px; }
.legal-part h3 { font-size: 17px; font-weight: 600; margin: 28px 0 6px; letter-spacing: -0.01em; }
.legal-part p { color: #424245; margin: 0 0 10px; }
.site-header nav a, .site-header nav .btn { white-space: nowrap; }

/* Industry pages (/industries/...) and the linked industry cards on the home page */
.who li { padding: 0; }
.who li a { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px; height: 100%; color: inherit; text-decoration: none; border-radius: 18px; transition: background 0.2s; }
.who li a:hover { background: #ECECEE; }
.ind-head { max-width: 860px; }
.ind-head h1.display { font-size: clamp(40px, 5.4vw, 68px); font-weight: 500; line-height: 1.04; margin: 0 0 16px; }
.ind-head .actions { margin-top: 28px; }
.ind-cases { display: grid; gap: 28px; padding-bottom: 24px; }
.ind-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ind-pair div { position: relative; border-radius: 18px; overflow: hidden; background: #F5F5F7; aspect-ratio: 3 / 2; }
.ind-pair img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ind-tag { position: absolute; left: 12px; bottom: 12px; background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; }
.ind-case figcaption { color: #6E6E73; font-size: 13px; margin-top: 10px; }
.ind-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ind-points li { background: #F5F5F7; border-radius: 22px; padding: 28px 26px; }
.ind-points h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; }
.ind-points p { color: #6E6E73; margin: 0; }
.ind-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ind-steps li { background: #fff; border-radius: 22px; padding: 28px 26px; }
.ind-steps h3 { font-size: 19px; font-weight: 600; margin: 10px 0 8px; }
.ind-steps p { color: #6E6E73; margin: 0; }
.ind-faq { max-width: 860px; }
.ind-faq h2.display { font-size: clamp(30px, 3.8vw, 44px); font-weight: 500; margin: 0 0 20px; }
.ind-more { color: #6E6E73; margin-top: 24px; }
.ind-more a:not(:last-child) { margin-right: 6px; }
.ind-more a:not(:last-child)::after { content: ","; }
@media (max-width: 860px) { .ind-points, .ind-steps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .ind-pair { grid-template-columns: minmax(0, 1fr); } }

/* Account: the places as cards, the app card with its QR code, one capture's downloads */
.cap-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 18px; }
.cap-card { display: block; background: #fff; border-radius: 18px; overflow: hidden; color: inherit; text-decoration: none; box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 6px 24px rgba(0,0,0,0.05); transition: transform 0.2s; }
.cap-card:hover { transform: translateY(-2px); }
.cap-thumb { aspect-ratio: 3 / 2; background: #ECECEE; }
.cap-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cap-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; align-items: flex-start; }
.badge-waiting { background: #FFF4E5; color: #8A4B00; }
.app-card { display: flex; gap: 28px; align-items: center; justify-content: space-between; margin-top: 18px; }
.app-card h2 { margin: 0 0 12px; }
.app-card-compact { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 0; }
.app-card-compact .app-qr svg { width: 132px; height: 132px; }
.app-steps { display: grid; gap: 10px; margin: 0 0 18px; }
.app-steps li { display: flex; gap: 12px; align-items: baseline; }
.app-steps li span { flex: none; width: 24px; height: 24px; border-radius: 999px; background: #0B0B0B; color: #fff; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.app-qr { margin: 0; text-align: center; }
.app-qr svg { width: 168px; height: 168px; display: block; border-radius: 12px; }
.app-qr figcaption { color: #86868B; font-size: 12px; margin-top: 8px; }
.app-page-grid { max-width: 760px; margin-top: 24px; }
.cap-page h1 { margin: 0 0 4px; }
.cap-head { align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 8px 0 24px; }
.cap-state { margin-bottom: 28px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cap-state p { margin: 0; }
.dl-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin: 12px 0 36px; }
.dl-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; display: block; background: #ECECEE; }
.dl-videos { display: grid; gap: 18px; margin: 12px 0 36px; }
.dl-video video { width: 100%; max-height: 70vh; border-radius: 14px; background: #000; display: block; }
.dl-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px 0; font-size: 14px; }
.dl-link { font-weight: 600; white-space: nowrap; }
.dl-orig { padding-top: 4px; font-size: 13px; }
.dl-orig .dl-link { font-weight: 500; }
@media (max-width: 640px) { .app-card { flex-direction: column; align-items: flex-start; } .app-qr { display: none; } }

/* ── The account, redesigned (20 Oct 2026): a hero with the numbers, places, the plan picker ── */
.acc-hero { background: #fff; border-bottom: 1px solid var(--line); }
.acc-hero-in { padding-top: 40px; padding-bottom: 36px; }
.acc-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #6E6E73; margin: 0 0 10px; }
.acc-hero h1.display { font-size: clamp(36px, 5vw, 56px); font-weight: 500; margin: 0 0 8px; }
.acc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.acc-tile { background: #F5F5F7; border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.acc-tile strong { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.acc-k { font-size: 13px; color: #6E6E73; font-weight: 600; }
.acc-body { padding-top: 36px; padding-bottom: 72px; display: grid; gap: 48px; }
.acc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.acc-head h2 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 34px; font-weight: 500; margin: 0; }
.acc-head p { margin: 0; flex-basis: 100%; }
.cap-thumb { position: relative; }
.cap-badge { position: absolute; left: 10px; top: 10px; }
.cap-thumb-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ECECEE, #F7F7F8); }
.cap-spin { width: 18px; height: 18px; border-radius: 999px; border: 2px solid #D2D2D7; border-top-color: #6E6E73; animation: spin 1s linear infinite; }
.pp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pp-col { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 12px; margin: 0; }
.pp-current { border-color: #0B0B0B; box-shadow: 0 0 0 1px #0B0B0B; }
.pp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pp-top h3 { font-size: 21px; margin: 0; }
.pp-tag { font-size: 12px; font-weight: 600; background: #0B0B0B; color: #fff; border-radius: 999px; padding: 3px 10px; }
.pp-price { margin: 0; }
.pp-price strong { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; }
.pp-price span { color: #6E6E73; margin-left: 4px; }
.pp-list { display: grid; gap: 6px; font-size: 15px; color: #424245; margin: 0; }
.pp-list li::before { content: "✓"; margin-right: 8px; color: #0B0B0B; font-weight: 600; }
.pp-opts { border: 0; padding: 0; margin: 4px 0 0; display: grid; gap: 10px; }
.pp-toggle { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.pp-seg { display: grid; grid-template-columns: 1fr 1fr; background: #F5F5F7; border-radius: 12px; padding: 4px; gap: 4px; }
.pp-seg label { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 14px; font-weight: 600; padding: 8px 6px; border-radius: 9px; cursor: pointer; }
.pp-seg label .muted { font-weight: 400; font-size: 12px; }
.pp-seg input { position: absolute; opacity: 0; pointer-events: none; }
.pp-seg label:has(input:checked) { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.pp-seg label:has(input:focus-visible) { box-shadow: var(--focus); }
.pp-note { margin: 0; }
.pp-col .btn { margin-top: auto; align-self: stretch; text-align: center; }
.pp-banner { background: #FFF4E5; color: #5A3300; border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.pp-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; margin-top: 14px; }
.pp-actions { display: flex; gap: 18px; flex-wrap: wrap; }
.linklike.danger { color: #8A2A1B; }
.acc-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.acc-two .app-card { margin-top: 0; }
.team li { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.team-dot { width: 28px; height: 28px; border-radius: 999px; background: #0B0B0B; color: #fff; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 900px) { .acc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .acc-tile strong { font-size: 24px; } }
.pp-foot .linklike, .pp-banner .linklike { text-decoration: underline; padding: 0; font-weight: 600; }
.site-header nav .linklike { white-space: nowrap; }

/* Emptied and staged rooms on a capture's page */
.vsec { margin-top: 24px; }
.vrows { display: grid; gap: 12px; margin: 0 0 18px; }
.vrow { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 12px; }
.vrow img { width: 140px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; display: block; }
.vchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.vchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 14px; cursor: pointer; background: #fff; }
.vchip:has(input:checked) { border-color: #0B0B0B; box-shadow: 0 0 0 1px #0B0B0B; }
.vchip-done { background: var(--ok-bg); color: var(--ok); border-color: transparent; cursor: default; }
.vchip-busy { background: #F5F5F7; color: #6E6E73; cursor: default; }
.dl-var img { outline: 1px solid var(--line); }
@media (max-width: 560px) { .vrow { grid-template-columns: minmax(0, 1fr); } .vrow img { width: 100%; } }
.addon-lead { max-width: 64ch; }
.addon-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 22px 0 12px; }
.addon-grid li { position: relative; border-radius: 16px; overflow: hidden; background: #F5F5F7; }
.addon-grid img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.addon-grid span { position: absolute; left: 10px; bottom: 10px; background: rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; }
@media (max-width: 900px) { .addon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .addon-grid li:first-child { grid-column: 1 / -1; } }

/* ── The order form on the pricing page ── */
.order h2 { font-size: clamp(30px, 4vw, 44px); }
.ob { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; margin-top: 18px; }
.ob-group { border: 1px solid var(--line); border-radius: 22px; padding: 20px 22px; margin: 0 0 16px; background: #fff; display: grid; gap: 10px; }
.ob-group[hidden] { display: none; }
.ob-group legend { font-weight: 600; font-size: 15px; padding: 0 6px; }
.ob-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ob-plan { border: 1px solid var(--line); border-radius: 16px; padding: 14px; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; }
.ob-plan > span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.ob-plan:has(input:checked) { border-color: #0B0B0B; box-shadow: 0 0 0 1px #0B0B0B; }
.ob-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 15px; padding: 6px 0; }
.ob-step { grid-template-columns: minmax(0, 1fr) auto auto; }
.ob-step > span:first-child { display: flex; flex-direction: column; }
.ob-price { color: #424245; font-weight: 600; white-space: nowrap; }
.ob-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.ob-qty button { width: 34px; height: 34px; border: 0; background: #F5F5F7; font-size: 18px; cursor: pointer; }
.ob-qty input { width: 44px; text-align: center; border: 0; font: inherit; -moz-appearance: textfield; }
.ob-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.ob-sum { position: sticky; top: 20px; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 22px; display: grid; gap: 12px; }
.ob-sum h3 { margin: 0; font-size: 19px; }
.ob-lines { display: grid; gap: 8px; margin: 0; font-size: 15px; }
.ob-lines li { display: flex; justify-content: space-between; gap: 12px; }
.ob-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 12px; margin: 0; }
.ob-total strong { font-size: 28px; letter-spacing: -0.02em; }
.ob-sum .btn { width: 100%; text-align: center; }
.ob .field { display: grid; gap: 6px; font-size: 15px; }
.ob .field input, .ob .field select { font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
@media (max-width: 900px) { .ob { grid-template-columns: minmax(0, 1fr); } .ob-sum { position: static; } .ob-plans { grid-template-columns: minmax(0, 1fr); } }
.vleft { margin: 6px 0 0; flex-basis: 100%; color: #424245; }

/* Pay per place as the order card; rooms to empty/stage */
.plan-order .choices { margin: 0; }
.pg-addons { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.pg-addons-h { font-weight: 600; font-size: 15px; margin: 0; }
.pg-addon { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pg-addon > div { display: flex; flex-direction: column; font-size: 15px; }
.pg-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 12px; margin: 4px 0 0; }
.pg-total strong { font-size: 26px; letter-spacing: -0.02em; }
.vrooms { display: grid; gap: 14px; margin: 0 0 18px; }
.vroom { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 16px; display: grid; gap: 14px; }
.vroom-head { display: flex; gap: 14px; align-items: center; }
.vroom-head > div:last-child { display: flex; flex-direction: column; }
.vroom-thumbs { display: flex; }
.vroom-thumbs img { width: 64px; height: 44px; object-fit: cover; border-radius: 8px; border: 2px solid #fff; margin-left: -14px; box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.vroom-thumbs img:first-child { margin-left: 0; }
.vlooks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.vlook { position: relative; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; cursor: pointer; background: #fff; display: block; }
.vlook input { position: absolute; top: 10px; left: 10px; width: 18px; height: 18px; z-index: 1; }
.vlook img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.vlook span { display: flex; justify-content: space-between; padding: 8px 10px; font-size: 14px; }
.vlook em { font-style: normal; color: #424245; }
.vlook:has(input:checked) { border-color: #0B0B0B; box-shadow: 0 0 0 2px #0B0B0B; }
.vlook-ready, .vlook-busy { cursor: default; }
.vlook-ready em { color: var(--ok); }
.vlook-busy img { opacity: 0.6; }
@media (max-width: 700px) { .vlooks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Guides (/guides) ── */
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-bottom: 96px; }
.guide-shelf { padding-bottom: 0; }
.guide-shelf h2 { font-size: clamp(26px, 3.2vw, 34px); margin: 0 0 18px; }
.guide-shelf .guide-grid { padding-bottom: 56px; }
.guide-shelf:last-of-type .guide-grid { padding-bottom: 96px; }
@media (max-width: 960px) { .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .guide-grid { grid-template-columns: minmax(0, 1fr); } }
.guide-card { display: flex; flex-direction: column; gap: 8px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); background: var(--bg); }
.guide-card:hover { border-color: var(--ink); color: var(--ink); }
.guide-card h2, .guide-card h3 { font-size: 21px; line-height: 1.2; margin: 0; font-weight: 600; }
.guide-card p { color: var(--muted); font-size: 15px; margin: 0; flex: 1; }
.guide-kind { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.guide-date { font-size: 13px; color: var(--faint); }
.guide { max-width: 760px; padding-top: 32px; padding-bottom: 96px; }
.guide-head .eyebrow a { color: inherit; }
.guide-head h1.display { font-size: clamp(36px, 5vw, 56px); font-weight: 500; line-height: 1.05; margin: 16px 0 20px; }
.guide-answer { font-size: 20px; line-height: 1.5; }
.guide-by { font-size: 14px; color: var(--faint); border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 28px; }
.guide-toc { background: var(--tint); border-radius: 14px; padding: 16px 20px; margin-bottom: 32px; font-size: 15px; }
.guide-toc p { font-weight: 600; margin-bottom: 6px; }
.guide-toc ol { margin: 0; padding-left: 20px; }
.guide-toc li a { display: inline-block; padding: 3px 0; }
.guide-sec { margin-top: 40px; }
.guide-sec h2 { font-size: clamp(24px, 3vw, 30px); }
.guide-sec p, .guide-sec li { line-height: 1.6; }
.guide-sec ul, .guide-sec ol { padding-left: 22px; margin: 0 0 14px; }
.guide-sec li { margin-bottom: 6px; }
.guide-note { border-left: 3px solid var(--ink); background: var(--tint); padding: 14px 18px; border-radius: 0 12px 12px 0; margin: 18px 0; }
.guide-note p { margin: 0; }
.guide-table { overflow-x: auto; margin: 18px 0; border: 1px solid var(--line); border-radius: 12px; }
.guide-table table { border-collapse: collapse; width: 100%; font-size: 15px; }
.guide-table th, .guide-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.guide-table thead th { background: var(--tint); font-weight: 600; }
.guide-table tbody tr:last-child > * { border-bottom: 0; }
.guide-fig { margin: 22px 0; }
.guide-fig img { width: 100%; height: auto; display: block; border-radius: 12px; }
.guide-fig figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }
.guide-steps { padding-left: 22px; }
.guide-steps h3 { font-size: 18px; margin: 0 0 4px; }
.guide-cta { margin-top: 48px; padding: 28px; border-radius: var(--radius); background: var(--ink); color: #fff; }
.guide-cta h2 { color: #fff; font-size: 26px; }
.guide-cta p { color: #D0D0D0; }
.guide-cta .btn-dark { background: #fff; color: var(--ink); }
.guide-cta .btn-ghost-dark { background: transparent; color: #fff; border-color: #fff; }
.guide-sources ol { font-size: 14px; color: var(--muted); word-break: break-word; }
.guide-related { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 24px; }
.guide-related h2 { font-size: 20px; }
/* The same cards inside other pages: the industry pages' "Guides for …", the home page's strip, the FAQ line. */
.ind-guides .guide-grid, .guides-band .guide-grid { padding-bottom: 0; margin-top: 28px; }
.ind-guides h2.display { font-size: clamp(30px, 3.8vw, 44px); font-weight: 500; margin: 0; }
.ind-guides .ind-more { margin-top: 20px; }
.guides-band { padding-top: 0; padding-bottom: 96px; }
.guides-band h2.display { font-size: clamp(32px, 4.6vw, 56px); font-weight: 500; line-height: 1.05; margin: 0; }
.guides-band .guide-grid { margin-top: 40px; }
.guides-all { margin: 28px 0 0; font-weight: 600; }
.faq-guides { color: #6E6E73; font-size: 15px; margin: 14px 0 0; }

/* The demo link under the hero note (home), and the Preferred Sources line under a guide's byline */
.real a.real-demo { color: #A1A1A6; text-decoration: underline; text-underline-offset: 2px; }
.real a.real-demo:hover { color: #fff; }
.guide-pref { font-size: 13px; color: var(--faint); margin: -16px 0 28px; }
.guide-pref a { color: inherit; }
.guides-tool { font-size: 16px; color: var(--muted); margin: 12px 0 0; }

/* /demo: the watch page */
.demo-page { max-width: 960px; padding-top: 32px; padding-bottom: 96px; }
.demo-head { padding-top: 0; }
.demo-head h1.display { margin-top: 16px; }
.demo-player { margin: 8px 0 0; }
.demo-player video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 22px; background: #111; }
.demo-player figcaption { font-size: 13px; color: var(--faint); margin-top: 12px; }
.demo-chapters-sec { margin-top: 40px; }
.demo-chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 0 0 20px; }
.demo-chapters li { display: flex; gap: 12px; align-items: baseline; padding: 12px 14px; background: var(--tint); border-radius: 12px; }
.demo-at { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; color: var(--muted); flex: none; }
.demo-what { color: var(--muted); max-width: 70ch; }
.demo-more { margin-top: 24px; }
@media (max-width: 600px) { .demo-chapters { grid-template-columns: minmax(0, 1fr); } .demo-player video { border-radius: 14px; } }

/* /tools/listing-photo-cost: the calculator */
.cc { padding-top: 32px; padding-bottom: 96px; }
.cc-head { padding-top: 0; }
.cc-head h1.display { margin-top: 16px; }
.cc-head .lead { max-width: 760px; }
.cc-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 8px; }
.cc-form h2 { font-size: 18px; margin: 4px 0 12px; }
.cc-form h2 + .cc-field { margin-top: 0; }
.cc-form h2:not(:first-child) { margin-top: 24px; }
.cc-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; border: 0; padding: 0; min-width: 0; }
.cc-field > span, .cc-field legend { font-size: 15px; font-weight: 600; padding: 0; }
.cc-field input[type=number] { font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--field); border-radius: 12px; background: #fff; color: var(--ink); width: 100%; }
.cc-field small { font-size: 13px; color: var(--faint); }
.cc-seg label { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin-right: 16px; cursor: pointer; }
.cc-form.js .cc-submit { display: none; }
.cc-out h2 { font-size: 24px; margin-bottom: 8px; }
.cc-meta { color: var(--muted); margin-bottom: 16px; }
.cc-table th small { display: block; font-weight: 400; font-size: 13px; color: var(--faint); margin-top: 2px; }
.cc-table td { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.cc-table tr.cc-best th, .cc-table tr.cc-best td { background: var(--tint); }
.cc-table tr.cc-best th::after { content: "Cheapest"; display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--ink); padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.cc-verdict { font-size: 18px; line-height: 1.5; margin: 18px 0 20px; }
.cc-notes { padding-left: 20px; margin: 0; }
.cc-notes li { margin: 6px 0; }
@media (max-width: 820px) { .cc-grid { grid-template-columns: minmax(0, 1fr); } }

/* /tools/listing-photo-resizer: the resizer (public/js/resizer.js) */
.rz { padding-top: 32px; padding-bottom: 96px; }
.rz-head { padding-top: 0; }
.rz-head h1.display { margin-top: 16px; }
.rz-head .lead { max-width: 760px; }
.rz-private { max-width: 760px; margin: 0 0 24px; padding: 14px 18px; border-radius: 14px; background: var(--ok-bg); color: var(--ok); line-height: 1.5; }
.rz-private strong { color: var(--ok); }
.rz-grid { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 32px; align-items: start; }
.rz-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 140px; padding: 20px; margin: 0 0 18px; text-align: center; border: 2px dashed var(--field); border-radius: 14px; background: var(--tint); cursor: pointer; }
.rz-drop strong { font-size: 17px; }
.rz-drop span { font-size: 14px; color: var(--muted); }
.rz-drop.is-over, .rz-drop:hover { border-color: var(--ink); }
.rz-drop:focus-within { box-shadow: var(--focus); border-color: var(--ink); }
.rz-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.rz-presets { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
.rz-presets legend { font-size: 15px; font-weight: 600; padding: 0; margin-bottom: 8px; }
.rz-preset { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 10px; align-items: start; padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.rz-preset:has(input:checked) { border: 2px solid var(--ink); padding: 9px 11px; }
.rz-preset:has(input:focus-visible) { box-shadow: var(--focus); }
.rz-preset input { accent-color: var(--ink); width: 20px; height: 20px; margin: 1px 0 0; }
.rz-preset small { grid-column: 2; font-size: 13px; color: var(--faint); }
.rz-custom { margin-top: 12px; }
.rz-form input[type=range] { width: 100%; accent-color: var(--ink); min-height: 32px; }
.rz-form input[type=number]::placeholder { color: var(--faint); }
.rz-form output { font-variant-numeric: tabular-nums; font-weight: 600; margin-left: 6px; }
.rz-go { width: 100%; margin-top: 4px; }
.rz-out h2 { font-size: 24px; margin-bottom: 8px; }
.rz-status { color: var(--muted); }
.rz-progress { width: 100%; height: 8px; accent-color: var(--ink); }
.rz-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 8px; }
.rz-actions .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.rz-list { list-style: none; margin: 0; padding: 0; }
.rz-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rz-thumb { display: block; width: 72px; height: 54px; border-radius: 8px; background: var(--tint); }
.rz-info { min-width: 0; }
.rz-name { margin: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.rz-dims { margin: 2px 0 0; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rz-note { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.rz-note.bad { color: var(--bad); }
.rz-note.work { color: var(--work); }
.rz-text { max-width: 760px; margin-top: 24px; }
.rz-text .guide-table th[scope=row] { white-space: nowrap; }
.rz .cite-box { max-width: 760px; }
@media (max-width: 820px) { .rz-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .rz-item { grid-template-columns: 56px minmax(0, 1fr); } .rz-thumb { width: 56px; height: 42px; } .rz-item .rz-dl { grid-column: 2; justify-self: start; } }

/* "Cite this" (the study and the calculator) and /data, open data (src/views.js citeBox, dataPage). */
.cite-box { margin-top: 40px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--tint); }
.cite-box h2 { font-size: 22px; margin: 0 0 10px; }
.cite-line { line-height: 1.55; overflow-wrap: anywhere; }
.cite-url { font-size: 15px; overflow-wrap: anywhere; }
.cite-url span, .cite-embed span { font-weight: 600; margin-right: 6px; }
.cite-embed { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 10px; }
.cite-embed textarea { font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); width: 100%; box-sizing: border-box; resize: vertical; }
.cite-copy { margin-bottom: 10px; }
.cite-box .small { margin-bottom: 0; }
.cc .cite-box { max-width: 760px; }
.data-set { margin-top: 48px; padding-top: 8px; }
.data-set h2 { font-size: clamp(24px, 3vw, 30px); }
.data-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 24px; margin: 16px 0; }
.data-meta dt { font-size: 13px; color: var(--faint); }
.data-meta dd { margin: 2px 0 0; font-weight: 600; }
.data-files { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.data-files code, .data-attrib code { overflow-wrap: anywhere; }
.data-attrib { margin-top: 8px; font-size: 17px; }
.data-fields summary { cursor: pointer; font-weight: 600; margin: 12px 0; }
.data-github { margin: 14px 0 0; }

/* Admin link in the signed-in nav (only admins see it, 22 Oct 2026): on a phone the nav takes its own row so all
   three links fit inside the gutter. */
.acc-data a.danger { color: #8A2A1B; }