/* ============================================================================
* Shared design tokens for the B2B pages: /team-trial, /why-us, /business.
*
* Extracted from team-trial.css, which was the first page to use them and is
* the visual standard the other two converge on. Every value and every contrast
* ratio below is carried over unchanged.
*
* HOW IT LOADS
* A in each consuming template, emitted immediately above that page's own
* stylesheet: templates/cms/landing-light.pt and landing-dark.pt for the CMS
* pages, and templates/policies/business.pt for the one Chameleon page.
*
* It must NOT be pulled in with @import, which was the first attempt. The CDN
* serves everything under /static/ with max-age=31919000 (369 days), and
* build_cache_id() is a Chameleon function that stamps a href but cannot
* reach inside a stylesheet. An @import URL therefore has no cache_id and no way
* to gain one, so an edit to this file would reach nobody who had already loaded
* it, for a year, at every browser and every CDN edge.
*
* That is not hypothetical here. On 2026-05-18 commit 09d08ecb6 changed
* landing-cms-page-base-bulma.css (font family, line-height, letter-spacing)
* without touching either of the two stylesheets that @import it, so neither
* cache_id moved and a sitewide type change sat behind a stale window. The two
* remaining @imports in landing-cms-page-{light,dark}-bulma.css are the same
* latent bug and are worth converting separately.
*
* The failure mode is the reason to care: a stale copy makes var(--tp-anything-new)
* invalid at computed-value time, so backgrounds go transparent, radii go to 0
* and shadows vanish. The page does not look broken, it looks slightly flat, and
* it is unreproducible in a fresh browser profile.
*
* As a the two sheets also fetch in parallel rather than serially.
*
* NAMING
* The prefix is --tp- (Talk Python), not --tt- (team-trial), because three
* pages share it. team-trial.css keeps its --tt- names as thin aliases onto
* these, so its ~880 lines of rules did not have to be rewritten to adopt this
* file. New code uses --tp- directly.
*
* COLOUR RULES THAT CAME WITH THESE TOKENS
* The blues are the site's existing is-info-blue family (the .is-info-blue
* button family in site-bulma.css). The yellow is the light theme's #f4e04d,
* usable only as a fill behind black text: at 1.34:1 on white it can never be
* text, nor a border or icon that carries meaning. Ratios in the comments are
* against white unless stated.
*
* RED AND GREEN ARE STATE, NEVER ARGUMENT
* --tp-red-* is the error state and --tp-green-* is the success state. Neither
* may appear in a comparison table, a pricing block, or anywhere a colour would
* be doing the work of a sentence. Colouring a competitor's cell red is the same
* failure as quoting their most expensive plan, and it fails WCAG 1.4.1 besides,
* since colour would be the only thing distinguishing good from bad.
* ========================================================================= */
:root {
/* ----------------------------------------------------------------- TYPE */
/* Two families. Before this file existed each was written out five times in
team-trial.css alone, so a family change was a fifteen-site edit across
three pages with no way to know you had them all. */
--tp-font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--tp-font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
/* Named by role, not by number: a page needing a size that is not on this
list is making a hierarchy mistake. Do not add intermediate steps. */
--tp-fs-micro: 13px; /* uppercase eyebrows and meta labels only */
--tp-fs-fine: 14px; /* captions, fine print, card meta */
--tp-fs-small: 15px; /* form labels, inline notices */
--tp-fs-ui: 16px; /* inputs: below 16px iOS zooms the viewport on focus */
--tp-fs-body: 17px;
--tp-fs-body-lg: 1.125rem; /* lede, FAQ summary, sub-heads */
--tp-fs-h3: 1.25rem;
--tp-fs-h2: 1.875rem;
--tp-fs-h2-lead: 2.25rem; /* the one oversized section head per page */
--tp-fs-h1: clamp(2.25rem, 5vw, 3rem);
/* Inversely proportional to size, as they should be. */
--tp-lh-tight: 1.15;
--tp-lh-snug: 1.45;
--tp-lh-body: 1.65;
--tp-lh-relaxed: 1.7;
/* Line length. These keep prose in the 45-75 character band; /business
currently runs ~110 characters at 900px and 18px, which is why it is
tiring to read. */
--tp-measure-narrow: 32em;
--tp-measure: 34em;
--tp-measure-wide: 36em;
/* --------------------------------------------------------------- RHYTHM */
/* Deliberately not a twelve-step spacing ladder: in hand-written CSS with no
build step authors keep typing 1rem, and the ladder rots into decoration.
What must not diverge across three pages is the page-level rhythm, which
is what a reader notices when moving between them. */
--tp-wrap: 1080px;
--tp-wrap-narrow: 720px; /* FAQ column, wide form card */
--tp-gutter: 24px;
--tp-section-y: 5rem;
--tp-section-y-tight: 4rem;
--tp-head-gap: 3rem;
/* ---------------------------------------------------------------- FOCUS */
/* One offset. team-trial.css grew three (2px, 3px, 4px) before anyone
noticed; focus visibility is an accessibility requirement, not a taste. */
--tp-focus-ring: 3px solid var(--tp-blue);
--tp-focus-offset: 3px;
--tp-focus-shadow: 0 0 0 3px hsl(207 57% 46% / 0.2);
--tp-transition: 0.18s ease;
/* Cool neutrals, hue 212 so they sit with the brand blue. Ratios vs white. */
--tp-ink: hsl(212, 27%, 12%); /* body and headings 15.9:1 */
--tp-ink-2: hsl(212, 15%, 32%); /* secondary copy 8.2:1 */
--tp-ink-3: hsl(212, 13%, 42%); /* captions, meta, fine print 5.7:1 */
--tp-line: hsl(212, 22%, 91%); /* decorative hairlines only */
--tp-line-strong: hsl(212, 18%, 82%); /* image frames */
--tp-border-ui: hsl(212, 14%, 55%); /* interactive edges 3.9:1
WCAG 1.4.11 needs 3:1; Bulma's
#dbdbdb is 1.38:1 and fails. */
--tp-surface: hsl(210, 33%, 98%);
--tp-surface-2: hsl(210, 30%, 96%);
/* Brand blue. #337ab7 is 4.56:1 on white, fine for text but too light to
carry a dominant CTA, so the fill uses the site's existing hover shade. */
--tp-blue: #337ab7;
--tp-blue-dark: #286090; /* CTA fill, white text 6.63:1 */
--tp-blue-darker: #204d74;
--tp-blue-tint: hsl(207, 60%, 96%); /* 1.10:1 - behind a 44px badge or as a
button hover, never as a large area */
/* The "ours" column of a comparison table. Distinct from --tp-blue-tint
because 1.10:1 disappears as a narrow strip beside white cells on a phone
or a dim laptop, and that strip is the table's single most important
signal. 1.18:1, carrying --tp-ink at 14.3:1. */
--tp-blue-fill: hsl(207, 58%, 93%);
--tp-yellow: #f4e04d; /* fill only, black text on top is 15.6:1 */
/* Amber, for the one field people get wrong. Not red: red means error. */
--tp-amber-bg: hsl(45, 90%, 96%);
--tp-amber-line: hsl(38, 92%, 50%);
--tp-amber-ink: hsl(30, 65%, 26%); /* 7.3:1 on amber-bg */
--tp-green-bg: hsl(145, 55%, 95%);
--tp-green-line: hsl(145, 55%, 30%);
--tp-green-ink: hsl(145, 63%, 22%); /* 8.1:1 on white */
--tp-red-bg: hsl(0, 80%, 97%);
--tp-red-line: hsl(0, 65%, 45%);
--tp-red-ink: hsl(0, 62%, 34%); /* 6.4:1 on red-bg */
--tp-r: 10px;
--tp-r-sm: 6px;
--tp-sh-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
--tp-sh-md: 0 2px 4px -1px rgba(16, 24, 40, 0.06), 0 8px 16px -4px rgba(16, 24, 40, 0.1);
--tp-sh-lg: 0 4px 6px -2px rgba(16, 24, 40, 0.05), 0 16px 32px -8px rgba(16, 24, 40, 0.14);
/* Hue-tinted, not neutral: a grey shadow under a blue button reads as grime. */
--tp-sh-cta: 0 1px 2px rgba(16, 24, 40, 0.1), 0 10px 20px -6px rgba(32, 77, 116, 0.45);
--tp-sh-cta-h: 0 2px 4px rgba(16, 24, 40, 0.12), 0 16px 28px -8px rgba(32, 77, 116, 0.55);
/* Horizontal only, for the sticky first column of a scrolling comparison
table. A drop shadow turned onto a vertical edge reads as a render bug. */
--tp-sh-edge: 8px 0 12px -8px rgba(16, 24, 40, 0.18);
--tp-surface-0: #fff; /* named, because it is hardcoded four times already */
--tp-ink-placeholder: hsl(212, 12%, 46%); /* placeholders only */
}
/* The mobile step-down lives with the tokens rather than in each page's own
breakpoint block, so a new page cannot forget it. */
@media screen and (max-width: 720px) {
:root {
--tp-section-y: 3.5rem;
--tp-section-y-tight: 3rem;
--tp-gutter: 20px;
--tp-head-gap: 2rem;
}
}