/* ============================================================================
   CabZen marketing site — modernist (Swiss) design system.
   Adopted from the design handoff (styles.css) with layout helper classes
   for the Blade marketing pages. Self-contained: only external dependency is
   the Archivo webfont. Border radius is 0 everywhere; the design is flat.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-2: #e15b47;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

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

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-700); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.grayscale { filter: grayscale(1) contrast(1.08); }

/* — rules — */
.hr { height: 2px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-block { width: 100%; margin-top: var(--space-2); justify-content: flex-start; text-align: left; }
/* button heights */
.btn-nav { height: 38px; padding: 0 18px; }
.btn-md  { height: 42px; padding: 0 18px; }
.btn-lg  { height: 46px; padding: 0 22px; font-size: 15px; }
.btn-xl  { height: 48px; padding: 0 24px; font-size: 15px; }
.btn-hero{ height: 52px; padding: 0 26px; font-size: 16px; }
/* light-on-dark outline button (CabZen X section) */
.btn-outline-light { color: var(--color-bg); border-color: var(--color-neutral-600); }
.btn-outline-light:hover { background: color-mix(in srgb, #ffffff 8%, transparent); color: var(--color-bg); }
/* white-fill button on accent/ink field */
.btn-invert { background: var(--color-bg); color: var(--color-text); }
.btn-invert:hover { background: #ffffff; color: var(--color-text); }

/* — forms — */
.field { margin-bottom: var(--space-4); }
.field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.input.is-invalid { border-color: var(--color-accent); }
textarea.input { min-height: 90px; resize: vertical; }
.field-error { color: var(--color-accent-700); font-size: 12px; margin-top: 5px; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .checkbox input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.radio .dot { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--color-divider); }
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-bg); }
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* square checkbox — the .dot with radius 0 */
.checkbox { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; }
.checkbox .dot { width: 16px; height: 16px; flex: none; border-radius: 0; border: 1.5px solid var(--color-divider); margin-top: 2px; display: grid; place-items: center; }
.checkbox:hover .dot { border-color: var(--color-accent); }
.checkbox input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); }
.checkbox input:checked + .dot::after { content: ""; width: 6px; height: 10px; border: solid var(--color-bg); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.checkbox input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* — tags — */
.tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: 0; }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
.table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.table .num { text-align: right; white-space: nowrap; font-weight: 600; }

/* ============================================================================
   Marketing layout helpers
   ========================================================================== */
.cz-wrap { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); min-height: 100vh; display: flex; flex-direction: column; }
.cz-container { max-width: 1320px; margin: 0 auto; padding: 0 40px; width: 100%; }
.cz-section { border-bottom: 2px solid var(--color-divider); }
.cz-section--surface { background: var(--color-surface); }
.cz-section--ink { background: var(--color-text); color: var(--color-bg); border-bottom: 2px solid var(--color-text); }
.cz-section--accent { background: var(--color-accent); color: var(--color-bg); }

/* vertical padding */
.cz-py    { padding-top: 72px; padding-bottom: 72px; }
.cz-py-sm { padding-top: 64px; padding-bottom: 64px; }
.cz-py-lg { padding-top: 88px; padding-bottom: 88px; }
.cz-pt    { padding-top: 72px; }

/* kickers */
.cz-kicker { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--color-accent); margin-bottom: 16px; display: block; }
.cz-kicker--muted { color: var(--color-neutral-600); }
.cz-kicker--light { color: var(--color-accent-400); }
.cz-kicker-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.cz-kicker-row .cz-kicker { margin-bottom: 0; }

/* eyebrow (accent square + label) */
.cz-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; }
.cz-eyebrow .sq { width: 8px; height: 8px; background: var(--color-accent); display: block; flex: none; }
.cz-eyebrow .lbl { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }

/* display headings */
.cz-h1 { font-size: 68px; line-height: 0.98; letter-spacing: -0.035em; margin: 0 0 28px; }
.cz-h1--inner { font-size: 58px; line-height: 1.0; letter-spacing: -0.035em; margin: 0 0 24px; }
.cz-h2 { font-size: 46px; line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 20px; }
.cz-h2--sm { font-size: 32px; line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 8px; }
.cz-poster-h2 { font-size: 60px; line-height: 1.0; letter-spacing: -0.035em; margin: 0 0 24px; }
.cz-lead { font-size: 19px; line-height: 1.5; color: var(--color-neutral-800); }
.cz-intro { font-size: 16px; color: var(--color-neutral-800); }

/* section header block (kicker + h2 left, intro right) */
.cz-head { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: end; margin-bottom: 48px; }

/* grids */
.cz-split { display: grid; }
.cz-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.cz-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.cz-4 { display: grid; grid-template-columns: repeat(4, 1fr); }

/* modular ruled grid — gaps become the rules */
.cz-grid-ruled { gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); }
.cz-grid-ruled > * { background: var(--color-bg); }
.cz-grid-ruled.on-surface > * { background: var(--color-surface); }
.cz-cell { padding: 28px; }
.cz-cell-index { font-size: 11px; letter-spacing: 0.1em; color: var(--color-neutral-600); margin-bottom: 20px; }
.cz-cell-index-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.cz-cell-index-row .cz-cell-index { margin-bottom: 0; }
.cz-cell h3 { font-size: 20px; line-height: 1.2; margin: 0 0 10px; }
.cz-cell p { font-size: 14px; line-height: 1.55; color: var(--color-neutral-800); margin: 0; }

/* flush column group (top rule, no side rules) */
.cz-flush-group { gap: 1px; background: var(--color-divider); border-top: 2px solid var(--color-divider); }
.cz-flush-group > * { background: var(--color-bg); padding: 32px; }
.cz-flush-group.tight > * { padding: 28px; }

/* arrow (→) list rows */
.cz-list { border-top: 1px solid var(--color-divider); }
.cz-li { padding: 14px 0; border-bottom: 1px solid var(--color-divider); font-size: 15px; display: flex; gap: 16px; }
.cz-arrow { color: var(--color-accent); font-weight: 600; flex: none; }
.cz-li--muted { color: var(--color-neutral-800); }
.cz-list--dark { border-top-color: var(--color-neutral-700); }
.cz-list--dark .cz-li { border-bottom-color: var(--color-neutral-700); }
.cz-list--dark .cz-arrow { color: var(--color-accent-400); }

/* mock UI panel */
.cz-panel { width: 100%; border: 2px solid var(--color-text); background: var(--color-bg); color: var(--color-text); }
.cz-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 2px solid var(--color-text); background: var(--color-text); color: var(--color-bg); }
.cz-panel-title { font-family: var(--font-heading); font-weight: 800; font-size: 15px; }
.cz-panel-meta { font-size: 12px; letter-spacing: 0.06em; }
.cz-panel-body { padding: 18px; }
.cz-kv { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; }
.cz-kv:last-child { border-bottom: 0; }
.cz-kv .k { color: var(--color-neutral-700); }
.cz-kv .v { font-weight: 600; text-align: right; }
.cz-panel-label { padding: 12px 18px; border-top: 2px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-700); }
.cz-fare { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--color-divider); font-size: 14px; }
.cz-fare .amt { font-family: var(--font-heading); font-weight: 800; font-size: 17px; }
.cz-row-fill { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: var(--color-accent); color: var(--color-bg); }
.cz-row-fill .amt { font-family: var(--font-heading); font-weight: 800; font-size: 20px; }
.cz-bid { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--color-divider); }
.cz-bid:last-child { border-bottom: 0; }
.cz-bid--win { background: var(--color-accent); color: var(--color-bg); }
.cz-bid .amt { font-family: var(--font-heading); font-weight: 800; font-size: 18px; }
.cz-badge-win { font-size: 10px; letter-spacing: 0.12em; margin-left: 8px; }

/* stat grid (hero) */
.cz-stat { padding: 28px 24px; }
.cz-stat .num { font-family: var(--font-heading); font-weight: 800; font-size: 34px; letter-spacing: -0.03em; line-height: 1; }
.cz-stat .num.accent { color: var(--color-accent); }
.cz-stat .lbl { font-size: 13px; line-height: 1.4; margin-top: 6px; }

/* microcopy */
.cz-micro { font-size: 13px; color: var(--color-neutral-700); margin: 0; }
.cz-note { font-size: 12px; color: var(--color-neutral-700); }
.cz-btnrow { display: flex; flex-wrap: wrap; gap: 12px; }

/* header */
.cz-header { position: sticky; top: 0; z-index: 40; background: var(--color-bg); border-bottom: 2px solid var(--color-divider); }
.cz-header--static { position: static; }
.cz-header-inner { display: flex; align-items: center; gap: 32px; height: 68px; }
.cz-brand { font-family: var(--font-heading); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--color-text); text-decoration: none; margin-right: auto; display: flex; align-items: center; gap: 10px; }
.cz-brand .sq { width: 14px; height: 14px; background: var(--color-accent); display: block; }
.cz-brand:hover { color: var(--color-text); }
.cz-navlinks { display: flex; align-items: center; gap: 28px; }
.cz-navlinks a { color: var(--color-text); text-decoration: none; font-size: 14px; }
.cz-navlinks a:hover, .cz-navlinks a[aria-current="page"] { color: var(--color-accent); }
.cz-navlinks a.muted { color: var(--color-neutral-700); }
.cz-burger { display: none; width: 40px; height: 38px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--color-divider); cursor: pointer; color: var(--color-text); }
.cz-mobile-menu { display: none; border-bottom: 2px solid var(--color-divider); background: var(--color-bg); }
.cz-mobile-menu.is-open { display: block; }
.cz-mobile-menu a { display: block; padding: 14px 0; border-top: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none; font-size: 15px; font-family: var(--font-heading); font-weight: 800; }
.cz-mobile-menu a:first-child { border-top: 0; }
.cz-mobile-menu .btn { margin: 16px 0; }

/* footer */
.cz-footer { border-top: 2px solid var(--color-text); background: var(--color-text); color: var(--color-neutral-300); margin-top: auto; }
.cz-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding: 56px 40px 40px; max-width: 1320px; margin: 0 auto; }
.cz-footer-brand { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: var(--color-bg); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cz-footer-brand .sq { width: 14px; height: 14px; background: var(--color-accent); display: block; }
.cz-footer p { font-size: 13px; line-height: 1.6; margin: 0; max-width: 40ch; }
.cz-footer h5 { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-bg); margin: 0 0 14px; }
.cz-footer-col-links { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.cz-footer-col-links a, .cz-footer a.link { color: var(--color-neutral-300); text-decoration: none; }
.cz-footer-col-links a:hover, .cz-footer a.link:hover { color: var(--color-bg); }
.cz-footer-bottom { max-width: 1320px; margin: 0 auto; padding: 18px 40px 32px; border-top: 1px solid var(--color-neutral-800); font-size: 12px; }
.cz-footer--reduced .cz-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 0; padding: 22px 40px; }
.cz-footer--reduced .cz-footer-bottom .links { display: flex; gap: 22px; flex-wrap: wrap; }

/* flash / confirmation blocks */
.cz-flash { border: 2px solid var(--color-accent); background: var(--color-accent-100); color: var(--color-text); padding: 16px 18px; margin-bottom: 24px; }
.cz-flash strong { font-family: var(--font-heading); font-weight: 800; }
.cz-flash--error { border-color: var(--color-accent-700); }

/* details / FAQ accordion */
.cz-qa { border-top: 1px solid var(--color-divider); }
.cz-qa details { border-bottom: 1px solid var(--color-divider); }
.cz-qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 18px 0; font-family: var(--font-heading); font-weight: 800; font-size: 18px; line-height: 1.25; letter-spacing: -0.015em; }
.cz-qa summary::-webkit-details-marker { display: none; }
.cz-qa summary::after { content: "+"; margin-left: auto; color: var(--color-accent); font-size: 22px; font-weight: 800; line-height: 1; }
.cz-qa details[open] summary::after { content: "\2013"; }
.cz-qa summary:hover { color: var(--color-accent); }
.cz-qa .answer { font-size: 15px; line-height: 1.6; color: var(--color-neutral-800); max-width: 70ch; padding: 0 0 20px; }
.cz-qa .answer p { margin: 0 0 12px; }
.cz-qa .answer p:last-child { margin: 0; }

/* composite input (subdomain) */
.cz-composite { display: flex; align-items: stretch; border: 1px solid var(--color-divider); background: var(--color-surface); }
.cz-composite input { flex: 1; border: 0; background: transparent; padding: 8px 12px; font: inherit; font-size: 14px; color: var(--color-text); min-width: 0; caret-color: var(--color-accent); }
.cz-composite input:focus { outline: none; }
.cz-composite .suffix { display: flex; align-items: center; padding: 0 12px; border-left: 1px solid var(--color-divider); font-size: 14px; color: var(--color-neutral-700); white-space: nowrap; }
.cz-composite.is-invalid { border-color: var(--color-accent); }

/* plan radio cell (signup) */
.cz-plan-cell { display: block; cursor: pointer; padding: 20px; background: var(--color-bg); }
.cz-plan-cell:hover { background: var(--color-neutral-200); }
.cz-plan-cell:has(input:checked) { box-shadow: inset 0 0 0 2px var(--color-accent); }
.cz-plan-cell .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cz-plan-name { font-family: var(--font-heading); font-weight: 800; font-size: 17px; }
.cz-plan-price { font-family: var(--font-heading); font-weight: 800; font-size: 30px; letter-spacing: -0.03em; line-height: 1; }
.cz-plan-drivers { font-size: 13px; color: var(--color-neutral-700); }

/* numbered fieldset heading */
.cz-fieldset { margin-bottom: 40px; }
.cz-fieldset > legend, .cz-fieldset-label { display: block; width: 100%; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-700); font-weight: 600; padding-bottom: 12px; border-bottom: 2px solid var(--color-divider); margin-bottom: 24px; }

/* summary aside key/values */
.cz-summary-kv { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; }
.cz-summary-kv .k { color: var(--color-neutral-700); }
.cz-summary-kv .v { font-weight: 600; text-align: right; }

/* generic helpers */
.cz-mt-8 { margin-top: 8px; }
.cz-mt-16 { margin-top: 16px; }
.cz-mt-20 { margin-top: 20px; }
.cz-mt-24 { margin-top: 24px; }
.cz-mt-32 { margin-top: 32px; }
.cz-mb-0 { margin-bottom: 0; }
.cz-maxw-15 { max-width: 15ch; }
.cz-maxw-20 { max-width: 20ch; }
.cz-maxw-22 { max-width: 22ch; }
.cz-maxw-24 { max-width: 24ch; }
.cz-maxw-46 { max-width: 46ch; }
.cz-maxw-48 { max-width: 48ch; }
.cz-maxw-50 { max-width: 50ch; }
.cz-maxw-58 { max-width: 58ch; }
.cz-maxw-60 { max-width: 60ch; }
.cz-maxw-70 { max-width: 70ch; }

/* article / legal / guide prose */
.cz-prose { max-width: 76ch; font-size: 15px; line-height: 1.7; color: var(--color-neutral-800); }
.cz-prose > :first-child { margin-top: 0; }
.cz-prose h2 { font-family: var(--font-heading); font-weight: 800; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; color: var(--color-text); margin: 44px 0 14px; }
.cz-prose h3 { font-family: var(--font-heading); font-weight: 800; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; color: var(--color-text); margin: 28px 0 10px; }
.cz-prose h4 { font-family: var(--font-heading); font-weight: 800; font-size: 16px; color: var(--color-text); margin: 22px 0 8px; }
.cz-prose p { margin: 0 0 16px; }
.cz-prose ul, .cz-prose ol { margin: 0 0 16px; padding-left: 22px; }
.cz-prose li { margin: 0 0 8px; }
.cz-prose a { color: var(--color-accent-700); }
.cz-prose strong { font-weight: 600; color: var(--color-text); }
.cz-prose hr { height: 1px; border: 0; background: var(--color-divider); margin: 32px 0; }

/* breadcrumb */
.cz-crumb { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 20px; }
.cz-crumb a { color: var(--color-neutral-700); text-decoration: none; }
.cz-crumb a:hover { color: var(--color-accent); }

/* callouts — flat, rule-led (no rounded "cards") */
.cz-callout { border-left: 2px solid var(--color-accent); background: var(--color-surface); padding: 14px 18px; font-size: 14px; line-height: 1.6; color: var(--color-neutral-800); margin: 20px 0; }
.cz-callout strong { color: var(--color-text); }
.cz-callout--warn { border-left-color: var(--color-text); }
.cz-callout--warn::before { content: "IMPORTANT"; display: block; font-size: 10px; letter-spacing: 0.14em; font-weight: 600; color: var(--color-text); margin-bottom: 6px; }
.cz-callout--tip::before { content: "TIP"; display: block; font-size: 10px; letter-spacing: 0.14em; font-weight: 600; color: var(--color-accent-700); margin-bottom: 6px; }

/* inline + block code */
.cz-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; background: var(--color-neutral-200); padding: 1px 5px; }
.cz-pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.6; background: var(--color-text); color: var(--color-neutral-300); padding: 16px 18px; overflow-x: auto; margin: 0 0 24px; }

/* app screenshot frame — ink-ruled, flat, same idiom as the mock panels */
.cz-shot { border: 2px solid var(--color-text); background: var(--color-surface); display: block; line-height: 0; }
.cz-shot img { width: 100%; height: auto; display: block; }
.cz-shot--inline { max-width: 260px; }

/* transactional / status pages (verify, confirm) */
.cz-narrow { max-width: 640px; }
.cz-otp { display: flex; gap: 10px; flex-wrap: wrap; }
.cz-otp input {
  width: 56px; height: 64px; text-align: center; padding: 0;
  font-family: var(--font-heading); font-weight: 800; font-size: 24px;
  color: var(--color-text); background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: 0;
  caret-color: var(--color-accent);
}
.cz-otp input:focus { outline: none; border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.cz-otp input.is-invalid { border-color: var(--color-accent); }
.cz-step { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--color-divider); font-size: 15px; }
.cz-step:first-child { border-top: 1px solid var(--color-divider); }
.cz-step .n { font-family: var(--font-heading); font-weight: 800; color: var(--color-accent); flex: none; min-width: 26px; }
.cz-step .n--done { color: var(--color-neutral-600); }
.cz-step .sub { display: block; font-size: 13px; color: var(--color-neutral-700); margin-top: 3px; }

@media (max-width: 480px) {
  .cz-otp { gap: 6px; }
  .cz-otp input { width: 44px; height: 54px; font-size: 20px; }
}

/* guide jump nav */
.cz-jump { display: flex; flex-wrap: wrap; gap: 0 28px; border-top: 1px solid var(--color-divider); padding-top: 16px; }
.cz-jump a { font-size: 13px; color: var(--color-neutral-700); text-decoration: none; padding: 6px 0; }
.cz-jump a:hover { color: var(--color-accent); }

/* anchor offset under the sticky header */
[id] { scroll-margin-top: 88px; }

/* ============================================================================
   Responsive — single breakpoint at 1100px (per handoff), plus small-screen
   tidy-ups below 700px.
   ========================================================================== */
@media (max-width: 1100px) {
  .cz-split > * { border-left-width: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  .cz-split > * + * { border-top: 2px solid var(--color-divider); padding-top: 36px !important; }
  .cz-split--darkrule > * + * { border-top-color: var(--color-neutral-700); }
  .cz-strip > *, .cz-flush > * { border-left: none !important; padding-left: 0 !important; padding-right: 0 !important; }
  .cz-split, .cz-head { grid-template-columns: 1fr !important; }
  .cz-head { gap: 24px !important; align-items: start; }
  .cz-3 { grid-template-columns: 1fr !important; }
  .cz-2 { grid-template-columns: 1fr !important; }
  .cz-4 { grid-template-columns: 1fr 1fr !important; }
  .cz-navlinks { display: none !important; }
  .cz-burger { display: inline-flex; }
  .cz-h1 { font-size: 40px !important; }
  .cz-h1--inner { font-size: 38px !important; }
  .cz-h2 { font-size: 34px !important; }
  .cz-poster-h2 { font-size: 40px !important; }
  .cz-footer-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 700px) {
  .cz-container { padding: 0 20px; }
  .cz-4, .cz-footer-grid { grid-template-columns: 1fr !important; }
  .cz-py { padding-top: 48px; padding-bottom: 48px; }
  .cz-py-sm { padding-top: 40px; padding-bottom: 40px; }
  .cz-py-lg { padding-top: 56px; padding-bottom: 56px; }
  .cz-h1 { font-size: 34px !important; }
  .cz-poster-h2 { font-size: 34px !important; }
  .cz-footer-grid { padding: 40px 20px 32px; }
  .cz-footer-bottom, .cz-footer--reduced .cz-footer-bottom { padding-left: 20px; padding-right: 20px; }
  .cz-kv .v, .cz-summary-kv .v { }
}