/* ==========================================================================
   "What you do not see" — the under-the-hood cards
   (/services/web-design-and-development, section #tk-webhood)

   Scoped under #tk-webhood throughout, for the same two reasons as the
   infrastructure section above it:

   1. This file is queued through @stack('page_css'), which the layout emits
      BEFORE its own stylesheets, so a bare selector can lose an order tie
      to the page's own `svg` and heading rules.
   2. The supplied class names (hd, hm, trm, tm, up, dg) are short and
      generic. Scoped, none of them can reach anything else on the site.

   Colour: the mock's green (#25d366) is the site blue everywhere it
   appeared — the terminal's success mark, the uptime squares, the live
   pip. The reds (the scan card, the threat count) and the amber (a
   degraded day) are from the design and stay as they are.

   --panel, --up and --sunk are defined here. The supplied CSS read --sunk
   for the heatmap's empty squares but nothing on this site defined it.

   Motion, all of it released by .on, which the partial adds when a card
   reaches the viewport:
     - the terminal lines run in one after another, and the block cursor on
       the last line blinks forever
     - the heatmap squares pop from scale(.4) to full, staggered 11ms apart
       by the inline transition-delay in the markup
     - the map's attack arcs draw and fade on their own loops while the
       dots ride them (SVG animateMotion, in the markup)
   ========================================================================== */

#tk-webhood {
    --panel: #111417;
    --sunk: #0b0e10;
    --cell: #0b0e10;
    --up: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 28px rgba(0, 0, 0, .45);
    --line: rgba(255, 255, 255, .07);
    --ink: #ffffff;
    --ink-dim: rgba(255, 255, 255, .58);
    --ink-faint: rgba(255, 255, 255, .4);
    --blue: var(--primary-color, #0073FC);
    --red: #ef4444;
    --amber: #f0b429;

    padding: 72px 0;
    background: #08090b;
}

/* ---- head ---------------------------------------------------------------- */
#tk-webhood .hd-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    padding: 8px 16px 8px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    color: rgba(255, 255, 255, .72);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1;
    text-transform: uppercase;
}

#tk-webhood .hd-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
}

#tk-webhood .hd-badge-icon svg {
    width: 12px;
    height: 12px;
    display: block;
}

#tk-webhood .hd-title {
    margin: 0;
    color: var(--ink);
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
}

#tk-webhood .hd-rule {
    display: block;
    width: min(360px, 100%);
    height: 1px;
    margin: 14px 0 18px;
    background: linear-gradient(90deg, var(--blue), transparent);
}

#tk-webhood .hd-lead {
    max-width: 640px;
    margin: 0 0 38px;
    color: var(--ink-dim);
    font-size: 15.5px;
    line-height: 1.75;
}

/* ---- the grid ------------------------------------------------------------ */
#tk-webhood .hd-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

#tk-webhood .hd,
#tk-audit .hd {
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--up);
    padding: 24px;
    overflow: hidden;
}

#tk-webhood .hd-eyebrow,
#tk-audit .hd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 16px;
    color: var(--blue);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1.3;
    text-transform: uppercase;
}

#tk-webhood .hd-eyebrow.is-red,
#tk-audit .hd-eyebrow.is-red {
    color: var(--red);
}

#tk-webhood .hd-eyebrow svg,
#tk-audit .hd-eyebrow svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    display: block;
}

#tk-webhood .hd-name {
    margin: 0 0 7px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

#tk-webhood .hd-text,
#tk-audit .hd-text {
    margin: 0 0 18px;
    color: var(--ink-dim);
    font-size: 13.5px;
    line-height: 1.6;
}

#tk-webhood .hd-figure {
    margin: 0 0 16px;
    color: var(--ink);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
}

#tk-webhood .hd-figure small {
    margin-left: 3px;
    color: var(--blue);
    font-size: 15px;
    font-weight: 700;
}

#tk-webhood .hd-fine,
#tk-audit .hd-fine {
    margin: 12px 0 0;
    color: var(--ink-faint);
    font-size: 11.5px;
    line-height: 1.5;
}

#tk-webhood .visually-hidden,
#tk-audit .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Card 1 — the deploy terminal
   ========================================================================== */
#tk-webhood .trm {
    margin-top: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--sunk);
    overflow: hidden;
}

#tk-webhood .trm-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border-bottom: 1px solid var(--line);
}

#tk-webhood .trm-bar i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff5f57;
}

#tk-webhood .trm-bar i:nth-child(2) { background: #febc2e; }
#tk-webhood .trm-bar i:nth-child(3) { background: var(--blue); }

#tk-webhood .trm-body {
    padding: 14px 16px 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 11.5px;
    line-height: 1.95;
}

#tk-webhood .trm-line {
    margin: 0;
    color: var(--ink-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* held back until the card is revealed, then run in one by one */
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .35s ease var(--d, 0ms), transform .35s ease var(--d, 0ms);
}

#tk-webhood .hd.on .trm-line,
#tk-audit .hd.on .trm-line {
    opacity: 1;
    transform: none;
}

#tk-webhood .trm-mark {
    margin-right: 7px;
    color: var(--ink-faint);
}

#tk-webhood .trm-line.is-done .trm-mark,
#tk-webhood .trm-line.is-done .trm-text {
    color: var(--blue);
}

#tk-webhood .trm-note {
    margin-left: 6px;
    color: color-mix(in srgb, var(--blue) 72%, transparent);
}

#tk-webhood .trm-line.is-done .trm-note {
    color: var(--ink-faint);
}

/* the block cursor, which never stops */
#tk-webhood .trm-cursor {
    display: inline-block;
    width: 6px;
    height: 12px;
    margin-left: 7px;
    vertical-align: -2px;
    background: var(--blue);
    animation: hd-caret 1.05s steps(1) infinite;
}

@keyframes hd-caret {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* ==========================================================================
   Card 2 — the uptime heatmap

   The per-square transition-delay is inline in the markup (11ms apart), so
   adding .on releases them left to right.
   ========================================================================== */
#tk-webhood .hm {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    gap: 5px;
    margin-top: auto;
}

#tk-webhood .hm i {
    aspect-ratio: 1;
    border-radius: 2.5px;
    background: var(--cell);
    transform: scale(.4);
    opacity: 0;
    transition: transform .4s cubic-bezier(.34, 1.5, .64, 1), opacity .4s;
}

#tk-webhood .hd.on .hm i,
#tk-audit .hd.on .hm i {
    transform: none;
    opacity: 1;
}

/* the mock's #25d366, as the site blue */
#tk-webhood .hm i.up { background: var(--blue); }
#tk-webhood .hm i.dg { background: var(--amber); }

#tk-webhood .hm-scale {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    color: var(--ink-faint);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ==========================================================================
   Card 3 — the free scan
   ========================================================================== */
#tk-webhood .hd-shout,
#tk-audit .hd-shout {
    margin: 0 0 10px;
    color: var(--ink);
    font-size: clamp(26px, 3.1vw, 36px);
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.08;
    text-transform: uppercase;
}

#tk-webhood .hd-shout-red,
#tk-audit .hd-shout-red {
    color: var(--red);
}

#tk-webhood .scanbox,
#tk-audit .scanbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 7px 7px 7px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--sunk);
}

#tk-webhood .scanbox-input,
#tk-audit .scanbox-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.4;
}

#tk-webhood .scanbox-input::placeholder,
#tk-audit .scanbox-input::placeholder {
    color: var(--ink-faint);
}

#tk-webhood .scanbox-input:focus,
#tk-audit .scanbox-input:focus {
    outline: none;
}

#tk-webhood .scanbox:focus-within,
#tk-audit .scanbox:focus-within {
    border-color: color-mix(in srgb, var(--red) 55%, transparent);
}

#tk-webhood .scanbox-btn,
#tk-audit .scanbox-btn {
    flex: 0 0 auto;
    border: 0;
    border-radius: 9px;
    padding: 11px 20px;
    background: linear-gradient(180deg, #f05252, #d92d2d);
    box-shadow: 0 4px 14px rgba(217, 45, 45, .35);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

#tk-webhood .scanbox-btn:hover,
#tk-audit .scanbox-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(217, 45, 45, .45);
}

#tk-webhood .scanbox-btn:active,
#tk-audit .scanbox-btn:active {
    transform: none;
}

/* ==========================================================================
   Card 4 — the threat map
   ========================================================================== */
#tk-webhood .tmw {
    position: relative;
    margin-top: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(239, 68, 68, .09), transparent 60%),
        var(--sunk);
    overflow: hidden;
}

#tk-webhood .tm {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
}

#tk-webhood .tmland circle {
    fill: rgba(255, 255, 255, .14);
}

/* Each arc draws itself then fades, on its own delay and duration from the
   markup. 420 comfortably exceeds the longest path, so every arc finishes
   drawing within its cycle. */
#tk-webhood .tmarc {
    fill: none;
    stroke: var(--red);
    stroke-width: 1;
    stroke-dasharray: 420;
    stroke-dashoffset: 420;
    opacity: 0;
    animation: hd-arc var(--dur, 3.5s) linear var(--d, 0s) infinite;
}

@keyframes hd-arc {
    0%        { stroke-dashoffset: 420; opacity: 0; }
    12%       { opacity: .5; }
    72%       { opacity: .5; }
    100%      { stroke-dashoffset: 0; opacity: 0; }
}

#tk-webhood .tmdot {
    fill: var(--red);
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, .9));
}

#tk-webhood .tmlive {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border: 1px solid color-mix(in srgb, var(--red) 40%, transparent);
    border-radius: 999px;
    background: rgba(0, 0, 0, .45);
    color: var(--red);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

#tk-webhood .tmlive i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--red);
    animation: hd-pip 1.6s ease-in-out infinite;
}

@keyframes hd-pip {
    0%, 100% { opacity: .35; }
    50%      { opacity: 1; }
}

#tk-webhood .tmcount {
    position: absolute;
    left: 14px;
    bottom: 12px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

#tk-webhood .tmcount b {
    color: var(--red);
    font-size: clamp(18px, 2.2vw, 24px);
    font-weight: 800;
    letter-spacing: -.01em;
}

#tk-webhood .tmcount em {
    color: var(--ink-faint);
    font-size: 9.5px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ==========================================================================
   Light theme
   ========================================================================== */
html[data-tk-theme="light"] #tk-webhood {
    --panel: #ffffff;
    --sunk: #f2f5f8;
    --cell: #dfe5ec;
    --up: 0 2px 10px rgba(15, 23, 42, .08);
    --line: rgba(15, 23, 42, .1);
    --ink: #0a0d0f;
    --ink-dim: #5b6472;
    --ink-faint: #828c99;

    background: #edf1f4;
}

html[data-tk-theme="light"] #tk-webhood .hd-badge {
    background: #fff;
    color: #475162;
}

/* The terminal keeps its dark panel in light mode: it is a console, and a
   white one reads as a text box rather than as a transcript. */
html[data-tk-theme="light"] #tk-webhood .trm {
    border-color: rgba(15, 23, 42, .14);
    background: #0b0e10;
}

html[data-tk-theme="light"] #tk-webhood .trm-bar {
    border-bottom-color: rgba(255, 255, 255, .08);
}

html[data-tk-theme="light"] #tk-webhood .trm-line {
    color: rgba(255, 255, 255, .62);
}

html[data-tk-theme="light"] #tk-webhood .trm-mark,
html[data-tk-theme="light"] #tk-webhood .trm-line.is-done .trm-note {
    color: rgba(255, 255, 255, .42);
}

/* Likewise the map: the land dots and the arcs are drawn for a dark field. */
html[data-tk-theme="light"] #tk-webhood .tmw {
    border-color: rgba(15, 23, 42, .14);
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(239, 68, 68, .12), transparent 60%),
        #0b0e10;
}

html[data-tk-theme="light"] #tk-webhood .scanbox,
html[data-tk-theme="light"] #tk-audit .scanbox {
    border-color: rgba(15, 23, 42, .12);
    background: #f7f9fb;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991.98px) {
    #tk-webhood .hd-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    #tk-webhood {
        padding: 56px 0;
    }

    #tk-webhood .hd,
    #tk-audit .hd {
        padding: 20px 18px;
    }

    /* the transcript is the one thing that cannot wrap, so it shrinks
       instead of pushing the card sideways */
    /* The transcript lines are nowrap by design, so a fixed size clipped
       the longest one to an ellipsis on a narrow screen. Sizing off the
       viewport keeps every line whole instead. */
    #tk-webhood .trm-body {
        padding: 12px 12px 14px;
        font-size: clamp(7.5px, 2.35vw, 11.5px);
    }

    #tk-webhood .hm {
        gap: 4px;
    }

    #tk-webhood .scanbox,
    #tk-audit .scanbox {
        flex-wrap: wrap;
        padding: 10px;
    }

    #tk-webhood .scanbox-input,
    #tk-audit .scanbox-input {
        flex: 1 0 100%;
        padding: 4px 6px 8px;
    }

    #tk-webhood .scanbox-btn,
    #tk-audit .scanbox-btn {
        flex: 1 0 100%;
        padding: 12px 20px;
    }

    #tk-webhood .tmcount {
        position: static;
        padding: 0 12px 12px;
    }
}

/* ==========================================================================
   Reduced motion: show everything in its finished state, hold it still
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    #tk-webhood .trm-line {
        opacity: 1;
        transform: none;
        transition: none;
    }

    #tk-webhood .hm i {
        opacity: 1;
        transform: none;
        transition: none;
    }

    #tk-webhood .trm-cursor,
    #tk-webhood .tmarc,
    #tk-webhood .tmlive i {
        animation: none;
    }

    #tk-webhood .tmarc {
        stroke-dashoffset: 0;
        opacity: .5;
    }
}

/* ==========================================================================
   Winning the page's blanket light-mode text rule

   In light mode the page sets one colour on every p / span / small / label
   inside #primary.tk-gd:

     html[data-tk-theme="light"] #primary.tk-gd p, ... span, ... small { }

   One id, two classes, two types — which outranks
   `html[data-tk-theme="light"] #tk-webhood .hd-eyebrow` (one id, two
   classes, one type) on type count alone. Left alone it flattened every
   accent here to #2b3138, and worse, painted the terminal's text and the
   map's LIVE pill dark grey on their dark panels, where they vanished.

   Repeating the section id settles it: two ids beat one outright. A
   deliberate specificity bump, not a typo, and self-contained — no
   dependency on #primary still wrapping the page.
   ========================================================================== */
html[data-tk-theme="light"] #tk-webhood#tk-webhood .hd-badge {
    color: #475162;
}

html[data-tk-theme="light"] #tk-webhood#tk-webhood .hd-badge-icon {
    color: #fff;
}

html[data-tk-theme="light"] #tk-webhood#tk-webhood .hd-lead,
html[data-tk-theme="light"] #tk-webhood#tk-webhood .hd-text,
html[data-tk-theme="light"] #tk-audit#tk-audit .hd-text {
    color: var(--ink-dim);
}

html[data-tk-theme="light"] #tk-webhood#tk-webhood .hd-fine,
html[data-tk-theme="light"] #tk-webhood#tk-webhood .hm-scale span,
html[data-tk-theme="light"] #tk-audit#tk-audit .hd-fine {
    color: var(--ink-faint);
}

html[data-tk-theme="light"] #tk-webhood#tk-webhood .hd-eyebrow,
html[data-tk-theme="light"] #tk-audit#tk-audit .hd-eyebrow {
    color: var(--blue);
}

html[data-tk-theme="light"] #tk-webhood#tk-webhood .hd-eyebrow.is-red,
html[data-tk-theme="light"] #tk-webhood#tk-webhood .hd-shout-red,
html[data-tk-theme="light"] #tk-webhood#tk-webhood .tmlive,
html[data-tk-theme="light"] #tk-audit#tk-audit .hd-eyebrow.is-red,
html[data-tk-theme="light"] #tk-audit#tk-audit .hd-shout-red {
    color: var(--red);
}

html[data-tk-theme="light"] #tk-webhood#tk-webhood .hd-figure {
    color: var(--ink);
}

html[data-tk-theme="light"] #tk-webhood#tk-webhood .hd-figure small {
    color: var(--blue);
}

/* the terminal and the map keep their dark panels in light mode, so their
   text stays light — a touch brighter than in dark mode, because the card
   around them is now white and the contrast step is larger */
html[data-tk-theme="light"] #tk-webhood#tk-webhood .trm-line {
    color: rgba(255, 255, 255, .72);
}

html[data-tk-theme="light"] #tk-webhood#tk-webhood .trm-mark,
html[data-tk-theme="light"] #tk-webhood#tk-webhood .trm-line.is-done .trm-note {
    color: rgba(255, 255, 255, .5);
}

html[data-tk-theme="light"] #tk-webhood#tk-webhood .trm-note {
    color: color-mix(in srgb, var(--blue) 80%, transparent);
}

html[data-tk-theme="light"] #tk-webhood#tk-webhood .trm-line.is-done .trm-mark,
html[data-tk-theme="light"] #tk-webhood#tk-webhood .trm-line.is-done .trm-text {
    color: var(--blue);
}

html[data-tk-theme="light"] #tk-webhood#tk-webhood .tmcount b {
    color: var(--red);
}

html[data-tk-theme="light"] #tk-webhood#tk-webhood .tmcount em {
    color: rgba(255, 255, 255, .5);
}

/* ==========================================================================
   Terminal line sizing

   The size was set on .trm-body for the lines to inherit, but the theme
   sets font-size directly on `p` inside a media query. A direct rule on
   the element beats anything inherited, whatever the specificity, so the
   lines rendered at 14px inside an 8.8px box and the longest three were
   clipped to an ellipsis on a phone.

   Stating the size on .trm-line itself is the fix; the doubled id keeps it
   ahead of the theme's own p rules.
   ========================================================================== */
#tk-webhood#tk-webhood .trm-line {
    font-size: 11.5px;
    line-height: 1.95;
}

@media (max-width: 575.98px) {
    #tk-webhood#tk-webhood .trm-line {
        font-size: clamp(7.5px, 2.35vw, 11.5px);
    }
}

/* ==========================================================================
   Badge and heading on one line
   ========================================================================== */
#tk-webhood .hd-headrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
}

#tk-webhood .hd-headrow .hd-badge {
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    #tk-webhood .hd-headrow {
        gap: 14px;
    }

    #tk-webhood .hd-headrow .hd-badge {
        flex: 0 0 auto;
    }
}

/* ==========================================================================
   The Scan button, matching the reference

   It had a vertical gradient and a coloured drop shadow, which read as a
   glowing pill rather than the flat red block in the reference. Flat fill,
   tighter radius, no glow.
   ========================================================================== */
#tk-webhood#tk-webhood .scanbox-btn,
#tk-audit#tk-audit .scanbox-btn {
    border-radius: 8px;
    background: #f0474a;
    box-shadow: none;
    letter-spacing: .06em;
}

#tk-webhood#tk-webhood .scanbox-btn:hover,
#tk-audit#tk-audit .scanbox-btn:hover {
    transform: none;
    background: #e03b3e;
    box-shadow: none;
}

/* ==========================================================================
   Light theme: the terminal and the map follow the theme

   Both panels were held dark in light mode on the theory that a console
   and a threat map read better on black. On a white card they read as two
   black holes instead, so they now take the light surface like everything
   else: the transcript goes dark-on-light, and the map's land dots and
   labels are re-weighted for a light field. The arcs and the travelling
   dots stay red — they are the one thing that should stand out.
   ========================================================================== */
html[data-tk-theme="light"] #tk-webhood .trm {
    border-color: rgba(15, 23, 42, .1);
    background: var(--sunk);
}

html[data-tk-theme="light"] #tk-webhood .trm-bar {
    border-bottom-color: rgba(15, 23, 42, .1);
}

html[data-tk-theme="light"] #tk-webhood#tk-webhood .trm-line {
    color: #5b6472;
}

html[data-tk-theme="light"] #tk-webhood#tk-webhood .trm-mark,
html[data-tk-theme="light"] #tk-webhood#tk-webhood .trm-line.is-done .trm-note {
    color: #8a94a1;
}

html[data-tk-theme="light"] #tk-webhood#tk-webhood .trm-note {
    color: color-mix(in srgb, var(--blue) 85%, transparent);
}

html[data-tk-theme="light"] #tk-webhood .tmw {
    border-color: rgba(15, 23, 42, .1);
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(239, 68, 68, .1), transparent 62%),
        var(--sunk);
}

html[data-tk-theme="light"] #tk-webhood .tmland circle {
    fill: rgba(15, 23, 42, .18);
}

html[data-tk-theme="light"] #tk-webhood .tmdot {
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, .55));
}

html[data-tk-theme="light"] #tk-webhood .tmlive {
    background: rgba(255, 255, 255, .9);
}

html[data-tk-theme="light"] #tk-webhood#tk-webhood .tmcount em {
    color: #6b7482;
}

/* ==========================================================================
   The free scan — progress in the card, result in a dialog

   Two pieces:

   1. .scanprog, inside the scan card, while the audit runs. It keeps the
      card's own red, because that is the card's accent and the bar belongs
      to it.
   2. .scanres, the result. The mock's green bars are the site blue here,
      the same substitution made everywhere else in this section. Amber and
      red stay: a bar is blue at 80 and over, amber down to 50 and red
      below that, so a bad score cannot read as a good one just because the
      palette is friendly.

   The bars animate from zero. Their width sits on a custom property so the
   script can set the target and let the transition do the work, and each
   one is delayed a little after the one above it.

   .scanres is NOT scoped under #tk-webhood: it is moved to the end of
   <body> when it opens, so a transformed ancestor cannot trap a
   position:fixed dialog. Every selector is prefixed .scanres instead.
   ========================================================================== */

/* ---- progress ------------------------------------------------------------ */
#tk-webhood .scanprog,
#tk-audit .scanprog {
    margin-top: 16px;
}

#tk-webhood .scanprog[hidden],
#tk-audit .scanprog[hidden] {
    display: none;
}

#tk-webhood .scanprog-track,
#tk-audit .scanprog-track {
    height: 7px;
    border-radius: 999px;
    background: var(--sunk);
    overflow: hidden;
}

#tk-webhood .scanprog-track i,
#tk-audit .scanprog-track i {
    display: block;
    width: var(--p, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f05252, #ff7a7a);
    box-shadow: 0 0 14px rgba(240, 82, 82, .45);
    transition: width .5s cubic-bezier(.22, .61, .36, 1);
}

#tk-webhood .scanprog-head,
#tk-audit .scanprog-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 11px 0 0;
    color: var(--ink-dim);
    font-size: 12.5px;
}

#tk-webhood .scanprog-head b,
#tk-audit .scanprog-head b {
    color: var(--red);
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

#tk-webhood .scanprog-steps,
#tk-audit .scanprog-steps {
    list-style: none;
    margin: 13px 0 0;
    padding: 0;
    display: grid;
    gap: 9px;
}

#tk-webhood .scanprog-steps li,
#tk-audit .scanprog-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-faint);
    font-size: 12.5px;
    line-height: 1.3;
    opacity: .5;
    transition: opacity .3s ease, color .3s ease;
}

/* the marker: a dot while running, a tick once done */
#tk-webhood .scanprog-steps i,
#tk-audit .scanprog-steps i {
    position: relative;
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
}

#tk-webhood .scanprog-steps i::before,
#tk-audit .scanprog-steps i::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: currentColor;
    opacity: .45;
}

#tk-webhood .scanprog-steps li.is-now,
#tk-audit .scanprog-steps li.is-now {
    color: var(--blue);
    opacity: 1;
}

#tk-webhood .scanprog-steps li.is-now i::before,
#tk-audit .scanprog-steps li.is-now i::before {
    opacity: 1;
    animation: scanpulse 1.1s ease-in-out infinite;
}

#tk-webhood .scanprog-steps li.is-done,
#tk-audit .scanprog-steps li.is-done {
    color: var(--blue);
    opacity: 1;
}

#tk-webhood .scanprog-steps li.is-done i::before,
#tk-audit .scanprog-steps li.is-done i::before {
    width: 11px;
    height: 7px;
    margin-top: -2px;
    border: 2px solid currentColor;
    border-top: 0;
    border-right: 0;
    border-radius: 1px;
    background: none;
    transform: translate(-50%, -50%) rotate(-45deg);
    animation: none;
}

@keyframes scanpulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.55); opacity: .45; }
}

#tk-webhood .scanbox-btn[disabled],
#tk-audit .scanbox-btn[disabled] {
    opacity: .55;
    cursor: default;
    transform: none;
}

#tk-webhood .scanbox-error,
#tk-audit .scanbox-error {
    margin: 11px 0 0;
    color: #ff9a9a;
    font-size: 12.5px;
    line-height: 1.4;
}

#tk-webhood .scanbox-error[hidden],
#tk-audit .scanbox-error[hidden] {
    display: none;
}

/* ---- the result dialog --------------------------------------------------- */
.scanres {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.scanres[hidden] {
    display: none;
}

.scanres-back {
    position: absolute;
    inset: 0;
    background: rgba(4, 6, 8, .78);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: scanfade .2s ease both;
}

.scanres-panel {
    position: relative;
    width: min(560px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 30px 30px 28px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    background: #111417;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
    color: #fff;
    animation: scanrise .26s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes scanfade { from { opacity: 0; } to { opacity: 1; } }

@keyframes scanrise {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to { opacity: 1; transform: none; }
}

.scanres-x {
    position: absolute;
    top: 16px;
    right: 16px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .75);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.scanres-x svg { width: 15px; height: 15px; }

.scanres-x:hover {
    background: rgba(255, 255, 255, .11);
    color: #fff;
}

.scanres-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 42px;
}

.scanres-score {
    margin: 0;
    color: #f05252;
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1;
    white-space: nowrap;
}

.scanres-score b {
    font-size: 46px;
    font-variant-numeric: tabular-nums;
}

.scanres-score span {
    font-size: 15px;
    opacity: .72;
}

.scanres-id { min-width: 0; }

.scanres-verdict {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
}

.scanres-host {
    margin: 2px 0 0;
    color: rgba(255, 255, 255, .55);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- the bars ------------------------------------------------------------ */
.scanres-bars {
    display: grid;
    gap: 9px;
    margin-top: 22px;
}

.scanres-bar {
    display: grid;
    grid-template-columns: 74px 1fr 34px;
    align-items: center;
    gap: 11px;
}

.scanres-bar-label {
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    font-weight: 700;
}

.scanres-bar-track {
    height: 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
}

/* --w is set by the script once the dialog is on screen, so every bar
   grows from nothing rather than appearing at its final length. */
.scanres-bar-fill {
    display: block;
    width: var(--w, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--primary-color, #0073FC);
    transition: width .9s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--d, 0ms);
}

.scanres-bar.is-mid .scanres-bar-fill { background: #f0b429; }
.scanres-bar.is-low .scanres-bar-fill { background: #ef4444; }

.scanres-bar-value {
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.scanres-bar.is-unmeasured .scanres-bar-value {
    color: rgba(255, 255, 255, .35);
    font-weight: 600;
}

.scanres-thin {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, .45);
    font-size: 11.5px;
    line-height: 1.5;
}

.scanres-thin[hidden] { display: none; }

/* ---- findings ------------------------------------------------------------ */
.scanres-finds {
    display: grid;
    gap: 9px;
    margin-top: 18px;
}

.scanres-find {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    background: #0b0e10;
    animation: scanrise .3s cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: var(--d, 0ms);
}

.scanres-find i {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    border-radius: 6px;
    background: rgba(239, 68, 68, .16);
    color: #ef4444;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.scanres-find b {
    display: block;
    font-size: 13.5px;
    font-weight: 800;
}

.scanres-find span {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, .5);
    font-size: 12.5px;
    line-height: 1.45;
}

/* ---- the gate ------------------------------------------------------------ */
.scanres-gate {
    margin-top: 18px;
    padding: 17px 17px 15px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    background: #0b0e10;
}

.scanres-gate[hidden] { display: none; }

.scanres-gate-lead {
    margin: 0 0 13px;
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    line-height: 1.5;
}

.scanres-gate-lead b { color: #fff; font-weight: 800; }

.scanres-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.scanres-fields input {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background: #111417;
    color: #fff;
    font-size: 13.5px;
}

.scanres-fields input::placeholder { color: rgba(255, 255, 255, .38); }

.scanres-fields input:focus {
    outline: none;
    border-color: var(--primary-color, #0073FC);
}

.scanres-fields input.is-bad {
    border-color: #ef4444;
}

.scanres-submit {
    width: 100%;
    margin-top: 11px;
    padding: 14px 18px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(180deg, #f05252, #d92d2d);
    box-shadow: 0 6px 20px rgba(217, 45, 45, .35);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.scanres-submit:hover { transform: translateY(-1px); }

.scanres-submit[disabled] {
    opacity: .6;
    cursor: default;
    transform: none;
}

.scanres-fine {
    margin: 11px 0 0;
    color: rgba(255, 255, 255, .38);
    font-size: 11.5px;
    text-align: center;
}

.scanres-err {
    margin: 9px 0 0;
    color: #ff9a9a;
    font-size: 12px;
    text-align: center;
}

.scanres-err[hidden] { display: none; }

/* ---- unlocked ------------------------------------------------------------ */
.scanres-done {
    margin-top: 18px;
    padding: 17px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    background: #0b0e10;
    text-align: center;
}

.scanres-done[hidden] { display: none; }

.scanres-done p {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, .62);
    font-size: 13px;
    line-height: 1.5;
}

.scanres-done b { color: #fff; font-weight: 800; }

.scanres-book {
    display: inline-block;
    color: var(--primary-color, #0073FC);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
}

.scanres-book:hover { text-decoration: underline; }

/* ---- light theme --------------------------------------------------------- */
html[data-tk-theme="light"] .scanres-back {
    background: rgba(15, 23, 42, .55);
}

html[data-tk-theme="light"] .scanres-panel {
    border-color: rgba(15, 23, 42, .1);
    background: #ffffff;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .22);
    color: #0a0d0f;
}

html[data-tk-theme="light"] .scanres-x {
    border-color: rgba(15, 23, 42, .12);
    background: rgba(15, 23, 42, .04);
    color: #4a535d;
}

html[data-tk-theme="light"] .scanres-x:hover {
    background: rgba(15, 23, 42, .09);
    color: #0a0d0f;
}

html[data-tk-theme="light"] .scanres-host,
html[data-tk-theme="light"] .scanres-done p,
html[data-tk-theme="light"] .scanres-thin,
html[data-tk-theme="light"] .scanres-find span {
    color: #4a535d;
}

html[data-tk-theme="light"] .scanres-bar-label {
    color: #4a535d;
}

html[data-tk-theme="light"] .scanres-bar-track {
    background: rgba(15, 23, 42, .09);
}

html[data-tk-theme="light"] .scanres-bar-value,
html[data-tk-theme="light"] .scanres-verdict,
html[data-tk-theme="light"] .scanres-find b,
html[data-tk-theme="light"] .scanres-done b,
html[data-tk-theme="light"] .scanres-gate-lead b {
    color: #0a0d0f;
}

html[data-tk-theme="light"] .scanres-find,
html[data-tk-theme="light"] .scanres-gate,
html[data-tk-theme="light"] .scanres-done {
    border-color: rgba(15, 23, 42, .1);
    background: #f3f6f8;
}

html[data-tk-theme="light"] .scanres-gate-lead {
    color: #313b45;
}

html[data-tk-theme="light"] .scanres-fields input {
    border-color: rgba(15, 23, 42, .14);
    background: #ffffff;
    color: #0a0d0f;
}

html[data-tk-theme="light"] .scanres-fields input::placeholder { color: #8b949e; }

html[data-tk-theme="light"] .scanres-fine { color: #8b949e; }

html[data-tk-theme="light"] .scanres-err { color: #c0392b; }

html[data-tk-theme="light"] .scanres-book { color: var(--primary-color-dark, #005BC7); }

/* ---- small screens ------------------------------------------------------- */
@media (max-width: 575px) {
    .scanres { padding: 12px; }

    .scanres-panel { padding: 24px 18px 20px; }

    .scanres-score b { font-size: 38px; }

    .scanres-bar { grid-template-columns: 62px 1fr 30px; gap: 9px; }

    .scanres-bar-label { font-size: 11px; }

    .scanres-fields { grid-template-columns: 1fr; }
}

/* ---- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    #tk-webhood .scanprog-track i,
    .scanres-bar-fill {
        transition: none;
    }

    #tk-webhood .scanprog-steps li.is-now i::before,
    #tk-audit .scanprog-steps li.is-now i::before { animation: none; }

    .scanres-back,
    .scanres-panel,
    .scanres-find {
        animation: none;
    }
}

/* ==========================================================================
   The result dialog: shorter, and it scrolls

   Three fixes, in the order they were found:

   1. It was as tall as the viewport allowed, so on a laptop the submit
      button sat below the fold with nothing to suggest more was there.
      The panel is now capped well short of the window and the type and
      spacing inside it are tighter.

   2. The whole panel scrolled, which also carried the score and the close
      button away. Only .scanres-body scrolls now; the score, the verdict,
      the domain and the close button are fixed above it.

   3. Scrolling did not work at all. Lenis owns the wheel on this site and
      was moving the page behind the dialog instead — the same thing that
      happened to the live chat. data-lenis-prevent on .scanres-body is the
      fix; it is in the markup, and this block only styles the bar, to the
      same thin rounded scrollbar the booking modal uses.
   ========================================================================== */

.scanres-panel {
    display: flex;
    flex-direction: column;
    max-height: min(84vh, 720px);
    /* the body inside does the scrolling now */
    overflow: hidden;
    padding: 24px 24px 22px;
}

.scanres-head {
    flex: 0 0 auto;
}

.scanres-score b { font-size: 40px; }

.scanres-body {
    flex: 1 1 auto;
    min-height: 0;
    margin-right: -8px;
    padding-right: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) rgba(255, 255, 255, 0.05);
}

.scanres-body::-webkit-scrollbar {
    width: 8px;
}

.scanres-body::-webkit-scrollbar-track {
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.05);
}

.scanres-body::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.22);
}

.scanres-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.34);
}

html[data-tk-theme="light"] .scanres-body {
    scrollbar-color: rgba(15, 23, 42, 0.26) rgba(15, 23, 42, 0.06);
}

html[data-tk-theme="light"] .scanres-body::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.06);
}

html[data-tk-theme="light"] .scanres-body::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.26);
}

html[data-tk-theme="light"] .scanres-body::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.38);
}

/* ---- tighter, so less of it needs scrolling at all ----------------------- */
.scanres-bars { gap: 7px; margin-top: 18px; }

.scanres-bar-track { height: 8px; }

.scanres-thin { margin-top: 12px; }

.scanres-finds { gap: 8px; margin-top: 14px; }

.scanres-find { padding: 11px 13px; }

.scanres-gate { margin-top: 14px; padding: 15px 15px 13px; }

.scanres-gate-lead { margin-bottom: 11px; }

.scanres-fields input { padding: 11px 14px; }

.scanres-submit { margin-top: 10px; padding: 13px 18px; }

.scanres-done { margin-top: 14px; padding: 15px; }

@media (max-width: 575px) {
    .scanres-panel {
        max-height: min(90vh, 640px);
        padding: 22px 16px 18px;
    }

    .scanres-body { margin-right: -6px; padding-right: 8px; }

    .scanres-score b { font-size: 34px; }
}

/* ==========================================================================
   The free audit card: hero copy and the reordered grid card

   partials/audit-scan-card.blade.php is drawn twice: in the hero under
   #tk-audit (for visitors from the "free website audit" ad, so they see it
   without scrolling) and in this section's grid. The card rules above are
   shared with #tk-audit; this block gives #tk-audit the same palette as
   #tk-webhood in both themes, sizes it in the hero, and styles the parts
   both copies now have: the "what we check" chips and the three steps.

   The address box used to sit at the bottom of the card (margin-top:auto),
   which left a gap under the headline. It now follows the headline, so the
   hook, the box and the button read as one block.
   ========================================================================== */
#tk-audit {
    --panel: #111417;
    --sunk: #0b0e10;
    --up: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 28px rgba(0, 0, 0, .45);
    --line: rgba(255, 255, 255, .07);
    --ink: #ffffff;
    --ink-dim: rgba(255, 255, 255, .58);
    --ink-faint: rgba(255, 255, 255, .4);
    --blue: var(--primary-color, #0073FC);
    --red: #ef4444;

    max-width: 560px;
    margin: 30px auto 6px;
    text-align: left;
}

html[data-tk-theme="light"] #tk-audit {
    --panel: #ffffff;
    --sunk: #f2f5f8;
    --up: 0 20px 50px -20px rgba(10, 30, 80, .25);
    --line: rgba(15, 23, 42, .1);
    --ink: #0a0d0f;
    --ink-dim: #5b6472;
    --ink-faint: #828c99;
}

#tk-audit .hd {
    padding: 28px;
    border-radius: 22px;
}

#tk-webhood .hd--scan .scanbox,
#tk-audit .hd--scan .scanbox {
    margin-top: 0;
}

/* the hero styles every span, p and h3 inside .service_desc; these keep the
   card's own look there (two ids beat the hero's one-id rules) */
#tk-audit#tk-audit .hd-eyebrow,
#tk-audit#tk-audit .hd-shout-red,
#tk-audit#tk-audit .scan-steps span,
#tk-audit#tk-audit .scanprog-head span {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

#tk-audit#tk-audit .hd-eyebrow {
    margin-bottom: 14px;
    font-size: 11px;
}

/* .row .service_desc svg absolutely positions every hero svg (it is the
   drawn underline under the headline); the eyebrow icon sits inline */
#tk-audit#tk-audit .hd-eyebrow svg {
    position: static;
    width: 13px;
    height: 13px;
    transform: none;
}

#tk-audit#tk-audit .hd-shout {
    color: var(--ink);
}

#tk-audit#tk-audit .hd-eyebrow.is-red,
#tk-audit#tk-audit .hd-shout-red {
    color: var(--red);
}

#tk-audit#tk-audit .hd-text {
    max-width: none;
    margin: 0 0 18px;
    font-size: 15px;
}

/* the hero's dark theme sets `.service_desc p { color: … !important }`, so
   the card's paragraphs need !important to keep their own greys and red */
#tk-audit#tk-audit .hd-text,
#tk-audit#tk-audit .scanprog-head {
    color: var(--ink-dim) !important;
}

#tk-audit#tk-audit .hd-fine {
    color: var(--ink-faint) !important;
}

#tk-audit#tk-audit .scanbox-error {
    color: #ff9a9a !important;
}

#tk-webhood .hd--scan .hd-text,
#tk-audit .hd--scan .hd-text {
    font-size: 15px;
}

/* ---- what we check ---- */
#tk-webhood .scan-checks,
#tk-audit .scan-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 18px;
    padding: 0;
    list-style: none;
}

#tk-webhood .scan-checks li,
#tk-audit .scan-checks li {
    padding: 5px 11px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 12%, transparent);
    color: var(--blue);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

#tk-webhood .scan-checks li::before,
#tk-audit .scan-checks li::before {
    content: "\2713\00a0";
}

/* ---- three steps ---- */
#tk-webhood .scan-steps,
#tk-audit .scan-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#tk-webhood .scan-steps li,
#tk-audit .scan-steps li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
}

#tk-webhood .scan-steps b,
#tk-audit .scan-steps b {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 13px;
}

html[data-tk-theme="light"] #tk-webhood#tk-webhood .scan-steps span,
html[data-tk-theme="light"] #tk-audit#tk-audit .scan-steps span {
    color: var(--ink);
}

html[data-tk-theme="light"] #tk-webhood#tk-webhood .scan-checks li,
html[data-tk-theme="light"] #tk-audit#tk-audit .scan-checks li {
    color: var(--blue);
}

@media (max-width: 575px) {
    #tk-audit .hd {
        padding: 20px;
    }

    #tk-webhood .scan-steps,
    #tk-audit .scan-steps {
        grid-template-columns: 1fr;
    }

    #tk-webhood .scan-steps li,
    #tk-audit .scan-steps li {
        flex-direction: row;
        align-items: center;
    }
}

/* ==========================================================================
   Customer benefits card

   Takes the grid slot the free scan card had before the scan moved into the
   hero. Four benefit tiles and two figures, on the section's own palette so
   it follows the light and dark themes. Text colours repeat the section id
   to beat the page's blanket light-mode span/p rule (see above).
   ========================================================================== */
#tk-webhood#tk-webhood .hd-shout-blue {
    color: var(--blue);
}

#tk-webhood .hd--benefits .hd-text {
    font-size: 14px;
}

#tk-webhood .bn-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

#tk-webhood .bn-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--sunk);
}

#tk-webhood .bn-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--blue) 14%, transparent);
    color: var(--blue);
}

#tk-webhood .bn-icon svg {
    width: 18px;
    height: 18px;
}

#tk-webhood#tk-webhood .bn-item b {
    display: block;
    margin-bottom: 3px;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 700;
}

#tk-webhood#tk-webhood .bn-item span {
    display: block;
    color: var(--ink-dim);
    font-size: 12px;
    line-height: 1.45;
}

#tk-webhood .bn-stats {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

#tk-webhood .bn-stat {
    flex: 1;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
}

#tk-webhood#tk-webhood .bn-stat b {
    display: block;
    color: var(--blue);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
}

#tk-webhood#tk-webhood .bn-stat span {
    display: block;
    margin-top: 4px;
    color: var(--ink-faint);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

@media (max-width: 575px) {
    #tk-webhood .bn-list {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   The audit form and the expert report (2026-10)

   The card now asks for the website, an email and an optional phone in one
   form, and the dialog is a full report: verdict, phone/desktop fit, score
   breakdown, speed timings, the design review, what to fix first, the
   failed checks, an improvement note and a way to talk to us. The card
   parts use the card's own variables, so they follow the theme with it;
   the dialog lives at the end of <body>, so its light theme is spelled out.
   ========================================================================== */

/* ---- the form ------------------------------------------------------------ */
#tk-webhood .scanform,
#tk-audit .scanform {
    display: grid;
    gap: 10px;
    margin-top: 4px;
}

#tk-webhood .scanform .scanbox,
#tk-audit .scanform .scanbox {
    margin-top: 0;
    padding: 4px 14px;
    min-height: 50px;
}

#tk-webhood .scanbox.is-bad,
#tk-audit .scanbox.is-bad,
#tk-webhood .scanform-input.is-bad,
#tk-audit .scanform-input.is-bad {
    border-color: var(--red);
}

#tk-webhood .scanbox-icon,
#tk-audit#tk-audit .scanbox-icon {
    position: static;
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    color: var(--ink-faint);
    fill: none;
    stroke: currentColor;
    transform: none;
}

/* the hero animates every svg path as the headline underline */
#tk-audit#tk-audit .scanbox-icon * {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-dasharray: none;
    animation: none;
}

#tk-webhood .scanform-row,
#tk-audit .scanform-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

#tk-webhood .scanform-input,
#tk-audit .scanform-input {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--sunk);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.4;
}

#tk-webhood .scanform-input::placeholder,
#tk-audit .scanform-input::placeholder {
    color: var(--ink-faint);
}

#tk-webhood .scanform-input:focus,
#tk-audit .scanform-input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--red) 55%, transparent);
}

#tk-webhood .scanform-btn,
#tk-audit .scanform-btn {
    width: 100%;
    padding: 15px 20px;
    border-radius: 12px;
    font-size: 13px;
}

html[data-tk-theme="light"] #tk-webhood .scanform-input,
html[data-tk-theme="light"] #tk-audit .scanform-input {
    border-color: rgba(15, 23, 42, .12);
    background: #f7f9fb;
}

@media (max-width: 575.98px) {
    #tk-webhood .scanform-row,
    #tk-audit .scanform-row {
        grid-template-columns: 1fr;
    }

    #tk-webhood .scanform .scanbox,
    #tk-audit .scanform .scanbox {
        flex-wrap: nowrap;
        padding: 4px 12px;
    }

    #tk-webhood .scanform .scanbox-input,
    #tk-audit .scanform .scanbox-input {
        flex: 1 1 auto;
        padding: 0;
    }
}

/* ---- the report dialog --------------------------------------------------- */
.scanres-panel {
    width: min(660px, 100%);
    max-height: min(88vh, 860px);
}

.scanres-ring {
    position: relative;
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    color: #ef4444;
}

.scanres-ring.is-mid { color: #f0b429; }
.scanres-ring.is-good { color: #22c55e; }

.scanres-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.scanres-ring circle {
    fill: none;
    stroke-width: 6;
}

.scanres-ring-track { stroke: rgba(255, 255, 255, .08); }

.scanres-ring-fill {
    stroke: currentColor;
    stroke-linecap: round;
    /* 2πr with r = 28 */
    stroke-dasharray: 175.9;
    stroke-dashoffset: calc(175.9 - 175.9 * var(--v, 0) / 100);
    transition: stroke-dashoffset 1s cubic-bezier(.22, .61, .36, 1);
}

.scanres-ring .scanres-score {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    padding-top: 26px;
    color: currentColor;
}

.scanres-panel .scanres-ring .scanres-score b { font-size: 28px; }
.scanres-ring .scanres-score span { font-size: 11px; }

.scanres-kicker {
    margin: 0 0 3px;
    color: rgba(255, 255, 255, .5);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.scanres-verdict { font-size: 20px; }

.scanres-summary {
    margin: 18px 0 0;
    color: rgba(255, 255, 255, .86);
    font-size: 14px;
    line-height: 1.6;
}

.scanres-summary[hidden],
.scanres-body section[hidden] { display: none; }

.scanres-h {
    margin: 22px 0 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.scanres-bars { margin-top: 0; }

.scanres-bar { grid-template-columns: 86px 1fr 34px; }

.scanres-note {
    margin: 0 0 10px;
    color: rgba(255, 255, 255, .7);
    font-size: 13px;
    line-height: 1.55;
}

.scanres-note[hidden] { display: none; }

/* phone and desktop fit */
.scanres-fit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}

.scanres-fitbox {
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    background: #0b0e10;
}

.scanres-fit-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
}

.scanres-fit-top b { font-size: 13.5px; font-weight: 800; }

.scanres-pill {
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .6);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.scanres-fitbox.is-good .scanres-pill { background: rgba(34, 197, 94, .16); color: #4ade80; }
.scanres-fitbox.is-low .scanres-pill { background: rgba(239, 68, 68, .16); color: #f87171; }

.scanres-fit-note {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, .55);
    font-size: 12.5px;
    line-height: 1.5;
}

/* speed timings */
.scanres-vitals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.scanres-vcol {
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    background: #0b0e10;
}

.scanres-vcol-h {
    margin: 0 0 6px;
    color: rgba(255, 255, 255, .5);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.scanres-vital {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 4px 0;
    color: rgba(255, 255, 255, .7);
    font-size: 12.5px;
}

.scanres-vital b { color: #fff; font-variant-numeric: tabular-nums; }
.scanres-vital.is-good b { color: #4ade80; }
.scanres-vital.is-mid b { color: #fbbf24; }
.scanres-vital.is-low b { color: #f87171; }

/* design notes and failed checks share one row style */
.scanres-notes,
.scanres-finds {
    display: grid;
    gap: 8px;
    margin-top: 0;
}

.scanres-dnote {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    background: #0b0e10;
    animation: scanrise .3s cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: var(--d, 0ms);
}

.scanres-dnote i {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    border-radius: 6px;
    background: rgba(240, 180, 41, .16);
    color: #f0b429;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.scanres-dnote.is-good i { background: rgba(34, 197, 94, .16); color: #22c55e; }
.scanres-dnote.is-bad i { background: rgba(239, 68, 68, .16); color: #ef4444; }

.scanres-dnote b { display: block; font-size: 13.5px; font-weight: 800; }

.scanres-dnote span {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, .55);
    font-size: 12.5px;
    line-height: 1.5;
}

/* what to fix first */
.scanres-prio {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: prio;
}

.scanres-prio-item {
    position: relative;
    padding: 12px 14px 12px 48px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    background: #0b0e10;
    counter-increment: prio;
}

.scanres-prio-item::before {
    content: counter(prio);
    position: absolute;
    top: 12px;
    left: 14px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary-color, #0073FC);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

.scanres-prio-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
}

.scanres-prio-top b { font-size: 13.5px; font-weight: 800; line-height: 1.4; }

.scanres-impact {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap;
}

.scanres-impact.is-high { background: rgba(239, 68, 68, .16); color: #f87171; }
.scanres-impact.is-medium { background: rgba(240, 180, 41, .16); color: #fbbf24; }
.scanres-impact.is-low { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .6); }

.scanres-prio-why {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, .58);
    font-size: 12.5px;
    line-height: 1.5;
}

/* the improvement note and the way out */
.scanres-improve {
    margin-top: 22px;
    padding: 15px 16px;
    border: 1px solid color-mix(in srgb, var(--primary-color, #0073FC) 40%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary-color, #0073FC) 10%, #0b0e10);
}

.scanres-improve-h {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.scanres-improve-h svg { width: 16px; height: 16px; color: var(--primary-color, #0073FC); }

.scanres-improve p:last-child {
    margin: 0;
    color: rgba(255, 255, 255, .85);
    font-size: 13.5px;
    line-height: 1.6;
}

.scanres-cta {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin: 18px 0 4px;
}

.scanres-chat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 15px 20px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, #f05252, #d92d2d);
    box-shadow: 0 6px 20px rgba(217, 45, 45, .35);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .15s ease;
}

.scanres-chat:hover { transform: translateY(-1px); }
.scanres-chat svg { width: 18px; height: 18px; }

/* ---- the report in the light theme --------------------------------------- */
html[data-tk-theme="light"] .scanres-ring-track { stroke: rgba(15, 23, 42, .09); }

html[data-tk-theme="light"] .scanres-kicker,
html[data-tk-theme="light"] .scanres-vcol-h { color: #6b7482; }

html[data-tk-theme="light"] .scanres-summary,
html[data-tk-theme="light"] .scanres-improve p:last-child { color: #1f2933; }

html[data-tk-theme="light"] .scanres-h,
html[data-tk-theme="light"] .scanres-improve-h,
html[data-tk-theme="light"] .scanres-vital b,
html[data-tk-theme="light"] .scanres-fit-top b,
html[data-tk-theme="light"] .scanres-dnote b,
html[data-tk-theme="light"] .scanres-prio-top b { color: #0a0d0f; }

html[data-tk-theme="light"] .scanres-note,
html[data-tk-theme="light"] .scanres-vital,
html[data-tk-theme="light"] .scanres-fit-note,
html[data-tk-theme="light"] .scanres-dnote span,
html[data-tk-theme="light"] .scanres-prio-why { color: #4a535d; }

html[data-tk-theme="light"] .scanres-fitbox,
html[data-tk-theme="light"] .scanres-vcol,
html[data-tk-theme="light"] .scanres-dnote,
html[data-tk-theme="light"] .scanres-prio-item {
    border-color: rgba(15, 23, 42, .1);
    background: #f3f6f8;
}

html[data-tk-theme="light"] .scanres-pill,
html[data-tk-theme="light"] .scanres-impact.is-low { background: rgba(15, 23, 42, .07); color: #4a535d; }
html[data-tk-theme="light"] .scanres-fitbox.is-good .scanres-pill { background: rgba(22, 163, 74, .12); color: #15803d; }
html[data-tk-theme="light"] .scanres-fitbox.is-low .scanres-pill,
html[data-tk-theme="light"] .scanres-impact.is-high { background: rgba(220, 38, 38, .1); color: #b91c1c; }
html[data-tk-theme="light"] .scanres-impact.is-medium { background: rgba(217, 119, 6, .12); color: #b45309; }
html[data-tk-theme="light"] .scanres-vital.is-good b { color: #15803d; }
html[data-tk-theme="light"] .scanres-vital.is-mid b { color: #b45309; }
html[data-tk-theme="light"] .scanres-vital.is-low b { color: #b91c1c; }

html[data-tk-theme="light"] .scanres-improve {
    background: color-mix(in srgb, var(--primary-color, #0073FC) 7%, #ffffff);
}

/* ---- small screens ------------------------------------------------------- */
@media (max-width: 575px) {
    .scanres-ring { width: 70px; height: 70px; }
    .scanres-ring .scanres-score { padding-top: 21px; }
    .scanres-panel .scanres-ring .scanres-score b { font-size: 23px; }
    .scanres-verdict { font-size: 17px; }
    .scanres-fit,
    .scanres-vitals { grid-template-columns: 1fr; }
    .scanres-bar { grid-template-columns: 70px 1fr 30px; }
}

@media (prefers-reduced-motion: reduce) {
    .scanres-ring-fill { transition: none; }
    .scanres-dnote { animation: none; }
}

/* ---- in-depth report sections (what works, Google checks, how we help) ---- */
.scanres-fix {
    margin-top: 6px !important;
    color: rgba(255, 255, 255, .78) !important;
}

.scanres-fix em {
    color: var(--primary-color, #0073FC);
    font-style: normal;
    font-weight: 800;
}

.scanres-good {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.scanres-good li {
    position: relative;
    padding-left: 22px;
    color: rgba(255, 255, 255, .78);
    font-size: 12.5px;
    line-height: 1.45;
}

.scanres-good li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #22c55e;
    font-weight: 900;
}

.scanres-issues {
    margin: 0;
    padding: 4px 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    background: #0b0e10;
    list-style: none;
}

.scanres-issues li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .78);
    font-size: 12.5px;
    line-height: 1.4;
}

.scanres-issues li:last-child { border-bottom: 0; }

.scanres-issues b {
    flex: 0 0 auto;
    max-width: 45%;
    color: #fbbf24;
    font-weight: 700;
    text-align: right;
}

.scanres-help {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.scanres-svc {
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    background: #0b0e10;
}

.scanres-svc.is-main {
    grid-column: 1 / -1;
    border-color: color-mix(in srgb, var(--primary-color, #0073FC) 45%, transparent);
}

.scanres-svc b { display: block; font-size: 13.5px; font-weight: 800; }

.scanres-svc span {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, .58);
    font-size: 12.5px;
    line-height: 1.5;
}

html[data-tk-theme="light"] .scanres-fix,
html[data-tk-theme="light"] .scanres-good li,
html[data-tk-theme="light"] .scanres-issues li { color: #313b45 !important; }

html[data-tk-theme="light"] .scanres-issues,
html[data-tk-theme="light"] .scanres-svc {
    border-color: rgba(15, 23, 42, .1);
    background: #f3f6f8;
}

html[data-tk-theme="light"] .scanres-issues li { border-bottom-color: rgba(15, 23, 42, .08); }
html[data-tk-theme="light"] .scanres-issues b { color: #b45309; }
html[data-tk-theme="light"] .scanres-svc b { color: #0a0d0f; }
html[data-tk-theme="light"] .scanres-svc span { color: #4a535d; }
html[data-tk-theme="light"] .scanres-good li::before { color: #15803d; }

@media (max-width: 575px) {
    .scanres-good,
    .scanres-help { grid-template-columns: 1fr; }
}
/* ---- a score beside Mobile and Desktop ----------------------------------- */
.scanres-fit-score {
    margin-left: 6px;
    font-size: 18px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.scanres-fit-score small {
    margin-left: 1px;
    font-size: 11px;
    font-weight: 700;
    opacity: .6;
}

.scanres-fitbox.is-good .scanres-fit-score { color: #4ade80; }
.scanres-fitbox.is-mid .scanres-fit-score { color: #fbbf24; }
.scanres-fitbox.is-low .scanres-fit-score { color: #f87171; }

.scanres-fitbox.is-mid .scanres-pill { background: rgba(240, 180, 41, .16); color: #fbbf24; }

html[data-tk-theme="light"] .scanres-fitbox.is-good .scanres-fit-score { color: #15803d; }
html[data-tk-theme="light"] .scanres-fitbox.is-mid .scanres-fit-score,
html[data-tk-theme="light"] .scanres-fitbox.is-mid .scanres-pill { color: #b45309; }
html[data-tk-theme="light"] .scanres-fitbox.is-mid .scanres-pill { background: rgba(217, 119, 6, .12); }
html[data-tk-theme="light"] .scanres-fitbox.is-low .scanres-fit-score { color: #b91c1c; }
/* ---- the follow-up prompt over the report ---------------------------------
   Opens five seconds after the report, centred, above it. Reuses the report's
   surfaces, close button and red chat button so it reads as part of it. */
.scanpop {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.scanpop[hidden] {
    display: none;
}

.scanpop-back {
    position: absolute;
    inset: 0;
    background: rgba(4, 6, 8, .6);
    animation: scanfade .2s ease both;
}

.scanpop-panel {
    position: relative;
    width: min(400px, 100%);
    padding: 30px 26px 24px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    background: #111417;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
    color: #fff;
    text-align: center;
    animation: scanrise .26s cubic-bezier(.22, .61, .36, 1) both;
}

.scanpop-x {
    top: 12px;
    right: 12px;
}

.scanpop-title {
    margin: 4px 30px 8px;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
}

.scanpop-text {
    margin: 0 0 20px;
    color: rgba(255, 255, 255, .78);
    font-size: 14.5px;
    line-height: 1.55;
}

.scanpop-panel,
.scanpop-panel * {
    box-sizing: border-box;
}

.scanpop-actions {
    display: grid;
    justify-items: center;
    gap: 12px;
}

.scanpop-price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 13px 20px;
    border: 1px solid var(--primary-color, #0073FC);
    border-radius: 12px;
    color: var(--primary-color, #0073FC);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .15s ease;
}

.scanpop-price:hover,
.scanpop-price:focus-visible {
    background: color-mix(in srgb, var(--primary-color, #0073FC) 12%, transparent);
    color: var(--primary-color, #0073FC);
}

html[data-tk-theme="light"] .scanpop-back {
    background: rgba(15, 23, 42, .45);
}

html[data-tk-theme="light"] .scanpop-panel {
    border-color: rgba(15, 23, 42, .1);
    background: #ffffff;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .22);
    color: #0a0d0f;
}

html[data-tk-theme="light"] .scanpop-title { color: #0a0d0f; }
html[data-tk-theme="light"] .scanpop-text { color: #4a535d; }
html[data-tk-theme="light"] .scanpop-price,
html[data-tk-theme="light"] .scanpop-price:hover { color: var(--primary-color-dark, #005BC7); border-color: var(--primary-color-dark, #005BC7); }

@media (max-width: 575px) {
    .scanpop-panel { padding: 28px 20px 20px; }
    .scanpop-title { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .scanpop-back,
    .scanpop-panel { animation: none; }
}