*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Palette inspired by a warm cream + deep green editorial aesthetic:
cream ground, forest-green ink, sage/terracotta accents, soft organic
shapes - adapted for a professional SaaS tool rather than a lifestyle
page, so it stays crisp and legible rather than purely decorative. */
:root{--navy:#2B3A2A;--blue:#5B7A52;--sky:#E9EFE3;--border:#E6DFCF;--text:#2B2B25;
--muted:#5B5646;--bg:#FBF7ED;--red:#A13D2B;--rbg:#F6E3DA;
--purple:#B5652E;--pbg:#F3E4D3;--cream-card:#FFFFFF;
--green:#3F6B3F;--gbg:#E3EEDD;--amber:#9C6B1F;--abg:#F3E9D3}
/* --green/--gbg and --amber/--abg added 2026-09-21: the only two semantic
colors (pass/blocked status) the original olive/cream palette never
defined, so every PASS/FAIL/BLOCKED-style badge across the app (live
status pills, execution reports, xlsx exports) had been drifting to a
hardcoded pre-rebrand blue palette instead of sharing one definition
here. This is now the single canonical status-color source for the
whole product - report_theme.py mirrors these exact values for the
Python-built HTML/XLSX reports rather than defining its own. */
/* --muted darkened from the original #7A7462 - the lighter value fell
short of WCAG AA contrast (4.5:1) against --bg at the small sizes it's
used at (11.5-13px hint/footnote text). See council-review-site-and-
retention.md. */
/* Self-hosted variable fonts (2026-09-21 - see council-review on the
Client Hub "font looks inconsistent" report). Previously loaded from
Google Fonts with display=swap, which meant: browser paints the
fallback font first, downloads the real font from a third-party CDN,
then SWAPS mid-render once it arrives - and because different weights
can finish downloading at different moments, one part of the page can
visibly swap while another hasn't yet. That's the exact bug reported
(some text "looks like a different font" on an otherwise-normal page
load), not a CSS/design defect.
The fix removes the swap as a possible EVENT, not just makes it faster:
- Self-hosted (same origin as the page itself) means the font file
downloads in parallel with the page's own CSS/JS over the same
connection - no separate DNS/TLS handshake to a third-party host,
so it's essentially always ready before first paint.
- font-display:optional (not swap) means the browser gives the font a
short window (order of 100ms) to be ready; if it's not, that page
render commits to the fallback font stack below and never swaps
later. So the only possible outcomes are "renders in Inter/Fraunces"
or "renders in Georgia/system-ui the whole time" - never a page that
changes fonts partway through, which is what looked broken.
- Single variable-font files (one file each covers weights 400-700)
rather than separate files per weight, so there's only one download
per family, not four - simplifying the "did every weight arrive"
question down to "did the one file arrive."
As a side effect, this also drops two external network calls
(fonts.googleapis.com, fonts.gstatic.com) per page load - consistent
with the site's existing privacy-forward positioning.
For any FUTURE "text looks like the wrong font" report, check in this
order before assuming a CSS bug: (1) browser devtools - select the
affected text and check its COMPUTED font-family, not the CSS rule,
since a rule can say the right font while the computed value is the
fallback because the font never loaded; (2) Network tab - is any font
request still pending/slow; (3) the @font-face rule's font-display
value - "swap" reproduces exactly this bug class, "optional"/self-
hosted (as used here) does not; (4) only after ruling those out, look
for an actual conflicting font-family rule in the CSS. */
/* Note: style.css is served as a static file (not a Jinja template), so
these paths can't carry the ?v=asset_version cache-busting token the
way template-referenced assets do. That's fine here: font files are
expected to change rarely if ever, and style.css's OWN url already
carries ?v=asset_version on every template that links it - so any
future change to these font files can force a refetch simply by
renaming the file (e.g. Inter-variable.v2.woff2) alongside the source
change, the same manual-bump approach asset_version was built to avoid
for everything else, but rare enough here not to need it. */
@font-face{font-family:'Inter';src:url('/static/fonts/Inter-variable.woff2') format('woff2-variations'),
url('/static/fonts/Inter-variable.woff2') format('woff2');
font-weight:400 700;font-style:normal;font-display:optional}
@font-face{font-family:'Fraunces';src:url('/static/fonts/Fraunces-variable.woff2') format('woff2-variations'),
url('/static/fonts/Fraunces-variable.woff2') format('woff2');
font-weight:400 700;font-style:normal;font-display:optional}
html{-webkit-font-smoothing:antialiased}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
background:var(--bg);color:var(--text);font-size:15px;line-height:1.6}
.wrap{max-width:640px;margin:0 auto;padding:56px 20px 80px;position:relative}
.hdr{padding:0 4px;margin-bottom:36px;position:relative}
.hdr h1{font-family:'Fraunces',Georgia,serif;font-size:30px;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.hdr .tagline{color:var(--blue);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:8px}
.hdr .sub{color:var(--muted);font-size:13.5px;margin-top:10px;max-width:46ch}
/* Homepage hero (test: headline option A + flow-diagram visual option B -
see council-review-visual-layout-density.md). Kept scoped under .hero-*
classes so the plain "Privacy Policy
"-style headers on other
pages (privacy.html, security.html, etc.) are completely unaffected. */
.hdr .kicker{color:var(--blue);font-size:12px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;margin-bottom:14px}
.hdr .hero-headline{font-family:'Fraunces',Georgia,serif;font-weight:700;color:var(--navy);
letter-spacing:-.01em;line-height:1.22;font-size:clamp(26px,4.4vw,40px);
max-width:22ch;margin-bottom:26px}
.hero-flow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.flow-node{display:flex;flex-direction:column;align-items:center;gap:7px;
font-size:11.5px;font-weight:600;color:var(--navy);text-align:center;width:88px}
.flow-icon-badge{width:44px;height:44px;border-radius:50%;background:var(--sky);
display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--navy)}
.flow-arrow{color:var(--muted);font-size:16px;flex:0 0 auto}
@media (max-width:480px){
.hero-flow{flex-direction:column;align-items:flex-start;gap:10px}
.flow-arrow{transform:rotate(90deg);margin-left:22px}
.flow-node{flex-direction:row;width:auto;text-align:left}
}
.alert{background:var(--rbg);color:var(--red);border-radius:12px;padding:14px 18px;margin-bottom:20px;font-size:13.5px}
.card{background:var(--cream-card);border:1px solid var(--border);border-radius:18px;padding:28px;
box-shadow:0 1px 3px rgba(43,58,42,.05)}
.form label{display:block;font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:18px}
.form input[type=text],.form input[type=password],.form input[type=file],.form input[type=email],.form input[type=number]{
display:block;width:100%;margin-top:6px;padding:11px 14px;border:1px solid var(--border);
/* font-size held at 16px (not the 13.5px used elsewhere in this form) -
iOS Safari auto-zooms the page on focus for any text input under 16px,
which is what caused the "site doesn't render properly on iPhone"
report; 16px is the threshold that keeps it from triggering. */
border-radius:10px;font-size:16px;font-family:inherit;background:#fff}
.form select{display:block;width:100%;margin-top:6px;padding:11px 14px;border:1px solid var(--border);
border-radius:10px;font-size:16px;font-family:inherit;background:#fff;color:inherit;
-webkit-appearance:none;appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23708060' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--blue);outline-offset:1px}
.form .hint{display:block;font-weight:400;font-size:12px;color:var(--muted);margin-top:4px}
/* Primary action color - reserved for buttons/CTAs only, distinct from the
navy used for every heading/logo/nav item, so a primary action visually
stands out instead of blending into the rest of the page's ink color. */
button,.btn{display:inline-block;background:var(--purple);color:#fff;border:none;padding:13px 26px;
border-radius:999px;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;text-align:center;
transition:opacity .15s,transform .15s;box-shadow:0 2px 8px rgba(181,101,46,.25)}
button:hover,.btn:hover{opacity:.88}
button:active,.btn:active{transform:scale(.98)}
.btn.secondary{background:#fff;color:var(--navy);border:1px solid var(--navy);box-shadow:none}
/* The site's single most-important click target (the hero "Start Free
Trial" CTA) previously used the exact same fully-rounded pill shape as
every other button/link-styled-as-button on the site - a recognizable
"component library default" look, and nothing marked it as THE primary
action versus a generic secondary one. Gives it its own shape (a
rounded-rectangle, not a pill), more weight, and a slightly raised
hover state, so it reads as an intentional, ownable design decision
rather than a reused default. */
.hero-cta-primary{border-radius:12px;padding:16px 34px;font-size:15px;
box-shadow:0 6px 20px rgba(181,101,46,.32);transition:transform .15s ease,box-shadow .15s ease}
.hero-cta-primary:hover{opacity:1;transform:translateY(-2px);box-shadow:0 10px 26px rgba(181,101,46,.4)}
.footnote{margin-top:18px;font-size:13.5px;color:var(--muted);text-align:center}
.footnote a{color:var(--blue)}
/* Test-case search/pagination/expand controls (review_generated.html) -
deliberately small and secondary, not styled like the page's primary
submit CTA (the generic button/.btn rule above is a big purple pill,
wrong for a per-row expand arrow or a Prev/Next pager). */
.tc-toolbar{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.tc-toolbar input[type="text"]{flex:1;min-width:220px;padding:10px 14px;border:1px solid var(--border);
border-radius:10px;font-size:14px;background:#fff}
.tc-expand-arrow{display:inline-block;background:none;box-shadow:none;color:var(--navy);
padding:0 6px 0 0;font-size:13px;border-radius:4px;vertical-align:middle;line-height:1}
.tc-expand-arrow:hover{opacity:1;background:none}
.js-tc-details{margin-top:6px}
.tc-pagination{display:flex;align-items:center;justify-content:center;margin:18px 0;flex-wrap:wrap}
.tc-pagination button{padding:8px 16px;font-size:12.5px;background:#fff;color:var(--navy);
border:1px solid var(--navy);box-shadow:none}
.tc-pagination button:disabled{opacity:.35;cursor:default}
.privacy-note{margin-top:8px;font-size:11.5px;color:var(--muted);text-align:center;opacity:.85}
.site-footer{margin-top:36px;padding-top:16px;border-top:1px solid var(--border);font-size:12px}
.sc{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.card.stat{text-align:center;padding:20px 10px}
.card.stat .n{font-family:'Fraunces',Georgia,serif;font-size:30px;font-weight:700;color:var(--navy)}
.card.stat .l{font-size:12px;color:var(--muted);margin-top:4px}
.card.downloads{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* Homepage body - now matched to the topbar/footer's 1040px container
(see council-review-visual-layout-density.md: this was previously 760px,
which is what made the header look full-width while everything below it
sat in a visibly narrower, off-center column). The chooser and both long
forms are then re-narrowed via .narrow-inner just below, since a form
genuinely reads better in a focused column - only the marketing content
(hero, what-it-does, about) should use the full 1040px width. */
.wrap-wide{max-width:1040px}
.narrow-inner{max-width:760px;margin:0 auto}
/* Soft organic backdrop shape behind the header - a nod to the photographic/
editorial reference without needing an actual photo. Purely decorative,
sits behind everything, never intercepts clicks. */
.wrap-wide::before{content:"";position:absolute;top:-40px;right:-60px;width:280px;height:280px;
background:radial-gradient(circle,var(--sky) 0%,rgba(233,239,227,0) 70%);
border-radius:50%;z-index:-1;pointer-events:none}
/* Step 1: plain-language "which describes your app" choice - two elevated
cards, nothing else on screen, so there's nothing to misread before deciding. */
.chooser-intro{font-family:'Fraunces',Georgia,serif;font-size:17px;font-weight:600;
color:var(--navy);margin-bottom:20px;text-align:center}
.choice-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}
@media (max-width:560px){.choice-cards{grid-template-columns:1fr}}
.choice-card{background:var(--cream-card);border:1px solid var(--border);border-radius:20px;padding:30px 22px;
text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;
font-family:inherit;box-shadow:0 1px 3px rgba(43,58,42,.05);
transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.choice-card:hover{transform:translateY(-3px);border-color:var(--blue);
box-shadow:0 14px 30px rgba(43,58,42,.13)}
.choice-card:active{transform:translateY(-1px)}
.choice-icon-badge{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;
justify-content:center;font-size:22px;margin-bottom:16px;background:var(--sky);color:var(--navy)}
.choice-card.accent-purple .choice-icon-badge{background:var(--pbg)}
.choice-title{font-family:'Fraunces',Georgia,serif;font-size:17px;font-weight:600;color:var(--navy);
margin-bottom:6px;line-height:1.35}
.choice-sub{font-size:12px;color:var(--muted);margin-bottom:16px;line-height:1.5;font-weight:400}
.choice-detail{font-size:13.5px;font-weight:400;color:var(--text);line-height:1.55;padding-top:14px;
border-top:1px solid var(--border);width:100%}
.chooser-help{font-size:12px;color:var(--muted);text-align:center;line-height:1.7;
max-width:52ch;margin:0 auto}
.back-link{background:none;border:none;color:var(--blue);font-size:13.5px;font-weight:600;
cursor:pointer;padding:0;margin-bottom:18px;font-family:inherit;display:flex;align-items:center;gap:4px}
.back-link:hover{text-decoration:underline}
.mode-desc{font-size:13.5px;color:var(--muted);margin-bottom:20px;line-height:1.6;
background:var(--sky);border-radius:14px;padding:14px 16px}
.mode-pill{display:inline-block;margin-top:8px;font-size:11px;font-weight:600;background:var(--sky);
color:var(--blue);padding:3px 10px;border-radius:20px}
.mode-pill.accent-purple{background:var(--pbg);color:var(--purple);margin-top:0;margin-left:8px;
vertical-align:middle;text-transform:uppercase;letter-spacing:.03em}
/* Feature panel - a distinct sub-card inside a form for an optional,
named beta feature (e.g. Process Coverage Insights), so it reads as
its own thing rather than blending into the ordinary field list. */
.feature-panel{border:1px solid var(--pbg);background:linear-gradient(180deg,var(--pbg) 0%,rgba(243,228,211,0) 90px);
border-radius:14px;padding:18px 20px 4px;margin-bottom:22px}
.feature-panel-hdr{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.feature-panel-hdr h3{font-family:'Fraunces',Georgia,serif;font-size:16px;font-weight:600;
color:var(--navy);margin:0}
.feature-icon-badge{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;
justify-content:center;flex:0 0 auto;background:#fff;color:var(--purple)}
.status-badge{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;
border-radius:20px;white-space:nowrap}
.status-badge.covered{background:var(--sky);color:var(--blue)}
.status-badge.gap{background:var(--rbg);color:var(--red)}
.step-card.gap{border-left:3px solid var(--red)}
.step-card.covered{border-left:3px solid var(--blue)}
.form textarea{display:block;width:100%;margin-top:6px;padding:11px 14px;border:1px solid var(--border);
/* Same 16px floor as the input rule above, same iOS Safari zoom reason. */
border-radius:10px;font-size:16px;font-family:inherit;resize:vertical;background:#fff}
.form .opt{font-weight:400;color:var(--muted)}
.form label.inline-check{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-weight:600}
.form label.inline-check input{margin:0}
.fixture-badge{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:10px;white-space:nowrap}
.fixture-badge-creates{background:#DCFCE7;color:#15803D}
.fixture-badge-requires{background:#FEF3C7;color:#B45309}
.alert-info{background:var(--sky);color:var(--blue)}
.alert-warn{background:#F6ECD6;color:#8A5A1E}
.step-card{border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin-bottom:16px;background:#FDFBF4}
.trace-table{width:100%;border-collapse:collapse;margin-top:10px}
.trace-table th,.trace-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);font-size:13.5px;vertical-align:top}
.trace-table th{background:#F6ECD6}
.step-card-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.step-card-hdr .step-id{font-family:monospace;font-size:12px;color:var(--blue);font-weight:700}
.radio-row{display:flex;gap:18px;margin-top:4px}
.radio-inline{display:flex;align-items:center;gap:6px;font-weight:400}
.keep-toggle{display:flex;align-items:center;gap:6px;font-weight:600;margin-bottom:0}
.keep-toggle input{margin:0}
/* -------------------------------------------------------------------
Global site chrome - topbar + footer, shared across every page via
{% include %}. Deliberately restrained: real links only, no dropdown
menus with nothing under them, no fabricated trust badges - the goal
is "a real business runs this," which for a solo/POC-stage product
is better served by a small number of true statements than by
imitating a funded company's IA. See council-review-site-chrome.md.
------------------------------------------------------------------- */
/* Sticky rather than static: keeps the header visible on every screen and
while scrolling to any in-page anchor (e.g. the homepage chooser/FAQ),
for a consistent, uniform feel across the whole site rather than the
header scrolling out of view once you're past the hero. */
.topbar{background:var(--cream-card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:30}
/* The topbar is sticky (position:sticky;top:0), so an in-page anchor link
(e.g. /about#how-it-works) scrolls its target flush to the very top of
the viewport, which lands it UNDER the topbar rather than below it -
the browser has no way to know a fixed/sticky element is covering that
space. scroll-margin-top reserves that space for any anchor target
site-wide, so every #id lands visibly below the topbar instead of
partially hidden behind it. See council review, 2026-09-15. */
[id]{scroll-margin-top:84px}
.topbar-inner{max-width:1040px;margin:0 auto;padding:16px 20px;display:flex;
align-items:center;gap:28px}
.topbar-brand{display:inline-flex;align-items:center;text-decoration:none}
/* height set inline on the ![]()
(24px) for the pre-CSS-load intrinsic size;
keep this in sync if that changes. Logo carries its own (TM) mark - see
app/static/logo.svg - since the trade mark application (TM Headstart,
Class 42) is pending, not yet registered; do not swap to (R). */
.topbar-logo-img{display:block;height:24px;width:auto}
/* align-items:center is explicit (not the flex default of stretch) so the
plain links and the / dropdown - which have
slightly different natural heights - land on the same text baseline
instead of each being top/stretch-aligned independently. See the
"Product looks misaligned" report, 2026-09-21. */
.topbar-nav{display:flex;align-items:center;gap:22px;flex:1}
.topbar-nav a{color:var(--text);text-decoration:none;font-size:13.5px;font-weight:600}
.topbar-nav a:hover{color:var(--blue)}
.topbar-cta{padding:9px 20px;font-size:13.5px}
.topbar-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;
font-size:20px;line-height:1;color:var(--navy)}
/* Mobile nav - a hamburger toggle rather than dropping the links entirely.
Previously .topbar-nav was just display:none under 640px with no way
back to it - How it works/Import/Security were unreachable from the
topbar on any phone. See council-review-site-and-retention.md. */
@media (max-width:640px){
.topbar-toggle{display:inline-flex;align-items:center;justify-content:center}
.topbar-nav{display:none}
.topbar-nav.open{display:flex;flex-direction:column;position:absolute;
top:100%;left:0;right:0;background:var(--cream-card);
border-bottom:1px solid var(--border);padding:16px 20px;gap:14px;z-index:20}
.topbar-inner{justify-content:space-between}
}
/* Grouped nav items (2026-09-21 topbar simplification - see
council-review-topbar-simplification-2026-09-21.md). As the site grew
(pricing, impact analysis, saved test cases...) the flat link list
started to read as cluttered rather than confident. Groups real,
functioning pages under a small number of top-level labels - still no
dropdown with nothing under it, just fewer, calmer entry points, closer
to how a consulting-style site organizes "Services"/"Resources". Native
/ - no extra JS needed for the open/close mechanic
itself, works identically on desktop and mobile. */
.nav-drop{position:relative}
.nav-drop>summary{list-style:none;cursor:pointer;color:var(--text);
font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.nav-drop>summary::-webkit-details-marker{display:none}
.nav-drop>summary::marker{content:""}
/* A CSS-drawn triangle, not a Unicode arrow character (2026-09-21 - a real
client browser rendered the old "\25BE" glyph in a mismatched fallback
font/shape because the site's own fonts (Fraunces/Inter) don't define
that glyph, so the browser silently substituted a system font for just
that one character - exactly the "looks forcibly bolted on, different
font" bug reported live. Borders can't have a font-fallback problem;
this renders identically in every browser, with or without the custom
fonts having finished loading. */
.nav-drop>summary::after{content:"";display:inline-block;width:0;height:0;
border-left:4px solid transparent;border-right:4px solid transparent;
border-top:5px solid var(--muted);margin-top:2px;flex-shrink:0}
.nav-drop>summary:hover::after,.nav-drop[open]>summary::after{border-top-color:var(--blue)}
.nav-drop>summary:hover,.nav-drop[open]>summary{color:var(--blue)}
.nav-drop-panel{position:absolute;top:calc(100% + 12px);left:0;
background:var(--cream-card);border:1px solid var(--border);border-radius:12px;
padding:8px;min-width:200px;box-shadow:0 10px 28px rgba(43,58,42,.12);
display:flex;flex-direction:column;gap:2px;z-index:40}
.nav-drop-panel a{display:flex;flex-direction:column;gap:1px;padding:9px 12px;
border-radius:8px;text-decoration:none}
.nav-drop-panel a:hover{background:var(--sky)}
.nav-drop-label{font-size:13.5px;font-weight:600;color:var(--text)}
.nav-drop-panel a:hover .nav-drop-label{color:var(--blue)}
.nav-drop-desc{font-size:11.5px;color:var(--muted);font-weight:400}
/* Pricing carries more visual weight than a plain utility link, next to the
CTA button, since it's the site's deliberate confidence signal (see
council-review-topbar-and-pricing-visual-design-critique-2026-09-21.md) -
not a full button, just enough to draw the eye ahead of "Security"/"FAQ". */
.nav-emphasis{color:var(--navy) !important;position:relative}
.nav-emphasis::after{content:"";position:absolute;left:0;right:0;bottom:-4px;
height:2px;background:var(--blue);border-radius:2px}
@media (max-width:640px){
/* Inside the mobile slide-down panel, render the dropdown's contents
inline rather than as a floating absolute panel - it's already in a
stacked, scrollable context. */
.topbar-nav.open .nav-drop-panel{position:static;border:none;box-shadow:none;
padding:2px 0 2px 14px;margin-top:2px}
}
/* Homepage pricing teaser - see index.html for why this sits above the
proof callout rather than after it. Kept visually lighter than the proof
callout/hero (smaller type, no icon badges) so it reads as a supporting
confidence signal, not a hard sales pitch competing with the hero CTA. */
.pricing-teaser{max-width:1040px;margin:0 auto 28px;padding:20px 20px 4px;
border-top:1px solid var(--border);border-bottom:1px solid var(--border);
text-align:center}
.pricing-teaser-kicker{color:var(--muted);font-size:12px;font-weight:600;
letter-spacing:.02em;margin-bottom:14px}
.pricing-teaser-row{display:flex;justify-content:center;gap:14px;
flex-wrap:wrap;margin-bottom:14px}
.pricing-teaser-card{background:var(--cream-card);border:1px solid var(--border);
border-radius:12px;padding:12px 20px;min-width:150px}
.pricing-teaser-tier{display:block;font-size:11.5px;color:var(--muted);
font-weight:600;margin-bottom:4px}
.pricing-teaser-price{display:block;font-family:'Fraunces',Georgia,serif;
font-weight:700;font-size:19px;color:var(--navy)}
.pricing-teaser-link{display:inline-block;margin-bottom:18px;font-size:13px;
font-weight:600;color:var(--blue);text-decoration:none}
.pricing-teaser-link:hover{text-decoration:underline}
@media (max-width:640px){.pricing-teaser-row{gap:10px}
.pricing-teaser-card{min-width:100px;padding:10px 14px}}
/* Client Hub - single access-code entry, then a card per tool, greyed out
when the code's service_type (see client_quotas.py) excludes it. The
greying out is a UI reflection of the actual server-side gate, not a
substitute for it - every route behind these cards re-checks entitlement
itself, since a card being hidden here has never been treated as
security in this codebase. */
.hub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:20px}
@media (max-width:640px){.hub-grid{grid-template-columns:1fr}}
.hub-card{background:var(--cream-card);border:1px solid var(--border);
border-radius:16px;padding:20px}
.hub-card h3{margin:0 0 6px 0;color:var(--navy);font-size:16px}
.hub-card p{margin:0 0 4px 0;font-size:13px;color:var(--muted)}
.hub-card-disabled{opacity:.55}
.hub-card-note{font-size:12px;color:var(--red);font-weight:600;margin-top:10px}
/* "Built For" audience list (2026-09-30) - reuses the existing 13px body
size and muted/navy tokens, no new type scale introduced. */
.built-for-list{list-style:none;margin:16px 0 8px 0;padding:0;
display:grid;grid-template-columns:repeat(2,1fr);gap:8px 20px}
@media (max-width:640px){.built-for-list{grid-template-columns:1fr}}
.built-for-list li{font-size:13px;color:var(--navy);padding-left:24px;position:relative}
.built-for-list li::before{content:"\2713";position:absolute;left:0;color:var(--green,#2f8f4e);font-weight:700}
/* Internal admin pages (2026-09-21) - deliberately styled with the same
fonts/palette/components as client-facing pages (.card, .form, .alert,
.btn) rather than a bespoke inline stylesheet, so Kalyan isn't working in
a visually different "back office" product from the one clients see.
See council/design-review context: a solo-run tool's admin surface
looking cared-for is itself a (small) confidence signal, not just cosmetic. */
.data-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:13.5px}
.data-table th,.data-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.data-table th{color:var(--muted);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em}
.data-table td code{background:var(--sky);padding:2px 7px;border-radius:6px;font-size:12.5px}
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.02em}
.badge-both{background:var(--sky);color:var(--blue)}
.badge-generation{background:#EAE3F5;color:#6B4FA0}
.badge-execution{background:#F3E4D3;color:var(--purple)}
.badge-ok{background:var(--gbg);color:var(--green)}
.badge-warn{background:var(--rbg);color:var(--red)}
.text-over{color:var(--red);font-weight:700}
.text-near{color:var(--purple);font-weight:700}
.admin-forms-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px}
@media (max-width:720px){.admin-forms-grid{grid-template-columns:1fr}}
.admin-forms-grid .card{margin-bottom:0}
.new-code-display{display:inline-block;background:#fff;border:1px solid var(--border);
border-radius:8px;padding:8px 14px;font-family:'Fraunces',Georgia,serif;font-size:16px;
font-weight:700;color:var(--navy);margin-top:8px;letter-spacing:.01em}
/* Admin-only topbar/footer (2026-09-21) - a trimmed nav for the password-
gated admin surface: only the admin's own tools (quotas, logs, trials,
test email, logout), none of the client-facing marketing/product links.
Reuses .topbar/.site-ftr structure and palette so it still reads as the
same product, just scoped to what an admin actually needs mid-task. */
.admin-brand-tag{margin-left:8px;font-size:11px;font-weight:700;text-transform:uppercase;
letter-spacing:.04em;color:var(--muted);border:1px solid var(--border);border-radius:20px;
padding:2px 8px;vertical-align:middle}
.admin-ftr .site-ftr-inner{grid-template-columns:2fr 1fr}
.site-ftr{background:var(--navy);color:#EDEFE9;margin-top:64px}
.site-ftr-inner{max-width:1040px;margin:0 auto;padding:48px 20px 32px;
display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
@media (max-width:720px){.site-ftr-inner{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.site-ftr-inner{grid-template-columns:1fr}}
.site-ftr-logo{display:block}
.site-ftr-logo-img{display:block;height:22px;width:auto}
.site-ftr-tag{font-size:12px;color:#B9C2AE;margin-top:6px;letter-spacing:.03em;text-transform:uppercase}
.site-ftr-trust{font-size:12px;color:#C7CEBB;margin-top:16px;line-height:1.6;max-width:32ch}
.site-ftr-col h4{font-size:12px;color:#9FA98F;text-transform:uppercase;letter-spacing:.06em;
margin-bottom:14px;font-weight:700}
.site-ftr-col a{display:block;color:#DEE2D4;text-decoration:none;font-size:13.5px;
margin-bottom:11px;line-height:1.4}
.site-ftr-col a:hover{color:#fff;text-decoration:underline}
.site-ftr-bottom{border-top:1px solid rgba(255,255,255,.12);padding:18px 20px;text-align:center;
font-size:12px;color:#9FA98F;max-width:1040px;margin:0 auto}
.site-ftr-abn{display:block;margin-top:4px;font-size:11.5px;color:#8A9480}
/* Hero two-column layout: copy on the left, a framed product mockup on the
right on wide viewports. Stacks (mockup hidden) below 900px - see the
.hero-visual comment in index.html for why it's hidden rather than
shrunk on narrow screens. */
.hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:36px;align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-visual{display:none}}
.hero-visual{position:relative}
.browser-frame{background:#fff;border-radius:14px;border:1px solid var(--border);
box-shadow:0 24px 60px rgba(43,58,42,.16);overflow:hidden;transform:rotate(1deg)}
.browser-frame-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;
background:#F4F1E7;border-bottom:1px solid var(--border)}
.browser-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.browser-frame-url{margin-left:10px;font-size:11px;color:var(--muted);
background:#fff;border:1px solid var(--border);border-radius:6px;padding:3px 10px;
font-family:'Inter',sans-serif}
.browser-frame-body{padding:18px}
.mock-report-hdr{display:flex;justify-content:space-between;align-items:baseline;
gap:10px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.mock-report-title{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:13.5px;
color:var(--navy)}
.mock-report-count{font-size:11px;color:var(--muted);flex:0 0 auto}
.mock-tc-row{display:flex;align-items:center;gap:10px;padding:9px 0;
border-bottom:1px solid #F1EEE1;font-size:11.5px}
.mock-tc-row:last-child{border-bottom:none}
/* Deliberately NOT font-family:monospace here (unlike .step-card-hdr .step-id
elsewhere) - in a small polished hero mockup, a browser-default monospace
font reads as a jarring third typeface next to Inter/Fraunces, which is
exactly the inconsistency this mockup was meant to fix, not add to. Kept
in the site's one type system instead, differentiated by weight/color/
letter-spacing rather than typeface. */
.mock-tc-id{font-family:inherit;letter-spacing:.02em;color:var(--blue);font-weight:700;flex:0 0 auto}
.mock-tc-title{color:var(--text);flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-pill{flex:0 0 auto;font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px}
.mock-pill-pass{background:#DCFCE7;color:#15803D}
.mock-pill-blocked{background:#FEF3C7;color:#B45309}
.mock-pill-partial{background:#F4E3C6;color:#8a5b12}
.mock-pill-gap{background:#F6DCC9;color:#8a3b12}
/* Hero mockup tab toggle (Test Report / Traceability / Gaps) - replaces
the old static .browser-frame-url text with three clickable tabs so the
same small hero panel can show three proof points without adding any
vertical space to the hero. Switching is handled by hero_tabs.js; the
markup degrades to just showing the Test Report panel if JS is off,
since only .frame-tab clicks toggle the [hidden] attribute. */
.frame-tabs{display:flex;gap:4px;margin-left:8px}
.frame-tab{font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;color:var(--muted);
background:none;border:none;padding:4px 10px;border-radius:6px;cursor:pointer;letter-spacing:.01em}
.frame-tab.active{background:var(--bg);color:var(--navy)}
.frame-tab:not(.active):hover{color:var(--navy)}
/* Homepage hero now shows a single static panel (Test Report only) rather
than the three-tab switcher - the other two views (Traceability, Gaps)
were judged as more depth than a "gist" homepage needs; see
council-review-homepage-content-audit-2026-09-21.md. This label keeps the
same visual weight/position as the old active tab, without being
clickable. */
.frame-tab-label{font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;color:var(--navy);
background:var(--bg);padding:4px 10px;border-radius:6px;letter-spacing:.01em}
.hero-visual-note{font-size:11px;color:var(--muted);text-align:center;margin-top:6px}
.hero-visual-note a{color:var(--blue);font-weight:700}
/* Compact homepage callout linking out to the full "See it in action"
proof-artefact page, instead of embedding the full artefact (disclaimer,
screenshots, table) inline - see council-review-homepage-placement-
proof-artefact-2026-09-21.md. */
.proof-callout{display:flex;align-items:center;gap:16px;background:var(--sky);border:1px solid var(--border);
border-radius:12px;padding:18px 22px;margin:26px 0;flex-wrap:wrap}
.proof-callout-badge{font-family:monospace;font-size:12px;background:var(--gbg);color:var(--green);
padding:2px 10px;border-radius:12px;font-weight:700}
.proof-callout-copy{flex:1 1 240px;font-size:13.5px;color:var(--text);line-height:1.5}
.proof-callout-copy strong{font-family:'Fraunces',Georgia,serif;font-size:16px;color:var(--navy);display:block;margin-bottom:4px}
.trace-row{display:flex;align-items:center;gap:10px;padding:9px 0;
border-bottom:1px solid #F1EEE1;font-size:11.5px}
.trace-row:last-child{border-bottom:none}
.trace-req{font-weight:700;color:var(--navy);flex:0 0 auto;min-width:44px}
.trace-desc{color:var(--text);flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trace-tcs{color:var(--muted);flex:0 0 auto;font-size:11px}
.gap-row{display:flex;flex-direction:column;gap:3px;padding:9px 0;
border-bottom:1px solid #F1EEE1;font-size:11.5px}
.gap-row:last-child{border-bottom:none}
.gap-hdr{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gap-title{font-weight:700;color:var(--navy)}
.gap-note{font-size:11px;color:var(--muted)}
.gap-footnote{font-size:10.5px;color:var(--muted);padding-top:8px;font-style:italic}
/* Homepage "what it does" explainer band - sits between the topbar and the
chooser cards, so a first-time visitor gets a plain-language answer to
"what is this" and a way to ask a question before being asked to pick
anything. See council-review-site-and-retention.md. */
.intro-band{margin-bottom:40px}
.intro-lede{font-size:17px;color:var(--text);line-height:1.65;max-width:62ch;margin-bottom:24px}
/* "How it works" - previously three identical white bordered cards with a
small filled circle number, a pattern near-identical to the generic
3-step layout used across countless AI-generated landing page templates.
Restyled as a connected timeline: a thin line runs behind the numerals
(cut where each numeral's circle sits, via the circle's opaque
background matching the page background), numerals are a larger serif
mark rather than a small filled badge, and there's no card border/shadow
competing with that line - reads as one continuous flow instead of three
unrelated boxes. See council review, 2026-09-15. */
.intro-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:28px;position:relative}
.intro-steps::before{content:"";position:absolute;top:23px;left:9%;right:9%;height:1px;background:var(--border);z-index:0}
@media (max-width:640px){
.intro-steps{grid-template-columns:1fr;gap:22px}
.intro-steps::before{display:none}
}
.intro-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;
gap:12px;background:none;border:none;box-shadow:none;padding:0;font-size:13.5px;
line-height:1.55;color:var(--text)}
.intro-step strong{display:block;font-family:'Fraunces',Georgia,serif;font-size:15px;
font-weight:600;color:var(--navy);margin-bottom:3px}
.step-num{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:var(--bg);
border:2px solid var(--blue);color:var(--navy);font-family:'Fraunces',Georgia,serif;
font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center}
.intro-contact{font-size:13.5px;color:var(--muted)}
.intro-contact a{color:var(--blue);font-weight:600}
/* About section - previously there was no "who runs this" content anywhere
reachable from the topbar/footer's "About" link, which pointed nowhere. */
.about-band{background:var(--sky);border-radius:18px;padding:26px 28px;margin-bottom:40px;
box-shadow:0 1px 3px rgba(43,58,42,.05)}
/* 20px matches .faq-title - both are section-level h2 headings on the same
page(s) and should read as the same weight in the hierarchy; previously
this was 17px against .faq-title's 20px, a mismatch with no reason
behind it. */
.about-title{font-family:'Fraunces',Georgia,serif;font-size:20px;font-weight:600;
color:var(--navy);margin-bottom:12px}
.about-body{font-size:13.5px;color:var(--text);line-height:1.65;max-width:64ch}
.about-body + .about-body{margin-top:10px}
.about-body a{color:var(--blue);font-weight:600}
.about-quote{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:13.5px;
color:var(--navy);line-height:1.6;max-width:60ch;margin-top:18px;padding-top:16px;
border-top:1px solid var(--border)}
.about-quote-attr{display:inline-block;margin-top:8px;font-style:normal;font-size:12px;
font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.04em}
/* Hero: platform list, primary/secondary CTA row, pricing-shape line */
.platform-list{font-size:12px;color:var(--muted);margin-top:18px;max-width:52ch}
.hero-cta-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:20px}
.hero-cta-secondary{color:var(--blue);font-size:13.5px;font-weight:600;text-decoration:none}
.hero-cta-secondary:hover{text-decoration:underline}
.pricing-line{font-size:13.5px;color:var(--muted);margin-top:14px;max-width:58ch;line-height:1.55}
.pricing-line a{color:var(--blue);font-weight:600}
/* Trust strip - built-on-Claude/Playwright credibility, previously only
stated in Security/Privacy legal-page prose (see council-review-
qasmith-comparison.md). Deliberately plain/small - a credibility fact,
not a promotional banner. */
.trust-strip{display:flex;align-items:center;flex-wrap:wrap;gap:10px 22px;
margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.trust-item{display:flex;align-items:center;gap:7px;font-size:12px;
color:var(--muted);font-weight:600}
.trust-item svg{flex:0 0 auto;color:var(--blue)}
/* No-code positioning line - states the audience split explicitly (see
council-review-qasmith-comparison-followup-2026-09-15.md): this is a
deliberate contrast with code-generation competitors, not filler copy. */
.no-code-line{font-size:13.5px;color:var(--navy);font-weight:600;
line-height:1.55;max-width:52ch;margin-top:16px}
/* Pricing-shape callout - same wording as pricing-line, given a visual
home of its own instead of a single hero sentence, per the same
follow-up review's point 4 on pricing prominence. No new numbers. */
.pricing-callout{background:var(--sky);border-radius:14px;padding:18px 22px;
margin-bottom:32px;font-size:13.5px;color:var(--text);line-height:1.6}
.pricing-callout strong{color:var(--navy)}
.pricing-callout a{color:var(--blue);font-weight:600}
/* Time & cost calculator - deliberately reuses existing shared classes
(.card, .form label/input, .card.stat .n/.l) rather than introducing new
font sizes/styles, per the standing lesson from the batch-d5 monospace
miss. Estimates the COST OF THE STATUS QUO (manual test-case writing)
from numbers the visitor enters - never Req2QA's own price - so it stays
compatible with the site's quote-only pricing decision while still
making a concrete, personal, numeric case. See
claude/visual-consistency-type-scale-plan-2026-09-15.md. */
.calc-band{margin-bottom:40px}
.calc-card{padding:30px}
.calc-inputs{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-bottom:26px}
@media (max-width:560px){.calc-inputs{grid-template-columns:1fr}}
.calc-results{display:flex;gap:18px;flex-wrap:wrap;padding:22px 0;margin-bottom:20px;
border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.calc-results .card.stat{flex:1 1 140px;background:var(--sky);border:none;box-shadow:none;border-radius:14px}
.calc-note{font-size:12px;color:var(--muted);margin-top:16px;margin-bottom:0}
/* FAQ category grouping - subheadings above each cluster of existing
items, no change to the items themselves. */
.faq-group + .faq-group{margin-top:22px}
.faq-group-title{font-size:12px;font-weight:700;color:var(--blue);
text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}
/* FAQ - native /, so it works with zero JS and is
keyboard/screen-reader accessible without any custom accordion script. */
.faq-band{margin-bottom:40px}
.faq-title{font-family:'Fraunces',Georgia,serif;font-size:20px;font-weight:600;
color:var(--navy);margin-bottom:18px}
.faq-item{background:var(--cream-card);border:1px solid var(--border);border-radius:14px;
padding:16px 20px;margin-bottom:10px;box-shadow:0 1px 3px rgba(43,58,42,.05)}
.faq-item summary{font-weight:600;font-size:13.5px;color:var(--navy);cursor:pointer;
list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:"+";display:inline-block;width:16px;color:var(--blue);
font-weight:700}
.faq-item[open] summary::before{content:"\2212"}
.faq-item p{margin-top:10px;font-size:13.5px;color:var(--text);line-height:1.6}
.faq-item p a{color:var(--blue);font-weight:600}
/* Run History */
.history-toggle{margin:8px 0 18px;display:flex;gap:10px;flex-wrap:wrap}
.history-list{display:flex;flex-direction:column;gap:10px}
.history-row{background:var(--cream-card);border:1px solid var(--border);border-radius:14px;
padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:14px;
flex-wrap:wrap;box-shadow:0 1px 3px rgba(43,58,42,.05)}
.history-row-expired{opacity:.65}
.history-row-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.history-app{font-weight:600;color:var(--navy);font-size:13.5px;word-break:break-word}
.history-meta{font-size:12px;color:var(--muted)}
.history-row-actions{display:flex;gap:8px;flex-wrap:wrap}
.history-expired-tag{font-size:12px;color:var(--muted);font-style:italic}
.copy-link-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.copy-link-btn{font-size:13.5px}
/* Guides / SEO content clusters - pillar + cluster articles.
Reuses existing tokens (--navy, --blue, --cream-card, --border, --text,
--muted) and existing patterns (.card.stat, .faq-item, .about-band) so
this section doesn't introduce a second visual language. */
.guide-index-list{display:flex;flex-direction:column;gap:14px;margin-bottom:32px}
.guide-index-card{display:block;background:var(--cream-card);border:1px solid var(--border);
border-radius:16px;padding:20px 22px;box-shadow:0 1px 3px rgba(43,58,42,.05);
text-decoration:none;transition:box-shadow .15s ease,transform .15s ease}
.guide-index-card:hover{box-shadow:0 4px 14px rgba(43,58,42,.09);transform:translateY(-1px)}
.guide-index-kicker{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.guide-index-card h3{font-family:'Fraunces',Georgia,serif;font-size:17px;font-weight:600;
color:var(--navy);margin-bottom:6px}
.guide-index-card p{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0}
.guide-body{font-size:14px;color:var(--text);line-height:1.7;max-width:68ch}
.guide-body h2{font-family:'Fraunces',Georgia,serif;font-size:19px;font-weight:600;
color:var(--navy);margin:32px 0 12px}
.guide-body h2:first-child{margin-top:0}
.guide-body p{margin-bottom:14px}
.guide-body ul,.guide-body ol{margin:0 0 16px 22px}
.guide-body li{margin-bottom:8px}
.guide-body a{color:var(--blue);font-weight:600}
.guide-body .faq-item{max-width:none}
.guide-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 22px}
@media (max-width:640px){.guide-stats-row{grid-template-columns:1fr}}
.guide-table{width:100%;border-collapse:collapse;margin:16px 0 22px;font-size:13px}
.guide-table th,.guide-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border)}
.guide-table th{color:var(--navy);font-weight:700;font-size:12px;text-transform:uppercase;
letter-spacing:.03em}
.guide-table td{color:var(--text)}
.guide-cta{background:var(--sky);border-radius:18px;padding:22px 26px;margin:36px 0 28px;
display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.guide-cta p{font-size:13.5px;color:var(--text);line-height:1.6;margin:0;max-width:48ch}