/*
  Revenue Velocity Calculator v2 on the VELO Instrument Standard v1 (kit 1.0.0, /standard/tokens.css).
  The kit supplies faces, colour tokens, the grid wrap, buttons, fields, focus and motion; this file adds
  the type ladder (Standard §3), the surface layout (roi GRID.md) and the result drawing.
  No colour outside the kit tokens.
*/

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'PP Neue Montreal', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  font-size: 17px; line-height: 28px; font-weight: 400;
  color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-kerning: normal; font-variant-numeric: proportional-nums;
}
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; }
img, svg { display: block; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
cite { font-style: normal; }
/* a programmatic focus target is not a control: no box on it (H1 grade) */
[tabindex="-1"]:focus { outline: none; }

/* ── Type ladder (Standard §3), every line height on the 4px grid ── */
.t-hero { font-size: 48px; line-height: 52px; font-weight: 700; letter-spacing: -0.01em; }
.t-page { font-size: 28px; line-height: 36px; font-weight: 700; }
.t-h2 { font-size: 28px; line-height: 36px; font-weight: 700; }
.t-h3 { font-size: 20px; line-height: 28px; font-weight: 700; }
.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; }
.accent { font-family: 'PP Editorial New', 'Times New Roman', Georgia, serif; font-style: italic; font-weight: 800; letter-spacing: 0; }
@media (min-width: 768px) {
  .t-page { font-size: 36px; line-height: 48px; }
}
@media (min-width: 1024px) {
  .t-hero { font-size: 64px; line-height: 72px; }
}

.step-label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-88); margin-bottom: 8px; }
.step-desc { font-size: 17px; line-height: 28px; color: var(--ink-88); max-width: 48ch; }

/* ── Masthead (kit Masthead + TrackerRule, ported) ── */
.masthead { padding-bottom: 0; }
.mast-row { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { display: inline-flex; align-items: baseline; gap: 12px; min-height: 44px; padding-block: 8px; border-radius: 4px; text-decoration: none; }
.wm-name { font-size: 17px; line-height: 28px; font-weight: 700; }
.wm-tool { display: none; font-size: 14px; line-height: 20px; color: var(--ink-88); }
@media (min-width: 640px) { .wm-tool { display: inline; } }
.tracker-letters { display: flex; align-items: flex-end; gap: 12px; list-style: none; padding-bottom: 4px; }
.tracker-letters li { display: flex; height: 24px; }
.tracker-letters svg { height: 24px; width: auto; }
.progress { position: relative; height: 1px; width: 100%; background: var(--ink-48); }
.progress-bar { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ink); transform-origin: left; transform: scaleX(.3333); transition: transform var(--settle) var(--ease); }

/* ── Steps ── */
.step { display: none; }
.step.active { display: block; animation: rise var(--enter) var(--ease) both; }
.step > .wrap { padding-top: 32px; }
@media (min-width: 768px) { .step > .wrap { padding-top: 48px; } }

/* ── Step 1: landing ── */
.landing { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
/* below 1024 the H1 and the sub-headline are placed apart, so step 1 sits in the first viewport */
.landing-main { display: contents; }
.landing-main .t-hero { order: 1; font-size: 36px; line-height: 48px; }
.subtitle { order: 2; }
.landing .drawing-example { order: 3; }
.landing-side { order: 4; }
.subtitle { font-size: 17px; line-height: 28px; max-width: 48ch; }
.landing-side { padding-top: 0; }
@media (min-width: 768px) {
  .subtitle { font-size: 20px; line-height: 32px; }
  .landing-main .t-hero { font-size: 48px; line-height: 52px; }
}
@media (min-width: 1024px) {
  .landing { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; }
  .landing { row-gap: 40px; align-content: start; }
  .landing-main { display: block; grid-column: 1 / span 6; grid-row: 1; }
  .landing-main .t-hero { font-size: 64px; line-height: 72px; margin-bottom: 24px; }
  .landing-side { grid-column: 7 / span 6; grid-row: 1 / span 2; padding-top: 8px; }
  .landing .drawing-example { grid-column: 1 / span 6; grid-row: 2; }
}

.step-q { font-size: 20px; line-height: 28px; font-weight: 500; margin-bottom: 8px; }
.landing-side .step-desc { font-size: 15px; line-height: 24px; margin-bottom: 24px; }

/* Option rows: hairline rows, the label alone, Near Black when chosen (kit option row) */
.options { border-top: 1px solid var(--ink-48); }
.opt { position: relative; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 8px 16px; border-bottom: 1px solid var(--ink-48); cursor: pointer; transition: background-color var(--settle) var(--ease), color var(--settle) var(--ease); }
.opt:hover { background: var(--ink-04); }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.opt-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.opt-name { font-size: 17px; line-height: 28px; font-weight: 500; }
.opt-desc { font-size: 14px; line-height: 20px; color: var(--ink-88); }
.opt-mark { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ink-48); }
.opt:has(input:checked) { background: var(--ink); color: var(--paper); border-bottom-color: var(--ink); }
.opt:has(input:checked) .opt-desc { color: var(--paper); }
.opt:has(input:checked) .opt-mark { border-color: var(--paper); background: radial-gradient(circle, var(--paper) 0 4px, transparent 4.5px); }
.opt:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; z-index: 1; }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
.btn-row .cta-line, .breakdown-foot .cta-line { min-height: 56px; padding: 13px 21px; }
.cta { cursor: pointer; border: 0; text-decoration: none; }
.cta-line { border: 1px solid var(--ink); background: transparent; }
.cta-gold:disabled, .cta-gold:disabled:hover { opacity: 1; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); cursor: not-allowed; }

/* ── The result drawing (GRID §5) ── */
.drawing { display: block; }
.drawing-caption { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); margin-bottom: 12px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 32px; list-style: none; margin-bottom: 16px; font-size: 14px; line-height: 20px; color: var(--ink-88); }
.legend li { display: flex; align-items: center; gap: 12px; }
.legend b { font-weight: 500; color: var(--ink); }
.legend .key { flex: none; width: 32px; height: 12px; }
.legend-stack { flex-direction: column; gap: 8px; }
.field-draw svg { width: 100%; height: 64px; overflow: visible; }
.callouts { position: relative; height: calc(var(--rows, 0) * 28px); margin-top: calc(min(var(--rows, 0), 1) * 4px); }
.callout { position: absolute; top: calc(var(--row, 0) * 28px); padding: 8px 0 0 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.callout::before { content: ''; position: absolute; left: 0; top: 0; height: 18px; border-left: 1px solid var(--ink); }
.callout.to-left { transform: translateX(-100%); padding: 8px 8px 0 0; }
.callout.to-left::before { left: auto; right: 0; }
@media (min-width: 768px) {
  .field-draw svg { height: 96px; }
}
.pourx { transform-box: view-box; transform-origin: 0 0; animation: pourx var(--pour) var(--ease) both; animation-delay: .15s; }
@keyframes pourx { from { transform: scaleX(0); } }

/* ── Step 2: inputs, with the live drawing on the rail ── */
.inputs { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
.inputs-head .t-page { margin-bottom: 8px; }
.input-group { margin-top: 40px; }
.inputs-form > .input-group:first-child { margin-top: 32px; }
.flabel { display: block; font-size: 17px; line-height: 28px; font-weight: 500; margin-bottom: 12px; max-width: 48ch; }
.control { display: flex; align-items: center; gap: 24px; }
.fnote { font-size: 15px; line-height: 24px; color: var(--ink-88); margin-top: 12px; max-width: 52ch; }
.inputs-rail { display: none; }
/* below 1024 the live reading rides under the heading as a sticky band */
.drawing-band { position: sticky; top: 0; z-index: 5; margin: 16px 0 0; padding: 12px 0 12px; background: var(--paper); box-shadow: 0 1px 0 var(--ink-10); }
.drawing-band .legend { margin-bottom: 8px; gap: 4px 16px; }
.drawing-band .legend li { gap: 8px; }
.drawing-band .legend .key { width: 20px; height: 8px; }
.drawing-band .field-draw svg { height: 28px; }
@media (min-width: 768px) { .drawing-band .field-draw svg { height: 32px; } }
@media (min-width: 1024px) { .drawing-band { display: none; } }
/* phone: the field on its own line, the slider full width under it (grade-1: 130px sliders) */
@media (max-width: 639px) {
  .control { flex-wrap: wrap; row-gap: 4px; }
  .control .num { order: 1; }
  .control input[type="range"] { order: 2; flex: 1 1 100%; }
}
@media (min-width: 1024px) {
  .inputs { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .inputs-head { grid-column: 1 / -1; grid-row: 1; }
  .inputs-form { grid-column: 1 / span 6; grid-row: 2; }
  .inputs-rail { display: block; grid-column: 8 / span 5; grid-row: 2; padding-top: 32px; }
  .drawing-rail { position: sticky; top: 48px; }
}

/* number field with its unit inside the kit field */
.num { position: relative; flex: none; width: 168px; }
.num .field { font-weight: 500; font-variant-numeric: proportional-nums; -moz-appearance: textfield; appearance: textfield; }
.num .field::-webkit-outer-spin-button, .num .field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.num .affix { position: absolute; top: 50%; transform: translateY(-50%); font-size: 17px; line-height: 28px; color: var(--ink-88); pointer-events: none; }
.num.prefix .affix { left: 15px; }
.num.prefix .field { padding-left: 32px; }
.num.suffix .affix { right: 15px; }
.num.suffix .field { padding-right: 40px; }
.num.suffix-wide .field { padding-right: 60px; }
.num .field:focus-visible { border-color: var(--ink); }

/* range: a 2px track, ink to the value, a 24px ink thumb, a 44px hit area */
input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 44px; margin: 0; background: transparent; cursor: pointer; --p: 50%; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--ink) 0 var(--p), var(--ink-48) var(--p) 100%); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -11px; border-radius: 50%; background: var(--ink); border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--ink); }
input[type="range"]::-moz-range-track { height: 2px; background: var(--ink-48); }
input[type="range"]::-moz-range-progress { height: 2px; background: var(--ink); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--ink); border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--ink); }

/* ── Step 3: results ── */
.r-hero { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 16px; margin-bottom: 32px; }
.r-label { font-size: 20px; line-height: 28px; font-weight: 500; margin-bottom: 4px; max-width: 24em; }
.figure { font-size: 64px; line-height: 72px; font-weight: 700; white-space: nowrap; letter-spacing: -0.02em; }
.figure[data-p="m"] { font-size: 48px; line-height: 52px; }
.figure[data-p="s"] { font-size: 36px; line-height: 48px; }
.figure[data-p="xs"] { font-size: 28px; line-height: 36px; }
.t-quiet { font-size: 20px; line-height: 28px; font-weight: 500; }
.quiet-fig { font-size: 28px; line-height: 36px; font-weight: 500; margin-top: 4px; }
.waiting .col-b { align-self: end; }
.pairs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 8px; }
@media (min-width: 768px) { .pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.pair .assumption-edit { margin: 20px 0 0; }
.improve .r-note { margin-top: 24px; }
.improve .r-note + .r-note { margin-top: 8px; }
.pair-fig { font-size: 28px; line-height: 36px; font-weight: 700; margin-top: 4px; }
.pair-fig + .r-line { margin-top: 4px; }
.r-line + .pair-fig { margin-top: 24px; }
@media (min-width: 768px) { .pair-fig { font-size: 36px; line-height: 48px; } }
.r-hero-sub { font-size: 17px; line-height: 28px; max-width: 48ch; }
@media (min-width: 768px) {
  .figure, .figure[data-p] { font-size: 96px; line-height: 104px; letter-spacing: -0.025em; }
  .figure[data-d="m"] { font-size: 64px; line-height: 72px; }
  .figure[data-d="s"] { font-size: 48px; line-height: 52px; }
  .r-hero-sub { font-size: 20px; line-height: 32px; }
}
@media (min-width: 1024px) {
  .r-hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-bottom: 48px; }
  .r-hero-main { grid-column: 1 / span 6; }
  .r-hero-sub { grid-column: 7 / span 6; align-self: end; padding-bottom: 8px; }
}

.band { margin-top: 48px; }
@media (min-width: 768px) { .band { margin-top: 80px; } }
.band .t-h2 { margin-bottom: 16px; }
.waiting.band { margin-top: 48px; }
.band .t-h3 { margin-bottom: 8px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
@media (min-width: 768px) {
  .two { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .two .col-a { grid-column: 1 / span 6; }
  .two .col-b { grid-column: 7 / span 6; }
  .two .span-all { grid-column: 1 / -1; }
}
.r-line { max-width: 48ch; }
.r-line + .r-line { margin-top: 12px; }
.r-note { font-size: 15px; line-height: 24px; color: var(--ink-88); max-width: 60ch; }

.assumption-list { list-style: none; border-top: 1px solid var(--ink-10); }
.assumption-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--ink-10); }
.assumption-list .k { color: var(--ink-88); }
.assumption-list .v { font-weight: 500; text-align: right; white-space: nowrap; }
.assumption-list .aside { grid-column: 1 / -1; justify-self: end; text-align: right; max-width: 40ch; font-size: 14px; line-height: 20px; color: var(--ink-88); margin-top: 2px; }
.assumption-edit { margin: 20px 0 0; }
.improve .r-note { margin-top: 24px; }
.improve .r-note + .r-note { margin-top: 8px; }
.pair-fig { font-size: 28px; line-height: 36px; font-weight: 700; margin-top: 4px; }
.pair-fig + .r-line { margin-top: 4px; }
.r-line + .pair-fig { margin-top: 24px; }
@media (min-width: 768px) { .pair-fig { font-size: 36px; line-height: 48px; } }
.r-hero-sub { font-size: 17px; line-height: 28px; max-width: 48ch; }
@media (min-width: 768px) {
  .figure, .figure[data-p] { font-size: 96px; line-height: 104px; letter-spacing: -0.025em; }
  .figure[data-d="m"] { font-size: 64px; line-height: 72px; }
  .figure[data-d="s"] { font-size: 48px; line-height: 52px; }
  .r-hero-sub { font-size: 20px; line-height: 32px; }
}
@media (min-width: 1024px) {
  .r-hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-bottom: 48px; }
  .r-hero-main { grid-column: 1 / span 6; }
  .r-hero-sub { grid-column: 7 / span 6; align-self: end; padding-bottom: 8px; }
}

.band { margin-top: 48px; }
@media (min-width: 768px) { .band { margin-top: 80px; } }
.band .t-h2 { margin-bottom: 16px; }
.waiting.band { margin-top: 48px; }
.band .t-h3 { margin-bottom: 8px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
@media (min-width: 768px) {
  .two { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .two .col-a { grid-column: 1 / span 6; }
  .two .col-b { grid-column: 7 / span 6; }
  .two .span-all { grid-column: 1 / -1; }
}
.r-line { max-width: 48ch; }
.r-line + .r-line { margin-top: 12px; }
.r-note { font-size: 15px; line-height: 24px; color: var(--ink-88); max-width: 60ch; }

.assumption-list { list-style: none; border-top: 1px solid var(--ink-10); }
.assumption-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 16px; padding: 10px 0; border-bottom: 1px solid var(--ink-10); }
.assumption-list .k { color: var(--ink-88); }
.assumption-list .v { font-weight: 500; }
.assumption-list .v .aside { display: block; font-weight: 400; font-size: 14px; line-height: 20px; color: var(--ink-88); }
.assumption-edit { margin-bottom: 24px; }
.assumption-edit .num { width: 136px; }
@media (min-width: 768px) { .two .col-b > .assumption-edit:first-child { margin-top: 52px; } }

.method-list { padding-left: 1.4em; max-width: 48ch; }
.method-list li { padding-left: 4px; margin-bottom: 12px; }
.method-list li::marker { font-weight: 500; }
.method .t-h3 { margin-bottom: 12px; }
@media (min-width: 768px) { .method { padding-top: 52px; } }

.action-list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 60ch; }
.action-list li { max-width: 60ch; }
.action-list strong { display: block; font-size: 20px; line-height: 28px; font-weight: 700; margin-bottom: 4px; }

.founder { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
.portrait { width: 60%; max-width: 270px; height: auto; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; }
.founder-text { max-width: 48ch; }
@media (min-width: 768px) { .founder-text { font-size: 20px; line-height: 32px; } }
@media (min-width: 1024px) {
  .founder { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .founder { row-gap: 16px; align-items: start; }
  .founder-head { grid-column: 1 / span 6; grid-row: 1; margin-bottom: 0; align-self: end; }
  .founder-text { grid-column: 1 / span 6; grid-row: 2; }
  /* 368px (46 baseline units) from column 7, one gutter from the copy: he looks left, into the text */
  .portrait { grid-column: 7 / span 4; grid-row: 1 / span 2; align-self: center; width: 100%; max-width: 368px; }
}

.tables { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 768px) { .tables { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.breakdown-table { width: 100%; border-collapse: collapse; font-family: 'PP Neue Montreal', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-variant-numeric: proportional-nums lining-nums; }
.breakdown-table caption { text-align: left; font-size: 20px; line-height: 28px; font-weight: 500; margin-bottom: 12px; }
.breakdown-table th { text-align: left; vertical-align: bottom; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-88); padding: 0 12px 8px 0; border-bottom: 1px solid var(--ink); }
.breakdown-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--ink-10); }
.breakdown-table th:not(:first-child), .breakdown-table td:not(:first-child) { text-align: right; }
.breakdown-table th:last-child, .breakdown-table td:last-child { padding-right: 0; }
.breakdown-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 24px; }

.explore { padding-top: 32px; border-top: 2px solid var(--ink); align-items: start; }
@media (min-width: 768px) { .explore .col-b { padding-top: 4px; } }
.next-tool { margin-top: 16px; font-size: 17px; line-height: 28px; color: var(--ink-88); }
.next-tool a { color: var(--ink); display: inline-block; padding-block: 8px; margin-block: -8px; }
.disclaimer { margin-top: 48px; font-size: 15px; line-height: 24px; color: var(--ink-88); max-width: 60ch; }

/* ── Footer (kit footer on an ink rule) ── */
.site-footer { margin-top: 96px; padding-bottom: 32px; }
/* the ink rule sits inside the field, drawn as its own element so no text is read against it */
.site-footer::before { content: ''; display: block; height: 1px; background: var(--ink); margin-bottom: 16px; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; }
.footer-sep { display: none; }
@media (min-width: 640px) { .footer-links { flex-direction: row; align-items: center; column-gap: 8px; } .footer-sep { display: inline; } }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration: underline; text-decoration-color: var(--ink-48); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.footer-links a:hover { text-decoration-color: var(--ink); }
.footer-sep { color: var(--ink-88); }
.footer-links + .powered { margin-top: 4px; }
.powered { font-size: 14px; line-height: 20px; color: var(--ink-88); }

/* ── Print: black on white, results only, no controls ── */
@media print {
  .masthead .tracker, .skip-link, .btn-row, .no-print, #step1, #step2 { display: none !important; }
  #step3 { display: block !important; animation: none !important; }
  * { color: #000 !important; background: transparent !important; box-shadow: none !important; }
  .band { margin-top: 24px; break-inside: avoid; }
  .portrait { display: none; }
  .key-nd { background: #000 !important; }
  .key-won { background: var(--ink-48) !important; }
}