/* Backline · The Pass
   The pass is where the kitchen checks every plate before it goes out. Each
   pay period is a ticket on the rail; heat-lamp orange only ever marks what
   needs someone, and a CLOSED stamp lands when a period ties out. Buttons
   press like register keys. Archivo, with Chivo Mono for receipt figures. */

:root[data-style="pass"] {
  color-scheme: light;

  --f-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Chivo Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --f-display: 'Archivo', system-ui, sans-serif;
  --display-weight: 850;
  --display-stretch: 78%;
  --display-tracking: -0.012em;
  --h2-weight: 800;
  --h2-case: uppercase;
  --h2-tracking: 0.03em;

  --bg: oklch(0.955 0.006 250);            /* steel */
  --bg-2: oklch(0.935 0.008 250);
  --surface: oklch(1 0 0);                 /* ticket paper */
  --surface-2: oklch(0.945 0.007 250);
  --line: oklch(0.87 0.01 250);
  --line-2: oklch(0.915 0.008 250);
  --text: oklch(0.21 0.02 255);            /* ink */
  --text-2: oklch(0.42 0.02 255);
  --text-3: oklch(0.5 0.016 255);
  --link: var(--text);

  --accent: oklch(0.71 0.19 46);           /* heat lamp */
  --accent-ink: oklch(0.21 0.02 255);
  --accent-text: oklch(0.52 0.17 40);
  --accent-tint: oklch(0.955 0.035 60);
  --accent-tint-strong: oklch(0.9 0.07 55);
  --accent-line: oklch(0.78 0.12 50);

  --good: oklch(0.5 0.12 155);
  --good-tint: oklch(0.95 0.035 155);
  --good-line: oklch(0.78 0.08 155);
  --warn: oklch(0.52 0.17 40);
  --warn-tint: oklch(0.955 0.035 60);
  --warn-line: oklch(0.78 0.12 50);
  --bad: oklch(0.53 0.19 26);
  --bad-tint: oklch(0.96 0.025 26);
  --bad-line: oklch(0.8 0.09 26);

  --focus: oklch(0.21 0.02 255);
  --focus-ring: oklch(0.71 0.19 46 / .38);

  --shadow-1: 0 1px 2px oklch(0.2 0.02 255 / .08);
  --shadow-2: 0 16px 22px -8px oklch(0.2 0.02 255 / .22), 0 2px 3px oklch(0.2 0.02 255 / .1);
  --shadow-pop: 4px 4px 0 oklch(0.21 0.02 255);

  --panel-bg: var(--surface);
  --panel-line: var(--line);
  --panel-shadow: 0 1px 2px oklch(0.2 0.02 255 / .06), 0 12px 22px -14px oklch(0.2 0.02 255 / .25);
  --panel-r: 12px;

  --input-bg: var(--surface);
  --input-line: oklch(0.7 0.014 255);
  --input-hover-line: var(--text);
  --btn-r: 10px;
  --btn-r-sm: 8px;
  --btn-bg: var(--surface);
  --btn-line: var(--text);
  --btn-ink: var(--text);
  --btn-shadow: 3px 3px 0 var(--text);
  --btn-hover-bg: var(--surface);
  --btn-hover-shadow: 4px 4px 0 var(--text);
  --btn-lift: translate(-1px, -1px);
  --btn-press: translate(3px, 3px);
  --btn-press-shadow: 0 0 0 var(--text);
  --btn-primary-bg: var(--accent);
  --btn-primary-ink: var(--text);
  --btn-primary-line: var(--text);
  --btn-primary-shadow: 3px 3px 0 var(--text);
  --btn-primary-hover: oklch(0.74 0.18 52);
  --btn-primary-hover-shadow: 4px 4px 0 var(--text);

  --pop-bg: var(--surface);
  --avatar-bg: var(--text);
  --avatar-ink: var(--surface);
  --store-no-bg: var(--text);
  --store-no-ink: var(--surface);
  --side-bg: var(--surface);
  --side-line: var(--line);
  --nav-hover: var(--bg);
  --nav-on-bg: var(--bg);
  --nav-on-shadow: inset 0 0 0 1px var(--line);
  --row-hover: oklch(0.975 0.004 250);
  --drop-line: oklch(0.62 0.014 255);
  --hero-em: var(--accent-text);

  --chart-grid: oklch(0.9 0.008 250);
  --chart-zero: var(--text);
  --chart-axis: var(--text-3);
  --chart-x: var(--text-2);
  --chart-val: var(--text);
  --chart-prior: var(--text);
  --chart-sales: oklch(0.62 0.09 250);
  --chart-net: oklch(0.64 0.13 155);
  --chart-margin: oklch(0.83 0.14 88);
  --chart-labor: oklch(0.74 0.08 215);
  --chart-up: oklch(0.64 0.13 155);
  --chart-down: oklch(0.63 0.19 26);
  --chart-up-ink: var(--good);
  --chart-down-ink: var(--bad);
  --chart-spark: var(--text);
  --bar-r: 0px;
  --s-now: var(--accent);
}

/* ---------- type ---------- */

[data-style="pass"] .page-title { font-size: clamp(1.8rem, 1.15rem + 2.1vw, 2.65rem); line-height: 1.02; max-width: 26ch; }
[data-style="pass"] .section-head h2 { font-size: 1.65rem; line-height: 1; }
[data-style="pass"] .page-kicker, [data-style="pass"] .gw-stepcount {
  font: 500 12px/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2);
}
[data-style="pass"] .panel-head h2, [data-style="pass"] .panel-head h3, [data-style="pass"] .panel > h2,
[data-style="pass"] .card-kicker, [data-style="pass"] .doc-title, [data-style="pass"] .tp-title {
  font-stretch: 82%; font-size: 16px; line-height: 1.15;
}
[data-style="pass"] .panel-head .meta, [data-style="pass"] .card-source {
  font: 500 11px/1.45 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-2);
}
[data-style="pass"] .big-money { font-weight: 700; letter-spacing: -0.03em; }
[data-style="pass"] .data-table th, [data-style="pass"] .mini-table th {
  font: 700 11px/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2);
}
[data-style="pass"] .chip {
  font: 700 10.5px/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  border-width: 1.5px; border-radius: 5px; padding: 0 6px;
}
[data-style="pass"] .tag {
  font: 700 10.5px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  border: 1.5px solid var(--text); border-radius: 5px; color: var(--text); padding: 2px 7px;
}

/* ---------- register-key buttons ---------- */

[data-style="pass"] .btn { border-width: 1.5px; }
[data-style="pass"] .btn.sm {
  --btn-shadow: 2px 2px 0 var(--text); --btn-hover-shadow: 3px 3px 0 var(--text);
  --btn-primary-shadow: 2px 2px 0 var(--text); --btn-primary-hover-shadow: 3px 3px 0 var(--text);
  --btn-press: translate(2px, 2px);
}
[data-style="pass"] .btn.ghost {
  background: transparent; border-color: transparent; box-shadow: none; transform: none; color: var(--text);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in oklab, var(--text) 35%, transparent);
}
[data-style="pass"] .btn.ghost:hover { background: transparent; text-decoration-color: var(--accent); }
[data-style="pass"] .btn.danger { border-color: var(--bad); color: var(--bad); box-shadow: 2px 2px 0 var(--bad); }
[data-style="pass"] .btn.danger:hover { background: var(--bad-tint); box-shadow: 3px 3px 0 var(--bad); }
[data-style="pass"] input[type="file"]::file-selector-button { border-width: 1.5px; box-shadow: 2px 2px 0 var(--text); }
[data-style="pass"] .linkbtn, [data-style="pass"] a { text-decoration-thickness: 1.5px; }

/* ---------- chrome ---------- */

[data-style="pass"] .logo { font-weight: 800; font-stretch: 86%; font-size: 21px; letter-spacing: -0.01em; gap: 10px; }
[data-style="pass"] .logo-mark-bars { display: none; }
[data-style="pass"] .logo-mark-ticket { display: block; width: 28px; height: 28px; }
[data-style="pass"] .logo-mark-ticket .logo-hot { fill: var(--accent); stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
[data-style="pass"] .side-nav a { font-weight: 600; color: var(--text-2); }
[data-style="pass"] .side-nav a.on { color: var(--text); }
[data-style="pass"] .nav-count { background: var(--accent); color: var(--text); font-weight: 750; border-radius: 10px; }
[data-style="pass"] .store-btn { background: var(--bg); box-shadow: none; }
[data-style="pass"] .store-no { font-weight: 700; }
[data-style="pass"] .menu-pop { border: 1.5px solid var(--text); border-radius: 12px; }
[data-style="pass"] .toast { border: 1.5px solid var(--text); box-shadow: 4px 4px 0 var(--text); }
[data-style="pass"] .toast.ok { border-color: var(--text); }
[data-style="pass"] .pulse-chip { color: var(--accent-text); background: var(--accent-tint); border: 1.5px solid var(--accent-line); }
[data-style="pass"] .pulse-chip i { background: var(--accent); }

/* ---------- status marks: filled discs, like the dots on a ticket ---------- */

[data-style="pass"] .ic circle { stroke: none; }
[data-style="pass"] .ic path { stroke-width: 2.3; }
[data-style="pass"] .ic-ok circle { fill: var(--good); }
[data-style="pass"] .ic-ok path { stroke: var(--surface); }
[data-style="pass"] .ic-warn circle { fill: var(--accent); }
[data-style="pass"] .ic-warn path { stroke: var(--text); }
[data-style="pass"] .ic-bad circle { fill: var(--bad); }
[data-style="pass"] .ic-bad path { stroke: var(--surface); }
[data-style="pass"] .ic-todo circle { fill: none; stroke: var(--text-3); stroke-width: 1.7; stroke-dasharray: none; }
[data-style="pass"] .step.is-need .ic-ok circle { fill: var(--accent); }

/* ---------- tickets: the close, the receipt, the price ---------- */

[data-style="pass"] :is(.ticket, .receipt, .price-card) {
  border: 0; border-radius: 3px 3px 0 0; box-shadow: none; margin-bottom: 8px;
  filter: drop-shadow(0 12px 12px oklch(0.2 0.02 255 / .15)) drop-shadow(0 1px 1.5px oklch(0.2 0.02 255 / .12));
}
[data-style="pass"] :is(.ticket, .receipt) { padding: 22px 24px 26px; }
/* the torn edge: a strip of paper teeth hung under the ticket */
[data-style="pass"] :is(.ticket, .receipt, .price-card)::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 7px; background: var(--surface);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%;
}
[data-style="pass"] .ticket-head { align-items: flex-start; margin-bottom: 14px; }
[data-style="pass"] .ticket-head h2 { display: grid; gap: 6px; }
[data-style="pass"] .ticket-no {
  display: block; font: 850 46px/.86 var(--f-display); font-stretch: 68%; letter-spacing: -0.01em; text-transform: none; color: var(--text);
}
[data-style="pass"] .ticket-title { font: 700 11px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
[data-style="pass"] .ticket-dates { margin-left: auto; text-align: right; white-space: normal; font: 500 11px/1.55 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
[data-style="pass"] .ticket-dates > span { display: block; }
[data-style="pass"] .ticket-check::before { content: none; }
[data-style="pass"] .tag-bonus { margin-left: 0; }
[data-style="pass"] :is(.ticket, .receipt) .rule { border-top: 1.5px dashed oklch(0.7 0.012 255); margin: 14px 0 12px; }
[data-style="pass"] .ticket-foot { margin-top: 14px; padding-top: 12px; border-top: 3px double var(--text); }
[data-style="pass"] .ticket-sum { font: 700 12px/1.35 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text); }
[data-style="pass"] .needs-h { font: 800 13px/1.2 var(--f-display); font-stretch: 82%; letter-spacing: .04em; text-transform: uppercase; }
[data-style="pass"] .needs-h .meta { font: 500 11px/1.3 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; }
[data-style="pass"] .need { border-top: 1.5px dotted oklch(0.8 0.01 255); }
[data-style="pass"] .need:first-child { border-top: 0; }
[data-style="pass"] .need-mark { width: 18px; height: 18px; margin-top: 1px; }

/* the four steps print as ticket lines: mark, name, dot leader, status */
[data-style="pass"] .steps-card { grid-template-columns: minmax(0, 1fr); gap: 9px; }
[data-style="pass"] .steps-card .step-link { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
[data-style="pass"] .steps-card .step-mark { width: 16px; height: 16px; }
[data-style="pass"] .steps-card .step-name { flex: none; overflow: visible; font: 700 12.5px/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
[data-style="pass"] .steps-card .step-bar {
  flex: 1; min-width: 12px; height: 0; background: none; border-radius: 0; overflow: visible;
  border-bottom: 1.5px dotted oklch(0.72 0.01 255); transform: translateY(-3px);
}
[data-style="pass"] .steps-card .step-bar i { display: none; }
[data-style="pass"] .steps-card .step-status {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  font: 500 12px/1.2 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-2);
}
[data-style="pass"] .steps-card .step.is-need .step-status { color: var(--accent-text); font-weight: 700; }
[data-style="pass"] .steps-card .step.is-done .step-status { color: var(--text-2); }
@media (max-width: 520px) {
  [data-style="pass"] .steps-card .step-link { flex-wrap: wrap; row-gap: 3px; }
  [data-style="pass"] .steps-card .step-status { flex-basis: 100%; padding-left: 25px; white-space: normal; }
  [data-style="pass"] .steps-card .step-bar { display: none; }
}

/* the CLOSED stamp lands when a period ties out */
[data-style="pass"] .ticket .stamp {
  display: block; position: absolute; left: 50%; top: 52%; translate: -50% -50%; rotate: -11deg;
  padding: 10px 18px 9px; border: 3.5px solid currentColor; border-radius: 9px; color: var(--good);
  text-align: center; font: 850 40px/1 var(--f-display); font-stretch: 66%; letter-spacing: .16em; text-indent: .16em; text-transform: uppercase;
  mix-blend-mode: multiply; opacity: 0; pointer-events: none; white-space: nowrap;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%22120%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%221.1%22%20numOctaves%3D%222%22%20seed%3D%227%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%20-3.2%200%200%200%202.4%22/%3E%3C/filter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E") 0 0 / 220px 120px;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%22120%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%221.1%22%20numOctaves%3D%222%22%20seed%3D%227%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%20-3.2%200%200%200%202.4%22/%3E%3C/filter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E") 0 0 / 220px 120px;
}
[data-style="pass"] .ticket .stamp::before { content: ""; position: absolute; inset: 3px; border: 1.5px solid currentColor; border-radius: 5px; }
[data-style="pass"] .ticket .stamp small { display: block; margin-top: 6px; font: 700 10px/1.2 var(--f-mono); letter-spacing: .2em; text-indent: .2em; }
[data-style="pass"] .ticket.is-closed .stamp { opacity: .9; }

/* year to date prints as a receipt */
[data-style="pass"] .receipt .panel-head h2 { font-size: 19px; font-stretch: 80%; letter-spacing: .01em; }
/* the label's dot leader runs the full width; the figure sits on it on a patch of paper */
[data-style="pass"] .fig { grid-template-columns: minmax(0, 1fr); align-items: start; padding: 6px 0; border-top: 0; }
[data-style="pass"] .fig > dt, [data-style="pass"] .fig > dd { grid-row: 1; grid-column: 1; }
[data-style="pass"] .fig dt {
  display: flex; align-items: baseline; gap: 8px; color: var(--text);
  font: 700 12.5px/1.3 var(--f-mono); letter-spacing: .05em; text-transform: uppercase;
}
[data-style="pass"] .fig dt::after { content: ""; flex: 1; min-width: 12px; border-bottom: 1.5px dotted oklch(0.72 0.01 255); transform: translateY(-3px); }
[data-style="pass"] .fig-v { position: relative; padding-left: 8px; background: var(--surface); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
[data-style="pass"] :is(.fig-d, .fig-sub) { font: 500 10.5px/1.35 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; }
[data-style="pass"] .spark { display: none; }
[data-style="pass"] .receipt .rule { border-top: 3px double var(--text); margin: 12px 0 10px; }
[data-style="pass"] .receipt-foot { font: 700 12.5px/1.3 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text); }
[data-style="pass"] .receipt-foot b { font-size: 15px; }

/* ---------- the rail: open periods hang from it ---------- */

[data-style="pass"] .rail {
  display: block; position: relative; z-index: 2; height: 14px; border-radius: 4px;
  background: linear-gradient(180deg, oklch(0.985 0.003 250), oklch(0.86 0.01 250) 50%, oklch(0.74 0.013 250));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / .9), inset 0 -1px 0 oklch(0.6 0.015 250 / .5), 0 7px 10px -6px oklch(0.2 0.02 255 / .4);
}
[data-style="pass"] .periods .period-list { margin-top: -5px; padding: 0 12px 18px; gap: 16px; }
[data-style="pass"] .period-item { transform-origin: 50% 0; rotate: -0.8deg; transition: rotate var(--t-slow) var(--ease); }
[data-style="pass"] .period-item:nth-child(even) { rotate: 0.7deg; }
[data-style="pass"] .period-item:nth-child(3n) { rotate: -0.4deg; }
[data-style="pass"] .period-item:hover { rotate: 0deg; }
[data-style="pass"] .period-link {
  position: relative; padding: 16px 12px 16px; border: 0; border-radius: 0; box-shadow: none; background: var(--surface);
  filter: drop-shadow(0 10px 9px oklch(0.2 0.02 255 / .14)) drop-shadow(0 1px 1px oklch(0.2 0.02 255 / .1));
}
[data-style="pass"] .period-link::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 6px; background: inherit;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%;
}
[data-style="pass"] .period-no { font: 850 27px/.9 var(--f-display); font-stretch: 68%; }
[data-style="pass"] .period-dates { font: 500 10.5px/1.45 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; }
[data-style="pass"] .period-state { font: 700 10.5px/1.3 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text); }
[data-style="pass"] .period-item.is-missing .period-state { color: var(--accent-text); }
[data-style="pass"] .period-item.is-missing .period-state::before { background: var(--accent); }
[data-style="pass"] .period-item.is-closed .period-link { background: var(--good-tint); }
[data-style="pass"] .period-item.is-closed .period-no { color: var(--good); }
/* the period on the pass below leaves a ghost on the rail */
[data-style="pass"] .period-item.is-current { rotate: 0deg; }
[data-style="pass"] .period-item.is-current .period-link {
  background: transparent; filter: none; box-shadow: none;
  outline: 1.5px dashed oklch(0.62 0.014 255); outline-offset: -1.5px;
}
[data-style="pass"] .period-item.is-current .period-link::after { display: none; }
[data-style="pass"] .period-item.is-current .period-no { color: var(--text-3); }

/* ---------- charts: ink outlines, hard shadows, the latest bar under the heat lamp ---------- */

[data-style="pass"] .chart-card { border: 1.5px solid var(--text); box-shadow: 5px 5px 0 var(--text); }
[data-style="pass"] .trend-panel { border-color: var(--line); }
[data-style="pass"] .trend-panel[role="button"]:hover { border-color: var(--text); }
[data-style="pass"] .yoy-tile { border-width: 1.5px; }
[data-style="pass"] .yoy-big { font-weight: 700; }
[data-style="pass"] .b-sh { display: block; fill: var(--text); }
[data-style="pass"] .b-body { stroke: var(--text); stroke-width: 2; }
[data-style="pass"] .b-hi { display: block; fill: oklch(1 0 0 / .42); }
[data-style="pass"] .c-val { font-weight: 700; }
[data-style="pass"] .c-x.now { fill: var(--text); font-weight: 800; }
[data-style="pass"] .c-prior { stroke-dasharray: none; stroke-width: 2.5; }

/* ---------- forms + wizard ---------- */

[data-style="pass"] .dropzone { border: 1.5px dashed var(--drop-line); background: var(--surface); }
[data-style="pass"] .dropzone.drag-over { border-color: var(--text); background: var(--accent-tint); }
[data-style="pass"] .steps-h .step-bar { height: 9px; border: 1.5px solid var(--text); border-radius: 2px; background: var(--surface); }
[data-style="pass"] .steps-h .step.is-need .step-bar i { background: var(--accent); }
[data-style="pass"] .steps-h .step-name { font: 700 12px/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
[data-style="pass"] .steps-h .step.is-current .step-name { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 5px; }
[data-style="pass"] .steps-h .step.is-current .step-bar { box-shadow: 2px 2px 0 var(--text); }
[data-style="pass"] .gw-whynext div { background: var(--surface); border: 1.5px dashed oklch(0.72 0.012 255); }
[data-style="pass"] .tieout, [data-style="pass"] .newlink { border-width: 1.5px; }

/* ---------- public page ---------- */

[data-style="pass"] .hero::before {
  content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1); z-index: 0; pointer-events: none;
  background: radial-gradient(760px 520px at 76% 46%, oklch(0.995 0.002 250), transparent 72%);
}
[data-style="pass"] .hero-title { font-size: clamp(2.6rem, 1.45rem + 4.2vw, 4.4rem); line-height: .95; max-width: 12.5ch; }
[data-style="pass"] .hero-for { font: 500 12.5px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
[data-style="pass"] .price-line b, [data-style="pass"] .price-big b { font-weight: 750; }
[data-style="pass"] .hero-demo { z-index: 1; }
[data-style="pass"] .hero-demo .rail { max-width: 560px; margin: 0 auto -6px; }
[data-style="pass"] .demo-card { rotate: -0.6deg; transform-origin: 50% 0; }
[data-style="pass"] .demo-line { font-size: 19px; font-weight: 750; font-stretch: 86%; letter-spacing: -0.01em; }
[data-style="pass"] .how-n { background: var(--accent); color: var(--text); border: 1.5px solid var(--text); box-shadow: 2px 2px 0 var(--text); font-weight: 750; }
[data-style="pass"] .how-step h3 { font-weight: 850; font-stretch: 78%; font-size: 22px; letter-spacing: -0.005em; }
[data-style="pass"] .check-list li { border-top: 1.5px dotted oklch(0.78 0.01 255); }
[data-style="pass"] .price-card { position: relative; padding: clamp(24px, 4vw, 40px) clamp(24px, 4vw, 40px) clamp(30px, 4.5vw, 46px); }
[data-style="pass"] .list-check li::before { background: var(--good); box-shadow: none; }
[data-style="pass"] .list-check li::after { border-color: var(--surface); border-width: 0 2.2px 2.2px 0; }