:root { --ink: #132d2b; --ink-soft: #36504d; --paper: #fffdf8; --canvas: #f4f0e7; --canvas-deep: #e8e1d3; --line: #d6d0c4; --teal: #0b665e; --teal-dark: #084b46; --teal-pale: #dcebe5; --rust: #a34f35; --warning: #fff0bf; --warning-ink: #4b3600; --white: #ffffff; --shadow: 0 24px 70px rgba(19, 45, 43, 0.11); --radius: 18px; --shell: 1180px; --serif: Georgia, "Times New Roman", serif; --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 17px; line-height: 1.62; text-rendering: optimizeLegibility; } a { color: inherit; text-underline-offset: 0.2em; } a:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 8px #081f1d; border-radius: 4px; } h1, h2, h3, p { margin-top: 0; } h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; } h1 { max-width: 800px; margin-bottom: 28px; font-size: clamp(3rem, 7vw, 6.4rem); } h2 { margin-bottom: 24px; font-size: clamp(2.2rem, 4.5vw, 4.1rem); } h3 { line-height: 1.25; } .shell { width: min(calc(100% - 48px), var(--shell)); margin-inline: auto; } /* Every nav destination is an id on this page, and a sticky header would cover the top of each one on arrival. 96px is the 82px header plus a little air. */ [id] { scroll-margin-top: 96px; } .narrow-shell { max-width: 960px; } .skip-link { position: fixed; z-index: 1000; top: 10px; left: 12px; padding: 10px 16px; color: var(--white); background: var(--ink); transform: translateY(-180%); } .skip-link:focus { transform: translateY(0); } .staging-banner { position: sticky; z-index: 100; top: 0; display: flex; justify-content: center; gap: 12px; padding: 9px 24px; color: var(--warning-ink); background: var(--warning); border-bottom: 1px solid #e5c85e; font-size: 0.78rem; line-height: 1.35; text-align: center; } .staging-banner strong { text-transform: uppercase; letter-spacing: 0.045em; } /* Locked to the top of the viewport on 3 September 2026. `position: sticky` is pure CSS - script-src is 'none', so a JS scroll handler was never an option. It works because .site-header is a direct child of : no ancestor has overflow or a transform to trap it. The background is opaque so content scrolling underneath does not show through. */ .site-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 253, 248, 0.96); border-bottom: 1px solid var(--line); } .header-inner { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 24px; } .wordmark { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); font-weight: 750; text-decoration: none; letter-spacing: -0.02em; } /* The circle came off on 3 September 2026 (brief, Hero item 2: the marks were being cut off by it). The artwork now sits on the header's own ground at the same 40px. object-fit keeps the 620x550 artwork whole. Safe here: against --paper the logo's greens measure 5.66:1 (#33715A) to 8.88:1 (#1B523F). The gold is 1.95:1 on this ground, but it is the minority element and the greens carry the shape. */ .wordmark-mark { display: block; width: 40px; height: 40px; object-fit: contain; } .wordmark-text { font-size: 1.5rem; line-height: 1; } .primary-nav { display: flex; align-items: center; justify-content: flex-end; gap: 10px 22px; font-size: 0.88rem; font-weight: 650; } .nav-link { text-decoration: none; } .nav-link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; } .button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 14px; padding: 14px 21px; color: var(--white); background: var(--teal); border: 1px solid var(--teal); border-radius: 8px; font-size: 0.94rem; font-weight: 750; line-height: 1.2; text-decoration: none; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease; } .button:hover { background: var(--teal-dark); border-color: var(--teal-dark); transform: translateY(-1px); } .button-small { min-height: 42px; padding: 10px 15px; font-size: 0.82rem; } .button-secondary { color: var(--teal-dark); background: transparent; } .button-secondary:hover { color: var(--white); } .button-light { color: var(--teal-dark); background: var(--white); border-color: var(--white); } .button-light:hover { color: var(--ink); background: var(--canvas); border-color: var(--canvas); } .hero { overflow: hidden; padding: 32px 0 56px; background: radial-gradient(circle at 86% 18%, rgba(11, 102, 94, 0.1), transparent 28%), linear-gradient(180deg, var(--paper), #faf6ed); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(320px, 0.78fr); align-items: center; gap: clamp(50px, 8vw, 118px); } .eyebrow { margin-bottom: 18px; color: var(--teal); font-size: 0.73rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; } .eyebrow-light { color: #b9ded7; } .hero-lede { max-width: 680px; margin-bottom: 20px; color: var(--ink-soft); font-size: clamp(1.08rem, 1.8vw, 1.3rem); } .decision-line { margin-bottom: 28px; font-weight: 720; } .hero-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 32px; padding: 0; color: var(--ink-soft); font-size: 0.82rem; font-weight: 650; list-style: none; } .hero-facts li:not(:last-child)::after { content: "·"; margin-left: 20px; color: var(--rust); } /* 3 September 2026: rotation removed (brief asked for it straight), and the panel reduced. min-height 520 -> 430 and padding 32 -> 26. The brief asked for it to match a screenshot that did not reach this session, so these two numbers are chosen, not measured - correct them by eye. */ .report-cover { position: relative; min-height: 430px; padding: 26px; background: var(--ink); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 4px 28px 4px 4px; box-shadow: var(--shadow); color: var(--white); } .report-cover::before { position: absolute; inset: 15px; border: 1px solid rgba(255, 255, 255, 0.13); content: ""; pointer-events: none; } .report-cover-top, .cover-entry, .cover-footer { position: relative; z-index: 1; } .report-cover-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } /* ⚠️ CIRCLE REMOVED ON ALEX'S INSTRUCTION, 3 September 2026, AND THE CONTRAST COST IS REAL. The paper ground was added deliberately because this panel is --ink (#132d2b) and the logo's greens sit close to it. Measured against the panel with the ground gone: green darkest #1B523F 1.62:1 green mid #28634D 2.07:1 green lightest #33715A 2.54:1 pale highlight #98AA91 5.91:1 gold #D88F43 5.51:1 -> #E7AD6D 7.37:1 All three greens are below the 3:1 WCAG non-text threshold; the paper circle gave 14.37:1. In practice the gold arm and the pale highlight carry the mark and the green half reads as a dark shape on a dark ground. Applied as asked; judge it on the live site. */ .cover-mark { display: block; width: 45px; height: 45px; object-fit: contain; } /* The kicker moved INTO .report-cover-top on 3 September 2026, so the logo sits beside "Complex student data, made clear" rather than 78px above it. That 78px top margin was the blank space the brief asked to remove. */ .cover-kicker { position: relative; z-index: 1; margin: 0 0 13px; max-width: 15ch; color: #b9ded7; font-size: 0.73rem; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; } .report-cover h2 { position: relative; z-index: 1; max-width: 340px; margin-bottom: 35px; font-size: clamp(2.3rem, 4vw, 3.6rem); } .cover-rule { width: 72px; height: 2px; margin-bottom: 38px; background: #e29333; } .cover-entry { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 16px 0; border-block: 1px solid rgba(255, 255, 255, 0.18); font-size: 0.82rem; } .cover-entry strong, .cover-entry small { display: block; } .cover-entry small { margin-top: 2px; color: #b9c9c7; } .cover-entry b { font-family: var(--serif); font-size: 1.4rem; font-weight: 500; } .cover-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 58px; color: #b9c9c7; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; } .synthetic-label { display: inline-block; margin: 0; padding: 5px 8px; color: #5f4300; background: #ffe48a; border-radius: 3px; font-size: 0.65rem; font-weight: 850; letter-spacing: 0.055em; line-height: 1.3; text-transform: uppercase; } .checkpoint-note { display: grid; grid-template-columns: 180px 1fr; gap: 24px; margin-top: -30px; padding: 19px 22px; background: var(--warning); border: 1px solid #e5c85e; border-radius: 10px; color: var(--warning-ink); font-size: 0.82rem; } .checkpoint-note p { margin: 0; } .section { padding: 48px 0; } .section-tint { background: var(--canvas); } .section-dark { color: var(--white); background: var(--ink); } .section-dark .body-copy { color: #d9e3e1; } .section-rule { border-top: 1px solid var(--line); } .preview-grid, .split-copy { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(420px, 1.22fr); gap: clamp(50px, 9vw, 126px); } .sticky-intro { align-self: start; position: sticky; top: 110px; } .section-intro > p:not(.eyebrow), .body-copy { color: var(--ink-soft); } .section-intro h2, .split-copy h2 { max-width: 530px; } .renderer-note { padding-left: 15px; border-left: 3px solid #e29333; color: #625a4c; font-size: 0.78rem; } .text-link { display: inline-flex; gap: 10px; margin-top: 12px; color: var(--teal-dark); font-size: 0.88rem; font-weight: 800; text-decoration-thickness: 1px; } .text-link-light { color: #c4eee7; } .report-card { overflow: hidden; padding: clamp(24px, 4vw, 46px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .report-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 32px; } .entry-index { margin: 9px 0 0; color: #756f64; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .insight-pill { flex: none; padding: 7px 11px; color: var(--teal-dark); background: var(--teal-pale); border-radius: 999px; font-size: 0.72rem; font-weight: 800; } .report-card h3 { margin-bottom: 28px; font-family: var(--serif); font-size: clamp(1.65rem, 3vw, 2.35rem); font-weight: 500; } .report-layer { display: grid; grid-template-columns: 145px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--line); } .report-layer p { margin-bottom: 0; } .layer-label { color: var(--teal-dark); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.055em; text-transform: uppercase; } .report-message { align-items: start; } .message-copy { padding: 19px 20px; background: #f7f4ed; border-left: 3px solid var(--teal); border-radius: 0 8px 8px 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; line-height: 1.65; white-space: pre-wrap; } .message-copy .subject-line { margin-bottom: 12px; font-weight: 800; } .limit-note { margin: 20px 0 0; padding: 18px 20px; color: var(--ink-soft); background: var(--teal-pale); border-radius: 9px; font-size: 0.82rem; } .process-list { margin: 50px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; } .process-list li { display: grid; grid-template-columns: 110px 1fr; gap: 28px; padding: 35px 0; border-bottom: 1px solid var(--line); } .step-number { color: var(--rust); font-family: var(--serif); font-size: 2.3rem; line-height: 1; } .process-list h3 { margin: 0 0 6px; font-size: 1.18rem; } .process-list p { max-width: 660px; margin: 0; color: var(--ink-soft); } .founder-placeholder { display: flex; flex-direction: column; gap: 4px; margin: 27px 0; padding: 20px; color: #694c00; background: var(--warning); border: 1px dashed #b48e2b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; } .founder-placeholder span { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; } .final-cta { padding: 48px 0; color: var(--white); background: var(--teal); } .final-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 50px; } .final-cta h2 { margin-bottom: 16px; font-size: clamp(2.2rem, 4vw, 3.8rem); } .final-cta p:not(.eyebrow) { max-width: 710px; margin-bottom: 0; color: #d9eeea; } .site-footer { padding: 48px 0; color: #d5dfdd; background: #0b2321; font-size: 0.75rem; } .footer-grid { display: flex; justify-content: space-between; gap: 36px; } .footer-grid p { margin: 4px 0; } .footer-brand { color: var(--white); font-weight: 800; } .footer-links { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px 10px; margin: 10px 0; } .footer-separator { color: #8fa5a1; } .subpage-main { min-height: 65vh; background: #faf7f0; } .subpage-hero { padding: 48px 0 40px; color: var(--white); background: var(--ink); } .back-link { display: inline-block; margin-bottom: 38px; color: var(--teal-dark); font-size: 0.82rem; font-weight: 750; } .subpage-hero .back-link { color: #c4eee7; } .title-with-label { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; } .title-with-label h1 { max-width: 720px; margin-bottom: 24px; font-size: clamp(3.2rem, 7vw, 6.2rem); } .synthetic-label-large { margin-top: 16px; } .subpage-lede { max-width: 760px; color: #d5dfdd; font-size: 1.14rem; } .preview-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; } .preview-meta span { padding: 7px 10px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; color: #d5dfdd; font-size: 0.68rem; } .report-paper-section { background: var(--canvas); } .report-paper { padding: clamp(28px, 5vw, 66px); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); } .report-paper-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--line); } .report-paper-heading h2 { margin: 10px 0 0; font-size: 2.4rem; } .report-paper-heading > p { color: #756f64; font-size: 0.75rem; } .report-paper .report-card { margin-top: 38px; box-shadow: none; } .report-limitations { margin-top: 55px; padding-top: 45px; border-top: 1px solid var(--line); } .report-limitations h2 { max-width: 660px; font-size: clamp(2rem, 4vw, 3.2rem); } .limitations-grid, .legal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .limitations-grid p, .legal-grid p { color: var(--ink-soft); } .subpage-cta { padding: 48px 0; background: var(--paper); border-top: 1px solid var(--line); } .subpage-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; } .subpage-cta h2 { margin-bottom: 9px; font-size: 2.4rem; } .subpage-cta p { margin: 0; color: var(--ink-soft); } .placeholder-section { padding: 48px 0; } .placeholder-card, .legal-card { max-width: 960px; padding: clamp(30px, 6vw, 78px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .placeholder-card h1, .legal-card h1 { max-width: 830px; font-size: clamp(2.7rem, 6vw, 5.2rem); } .placeholder-card .subpage-lede, .legal-card .subpage-lede { color: var(--ink-soft); } .safety-panel { margin: 38px 0; padding: 22px 24px; color: var(--warning-ink); background: var(--warning); border: 1px solid #e5c85e; border-radius: 9px; } .safety-panel p { margin: 6px 0 0; } .action-row { display: flex; align-items: center; gap: 22px; } .legal-grid { margin: 48px 0; } .legal-grid section { padding: 26px; background: var(--canvas); border-radius: 10px; } .legal-grid h2 { font-family: var(--sans); font-size: 1.15rem; font-weight: 800; letter-spacing: -0.015em; } @media (max-width: 940px) { .primary-nav .nav-link:not(.button) { display: none; } .hero-grid, .preview-grid, .split-copy { grid-template-columns: 1fr; } .report-cover { width: min(100%, 580px); /* Scaled with the base on 3 September 2026 (520 -> 430), or this breakpoint would make the panel TALLER than the desktop one. */ min-height: 390px; } .sticky-intro { position: static; } .checkpoint-note { grid-template-columns: 1fr; gap: 5px; margin-top: 22px; } .final-cta-inner, .subpage-cta-inner { align-items: flex-start; flex-direction: column; } } @media (max-width: 680px) { body { font-size: 16px; } .shell { width: min(calc(100% - 30px), var(--shell)); } .staging-banner { display: block; padding: 8px 12px; font-size: 0.68rem; } .staging-banner span { display: block; margin-top: 2px; } .header-inner { min-height: 70px; } /* Reversed on 2 September 2026 (second pass): the logo stays and the brand text goes. They do not both fit. At 375px the shell is 345px, the header gap is 24px and the call to action is about 181px wide (26 characters at 12px/750 plus 12px padding either side), which leaves roughly 140px. The logo and its 11px gap take 51px, so the words have about 89px and need about 143px at 1.05rem - and still about 109px at 0.8rem. The logo is the half that fits. Hidden visually rather than removed: the logo carries alt="" because the words name the masthead link, so display:none here would leave that link with no accessible name at all. This keeps it in the accessibility tree. */ .wordmark-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .button-small { padding-inline: 12px; font-size: 0.75rem; } h1 { font-size: clamp(3rem, 15vw, 4.4rem); } .hero-facts { display: block; } .hero-facts li { margin-bottom: 5px; } .hero-facts li::after { display: none; } .report-cover { min-height: 360px; padding: 20px; } .cover-footer { flex-direction: column; gap: 5px; margin-top: 44px; } .report-card-header, .title-with-label, .report-paper-heading, .footer-grid { align-items: flex-start; flex-direction: column; } .report-layer { grid-template-columns: 1fr; gap: 7px; } .process-list li { grid-template-columns: 62px 1fr; } .limitations-grid, .legal-grid { grid-template-columns: 1fr; } .action-row { align-items: flex-start; flex-direction: column; } .placeholder-card, .legal-card { padding: 28px 22px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; } } @media print { .staging-banner, .site-header, .site-footer, .subpage-cta { position: static; } body { background: var(--white); } } /* --------------------------------------------------------------------------- Published legal documents (24 Aug staging pages; rules added 31 Aug). These are legal texts, not marketing pages: the job is a readable measure, a clear heading hierarchy, and tables that stay tables at phone width. No new colours - every value below is an existing custom property. --------------------------------------------------------------------------- */ .legal-document { color: var(--ink); } .legal-document p, .legal-document ul, .legal-document h2 { max-width: 68ch; } .legal-card .legal-document h1 { max-width: none; margin-bottom: 6px; font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.15; } .legal-document h2 { margin-top: 46px; margin-bottom: 12px; font-size: clamp(1.3rem, 2.4vw, 1.65rem); line-height: 1.25; letter-spacing: -0.02em; } .legal-document p { margin-bottom: 18px; } .legal-document ul { margin: 0 0 22px; padding-left: 22px; } .legal-document li { margin-bottom: 9px; } .legal-document li:last-child { margin-bottom: 0; } .legal-document hr { height: 1px; margin: 38px 0; background: var(--line); border: 0; } /* Tables ------------------------------------------------------------------ */ .legal-document .table-scroll { margin: 26px 0 30px; overflow-x: auto; border-radius: 6px; } .legal-document table { width: 100%; min-width: 440px; border-collapse: collapse; font-size: 0.94rem; line-height: 1.5; } .legal-document th, .legal-document td { padding: 11px 14px; text-align: left; vertical-align: top; border: 1px solid var(--line); } .legal-document thead th { background: var(--canvas); font-weight: 700; } /* Annex A has no header row: its first column carries the label, marked up as by the converter. */ .legal-document th[scope="row"] { width: 34%; background: var(--canvas); font-weight: 700; } @media (max-width: 680px) { .legal-document h2 { margin-top: 36px; } .legal-document table { font-size: 0.88rem; } .legal-document th, .legal-document td { padding: 9px 11px; } } /* --------------------------------------------------------------------------- Page rhythm, 31 Aug. The fixed banner and the page header were removed, so the hero's top padding is now the whole top margin of the page and the old header-era values read as dead space. Section padding is reduced but kept large enough that adjacent blocks still read as separate: on the landing page most sections share one background, so padding is the only separator. --------------------------------------------------------------------------- */ .legal-card .back-link { margin-bottom: 0; } @media (max-width: 680px) { .hero { padding: 24px 0 40px; } .section { padding: 36px 0; } .final-cta, .placeholder-section, .subpage-cta { padding: 36px 0; } .subpage-hero { padding: 36px 0 32px; } } /* --------------------------------------------------------------------------- Full-copy landing brief, 2 September 2026. New sections: the trust strip, the benefit grid, the marked sample placeholders and the FAQ. Existing tokens and rhythm are reused so the visual identity is unchanged; nothing above this block was edited. --------------------------------------------------------------------------- */ .cover-list { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; color: #d9e3e1; font-size: 0.95rem; } .cover-list li { padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .cover-list li:last-child { border-bottom: 0; } .benefits-intro { margin: 40px 0 18px; font-weight: 750; } .benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; } .benefit { padding: 26px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); } .benefit h3 { margin-bottom: 8px; } .benefit p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; } .sample-block { margin-top: 46px; padding: clamp(22px, 4vw, 38px); background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius); } .sample-note { margin: 0 0 22px; padding-left: 15px; border-left: 3px solid #7fa39d; color: var(--ink-soft); font-size: 0.9rem; } /* Widened from 230px on 2 September 2026. At 230px the grid put four real report cards side by side and none of them was readable. At 340px the shell fits two per row on desktop and one below roughly 760px. */ .sample-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; } /* Each panel now holds a REAL fragment of the approved report, so the striped tint and the dashed border are gone (Alex, 2 September 2026): they existed to stop anyone mistaking an empty frame for a report view, and there is no empty frame left. A plain white card on the section's canvas, so the report's own card styling inside it is what the eye lands on. */ .sample-panel { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 20px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; } .sample-panel figcaption h3 { margin-bottom: 6px; font-size: 1.02rem; } .sample-panel figcaption p { margin: 0; color: var(--ink-soft); font-size: 0.87rem; } .sample-disclosure { margin: 22px 0 0; color: var(--ink-soft); font-size: 0.85rem; } .sample-block .button-secondary { margin-top: 20px; } #how-it-works .process-list { margin-bottom: 34px; } .faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px 44px; margin-top: 30px; } .faq-item h3 { margin-bottom: 8px; } .faq-item p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; } .final-support { margin-top: 14px; font-size: 0.88rem; opacity: 0.85; } .footer-contact { color: inherit; } @media (max-width: 940px) { .sample-block { margin-top: 34px; } } @media (max-width: 680px) { .benefit-grid, .sample-grid, .faq-grid { grid-template-columns: 1fr; } .benefits-intro { margin-top: 30px; } } /* --------------------------------------------------------------------------- Landing review, 2 September 2026 (web/BRIEF_landing_review_2026-09-02.md). The hero panel alignment, the reassurance line, the four trust points, the sample lead-in and the six-question FAQ grid. Every rule here is an override appended after the block it adjusts, so nothing above was rewritten. No new colour is introduced: the gold is #e29333, already used by .cover-rule. None of this was rendered before it shipped - this session cannot open a browser. Spacing values are reasoned, not measured; see the handover for the short list of things to check on the live site. --------------------------------------------------------------------------- */ /* Brief item 3: the panel's top edge rises to meet the top of the copy column. That column starts with the eyebrow, so this alone aligns the panel to the EYEBROW. The offset that carries it down to the headline is derivable after all, and is applied in the 2 September (second pass) block at the foot of this file. This rule is still required: the offset is a margin, and it does nothing while the grid is centring its items. */ .hero-grid { align-items: start; } /* The "Placeholder" chip left the panel, so the mark is the only child left and space-between would park it on the left. It belongs top right. */ /* The kicker moved into this row on 3 September 2026 so the logo sits beside "Complex student data, made clear" instead of 78px above it. The logo keeps its horizontal position - space-between puts the kicker left, the mark right, which is where flex-end alone was placing it. */ .report-cover-top { align-items: center; justify-content: space-between; } /* Item 6: air between the call to action and the reassurance line. Item 7: that line slightly smaller and less heavy, with more space beneath it. */ .decision-line { margin-top: 22px; margin-bottom: 34px; font-size: 0.98rem; font-weight: 640; } /* Item 7: two columns by two rows, and the rust dot separators replaced by a short gold line per point. The line is an empty decorative pseudo-element rather than a tick glyph, so no screen reader announces a stray character. */ .hero-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; align-items: start; } .hero-facts li { display: flex; align-items: flex-start; gap: 12px; } .hero-facts li::before { flex: none; width: 14px; height: 2px; margin-top: 0.72em; background: #e29333; content: ""; } .hero-facts li:not(:last-child)::after { content: none; } /* The lead-in above the sample block. The block itself, its note, its disclosure and its secondary button are untouched this session. */ .sample-lead { margin-top: 46px; } .sample-lead .eyebrow { margin-bottom: 10px; } .sample-intro { max-width: 680px; margin: 0; color: var(--ink-soft); } .sample-lead + .sample-block { margin-top: 20px; } /* Six questions, three columns by two rows. auto-fit gave four columns at the full 1180px shell, which would have left two questions stranded on a second row of four. */ .faq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 940px) { .faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sample-lead + .sample-block { margin-top: 18px; } } @media (max-width: 680px) { /* The trust points collapse to one column. The earlier phone rule set display:block on this list, which would have discarded the grid. */ .hero-facts { display: grid; grid-template-columns: 1fr; gap: 10px; } .hero-facts li { margin-bottom: 0; } /* Restated after the 940px rule above, which would otherwise win here. */ .faq-grid { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- Landing review, 2 September 2026 (second pass). Five visual corrections from Alex's review of the live page. No copy changed anywhere in this pass. Nothing here was rendered before it shipped - this session cannot open a browser. Every number below is stated in the decisions log (D109-D112) with the arithmetic behind it, so each can be corrected by eye in one step. --------------------------------------------------------------------------- */ /* THE ONE KNOB FOR THE HERO HEADLINE (D111). Was the global rule `h1 { font-size: clamp(3rem, 7vw, 6.4rem) }`, which put the headline at 100.8px on a 1440px screen - display-poster scale for a 67-character sentence in a 650px column. Referenced in exactly one place, `.hero h1` below. To adjust: the 4rem cap governs everything at 1280px and wider, 5vw the range between, 2.25rem everything at 720px and narrower. */ :root { --hero-headline: clamp(2.25rem, 5vw, 4rem); } /* Scoped to the hero, so the global h1 rule still governs /report-preview and the three legal documents at every width - including the phone override at line ~988, which this deliberately supersedes for the hero alone. */ .hero h1 { font-size: var(--hero-headline); } /* HEADLINE-TOP ALIGNMENT (D110). The right-hand column of a two-column section starts level with the LEFT COLUMN's top, and that column opens with the eyebrow - so the right-hand content sat above the headline. This pushes it down by exactly the space the eyebrow occupies: eyebrow line box 0.73rem x 1.62 = 18.9216px eyebrow margin-bottom = 18px --------- 36.9216px 0.73rem is 11.68px because :root sets no font-size, so rem is the 16px default - body's 17px does not enter into it - and .eyebrow sets no line-height, so it inherits body's unitless 1.62 and resolves it against its own font-size. Written as the calculation rather than 36.92px so it stays true if the eyebrow is ever restyled. ⚠️ THIS HOLDS ONLY WHILE THE EYEBROW IS ONE LINE. A second line adds another 18.92px and the alignment goes quietly wrong by that much. Both current eyebrows are single-line at every width by a wide margin, but this does not correct itself. It aligns box top to box top. The body paragraphs carry about 5px of half-leading above their caps (line-height 1.62 against the heading's 1.05), so the first letters are close rather than identical. Applied to the hero panel and to "Clear and honest" only, which are the two Alex named. Above 940px only: below that both grids collapse to a single column, where this would be a stray 37px gap. */ @media (min-width: 941px) { .report-cover, .section-boundary .body-copy { margin-top: calc(0.73rem * 1.62 + 18px); } } /* SEPARATOR AND DEAD SPACE (D112). "Clear and honest" and the FAQ are the only adjacent pair on this page that share a background, so nothing marked the join and 96px of stacked section padding read as dead space. The FAQ section now carries `section-rule` in web/pages.py - the same `border-top: 1px solid var(--line)` already drawn above "Clear and honest" and used by .process-list for its top edge and every numbered row. No new divider style was invented. Padding either side of the new rule: 48px -> 30px above, 48px -> 34px below, so the 96px gap becomes 64px with a line through it. */ .section-boundary { padding-bottom: 30px; } .section-boundary + .section-rule { padding-top: 34px; }