/* ============================================================================
   AIToolsay — Submit a Tool (public)
   Namespace: .subp-
   ----------------------------------------------------------------------------
   Layering rules for this file:

   1. Every colour resolves through a LOCAL --subp-* token. The public token set
      (--aits-*) has no dark twins for its *-ink colours, so `color:var(--aits-blue-dark)`
      on a tint is invisible in dark mode. The local set below declares its own
      *-ink values and remaps ALL of them under body.theme-dark.
   2. Icons are FontAwesome 5 on the public site. FA6-only names render as an
      empty box, so §0 ships the shim block for the names used here.
   3. Every :hover lift/tint is inside @media (hover:hover). On touch, :hover
      latches after a tap — two "selected" plan cards is the classic symptom.
   ========================================================================== */

/* ============================================================================
   §0  FA6 → FA5 shim
   Only the names this page uses. The public layouts do not load fa6-shim.css.
   ========================================================================== */
.subp .fa-magnifying-glass:before   { content: "\f002"; }
.subp .fa-xmark:before              { content: "\f00d"; }
.subp .fa-circle-check:before       { content: "\f058"; }
.subp .fa-circle-xmark:before       { content: "\f057"; }
.subp .fa-circle-info:before        { content: "\f05a"; }
.subp .fa-circle-question:before    { content: "\f059"; }
.subp .fa-arrow-right-long:before   { content: "\f30b"; }  /* long-arrow-alt-right */
.subp .fa-arrow-up-right-from-square:before { content: "\f35d"; } /* external-link-alt */
.subp .fa-shield-halved:before      { content: "\f3ed"; }
.subp .fa-pen-to-square:before      { content: "\f044"; }
.subp .fa-arrow-pointer:before      { content: "\f245"; }
.subp .fa-chart-simple:before       { content: "\f080"; }
.subp .fa-wand-magic-sparkles:before{ content: "\f0d0"; }
.subp .fa-sliders:before            { content: "\f1de"; }
.subp .fa-rotate-left:before        { content: "\f0e2"; }
.subp .fa-repeat:before             { content: "\f01e"; }
.subp .fa-diagram-project:before    { content: "\f542"; }
.subp .fa-file-lines:before         { content: "\f15c"; }
.subp .fa-mobile-screen:before      { content: "\f3cd"; }
.subp .fa-x-twitter:before          { content: "\f099"; }
.subp .fa-badge-check:before        { content: "\f058"; }
.subp .fa-ranking-star:before       { content: "\f091"; }
.subp .fa-magnifying-glass-chart:before { content: "\f002"; }
.subp .fa-clipboard-check:before    { content: "\f46c"; }
.subp .fa-user-check:before         { content: "\f4fc"; }
.subp .fa-panorama:before           { content: "\f03e"; }
.subp .fa-eye-slash:before          { content: "\f070"; }
.subp .fa-floppy-disk:before        { content: "\f0c7"; }
.subp .fa-arrows-rotate:before      { content: "\f021"; }
.subp .fa-comment-dots:before       { content: "\f4ad"; }
.subp .fa-infinity:before           { content: "\f534"; }
.subp .fa-seedling:before           { content: "\f4d8"; }
.subp .fa-hourglass:before          { content: "\f254"; }
.subp .fa-chart-pie:before          { content: "\f200"; }
.subp .fa-square-check:before       { content: "\f14a"; }
.subp .fa-triangle-exclamation:before { content: "\f071"; }
.subp .fa-money-bill-wave:before    { content: "\f53a"; }
.subp .fa-list-check:before         { content: "\f0ae"; }
.subp .fa-folder-tree:before        { content: "\f07b"; }
.subp .fa-house:before              { content: "\f015"; }
.subp .fa-box-archive:before        { content: "\f187"; }
.subp .fa-share-nodes:before        { content: "\f1e0"; }
.subp .fa-shuffle:before            { content: "\f074"; }

/* ============================================================================
   §1  Tokens
   ========================================================================== */
.subp {
    /* ── Brand ───────────────────────────────────────────────────────────
       Everything resolves through --aits-*, so this module inherits the site
       palette and its dark twins for free and cannot drift from the brand.
       The site's own CTA gradient is blue → blue-DARK; it was blue → violet
       here, which is the mismatch this block fixes. */
    --subp-brand:      var(--aits-blue, #3680ED);
    --subp-brand-2:    var(--aits-blue-dark, #2060C0);
    --subp-brand-deep: var(--aits-blue-dark, #2060C0);
    --subp-brand-lite: var(--aits-blue-light, #60A4F5);
    --subp-brand-ink:  var(--aits-blue-dark, #2060C0);   /* text on a brand tint */
    --subp-brand-soft: var(--aits-blue-tint, #EAF2FD);
    --subp-brand-soft2:var(--aits-blue-tint-2, #F4F8FE);
    --subp-brand-line: var(--aits-blue-line, #CFE0FA);
    --subp-grad:       linear-gradient(135deg, var(--subp-brand) 0%, var(--subp-brand-2) 100%);
    --subp-grad-soft:  linear-gradient(135deg, rgba(54,128,237,.10), rgba(32,96,192,.10));

    /* Small white text on #3680ED is only 3.4:1. Anything that puts a SMALL
       white glyph on a solid brand fill (step dots, counters, badges) uses
       this deeper twin, which measures 6.0:1. Large gradient buttons keep the
       base brand so the module matches the rest of the site. */
    --subp-brand-solid: var(--aits-blue-dark, #2060C0);

    /* ── Surfaces ───────────────────────────────────────────────────────── */
    --subp-bg:      var(--aits-bg);
    --subp-bg-deep: var(--aits-bg-deep);
    --subp-card:    var(--aits-card);
    --subp-card-2:  var(--aits-surface-2);
    --subp-card-3:  var(--aits-surface-3);
    /* Translucent, and still theme-aware: backdrop-filter does nothing
       behind an opaque background, so this must NOT be a plain card token.
       §4 carries an @supports fallback for engines without color-mix. */
    --subp-glass:   color-mix(in srgb, var(--aits-card) 78%, transparent);

    /* ── Ink ─────────────────────────────────────────────────────────────
       `--subp-faint` deliberately points at --aits-mut rather than
       --aits-faint: the site's faint grey is #999, which is 2.85:1 on white,
       and this module uses the token for placeholders and field hints. That
       is instructional text, not decoration, so it needs 4.5:1. */
    --subp-ink:      var(--aits-ink);
    --subp-ink-soft: var(--aits-ink-soft);
    --subp-txt:      var(--aits-txt);
    --subp-mut:      var(--aits-mut);
    --subp-faint:    var(--aits-mut);

    /* ── Lines ──────────────────────────────────────────────────────────── */
    --subp-line:        var(--aits-line);
    --subp-line-soft:   var(--aits-line-soft);
    --subp-line-strong: var(--aits-line-strong);

    /* ── Semantic hues ───────────────────────────────────────────────────
       These stay local because --aits-green-ink and its siblings have NO dark
       twin in custom.ltr.css — used unqualified they render dark-on-dark.
       The dark block below remaps every one of them. */
    --subp-green:  #0CA678; --subp-green-soft:  #E6FCF3; --subp-green-ink:  #087F5B; --subp-green-solid:  #0A7F5C;
    --subp-amber:  #D97706; --subp-amber-soft:  #FFF5E1; --subp-amber-ink:  #B45309; --subp-amber-solid:  #A85D06;
    --subp-red:    #E03131; --subp-red-soft:    #FFECEC; --subp-red-ink:    #B71C1C; --subp-red-solid:    #C42121;
    --subp-violet: #7048E8; --subp-violet-soft: #EEE6FF; --subp-violet-ink: #4C2FBE; --subp-violet-solid: #5B34D6;
    --subp-cyan:   #0BA5C7; --subp-cyan-soft:   #E4F8FC; --subp-cyan-ink:   #05687E; --subp-cyan-solid:   #0A7F99;
    --subp-rose:   #E8497E; --subp-rose-soft:   #FDEBF1; --subp-rose-ink:   #B32458; --subp-rose-solid:   #C42B63;
    --subp-teal:   #0D9488; --subp-teal-soft:   #E3F8F5; --subp-teal-ink:   #0B6E66; --subp-teal-solid:   #0B6E66;
    --subp-indigo: #4F46E5; --subp-indigo-soft: #EBEAFE; --subp-indigo-ink: #372FB0; --subp-indigo-solid: #3B32C4;
    --subp-blue:   var(--aits-blue, #3680ED);
    --subp-blue-soft: var(--aits-blue-tint, #EAF2FD);
    --subp-blue-ink:  var(--aits-blue-dark, #2060C0);
    --subp-blue-solid:var(--aits-blue-dark, #2060C0);
    --subp-slate:  #64748B; --subp-slate-soft:  var(--aits-surface-3); --subp-slate-ink: var(--aits-mut); --subp-slate-solid: #46536B;

    /* ── Geometry — the house scale ─────────────────────────────────────── */
    --subp-r-xs: var(--r-xs, 6px);
    --subp-r-sm: var(--r-sm, 8px);
    --subp-r:    var(--r-md, 10px);
    --subp-r-md: var(--r-lg, 14px);
    --subp-r-lg: var(--r-xl, 18px);
    --subp-r-xl: var(--r-2xl, 24px);

    /* ── Elevation + motion ─────────────────────────────────────────────── */
    --subp-sh-xs: var(--sh-xs, 0 1px 2px rgba(15,23,42,.04));
    --subp-sh-sm: var(--sh-sm, 0 1px 2px rgba(15,23,42,.06));
    --subp-sh:    var(--sh-md, 0 8px 20px rgba(15,23,42,.07));
    --subp-sh-lg: var(--sh-lg, 0 12px 32px rgba(15,23,42,.12));
    --subp-sh-xl: var(--sh-pop, 0 16px 48px rgba(15,23,42,.16));
    --subp-sh-brand: var(--sh-brand, 0 6px 18px rgba(54,128,237,.28));
    --subp-ring:  var(--ring, 0 0 0 3px rgba(96,164,245,.28));

    --subp-ease: cubic-bezier(.22,.9,.32,1);
    --subp-fast: 140ms var(--subp-ease);
    --subp-mid:  var(--t, .18s) var(--subp-ease);
    --subp-slow: 420ms var(--subp-ease);

    --subp-max: 1240px;
    --subp-gap: 24px;

    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--subp-txt);
    font-size: 15.5px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
}

/* --- Dark ----------------------------------------------------------------
   Surfaces, ink and lines flip automatically because they resolve through
   --aits-*. Only the semantic hues need remapping here: each keeps its
   identity, its TINT darkens, and its -ink lifts. Greying one out is what
   makes "included" and "not included" look identical in a feature list. */
body.theme-dark .subp {
    --subp-brand-ink:  #8DBEFF;
    --subp-brand-lite: #7FB6FF;

    --subp-green-soft:  rgba(12,166,120,.16);  --subp-green-ink:  #6BE3B8;
    --subp-amber-soft:  rgba(217,119,6,.16);   --subp-amber-ink:  #F0B44E;
    --subp-red-soft:    rgba(224,49,49,.16);   --subp-red-ink:    #FF8A8A;
    --subp-violet-soft: rgba(112,72,232,.18);  --subp-violet-ink: #B79DFF;
    --subp-cyan-soft:   rgba(11,165,199,.16);  --subp-cyan-ink:   #5FD8F0;
    --subp-rose-soft:   rgba(232,73,126,.16);  --subp-rose-ink:   #FF9CBE;
    --subp-teal-soft:   rgba(13,148,136,.16);  --subp-teal-ink:   #5FD9CB;
    --subp-indigo-soft: rgba(79,70,229,.18);   --subp-indigo-ink: #A9A3FF;
    --subp-blue-ink:    #8DBEFF;
    --subp-slate-ink:   var(--aits-mut);
}

/* ============================================================================
   §2  Shell + layout
   ========================================================================== */
.subp {
    position: relative;
    background: var(--subp-bg);
    overflow-x: clip;
}
.subp.is-mesh::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 900px;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(760px 420px at 12% -6%,  rgba(54,128,237,.14), transparent 62%),
        radial-gradient(680px 400px at 88% 2%,   rgba(112,72,232,.12), transparent 60%),
        radial-gradient(900px 500px at 50% 22%,  rgba(11,165,199,.06), transparent 66%);
}
body.theme-dark .subp.is-mesh::before {
    background:
        radial-gradient(760px 420px at 12% -6%,  rgba(54,128,237,.20), transparent 62%),
        radial-gradient(680px 400px at 88% 2%,   rgba(112,72,232,.18), transparent 60%),
        radial-gradient(900px 500px at 50% 22%,  rgba(11,165,199,.08), transparent 66%);
}

.subp-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--seo-shell-max, 1600px);
    margin: 0 auto;
    padding-block: 0;
    padding-left: max(var(--seo-shell-pad, 24px), env(safe-area-inset-left));
    padding-right: max(var(--seo-shell-pad, 24px), env(safe-area-inset-right));
}
.subp-sec { position: relative; z-index: 1; padding: 64px 0; }
.subp-sec.is-tight { padding: 42px 0; }
.subp-sec.is-alt   { background: var(--subp-bg-deep); }

/* --- Section heads ------------------------------------------------------- */
.subp-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.subp-head.is-left { text-align: left; margin-left: 0; }

.subp-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    background: var(--subp-brand-soft);
    border: 1px solid var(--subp-brand-line);
    color: var(--subp-brand-ink);
    font-size: 12.5px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    margin-bottom: 16px;
}
.subp-eyebrow i { font-size: 11px; }

.subp-h2 {
    margin: 0 0 12px;
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -.022em;
    color: var(--subp-ink);
}
.subp-h2 .g {
    background: var(--subp-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.subp-sub { margin: 0; font-size: 16px; color: var(--subp-mut); line-height: 1.66; }

/* ============================================================================
   §3  Buttons
   ========================================================================== */
.subp-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--subp-r);
    font-size: 15px; font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    isolation: isolate;
    overflow: hidden;
    transition: transform var(--subp-fast), box-shadow var(--subp-mid),
                background-color var(--subp-fast), border-color var(--subp-fast), color var(--subp-fast);
}
.subp-btn:focus-visible { outline: none; box-shadow: var(--subp-ring); }
.subp-btn[disabled], .subp-btn.is-disabled { opacity: .55; pointer-events: none; }

/* Primary — brand gradient with a sweeping sheen */
.subp-btn-primary {
    background: var(--subp-grad);
    color: #fff;
    box-shadow: var(--subp-sh-brand);
}
.subp-btn-primary::after {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.26) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 620ms var(--subp-ease);
}
.subp-btn-ghost {
    background: var(--subp-card);
    color: var(--subp-ink);
    border-color: var(--subp-line-strong);
    box-shadow: var(--subp-sh-xs);
}
.subp-btn-soft {
    background: var(--subp-brand-soft);
    color: var(--subp-brand-ink);
    border-color: var(--subp-brand-line);
}
.subp-btn-quiet {
    background: transparent;
    color: var(--subp-mut);
    border-color: transparent;
    min-height: 42px; padding: 0 14px; font-weight: 600;
}
.subp-btn-lg  { min-height: 54px; padding: 0 28px; font-size: 16px; border-radius: var(--subp-r-md); }
.subp-btn-sm  { min-height: 38px; padding: 0 14px; font-size: 13.5px; border-radius: var(--subp-r-sm); }
.subp-btn-block { width: 100%; }

@media (hover: hover) and (pointer: fine) {
    .subp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(54,128,237,.38); }
    .subp-btn-primary:hover::after { transform: translateX(120%); }
    .subp-btn-ghost:hover   { transform: translateY(-2px); border-color: var(--subp-brand-line); color: var(--subp-brand-ink); box-shadow: var(--subp-sh-sm); }
    .subp-btn-soft:hover    { background: var(--subp-brand-line); }
    .subp-btn-quiet:hover   { background: var(--subp-card-3); color: var(--subp-ink); }
}
.subp-btn:active { transform: translateY(0) scale(.985); }

/* Loading state — the label swaps out, the box does not resize */
.subp-btn .subp-btn-load { display: none; }
.subp-btn.is-busy .subp-btn-txt  { visibility: hidden; }
.subp-btn.is-busy .subp-btn-load {
    display: block;
    position: absolute; inset: 0;
    display: grid; place-items: center;
}
.subp-spin {
    width: 17px; height: 17px;
    border: 2px solid rgba(255,255,255,.34);
    border-top-color: #fff;
    border-radius: 50%;
    animation: subp-spin .62s linear infinite;
}
.subp-btn-ghost .subp-spin, .subp-btn-soft .subp-spin {
    border-color: var(--subp-line-strong); border-top-color: var(--subp-brand);
}
@keyframes subp-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   §4  Cards
   ========================================================================== */
.subp-card {
    position: relative;
    background: var(--subp-card);
    border: 1px solid var(--subp-line);
    border-radius: var(--subp-r-lg);
    box-shadow: var(--subp-sh-sm);
    transition: transform var(--subp-mid), box-shadow var(--subp-mid), border-color var(--subp-mid);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .subp.is-glass .subp-card.is-glass {
        background: var(--subp-glass);
        backdrop-filter: saturate(160%) blur(14px);
        -webkit-backdrop-filter: saturate(160%) blur(14px);
    }
}
/* Without color-mix the token resolves to nothing, which would render a
   transparent card. Pin it back to the solid surface. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .subp.is-glass .subp-card.is-glass { background: var(--aits-card); }
}
.subp-card-pad { padding: 26px; }

/* Icon tiles — 11 tints, light + dark, one class each */
.subp-ic {
    display: inline-grid; place-items: center;
    width: 46px; height: 46px;
    border-radius: 14px;
    font-size: 17px;
    flex: 0 0 auto;
    transition: transform var(--subp-mid), background-color var(--subp-fast);
}
.subp-ic.is-sm { width: 38px; height: 38px; border-radius: 11px; font-size: 14px; }
.subp-ic.is-lg { width: 56px; height: 56px; border-radius: 17px; font-size: 21px; }

.subp-ic[data-tone="blue"]   { background: var(--subp-blue-soft);   color: var(--subp-blue-ink); }
.subp-ic[data-tone="violet"] { background: var(--subp-violet-soft); color: var(--subp-violet-ink); }
.subp-ic[data-tone="green"]  { background: var(--subp-green-soft);  color: var(--subp-green-ink); }
.subp-ic[data-tone="amber"]  { background: var(--subp-amber-soft);  color: var(--subp-amber-ink); }
.subp-ic[data-tone="rose"]   { background: var(--subp-rose-soft);   color: var(--subp-rose-ink); }
.subp-ic[data-tone="cyan"]   { background: var(--subp-cyan-soft);   color: var(--subp-cyan-ink); }
.subp-ic[data-tone="teal"]   { background: var(--subp-teal-soft);   color: var(--subp-teal-ink); }
.subp-ic[data-tone="indigo"] { background: var(--subp-indigo-soft); color: var(--subp-indigo-ink); }
.subp-ic[data-tone="red"]    { background: var(--subp-red-soft);    color: var(--subp-red-ink); }
.subp-ic[data-tone="slate"]  { background: var(--subp-slate-soft);  color: var(--subp-slate-ink); }
.subp-ic:not([data-tone])    { background: var(--subp-brand-soft);  color: var(--subp-brand-ink); }
.subp-ic.is-grad { background: var(--subp-grad); color: #fff; box-shadow: var(--subp-sh-brand); }

/* ============================================================================
   §5  Hero
   ========================================================================== */
.subp-hero { padding: clamp(40px, 6vw, 74px) 0 clamp(34px, 4vw, 52px); }
.subp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}
.subp-hero-badge {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 16px 7px 8px;
    border-radius: 999px;
    background: var(--subp-card);
    border: 1px solid var(--subp-line);
    box-shadow: var(--subp-sh-sm);
    font-size: 13px; font-weight: 600;
    color: var(--subp-ink-soft);
    margin-bottom: 20px;
}
.subp-hero-badge .d {
    display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 8px;
    background: var(--subp-grad); color: #fff; font-size: 11px;
}
.subp-hero h1 {
    margin: 0 0 18px;
    font-size: clamp(36px, 5.6vw, 60px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.032em;
    color: var(--subp-ink);
}
.subp-hero h1 .g {
    display: block;
    background: var(--subp-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.subp-hero-lede {
    margin: 0 0 28px;
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.66;
    color: var(--subp-mut);
    max-width: 52ch;
}
.subp-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }

.subp-hero-badges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(146px, 100%), 1fr));
    gap: 18px 20px;
}
.subp-hb { display: flex; flex-direction: column; gap: 8px; }
.subp-hb .t { font-size: 13.5px; font-weight: 700; color: var(--subp-ink); }
.subp-hb .s { font-size: 12.5px; color: var(--subp-faint); line-height: 1.45; }

/* --- Illustration -------------------------------------------------------- */
.subp-hero-art { position: relative; }
.subp-hero-art img { display: block; width: 100%; height: auto; border-radius: var(--subp-r-xl); }

/* Theme-variant art. BOTH images are rendered and swapped here, never picked
   server-side: localStorage `aits-theme` beats the theme_mode cookie on this
   site, so a server-side choice is wrong for anyone who used the toggle. */
.subp-darkonly  { display: none; }
body.theme-dark .subp-lightonly { display: none; }
body.theme-dark .subp-darkonly  { display: block; }
.subp-hero-art::before {
    content: "";
    position: absolute; inset: 8% 4% 12% 4%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(54,128,237,.28), transparent 72%);
    filter: blur(46px);
    z-index: -1;
}

/* Built-in SVG scene, used when no illustration is uploaded */
.subp-scene {
    position: relative;
    aspect-ratio: 5 / 4;
    border-radius: var(--subp-r-xl);
    background:
        radial-gradient(120% 100% at 20% 0%, rgba(54,128,237,.13), transparent 58%),
        radial-gradient(120% 100% at 90% 20%, rgba(112,72,232,.13), transparent 58%),
        var(--subp-card);
    border: 1px solid var(--subp-line);
    box-shadow: var(--subp-sh-lg);
    overflow: hidden;
    display: grid; place-items: center;
}
.subp-scene svg { width: 78%; height: auto; }

.subp-float {
    position: absolute;
    display: flex; align-items: center; gap: 11px;
    padding: 11px 15px;
    border-radius: 14px;
    background: var(--subp-card);
    border: 1px solid var(--subp-line);
    box-shadow: var(--subp-sh-lg);
    z-index: 2;
}
.subp-float .v { font-size: 15px; font-weight: 800; color: var(--subp-ink); line-height: 1.1; }
.subp-float .l { font-size: 11.5px; color: var(--subp-faint); line-height: 1.2; }
.subp-float.is-1 { left: -14px;  bottom: 16%; animation: subp-bob 5.4s ease-in-out infinite; }
.subp-float.is-2 { right: -10px; top: 12%;    animation: subp-bob 6.2s ease-in-out infinite reverse; }

@keyframes subp-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ============================================================================
   §6  Statistics strip
   ========================================================================== */
.subp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 0;
    background: var(--subp-card);
    border: 1px solid var(--subp-line);
    border-radius: var(--subp-r-lg);
    box-shadow: var(--subp-sh);
    overflow: hidden;
}
.subp-stat {
    display: flex; align-items: center; gap: 14px;
    padding: 24px 22px;
    border-right: 1px solid var(--subp-line-soft);
    transition: background-color var(--subp-fast);
}
.subp-stat:last-child { border-right: 0; }
.subp-stat .v {
    font-size: clamp(20px, 2.2vw, 25px); font-weight: 800;
    letter-spacing: -.02em; color: var(--subp-ink); line-height: 1.1;
}
.subp-stat .t { font-size: 12.5px; color: var(--subp-mut); line-height: 1.35; margin-top: 3px; }
.subp-stat .s { font-size: 11.5px; color: var(--subp-faint); margin-top: 2px; }

@media (hover: hover) and (pointer: fine) {
    .subp-stat:hover { background: var(--subp-card-3); }
    .subp-stat:hover .subp-ic { transform: scale(1.07) rotate(-4deg); }
}

/* ============================================================================
   §7  The wizard
   ========================================================================== */
.subp-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 26px;
    align-items: start;
}

.subp-panel {
    background: var(--subp-card);
    border: 1px solid var(--subp-line);
    border-radius: var(--subp-r-xl);
    box-shadow: var(--subp-sh-lg);
    overflow: hidden;
}

/* --- Progress rail ------------------------------------------------------- */
.subp-rail { padding: 26px 28px 0; }
.subp-steps {
    display: flex; align-items: flex-start;
    gap: 4px;
    list-style: none; margin: 0 0 6px; padding: 0;
}
.subp-stepitem {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    text-align: center;
}
/* The connector is drawn on the item, not between them, so it cannot get out
   of step with a flex-wrap at narrow widths. */
.subp-stepitem::before {
    content: "";
    position: absolute;
    top: 17px; left: calc(-50% + 18px); right: calc(50% + 18px);
    height: 2px;
    background: var(--subp-line);
    border-radius: 2px;
}
.subp-stepitem:first-child::before { display: none; }
.subp-stepitem.is-done::before, .subp-stepitem.is-active::before { background: var(--subp-brand); }

.subp-stepdot {
    position: relative;
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--subp-card);
    border: 2px solid var(--subp-line-strong);
    color: var(--subp-faint);
    font-size: 13.5px; font-weight: 800;
    cursor: default;
    transition: all var(--subp-mid);
    z-index: 1;
}
.subp-stepitem.is-active .subp-stepdot {
    background: var(--subp-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 0 5px var(--subp-brand-soft);
    transform: scale(1.06);
}
.subp-stepitem.is-done .subp-stepdot {
    background: var(--subp-brand-solid);
    border-color: transparent;
    color: #fff;
}
.subp-stepitem.is-clickable .subp-stepdot { cursor: pointer; }

.subp-steplabel {
    font-size: 12.5px; font-weight: 700; color: var(--subp-faint);
    line-height: 1.3;
    max-width: 100%;
    /* Never clip a step name — wrap it. Two lines is fine, hidden text is not. */
    overflow-wrap: anywhere;
}
.subp-stepitem.is-active .subp-steplabel { color: var(--subp-brand-ink); }
.subp-stepitem.is-done   .subp-steplabel { color: var(--subp-ink-soft); }

.subp-bar {
    height: 4px;
    border-radius: 999px;
    background: var(--subp-line-soft);
    overflow: hidden;
    margin: 18px 0 0;
}
.subp-bar span {
    display: block; height: 100%;
    border-radius: 999px;
    background: var(--subp-grad);
    transition: width var(--subp-slow);
}

/* --- Step body ----------------------------------------------------------- */
.subp-body { padding: 26px 28px 8px; }
.subp-body-head { margin-bottom: 22px; }
.subp-body-head h2 {
    margin: 0 0 5px;
    font-size: 21px; font-weight: 800; letter-spacing: -.018em;
    color: var(--subp-ink);
}
.subp-body-head p { margin: 0; font-size: 14px; color: var(--subp-mut); }

.subp-anim-in { animation: subp-slide var(--subp-slow) both; }
@keyframes subp-slide {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* --- Field grid ---------------------------------------------------------- */
.subp-fields {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
}
.subp-f { min-width: 0; grid-column: span 6; }
.subp-f.is-half  { grid-column: span 3; }
.subp-f.is-third { grid-column: span 2; }
.subp-f.is-two3  { grid-column: span 4; }

.subp-lab {
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 8px;
    font-size: 13.5px; font-weight: 700;
    color: var(--subp-ink-soft);
}
.subp-lab .req { color: var(--subp-red-ink); font-weight: 800; }
.subp-lab .opt {
    margin-left: auto;
    font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
    color: var(--subp-faint);
}
.subp-lab i { color: var(--subp-brand); font-size: 12.5px; }

.subp-help  { margin: 7px 0 0; font-size: 12.5px; color: var(--subp-faint); line-height: 1.5; }
.subp-err   { margin: 7px 0 0; font-size: 12.5px; font-weight: 600; color: var(--subp-red-ink); display: flex; align-items: center; gap: 6px; }
.subp-count { margin-left: auto; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--subp-faint); }
.subp-count.is-over { color: var(--subp-red-ink); font-weight: 700; }

/* --- Inputs -------------------------------------------------------------- */
.subp-in,
.subp-ta,
.subp-sel {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    background: var(--subp-card-2);
    border: 1.5px solid var(--subp-line);
    border-radius: var(--subp-r);
    color: var(--subp-ink);
    font-size: 14.5px;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color var(--subp-fast), box-shadow var(--subp-fast), background-color var(--subp-fast);
    -webkit-appearance: none; appearance: none;
}
.subp-ta  { min-height: 108px; resize: vertical; }
.subp-ta.is-tall { min-height: 168px; }
.subp-sel {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7688' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 11px;
    cursor: pointer;
}
body.theme-dark .subp-sel {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2398A1B0' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
}
.subp-in::placeholder, .subp-ta::placeholder { color: var(--subp-faint); }
@media (hover: hover) and (pointer: fine) {
    .subp-in:hover, .subp-ta:hover, .subp-sel:hover { border-color: var(--subp-line-strong); }
}
.subp-in:focus, .subp-ta:focus, .subp-sel:focus {
    outline: none;
    background: var(--subp-card);
    border-color: var(--subp-brand);
    box-shadow: var(--subp-ring);
}
.subp-f.has-error .subp-in,
.subp-f.has-error .subp-ta,
.subp-f.has-error .subp-sel { border-color: var(--subp-red); background: var(--subp-red-soft); }
.subp-f.has-error .subp-in:focus { box-shadow: 0 0 0 4px rgba(224,49,49,.16); }

/* Prefix icon variant */
.subp-inwrap { position: relative; }
.subp-inwrap > i {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    font-size: 13.5px; color: var(--subp-faint);
    pointer-events: none;
    transition: color var(--subp-fast);
}
.subp-inwrap .subp-in { padding-left: 40px; }
.subp-inwrap:focus-within > i { color: var(--subp-brand); }

/* --- Radio / checkbox cards --------------------------------------------- */
.subp-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.subp-opt {
    position: relative;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 11px 16px;
    background: var(--subp-card-2);
    border: 1.5px solid var(--subp-line);
    border-radius: var(--subp-r);
    font-size: 13.5px; font-weight: 600;
    color: var(--subp-ink-soft);
    cursor: pointer;
    transition: all var(--subp-fast);
    user-select: none;
}
/* The visual control is the label; the input is only the a11y anchor. */
.subp-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.subp-opt .m {
    display: grid; place-items: center;
    width: 19px; height: 19px;
    flex: 0 0 auto;
    border: 2px solid var(--subp-line-strong);
    border-radius: 6px;
    background: var(--subp-card);
    color: transparent;
    font-size: 10px;
    transition: all var(--subp-fast);
}
.subp-opt.is-radio .m { border-radius: 50%; }
.subp-opt.is-on {
    background: var(--subp-brand-soft);
    border-color: var(--subp-brand);
    color: var(--subp-brand-ink);
}
.subp-opt.is-on .m { background: var(--subp-brand); border-color: var(--subp-brand); color: #fff; }
.subp-opt:focus-within { box-shadow: var(--subp-ring); }

@media (hover: hover) and (pointer: fine) {
    .subp-opt:hover { border-color: var(--subp-brand-line); transform: translateY(-1px); }
}
.subp-opt:active { transform: scale(.98); }

/* --- Toggle -------------------------------------------------------------- */
.subp-tog {
    display: flex; align-items: center; gap: 13px;
    padding: 13px 16px;
    background: var(--subp-card-2);
    border: 1.5px solid var(--subp-line);
    border-radius: var(--subp-r);
    cursor: pointer;
    transition: all var(--subp-fast);
}
.subp-tog input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.subp-tog .sw {
    position: relative;
    width: 42px; height: 24px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--subp-line-strong);
    transition: background-color var(--subp-mid);
}
.subp-tog .sw::after {
    content: "";
    position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--subp-sh-xs);
    transition: transform var(--subp-mid);
}
.subp-tog.is-on { border-color: var(--subp-brand-line); background: var(--subp-brand-soft2); }
.subp-tog.is-on .sw { background: var(--subp-brand); }
.subp-tog.is-on .sw::after { transform: translateX(18px); }
.subp-tog .tl { font-size: 13.5px; font-weight: 600; color: var(--subp-ink-soft); }
.subp-tog:focus-within { box-shadow: var(--subp-ring); }

/* --- Acceptance rows ----------------------------------------------------- */
.subp-acc {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    background: var(--subp-card-2);
    border: 1.5px solid var(--subp-line);
    border-radius: var(--subp-r);
    cursor: pointer;
    transition: all var(--subp-fast);
}
.subp-acc input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.subp-acc .m {
    display: grid; place-items: center;
    width: 20px; height: 20px;
    flex: 0 0 auto;
    margin-top: 1px;
    border: 2px solid var(--subp-line-strong);
    border-radius: 6px;
    background: var(--subp-card);
    color: transparent;
    font-size: 10px;
    transition: all var(--subp-fast);
}
.subp-acc.is-on { border-color: var(--subp-brand-line); background: var(--subp-brand-soft2); }
.subp-acc.is-on .m { background: var(--subp-brand); border-color: var(--subp-brand); color: #fff; }
.subp-acc .tl { font-size: 13.5px; line-height: 1.55; color: var(--subp-ink-soft); }
.subp-acc .tl a { color: var(--subp-brand-ink); font-weight: 600; }
.subp-acc:focus-within { box-shadow: var(--subp-ring); }
.subp-f.has-error .subp-acc { border-color: var(--subp-red); }

/* --- Tag input ----------------------------------------------------------- */
.subp-tags {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    min-height: 48px;
    padding: 8px 10px;
    background: var(--subp-card-2);
    border: 1.5px solid var(--subp-line);
    border-radius: var(--subp-r);
    transition: border-color var(--subp-fast), box-shadow var(--subp-fast);
}
.subp-tags:focus-within { border-color: var(--subp-brand); background: var(--subp-card); box-shadow: var(--subp-ring); }
.subp-tags input {
    flex: 1 1 130px;
    min-width: 130px;
    border: 0; background: transparent; outline: none;
    font-size: 14px; color: var(--subp-ink);
    padding: 4px 2px;
}
.subp-tag {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 8px 5px 11px;
    border-radius: 8px;
    background: var(--subp-brand-soft);
    border: 1px solid var(--subp-brand-line);
    color: var(--subp-brand-ink);
    font-size: 12.5px; font-weight: 600;
    max-width: 100%;
}
.subp-tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subp-tag button {
    display: grid; place-items: center;
    width: 17px; height: 17px;
    flex: 0 0 auto;
    border: 0; border-radius: 5px;
    background: transparent;
    color: inherit; font-size: 10px;
    cursor: pointer;
    transition: background-color var(--subp-fast);
}
@media (hover: hover) and (pointer: fine) { .subp-tag button:hover { background: rgba(0,0,0,.10); } }
@media (hover: hover) and (pointer: fine) {
    body.theme-dark .subp-tag button:hover { background: rgba(255,255,255,.14); }
}

/* --- Upload zone --------------------------------------------------------- */
.subp-drop {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px;
    min-height: 128px;
    padding: 22px;
    text-align: center;
    background:
        linear-gradient(var(--subp-card-2), var(--subp-card-2)) padding-box,
        var(--subp-grad-soft) border-box;
    border: 2px dashed var(--subp-line-strong);
    border-radius: var(--subp-r-md);
    cursor: pointer;
    transition: all var(--subp-mid);
}
.subp-drop input[type="file"] {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}
.subp-drop .di {
    display: grid; place-items: center;
    width: 42px; height: 42px;
    border-radius: 13px;
    background: var(--subp-brand-soft);
    color: var(--subp-brand-ink);
    font-size: 16px;
    transition: transform var(--subp-mid);
}
.subp-drop .dt { font-size: 13.5px; font-weight: 700; color: var(--subp-ink-soft); }
.subp-drop .dt b { color: var(--subp-brand-ink); }
.subp-drop .ds { font-size: 12px; color: var(--subp-faint); }
.subp-drop.is-drag, .subp-drop:focus-within {
    border-color: var(--subp-brand);
    background: var(--subp-brand-soft2);
}
@media (hover: hover) and (pointer: fine) {
    .subp-drop:hover { border-color: var(--subp-brand-line); background: var(--subp-brand-soft2); }
    .subp-drop:hover .di { transform: translateY(-2px) scale(1.05); }
}

.subp-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.subp-thumb {
    position: relative;
    width: 92px; height: 92px;
    border-radius: var(--subp-r);
    overflow: hidden;
    background: var(--subp-card-3);
    border: 1px solid var(--subp-line);
    box-shadow: var(--subp-sh-xs);
}
.subp-thumb img, .subp-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.subp-thumb .ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--subp-faint); font-size: 20px; }
.subp-thumb button {
    position: absolute; top: 5px; right: 5px;
    display: grid; place-items: center;
    width: 22px; height: 22px;
    border: 0; border-radius: 7px;
    background: rgba(15,22,38,.72);
    color: #fff; font-size: 10px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background-color var(--subp-fast), transform var(--subp-fast);
}
@media (hover: hover) and (pointer: fine) { .subp-thumb button:hover { background: var(--subp-red-solid); transform: scale(1.08); } }

.subp-upload-bar {
    height: 4px; margin-top: 10px;
    border-radius: 999px;
    background: var(--subp-line-soft);
    overflow: hidden;
}
.subp-upload-bar span { display: block; height: 100%; background: var(--subp-grad); transition: width 160ms linear; }

/* --- Sticky action bar --------------------------------------------------- */
.subp-actions {
    position: sticky; bottom: 0;
    display: flex; align-items: center; gap: 12px;
    margin-top: 26px;
    padding: 18px 28px;
    background: var(--subp-card);
    border-top: 1px solid var(--subp-line);
    /* The bar sits inside a rounded panel; matching the radius stops a 1px
       square corner poking out under the curve. */
    border-radius: 0 0 var(--subp-r-xl) var(--subp-r-xl);
    z-index: 5;
}
.subp-actions .sp { margin-left: auto; }
.subp-actions .hint { font-size: 12.5px; color: var(--subp-faint); }

/* --- Summary rows (review step) ----------------------------------------- */
.subp-sum { display: flex; flex-direction: column; gap: 18px; }
.subp-sumgroup {
    border: 1px solid var(--subp-line);
    border-radius: var(--subp-r-md);
    overflow: hidden;
    background: var(--subp-card-2);
}
.subp-sumhead {
    display: flex; align-items: center; gap: 11px;
    padding: 13px 16px;
    background: var(--subp-card-3);
    border-bottom: 1px solid var(--subp-line);
    font-size: 13.5px; font-weight: 700; color: var(--subp-ink);
}
.subp-sumhead button {
    margin-left: auto;
    border: 0; background: transparent;
    color: var(--subp-brand-ink); font-size: 12.5px; font-weight: 700;
    cursor: pointer; padding: 4px 8px; border-radius: 7px;
}
@media (hover: hover) and (pointer: fine) { .subp-sumhead button:hover { background: var(--subp-brand-soft); } }
.subp-sumrow {
    display: grid;
    grid-template-columns: minmax(120px, 32%) minmax(0, 1fr);
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--subp-line-soft);
    font-size: 13.5px;
}
.subp-sumrow:last-child { border-bottom: 0; }
.subp-sumrow dt { color: var(--subp-faint); font-weight: 600; margin: 0; }
.subp-sumrow dd { color: var(--subp-ink-soft); margin: 0; overflow-wrap: anywhere; }

/* ============================================================================
   §8  Wizard sidebar
   ========================================================================== */
.subp-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 92px; }

/* Plan card — the gradient block from the reference */
.subp-planbox {
    position: relative;
    padding: 24px;
    border-radius: var(--subp-r-xl);
    background: var(--subp-grad);
    color: #fff;
    box-shadow: var(--subp-sh-lg);
    overflow: hidden;
}
.subp-planbox::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 88% 0%, rgba(255,255,255,.20), transparent 60%);
    pointer-events: none;
}
.subp-planbox > * { position: relative; }
.subp-plantag {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.20);
    border: 1px solid rgba(255,255,255,.26);
    font-size: 12px; font-weight: 700;
    margin-bottom: 14px;
}
.subp-planprice { display: flex; align-items: baseline; gap: 9px; }
.subp-planprice .p { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.subp-planprice .c { font-size: 15px; opacity: .72; text-decoration: line-through; }
.subp-plannote { margin: 7px 0 18px; font-size: 13px; opacity: .86; }
.subp-planfeats { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.subp-planfeats li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; }
.subp-planfeats li i { margin-top: 2px; font-size: 12px; opacity: .95; }
.subp-planfeats li.is-off { opacity: .55; text-decoration: line-through; }
.subp-planbox .subp-btn-primary {
    background: #fff; color: var(--subp-brand-deep);
    box-shadow: 0 8px 22px rgba(6,17,44,.24);
}
@media (hover: hover) and (pointer: fine) {
    .subp-planbox .subp-btn-primary:hover { background: #fff; box-shadow: 0 14px 30px rgba(6,17,44,.30); }
}
.subp-plansecure {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: 12px;
    font-size: 11.5px; opacity: .82;
}

/* Guidelines + help cards */
.subp-mini { padding: 20px 22px; }
.subp-mini h3 {
    display: flex; align-items: center; gap: 9px;
    margin: 0 0 14px;
    font-size: 14.5px; font-weight: 700; color: var(--subp-ink);
}
.subp-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.subp-checks li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 13px; line-height: 1.5; color: var(--subp-txt);
}
.subp-checks li i { margin-top: 3px; font-size: 11.5px; color: var(--subp-green-ink); flex: 0 0 auto; }
.subp-link {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 14px;
    font-size: 13px; font-weight: 700;
    color: var(--subp-brand-ink);
    text-decoration: none;
}
.subp-link i { transition: transform var(--subp-fast); }
@media (hover: hover) and (pointer: fine) { .subp-link:hover i { transform: translateX(3px); } }

.subp-helprow {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 13px;
    border-radius: var(--subp-r);
    background: var(--subp-card-2);
    border: 1px solid var(--subp-line);
    font-size: 13px; font-weight: 600;
    color: var(--subp-ink-soft);
    text-decoration: none;
    transition: all var(--subp-fast);
}
@media (hover: hover) and (pointer: fine) {
    .subp-helprow:hover { border-color: var(--subp-brand-line); background: var(--subp-brand-soft2); color: var(--subp-brand-ink); }
}

/* ============================================================================
   §9  Plans grid
   ========================================================================== */
.subp-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 20px;
    align-items: stretch;
}
.subp-plan {
    position: relative;
    display: flex; flex-direction: column;
    padding: 26px 24px;
    background: var(--subp-card);
    border: 1.5px solid var(--subp-line);
    border-radius: var(--subp-r-xl);
    box-shadow: var(--subp-sh-sm);
    text-align: left;
    cursor: pointer;
    transition: transform var(--subp-mid), box-shadow var(--subp-mid), border-color var(--subp-mid);
}
.subp-plan::before {
    content: "";
    position: absolute; inset: 0 0 auto 0;
    height: 3px;
    border-radius: var(--subp-r-xl) var(--subp-r-xl) 0 0;
    background: var(--subp-grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--subp-mid);
}
.subp-plan.is-on { border-color: var(--subp-brand); box-shadow: var(--subp-sh-lg); }
.subp-plan.is-on::before { transform: scaleX(1); }
.subp-plan.is-featured { border-color: var(--subp-brand-line); }

.subp-planbadge {
    position: absolute; top: -11px; left: 24px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--subp-grad);
    color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: .03em;
    box-shadow: var(--subp-sh-brand);
}
.subp-plan h3 { margin: 14px 0 4px; font-size: 17px; font-weight: 800; color: var(--subp-ink); }
.subp-plan .tag { margin: 0 0 16px; font-size: 13px; color: var(--subp-mut); }
.subp-plan .price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.subp-plan .price .p { font-size: 32px; font-weight: 800; letter-spacing: -.03em; color: var(--subp-ink); line-height: 1; }
.subp-plan .price .c { font-size: 14px; color: var(--subp-faint); text-decoration: line-through; }
.subp-plan .note { margin: 0 0 18px; font-size: 12.5px; color: var(--subp-faint); }
.subp-plan ul { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; }
.subp-plan ul li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.5; color: var(--subp-txt); }
.subp-plan ul li i { margin-top: 3px; font-size: 11.5px; flex: 0 0 auto; color: var(--subp-green-ink); }
.subp-plan ul li.is-off { color: var(--subp-faint); }
.subp-plan ul li.is-off i { color: var(--subp-faint); }
.subp-plan ul li.is-hl { font-weight: 700; color: var(--subp-ink-soft); }
.subp-plan .meta {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 18px;
}
.subp-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    background: var(--subp-slate-soft);
    color: var(--subp-slate-ink);
}
.subp-pill[data-tone="blue"]   { background: var(--subp-blue-soft);   color: var(--subp-blue-ink); }
.subp-pill[data-tone="green"]  { background: var(--subp-green-soft);  color: var(--subp-green-ink); }
.subp-pill[data-tone="amber"]  { background: var(--subp-amber-soft);  color: var(--subp-amber-ink); }
.subp-pill[data-tone="violet"] { background: var(--subp-violet-soft); color: var(--subp-violet-ink); }
.subp-pill[data-tone="red"]    { background: var(--subp-red-soft);    color: var(--subp-red-ink); }
.subp-pill[data-tone="cyan"]   { background: var(--subp-cyan-soft);   color: var(--subp-cyan-ink); }
.subp-pill[data-tone="rose"]   { background: var(--subp-rose-soft);   color: var(--subp-rose-ink); }
.subp-pill[data-tone="teal"]   { background: var(--subp-teal-soft);   color: var(--subp-teal-ink); }
.subp-pill[data-tone="indigo"] { background: var(--subp-indigo-soft); color: var(--subp-indigo-ink); }

@media (hover: hover) and (pointer: fine) {
    .subp-plan:hover { transform: translateY(-4px); box-shadow: var(--subp-sh-lg); border-color: var(--subp-brand-line); }
    .subp-plan:hover::before { transform: scaleX(1); }
}
.subp-plan:active { transform: translateY(-1px) scale(.995); }

/* ============================================================================
   §10  Benefits / trust grids
   ========================================================================== */
.subp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(248px, 100%), 1fr));
    gap: 18px;
}
.subp-tile {
    position: relative;
    padding: 24px 22px;
    background: var(--subp-card);
    border: 1px solid var(--subp-line);
    border-radius: var(--subp-r-lg);
    box-shadow: var(--subp-sh-xs);
    transition: transform var(--subp-mid), box-shadow var(--subp-mid), border-color var(--subp-mid);
    overflow: hidden;
}
.subp-tile h3 { margin: 15px 0 7px; font-size: 15.5px; font-weight: 700; color: var(--subp-ink); }
.subp-tile p  { margin: 0; font-size: 13.5px; line-height: 1.62; color: var(--subp-mut); }
@media (hover: hover) and (pointer: fine) {
    .subp-tile:hover { transform: translateY(-4px); box-shadow: var(--subp-sh); border-color: var(--subp-brand-line); }
    .subp-tile:hover .subp-ic { transform: scale(1.08) rotate(-5deg); }
}

/* ============================================================================
   §11  Process timeline
   ========================================================================== */
.subp-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(206px, 100%), 1fr));
    gap: 18px;
}
.subp-node {
    position: relative;
    padding: 24px 20px 20px;
    background: var(--subp-card);
    border: 1px solid var(--subp-line);
    border-radius: var(--subp-r-lg);
    box-shadow: var(--subp-sh-xs);
    transition: transform var(--subp-mid), box-shadow var(--subp-mid), border-color var(--subp-mid);
}
.subp-node .n {
    position: absolute; top: -13px; left: 20px;
    display: grid; place-items: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--subp-grad);
    color: #fff;
    font-size: 12.5px; font-weight: 800;
    box-shadow: var(--subp-sh-brand);
}
.subp-node h3 { margin: 12px 0 6px; font-size: 15px; font-weight: 700; color: var(--subp-ink); }
.subp-node p  { margin: 0; font-size: 13px; line-height: 1.58; color: var(--subp-mut); }
/* Connector arrow, desktop only — on a wrapped grid it would point at nothing. */
@media (min-width: 1000px) {
    .subp-node::after {
        content: "";
        position: absolute; top: 50%; right: -13px;
        width: 9px; height: 9px;
        border-top: 2px solid var(--subp-line-strong);
        border-right: 2px solid var(--subp-line-strong);
        transform: translateY(-50%) rotate(45deg);
    }
    .subp-flow > .subp-node:last-child::after { display: none; }
}
@media (hover: hover) and (pointer: fine) {
    .subp-node:hover { transform: translateY(-4px); box-shadow: var(--subp-sh); border-color: var(--subp-brand-line); }
}

/* ============================================================================
   §12  FAQ
   ========================================================================== */
.subp-faqtools {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-bottom: 24px; justify-content: center;
}
.subp-faqsearch { position: relative; flex: 1 1 280px; max-width: 380px; }
.subp-faqsearch i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--subp-faint); font-size: 13px; }
.subp-faqsearch input {
    width: 100%; min-height: 46px;
    padding: 10px 14px 10px 40px;
    background: var(--subp-card);
    border: 1.5px solid var(--subp-line);
    border-radius: 999px;
    color: var(--subp-ink); font-size: 14px;
    transition: all var(--subp-fast);
}
.subp-faqsearch input:focus { outline: none; border-color: var(--subp-brand); box-shadow: var(--subp-ring); }

.subp-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 15px;
    border-radius: 999px;
    background: var(--subp-card);
    border: 1.5px solid var(--subp-line);
    color: var(--subp-mut);
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: all var(--subp-fast);
}
.subp-chip.is-on { background: var(--subp-brand-solid); border-color: var(--subp-brand-solid); color: #fff; box-shadow: var(--subp-sh-brand); }
@media (hover: hover) and (pointer: fine) {
    .subp-chip:hover { border-color: var(--subp-brand-line); color: var(--subp-brand-ink); }
    .subp-chip.is-on:hover { color: #fff; }
}

.subp-faqs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: 14px 20px;
    align-items: start;
}
.subp-faq {
    background: var(--subp-card);
    border: 1px solid var(--subp-line);
    border-radius: var(--subp-r-md);
    box-shadow: var(--subp-sh-xs);
    overflow: hidden;
    transition: border-color var(--subp-fast), box-shadow var(--subp-fast);
}
.subp-faq > summary {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 17px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.subp-faq > summary::-webkit-details-marker { display: none; }
.subp-faq h3 { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--subp-ink); line-height: 1.5; flex: 1 1 auto; }
.subp-faqmark {
    position: relative;
    width: 20px; height: 20px;
    flex: 0 0 auto;
    margin-top: 2px;
    border-radius: 6px;
    background: var(--subp-brand-soft);
    transition: background-color var(--subp-fast);
}
/* CSS plus→minus: no icon font dependency, and it cannot render as an empty box. */
.subp-faqmark::before, .subp-faqmark::after {
    content: "";
    position: absolute; top: 50%; left: 50%;
    background: var(--subp-brand-ink);
    border-radius: 1px;
    transform: translate(-50%, -50%);
    transition: transform var(--subp-mid), opacity var(--subp-fast);
}
.subp-faqmark::before { width: 10px; height: 2px; }
.subp-faqmark::after  { width: 2px;  height: 10px; }
.subp-faq[open] .subp-faqmark::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.subp-faq[open] { border-color: var(--subp-brand-line); box-shadow: var(--subp-sh-sm); }
.subp-faqbody { padding: 0 20px 18px 54px; font-size: 13.8px; line-height: 1.7; color: var(--subp-txt); }
.subp-faqbody p:last-child { margin-bottom: 0; }
.subp-faqbody a { color: var(--subp-brand-ink); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .subp-faq:hover { border-color: var(--subp-brand-line); } }

.subp-faqmore {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
    margin-top: 26px; padding: 22px 26px;
    background: var(--subp-brand-soft2);
    border: 1px solid var(--subp-brand-line);
    border-radius: var(--subp-r-lg);
}
.subp-faqmore .t { font-size: 15px; font-weight: 700; color: var(--subp-ink); }
.subp-faqmore .s { font-size: 13px; color: var(--subp-mut); margin-top: 2px; }
.subp-faqmore .subp-btn { margin-left: auto; }

/* ============================================================================
   §13  Final CTA band
   ========================================================================== */
.subp-cta {
    position: relative;
    display: flex; flex-wrap: wrap; align-items: center; gap: 26px;
    padding: clamp(30px, 4vw, 46px);
    border-radius: var(--subp-r-xl);
    /* The brand gradient, not a bespoke navy. Hard-coding a third colour
       here is what made this band the one element on the page that did
       not move when the palette changed. */
    background: var(--subp-grad);
    color: #fff;
    box-shadow: var(--subp-sh-xl);
    overflow: hidden;
}
.subp-cta::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(620px 300px at 8% 110%, rgba(255,255,255,.16), transparent 62%),
        radial-gradient(520px 280px at 92% -20%, rgba(255,255,255,.12), transparent 60%);
    pointer-events: none;
}
.subp-cta > * { position: relative; }
.subp-cta-main { flex: 1 1 380px; min-width: 0; }
.subp-cta h2 { margin: 0 0 10px; font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -.024em; }
.subp-cta p  { margin: 0 0 22px; font-size: 15px; line-height: 1.62; color: rgba(255,255,255,.80); max-width: 56ch; }
.subp-cta .subp-btn-primary { background: #fff; color: #14204A; box-shadow: 0 10px 28px rgba(0,0,0,.30); }
.subp-cta-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.subp-ctabadge {
    display: flex; align-items: center; gap: 11px;
    padding: 13px 17px;
    border-radius: var(--subp-r-md);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(8px);
}
.subp-ctabadge i { font-size: 15px; color: #9FC5FF; }
.subp-ctabadge .t { font-size: 13px; font-weight: 700; }
.subp-ctabadge .s { font-size: 11.5px; color: rgba(255,255,255,.62); }

/* ============================================================================
   §14  Logo strip
   ========================================================================== */
.subp-logos { text-align: center; }
.subp-logos .t {
    font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--subp-faint); margin-bottom: 22px;
}
.subp-logorow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 34px; }
.subp-logorow img {
    height: 28px; width: auto;
    opacity: .55; filter: grayscale(1);
    transition: opacity var(--subp-fast), filter var(--subp-fast);
}
@media (hover: hover) and (pointer: fine) { .subp-logorow img:hover { opacity: 1; filter: none; } }
body.theme-dark .subp-logorow img { filter: grayscale(1) invert(1) brightness(1.6); opacity: .5; }
@media (hover: hover) and (pointer: fine) {
    body.theme-dark .subp-logorow img:hover { filter: invert(1) brightness(1.8); opacity: .95; }
}

/* ============================================================================
   §15  Notices
   ========================================================================== */
.subp-note {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 17px;
    border-radius: var(--subp-r);
    border: 1px solid var(--subp-line);
    background: var(--subp-card-2);
    font-size: 13.5px; line-height: 1.55;
    color: var(--subp-ink-soft);
    margin-bottom: 18px;
}
.subp-note i { margin-top: 2px; font-size: 14px; flex: 0 0 auto; }
.subp-note.is-info  { background: var(--subp-blue-soft);  border-color: var(--subp-brand-line); color: var(--subp-blue-ink); }
.subp-note.is-warn  { background: var(--subp-amber-soft); border-color: transparent; color: var(--subp-amber-ink); }
.subp-note.is-error { background: var(--subp-red-soft);   border-color: transparent; color: var(--subp-red-ink); }
.subp-note.is-ok    { background: var(--subp-green-soft); border-color: transparent; color: var(--subp-green-ink); }

.subp-save {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 600;
    color: var(--subp-green-ink);
    opacity: 0;
    transition: opacity var(--subp-mid);
}
.subp-save.is-on { opacity: 1; }

/* ============================================================================
   §16  Status page
   ========================================================================== */
.subp-status-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
    padding: 26px;
    margin-bottom: 22px;
}
.subp-logo {
    display: grid; place-items: center;
    width: 66px; height: 66px;
    flex: 0 0 auto;
    border-radius: 18px;
    background: var(--subp-brand-soft);
    color: var(--subp-brand-ink);
    font-size: 22px; font-weight: 800;
    overflow: hidden;
    border: 1px solid var(--subp-line);
}
.subp-logo img { width: 100%; height: 100%; object-fit: cover; }
.subp-status-head h1 { margin: 0 0 5px; font-size: 24px; font-weight: 800; letter-spacing: -.022em; color: var(--subp-ink); }
.subp-status-head .ref { font-size: 13px; color: var(--subp-faint); font-variant-numeric: tabular-nums; }

.subp-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 12.5px; font-weight: 700;
    background: var(--subp-slate-soft); color: var(--subp-slate-ink);
}
.subp-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.subp-badge[data-tone="blue"]   { background: var(--subp-blue-soft);   color: var(--subp-blue-ink); }
.subp-badge[data-tone="violet"] { background: var(--subp-violet-soft); color: var(--subp-violet-ink); }
.subp-badge[data-tone="green"]  { background: var(--subp-green-soft);  color: var(--subp-green-ink); }
.subp-badge[data-tone="amber"]  { background: var(--subp-amber-soft);  color: var(--subp-amber-ink); }
.subp-badge[data-tone="red"]    { background: var(--subp-red-soft);    color: var(--subp-red-ink); }
.subp-badge[data-tone="cyan"]   { background: var(--subp-cyan-soft);   color: var(--subp-cyan-ink); }
.subp-badge[data-tone="slate"]  { background: var(--subp-slate-soft);  color: var(--subp-slate-ink); }

/* Vertical timeline */
.subp-track { position: relative; padding-left: 34px; }
.subp-track::before {
    content: "";
    position: absolute; left: 13px; top: 8px; bottom: 8px;
    width: 2px;
    background: var(--subp-line);
    border-radius: 2px;
}
.subp-tick { position: relative; padding-bottom: 24px; }
.subp-tick:last-child { padding-bottom: 0; }
.subp-tick::before {
    content: "";
    position: absolute; left: -27px; top: 4px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--subp-card);
    border: 2px solid var(--subp-line-strong);
}
.subp-tick.is-done::before { background: var(--subp-green); border-color: var(--subp-green); }
.subp-tick.is-now::before  { background: var(--subp-brand); border-color: var(--subp-brand); box-shadow: 0 0 0 5px var(--subp-brand-soft); }
.subp-tick .tt { font-size: 14px; font-weight: 700; color: var(--subp-ink); }
.subp-tick .ts { font-size: 12.5px; color: var(--subp-faint); margin-top: 2px; }
.subp-tick .tb { font-size: 13px; color: var(--subp-txt); margin-top: 6px; line-height: 1.6; }

/* Progress ring */
.subp-ring { position: relative; width: 92px; height: 92px; flex: 0 0 auto; }
.subp-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.subp-ring .bg { stroke: var(--subp-line); }
.subp-ring .fg { stroke: url(#subpGrad); stroke-linecap: round; transition: stroke-dashoffset var(--subp-slow); }
.subp-ring .v {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-size: 18px; font-weight: 800; color: var(--subp-ink);
}

/* ============================================================================
   §17  Submission list (user dashboard)
   ========================================================================== */
.subp-list { display: flex; flex-direction: column; gap: 14px; }
.subp-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; gap: 16px;
    padding: 18px 20px;
    background: var(--subp-card);
    border: 1px solid var(--subp-line);
    border-radius: var(--subp-r-lg);
    box-shadow: var(--subp-sh-xs);
    transition: transform var(--subp-mid), box-shadow var(--subp-mid), border-color var(--subp-mid);
}
.subp-row .nm { font-size: 15.5px; font-weight: 700; color: var(--subp-ink); margin-bottom: 3px; overflow-wrap: anywhere; }
.subp-row .mt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 12.5px; color: var(--subp-faint); }
.subp-row .ac { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (hover: hover) and (pointer: fine) {
    .subp-row:hover { transform: translateY(-2px); box-shadow: var(--subp-sh); border-color: var(--subp-brand-line); }
}

.subp-empty { text-align: center; padding: 60px 24px; }
.subp-empty .art {
    display: grid; place-items: center;
    width: 74px; height: 74px;
    margin: 0 auto 20px;
    border-radius: 22px;
    background: var(--subp-brand-soft);
    color: var(--subp-brand-ink);
    font-size: 27px;
}
.subp-empty .t { font-size: 18px; font-weight: 700; color: var(--subp-ink); margin-bottom: 7px; }
.subp-empty .s { font-size: 14px; color: var(--subp-mut); margin-bottom: 22px; }

/* ============================================================================
   §18  Responsive
   ========================================================================== */
@media (max-width: 1080px) {
    .subp-form-grid { grid-template-columns: minmax(0, 1fr); }
    .subp-side { position: static; }
    /* On one column the plan card belongs above the form, not stranded below it. */
    .subp-side { order: -1; }
}

@media (max-width: 900px) {
    /* The status page's two-column split is an inline grid-template on the
       element, so the override has to win on specificity. */
    .subp-statusgrid { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 960px) {
    .subp-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .subp-hero-art  { order: -1; max-width: 520px; margin: 0 auto; }
    .subp-float.is-1 { left: 4px; }
    .subp-float.is-2 { right: 4px; }
    .subp-stat { border-right: 0; border-bottom: 1px solid var(--subp-line-soft); }
    .subp-stat:last-child { border-bottom: 0; }
}

@media (max-width: 780px) {
    .subp-sec { padding: 48px 0; }
    .subp-rail { padding: 20px 18px 0; }
    .subp-body { padding: 20px 18px 8px; }
    .subp-actions { padding: 14px 18px; flex-wrap: wrap; }
    .subp-actions .sp { margin-left: 0; width: 100%; order: -1; }
    .subp-f.is-half, .subp-f.is-third, .subp-f.is-two3 { grid-column: span 6; }

    /* The step rail becomes a compact scroller — six labelled dots do not fit
       on a phone, and shrinking them clips the labels. */
    .subp-steps { gap: 10px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
    .subp-steps::-webkit-scrollbar { height: 0; }
    .subp-stepitem { flex: 0 0 auto; width: 78px; }
    .subp-stepitem::before { display: none; }

    .subp-statusgrid { grid-template-columns: minmax(0, 1fr) !important; }
    .subp-row { grid-template-columns: auto minmax(0, 1fr); }
    .subp-row .ac { grid-column: 1 / -1; justify-content: flex-start; }
    .subp-faqmore .subp-btn { margin-left: 0; width: 100%; }
    .subp-sumrow { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}

@media (max-width: 520px) {
    .subp-hero h1 { font-size: clamp(30px, 9vw, 40px); }
    .subp-hero-cta .subp-btn { width: 100%; }
    .subp-planprice .p { font-size: 34px; }
    .subp-status-head { padding: 20px; }
    .subp-thumb { width: 78px; height: 78px; }
}

/* ============================================================================
   §19  Motion + print
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .subp *, .subp *::before, .subp *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    /* A blanket transition:none makes every hover state JUMP, so the transforms
       have to be nulled too rather than merely un-animated. */
    .subp-btn:hover, .subp-plan:hover, .subp-tile:hover, .subp-node:hover, .subp-row:hover,
    .subp-opt:hover, .subp-btn:active, .subp-plan:active, .subp-opt:active { transform: none !important; }
    .subp-float { animation: none !important; }
}

/* Touch: kill the latched hover state a tap otherwise leaves behind. */
@media (hover: none) {
    .subp-btn:hover, .subp-plan:hover, .subp-tile:hover, .subp-node:hover,
    .subp-row:hover, .subp-opt:hover, .subp-stat:hover { transform: none; }
    .subp-plan:hover  { border-color: var(--subp-line); box-shadow: var(--subp-sh-sm); }
    .subp-plan.is-on  { border-color: var(--subp-brand); box-shadow: var(--subp-sh-lg); }
    .subp-plan:hover::before { transform: scaleX(0); }
    .subp-plan.is-on::before { transform: scaleX(1); }
    .subp-chip:hover  { border-color: var(--subp-line); color: var(--subp-mut); }
    .subp-chip.is-on  { border-color: var(--subp-brand); color: #fff; }
}

@media print {
    .subp-actions, .subp-side, .subp-cta, .subp-faqtools { display: none !important; }
    .subp-panel { box-shadow: none; border-color: #ccc; }
}