/* ============================================================================
   AIToolsay — request / contact / report page kit (.aitfm-*)
   ----------------------------------------------------------------------------
   ONE stylesheet for the three form pages: /contact-us, /report-issues and
   /request-tool. Each of them used to ship ~230 lines of inline <style> in its
   own view under its own prefix (.ezc, .ezr, .ezt) — three copies of the same
   tokens, three sets of hover rules, three sets of dark twins that had drifted
   apart. Worse, every one of those local token sets named its BLUE brand colour
   `--ezc-red` / `--ezr-red` / `--ezt-red` (#3680ED), which is the same trap the
   dashboard hit: the next person to "fix the red" changes the wrong thing.

   Loaded only on those three pages, via a slug-gated <link> in
   layouts/public.blade.php.

   Namespace: every selector starts `.aitfm`. These pages render INSIDE the
   layout's article card (#content-box > .card > .card-body), so the first block
   below neutralises that chrome — same technique the old per-page styles used,
   kept because it is the only thing that works from inside the slot.

   Colour comes from the global `--aits-*` tokens in custom.{dir}.css, so
   light/dark is inherited, not re-declared. Per-page accent arrives as
   `--acc`/`--acc2` on the root element, so one attribute recolours a page.

   Design rules, all three from bugs on this install:
     · NOTHING truncates — no line-clamp, no ellipsis, no fixed height on any
       box holding copy, and no `white-space: nowrap` on admin-entered strings.
     · Every hover rule sits in `@media (hover: hover)`. A tap latches :hover on
       touch, so an un-gated lift stays lifted.
     · Every colour is stated. Tabler's base sheet and `.card a{color:inherit}`
       rules upstream have made links colourless here before, and its bare
       `a:hover{text-decoration:underline}` (0,1,1) beats a component class —
       hence the explicit :hover selectors in the no-underline block.

   Direction-agnostic: logical properties throughout, one file for LTR + RTL.
   ========================================================================= */

/* ── Escape the article card ────────────────────────────────────────────────
   The layout wraps the slot in a Bootstrap card with its own background, border
   and padding. These pages are full-bleed designs and must not sit in a box
   inside a box. `:has()` keeps the reset scoped to pages that carry the kit. */
#content-box:has(.aitfm) .card,
#content-box:has(.aitfm) .card > .card-body { background: transparent !important; border: 0 !important; box-shadow: none !important; }
#content-box:has(.aitfm) .card { overflow: visible !important; }
#content-box:has(.aitfm) .card > .card-body { padding: 0 !important; }
#content-box:has(.aitfm) .card > .card-header { display: none !important; }

.aitfm {
    --aitfm-ease: cubic-bezier(.22, 1, .36, 1);
    --acc:  var(--aits-blue, #3680ED);
    --acc2: var(--aits-blue-light, #60A4F5);

    display: grid;
    gap: 22px;
    color: var(--aits-txt, #444);
    text-align: start;
}

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

/* Long unbroken tokens (a pasted URL, an API key) wrap instead of widening the
   page — the other half of the no-truncation rule. */
.aitfm h1, .aitfm h2, .aitfm h3, .aitfm h4,
.aitfm p, .aitfm li, .aitfm strong, .aitfm span, .aitfm label { overflow-wrap: break-word; }

/* No hover underlines — see the header note on specificity. */
.aitfm a,
.aitfm a:hover,
.aitfm a:focus,
.aitfm a:active,
.aitfm a:hover strong,
.aitfm a:hover span { text-decoration: none; }

/* Tabler ships a SECOND rule at the same weight: `a:hover { color:
   var(--tblr-link-hover-color) }`. It repaints any anchor whose label is a
   direct text node — which is the lane CTA, and is why that button's white
   label went pale the instant the pointer touched it. (The route cards were
   never affected: their heading, blurb and value are child elements that each
   state their own colour, and a parent's `:hover` colour cannot reach them.)
   So this pins only the button-shaped links, in every state. */
.aitfm-lane-go,
.aitfm-lane-go:hover,
.aitfm-lane-go:focus,
.aitfm-lane-go:active,
.aitfm-lane-go:visited { color: #fff; }

/* ══════════════════════════════ HERO ══════════════════════════════ */

.aitfm-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(28px, 4vw, 44px);
    border-radius: 26px;
    background: linear-gradient(150deg,
        var(--aits-blue-tint-2, #F4F8FE) 0%,
        var(--aits-card, #fff) 62%);
    border: 1px solid var(--aits-line, #ECECEC);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 30px 70px -46px rgba(15, 23, 42, .55);
}

/* Mesh wash, tinted by the page accent — one element, no layout cost. */
.aitfm-hero::before {
    content: '';
    position: absolute;
    inset: -30% -10% auto -10%;
    height: 150%;
    z-index: -1;
    background:
        radial-gradient(32% 46% at 12% 18%, color-mix(in oklab, var(--acc) 34%, transparent), transparent 66%),
        radial-gradient(28% 38% at 88% 10%, rgba(112, 72, 232, .26), transparent 66%),
        radial-gradient(26% 40% at 76% 92%, rgba(236, 72, 153, .16), transparent 68%);
    filter: blur(50px);
    opacity: .85;
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfm-hero::before {
        background:
            radial-gradient(32% 46% at 12% 18%, rgba(54, 128, 237, .34), transparent 66%),
            radial-gradient(28% 38% at 88% 10%, rgba(112, 72, 232, .26), transparent 66%);
    }
}

/* Fine grid, masked to a soft ellipse so it never reaches the card edge. */
.aitfm-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .45;
    background-image:
        linear-gradient(rgba(54, 128, 237, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(54, 128, 237, .06) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 30% 20%, #000 10%, transparent 72%);
            mask-image: radial-gradient(ellipse 70% 80% at 30% 20%, #000 10%, transparent 72%);
}

.aitfm-hero-top {
    display: flex;
    align-items: flex-start;
    gap: clamp(16px, 2.4vw, 24px);
}

.aitfm-hero-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: clamp(52px, 6vw, 66px);
    height: clamp(52px, 6vw, 66px);
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(135deg, var(--acc) 0%, var(--acc2) 100%);
    box-shadow:
        0 18px 34px -16px color-mix(in oklab, var(--acc) 85%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .3);
    transition: transform .3s var(--aitfm-ease);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfm-hero-ic { box-shadow: 0 18px 34px -16px rgba(54, 128, 237, .85), inset 0 1px 0 rgba(255, 255, 255, .3); }
}

.aitfm-hero-ic svg { width: 45%; height: 45%; }

.aitfm-hero-tx { min-width: 0; }

.aitfm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--aits-card, #fff);
    border: 1px solid color-mix(in oklab, var(--acc) 26%, transparent);
    box-shadow: 0 6px 16px -10px color-mix(in oklab, var(--acc) 70%, transparent);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--aits-ink, #111);
    max-width: 100%;
    flex-wrap: wrap;
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfm-eyebrow { border-color: var(--aits-blue-line, #CFE0FA); box-shadow: 0 6px 16px -10px rgba(54, 128, 237, .7); }
}

.aitfm-dot {
    flex: none;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--acc);
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--acc) 55%, transparent);
    animation: aitfm-pulse 2.2s ease-in-out infinite;
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfm-dot { box-shadow: 0 0 0 0 rgba(54, 128, 237, .55); }
}

@keyframes aitfm-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(54, 128, 237, .5); }
    50%      { box-shadow: 0 0 0 7px rgba(54, 128, 237, 0); }
}

.aitfm-h1 {
    margin: 0 0 12px;
    font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.9rem);
    font-weight: 800;
    line-height: 1.07;
    letter-spacing: -.035em;
    color: var(--aits-ink, #111);
}

.aitfm-hl {
    background: linear-gradient(96deg, var(--acc) 0%, var(--aits-violet, #7048E8) 55%, #EC4899 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    padding-inline-end: .06em;
}

.aitfm-lede {
    margin: 0;
    max-width: 66ch;
    font-size: clamp(.97rem, .93rem + .24vw, 1.09rem);
    line-height: 1.68;
    color: var(--aits-mut, #666);
    text-wrap: pretty;
}

.aitfm-chips {
    display: flex;
    flex-wrap: wrap;             /* wraps — never a horizontal scroller */
    gap: 9px;
    margin-top: 22px;
}

.aitfm-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border-radius: 12px;
    background: var(--aits-card, #fff);
    border: 1px solid var(--aits-line, #ECECEC);
    box-shadow: 0 2px 6px -4px rgba(15, 23, 42, .28);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -.008em;
    color: var(--aits-ink-soft, #2B2B2B);
    transition: transform .22s var(--aitfm-ease), border-color .2s var(--aitfm-ease),
                box-shadow .22s var(--aitfm-ease);
}

.aitfm-chip svg { width: 14px; height: 14px; flex: none; color: var(--acc); }

/* ══════════════════════════════ ROUTE CARDS ══════════════════════════════ */

.aitfm-routes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
    align-items: start;          /* a short card stays short — no dead space */
}

.aitfm-route {
    --acc:  var(--aits-blue, #3680ED);
    --acc2: var(--aits-blue-light, #60A4F5);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 14px;
    padding: 18px;
    border-radius: 20px;
    background: var(--aits-card, #fff);
    border: 1px solid var(--aits-line, #ECECEC);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 32px -24px rgba(15, 23, 42, .5);
    transition: transform .26s var(--aitfm-ease), box-shadow .26s var(--aitfm-ease),
                border-color .22s var(--aitfm-ease);
}

.aitfm-route::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 110px;
    z-index: -1;
    opacity: 0;
    background: linear-gradient(180deg, color-mix(in oklab, var(--acc) 13%, transparent) 0%, transparent 100%);
    transition: opacity .26s var(--aitfm-ease);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfm-route::before { background: linear-gradient(180deg, rgba(54, 128, 237, .12) 0%, transparent 100%); }
}

/* A route card that is a real <button> — the PWA install card, which triggers
   an action rather than navigating. The reset is what a <button> needs to stop
   looking like a form control inside a grid of cards. */
button.aitfm-route {
    width: 100%;
    text-align: start;
    font: inherit;
    cursor: pointer;
    -webkit-appearance: none;
            appearance: none;
}

button.aitfm-route:focus-visible {
    outline: 3px solid var(--aits-focus, rgba(54, 128, 237, .28));
    outline-offset: 3px;
}

/* Hidden until the browser says an install is actually possible — see the
   script on /about. `[hidden]` alone loses to the card's `display: grid`. */
.aitfm-route[hidden] { display: none; }

.aitfm-route-ic {
    grid-row: span 3;
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--acc) 0%, var(--acc2) 100%);
    box-shadow: 0 12px 24px -14px color-mix(in oklab, var(--acc) 85%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, .26);
    transition: transform .28s var(--aitfm-ease);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfm-route-ic { box-shadow: 0 12px 24px -14px rgba(54, 128, 237, .85), inset 0 1px 0 rgba(255, 255, 255, .26); }
}

.aitfm-route-ic svg { width: 19px; height: 19px; }

.aitfm-route-h {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.016em;
    line-height: 1.35;
    color: var(--aits-ink, #111);
}

.aitfm-route-p {
    font-size: 13.2px;
    line-height: 1.58;
    color: var(--aits-mut, #666);
}

.aitfm-route-v {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    font-size: 12.8px;
    font-weight: 800;
    letter-spacing: -.005em;
    color: var(--acc);
}

.aitfm-route-v svg { width: 14px; height: 14px; flex: none; transition: transform .24s var(--aitfm-ease); }

/* ══════════════════════════════ STAT TILES ══════════════════════════════
   Used by /about. Every figure here is live or absent — a tile whose table is
   empty is never rendered as "0", and a typed-in number is never printed next
   to live ones. The two policy tiles ("0 sign-ups", "100% free") are deliberate
   claims about how the product works, not counts, and are marked as such in the
   markup. */
.aitfm-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.aitfm-stat {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 20px 18px;
    border-radius: 20px;
    text-align: center;
    background: var(--aits-card, #fff);
    border: 1px solid var(--aits-line, #ECECEC);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .7),
        0 1px 2px rgba(15, 23, 42, .04),
        0 14px 32px -26px rgba(15, 23, 42, .5);
    transition: transform .26s var(--aitfm-ease), box-shadow .26s var(--aitfm-ease),
                border-color .22s var(--aitfm-ease);
}

/* Accent wash from the top, always on — these tiles are the page's loudest
   moment and a hover-only tint would waste them. */
.aitfm-stat::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 74px;
    z-index: -1;
    background: linear-gradient(180deg, color-mix(in oklab, var(--acc) 12%, transparent) 0%, transparent 100%);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfm-stat::before { background: linear-gradient(180deg, rgba(54, 128, 237, .12) 0%, transparent 100%); }
}

.aitfm-stat-n {
    display: block;
    font-size: clamp(1.7rem, 1.4rem + 1.3vw, 2.4rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(120deg, var(--acc) 0%, var(--acc2) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}

.aitfm-stat-l {
    display: block;
    margin-top: 7px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -.005em;
    color: var(--aits-mut, #666);
}

/* ══════════════════════════════ TWO LANES ══════════════════════════════
   The section that tells the two halves of AIToolsay apart: tools WE build and
   host free, versus the directory of tools other providers make. Everything
   else on the site assumes the reader knows the difference; this is where they
   learn it, so the two cards are deliberately symmetrical and side by side —
   a stacked pair reads as "and also", a pair reads as "versus". */
.aitfm-lanes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

@media (min-width: 860px) {
    .aitfm-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

.aitfm-lane {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(22px, 3vw, 30px);
    border-radius: 24px;
    background: var(--aits-card, #fff);
    border: 1px solid var(--aits-line, #ECECEC);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .7),
        0 1px 2px rgba(15, 23, 42, .04),
        0 24px 50px -34px rgba(15, 23, 42, .55);
    transition: transform .26s var(--aitfm-ease), box-shadow .26s var(--aitfm-ease),
                border-color .22s var(--aitfm-ease);
}

.aitfm-lane-top { display: flex; align-items: center; gap: 13px; }

.aitfm-lane-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 46px; height: 46px;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, var(--acc) 0%, var(--acc2) 100%);
    box-shadow: 0 14px 26px -14px color-mix(in oklab, var(--acc) 85%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, .28);
    transition: transform .3s var(--aitfm-ease);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfm-lane-ic { box-shadow: 0 14px 26px -14px rgba(54, 128, 237, .85), inset 0 1px 0 rgba(255, 255, 255, .28); }
}

.aitfm-lane-ic svg { width: 22px; height: 22px; }

.aitfm-lane-kicker {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--acc);
}

.aitfm-lane-h {
    margin: 3px 0 0;
    font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
    font-weight: 800;
    letter-spacing: -.024em;
    line-height: 1.26;
    color: var(--aits-ink, #111);
}

.aitfm-lane-p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.68;
    color: var(--aits-mut, #666);
}

.aitfm-lane-list {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aitfm-lane-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.8px;
    line-height: 1.58;
    color: var(--aits-txt, #444);
}

.aitfm-lane-list svg {
    flex: none;
    width: 17px; height: 17px;
    margin-top: 1px;
    color: var(--acc);
}

.aitfm-lane-list b { color: var(--aits-ink, #111); font-weight: 800; }

/* Pinned to the bottom so the two lanes' buttons line up even when one card
   carries more copy than the other. */
/* The card this sits in ALSO lifts on hover, so a 2px nudge and a slightly
   bigger shadow on the button read as nothing — the whole thing moved anyway.
   The button therefore changes something the card cannot: its fill brightens
   (a `::before` overlay, since a gradient cannot be transitioned) and a shine
   sweeps across it (`::after`). Both sit behind the label via `z-index:-1`
   inside the button's own stacking context. */
.aitfm-lane-go {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: auto;
    padding: 14px 22px;
    border-radius: 14px;
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -.005em;
    color: #fff;
    background: linear-gradient(140deg, var(--acc2) -10%, var(--acc) 46%, var(--acc) 100%);
    box-shadow: 0 16px 30px -16px color-mix(in oklab, var(--acc) 90%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, .28);
    transition: transform .22s var(--aitfm-ease), box-shadow .24s var(--aitfm-ease);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfm-lane-go { box-shadow: 0 16px 30px -16px rgba(54, 128, 237, .9), inset 0 1px 0 rgba(255, 255, 255, .28); }
}

/* Brighter fill, faded in on hover. */
.aitfm-lane-go::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    background: linear-gradient(140deg, var(--acc2) -20%, var(--acc2) 34%, var(--acc) 100%);
    transition: opacity .26s var(--aitfm-ease);
}

/* Diagonal shine. Parked off the inline-start edge until hover sweeps it. */
.aitfm-lane-go::after {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: -60%;
    width: 40%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .32) 50%, transparent 60%);
    transform: skewX(-18deg);
    transition: inset-inline-start .9s cubic-bezier(.16, 1, .3, 1);
}

.aitfm-lane-go svg { width: 16px; height: 16px; flex: none; transition: transform .24s var(--aitfm-ease); }

.aitfm-lane-go:focus-visible {
    outline: 3px solid var(--aits-focus, rgba(54, 128, 237, .28));
    outline-offset: 3px;
}

.aitfm-lane-go:active { transform: translateY(0) scale(.99); }

/* ══════════════════════════════ FORM CARD ══════════════════════════════ */

.aitfm-card {
    padding: clamp(20px, 3vw, 34px);
    border-radius: 26px;
    background: var(--aits-card, #fff);
    border: 1px solid var(--aits-line, #ECECEC);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .7),
        0 1px 2px rgba(15, 23, 42, .04),
        0 34px 70px -50px rgba(15, 23, 42, .6);
}

.aitfm-card-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    position: relative;
}

.aitfm-card-head::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--acc) 44%, transparent) 0%,
        var(--aits-line, #ECECEC) 36%,
        transparent 100%);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfm-card-head::after { background: linear-gradient(90deg, var(--aits-blue-line, #CFE0FA) 0%, var(--aits-line, #ECECEC) 36%, transparent 100%); }
}

.aitfm-card-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px; height: 40px;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, var(--acc) 0%, var(--acc2) 100%);
    box-shadow: 0 12px 24px -14px color-mix(in oklab, var(--acc) 85%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, .26);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfm-card-ic { box-shadow: 0 12px 24px -14px rgba(54, 128, 237, .85), inset 0 1px 0 rgba(255, 255, 255, .26); }
}

.aitfm-card-ic svg { width: 18px; height: 18px; }

.aitfm-card-tx { min-width: 0; }

.aitfm-card-h {
    margin: 0 0 3px;
    font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem);
    font-weight: 800;
    letter-spacing: -.022em;
    line-height: 1.28;
    color: var(--aits-ink, #111);
}

.aitfm-card-sub {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--aits-mut, #666);
}

/* ── Alerts ── */
.aitfm-alert {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid var(--aits-line, #ECECEC);
    background: var(--aits-surface-3, #F7F7F8);
}

.aitfm-alert-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px; height: 36px;
    border-radius: 12px;
    color: #fff;
}

.aitfm-alert-ic svg { width: 17px; height: 17px; }

.aitfm-alert-tx { display: grid; gap: 3px; min-width: 0; }

.aitfm-alert-tx strong {
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -.012em;
    color: var(--aits-ink, #111);
}

.aitfm-alert-tx span {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--aits-txt, #444);
}

.aitfm-alert.is-ok {
    background: var(--aits-green-soft, #E6FCF3);
    border-color: color-mix(in oklab, var(--aits-green, #0CA678) 26%, transparent);
}

.aitfm-alert.is-ok .aitfm-alert-ic {
    background: linear-gradient(135deg, var(--aits-green, #0CA678), #22C55E);
    box-shadow: 0 10px 22px -12px rgba(12, 166, 120, .9);
}

.aitfm-alert.is-err {
    background: var(--aits-red-soft, #FFECEC);
    border-color: color-mix(in oklab, var(--aits-red, #E03131) 26%, transparent);
}

.aitfm-alert.is-err .aitfm-alert-ic {
    background: linear-gradient(135deg, var(--aits-red, #E03131), #F87171);
    box-shadow: 0 10px 22px -12px rgba(224, 49, 49, .9);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfm-alert.is-ok  { border-color: rgba(12, 166, 120, .26); }
    .aitfm-alert.is-err { border-color: rgba(224, 49, 49, .26); }
}

/* ── Field grid ── */
.aitfm-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

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

    /* Any direct child of the grid, not just `.aitfm-f` — the checkbox row is a
       bare <label class="aitfm-check is-full"> and a `.aitfm-f.is-full` rule
       silently left it sitting in one half-width column. */
    .aitfm-grid > .is-full { grid-column: 1 / -1; }
}

.aitfm-f { display: grid; gap: 8px; min-width: 0; }

.aitfm-lbl {
    display: flex;
    flex-wrap: wrap;             /* a long label wraps rather than overflowing */
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--aits-ink, #111);
    transition: color .2s var(--aitfm-ease);
}

.aitfm-lbl svg { width: 14px; height: 14px; flex: none; color: var(--acc); }

.aitfm-req {
    color: var(--aits-red, #E03131);
    font-weight: 800;
}

/* `margin-inline-start: auto` parks it at the END of the label row rather than
   immediately after the words. When the row is too narrow it still wraps — the
   label is `flex-wrap: wrap` because a long label must never overflow — but a
   wrapped chip then sits alone on a line, so it is deliberately quiet: no
   border, no fill, just small caps. The bordered version looked like a second
   field heading when it dropped. */
.aitfm-opt {
    margin-inline-start: auto;
    padding: 0;
    background: none;
    border: 0;
    color: var(--aits-faint, #999);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
}

/* No leading separator: `margin-inline-start: auto` parks this at the opposite
   end of the row, where a dangling "·" would be an orphan rather than a join. */

/* The control shell owns the border, background and focus ring; the <input>
   inside is transparent and borderless. That is what lets the leading icon tile
   sit inside the same box without a nested-border look. */
.aitfm-ctl {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 14px;
    min-height: 56px;            /* comfortable tap target on phones */
    border-radius: 15px;
    background: linear-gradient(180deg, var(--aits-card, #fff) 0%, var(--aits-surface-2, #FAFAFA) 100%);
    border: 1.5px solid var(--aits-line, #ECECEC);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
    transition: background .2s var(--aitfm-ease), border-color .2s var(--aitfm-ease),
                box-shadow .22s var(--aitfm-ease);
}

.aitfm-ctl.is-area { align-items: flex-start; padding-block: 14px; }

.aitfm-ctl-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px; height: 30px;
    border-radius: 10px;
    color: var(--aits-blue-dark, #2060C0);
    background: var(--aits-blue-tint, #EAF2FD);
    box-shadow: inset 0 0 0 1px var(--aits-blue-line, #CFE0FA);
    transition: transform .22s var(--aitfm-ease), background .2s var(--aitfm-ease),
                color .2s var(--aitfm-ease), box-shadow .22s var(--aitfm-ease);
}

.aitfm-ctl-ic svg { width: 15px; height: 15px; }

.aitfm-ctl:focus-within {
    background: var(--aits-card, #fff);
    border-color: var(--acc);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--acc) 18%, transparent),
                0 10px 22px -16px color-mix(in oklab, var(--acc) 90%, transparent);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfm-ctl:focus-within { box-shadow: 0 0 0 4px var(--aits-focus, rgba(54, 128, 237, .28)); }
}

.aitfm-ctl:focus-within .aitfm-ctl-ic {
    color: #fff;
    background: linear-gradient(140deg, var(--acc), var(--aits-blue-dark, #2060C0));
    box-shadow: 0 8px 16px -8px color-mix(in oklab, var(--acc) 90%, transparent);
    transform: scale(1.06);
}

.aitfm-f:focus-within .aitfm-lbl { color: var(--acc); }

/* 16px minimum on every control: anything smaller makes iOS Safari zoom the
   whole page the moment the field takes focus. */
.aitfm-in,
.aitfm-ta,
.aitfm-sel {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -.005em;
    color: var(--aits-ink, #111);
}

.aitfm-in::placeholder,
.aitfm-ta::placeholder { color: var(--aits-faint, #999); font-weight: 500; }

.aitfm-ta {
    display: block;
    resize: vertical;
    min-height: 130px;
    /* No max-height and no scroll trap: the field grows with the drag handle and
       the text inside is never clipped. */
}

/* The select keeps its own shell so the chevron can live on the box. */
.aitfm-sel-wrap { position: relative; display: flex; }

.aitfm-sel {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    padding: 15px 46px 15px 14px;
    padding-inline: 14px 46px;
    min-height: 56px;
    border-radius: 15px;
    background: linear-gradient(180deg, var(--aits-card, #fff) 0%, var(--aits-surface-2, #FAFAFA) 100%);
    border: 1.5px solid var(--aits-line, #ECECEC);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
    cursor: pointer;
    transition: background .2s var(--aitfm-ease), border-color .2s var(--aitfm-ease),
                box-shadow .22s var(--aitfm-ease);
}

.aitfm-sel:focus {
    background: var(--aits-card, #fff);
    border-color: var(--acc);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--acc) 18%, transparent);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfm-sel:focus { box-shadow: 0 0 0 4px var(--aits-focus, rgba(54, 128, 237, .28)); }
}

/* Chevron drawn from two borders — crisp at any zoom, no glyph to go missing. */
.aitfm-sel-wrap::after {
    content: '';
    position: absolute;
    inset-inline-end: 19px;
    top: 50%;
    width: 8px; height: 8px;
    margin-top: -6px;
    border-inline-end: 2px solid var(--aits-mut, #666);
    border-block-end: 2px solid var(--aits-mut, #666);
    transform: rotate(45deg);
    pointer-events: none;
    transition: border-color .2s var(--aitfm-ease);
}

.aitfm-sel-wrap:focus-within::after {
    border-inline-end-color: var(--acc);
    border-block-end-color: var(--acc);
}

/* ══════════════════════════ CUSTOM SELECT ══════════════════════════
   An `<option>` cannot be designed. The popup a native <select> opens is drawn
   by the operating system, and the handful of properties it honours (colour,
   background) are ignored on some platforms and applied inconsistently on the
   rest — which is why the subject list rendered as a plain white sheet with
   mismatched text colours while the closed control above it was fully styled.

   So the real <select> stays in the DOM, keeps its `wire:model.defer` binding
   and keeps doing the actual work; JS builds this listbox next to it and hides
   the native one. No JS ⇒ nothing is hidden and the native select is used, so
   the form never depends on this.

   Everything below only applies once JS has added `.is-enhanced` — the styles
   cannot orphan the fallback.
   ------------------------------------------------------------------------- */

/* The native control, once a listbox has replaced it. NOT `display:none`: the
   element must stay measurable and focusable for Livewire and for a browser's
   own "jump to the invalid field" behaviour. */
.aitfm-sel-wrap.is-enhanced > .aitfm-sel {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
    -webkit-appearance: none;
            appearance: none;
}

/* The native chevron is replaced by the trigger's own. */
.aitfm-sel-wrap.is-enhanced::after { display: none; }

.aitfm-pick {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 14px 16px;
    border-radius: 15px;
    cursor: pointer;
    text-align: start;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--aits-ink, #111);
    background: linear-gradient(180deg, var(--aits-card, #fff) 0%, var(--aits-surface-2, #FAFAFA) 100%);
    border: 1.5px solid var(--aits-line, #ECECEC);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
    transition: background .2s var(--aitfm-ease), border-color .2s var(--aitfm-ease),
                box-shadow .22s var(--aitfm-ease);
}

/* Wraps. A long option label is admin-entered copy and a two-line trigger is
   fine — an ellipsis on the thing you just chose is not. */
.aitfm-pick-val { flex: 1 1 auto; min-width: 0; line-height: 1.45; }
.aitfm-pick.is-empty .aitfm-pick-val { color: var(--aits-faint, #999); font-weight: 500; }

.aitfm-pick-ar {
    flex: none;
    width: 9px; height: 9px;
    margin-inline-end: 3px;
    border-inline-end: 2px solid var(--aits-mut, #666);
    border-block-end: 2px solid var(--aits-mut, #666);
    transform: translateY(-3px) rotate(45deg);
    transition: transform .26s var(--aitfm-ease), border-color .2s var(--aitfm-ease);
}

.aitfm-pick[aria-expanded="true"] {
    background: var(--aits-card, #fff);
    border-color: var(--acc);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--acc) 18%, transparent);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfm-pick[aria-expanded="true"] { box-shadow: 0 0 0 4px var(--aits-focus, rgba(54, 128, 237, .28)); }
}

.aitfm-pick[aria-expanded="true"] .aitfm-pick-ar {
    transform: translateY(2px) rotate(225deg);
    border-inline-end-color: var(--acc);
    border-block-end-color: var(--acc);
}

.aitfm-pick:focus-visible {
    outline: 3px solid var(--aits-focus, rgba(54, 128, 237, .28));
    outline-offset: 2px;
}

/* ── Panel ── */
.aitfm-panel {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 8px);
    z-index: 60;
    display: none;
    padding: 8px;
    border-radius: 18px;
    background: var(--aits-card, #fff);
    border: 1px solid var(--aits-line-strong, #DADADA);
    box-shadow:
        0 2px 6px rgba(15, 23, 42, .06),
        0 30px 60px -24px rgba(15, 23, 42, .45);
    transform-origin: top center;
}

.aitfm-panel.is-open { display: block; animation: aitfm-drop .2s var(--aitfm-ease) both; }

@keyframes aitfm-drop {
    from { opacity: 0; transform: translateY(-6px) scale(.99); }
    to   { opacity: 1; transform: none; }
}

/* Search, added only when the list is long enough to need it. */
.aitfm-panel-find {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 6px;
    padding: 9px 12px;
    border-radius: 12px;
    background: var(--aits-surface-3, #F7F7F8);
    border: 1px solid var(--aits-line, #ECECEC);
}

.aitfm-panel-find svg { width: 15px; height: 15px; flex: none; color: var(--aits-mut, #666); }

.aitfm-panel-find input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--aits-ink, #111);
}

/* A scroll container, not a clip: every option stays reachable and each label
   wraps in full. `overscroll-behavior` stops the page scrolling once the list
   hits its end. */
.aitfm-panel-list {
    max-height: 306px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.aitfm-panel-list::-webkit-scrollbar { width: 8px; }
.aitfm-panel-list::-webkit-scrollbar-thumb {
    background: var(--aits-line-strong, #DADADA);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.aitfm-opt {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--aits-txt, #444);
    transition: background-color .16s var(--aitfm-ease), color .16s var(--aitfm-ease);
}

.aitfm-opt + .aitfm-opt { margin-top: 2px; }
.aitfm-opt[hidden] { display: none; }

/* Leading marker: a hollow square that fills with the accent when chosen. */
.aitfm-opt-mk {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 7px;
    border: 1.5px solid var(--aits-line-strong, #DADADA);
    color: transparent;
    transition: background .18s var(--aitfm-ease), border-color .18s var(--aitfm-ease),
                color .18s var(--aitfm-ease);
}

.aitfm-opt-mk svg { width: 12px; height: 12px; }
.aitfm-opt-tx { flex: 1 1 auto; min-width: 0; }

/* Keyboard cursor and pointer hover share one look, so arrowing down and
   moving the mouse read as the same thing. */
.aitfm-opt.is-active {
    background: var(--aits-surface-3, #F7F7F8);
    color: var(--aits-ink, #111);
}

.aitfm-opt[aria-selected="true"] {
    background: color-mix(in oklab, var(--acc) 10%, transparent);
    color: var(--aits-ink, #111);
    font-weight: 700;
}

.aitfm-opt[aria-selected="true"] .aitfm-opt-mk {
    border-color: transparent;
    background: linear-gradient(135deg, var(--acc) 0%, var(--acc2) 100%);
    color: #fff;
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfm-opt[aria-selected="true"] { background: var(--aits-blue-tint, #EAF2FD); }
}

/* <optgroup> label, if a caller ever uses one. */
.aitfm-opt-grp {
    padding: 12px 12px 6px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--aits-faint, #999);
}

.aitfm-panel-none {
    padding: 18px 12px;
    text-align: center;
    font-size: 13.5px;
    color: var(--aits-mut, #666);
}

/* Backdrop — only ever visible in sheet mode on phones. */
.aitfm-veil {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: none;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* ── Phones: the panel becomes a bottom sheet ──
   A 300px-wide floating list anchored to a field halfway down a long form is
   the worst of both worlds on a phone — it covers the field it belongs to and
   sits under the thumb. A sheet is reachable and unmistakable. */
@media (max-width: 560px) {
    .aitfm-veil.is-open { display: block; animation: aitfm-fade .2s var(--aitfm-ease) both; }

    @keyframes aitfm-fade { from { opacity: 0 } to { opacity: 1 } }

    .aitfm-panel {
        position: fixed;
        inset: auto 0 0 0;
        top: auto;
        z-index: 60;
        padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px));
        border-radius: 24px 24px 0 0;
        border-bottom: 0;
        box-shadow: 0 -20px 50px -18px rgba(15, 23, 42, .55);
    }

    .aitfm-panel.is-open { animation: aitfm-sheet .26s var(--aitfm-ease) both; }

    @keyframes aitfm-sheet {
        from { opacity: 0; transform: translateY(18px); }
        to   { opacity: 1; transform: none; }
    }

    /* Grab handle — the affordance that says "this came up from the bottom". */
    .aitfm-panel::before {
        content: '';
        display: block;
        width: 42px; height: 4px;
        margin: 2px auto 10px;
        border-radius: 99px;
        background: var(--aits-line-strong, #DADADA);
    }

    .aitfm-panel-list { max-height: min(56vh, 420px); }
    .aitfm-opt { min-height: 50px; font-size: 15px; }
}

/* ── Dark ── */
body.theme-dark .aitfm-pick {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}

body.theme-dark .aitfm-pick[aria-expanded="true"] {
    background: rgba(255, 255, 255, .06);
    border-color: var(--aits-blue-light, #60A4F5);
    box-shadow: 0 0 0 4px rgba(54, 128, 237, .22);
}

body.theme-dark .aitfm-pick-ar {
    border-inline-end-color: var(--aits-mut, #A0A0A6);
    border-block-end-color: var(--aits-mut, #A0A0A6);
}

body.theme-dark .aitfm-panel {
    background: #17171A;
    border-color: rgba(255, 255, 255, .14);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .5), 0 34px 64px -26px rgba(0, 0, 0, .95);
}

body.theme-dark .aitfm-panel-find {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .1);
}

body.theme-dark .aitfm-opt.is-active { background: rgba(255, 255, 255, .07); }
body.theme-dark .aitfm-opt-mk { border-color: rgba(255, 255, 255, .2); }
body.theme-dark .aitfm-panel-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); background-clip: padding-box; }

@media (hover: hover) and (pointer: fine) {
    .aitfm-pick:hover {
        background: var(--aits-card, #fff);
        border-color: var(--aits-blue-line, #CFE0FA);
    }

    .aitfm-pick:hover .aitfm-pick-ar {
        border-inline-end-color: var(--acc);
        border-block-end-color: var(--acc);
    }

    .aitfm-opt:hover { background: var(--aits-surface-3, #F7F7F8); color: var(--aits-ink, #111); }
    .aitfm-opt:hover .aitfm-opt-mk { border-color: var(--acc); }

    body.theme-dark .aitfm-pick:hover { background: rgba(255, 255, 255, .06); border-color: rgba(96, 164, 245, .34); }
    body.theme-dark .aitfm-opt:hover  { background: rgba(255, 255, 255, .07); }
}

.aitfm-opt:active { transform: scale(.995); }

/* Invalid state — set by @error, so it survives a server-side round trip. */
.aitfm-ctl:has(.is-invalid),
.aitfm-sel.is-invalid { border-color: var(--aits-red, #E03131); }

/* Once enhanced, the invalid border has to move to the trigger — the native
   select it was drawn on is transparent and 0-opacity by then. */
.aitfm-sel-wrap.is-enhanced:has(.is-invalid) .aitfm-pick { border-color: var(--aits-red, #E03131); }

.aitfm-ctl:has(.is-invalid) .aitfm-ctl-ic {
    color: var(--aits-red-ink, #B71C1C);
    background: var(--aits-red-soft, #FFECEC);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--aits-red, #E03131) 26%, transparent);
}

.aitfm-err {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--aits-red-ink, #B71C1C);
}

.aitfm-err::before {
    content: '!';
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--aits-red, #E03131);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
}

.aitfm-hint {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--aits-mut, #666);
}

.aitfm-hint svg { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--acc); }

.aitfm-count {
    align-self: flex-end;
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--aits-faint, #999);
    letter-spacing: .01em;
}

.aitfm-f-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 14px;
}

/* ── Labelled divider inside a form (e.g. "Extras · optional but helpful") ──
   Spans the whole grid, so it works as a row in the 2-column layout. */
.aitfm-div {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
}

.aitfm-div-tx { display: grid; gap: 2px; min-width: 0; }

.aitfm-div-tx strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--aits-ink, #111);
}

.aitfm-div-tx strong::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--acc) 0%, var(--acc2) 100%);
}

.aitfm-div-tx span {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--aits-mut, #666);
}

.aitfm-div-line {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, var(--aits-line-strong, #DADADA) 0%, transparent 100%);
}

/* ── Checkbox row ── */
.aitfm-check {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 20px;
    padding: 16px 18px;
    border-radius: 18px;
    cursor: pointer;
    background: var(--aits-surface-3, #F7F7F8);
    border: 1px solid var(--aits-line, #ECECEC);
    transition: background .2s var(--aitfm-ease), border-color .2s var(--aitfm-ease);
}

/* The native box is styled directly — a CSS-drawn replacement loses the focus
   ring, the keyboard toggle and the form reset. */
.aitfm-check input[type="checkbox"] {
    flex: none;
    width: 22px; height: 22px;
    margin: 1px 0 0;
    border-radius: 7px;
    accent-color: var(--acc);
    cursor: pointer;
}

.aitfm-check-tx { display: grid; gap: 3px; min-width: 0; }

.aitfm-check-tx strong {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.012em;
    color: var(--aits-ink, #111);
}

.aitfm-check-tx span {
    font-size: 12.8px;
    line-height: 1.55;
    color: var(--aits-mut, #666);
}

/* ── Callouts ── */
.aitfm-notes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 22px;
}

.aitfm-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 16px;
    border-radius: 18px;
    background: linear-gradient(160deg, var(--aits-blue-tint, #EAF2FD) 0%, var(--aits-blue-tint-2, #F4F8FE) 100%);
    border: 1px solid var(--aits-blue-line, #CFE0FA);
}

.aitfm-note-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px; height: 34px;
    border-radius: 11px;
    color: var(--aits-blue-dark, #2060C0);
    background: var(--aits-card, #fff);
    box-shadow: 0 4px 10px -6px rgba(54, 128, 237, .8);
}

.aitfm-note-ic svg { width: 16px; height: 16px; }

.aitfm-note-tx { display: grid; gap: 3px; min-width: 0; }

.aitfm-note-tx strong {
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: -.012em;
    color: var(--aits-ink, #111);
}

.aitfm-note-tx span {
    font-size: 12.8px;
    line-height: 1.6;
    color: var(--aits-txt, #444);
}

/* Stated outright: a link in here inherits nothing. */
.aitfm-note-tx a {
    color: var(--aits-blue-dark, #2060C0);
    font-weight: 800;
    border-bottom: 1.5px solid var(--aits-blue-line, #CFE0FA);
    transition: color .2s var(--aitfm-ease), border-color .2s var(--aitfm-ease);
}

/* ── Submit bar ── */
.aitfm-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px dashed var(--aits-line-strong, #DADADA);
}

.aitfm-bar-note {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    font-size: 12.8px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--aits-mut, #666);
}

.aitfm-bar-note svg { width: 15px; height: 15px; flex: none; color: var(--aits-green, #0CA678); }

.aitfm-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 30px;
    min-height: 58px;
    border: 0;
    border-radius: 16px;
    cursor: pointer;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.005em;
    color: #fff;
    /* Brand blue, NOT `--acc`. The per-page accent recolours the hero, the chips
       and the step numbers — the primary action stays the one blue the whole
       site uses for "do the thing". An amber or violet submit button is exactly
       the "buttons off-brand" report this kit exists to avoid. */
    background: linear-gradient(140deg,
        var(--aits-blue-light, #60A4F5) -10%,
        var(--aits-blue, #3680ED) 44%,
        var(--aits-blue-dark, #2060C0) 100%);
    box-shadow: 0 18px 34px -16px rgba(54, 128, 237, .9), inset 0 1px 0 rgba(255, 255, 255, .3);
    transition: transform .22s var(--aitfm-ease), box-shadow .24s var(--aitfm-ease),
                filter .2s var(--aitfm-ease);
}

.aitfm-btn svg { width: 17px; height: 17px; flex: none; }

/* Diagonal shine, kept off the disabled state so a submitting button does not
   look like it is still inviting a click. */
.aitfm-btn::after {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: -60%;
    width: 40%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%);
    transform: skewX(-18deg);
    transition: inset-inline-start .9s cubic-bezier(.16, 1, .3, 1);
}

.aitfm-btn:focus-visible {
    outline: 3px solid var(--aits-focus, rgba(54, 128, 237, .28));
    outline-offset: 3px;
}

.aitfm-btn:disabled { cursor: not-allowed; filter: saturate(.6); transform: none; }
.aitfm-btn:disabled::after { display: none; }

/* Livewire swaps these two: label out, spinner in. Both are always in the DOM
   so the button never changes width mid-submit. */
/* The label span was never given a display, so it stayed inline and the
   button's own `gap` — which only separates the label from the spinner span —
   never reached between the icon and the words inside it. Every button on
   these pages read "✉Send message" with the glyph welded to the S. */
.aitfm-btn-label { display: inline-flex; align-items: center; gap: 10px; }
.aitfm-btn-load { display: none; align-items: center; gap: 10px; }
.aitfm-btn[disabled] .aitfm-btn-label { display: none; }
.aitfm-btn[disabled] .aitfm-btn-load  { display: inline-flex; }

.aitfm-spin {
    flex: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    animation: aitfm-spin .7s linear infinite;
}

@keyframes aitfm-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════ STEPS BAND ══════════════════════════════ */

/* Three flat cards with a number in the corner did not read as a PROCESS — just
   as three boxes that happened to be numbered. This is a connected timeline: a
   dashed run joins the badges left-to-right on a wide screen and top-to-bottom
   on a narrow one, each card carries its own step icon, and the accent bar and
   the inner top tint arrive on hover.

   The connector geometry is measured, not guessed — see the two `top`/`inset`
   values below. It also assumes the steps sit in ONE row at >=760px, which is
   why the column count there is explicit rather than `auto-fit`: an auto-fit
   wrap would leave a dash pointing at nothing. */
.aitfm-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

@media (min-width: 760px) {
    .aitfm-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}

/* /about walks through four steps rather than three. Two-up in the middle band
   so the cards never squeeze to 180px, four across only once there is room. */
@media (min-width: 760px) {
    .aitfm-steps.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1080px) {
    .aitfm-steps.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The connector joins a ROW, so on the 2-up layout it must not trail off the
   right-hand card into the next line. */
@media (min-width: 760px) and (max-width: 1079.98px) {
    .aitfm-steps.is-four .aitfm-step:nth-child(2n)::after { display: none; }
}

.aitfm-step {
    position: relative;
    padding: 22px 20px 20px;
    border-radius: 20px;
    background: var(--aits-card, #fff);
    border: 1px solid var(--aits-line, #ECECEC);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .7),
        0 1px 2px rgba(15, 23, 42, .04),
        0 16px 36px -28px rgba(15, 23, 42, .5);
    transition: transform .26s var(--aitfm-ease), box-shadow .26s var(--aitfm-ease),
                border-color .22s var(--aitfm-ease);
}

/* Accent bar that grows from the centre outward on hover.
   INSET 18px on both sides and rounded at the bottom: a full-bleed bar at
   `top:0` runs straight across a corner the card is busy rounding, so its
   square ends poke out past the curve and the whole thing reads as a separate
   strip sitting on top of the card rather than part of it. Inset + centred
   growth also sidesteps the LTR/RTL `transform-origin` flip entirely.
   No `overflow: hidden` on the card — the connector has to escape it. */
.aitfm-step::before {
    content: '';
    position: absolute;
    inset-inline: 18px;
    top: 0;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--acc) 0%, var(--acc2) 100%);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .4s var(--aitfm-ease);
}

/* The connector. Vertical below 760px, horizontal above — and never after the
   last step. `39px` is the badge's centre line: 20px card padding + 19px of a
   38px badge. Same arithmetic for `top: 41px` (22px padding + 19px). */
.aitfm-step::after {
    content: '';
    position: absolute;
    inset-inline-start: 39px;
    top: 100%;
    width: 0;
    height: 14px;                        /* the grid's row gap */
    border-inline-start: 2px dashed color-mix(in oklab, var(--acc) 34%, transparent);
}

.aitfm-step:last-child::after { display: none; }

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfm-step::after { border-inline-start-color: var(--aits-blue-line, #CFE0FA); }
}

@media (min-width: 760px) {
    .aitfm-step::after {
        inset-inline-start: 100%;
        top: 41px;
        width: 18px;                     /* the grid's column gap */
        height: 0;
        border-inline-start: 0;
        border-block-start: 2px dashed color-mix(in oklab, var(--acc) 34%, transparent);
    }

    @supports not (background: color-mix(in oklab, red, blue)) {
        .aitfm-step::after { border-block-start-color: var(--aits-blue-line, #CFE0FA); }
    }
}

.aitfm-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}

.aitfm-step-n {
    position: relative;
    z-index: 1;                          /* sits above the dashed run */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px; height: 38px;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, var(--acc) 0%, var(--acc2) 100%);
    box-shadow:
        0 12px 22px -12px color-mix(in oklab, var(--acc) 88%, transparent),
        0 0 0 4px color-mix(in oklab, var(--acc) 10%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .3);
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    transition: transform .28s var(--aitfm-ease), box-shadow .28s var(--aitfm-ease);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfm-step-n {
        box-shadow: 0 12px 22px -12px rgba(54, 128, 237, .88),
                    0 0 0 4px rgba(54, 128, 237, .1),
                    inset 0 1px 0 rgba(255, 255, 255, .3);
    }
}

/* Per-step icon — the thing that stops three numbered boxes looking identical. */
.aitfm-step-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px; height: 34px;
    border-radius: 11px;
    color: var(--acc);
    background: color-mix(in oklab, var(--acc) 11%, transparent);
    transition: transform .3s var(--aitfm-ease), background .22s var(--aitfm-ease),
                color .22s var(--aitfm-ease);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfm-step-ic { background: var(--aits-blue-tint, #EAF2FD); color: var(--aits-blue-dark, #2060C0); }
}

.aitfm-step-ic svg { width: 17px; height: 17px; }

.aitfm-step-h {
    margin: 0 0 6px;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.018em;
    line-height: 1.34;
    color: var(--aits-ink, #111);
}

.aitfm-step-p {
    margin: 0;
    font-size: 13.6px;
    line-height: 1.64;
    color: var(--aits-mut, #666);
}

/* ══════════════════════════════ SECTION HEAD ══════════════════════════════ */

/* Modelled on the homepage's showcase head (`.hpx-head.is-showcase`) so the two
   surfaces read as the same design system: centred eyebrow pill, display-size
   heading whose last words carry the brand gradient, centred sub, and the same
   twinkling sparkle flanks — literally the same mask data-URI, so the flanks
   here and on the homepage are the same drawing. */
.aitfm-sec {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    margin-bottom: 4px;
    text-align: center;
}

.aitfm-sec-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px 7px 13px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--acc) 10%, transparent);
    border: 1px solid color-mix(in oklab, var(--acc) 24%, transparent);
    color: var(--acc);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: -.005em;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfm-sec-eyebrow {
        background: var(--aits-blue-tint, #EAF2FD);
        border-color: var(--aits-blue-line, #CFE0FA);
        color: var(--aits-blue-dark, #2060C0);
    }
}

.aitfm-sec-eyebrow svg { width: 14px; height: 14px; flex: none; }

/* `inline-block` so the box hugs the words: the sparkle flanks anchor to 100%
   of this element, and on a block-level h2 that is the whole column — they
   would sit at the page edges instead of beside the heading. */
.aitfm-sec-h {
    position: relative;
    display: inline-block;
    margin: 0;
    font-size: clamp(1.45rem, 1.15rem + 1.5vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -.032em;
    line-height: 1.14;
    color: var(--aits-ink, #111);
}

.aitfm-sec-hl {
    background: linear-gradient(120deg, var(--acc) 0%, var(--acc2) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    padding-inline-end: .06em;      /* stops a clipped gradient shaving descenders */
}

.aitfm-sec-p {
    margin: 0;
    max-width: 62ch;
    font-size: 14.5px;
    line-height: 1.64;
    color: var(--aits-mut, #666);
}

/* Sparkle flanks. A mask rather than a coloured data-URI, so they follow the
   page accent in BOTH themes — a baked-in fill would stay light-mode blue at
   night. They hang 84px outside the heading, so they only exist where there is
   room on both sides: hidden below 900px. */
@media (min-width: 900px) {
    .aitfm-sec-h::before,
    .aitfm-sec-h::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 74px; height: 44px;
        background: var(--acc);
        opacity: .5;
        transform: translateY(-50%);
        pointer-events: none;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-size: contain;
                mask-size: contain;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 44'%3E%3Cpath d='M20 4c1.6 6.2 3.4 8 9.6 9.6C23.4 15.2 21.6 17 20 23.2 18.4 17 16.6 15.2 10.4 13.6 16.6 12 18.4 10.2 20 4z'/%3E%3Cpath d='M47 20c1.1 4.3 2.4 5.6 6.7 6.7-4.3 1.1-5.6 2.4-6.7 6.7-1.1-4.3-2.4-5.6-6.7-6.7 4.3-1.1 5.6-2.4 6.7-6.7z'/%3E%3Ccircle cx='60' cy='11' r='2.6'/%3E%3C/svg%3E");
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 44'%3E%3Cpath d='M20 4c1.6 6.2 3.4 8 9.6 9.6C23.4 15.2 21.6 17 20 23.2 18.4 17 16.6 15.2 10.4 13.6 16.6 12 18.4 10.2 20 4z'/%3E%3Cpath d='M47 20c1.1 4.3 2.4 5.6 6.7 6.7-4.3 1.1-5.6 2.4-6.7 6.7-1.1-4.3-2.4-5.6-6.7-6.7 4.3-1.1 5.6-2.4 6.7-6.7z'/%3E%3Ccircle cx='60' cy='11' r='2.6'/%3E%3C/svg%3E");
        animation: aitfm-twinkle 4.5s ease-in-out infinite;
    }

    .aitfm-sec-h::before {
        inset-inline-end: calc(100% + 10px);
        /* scaleX(-1) is part of the transform, so the mirrored flank needs its
           own keyframes or the animation drops the mirror on frame one. */
        animation-name: aitfm-twinkle-flip;
    }

    .aitfm-sec-h::after {
        inset-inline-start: calc(100% + 10px);
        animation-delay: 2.2s;
    }
}

@keyframes aitfm-twinkle {
    0%, 100% { opacity: .3;  transform: translateY(-50%) scale(.94); }
    50%      { opacity: .6;  transform: translateY(-50%) scale(1.04); }
}

@keyframes aitfm-twinkle-flip {
    0%, 100% { opacity: .3;  transform: translateY(-50%) scale(.94) scaleX(-1); }
    50%      { opacity: .6;  transform: translateY(-50%) scale(1.04) scaleX(-1); }
}

/* ══════════════════════════════ HOVER ══════════════════════════════
   All of it in here. On touch a tap latches :hover, so an un-gated lift stays
   lifted until the reader taps elsewhere — which reads as a stuck UI. */
@media (hover: hover) and (pointer: fine) {
    .aitfm-hero:hover .aitfm-hero-ic { transform: scale(1.04) rotate(-5deg); }

    .aitfm-chip:hover {
        transform: translateY(-2px);
        border-color: color-mix(in oklab, var(--acc) 32%, transparent);
        box-shadow: 0 12px 22px -14px color-mix(in oklab, var(--acc) 75%, transparent);
    }

    .aitfm-route:hover {
        transform: translateY(-4px);
        border-color: color-mix(in oklab, var(--acc) 32%, transparent);
        box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 30px 54px -30px color-mix(in oklab, var(--acc) 78%, transparent);
    }

    .aitfm-route:hover::before { opacity: 1; }
    .aitfm-route:hover .aitfm-route-ic { transform: scale(1.06) rotate(-6deg); }
    .aitfm-route:hover .aitfm-route-v svg { transform: translateX(4px); }

    .aitfm-ctl:hover {
        border-color: var(--aits-blue-line, #CFE0FA);
        background: var(--aits-card, #fff);
    }

    .aitfm-ctl:hover .aitfm-ctl-ic { background: #DCEAFD; }
    .aitfm-sel:hover { border-color: var(--aits-blue-line, #CFE0FA); background: var(--aits-card, #fff); }

    .aitfm-check:hover {
        background: var(--aits-blue-tint-2, #F4F8FE);
        border-color: var(--aits-blue-line, #CFE0FA);
    }

    .aitfm-note-tx a:hover {
        color: var(--aits-blue, #3680ED);
        border-color: var(--aits-blue, #3680ED);
    }

    .aitfm-btn:not(:disabled):hover {
        transform: translateY(-3px);
        box-shadow: 0 26px 44px -18px rgba(54, 128, 237, .95), inset 0 1px 0 rgba(255, 255, 255, .34);
    }

    .aitfm-btn:not(:disabled):hover::after { inset-inline-start: 130%; }

    /* The inner top tint is an inset shadow, not a pseudo-element: both of this
       card's pseudo-elements are already spoken for (accent bar, connector).

       The glow is wide and weak — 60px of blur at -38px spread and 45% of the
       accent. The first version ran 54px of blur at -30px and 72%, which is
       tight and saturated enough to render as a solid coloured slab sitting
       under the card instead of light coming off it. */
    .aitfm-step:hover {
        transform: translateY(-4px);
        border-color: color-mix(in oklab, var(--acc) 26%, transparent);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .8),
            inset 0 40px 56px -52px color-mix(in oklab, var(--acc) 70%, transparent),
            0 1px 2px rgba(15, 23, 42, .04),
            0 28px 60px -38px color-mix(in oklab, var(--acc) 45%, transparent);
    }

    .aitfm-step:hover::before { transform: scaleX(1); }

    /* The tile fills with the accent instead of only tilting — a 7° rotation on
       a 34px box is almost invisible on its own. */
    .aitfm-step:hover .aitfm-step-ic {
        transform: scale(1.06) rotate(-6deg);
        color: #fff;
        background: linear-gradient(135deg, var(--acc) 0%, var(--acc2) 100%);
        box-shadow: 0 10px 18px -10px color-mix(in oklab, var(--acc) 85%, transparent);
    }

    .aitfm-step:hover .aitfm-step-n {
        transform: scale(1.06);
        box-shadow:
            0 16px 28px -14px color-mix(in oklab, var(--acc) 85%, transparent),
            0 0 0 6px color-mix(in oklab, var(--acc) 13%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, .34);
    }

    .aitfm-stat:hover {
        transform: translateY(-3px);
        border-color: color-mix(in oklab, var(--acc) 28%, transparent);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .8),
            0 1px 2px rgba(15, 23, 42, .04),
            0 26px 50px -34px color-mix(in oklab, var(--acc) 50%, transparent);
    }

    .aitfm-lane:hover {
        transform: translateY(-4px);
        border-color: color-mix(in oklab, var(--acc) 26%, transparent);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .8),
            0 1px 2px rgba(15, 23, 42, .04),
            0 34px 66px -38px color-mix(in oklab, var(--acc) 48%, transparent);
    }

    .aitfm-lane:hover .aitfm-lane-ic { transform: scale(1.05) rotate(-6deg); }

    .aitfm-lane-go:hover {
        transform: translateY(-3px);
        box-shadow: 0 26px 44px -18px color-mix(in oklab, var(--acc) 95%, transparent),
                    inset 0 1px 0 rgba(255, 255, 255, .36);
    }

    .aitfm-lane-go:hover::before      { opacity: 1; }
    .aitfm-lane-go:hover::after       { inset-inline-start: 130%; }
    .aitfm-lane-go:hover svg          { transform: translateX(5px); }

    @supports not (background: color-mix(in oklab, red, blue)) {
        .aitfm-lane-go:hover { box-shadow: 0 26px 44px -18px rgba(54, 128, 237, .95), inset 0 1px 0 rgba(255, 255, 255, .36); }
    }

    @supports not (background: color-mix(in oklab, red, blue)) {
        .aitfm-chip:hover  { border-color: var(--aits-blue-line, #CFE0FA); box-shadow: 0 12px 22px -14px rgba(54, 128, 237, .75); }
        .aitfm-route:hover { border-color: var(--aits-blue-line, #CFE0FA); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 30px 54px -30px rgba(54, 128, 237, .78); }
        .aitfm-step:hover  {
            border-color: var(--aits-blue-line, #CFE0FA);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(15, 23, 42, .04), 0 28px 60px -38px rgba(54, 128, 237, .45);
        }
        .aitfm-step:hover .aitfm-step-n  { box-shadow: 0 16px 28px -14px rgba(54, 128, 237, .85), 0 0 0 6px rgba(54, 128, 237, .13), inset 0 1px 0 rgba(255, 255, 255, .34); }
        .aitfm-step:hover .aitfm-step-ic { box-shadow: 0 10px 18px -10px rgba(54, 128, 237, .85); }
    }
}

/* Press states are safe on touch — they end when the finger lifts. */
.aitfm-btn:not(:disabled):active { transform: translateY(-1px) scale(.99); filter: brightness(.97); }
.aitfm-route:active { transform: translateY(-1px) scale(.997); }
.aitfm-chip:active { transform: translateY(0); }

/* ══════════════════════════════ DARK ══════════════════════════════
   Only what the tokens cannot carry: the mesh wash (tuned for white) and every
   coloured shadow — a blue glow reads as depth on white and as haze on black. */
body.theme-dark .aitfm-hero {
    background: linear-gradient(150deg, rgba(54, 128, 237, .1) 0%, rgba(255, 255, 255, .03) 62%);
    border-color: var(--aits-line, rgba(255, 255, 255, .09));
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 34px 70px -50px rgba(0, 0, 0, .95);
}

body.theme-dark .aitfm-hero::before { opacity: .55; filter: blur(64px); }

body.theme-dark .aitfm-hero::after {
    opacity: .4;
    background-image:
        linear-gradient(rgba(96, 164, 245, .09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(96, 164, 245, .09) 1px, transparent 1px);
}

body.theme-dark .aitfm-eyebrow {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(96, 164, 245, .26);
    box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .85);
}

body.theme-dark .aitfm-chip {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .1);
    box-shadow: none;
}

body.theme-dark .aitfm-route,
body.theme-dark .aitfm-stat,
body.theme-dark .aitfm-lane,
body.theme-dark .aitfm-step {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .09);
    /* A 70%-white inner hairline is a lit edge on white and a scratch on black,
       so the glass highlight drops to a whisper. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 1px 2px rgba(0, 0, 0, .4),
        0 18px 38px -28px rgba(0, 0, 0, .9);
}

body.theme-dark .aitfm-step-ic { color: #C4B5FD; background: rgba(255, 255, 255, .07); }

body.theme-dark .aitfm-card {
    background: rgba(255, 255, 255, .028);
    border-color: rgba(255, 255, 255, .09);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 1px 2px rgba(0, 0, 0, .4),
        0 34px 70px -50px rgba(0, 0, 0, .95);
}

body.theme-dark .aitfm-alert {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .1);
}

body.theme-dark .aitfm-alert.is-ok  { background: rgba(12, 166, 120, .14); border-color: rgba(12, 166, 120, .32); }
body.theme-dark .aitfm-alert.is-err { background: rgba(224, 49, 49, .14);  border-color: rgba(224, 49, 49, .32); }

body.theme-dark .aitfm-ctl,
body.theme-dark .aitfm-sel {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}

body.theme-dark .aitfm-ctl:focus-within,
body.theme-dark .aitfm-sel:focus {
    background: rgba(255, 255, 255, .06);
    border-color: var(--aits-blue-light, #60A4F5);
    box-shadow: 0 0 0 4px rgba(54, 128, 237, .22);
}

/* The pale blue wash is invisible on a dark card — the tile needs its own twin. */
body.theme-dark .aitfm-ctl-ic {
    color: #93BEFF;
    background: rgba(96, 164, 245, .16);
    box-shadow: inset 0 0 0 1px rgba(96, 164, 245, .28);
}

body.theme-dark .aitfm-sel-wrap::after {
    border-inline-end-color: var(--aits-mut, #A0A0A6);
    border-block-end-color: var(--aits-mut, #A0A0A6);
}

/* `.aitfm-opt` is no longer a filled chip, so it is not in this pair — giving a
   borderless label a background and a border would put the pill straight back. */
body.theme-dark .aitfm-check {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .1);
}

body.theme-dark .aitfm-note {
    background: linear-gradient(160deg, rgba(54, 128, 237, .16) 0%, rgba(54, 128, 237, .06) 100%);
    border-color: rgba(96, 164, 245, .24);
}

body.theme-dark .aitfm-note-ic {
    background: rgba(255, 255, 255, .07);
    color: #93BEFF;
    box-shadow: none;
}

body.theme-dark .aitfm-note-tx a { color: #93BEFF; border-color: rgba(96, 164, 245, .4); }
body.theme-dark .aitfm-bar { border-top-color: rgba(255, 255, 255, .14); }

body.theme-dark .aitfm-btn {
    box-shadow: 0 20px 38px -18px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .24);
}

body.theme-dark .aitfm-err { color: #FF8787; }

@media (hover: hover) and (pointer: fine) {
    body.theme-dark .aitfm-ctl:hover,
    body.theme-dark .aitfm-sel:hover { background: rgba(255, 255, 255, .06); border-color: rgba(96, 164, 245, .34); }
    body.theme-dark .aitfm-ctl:hover .aitfm-ctl-ic { background: rgba(96, 164, 245, .24); }
    body.theme-dark .aitfm-check:hover { background: rgba(96, 164, 245, .12); border-color: rgba(96, 164, 245, .3); }
    body.theme-dark .aitfm-route:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 30px 56px -30px rgba(0, 0, 0, .95); }

    body.theme-dark .aitfm-step:hover {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .07),
            inset 0 46px 60px -54px color-mix(in oklab, var(--acc) 70%, transparent),
            0 1px 2px rgba(0, 0, 0, .4),
            0 30px 56px -30px rgba(0, 0, 0, .95);
    }

    body.theme-dark .aitfm-step:hover .aitfm-step-ic { background: rgba(255, 255, 255, .11); }
    body.theme-dark .aitfm-btn:not(:disabled):hover { box-shadow: 0 28px 46px -18px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .28); }
    body.theme-dark .aitfm-note-tx a:hover { color: #BFD9FF; border-color: #93BEFF; }
}

/* ══════════════════════════ NARROW SCREENS ══════════════════════════ */

@media (max-width: 720px) {
    .aitfm { gap: 18px; }

    .aitfm-hero { padding: 24px 20px; border-radius: 22px; }
    .aitfm-hero-top { gap: 14px; }
    .aitfm-eyebrow { font-size: 10.5px; letter-spacing: .06em; }
    .aitfm-chips { gap: 8px; margin-top: 18px; }
    .aitfm-chip { padding: 7px 11px; font-size: 12px; }

    .aitfm-card { border-radius: 22px; }
    .aitfm-card-head { gap: 11px; margin-bottom: 18px; padding-bottom: 15px; }

    /* Full-width submit on phones — a right-aligned button next to a privacy
       note is a 44px target on a 360px screen. */
    .aitfm-bar { flex-direction: column; align-items: stretch; }
    .aitfm-bar-note { order: 2; justify-content: center; text-align: center; }
    .aitfm-btn { order: 1; width: 100%; }

    .aitfm-route { padding: 16px; border-radius: 18px; }
    .aitfm-step { padding: 18px 16px 16px; border-radius: 18px; }

    /* The card's inline padding drops to 16px here, so the badge centre moves
       to 16 + 19 = 35px and the vertical connector has to follow it. Leaving it
       at the desktop 39px puts the dash 4px off the badge it comes out of —
       close enough to look like a mistake rather than a line. */
    .aitfm-step::after { inset-inline-start: 35px; }
}

@media (max-width: 420px) {
    /* The icon tile inside the control costs 41px of a 300px line. The label
       above already carries the same icon, so the field keeps the width. */
    .aitfm-ctl-ic { display: none; }
    .aitfm-ctl { padding-inline: 14px; }
}

/* ══════════════════════════ REDUCED MOTION ══════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .aitfm *,
    .aitfm *::before,
    .aitfm *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

    .aitfm-route:hover,
    .aitfm-step:hover,
    .aitfm-chip:hover,
    .aitfm-btn:hover { transform: none; }

    /* The spinner is the only signal that a submit is in flight, so it keeps
       turning — just slower than the decorative animations above. */
    .aitfm-spin { animation-duration: 1.4s !important; animation-iteration-count: infinite !important; }
}

/* ══════════════════════ UNSUBSCRIBE PAGE (.aitfm-unsub-*) ══════════════════════

   /newsletter/unsubscribe. It runs on this kit rather than a stylesheet of its
   own for the reason stated at the top of this file — the three form pages had
   already proved that a fourth copy of these tokens drifts. Only what the other
   pages do not have lives here: the state medallion, the address pill, the
   reason chooser, the two button variants and the exit links.

   Same house rules as the rest of the kit: nothing truncates, every hover sits
   behind `@media (hover: hover)`, every colour is stated, dark twins are
   explicit, and logical properties keep one file serving LTR and RTL.        */

/* ── Suppress the footer's subscribe band on this page ──
   The sitewide footer ends with a "Stay Ahead with AI · Subscribe in 15
   seconds" band. Directly beneath a confirmation that we have stopped emailing
   someone, that reads as either a bug or a dark pattern, so it is hidden here
   and only here. Scoped through `:has()` on the page root — the same technique
   the card-escape block at the top of this file uses — so the footer component
   itself is untouched and every other page keeps the band. */
body:has(.aitfm-unsub) .aitsft-nlband { display: none; }

/* ── The centred head of a state card ── */
.aitfm-unsub-head {
    display: grid;
    justify-items: center;
    gap: 10px;
    text-align: center;
    padding-block: 6px 4px;
}

.aitfm-unsub-head .aitfm-card-h  { font-size: 22px; }
.aitfm-unsub-head .aitfm-card-sub { max-width: 52ch; }

/* The medallion. `data-tone` is the state, not decoration: brand while a
   decision is pending, green once it is done, grey when there was nothing to
   do, amber when the service is down. */
.aitfm-unsub-mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    margin-bottom: 4px;
    border-radius: 26px;
    color: var(--acc);
    background: linear-gradient(150deg, rgba(96, 164, 245, .20), rgba(54, 128, 237, .10));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 18px 30px -20px rgba(54, 128, 237, .85);
}

.aitfm-unsub-mark svg { width: 30px; height: 30px; }

/* A soft halo behind the tile so it reads as the focal point of the card
   without needing a heavier fill. */
.aitfm-unsub-mark::before {
    content: '';
    position: absolute;
    inset: -18px;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 45%, currentColor, transparent 68%);
    opacity: .12;
    pointer-events: none;
}

.aitfm-unsub-mark[data-tone="ok"] {
    color: var(--aits-green, #0CA678);
    background: linear-gradient(150deg, rgba(12, 166, 120, .20), rgba(12, 166, 120, .08));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 18px 30px -20px rgba(12, 166, 120, .85);
}

.aitfm-unsub-mark[data-tone="warn"] {
    color: #B45309;
    background: linear-gradient(150deg, rgba(245, 158, 11, .22), rgba(245, 158, 11, .09));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 18px 30px -20px rgba(245, 158, 11, .8);
}

.aitfm-unsub-mark[data-tone="mute"] {
    color: var(--aits-mut, #666);
    background: linear-gradient(150deg, rgba(120, 120, 130, .18), rgba(120, 120, 130, .07));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 18px 30px -22px rgba(15, 23, 42, .5);
}

/* ── The address pill ──
   The address is masked server-side; this only has to make it legible, which
   is why it is tabular rather than the body face. */
.aitfm-unsub-mail {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 100%;
    margin-top: 4px;
    padding: 9px 15px;
    border-radius: 999px;
    border: 1px solid var(--aits-line, #ECECEC);
    background: var(--aits-surface-3, #F7F7F8);
    font-size: 13.6px;
    font-weight: 700;
    letter-spacing: -.005em;
    color: var(--aits-ink, #111);
    overflow-wrap: anywhere;
}

.aitfm-unsub-mail svg { width: 15px; height: 15px; flex: none; color: var(--acc); }

/* ── Reason chooser ──
   Optional feedback, so it is visually quieter than the fields on the other
   pages: no boxed control, no required marker, no validation. */
.aitfm-unsub-reasons {
    margin: 24px 0 0;
    padding: 0;
    border: 0;
}

.aitfm-unsub-reasons legend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin-bottom: 12px;
}

/* The kit's own "optional" chip is `.aitfm-opt`, but that selector is declared
   a second time further up as the listbox option row — a 44px-tall flex block —
   and the later rule wins wherever this stylesheet loads. So this page marks
   optional fields with its own class. (The three slug-gated pages still use
   `.aitfm-opt` and still inherit that collision.) */
.aitfm-unsub-optional {
    color: var(--aits-faint, #999);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.aitfm-unsub-opts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.aitfm-unsub-opt {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border-radius: 14px;
    cursor: pointer;
    background: var(--aits-surface-3, #F7F7F8);
    border: 1px solid var(--aits-line, #ECECEC);
    font-size: 13.6px;
    font-weight: 650;
    line-height: 1.45;
    color: var(--aits-ink, #111);
    transition: border-color .2s var(--aitfm-ease), background .2s var(--aitfm-ease);
}

/* Native input for the same reason the kit keeps native checkboxes: a drawn
   replacement loses the focus ring and the keyboard behaviour. */
.aitfm-unsub-opt input[type="radio"] {
    flex: none;
    width: 19px;
    height: 19px;
    margin: 0;
    accent-color: var(--acc);
    cursor: pointer;
}

.aitfm-unsub-opt:has(input:checked) {
    border-color: var(--acc);
    background: var(--aits-blue-tint-2, #F4F8FE);
}

.aitfm-unsub-opt:focus-within {
    border-color: var(--acc);
    box-shadow: 0 0 0 3px var(--aits-focus, rgba(54, 128, 237, .22));
}

/* ── One-time code field ──
   Wide tracking and a tabular face so six digits are countable at a glance and
   a transposed pair is visible. Centred because the value is the whole field —
   there is no label text competing for the line. */
/* Sized for the segmented boxes, not the single field this used to hold: at
   340px the six tracks came out ~47px each and read as cramped chips. */
.aitfm-unsub-codef { max-width: 430px; margin-inline: auto; }

/* The label belongs over the boxes, not floating at the left edge of a centred
   column that is narrower than the card. */
.aitfm-unsub-codef .aitfm-lbl,
.aitfm-unsub-codef .aitfm-hint,
.aitfm-unsub-codef .aitfm-err { justify-content: center; text-align: center; }

.aitfm-unsub-code {
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid var(--aits-line, #ECECEC);
    background: var(--aits-surface-3, #F7F7F8);
    text-align: center;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .34em;
    /* The tracking is applied to the right of each glyph, including the last
       one, which visually shifts the string left of centre. */
    text-indent: .34em;
    color: var(--aits-ink, #111);
    transition: border-color .2s var(--aitfm-ease), box-shadow .2s var(--aitfm-ease);
}

.aitfm-unsub-code::placeholder { color: var(--aits-faint, #999); font-weight: 500; }

.aitfm-unsub-code:focus {
    outline: 0;
    border-color: var(--acc);
    box-shadow: 0 0 0 4px var(--aits-focus, rgba(54, 128, 237, .22));
}

.aitfm-unsub-code.is-invalid { border-color: var(--aits-red, #E03131); }

/* Resend / change-address. Buttons, not links — they run Livewire actions — so
   the anchor styling has to be undone rather than inherited. */
.aitfm-unsub-codebar { display: flex; flex-wrap: wrap; gap: 6px 18px; }

.aitfm-unsub-linkbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.8px;
    font-weight: 700;
    color: var(--aits-blue-dark, #2060C0);
    transition: color .18s var(--aitfm-ease);
}

.aitfm-unsub-linkbtn svg { width: 14px; height: 14px; flex: none; }
.aitfm-unsub-linkbtn:disabled { cursor: not-allowed; opacity: .55; }

.aitfm-unsub-linkbtn:focus-visible {
    outline: 3px solid var(--aits-focus, rgba(54, 128, 237, .28));
    outline-offset: 3px;
    border-radius: 6px;
}

body.theme-dark .aitfm-unsub-code {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .10);
}

body.theme-dark .aitfm-unsub-linkbtn { color: #93BEFF; }

/* ── Button variants ──
   The kit's `.aitfm-btn` is the brand-blue primary and stays that: on this page
   it is "resubscribe", the positive action. Unsubscribing is destructive, so it
   gets the site's red instead of the brand gradient — a blue, shining CTA on
   "Unsubscribe" reads as encouragement, which is not what that button means. */
.aitfm-btn.is-danger {
    background: linear-gradient(140deg, #FF6B6B -10%, var(--aits-red, #E03131) 48%, #B02525 100%);
    box-shadow: 0 18px 34px -16px rgba(224, 49, 49, .82), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.aitfm-btn.is-danger:focus-visible { outline-color: rgba(224, 49, 49, .34); }

/* The way out of the flow, so it must not look like a disabled control. */
.aitfm-btn.is-ghost,
.aitfm-btn.is-ghost:hover,
.aitfm-btn.is-ghost:focus,
.aitfm-btn.is-ghost:active,
.aitfm-btn.is-ghost:visited {
    color: var(--aits-blue-dark, #2060C0);
}

.aitfm-btn.is-ghost {
    background: var(--aits-card, #FFFFFF);
    border: 1.5px solid var(--aits-blue-line, #CFE0FA);
    box-shadow: 0 10px 22px -18px rgba(15, 23, 42, .5);
}

.aitfm-btn.is-ghost::after { display: none; }

/* ── Action row ──
   Two buttons, and on a phone they stack. The keep-subscribed link is FIRST in
   the DOM so a screen reader and a keyboard both meet the reversible option
   before the destructive one; on a wide screen the flex order puts the primary
   action on the trailing edge where the kit's single-button pages put theirs. */
.aitfm-unsub-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.aitfm-unsub-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

/* ── Exit links ── */
.aitfm-unsub-exit {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px dashed var(--aits-line-strong, #DADADA);
}

.aitfm-unsub-exit-h {
    display: block;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--aits-mut, #666);
}

.aitfm-unsub-links {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.aitfm-unsub-link {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--aits-line, #ECECEC);
    background: var(--aits-card, #FFFFFF);
    transition: transform .24s var(--aitfm-ease), border-color .2s var(--aitfm-ease),
                box-shadow .24s var(--aitfm-ease);
}

.aitfm-unsub-link-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    color: var(--acc);
    background: var(--aits-blue-tint-2, #F4F8FE);
    transition: transform .26s var(--aitfm-ease);
}

.aitfm-unsub-link-ic svg { width: 18px; height: 18px; }

.aitfm-unsub-link-tx { display: grid; gap: 2px; min-width: 0; }

.aitfm-unsub-link-tx strong {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.012em;
    color: var(--aits-ink, #111);
}

.aitfm-unsub-link-tx span {
    font-size: 12.6px;
    line-height: 1.5;
    color: var(--aits-mut, #666);
}

.aitfm-unsub-link-go {
    margin-inline-start: auto;
    flex: none;
    color: var(--aits-faint, #999);
    transition: transform .24s var(--aitfm-ease), color .2s var(--aitfm-ease);
}

.aitfm-unsub-link-go svg { width: 17px; height: 17px; }

/* ── Wider screens ── */
@media (min-width: 620px) {
    .aitfm-unsub-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 760px) {
    .aitfm-unsub-head .aitfm-card-h { font-size: 25px; }
    .aitfm-unsub-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* Three-across, so the arrow drops under the copy rather than squeezing it. */
    .aitfm-unsub-link { align-items: flex-start; }
    .aitfm-unsub-link-go { margin-top: 2px; }
}

/* ── Hover ── */
@media (hover: hover) and (pointer: fine) {
    .aitfm-unsub-opt:hover { border-color: var(--aits-blue-line, #CFE0FA); background: var(--aits-blue-tint-2, #F4F8FE); }

    .aitfm-unsub-linkbtn:not(:disabled):hover { color: var(--aits-blue, #3680ED); text-decoration: underline; }
    body.theme-dark .aitfm-unsub-linkbtn:not(:disabled):hover { color: #BFD9FF; }

    .aitfm-btn.is-ghost:hover {
        transform: translateY(-2px);
        border-color: var(--aits-blue, #3680ED);
        box-shadow: 0 18px 30px -20px rgba(54, 128, 237, .7);
    }

    .aitfm-btn.is-danger:not(:disabled):hover {
        box-shadow: 0 26px 44px -18px rgba(224, 49, 49, .95), inset 0 1px 0 rgba(255, 255, 255, .3);
    }

    .aitfm-unsub-link:hover {
        transform: translateY(-2px);
        border-color: var(--aits-blue-line, #CFE0FA);
        box-shadow: 0 20px 34px -24px rgba(15, 23, 42, .55);
    }

    .aitfm-unsub-link:hover .aitfm-unsub-link-ic { transform: scale(1.07); }
    .aitfm-unsub-link:hover .aitfm-unsub-link-go { transform: translateX(3px); color: var(--acc); }

    body.theme-dark .aitfm-unsub-opt:hover { background: rgba(255, 255, 255, .06); border-color: rgba(96, 164, 245, .34); }
    body.theme-dark .aitfm-btn.is-ghost:hover { background: rgba(255, 255, 255, .07); border-color: rgba(96, 164, 245, .5); }
    body.theme-dark .aitfm-unsub-link:hover { border-color: rgba(96, 164, 245, .34); box-shadow: 0 20px 34px -22px rgba(0, 0, 0, .85); }
}

/* ── Dark ──
   The medallions' white inner stroke and the light tints have to be restated;
   inherited they turn into a bright rim on a dark card. */
body.theme-dark .aitfm-unsub-mark {
    background: linear-gradient(150deg, rgba(96, 164, 245, .22), rgba(96, 164, 245, .08));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 20px 32px -22px rgba(0, 0, 0, .9);
}

body.theme-dark .aitfm-unsub-mark[data-tone="ok"] {
    color: #51CF66;
    background: linear-gradient(150deg, rgba(81, 207, 102, .20), rgba(81, 207, 102, .07));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 20px 32px -22px rgba(0, 0, 0, .9);
}

body.theme-dark .aitfm-unsub-mark[data-tone="warn"] {
    color: #FCD34D;
    background: linear-gradient(150deg, rgba(252, 211, 77, .18), rgba(252, 211, 77, .06));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 20px 32px -22px rgba(0, 0, 0, .9);
}

body.theme-dark .aitfm-unsub-mark[data-tone="mute"] {
    background: linear-gradient(150deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 20px 32px -24px rgba(0, 0, 0, .9);
}

body.theme-dark .aitfm-unsub-mail,
body.theme-dark .aitfm-unsub-opt {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .10);
}

body.theme-dark .aitfm-unsub-opt:has(input:checked) {
    background: rgba(96, 164, 245, .14);
    border-color: rgba(96, 164, 245, .5);
}

body.theme-dark .aitfm-btn.is-ghost,
body.theme-dark .aitfm-btn.is-ghost:hover,
body.theme-dark .aitfm-btn.is-ghost:focus,
body.theme-dark .aitfm-btn.is-ghost:active,
body.theme-dark .aitfm-btn.is-ghost:visited { color: #93BEFF; }

body.theme-dark .aitfm-btn.is-ghost {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(96, 164, 245, .32);
}

body.theme-dark .aitfm-unsub-link {
    background: rgba(255, 255, 255, .035);
    border-color: rgba(255, 255, 255, .10);
}

body.theme-dark .aitfm-unsub-link-ic { background: rgba(96, 164, 245, .16); color: #93BEFF; }

body.theme-dark .aitfm-unsub-exit { border-top-color: rgba(255, 255, 255, .12); }

/* ── Narrow ── */
@media (max-width: 720px) {
    .aitfm-unsub-mark { width: 64px; height: 64px; border-radius: 22px; }
    .aitfm-unsub-mark svg { width: 26px; height: 26px; }

    .aitfm-unsub-head .aitfm-card-h { font-size: 20px; }

    /* The kit's narrow rule makes `.aitfm-btn` full width inside `.aitfm-bar`;
       these two share a row on desktop, so they stack here rather than sitting
       side by side at half width each. */
    .aitfm-unsub-actions { width: 100%; flex-direction: column-reverse; align-items: stretch; }
    .aitfm-unsub-actions .aitfm-btn { width: 100%; }
    .aitfm-unsub-cta { flex-direction: column; align-items: stretch; }
    .aitfm-unsub-cta .aitfm-btn { width: 100%; }
}

/* ════════════════════ UNSUBSCRIBE — PREMIUM PASS (2026-08-02) ════════════════════

   Everything below is scoped under `.aitfm-unsub`, deliberately. This page shares
   its kit with /contact-us, /report-issues, /request-tool and /about, and none of
   them asked for a redesign — a bare `.aitfm-hero` rule here would silently
   restyle four other pages. Every selector therefore carries the page root.

   Section by section: aurora hero → progress rail → state card (medallion,
   address pill, reason cards, code field, actions) → exit links → footnotes.

   House rules kept from the top of this file: nothing truncates, every hover is
   inside `@media (hover: hover)` so a tap cannot latch it, every colour is
   stated, dark twins are explicit, logical properties throughout, and the whole
   thing degrades to static under `prefers-reduced-motion`.

   Per-state accent: `[data-state]` on the page root swaps --acc/--acc2 once, and
   the medallion, rail, focus rings and links all read from those. One attribute
   recolours the page as the flow advances. Semantic, not decorative — green only
   ever means "this is finished". */
.aitfm-unsub {
    --u-ease: cubic-bezier(.22, 1, .36, 1);
    --u-pop:  cubic-bezier(.34, 1.56, .64, 1);
    --u-r:    22px;
    --u-line: var(--aits-line, #ECECEC);
    --u-card: var(--aits-card, #FFFFFF);
    gap: 26px;
}

.aitfm-unsub[data-state="done"],
.aitfm-unsub[data-state="lookup_done"],
.aitfm-unsub[data-state="resubscribed"] {
    --acc:  var(--aits-green, #0CA678);
    --acc2: #38D9A9;
}

.aitfm-unsub[data-state="unavailable"] {
    --acc:  #B45309;
    --acc2: #F59E0B;
}

/* ══════════════════════════ 1 · HERO ══════════════════════════
   Was a flat tinted panel. Now a lit surface: a wide accent aurora bleeding from
   the top-left, a counter-glow bottom-right, and a hairline that fades out at
   both ends instead of ruling straight across. */
.aitfm-unsub .aitfm-hero {
    position: relative;
    overflow: hidden;
    padding: 34px 32px 30px;
    border-radius: 28px;
    border: 1px solid var(--u-line);
    background:
        radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--acc) 12%, transparent) 0%, transparent 58%),
        radial-gradient(100% 140% at 100% 100%, color-mix(in srgb, var(--acc2) 10%, transparent) 0%, transparent 55%),
        linear-gradient(180deg, var(--u-card), var(--aits-surface-3, #F7F7F8));
    box-shadow: 0 30px 60px -46px rgba(15, 23, 42, .5), inset 0 1px 0 rgba(255, 255, 255, .7);
}

/* Aurora. Sits behind the content and is the only always-on motion on the page —
   90s per turn, so it reads as light rather than animation. */
.aitfm-unsub .aitfm-hero::before {
    content: '';
    position: absolute;
    inset-block-start: -55%;
    inset-inline-start: -20%;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        color-mix(in srgb, var(--acc) 40%, transparent),
        color-mix(in srgb, var(--acc2) 34%, transparent),
        color-mix(in srgb, var(--acc) 40%, transparent));
    filter: blur(72px);
    opacity: .5;
    animation: aitfm-unsub-spin 90s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes aitfm-unsub-spin { to { transform: rotate(360deg); } }

/* Top hairline, faded at both ends — a flat 1px rule reads cheap on a lit panel. */
.aitfm-unsub .aitfm-hero::after {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--acc) 22%, var(--acc2) 78%, transparent);
    opacity: .6;
    pointer-events: none;
}

.aitfm-unsub .aitfm-hero-top,
.aitfm-unsub .aitfm-chips { position: relative; z-index: 1; }

.aitfm-unsub .aitfm-hero-top { gap: 20px; align-items: flex-start; }

/* Hero medallion — gradient fill, inner sheen, accent glow beneath. */
.aitfm-unsub .aitfm-hero-ic {
    width: 66px;
    height: 66px;
    border-radius: 22px;
    background: linear-gradient(150deg, var(--acc2), var(--acc));
    color: #fff;
    box-shadow:
        0 20px 34px -18px color-mix(in srgb, var(--acc) 85%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .45);
}

.aitfm-unsub .aitfm-hero-ic svg { width: 27px; height: 27px; }

.aitfm-unsub .aitfm-h1 {
    font-size: clamp(27px, 4.2vw, 40px);
    line-height: 1.12;
    letter-spacing: -.028em;
}

/* Gradient word. -webkit-text-fill-color is what actually clips it; `color` is
   left as the fallback for engines that ignore background-clip. */
.aitfm-unsub .aitfm-hl {
    background: linear-gradient(100deg, var(--acc), var(--acc2) 65%, var(--acc));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--acc);
}

.aitfm-unsub .aitfm-lede { max-width: 62ch; font-size: 15px; }

.aitfm-unsub .aitfm-eyebrow {
    padding: 6px 13px 6px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--acc) 28%, transparent);
    background: color-mix(in srgb, var(--acc) 8%, transparent);
    color: var(--acc);
}

/* Live dot with a breathing halo. */
.aitfm-unsub .aitfm-dot {
    position: relative;
    background: var(--acc);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 20%, transparent);
}

.aitfm-unsub .aitfm-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--acc);
    opacity: .5;
    animation: aitfm-unsub-ping 2.4s var(--u-ease) infinite;
}

@keyframes aitfm-unsub-ping {
    0%   { transform: scale(.6); opacity: .55; }
    70%  { transform: scale(2.1); opacity: 0; }
    100% { transform: scale(2.1); opacity: 0; }
}

/* Trust chips — glass pills that lift and pick up the accent on hover. */
.aitfm-unsub .aitfm-chip {
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--u-line);
    background: color-mix(in srgb, var(--u-card) 80%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 12.6px;
    font-weight: 700;
    color: var(--aits-txt, #444);
    transition: transform .24s var(--u-ease), border-color .2s var(--u-ease),
                box-shadow .24s var(--u-ease), color .2s var(--u-ease);
}

.aitfm-unsub .aitfm-chip svg { color: var(--acc); transition: transform .28s var(--u-pop); }

/* ══════════════════════════ 2 · PROGRESS RAIL ══════════════════════════
   Three states — done / now / next — carried on data-status so the markup says
   what it means and the CSS does not have to guess from position. The connector
   is drawn on the item, not between items, so a wrapped row cannot leave a line
   pointing at nothing. */
.aitfm-unsub-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aitfm-unsub-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid var(--u-line);
    background: var(--u-card);
    transition: border-color .22s var(--u-ease), box-shadow .24s var(--u-ease),
                transform .24s var(--u-ease);
}

.aitfm-unsub-step-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid var(--u-line);
    background: var(--aits-surface-3, #F7F7F8);
    color: var(--aits-mut, #666);
    font-size: 13.5px;
    font-weight: 800;
    transition: background .22s var(--u-ease), color .22s var(--u-ease),
                border-color .22s var(--u-ease), transform .28s var(--u-pop);
}

.aitfm-unsub-step-n svg { width: 15px; height: 15px; }

.aitfm-unsub-step-tx { display: grid; gap: 2px; min-width: 0; }

.aitfm-unsub-step-tx strong {
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: -.012em;
    color: var(--aits-ink, #111);
}

.aitfm-unsub-step-tx span {
    font-size: 12px;
    line-height: 1.45;
    color: var(--aits-mut, #666);
}

/* Current step: accent ring, tinted plate, and a slow pulse so the eye lands on
   it without the card having to be a different size. */
.aitfm-unsub-step[data-status="now"] {
    border-color: color-mix(in srgb, var(--acc) 45%, transparent);
    box-shadow: 0 18px 34px -26px color-mix(in srgb, var(--acc) 80%, transparent);
}

.aitfm-unsub-step[data-status="now"] .aitfm-unsub-step-n {
    background: linear-gradient(150deg, var(--acc2), var(--acc));
    border-color: transparent;
    color: #fff;
    animation: aitfm-unsub-beat 2.6s var(--u-ease) infinite;
}

@keyframes aitfm-unsub-beat {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 45%, transparent); }
    55%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--acc) 0%, transparent); }
}

.aitfm-unsub-step[data-status="done"] .aitfm-unsub-step-n {
    background: color-mix(in srgb, var(--aits-green, #0CA678) 14%, transparent);
    border-color: color-mix(in srgb, var(--aits-green, #0CA678) 32%, transparent);
    color: var(--aits-green, #0CA678);
}

.aitfm-unsub-step[data-status="next"] { opacity: .72; }

/* ══════════════════════════ 3 · STATE CARD ══════════════════════════ */
.aitfm-unsub .aitfm-card {
    position: relative;
    overflow: hidden;
    padding: 34px 32px 30px;
    border-radius: 28px;
    border: 1px solid var(--u-line);
    background:
        radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--acc) 6%, transparent) 0%, transparent 60%),
        var(--u-card);
    box-shadow: 0 34px 64px -50px rgba(15, 23, 42, .55), inset 0 1px 0 rgba(255, 255, 255, .7);
}

/* Accent bar across the card top — the same signature the mega panels use. */
.aitfm-unsub .aitfm-card::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--acc) 25%, var(--acc2) 75%, transparent);
    pointer-events: none;
}

/* Each state swaps the card contents wholesale, so the new content rises in
   rather than snapping. */
.aitfm-unsub .aitfm-card > * {
    animation: aitfm-unsub-rise .42s var(--u-ease) backwards;
}

.aitfm-unsub .aitfm-card > *:nth-child(2) { animation-delay: .06s; }
.aitfm-unsub .aitfm-card > *:nth-child(3) { animation-delay: .12s; }
.aitfm-unsub .aitfm-card > *:nth-child(4) { animation-delay: .18s; }

@keyframes aitfm-unsub-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* ── State medallion ──
   A rotating conic halo behind a solid plate. The plate is a pseudo rather than
   the element's own background on purpose: painting order is background →
   ::before → ::after → children, so a halo drawn on ::before would sit ON TOP of
   a real background. Moving the plate to ::after puts it over the halo, and the
   icon over both. z-index is not used — a negative one would drop the halo
   behind the CARD's background, where it is simply invisible. */
.aitfm-unsub-mark {
    width: 84px;
    height: 84px;
    border-radius: 28px;
    background: none;
    color: var(--acc);
    box-shadow: 0 24px 40px -26px color-mix(in srgb, var(--acc) 90%, transparent);
}

/* z-index, not just position: ::after is a positioned sibling that comes LATER
   in tree order, so with both on `z-index: auto` the plate paints over the icon
   and the medallion renders empty. It only showed in dark mode, where the plate
   is nearly transparent — which is exactly how this kind of bug ships. */
.aitfm-unsub-mark svg { position: relative; z-index: 1; width: 34px; height: 34px; }

/* Halo — first, so everything else covers it. */
.aitfm-unsub-mark::before {
    content: '';
    position: absolute;
    inset: -9px;
    border-radius: 34px;
    background: conic-gradient(from 90deg,
        transparent 0deg,
        color-mix(in srgb, var(--acc) 55%, transparent) 90deg,
        transparent 210deg);
    filter: blur(4px);
    opacity: .55;
    animation: aitfm-unsub-spin 7s linear infinite;
    pointer-events: none;
}

/* Plate — over the halo, under the icon. */
.aitfm-unsub-mark::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--acc) 22%, transparent),
        color-mix(in srgb, var(--acc) 9%, transparent)),
        var(--u-card, #FFFFFF);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
    pointer-events: none;
}

.aitfm-unsub-mark[data-tone="ok"]   { --acc: var(--aits-green, #0CA678); }
.aitfm-unsub-mark[data-tone="warn"] { --acc: #B45309; }
.aitfm-unsub-mark[data-tone="mute"] { --acc: var(--aits-mut, #666); }

/* ── Address pill ── */
.aitfm-unsub-mail {
    padding: 11px 18px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--acc) 26%, transparent);
    background: color-mix(in srgb, var(--acc) 7%, transparent);
    font-size: 14px;
    letter-spacing: -.002em;
}

.aitfm-unsub-head .aitfm-card-h { font-size: clamp(21px, 3vw, 26px); letter-spacing: -.02em; }

/* ── Reason cards ──
   The native radio is kept for behaviour and hidden visually; the marker beside
   it is the control the eye reads. `:has()` on the label does the work, so no
   JavaScript and no sibling-order gymnastics. */
.aitfm-unsub-opt input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* position: relative so the visually-hidden input above anchors to its own label
   rather than escaping to the card — a focus scroll would otherwise jump to the
   top of the page instead of to the option. */
.aitfm-unsub-opt {
    position: relative;
    gap: 12px;
    padding: 15px 16px;
    border-radius: 16px;
}

.aitfm-unsub-opt-mk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 8px;
    border: 1.5px solid var(--aits-line-strong, #DADADA);
    background: var(--u-card);
    color: #fff;
    transition: background .2s var(--u-ease), border-color .2s var(--u-ease),
                transform .26s var(--u-pop);
}

.aitfm-unsub-opt-mk svg { width: 12px; height: 12px; opacity: 0; transition: opacity .18s var(--u-ease); }

.aitfm-unsub-opt-tx { min-width: 0; }

.aitfm-unsub-opt:has(input:checked) .aitfm-unsub-opt-mk {
    background: linear-gradient(150deg, var(--acc2), var(--acc));
    border-color: transparent;
    transform: scale(1.06);
}

.aitfm-unsub-opt:has(input:checked) .aitfm-unsub-opt-mk svg { opacity: 1; }

/* The ring has to come from the label: the input it belongs to is 1px wide. */
.aitfm-unsub-opt:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 24%, transparent);
}

/* ── Code field ──
   Six digits on a plate, wide enough to be read back over the phone. */
.aitfm-unsub-code {
    padding: 20px 18px;
    border-radius: 20px;
    font-size: 30px;
    letter-spacing: .42em;
    text-indent: .42em;
    box-shadow: inset 0 2px 6px rgba(15, 23, 42, .05);
}

.aitfm-unsub-code:focus {
    background: var(--u-card);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 20%, transparent),
                0 18px 32px -24px color-mix(in srgb, var(--acc) 90%, transparent);
}

/* ── Actions ── */
.aitfm-unsub .aitfm-bar { margin-top: 26px; padding-top: 24px; }

.aitfm-unsub .aitfm-btn {
    min-height: 56px;
    border-radius: 18px;
    letter-spacing: -.01em;
}

.aitfm-unsub .aitfm-btn svg { transition: transform .3s var(--u-pop); }

/* ── Exit links ── */
.aitfm-unsub-link { padding: 15px 16px; border-radius: 18px; }

.aitfm-unsub-link-ic {
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--acc) 18%, transparent),
        color-mix(in srgb, var(--acc) 7%, transparent));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}

/* ── Footnotes ── */
.aitfm-unsub .aitfm-note {
    padding: 16px 17px;
    border-radius: 18px;
    border: 1px solid var(--u-line);
    background: var(--u-card);
    transition: transform .24s var(--u-ease), border-color .2s var(--u-ease),
                box-shadow .24s var(--u-ease);
}

.aitfm-unsub .aitfm-note-ic {
    border-radius: 13px;
    background: var(--tint-blue-bg, rgba(54, 128, 237, .13));
    color: var(--tint-blue-ink, #2060C0);
    transition: transform .28s var(--u-pop);
}

.aitfm-unsub .aitfm-note[data-tone="emerald"] .aitfm-note-ic { background: var(--tint-emerald-bg, rgba(16, 185, 129, .14)); color: var(--tint-emerald-ink, #047857); }
.aitfm-unsub .aitfm-note[data-tone="violet"]  .aitfm-note-ic { background: var(--tint-violet-bg,  rgba(139, 92, 246, .13)); color: var(--tint-violet-ink,  #6D28D9); }

/* ══════════════════════════ WIDER SCREENS ══════════════════════════ */
@media (min-width: 700px) {
    .aitfm-unsub-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
    .aitfm-unsub .aitfm-hero { padding: 42px 40px 36px; }
    .aitfm-unsub .aitfm-card { padding: 42px 40px 34px; }
}

/* ══════════════════════════ HOVER ══════════════════════════ */
@media (hover: hover) and (pointer: fine) {
    .aitfm-unsub .aitfm-chip:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--acc) 40%, transparent);
        box-shadow: 0 14px 26px -20px color-mix(in srgb, var(--acc) 90%, transparent);
        color: var(--aits-ink, #111);
    }

    .aitfm-unsub .aitfm-chip:hover svg { transform: scale(1.14) rotate(-6deg); }

    .aitfm-unsub-step:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--acc) 38%, transparent);
        box-shadow: 0 18px 32px -26px rgba(15, 23, 42, .6);
    }

    .aitfm-unsub-step:hover .aitfm-unsub-step-n { transform: scale(1.07); }

    .aitfm-unsub-opt:hover .aitfm-unsub-opt-mk { border-color: var(--acc); }

    /* The icon leans into the direction of travel. */
    .aitfm-unsub .aitfm-btn:not(:disabled):hover svg { transform: translateX(2px) scale(1.08); }
    .aitfm-unsub .aitfm-btn.is-ghost:not(:disabled):hover svg { transform: scale(1.12); }

    .aitfm-unsub .aitfm-note:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--acc) 34%, transparent);
        box-shadow: 0 20px 34px -28px rgba(15, 23, 42, .6);
    }

    .aitfm-unsub .aitfm-note:hover .aitfm-note-ic { transform: scale(1.08) rotate(-5deg); }
}

/* ══════════════════════════ DARK ══════════════════════════ */
body.theme-dark .aitfm-unsub {
    --u-line: rgba(255, 255, 255, .10);
    --u-card: rgba(255, 255, 255, .035);
}

body.theme-dark .aitfm-unsub .aitfm-hero {
    background:
        radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--acc) 20%, transparent) 0%, transparent 58%),
        radial-gradient(100% 140% at 100% 100%, color-mix(in srgb, var(--acc2) 14%, transparent) 0%, transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    box-shadow: 0 30px 60px -44px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .07);
}

body.theme-dark .aitfm-unsub .aitfm-hero::before { opacity: .34; }

body.theme-dark .aitfm-unsub .aitfm-card {
    background:
        radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--acc) 10%, transparent) 0%, transparent 60%),
        rgba(255, 255, 255, .035);
    box-shadow: 0 34px 64px -46px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .06);
}

body.theme-dark .aitfm-unsub .aitfm-chip { background: rgba(255, 255, 255, .05); color: var(--aits-ink-soft, #DDD); }

body.theme-dark .aitfm-unsub-step,
body.theme-dark .aitfm-unsub .aitfm-note { background: rgba(255, 255, 255, .04); }

body.theme-dark .aitfm-unsub-step-n {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .10);
}

body.theme-dark .aitfm-unsub-mark {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09),
                0 24px 40px -26px color-mix(in srgb, var(--acc) 70%, transparent);
}

body.theme-dark .aitfm-unsub-opt-mk {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .18);
}

body.theme-dark .aitfm-unsub .aitfm-btn.is-ghost { background: rgba(255, 255, 255, .06); }

/* ══════════════════════════ NARROW ══════════════════════════ */
@media (max-width: 720px) {
    .aitfm-unsub { gap: 18px; }

    .aitfm-unsub .aitfm-hero,
    .aitfm-unsub .aitfm-card { padding: 24px 18px 22px; border-radius: 22px; }

    /* Icon over text, both centred: side by side at 360px the heading gets ~230px
       and "Unsubscribe from AIToolsay" breaks across four lines. */
    .aitfm-unsub .aitfm-hero-top { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
    .aitfm-unsub .aitfm-hero-tx  { text-align: center; }
    .aitfm-unsub .aitfm-lede     { margin-inline: auto; }
    .aitfm-unsub .aitfm-chips    { justify-content: center; }

    .aitfm-unsub .aitfm-hero-ic { width: 58px; height: 58px; border-radius: 19px; }
    .aitfm-unsub-mark { width: 68px; height: 68px; border-radius: 23px; }
    .aitfm-unsub-mark svg { width: 28px; height: 28px; }

    .aitfm-unsub-code { font-size: 24px; letter-spacing: .3em; text-indent: .3em; padding: 16px 12px; }

    .aitfm-unsub-step { padding: 12px 14px; }
}

/* ══════════════════════════ REDUCED MOTION ══════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .aitfm-unsub .aitfm-hero::before,
    .aitfm-unsub .aitfm-dot::after,
    .aitfm-unsub-mark::before,
    .aitfm-unsub-step[data-status="now"] .aitfm-unsub-step-n,
    .aitfm-unsub .aitfm-card > * { animation: none !important; }
}

/* ══════════════════════ UNSUBSCRIBE — SEGMENTED CODE INPUT ══════════════════════
   Replaces the single wide field. One box per digit is countable at a glance,
   shows progress as it fills, and removes the thing that actually looked broken:
   a caret parked between six placeholder zeros, which read as "something is
   already typed here" rather than "type here".

   The boxes are six real inputs — a CSS-drawn substitute loses the caret, the
   keyboard, autofill and the one-time-code hint. Behaviour (advance, backspace,
   paste, arrows) is delegated from `document` in the view. */
.aitnu-otp {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(6px, 2vw, 12px);
    width: 100%;
    max-width: 400px;
    margin-inline: auto;
}

.aitnu-otp-box {
    /* Square-ish and fluid: six fixed boxes plus gaps overflow a 320px screen,
       so the track does the sizing and the box only sets its height. */
    inline-size: 100%;
    block-size: clamp(52px, 13vw, 64px);
    padding: 0;
    border-radius: 16px;
    /* line-strong, not line: at 1.5px the faint token read as no border at all
       against the card, so six empty boxes looked like grey smudges. */
    border: 1.5px solid var(--aits-line-strong, #DADADA);
    background: var(--aits-card, #FFFFFF);
    box-shadow: inset 0 2px 5px rgba(15, 23, 42, .04);
    color: var(--aits-ink, #111);
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: clamp(20px, 5.5vw, 26px);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    caret-color: var(--acc);
    transition: border-color .18s var(--u-ease, ease),
                background-color .18s var(--u-ease, ease),
                box-shadow .2s var(--u-ease, ease),
                transform .18s var(--u-ease, ease);
    /* The number spinner is meaningless for a digit box and steals width. */
    appearance: none;
    -moz-appearance: textfield;
}

.aitnu-otp-box::-webkit-outer-spin-button,
.aitnu-otp-box::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* A filled box is done — it settles to the card surface and stops competing
   with the one still waiting for input. */
.aitnu-otp-box.is-filled {
    border-color: color-mix(in srgb, var(--acc) 38%, transparent);
    background: var(--aits-card, #FFFFFF);
}

.aitnu-otp-box:focus {
    outline: 0;
    border-color: var(--acc);
    background: var(--aits-card, #FFFFFF);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 20%, transparent),
                0 14px 26px -18px color-mix(in srgb, var(--acc) 90%, transparent);
    transform: translateY(-2px);
}

.aitnu-otp.is-invalid .aitnu-otp-box {
    border-color: color-mix(in srgb, var(--aits-red, #E03131) 55%, transparent);
}
.aitnu-otp.is-invalid .aitnu-otp-box:focus {
    border-color: var(--aits-red, #E03131);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--aits-red, #E03131) 20%, transparent);
}

@media (hover: hover) and (pointer: fine) {
    .aitnu-otp-box:hover:not(:focus) {
        border-color: var(--aits-blue-line, #CFE0FA);
        background: var(--aits-card, #FFFFFF);
    }
}

body.theme-dark .aitnu-otp-box {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .05);
    color: #F1F1F2;
}
body.theme-dark .aitnu-otp-box.is-filled,
body.theme-dark .aitnu-otp-box:focus { background: rgba(255, 255, 255, .09); }

/* ── Dismiss button on the "code sent" notice ── */
.aitfm-alert { position: relative; }

.aitfm-alert-x {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 28px;
    block-size: 28px;
    margin-inline-start: auto;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--aits-mut, #666);
    cursor: pointer;
    transition: background-color .18s var(--u-ease, ease), color .18s var(--u-ease, ease);
}

.aitfm-alert-x svg { inline-size: 15px; block-size: 15px; }

@media (hover: hover) and (pointer: fine) {
    .aitfm-alert-x:hover { background: rgba(15, 23, 42, .07); color: var(--aits-ink, #111); }
    body.theme-dark .aitfm-alert-x:hover { background: rgba(255, 255, 255, .1); color: #fff; }
}

.aitfm-alert-x:focus-visible {
    outline: 3px solid var(--aits-focus, rgba(54, 128, 237, .28));
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .aitnu-otp-box:focus { transform: none; }
}

/* ══════════════════════ UNSUBSCRIBE — "CODE SENT" NOTICE ══════════════════════
   Was a flat full-bleed green bar: one long sentence on a single line, a square
   icon chip, and a stretch of empty space between the text and a far-right ×.
   It read as a system banner bolted above the card rather than part of it.

   Now a contained notice — accent rail, medallion with a halo, a two-line body
   (the answer first, the detail under it) and a real dismiss control. Green
   stays hard-coded rather than following --acc: this is a success state, and
   the page accent is itself green once the flow completes, so borrowing it
   would leave the notice saying nothing. */
.aitnu-note {
    position: relative;
    align-items: center;
    gap: 14px;
    max-width: 560px;
    margin-inline: auto;
    margin-bottom: 26px;
    padding: 15px 14px 15px 20px;
    overflow: hidden;
    border-radius: 18px;
    border-color: color-mix(in srgb, var(--aits-green, #0CA678) 24%, transparent);
    background:
        radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--aits-green, #0CA678) 12%, transparent), transparent 62%),
        linear-gradient(180deg, var(--aits-green-soft, #E6FCF3), color-mix(in srgb, var(--aits-green-soft, #E6FCF3) 55%, var(--aits-card, #fff)));
    box-shadow: 0 18px 34px -28px rgba(12, 166, 120, .75), inset 0 1px 0 rgba(255, 255, 255, .6);
    animation: aitnu-note-in .4s var(--u-ease, cubic-bezier(.22,1,.36,1)) both;
}

@keyframes aitnu-note-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* Accent rail drawn inside the radius — a border-inline-start squares the corner
   off against an 18px round, the same thing that made the toast rail look
   detached. */
.aitnu-note::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 4px;
    background: linear-gradient(180deg, var(--aits-green, #0CA678), #38D9A9);
}

.aitnu-note .aitfm-alert-ic {
    position: relative;
    inline-size: 40px;
    block-size: 40px;
    border-radius: 13px;
}

/* Halo, so the mark reads as lit rather than stamped on. Sits under the tile
   via a lower stacking order, not a negative z-index — that would drop it
   behind the notice background entirely. */
.aitnu-note .aitfm-alert-ic::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 50%, var(--aits-green, #0CA678), transparent 68%);
    opacity: .2;
    pointer-events: none;
}

.aitnu-note .aitfm-alert-ic svg { position: relative; }

.aitnu-note .aitfm-alert-tx { gap: 2px; }

.aitnu-note .aitfm-alert-tx strong {
    font-size: 14px;
    line-height: 1.45;
    color: var(--aits-green-ink, #087F5B);
}

.aitnu-note .aitfm-alert-tx span {
    font-size: 12.8px;
    line-height: 1.5;
    color: color-mix(in srgb, var(--aits-green-ink, #087F5B) 68%, var(--aits-mut, #666));
}

.aitnu-note .aitfm-alert-x {
    align-self: center;
    color: color-mix(in srgb, var(--aits-green-ink, #087F5B) 62%, transparent);
}

@media (hover: hover) and (pointer: fine) {
    .aitnu-note .aitfm-alert-x:hover {
        background: color-mix(in srgb, var(--aits-green, #0CA678) 14%, transparent);
        color: var(--aits-green-ink, #087F5B);
        transform: rotate(90deg);
    }
}

body.theme-dark .aitnu-note {
    border-color: color-mix(in srgb, #38D9A9 26%, transparent);
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(56, 217, 169, .16), transparent 62%),
        linear-gradient(180deg, rgba(56, 217, 169, .10), rgba(56, 217, 169, .04));
    box-shadow: 0 20px 36px -28px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .05);
}

body.theme-dark .aitnu-note .aitfm-alert-tx strong { color: #6EE7B7; }
body.theme-dark .aitnu-note .aitfm-alert-tx span   { color: color-mix(in srgb, #6EE7B7 62%, var(--aits-mut, #999)); }
body.theme-dark .aitnu-note .aitfm-alert-x         { color: color-mix(in srgb, #6EE7B7 70%, transparent); }
body.theme-dark .aitnu-note .aitfm-alert-x:hover   { background: rgba(56, 217, 169, .16); color: #6EE7B7; }

@media (max-width: 560px) {
    .aitnu-note { padding: 13px 10px 13px 16px; gap: 11px; border-radius: 16px; }
    .aitnu-note .aitfm-alert-ic { inline-size: 34px; block-size: 34px; border-radius: 11px; }
    .aitnu-note .aitfm-alert-tx strong { font-size: 13.2px; }
    .aitnu-note .aitfm-alert-tx span   { font-size: 12.2px; }
}

@media (prefers-reduced-motion: reduce) {
    .aitnu-note { animation: none; }
    .aitnu-note .aitfm-alert-x:hover { transform: none; }
}