/* ═══════════════════════════════════════════════════════════════════════════ KORVA LANDING — Session 7, Agent J. WHY THIS FILE EXISTS AND WHY IT USES ITS OWN PREFIX --------------------------------------------------- The previous landing page was built on `mk-*` classes that live in `static/theme.css`. theme.css is the shared palette-token layer and is owned by another agent this session, so a marketing page whose LAYOUT lives there is one refactor away from collapsing. Everything the landing page needs to lay itself out is therefore defined here under the `lnd-` prefix, and this file depends on theme.css for COLOUR VALUES ONLY — always through `var(--k-token, #fallback)`, so the page is correct whether or not theme.css has been merged yet. ⚑ WHY `lnd-` AND NOT `lp-`. This sheet was first written with an `lp-` prefix, which turned out to be ALREADY TAKEN: `static/style.css` carries 71 rules in the `lp-` namespace, left behind by an older landing page, and style.css loads BEFORE this file. The one that bit was style.css:3273 .lp-trust { display: flex; flex-direction: column; ... } Declaring `display:flex` here did not undo that inherited `flex-direction`, so every trust marker rendered with its icon stacked ABOVE the heading instead of beside it — a silent visual regression from a stylesheet nobody was editing. `lnd-` was then checked against every file in static/ and templates/ and had zero occurrences. Before inventing a prefix, grep for it. LOAD ORDER. base.html links style.css -> theme.css -> {head_extra} -> app.css. This sheet arrives in head_extra, so it sees the reconciled tokens. app.css lands after it but is scoped to app/admin classes and never matches `lnd-*`. Nothing here re-points a shared token, so nothing here can leak into a logged-in surface. ⚑ CONTRAST IS MEASURED, NOT ASSUMED. scratch_agent_j/contrast.py computes the WCAG 2.1 ratio for all 31 pairs this sheet ships and exits non-zero on a failure. Every number in the comments below came out of that script. Re-run it if you touch a colour. #005F82 cerulean 7.10 on white, and white on it is ALSO 7.10. Safe both directions at any size. This is the brand colour and the primary CTA fill. #4f91ee blue 3.17. SURFACE ONLY. Never text, and white text on it also fails — it appears in this file exactly once, as a decorative block, and carries nothing. #E63946 coral 4.17. LARGE TEXT ONLY (>=24px). Used once, on the hero display word, which is clamped to a 34px minimum. #ee4f91 magenta 3.41. LARGE TEXT ONLY. Stat numerals only (40px+). ═══════════════════════════════════════════════════════════════════════════ */ /* ── Cerulean fallback ───────────────────────────────────────────────────── Agent L authors --k-cerulean in theme.css this session. Until that merge lands the token does not exist, so it is declared here with the IDENTICAL name and the IDENTICAL value — merging is therefore a no-op, and whichever file loads last sets the same colour. The -deep/-50/-100 ramp is derived here and is not part of L's contract. ⚑ fallback — L's theme.css wins on merge. */ :root { --k-cerulean: #005F82; } .lnd { /* Locals. Everything below reads these, so a retheme is one block. */ --lnd-cerulean: var(--k-cerulean, #005F82); --lnd-cerulean-deep: #004A66; /* 9.67 on white — hover, deepest band */ --lnd-cerulean-50: #EAF3F7; /* tint surface; ink 16.16, muted 4.91 */ --lnd-cerulean-100: #CFE4EC; /* chip fill / meter track / band body copy */ --lnd-ink: var(--k-ink, #1A1128); /* 18.19 on white */ --lnd-muted: var(--k-muted, #6B6580); /* 5.53 on white */ --lnd-card: var(--k-card, #FFFFFF); --lnd-bg: var(--k-bg, #FCFBFA); --lnd-tint: var(--k-tint, #F8F7FC); --lnd-line: var(--k-line, #E7E3EF); --lnd-purple: var(--k-purple, #7e3df4); /* 5.44 — text-safe */ --lnd-blue: var(--k-blue, #4f91ee); /* 3.17 — SURFACE ONLY */ /* ⚑ Q5: --lnd-coral IS GONE. It had exactly one call site, .lnd-accent on the hero word "drilling", and it was the last decorative red left in the product — a 4.17 pillar-box red sitting in a page that is otherwise warm neutrals and one teal. It could not be fixed by repointing --k-coral, which is also the INCORRECT-ANSWER marker and has to stay red, so it is fixed here: the accent word is now the brand teal. 6.30 on the tier-1 hero ground and 6.81 on tier-0, both measured, and the word still reads as the accent because everything around it is near-black ink. */ /* One family, site-wide (Session 8). These two names are kept because ~10 landing rules read them; they resolve to the same stack now. The literal fallbacks were the last copy of the Fraunces/Manrope pair in the product. */ --lnd-display: var(--font-geist); --lnd-sans: var(--font-geist); /* ⚑ Agent P3, Session 8: the marketing pages ran their own geometry — 16px cards and two bespoke shadows — while the app ran a different one. A parent who clicks "Log in" crossed a visible seam. These now point at the site scale: two radii (10 small / 12 card) and three depths. The names are kept so every call site in this file is untouched. */ --lnd-r: 12px; --lnd-r-sm: 10px; --lnd-shadow: var(--shadow-d1); --lnd-shadow-lift: var(--shadow-d2); font-family: var(--lnd-sans); color: var(--lnd-ink); background: var(--lnd-bg); } /* ⚑ Overflow discipline. Every horizontal-overflow bug measured on this page traced back to a grid child refusing to shrink below its content. Grid and flex items default to min-width:auto; this one rule is why the page holds zero overflow at 375px with a 218-unit SVG matrix and a 4-up option row. */ .lnd *, .lnd *::before, .lnd *::after { box-sizing: border-box; min-width: 0; } .lnd img, .lnd svg { max-width: 100%; } /* ══ BANDS & RHYTHM ══════════════════════════════════════════════════════ ⚑ Q5: THE BANDS WERE ON THE SAME TIER AS THE CARDS SITTING ON THEM, AND THAT IS WHY THE PAGE READ AS "TOO WHITE". Q3's three-tier system is tier-1 #F6F1E7 = PAGE, tier-0 #FDFAF4 = CARD, tier-2 #FFFFFF = one focal object. This sheet was written before those tiers existed and mapped --lnd-card (tier-0) onto both a BAND and every CARD, so measured: .lnd-band--card #FDFAF4 .lnd-card on it #FDFAF4 luminance delta 0.0000 A card with a 1px hairline and literally zero fill separation from its ground is a rectangle of the same colour, and three of the nine bands were like that. Everything below is one step DOWN the warm ladder, so the cards stay where they are and the ground moves out from under them. New deltas: 0.075 on a --card band, 0.116 on a --bg band, both measured in scratch_agent_q5/contrast.py along with all 25 text pairs the move creates. ⚑ NO NEW COLOURS. Every value is an existing Q3/Q4 token; the change is which token each band names. --lnd-card and --lnd-tint are still declared because ~20 CARD rules read them — only the BAND mapping moved. ⚑ THE THREE NEUTRAL BANDS MUST STAY THREE DISTINCT VALUES. --bg and --tint are ADJACENT twice in the page order (2-3 how/samples, 7-8 faq/trust); give them the same hex and those seams disappear and the page grows two double-height bands. The running order and its nine grounds are: 1 hero --card #F6F1E7 6 team --card #F6F1E7 2 how --bg #FDFAF4 7 faq --bg #FDFAF4 3 samples --tint #F2ECDF 8 trust --tint #F2ECDF 4 parent --card #F6F1E7 9 cta --deep #005F82 5 method --sky #EAF3F7 Bands 2 and 7 are the light alternate and are the ONLY ones on tier-0, which is safe because neither holds a .lnd-card or .lnd-q — band 2 is the ruled step list and band 7 is the FAQ. Put a card in either and it needs a tier of its own again. */ .lnd-band { padding: 68px 22px; } .lnd-band--card { background: var(--surface-tier-1, #F6F1E7); } /* was tier-0 #FDFAF4 */ .lnd-band--bg { background: var(--surface-tier-0, #FDFAF4); } /* was tier-1 #F6F1E7 */ .lnd-band--tint { background: var(--warm-200, #F2ECDF); } /* unchanged */ .lnd-band--sky { background: var(--lnd-cerulean-50); } .lnd-band--deep { background: var(--lnd-cerulean); color: #fff; } .lnd-band--deep .lnd-h2, .lnd-band--deep .lnd-display, .lnd-band--deep h3 { color: #fff; } .lnd-band--deep p, .lnd-band--deep .lnd-lead { color: var(--lnd-cerulean-100); } /* 5.39 */ .lnd-band--deep .lnd-eyebrow { color: var(--lnd-cerulean-100); } .lnd-inner { max-width: 1120px; margin: 0 auto; } .lnd-inner--narrow { max-width: 800px; } .lnd-section-head { max-width: 62ch; margin-bottom: 34px; } .lnd-section-head--center { margin-left: auto; margin-right: auto; text-align: center; } .lnd-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lnd-cerulean); /* 7.10 on white, 6.31 on sky */ } .lnd-display { font-family: var(--lnd-display); font-size: clamp(2.15rem, 5.2vw, 3.5rem); /* min 34.4px — coral is legal here */ line-height: 1.06; letter-spacing: -.022em; font-weight: 600; color: var(--lnd-ink); margin: 0; } .lnd-h2 { font-family: var(--lnd-display); font-size: clamp(1.6rem, 3.1vw, 2.3rem); line-height: 1.18; letter-spacing: -.015em; font-weight: 600; color: var(--lnd-ink); margin: 0; } .lnd-h3 { font-size: 1.06rem; font-weight: 700; line-height: 1.35; margin: 0 0 8px; color: var(--lnd-ink); } .lnd-lead { font-size: clamp(1rem, 1.25vw, 1.14rem); line-height: 1.68; color: var(--lnd-muted); margin: 0; } .lnd-measure { max-width: 56ch; } .lnd-accent { color: var(--lnd-cerulean); } /* only ever inside .lnd-display — see --lnd-coral's obituary above */ .lnd p { margin: 0 0 14px; } .lnd p:last-child { margin-bottom: 0; } /* ══ BUTTONS ═════════════════════════════════════════════════════════════ Own implementation rather than style.css's .k-btn, because .k-btn--primary fills from --accent, a token this page does not control. A CTA is the one element where an inherited colour change could silently break contrast. */ .lnd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--lnd-sans); font-size: 16px; font-weight: 700; padding: 15px 28px; border-radius: 999px; border: 1.5px solid transparent; text-decoration: none; cursor: pointer; line-height: 1.2; transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; } .lnd-btn--primary { background: var(--lnd-cerulean); color: #fff; box-shadow: var(--lnd-shadow-lift); } /* 7.10 */ .lnd-btn--primary:hover { background: var(--lnd-cerulean-deep); color: #fff; transform: translateY(-1px); } /* 9.67 */ .lnd-btn--quiet { background: transparent; color: var(--lnd-cerulean); border-color: var(--lnd-cerulean-100); } .lnd-btn--quiet:hover { background: var(--lnd-cerulean-50); color: var(--lnd-cerulean-deep); } .lnd-btn--on-deep { background: #fff; color: var(--lnd-cerulean-deep); } /* 9.67 */ .lnd-btn--on-deep:hover { background: var(--lnd-cerulean-50); color: var(--lnd-cerulean-deep); } .lnd-btn--ghost-deep { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); } .lnd-btn--ghost-deep:hover { background: rgba(255,255,255,.12); color: #fff; } .lnd-btn:focus-visible { outline: 3px solid var(--lnd-cerulean); outline-offset: 3px; } .lnd-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .lnd-undercta { margin-top: 14px; font-size: 14px; color: var(--lnd-muted); } .lnd-link { color: var(--lnd-cerulean); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .lnd-link:hover { color: var(--lnd-cerulean-deep); } /* ══ HERO ════════════════════════════════════════════════════════════════ */ .lnd-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 48px; align-items: center; } /* ⚑ SPECIFICITY TRAP, measured. The overflow-discipline rule above, `.lnd img, .lnd svg { max-width: 100% }`, scores (0,1,1) — it BEATS a bare `.lnd-hero__art` at (0,1,0). Written that way the cap never applied at any width: the illustration was silently sized by its grid column instead (709px at a 768px viewport, 493px at 1440px, against an intended 420/300). It looked deliberate, which is why it survived a visual pass. The compound selector below scores (0,2,1) and actually wins. Any per-image cap on this page needs the same treatment. */ .lnd img.lnd-hero__art { width: 100%; max-width: 420px; height: auto; margin: 0 auto; display: block; } /* Trust strip at the fold. Statements about the software, not social proof. Full-bleed inside lnd-inner rather than inside the hero's copy column — see the note in landing.html for why. */ .lnd-fold { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 24px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--lnd-line); } .lnd-fold__item { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.45; color: var(--lnd-muted); font-weight: 600; } .lnd-fold__item svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 2px; fill: none; stroke: var(--lnd-cerulean); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; } .lnd-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; } .lnd-fact { background: var(--lnd-cerulean-50); border: 1px solid var(--lnd-cerulean-100); border-radius: var(--lnd-r); padding: 20px 20px 18px; } .lnd-fact__n { display: block; font-family: var(--lnd-display); font-size: 2.5rem; line-height: 1; font-weight: 600; color: var(--lnd-cerulean); } /* 6.31 on sky */ .lnd-fact__l { display: block; margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--lnd-muted); } /* 4.91 on sky */ /* ══ GRIDS & CARDS ═══════════════════════════════════════════════════════ */ .lnd-grid { display: grid; gap: 22px; } .lnd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lnd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lnd-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lnd-card { background: var(--lnd-card); border: 1px solid var(--lnd-line); border-radius: var(--lnd-r); padding: 26px; box-shadow: var(--lnd-shadow); } .lnd-card p { font-size: 15px; line-height: 1.66; color: var(--lnd-muted); } .lnd-card__art { width: 92px; height: 92px; display: block; margin-bottom: 16px; } /* ══ HOW IT WORKS — editorial steps, not marketing bullets ═══════════════ At >=1000px the section head sits in its own sticky column beside the steps. Left-aligned full-bleed steps with a 62ch measure left ~40% of a 1440px band empty, which reads as an unfinished layout rather than as deliberate whitespace; giving the head a column makes the same measure look intended. */ .lnd-steps--split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; } .lnd-steps--split .lnd-steps__head { position: sticky; top: 96px; margin-bottom: 0; } .lnd-steps { display: grid; gap: 0; } .lnd-step { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 26px; padding: 30px 0; border-top: 1px solid var(--lnd-line); } .lnd-step:last-child { border-bottom: 1px solid var(--lnd-line); } .lnd-step__n { width: 54px; height: 54px; border-radius: 50%; background: var(--lnd-cerulean-50); border: 1px solid var(--lnd-cerulean-100); display: flex; align-items: center; justify-content: center; font-family: var(--lnd-display); font-size: 1.4rem; font-weight: 600; color: var(--lnd-cerulean); /* 6.31 on sky */ } .lnd-step__body h3 { font-family: var(--lnd-display); font-size: 1.32rem; font-weight: 600; margin: 8px 0 10px; letter-spacing: -.01em; } .lnd-step__body p { font-size: 15px; line-height: 1.7; color: var(--lnd-muted); max-width: 62ch; } .lnd-step__body .lnd-cite { margin-top: 10px; } /* ══ SAMPLE CONTENT ══════════════════════════════════════════════════════ */ /* ⚑ Q6: THE VOID WAS A CONTENT-BALANCE PROBLEM AND THREE PASSES TRIED TO SOLVE IT AS AN ALIGNMENT ONE. Worth writing down, because the fourth attempt only works by rejecting the premise the first three shared. earlier `align-items: start` all the slack at the BOTTOM of the short column — one tall void of bare band. Q5 `align-items: center` the slack SPLIT above and below — two voids of half the height each. Q6 first `align-items: stretch` + the footer pushed to the card's foot. This looked like the answer and is NOT: it moves 444px of bare band INSIDE a bordered card, and a card with a 444px hole in its middle advertises the emptiness rather than hiding it. Rendered, it was visibly worse than what it replaced. `align-items` cannot fix this, because the surplus height is real: measured by scratch_agent_q6/measure_sample.py, `center` left, as COLUMN SHORTFALL in px, reading / abstract / quant-writing: 1920px 340 / 444 / 260 1440px 340 / 444 / 260 1024px 360 / 429 / 265 768px 673 / 348 / 236 So the height itself moves. measure_blocks.py broke each column into its sub-blocks and the abstract row — the worst of the three, and the one a reader spots — turned out to be mis-assigned rather than unbalanced: LEFT head 58 + stem 26 + figure 541 + WHY 236 + padding 44 = 939 RIGHT art 92 + h3 23 + para 100 + para 100 + cite 75 + pad = 495 The 236px `.lnd-q__why` block is the written explanation of the puzzle. It is COMMENTARY, exactly like the prose card it sits opposite — the ARTEFACT is the figure and its four options. Moving it into the right column (see `.lnd-sample__aside` and the note in landing.html) both shortens the artefact column and lengthens the commentary column, which is why one move closes most of the gap instead of half of it. It also reads better: the reader now meets the figure, then the options, then everything anyone wrote about it, in the column where writing lives. ⚑ NO STICKY, AND THE REASON IS ARITHMETIC, NOT TASTE. Sticky is this sheet's own pattern at `.lnd-steps--split .lnd-steps__head`, so it was the obvious reach. It does not work here: sticky only hides a shortfall when the tall column is much taller than the VIEWPORT, so that no scroll position shows the whole gap at once. The abstract row is 939px against a 900px viewport, so at the scroll position showing the row's foot roughly 350px of bare band is on screen beside a pinned card regardless. Sticky would have cost a viewport-height media gate and bought nothing. */ .lnd-sample { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; } /* ⚑ THE OTHER TWO ROWS HAVE NOTHING TO MOVE, so they are balanced by MEASURE instead. Reading pairs a 370-word passage with a four-option question, and quant pairs a worked question with a writing prompt; in both the left block is long-form prose and the right is a short list, and neither has a paragraph that belongs on the other side. Widening the prose column shortens it (fewer line breaks over a longer measure) while narrowing the list column lengthens it (options wrap), so ONE ratio moves both ends toward each other. Measured at 1440, as COLUMN SHORTFALL: row 1fr 1fr 1.18fr .82fr reading 340px 169px (also +33px from the new `.lnd-passage + .lnd-cite` rule below, which is a real addition to the passage card's height) quant/writing 260px 168px abstract 444px 68px (by the reflow, not this ratio) The abstract row keeps 1fr 1fr — it is already balanced by the reflow above, and this ratio would over-correct it in the opposite direction (measured: the commentary column becomes ~158px the TALLER of the two). Hence a modifier and not a change to the base rule. The passage measure goes from ~62 to ~72 characters, which is at the top of the comfortable range but inside it; do not push this ratio further to buy more balance, because losing readability of the sample passage to tidy a gap would be a bad trade on the page whose whole argument is "look at the real content". */ .lnd-sample--wide { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); } /* The commentary column when it holds MORE THAN ONE block — the prose card plus the moved explanation. `align-content: start` so the two stay together at the top and any residual stays at the foot of the column, undistributed. */ .lnd-sample__aside { display: grid; gap: 22px; align-content: start; } /* Standalone, the explanation supplies its own top margin from inside `.lnd-q`; in the aside the grid gap does that job, so cancel it and avoid a double gap. */ .lnd-sample__aside > .lnd-q__why { margin-top: 0; } .lnd-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--lnd-cerulean-50); color: var(--lnd-cerulean); border: 1px solid var(--lnd-cerulean-100); } /* ⚑ Q5: WAS A LILAC CHIP WITH TEAL INK, which is not a colour scheme. `background: #F3ECFE; border-color: #E4D5FC` were hard-coded violet tints, but its ink read `var(--lnd-purple)` -> `--k-purple`, and Q4 repointed --k-purple at --teal-600 — so the one chip on this page rendered #00506E on a violet wash: the last cold tint in the landing sheet, and the label it carries is "Example view", the disclosure that the numbers beside it are illustrative. That label needs to be MORE prominent than an ordinary .lnd-tag, not differently coloured from it, so it is now a FILLED teal chip. White on --teal-500 is 7.10 and no new value is introduced. ⚑ .lnd-caveat still carries the violet pair (#F3ECFE / #5B2BC0) and is LEFT ALONE on purpose: it is /pricing's honesty callout and the wrapper _non_affiliation.html defaults to, which Phase 1 owns. */ .lnd-tag--purple { background: var(--lnd-cerulean); color: #fff; border-color: var(--lnd-cerulean); } .lnd-tagrow { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; } .lnd-passage { font-size: 15px; line-height: 1.78; color: var(--lnd-ink); } .lnd-passage p { margin: 0 0 13px; } .lnd-cite { font-size: 13px; line-height: 1.55; color: var(--lnd-muted); margin: 12px 0 0; } /* ⚑ Q6: a caption directly under 370 words of prose needs a RULE, not 12px. `.lnd-passage p` carries a 13px bottom margin which collapses against the cite's 12px top, so the excerpt note ("Paragraphs 1, 3 and 5 of five…") sat 13px under the last line of the story in the same column at nearly the same size — it read as a FOURTH PARAGRAPH of the passage rather than as a note about it, which on a page whose entire argument is "this text is verbatim from the bank" is the one confusion to avoid. A hairline and real space make the register change visible. */ .lnd-passage + .lnd-cite { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--lnd-line); } .lnd-q { background: var(--lnd-card); border: 1px solid var(--lnd-line); border-radius: var(--lnd-r); overflow: hidden; box-shadow: var(--lnd-shadow); } .lnd-q__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 20px; background: var(--lnd-cerulean-50); border-bottom: 1px solid var(--lnd-cerulean-100); font-size: 13px; font-weight: 600; color: var(--lnd-muted); } .lnd-q__body { padding: 22px 20px; } .lnd-q__stem { font-size: 16px; line-height: 1.6; font-weight: 600; color: var(--lnd-ink); margin: 0 0 16px; } .lnd-stimulus { font-size: 15px; line-height: 1.6; padding: 14px 16px; margin: 0 0 16px; background: var(--lnd-tint); border-left: 3px solid var(--lnd-cerulean); border-radius: 0 var(--lnd-r-sm) var(--lnd-r-sm) 0; } .lnd-q__opts { display: grid; gap: 9px; } .lnd-q__opt { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding: 13px 15px; border: 1.5px solid var(--lnd-line); border-radius: var(--lnd-r-sm); background: var(--lnd-card); font: inherit; font-size: 15px; line-height: 1.5; color: var(--lnd-ink); cursor: default; transition: border-color .15s ease, background .15s ease; } button.lnd-q__opt { cursor: pointer; } button.lnd-q__opt:hover { border-color: var(--lnd-cerulean); background: var(--lnd-cerulean-50); } button.lnd-q__opt:focus-visible { outline: 3px solid var(--lnd-cerulean); outline-offset: 2px; } .lnd-q__key { flex: 0 0 25px; width: 25px; height: 25px; border-radius: 50%; background: var(--lnd-tint); border: 1px solid var(--lnd-line); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--lnd-muted); } /* The key is revealed only once the block is in its answered state, so the page is not an answer sheet on first paint. */ .lnd-q.is-answered .lnd-q__opt.is-correct, .lnd-q--static .lnd-q__opt.is-correct { border-color: var(--lnd-cerulean); background: var(--lnd-cerulean-50); } .lnd-q.is-answered .lnd-q__opt.is-correct .lnd-q__key, .lnd-q--static .lnd-q__opt.is-correct .lnd-q__key { background: var(--lnd-cerulean); border-color: var(--lnd-cerulean); color: #fff; } /* 7.10 */ .lnd-q__opt.is-picked { border-color: var(--lnd-cerulean); } .lnd-q__why { margin-top: 16px; padding: 16px 18px; border-radius: var(--lnd-r-sm); background: var(--lnd-cerulean-50); border: 1px solid var(--lnd-cerulean-100); font-size: 15px; line-height: 1.68; color: var(--lnd-ink); } .lnd-q__why strong { color: var(--lnd-cerulean-deep); } /* 8.59 on sky */ .lnd-q__why p { margin: 0 0 8px; } .lnd-q__why p:last-child { margin-bottom: 0; } .lnd-fo { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 15px 17px; border-radius: var(--lnd-r-sm); background: var(--lnd-tint); border: 1px solid var(--lnd-line); } .lnd-fo__pic { flex: 0 0 40px; width: 40px; height: 40px; } .lnd-fo__txt { font-size: 15px; line-height: 1.62; color: var(--lnd-ink); } .lnd-fo__who { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lnd-cerulean); margin-bottom: 5px; } /* ── the real abstract figure, rendered by the app's own engine ───────── */ .lnd-abs { margin: 0; } .lnd-abs__fig { background: #fff; border: 1px solid var(--lnd-line); border-radius: var(--lnd-r-sm); padding: 14px; max-width: 380px; margin: 0 auto 18px; } .lnd-abs__opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .lnd-abs__opt { border: 1.5px solid var(--lnd-line); border-radius: var(--lnd-r-sm); padding: 9px 7px 7px; background: #fff; text-align: center; } .lnd-abs__opt.is-key { border-color: var(--lnd-cerulean); background: var(--lnd-cerulean-50); } .lnd-abs__key { display: block; font-size: 12px; font-weight: 700; color: var(--lnd-muted); margin-bottom: 6px; } .lnd-abs__opt.is-key .lnd-abs__key { color: var(--lnd-cerulean-deep); } /* 8.59 on sky */ .lnd-abs__opt svg { margin: 0 auto; } /* ══ PARENT VIEW ═════════════════════════════════════════════════════════ */ .lnd-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; } .lnd-dash { background: var(--lnd-card); border: 1px solid var(--lnd-line); border-radius: 12px; padding: 26px; box-shadow: var(--lnd-shadow-lift); } .lnd-dash__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .lnd-dash__label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lnd-muted); } .lnd-dash__value { font-family: var(--lnd-display); font-size: 3rem; line-height: 1; font-weight: 600; color: var(--lnd-cerulean); margin-top: 8px; } .lnd-dash__of { font-size: .42em; color: var(--lnd-muted); } .lnd-rule { border: 0; border-top: 1px solid var(--lnd-line); margin: 22px 0; } .lnd-skill { margin-bottom: 16px; } .lnd-skill:last-of-type { margin-bottom: 0; } .lnd-skill__top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 600; margin-bottom: 7px; } .lnd-skill__top span:last-child { color: var(--lnd-muted); } .lnd-meter { height: 9px; border-radius: 999px; background: var(--lnd-cerulean-100); overflow: hidden; } .lnd-meter__fill { height: 100%; border-radius: 999px; background: var(--lnd-cerulean); } /* 5.39 vs track */ .lnd-meter__fill--mid { background: #2f7fa0; } .lnd-meter__fill--low { background: #7aa9bd; } .lnd-ticks { list-style: none; padding: 0; margin: 0; } .lnd-ticks li { position: relative; padding-left: 30px; margin-bottom: 13px; font-size: 15px; line-height: 1.6; color: var(--lnd-muted); } .lnd-ticks li::before { content: ''; position: absolute; left: 0; top: 6px; width: 17px; height: 17px; border-radius: 50%; background: var(--lnd-cerulean-50); border: 1px solid var(--lnd-cerulean-100); } .lnd-ticks li::after { content: ''; position: absolute; left: 5px; top: 11px; width: 7px; height: 4px; border-left: 2px solid var(--lnd-cerulean); border-bottom: 2px solid var(--lnd-cerulean); transform: rotate(-45deg); } /* ══ METHODOLOGY ═════════════════════════════════════════════════════════ */ .lnd-method { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .lnd-method__item { background: var(--lnd-card); border: 1px solid var(--lnd-line); border-left: 3px solid var(--lnd-cerulean); border-radius: var(--lnd-r-sm); padding: 22px; } .lnd-method__item h3 { font-size: 1rem; } .lnd-method__item p { font-size: 15px; line-height: 1.66; color: var(--lnd-muted); margin: 0; } /* ══ TEAM ════════════════════════════════════════════════════════════════ */ .lnd-team { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; } .lnd-person { background: var(--lnd-card); border: 1px solid var(--lnd-line); border-radius: var(--lnd-r); padding: 26px; box-shadow: var(--lnd-shadow); } .lnd-person__av { width: 68px; height: 68px; border-radius: 50%; margin-bottom: 16px; background: var(--lnd-cerulean-50); border: 1px solid var(--lnd-cerulean-100); display: flex; align-items: center; justify-content: center; font-family: var(--lnd-display); font-size: 1.6rem; font-weight: 600; color: var(--lnd-cerulean); } .lnd-person__role { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--lnd-cerulean); margin-bottom: 10px; } .lnd-person p { font-size: 15px; line-height: 1.68; color: var(--lnd-muted); } /* ⚑ The placeholder is deliberately conspicuous. A team card with an invented bio is a fabricated claim; a card that says "not filled in yet" is not — but only if a skim-reader can TELL. At a glance the first draft's dashed 1px border read as a finished card, so the marking is now redundant three ways: a 2px dashed border, a tinted fill, and a literal "Not published yet" chip. */ .lnd-person--todo { border: 2px dashed #9DC3D3; background: var(--lnd-cerulean-50); box-shadow: none; } .lnd-person--todo .lnd-person__av { background: #fff; border-style: dashed; } .lnd-person__todo-chip { display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px dashed #9DC3D3; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lnd-cerulean-deep); /* 8.59 on the sky fill */ } /* ══ FAQ ═════════════════════════════════════════════════════════════════ */ .lnd-faq { max-width: 780px; } .lnd-faq details { border-bottom: 1px solid var(--lnd-line); } .lnd-faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--lnd-ink); } .lnd-faq summary::-webkit-details-marker { display: none; } .lnd-faq summary:focus-visible { outline: 3px solid var(--lnd-cerulean); outline-offset: 2px; border-radius: 10px; } .lnd-faq summary::after { content: ''; position: absolute; right: 8px; top: 27px; width: 9px; height: 9px; border-right: 2.2px solid var(--lnd-cerulean); border-bottom: 2.2px solid var(--lnd-cerulean); transform: rotate(45deg); transition: transform .18s ease; } .lnd-faq details[open] summary::after { transform: rotate(-135deg); top: 31px; } .lnd-faq details p { font-size: 15px; line-height: 1.72; color: var(--lnd-muted); margin: 0 0 18px; max-width: 66ch; } /* ══ TRUST ═══════════════════════════════════════════════════════════════ ⚑ Q5: these six were bare flex rows floating directly on the band, which gave the ONE section that is entirely promises less visual weight than the six methodology cards above it. They are now on tier-0 card faces with the band at warm-200 underneath — same two radii, same --shadow-d1, no new depth — so "what we can actually promise" carries at least as much as "how a question is built". Nothing here hovers: a trust marker is not a link and a lift would promise a click that does not exist. */ .lnd-trust { display: flex; gap: 15px; align-items: flex-start; background: var(--lnd-card); border: 1px solid var(--lnd-line); border-radius: var(--lnd-r); padding: 20px 20px 19px; box-shadow: var(--lnd-shadow); } .lnd-trust__icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; background: var(--lnd-cerulean-50); border: 1px solid var(--lnd-cerulean-100); display: inline-flex; align-items: center; justify-content: center; } .lnd-trust__icon svg { width: 20px; height: 20px; fill: none; stroke: var(--lnd-cerulean); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .lnd-trust p { font-size: 15px; line-height: 1.62; color: var(--lnd-muted); margin: 0; } /* ══ ONE RUN, THREE QUESTIONS ════════════════════════════════════════════ ⚑ EVERY STEM, SKILL AND TIER IN THIS STRIP IS ONE OF THE ITEMS ALREADY SHOWN VERBATIM FURTHER UP THIS BAND, re-presented as a sequence. It shows the SHAPE of a session and invents no fourth question to do it; the skill names are app.py's SKILL_REGISTRY output, i.e. what the child's own section page prints. See the provenance comment in landing.html. */ .lnd-run { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } .lnd-run__step { position: relative; background: var(--lnd-card); border: 1px solid var(--lnd-line); padding: 18px 20px 20px; } .lnd-run__step:first-child { border-radius: var(--lnd-r) 0 0 var(--lnd-r); } .lnd-run__step:last-child { border-radius: 0 var(--lnd-r) var(--lnd-r) 0; } .lnd-run__step + .lnd-run__step { border-left: 0; } .lnd-run__n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lnd-cerulean-50); border: 1px solid var(--lnd-cerulean-100); font-size: 13px; font-weight: 700; color: var(--lnd-cerulean); /* 6.36 on sky */ margin-bottom: 11px; } /* ⚑ Two LINES, not a wrapping row. As a flex row the short skill name ("Inference") left step 1 on one line while steps 2 and 3 wrapped onto two, so the three stems started at three different heights and the strip read as ragged rather than as a sequence. Grid with one column pins the baseline whatever the name's length. */ .lnd-run__meta { display: grid; gap: 3px; margin-bottom: 9px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lnd-cerulean); } .lnd-run__meta span:last-child { color: var(--lnd-muted); } /* 5.44 on tier-0 */ .lnd-run__stem { font-size: 14.5px; line-height: 1.5; color: var(--lnd-ink); margin: 0 0 10px; } .lnd-run__state { display: inline-block; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--lnd-muted); margin: 0; } /* ══ FO'S HINT LADDER ════════════════════════════════════════════════════ ⚑ THE THREE RUNGS ARE RENDERED FROM app.py's FO_HINT_FALLBACK, NOT TYPED HERE OR IN THE TEMPLATE. See the comment in landing.html: a hand-copied "sample hint" is exactly the fabrication this page has already had to have removed once. */ .lnd-ladder { display: grid; gap: 12px; } .lnd-rung { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start; background: var(--lnd-card); border: 1px solid var(--lnd-line); border-radius: var(--lnd-r-sm); padding: 15px 17px; } .lnd-rung__n { width: 30px; height: 30px; border-radius: 50%; background: var(--lnd-cerulean); color: #fff; /* 7.10 */ display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; } .lnd-rung__label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--lnd-cerulean); margin-bottom: 5px; /* 6.81 */ } .lnd-rung__say { font-size: 15px; line-height: 1.6; color: var(--lnd-ink); margin: 0; } /* ══ SCROLL REVEAL ═══════════════════════════════════════════════════════ ⚑ THE DEFAULT IS VISIBLE, AND THAT IS THE WHOLE SAFETY MODEL. `.lnd-rise` on its own does nothing; landing.html's IntersectionObserver adds `.lnd-rise--armed` to the element FIRST and only then observes, so with JS off, with the observer unsupported, or if the script throws, every block simply renders — a fade-in implemented the other way round (hidden by default, revealed by script) hides the entire page when anything breaks. The reduced-motion query below re-shows everything even in the armed state, so the setting wins over the script without the script having to check it. */ .lnd-rise { will-change: opacity, transform; } html.lnd-rise--armed .lnd-rise { opacity: 0; transform: translateY(14px); transition: opacity .5s cubic-bezier(.2,.6,.3,1), transform .5s cubic-bezier(.2,.6,.3,1); } html.lnd-rise--armed .lnd-rise.is-in { opacity: 1; transform: none; } .lnd-note { border: 1px solid var(--lnd-line); border-radius: var(--lnd-r); background: var(--lnd-card); padding: 20px 22px; font-size: 14px; line-height: 1.68; color: var(--lnd-muted); } .lnd-note strong { color: var(--lnd-ink); } /* Decorative blue block — the ONE place #4f91ee appears, and it carries no text, per the measured 3.17:1. */ .lnd-swatch { display: inline-block; width: 34px; height: 5px; border-radius: 3px; background: var(--lnd-blue); } /* ══ MARKETING SUBPAGES — /pricing and /how-it-works ═════════════════════ Added by Agent M, Session 7. These two pages were on the `ks-*` system in static/surfaces.css while the landing page was here, and the split was visible without scrolling: measured at 1440px the content rail was at 240px on /pricing against 160px on /, the primary CTA was #2f5fa8 against #005F82, 12px radius against a pill, and Lexend 600 against Manrope 700. Rather than patch one system to imitate the other, the two subpages were moved ONTO this one. The components they needed and this file did not yet have are below; everything else they use was already here. ⚑ surfaces.css is NOT unlinked from the app — dashboard.html and practice_home.html link it themselves and still own the whole `ks-*` namespace. Only the two marketing templates stopped importing it, so this change cannot reach a logged-in surface. */ /* Honesty callout — where the copy states a LIMIT rather than a benefit. Purple, not red: a limit stated plainly is not an error state. Carried over from .ks-caveat so /pricing's "Two things we do not do" keeps its voice. */ .lnd-caveat { background: #F3ECFE; border-left: 3px solid var(--lnd-purple); border-radius: 0 var(--lnd-r-sm) var(--lnd-r-sm) 0; padding: 16px 20px; margin: 24px 0; /* ⚑ Agent P3, Session 8: the ONE ragged right edge on the marketing pages. Measured at 1440 on /pricing, the "Before you subscribe" band set its heading and its FAQ list to a 780px measure and then ran this note to the full 1120px inner — the three blocks sat at 1280 / 940 / 1280, so a band that is otherwise one column read as two. 780 is the FAQ's own measure, so the whole band now shares one right edge. Every other .lnd-caveat on the site is already inside a narrower column and is unaffected. */ max-width: 780px; font-size: 15px; line-height: 1.66; color: var(--lnd-ink); } .lnd-caveat strong { color: #5B2BC0; } /* 7.53 on #F3ECFE */ /* Price card. The one element on /pricing that should carry the most depth, because it carries the decision. */ .lnd-price-card { background: var(--lnd-card); border: 1px solid var(--lnd-cerulean-100); border-top: 3px solid var(--lnd-cerulean); border-radius: 12px; padding: 28px 26px; box-shadow: var(--lnd-shadow-lift); } /* Non-affiliation line inside the price card, above the CTA. Ruled off so it reads as a disclosure rather than as one more selling point. Colour is .lnd-cite's --lnd-muted (5.53:1) — do not fade it further. */ .lnd-price-card__legal { border-top: 1px solid var(--lnd-line); padding-top: 14px; } .lnd-price { display: flex; align-items: baseline; gap: 7px; margin-top: 16px; } .lnd-price__amt { font-family: var(--lnd-display); font-weight: 600; font-size: 3.25rem; line-height: 1; letter-spacing: -.03em; color: var(--lnd-cerulean); /* 7.10 */ } .lnd-price__per { font-size: 15px; color: var(--lnd-muted); } /* 5.53 */ .lnd-btn--block { width: 100%; } /* /pricing's copy column is wider than its price column; /how-it-works uses the plain .lnd-split. align-items:start so the card does not float against a much taller list. */ .lnd-split--offset { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; gap: 44px; } /* A stack of labelled cards — "SECTION 01", "STEP 1". The label is the eyebrow already defined above, so this is only the container. */ .lnd-labelled { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .lnd-labelled .lnd-card__label { display: block; margin-bottom: 10px; } /* ══ PREMIUM DENSITY ═════════════════════════════════════════════════════ ⚑ Hover belongs to things that DO something. A hover lift on a card that is not a link is a promise the card cannot keep, so the static content cards on these pages deliberately do not lift — depth on them comes from the shadow ramp, which is monochrome and tinted from the ink so it never reads as a fifth colour. Only genuinely interactive elements respond. */ .lnd-card, .lnd-person, .lnd-price-card, .lnd-method__item, .lnd-q, .lnd-note { transition: box-shadow .18s cubic-bezier(.2,.6,.3,1), border-color .18s cubic-bezier(.2,.6,.3,1); } a.lnd-card:hover, a.lnd-card:focus-visible { border-color: var(--lnd-cerulean-100); box-shadow: var(--lnd-shadow-lift); transform: translateY(-2px); } a.lnd-card { transition: box-shadow .18s cubic-bezier(.2,.6,.3,1), border-color .18s cubic-bezier(.2,.6,.3,1), transform .18s cubic-bezier(.2,.6,.3,1); } .lnd-faq summary { transition: color .16s ease; } .lnd-faq summary:hover { color: var(--lnd-cerulean-deep); } /* 9.67 */ .lnd-link { transition: color .16s ease; } /* ══ RESPONSIVE ══════════════════════════════════════════════════════════ */ @media (max-width: 1000px) { .lnd-split--offset { grid-template-columns: minmax(0, 1fr); gap: 34px; } .lnd-labelled { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lnd-hero, .lnd-split { grid-template-columns: minmax(0, 1fr); gap: 40px; } .lnd img.lnd-hero__art { max-width: 320px; } /* ⚑ Q6: THE SAMPLES STACK AT 1000, NOT AT 760, and the 760 rule below is now unreachable for them (kept there because it names five other grids). Two independent reasons, both measured: 1. The abstract figure is capped at 380px by `.lnd-abs__fig`. In a 2-column grid at a 768px viewport each column is 350px, so the ONE element on this page that must not shrink was being shrunk on every tablet. 2. The reflow above balances the abstract row at a wide measure and OVER-balances it at a narrow one — at 768 the commentary column ran 432px TALLER than the artefact, i.e. the same void with the sign flipped. That is inherent: moving a block between columns is a fixed transfer, and the columns' heights are not. One column removes both, and a stacked passage-then-question reads better on a tablet than two 350px columns of it ever did. */ .lnd-sample, .lnd-sample--wide { grid-template-columns: minmax(0, 1fr); gap: 22px; } .lnd-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lnd-method { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lnd-fold { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lnd-steps--split { grid-template-columns: minmax(0, 1fr); gap: 0; } .lnd-steps--split .lnd-steps__head { position: static; } /* The dashboard preview reads better ABOVE the copy on narrow screens; the copy explains a picture the reader has already seen. */ .lnd-split .lnd-dash { order: -1; } } @media (max-width: 1000px) { /* The run strip stacks; the rounded corners have to follow it or the middle step keeps a square top and the last keeps a square left. */ .lnd-run { grid-template-columns: minmax(0, 1fr); } .lnd-run__step:first-child { border-radius: var(--lnd-r) var(--lnd-r) 0 0; } .lnd-run__step:last-child { border-radius: 0 0 var(--lnd-r) var(--lnd-r); } .lnd-run__step + .lnd-run__step { border-left: 1px solid var(--lnd-line); border-top: 0; } } @media (max-width: 760px) { .lnd-band { padding: 52px 18px; } .lnd-section-head { margin-bottom: 26px; } .lnd-fold, .lnd-facts { grid-template-columns: minmax(0, 1fr); } .lnd-sample, .lnd-grid--2, .lnd-grid--3, .lnd-team { grid-template-columns: minmax(0, 1fr); } .lnd-method { grid-template-columns: minmax(0, 1fr); } .lnd-cta-row { margin-top: 24px; } .lnd-btn { width: 100%; } .lnd-step { grid-template-columns: 46px minmax(0, 1fr); gap: 16px; padding: 24px 0; } .lnd-step__n { width: 44px; height: 44px; font-size: 1.15rem; } .lnd-labelled { grid-template-columns: minmax(0, 1fr); } .lnd-price__amt { font-size: 2.75rem; } } @media (max-width: 460px) { .lnd-grid--4 { grid-template-columns: minmax(0, 1fr); } .lnd-fact { flex: 1 1 100%; } .lnd-abs__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .lnd *, .lnd *::before, .lnd *::after { transition: none !important; animation: none !important; } /* Killing the transition is not enough on its own — a translate with no transition still moves, it just jumps. The lift itself has to go. Every hover transform this sheet declares is listed here; polish.css section 3 carries the same guarantee for the rest of the site. */ .lnd-btn--primary:hover, a.lnd-card:hover, a.lnd-card:focus-visible { transform: none; } /* ⚑ Q5 scroll reveal. The `* { transition: none }` above stops the fade ANIMATING but leaves the armed start state — opacity 0, translated — applied until the observer fires, so a reduced-motion reader with a slow observer sees blank blocks, and one whose browser never fires it sees a blank page. This re-shows them outright, which is what the setting asks for: not a faster fade, no fade. It beats the armed rule on specificity (0,3,1 vs 0,2,1) — every .lnd-rise on this page is inside .lnd — and it does not depend on the script running at all. */ html.lnd-rise--armed .lnd .lnd-rise, html.lnd-rise--armed .lnd .lnd-rise.is-in { opacity: 1; transform: none; } }