/* ===================================================================== Measure — the four funnel pages, in v2's design language. site/start.html · site/portfolio.html · site/site-intel.html site/water-leads.html --------------------------------------------------------------------- THIS REPLACES tokens.css + funnel.css ON THOSE FOUR PAGES ONLY. funnel.css stays in the repo; nothing links it any more. WHY IT EXISTS. Those four pages are where a visitor lands from v2's router cards, so the old sheet made the site change its clothes at the exact moment somebody converted: v2's white ground, big tight headings and pill buttons on one side of a click; v1's mono micro-labels, uppercase h1s and 660px column on the other. THE VOCABULARY IS UNCHANGED. Every class funnel.css styled is styled here under the same name and the same meaning — the markup on those pages did not move, so a rule that used to draw an option row still draws an option row. Only the drawing changed. PALETTE: THREE COLOURS AND A WHITE PAGE. white #ffffff the ground for nearly all of it navy #16324e the logo's navy — structure, headings, labels, rules sky #35c3f3 secondary accent, focus, "measured / live" neon #c9f542 the button that commits, and nothing else Neutrals (ink, grey, hairline, wash) are v2.css's own values, so the two sheets agree on what a hairline is. No fifth hue is introduced — in particular the five per-role rail colours the old .route carried are gone, and so is the amber .warnbox / .illus / .calhold used. EVERY TOKEN THIS FILE REFERENCES IS DEFINED IN THIS FILE. An undefined custom property is not a no-op: `color: var(--text)` with --text undefined makes the declaration invalid at computed-value time and hands `color` to inheritance, which is how white text on a white button shipped here. There is no var() below without a :root entry. (v2.css still has one of these — `.reyebrow { color: var(--rail) }`, and --rail is defined nowhere. Not fixed here; not this file.) SKY AND NEON ARE FILLS, NEVER TEXT. On white they measure 2.05:1 and 1.26:1. Where either has to speak as text it is --sky-ink (5.67:1) or --neon-ink on the neon fill (12.26:1). Body text is --gray, 5.76:1 on white and never below 5.27:1 on any tinted card in this sheet. AND IT IS NOT THIN. The shell is 1180px, options and result panels are two-up grids that span it, and sections are padded like v2's. The text itself stays at a readable measure — a wide page is made of wide furniture, not wide paragraphs. ===================================================================== */ :root{ /* ---- the three, plus white ---- */ --white:#ffffff; --navy:#16324e; --sky:#35c3f3; --neon:#c9f542; --neon-ink:#16290a; /* the only ink readable on neon */ /* ---- tints and inks derived from those three. No new hues. ---- */ --sky-ink:#0d6f92; /* sky, taken down until it reads as text */ --sky-wash:#eaf8fe; --sky-line:#b6e6fa; --navy-wash:#f2f5f8; --navy-line:#ccd5de; --navy-line-2:#a9b8c6; --navy-glow:rgba(22,50,78,.14); --sky-glow:rgba(53,195,243,.30); /* ---- neutrals, the same values v2.css uses ---- */ --ink:#0b0b0f; --gray:#5f6675; /* 5.76:1 white, 5.27:1 on the darkest wash */ --line:#e8eaef; --wash:#f4f6f9; --field-line:#d7dce4; --muted:#7c8595; /* disabled + placeholder ONLY, never prose */ /* ---- type ---- */ --geo:"Poppins","Sofia Pro","Century Gothic","Avenir Next", "Segoe UI Variable Display",system-ui,sans-serif; --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace; /* ---- measure and shell ---- */ --shell:1180px; --measure:46rem; /* prose only. Everything else spans the shell */ --r-card:22px; --r-tile:16px; --r-field:14px; --sh-1:0 1px 2px rgba(11,11,15,.04), 0 12px 30px rgba(11,11,15,.05); --sh-2:0 2px 5px rgba(11,11,15,.06), 0 24px 52px rgba(11,11,15,.09); color-scheme:light; } *{margin:0;padding:0;box-sizing:border-box} /* 17.5px base, set as a percentage rather than a px value so a reader who has raised their browser default still gets it raised. Every size below is in rem, so the whole page scales with this one number. */ html{font-size:109.375%;-webkit-text-size-adjust:100%} body{ background:var(--white); color:var(--ink); font-family:var(--geo); font-size:1rem;line-height:1.55; -webkit-font-smoothing:antialiased; /* One breath of sky behind the top of the page and nothing else. The ground is white, full bleed, all the way out. */ background-image:radial-gradient(ellipse 80% 34% at 50% -8%, rgba(53,195,243,.10),transparent 72%); background-repeat:no-repeat;background-attachment:fixed; min-height:100vh; display:flex;flex-direction:column; } a{color:var(--sky-ink);text-decoration-color:rgba(13,111,146,.4); text-underline-offset:2px} a:hover{text-decoration-color:var(--sky-ink)} /* Focus is restyled, never removed. Navy ring so it stays legible against white, neon, sky and navy alike; the sky halo is the accent. */ :is(a,button,input,select,textarea,summary):focus-visible{ outline:2px solid var(--navy);outline-offset:2px; box-shadow:0 0 0 5px var(--sky-glow)} h1,h2,h3{text-wrap:balance} .hide{display:none !important} /* THE SHELL IS WIDE. 660px in the middle of a 1900px screen was the whole complaint. */ .wrap{width:100%;max-width:var(--shell);margin:0 auto; padding:0 clamp(20px,4vw,48px)} /* ------------------------------------------------------------ chrome v2's nav is a centred white pill floating over the page, not a bar welded to the top. Same here, sticky rather than fixed because a funnel is a document you scroll to the end of. NOTHING ABOVE THIS GETS `overflow: hidden`. An ancestor that clips becomes the containing block for position:sticky, and a container that does not itself scroll cannot hold anything stuck — the pill would silently degrade to a static element and scroll away. */ .ftop{position:sticky;top:0;z-index:40;padding:14px 0 12px; background:linear-gradient(var(--white) 46%,rgba(255,255,255,0))} .ftop .wrap{display:flex;align-items:center;justify-content:space-between; gap:20px;width:fit-content;max-width:calc(100% - 32px); padding:9px 20px 9px 22px; background:rgba(255,255,255,.92);backdrop-filter:blur(12px); border:1px solid var(--line);border-radius:999px; box-shadow:0 1px 2px rgba(11,11,15,.04),0 10px 24px rgba(11,11,15,.06)} .wordmark{display:inline-flex;align-items:center} .wordmark img{height:19px;display:block} .ftag{font-size:.66rem;font-weight:700;letter-spacing:.14em; line-height:1.25;text-transform:uppercase;color:var(--gray); text-align:right} main{flex:1 1 auto;padding:clamp(30px,4.4vw,54px) 0 clamp(64px,7vw,104px); min-height:0} footer.ffoot{border-top:1px solid var(--line);margin-top:auto; padding:clamp(34px,4vw,48px) 0 clamp(44px,5vw,64px); font-size:.88rem;color:var(--gray)} footer.ffoot a{color:var(--gray);text-decoration:none;font-weight:500} footer.ffoot a:hover{color:var(--ink)} footer.ffoot .legal{font-size:.82rem;line-height:1.6;margin-top:14px; color:var(--gray);max-width:var(--measure)} /* ---------------------------------------------------------- progress Segments, not a percentage bar — five ticks are five questions, and a fraction would imply a completion estimate nobody is making. */ .prog{padding:2px 0 26px;max-width:var(--measure)} .prog .lbl{font-size:.7rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--gray);margin-bottom:10px} .ticks{display:flex;gap:6px;list-style:none} .ticks li{flex:1 1 0;height:5px;border-radius:99px; background:var(--line);transition:background .2s} .ticks li.done{background:var(--navy)} .ticks li.now{background:var(--sky)} /* -------------------------------------------------------------- type */ .eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--navy);margin-bottom:14px} .eyebrow.quiet{color:var(--gray)} /* Big, tight, sentence case — v2's headline treatment. The old sheet set every h1 in uppercase, which is v1's instrument voice. */ h1{font-size:clamp(2rem,4.4vw,3.15rem);font-weight:700; letter-spacing:-.032em;line-height:1.02;margin-bottom:14px; max-width:22ch;text-transform:none} h2{font-size:clamp(1.35rem,2.3vw,1.85rem);font-weight:700; letter-spacing:-.026em;line-height:1.1;margin-bottom:10px; text-transform:none} h3{font-size:1.1rem;font-weight:700;letter-spacing:-.015em; margin-bottom:6px} .sub{color:var(--gray);font-size:1.06rem;line-height:1.5; max-width:var(--measure);margin-bottom:30px} .hint{color:var(--gray);font-size:.95rem;line-height:1.6; max-width:var(--measure)} .hint.tight{margin-top:10px} .faint{color:var(--gray)} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} /* ------------------------------------------------------------- steps */ .step{display:none} .step.on{display:block;animation:stepin .24s ease-out} @keyframes stepin{from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none}} /* Each screen moves focus to its heading so a screen reader hears the question before landing in the answer. That focus is programmatic and the heading is not interactive, so it draws no ring — a box round the h1 of every screen reads as an error, not as a cursor. Every control the reader can actually reach keeps its own. */ .step:focus,.step [tabindex="-1"]:focus{outline:none;box-shadow:none} /* ----------------------------------------------------------- options The whole row is the target. The real input stays in the DOM and keeps every keyboard behaviour radios and checkboxes already have — arrow keys, space, group semantics — it is just moved under the mark it draws. Two-up above ~24rem of room, so a seven-option question fills the shell instead of running down a ribbon. */ /* `min(24rem,100%)` and not a bare `24rem`: auto-fit will not shrink a track below its stated minimum, so on a 375px phone every option row laid out 420px wide and hung 85px past the edge of its container. The min() clamps the floor to the container once the container is the smaller of the two. */ .opts{display:grid;gap:12px;margin-bottom:8px; grid-template-columns:repeat(auto-fit,minmax(min(24rem,100%),1fr))} .opt{position:relative;display:flex;align-items:flex-start;gap:14px; padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-tile); background:var(--white);cursor:pointer;box-shadow:var(--sh-1); transition:background .16s,border-color .16s,box-shadow .16s,transform .16s} .opt:hover{border-color:var(--sky-line);transform:translateY(-2px); box-shadow:var(--sh-2)} .opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0} .opt .mark{flex:0 0 auto;width:20px;height:20px;margin-top:2px; border:1.5px solid var(--navy-line-2);background:var(--white); position:relative;transition:border-color .16s,background .16s} .opt input[type=radio]~.mark{border-radius:50%} .opt input[type=checkbox]~.mark{border-radius:6px} .opt input:checked~.mark{border-color:var(--navy);background:var(--navy)} .opt input[type=radio]:checked~.mark:after{content:"";position:absolute; inset:4px;border-radius:50%;background:var(--sky)} .opt input[type=checkbox]:checked~.mark:after{content:"";position:absolute; left:6px;top:2px;width:5px;height:10px;border:solid var(--sky); border-width:0 2px 2px 0;transform:rotate(42deg)} .opt input:checked~.ot .on{color:var(--ink)} .opt:has(input:checked){border-color:var(--navy);background:var(--navy-wash); box-shadow:0 1px 2px rgba(11,11,15,.05),0 10px 26px var(--navy-glow)} /* The real input is off-screen, so the ring has to be drawn by the row. :focus-within rather than :focus-visible — a radio reached by arrow key is focused programmatically and must still show where it is. */ .opt:focus-within{outline:2px solid var(--navy);outline-offset:2px; box-shadow:0 0 0 5px var(--sky-glow)} .opt .ot{min-width:0} .opt .on{display:block;font-size:1rem;font-weight:500;color:var(--ink); line-height:1.35;letter-spacing:-.01em} .opt .ow{display:block;font-size:.86rem;color:var(--gray);line-height:1.45; margin-top:4px} /* ------------------------------------------------------------ fields */ .field{display:block;margin-bottom:18px} .fl{display:block;font-size:.72rem;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--navy);margin-bottom:9px} .field input,.field textarea{width:100%;font:400 1rem/1.4 var(--geo); padding:15px 17px;border:1px solid var(--field-line); border-radius:var(--r-field);background:var(--white);color:var(--ink); transition:border-color .16s,box-shadow .16s} .field textarea{min-height:112px;resize:vertical} .field input::placeholder,.field textarea::placeholder{color:var(--muted); opacity:1} .field input:focus,.field textarea:focus{outline:none; border-color:var(--sky);box-shadow:0 0 0 4px var(--sky-glow)} .field .fh{font-size:.86rem;color:var(--gray);margin-top:8px; max-width:var(--measure)} .field.bad input,.field.bad textarea{border-color:var(--navy); box-shadow:0 0 0 4px var(--navy-glow)} /* -------------------------------------------------------- validation One live region per step, and it says which answer is missing in the words of the question. It is a filled navy bar rather than a red one: the palette here is three colours, and a solid dark slab under the question stops a reader as hard as a red outline does. */ .err{display:none;margin:16px 0 0;padding:14px 18px; border-radius:var(--r-tile);font-size:.95rem;font-weight:500; background:var(--navy);color:var(--white);max-width:var(--measure)} .err.on{display:block} /* --------------------------------------------------------------- nav */ .fnav{display:flex;flex-direction:column;gap:14px;margin-top:30px} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; font:600 1rem/1 var(--geo);letter-spacing:-.005em; padding:17px 30px;border-radius:999px; text-decoration:none;cursor:pointer;border:1px solid transparent; background:var(--neon);color:var(--neon-ink);width:100%; box-shadow:0 8px 20px rgba(22,50,78,.12); transition:filter .18s,transform .18s,box-shadow .18s,background .18s} .btn:hover{filter:brightness(1.04);transform:translateY(-1px); box-shadow:0 12px 28px rgba(22,50,78,.18)} .btn[disabled],.btn[disabled]:hover{background:var(--wash); color:var(--muted);border-color:var(--line);cursor:default; filter:none;transform:none;box-shadow:none} .btn[aria-busy=true]{background:rgba(201,245,66,.45);color:var(--neon-ink); cursor:progress;filter:none;transform:none} .btn.ghost{background:var(--white);color:var(--navy); border-color:var(--navy-line);font-weight:600;box-shadow:none} .btn.ghost:hover{background:var(--navy-wash);border-color:var(--navy-line-2); filter:none} .btn.auto{width:auto} .back{align-self:flex-start;background:none;border:0;cursor:pointer; font:600 .88rem/1 var(--geo);color:var(--gray);padding:10px 2px; text-decoration:none;transition:color .16s} .back:hover{color:var(--ink)} .back:before{content:"\2190";margin-right:9px;color:var(--sky-ink)} /* ------------------------------------------------------------- cards */ .card{background:var(--white);border:1px solid var(--line); border-radius:var(--r-card);padding:clamp(22px,2.6vw,34px); margin-bottom:20px;box-shadow:var(--sh-1)} .card>:last-child{margin-bottom:0} /* Route cards on /start — v2's router: the same white ground, hairline and radius as its cards, so crossing from v2.html to start.html is not a change of clothes. THE FIVE ROLE HUES ARE GONE. The old sheet gave each audience its own rail colour (#2460a8, #0f7a5a, #a75510, #6b3fa0, #5a6d80) — five colours this palette does not have. The audience is still named in the eyebrow, which is where v2 puts a category; it is just said in navy like every other label on the page. The `.route[data-role=…]` selectors are therefore intentionally absent rather than forgotten, and no rule below reads a `--role` variable, so nothing depends on one being defined. */ .routes{display:grid;gap:18px;margin:28px 0 0;list-style:none; grid-template-columns:repeat(2,minmax(0,1fr))} .routes li{display:flex} .route{display:flex;flex-direction:column;align-items:flex-start; width:100%;padding:28px 28px 24px; border:1px solid var(--line);border-radius:var(--r-card); background:var(--white);text-decoration:none;color:var(--ink); cursor:pointer;box-shadow:var(--sh-1); transition:transform .22s,box-shadow .22s,border-color .22s} .route:hover{border-color:var(--navy-line);transform:translateY(-4px); box-shadow:var(--sh-2)} .route .rt{display:block;width:100%;min-width:0} .route .rr{display:block;font-size:.7rem;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--navy); margin-bottom:10px} .route .rn{display:block;font-size:1.2rem;font-weight:700; letter-spacing:-.02em;line-height:1.2} .route .rw{display:block;font-size:.93rem;color:var(--gray);line-height:1.5; margin-top:8px;max-width:34rem} .route .rg{flex:0 0 auto;margin-top:22px; display:inline-grid;place-items:center;width:38px;height:38px; border-radius:999px;background:var(--sky-wash);color:var(--sky-ink); font-size:1.05rem;line-height:1; transition:background .22s,transform .22s,color .22s} .route:hover .rg{background:var(--navy);color:var(--white); transform:translateX(5px)} /* "This is the one the product is built around" is said with weight, not with a second hue. */ .route.primary{border-color:var(--navy-line); box-shadow:0 2px 6px rgba(22,50,78,.10),0 22px 50px rgba(22,50,78,.14)} .route.primary .rn{font-size:1.3rem} .route.primary .rg{background:var(--neon);color:var(--neon-ink)} /* ------------------------------------------------------------- notes */ .note,.fresh,.warnbox{border-radius:var(--r-tile); padding:20px 22px;margin:20px 0;font-size:.95rem;line-height:1.6; border:1px solid var(--line);background:var(--white);color:var(--gray)} .note strong,.fresh strong,.warnbox strong{color:var(--ink);font-weight:600} .fresh{border-color:var(--sky-line);background:var(--sky-wash)} /* Amber is not in this palette. A caveat is a navy rule down the side — the same weight the old amber had, in a colour the page owns. */ .warnbox{border-color:var(--navy-line);background:var(--navy-wash); border-left:3px solid var(--navy)} .note>:last-child,.fresh>:last-child,.warnbox>:last-child{margin-bottom:0} .note p+p,.fresh p+p,.warnbox p+p{margin-top:11px} /* The exact sentence the engine is allowed to say, set as a reading rather than as prose, so it is quoted and not paraphrased. */ .claim{border-left:3px solid var(--sky);padding:4px 0 4px 18px; margin:18px 0;font-size:1.05rem;color:var(--ink);line-height:1.45; letter-spacing:-.01em;max-width:var(--measure)} .claim .src{display:block;font-size:.68rem;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--gray); margin-top:10px} /* Anything that is arithmetic on the reader's own inputs rather than a forecast wears this. It is not a footnote and it is not shrunk. */ .illus{border:1px dashed var(--navy-line-2);border-radius:var(--r-tile); padding:22px 24px;margin:20px 0;background:var(--navy-wash)} .illus .tag{display:inline-block;font-size:.66rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--white); background:var(--navy);border-radius:999px;padding:5px 12px; margin-bottom:14px} .illus .row{display:flex;justify-content:space-between;gap:18px; align-items:center;padding:11px 0;border-bottom:1px solid var(--navy-line); font-size:.95rem} .illus .row:last-of-type{border-bottom:0} .illus .row b{font-family:var(--mono);font-weight:600;color:var(--navy); font-variant-numeric:tabular-nums;text-align:right} .illus .foot{font-size:.88rem;color:var(--gray);margin-top:12px; line-height:1.6;max-width:var(--measure)} /* "This is multiplication, nothing else" is the sentence that keeps the calculator honest, so it is not left inheriting the grey. */ .illus .foot strong{color:var(--ink);font-weight:600} .illus input[type=number]{width:4.6em;font:600 .95rem/1.3 var(--mono); padding:7px 10px;border:1px solid var(--field-line);border-radius:10px; background:var(--white);color:var(--ink);text-align:right} /* ------------------------------------------------------ answer recap */ .recap{border:1px solid var(--line);border-radius:var(--r-card); overflow:hidden;margin:0 0 20px;background:var(--white); box-shadow:var(--sh-1)} .recap .r{display:flex;justify-content:space-between;gap:18px; padding:14px 22px;border-bottom:1px solid var(--line);font-size:.92rem} .recap .r:last-child{border-bottom:0} .recap .rk{font-size:.68rem;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--gray);flex:0 0 auto; padding-top:.22em} .recap .rv{color:var(--ink);text-align:right;min-width:0; word-break:break-word} /* -------------------------------------------------- verdict / status */ .verdict{border:1px solid var(--line);border-radius:var(--r-card); padding:clamp(24px,2.8vw,36px);margin-bottom:22px;background:var(--white); box-shadow:var(--sh-1)} .verdict.fit{border-color:var(--sky-line);background:var(--sky-wash)} .verdict.hold{border-color:var(--navy-line);background:var(--navy-wash)} .verdict .vk{font-size:.72rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--navy);margin-bottom:12px} .verdict h2{margin-bottom:12px} .verdict p{font-size:1rem;color:var(--gray);line-height:1.55; max-width:var(--measure)} .verdict p+p{margin-top:11px} /* ----------------------------------------------------- measured hook The ONLY place a real, computed number may ever be rendered on these pages. It is hidden until measureHook() fills it, and measureHook() refuses to fill it without a stated basis. See funnel.js. */ .hook{border:1px solid var(--sky-line);border-radius:var(--r-card); padding:24px 26px;margin:0 0 20px;background:var(--sky-wash)} .hook .hk{font-size:.72rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--sky-ink);margin-bottom:10px} .hook .hv{font:700 2.6rem/1 var(--geo);color:var(--navy); font-variant-numeric:tabular-nums;letter-spacing:-.035em} .hook .hb{font-size:.88rem;color:var(--gray);margin-top:12px;line-height:1.6; max-width:var(--measure)} /* ----------------------------------------------------------- booking */ .cal{margin-top:8px;max-width:900px} .cal iframe{width:100%;height:min(78vh,760px);border:1px solid var(--line); border-radius:var(--r-card);background:var(--white);display:block; box-shadow:var(--sh-1)} .calhold{border:1px dashed var(--navy-line-2);border-radius:var(--r-card); padding:26px;background:var(--navy-wash);max-width:var(--measure)} .calhold .tag{display:inline-block;font-size:.66rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--white); background:var(--navy);border-radius:999px;padding:5px 12px; margin-bottom:14px} .calhold code{font-family:var(--mono);font-size:.86rem;color:var(--sky-ink); background:var(--sky-wash);border:1px solid var(--sky-line); border-radius:7px;padding:2px 7px;word-break:break-all} /* ----------------------------------------------------------- details */ details.more{border-top:1px solid var(--line);margin-top:26px; padding-top:20px} details.more summary{cursor:pointer;list-style:none; font-size:.8rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--navy);transition:color .16s} details.more summary::-webkit-details-marker{display:none} details.more summary:before{content:"\25B8";display:inline-block; margin-right:10px;color:var(--sky-ink)} details.more[open] summary:before{content:"\25BE"} details.more summary:hover{color:var(--sky-ink)} details.more .body{margin-top:16px} details.more .body p+p{margin-top:12px} ul.dashed{list-style:none;margin:14px 0;display:grid;gap:10px} ul.dashed li{position:relative;padding-left:20px;font-size:.94rem; color:var(--gray);line-height:1.55;max-width:var(--measure)} ul.dashed li:before{content:"";position:absolute;left:0;top:.62em;width:10px; height:2px;border-radius:2px;background:var(--sky)} ul.dashed li b{color:var(--ink);font-weight:600} /* ===================================================================== THE WIDE SCREEN — where "don't make them thin" is actually answered. The shell is already 1180px, but a column of full-width blocks inside it is still a ribbon. So above 900px a live step becomes a two-column grid: everything spans it by default, and the pieces that read fine at half width — the name/company/email fields, the answer recap, the what-the-call-is card — take one column each. A question screen fills the page with option rows two-up; the result screen puts the recap beside the card instead of stacking them a thousand pixels wide. `.step` stays display:none and only `.step.on` becomes the grid, so the funnel's own state machine is untouched and only the visible step is ever laid out. */ @media(min-width:900px){ .step.on{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px;align-content:start;align-items:start} .step.on>*{grid-column:1 / -1} .step.on>.field,.step.on>.recap,.step.on>.card{grid-column:auto} .step.on>.card,.step.on>.recap{margin-bottom:0} /* A step with ONE field is the case the two-column rule gets wrong: it parks a lone box in the left half and leaves the right half of a 1600px screen empty, which is the thin-page complaint with extra steps. `:only-of-type` matches a .field label that is the only