/* ============================================================================
chciweb.online — site stylesheet
Reads tokens.css. NO hex, NO font stack, NO spacing number appears below this
line — if you need a value that isn't a token, add the token (INV-ONE-HOME).
Hand-written, no build step: what we write is what ships, which is what makes
the zero-errors requirement (C-23) cheap to hold.
============================================================================ */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;
src:url("../fonts/fraunces-1.118070a4b0cf.woff2") format('woff2');
unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;
src:url("../fonts/fraunces-2.a04d353989ad.woff2") format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;
src:url("../fonts/fraunces-3.069cb90e11a3.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;}
/* ── Reset ─────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
font-family:var(--font-body);font-size:var(--step-0);line-height:var(--leading-body);
-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:var(--leading-tight);
margin:0;letter-spacing:-0.02em;text-wrap:balance}
p{margin:0}
a{color:var(--link);text-underline-offset:0.18em;text-decoration-thickness:0.08em}
a:hover{color:var(--link-hover)}
/* Focus is restyled, never removed (WCAG 2.4.7 / 2.4.13). */
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:var(--radius-s)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip-path:inset(50%);white-space:nowrap;border:0}
/* Skip link (WCAG 2.4.1) — the first thing a keyboard user meets. */
.skip{position:absolute;left:var(--space-s);top:calc(var(--space-s) * -4);z-index:10;
background:var(--brand);color:var(--paper);padding:var(--space-2xs) var(--space-s);
border-radius:var(--radius-m);text-decoration:none;font-weight:600;
transition:top var(--dur-fast) var(--ease-out)}
.skip:focus{top:var(--space-s);color:var(--paper)}
.skip{display:inline-flex;align-items:center;min-height:2.75rem}
.wrap{max-width:var(--content-max);margin-inline:auto;padding-inline:var(--gutter)}
/* ── Wordmark ──────────────────────────────────────────────────────────────── */
.logo{display:inline-flex;align-items:center;gap:0.02em;text-decoration:none;
font-family:var(--font-display);font-weight:600;letter-spacing:-0.035em;
font-size:var(--step-1);color:var(--ink)}
.logo{min-height:2.75rem}
.logo:hover{color:var(--ink)}
.logo--sm{font-size:var(--step-0)}
.logo__beam{width:0.085em;height:0.8em;background:var(--brand);border-radius:0.05em;
margin-left:0.14em;flex:none}
/* ── Header ────────────────────────────────────────────────────────────────── */
/* !! ANYTHING JS SCROLLS TO MUST CLEAR THE STICKY HEADER, or it lands BEHIND it. `F-113`.
*
* `smartform.js` advances a step with `scrollIntoView({block:"start"})` on the step's legend, which
* puts that element at the very top of the viewport -- underneath `.site-header`, which is
* `position:sticky; top:0`. Measured 2026-08-18: stepping into step 2 put its first field at
* `top=61` on a 390px phone and `top=65` on desktop, against a header whose bottom edge is at `69`.
* The customer was asked to fill a field that was **partly hidden by the header**, on the very step
* where they type their name and company.
*
* `scroll-margin-top` is the mechanism `scrollIntoView` itself honours, which is why the fix belongs
* here rather than in the JS: no scroll call has to remember to subtract anything.
*
* 5rem clears the measured 69px with room to spare. It is a MEASURED constant, not a guess -- and
* `tests/test_layout_geometry.py::test_stepping_never_leaves_the_first_field_UNDER_the_header`
* fails if the header ever grows past it, which is what stops this number going quietly stale.
*/
.formstep, .formstep legend, .formstep .fieldset__legend, .form { scroll-margin-top: 5rem }
.site-header{position:sticky;top:0;z-index:5;
background:color-mix(in srgb, var(--paper) 88%, transparent);
backdrop-filter:blur(10px);border-bottom:var(--border)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;
gap:var(--space-m);padding-block:var(--space-xs)}
.nav{display:flex;align-items:center;gap:var(--space-m);flex-wrap:wrap;
font-size:var(--step--1)}
/* 🚨 44px MINIMUM TAP TARGET (WCAG 2.5.5 / Apple HIG). Measured 2026-08-05, every nav link was
15px tall on a phone — hittable only if you aim. The height comes from padding rather than a
fixed box so the text stays on the baseline the design intends, and `align-items:center` on
`.nav` keeps the row visually tight despite the bigger hit area. */
.nav a{color:var(--text);text-decoration:none;
display:inline-flex;align-items:center;min-height:2.75rem;padding-inline:0.15rem}
.nav--stack a{min-height:2.75rem} /* footers get mis-tapped more, not less */
.nav a:hover{color:var(--brand)}
.nav--stack{flex-direction:column;align-items:flex-start;gap:var(--space-2xs)}
@media (max-width:46rem){
/* 🚨 THE STICKY HEADER IS THE MOST EXPENSIVE 100px ON THE SITE — it is not spent once, it is
spent on every screen the customer scrolls past. Wrapping the three section links onto a
second row cost ~50px permanently, and giving them proper 44px tap targets made that worse.
So on a phone the sticky bar carries the two things that must always be reachable: who we are,
and the way to order. The section links stay in the footer and the page is a single scroll
anyway — a `#cenik` anchor is worth far less on a 390px screen than the 50px it occupies on
every one of them. */
.site-header__inner{flex-wrap:nowrap;gap:var(--space-s)}
.nav > li:not(:last-child){display:none}
.nav{gap:var(--space-s)}
}
/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:var(--space-2xs);min-height:2.75rem; /* WCAG 2.5.5 — btn--sm was 40px on a phone */
font:inherit;font-weight:600;text-decoration:none;cursor:pointer;
padding:0.8em 1.5em;border-radius:var(--radius-xl);border:2px solid transparent;
transition:transform var(--dur-fast) var(--ease-out),
background-color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out)}
.btn--sm{padding:0.5em 1em;font-size:var(--step--1)}
.btn--lg{padding:1em 2em;font-size:var(--step-1)}
.btn--primary{background:var(--brand);color:var(--paper)}
.btn--primary:hover{background:var(--terracotta-deep);color:var(--paper);transform:translateY(-1px)}
.btn--ghost{border-color:var(--rule);color:var(--text)}
.btn--ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn__arrow{transition:transform var(--dur-base) var(--ease-out)}
.btn:hover .btn__arrow,.card__cta:hover .btn__arrow{transform:translateX(0.25em)}
/* ── Sections ──────────────────────────────────────────────────────────────── */
.section{padding-block:var(--space-2xl)}
.section--raised{background:var(--bg-raised);border-block:var(--border)}
.section--close{text-align:center;padding-block:var(--space-3xl)}
.section h2{font-size:var(--step-3);margin-bottom:var(--space-s)}
.section__lede{font-size:var(--step-1);color:var(--text-muted);max-width:52ch;
margin-bottom:var(--space-xl)}
.section--close .section__lede{margin-inline:auto;margin-bottom:var(--space-l)}
.eyebrow{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:0.08em;
text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-2xs)}
.close__title{font-size:var(--step-4);margin-bottom:var(--space-s)}
/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hero{padding-block:var(--space-3xl) var(--space-2xl)}
.hero__title{font-size:var(--step-5);letter-spacing:-0.035em}
/* `F-134` — the hero's inner block measured **845px on a 390x844 phone**: the visitor's entire first
screen was hero and nothing else, with the price list starting below the fold. Trimmed by tightening
the rhythm around the lede rather than shrinking the type, because the headline is the one thing on
this page that should be big. */
.hero__lede{font-size:var(--step-1);color:var(--text-muted);max-width:48ch;
margin-block:var(--space-s) var(--space-m)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-s);align-items:center}
/* `--space-2xl` above a bordered list inside the hero was ~48px of gap doing the job a 1px rule was
already doing. The rule separates; the gap only pushed the fold down. */
.included{display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-l);
margin-top:var(--space-m);padding-top:var(--space-s);border-top:var(--border)}
.included li{display:flex;flex-direction:column;gap:0.1em;max-width:22ch}
.included__label{display:flex;align-items:center;gap:var(--space-2xs);font-weight:600;
font-size:var(--step--1)}
.included__label::before{content:"";width:0.45em;height:0.45em;border-radius:50%;
background:var(--teal);flex:none}
.included__detail{color:var(--text-muted);font-size:var(--step--1);padding-left:1.1em}
/* ── Cards / configurator ──────────────────────────────────────────────────── */
.cards{display:grid;gap:var(--space-m);
grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
/* `F-144` — the WHOLE card is the click target, and it says so on hover.
Maker: *"All our cenik options should be clickable anywhere in the component and should have mouse over
slight background change ... so customer knows he's selecting it UX wise."* Before this, only the small
`Vybrat →` link was clickable: the card lifted on hover, which PROMISES clickability, and then a click
two centimetres away did nothing. A hover state that lies is worse than none. */
.card{position:relative;display:flex;flex-direction:column;gap:var(--space-2xs);
background:var(--paper);border:2px solid var(--rule);border-radius:var(--radius-l);
padding:var(--space-m);cursor:pointer;
transition:border-color var(--dur-fast) var(--ease-out),
background-color var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out)}
.card:hover,.card:focus-within{border-color:var(--brand);background:var(--sand);transform:translateY(-3px);
box-shadow:var(--shadow-m)}
.card--soft{border-style:dashed}
.card__name{font-size:var(--step-1)}
.card__price{font-family:var(--font-display);font-size:var(--step-2);color:var(--brand);
line-height:1.15}
.card__price--none{color:var(--text-muted)}
.card__tagline{font-weight:600;font-size:var(--step--1)}
.card__desc{color:var(--text-muted);font-size:var(--step--1);flex:1}
.card__cta{display:inline-flex;align-items:center;gap:var(--space-2xs);
min-height:2.75rem; /* WCAG 2.5.5 — this is a BUY button, measured 22px */
margin-top:var(--space-2xs);font-weight:600;font-size:var(--step--1);
color:var(--link);text-decoration:none}
.card__cta:hover{color:var(--link-hover)}
/* THE STRETCHED LINK (`F-144`). One pseudo-element covers the card, so the existing `` owns the whole
surface. Deliberately NOT a second link, an `onclick`, or a wrapping ``:
· a second link means two tab stops and a screen reader announcing the same destination twice;
· an `onclick` on the card is not a link — no middle-click, no ⌘-click, no "open in new tab", and
nothing for a keyboard;
· wrapping the `
with no wrapper to scroll, so the table itself becomes the scroll
container. `table-layout:fixed` is what stops a long cell forcing the whole PAGE sideways —
without it the row stays wider than the viewport and the body scrolls horizontally, which is the
single most broken-feeling thing a phone layout can do. */
.legal__body table{table-layout:fixed}
.legal__body td,.legal__body th{overflow-wrap:anywhere}
@media (max-width:34rem){
.legal__body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
max-width:100%}
}
/* ── Showcase (SPEC §14, D-16) ───────────────────────────────────────────────
A scroll-snap rail, not a carousel library. Swipe on a phone, drag or shift-scroll on a desktop,
and it degrades to a plain row of images with JavaScript off — there is none to disable.
🚨 NOTHING AUTO-ADVANCES. A slide that moves on its own is a slide nobody finishes looking at,
and it steals focus from the reading position. The customer controls the pace. */
.work{list-style:none;padding:0;margin:var(--space-l) 0 0;display:grid;gap:var(--space-xl)}
.work__item{display:grid;gap:var(--space-2xs)}
.work__head{display:flex;align-items:baseline;gap:var(--space-s);flex-wrap:wrap}
.work__name{font-family:var(--font-display);font-size:var(--step-2);margin:0;line-height:1.2}
.work__name a{color:var(--ink);text-decoration:none}
.work__name a:hover{color:var(--brand)}
/* The label that keeps the portfolio honest — visible, not a footnote. */
.work__kind{margin:0;font-size:var(--step--1);color:var(--text-muted);
border:1px solid var(--rule);border-radius:99em;padding:0.15em 0.7em;white-space:nowrap}
.work__kind--own{border-color:var(--brand);color:var(--brand)}
.work__summary{color:var(--text-muted);max-width:60ch;margin:0 0 var(--space-2xs)}
/* `align-items:flex-start` because flex defaults to `stretch`: a tall phone capture next to a wide
desktop one stretched the desktop frame to match, leaving a slab of empty card below the image.
Each frame now keeps its own height, which is also what makes the two shapes read as two
DEVICES rather than as one broken grid. */
.shots{display:flex;align-items:flex-start;gap:var(--space-s);overflow-x:auto;
scroll-snap-type:x mandatory;
padding-block:var(--space-2xs) var(--space-xs);
scrollbar-width:thin;-webkit-overflow-scrolling:touch}
/* Keyboard users scroll this with arrow keys, so it must show where focus is. */
.shots:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:var(--radius)}
.shot{scroll-snap-align:start;flex:0 0 auto;margin:0;
width:min(38rem, 82vw);border-radius:var(--radius);overflow:hidden;
border:1px solid var(--rule);background:var(--surface)}
/* A phone capture is tall and narrow; giving it the desktop width would letterbox it into
uselessness — the whole point is showing the customer it works on THEIR screen. */
.shot--mobile{width:min(15rem, 46vw)}
/* A phone capture is ~2.2x taller than it is wide; without a cap it sets the row height and the
desktop shot beside it looks like a postage stamp. Cropping from the top keeps the part a
customer actually judges — the header and the first screen. */
.shot--mobile img{max-height:26rem;object-fit:cover;object-position:top}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{padding:0.5rem 0.75rem;font-size:var(--step--1);color:var(--text-muted)}
@media (prefers-reduced-motion:no-preference){
.shots{scroll-behavior:smooth}
}
/* 🚨 ON A PHONE THE RAIL BECOMES A COLUMN. A horizontal scroller sets its height from its TALLEST
child, so a 386px phone capture sitting off-screen to the right left ~200px of visible nothing
under the 199px desktop shot — measured 2026-08-05. The customer sees an empty card and no hint
that anything is beside it.
Stacking removes the dead space, removes the need to discover a sideways swipe on the one device
where the natural gesture is vertical, and lets each shot keep its true proportions. The rail is
the right shape from `sm` up, where two frames fit side by side and the comparison is the point. */
@media (max-width:34rem){
.shots{display:grid;grid-auto-flow:row;gap:var(--space-s);
overflow-x:visible;scroll-snap-type:none}
.shot{width:100%}
/* Still narrower than the desktop frame — it has to READ as a phone. */
.shot--mobile{width:min(15rem,62%)}
.shot--mobile img{max-height:none}
}
/* The promised date (SPEC §4, D-30). Given weight, because it answers the question the customer
actually came to the page with. */
.now__promise{display:flex;align-items:baseline;gap:0.45em;margin:0.6rem 0 0;
font-size:var(--step-0);color:var(--text)}
.now__promise-icon{color:var(--brand);font-size:0.9em}
/* Late is stated, not hidden — they can already see the date has passed. */
.now__promise--late{color:var(--brand)}
/* ── Operator console (SPEC §16, D-31) ───────────────────────────────────────
Verbs, not states. Dense on purpose: this is a worklist read many times a day, not a page to be
admired, so the eye should reach the next action without scrolling past decoration. */
.console{padding-block:var(--space-l) var(--space-2xl)}
.console__title{font-family:var(--font-display);font-size:var(--step-4);margin:0 0 var(--space-l)}
.bucket{margin-bottom:var(--space-xl)}
.bucket__title{font-family:var(--font-display);font-size:var(--step-2);
display:flex;align-items:baseline;gap:0.5em;margin:0 0 0.15rem}
.bucket__count{font-size:var(--step--1);color:var(--text-muted);
border:1px solid var(--rule);border-radius:99em;padding:0.1em 0.6em}
.bucket--urgent .bucket__count{border-color:var(--brand);color:var(--brand)}
.bucket__hint{color:var(--text-muted);font-size:var(--step--1);margin:0 0 var(--space-s);max-width:62ch}
.bucket__empty{color:var(--text-muted);font-size:var(--step--1);margin:0}
.jobs{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-2xs)}
.job{display:flex;flex-wrap:wrap;gap:var(--space-s);justify-content:space-between;
align-items:flex-start;padding:var(--space-s);border:1px solid var(--rule);
border-radius:var(--radius);background:var(--surface)}
.bucket--urgent .job{border-left:3px solid var(--brand)}
.job__who{min-width:min(22rem,100%);flex:1 1 22rem}
.job__name{font-weight:600;color:var(--ink);text-decoration:none;
display:inline-flex;align-items:center;min-height:2.25rem}
.job__name:hover{color:var(--brand)}
.job__meta,.job__detail,.job__contact{margin:0.1rem 0 0;font-size:var(--step--1);color:var(--text-muted)}
.job__detail{color:var(--brand)}
.job__late{color:var(--brand)}
.job__do{display:flex;flex-wrap:wrap;gap:0.45rem;align-items:flex-start}
.job__do form{margin:0}
.console__foot{color:var(--text-muted);font-size:var(--step--1);margin-top:var(--space-xl)}
/* ── Partial payment (SPEC §9.3, D-32) ───────────────────────────────────────
A customer who has paid something is not a customer who has not paid. The block leads with what
we RECEIVED and thanks them, then states the remainder — the reverse order reads as a demand. */
.partial{border:1px solid var(--rule);border-left:3px solid var(--brand);
border-radius:0 var(--radius) var(--radius) 0;padding:0.9rem 1.1rem;margin-block:1rem;
background:var(--surface)}
.partial__head{margin:0 0 0.6rem}
.partial__rest{margin:0.6rem 0 0;font-size:var(--step--1);color:var(--text-muted)}
.partial__bar{height:0.5rem;border-radius:99em;background:var(--rule);overflow:hidden}
.partial__bar span{display:block;height:100%;background:var(--brand);border-radius:99em}
/* ── Console: the conversation (SPEC §13, D-34) ──────────────────────────────
Answering a customer without their question in front of you means opening another tab first,
which is how a reply becomes "later". */
.job__said{margin:0.5rem 0 0;padding:0.5rem 0.75rem;border-left:2px solid var(--rule);
background:var(--paper);border-radius:0 var(--radius) var(--radius) 0}
.job__said p{margin:0;font-size:var(--step--1)}
.job__said cite{display:block;margin-top:0.2rem;font-size:var(--step--1);
color:var(--text-muted);font-style:normal}
.job__reply{margin-top:0.5rem}
.job__reply > summary{cursor:pointer;font-size:var(--step--1);color:var(--brand);
display:inline-flex;align-items:center;gap:0.4em;min-height:2.75rem}
.job__reply textarea{width:100%;margin:0.4rem 0;min-height:5rem}
.job__flag{background:var(--brand);color:#fff;border-radius:99em;
padding:0.05em 0.5em;font-size:0.85em}
/* ── Domain availability (SPEC §6) ───────────────────────────────────────────
Three tones, and UNKNOWN gets its own — it must never look like the green one. */
.domain-check{display:flex;gap:0.55em;align-items:flex-start;margin:0.5rem 0 0;
font-size:var(--step--1);line-height:1.5}
.domain-check__dot{flex:none;width:0.6em;height:0.6em;border-radius:50%;margin-top:0.45em}
.domain-check--ok{color:#1d6b3f}
.domain-check--ok .domain-check__dot{background:#1d6b3f}
.domain-check--no{color:var(--brand)}
.domain-check--no .domain-check__dot{background:var(--brand)}
.domain-check--warn{color:var(--text-muted)}
.domain-check--warn .domain-check__dot{background:var(--text-muted)}
/* ── What we commit to, said before they commit (SPEC §4.1, D-30) ──────────── */
.promises{list-style:none;padding:0;margin:0 0 var(--space-l);display:grid;gap:0.5rem}
.promises li{position:relative;padding-left:1.5em;color:var(--text-muted);
font-size:var(--step--1);line-height:1.55}
.promises li::before{content:"✓";position:absolute;left:0;top:0;color:var(--brand);
font-weight:700}
.promises strong{color:var(--ink)}
.section-page{padding-top:var(--space-l)}
/* ── "Vaše služby" (SPEC §13, D-37) ─────────────────────────────────────────── */
.services__title{font-family:var(--font-display);font-size:var(--step-1);
margin:var(--space-m) 0 0.4rem}
.mailboxes{list-style:none;padding:0;margin:0 0 0.8rem;display:grid;gap:0.4rem}
.mailboxes li{display:flex;flex-wrap:wrap;gap:0.6em;align-items:baseline;
padding:0.5rem 0.75rem;border:1px solid var(--rule);border-radius:var(--radius);
background:var(--surface)}
/* The numbers before the click (SPEC §4). Hesitation at approval is the most expensive kind. */
.actions__preview{margin:0.35rem 0 0;font-size:var(--step--1);color:var(--text-muted)}
.actions__preview strong{color:var(--ink)}
/* ── Domain alternatives (SPEC §6, D-39) ─────────────────────────────────── */
.alts{margin-top:0.6rem;padding:0.8rem 1rem;border:1px solid var(--rule);
border-radius:var(--radius);background:var(--surface)}
.alts__head{margin:0 0 0.5rem;font-size:var(--step--1)}
.alts__list{list-style:none;padding:0;margin:0;display:grid;gap:0.45rem}
.alts__list li{display:flex;flex-wrap:wrap;gap:0.6em;align-items:baseline}
.alts__pick{border:1px solid var(--brand);background:transparent;color:var(--brand);
border-radius:99em;padding:0.25em 0.9em;font:inherit;font-weight:600;cursor:pointer;
min-height:2.25rem}
.alts__pick:hover{background:var(--brand);color:#fff}
.alts__why{font-size:var(--step--1);color:var(--text-muted);flex:1 1 14rem}
.alts__pending{margin-top:0.5rem;opacity:0.75}
/* ── Provisioning steps in the console (SPEC §7, D-41) ────────────────────── */
.job__step{margin:0.3rem 0;font-size:var(--step--1);padding-left:0.7em;
border-left:2px solid var(--rule)}
.job__step--done{border-left-color:#1d6b3f}
.job__step--failed{border-left-color:var(--brand);color:var(--brand)}
.job__step--skipped{opacity:0.65}
/* 🚨 `[hidden]` MUST WIN. The UA stylesheet gives `[hidden]{display:none}`, but ANY author rule
setting `display` on the same element overrides it — and then JavaScript that sets `el.hidden`
silently does nothing. Measured 2026-08-11: the new intake steps used `class="step"`, which
already existed in this file as `.step{display:flex}` for the process stepper, so every step
stayed visible while the JS believed it had hidden them. The classes were renamed (that was the
root fix); this rule stops the NEXT collision from being invisible. */
[hidden]{display:none !important}
/* ── Intake steps, summary and the terms overlay — SPEC §5.1/§5.6, `D-54` ────────────
Every rule here styles something JavaScript reveals. With JS off none of these elements
is shown (the nav is `hidden`, the progress list is empty), so the form falls back to the
plain page it has always been — §17 forbids a build chain and this adds none. */
.formsteps{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0 0 1.6rem;padding:0;
font:500 .82rem/1.3 var(--font-body)}
/* `F-124` — on a phone the four labelled chips measured 149+88+150+98 = **485px** of content in
**342px** of room, so they wrapped 2+2 and ate two lines of the most valuable screen a customer
sees. Below 30rem the chips become NUMERIC and fit one line.
The words are not deleted, they move: each step's own `