/* THE LANDING PAGE, REBUILT (2026-09-12) — the stylesheet for `landing_v2.html.j2`, ported from the Claude Design handoff in design/claude_design_landing_v2/README.md (option 3a at 1440, 5a at 390). ONE FACE: INTER, since 2026-09-12, declared by `app.css` (the shell's own face) and inherited by the reader sheet. The handoff's Onest was self-hosted here until then — see the note under the tokens. TWO TOKEN SETS ON ONE ROOT. The design's `--asw-*` tokens are the page's own. The `--bv-*` tokens are declared alongside them, mapped to the same palette, because `landing-reader.css` (the sample reader, the sticky ask, the tables) and the customer window's markup were written against them on the page at `/` — one root id, two vocabularies, one palette. NO `oklch()`: the sRGB fallbacks from the handoff, so the contrast QA can read every colour. Contrast, measured there: white on the accent 5.3:1; THE DARK GROUND IS CHARCOAL AGAIN (Review 3, 2026-09-13; navy for a day from option 2 of design/landing-v2-looks.html). The accent is the design's indigo again and the buttons carry none: #17191d on white 17.5:1; #a3a9b4 on #17191d 7.0:1; #7c838f on #17191d 4.6:1; #3a41a8 on the tint 6.8:1; #5b6470 on #f7f9fc 5.7:1. The light ground was #f3f6fb for an hour and was lightened on request ("still shading but not as much"). Captions were #8a919c in the handoff, which is 2.8-3.2:1 on the light grounds; `qa_landing` holds every text style to 4.5, so they are #666e7a — 4.54:1 on the accent tint, the darkest of the four light grounds they sit on, and 5.15:1 on white. */ /* THE FACE IS INTER SINCE 2026-09-12 (option 2 of design/landing-v2-looks.html): `app.css` declares it, and this page loads `app.css`. Onest, the handoff's face, stays on disk with its licence; nothing loads it. */ #asw-focused-hero-landing.lv2 { --asw-dark: #17191d; --asw-dark-2: #1f2228; --asw-on-dark: #f4f5f7; --asw-on-dark-strong: #ffffff; --asw-on-dark-muted: #a3a9b4; --asw-on-dark-soft: #d9dce3; --asw-on-dark-faint: #7c838f; --asw-hair-dark: rgba(255,255,255,.1); --asw-hair-dark-soft: rgba(255,255,255,.08); --asw-hair-dark-strong: rgba(255,255,255,.14); /* THE HORIZON GRID's line colour — the accent as it reads on the dark ground, at the weight the mockup settled on. A token because the two gradients below must agree, and because this is the one number to turn if it ever wants to be quieter. NEUTRAL GRAY AT 7% SINCE 2026-10-01 ("Halfway, light gray", the fifth frame of `design/hero-grid-full/`), where it was the accent at 20%. The grid now runs twice as far down the hero, and at the old ink a longer grid is a louder one; light gray keeps it a texture behind the headline. */ --asw-horizon: rgba(255, 255, 255, .07); --asw-glass: rgba(255,255,255,.06); --asw-bg: #f7f9fc; --asw-card: #ffffff; --asw-card-alt: #f8fafd; --asw-ink: #17191d; --asw-muted: #5b6470; --asw-faint: #626a76; --asw-line: #dfe5ef; --asw-line-soft: #eaeff6; --asw-line-strong: #cfd8e6; --asw-accent: #4b52c4; --asw-accent-hover: #3f45b0; --asw-accent-on-dark: #b7bff4; --asw-accent-focus: #8b93e8; --asw-accent-tint: #eef0fb; --asw-accent-tint-border: #d6daf5; --asw-accent-text: #3a41a8; --asw-ring: 0 0 0 3px rgba(75, 82, 196, .35); /* The page at `/`'s vocabulary, mapped, for the shared reader and window. */ --bv-paper: #f7f9fc; --bv-ink: #17191d; --bv-muted: #5b6470; --bv-line: #dfe5ef; --bv-soft: #eaeff6; --bv-accent: #4b52c4; --bv-card: #ffffff; --bv-button: #17191d; --bv-on-button: #ffffff; --bv-glass: #eaeff6; --bv-gutter: 40px; --asw-selected: #eef0fb; --asw-section-alt: #ffffff; --asw-chat-bubble: #17191d; --asw-chat-text: #ffffff; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15.5px; line-height: 1.6; color: var(--asw-ink); background: var(--asw-bg); -webkit-font-smoothing: antialiased; } #asw-focused-hero-landing.lv2 *, #asw-focused-hero-landing.lv2 *::before, #asw-focused-hero-landing.lv2 *::after { box-sizing: border-box; } /* `font-family: inherit` ON THE HEADINGS: `app.css` names a serif on `h1, h2` for the shell's pages, and inheritance alone does not reach past a rule that names the face — the first render drew the headline in Georgia. */ #asw-focused-hero-landing.lv2 h1, #asw-focused-hero-landing.lv2 h2, #asw-focused-hero-landing.lv2 h3 { margin: 0; font-family: inherit; text-wrap: balance; } #asw-focused-hero-landing.lv2 p { margin: 0; text-wrap: pretty; } /* `:not(.lv2-btn)`: the rule is 1-1-1 and `.lv2-btn`'s white is 1-1-0, so without it the nav's grey landed on the primary button — the same specificity collision CLAUDE.md records for `.lp-nav-links > a`. Measured by `qa_landing` case 1: #a3a9b4 on the accent, 2.69:1. */ #asw-focused-hero-landing.lv2 a:not(.lv2-btn) { color: inherit; } /* The phone's sticky button is an `a` too, and the rule above (1-2-1) beats the reader sheet's colour on it (1-1-0); this one matches its weight. */ #asw-focused-hero-landing.lv2 a.asw-stickycta-btn { color: var(--bv-on-button); } #asw-focused-hero-landing.lv2 button, #asw-focused-hero-landing.lv2 input { font: inherit; } /* NO CARET ON TEXT THAT CANNOT BE EDITED (on request, 2026-09-12: "when clicking on text there is a blinking cursor"). Only the two business-name fields take a caret; anything else a browser lands a caret on — a focused heading, a clicked paragraph under caret browsing — shows none. */ #asw-focused-hero-landing.lv2, #asw-focused-hero-landing.lv2 * { caret-color: transparent; } #asw-focused-hero-landing.lv2 input, #asw-focused-hero-landing.lv2 textarea { caret-color: auto; } #asw-focused-hero-landing.lv2 :focus-visible { outline: 2px solid var(--asw-accent-focus); outline-offset: 2px; } #asw-focused-hero-landing.lv2 strong { font-weight: 600; } /* THE DOCUMENT'S OWN GROUND IS DARK (2026-09-12, from a phone: "scrolling down all the way there is just white space"). The page ends on a dark footer and begins on a dark banner, but the canvas behind the document was the shell's light ground — and iOS Safari's rubber-band overscroll shows the canvas past either end, so pulling past the footer revealed a white field under a dark page. The canvas takes the page's dark, so both bounces read as more of the band they sit against; the page's own sections paint their light grounds themselves. */ body.lv2-page { background: #17191d; } /* THE SHELL'S BETA BAR, DARK ON THIS PAGE ONLY (handoff §0; decision 1 in the template's note). The bar's markup is `base.html.j2`'s; these rules win over `app.css` on specificity. */ body.lv2-page .betabar { background: #1f2228; color: #d9dce3; border-bottom: 1px solid rgba(255,255,255,.08); padding: 9px 20px; font-size: 12.5px; font-weight: 500; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } body.lv2-page .betabar::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #b7bff4; margin-right: 9px; vertical-align: 1px; } body.lv2-page .betabar strong { color: #d9dce3; font-weight: 500; } body.lv2-page .betabar .betabar-sep { opacity: .4; } body.lv2-page .betabar .betabar-tail { color: #a3a9b4; font-weight: 400; } /* GROUNDS. `.lv2-dark` is any dark band; the hero's window hangs out of the bottom of the first one into the light page. */ #asw-focused-hero-landing .lv2-dark { background: var(--asw-dark); color: var(--asw-on-dark); } #asw-focused-hero-landing .lv2-light { position: relative; z-index: 0; background: var(--asw-bg); padding-top: 250px; } /* NAV (handoff §1) */ /* The nav is full-bleed dark with its contents on the 1200 container: the padding does the centring, so the ground runs edge to edge. */ #asw-focused-hero-landing .lv2-nav { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 18px max(40px, calc((100% - 1200px) / 2 + 40px)); } #asw-focused-hero-landing .lv2-wordmark { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--asw-on-dark-strong); text-decoration: none; } #asw-focused-hero-landing .lv2-wordmark span, #asw-focused-hero-landing .lv2-window-brand span { color: var(--asw-accent-on-dark); } #asw-focused-hero-landing .lv2-nav-items { display: flex; align-items: center; gap: 28px; font-size: 14px; color: var(--asw-on-dark-muted); } /* `:not(.lv2-btn)` on the min-height too: this rule is 1-1-1 and the nav button's own height is 1-1-0, so the 24px target size here had been overriding the button's 36px (then 40px) since Review 2 — found by QA on 2026-09-12, the button measuring 25px tall. */ #asw-focused-hero-landing .lv2-nav-items a { display: inline-flex; align-items: center; text-decoration: none; } #asw-focused-hero-landing .lv2-nav-items a:not(.lv2-btn) { min-height: 24px; } #asw-focused-hero-landing .lv2-nav-items a:not(.lv2-btn):hover { color: var(--asw-on-dark-strong); } /* BUTTONS */ #asw-focused-hero-landing .lv2-btn, #asw-focused-hero-landing .bv-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 22px; border: 1px solid #efe9dc; border-radius: 8px; background: #efe9dc; color: #17191d; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; } /* THE BUTTON CARRIES NO ACCENT (option 2 of design/landing-button.html, 2026-09-13: the blue "looked too AI"; sand, #efe9dc, from design/landing-button-2.html the same day): sand with charcoal text on the dark grounds, the page's ink with white text on the light ones. The accent stays for the small marks — "Says", the ring, the client's row, the kickers. */ #asw-focused-hero-landing .lv2-btn:hover, #asw-focused-hero-landing .bv-primary:hover { background: #e2dac8; border-color: #e2dac8; } #asw-focused-hero-landing .lv2-light .bv-primary, #asw-focused-hero-landing .lv2-light .lv2-btn, #asw-focused-hero-landing .asw-sample-reader .bv-primary { background: #17191d; border-color: #17191d; color: #ffffff; } #asw-focused-hero-landing .lv2-light .bv-primary:hover, #asw-focused-hero-landing .lv2-light .lv2-btn:hover, #asw-focused-hero-landing .asw-sample-reader .bv-primary:hover { background: #2a2e36; border-color: #2a2e36; } #asw-focused-hero-landing .lv2-btn--nav { min-height: 40px; padding: 0 20px; border-radius: 8px; font-size: 14.5px; font-weight: 500; } #asw-focused-hero-landing .asw-secondary, #asw-focused-hero-landing .lv2-btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1px solid var(--asw-line-strong); border-radius: 8px; background: var(--asw-card); color: var(--asw-ink); font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; } #asw-focused-hero-landing .asw-secondary:hover, #asw-focused-hero-landing .lv2-btn-secondary:hover { border-color: var(--asw-ink); } #asw-focused-hero-landing .bv-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; color: var(--asw-ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } #asw-focused-hero-landing .bv-logo { font-weight: 600; letter-spacing: -.01em; } #asw-focused-hero-landing .asw-kicker { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--asw-accent-text); } #asw-focused-hero-landing .asw-kicker small { font-size: 1em; } #asw-focused-hero-landing .lv2-kicker { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--asw-accent-text); } #asw-focused-hero-landing .lv2-kicker--dark { color: var(--asw-accent-on-dark); } /* HERO (handoff §2). THE WINDOW PEEKS AT THE FOLD (2026-09-12, on request: "make the white table appear at the very bottom of the initial top of fold"): the copy's top padding 100, its gaps 30, the proof line 68 above and 32 inside, the window 64 below it (96 for an hour, then "a few percent further up"), so at 1440x900 the window's top edge lands about 820px down — its chrome bar shows, the report does not. (Option 6 of design/landing-band.html had it at 813 an hour earlier.) */ /* `flow-root`, AND THIS IS THE WHOLE OVERLAP (Review 1, §1). The window is the hero's last child with a -300px bottom margin. Without a formatting context of its own, the hero has no bottom padding or border, so that margin COLLAPSES THROUGH the hero's bottom edge: the light block moves up 300px under a hero that is still as tall as the window's bottom, and the dark ground runs to the window's foot with the shadow smeared on the seam. `flow-root` keeps the margin inside, the hero's auto height ends 300px above the window's foot, and the window straddles the seam as designed. Not `overflow: hidden`, which would clip the window. */ #asw-focused-hero-landing .lv2-hero { position: relative; z-index: 1; display: flow-root; padding: 0 0 0; } /* SOMETHING HAPPENING ON THE BLACK (2026-09-19, on request) — option F of `design/hero-motion.html`, a faint grid running away from the top edge. `z-index: -1`, WHICH IS THE WHOLE TRICK. `.lv2-hero` already carries `z-index: 1`, so it is a stacking context; inside one, a negative child paints AFTER the element's own background and BEFORE its in-flow content. So the grid lies on the dark ground and the headline, the form and the assistant row all sit on top of it, with no z-index added to any of them. At `z-index: 0` it would paint over the copy instead — positioned descendants come after in-flow ones — and at no z-index it would do the same. `left: 0; right: 0`, NOT THE MOCKUP'S -25%. The rotation makes the rows spread as they approach, so the mockup let the layer hang past both edges to keep the corners full. On the real page that is a horizontal overflow, which is exactly the fault that cut the scorecard band at 320px on 2026-09-18 — and `.lv2-hero` cannot simply be clipped, because the report window deliberately hangs 200px out of its bottom. Held to the box instead, and the corners are covered by the mask fading out long before them. THE MASK IS WHAT MAKES IT A HORIZON rather than a grid on a page: the lines are at full strength against the top edge and gone by 72%, so the band ends in the dark rather than at a border. */ #asw-focused-hero-landing .lv2-hero::before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; /* RUN FURTHER DOWN THE PAGE (2026-09-19, on request) — "Gentle", the second of four frames at `design/hero-grid/`. 420px against 230, and the eye pushed back from 320px to 900. The grid now reaches from under the nav to the top of the headline, about twice what it covered. THE HEIGHT IS NOT WHAT DID IT, and the mock-up page keeps the proof: at `perspective(320px)` the eye is very near the plane, so the 230px that shipped showed only its compressed FAR end — which is the quiet horizon. Raising the height alone brings on the NEAR end of the same plane, whose verticals diverge steeply: at 450px they draw a fan of long diagonals straight across "When customers ask AI", and dropping the ink to a third does not save it. `design/hero-grid/4-naive.png` is that frame, kept deliberately so the obvious change is on record as tried. So the length is bought by moving the EYE, not the floor. At 900px the verticals run close enough to parallel to stay a texture over twice the distance. The cost, and it is a real one: the near eye is also what compressed the top rows, so the band under the nav is a little looser than it was. That trade is the whole of what the four frames were for. */ /* HALFWAY DOWN THE HERO (2026-10-01, on request) — "Halfway, light gray" in `design/hero-grid-full/`. The grid now reaches past the headline and fades out around the form, so the statistics still sit on plain dark. THE SAME TRADE AS ABOVE, TAKEN FURTHER: the length is bought with the EYE (900px -> 2400px), not the floor, so the verticals stay near parallel across the headline instead of fanning. The element is 260% of the hero because the tilt foreshortens it; what reaches the screen is a fraction of that, which is why the mask stops below are small percentages. */ height: 260%; pointer-events: none; background-image: linear-gradient(var(--asw-horizon) 1px, transparent 1px), linear-gradient(90deg, var(--asw-horizon) 1px, transparent 1px); background-size: 78px 46px; transform: perspective(2400px) rotateX(62deg); transform-origin: top center; /* FADED IN AS WELL AS OUT. The mockup ran the grid at full strength from its first pixel, which was right on the panel's top edge and read as the top edge. On the page the hero starts BELOW the nav, so a full-strength first row landed as a hard rule across the width — a seam under the nav rather than a horizon. Starting at nothing and reaching full a little under the join means the grid emerges out of the dark instead of beginning at a line. IN PIXELS SINCE 2026-09-19, WHERE IT USED TO BE 18%. A percentage here is of the ELEMENT'S OWN HEIGHT, so lengthening the grid would have carried the fade-in down with it and dragged the brightest rows away from the join — undoing the paragraph above by doing something that looks unrelated to it. 42px is what 18% of the old 230px was, so the top edge is what it always was and only the tail moved. The fade-OUT stays a percentage on purpose: that one SHOULD travel with the length. 9% / 20% of the 260% element is "full until the headline's foot, gone by the form" on screen — percentages of the TILTED layer, not of the hero. */ -webkit-mask-image: linear-gradient(transparent, #000 42px, #000 9%, transparent 20%); mask-image: linear-gradient(transparent, #000 42px, #000 9%, transparent 20%); animation: lv2-horizon 9s linear infinite; } /* One row of the grid per cycle, so the loop is seamless: the travel and the vertical `background-size` are the same 46px. */ @keyframes lv2-horizon { from { background-position: 0 0; } to { background-position: 0 46px; } } /* THE MOTION IS THE ONLY PART THAT GOES. A reader asking for less motion still gets the grid — it is texture, not information, and a still one says the same thing as a moving one. The same call `landing-v2.js` makes for the reveals it refuses to play. */ @media (prefers-reduced-motion: reduce) { #asw-focused-hero-landing .lv2-hero::before { animation: none; } } /* ROOM TO BREATHE AT THE TOP (2026-09-19, on request) — "Gallery", the third of five full pages put up at `design/hero-room/index.html`. 210px above the headline against 100, and 54px between the units against 30. THE ORDER OF THE UNITS IS UNTOUCHED, which was the condition: headline, lead, form, small print, models, then the three statistics. Only the air between them moves. PHONES ARE NOT AFFECTED. The 760px block resets this to `48px 20px 0` at `gap: 30px`, and resets the band and the window too, so everything here lands at 761 and up. On a phone there is no room to spend and the fold is the whole argument. */ /* 1080 SINCE 2026-09-19, up from 860, and the reason is one line. The lead and the offer now share a row under the form (`.lv2-joined`), and at the lead's own 19px the pair with its separator measures about 950px. Raising the row's own `max-width` did nothing until this moved with it — every child here is capped by the column — which is the whole cost of keeping them at that size rather than shrinking them to fit. Measured in `design/hero-joined/`, where the 860 version is the one that wraps. */ /* THE AIR IS TAKEN FROM THE WINDOW'S HEIGHT SINCE 2026-10-01, on request: "Checked across" was ~790px down, under the fold of a laptop window (~650-780px of page). `15vh - 20px` and `5vh - 8px` land the row at 589px in a 780px window and 549px in a 650px one; the 210/54 above are now the CAPS, reached at about 1530px of window. Measured in `design/hero-rotating-llm/` (fold-*.png). The order and the size of every unit are untouched — only the space between them moves — and the phone block below still sets its own. */ #asw-focused-hero-landing .lv2-hero-copy { display: flex; flex-direction: column; align-items: center; gap: clamp(26px, 5vh - 8px, 54px); max-width: 1080px; margin: 0 auto; padding: clamp(64px, 15vh - 20px, 210px) 40px 0; text-align: center; } #asw-focused-hero-landing .lv2-hero h1 { font-size: 62px; font-weight: 700; line-height: 1.04; letter-spacing: -.035em; color: var(--asw-on-dark-strong); } /* THE ROTATING ASSISTANT (2026-10-01) — see the template for what it is. BEFORE THE SCRIPT RUNS the slot is ordinary text: the first name in flow, the rest `display: none`, so a page with scripts off reads "ask ChatGPT," at its natural width. `.is-live` is added by `landing-v2.js` and is the only thing that stacks the names and clips them — a slot whose children are all absolute has no width of its own, so without the script it would be zero wide and the sentence would read "ask ,". The script sets the width. */ #asw-focused-hero-landing .lv2-rot-defs { position: absolute; } #asw-focused-hero-landing .lv2-rot { position: relative; display: inline-block; vertical-align: bottom; margin-left: .16em; white-space: nowrap; } #asw-focused-hero-landing .lv2-rot-item { display: none; align-items: center; gap: .2em; } #asw-focused-hero-landing .lv2-rot-item.is-on { display: inline-flex; } #asw-focused-hero-landing .lv2-rot-item svg { width: .78em; height: .78em; fill: currentColor; flex: none; position: relative; top: .02em; } #asw-focused-hero-landing .lv2-rot.is-live { height: 1.12em; overflow: hidden; transition: width 1.076s cubic-bezier(.4,0,.2,1); } #asw-focused-hero-landing .lv2-rot.is-live .lv2-rot-item { display: inline-flex; position: absolute; left: 0; top: 0; transform: translateY(100%); opacity: 0; transition: transform 1.076s cubic-bezier(.4,0,.2,1), opacity 1.076s; } #asw-focused-hero-landing .lv2-rot.is-live .lv2-rot-item.is-on { transform: none; opacity: 1; } #asw-focused-hero-landing .lv2-rot.is-live .lv2-rot-item.is-out { transform: translateY(-100%); opacity: 0; } /* BRAND COLOURS — the one each assistant is known by, lifted where the brand's own is too dark for this ground (Perplexity's #20808D). These are NOT `LLM_COLORS`, which is the report's chart palette: only Claude agrees. */ #asw-focused-hero-landing .lv2-rot--chatgpt { color: #10A37F; } #asw-focused-hero-landing .lv2-rot--claude { color: #D97757; } #asw-focused-hero-landing .lv2-rot--perplexity { color: #20B8CD; } #asw-focused-hero-landing .lv2-rot--gemini > span { background: linear-gradient(90deg, #4796E3 0%, #9177C7 55%, #CA6673 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } #asw-focused-hero-landing .lv2-rot--gemini svg { fill: url(#lv2-rot-gemini); } #asw-focused-hero-landing .lv2-hero h1 .lv2-h1-line { display: block; } /* THE THREE PULLS ARE OFF ABOVE 760px (2026-09-19). They are option 1 of `design/landing-polish.html` (2026-09-12) and they said: the lead 22px under the headline, the small print 14px under the form and the model row 18px under that, "so the form and its small print read as one unit". Against a 30px gap those three negatives are what made 30 behave like 22, 14 and 18. Left in against the 54px gap they would have made the new air arrive everywhere EXCEPT around the form, which is the part of the column a reader is actually aiming at. WHAT IT COSTS, because it is a real trade and it is the one thing in this change that is not simply more room: the small print no longer sits tight under the form, so the two read as neighbours rather than as one object. It was reviewed that way — every variation on the sheet released them — and chosen that way. To put the grouping back at this gap, the numbers are `-32px`, `-40px` and `-36px`: gap minus the 22, 14 and 18 above. THE PHONE KEEPS ALL THREE, since the 760px block never widened its gap. */ #asw-focused-hero-landing .lv2-hero h1 { margin-bottom: -4px; } #asw-focused-hero-landing .lv2-hero-copy .asw-form { margin-bottom: -12px; } #asw-focused-hero-landing .lv2-hero-copy .lv2-assistants { margin-top: -8px; } @media (min-width: 761px) { #asw-focused-hero-landing .lv2-hero h1 { margin-bottom: 0; } #asw-focused-hero-landing .lv2-hero-copy .asw-form { margin-bottom: 0; } #asw-focused-hero-landing .lv2-hero-copy .lv2-assistants { margin-top: 0; } } #asw-focused-hero-landing .lv2-lead { max-width: 780px; font-size: 19px; line-height: 1.55; color: var(--asw-on-dark-muted); } /* THE CATEGORY BESIDE THE LEAD (option B of design/lead-beside.html, 2026-09-17, on request). The two sentences were split on 2026-09-12 — the category opened the footnote line under the form — and this puts them back together, side by side, with the PAIR centred rather than each half. WHY THE PAIR AND NOT THE BLOCK. The hero is centred, and two things side by side want a left edge to hang from. Centring the row keeps the hero's centre line and gives the lead a left edge only inside the row, which is what the mockup's B does and what D would have given up (it left-aligned the whole hero, headline included). `baseline` rather than `center` so the two sentences sit on one reading line at different weights. THE LEAD KEEPS A MAX-WIDTH so the pair does not stretch to the row's full 1000px on a wide screen and leave the category marooned at the far left. */ /* THE LEAD AND THE OFFER ON ONE LINE (2026-09-19, on request), under the form. Both at the lead's 19px: the offer is not fine print here, it is the second half of a pair, and two sizes on one baseline read as one sentence interrupted. The offer keeps the fainter ink so the order still reads lead-then-aside rather than as one long sentence. BASELINE, NOT CENTRE, so the dot sits on the line the words sit on. */ #asw-focused-hero-landing .lv2-joined { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 10px; max-width: 1060px; margin: 0 auto; } #asw-focused-hero-landing .lv2-joined .lv2-lead { max-width: none; margin: 0; } #asw-focused-hero-landing .lv2-joined .lv2-micro { margin: 0; font-size: 19px; line-height: 1.55; color: var(--asw-on-dark-faint); } #asw-focused-hero-landing .lv2-lead-row { display: flex; align-items: baseline; justify-content: center; gap: 18px; max-width: 1000px; margin: 0 auto; } #asw-focused-hero-landing .lv2-lead-cat { flex: 0 0 auto; margin: 0; font-size: 15px; font-weight: 600; color: var(--asw-on-dark-strong); } #asw-focused-hero-landing .lv2-lead-row .lv2-lead { flex: 0 1 auto; margin: 0; max-width: none; font-size: 16px; text-align: left; } /* ONE LINE, AND ONLY WHERE ONE LINE FITS (2026-09-17, on request). 17/19 needed 947px against the hero's 860 and wrapped. Measured, not guessed: shrinking the lead alone never gets there — at 16px with the category still 17 it is 864, four pixels over. Both had to come down, to 15/16, which is 824. AND SIZE ALONE STILL WAS NOT ENOUGH. At 824 in an 860 hero it went on wrapping, because the lead is shrinkable inside a shrink-to-fit row and was being given 445px of its 489. `flex-shrink: 0` is what puts it on one line. WHICH IS WHY THAT RULE IS GATED AT 880px. Unshrinkable, the pair keeps its full 824 however narrow the hero gets: at 762 the category ran to -38px and the lead to 23px past the viewport — and `overflow-x: clip` on this page means that is CUT OFF rather than scrollable, so nothing about the page looks wrong while two words are missing. Measured clean at 880 and above, clipped below. Between 760 and 880 the lead shrinks and wraps to two lines as it did before, which is the honest fallback; below 760 the pair stacks. The smaller type ships at every width. It is the wrapping that is gated. */ @media (min-width: 880px) { #asw-focused-hero-landing .lv2-lead-row .lv2-lead { flex-shrink: 0; } } #asw-focused-hero-landing .asw-form { display: flex; gap: 10px; width: 100%; max-width: 560px; margin: 4px 0 0; } #asw-focused-hero-landing .asw-form input { flex: 1 1 auto; min-width: 0; height: 54px; padding: 0 18px; border: 1px solid var(--asw-hair-dark-strong); border-radius: 8px; background: var(--asw-glass); color: var(--asw-on-dark); font-size: 15px; } /* The hero's own button is a little shorter than the field beside it (on request, 2026-09-13): 50px against the field's 54, centred on the row so the pair still reads as one line. Only this button — the nav's and the closing ask's keep their sizes. */ #asw-focused-hero-landing .lv2-hero .asw-form { align-items: center; } #asw-focused-hero-landing .lv2-hero .asw-form .lv2-btn { min-height: 50px; padding: 0 20px; } #asw-focused-hero-landing .asw-form input::placeholder { color: var(--asw-on-dark-muted); opacity: 1; } #asw-focused-hero-landing .asw-form input:focus { outline: 0; border-color: var(--asw-accent-focus); box-shadow: var(--asw-ring); } #asw-focused-hero-landing .asw-form .asw-feedback { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--asw-on-dark-soft); } #asw-focused-hero-landing .asw-form .asw-feedback:not([hidden]) { display: block; } #asw-focused-hero-landing .lv2-micro { font-size: 13.5px; line-height: 1.5; color: var(--asw-on-dark-soft); } #asw-focused-hero-landing .lv2-assistants { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; font-size: 13px; color: var(--asw-on-dark-muted); } #asw-focused-hero-landing .lv2-assistants span { display: inline-flex; align-items: center; gap: 7px; } #asw-focused-hero-landing .lv2-assistants .lv2-assistants-lead { margin-right: 4px; color: var(--asw-on-dark-soft); } #asw-focused-hero-landing .lv2-assistants svg { width: 15px; height: 15px; flex: none; fill: currentColor; } /* PROOF LINE (handoff §3) */ /* 1100px, and 20px gutters rather than 28 (2026-09-15, on request): at 1000px the 53% cell had 171px for a cite line that needs 188, so "Capgemini (global consumers)" wrapped there while the same words fitted under the 58% — which had exactly 190px, one pixel of slack. Both clear it now at 1024px and up. Below ~950px all three still wrap, as they did before. */ /* 1200px, UP FROM 1100 (2026-09-18). At 1100 the sentence's box was 234px and "of consumers prefer recommendations from AI over search" needs 235 in Inter — ONE PIXEL SHORT, at every width, so it set on three lines everywhere and no amount of window-widening helped. 1200 is not a new number: `lv2-how` and the footer already use it. It puts the box at ~267, a 32px margin. The one pixel is why this took three passes to find. Measured headless, the page rendered in the SYSTEM FALLBACK rather than Inter — `app.css` declares `src: url("/static/fonts/inter-latin.woff2")`, an absolute path that resolves to nothing from a file:// staging copy, so the face landed in `document.fonts` as "error" and every width came out 2% narrow. 231 against 234 reads as a fit; 235 against 234 is the defect. A probe must wait for `document.fonts.ready` AND rewrite the url inside the stylesheet, or it is measuring a typeface the reader never sees. */ #asw-focused-hero-landing .lv2-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1200px; margin: 120px auto 0; padding: 44px 40px 0; border-top: 1px solid var(--asw-hair-dark); } #asw-focused-hero-landing .lv2-proof-item { display: flex; align-items: flex-start; gap: 14px; padding: 0 20px; border-left: 1px solid var(--asw-hair-dark); } #asw-focused-hero-landing .lv2-proof-item:nth-child(1) { padding-left: 0; border-left: 0; } #asw-focused-hero-landing .lv2-proof-item:nth-child(3) { padding-right: 0; } #asw-focused-hero-landing .lv2-proof-item b { flex: none; min-width: 64px; font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--asw-on-dark-strong); font-variant-numeric: tabular-nums; } #asw-focused-hero-landing .lv2-proof-item:nth-child(3) b { min-width: 98px; } /* THE FIGURE COLUMN IS NOW A BLOCK, because the 58% carries "of consumers" under it (2026-09-15). `flex: none` and the min-width move here from the ``; the number itself keeps its own type. The unit is 11.5px and takes the caption's colour rather than the fainter cite grey (option 2 below then lifts both to `--asw-on-dark-soft`), so it clears AA either way. It sits AFTER the two `b` rules on purpose: `.lv2-proof-fig b` and `.lv2-proof-item b` are the same specificity, so source order is what decides the min-width — the `.lv2-tabs` collision of this morning, again. */ #asw-focused-hero-landing .lv2-proof-fig { flex: none; min-width: 72px; } #asw-focused-hero-landing .lv2-proof-fig b { display: block; min-width: 0; } /* THE FIGURE THAT PAINTS OUTSIDE ITS BOX IS FIXED IN THE PHONE BLOCK, not here — see `grid-template-columns` under `max-width: 760px`. A first attempt put `min-width: max-content` on this `b` and it did NOTHING, because the phone block re-declares `.lv2-proof-item b` at the same specificity and later in source. The box was never sized by this rule at the widths that fail. Recorded so the next reader does not spend the same round trip. */ /* OPTION 2 of `design/landing-proof-3.html` (2026-09-15, on request): the figures in the accent at 34px, the units and labels a shade brighter. Measured on both grounds before shipping — accent #b7bff4 is 9.87:1 on the desktop band and 8.93:1 on the lighter phone band; soft #d9dce3 is 12.82 and 11.61. The phone block below re-sets the figure to 26px and wins on source order, so this 34px is desktop only. */ #asw-focused-hero-landing .lv2-proof-item b { color: var(--asw-accent-on-dark); font-size: 34px; } #asw-focused-hero-landing .lv2-proof-text p:not(.lv2-proof-cite) { color: var(--asw-on-dark-soft); } /* `text-wrap: balance`: a label that wraps splits evenly — "have replaced search / engines with AI" — rather than leaving two words alone on the second line (on request, 2026-09-13). Browsers without it wrap as before. */ #asw-focused-hero-landing .lv2-proof-item p { padding-top: 3px; font-size: 13px; line-height: 1.45; color: var(--asw-on-dark-muted); text-wrap: balance; } /* Each figure cites its own source under its label (2026-09-13, on request); until then one footnote under the row named both (Review 2, 7a). */ /* `padding-top`, not margin: the sheet's `#…lv2 p { margin: 0 }` outranks a class. */ #asw-focused-hero-landing .lv2-proof-text { min-width: 0; } /* NAMED THROUGH ITS PARENT (2026-09-15) so it actually applies. It was `#id .lv2-proof-cite` — id+class — against `#id .lv2-proof-item p`, id+class+ELEMENT, which outranks it however the two are ordered. The source line had therefore been drawn at the label's 13px and 3px since it was written, never its own 11.5px and 6px. Asked for a smaller source name, which is what this rule always meant to say. The phone block below carried the identical collision and is fixed the same way. */ #asw-focused-hero-landing .lv2-proof-text p.lv2-proof-cite { padding-top: 6px; font-size: 11.5px; line-height: 1.4; color: var(--asw-on-dark-faint); } /* The scope in brackets sits a step under the source name (2026-09-15, on request). `em`, not px, so it stays a step under WHATEVER the cite line turns out to be: that line is currently drawn at 13px, not the 11.5px the rule above asks for, because `.lv2-proof-item p` is id+class+element and outranks it — see the open item in web/README.md. When that is fixed this scales with it instead of needing a second edit. */ #asw-focused-hero-landing .lv2-proof-scope { font-size: .9em; } /* The two sources read as links (on request, 2026-09-12): underlined at rest, a shade brighter than the footnote's own grey, brighter still on hover. */ /* 24px tall (WCAG 2.2 2.5.8): QA on 2026-09-14 measured these at 16. */ #asw-focused-hero-landing .lv2-proof-cite a { display: inline-flex; align-items: center; min-height: 24px; color: var(--asw-on-dark-muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.35); } #asw-focused-hero-landing .lv2-proof-cite a:hover { color: var(--asw-on-dark-strong); text-decoration-color: currentColor; } /* ── THE SOURCE MOVES UNDER THE NUMBER ──────────────────────────────────── Frame B of `design/proof-line.html`, ported 2026-09-18 after six frames and several rounds on the mockup. `scripts/design_proof_line.py` builds it and carries the measurements; this is the shape that was chosen. WHAT CHANGED. The cell was: number with "of consumers" under it, sentence to the right, source under the sentence. It is now: number with the SOURCE under it, and one sentence to the right that has taken "of consumers" into its own text. The band is SHORTER for it — measured 140px -> 106px in the mockup — because the number's column no longer carries a unit line. FOUR THINGS HERE ARE LOAD-BEARING, each found by measuring rather than by reading the stylesheet: 1. `display: contents` on `.lv2-proof-text`. The source is marked up inside that wrapper, beside the sentence; without this its children cannot be placed in the cell's grid at all, and the source cannot leave the sentence's column. 2. `margin: 0` on both paragraphs, NOT `margin-top: 0`. The UA's own `p` margin is on both ends. Zeroing only the top leaves 11.5px hanging under the source, which made the cell 90px tall where its content ended at 78 — so the sentence, which centres on the CELL, sat 6px below the middle of the number-and-source block it is meant to line up with. 3. `.lv2-proof-text p.lv2-proof-cite`, never `.lv2-proof-cite`. The rule above is id + two classes + AN ELEMENT; the short form loses to it on every property it also sets. That cost a day on the mockup, silently: the grid placement applied (the page sets no grid-column) while the font-size and padding were dropped, so the frame LOOKED right. 4. The scope on its own line. The left column is sized by its widest line, so "Capgemini (global)" sets it at ~105px where "Capgemini" alone sets it at ~66 — and every pixel the source does not take, the sentence gets. NOT DONE HERE: the phone. The narrow block below keeps its own two-column layout, where the number is 82px and right-aligned and the source sits under the SENTENCE. That layout was designed for the width and this one was not. */ /* WRAPPED IN THE BREAKPOINT, and it was not at first. Unwrapped, these rules reached the phone: the narrow block below restates the cite's padding, size and colour but says nothing about `grid-column`, `grid-row` or `white-space`, so the phone inherited the desktop PLACEMENT while keeping its own everything-else. Measured at 390px, the 1,219% cell's source then ran 113px into an 82px column. The same half-overriding that cost a day on the mockup, in the other direction. */ @media (min-width: 761px) { #asw-focused-hero-landing .lv2-proof-item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 0; align-items: start; } #asw-focused-hero-landing .lv2-proof-fig { grid-column: 1; grid-row: 1; min-width: 72px; } #asw-focused-hero-landing .lv2-proof-text { display: contents; } #asw-focused-hero-landing .lv2-proof-text p:not(.lv2-proof-cite) { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; position: relative; top: -4px; } /* THE -4px IS OPTICAL, AND IT IS NOT UNDOING THE CENTRING (2026-09-18, on request: the sentence should sit slightly higher). `align-self: center` puts it at +0px against the middle of the number-and-source block, which is right arithmetically and reads LOW — because the boxes are not what the eye measures. "58%" at 34px with `line-height: 1` fills a box that has room for descenders it does not use, so its ink sits high in it, while "Capgemini (global)" underneath spends its descenders on the p and the g. The block's ink is therefore higher than the block's box, and matching the boxes leaves the sentence trailing it. `position: relative` rather than a margin, so the correction moves only what is painted: the centring above still resolves against the real box, and this cannot feed back into the row height the way a margin would. Measured after: the sentence runs 6..47 in a 61px cell, so there is room at both ends and nothing is clipped at any width. */ #asw-focused-hero-landing .lv2-proof-text p.lv2-proof-cite { grid-column: 1; grid-row: 2; margin: 0; padding-top: 3px; font-size: 10px; white-space: nowrap; } /* BACK ON THE CITE'S OWN LINE (2026-09-18, on request: "put the text in parentheses on the same line"). It was `display: block` from earlier the same day, and the reason it was is still true — the left column is sized by its widest line, so "Capgemini (global)" sets it wider than "Capgemini" alone and the sentence loses exactly that much on the right. What changed is that the sentence can now afford it: reworded, it needs 177px where the old wording needed 235, against 245 at the narrowest three-across width. `.lv2-proof-scope` is `.9em` of the cite, which at 10px would be 9px and under the 9.5px floor `qa_landing` case 6 holds — so the size is stated here rather than inherited down through it. */ #asw-focused-hero-landing .lv2-proof-scope { font-size: 10px; } } /* THE REPORT WINDOW (handoff §4). Negative bottom margin hangs it out of the dark hero; `.lv2-light`'s top padding is the overlap plus 60. */ #asw-focused-hero-landing .lv2-window { position: relative; z-index: 2; max-width: 810px; margin: 76px auto -200px; border: 1px solid var(--asw-line-strong); border-radius: 16px; background: var(--asw-card); color: var(--asw-ink); box-shadow: 0 70px 140px -46px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.10); overflow: hidden; text-align: left; } #asw-focused-hero-landing .lv2-window-title { position: relative; z-index: 2; max-width: 810px; margin: 76px auto 0; text-align: center; } #asw-focused-hero-landing .lv2-window-title h2 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.01em; color: var(--asw-on-dark-strong); } #asw-focused-hero-landing .lv2-window-title p { margin: 6px 0 0; font-size: 14px; color: var(--asw-on-dark-muted); } #asw-focused-hero-landing .lv2-window-title + .lv2-window { margin-top: 20px; } #asw-focused-hero-landing .lv2-window-chrome { display: flex; gap: 6px; align-items: center; height: 41px; padding: 10px 16px; background: var(--asw-card-alt); border-bottom: 1px solid var(--asw-line); } #asw-focused-hero-landing .lv2-window-chrome i { width: 10px; height: 10px; border-radius: 50%; background: var(--asw-line); } /* THE WINDOW IS A PEEK, NOT THE WHOLE REPORT (2026-09-14, on request — variation C of the preview mockups). It was 1160px wide and as tall as its tallest section, ~1000px, and overlapped the light section by 300px: the miniature took more of the page than the page. Now 810px wide (900, then 10% narrower on request) with no sidebar, the four sections as pills across the top, and a 500px frame that shows each section's scorecards and the top of its first chart, fading into "Open the full report" — the report's own page is where the rest is read. THE PHONE IS THE SAME DESIGN SINCE 2026-09-15 (it kept a 620px scrolling frame and an underline tab row until then, which read as a different product): same pills, same clipped frame at 420px, same peek. The two differ only where they must — the pill is 44px tall for touch, the frame is shorter — and those rules live in the phone block below. */ #asw-focused-hero-landing .lv2-window-body { display: grid; grid-template-columns: minmax(0, 1fr); } #asw-focused-hero-landing .lv2-window-side { display: none; flex-direction: column; gap: 20px; padding: 22px 16px; background: var(--asw-card-alt); border-right: 1px solid var(--asw-line); font-size: 12.5px; color: var(--asw-muted); } #asw-focused-hero-landing .lv2-window-brand { font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--asw-ink); } #asw-focused-hero-landing .lv2-window-side .lv2-window-brand span { color: var(--asw-accent); } #asw-focused-hero-landing .lv2-client { padding: 12px; background: var(--asw-accent-tint); border: 1px solid var(--asw-accent-tint-border); border-radius: 8px; } #asw-focused-hero-landing .lv2-client small, #asw-focused-hero-landing .lv2-side-label { display: block; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--asw-faint); } #asw-focused-hero-landing .lv2-client strong { display: block; margin-top: 3px; font-size: 13px; color: var(--asw-ink); } #asw-focused-hero-landing .lv2-client span { display: block; font-size: 11.5px; color: var(--asw-faint); } #asw-focused-hero-landing .lv2-side-label { margin-bottom: -12px; } #asw-focused-hero-landing .lv2-side-nav { list-style: none; margin: 0; padding: 0; } /* THE SECTIONS ARE TABS (2026-09-12): each item holds a button; the active item's class stays on the `li` because the probe and the tests count it. */ #asw-focused-hero-landing .lv2-side-nav li { border-radius: 6px; color: var(--asw-muted); } #asw-focused-hero-landing .lv2-side-nav button { display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } #asw-focused-hero-landing .lv2-side-nav li:not(.asw-rp-active) button:hover { background: var(--asw-line-soft); color: var(--asw-ink); } #asw-focused-hero-landing .lv2-side-nav .asw-rp-active { background: var(--asw-accent-tint); color: var(--asw-accent-text); font-weight: 600; } #asw-focused-hero-landing .lv2-side-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--asw-line); font-size: 11px; line-height: 1.6; color: var(--asw-faint); } /* "LIFT" (2026-09-19, on request) — option 1 of four at `design/report-look/index.html`. THE PANEL AND THE CELLS TRADE GROUNDS: the window was white with grey tiles on it, and is now the page's own off-white with WHITE cards raised off it. Nothing in the window's markup moved — the four restyles were checked word for word against the current one, 885 words, identical — this is colour, border, shadow, radius and type scale only. EVERY VALUE IS A TOKEN ALREADY IN THE SHEET. `--asw-bg` was the cells' background and is now the panel's; `--asw-card` goes the other way. The score cell's tint is `--asw-accent-tint`, which the plan card, the side nav and the client row all already use. */ /* "LEDGER" (2026-09-19, on request) — option 2 of four at `design/spoke-saas/`, replacing "Lift" of this morning. No card around anything: hairline rules and whitespace do all the separating, which is why the surface itself is now white rather than the page tint the cards used to sit on. THE AIR IS SPENT SIDEWAYS, NOT DOWNWARDS, and the mock-up is what taught this. Drawn with generous vertical gaps it read well on Visibility and left a dead zone on Sources, whose content then clipped against the window's fixed 500px. Sources is the tallest of the three — four headings and three tables where the others have two — so it sets the budget for all three, because the stylesheet has no panel-scoped rule and cannot treat it separately. Side padding went 22 -> 26 for the openness; the vertical numbers are the same or tighter than the cards they replace. */ #asw-focused-hero-landing .lv2-window-main { display: grid; gap: 16px; align-content: start; min-width: 0; padding: 18px 26px 20px; background: var(--asw-card); } /* THE PILLS AND THE PEEK ARE DEFINED ONCE (2026-09-15) and shown by whichever layout is on. They used to be defined inside the min-width block, which is why the phone — once it was given the same design — got a bare flex box for a peek: no fade, no absolute positioning, and a button stretched to the container's 96px. Each media block below now flips `display` and states only what genuinely differs: the pill's touch height, the frame's height. */ #asw-focused-hero-landing .lv2-tabs, #asw-focused-hero-landing .lv2-peek { display: none; } #asw-focused-hero-landing .lv2-tabs { flex-wrap: wrap; gap: 6px; padding: 0 0 2px; } #asw-focused-hero-landing .lv2-tabs button { display: inline-flex; align-items: center; flex: none; min-height: 36px; padding: 0 12px; border: 1px solid var(--asw-line); border-radius: 8px; background: var(--asw-card); font: inherit; font-size: 12.5px; line-height: 1.3; color: var(--asw-muted); cursor: pointer; } /* THE HOVER MAY NOT REACH THE ACTIVE PILL (2026-09-15). `… .lv2-tabs button:hover` is (1,2,1) and `… .lv2-tabs .is-on` is (1,2,0), so hover won and painted the selected pill's label `--asw-ink` — ink on the ink background, 1:1, a black box with no text. It is invisible on a mouse, where hover ends when the pointer leaves; on a touch screen hover STICKS after the tap, so the phone was where it showed. Two guards, either of which would do: the state is excluded by name, and hover is only asked for where hovering is possible. This is the `.lp-nav-links > a` collision of 2026-08-24 one stylesheet over — see CLAUDE.md, "two blues". */ @media (hover: hover) { #asw-focused-hero-landing .lv2-tabs button:not(.is-on):hover { color: var(--asw-ink); border-color: var(--asw-line-strong); } } #asw-focused-hero-landing .lv2-tabs .is-on { background: var(--asw-ink); border-color: var(--asw-ink); color: var(--asw-card); font-weight: 600; box-shadow: none; } /* The frame is clipped, not scrolled: the fade says there is more and the button is the way to it. */ /* THE FADE HAS TO END ON THE PANEL, NOT ON WHITE. This faded to `--asw-card` because that is what the panel used to be; with the panel now `--asw-bg` a white fade would have laid a pale band across the bottom of every cut. Found by changing one colour and looking at the other end of the box. */ #asw-focused-hero-landing .lv2-peek { position: absolute; left: 0; right: 0; bottom: 0; align-items: flex-end; justify-content: center; height: 130px; padding-bottom: 18px; background: linear-gradient(180deg, rgba(247,249,252,0), var(--asw-bg) 70%); } @media (min-width: 761px) { #asw-focused-hero-landing .lv2-tabs, #asw-focused-hero-landing .lv2-peek { display: flex; } #asw-focused-hero-landing .lv2-window-main { max-height: 500px; overflow: hidden; } } #asw-focused-hero-landing .lv2-panel { display: grid; gap: 16px; align-content: start; min-width: 0; } /* AND SO MUST ITS CHILDREN (2026-09-18). The panel has carried `min-width: 0` since it was written, which stops IT overflowing `.lv2-window-main`; its items are grid items too, and they default to `min-width: auto`. At 320px the scorecard band's min-content is 298px against a 266px column, so the implicit `auto` column was sized to the band rather than to the box: the whole panel drew 32px wider than the window, and since `.lv2-window` is `overflow: hidden` the third scorecard was CUT, not scrolled. The band was the widest item, but the rule is on every child because any of them can become the widest one — that is what made this invisible until a probe measured the right edge. No effect above 320; nothing else moves. */ #asw-focused-hero-landing .lv2-panel > * { min-width: 0; } #asw-focused-hero-landing .lv2-table td svg { width: 13px; height: 13px; margin-right: 7px; vertical-align: -2px; fill: currentColor; } #asw-focused-hero-landing .lv2-themes { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.5; } #asw-focused-hero-landing .lv2-themes--numbered { padding-left: 20px; list-style: decimal; } #asw-focused-hero-landing .lv2-themes--numbered li::marker { font-weight: 600; color: var(--asw-accent-text); } #asw-focused-hero-landing .lv2-themes strong { display: block; font-size: 13px; color: var(--asw-ink); } #asw-focused-hero-landing .lv2-themes span { color: var(--asw-muted); } #asw-focused-hero-landing .lv2-bars { margin: 0; padding: 0; list-style: none; } #asw-focused-hero-landing .lv2-bars li { display: grid; grid-template-columns: 180px minmax(0, 1fr) 44px; gap: 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--asw-line-soft); font-size: 12.5px; color: var(--asw-ink); } #asw-focused-hero-landing .lv2-bars li:first-child { border-top: 0; padding-top: 2px; } #asw-focused-hero-landing .lv2-bars b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } #asw-focused-hero-landing .lv2-answers { margin: 0; padding: 0; list-style: none; } /* The Narrative table's themes cell: two labels with their shares. */ #asw-focused-hero-landing .lv2-theme { display: inline-block; margin-right: 10px; white-space: nowrap; color: var(--asw-muted); } #asw-focused-hero-landing .lv2-theme b { font-weight: 600; color: var(--asw-ink); } /* THE TREND CHART IN THE WINDOW (2026-09-13): lines and dots in an SVG that stretches to the box, every word HTML beside it. The estimated stretch is pale, the way the report paints a reconstruction; `non-scaling-stroke` keeps the lines one width whatever the box is stretched to. */ #asw-focused-hero-landing .lv2-trend { margin-bottom: 12px; } #asw-focused-hero-landing .lv2-trend-plot { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: stretch; } #asw-focused-hero-landing .lv2-trend-axis { display: flex; flex-direction: column; justify-content: space-between; margin: 0; padding: 4px 0 0; list-style: none; font-size: 10.5px; line-height: 1; text-align: right; color: var(--asw-faint); font-variant-numeric: tabular-nums; } #asw-focused-hero-landing .lv2-trend-svg { display: block; width: 100%; height: 150px; overflow: visible; } #asw-focused-hero-landing .lv2-trend-grid { stroke: var(--asw-line-soft); stroke-width: 1; } #asw-focused-hero-landing .lv2-trend-seg { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #asw-focused-hero-landing .lv2-trend-line--client .lv2-trend-seg { stroke: var(--asw-accent); } #asw-focused-hero-landing .lv2-trend-line--rival .lv2-trend-seg { stroke: #9aa3b2; } #asw-focused-hero-landing .lv2-trend-line--client .lv2-trend-dot { fill: var(--asw-accent); } #asw-focused-hero-landing .lv2-trend-line--rival .lv2-trend-dot { fill: #9aa3b2; } #asw-focused-hero-landing .lv2-trend-seg.is-est, #asw-focused-hero-landing .lv2-trend-dot.is-est { opacity: .42; } #asw-focused-hero-landing .lv2-trend-months { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 6px 0 0 42px; list-style: none; font-size: 11px; line-height: 1.3; color: var(--asw-faint); } #asw-focused-hero-landing .lv2-trend-months li { text-align: center; } #asw-focused-hero-landing .lv2-trend-months li:first-child { text-align: left; } #asw-focused-hero-landing .lv2-trend-months li:last-child { text-align: right; } #asw-focused-hero-landing .lv2-trend-months li.is-est { color: #8a6d1f; } #asw-focused-hero-landing .lv2-trend-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 10px 0 0; list-style: none; font-size: 11.5px; line-height: 1.3; color: var(--asw-muted); } #asw-focused-hero-landing .lv2-trend-legend li { display: inline-flex; align-items: center; gap: 6px; } #asw-focused-hero-landing .lv2-trend-legend i { width: 10px; height: 2px; border-radius: 2px; background: #9aa3b2; } #asw-focused-hero-landing .lv2-trend-legend li.is-client { color: var(--asw-ink); font-weight: 600; } #asw-focused-hero-landing .lv2-trend-legend li.is-client i { background: var(--asw-accent); } #asw-focused-hero-landing .lv2-trend-legend b { font-weight: 600; font-variant-numeric: tabular-nums; } #asw-focused-hero-landing .lv2-trend-note { padding-top: 8px; font-size: 11px; line-height: 1.4; color: var(--asw-faint); } #asw-focused-hero-landing .lv2-answers li { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--asw-line-soft); font-size: 12.5px; color: var(--asw-ink); } #asw-focused-hero-landing .lv2-answers li:first-child { border-top: 0; padding-top: 2px; } #asw-focused-hero-landing .lv2-answers em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--asw-accent-text); white-space: nowrap; } #asw-focused-hero-landing .lv2-panel-foot { font-size: 12.5px; color: var(--asw-muted); } #asw-focused-hero-landing .lv2-panel-foot a { font-weight: 600; color: var(--asw-accent-text); text-decoration: none; } #asw-focused-hero-landing .lv2-panel-foot a:hover { text-decoration: underline; text-underline-offset: 3px; } #asw-focused-hero-landing .lv2-crumb { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--asw-muted); } #asw-focused-hero-landing .lv2-crumb > span > b { color: var(--asw-ink); font-weight: 600; } #asw-focused-hero-landing .lv2-window-h3 { font-size: 14px; font-weight: 600; letter-spacing: -.01em; } #asw-focused-hero-landing .lv2-window-h3 small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--asw-faint); } /* FOUR EQUAL CELLS (2026-09-18, on request: the score and the mention rate should be the same size). It was `1.5fr 1fr 1.3fr 1.3fr` — 216 / 144 / 187 / 187 at 1440 — so the four scorecards were four different widths. Heights always matched, because grid stretches a row; only the widths did not. WHAT IT COSTS is one wrap: at 184px the score cell's text column is 82px and "VISIBILITY SCORE" needs 104, so that label now sets on two lines. Measured rather than accepted — and it reads as the set rather than against it, because "MOST-MENTIONED COMPETITOR" and "STRONGEST PURCHASE STAGE" were already on two lines. Three of four now wrap, the row height is unchanged at 126px, the ring is untouched at 58px and nothing overflows. THE NARROW RULE BELOW IS DELIBERATELY NOT THIS. Equal thirds at 390px overflows the score cell — "Dominant" wants 57px in a 52px box — which is what that block's own comment about a wider column for the ring is for. The mention-rate cell is hidden at that width anyway, so the request's own example does not arise there. */ #asw-focused-hero-landing .lv2-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0 0 14px; border-bottom: 1px solid var(--asw-line-soft); } /* THE THREE- AND TWO-CELL BANDS MUST FOLLOW THE BASE RULE (2026-09-14): same specificity, so whichever is declared later wins. Declared earlier, the four-column template above applied and the Narrative and Citations bands left a fourth column empty, squeezing "Brand with most positive sentiment" onto two lines. */ #asw-focused-hero-landing .lv2-band--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } #asw-focused-hero-landing .lv2-band--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* No card. The figure and its label stand in the open, separated from the next cell by the column gutter alone — which is why `.lv2-band` below drops its gap and pays for the separation in padding instead. Losing 15px of vertical padding per cell is also what buys the room the rules cost. */ #asw-focused-hero-landing .lv2-cell { min-width: 0; padding: 2px 18px 2px 0; } /* The score is the headline figure of the whole spoke, so its card is the one that carries the accent. Same tint the plan card uses. */ /* THE SCORE KEEPS ITS EMPHASIS WITHOUT A CARD TO TINT. The gradient was painted on the card; with the card gone there is nothing to fill, so the ring beside it carries the weight on its own — which it already did, being the only drawn figure on the band. */ #asw-focused-hero-landing .lv2-cell--score { background: none; } #asw-focused-hero-landing .lv2-cell small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--asw-faint); } #asw-focused-hero-landing .lv2-cell strong { display: block; margin: 3px 0 2px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--asw-ink); } /* 10.5px, DOWN FROM 11.5 (2026-09-18, on request: the scorecard units should be smaller, twice). This is the sub-line that says what the figure is measured in — "of answers", "1st of 47 brands named", "33% of the sites read" — not the label above it (10px) nor the value between them (15px). 11.5 -> 10.5 -> 10px. The floor is 9.5px and `qa_landing` case 6 enforces it, so this keeps half a point in hand rather than sitting on the limit. The narrow block hides these sub-lines outright, so the phone is unaffected either way. */ #asw-focused-hero-landing .lv2-cell span { display: block; font-size: 10px; line-height: 1.35; color: var(--asw-muted); } #asw-focused-hero-landing .lv2-cell span b { font-weight: 600; color: var(--asw-ink); } /* One class more than `.lv2-cell span`, or that rule's `display: block` wins. */ #asw-focused-hero-landing .lv2-cell span.lv2-cell-mobile-sub { display: none; } #asw-focused-hero-landing .lv2-cell--score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; } /* THE RING: the finished state in the stylesheet — 52 of 100 is 187.2deg — so the ring is full with scripts off; the reveal draws it up from 0. */ #asw-focused-hero-landing .lv2-ring { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: conic-gradient(var(--asw-accent) 187.2deg, var(--asw-line) 0); } #asw-focused-hero-landing .lv2-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--asw-bg); } /* Review 1, §4: the number stacked over its scale, not on one line. */ #asw-focused-hero-landing .lv2-ring > span { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; font-variant-numeric: tabular-nums; } #asw-focused-hero-landing .lv2-ring > span b { font-size: 15px; font-weight: 700; color: var(--asw-ink); } #asw-focused-hero-landing .lv2-ring > span small { margin-top: 3px; font-size: 9.5px; white-space: nowrap; color: var(--asw-faint); } /* A rule above it rather than a box around it, on the same reasoning as the cells: one hairline says "a new section" as clearly as four sides do. */ #asw-focused-hero-landing .lv2-standings { padding: 12px 0 0; border: 0; border-top: 1px solid var(--asw-line-soft); border-radius: 0; } #asw-focused-hero-landing .lv2-standings .lv2-window-h3 { margin-bottom: 8px; } /* THE SOURCES SPOKE'S TWO CHARTS SIDE BY SIDE (2026-09-14): the ring of site kinds with its key to the left, and the sites-read-most bars. The ring is the report's own SVG (`site_kinds`), drawn in its viewBox and scaled to the box; the hole is the box's centre, where the count sits. The five slice colours are `REACH_KIND_COLORS`, largest slice first, as classes because the page forbids inline styles. */ /* THE RECOMMENDATIONS PANEL AS THE REPORT DRAWS IT (2026-09-14): a numbered column of subject tags, the action in full, and under it the evidence — a small heading over a list or a row of chips. The Start-here row carries the report's accent rule down its left edge. */ #asw-focused-hero-landing .lv2-recs { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } #asw-focused-hero-landing .lv2-rec { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--asw-line-soft); } #asw-focused-hero-landing .lv2-rec:first-child { border-top: 0; padding-top: 4px; } #asw-focused-hero-landing .lv2-rec--lead { padding-left: 12px; border-left: 3px solid var(--asw-accent); background: var(--asw-accent-tint); border-radius: 0 6px 6px 0; } #asw-focused-hero-landing .lv2-rec-tag { display: block; padding-top: 2px; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; color: var(--asw-accent-text); } #asw-focused-hero-landing .lv2-rec-tag b { display: block; margin-bottom: 2px; font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--asw-accent-text); } #asw-focused-hero-landing .lv2-rec-text { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--asw-ink); } #asw-focused-hero-landing .lv2-rec--lead .lv2-rec-text { font-weight: 600; } #asw-focused-hero-landing .lv2-rec-why { margin-top: 8px; } #asw-focused-hero-landing .lv2-rec-why small { display: block; margin-bottom: 5px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--asw-faint); } #asw-focused-hero-landing .lv2-rec-why ul { margin: 0; padding-left: 16px; font-size: 11.5px; line-height: 1.5; color: var(--asw-muted); } #asw-focused-hero-landing .lv2-rec-chips { display: flex; flex-wrap: wrap; gap: 6px; } #asw-focused-hero-landing .lv2-rec-chips span { display: inline-block; padding: 3px 8px; border: 1px solid var(--asw-line); border-radius: 999px; background: var(--asw-bg); font-size: 11px; line-height: 1.3; color: var(--asw-ink); font-variant-numeric: tabular-nums; } #asw-focused-hero-landing .lv2-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } #asw-focused-hero-landing .lv2-kinds-row { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 18px; align-items: center; } #asw-focused-hero-landing .lv2-kinds-key { margin: 0; padding: 0; list-style: none; } #asw-focused-hero-landing .lv2-kinds-key li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 6px 0; border-top: 1px solid var(--asw-line-soft); font-size: 12.5px; color: var(--asw-ink); } #asw-focused-hero-landing .lv2-kinds-key li:first-child { border-top: 0; padding-top: 2px; } #asw-focused-hero-landing .lv2-kinds-key i { width: 10px; height: 10px; border-radius: 3px; } #asw-focused-hero-landing .lv2-kinds-key b { font-weight: 600; font-variant-numeric: tabular-nums; } #asw-focused-hero-landing .lv2-donut { position: relative; display: grid; place-items: center; width: 128px; height: 128px; } #asw-focused-hero-landing .lv2-donut svg { position: absolute; inset: 0; width: 100%; height: 100%; } #asw-focused-hero-landing .lv2-donut > span { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; font-variant-numeric: tabular-nums; } #asw-focused-hero-landing .lv2-donut > span b { font-size: 19px; font-weight: 700; color: var(--asw-ink); } #asw-focused-hero-landing .lv2-donut > span small { margin-top: 3px; font-size: 9.5px; color: var(--asw-faint); } #asw-focused-hero-landing .lv2-kind--1 i, #asw-focused-hero-landing path.lv2-kind--1 { background: #1D4ED8; fill: #1D4ED8; } #asw-focused-hero-landing .lv2-kind--2 i, #asw-focused-hero-landing path.lv2-kind--2 { background: #5B8DF0; fill: #5B8DF0; } #asw-focused-hero-landing .lv2-kind--3 i, #asw-focused-hero-landing path.lv2-kind--3 { background: #93B4F7; fill: #93B4F7; } #asw-focused-hero-landing .lv2-kind--4 i, #asw-focused-hero-landing path.lv2-kind--4 { background: #CFDEFC; fill: #CFDEFC; } #asw-focused-hero-landing .lv2-kind--5 i, #asw-focused-hero-landing path.lv2-kind--5 { background: #C3C8D1; fill: #C3C8D1; } #asw-focused-hero-landing .lv2-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; } #asw-focused-hero-landing .lv2-table th, #asw-focused-hero-landing .lv2-table td { min-width: 0; padding: 10px; text-align: right; border-top: 1px solid var(--asw-line-soft); } #asw-focused-hero-landing .lv2-table th { padding-top: 0; border-top: 0; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--asw-faint); } #asw-focused-hero-landing .lv2-table th:first-child, #asw-focused-hero-landing .lv2-table td:first-child { text-align: left; width: 40%; } #asw-focused-hero-landing .lv2-table .lv2-short { display: none; } #asw-focused-hero-landing .lv2-table .asw-you td { background: var(--asw-accent-tint); color: var(--asw-accent-text); font-weight: 600; } #asw-focused-hero-landing .lv2-table .asw-you td:first-child { border-left: 3px solid var(--asw-accent); border-radius: 6px 0 0 6px; padding-left: 7px; } #asw-focused-hero-landing .lv2-table .asw-you td:last-child { border-radius: 0 6px 6px 0; } #asw-focused-hero-landing .lv2-table em { margin-left: 8px; font-style: normal; font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--asw-accent-text); } /* THE CAPTION under the window (handoff §4.3) */ /* THE CAPTION UNDER THE WINDOW IS GONE (2026-09-14, on request): its sentence went first, and the button it left behind doubled the one in the window's own fade fifty pixels above it. The peek carries the link. */ /* HOW IT WORKS (handoff §5) */ /* HOW IT WORKS IS A STEPPER (2026-09-14, on request): one column, the copy centred, the three steps in a row joined by arrows. The second column — a "Preparing your report" frame, then an "Inside your report" card — went with it: both repeated what the steps beside them said. */ #asw-focused-hero-landing .lv2-how { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: center; text-align: left; max-width: 1200px; margin: 0 auto; padding: 64px 40px 56px; } #asw-focused-hero-landing .lv2-how h2, #asw-focused-hero-landing .lv2-faq h2 { margin-top: 10px; font-size: 38px; font-weight: 700; line-height: 1.1; letter-spacing: -.035em; } #asw-focused-hero-landing .lv2-how h2 { max-width: 640px; } /* THE STEPS ARE ONE LINE (2026-09-15): three columns on a hairline, divided by rules, each headed by a meter that fills one bar further than the last. It replaced a flex row of tiles joined by arrow pseudo-elements; the tiles (a field, the four assistant marks, a score ring) and their rules went with it, and `.lv2-ring--tiny` with them — the report window's own ring is untouched. */ #asw-focused-hero-landing .lv2-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid var(--asw-line); list-style: none; } #asw-focused-hero-landing .lv2-steps > li { display: grid; gap: 14px; align-content: start; padding: 0 28px; border-left: 1px solid var(--asw-line); } #asw-focused-hero-landing .lv2-steps > li:first-child { padding-left: 0; border-left: 0; } #asw-focused-hero-landing .lv2-steps > li:last-child { padding-right: 0; } #asw-focused-hero-landing .lv2-steps h3 { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; } /* ONE RAIL (2026-09-15, option 1 of `design/how-it-works-marks.html`, on request: three separate bars "looked too basic"). The three bars close up into a single 84px rail, filled a third further at each step, the ends rounded by the container and the seams invisible because abutting segments of one colour are one block. THE FILL IS STILL THE MARKUP, which is why the ``s stay rather than being replaced by a pseudo-element sized off `li:nth-child()`. The mockup drew it that way because a stylesheet cannot count `.is-on`; the page does not need to count, it already HAS the count. So what is drawn comes from what the markup says, the report-side rule one stylesheet over, and a step whose class changes redraws itself. It also keeps the other five options of that page a pure CSS change away. */ #asw-focused-hero-landing .lv2-step-ticks { display: inline-flex; gap: 0; width: 84px; border-radius: 999px; overflow: hidden; } #asw-focused-hero-landing .lv2-step-ticks i { flex: 1 1 0; height: 4px; border-radius: 0; background: var(--asw-line); } #asw-focused-hero-landing .lv2-step-ticks i.is-on { background: var(--asw-accent); } #asw-focused-hero-landing .lv2-run-bar { display: block; height: 8px; border-radius: 999px; background: var(--asw-line-soft); overflow: hidden; } #asw-focused-hero-landing .lv2-run-bar i { display: block; height: 100%; border-radius: inherit; background: var(--asw-accent); } /* EVERY WHOLE PERCENTAGE IS RULED (2026-10-10). The page may carry no inline styles, so a bar's width is a `data-fill` the stylesheet matches; only the Sep 13 sample's four values were ruled, and the next sample's 13% bar drew full width. All 101 rules cost about 6KB and no sample needs an edit here. `test_every_bar_on_the_page_has_a_width_rule` still reads them. */ #asw-focused-hero-landing .lv2-run-bar i[data-fill="0"] { width: 0%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="1"] { width: 1%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="2"] { width: 2%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="3"] { width: 3%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="4"] { width: 4%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="5"] { width: 5%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="6"] { width: 6%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="7"] { width: 7%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="8"] { width: 8%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="9"] { width: 9%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="10"] { width: 10%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="11"] { width: 11%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="12"] { width: 12%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="13"] { width: 13%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="14"] { width: 14%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="15"] { width: 15%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="16"] { width: 16%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="17"] { width: 17%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="18"] { width: 18%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="19"] { width: 19%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="20"] { width: 20%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="21"] { width: 21%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="22"] { width: 22%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="23"] { width: 23%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="24"] { width: 24%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="25"] { width: 25%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="26"] { width: 26%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="27"] { width: 27%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="28"] { width: 28%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="29"] { width: 29%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="30"] { width: 30%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="31"] { width: 31%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="32"] { width: 32%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="33"] { width: 33%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="34"] { width: 34%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="35"] { width: 35%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="36"] { width: 36%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="37"] { width: 37%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="38"] { width: 38%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="39"] { width: 39%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="40"] { width: 40%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="41"] { width: 41%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="42"] { width: 42%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="43"] { width: 43%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="44"] { width: 44%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="45"] { width: 45%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="46"] { width: 46%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="47"] { width: 47%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="48"] { width: 48%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="49"] { width: 49%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="50"] { width: 50%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="51"] { width: 51%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="52"] { width: 52%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="53"] { width: 53%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="54"] { width: 54%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="55"] { width: 55%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="56"] { width: 56%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="57"] { width: 57%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="58"] { width: 58%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="59"] { width: 59%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="60"] { width: 60%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="61"] { width: 61%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="62"] { width: 62%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="63"] { width: 63%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="64"] { width: 64%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="65"] { width: 65%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="66"] { width: 66%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="67"] { width: 67%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="68"] { width: 68%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="69"] { width: 69%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="70"] { width: 70%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="71"] { width: 71%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="72"] { width: 72%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="73"] { width: 73%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="74"] { width: 74%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="75"] { width: 75%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="76"] { width: 76%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="77"] { width: 77%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="78"] { width: 78%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="79"] { width: 79%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="80"] { width: 80%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="81"] { width: 81%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="82"] { width: 82%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="83"] { width: 83%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="84"] { width: 84%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="85"] { width: 85%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="86"] { width: 86%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="87"] { width: 87%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="88"] { width: 88%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="89"] { width: 89%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="90"] { width: 90%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="91"] { width: 91%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="92"] { width: 92%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="93"] { width: 93%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="94"] { width: 94%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="95"] { width: 95%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="96"] { width: 96%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="97"] { width: 97%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="98"] { width: 98%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="99"] { width: 99%; } #asw-focused-hero-landing .lv2-run-bar i[data-fill="100"] { width: 100%; } /* Review 1, §5: one row; the right-hand line does not wrap. */ /* WORKED EXAMPLE (handoff §6) */ /* The customer window, from `_landing_parts.html.j2`, in the design's dress. */ #asw-focused-hero-landing .asw-case-window { border: 1px solid var(--asw-line); border-radius: 12px; background: var(--asw-bg); overflow: hidden; } #asw-focused-hero-landing .asw-case-window-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; background: var(--asw-card); border-bottom: 1px solid var(--asw-line); font-size: 13px; font-weight: 600; } #asw-focused-hero-landing .asw-case-window-head span { display: inline-flex; align-items: center; gap: 8px; } #asw-focused-hero-landing .asw-case-window-head svg { width: 16px; height: 16px; } #asw-focused-hero-landing .asw-case-window-head small { font-size: 12px; font-weight: 400; color: var(--asw-faint); } #asw-focused-hero-landing .asw-case-body { display: grid; gap: 14px; padding: 18px; } #asw-focused-hero-landing .asw-case-question { max-width: 86%; justify-self: end; padding: 12px 16px; border-radius: 14px 14px 4px 14px; background: var(--asw-ink); color: #ffffff; font-size: 14.5px; line-height: 1.5; } #asw-focused-hero-landing .asw-case-reply { padding: 14px 16px; border: 1px solid var(--asw-line); border-radius: 14px 14px 14px 4px; background: var(--asw-card); font-size: 14.5px; line-height: 1.55; } #asw-focused-hero-landing .asw-case-reply ol { margin: 10px 0 0; padding-left: 20px; } #asw-focused-hero-landing .asw-case-reply li + li { margin-top: 8px; } #asw-focused-hero-landing .asw-case-reply li p { margin-top: 2px; font-size: 13.5px; color: var(--asw-muted); } #asw-focused-hero-landing .asw-case-note { font-size: 12px; color: var(--asw-faint); } #asw-focused-hero-landing .asw-case-note small { font-size: 1em; } /* FOUR THINGS YOU'LL KNOW (2026-09-14, Claude Design handoff 2B): a ledger. The heading in a 280px column, the four rows beside it, each `64px | 1fr` with a numeral in the accent. The handoff's colours are the page's tokens where they match — accent, ink, muted, faint, hairline. The rows' visuals (the 56, the word rows, the three actions) went on request on 2026-09-15; each row is its question and one sentence. */ #asw-focused-hero-landing .lv2-four { background: var(--asw-bg); padding: 64px 40px 72px; } #asw-focused-hero-landing .lv2-four-inner { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 72px; align-items: start; max-width: 1120px; margin: 0 auto; } #asw-focused-hero-landing .lv2-four-lead h2 { margin-top: 10px; font-size: 32px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; } #asw-focused-hero-landing .lv2-four-lead > p:not(.lv2-kicker) { margin-top: 14px; font-size: 15px; line-height: 1.55; color: var(--asw-muted); } #asw-focused-hero-landing .lv2-four-lead .lv2-btn-secondary { margin-top: 20px; } #asw-focused-hero-landing .lv2-four-lead svg { width: 14px; height: 14px; } #asw-focused-hero-landing .lv2-four-list { margin: 0; padding: 0; list-style: none; } #asw-focused-hero-landing .lv2-four-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 24px; align-items: start; padding: 28px 0; border-bottom: 1px solid var(--asw-line); } #asw-focused-hero-landing .lv2-four-row:first-child { padding-top: 0; } #asw-focused-hero-landing .lv2-four-row:last-child { padding-bottom: 0; border-bottom: 0; } #asw-focused-hero-landing .lv2-four-num { font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -.04em; color: var(--asw-accent-text); font-variant-numeric: tabular-nums; } #asw-focused-hero-landing .lv2-four-row h3 { margin-top: 6px; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; } #asw-focused-hero-landing .lv2-four-row h3 + p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--asw-muted); } #asw-focused-hero-landing .lv2-four-cap { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--asw-faint); } /* THE THREE WAYS (2026-09-14): one report beside a subscription and the work by hand, above the FAQ. The page's card — hairline, 12px radius, white — with the aiSaysWhat card lifted by the accent tint's border. The figure row is the report's own scale: a figure, then what it is a figure of. */ #asw-focused-hero-landing .lv2-plans { max-width: 1200px; margin: 0 auto; padding: 56px 40px; } /* 920 RATHER THAN THE 640 THE OTHER SECTION HEADS USE (2026-09-18, on request: the heading on one line). "AI visibility, without the hassle or the subscription." measures 875px at this section's 38px, so 640 broke it across two lines at every desktop width. The margin above 875 is for the system fallback face, which sets ~2% wider than Inter. Below roughly 960px of viewport it wraps again, which is the honest outcome — there is no width at which 53 characters fit a phone on one line. */ #asw-focused-hero-landing .lv2-plans-head { max-width: 920px; } #asw-focused-hero-landing .lv2-plans h2 { margin-top: 10px; font-size: 38px; font-weight: 700; line-height: 1.1; letter-spacing: -.035em; } #asw-focused-hero-landing .lv2-plans-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; } #asw-focused-hero-landing .lv2-plan { display: grid; align-content: start; gap: 14px; padding: 24px; border: 1px solid var(--asw-line); border-radius: 12px; background: var(--asw-card); } #asw-focused-hero-landing .lv2-plan--us { border-color: var(--asw-accent-tint-border); box-shadow: 0 0 0 3px var(--asw-accent-tint); } /* The two alternatives a clear step back (2026-09-15): an off-white ground the page's soft hairline tone, a plain hairline, the figure in the muted ink — visible, and plainly not the one to pick. Ours stays white with its ring. */ #asw-focused-hero-landing .lv2-plan:not(.lv2-plan--us) { background: var(--asw-line-soft); border-color: var(--asw-line); } #asw-focused-hero-landing .lv2-plan:not(.lv2-plan--us) .lv2-plan-fig b, #asw-focused-hero-landing .lv2-plan:not(.lv2-plan--us) .lv2-plan-list { color: var(--asw-muted); } #asw-focused-hero-landing .lv2-plan-kind { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--asw-faint); } #asw-focused-hero-landing .lv2-plan--us .lv2-plan-kind { color: var(--asw-accent-text); } #asw-focused-hero-landing .lv2-plan-fig { display: flex; align-items: baseline; gap: 8px; margin: 0; } #asw-focused-hero-landing .lv2-plan-fig b { font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--asw-ink); font-variant-numeric: tabular-nums; } #asw-focused-hero-landing .lv2-plan-fig span { font-size: 13.5px; color: var(--asw-muted); } #asw-focused-hero-landing .lv2-plan-line { margin: -4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--asw-muted); } #asw-focused-hero-landing .lv2-plan-list { display: grid; gap: 8px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--asw-line-soft); list-style: none; font-size: 14px; line-height: 1.45; color: var(--asw-ink); } #asw-focused-hero-landing .lv2-plan-list li { position: relative; padding-left: 22px; } #asw-focused-hero-landing .lv2-plan-list li::before { content: "·"; position: absolute; left: 6px; top: 0; font-weight: 700; color: var(--asw-faint); } #asw-focused-hero-landing .lv2-plan-list--check li::before { content: "✓"; left: 0; font-size: 13px; color: var(--asw-accent-text); } #asw-focused-hero-landing .lv2-plan-list--steps { counter-reset: diy; } #asw-focused-hero-landing .lv2-plan-list--steps li { counter-increment: diy; } #asw-focused-hero-landing .lv2-plan-list--steps li::before { content: counter(diy); left: 0; font-size: 12px; font-weight: 600; color: var(--asw-faint); font-variant-numeric: tabular-nums; } #asw-focused-hero-landing .lv2-plan-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; } #asw-focused-hero-landing .lv2-plan-actions .lv2-btn { min-height: 36px; padding: 0 14px; font-size: 13px; } /* FAQ (handoff §7) */ #asw-focused-hero-landing .lv2-faq { max-width: 800px; margin: 0 auto; padding: 56px 40px; text-align: center; } #asw-focused-hero-landing .lv2-faq h2 { margin-bottom: 28px; } #asw-focused-hero-landing .lv2-faq-list { display: grid; gap: 8px; text-align: left; } #asw-focused-hero-landing .lv2-faq details { padding: 16px 20px; border: 1px solid var(--asw-line); border-radius: 8px; background: var(--asw-card); } #asw-focused-hero-landing .lv2-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; list-style: none; cursor: pointer; font-size: 16px; font-weight: 600; min-height: 44px; } /* min-height (2026-10-10, mobile QA): each question drew a 28px tap target on a phone. */ #asw-focused-hero-landing .lv2-faq summary::-webkit-details-marker { display: none; } #asw-focused-hero-landing .lv2-faq summary i { flex: none; font-style: normal; font-size: 20px; font-weight: 400; line-height: 1; color: var(--asw-faint); } #asw-focused-hero-landing .lv2-faq summary i::before { content: "+"; } #asw-focused-hero-landing .lv2-faq details[open] summary i::before { content: "−"; } #asw-focused-hero-landing .lv2-faq details p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--asw-muted); } /* CLOSING CTA + FOOTER (handoff §8) */ #asw-focused-hero-landing .lv2-closing { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 760px; margin: 0 auto; padding: 72px 40px; text-align: center; } #asw-focused-hero-landing .lv2-closing-lead { font-size: 17px; line-height: 1.55; color: var(--asw-on-dark-muted); } #asw-focused-hero-landing .lv2-footer { max-width: 1200px; margin: 0 auto; border-top: 1px solid var(--asw-hair-dark); } #asw-focused-hero-landing .lv2-footer-top { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); gap: 48px; padding: 40px 40px 16px; font-size: 14px; color: var(--asw-on-dark-muted); } #asw-focused-hero-landing .lv2-wordmark--footer { font-size: 16px; } #asw-focused-hero-landing .lv2-footer-brand p { max-width: 340px; margin-top: 12px; } #asw-focused-hero-landing .lv2-footer-brand small { font-size: 13px; color: var(--asw-on-dark-faint); } #asw-focused-hero-landing .lv2-footer-nav p { font-weight: 600; color: var(--asw-on-dark-strong); } #asw-focused-hero-landing .lv2-footer-nav ul { margin: 10px 0 0; padding: 0; list-style: none; } #asw-focused-hero-landing .lv2-footer-nav li { padding: 5px 0; } #asw-focused-hero-landing .lv2-footer-nav a { display: inline-flex; align-items: center; min-height: 24px; text-decoration: none; } #asw-focused-hero-landing .lv2-footer-nav a:hover { color: var(--asw-on-dark-strong); text-decoration: underline; text-underline-offset: 4px; } #asw-focused-hero-landing .lv2-footer-legal { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 40px 28px; border-top: 1px solid var(--asw-hair-dark-soft); font-size: 12.5px; color: var(--asw-on-dark-faint); } #asw-focused-hero-landing .lv2-footer-legal nav { display: flex; gap: 20px; } #asw-focused-hero-landing .lv2-footer-legal a { display: inline-flex; align-items: center; min-height: 24px; color: inherit; text-decoration: none; } #asw-focused-hero-landing .lv2-footer-legal a:hover { color: var(--asw-on-dark-strong); text-decoration: underline; text-underline-offset: 3px; } #asw-focused-hero-landing .lv2-footer-legal small { font-size: 1em; } /* THE SAMPLE READER, on this page: the shared sheet draws it in `--bv-*` tokens (mapped above); these three give its toolbar the page's buttons. */ #asw-focused-hero-landing .asw-reader-toolbar .bv-primary { min-height: 40px; padding: 0 16px; font-size: 14px; } /* RESPONSIVE (handoff "Responsive") */ /* ── ONE SCORECARD HEIGHT FOR EVERY PANEL ────────────────────────────────── (2026-09-18, on request: the scorecards should be the same dimensions on each page.) The window has four tabs and each drew its band to its own content, so switching tabs moved the whole page under the reader: Visibility 116px · Narrative 103 · Sources 103 · Recommendations 87 Visibility is the tall one because it has four cells rather than three, so they are narrower and two of its labels wrap — "MOST-MENTIONED COMPETITOR" and "STRONGEST PURCHASE STAGE". Nothing is wrong with any single band; they simply had no reason to agree. 116 IS THE TALLEST, MEASURED, not a round number. Equalising upward costs whitespace in the Recommendations band and equalising downward would cost a wrapped label somewhere, which is the one thing that cannot be traded. `min-height` on the CELL, not a height on the band: the cells already stretch to their row, so a floor on the cell raises every band to the same line while still letting one grow if its content ever needs to. A fixed height would clip instead. ABOVE 1100 ONLY. At that width the band drops to two columns and every panel already measures 183px — equal without help — and a 116px floor per cell would push that to 242. A rule that fixes one range must be asked whether it damages the next. */ @media (min-width: 1101px) { /* 116px until 2026-09-19, when the cards went. That number was the card's: content plus 15px of padding top and bottom. "Ledger" removed the padding and left the floor, so every cell held ~30px of enforced emptiness and the band read as a dead zone above its rule — worst on Sources, whose three cells are shorter than Visibility's four. The floor still earns its keep (it is what lets the titles line up across cells while the rest centres under them), so it is kept and re-measured rather than dropped. */ #asw-focused-hero-landing .lv2-cell { min-height: 86px; } /* THE TITLE SITS AT THE TOP, THE REST CENTRES UNDER IT (2026-09-18, on request). Centring the whole cell — which is what this block did first — floats the label down with everything else, so a short card's title stops lining up with a tall card's. The title is the thing a reader scans across four cards; it has to hold one line. Flex column with AUTO MARGINS rather than a second wrapper: `small` keeps its natural place at the top, `margin-top: auto` on the value absorbs the free space above it and `margin-bottom: auto` on the last child absorbs what is left below, which centres the value-and-sub-line pair in whatever the title did not use. No markup changes and nothing to keep in sync. `> :last-child` rather than `> span`, so a cell whose last line is the value itself still gets its lower absorber and centres rather than dropping to the floor of the card. */ #asw-focused-hero-landing .lv2-cell:not(.lv2-cell--score) { display: flex; flex-direction: column; } #asw-focused-hero-landing .lv2-cell:not(.lv2-cell--score) > strong { margin-top: auto; } #asw-focused-hero-landing .lv2-cell:not(.lv2-cell--score) > :last-child { margin-bottom: auto; } /* THE SCORE CELL IS THE SAME IDEA THROUGH A GRID, because its title has to clear BOTH columns — the ring as well as the text — to sit level with the other three. Its label is marked up inside the text block, so `display: contents` lifts that block's children into the cell's own grid and lets the label span the full width while the ring stays beside the value. Three rows: the title, then two that share what is left. The value sits at the END of the first and the sub-line at the START of the second, so the pair meets on the boundary — the middle of the space under the title — and the ring spans both and centres on the same line. */ #asw-focused-hero-landing .lv2-cell--score { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr 1fr; column-gap: 12px; row-gap: 0; align-items: center; } #asw-focused-hero-landing .lv2-cell--score > div:not(.lv2-ring) { display: contents; } #asw-focused-hero-landing .lv2-cell--score > div:not(.lv2-ring) > small { grid-column: 1 / -1; grid-row: 1; } #asw-focused-hero-landing .lv2-cell--score > .lv2-ring { grid-column: 1; grid-row: 2 / span 2; align-self: center; } #asw-focused-hero-landing .lv2-cell--score > div:not(.lv2-ring) > strong { grid-column: 2; grid-row: 2; align-self: end; margin: 0; } #asw-focused-hero-landing .lv2-cell--score > div:not(.lv2-ring) > span { grid-column: 2; grid-row: 3; align-self: start; } } @media (max-width: 1100px) { #asw-focused-hero-landing .lv2-how { padding-left: 24px; padding-right: 24px; } #asw-focused-hero-landing .lv2-nav { padding-left: 24px; padding-right: 24px; } #asw-focused-hero-landing .lv2-how { grid-template-columns: minmax(0, 1fr); gap: 40px; } #asw-focused-hero-landing .lv2-four { padding-left: 24px; padding-right: 24px; } #asw-focused-hero-landing .lv2-four-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; } #asw-focused-hero-landing .lv2-band { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } #asw-focused-hero-landing .lv2-window { margin-left: 24px; margin-right: 24px; } /* The headline's two lines hold on a tablet only at a smaller face: at 66px "When customers ask AI," is wider than a 768px screen. */ #asw-focused-hero-landing .lv2-hero h1 { font-size: 52px; } } /* ── THE PROOF STATS STACK BELOW 1089px (2026-09-18, on request: the 58% sentence was setting on three lines) ───────────────────────────────────── THE NUMBER IS MEASURED, NOT CHOSEN. "of consumers prefer recommendations from AI over search" needs 231px to hold two lines; three across, the sentence's box is about (viewport - 188px of gutters) / 3 - 86. Swept in 10px steps: 1090 gives it 230px and two lines, 1080 gives 227 and three. So the row survives exactly as far as it actually works, and stacks one pixel below that. RAISED TO 1135 (2026-09-18), after the band went to 1200px and the widths were re-measured in Inter rather than in the fallback. Two lines now holds down to 1106 EXACTLY — 235px of box against 235px needed — and a breakpoint set on a nil margin is the bug this whole section is about. 1135 is the narrowest width that keeps about 10px in hand (box 245), so a hair of difference in rendering cannot flip the row back to three lines. NO GUTTER-TRIMMING WOULD HAVE DONE IT. The whole chrome — band padding, both column gaps, all six cell gutters — is 188px, or 63 per cell, and at 900px the sentence is 64px short on its own. Buying it back everywhere still leaves 800px three lines. The width had to come from the layout. WHAT STAYS: the cell's own shape. The block at `min-width: 761px` already holds the source under the number and the sentence centred beside it, and it applies here too — a stacked row is the same cell, given the width of the page instead of a third of it. Only the BAND changes: one column, and the cells divided by rules across instead of rules down. The phone block below still takes over at 760: its 82px right-aligned number column and its source under the SENTENCE are a different design for a different width, and this does not disturb it. */ @media (max-width: 1135px) { #asw-focused-hero-landing .lv2-proof { grid-template-columns: minmax(0, 1fr); gap: 0; } /* All three selectors, because `:nth-child(1)` and `:nth-child(3)` carry the outer cells' asymmetric gutters and would otherwise survive this. */ #asw-focused-hero-landing .lv2-proof-item, #asw-focused-hero-landing .lv2-proof-item:nth-child(1), #asw-focused-hero-landing .lv2-proof-item:nth-child(3) { /* A SHARED FLOOR FOR THE LEFT COLUMN, or the three sentences do not line up. Each cell is its own grid, so an `auto` column is sized per ROW: the first two hold "58%" and "Capgemini" and came out 72px, the third holds "1,219%" and "Digital Commerce 360" and came out 123 — which started the bottom sentence 51px right of the two above it. Side by side that never showed, because the columns were never meant to agree. 131 is the widest of the three, measured, plus one. `minmax(131px, auto)` rather than a flat `131px` so that a longer source or a wider figure GROWS the column for that row instead of spilling out of it: one row out of line is a blemish, a clipped citation is a defect. IT WAS 124 UNTIL THE SOURCE WENT BACK ON ONE LINE (2026-09-18). With "(US)" on its own line the third row's column was 123; with "Digital Commerce 360 (US)" together it is 130, so the floor no longer covered it and that row alone sat 6px right of the two above. The `minmax` did its job — it grew rather than clipped — which is exactly why the symptom was a blemish to re-measure and not a defect to discover later. A number measured off the content has to be re-measured when the content moves. */ grid-template-columns: minmax(131px, auto) minmax(0, 1fr); padding: 15px 0; border-left: 0; border-top: 1px solid var(--asw-hair-dark-soft); } #asw-focused-hero-landing .lv2-proof-item:first-child { padding-top: 0; border-top: 0; } } @media (max-width: 760px) { #asw-focused-hero-landing.lv2 { font-size: 14.5px; } body.lv2-page .betabar { padding: 10px 16px; font-size: 13px; } #asw-focused-hero-landing .lv2-nav { padding: 12px 20px; } #asw-focused-hero-landing .lv2-nav-items a:not(.lv2-btn) { display: none; } /* THE PHONE'S FIRST SCREEN, THINNED (2026-09-12, from a phone: "too crowded at the top"). Nine things sat on it at nearly one weight. The pill and the first microcopy line go — the headline says who it is for and the no-card line is the one that matters — the nav button and assistants row step down a size, and the copy gets a little more air. Desktop is as the design has it. */ #asw-focused-hero-landing .lv2-btn--nav { min-height: 34px; padding: 0 12px; font-size: 12.5px; } /* THE PHONE'S OWN DESIGN PASS (2026-09-12): the same units in the same order, set for a 390px screen rather than squeezed from 1440. */ body.lv2-page .betabar, body.lv2-page .betabar strong { color: #a3a9b4; } /* The hero and the band fill a phone's first screen (on request, 2026-09-13: the white window was showing before any scroll on an iPhone). Wider gaps between the hero's lines and a deeper band put the window's top past ~790px, under the fold of a 390x844 phone with Safari's bars showing. */ /* THE PHONE GETS SOME OF THE ROOM TOO (2026-09-19, on request). "Gallery" was deliberately held to 761 and up on the grounds that a phone has no space to spend — which was true of the DESKTOP numbers (210px of padding would have put the form under the fold) and not true of the idea. Measured before choosing: the form used to end at 462px with the models row done by 548, against roughly 700px of visible page on an iPhone. There was room. 76 and 40 against 48 and 30 — about the same proportion the desktop took, scaled to what is here. The form now ends near 520, so the call to action and everything above it still land on the first screen. THE THREE PULLS STAY ON THE PHONE, unlike above 760. They keep the small print tight under the form, and that grouping is worth MORE here than on the desktop, not less: the narrower the column, the more a floating line of small print reads as unrelated to the box above it. */ #asw-focused-hero-landing .lv2-hero-copy { gap: 40px; padding: 76px 20px 0; } /* THE HORIZON, FINER AND FAINTER ON A PHONE. The copy starts 48px below the hero here against 100px on the desktop, so the grid's brightest rows land ON the headline rather than above it — and at 390px the 78px cells leave only five columns, which fan out as a handful of bold diagonals instead of reading as a grid. Twice as many columns at half the strength turns them back into texture. THE ROW HEIGHT IS DELIBERATELY UNCHANGED: `lv2-horizon` travels exactly 46px, so a different vertical cell here would make the loop jump every nine seconds. Only the column width and the ink move. */ /* AND THE NEAR EYE IS KEPT HERE (2026-09-19). The desktop pushed the perspective back from 320px to 900 to buy length; a phone is not buying any — the height below stays 170px, for the reason in the paragraph above — so all it would get is the flattening. Measured at 390px: the 40px columns stop converging and land as ten discrete near-vertical strokes under the nav, a row of tick marks rather than the texture this block exists to produce. The narrow cells and the near eye were tuned together and only work together. */ /* THE DESKTOP'S HALFWAY GRID (2026-10-01) DOES NOT COME HERE. Its mask stops are percentages of a 260%-tall layer; on this 170px one they would end the grid 34px under the nav. So the phone keeps its own fade, and takes only the change of ink — gray, at the same ratio to the desktop's that the old .11 had to .2. */ #asw-focused-hero-landing .lv2-hero::before { --asw-horizon: rgba(255, 255, 255, .04); height: 170px; background-size: 40px 46px; transform: perspective(320px) rotateX(64deg); -webkit-mask-image: linear-gradient(transparent, #000 42px, transparent 80%); mask-image: linear-gradient(transparent, #000 42px, transparent 80%); } #asw-focused-hero-landing .lv2-hero h1 { margin-bottom: 2px; } /* The category sentence on its own line in white, the promise beneath it. */ /* Three single lines under the form: the category, the promise, the marks. Neither the category with the promise nor the marks with their lead-in fits one 350px line at a legible size, so each gets its own. */ #asw-focused-hero-landing .lv2-micro { font-size: 12px; line-height: 1.5; color: var(--asw-on-dark-faint); } /* THE PAIR STACKS HERE, and this rule ships WITH the desktop one rather than after it. Side by side at 390px each half would get about 170px — narrower than the proof band's 82px figure column that had to be rescued the night before, and for the same reason: a phrase in 170px is not a phrase, it is a column of words. Stacked, the category reads as the label of the sentence under it, which is the role it had in the footnote line anyway. */ #asw-focused-hero-landing .lv2-lead-row { flex-direction: column; align-items: center; gap: 6px; } #asw-focused-hero-landing .lv2-lead-cat { font-size: 13.5px; font-weight: 600; color: var(--asw-on-dark-muted); } #asw-focused-hero-landing .lv2-lead-row .lv2-lead { max-width: none; text-align: center; } #asw-focused-hero-landing .lv2-hero-copy .asw-form { margin-bottom: -2px; } /* 33px is the largest size at which "When customers ask AI," holds one line on a 390px screen (343px of 350, measured); the headline is two lines. */ #asw-focused-hero-landing .lv2-hero h1 { font-size: 33px; line-height: 1.1; letter-spacing: -.035em; } /* The break after "ask AI," as on the desktop: the first half wraps to two lines and the question stays whole on the third. */ #asw-focused-hero-landing .lv2-hero h1 .lv2-h1-line { display: block; } #asw-focused-hero-landing .lv2-lead { max-width: 34ch; font-size: 16px; line-height: 1.5; } /* THE PAIR IS TWO LINES ON A PHONE, AND SAYS SO. 390px will not hold both sentences at any readable size, so the row wraps whatever it is told — which is fine, except that a wrapped separator lands at the START of the second line, a dot with nothing before it. Hidden here, and the row becomes what it already looks like: the lead, then the offer under it. THE OFFER GOES BACK TO ITS PHONE SIZE. On the desktop the two share 19px because they share a line; stacked, a 19px offer is as loud as the lead it is an aside to, which is the hierarchy the phone block already decided at 12px for this line. */ #asw-focused-hero-landing .lv2-joined { gap: 6px 0; } #asw-focused-hero-landing .lv2-joined .lv2-lead { max-width: 34ch; font-size: 16px; line-height: 1.5; } #asw-focused-hero-landing .lv2-joined .lv2-micro { flex: 1 0 100%; font-size: 12px; line-height: 1.5; color: var(--asw-on-dark-faint); } #asw-focused-hero-landing .asw-form { flex-direction: column; } #asw-focused-hero-landing .asw-form { gap: 8px; } #asw-focused-hero-landing .asw-form input, #asw-focused-hero-landing .asw-form .lv2-btn { width: 100%; height: 50px; min-height: 50px; } #asw-focused-hero-landing .asw-form input { font-size: 16px; } /* The hero's button a tenth narrower and shorter than the field above it (on request, 2026-09-13): 90% wide, centred, 45px against the field's 50. */ #asw-focused-hero-landing .lv2-hero .asw-form .lv2-btn { width: 90%; height: 45px; min-height: 45px; align-self: center; } #asw-focused-hero-landing .lv2-assistants { flex-wrap: nowrap; gap: 7px; margin-top: -2px; font-size: 11px; white-space: nowrap; color: var(--asw-on-dark-faint); } #asw-focused-hero-landing .lv2-assistants svg { width: 12px; height: 12px; } #asw-focused-hero-landing .lv2-assistants span { gap: 4px; } #asw-focused-hero-landing .lv2-assistants .lv2-assistants-lead { margin: 0 2px 0 0; font-size: 11px; color: var(--asw-on-dark-faint); } #asw-focused-hero-landing .lv2-assistants svg { width: 13px; height: 13px; } /* THE PROOF BAND IS A LIST ON THE PHONE (2026-09-15, on request: the spacing read as unnatural). It was the desktop's row squeezed into columns — two figures at 22px over sentences at 10.5px, each about 150px wide, which is four or five words a line. A phone has one column to spend, so it spends it: one statistic a row, the figure in its own narrow column and right-aligned so the sentences share a left edge, at a size somebody can actually read. A hairline between rows, none above the first. STILL TWO STATISTICS, NOT THREE (on request, 2026-09-13): the 58% and the 1,200%; the 53% is the one that goes. The desktop keeps all three, and that decision is untouched here — this is about the spacing around them. The band runs on under the window's top edge, so the window rises out of it the way it rises out of the hero on the desktop; the bottom padding is what leaves room for that. */ #asw-focused-hero-landing .lv2-proof { grid-template-columns: minmax(0, 1fr); gap: 0; align-items: stretch; margin: 64px 0 0; padding: 8px 20px 92px; border-top: 0; background: var(--asw-dark-2); } /* THE FIGURE PRINTED THROUGH ITS OWN LABEL (2026-09-16, reported from an iPhone: "the bottom right o in the percent sign covers the R in Rise"). The track was 74px and "1,219%" set 94px of ink at 26px; a grid item overflows VISIBLY, so nothing clipped and the tail of the "%" landed on the "R" — the line read "1,219%ise in retail visits". "58%" is 56px and fitted, which is why the row above it looked right. FIXED ON THE TYPE, ON REQUEST, rather than on the column alone. 74px needs the figure at 20px to fit, which is a quarter off the number this band is built around; 98px keeps 26px and takes the space out of the label, which costs a third line at 320. 22px in an 82px track is the version where each gives up a little: measured, the label still sets two lines at 390. A FIXED TRACK IS WHAT MAKES THE FIGURES LINE UP — each row is its own grid, so `auto` would size every row to its own number and the column would go ragged. So the track must hold the widest figure the band can show. ADDING A WIDER ONE MEANS CHANGING BOTH NUMBERS HERE, and `qa_landing` case 6c fails when ink overflows its box rather than letting the page print through itself again. */ /* THE FIGURE TRACK HAS A FLOOR, NOT A FIXED WIDTH (2026-09-22). It was a hard `82px`, chosen with the 22px type below as one decision and measured on a Mac, where "1,219%" sets 82px and fits exactly. On Linux the same string sets 88, so six pixels of it were painted over whatever sits beside it — at 320, 390 and 414, on every Android and Linux visitor, and invisible to anyone checking on a Mac. `qa_landing` case 6c reported it for weeks and it took a deliberately red CI build to name the element. `minmax(82px, max-content)` keeps the 82 where the digits fit and lets the track grow where they do not. A number's width is a function of the face and the digits; this band has now been bitten twice by a figure that outgrew a number somebody measured once. */ #asw-focused-hero-landing .lv2-proof-item, #asw-focused-hero-landing .lv2-proof-item:nth-child(1), #asw-focused-hero-landing .lv2-proof-item:nth-child(3) { display: grid; grid-template-columns: minmax(82px, max-content) minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 15px 0; border: 0; border-top: 1px solid var(--asw-hair-dark-soft); } #asw-focused-hero-landing .lv2-proof-item:first-child { border-top: 0; } /* 22px, DOWN FROM 26 — see the note on the track above; the two numbers are one decision and must move together. */ #asw-focused-hero-landing .lv2-proof-item b, #asw-focused-hero-landing .lv2-proof-item:nth-child(3) b { display: block; min-width: 0; margin: 0; font-size: 22px; text-align: right; } #asw-focused-hero-landing .lv2-proof-fig { min-width: 0; text-align: right; } #asw-focused-hero-landing .lv2-proof-item p { padding: 0; font-size: 12.5px; line-height: 1.45; text-wrap: pretty; } /* ALL THREE STATS BELOW 760px (2026-09-17, on request). The 53% cell was hidden here by `07f711f`, also on request — "below 760px the 53% cell is the one hidden now; the desktop keeps all three" — and it is wanted back. Nothing else has to change: the stacked grid above is written for `.lv2-proof-item` generally, so the row it had been skipping picks up the same 82px figure column and the same hairline above it, and "53%" is narrower than the "1,219%" that track was sized to hold. */ /* On the panel's lighter navy the faint grey is 4.47:1; the muted one is 7. */ #asw-focused-hero-landing .lv2-proof-text p.lv2-proof-cite { padding-top: 4px; font-size: 10.5px; color: var(--asw-on-dark-muted); } /* THE SCOPE KEEPS THE SOURCE'S SIZE ON A PHONE. Desktop drops it a step, but .9 of the phone's 10.5px is 9.45px and `qa_landing` case 6 holds a 9.5px floor — it caught exactly that, 0.05px under. There is no room for a step here, so the step is given up rather than the floor. */ #asw-focused-hero-landing .lv2-proof-scope { font-size: 1em; } #asw-focused-hero-landing .lv2-proof-cite a { color: var(--asw-on-dark-muted); } #asw-focused-hero-landing .lv2-window { margin: -48px 12px -140px; border-radius: 14px; } #asw-focused-hero-landing .lv2-window-title { margin: 12px 16px 0; } #asw-focused-hero-landing .lv2-window-title h2 { font-size: 18px; } #asw-focused-hero-landing .lv2-window-title + .lv2-window { margin-top: 14px; } #asw-focused-hero-landing .lv2-light { padding-top: 172px; } #asw-focused-hero-landing .lv2-window-body { grid-template-columns: minmax(0, 1fr); } #asw-focused-hero-landing .lv2-window-side { display: none; } #asw-focused-hero-landing .lv2-window-main { gap: 12px; padding: 12px 14px 14px; } /* THE PHONE IS THE DESKTOP, SMALLER (2026-09-15, on request: the mockup was not consistent between them). It had its own treatment — a 620px frame the spoke scrolled inside, a sticky underline tab row, and a head naming the report because the sidebar is hidden here. All three are gone: same pills, same clipped frame, same peek, and every shared property is stated once above. NO NESTED SCROLLING, which the 620px frame needed and a touch reader fights: one page, one scroll. What differs is only this. */ #asw-focused-hero-landing .lv2-tabs, #asw-focused-hero-landing .lv2-peek { display: flex; } #asw-focused-hero-landing .lv2-window-main { max-height: 420px; overflow: hidden; } /* ALL FOUR ON ONE ROW (2026-09-15, on request): "Recommendations" is twice the width of its neighbours, so at 12.5px/14px the row wrapped. Smaller type and tighter padding fit the four on one row from 360px up; the 44px touch floor (qa_phoneforms) is untouched, since height does not depend on either. "THE NARROWEST PHONE THE PROBES SWEEP" IS WHAT THIS SAID, and it was not true — the probes sweep 320 as well. Measured there: the four buttons want 285px plus 9px of gaps against a 266px panel, so they wrap to two rows, and they always did. The layout is fine and deliberately left alone; forcing four onto 266px means type around 9px, which is below the ramp's own floor. Only the claim was wrong, and a comment that overstates its coverage is the kind that gets trusted later. */ #asw-focused-hero-landing .lv2-tabs { gap: 3px; } #asw-focused-hero-landing .lv2-tabs button { min-height: 44px; padding: 0 7px; font-size: 10.5px; letter-spacing: -.01em; white-space: nowrap; } #asw-focused-hero-landing .lv2-peek { height: 110px; padding-bottom: 14px; } #asw-focused-hero-landing .lv2-peek .lv2-btn-secondary { min-height: 44px; } #asw-focused-hero-landing .lv2-bars li { grid-template-columns: 112px minmax(0, 1fr) 40px; gap: 10px; } #asw-focused-hero-landing .lv2-trend-svg { height: 110px; } /* The two Sources charts stack on the phone; the ring shrinks to a key's height. */ #asw-focused-hero-landing .lv2-duo { grid-template-columns: minmax(0, 1fr); } #asw-focused-hero-landing .lv2-kinds-row { grid-template-columns: minmax(0, 1fr) 104px; gap: 12px; } #asw-focused-hero-landing .lv2-donut { width: 104px; height: 104px; } #asw-focused-hero-landing .lv2-bars--sites li { grid-template-columns: 124px minmax(0, 1fr) 40px; } /* The recommendations' tag column narrows; the numeral and its subject sit on one line. */ #asw-focused-hero-landing .lv2-rec { grid-template-columns: minmax(0, 1fr); gap: 6px; } #asw-focused-hero-landing .lv2-rec-tag b { display: inline; margin: 0 6px 0 0; font-size: 13px; } #asw-focused-hero-landing .lv2-col-themes { display: none; } #asw-focused-hero-landing .lv2-col-kind { display: none; } #asw-focused-hero-landing .lv2-trend-months { font-size: 10.5px; } /* The estimates note stays off the phone (on request, 2026-09-13): the pale stretch and the "est." labels still mark the months; the sentence is in the spoken text and on the desktop. */ #asw-focused-hero-landing .lv2-trend-note { display: none; } #asw-focused-hero-landing .lv2-answers li { grid-template-columns: minmax(0, 1fr); gap: 4px; } /* THE SCORECARDS ON ONE ROW (on request, 2026-09-13): smaller type, no sub-lines ("14 answers", "named in 79% of deciding answers"), the mention-rate cell folded away as before. The score cell gets a wider column for its ring; the ring's number stays on the 9.5px floor. */ #asw-focused-hero-landing .lv2-band { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); gap: 6px; } #asw-focused-hero-landing .lv2-band--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } #asw-focused-hero-landing .lv2-band--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } #asw-focused-hero-landing .lv2-cell { padding: 8px 7px; } #asw-focused-hero-landing .lv2-cell small { font-size: 9.5px; line-height: 1.2; letter-spacing: .04em; } #asw-focused-hero-landing .lv2-cell strong { margin: 4px 0 0; font-size: 12px; line-height: 1.2; } /* The sub-lines only — direct children, or the score cell's text column — never the ring's own span, which holds the number. */ #asw-focused-hero-landing .lv2-cell > span, #asw-focused-hero-landing .lv2-cell > div:not(.lv2-ring) > span { display: none; } #asw-focused-hero-landing .lv2-cell--score { grid-template-columns: auto minmax(0, 1fr); gap: 6px; } #asw-focused-hero-landing .lv2-ring { width: 36px; height: 36px; } #asw-focused-hero-landing .lv2-ring::before { inset: 4px; } #asw-focused-hero-landing .lv2-ring > span b { font-size: 11px; } #asw-focused-hero-landing .lv2-ring > span small { display: none; } #asw-focused-hero-landing .lv2-cell--rate { display: none; } #asw-focused-hero-landing .lv2-table { font-size: 12px; } #asw-focused-hero-landing .lv2-table th, #asw-focused-hero-landing .lv2-table td { padding: 9px 6px; } #asw-focused-hero-landing .lv2-table th:first-child, #asw-focused-hero-landing .lv2-table td:first-child { width: 42%; } #asw-focused-hero-landing .lv2-table .lv2-long { display: none; } #asw-focused-hero-landing .lv2-table .lv2-short { display: inline; } /* BELOW THE FOLD, THE SAME PASS (2026-09-12): tighter section padding, one headline size, the frames closer to their copy, the footer compact. */ #asw-focused-hero-landing .lv2-how, #asw-focused-hero-landing .lv2-faq { padding: 48px 20px; } #asw-focused-hero-landing .lv2-plans { padding: 48px 20px; } #asw-focused-hero-landing .lv2-plans h2 { margin-top: 8px; font-size: 31px; line-height: 1.1; letter-spacing: -.03em; } #asw-focused-hero-landing .lv2-plans-row { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 24px; } #asw-focused-hero-landing .lv2-plan { padding: 18px; } /* Both buttons on the phone's 44px touch floor; the desktop rule on `.lv2-btn` outranks a bare `a`. */ #asw-focused-hero-landing .lv2-plan-actions .lv2-btn, #asw-focused-hero-landing .lv2-plan-actions .lv2-btn-secondary { flex: 1 1 auto; min-height: 44px; } #asw-focused-hero-landing .lv2-how { gap: 28px; } #asw-focused-hero-landing .lv2-how h2, #asw-focused-hero-landing .lv2-faq h2 { margin-top: 8px; font-size: 31px; line-height: 1.1; letter-spacing: -.03em; } #asw-focused-hero-landing .lv2-steps { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 22px; padding-top: 20px; } #asw-focused-hero-landing .lv2-steps > li { gap: 10px; padding: 0; border-left: 0; } #asw-focused-hero-landing .lv2-steps h3 { font-size: 16.5px; } #asw-focused-hero-landing .lv2-four { padding: 48px 20px 56px; } #asw-focused-hero-landing .lv2-four-inner { grid-template-columns: minmax(0, 1fr); gap: 36px; } #asw-focused-hero-landing .lv2-four-lead h2 { font-size: 28px; } #asw-focused-hero-landing .lv2-four-row { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 24px 0; } #asw-focused-hero-landing .lv2-four-num { font-size: 36px; } #asw-focused-hero-landing .lv2-four-row h3 { font-size: 20px; } #asw-focused-hero-landing .lv2-long { display: none; } #asw-focused-hero-landing .lv2-faq h2 { margin-bottom: 20px; } #asw-focused-hero-landing .lv2-faq summary { min-height: 44px; font-size: 15.5px; } #asw-focused-hero-landing .lv2-faq details p { font-size: 14.5px; } #asw-focused-hero-landing .lv2-closing { gap: 16px; padding: 52px 20px 40px; } #asw-focused-hero-landing .lv2-closing-lead { font-size: 15.5px; } #asw-focused-hero-landing .lv2-footer-top { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px 20px; padding: 28px 20px 8px; font-size: 13.5px; } #asw-focused-hero-landing .lv2-footer-brand p { margin-top: 8px; } #asw-focused-hero-landing .lv2-footer-nav ul { margin-top: 6px; } #asw-focused-hero-landing .lv2-footer-brand { grid-column: 1 / -1; } #asw-focused-hero-landing .lv2-footer-nav a, #asw-focused-hero-landing .lv2-footer-nav li > span, #asw-focused-hero-landing .lv2-footer-legal a { display: inline-flex; align-items: center; min-height: 44px; } #asw-focused-hero-landing .lv2-footer-legal { padding: 14px 20px 22px; font-size: 12px; } } /* THE ASSISTANT ROW WRAPS ON A SMALL PHONE (2026-09-18). The phone block above pins "Checked across · ChatGPT · Gemini · Claude · Perplexity" to ONE line — `flex-wrap: nowrap` with `white-space: nowrap` — and it was tuned to fit 390px. It measures 354px, so at 320 it hung 17px off BOTH edges: "Checked across" started at x=-17 with its C sliced in half, and "Perplexity" ran past the right. Clipped rather than scrollable, because nothing on that dark band scrolls sideways. Letting it wrap is the whole fix, and it restores the behaviour rather than inventing one: the row is `flex-wrap: wrap` at every width above 760 already. 390 and up are untouched, so the one-line row the 2026-09-15 pass chose still stands where it fits. THIS BLOCK GOES AFTER THE 760px BLOCK, NOT INSIDE IT, and the first attempt put it inside — one `}` too early, which closed the phone block at the assistant rules and swept EVERY REMAINING PHONE RULE into a 360px query. The braces still balanced, so nothing complained; the standings table and the plan cards simply lost their phone layout at 390 and 414 and drew off the edge. It was caught by measuring both widths before and after, which is the only thing that could have caught it. */ @media (max-width: 360px) { #asw-focused-hero-landing .lv2-assistants { flex-wrap: wrap; white-space: normal; row-gap: 6px; } /* AND THE SCORECARD BAND DROPS TO TWO COLUMNS HERE, for the same reason and found the same way. Three cells across a 266px panel leaves the score cell 44px of text column once its ring and padding are taken out, and "Visibility score" wants 54px, "Dominant" 57 — so the words were painted over their neighbours. `qa_landing` case 6c measures exactly that and said so; it is silent about the band as a whole, which is how the ORIGINAL fault here — the band drawing 32px wider than the window and being cut by its `overflow: hidden` — survived unmeasured. Both are the same shortage of width, and two columns is what actually buys enough of it. The last cell spans the pair so the second row is not a half-empty grid. */ #asw-focused-hero-landing .lv2-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } #asw-focused-hero-landing .lv2-band > .lv2-cell:last-child { grid-column: 1 / -1; } } /* WIDE SCREENS (Review 2, A4): at 1920px the 1200 column floated in a large dark field. Above 1680 the containers grow to 1280, the hero copy to 920 with a 72px headline, the window and its caption to 1240. */ @media (min-width: 1680px) { #asw-focused-hero-landing .lv2-nav { padding-left: max(40px, calc((100% - 1280px) / 2 + 40px)); padding-right: max(40px, calc((100% - 1280px) / 2 + 40px)); } #asw-focused-hero-landing .lv2-hero-copy { max-width: 920px; } #asw-focused-hero-landing .lv2-hero h1 { font-size: 72px; } /* The window grows in the same proportion it shrank (810 of 1160). */ #asw-focused-hero-landing .lv2-window { max-width: 864px; } #asw-focused-hero-landing .lv2-how, #asw-focused-hero-landing .lv2-footer { max-width: 1280px; } } /* THE HEADLINE IS TWO LINES AT EVERY DESKTOP WIDTH (2026-10-14, option E of design/landing-headline-two.html). Above 1680 the block above set 72px type in a 920px column, so "When customers ask ," wrapped for every name and the headline read on three lines. Now the type follows the window (3.9vw, 44-72px), the column may be as wide as the window up to 1240, and the first line never wraps. AFTER the 1100 and 1680 blocks on purpose: it replaces both of their headline sizes and the 1680 column width. */ @media (min-width: 761px) { #asw-focused-hero-landing .lv2-hero h1 { font-size: clamp(44px, 3.9vw, 72px); } #asw-focused-hero-landing .lv2-hero-copy { max-width: min(1240px, 100%); } #asw-focused-hero-landing .lv2-hero h1 .lv2-h1-line:first-child { white-space: nowrap; } } /* The offer under the hero's search bar, centred (2026-10-09; see the note in landing_v2.html.j2). Size and colour are `.lv2-micro`'s own, which the phone rule already steps down to 12px. */ #asw-focused-hero-landing .lv2-under-form { margin: 12px auto 0; text-align: center; } /* THE TOP OF THE PHONE HOMEPAGE, LESS CROWDED (2026-10-09). On request: option B of design/landing-phone-top.html, built by scripts/design_landing_phone_top.py. Nothing is removed. The subhead becomes a small label above the headline, the groups get room between them (the ask, then the beta line, then the case), and the four assistants become wrapped chips instead of one squeezed 11px line. `.lv2-hero-copy` is already a flex column, so this is order and spacing only — no template change, and above 600px nothing here applies. */ @media (max-width: 600px) { #asw-focused-hero-landing .lv2-hero-copy > .lv2-lead-row { order: -1; margin: 0 0 14px; } #asw-focused-hero-landing .lv2-hero-copy > h1 { order: 0; margin-bottom: 26px; } #asw-focused-hero-landing .lv2-hero-copy > .asw-form { order: 1; } #asw-focused-hero-landing .lv2-hero-copy > .lv2-under-form { order: 2; margin-top: -24px; } #asw-focused-hero-landing .lv2-hero-copy > .lv2-joined { order: 3; margin-top: -12px; } #asw-focused-hero-landing .lv2-hero-copy > .lv2-assistants { order: 4; } #asw-focused-hero-landing .lv2-lead-cat { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; } #asw-focused-hero-landing .lv2-assistants { flex-wrap: wrap; justify-content: center; gap: 8px 6px; margin: -24px auto 0 !important; height: auto; } #asw-focused-hero-landing .lv2-assistants > .lv2-assistants-lead { flex-basis: 100%; justify-content: center; margin: 0 0 2px; } #asw-focused-hero-landing .lv2-assistants > span:not(.lv2-assistants-lead) { border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 4px 8px; } /* THE THREE UNITS UNDER THE SEARCH, KEPT TOGETHER (2026-10-09, on request: "make the units below the search bar not so spread out" — the beta line, the lead sentence and "Checked across"). The hero's 40px flex gap sits between every part and the margins above stacked onto it: 50px from the button to the beta line, 80 to the lead sentence, 58 to the assistants. The negative margins above take each back to about 14, 28 and 16, so the three read as one group under the ask; the headline and the search keep the spacing they had. ALSO: the "Checked across" label is a flex box, so it is centred with `justify-content` (`text-align` left it at the left edge), and the row is no longer capped at 300px with 10px chip padding, which put "Perplexity" on a line of its own — the four need 330px now. */ } /* THE NAV BUTTON STEPS ASIDE BELOW 300px (2026-10-10, mobile QA). At 150% text zoom on a 390px phone the page is laid out at 260px, and "Check my AI visibility" ran 32px off the right edge. The hero's own button, the same action, is just below it. */ @media (max-width: 300px) { #asw-focused-hero-landing .lv2-nav-items a.lv2-btn--nav { display: none; } } /* THE HERO FILLS THE FIRST SCREEN, "CHECKED ACROSS" AT ITS FOOT (2026-10-14, option D of design/landing-spread.html). The hero's parts sat in one tight column in the upper half of a laptop screen with empty field below them. Now the copy column is the window's height less the beta bar and nav (113px at every desktop width, measured), the gaps between headline, subhead, field and lead sentence open up, and the assistants row is pushed to the bottom edge of the screen as a strip under a hairline. A window too short for it simply grows the column: it is a MIN-height. LAST in the file on purpose: it replaces the gap and padding of the rules above, and the assistants row's -8px/0 margin at the 761 block. */ @media (min-width: 761px) { #asw-focused-hero-landing .lv2-hero-copy { min-height: calc(100vh - 113px); box-sizing: border-box; gap: 0; padding-top: clamp(56px, 13vh, 150px); padding-bottom: 30px; } #asw-focused-hero-landing .lv2-hero-copy > .lv2-lead-row { margin-top: 30px; } #asw-focused-hero-landing .lv2-hero-copy > .asw-form { margin-top: 64px; } #asw-focused-hero-landing .lv2-hero-copy > .lv2-under-form { margin-top: 18px; } #asw-focused-hero-landing .lv2-hero-copy > .lv2-joined { margin-top: 60px; } #asw-focused-hero-landing .lv2-hero-copy > .lv2-assistants { margin-top: auto; width: 100%; max-width: 860px; padding-top: 22px; border-top: 1px solid var(--asw-hair-dark); font-size: 14px; gap: 10px 34px; } #asw-focused-hero-landing .lv2-hero-copy > .lv2-assistants svg { width: 17px; height: 17px; } #asw-focused-hero-landing .lv2-proof { margin-top: 56px; } } /* THE PHONE'S FIRST SCREEN IS THE ASK, SPREAD OUT (2026-10-14, option C of design/landing-phone-air.html, on request: "more spread out at the top"). The first screen was full — subhead, headline, field, beta line, lead sentence and the four chips, 20-70px apart. Now the hero's 40px flex gap comes out and each step is set in `svh`, the height of the screen with the browser's bars showing, so subhead, headline, field, button and beta line fill the first screen on any phone and the lead sentence and chips open the second, just before the stats. Measured at 390x740: subhead 208px, headline 278, field 476, beta line ends 615, lead sentence 778. The assistants' margin needs `!important` because the 600 block's does. */ @media (max-width: 600px) { #asw-focused-hero-landing .lv2-hero-copy { gap: 0; padding-top: 15svh; padding-bottom: 56px; } #asw-focused-hero-landing .lv2-hero-copy > .lv2-lead-row { margin: 0 0 7svh; } #asw-focused-hero-landing .lv2-hero-copy > h1 { margin: 0 0 12svh; } #asw-focused-hero-landing .lv2-hero-copy > .asw-form { margin: 0; } #asw-focused-hero-landing .lv2-hero-copy > .lv2-under-form { margin: 18px 0 0; } #asw-focused-hero-landing .lv2-hero-copy > .lv2-joined { margin: 22svh 0 0; } #asw-focused-hero-landing .lv2-hero-copy > .lv2-assistants { margin: 20px auto 0 !important; } } /* THE ASSISTANT IN A PILL ON ITS OWN LINE, AND THE CASE BELOW THE FOLD (2026-10-14, option C of design/landing-pill-lower.html, on request). The headline is three lines on desktop — "When customers ask / (ChatGPT) / do you show up?" — the rotating name centred in a rounded outline, no comma. The gaps are wider, and the headline gives a little back on a short window (never more than 6.4vh a line) so the strip still lands on the first screen. "Checked across" stays as that screen's foot; "See who AI recommends…" moves just below it: the hero is a screen tall plus 150px and the sentence follows the strip. This REPLACES the 2026-10-14 desktop block's lead spacing and the two-line block's size, which is why it is last. Phones: see the max-width blocks under it. */ @media (min-width: 761px) { #asw-focused-hero-landing .lv2-hero h1 { font-size: min(clamp(44px, 3.9vw, 72px), 6.4vh); } #asw-focused-hero-landing .lv2-hero h1 .lv2-h1-line { display: block; white-space: nowrap; } #asw-focused-hero-landing .lv2-hero h1 .lv2-h1-comma { display: none; } #asw-focused-hero-landing .lv2-hero h1 .lv2-h1-name { margin: .42em 0 .46em; } #asw-focused-hero-landing .lv2-hero h1 .lv2-h1-name .lv2-rot { margin-left: 0; box-sizing: content-box; height: 1.12em; padding: .18em .62em .22em; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.04); } #asw-focused-hero-landing .lv2-hero h1 .lv2-h1-name .lv2-rot.is-live .lv2-rot-item { left: .62em; top: .18em; } /* THE SEARCH GROUP IS CENTRED UNDER THE HEADLINE, THE STRIP BELOW THE FOLD (2026-10-14, on request: option D2 of design/landing-search-low.html). The tagline sits WITH the search box (it "looked off" floating halfway up), and tagline + field + button + beta line are centred in the space between the headline and the bottom of the screen: the two auto margins share it. The hero is a screen tall PLUS the strip and the lead sentence (187px: 45 + 64 + 48 + 30), so "Checked across" and "See who AI recommends…" both start at the fold and the first screen is only the headline and the search. */ /* …then the strip and the sentence 10% of the screen HIGHER (on request, the same day), with the search group left where it was: the hero is 10vh shorter AND the strip's top margin is -10vh, so the space the two auto margins share is unchanged and only what follows the group rises. */ #asw-focused-hero-landing .lv2-hero-copy { min-height: calc(100vh - 113px + 187px - 10vh); padding-top: clamp(40px, 8vh, 130px); padding-bottom: 30px; } #asw-focused-hero-landing .lv2-hero-copy > .lv2-lead-row { margin-top: auto; } #asw-focused-hero-landing .lv2-hero-copy > .asw-form { margin-top: 20px; } #asw-focused-hero-landing .lv2-hero-copy > .lv2-under-form { margin-bottom: auto; } #asw-focused-hero-landing .lv2-hero-copy > .lv2-assistants { order: 5; margin-top: -10vh; padding-top: 22px; } #asw-focused-hero-landing .lv2-hero-copy > .lv2-joined { order: 6; margin-top: 64px; } } /* THE PHONE GETS THE PILL TOO (2026-10-14, on request: option D of design/landing-phone-pill-low.html, which is B of landing-phone-pill.html with the search 64px lower). "When customers ask / (ChatGPT) / do you show up?" as on desktop, the name a little smaller than the lines around it, no comma. The field, button and beta line sit 64px further below the headline than the 12svh the phone block above gave them; the rest of the phone page is unchanged. The first line may wrap on a very narrow screen (150% text), which is why it is not `nowrap` here. */ @media (max-width: 760px) { #asw-focused-hero-landing .lv2-hero h1 .lv2-h1-line, #asw-focused-hero-landing .lv2-hero h1 .lv2-h1-name { display: block; } /* Spread a step more on request (2026-10-14): .3em/.34em was tight. */ #asw-focused-hero-landing .lv2-hero h1 .lv2-h1-name { white-space: nowrap; margin: .52em 0 .56em; font-size: .9em; } #asw-focused-hero-landing .lv2-hero h1 .lv2-h1-comma { display: none; } #asw-focused-hero-landing .lv2-hero h1 .lv2-h1-name .lv2-rot { margin-left: 0; box-sizing: content-box; height: 1.12em; padding: .16em .6em .2em; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.04); } #asw-focused-hero-landing .lv2-hero h1 .lv2-h1-name .lv2-rot.is-live .lv2-rot-item { left: .6em; top: .16em; } } @media (max-width: 600px) { /* 64px on a 740px screen; a shorter phone gives some back (8.6svh). */ /* Less 13px: the headline's lines were spread by that much the same day, and the search keeps its place. */ #asw-focused-hero-landing .lv2-hero-copy > h1 { margin: 0 0 calc(12svh + min(64px, 8.6svh) - 13px); } } /* Below 360px "When customers ask" would wrap at 33px and push the search off a small phone's first screen; a smaller face keeps it one line. */ @media (max-width: 360px) { #asw-focused-hero-landing .lv2-hero h1 { font-size: 29px; } }