/*
 * The public pages: a holding page and four legal documents.
 *
 * Hand-written, linked directly, and deliberately outside the build.
 *
 * The reasoning is the one already recorded at the top of public/css/panel.css.
 * Making a page depend on `npm run build` means that losing that step in a
 * deploy strips the page bare -- and of everything in this application, the
 * pages that must never be unreadable are the four a payment processor checks
 * and the one a stranger lands on. There is no Tailwind here, no Vite manifest,
 * and no JavaScript at all.
 *
 * No monospace face appears anywhere below, on purpose. A legal document is
 * prose; a code face in it would be decoration pretending to be precision.
 *
 * Two colour systems, one palette. The neutrals are Mauve, copied from
 * Filament's own ramp (vendor/filament/support/src/Colors/Color.php) so the
 * public pages and the panel are the same violet-biased grey rather than two
 * greys that nearly match. The accent is pinned to the same two hexes
 * public/css/panel.css pins, and for the same measured reasons.
 */

/* ------------------------------------------------------------------------
 * Palette
 * ---------------------------------------------------------------------- */

:root {
    /* Mauve, verbatim from Filament's Color::Mauve. */
    --mauve-50: oklch(0.985 0 0);
    --mauve-100: oklch(0.96 0.003 325.6);
    --mauve-200: oklch(0.922 0.005 325.62);
    --mauve-300: oklch(0.865 0.012 325.68);
    --mauve-400: oklch(0.711 0.019 323.02);
    --mauve-500: oklch(0.542 0.034 322.5);
    --mauve-600: oklch(0.435 0.029 321.78);
    --mauve-700: oklch(0.364 0.029 323.89);
    --mauve-800: oklch(0.263 0.024 320.12);
    --mauve-900: oklch(0.212 0.019 322.12);
    --mauve-950: oklch(0.145 0.008 326);

    /*
     * The accent, pinned rather than derived -- the same pair panel.css pins.
     * #C42D77 measures 5.26:1 on white and #A32560 measures 7.4:1, which is what
     * makes them safe for link text and for a button label respectively. Do not
     * "improve" these; the whole point is that the public pages and the panel
     * cannot drift apart.
     */
    --primary-600: #C42D77;
    --primary-700: #A32560;

    /* Light is the default, and every token is defined here first. */
    --ground: #ffffff;
    --ground-sunken: var(--mauve-50);
    --ground-raised: #ffffff;
    --ink: var(--mauve-900);
    --ink-muted: var(--mauve-600);
    --ink-faint: var(--mauve-500);
    --rule: var(--mauve-200);
    --rule-strong: var(--mauve-300);
    --link: var(--primary-600);
    --button-ground: var(--primary-700);
    --button-ground-hover: var(--primary-600);
    --button-ink: #ffffff;

    /* The development-only banner. Amber, and unmistakably not the brand. */
    --warn-ground: #FEF3C7;
    --warn-rule: #F59E0B;
    --warn-ink: #78350F;

    --font-body: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    /*
     * Copied verbatim from panel.css. Spelled out rather than left to the
     * browser because a failed font request should degrade to a serif, not
     * silently to the body face -- which would quietly delete the distinction
     * the display face was chosen to make.
     */
    --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
}

/*
 * Dark mode is `prefers-color-scheme` and nothing else. No toggle, because a
 * toggle needs JavaScript and state, and neither belongs on a page whose job is
 * to still be readable when everything else has failed.
 *
 * Only the tokens change below. Every one of them already has a value above, so
 * a browser that reports no preference gets a complete light theme rather than
 * a half-painted page.
 */
@media (prefers-color-scheme: dark) {
    :root {
        --ground: var(--mauve-950);
        --ground-sunken: var(--mauve-900);
        --ground-raised: var(--mauve-900);
        --ink: var(--mauve-200);
        --ink-muted: var(--mauve-400);
        --ink-faint: var(--mauve-400);
        --rule: color-mix(in oklab, var(--mauve-200) 14%, transparent);
        --rule-strong: color-mix(in oklab, var(--mauve-200) 24%, transparent);

        /*
         * The accent cannot come across unchanged. Measured: #C42D77 on the
         * Mauve-950 ground, oklch(0.145 0.008 326), is 3.76:1 -- under AA for
         * body-sized link text.
         *
         * Lightening in oklab rather than picking a new hex keeps the hue: the
         * link is recognisably the same pink, one step brighter. Measured
         * against the same ground, 80% accent to 20% white gives #D55F91 at
         * 5.55:1, which clears 4.5:1 with enough headroom that a slightly
         * lighter surface underneath it is still safe. (90% would have been
         * 4.58:1 -- passing, but with nothing left over.)
         */
        --link: color-mix(in oklab, #C42D77 80%, white);

        /*
         * The button does not move. It carries white text on its own ground
         * rather than sitting on the page's, so the page going dark changes
         * nothing about its contrast: measured, white is 7.02:1 on #A32560 and
         * 5.26:1 on #C42D77, and both clear AA in either theme. Restated here
         * rather than left to inheritance so that anyone editing this block can
         * see it was considered and not forgotten.
         */
        --button-ground: var(--primary-700);
        --button-ground-hover: var(--primary-600);

        --warn-ground: color-mix(in oklab, #F59E0B 16%, var(--mauve-950));
        --warn-rule: #F59E0B;
        --warn-ink: #FDE68A;
    }
}

/* ------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
}

a:hover {
    text-decoration-color: currentColor;
}

:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
    border-radius: 2px;
}

/*
 * A keyboard visitor should be able to get past the header without tabbing
 * through every footer link on every page.
 */
.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ground-raised);
    color: var(--ink);
    padding: 0.5rem 1rem;
    border: 1px solid var(--rule-strong);
    border-radius: 0.375rem;
    z-index: 10;
}

.skip:focus {
    left: 1rem;
    top: 1rem;
}

/* ------------------------------------------------------------------------
 * Type
 * ---------------------------------------------------------------------- */

h1,
h2,
h3 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--ink);
    /* A heading should not sit at the very bottom of a scrolled viewport with
       one line of its own section under it. */
    text-wrap: balance;
}

h1 {
    font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
    font-variation-settings: 'opsz' 96;
    margin: 0 0 0.5rem;
}

h2 {
    font-size: 1.375rem;
    font-variation-settings: 'opsz' 48;
    margin: 2.5rem 0 0.75rem;
}

h3 {
    font-size: 1.0625rem;
    font-variation-settings: 'opsz' 24;
    margin: 1.75rem 0 0.5rem;
}

p {
    margin: 0 0 1rem;
}

ul {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

li {
    margin-bottom: 0.5rem;
}

li::marker {
    color: var(--ink-faint);
}

/* ------------------------------------------------------------------------
 * Shell
 * ---------------------------------------------------------------------- */

.shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.bar {
    border-bottom: 1px solid var(--rule);
    background: var(--ground);
}

.bar-inner,
.foot-inner {
    /*
     * Wider than the prose measure, because the bar and the footer are rows of
     * short items rather than sentences. The prose sets its own narrower
     * measure inside this.
     */
    max-width: 64rem;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.bar-inner {
    justify-content: space-between;
}

.wordmark {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--ink);
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-variation-settings: 'opsz' 72;
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
}

.wordmark img {
    display: block;
    height: 1.75rem;
    width: auto;
    max-width: 9rem;
    object-fit: contain;
    object-position: left center;
}

.bar-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-size: 0.875rem;
}

.bar-links a {
    color: var(--ink-muted);
    text-decoration: none;
}

/* Matched to `.bar-links a` above rather than reached for with !important. */
.bar-links a.bar-signin {
    font-weight: 500;
    color: var(--ink);
}

.bar-links a:hover {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

main {
    flex: 1 1 auto;
    width: 100%;
}

.foot {
    border-top: 1px solid var(--rule);
    background: var(--ground-sunken);
    color: var(--ink-muted);
    font-size: 0.875rem;
}

.foot-inner {
    justify-content: space-between;
}

.foot a {
    color: var(--ink-muted);
}

.foot a:hover {
    color: var(--ink);
}

.foot-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

/* ------------------------------------------------------------------------
 * Prose
 * ---------------------------------------------------------------------- */

/*
 * 44rem is roughly 70 characters at this size, which is the width a long
 * document is actually read at. A terms of service set to the full width of a
 * desktop window is a terms of service nobody finishes.
 */
.doc {
    max-width: 44rem;
    margin: 0 auto;
    padding: 3.5rem 1.5rem 5rem;
}

.doc-meta {
    color: var(--ink-faint);
    font-size: 0.875rem;
    margin: 0 0 2.5rem;
}

.doc-lede {
    font-size: 1.0625rem;
    color: var(--ink-muted);
    margin-bottom: 2rem;
}

.doc h2 {
    padding-top: 0.5rem;
    border-top: 1px solid var(--rule);
}

/* The first section sits directly under the heading block and needs no rule. */
.doc > h2:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.doc-note {
    border-left: 2px solid var(--rule-strong);
    padding-left: 1rem;
    color: var(--ink-muted);
}

/* ------------------------------------------------------------------------
 * The index
 * ---------------------------------------------------------------------- */

.cards {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.cards li {
    margin: 0;
}

.card {
    display: block;
    height: 100%;
    padding: 1.25rem;
    border: 1px solid var(--rule);
    border-radius: 0.625rem;
    background: var(--ground-raised);
    text-decoration: none;
    color: var(--ink);
    transition: border-color 100ms, background-color 100ms;
}

.card:hover {
    border-color: var(--rule-strong);
    background: var(--ground-sunken);
}

.card-title {
    display: block;
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: -0.005em;
    margin-bottom: 0.25rem;
}

.card-summary {
    display: block;
    color: var(--ink-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
}

/* ------------------------------------------------------------------------
 * The holding page
 * ---------------------------------------------------------------------- */

.hero {
    max-width: 44rem;
    margin: 0 auto;
    padding: 5rem 1.5rem 4rem;
}

.hero h1 {
    font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem);
}

.hero-lede {
    font-size: 1.25rem;
    color: var(--ink-muted);
    margin-bottom: 2rem;
}

.hero-plain {
    font-weight: 500;
    color: var(--ink);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2.5rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    font-weight: 500;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: background-color 100ms, border-color 100ms, color 100ms;
}

/*
 * The filled button sits on the darker of the pinned pair and lightens on
 * hover, so the hover moves *into* the accent rather than out of contrast --
 * the same trade panel.css makes for .fi-btn. Measured with white text: 7.02:1
 * at rest on #A32560, 5.26:1 on hover at #C42D77. Starting on the lighter of
 * the two would put the hover state under AA.
 */
.btn-primary {
    background: var(--button-ground);
    color: var(--button-ink);
}

.btn-primary:hover {
    background: var(--button-ground-hover);
    color: var(--button-ink);
}

.btn-secondary {
    border-color: var(--rule-strong);
    color: var(--ink);
    background: var(--ground-raised);
}

.btn-secondary:hover {
    background: var(--ground-sunken);
}

/* ------------------------------------------------------------------------
 * The unfinished-facts banner
 * ---------------------------------------------------------------------- */

/*
 * Only ever seen outside production, where a document with an unfilled fact
 * answers 503 instead. It is loud on purpose: the person looking at this page
 * is the person who can finish it, and a quiet notice is one that gets shipped
 * past.
 */
.warn {
    background: var(--warn-ground);
    border: 1px solid var(--warn-rule);
    border-left-width: 4px;
    border-radius: 0.375rem;
    color: var(--warn-ink);
    padding: 1rem 1.25rem;
    margin: 0 0 2.5rem;
    font-size: 0.9375rem;
}

.warn h2 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--warn-ink);
    margin: 0 0 0.5rem;
    border-top: 0;
    padding-top: 0;
    letter-spacing: 0;
}

.warn ul {
    margin: 0.5rem 0 0;
}

.warn li {
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.unfilled {
    background: var(--warn-ground);
    color: var(--warn-ink);
    border-bottom: 1px dotted var(--warn-rule);
    padding: 0 0.15em;
}

/* ------------------------------------------------------------------------
 * Print
 * ---------------------------------------------------------------------- */

/*
 * These documents get printed and attached to things -- a merchant account
 * application, a procurement questionnaire. So: no chrome, black on white, and
 * link destinations spelled out, because a printed page cannot be clicked.
 */
/*
| The home page bands
|--------------------------------------------------------------------------
|
| The page alternates full-bleed bands so the two lanes (do it yourself, hand it
| over) read as two distinct places rather than one long column. Only the ground
| changes between them; the ink tokens are shared, so a band cannot quietly fall
| out of contrast in either theme.
|
| Widths: 64rem for anything with cards or a grid in it, 44rem for the prose
| bands, which is the same measure the legal documents are set at. Prose wants
| the short line whatever page it is on.
*/

.band {
    padding: 4.5rem 1.5rem;
    border-top: 1px solid var(--rule);
}

.band-alt {
    background: var(--ground-sunken);
}

/* The first band on a page that opens with one: no rule above it, since there
   is nothing above it to be divided from. */
.band-first {
    border-top: 0;
    padding-top: 3.5rem;
}

/*
| The FAQ, as native disclosure widgets
|
| <details> rather than a scripted accordion. It opens with the keyboard, it is
| announced properly by a screen reader, it prints expanded, and it works with
| the stylesheet or the JavaScript missing. This page has no JavaScript and does
| not need any to do this.
*/

.faq {
    margin-top: 2rem;
    border-top: 1px solid var(--rule);
}

.faq details {
    border-bottom: 1px solid var(--rule);
}

.faq summary {
    padding: 1.125rem 2rem 1.125rem 0;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    position: relative;
}

/* Safari renders its own triangle unless this is said explicitly. */
.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: '+';
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    line-height: 1;
    color: var(--ink-faint);
}

.faq details[open] summary::after {
    content: '\2013';
}

.faq summary:hover {
    color: var(--link);
}

.faq summary:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
}

.faq details p {
    margin: 0 0 1.25rem;
    color: var(--ink-muted);
    max-width: 40rem;
}

.band-inner {
    max-width: 64rem;
    margin: 0 auto;
}

.band-narrow {
    max-width: 44rem;
}

.band h2 {
    margin-top: 0;
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
}

.band-lede {
    font-size: 1.125rem;
    color: var(--ink-muted);
    max-width: 44rem;
}

.band-close {
    margin-top: 2rem;
    color: var(--ink-muted);
}

/* A short aside under a lede: defines a term the section is about to lean on. */
.band-note {
    max-width: 44rem;
    color: var(--ink-muted);
}

/* Pricing, early on the page and deliberately undramatic. */

.plans {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
}

.plan {
    margin: 0;
    padding: 1.5rem;
    border: 1px solid var(--rule);
    border-radius: 0.625rem;
    background: var(--ground-raised);
}

.plan-name {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: 1.0625rem;
    margin: 0;
}

.plan-price {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.1;
    margin: 0.5rem 0 0;
    color: var(--ink);
}

.plan-price span {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--ink-faint);
    margin-top: 0.25rem;
}

.plan-credits,
.plan-seats {
    margin: 0.75rem 0 0;
    font-size: 0.9375rem;
}

.plan-seats {
    color: var(--ink-muted);
}

.plan-note {
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
    font-size: 0.9375rem;
    color: var(--ink-muted);
}

/* Lane one: the manual toolkit, compact because the items are familiar. */

.tools {
    display: grid;
    gap: 1.75rem 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
}

.tool {
    margin: 0;
}

.tool h3 {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
}

.tool p {
    margin: 0;
    font-size: 0.9375rem;
}

/* Lane two: the agents, given room because this is the part being sold. */

.beats {
    display: grid;
    gap: 2.5rem;
    margin-top: 2.5rem;
    max-width: 44rem;
}

.beat h3 {
    margin: 0 0 0.625rem;
    font-size: 1.25rem;
}

.beat p {
    margin: 0;
}

.band-cta .actions {
    margin-top: 2rem;
}

/*
| Hero, two columns once there is room for two
|
| The illustration sits on its own light plate in both themes, deliberately.
| Its palette is white, a dark slate and the brand accent, which is a light-mode
| palette: on the dark ground the slate shapes sink almost to invisible. Rather
| than filter or invert the artwork, which mangles the accent, the plate stays
| light and the picture reads as a picture. --mauve-50 is safe for this because
| the ramp tokens keep their values in both themes and only the semantic ones
| swap.
*/

.hero {
    display: grid;
    gap: 3rem;
    align-items: center;
    max-width: 64rem;
}

.hero-copy {
    min-width: 0;
}

/*
| Hero spacing, tightened past the defaults
|
| The document rhythm suits a legal page, where every paragraph is one of forty
| and wants air around it. In a hero there are three lines total, and the gaps
| were doing more work than the words: 2rem under the lede and 3.5rem above the
| buttons pushed the call to action most of a screen down on a laptop.
*/

.hero-copy .hero-lede {
    margin-bottom: 0.75rem;
}

.hero-copy p:last-of-type {
    margin-bottom: 0;
}

.hero-copy .actions {
    margin-top: 1.75rem;
}

.hero-art {
    display: none;
    padding: 1.5rem;
    border-radius: 1rem;
    background: var(--mauve-50);
    border: 1px solid var(--rule);
}

.hero-art img {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 60rem) {
    .hero {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }

    .hero-art {
        display: block;
    }
}

/*
| The three ways of working, as tabs
|
| Radio inputs and labels, no JavaScript. The radios sit before the panels so a
| :checked sibling selector can reach them, and they are moved off-screen rather
| than display:none so they stay focusable and the tabs remain keyboard
| operable. With the stylesheet missing this degrades to three radios and three
| stacked panels, which is still readable; a script-driven version would degrade
| to nothing.
*/

.ways {
    margin-top: 2.5rem;
}

.ways-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.ways-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}

.ways-tab {
    padding: 0.625rem 1.125rem;
    border: 1px solid var(--rule);
    border-radius: 2rem;
    background: var(--ground);
    color: var(--ink-muted);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
}

.ways-tab:hover {
    border-color: var(--rule-strong);
    color: var(--ink);
}

.way {
    display: none;
}

/* Each radio lights its own tab and shows its own panel. */
.ways-radio:nth-of-type(1):checked ~ .ways-tabs .ways-tab:nth-of-type(1),
.ways-radio:nth-of-type(2):checked ~ .ways-tabs .ways-tab:nth-of-type(2),
.ways-radio:nth-of-type(3):checked ~ .ways-tabs .ways-tab:nth-of-type(3) {
    background: var(--primary-700);
    border-color: var(--primary-700);
    color: #fff;
}

.ways-radio:nth-of-type(1):checked ~ .ways-panels .way:nth-of-type(1),
.ways-radio:nth-of-type(2):checked ~ .ways-panels .way:nth-of-type(2),
.ways-radio:nth-of-type(3):checked ~ .ways-panels .way:nth-of-type(3) {
    display: block;
}

/* Focus has to be visible on the label, since the input it belongs to is hidden. */
.ways-radio:focus-visible ~ .ways-tabs .ways-tab {
    outline: 2px solid var(--link);
    outline-offset: 2px;
}

.way-promise {
    margin: 0 0 1.5rem;
    font-size: 1.125rem;
    max-width: 44rem;
}

.way-grid {
    display: grid;
    gap: 2rem;
}

.way-steps {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.9375rem;
    color: var(--ink-muted);
}

.way-steps li {
    margin: 0 0 0.5rem;
}

.way-results {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    align-content: start;
}

.way-result {
    display: grid;
    gap: 0.125rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--rule);
    border-radius: 0.625rem;
    background: var(--ground-raised);
}

.way-plan {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.way-pages {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: 2.25rem;
    line-height: 1.05;
    /* --link, not --primary-700: the accent is only defined for the light
       theme, and these are the largest figures on the page. --link is the
       theme-aware one, lightened for dark and measured at 5.55:1 there. */
    color: var(--link);
}

/* The same slot, when a plan cannot reach this way of working. */
.way-pages-none {
    font-size: 1.125rem;
    line-height: 1.3;
    color: var(--ink-faint);
}

.way-unit {
    font-size: 0.9375rem;
    color: var(--ink-muted);
}

.way-note {
    margin: 1.75rem 0 0;
    color: var(--ink-muted);
    max-width: 44rem;
}

/* The three figures sit under the steps rather than beside them: they are the
   payoff of the list, and reading them alongside it made the eye choose. */
@media (min-width: 48rem) {
    .way-results {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}



@media print {
    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
        line-height: 1.5;
    }

    .bar,
    .foot,
    .skip,
    .actions,
    .warn {
        display: none;
    }

    .doc {
        max-width: none;
        padding: 0;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    /* Internal links print as paths; external ones print in full. */
    .doc a[href^="http"]::after {
        content: ' (' attr(href) ')';
        font-size: 9pt;
        word-break: break-all;
    }

    h1,
    h2,
    h3 {
        color: #000;
        break-after: avoid;
    }

    p,
    li {
        orphans: 3;
        widows: 3;
    }
}


/* ------------------------------------------------------------------------
 * The AI agents, as a numbered pipeline from domain to draft.
 * ---------------------------------------------------------------------- */

.pipeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem;
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
}

.pipeline-step {
    margin: 0;
}

.pipeline-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    height: 100%;
    padding: 1.5rem;
    border: 1px solid var(--rule);
    border-radius: 0.75rem;
    background: var(--ground-raised);
    text-decoration: none;
    color: var(--ink);
    transition: border-color 120ms, background-color 120ms;
}

.pipeline-card:hover {
    border-color: var(--rule-strong);
    background: var(--ground-sunken);
}

.pipeline-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ink);
    background: var(--ground-sunken);
    border: 1px solid var(--rule);
}

.pipeline-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: -0.005em;
    color: var(--ink);
}

.pipeline-desc {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ink-muted);
}

/* ------------------------------------------------------------------------
 * Footer: feature links in columns (Tools · AI · Company)
 * ---------------------------------------------------------------------- */

.foot-inner {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    /*
     * The wrap is inherited from the bar, which is a single row of items. Left
     * on a column, it stretches this container to a multiple of its own
     * content and drops several hundred pixels of dead space between the last
     * link and the rule above the copyright.
     */
    flex-wrap: nowrap;
    gap: 1.5rem;
    padding-top: 3rem;
    padding-bottom: 2rem;
}

.foot-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 2rem;
}

.foot-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
}

.foot-heading {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
}

.foot-col a {
    color: var(--ink-muted);
    text-decoration: none;
}

.foot-col a:hover {
    color: var(--ink);
}

.foot-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--rule);
    color: var(--ink-faint);
    font-size: 0.8125rem;
}