/* ═════════════════════════════════════════════════════════════════════════════ mentionchecker.com — the PAGE. Nothing here is a design decision. ⛔ Tokens, type scale, buttons, chips, fields, meters and the section rhythm all come from `tokens.css` + `components.css`, which are GENERATED copies of `design/` — the same two files the app imports. This stylesheet may only describe things that exist on THIS page and nowhere in the product: the stage, the shell of the app-shaped hero mock, the pricing ladder, the FAQ. ⚠️ If you find yourself writing a colour, a font stack, a radius or a heading size here, stop: that belongs in design/tokens.css and the app needs it too. Two copies of one fact is exactly how this site and the app ended up in opposite languages — a bordered, pill-buttoned, 76px-rhythm site in front of a borderless 96px app. ═════════════════════════════════════════════════════════════════════════════ */ /* ── the page's own aliases. The markup predates the system; these map its vocabulary onto the tokens rather than rewriting 400 lines of HTML. ⛔ Not new values. ── */ :root { /* ⭐ THE WARM GROUND — this site only. calendly.com's two tones, sampled: #FCFBF8 page, #F5F3EE hero panel. ⛔ Bound here and nowhere else; the app stays cool. */ --page: var(--paper); --band: var(--paper-2); --plane: var(--paper-2); --well: var(--paper-3); --hair: var(--paper-hair); --hair-2: var(--paper-hair-2); --bg: var(--page); --panel: var(--band); --panel-2: var(--plane); --card: var(--page); --line: var(--hair); --line-2: var(--hair-2); --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --accent-2: var(--accent-press); --accent-bg: var(--accent-wash); --good: var(--ok); --good-bg: var(--ok-wash); --max: 1200px; --gutter: var(--s6); } html { scroll-behavior: smooth; background: var(--page); } body { background: var(--page); } section { padding: var(--s9) 0; } /* ⭐⭐ THE SEAM BETWEEN TWO UNTINTED SECTIONS — 96 bottom + 96 top is 192px, and DESIGN.md rule 1 says sections breathe at 96–128. ⛔ A BANDED section does not have this problem: its padding sits INSIDE the tint, so it separates nothing and the seam is the single 96 next to it. That is why hero→pricing measured 103px while pricing→features measured 199px — the rhythm was only ever wrong where two sections both sat on the page ground. ⭐ So the top half of THAT seam alone is cut to 32, landing every seam on the page in range: hero→pricing 96 · pricing→features 128 · features→faq 128 · faq→close 96. ⚠️ THIS IS THE FIX THE FAQ'S OWN COMMENT DEMANDED (index.html, 2026-09-07): it removed an inline `padding-top:0` on #faq and said that if the air is wrong it is "the RHYTHM being wrong for every section, not for this one". ⛔ So this lives HERE, in the stylesheet, and applies to every such pair — never as an inline override on one section. ⛔⛔ EVERY TINTED SECTION MUST BE EXCLUDED ON BOTH SIDES, and this rule has already been wrong once for exactly that reason: it was written when .hero and .close were the only two, then #features was given .band and nobody came back here. A band's padding sits INSIDE the tint, so cutting it to 32 does not close a gap — it crushes the space above that section's own heading, which is what Pavel spotted. ⚠️ If you tint another section, add it here in the same breath. */ section:not(.hero):not(.band):not(#asked) + section:not(.close):not(.band) { padding-top: var(--s6); } /* ⚠️ #asked is in that list since 2026-09-11 (Pavel: "there is no padding/space before questions") — it is a full-bleed gradient now, coloured like a band, and the FAQ under it needs its full s9. */ section[id] { scroll-margin-top: 78px; } .wrap { max-width: var(--max); padding: 0 var(--gutter); } /* ⚠️ BALANCED, because these headlines are now sentences rather than labels. "Everything you need. Nothing you don't." was breaking after "you" and stranding `don't.` alone on line two; balancing splits it at the full stop, which is where it wanted to break anyway. ⭐ Scoped to .sec-h rather than bare h2 — the h2 SIZE is a shared scale every section moves together (see below), but wrapping is per-headline and .close h2 already balances its own. */ .sec-h { max-width: 660px; margin-bottom: var(--s7); } /* ⭐ 800 BECAUSE THE SENTENCE NEEDS 725. "Everything you need. Nothing you don't." measures 725px on one line at the headline's largest size (44px, ≥1280) and was wrapping inside the shared 660 — measured, not guessed, with a nowrap clone. ⛔ 660 stays for the heads that carry a sub-line: it is a reading measure for the PARAGRAPH, and this head has none on purpose. ⚠️ The 75px of slack is for a font that renders wider than this machine's, not for a longer headline — re-measure if the words change. */ .sec-h-wide { max-width: 800px; } .sec-h h2 { text-wrap: balance; } .sec-h p { margin-top: var(--s4); font-size: 1.125rem; line-height: 1.55; color: var(--fg-2); } /* ⭐ The section headlines are DISPLAY too — same face as the hero, so the page has one voice at large sizes and Geist everywhere below them. ⚠️ Bumped from a 2.25rem cap. Against a 4rem hero the old size left the sections reading as subheads rather than as the next thing to look at. ⛔ This is the SHARED scale — every section headline moves together. A page where one section head is larger than the rest reads as a mistake, not as emphasis. */ h2 { font-family: var(--font-display); font-weight: var(--w-display); font-size: clamp(2rem, 3.2vw, 2.75rem); letter-spacing: -.032em; line-height: 1.12; } h3 { font-size: 1.0625rem; letter-spacing: -.02em; } /* ── nav ──────────────────────────────────────────────────────────────────── */ /* ⛔ NO BOTTOM BORDER. calendly.com's header sits on the page with nothing under it — a hairline across the full viewport is the loudest thing a quiet header can contain. */ .nav { position: sticky; top: 0; z-index: 60; background: var(--page); transition: background var(--t-fast) ease; } /* ⭐ CALENDLY'S GEOMETRY, MEASURED off their 1512px viewport (Pavel, 2026-09-11: "do exactly"): the bar's content sits 47px in from the viewport edge, NOT on the page's .wrap grid; the card that appears on scroll is inset by that same 47px, 72px tall, with ~18px of padding inside it. ⭐ So the content is placed for the CARD from the start — at rest the plate is simply not drawn — and nothing moves when it appears. ⛔ `.nav-in` is no longer a .wrap; the hero's grid is centred and does not need the bar to line up with it, and theirs does not either. */ .nav-in { display: flex; align-items: center; height: 72px; gap: var(--s5); margin: 0 47px; padding: 0 18px; } /* ⭐⭐ THE FLOATING CARD (Pavel, 2026-09-11, calendly.com's header): at the top of the page the header is a plain bar on the page ground. Once nav.js sees scroll, the bar's ground goes and .nav-card becomes a white card inset by the hero panel's own margin — the same edge the hero, the stage and the footer sit on — with the system's lift. ⚠️ The INNER .wrap keeps its width, so the links stay on the page grid; only the plate around them appears. ⛔ Nothing changes size — a header that shrinks under the reader's cursor moves the thing they were about to click. */ /* ⚠️ The 12px drop is a TRANSFORM, not a margin-top: a top margin on the card collapses through the sticky header (no padding, no border) and the card sits flush with the viewport; padding on the header would change its height and shift the page by 12px every time the class toggles. A transform does neither. */ .nav-card { transition: margin var(--t-fast) ease, background var(--t-fast) ease, transform var(--t-fast) ease, box-shadow var(--t-fast) ease, border-radius var(--t-fast) ease; } .nav.is-scrolled { background: transparent; } .nav.is-scrolled .nav-card { margin: 0 47px; transform: translateY(var(--s3)); background: #FFFFFF; border-radius: 16px; box-shadow: 0 8px 30px rgba(11, 27, 54, .10); } .nav.is-scrolled .nav-in { margin: 0; } /* ⭐ The lockup, as artwork. The site has no theme toggle, so the navy wordmark is safe as a fixed fill here; the APP draws the mark and sets its own live text instead. */ .brand { display: inline-flex; align-items: center; } /* ⚠️ 32px, not 26 — calendly.com's bar carries its lockup at ~34 css px in a 72px bar; ours at 26 read small in the same bar. */ .brand .blogo { display: block; height: 32px; width: auto; } .nav-mid { position: absolute; left: 50%; translate: -50% 0; display: flex; gap: var(--s1); } /* ⭐ MEASURED, not guessed. calendly.com: 14px / w500 / #071A31 — their FULL ink. xero.com: 15px / w500 / #000856 — also their full ink. Neither mutes its nav links to a secondary grey, and neither leaves them at 400. Ours did both, which is why they read faint next to either reference. */ /* ⚠️ "Sign in" is one of these, not a second button. It is for the customer who already bought and is not reading the page — giving it a button would put two CTAs side by side and make the quiet one compete with the one that earns. */ /* ⛔ NOWRAP. These are flex items in a bar that can run out of room, and a nav link is never two lines — when the room goes, the label has to stay whole and the sizes below have to give. */ .nav-mid a, .nav-in-link { font-size: .875rem; font-weight: var(--w-med); color: var(--ink); padding: 8px 12px; border-radius: var(--r); white-space: nowrap; transition: background var(--t-fast) ease; } /* ⛔ NO UNDERLINE. Measured off calendly.com: the hover is a soft chip — #F5F3EE on their #FCFBF8 page, 8px padding, 16px radius. Those two tones are exactly our --band on --paper, so this is the same move in our own tokens rather than a copied hex. The ink does not change: the links already sit at full --ink, and rule 4 keeps the accent off nav. */ .nav-mid a:hover, .nav-in-link:hover { background: var(--band); } .nav-r { margin-left: auto; display: flex; align-items: center; gap: var(--s3); } /* ── hero ─────────────────────────────────────────────────────────────────── */ /* ⭐ Display size comes from the scale, not from here — the h1 IS .t-display. Both references run a hero two to three times anything near it; the old 45px cap was the main reason this page read smaller than either of them. */ /* ⭐ THE PANEL, straight off calendly.com: the hero is not a section of the page, it is an inset block in the deeper warm tone with big corners, and the product visual bleeds off its bottom edge rather than floating inside it. ⭐ CENTRED for the same reason — left-aligned, a 64px display in a 1200px column leaves half the fold empty. */ .hero { margin: 0 var(--s5); padding: var(--s9) 0 0; background: var(--band); border-radius: var(--r-xl); overflow: hidden; text-align: center; } /* ⚠️ Spacing only — the chip's colour, radius and size come from components.css. */ .hero-tag { margin-bottom: var(--s4); } /* ⭐ 5rem cap since 2026-09-11 (Pavel: "on desktop — make title larger, 4 -> 5"); the vw term moves with it so the cap is reached at the same width as before (~1230px), and the mark cluster is em-sized so it grows in step. Phones keep their own rule below. */ .hero h1 { font-family: var(--font-display); font-weight: var(--w-display); margin: 0 auto; max-width: 21ch; font-size: clamp(2.6rem, 6.5vw, 5rem); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; } /* ⚠️ 44ch is MEASURED, not chosen for looks: it breaks the lede after "recommendations —" so the em dash ENDS line one rather than starting line two, which is where a dash belongs. The window is 43–45ch and 44 is the middle of it, so there is 1ch of slack either side; below 43 the dash drops to line two, above 45 "your brand" climbs to line one. ⛔ This number belongs to that exact sentence, not to the layout — every edit to the lede so far has moved the window (54→44→46→44). Change a word, re-measure, or the break wanders. */ .hero .lede { margin: var(--s5) auto 0; max-width: 44ch; font-size: 1.125rem; line-height: 1.55; color: var(--fg-2); } .hero .lede b { font-weight: var(--w-med); color: var(--fg); } .checkbar { margin: var(--s6) auto 0; max-width: 540px; } .hero-note { justify-content: center; } /* The stage is a picture of the product; it does not inherit the hero's centring, and it runs off the bottom of the panel, so its lower corners never round away from the edge. */ .stage { text-align: left; } .hero .stage { border-radius: var(--r-xl) var(--r-xl) 0 0; margin-bottom: 0; } /* ⭐ The hero field is a REAL input (was a span — "this page is a picture of the product"). The page is now the door into the app, so the one control the whole pitch points at has to be the one control that works. components.css `.checkbar .field` carries the shared look. */ .checkbar .field { flex: 1; min-width: 0; font-size: 1.0625rem; padding-right: var(--s3); } .hero-note { margin-top: var(--s4); display: flex; align-items: center; gap: 9px; font-size: .875rem; color: var(--fg-3); flex-wrap: wrap; } .hero-note .it { white-space: nowrap; } .hero-note .it + .it::before { content: "·"; color: var(--line-2); margin-right: 9px; } .hero-note b { color: var(--fg-2); font-weight: var(--w-med); } /* ── stage: the product, floating on colour ─────────────────────────────────── ⭐ Both references put the product shot on a soft colour field rather than on the page. */ .stage { /* ⭐ THE PRODUCT PICTURE IS DRAWN IN THE PRODUCT'S PALETTE — which is the WARM one. This block used to reset --page/--band/--plane/--well to the cool set on the argument that "the app stays cool". It does not: app/globals.css binds the same warm paper this page binds at :root (#FCFBF8 sheet on #F5F3EE band), and Pavel called the cool mock out on 2026-09-11 — "we use there warm theme, not blue". ⛔ Nothing is reset here now; the app inside the stage inherits exactly the tokens the app renders with. The FIELD behind it stays blue — that is the colour the product floats on, not the product. */ position: relative; border-radius: var(--r-xl); overflow: hidden; /* ⭐ THE FIELD IS A MESH, LIKE CALENDLY'S (Pavel, 2026-09-11, with their screenshot): a saturated blue core top-centre, pink and lavender on the left, pale yellow at the right edge, mint and aqua along the bottom. Nine soft radial blobs over a blue→aqua base — every one of them is a brand-adjacent tint (the accent blue, the CTA's mint) except the pink, which is the one hue borrowed for the resemblance. ⚠️ Blob sizes are percentages so the mesh scales with the stage as it grows; ⛔ no `filter: blur()` — the softness is the gradient's own falloff, which costs nothing to paint while the stage is resizing under a scroll. */ background: radial-gradient(38% 55% at 2% 58%, rgba(236, 184, 247, .95), transparent 70%), radial-gradient(30% 42% at 12% 30%, rgba(196, 200, 250, .95), transparent 70%), radial-gradient(44% 58% at 54% 14%, rgba( 76, 132, 240, .92), transparent 70%), radial-gradient(36% 48% at 30% 4%, rgba(158, 200, 250, .95), transparent 70%), radial-gradient(28% 60% at 99% 42%, rgba(240, 245, 214, .95), transparent 70%), radial-gradient(42% 58% at 90% 88%, rgba(122, 226, 200, .95), transparent 70%), radial-gradient(38% 46% at 22% 100%, rgba(168, 236, 226, .90), transparent 70%), radial-gradient(30% 40% at 62% 100%, rgba(150, 205, 235, .80), transparent 70%), linear-gradient(160deg, #BFD7F8 0%, #8FB8F2 45%, #A9E4DA 100%); padding: var(--s7) var(--s7) 0; /* ⭐⭐ IT GROWS AS YOU SCROLL TO IT (Pavel, 2026-09-11, calendly.com's move). `--p` runs 0→1 as the stage rises through the viewport — set by stage.js, which is the only script involved — and every dimension that changes is a calc() on it: at 0 the stage is the .wrap's width and the frame inside it is 1060px; at 1 both fill the hero panel. ⛔ Nothing here animates on its own clock: no transition, no keyframes. Scroll IS the timeline, so it never fights the user. ⚠️ The stage sits OUTSIDE .wrap for this — its containing block is the hero, which is the width it grows into; the 1136px / 100% − 64px below is exactly what .wrap would have given it. Without JS, --p stays 0 and the layout is the static one. */ --p: 0; max-width: calc(min(1136px, 100% - 2 * var(--s6)) * (1 - var(--p)) + 100% * var(--p)); margin: var(--s8) auto 0; } /* ⭐⭐ A FIXED FRAME, AND THE APP SCROLLS INSIDE IT (Pavel, 2026-09-11: "don't make image too long. fit it to normal aspect ratio, just enable scroll inside the image"). The report is taller than any picture should be, so the frame is 16:10 — a laptop's shape — and the app inside it is the scroll container. ⛔ The frame, not `.ap`, carries the radius, the shadow and the clip: `overflow: auto` on a zoomed element would put the scrollbar in the zoomed coordinate space, and a shadow on the scrolled element is clipped by its own scrollport. ⛔ NO `overscroll-behavior: contain` — it was here and it TRAPPED THE PAGE: reaching the end of the report stopped the wheel dead instead of handing the scroll back to the page (Pavel: "when i scroll to the end of screen, i can't continue scrolling the rest of my page"). ⚠️ The bottom edge stays FLUSH with the hero's edge — the frame is what runs off the panel now, so the picture still reads as "the app continues below" and the scroll says so. ⭐ It widens with the stage: 1060px at --p 0, the stage's full content width at 1. */ .stage-in { position: relative; margin: 0 auto; aspect-ratio: 16 / 10; max-width: calc(1060px * (1 - var(--p)) + 100% * var(--p)); overflow-y: auto; overflow-x: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--lift-3); background: var(--band); } /* ── the app, at screenshot scale ───────────────────────────────────────────── ⭐⭐ THE MOCK IS THE APP (Pavel, 2026-09-11). The old mock was an invented browser window — a traffic-light bar, four engine columns, a "question by question" grid — none of which the product draws. This is app/app/[id]/Console.js's finished report inside the app's own shell. ⛔ Everything TYPOGRAPHIC comes from the shared classes (tokens.css / components.css) exactly as the app uses them; only the SHELL is drawn here, and each number is app/globals.css's: `.top` 16/20px padding and 36px controls, `.bsw` 216px, `.canvas` inset --s4 with --lift and --r-xl, `.bgrid` 196px column + --s9 gap, `.col` padding --s7 --s6, `.bnav-item` 9px --s3. ⭐ ONE `zoom` brings the whole thing to picture scale. It is the app at 1440 shown at 72%, so a 64px display headline reads at 46px inside a 1060px stage. ⛔ No per-element font sizes: the moment one is added the mock stops being the app and starts being a drawing of it. ⚠️ `zoom` is standard in every current browser (Chrome, Safari, Firefox 126+); a browser without it shows the same picture larger, which is a smaller failure than a transform's (transform does not affect layout, so the stage would keep the unscaled height). */ /* ⭐⭐ THE ZOOM FOLLOWS THE FRAME (Pavel, 2026-09-11: "the content itself didn't grow/scale"). The app is laid out at ONE virtual width — `--ap-vw`, 1472px, which is 1060 / .72, the frame at rest — and stage.js sets `--z` to frameWidth / --ap-vw whenever the frame changes, so the picture scales with its frame instead of gaining empty width. At rest that is .72; grown at 1440 it is .88. ⛔ The fallback is the rest value, so without JS the picture is the static one. */ .ap { zoom: var(--z, .72); background: var(--band); } .stage { --ap-vw: 1472; } .ap-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s4) var(--s5); } .ap-top-l, .ap-top-r { display: flex; align-items: center; min-width: 0; } .ap-top-l { gap: var(--s5); } .ap-top-r { gap: var(--s4); } .ap-top img { width: 173px; height: 26px; } .ap-bsw, .ap-pill, .ap-round { height: 36px; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--s2); font-size: .875rem; color: var(--ink-3); border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--hair); padding: 0 var(--s3); } .ap-bsw { width: 216px; gap: var(--s3); color: var(--ink); font-weight: var(--w-med); } .ap-bsw-n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ap-chev { width: 14px; height: 14px; color: var(--ink-4); flex: none; } .ap-pill b { color: var(--ink); font-weight: 550; } .ap-ico { width: 15px; height: 15px; flex: none; opacity: .72; } /* ⛔ `--well` WITH THE HAIRLINE, as `.thm` and `.usr-face` are in app/globals.css — the mock had `--plane` and no ring, which on the sheet is a bare glyph beside a bare letter (Pavel, 2026-09-12: "wrong style of these buttons"). The app's own comment records the same accident once already. */ .ap-round { width: 36px; justify-content: center; padding: 0; border-radius: var(--r-pill); background: var(--well); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--hair); } .ap-round .ap-ico { opacity: 1; } .ap-usr { font-size: .8125rem; font-weight: 600; color: var(--ink-3); } /* the sheet: --page inset from --band, lifted — `.canvas` in the app */ /* ⚠️ `.canvas`'s own bottom: --s4 margin, --s9 padding, all four corners — inside the scroller the sheet's foot is reachable, so it is drawn as the app draws it. */ .ap-sheet { margin: 0 var(--s4) var(--s4); background: var(--page); border-radius: var(--r-xl); box-shadow: var(--lift); padding: var(--s7) var(--s6) var(--s9); display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: var(--s9); } /* the brand column — `.bnav` */ .ap-nav { display: flex; flex-direction: column; align-items: stretch; gap: var(--s1); } .ap-nav-name { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s3) var(--s4); margin: 0; font-size: 1.0625rem; font-weight: var(--w-med); color: var(--ink); } .ap-nav-item { display: block; padding: 9px var(--s3); border-radius: var(--r-sm); font-size: .875rem; color: var(--ink-3); } .ap-nav-item.on { background: var(--plane); color: var(--ink); font-weight: var(--w-med); } .ap-nav-cta { width: 100%; justify-content: center; margin-top: var(--s5); } /* the report — Console.js, in its order */ /* ⚠️ NOT capped at 840 — that is `.col` on the account screens. The brand page's grid is `.canvas > .col:has(> .bgrid)`, capped at 1600px, so the report fills the sheet and Repeat / Export / Share sit at its right edge; the ROWS are what stay short (`.report-row`, 80%). ⚠️ An 840 cap here left a third of the sheet empty with the buttons floating mid-sheet (Pavel, 2026-09-11: "aligned by right side of screen always … but here we have empty space"). */ .ap-body { min-width: 0; } .ap-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5); } /* ⭐ Two lines, two facts (Pavel, 2026-09-12): the label line carries when · answers · market, the second line the engines — Console.js's masthead, same day. */ .ap-meta-l { position: relative; display: flex; align-items: center; gap: var(--s3); margin: 0; flex-wrap: wrap; } /* relative: the questions panel (.qs-pop) anchors to this line */ .ap-meta-l .ap-eng { gap: var(--s3); } .ap-when { text-transform: none; letter-spacing: 0; } .ap-dot { color: var(--ink-4); } .ap-meta-e { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s2); } .ap-eng { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .ap-mk { width: 14px; height: 14px; flex: none; } .ap-mk.e-ppx { width: 12px; } .ap-flag { width: 18px; height: 12.5px; flex: none; } .ap-acts { display: flex; gap: var(--s2); flex: none; } /* ⚠️ A

, not an

: the page's one h1 is the hero headline above it. The CLASS is the app's, and the cap (46ch) and the top margin are Console.js's own inline values. */ .ap-h1 { margin: var(--s7) 0 0; max-width: 46ch; } .ap-acc { color: var(--accent-display); } .ap-lede { margin-top: var(--s5); max-width: 56ch; } .ap-lead { color: var(--ink); font-weight: 590; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; vertical-align: -3px; } /* the three figures — `Figure` in Console.js: t-label, Newsreader 2.9rem at --w-accent, t-xs */ .ap-figs { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: var(--s8); } .ap-figs p { margin: 0; } /* ⚠️ `Figure` in Console.js: tone "accent" → --accent-display for the Mentioned figure (the same blue as the headline's percentage), the other two --ink. ⛔ The colour is NOT set here — `.ap-acc` sets it on the one figure and the rest inherit ink; a `color` on this rule once overrode the blue and painted all three black (Pavel, 2026-09-11: "why this is black?"). */ .ap-fig { margin-top: var(--s3) !important; font-size: 2.9rem; font-family: var(--font-accent); font-weight: var(--w-accent); letter-spacing: -.01em; } .ap-figs .t-xs { margin-top: var(--s2) !important; } /* "Who the answers name" — `Standing` in Console.js */ /* ⚠️ `padding: 0` because this page's bare `section { padding: var(--s9) 0 }` would otherwise reach in — the app's `.sec` is margin only. */ .ap-sec { margin-top: var(--s8); padding: 0; } .ap-sec .sec-head h4 { margin: 0; } .ap-sec .sec-head p { margin: 0; } .ap-row { padding: var(--s4) 0; } .ap-row-h { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); } .ap-row-n { font-size: .9375rem; font-weight: 450; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ap-row.you .ap-row-n { font-weight: 590; color: var(--ink); } .ap-row-v { margin-left: auto; font-size: 1rem; color: var(--ink-2); } .ap-row.you .ap-row-v { color: var(--accent-ink); } .ap-row .meter i { background: var(--ink-4); } .ap-row.you .meter i { background: var(--accent-ink); } /* ⚠️ `.report-row` in the app: no row runs the whole column. */ .ap-row, .ap-rep { max-width: max(80%, 34ch); } /* 20px favicon in a `.row` — the "Mentioned instead of you" list left the mock 2026-09-11; kept for the source rows */ .ap-fav-20 { width: 20px; height: 20px; } .ap-lost-n { flex: 1; min-width: 0; font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ap-tnum { font-variant-numeric: tabular-nums; } /* "What the answers were built from" — the Source row: the reader's own site is --ok */ .ap-src.own .ap-row-n { color: var(--ok); font-weight: 590; } .ap-src.own .meter i { background: var(--ok); } .ap-more { margin-top: var(--s4); } /* "Every question" — the qrow: a dot (won / named / neither), the question, who took it, the four marks, the count. ⚠️ Same flex subtlety the app records: the question is the ONLY item that can shrink, so it carries `min-width: 0`, and the lost list is capped at 220px. */ .ap-q { border-top: 1px solid var(--hair); } .ap-qrow { display: flex; align-items: center; gap: var(--s4); padding: var(--s5) 0; } .ap-qdot { width: 7px; height: 7px; border-radius: 999px; flex: none; background: var(--hair-2); } .ap-qdot.ok { background: var(--ok); } .ap-qdot.warn { background: var(--warn); } .ap-qq { flex: 1 1 0%; min-width: 0; font-size: .9375rem; line-height: 1.5; color: var(--ink); } .ap-qlost { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ap-qeng { display: flex; gap: var(--s1); flex: none; } .ap-qeng .ap-mk { width: 16px; height: 16px; } .ap-qn { flex: none; width: 30px; text-align: right; } .ap-qof { color: var(--ink-4); } /* the repeat card — `ScheduleCard` in Repeat.js on a `.plane` */ /* ⭐ THE CARD FITS ITS CONTENT (Pavel, 2026-09-11: "why does this section too wide? it should fit content"). It used to span the report column, so a three-line card carried a screen's width of empty plane to its right. ⚠️ `.rp-on-plane` in the app carries the same rule — the mock is the app, and a card that is full-width in one and fitted in the other is a lie in one of them. */ .ap-rp { width: fit-content; max-width: 100%; } .ap-rp-h { margin: 0; } .ap-rp-p { margin: var(--s3) 0 0; max-width: 62ch; } .ap-rp-acts { margin-top: var(--s6); display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; } .ap-rp-acts .t-xs { flex: 1; min-width: 180px; margin: 0; } /* ── the domain favicon ─────────────────────────────────────────────────────── ⭐⭐ THE REAL MARKS, INLINED AS data: URIs. ⛔ NOT loaded from the live domains and NOT from a favicon service: that is a third-party request per icon on a marketing page, which hands every visitor's IP to six other companies and breaks the page offline. They were fetched ONCE, scaled to 64px and base64'd into the HTML — about 14kb for all six, and nothing leaves the visitor's browser. ⭐ Same standing as the four engine marks in the hero, which CLAUDE.md already requires be "REAL LOGOS, each from its own official source, NOT flat one-colour stand-ins": nominative use, naming the sites an answer cited. ⚠️ AN EARLIER PASS DREW LETTER TILES INSTEAD (a coloured square with the initial) to dodge the trademark question. Rejected on sight — "i don't see real icons" — and the engine-mark rule says the same thing, so the stand-in was never consistent with the page it sits on. ⛔ `.ap-fav` stays square: these are third-party artwork and must not be recoloured or cropped; the --plate well behind them is the app's own frame (see [[plate-vs-raised]]: a third party's logo needs a white ground in both themes). ⚠️ To refresh one, re-fetch and re-encode — do NOT hotlink it. ⭐ yourbrand.com keeps a letter tile on purpose: it is the READER's own site and has no logo. ⚠️ The data URIs live in index.html; this comment moved here from the old `.fav` rule on 2026-09-11 when the hero mock became the app and `.fav` stopped matching anything. */ /* Drawn as the app draws it (`Favicon` in marks.js): 18px, a --plate well with a hairline, the artwork at 65%. "Your brand" has no site, so it gets the app's letter tile — a --well square with the initial — and not a coloured chip. */ .ap-fav { width: 18px; height: 18px; flex: none; border-radius: 5px; background: var(--plate); box-shadow: inset 0 0 0 1px var(--hair); object-fit: contain; padding: 3px; box-sizing: border-box; } .ap-fav-you { display: inline-grid; place-items: center; background: var(--well); box-shadow: none; padding: 0; font-size: 9.4px; font-weight: 600; font-style: normal; color: var(--ink-4); } /* ── what a check gives you ───────────────────────────────────────────────── */ /* ⭐⭐ THE NINE CARDS BETWEEN THE HERO AND THE PRICE. ⛔ NOT ONE COLOUR, RADIUS OR TYPE SIZE FOR THE CARD ITSELF IS SET HERE. The box is `.plane` (components.css) — the same object as the pack cards and the worked example — so `.ft` is layout and body copy only. ⚠️ This file's rule: no colours, fonts, radii or heading sizes; those are upstream. A card painted here would drift the day the system moves. ⚠️ SIX CARDS IN FOUR ROWS, and the ROW SHAPES are the grouping: two-up with mocks (the two claims a rival cannot match), two-up with mocks (what you set, what you get), one full-width mock (where the answers came from), one full-width strip with no mock at all (the account). ⛔ There are no sub-headings and there must not be — an eyebrow label over a heading is banned outright (Pavel, 2026-09-10) — so shape and order carry it. ⛔ Do not reorder to even out a column count, and ⛔ do not give the strip a mock to make the rows match. ⚠️ THIS COMMENT SAID "NINE CARDS… three across" AND THEN "six identical boxes" while seven were rendering two-up. It had been wrong through two rewrites; the count belongs in one place. */ /* ⛔ THE CARD IS `.raised` (components.css) — white, on this section's band. Nothing here paints it. ⚠️ Two per row, because each one now carries a mock rather than a second sentence. */ /* ⛔⛔ align-items: start — DO NOT REMOVE IT, AND DO NOT SET A ROW HEIGHT. ⚠️ A grid stretches every card to the tallest in its row, and with a FIXED-height crop the extra height fell BELOW the panel: measured 83px of bare plate under the engine mock and 80px under the questions mock, on cards whose panels were 229 and 214 tall in a 300 frame. ⭐ The panels are different heights because the things they show are different lengths — four engines is four rows and there is no fifth. Let the cards be different heights too; the alternative is either a hole or padding a mock out to a number. */ /* ⭐⭐ STRETCH, NOT START — changed 2026-09-10. ⚠️ `align-items: start` let every card be exactly as tall as its own copy, so a two-line sub-line pushed its picture 24px below its neighbour's (48px at 900px, where it wraps to three). The row read as two things that had slipped. ⭐ The pictures are the same size already; what was uneven was where the copy above them ended. Stretching the cards and pushing the mock to the BOTTOM aligns both edges of every picture in a row without touching the copy, and it holds however the sub-lines wrap. */ .ft-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); align-items: stretch; } /* ⛔ Both mock wrappers take `margin-top: auto` at their own rules below — declared there and not here, because each already sets a margin and the later declaration would win. */ .ft { display: flex; flex-direction: column; } /* ⚠️ margin-BOTTOM here, not on the mock: the mock now takes `margin-top: auto` to bottom-align across a row, and an auto top margin cannot also guarantee a minimum gap. The copy owns it. */ .ft > p { margin: var(--s3) 0 var(--s5); font-size: .9375rem; line-height: 1.6; color: var(--fg-2); } /* ⭐ The one card that spans the row. Seven buckets and their legend need the full width, and the break stops a column of identical boxes reading as a spreadsheet. ⚠️ Below 860 the grid is one column and this rule is a no-op, which is why it needs no counterpart in the media query. */ .ft.wide { grid-column: 1 / -1; } .ft.wide > p { max-width: 74ch; } /* ⭐⭐ THE ODD CARD OUT, AND THIS RULE EXISTS SO NO CARD EVER CHANGES SIZE TO SATISFY THE GRID AGAIN. Two columns means an odd number of two-up cards leaves a visible empty half, and the answer to that had been widening whichever card was nearest — which is how the account card ended up full-width without anyone asking for it (Pavel: "why did you make it full size, i haven't asked about it"). A lone LAST card now spans the row and centres itself at one column's width, so it stays the same size as its neighbours and the row reads as a deliberate closing beat. ⚠️ `:nth-child(odd)` on the LAST child is the test for "the count is odd"; below 860 the grid is one column and this is a no-op. */ .ft-grid > .ft:last-child:nth-child(odd):not(.wide) { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--s5) / 2); } /* 🪤 AND IT HAS TO BE UNDONE BELOW THE COLLAPSE. At one column `50%` is half of the ONLY column, so the rule above made the last card half-width on a phone — measured at 390 / 560 / 860 before this line existed. ⛔ Any rule written in per-cent of the grid needs a counterpart here. */ @media (max-width: 860px) { .ft-grid > .ft:last-child:nth-child(odd):not(.wide) { width: auto; justify-self: stretch; } } /* ⭐ THE WAY OUT. ⛔ Not a new destination — #start is the anchor the pricing CTA already uses. */ .ft-out { display: flex; justify-content: center; margin-top: var(--s7); } /* ⭐ The card clips its tile. ⚠️ ~30 rules for the HTML "vignette" mocks that preceded the SVG tiles were deleted here on 2026-09-11 — none matched anything. Two of their lessons still apply to the tiles: ⛔ NOT ROTATED (Pavel, 2026-09-08) — no `perspective`/`rotate*` as a depth tweak, the tilt forced a horizontal bleed that kept slicing figures off; and ⛔ never give an SVG-facing class an unscoped `width`/`height`/`x`/`y`/`r` (see the note below). */ .ft { overflow: hidden; } /* ⛔⛔ THREE RULES WERE DELETED HERE AND THEY HAD BEEN BREAKING EVERY TILE. The HTML crops styled their share bars with an UNSCOPED `.vg-bar { width: 30%; height: 8px }`. `width` and `height` are real CSS geometry properties for an SVG , and CSS beats a presentation attribute — so the tiles' ground bars, authored as 24 × 104 and described in their own comments as a field of vertical bars, were rendering as identical 168 × 8 horizontal streaks. Measured, not guessed: attrWidth 24 / cssWidth 168px / bbox 168 × 8. ⚠️ It was invisible because the field sits behind a 52px blur at .18 opacity and nobody had reason to compare it against the numbers in the markup. ⛔ Never give an SVG-facing class an unscoped `width`, `height`, `x`, `y` or `r` rule meant for HTML. */ /* ── the questions people ask — three drifting rows ────────────────────────── ⭐ See the section comment in index.html. The rows are transform-only marquees: each `.qm-row` is two copies of one `.qm-track`, and the keyframe slides the row by one track's width, so the second copy arrives exactly where the first started and the loop has no seam. Rows 1 and 3 drift left, row 2 right (the same keyframe, reversed). ~70s a loop — slow enough to read a chip as it passes. Hover pauses it. ⛔ No `filter`, no layout property, no per-chip animation. */ /* ⚠️ 1000px, not .sec-h-wide's 800: the headline is two sentences and wants two lines, one each. */ .sec-h-center { max-width: 1000px; margin-left: auto; margin-right: auto; text-align: center; } /* ⭐⭐ THE QUESTIONS SIT ON A MESH LIKE CALENDLY'S "Real customers. Real results." (Pavel, 2026-09-11, with their screenshot): a saturated blue at the top left falling through violet to pink and lavender at the foot, in an inset panel with the hero's corners, the headline in white. The chips stay white on it — they are the app's rows and read like cards on the field. ⚠️ Same construction as `.stage`'s mesh: radial blobs over a linear base, no `filter: blur()`. ⚠️ Inset like `.hero` and `.foot` (margin 0 --s5), so the three coloured panels on the page share one edge. */ #asked { color: #FFFFFF; min-height: 92vh; display: flex; flex-direction: column; justify-content: center; /* ⭐ FULL-BLEED, NOT A PANEL (Pavel, 2026-09-11: "this should be full-size gradient like calendly"). Their "Real customers" section runs edge to edge and viewport-tall: saturated blue across the top, lavender and pink through the middle, a warm cream at the lower right, and the whole thing DISSOLVES INTO THE PAGE at the foot — so the section below starts on plain ground with no edge. The last stop is --page for exactly that reason; ⛔ do not put a radius or a margin back. */ background: radial-gradient(48% 46% at 6% 62%, rgba(236, 178, 240, .85), transparent 70%), radial-gradient(40% 40% at 96% 58%, rgba(216, 168, 236, .80), transparent 70%), radial-gradient(36% 34% at 88% 84%, rgba(250, 232, 200, .90), transparent 70%), radial-gradient(52% 40% at 50% 4%, rgba( 62, 112, 232, .90), transparent 70%), linear-gradient(180deg, #4A78E8 0%, #6E82E0 30%, #B49AE6 58%, #E9C9E8 80%, var(--page) 100%); } #asked .sec-h h2 { color: #FFFFFF; } .qm-out { display: flex; justify-content: center; margin-top: var(--s8); } @media (max-width: 860px) { #asked { min-height: 0; } } .qm-br { display: inline; } .qm { display: grid; gap: var(--s4); overflow: hidden; /* the fade at both edges — a mask, so the chips genuinely run off rather than under a plate */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .qm-row { display: flex; width: max-content; animation: qm-drift 70s linear infinite; animation-delay: -12s; } /* ⚠️ Negative delays so the three rows do not load flush-left like a grid — each starts a third of the way into its own loop. (A negative delay seeks FORWARD; see the tiles' notes.) */ .qm-row:nth-child(2) { animation-direction: reverse; animation-duration: 84s; animation-delay: -31s; } .qm-row:nth-child(3) { animation-duration: 76s; animation-delay: -52s; } .qm:hover .qm-row { animation-play-state: paused; } .qm-track { display: flex; gap: var(--s3); flex: none; padding-right: var(--s3); } @keyframes qm-drift { to { transform: translateX(-50%); } } /* a chip: the app's row voice — white, a hairline, the mark quieter than the words beside it */ .qm-chip { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 14px 18px; border-radius: var(--r); background: var(--page); box-shadow: inset 0 0 0 1px var(--hair); font-size: 1rem; color: var(--fg); } .qm-chip .ap-mk { width: 18px; height: 18px; flex: none; } .qm-chip .e-ppx { width: 15px; } @media (prefers-reduced-motion: reduce) { .qm-row { animation: none; } } /* ── what a credit is ─────────────────────────────────────────────────────── */ /* ⭐ THE DEFINING LINE, AS A LABEL ABOVE THE LADDER. ⛔ The pill is the design system's (.chip.chip-acc, components.css) — nothing here restyles it, only places it. */ /* ⭐ THE UNIT LABEL RIDES THE HEADLINE'S BASELINE. `align-items: baseline` on the flex row aligns the chip's own first baseline with the

's FIRST line, so it stays on the title's line even when the title wraps — which `flex-start` would not do, because the two boxes have different leading. ⛔ Do not swap it for `center`: at two lines of headline the chip drifts to the middle. ⚠️ `.sec-h` is shared with the features and FAQ heads; everything here hangs off the `.sec-h-aside` modifier so those two do not move. */ .price-key { margin: 0; } .sec-h-aside { max-width: none; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4) var(--s6); } .sec-h-aside .sec-h-main { max-width: 660px; } .sec-h-aside .price-key { flex: none; } /* 🪤 SIDE BY SIDE ONLY WHILE THERE IS ROOM. Below the collapse the headline already uses the whole width, so the chip stacks under it and takes back the gap the flex row was providing. */ @media (max-width: 860px) { .sec-h-aside { display: block; } .sec-h-aside .price-key { margin-top: var(--s5); } } /* ⭐⭐ THE TWO PANELS UNDER THE CARDS, SIDE BY SIDE — the worked example and the volume quote. ⭐ EQUAL HEIGHTS via the grid's default stretch, and the EXAMPLE is what was cut down to fit (see `.key-line`): the quote panel was already the right size, so stretching IT to match was backwards. ⚠️ They stack below 860px, where the quote's own row breaks into a column. */ .pk-row { margin-top: var(--s4); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); } /* ⛔ The panel carries its own top margin for when it stands alone; inside the row the grid owns the spacing. Overridden here rather than removed there — the markup is GENERATED. */ .pk-row .pk-quote { margin-top: 0; } /* ⭐⭐ THE LINK TO THE PRICE LIST — 2026-09-14. Every pack is a page of its own (/pricing) because the AI engines this product checks read a page's words and nothing else: not the JSON-LD offers, and not a closed
either — that was tried here the same day and ChatGPT reported "the page source only exposes the calculator's default state". A plain link is what a crawler follows and a person clicks, and it carries no figure, so the $85 ceiling above it is untouched. ⛔ Not a button — it is a footnote to the row, not a fourth thing to buy. */ .pk-more { margin-top: var(--s5); font-size: .9375rem; font-weight: var(--w-med); letter-spacing: -.01em; } .pk-more a { color: var(--accent-ink); text-decoration: none; } .pk-more a:hover { text-decoration: underline; } /* ⭐ THE WORKED EXAMPLE. ⛔ QUIET (Pavel, 2026-09-07: "less screaming"). It was an accent-wash panel with accent hairlines between every row — the loudest object on the page, for a footnote. ⭐ It is now a panel in the CARDS' language, the same one `.pk-quote` speaks: `--plane`, the large radius, the same padding. The two read as a pair because they are literally the same box. ⚠️ WAS `.lev-key`, beside five `.lev` lever cards in a section of its own. That section is gone and the cards with it — the sum states three of those choices in the act of using them. */ .key { background: var(--plane); border-radius: var(--r-lg); padding: var(--s6); font-size: .9375rem; line-height: 1.6; color: var(--fg-2); } .key b { color: var(--fg); font-weight: var(--w-semi); } /* ⛔ Not an

: the section already has one heading, and this names a panel rather than opening a new part of the page. */ .key-t { margin-bottom: var(--s4); font-size: 1.0625rem; font-weight: var(--w-semi); letter-spacing: -.024em; color: var(--fg); } /* ⭐ THE SUM, ON ONE LINE. ⛔ It was three rows and a rule, which is what made this panel nearly twice the height of the quote panel beside it. ⭐ The `×` are the operators those rows only implied, so one line now carries more of the arithmetic than four did. ⚠️ line-height 1.2 (Pavel, 2026-09-13: "make line height 1.20 instead of 2 here") — it was 2, argued as room for the mark cluster on a wrapped line; the rows are spaced by their own margin now, and a wrap on a narrow screen is checked by eye rather than padded for. */ /* ⭐ TWO EXAMPLES ARE A LIST, so the bullet is the list's own and not a drawn decoration — the marker is what a screen reader counts and what the eye pairs the two lines by. */ .key-ex { list-style: none; margin: 0; padding: 0; } /* ⚠️ The dot is ABSOLUTE with a hanging indent, so a line that wraps on a narrow screen sits under its own text rather than back under its bullet. */ .key-line { position: relative; margin-top: var(--s3); padding-left: var(--s4); line-height: 1.2; } /* ⭐ --accent, not --accent-ink: this is a MARK, not prose, so it is not held to the 3:1 text floor tokens.css sets for anything readable (rule 4). ⚠️ 3.5px is half the dot; `.6em` is half a line at line-height 1.2, which is what centres it on the FIRST line and not on the block. */ .key-line::before { content: ""; position: absolute; left: 0; top: calc(.6em - 3.5px); width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--accent); } .key-line b { color: var(--fg); font-weight: var(--w-semi); font-variant-numeric: tabular-nums; } /* ⭐ The operator, quiet and not italic — it is a multiplication sign, not an emphasis. */ .key-line i { font-style: normal; color: var(--fg-3); padding: 0 1px; } /* ⚠️ The cluster is em-sized in components.css, so this one declaration is the whole of its sizing here. ⛔ Do not restate width or plate colour — rule 6 of that component. */ /* ⚠️ 1.25em since the cluster grew to FIVE plates (2026-09-11): at 1.5em the third line — 25 × 6 with five marks and a three-digit total — wrapped its own answer onto a second line at 1440. MEASURED: the line needs ~490px of the panel's 480 at 1.35em; 1.25em and 1px operator padding bring it under. */ .key-line .engines { font-size: 1.25em; } /* ⛔ The total never splits: "150" on one line and "credits" on the next is a sum with no answer. */ .key-line .tot { white-space: nowrap; } /* ⛔⛔ THE ONE THING THIS PAGE OVERRIDES ON THAT COMPONENT, AND IT IS SCOPED TO THIS LINE (Pavel, 2026-09-07). `components.css` tilts each plate by a different odd angle and says the unevenness is deliberate — "regularise any one of them and the row snaps back to a stock logo strip". ⭐ That is right where it lives: a HEADLINE, where the cluster is a flourish. ⚠️ Here the marks are a TERM IN AN EQUATION, sitting between "4 places" and "×", and tilted glyphs in a sum read as misprinted rather than as hand-placed. ⛔ SCOPED TO `.key-line` ON PURPOSE — the hero's cluster is untouched and must stay tilted. ⚠️ `none` also drops each plate's translateY nudge, which is the same declaration; that nudge exists to seat a TILTED plate and has nothing to seat once the tilt is gone. */ /* ⭐ ONE SIZE AND ONE CORNER FOR ALL FOUR (Pavel, 2026-09-07), for the same reason as the tilt above: `components.css` varies width (.86 / .78 / .84 / .80em) and radius (31 / 34 / 29 / 33%) so the row reads hand-placed in a HEADLINE. ⚠️ In an equation the same variation reads as four marks of different importance — and they are not: this line's whole claim is that the four are interchangeable, so a row where one is visibly bigger argues against the sentence it is in. ⚠️ .82em is the MEAN of the four widths, so the cluster keeps the mass it had; 31% is p1's corner, the one the row already opens on. ⛔ Scoped to `.key-line` — the hero keeps all of it. */ /* ⚠️ The calculator's checkboxes get the SAME two overrides for the same reason: a form row is a list of equals, and a tilted plate that is bigger than the one under it reads as a state, not a style. ⛔ Still scoped — the hero keeps every bit of its irregularity. */ .key-line .engines .plate { transform: none; width: .82em; height: .82em; border-radius: 31%; } /* ⚠️ Sizing only — the cluster is em-based in components.css, so this is the whole of it. */ /* ⭐ THE ANSWER, ON THE END OF THE SUM RATHER THAN UNDER IT. ⛔ It had its own line, a rule and the space either side of that rule — ~46px, on a panel whose whole budget is 159. ⭐ An equals sign is what marks a total; it does not also need a line of its own to sit on. ⛔ NOT the accent serif and NOT larger: design/tokens.css allows that face in two places and both are REAL money (the pack price, the quote output). This is a worked example. */ .key-line .eq { color: var(--fg-3); padding: 0 4px; } .key-line .tot { color: var(--fg); font-weight: var(--w-semi); } /* ── pricing: five cards ──────────────────────────────────────────────────── */ /* ⭐⭐ THE PACK CARDS **AND** THE QUOTE PANEL MOVED TO design/components.css ON 2026-09-08. They are on BOTH surfaces now — the app's Billing screen sells the same eleven rungs out of the same `lib/packs.js` — and `design/` is where a component on both surfaces lives. ⛔ Do not re-add `.pk`, `.save` or any `.pk-quote-*` rule here. This file held one copy, the app held another, and the app's drifted from this one three times in a single sitting. ⚠️ The canonical block is THIS branch's version, aliases resolved: design/ cannot use `--fg-3` or `--accent-bg`, so it names --ink-3 and --accent-wash, which those alias to anyway. ⭐ What stays here is LAYOUT this page alone has — `.pk-row`, and the narrow overrides below. */ /* ── faq ──────────────────────────────────────────────────────────────────── */ /* ⭐⭐ THE RULES RUN THE FULL COLUMN, THE PROSE DOES NOT — changed 2026-09-10. ⛔ This was `max-width: 820px` on the whole block, which is a reading measure applied to the wrong box. The answers need one; the hairlines and the +/- do not, and capping all three left ~380px of dead page to the right of every rule at 1200px — the only section that did not reach its own gutter, directly under three that do. ⚠️ The heading STAYS ABOVE, which is why this is the fix and a heading-rail was not: every other section on this page introduces itself from above, and moving one into a left column buys the same width back by making this section the odd one out. */ /* ⭐ TWO COLUMNS, LIKE REDWATCHER (Pavel, 2026-09-11) — `.faq` is a grid, each `.faq-col` carries its own top rule, and the marker is Redwatcher's chevron rather than the +/– this had before. ⚠️ One column under 860, where the second column's top rule would double the first's bottom. */ .faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s8); align-items: start; } .faq-col { min-width: 0; border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; cursor: pointer; position: relative; padding: var(--s5) 40px var(--s5) 0; font-size: 1rem; font-weight: var(--w-med); letter-spacing: -.02em; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--fg-3); border-bottom: 1.5px solid var(--fg-3); translate: 0 -70%; rotate: 45deg; transition: rotate .18s; } .faq details[open] summary::after { rotate: -135deg; translate: 0 -20%; } @media (max-width: 860px) { .faq { grid-template-columns: 1fr; } .faq-col + .faq-col { border-top: none; } } /* ⚠️ THE CAP CARRIES THE PADDING, because `box-sizing: border-box` is global (tokens.css) and would otherwise eat 44px of the measure. The 44px is the gutter that keeps prose off the +/-, and it is still needed now the row runs the full column. ⛔ `ch` IS NOT A CHARACTER HERE — MEASURED, because the obvious number is wrong by half. `ch` is the advance of "0", and in this geometric sans that is ~9.9px against a ~6.6px average glyph: `68ch` renders 103 characters a line, not 68. The old `820px` block cap was ~118. ⚠️ 56ch = ~88 characters, and that is a COMPROMISE, not the textbook measure. 46ch lands the canonical 67 and was rejected on sight: a 440px block of prose under a 1136px hairline reads lopsided, and these answers are two to four lines, where a long measure costs least. ⭐ If the answers ever grow into real paragraphs, 46ch is the number to come back to. */ .faq .ans { max-width: calc(56ch + 44px); padding: 0 44px var(--s5) 0; font-size: .9375rem; color: var(--fg-2); line-height: 1.6; margin-top: -4px; } /* ── close ────────────────────────────────────────────────────────────────── */ /* ⭐ The band: the page changes colour, it does not grow another box. */ .close { text-align: center; background: var(--band); } /* ⭐ The closing headline — the second and last place the accent serif appears. */ /* ⭐ Two sentences of near-equal length (24 and 20 chars), so `balance` puts one on each line and the max-width barely matters — MEASURED identical from 18ch to 28ch. ⚠️ That tolerance belongs to THIS copy: the previous line was one long sentence and needed exactly 22ch to avoid stranding its last word. Re-measure if the headline stops being two short sentences. */ .close h2 { font-family: var(--font-accent); font-weight: var(--w-accent); letter-spacing: -.02em; max-width: 22ch; margin: 0 auto; text-wrap: balance; } .close .checkbar { margin: var(--s6) auto 0; } .close .hero-note { justify-content: center; } /* ── footer: a navy block, inset like the hero ─────────────────────────────── ⭐ calendly.com's footer (Pavel, 2026-09-11): the page's darkest ground, inset by the same margin as the hero panel so the top and the bottom of the page rhyme, a display-size tagline on the left, the link columns on the right. ⚠️ Ink INSIDE it is literal white at three strengths — the tokens' --ink is navy and would vanish — same reasoning as the permanently-white cards in the tiles. ⛔ The old footer's rule that it "stays on the page ground" was about a grey tint under the grey .close band; a navy block under it is contrast, not repetition. */ .foot { margin: 0 var(--s5) var(--s5); background: var(--ink); color: #FFFFFF; border-radius: var(--r-xl); padding: var(--s9) var(--s8) var(--s7); } .foot-in { max-width: 1136px; margin: 0 auto; } .f-top { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s8); align-items: stretch; } /* the brand cell: the tagline at the top, the lockup at the foot, level with the columns' end */ .f-brand { display: flex; flex-direction: column; } .f-home { display: inline-block; margin-top: auto; padding-top: var(--s8); width: fit-content; } /* ⭐ 48px tall — calendly.com's footer lockup measured at ~48 css px. `color` paints the wordmark. */ .f-logo { display: block; height: 48px; width: auto; color: #FFFFFF; } .f-tag { margin: 0; font-family: var(--font-display); font-weight: var(--w-display); font-size: clamp(2.2rem, 4.4vw, 3.5rem); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; } .f-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); } .f-col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); } /* ⚠️ The heading is the LOUDER thing here, as in the reference — white, sentence case, a size up — and the links beneath it sit at 72% white. The old footer's uppercase micro-label is gone. */ .f-h { font-size: 1.125rem; font-weight: var(--w-med); color: #FFFFFF; margin-bottom: var(--s2); } .f-col a { font-size: .9375rem; color: rgba(255, 255, 255, .72); transition: color var(--t-fast) ease; } .f-col a:hover { color: #FFFFFF; } .f-mail { display: inline-block; } .f-bot { display: flex; align-items: baseline; gap: var(--s3) var(--s5); flex-wrap: wrap; margin-top: var(--s9); padding-top: var(--s5); border-top: 1px solid rgba(255, 255, 255, .14); font-size: .75rem; color: rgba(255, 255, 255, .56); } .f-tm { margin-left: auto; max-width: 62ch; } @media (max-width: 1080px) { /* ⚠️ The mock's shell narrows the way the app's does: the brand column stays (it is 196px of a ~1400px virtual width at this zoom) but the top bar's right-hand controls go, so the lockup and the brand switcher keep their room. */ .ap-top-r .ap-pill { display: none; } /* ⚠️ 2, not 3 — four cards break 2+2. Three would leave one card alone on the second row. ⚠️ The row was briefly THREE cards on 2026-09-09 and this rule came out for it; the reprice the same day put the count back to four, and so this back. */ .pk-grid { grid-template-columns: repeat(2, 1fr); } /* ⛔ .ft-grid stays at TWO here — six cards break 2+2+2 at any width down to the 860 collapse, and a mock in a third-width card is too small to read. */ } @media (max-width: 860px) { :root { --gutter: var(--s4); } section { padding: var(--s8) 0; } .hero { margin: 0 var(--s3); padding: var(--s7) 0 0; } .stage { padding: var(--s5) var(--s4) 0; margin-top: var(--s7); max-width: calc((100% - 2 * var(--s4)) * (1 - var(--p)) + 100% * var(--p)); } .pk-grid { grid-template-columns: 1fr; } .pk-row { grid-template-columns: 1fr; } /* ⚠️ Stacked, and the answer stays left-aligned with the question rather than stranded. */ .pk-quote-live { display: block; } .pk-quote-out { margin-top: var(--s5); text-align: left; } .pk-quote-end { display: block; } .pk-quote-buy { margin-top: var(--s4); width: 100%; } /* ⭐ THE MOCK ON A PHONE IS THE APP ON A PHONE. app/globals.css drops the sticky column and lays `.bnav` out as a row at this width; here the column goes entirely — the report is the picture, and a 390px stage has no room to spend on navigation. The zoom steps down so the display headline (clamp's 2.6rem floor) still fits the sheet, and the meta line's action buttons go the way `.rpt-head .share` used to. ⚠️ Measured at 390: re-measure if the zoom changes. */ .ap { zoom: var(--z, .62); } .stage { --ap-vw: 487; } /* 302 / .62 — the frame at 390px, laid out at the app's phone width */ /* ⛔ NO SCROLL-LINKED GROWTH HERE — stage.js pins --p at 1 below 860px and on any touch screen; a zoom change per scroll frame re-lays-out the whole report and an iPhone stutters through it (Pavel, 2026-09-11). The phone gets the finished width from the first paint. */ /* ⚠️ 16:10 at 334px is 209px tall — the headline alone. A phone's frame is taller than wide. */ .stage-in { aspect-ratio: 4 / 5; } .ap-sheet { grid-template-columns: minmax(0, 1fr); gap: 0; padding: var(--s5) var(--s4) var(--s7); margin: 0 var(--s3) var(--s3); } /* ⭐ THE NAV STAYS ON A PHONE NOW THAT IT WORKS (2026-09-12) — as the app lays `.bnav` out at this width (app/globals.css @860): the name on its own line, the three items in a row, the CTA beside them. It was `display: none` while it was decoration. The action buttons still go. */ .ap-acts, .ap-top-r { display: none; } .ap-nav { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s6); } .ap-nav-name { width: 100%; padding: 0 0 var(--s2); } .ap-nav-cta { width: auto; margin-top: 0; } /* ⚠️ `button.ap-nav-item { width: 100% }` is declared at the END of this file (the views block), so the phone override lives there too — see `.ap-nav .ap-nav-item` below it. */ .ap-top { padding: var(--s3) var(--s4); } .qm-br { display: none; } .qm-chip { padding: 11px 14px; font-size: .9375rem; } /* the app's narrow qrow: the question takes the line, the rest wraps under it */ .ap-row, .ap-rep { max-width: none; } /* the app's `.report-row` below 720px */ .ap-qrow { flex-wrap: wrap; row-gap: var(--s2); } .ap-qq { flex: 1 0 calc(100% - 7px - var(--s4)); } .ap-qlost { max-width: none; min-width: 0; flex: 1 1 auto; margin-left: calc(7px + var(--s4)); } .ap-qeng { margin-left: auto; } .ft-grid { grid-template-columns: 1fr; } .nav-mid { display: none; } /* the bar's 47px inset is a laptop's; a phone gets the page's own --s3 margin and a 60px bar */ .nav-in { margin: 0 var(--s3); padding: 0 var(--s3); height: 60px; } .nav.is-scrolled .nav-card { margin: 0 var(--s3); } .f-logo { height: 40px; } /* ⚠️ 2×2 — brand + Product on the first row, Account + Legal on the second. Three columns beside the brand block at this width leaves each too narrow for "Best-value pack" length labels, and four is what we are collapsing away from. */ .f-top { grid-template-columns: 1fr; gap: var(--s7); } } /* ⛔⛔ ON A TOUCH SCREEN THE FRAME DOES NOT SCROLL — it is a CROP (Pavel, 2026-09-13: "whenever i scroll to the end of mockup, i'm stuck, and the actual page doesn't scroll further"). iOS hands a swipe to the innermost scroll container under the finger, and the frame is most of a phone's viewport; once the report inside is at its end the page should take over, and on the zoomed report it does not — the frame keeps claiming the gesture and nothing moves. Desktop already had the wheel version of this and lost `overscroll-behavior: contain` for it (`.stage-in` above); a touch screen needs the stronger cut, because there is no chaining to fix, only a container to stop being one. ⚠️ `overflow: hidden` is not a scroll container for touch, so a swipe that starts on the picture scrolls the page. The nav inside still works (it swaps views, it does not scroll). ⚠️ `pointer: coarse`, not a width — an iPad is wide and has the same finger. Same key stage.js uses to pin --p on touch. */ /* ⭐ THE CIRCLES — "See full" on the frame's bottom-right corner, "Close" top-right once it is open (Pavel, 2026-09-13). ⚠️ SOLID, NOT GLASS — Pavel, same day, off the phone: "make button not glass, but rather #4a96ee with white text". That is `--accent-press`, the accent's pressed shade, so it is a token and not a typed colour. ⛔ Not the CTA green and not a pill: it is a control on a picture, not a step on the page. The class name kept its first word so the two buttons and stage.js need no rename for a colour change. */ .glass-round { display: none; position: absolute; z-index: 5; width: 64px; height: 64px; border-radius: 50%; align-items: center; justify-content: center; text-align: center; padding: 0; cursor: pointer; font: var(--w-semi) .75rem/1.15 var(--font-sans); letter-spacing: -.01em; color: #FFFFFF; background: var(--accent-press); border: 0; box-shadow: 0 6px 20px rgba(11, 27, 54, .22); } .glass-round:active { transform: scale(.96); } .glass-round[hidden] { display: none; } /* ⚠️ Anchored to the STAGE, whose bottom edge is the frame's — the frame is flush with it. The right offset is the stage's own side padding plus a 12px inset into the picture. */ .stage-full { right: calc(var(--s4) + 12px); bottom: 12px; width: 56px; height: 56px; font-size: .6875rem; } /* ⭐⭐ THE FULL VIEW: the same frame, fixed to the viewport. Same node, so `--z` (set on `.stage`) still reaches it and stage.js's fit() re-zooms the app to the viewport's width; same click listener, so the nav works. ⛔ `overflow-y: auto` HERE is safe on touch: the frame is the whole screen, so there is no page behind it to trap. `html.stage-lock` freezes the page underneath. */ .stage-in.is-full { position: fixed; inset: 0; z-index: 90; max-width: none; margin: 0; aspect-ratio: auto; height: 100dvh; border-radius: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: none; } html.stage-lock { overflow: hidden; } .stage-close { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 91; } .stage-close:not([hidden]) { display: flex; } @media (pointer: coarse) { .stage-in { overflow: hidden; } /* ⚠️ After `.glass-round`'s display:none in source order, or it never shows. */ .stage-full:not([hidden]) { display: flex; } } /* ⚠️ THE FOOTER'S OWN BREAK, and it is not one of the hero's. 560px is where the brand paragraph and a link column stop coexisting: below it the 38ch paragraph is the full measure and a second column has nothing left. ⭐ THE THREE LINK COLUMNS STAY IN A ROW — they do NOT stack the way Redwatcher's do, and that is the one place this footer departs from it. MEASURED at 375px: a full stack is 750px of footer, three-up is ~430px. Every label here is one short word ("Questions" is the longest, ~62px at .8125rem) against a ~80px column even at 320px, so the row costs nothing to read and saves a phone-screen of scrolling. ⛔ Re-measure before adding a longer label to any column. */ @media (max-width: 560px) { .foot { margin: 0 var(--s3) var(--s3); padding: var(--s8) var(--s5) var(--s6); } .f-bot { margin-top: var(--s7); } .f-cols { gap: var(--s5) var(--s4); } .f-tm { margin-left: 0; } } /* ⭐ THE MOBILE SPLIT, STATED RATHER THAN MEASURED. Below 544px the lede runs to three lines and the natural wrap strands "instead." alone on the last one. No max-width produces the wanted split — line one has to fit "…people ask" but not "…ask for", while line two has to fit "…your brand," but not "…brand, or", and in proportional type those two windows do not overlap. `text-wrap: balance` evens the lines but breaks mid-phrase. So the breaks are in the markup and switched on here: See who AI mentions when people ask for recommendations — your brand, or your competitors instead. ⛔ OFF above 544px, where the sentence fits on two lines and the 44ch rule above governs. 544px is MEASURED — 545px still fits on two lines, 543px does not. */ /* ⭐ THE PHONE HEADLINE IS TWO LINES (Pavel, 2026-09-11, from his phone: "make main title in hero fit 2 or 3 lines on mobile instead of four; maybe decrease font size a bit"). It had been three lines of text plus the four marks on a fourth. Under 421px the size drops to ~8.8vw (31–37px) and the break is stated in the markup — `Check your presence` / `in AI search` — with the marks trailing the second line as they do on desktop. MEASURED at 360/390/421: two lines, no overflow. ⛔ OFF above 421px, where the sentence fits on two lines at the clamp's floor and the marks trail. */ .hero h1 .br-h { display: none; } @media (max-width: 421px) { .hero h1 { font-size: clamp(1.9rem, 8.8vw, 2.35rem); max-width: none; } .hero h1 .br-h { display: inline; } } .hero .lede .br-m { display: none; } @media (min-width: 368px) and (max-width: 544px) { .hero .lede .br-m { display: inline; } } /* ⚠️ Below 368px line one ("…when people ask") no longer fits and "ask" drops alone, which is worse than the widow this was fixing. So the stated breaks switch OFF and `balance` evens the natural wrap instead. 368px is MEASURED — it fits at 368, not at 367. A 360px Android lands here; a 375px iPhone SE gets the stated split. */ @media (max-width: 367px) { .hero .lede { text-wrap: balance; } } /* ⭐ THE BAR IS MADE TO FIT rather than emptied. MEASURED at the old sizes on a 390px iPhone: brand 170 + gap 24 + "Sign in" 68 + gap 12 + CTA 89 = 363px of content against 358px of room, so the link — the one flex item that could — shrank and wrapped to two lines. It read as a broken header on the most common phone there is. ⚠️ WHY THE OLD 370px RULE MISSED IT: it was measured by watching for OVERFLOW, and a flex row never overflows while an item can still shrink. The bar "fit" to 364px because "Sign in" was folding, not because it was whole. ⛔ Measure this bar by the LINK'S HEIGHT, not scrollWidth. ⭐ The three savings are all in the chrome, none in the two labels: a 22px lockup (144px wide, the same artwork), the nav's own gap down one step, and the link's chip padding down one step. Content is then 317px, which fits from 349px up — so a 360px Android keeps "Sign in" too. ⚠️ Below that the bar is genuinely out of room and the link drops: the CTA is what earns its place all the way down a sticky header, and "Sign in" is repeated in the footer. ⛔ Tied to the two LABELS, not to the layout — lengthen either and re-measure. */ @media (max-width: 480px) { .nav-in { gap: var(--s3); } .brand .blogo { height: 24px; } .nav-in-link { padding: 8px 8px; } } @media (max-width: 348px) { .nav-in-link { display: none; } } /* ── legal pages: privacy + terms ───────────────────────────────────────────── ⭐ One readable column and nothing else. A privacy policy that is hard to read is the tell that it is not meant to be read — and Google's OAuth review looks at these pages, so they are a surface, not an afterthought. ⛔ No colours or sizes invented here: the scale and the ink come from tokens.css like everywhere else. */ /* ⭐ NUMBERED CLAUSES, LIKE REDWATCHER (Pavel, 2026-09-11): `main.wrap > article.legal`, a `.legal-h` head with version + effective date, then one
per clause with an

n. heading. ⚠️ The old `main.legal > .wrap` shape is gone from both pages; `.eff`, `.lede-l` and `.contact` have no markup any more. */ .legal { max-width: 760px; margin: 0 auto; padding: var(--s8) 0 var(--s9); } .legal h1 { font-size: clamp(2rem, 5vw, 2.75rem); letter-spacing: -.03em; line-height: 1.08; } .legal .upd { margin-top: var(--s3); font-size: .8125rem; color: var(--fg-3); } .legal .lead { margin-top: var(--s6); font-size: 1.0625rem; line-height: 1.6; color: var(--fg-2); } .legal section { padding: 0; margin-top: var(--s7); } /* ⚠️ `section { padding: var(--s9) 0 }` is the page rhythm; a clause is not a page section. */ .legal h2 { font-size: 1.125rem; letter-spacing: -.015em; } .legal h2 .n { color: var(--fg-3); font-weight: var(--w-med); margin-right: .35em; } .legal p { margin-top: var(--s4); line-height: 1.65; color: var(--fg-2); } .legal b, .legal strong { color: var(--fg); font-weight: var(--w-med); } .legal a { color: var(--accent-ink); font-weight: var(--w-med); } .legal ul, .legal ol { margin-top: var(--s4); padding-left: 1.15em; } .legal li { margin-top: var(--s3); line-height: 1.65; color: var(--fg-2); } .legal .mono { font-family: var(--mono, ui-monospace, monospace); font-size: .875em; } .legal section[id] { scroll-margin-top: 96px; } /* ⚠️ Tables carry the processor list, which is the part a reader actually scans. It must scroll inside itself rather than pushing the page sideways on a phone. */ /* ⚠️ The bare .tbl rules used to live with the report mock's surface table. That mock is gone; privacy.html's processor tables are the only .tbl left, so the base sits here now. Every declaration below is overridden by a .legal .tbl rule except the header hairline. */ .tbl { width: 100%; border-collapse: collapse; font-size: .8125rem; background: var(--page); border-radius: var(--r); overflow: hidden; } .tbl th { text-align: left; font-size: .6875rem; font-weight: var(--w-med); letter-spacing: .085em; text-transform: uppercase; color: var(--ink-4); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); } .tbl td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); color: var(--fg-2); } .tbl tr:last-child td { border-bottom: 0; } .legal .tbl { width: 100%; margin-top: var(--s5); border-collapse: collapse; display: block; overflow-x: auto; } .legal .tbl th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); font-weight: var(--w-med); padding: 0 var(--s4) var(--s3) 0; } .legal .tbl td { padding: var(--s3) var(--s4) var(--s3) 0; border-top: 1px solid var(--line); font-size: .9375rem; line-height: 1.55; color: var(--fg-2); vertical-align: top; } /* ⭐ THE PRICE LIST on /pricing (2026-09-14) — the Terms table's rules, bounded to a reading width, with the price column right-aligned in the ink and tabular figures so the rungs line up. Plain markup on purpose: a crawler reads "1,000 credits $45" with nothing to open or run. */ .legal .price-tbl { display: table; max-width: 480px; } .price-tbl th:last-child, .price-tbl td:last-child { text-align: right; padding-right: 0; } .price-tbl td:last-child { color: var(--fg); font-weight: var(--w-semi); font-variant-numeric: tabular-nums; white-space: nowrap; } .price-cta { display: flex; flex-wrap: wrap; gap: var(--s3); } .price-cta .btn { height: 44px; padding: 0 var(--s5); } /* ⚠️ `.legal a` paints every anchor in the article accent-blue — a button is an anchor too, so the two CTAs need their own colours restated at the higher specificity. Same values as components.css. */ .legal .price-cta .btn-a { color: var(--on-cta); } .legal .price-cta .btn-o { color: var(--ink); } /* ── the contact dialog ─────────────────────────────────────────────────────── ⛔⛔ NO EMAIL ADDRESS IS WRITTEN IN ANY PAGE ON THIS SITE (Pavel, 2026-09-04) — a bare `mailto:` in served HTML is a harvested address. The markup is built by `contact.js`, which is also where the reasoning lives. ⚠️ Ported from Redwatcher, same decision, 2026-08-29. ⛔ No colours or sizes invented here: everything comes from tokens.css like the rest of the page. */ .cdlg { width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--fg); box-shadow: var(--lift-3); } .cdlg::backdrop { background: rgba(var(--ink-rgb), .42); backdrop-filter: blur(2px); } .cform { padding: var(--s5); } .cdlg-h { display: flex; align-items: center; gap: var(--s3); } .cdlg-h h2 { font-size: 1.125rem; font-weight: var(--w-semi); letter-spacing: -.024em; } .cdlg-x { margin-left: auto; width: 30px; height: 30px; border-radius: var(--r-xs); border: 0; background: transparent; color: var(--fg-3); font-size: 1.35rem; line-height: 1; cursor: pointer; } .cdlg-x:hover { background: var(--plane); color: var(--fg); } .cdlg-s { margin-top: 5px; font-size: .8125rem; color: var(--fg-2); } .cfield { display: block; margin-top: var(--s4); } .cfield span { display: block; margin-bottom: 6px; font-size: .78rem; font-weight: var(--w-med); color: var(--fg-2); } .cfield input, .cfield textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line-2); border-radius: var(--r-xs); background: var(--bg); color: var(--fg); font: inherit; font-size: .875rem; resize: vertical; } .cfield textarea { min-height: 96px; line-height: 1.5; } .cfield input:focus, .cfield textarea:focus { outline: 0; border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-wash); } /* ⛔ OFF-SCREEN, NOT display:none — a bot that skips hidden inputs still fills this one. */ .chp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .cmsg { margin-top: var(--s3); font-size: .8125rem; color: var(--fg-2); min-height: 1.2em; } .cmsg.bad { color: var(--bad); } .cdlg-f { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s4); } /* ⚠️ A