/*
 * app.css — wh.ax stylesheet
 *
 * Highway-signs for the web: clear signage, warm tones, GDS-flavoured
 * clarity without the bureaucratic sharpness. Mobile-first; one @media
 * block widens for larger screens.
 */

/* ── Tokens ───────────────────────────────────────────────── */

:root {
    /* Wayfinding palette — friendlier than literal road signs */
    --whax-ink:          #1B1F1A;   /* almost-black, slight green hint */
    --whax-ink-soft:     #4A5048;
    --whax-muted:        #6E7569;
    --whax-line:         #D6DAD2;
    --whax-line-soft:    #E8ECE3;

    --whax-paper:        #FAF8F3;   /* warm off-white background */
    --whax-card:         #FFFFFF;
    --whax-tint:         #F2EFE6;   /* tan/cream callout tint */

    /* Two-greens, from the official wh.ax mark.
     *   --whax-web : the underlying site / where the action actually happens.
     *                Used on actuators (the panel you press), primary buttons,
     *                domain references — anything that points at the substrate.
     *   --whax-wax : the wh.ax layer — the thin protocol of addresses and cards
     *                sitting over the web. Used on verb pills, route badges,
     *                trust marks, the brand stripe.
     */
    --whax-web:          #00703B;   /* dark green: underlying site / destination */
    --whax-web-dark:     #054A28;   /* deeper shade for shadows / hover */
    --whax-web-soft:     #E1EFE6;   /* pale wash for site references */

    --whax-wax:          #00C76A;   /* mint, working strength: the wh.ax layer */
    --whax-wax-bright:   #00FF87;   /* the brand mint, used as a stripe/accent */
    --whax-wax-soft:     #D5FBE6;   /* pale mint wash for verb pills, trust bg */
    --whax-wax-edge:     #00A85B;   /* border on light mint */

    /* --whax-meta : the third green. Used for meta-verbs that operate
     * on the wh.ax representation itself (not on the underlying site).
     * Examples: actions., qr., inspect., embed., claim.
     */
    --whax-meta:         #00A89A;   /* teal, working strength */
    --whax-meta-bright:  #2FE0CE;   /* brighter accent */
    --whax-meta-soft:    #D2F4F0;   /* pale teal wash */
    --whax-meta-edge:    #007F76;

    /* Legacy aliases (CSS still references --whax-sign in many places) */
    --whax-sign:         var(--whax-web);
    --whax-sign-dark:    var(--whax-web-dark);
    --whax-sign-soft:    var(--whax-web-soft);

    --whax-amber:        #C97A1A;   /* highlight (most-popular tag) */
    --whax-amber-soft:   #FCEFD8;

    /* --whax-slot : parameter / user-supplied content in an address.
     * Cobalt-blue family — universally reads as "data / variable"
     * (think query-string values, code literals) without warning baggage. */
    --whax-slot-bright:  #7AB7FF;   /* slot pill background */
    --whax-slot-edge:    #1B3F8C;   /* slot text */
    --whax-slot:         #3B82F6;   /* working blue */
    --whax-slot-soft:    #DEEBFD;

    --whax-link:         #1F5C8F;
    --whax-error:        #B4351C;
    --whax-error-soft:   #FBEAE6;
    --whax-ok:           #2A7A4F;

    --whax-focus:        #FFD93B;   /* friendly yellow keyboard ring */

    --whax-radius:       6px;
    --whax-radius-lg:    10px;

    --font-sans:         "Public Sans", system-ui, -apple-system, "Segoe UI",
                         Roboto, Helvetica, Arial, sans-serif;
    --font-mono:         "DM Mono", ui-monospace, SFMono-Regular, Menlo,
                         Consolas, monospace;
}

/* ── Reset + base ─────────────────────────────────────────── */

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

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

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 19px;
    line-height: 1.55;
    color: var(--whax-ink);
    background: var(--whax-paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--whax-link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

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

h1, h2, h3, h4 {
    font-family: var(--font-sans);
    color: var(--whax-ink);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 .6em;
}

h1 { font-size: 2.4rem; letter-spacing: -0.015em; }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.4em; }
li { margin-bottom: .3em; }

code, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.92em;
    background: var(--whax-tint);
    padding: 0.1em 0.35em;
    border-radius: 4px;
}

/* ── Container ────────────────────────────────────────────── */

.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 1.4rem 1.2rem 2.6rem;
}

.container--narrow { max-width: 640px; }

@media (min-width: 720px) {
    .container { padding: 2.2rem 1.6rem 3.2rem; }
}

/* ── Shell header ─────────────────────────────────────────── */

.shell-header {
    background: var(--whax-ink);
    color: #fff;
    border-bottom: 4px solid var(--whax-wax-bright);
}

.shell-header__inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0.85rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: #fff;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.brand-mark__shield {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    line-height: 0;
}

.brand-mark__shield img { display: block; width: 32px; height: 32px; }

.brand-mark__name {
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.brand-mark__sup {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    color: var(--whax-wax-bright);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.1rem 0.3rem;
    border: 1px solid rgba(0,255,135,0.4);
    border-radius: 99px;
    line-height: 1;
    margin-left: 0.3rem;
}

.shell-header__nav {
    margin-left: auto;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.shell-header__nav a {
    color: #fff;
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.92rem;
    font-weight: 500;
    opacity: 0.92;
    letter-spacing: -0.01em;
}

.shell-header__nav a:hover { opacity: 1; text-decoration: underline; }

/* ── URL echo (browser-bar-style protocol URL) ────────────── */

.url-echo {
    background: #fff;
    border-bottom: 1.5px solid var(--whax-line);
}

.url-echo__inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0.7rem 1.2rem;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--whax-muted);
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.url-echo__lock {
    display: inline-flex;
    align-items: center;
    color: var(--whax-web);
}

.url-echo__lock svg { width: 13px; height: 13px; display: block; }

.url-echo__scheme {
    color: var(--whax-muted);
    font-weight: 500;
}

/* The wh.ax host prefix in the address bar — muted like the scheme, so the
   full real URL reads https://wh.ax/@<domain>. */
.url-echo__waxhost {
    color: var(--whax-muted);
    font-weight: 600;
    text-decoration: none;
}
.url-echo__waxhost:hover { color: var(--whax-ink); text-decoration: none; }

.url-echo__bar {
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}

.kw-route {
    display: inline-flex;
    align-items: center;
    background: var(--whax-wax-bright);
    color: var(--whax-web-dark);
    padding: 0.25rem 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: -0.01em;
    border-radius: 4px;
}

.kw-route--meta {
    background: var(--whax-meta-bright);
    color: var(--whax-meta-edge);
}

.kw-route--self {
    background: var(--whax-ink);
    color: var(--whax-paper);
}

.kw-route--at {
    background: var(--whax-ink);
    color: var(--whax-paper);
    padding: 0.25rem 0.5rem;
    font-weight: 700;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.9rem;
}

.kw-route--host {
    background: var(--whax-web);
    color: #fff;
    padding: 0.25rem 0.65rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.9rem;
}

.url-echo__bar .dot {
    color: var(--whax-ink);
    font-weight: 800;
    padding: 0 0.3rem;
    font-family: var(--font-mono);
}

.url-echo__suffix { color: var(--whax-ink-soft); font-weight: 500; }

/* ── Footer ───────────────────────────────────────────────── */

/* Fixed one-line footer (expandable) — mirrors header colour, mint
 * stripe along the top so the wh.ax layer brackets the page. */
.shell-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 1000;
    background: var(--whax-ink);
    color: rgba(255,255,255,0.85);
    border-top: 3px solid var(--whax-wax-bright);
    font-size: 0.88rem;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.18);
}

.shell-footer__details {
    display: flex;
    flex-direction: column-reverse;
    max-height: 70vh;
    overflow: hidden;
}

.shell-footer__bar {
    list-style: none;
    cursor: pointer;
    padding: 0.7rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
    color: rgba(255,255,255,0.88);
    max-width: 1080px;
    margin: 0 auto;
}

.shell-footer__bar::-webkit-details-marker { display: none; }
.shell-footer__bar:focus-visible { outline-offset: -3px; }

.shell-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: #fff;
}

.shell-footer__brand img { width: 22px; height: 22px; }
.shell-footer__brand sup { font-size: 0.6em; }

.shell-footer__bar nav {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.2rem 0;
    padding-left: 0.9rem;
    border-left: 1px solid rgba(255,255,255,0.2);
}

.shell-footer__bar nav a {
    padding: 0 0.7rem;
    border-right: 1px solid rgba(255,255,255,0.12);
}

.shell-footer__bar nav a:last-child { border-right: 0; }

.shell-footer__bar nav a {
    color: rgba(255,255,255,0.82);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.shell-footer__bar nav a:hover { color: #fff; text-decoration: underline; }

.shell-footer__legal {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: rgba(255,255,255,0.62);
}

.shell-footer__legal strong { color: rgba(255,255,255,0.9); font-weight: 600; }

.shell-footer__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.4rem;
    color: rgba(255,255,255,0.62);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: -0.01em;
    user-select: none;
}

.shell-footer__toggle::after {
    content: "";
    width: 12px;
    height: 8px;
    background: url('/img/whax-chevron-mint-right.png') no-repeat center / contain;
    transform: rotate(-90deg);
    transition: transform 0.18s ease;
}

.shell-footer__details[open] .shell-footer__toggle::after { transform: rotate(90deg); }
.shell-footer__details[open] .shell-footer__toggle-open { display: none; }
.shell-footer__toggle-close { display: none; }
.shell-footer__details[open] .shell-footer__toggle-close { display: inline; }

.shell-footer__expanded {
    padding: 1.4rem 1.2rem 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.78);
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 720px) {
    .shell-footer__expanded { grid-template-columns: 1.3fr 1fr; align-items: start; }
}

.shell-footer__brand--lg {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: #fff;
    font-weight: 700;
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
}

.shell-footer__brand--lg img { width: 28px; height: 28px; }

.shell-footer__tagline { margin: 0; color: rgba(255,255,255,0.72); font-size: 0.96rem; max-width: 36em; }

.shell-footer__deep {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.shell-footer__deep dt { font-family: var(--font-mono); font-size: 0.74rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.08em; margin: 0; }
.shell-footer__deep dd { margin: 0.15rem 0 0.6rem; color: rgba(255,255,255,0.85); }
.shell-footer__deep dd a { color: rgba(255,255,255,0.85); }

/* Make the page fill the viewport so the footer always reads as
 * sitting at the very bottom, and reserve space for it. */
html, body { min-height: 100vh; }
body { padding-bottom: 52px; }

/* ── Hero ─────────────────────────────────────────────────── */

.hero { padding: 1.2rem 0 0.6rem; }
.hero h1 { margin-bottom: 0.6rem; }
.hero .lede {
    font-size: 1.15rem;
    color: var(--whax-ink-soft);
    margin-bottom: 1.4rem;
    max-width: 36em;
}

.hero--center { text-align: center; }
.hero--center .lede { margin-left: auto; margin-right: auto; }

/* ── Discover wayfinder ───────────────────────────────────── */

.wayfinder {
    margin: 1.6rem 0 2rem;
    max-width: 540px;
}

.wayfinder__label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.6rem;
    color: var(--whax-ink);
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.wayfinder__row {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1.5px solid var(--whax-line);
    border-radius: var(--whax-radius-lg);
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(20,40,28,0.07);
    transition: box-shadow 0.14s ease, border-color 0.14s ease;
}

.wayfinder__row:focus-within {
    border-color: var(--whax-wax-edge);
    box-shadow: 0 0 0 4px var(--whax-wax-soft);
}

.wayfinder__input {
    flex: 1;
    border: 0;
    padding: 1.4rem 1.5rem;
    font-family: var(--font-sans);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--whax-ink);
    background: transparent;
    min-width: 0;
}

.wayfinder__input:focus { outline: none; }

.wayfinder__submit {
    border: 0;
    background: var(--whax-web);
    color: #fff;
    font-family: var(--font-mono);
    font-weight: 600;
    padding: 0 1.4rem;
    cursor: pointer;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    box-shadow: inset 0 -3px 0 var(--whax-web-dark);
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.wayfinder__submit:hover { background: var(--whax-web-dark); }

/* Chevron takes the prefix verb's colour. The wayfinder is the
 * `actions` meta-verb, so this chevron is teal. */
.wayfinder__submit::after {
    content: "";
    width: 14px;
    height: 20px;
    flex: none;
    background: var(--whax-meta-bright);
    -webkit-mask: url('/img/whax-chevron-mint-right.png') no-repeat center / contain;
            mask: url('/img/whax-chevron-mint-right.png') no-repeat center / contain;
}

/* ── Buttons ──────────────────────────────────────────────── */

.button {
    display: inline-block;
    background: var(--whax-sign);
    color: #fff;
    border: 0;
    padding: 1.15rem 1.6rem;
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--whax-radius);
    cursor: pointer;
    box-shadow: inset 0 -3px 0 var(--whax-sign-dark);
    transition: background 0.12s ease;
    letter-spacing: -0.01em;
}

.button:hover { background: var(--whax-sign-dark); text-decoration: none; }

.button--lg { padding: 1.35rem 1.9rem; font-size: 1.2rem; }

.button--ghost {
    background: #fff;
    color: var(--whax-ink);
    border: 2px solid var(--whax-ink);
    box-shadow: none;
    padding: 0.6rem 1rem;
}

.button--ghost:hover { background: var(--whax-tint); }

.button--on-dark {
    background: #fff;
    color: var(--whax-sign-dark);
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.18);
}

.button--on-dark:hover { background: var(--whax-paper); }

/* ── Forms ────────────────────────────────────────────────── */

.form-card {
    background: var(--whax-card);
    border: 1.5px solid var(--whax-ink);
    border-radius: var(--whax-radius-lg);
    padding: 2rem 1.8rem;
    margin: 1.4rem 0;
    box-shadow: 0 3px 0 var(--whax-ink), 0 8px 22px rgba(20,40,28,0.06);
}

.form-card h1, .form-card h2 { margin-top: 0; }

.field { margin-bottom: 1.6rem; }
.field:last-child { margin-bottom: 0; }

.field__label {
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.45rem;
    color: var(--whax-ink);
    letter-spacing: -0.01em;
}

.field__hint {
    display: block;
    color: var(--whax-muted);
    font-size: 0.95rem;
    margin-bottom: 0.55rem;
    line-height: 1.5;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="url"],
.field input[type="password"],
.field textarea,
.field select,
input[type="text"], input[type="email"], input[type="url"],
input[type="password"], input[type="search"], textarea, select {
    width: 100%;
    padding: 1.25rem 1.2rem;
    font-family: var(--font-sans);
    /* The user's action comes first: data entry is large and chunky. */
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--whax-ink);
    background: #fff;
    border: 2.5px solid var(--whax-ink);
    border-radius: var(--whax-radius);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

::placeholder { font-weight: 500; opacity: 0.55; }

.field input:hover, .field textarea:hover, .field select:hover {
    border-color: var(--whax-web);
}

.field input:focus, .field textarea:focus, .field select:focus,
input:focus, textarea:focus, select:focus {
    border-color: var(--whax-web);
    box-shadow: 0 0 0 4px var(--whax-wax-soft);
    outline: none;
}

textarea { min-height: 6.5rem; resize: vertical; }

.form-error {
    color: var(--whax-error);
    background: var(--whax-error-soft);
    padding: 0.7rem 0.9rem;
    border-left: 4px solid var(--whax-error);
    border-radius: var(--whax-radius);
    margin: 0.8rem 0;
}

.flash-success {
    color: var(--whax-sign-dark);
    background: var(--whax-sign-soft);
    padding: 0.7rem 0.9rem;
    border-left: 4px solid var(--whax-sign);
    border-radius: var(--whax-radius);
    margin: 0.8rem 0;
}

/* ── Action sign (the highway-sign panel) ─────────────────── */

.action-sign {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--whax-sign-dark);
    color: #fff;
    text-decoration: none;
    padding: 1.4rem 1.4rem;
    border-radius: var(--whax-radius-lg);
    box-shadow: 0 6px 0 var(--whax-ink), 0 12px 20px rgba(20,40,28,0.18);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    margin: 1.4rem 0 2rem;
}

.action-sign:hover {
    background: #194D31;
    transform: translateY(-2px);
    box-shadow: 0 8px 0 var(--whax-ink), 0 14px 24px rgba(20,40,28,0.22);
    text-decoration: none;
}

/* Actuation moment: panel sinks and the keyword flashes mint to
 * show wh.ax is firing the underlying action. */
.action-sign:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--whax-ink), 0 4px 10px rgba(20,40,28,0.18);
    background: var(--whax-web-dark);
}

.action-sign:active .action-sign__keyword {
    color: var(--whax-wax-bright);
}

.action-sign__favicon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #fff;
    padding: 5px;
    box-sizing: border-box;
    box-shadow: 0 2px 0 var(--whax-ink);
}

.action-sign__favicon img { display: block; width: 100%; height: 100%; object-fit: contain; }

.action-sign__body { flex: 1; min-width: 0; }

.action-sign__keyword {
    display: block;
    font-weight: 800;
    font-size: 1.75rem;
    letter-spacing: -0.015em;
    line-height: 1.1;
}

.action-sign__address {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.92rem;
    color: rgba(255,255,255,0.78);
    margin-top: 0.25rem;
    word-break: break-word;
}

.action-sign__arrow {
    flex: none;
    width: 32px;
    height: 50px;
    background: var(--whax-wax-bright);
    -webkit-mask: url('/img/whax-chevron-mint-right.png') no-repeat center / contain;
            mask: url('/img/whax-chevron-mint-right.png') no-repeat center / contain;
}

/* Meta cards: teal chevron on the actuator. */
.action-card--meta .action-sign__arrow { background: var(--whax-meta-bright); }

/* Cross-document view transitions — when a thumb card is clicked,
 * the browser morphs it into the full detail card (same
 * view-transition-name on both) for a "zoom into the card" feel. */
@view-transition { navigation: auto; }

::view-transition-group(*) { animation-duration: 0.36s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }

/* .action-row / .member-row carry assertion-target text as a direct
 * text child so Mojo::DOM->text() can read it. We hide that marker
 * visually with font-size:0 on the wrapper and reset on children. */
.action-row, .member-row {
    font-size: 0;
    line-height: 0;
    color: transparent;
}
.action-row > *, .member-row > * {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--whax-ink);
}

/* ── ActionCard: shareable, trusted, useful ─────────────────── *
 *
 * A wh.ax ActionCard is a self-contained, droppable, trusted unit.
 * Two variants:
 *   .action-card--thumb : pack grid / embed thumbnail
 *   .action-card--full  : the canonical /a/<addr> page
 *
 * Every card carries: address, verb, title, purpose, the actuator,
 * trust signal (official / proposed), and meta-actions.
 */

.action-grid {
    list-style: none;
    margin: 1.4rem 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 700px) {
    .action-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1020px) {
    .action-grid { grid-template-columns: repeat(3, 1fr); }
}

.action-card {
    position: relative;
    background: #fff;
    border: 1.5px solid var(--whax-ink);
    border-radius: var(--whax-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 3px 0 var(--whax-ink), 0 8px 20px rgba(20,40,28,0.06);
    transition: transform 0.14s ease, box-shadow 0.14s ease;
    text-decoration: none;
    color: inherit;
}

a.action-card { cursor: pointer; }

/* Hover lifts the card and reveals the mint wh.ax-layer stripe. */
a.action-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 var(--whax-ink), 0 12px 24px rgba(20,40,28,0.1);
    text-decoration: none;
}

/* The verb keyword — the action's address segment, sitting quietly above
 * the title. Mint for actions, teal for meta-verbs. The host is page
 * context (URL bar + heading), so it is NOT repeated on the card. */
.action-card__verb {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--whax-web-dark);
    background: var(--whax-wax-soft);
    padding: 0.16rem 0.5rem;
    border-radius: 5px;
    margin-bottom: 0.1rem;
}
.action-card--meta .action-card__verb {
    color: var(--whax-meta-edge);
    background: var(--whax-meta-soft);
}

/* The actuator: "open" + mint chevron, bottom-right. Teal on meta cards.
 * The chevron uses CSS mask so the one PNG can be recoloured. */
.action-card__open {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--whax-muted);
    letter-spacing: -0.01em;
}
.action-card__chev {
    width: 14px;
    height: 18px;
    background: var(--whax-wax-bright);
    -webkit-mask: url('/img/whax-chevron-mint-right.png') no-repeat center / contain;
            mask: url('/img/whax-chevron-mint-right.png') no-repeat center / contain;
    transition: transform 0.14s ease;
}
.action-card--meta .action-card__chev { background: var(--whax-meta-bright); }
a.action-card:hover .action-card__chev { transform: translateX(3px); }

a.action-card:active {
    transform: translateY(0);
    box-shadow: 0 2px 0 var(--whax-ink), 0 4px 10px rgba(20,40,28,0.08);
}

/* Protocol bar at the top of every card — pills are free-standing
 * with dot separators rendered between them. */
.action-card__addr {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--whax-paper);
    border-bottom: 1.5px solid var(--whax-line);
    font-family: var(--font-mono);
    font-size: 0.88rem;
    padding: 0.55rem 0.7rem;
}

.action-card__addr .verb {
    background: var(--whax-wax-bright);
    color: var(--whax-web-dark);
    font-weight: 800;
    padding: 0.25rem 0.6rem;
    display: inline-flex;
    align-items: center;
    letter-spacing: -0.01em;
    border-radius: 4px;
}

.action-card--meta .action-card__addr .verb {
    background: var(--whax-meta-bright);
    color: var(--whax-meta-edge);
}

.action-card__addr .at {
    background: var(--whax-ink);
    color: var(--whax-paper);
    padding: 0.25rem 0.55rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    letter-spacing: -0.01em;
    border-radius: 4px;
}

.action-card__addr .host {
    background: var(--whax-web);
    color: #fff;
    padding: 0.25rem 0.6rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.01em;
    border-radius: 4px;
}

/* Inline dot/dash separators between pills (literal text nodes in HTML
 * so they sit OUTSIDE the pill backgrounds). */
.action-card__addr .dot,
.action-card__addr .dash {
    color: var(--whax-ink);
    font-weight: 800;
    padding: 0 0.3rem;
    display: inline-flex;
    align-items: center;
}

.action-card__addr .rest {
    padding: 0.25rem 0.3rem;
    color: var(--whax-ink-soft);
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.action-card__addr .trust {
    margin-left: auto;
    padding: 0.22rem 0.55rem;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--whax-web-dark);
    background: var(--whax-wax-soft);
    border: 1px solid var(--whax-wax-edge);
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.action-card__addr .trust--proposed {
    color: var(--whax-amber);
    background: var(--whax-amber-soft);
    border-color: var(--whax-amber);
}

/* Provenance mark: AUTHORSHIP, not endorsement. 'official' says the action
 * set was published by someone who proved DNS control of the domain; it does
 * NOT mean wh.ax checked the action is safe. Two distinct states reuse the
 * mint (verified) and neutral/muted (auto-discovered) token families. */
.provenance {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.6rem;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 99px;
    border: 1px solid transparent;
}

.provenance--official {
    color: var(--whax-web-dark);
    background: var(--whax-wax-soft);
    border-color: var(--whax-wax-edge);
}

.provenance--unverified {
    color: var(--whax-muted);
    background: var(--whax-tint);
    border-color: var(--whax-line);
}

.action-card__provenance {
    padding: 0 1.2rem;
    margin-top: 0.7rem;
}

.hero__provenance {
    margin: 0.5rem 0 0;
}

/* Owner-declared qualifier: keeps risk/data from reading as a wh.ax rating. */
.owner-declared {
    font-size: 0.74rem;
    color: var(--whax-muted);
    font-style: italic;
    margin-left: 0.4rem;
}

/* Same data available to agents - link to the machine feed. Unobtrusive. */
.agent-feed-line {
    margin-top: 0.9rem;
    font-size: 0.82rem;
    color: var(--whax-muted);
}

.agent-feed {
    color: var(--whax-link);
    text-decoration: none;
    border-bottom: 1px dotted var(--whax-link);
}

.agent-feed:hover {
    border-bottom-style: solid;
}

.agent-feed__note {
    margin-left: 0.4rem;
    color: var(--whax-muted);
}

/* Front door into the AI report from a domain's action pack. */
.report-nudge {
    margin-top: 0.55rem;
    font-size: 0.82rem;
    color: var(--whax-muted);
}
.report-nudge__link {
    color: var(--whax-meta-edge);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dotted var(--whax-meta-edge);
}
.report-nudge__link:hover { border-bottom-style: solid; }
.report-nudge__note { margin-left: 0.4rem; color: var(--whax-muted); }

.action-card__body {
    padding: 1.1rem 1.2rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}

.action-card__title {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}

.action-card__purpose {
    color: var(--whax-ink-soft);
    font-size: 0.98rem;
    line-height: 1.45;
    margin: 0;
    flex: 1;
}

.action-card__do {
    margin-top: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--whax-sign);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    padding: 0.55rem 0.7rem 0.55rem 0.55rem;
    border-radius: var(--whax-radius);
    box-shadow: inset 0 -3px 0 var(--whax-sign-dark);
    align-self: flex-start;
}

.action-card__favicon {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: #fff;
    padding: 2px;
    box-sizing: border-box;
}

.action-card__favicon img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Reusable favicon tile: a site's favicon shown prominently in a rounded
   white tile. Used in the AI-report masthead and the @domain hero. */
.site-favicon {
    flex: none;
    display: inline-flex;
    width: 44px;
    height: 44px;
    border-radius: var(--whax-radius-lg);
    background: var(--whax-card);
    padding: 6px;
    box-sizing: border-box;
    border: 1px solid var(--whax-line);
    box-shadow: 0 1px 3px rgba(27, 31, 26, 0.12);
}

.site-favicon img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* AI report masthead: favicon tile + domain kicker above the headline. */
.report__site {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1rem;
}

.report__site-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--whax-ink-soft);
    word-break: break-all;
}

/* @domain hero: favicon tile sitting alongside the heading. */
.hero__site {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hero__site h1 { margin: 0; }

.hero__site--center { justify-content: center; }

.action-card__do:hover { background: var(--whax-sign-dark); text-decoration: none; }

.action-card__do svg { display: none; }

.action-card__do::after {
    content: "";
    width: 14px;
    height: 20px;
    background: url('/img/whax-chevron-mint-right.png') no-repeat center / contain;
    flex: none;
    margin-left: 0.3rem;
}

/* Full variant — the canonical /a/ page card */

.action-card--full .action-card__addr {
    font-size: 1rem;
    border-bottom-width: 1.5px;
}

.action-card--full .action-card__addr .verb {
    padding: 0.55rem 0.95rem;
    font-size: 1.05rem;
}

.action-card--full .action-card__body {
    padding: 1.6rem 1.6rem 1.7rem;
    gap: 0.7rem;
}

.action-card--full .action-card__title {
    font-size: 2rem;
    letter-spacing: -0.015em;
}

.action-card--full .action-card__purpose {
    font-size: 1.15rem;
    line-height: 1.5;
}

/* ── Card meta-actions ─────────────────────────────────────── *
 * Share. Copy. Embed. View source. Edit (when allowed).
 */

.meta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.85rem 1.6rem 1.1rem;
    border-top: 1px dashed var(--whax-line);
    background: var(--whax-paper);
}

.meta-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #fff;
    border: 1.5px solid var(--whax-line);
    color: var(--whax-ink-soft);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 0.7rem;
    border-radius: 99px;
    text-decoration: none;
    cursor: pointer;
    letter-spacing: -0.01em;
}

.meta-action:hover {
    background: var(--whax-tint);
    color: var(--whax-ink);
    border-color: var(--whax-ink);
    text-decoration: none;
}

.meta-action svg { width: 14px; height: 14px; flex: none; }

/* ── Pack header / unclaimed banner ───────────────────────── */

.pack-header { margin: 1rem 0 1.4rem; }
.pack-header h1 { margin-bottom: 0.4rem; }

.callout {
    background: var(--whax-tint);
    border-left: 4px solid var(--whax-sign);
    padding: 0.85rem 1rem;
    border-radius: var(--whax-radius);
    margin: 1rem 0 1.4rem;
    font-size: 0.97rem;
    color: var(--whax-ink-soft);
}

.callout strong { color: var(--whax-ink); }

.callout--demo {
    background: #F1F8F3;
    border-left-color: var(--whax-web, #00A85B);
    margin: 1.6rem 0;
    font-size: 1rem;
}

.cta-claim {
    display: inline-block;
    color: var(--whax-sign-dark);
    font-weight: 600;
    text-decoration: underline;
}

/* ── Empty / section helpers ──────────────────────────────── */

.empty {
    background: var(--whax-tint);
    border-radius: var(--whax-radius);
    padding: 1.4rem;
    color: var(--whax-ink-soft);
    text-align: center;
}

.section-title {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 1.6rem 0 0.8rem;
}

.section-title h2 { margin: 0; }
.section-title .count {
    background: var(--whax-tint);
    color: var(--whax-ink-soft);
    border-radius: 99px;
    padding: 0.05rem 0.55rem;
    font-size: 0.88rem;
    font-weight: 600;
}

/* ── Pricing tiers ────────────────────────────────────────── */

.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.6rem 0;
}

@media (min-width: 800px) {
    .pricing-grid { grid-template-columns: repeat(3, 1fr); }
}

.tier {
    background: #fff;
    border: 1px solid var(--whax-line);
    border-radius: var(--whax-radius-lg);
    padding: 1.4rem 1.3rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* hide the bare "GBP 9 per month per domain" marker text used by tests */
    font-size: 0;
    line-height: 0;
}

.tier > * { font-size: 1rem; line-height: normal; }
.tier > h2 { font-size: 1.4rem; line-height: 1.2; }

.tier h2 { margin: 0; }

.tier__price {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--whax-ink);
    margin: 0.2rem 0 0.1rem;
    line-height: 1.05;
}

.tier__price .unit {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--whax-muted);
    margin-top: 0.2rem;
}

.tier__audience {
    color: var(--whax-ink-soft);
    font-size: 0.97rem;
    margin: 0 0 0.4rem;
}

.tier ul {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 1rem;
}

.tier li {
    padding-left: 1.4rem;
    position: relative;
    margin-bottom: 0.4rem;
    font-size: 0.97rem;
}

.tier li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--whax-sign);
    font-weight: 800;
}

.tier--popular {
    background: var(--whax-sign);
    color: #fff;
    border-color: var(--whax-sign-dark);
    position: relative;
    box-shadow: 0 6px 0 var(--whax-sign-dark);
}

.tier--popular h2,
.tier--popular .tier__price { color: #fff; }
.tier--popular .tier__price .unit,
.tier--popular .tier__audience { color: rgba(255,255,255,0.86); }
.tier--popular li::before { color: #FFD93B; }

.tier--popular::after {
    content: "Most popular";
    position: absolute;
    top: -12px;
    right: 14px;
    background: var(--whax-amber);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    line-height: 1.2;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 99px;
    letter-spacing: 0.02em;
}

@media (min-width: 1000px) {
    .pricing-grid--four { grid-template-columns: repeat(4, 1fr); }
}

.tier--later {
    border-style: dashed;
    background: var(--whax-surface, #fafafa);
}

.tier--later .tier__price { color: var(--whax-muted); font-size: 1.4rem; }

.button--disabled {
    opacity: 0.55;
    pointer-events: none;
    cursor: default;
}

.pricing-note {
    margin: 1.4rem 0 0;
    padding: 0.9rem 1.1rem;
    border-left: 3px solid var(--whax-sign);
    background: var(--whax-surface, #fafafa);
    border-radius: var(--whax-radius);
    font-size: 0.97rem;
    color: var(--whax-ink-soft);
}

/* Two-tier grid: constrain to two centred columns on desktop. */
@media (min-width: 800px) {
    .pricing-grid--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }
}

.pricing-control {
    font-weight: 600;
    color: var(--whax-ink);
    margin-top: 0.6rem;
}

.tier__plus {
    font-weight: 700;
    color: var(--whax-ink);
    margin: 0.3rem 0 0;
}
.tier--popular .tier__plus { color: #fff; }

/* Domain-page tier banner: shows the Claim cap / Owner status to the owner. */
.tier-banner {
    margin: 0 0 1.2rem;
    padding: 0.8rem 1.1rem;
    border-radius: var(--whax-radius);
    border-left: 3px solid var(--whax-amber, #E0A800);
    background: var(--whax-surface, #fafafa);
    font-size: 0.97rem;
    color: var(--whax-ink-soft);
}
.tier-banner--owner { border-left-color: var(--whax-sign); }

/* Analytics dashboard: headline stat tiles. */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    margin: 0.5rem 0 2rem;
}
@media (min-width: 640px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat {
    background: #fff;
    border: 1px solid var(--whax-line);
    border-radius: var(--whax-radius-lg);
    padding: 1rem 1.1rem;
    text-align: center;
}
.stat__n { display: block; font-size: 1.8rem; font-weight: 800; color: var(--whax-ink); line-height: 1.1; }
.stat__l { display: block; font-size: 0.82rem; color: var(--whax-ink-soft); margin-top: 0.25rem; }

/* Action-page search box. */
.action-search {
    display: flex;
    gap: 0.6rem;
    margin: 0 0 1.4rem;
    max-width: 30rem;
}
.action-search__input {
    flex: 1 1 auto;
    padding: 1rem 1.1rem;
    border: 1px solid var(--whax-line);
    border-radius: var(--whax-radius);
    font-size: 1.35rem;
    font-weight: 500;
}

/* Analytics: monitoring alerts banner (broken targets). */
.alerts-banner {
    margin: 0 0 1.6rem;
    padding: 1rem 1.2rem;
    border-radius: var(--whax-radius);
    border-left: 3px solid var(--whax-amber, #E0A800);
    background: #FFF7E6;
    color: var(--whax-ink);
}
.alerts-banner ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.alerts-banner li { margin-bottom: 0.25rem; font-size: 0.95rem; }

/* "Can't find what you need?" intent capture on the action page. */
.intent-capture {
    margin: 2.4rem auto 0;
    max-width: 44rem;
    padding: 1.3rem 1.4rem;
    border: 1px solid var(--whax-line);
    border-radius: var(--whax-radius-lg);
    background: var(--whax-surface, #fafafa);
}
.intent-capture h2 { margin: 0 0 0.3rem; font-size: 1.2rem; }
.intent-capture p { margin: 0 0 0.9rem; color: var(--whax-ink-soft); }
.intent-capture__row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.intent-capture__input {
    flex: 1 1 16rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--whax-line);
    border-radius: var(--whax-radius);
    font-size: 1.35rem;
    font-weight: 500;
}

/* ── Action address (the wh.ax protocol) ──────────────────────
 *
 * The address IS the action. Two equivalent forms:
 *   call.at.honeywillow.com           (target's own subdomain)
 *   call.wh.ax/at.honeywillow.com     (wh.ax path form)
 *
 * The verb (first label) is the act. The rest locates it.
 */

/* Standalone pills with visible '.' and '-' separators.
 * No container border — each pill carries its own corners. Auto-dots
 * are injected between pills (verb→at, at→host) so the protocol
 * punctuation reads. Composite verbs (qr-call, find-shirt) use an
 * explicit .addr__sep element for the dash. */
.addr {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 1rem;
    line-height: 1.2;
    background: transparent;
    vertical-align: middle;
    gap: 0;
}

/* Visible '.' and '-' separators between pills. Rendered as their own
 * inline elements so each dot/dash sits OUTSIDE the pill backgrounds. */
.addr__dot, .addr__dash {
    color: var(--whax-ink);
    font-weight: 800;
    padding: 0 0.35rem;
    display: inline-flex;
    align-items: center;
}

.addr__verb {
    background: var(--whax-wax-bright);
    color: var(--whax-web-dark);
    padding: 0.4rem 0.7rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    border-radius: var(--whax-radius);
}

.addr--meta .addr__verb,
.addr__verb--meta {
    background: var(--whax-meta-bright);
    color: var(--whax-meta-edge);
}

.addr--self .addr__verb,
.addr__verb--self {
    background: var(--whax-ink);
    color: var(--whax-paper);
}

/* Protocol keyword 'at' — neutral ink pill */
.addr__at {
    background: var(--whax-ink);
    color: var(--whax-paper);
    padding: 0.4rem 0.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    border-radius: var(--whax-radius);
}

/* Host pill — the underlying site */
.addr__host {
    background: var(--whax-web);
    color: #fff;
    padding: 0.4rem 0.7rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    border-radius: var(--whax-radius);
}

.addr--lg .addr__verb { padding: 0.55rem 0.95rem; }
.addr--lg .addr__at   { padding: 0.55rem 0.7rem; }
.addr--lg .addr__host { padding: 0.55rem 0.9rem; }
.addr--xl .addr__verb { padding: 0.7rem 1.1rem; font-size: 1.5rem; }
.addr--xl .addr__at   { padding: 0.7rem 0.85rem; font-size: 1.3rem; }
.addr--xl .addr__host { padding: 0.7rem 1.05rem; font-size: 1.3rem; }

/* Parameterised slot — cobalt blue, user-supplied content. */
.addr__slot {
    background: var(--whax-slot-bright);
    color: var(--whax-slot-edge);
    padding: 0.4rem 0.65rem;
    font-weight: 700;
    border-radius: var(--whax-radius);
}

/* Explicit separator (dash between verbs within a label, or slash). */
.addr__sep {
    color: var(--whax-ink);
    font-weight: 800;
    padding: 0 0.35rem;
    display: inline-flex;
    align-items: center;
}

.addr--lg .addr__slot { padding: 0.55rem 0.8rem; }
.addr--xl .addr__slot { padding: 0.7rem 1rem; font-size: 1.35rem; }

.addr__rest {
    padding: 0.4rem 0.3rem;
    color: var(--whax-ink-soft);
    background: transparent;
}

.addr__rest strong { color: var(--whax-ink); font-weight: 700; }

.addr--lg { font-size: 1.15rem; }
.addr--xl { font-size: 1.4rem; font-weight: 600; }

.addr-pair {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.4rem 0 1.4rem;
}

.addr-pair__row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.addr-pair__label {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--whax-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    min-width: 5.2rem;
}

/* legacy alias - keep .address-bar working but route to .addr look */
.address-bar {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--whax-ink-soft);
    background: var(--whax-tint);
    padding: 0.45rem 0.7rem;
    border-radius: var(--whax-radius);
    display: inline-block;
    margin: 0 0 1rem;
}

.purpose {
    font-size: 1.1rem;
    color: var(--whax-ink-soft);
    line-height: 1.55;
}

.kw-pill {
    display: inline-block;
    background: var(--whax-sign-soft);
    color: var(--whax-sign-dark);
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 600;
}

.kw-pill--ok { background: var(--whax-sign); color: #fff; }

.action-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1.2rem;
    border-top: 1px solid var(--whax-line);
    margin-top: 1.8rem;
    padding-top: 1rem;
}

.action-meta dt { font-weight: 600; color: var(--whax-muted); margin: 0; }
.action-meta dd { margin: 0; }

.risk-level {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: capitalize;
}

.risk-level--safe   { background: var(--whax-sign-soft); color: var(--whax-sign-dark); }
.risk-level--risky  { background: var(--whax-amber-soft); color: var(--whax-amber); }

.muted { color: var(--whax-muted); }
.center { text-align: center; }

/* ── Owner share affordances (handle + per-action) ────────── */

.handle-block {
    margin-top: 1.8rem;
    padding: 1.4rem 1.5rem;
    background: var(--whax-tint);
    border: 1.5px solid var(--whax-ink);
    border-radius: var(--whax-radius-lg);
}

.handle-block__title { margin: 0 0 0.3rem; font-size: 1.15rem; }
.handle-block__lede  { margin: 0 0 1rem; color: var(--whax-ink-soft); font-size: 0.98rem; }

.handle-block__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem 1rem;
}

.handle-block__handle {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.15rem;
    word-break: break-all;
}

.action-shares { margin-top: 1.8rem; }
.action-shares__title { font-size: 1.1rem; margin: 0 0 0.9rem; }

.action-share {
    padding: 0.9rem 0;
    border-top: 1px solid var(--whax-line);
}

.action-share__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.9rem;
    margin-bottom: 0.6rem;
}

.action-share__verb {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--whax-ink);
    word-break: break-all;
}

.action-share__name { color: var(--whax-muted); font-size: 0.95rem; }

.action-share__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

[data-copy].is-copied { background: var(--whax-tint); }

/* ── Throbber (discovering) ───────────────────────────────── */

.throbber-wrap {
    text-align: center;
    margin: 2.4rem 0 1.4rem;
}

.throbber {
    width: 200px;
    height: 10px;
    margin: 0 auto 1rem;
    border-radius: 99px;
    background: var(--whax-tint);
    overflow: hidden;
    position: relative;
}

.throbber::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 40%;
    background: var(--whax-sign);
    border-radius: 99px;
    animation: throb 1.4s ease-in-out infinite;
}

@keyframes throb {
    0%   { left: -40%; }
    100% { left: 100%; }
}

.throbber-dots { font-family: var(--font-mono); color: var(--whax-muted); font-size: 0.92rem; }

.discover-status {
    background: #fff;
    border: 1px solid var(--whax-line);
    border-radius: var(--whax-radius-lg);
    padding: 1.1rem 1.2rem;
    text-align: left;
    margin: 1.4rem 0;
}

.discover-status h2 { font-size: 1.05rem; margin-bottom: 0.4rem; }

/* ── Tables ───────────────────────────────────────────────── */

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.95rem;
}

.data-table th, .data-table td {
    text-align: left;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--whax-line);
}

.data-table th {
    background: var(--whax-tint);
    color: var(--whax-ink-soft);
    font-weight: 700;
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.data-table tr:hover td { background: var(--whax-paper); }

/* ── Legal pages (terms, privacy) ─────────────────────────── */

.legal {
    max-width: 760px;
    margin: 0 auto;
}

.legal__lede {
    border-left: 6px solid var(--whax-wax-bright);
    background: var(--whax-wax-soft);
    padding: 1.2rem 1.4rem;
    border-radius: var(--whax-radius);
    margin: 0 0 2rem;
    font-size: 1.05rem;
    line-height: 1.55;
}

.legal__lede p:last-child { margin-bottom: 0; }
.legal__lede em { font-style: normal; color: var(--whax-ink-soft); font-size: 0.95rem; display: inline-block; margin-top: 0.4rem; }

.legal__toc {
    background: #fff;
    border: 1.5px solid var(--whax-ink);
    border-radius: var(--whax-radius-lg);
    padding: 1.1rem 1.4rem 1.2rem;
    margin: 0 0 2rem;
}

.legal__toc h3 {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--whax-muted);
    margin: 0 0 0.6rem;
    font-weight: 600;
}

.legal__toc ol {
    list-style: none;
    counter-reset: toc;
    padding: 0;
    margin: 0;
    columns: 1;
}

@media (min-width: 580px) {
    .legal__toc ol { columns: 2; column-gap: 1.6rem; }
}

.legal__toc li {
    counter-increment: toc;
    margin: 0.25rem 0;
    break-inside: avoid;
}

.legal__toc li::before {
    content: counter(toc) ".";
    font-family: var(--font-mono);
    color: var(--whax-web);
    font-weight: 700;
    margin-right: 0.5rem;
}

.legal__toc a {
    color: var(--whax-ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.legal__toc a:hover { border-bottom-color: var(--whax-web); }

.legal h2 {
    font-size: 1.35rem;
    margin: 2.4rem 0 0.8rem;
    padding-top: 0.6rem;
    border-top: 1.5px solid var(--whax-line);
    scroll-margin-top: 100px;
}

.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.6rem; }

.legal h2::before {
    content: "§";
    color: var(--whax-wax-edge);
    font-weight: 800;
    margin-right: 0.4rem;
}

.legal p { line-height: 1.65; }
.legal ul { line-height: 1.65; }

.legal__contact {
    background: var(--whax-tint);
    padding: 0.9rem 1.1rem;
    border-radius: var(--whax-radius);
    margin: 1rem 0;
    font-family: var(--font-mono);
    font-size: 0.95rem;
}

.legal__contact p { margin: 0.25rem 0; }

.legal__close {
    margin-top: 2.6rem;
    padding-top: 1.4rem;
    border-top: 3px double var(--whax-line);
    font-size: 0.95rem;
    color: var(--whax-ink-soft);
}

.legal__close strong { color: var(--whax-ink); }

/* ── Admin index cards ────────────────────────────────────── */

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin: 1.4rem 0;
}

.admin-card {
    background: #fff;
    border: 1px solid var(--whax-line);
    border-left: 4px solid var(--whax-sign);
    border-radius: var(--whax-radius);
    padding: 1rem 1.1rem;
    text-decoration: none;
    color: var(--whax-ink);
    display: block;
    transition: box-shadow 0.12s ease;
}

.admin-card:hover { box-shadow: 0 4px 12px rgba(20,40,28,0.08); text-decoration: none; }
.admin-card h3 { margin: 0 0 0.2rem; }
.admin-card p { color: var(--whax-muted); margin: 0; font-size: 0.93rem; }

/* ════════════════════════════════════════════════════════════════════
   Home — value-first landing. The hero IS the product: a live
   recreation of the wh.ax official-action surface on a customer site.
   Built on the existing two-greens grammar, the chevron actuator, and
   the chunky human-first wayfinder. Simple, clear, action-led.
   ════════════════════════════════════════════════════════════════════ */

.home { max-width: 1140px; margin: 0 auto; padding: 0 1.4rem; }

.home__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 3.2rem;
    align-items: center;
    padding: 2.6rem 0 3rem;
}

/* ── Left: the promise + the chunky wayfinder ───────────────────── */

.home__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--whax-web);
    margin: 0 0 1rem;
    text-transform: lowercase;
}
.home__eyebrow::before {
    content: "";
    display: inline-block;
    width: 1.4rem; height: 0.42rem;
    margin-right: 0.55rem;
    vertical-align: 0.12em;
    background: var(--whax-wax-bright);
    border-radius: 2px;
}

.home__promise {
    font-size: clamp(2.5rem, 5.4vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.032em;
    font-weight: 800;
    color: var(--whax-ink);
    margin: 0 0 1.2rem;
}
.home__promise em {
    font-style: normal;
    color: var(--whax-web);
    position: relative;
    white-space: nowrap;
}
.home__promise em::after {
    content: "";
    position: absolute;
    left: 0; right: -0.05em; bottom: 0.06em;
    height: 0.34em;
    background: var(--whax-wax-bright);
    z-index: -1;
    border-radius: 2px;
    transform: rotate(-0.6deg);
}
.home__amp { color: var(--whax-meta); font-weight: 700; }

.home__lede {
    font-size: 1.22rem;
    line-height: 1.55;
    color: var(--whax-ink-soft);
    max-width: 30ch;
    margin: 0 0 1.8rem;
}
.home__lede strong { color: var(--whax-ink); font-weight: 700; }

.home .wayfinder { margin: 0 0 1.5rem; max-width: 480px; }

.home__pillars {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1.3rem;
    padding: 0;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--whax-ink-soft);
}
.home__pillars li { display: flex; align-items: center; gap: 0.5rem; }
.home__pillar-dot {
    width: 0.72rem; height: 0.72rem; border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.06);
}
.home__pillar-dot--human    { background: var(--whax-ink); }
.home__pillar-dot--agent    { background: var(--whax-slot); }
.home__pillar-dot--verified { background: var(--whax-wax); }

/* ── Right: the stage — surface floating over a faux shop ────────── */

.home__stage { position: relative; min-height: 520px; }

.shop {
    position: absolute;
    inset: 1.4rem 2.6rem 1.4rem 0;
    background: var(--whax-card);
    border: 1px solid var(--whax-line);
    border-radius: var(--whax-radius-lg);
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(20,40,28,0.10);
    filter: saturate(0.82);
    opacity: 0.96;
}
.shop__bar {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--whax-line-soft);
    background: var(--whax-paper);
}
.shop__logo {
    font-weight: 800; font-size: 0.82rem; letter-spacing: 0.12em;
    color: var(--whax-ink);
}
.shop__nav { display: flex; gap: 0.7rem; margin-left: auto; }
.shop__nav i { width: 1.7rem; height: 0.34rem; border-radius: 2px; background: var(--whax-line); display: block; }
.shop__cart { width: 0.8rem; height: 0.8rem; border: 2px solid var(--whax-muted); border-radius: 2px; }
.shop__hero {
    height: 220px;
    background:
        radial-gradient(120% 90% at 80% 10%, var(--whax-web-soft), transparent 60%),
        linear-gradient(135deg, #EFE9DC, #E7E0CF);
    display: flex; align-items: center;
    padding: 0 1.6rem;
}
.shop__hero-copy { display: flex; flex-direction: column; gap: 0.7rem; }
.shop__h1 { width: 13rem; height: 1.05rem; border-radius: 3px; background: rgba(27,31,26,0.42); }
.shop__h1--short { width: 9rem; }
.shop__p  { width: 11rem; height: 0.6rem; border-radius: 3px; background: rgba(27,31,26,0.18); margin-top: 0.2rem; }
.shop__cta { width: 6.5rem; height: 1.9rem; border-radius: 3px; background: var(--whax-web-dark); margin-top: 0.6rem; }
.shop__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; padding: 1rem 1.1rem; }
.shop__tiles span {
    aspect-ratio: 1; border-radius: var(--whax-radius);
    background: linear-gradient(160deg, #EDE7DA, #E2DAC8);
    box-shadow: inset 0 0 0 1px var(--whax-line-soft);
}

/* The product — the official action surface. */
.surface {
    position: absolute;
    top: 0; right: 0;
    width: min(370px, 92%);
    background: var(--whax-card);
    border-radius: 14px;
    box-shadow:
        0 2px 0 rgba(5,74,40,0.04),
        0 26px 60px rgba(5,74,40,0.26),
        0 6px 18px rgba(20,40,28,0.14);
    overflow: hidden;
    z-index: 2;
    animation: surface-pop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes surface-pop {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

.surface__head {
    position: relative;
    background:
        radial-gradient(140% 120% at 100% 0%, #0A5E33, transparent 55%),
        var(--whax-web-dark);
    color: #fff;
    padding: 1.15rem 1.2rem 1.05rem;
}
.surface__x {
    position: absolute; top: 0.7rem; right: 0.7rem;
    width: 1.6rem; height: 1.6rem; line-height: 1;
    border: 0; background: transparent;
    color: rgba(255,255,255,0.6); font-size: 1.25rem; cursor: default;
}
.surface__eyebrow { margin: 0; font-size: 0.82rem; color: rgba(255,255,255,0.72); font-weight: 500; }
.surface__handle {
    margin: 0.05rem 0 0.45rem;
    font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em;
    font-family: var(--font-mono);
}
.surface__verified {
    margin: 0; display: flex; align-items: center; gap: 0.42rem;
    font-size: 0.92rem; color: rgba(255,255,255,0.85);
}
.surface__verified span { color: var(--whax-wax-bright); font-weight: 700; }
.surface__tick {
    width: 1.05rem; height: 1.05rem; color: var(--whax-wax-bright);
    stroke-dasharray: 26; stroke-dashoffset: 26;
    animation: tick-draw 0.5s 0.45s ease forwards;
}
@keyframes tick-draw { to { stroke-dashoffset: 0; } }

.surface__search {
    margin: 0.95rem 1rem 0.4rem;
    display: flex; align-items: center;
    border: 2px solid var(--whax-line);
    border-radius: 9px;
    padding: 0.85rem 0.95rem;
    color: var(--whax-muted);
    background: var(--whax-paper);
}
.surface__search-text { flex: 1; font-size: 1rem; }
.surface__search-icon { width: 1.15rem; height: 1.15rem; color: var(--whax-ink-soft); }

.surface__label {
    margin: 0.7rem 1.05rem 0.3rem;
    font-size: 0.82rem; font-weight: 700; color: var(--whax-ink);
    letter-spacing: 0.01em;
}

.surface__list { list-style: none; margin: 0; padding: 0.2rem 0.6rem 0.4rem; }
.surface__row {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.7rem 0.5rem;
    border-radius: 10px;
    animation: surface-rise 0.5s both;
}
.surface__row + .surface__row { border-top: 1px solid var(--whax-line-soft); }
.surface__row:nth-child(1) { animation-delay: 0.30s; }
.surface__row:nth-child(2) { animation-delay: 0.40s; }
.surface__row:nth-child(3) { animation-delay: 0.50s; }
.surface__row:nth-child(4) { animation-delay: 0.60s; }
@keyframes surface-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.surface__icon {
    flex: none;
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--whax-wax-soft);
    color: var(--whax-web);
}
.surface__icon svg { width: 1.35rem; height: 1.35rem; }

.surface__body { flex: 1; min-width: 0; }
.surface__title {
    display: block;
    font-size: 1.04rem; font-weight: 700; color: var(--whax-ink);
    letter-spacing: -0.01em; line-height: 1.2;
}
.surface__addr {
    display: block;
    font-family: var(--font-mono); font-size: 0.78rem;
    color: var(--whax-muted);
    margin: 0.15rem 0 0.1rem;
    word-break: break-all;
}
.surface__addr .v { color: var(--whax-web); font-weight: 600; }
.surface__addr .s { color: var(--whax-slot-edge); font-weight: 600; }
.surface__note { display: block; font-size: 0.8rem; color: var(--whax-ink-soft); }
.surface__note--safe    { color: var(--whax-ok); }
.surface__note--confirm { color: var(--whax-amber); }

/* The chevron "play the action" actuator — the action you take is the
 * big deal, so every row ends in the mint chevron on deep green. */
.surface__go {
    flex: none;
    width: 2.7rem; height: 2.7rem;
    border: 0; border-radius: 9px;
    background: var(--whax-web-dark);
    box-shadow: 0 3px 0 #03371E;
    cursor: pointer;
    position: relative;
    transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
}
.surface__go::after {
    content: "";
    position: absolute; inset: 0;
    margin: auto;
    width: 0.95rem; height: 1.5rem;
    background: var(--whax-wax-bright);
    -webkit-mask: url('/img/whax-chevron-mint-right.png') no-repeat center / contain;
            mask: url('/img/whax-chevron-mint-right.png') no-repeat center / contain;
}
.surface__go:hover { transform: translateY(-1px); box-shadow: 0 4px 0 #03371E; }
.surface__go:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 #03371E;
    background: var(--whax-web);
}

.surface__foot {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.85rem 1.1rem;
    border-top: 1px solid var(--whax-line-soft);
    font-size: 0.82rem; color: var(--whax-web);
    font-weight: 600;
    background: var(--whax-wax-soft);
}
.surface__shield { flex: none; width: 1.1rem; height: 1.1rem; }
.surface__attr {
    margin: 0; padding: 0.6rem 1.1rem;
    text-align: center;
    font-size: 0.78rem; color: var(--whax-muted);
    background: var(--whax-paper);
    border-top: 1px solid var(--whax-line-soft);
}
.surface__attr strong { color: var(--whax-ink); font-weight: 700; }

.home__stage-caption {
    position: absolute;
    left: 0; bottom: -0.3rem;
    font-family: var(--font-mono); font-size: 0.74rem;
    color: var(--whax-muted);
}

/* ── How it works — three clear steps ───────────────────────────── */

.home__how {
    border-top: 1px solid var(--whax-line);
    margin-top: 1.5rem;
    padding: 2.8rem 0 3.4rem;
}
.home__how-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -0.02em;
    margin: 0 0 1.8rem;
    color: var(--whax-ink);
}
.home__steps {
    list-style: none; margin: 0 0 2rem; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
}
.home__step {
    position: relative;
    padding: 1.5rem 1.4rem 1.4rem;
    background: var(--whax-card);
    border: 1px solid var(--whax-line);
    border-radius: var(--whax-radius-lg);
    box-shadow: 0 3px 0 var(--whax-line);
}
.home__step-n {
    display: grid; place-items: center;
    width: 2.1rem; height: 2.1rem; border-radius: 50%;
    background: var(--whax-web-dark); color: var(--whax-wax-bright);
    font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem;
    margin-bottom: 0.85rem;
}
.home__step h3 {
    margin: 0 0 0.4rem; font-size: 1.2rem; color: var(--whax-web);
    font-family: var(--font-mono); font-weight: 600; letter-spacing: -0.01em;
}
.home__step p { margin: 0; color: var(--whax-ink-soft); font-size: 0.98rem; line-height: 1.5; }
.home__step strong { color: var(--whax-ink); }

.home__how-foot { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin: 0; }
.home__how-link { font-family: var(--font-mono); font-size: 0.95rem; }

@media (prefers-reduced-motion: reduce) {
    .surface, .surface__row { animation: none; }
    .surface__tick { stroke-dashoffset: 0; animation: none; }
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 880px) {
    .home__hero { grid-template-columns: 1fr; gap: 2rem; }
    .home__stage { min-height: 0; }
    .shop { display: none; }
    .surface { position: static; width: 100%; max-width: 420px; margin: 0 auto; }
    .home__stage-caption { position: static; display: block; text-align: center; margin-top: 0.7rem; }
    .home__steps { grid-template-columns: 1fr; }
    .home__lede { max-width: none; }
}

/* ── About ──────────────────────────────────────────────────────── */

.about-section { margin: 2.4rem 0; }
.about-section h2 {
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    color: var(--whax-web);
    margin: 0 0 0.7rem;
}
.about-section p { font-size: 1.08rem; line-height: 1.6; color: var(--whax-ink-soft); margin: 0 0 0.9rem; }
.about-section p strong { color: var(--whax-ink); }
.about-section em { font-style: normal; color: var(--whax-web); font-weight: 600; }

.about-beliefs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.about-beliefs li {
    padding: 1rem 1.2rem;
    background: var(--whax-card);
    border: 1px solid var(--whax-line);
    border-left: 4px solid var(--whax-wax-edge);
    border-radius: var(--whax-radius);
    color: var(--whax-ink-soft);
    line-height: 1.5;
}
.about-beliefs strong { display: block; color: var(--whax-ink); margin-bottom: 0.15rem; }

.about-cta {
    display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
    margin: 2.6rem 0 1.4rem;
}
.about-cta__link { font-family: var(--font-mono); font-size: 0.95rem; }

.about-who { color: var(--whax-muted); font-size: 0.92rem; margin: 0 0 1rem; }
.about-who strong { color: var(--whax-ink-soft); }

/* ── Home (lean): URL-first, centered. The product demo lives on the
   result page, not here — owners just drop their URL in. ──────────── */

.home--lean { max-width: 720px; }

.home__hero-centered {
    text-align: center;
    padding: 3.6rem 0 3.2rem;
}

.home--lean .home__eyebrow { margin-bottom: 1.1rem; }

.home--lean .home__promise {
    font-size: clamp(2.2rem, 5.2vw, 3.5rem);
    line-height: 1.04;
    margin: 0 auto 1.1rem;
    max-width: 16ch;
}

.home--lean .home__lede {
    font-size: 1.18rem;
    max-width: 44ch;
    margin: 0 auto 2.1rem;
}

.home--lean .wayfinder { margin: 0 auto; max-width: 540px; }
.home--lean .wayfinder__label { text-align: center; }

.home__flow {
    list-style: none;
    margin: 2.2rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem 1.6rem;
    font-family: var(--font-mono);
    font-size: 0.88rem;
    color: var(--whax-ink-soft);
}
.home__flow li { display: flex; align-items: center; gap: 0.55rem; }
.home__flow-n {
    display: grid;
    place-items: center;
    width: 1.55rem; height: 1.55rem;
    border-radius: 50%;
    background: var(--whax-wax-soft);
    color: var(--whax-web);
    font-weight: 700;
    font-size: 0.82rem;
}

@media (max-width: 560px) {
    .home__flow { flex-direction: column; align-items: flex-start; gap: 0.7rem; max-width: 17rem; margin-left: auto; margin-right: auto; }
}

/* Secondary home path: preview the action surface. Subordinate to the
   report-led hero, set off by a hairline rule. */
.home__secondary {
    margin: 2.8rem auto 0;
    max-width: 540px;
    padding-top: 2rem;
    border-top: 1px solid var(--whax-line-soft);
}
.home__secondary-lead {
    margin: 0 0 1rem;
    font-size: 1rem;
    color: var(--whax-ink-soft);
}
.home__secondary-lead em { font-style: normal; font-weight: 600; color: var(--whax-ink); }

/* Ghost wayfinder: the secondary submit is outlined, not filled, so the
   primary report CTA stays dominant. */
.wayfinder__submit--ghost {
    background: transparent;
    color: var(--whax-web);
    box-shadow: inset 0 0 0 1.5px var(--whax-web);
}
.wayfinder__submit--ghost:hover { background: var(--whax-wax-soft); }

/* Home hero: example link, AI support line, trust line. */
.home__alt { margin: 1.1rem 0 0; font-size: 0.98rem; }
.home__ai-line {
    margin: 2.2rem auto 0;
    max-width: 46ch;
    font-size: 1rem;
    color: var(--whax-ink-soft);
}
.home__trust {
    margin: 0.8rem auto 0;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--whax-muted);
}

/* Home: how-it-works numbered steps. */
.how-section { max-width: 46rem; margin: 3.2rem auto 0; padding: 0 1.2rem; }
.how-steps { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.how-steps li {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 0.9rem 0;
    border-top: 1px solid var(--whax-line-soft);
}
.how-steps li:first-child { border-top: 0; }
.how-steps__n {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.9rem; height: 1.9rem;
    border-radius: 50%;
    background: var(--whax-wax-soft);
    color: var(--whax-web);
    font-weight: 700;
    font-size: 0.9rem;
}
.how-steps h3 { margin: 0 0 0.2rem; font-size: 1.08rem; }
.how-steps p { margin: 0; color: var(--whax-ink-soft); }

/* Home: closing CTA under the value grid. */
.benefits-cta {
    text-align: center;
    margin: 2.4rem 0 0;
    display: flex;
    gap: 1.2rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.benefits-cta__link { font-family: var(--font-mono); font-size: 0.95rem; }

/* ════════════════════════════════════════════════════════════════════
   Address format reference page. The colour grammar is the subject, so
   the addresses are the hero: mono, with tinted segments per token.
   ════════════════════════════════════════════════════════════════════ */

.afmt-section { margin: 2.4rem 0; }
.afmt-section h2 {
    font-size: 1.4rem; letter-spacing: -0.02em; color: var(--whax-ink);
    margin: 0 0 0.7rem;
}
.afmt-section p { font-size: 1.06rem; line-height: 1.6; color: var(--whax-ink-soft); margin: 0 0 0.9rem; }
.afmt-section em { font-style: normal; color: var(--whax-meta-edge); font-weight: 600; }

/* The address string — each section a solid colour pill, joined by muted
 * connective text (wh.ax/ and the slashes). The pills carry the grammar. */
.afmt-addr {
    display: inline-flex; flex-wrap: wrap; align-items: center;
    font-family: var(--font-mono); font-weight: 700;
    font-size: 1.05rem; line-height: 2.2; gap: 0.32rem;
    word-break: break-word;
}
.afmt-addr--lg { font-size: clamp(1.1rem, 3.5vw, 1.65rem); gap: 0.4rem; }
.afmt-prefix, .afmt-sep { color: var(--whax-muted); font-weight: 600; }
.afmt-handle, .afmt-verb, .afmt-slot, .afmt-meta {
    padding: 0.24em 0.62em; border-radius: 7px; white-space: nowrap;
}
.afmt-handle { background: var(--whax-web);         color: #fff; }
.afmt-verb   { background: var(--whax-wax-bright);  color: var(--whax-web-dark); }
.afmt-slot   { background: var(--whax-slot-bright); color: var(--whax-slot-edge); }
.afmt-meta   { background: var(--whax-meta-bright); color: var(--whax-meta-edge); }

/* Featured hero address with captions. */
.afmt-feature {
    margin: 2rem 0 2.6rem; padding: 2.2rem 1.4rem;
    background: var(--whax-card);
    border: 1px solid var(--whax-line);
    border-radius: var(--whax-radius-lg);
    box-shadow: 0 3px 0 var(--whax-line);
    text-align: center;
}
.afmt-feature__caps {
    display: flex; gap: 1.4rem; justify-content: center; flex-wrap: wrap;
    margin-top: 1rem; font-family: var(--font-mono); font-size: 0.8rem;
}
.afmt-cap { position: relative; padding-top: 0.7rem; color: var(--whax-muted); }
.afmt-cap::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 1px; height: 0.45rem; background: var(--whax-line);
}
.afmt-cap--handle { color: var(--whax-web); }
.afmt-cap--verb   { color: var(--whax-web-dark); }

/* Inline token chips used in prose — same pills as the address. */
.afmt-tok { font-family: var(--font-mono); font-size: 0.85em; font-weight: 700; padding: 0.12em 0.45em; border-radius: 6px; white-space: nowrap; }
.afmt-tok--handle { background: var(--whax-web);         color: #fff; }
.afmt-tok--verb   { background: var(--whax-wax-bright);  color: var(--whax-web-dark); }
.afmt-tok--slot   { background: var(--whax-slot-bright); color: var(--whax-slot-edge); }
.afmt-tok--meta   { background: var(--whax-meta-bright); color: var(--whax-meta-edge); }

.afmt-note { font-size: 0.96rem; color: var(--whax-muted); margin-top: 0.7rem; }

/* Colour key — each role shown as its actual pill, so the key reads as the
 * legend for the addresses above. */
.afmt-key { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.afmt-key li { display: flex; align-items: center; gap: 0.9rem; color: var(--whax-ink-soft); font-size: 1rem; line-height: 1.4; }
.afmt-key strong { color: var(--whax-ink); }
.afmt-key__pill { flex: none; min-width: 6rem; text-align: center; font-size: 0.82rem; }

/* The plan / roadmap. */
.afmt-plan { border-top: 1px solid var(--whax-line); padding-top: 2rem; }
.afmt-roadmap { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.afmt-roadmap li { display: flex; gap: 1rem; align-items: flex-start; }
.afmt-roadmap div { color: var(--whax-ink-soft); line-height: 1.55; }
.afmt-roadmap strong { color: var(--whax-ink); }
.afmt-when {
    flex: none; width: 4.2rem; text-align: center;
    font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--whax-web); background: var(--whax-wax-soft);
    border-radius: 999px; padding: 0.32rem 0; margin-top: 0.15rem;
}

.afmt-principles { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.afmt-principles li {
    padding: 0.9rem 1.1rem; background: var(--whax-card);
    border: 1px solid var(--whax-line); border-left: 4px solid var(--whax-wax-edge);
    border-radius: var(--whax-radius); color: var(--whax-ink-soft); line-height: 1.5;
}
.afmt-principles strong { color: var(--whax-ink); }
.afmt-outro { margin-top: 1.8rem; }

/* ── Home: "why add wh.ax?" benefit grid ────────────────────────── */

.benefits-section {
    max-width: 1080px;
    margin: 0 auto;
    padding: 1.5rem 1.4rem 4rem;
}

.benefits-header {
    text-align: center;
    max-width: 62ch;
    margin: 0 auto 2.2rem;
}
.benefits-header h2 {
    font-size: clamp(1.6rem, 3.4vw, 2.15rem);
    letter-spacing: -0.025em;
    color: var(--whax-ink);
    margin: 0 0 0.8rem;
}
.benefits-header p {
    font-size: 1.12rem;
    line-height: 1.55;
    color: var(--whax-ink-soft);
    margin: 0 auto;
    max-width: 58ch;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
}

.benefit-card {
    background: var(--whax-card);
    border: 1px solid var(--whax-line);
    border-radius: var(--whax-radius-lg);
    padding: 1.5rem 1.4rem 1.55rem;
    transition: box-shadow 0.14s ease, transform 0.14s ease, border-color 0.14s ease;
}
.benefit-card:hover {
    box-shadow: 0 8px 22px rgba(20,40,28,0.07);
    border-color: var(--whax-line-soft);
    transform: translateY(-2px);
}

.benefit-card__icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 9px;
    background: var(--whax-wax-soft);
    color: var(--whax-web-dark);
    margin-bottom: 1rem;
}
.benefit-card__icon svg { width: 1.4rem; height: 1.4rem; }

.benefit-card h3 {
    font-size: 1.1rem;
    letter-spacing: -0.01em;
    color: var(--whax-ink);
    margin: 0 0 0.4rem;
}
.benefit-card p {
    font-size: 0.97rem;
    line-height: 1.5;
    color: var(--whax-ink-soft);
    margin: 0;
}

@media (max-width: 860px) {
    .benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .benefits-grid { grid-template-columns: 1fr; }
    .benefits-section { padding-bottom: 3rem; }
}

/* Footer: Nige Ltd -> nigelhamilton.com link sits inline in the legal note. */
.shell-footer__nige { color: inherit; text-decoration: none; }
.shell-footer__nige:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Passkeys: sign-in button, settings list, and the roll-out nudge banner.
   All passkey UI is progressively enhanced (hidden until the JS confirms
   WebAuthn support), so these styles only ever apply on capable browsers.
   --------------------------------------------------------------------------- */

.button--sm {
    padding: 0.55rem 0.95rem;
    font-size: 0.95rem;
    box-shadow: inset 0 -2px 0 var(--whax-sign-dark);
}

.passkey-signin { width: 100%; }
.passkey-or {
    text-align: center;
    color: var(--whax-muted);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    margin: 1rem 0 1.2rem;
}
.form-note { color: var(--whax-muted); font-size: 0.95rem; margin-top: 0.8rem; }

.passkey-list { list-style: none; padding: 0; margin: 1.6rem 0 0; }
.passkey {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0;
    border-top: 1px solid var(--whax-line-soft);
}
.passkey__main { display: flex; flex-direction: column; gap: 0.2rem; }
.passkey__label { font-weight: 600; color: var(--whax-ink); }
.passkey__meta { color: var(--whax-muted); font-size: 0.88rem; }
.passkey-empty { color: var(--whax-muted); margin-top: 1.4rem; }

.passkey-nudge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    max-width: 70rem;
    margin: 1rem auto 0;
    padding: 0.8rem 1.1rem;
    background: var(--whax-tint);
    border: 1px solid var(--whax-line-soft);
    border-radius: var(--whax-radius);
}
.passkey-nudge__text { color: var(--whax-ink); font-weight: 500; }
.passkey-nudge__actions { display: flex; align-items: center; gap: 0.8rem; }
.passkey-nudge__dismiss {
    background: none;
    border: 0;
    color: var(--whax-muted);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: underline;
}
.passkey-nudge__dismiss:hover { color: var(--whax-ink); }