/* ============================================================================
Site Health Check: styles (Nitro Sites tools hub)
The multi-tool dashboard. SKINNED TO THE HOST: every colour, font, space and
radius is a nitrosites design token (src/styles/tokens.css) or a host component
class (.card/.btn/.field) that the BaseLayout shell loads globally. No raw hex.
Scorecard visuals follow SCORECARD-STANDARD.md (ring R=52, tone-* → --tone,
grade badge). Cascade note: on the live site app.css loads BEFORE the host
bundle, so where we override a host-class property we use a parent selector to
win on specificity rather than load order.
========================================================================== */
.shc{
--shc-ok: var(--color-success);
--shc-bad: var(--color-danger);
--shc-warn: var(--color-status-partial);
--shc-good: var(--color-accent-2);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--fs-base);
line-height: var(--lh-base);
max-width: 60rem;
margin: 0 auto;
width: 100%;
}
.shc *{box-sizing:border-box}
/* tone → --tone (SCORECARD-STANDARD.md) */
.shc .tone-ok{--tone:var(--shc-ok)} .shc .tone-good{--tone:var(--shc-good)}
.shc .tone-warn{--tone:var(--shc-warn)} .shc .tone-bad{--tone:var(--shc-bad)}
.shc .tone-mut{--tone:var(--color-muted)}
/* ---------- search form ---------- */
.shc-form{display:flex; gap:var(--sp-2); align-items:stretch; margin:var(--sp-4) auto var(--sp-3); max-width:44rem}
.shc-form .shc-field{flex:1; min-width:0; margin:0}
.shc-input{font-size:var(--fs-lg); width:100%}
.shc-input:focus-visible{outline:2px solid var(--color-focus); outline-offset:2px}
.shc-btn{white-space:nowrap}
.shc-status{min-height:1.4em; text-align:center; color:var(--color-muted); margin:var(--sp-2) 0; font-size:var(--fs-sm)}
.shc-status.is-live{color:var(--color-primary-soft)}
/* ---------- idle ---------- */
.shc-idle{max-width:46rem; margin:var(--sp-6) auto; text-align:center}
.shc-idle-t{color:var(--color-muted); line-height:1.7}
.shc-idle-icons{display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:center; margin-top:var(--sp-5); font-size:1.6rem}
.shc-idle-ico{filter:grayscale(.2); opacity:.85}
/* ---------- shared ring (SCORECARD-STANDARD.md) ---------- */
.shc-ring-bg{fill:none; stroke:var(--color-border); stroke-width:10}
.shc-ring-fg, .shc-oring-fg{fill:none; stroke:var(--tone,var(--color-primary)); stroke-width:10; stroke-linecap:round;
transition:stroke-dashoffset 1s var(--ease)}
.shc-ring-c{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1}
/* loading spinner: spin the svg, show a partial arc, keep the centre readout still */
.shc-ring--load svg{animation:shc-spin .9s linear infinite}
.shc-ring--load .shc-ring-fg, .shc-ring--load .shc-oring-fg{stroke:var(--color-primary); stroke-dasharray:70 260 !important; stroke-dashoffset:0 !important; transition:none}
@keyframes shc-spin{to{transform:rotate(360deg)}}
/* ---------- THE BOARD: one card holding the whole report (hero strip + tile grid) ----------
Deliberately low-profile so the entire report card fits above the fold.
position:relative + overflow:visible are load-bearing: the celebration / offer
card floats out past the top and right edges (see .shc-float). */
.shc-board{display:none; position:relative; overflow:visible; margin:var(--sp-4) 0; padding:var(--sp-5) var(--sp-6)}
.shc-board.is-active{display:block}
.shc-board-div{height:1px; background:linear-gradient(90deg, transparent, var(--color-border-strong), transparent); margin:var(--sp-4) 0}
.shc-board.is-perfect{border-color:color-mix(in srgb, var(--color-success) 55%, transparent);
background:color-mix(in srgb, var(--color-success) 6%, var(--color-surface))}
/* ---- overall hero: slim horizontal strip ---- */
.shc-overall{display:flex; gap:var(--sp-5); align-items:center}
.shc-oring-wrap{flex:none}
.shc-oring{position:relative; width:104px; height:104px}
.shc-oring svg{width:100%; height:100%; transform:rotate(-90deg)}
.shc-oring-score{font-family:var(--font-display); font-weight:900; font-size:var(--fs-3xl); color:var(--color-text)}
.shc-overall-body{flex:1; min-width:0}
.shc-overall-host{color:var(--color-muted); font-family:var(--font-mono); font-size:var(--fs-xs)}
.shc-overall-h{font-family:var(--font-display); font-weight:800; font-size:var(--fs-xl); color:var(--color-text);
margin:2px 0 var(--sp-1); display:flex; align-items:center; gap:var(--sp-2)}
.shc-overall-sub{color:var(--color-muted); margin:0; line-height:1.5; font-size:var(--fs-sm)}
.shc-overall-grade{display:inline-flex; align-items:center; justify-content:center; min-width:1.7em; height:1.7em; padding:0 .35em;
font-size:.8em; color:var(--tone,var(--color-text)); border-radius:var(--r-md);
border:2px solid var(--tone,var(--color-border)); background:color-mix(in srgb, var(--tone,var(--color-border)) 14%, transparent)}
/* ---- tool tiles: compact rings in one tight grid ----
container-type is what lets the to-do pill shrink itself on the narrowest
tiles instead of wrapping to a second line (see .shc-tile-todo). */
.shc-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(104px, 1fr)); gap:var(--sp-3)}
.shc-tile{container-type:inline-size; display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--sp-1);
text-decoration:none; color:inherit; padding:var(--sp-2) var(--sp-1); border-radius:var(--r-lg);
border:1px solid transparent;
transition:transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease)}
.shc-tile:hover{transform:translateY(-2px); border-color:var(--tone,var(--color-border-strong));
background:color-mix(in srgb, var(--tone,var(--color-border)) 7%, transparent); color:inherit}
.shc-tile-head{display:flex; align-items:center; gap:.35em; max-width:100%}
.shc-tile-ico{font-size:.95rem; line-height:1}
.shc-tile-name{font-family:var(--font-display); font-weight:700; font-size:var(--fs-xs); color:var(--color-text);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.shc-ring{position:relative; width:80px; height:80px; margin:2px 0}
.shc-ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.shc-tile-score{font-family:var(--font-display); font-weight:900; font-size:var(--fs-lg); color:var(--color-text)}
.shc-tile-of{color:var(--color-muted); font-size:.58rem; margin-top:1px}
.shc-tile-blurb{color:var(--color-muted); font-size:.62rem; line-height:1.3; max-width:13em;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
/* the extended one-line verdict under each tile (the human-readable "why") */
.shc-tile-verdict{color:var(--color-text); font-size:.7rem; line-height:1.4; margin:2px 0 0; max-width:14em;
display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.shc-tile.is-loading .shc-tile-verdict{color:var(--color-muted)}
/* ---- the to-do pill ------------------------------------------------------
Bright and impossible to miss (it IS the number people act on), but a CHIP,
not a neon sticker. What makes the difference:
• no outer glow. A big soft halo on a small element is the single thing
that reads as cheap. It's replaced by an inset top highlight + one tight
grounding shadow — how a real physical chip catches light.
• small and dense (fs-xs / weight 800) rather than big and soft.
• the NUMBER leads: 3 is a step larger and heavier than the word.
• SVG tick, never an emoji (emoji renders differently on every platform).
And it must NEVER wrap: nowrap + short copy ("All clear", not the old
"✓ No to-do's!") + a container query that tightens it on narrow tiles.
Always the tile's LAST child; margin-top:auto pins it to the base so pills
line up across every card. */
.shc-tile-todo{display:inline-flex; align-items:center; gap:.34em; margin-top:auto;
font-family:var(--font-display); font-weight:800; font-size:var(--fs-xs); letter-spacing:.015em;
line-height:1.45; white-space:nowrap; color:var(--color-bg);
border:0; border-radius:var(--r-full); padding:.2em .7em;
background:var(--shc-pill, var(--color-danger));
box-shadow:inset 0 1px 0 rgba(255,255,255,.32),
inset 0 -1px 0 rgba(0,0,0,.18),
0 2px 5px rgba(0,0,0,.45)}
.shc-tile-todo--ok{--shc-pill:var(--color-success)}
.shc-tile-todo b{font-size:1.12em; font-weight:900; letter-spacing:0}
.shc-pill-ico{display:inline-flex; width:.85em; height:.85em; flex:none}
.shc-pill-ico svg{width:100%; height:100%}
.shc-tile:hover .shc-tile-todo{filter:brightness(1.08)}
@container (max-width: 106px){
.shc-tile-todo{font-size:.64rem; padding:.18em .55em; gap:.28em; letter-spacing:0}
}
/* grade chip overlapping the ring's top-right corner (high-tech, saves a whole row) */
.shc-tile-grade{position:absolute; top:-4px; right:-6px; display:inline-flex; align-items:center; justify-content:center;
min-width:1.6em; height:1.6em; padding:0 .25em; font-family:var(--font-display); font-weight:800; font-size:var(--fs-xs);
color:var(--tone,var(--color-text)); border-radius:var(--r-sm);
border:2px solid var(--tone,var(--color-border)); background:var(--color-surface);
box-shadow:0 2px 8px rgba(0,0,0,.4)}
.shc-tile-grade--load{border-style:dashed; border-color:var(--color-border); background:var(--color-surface)}
.shc-tile.is-loading{opacity:.9}
.shc-tile.is-na{opacity:.6}
.shc-tile.is-done{animation:shc-pop var(--dur) var(--ease) both}
@keyframes shc-pop{from{opacity:.4; transform:scale(.94)} to{opacity:1; transform:scale(1)}}
/* ---- Speed card flip slot: Google badge on the front, todo pill "behind" it ----
The slot tumbles rotateX(180)+rotateY(180) when the score lands. That compound is a net in-plane
180° turn, so the back face carries a static rotate(180deg) (upside down AND back-to-front) and
arrives upright when the tumble completes. The two faces swap opacity at the edge-on midpoint. */
.shc-flip{display:block; position:relative; margin-top:auto; perspective:500px; width:100%}
.shc-flip-inner{display:block; position:relative; transform-style:preserve-3d;
transition:transform .9s var(--ease)}
.shc-flip.is-flipped .shc-flip-inner{transform:rotateX(180deg) rotateY(180deg)}
.shc-flip-front{display:flex; justify-content:center; opacity:1; transition:opacity .1s linear .4s}
.shc-flip.is-flipped .shc-flip-front{opacity:0}
.shc-flip-back{position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center;
transform:rotate(180deg); opacity:0; transition:opacity .1s linear .4s}
.shc-flip.is-flipped .shc-flip-back{opacity:1}
.shc-flip-back .shc-tile-todo{margin-top:0}
/* Google attribution badge on the Speed tile. BRAND SIMULATION EXCEPTION: the four literal hex
values below are Google's official logo colours (required for trademark-correct rendering);
everything else stays on host tokens. */
.shc-google-badge{display:inline-flex; align-items:center; gap:var(--sp-2); max-width:100%; margin-top:var(--sp-2);
font-size:var(--fs-xs); font-weight:700; color:var(--color-text);
border:1.5px solid var(--color-border-strong); border-radius:var(--r-full); padding:.4em .8em .4em .4em;
background:var(--color-surface-3); box-shadow:0 2px 12px rgba(0,0,0,.3)}
.shc-google-badge span:last-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.shc-google-ico{display:inline-flex; width:1.5rem; height:1.5rem; flex:none}
.shc-google-ico svg{width:100%; height:100%}
.shc-google-ico .gg-blue{fill:#4285F4}
.shc-google-ico .gg-green{fill:#34A853}
.shc-google-ico .gg-yellow{fill:#FBBC05}
.shc-google-ico .gg-red{fill:#EA4335}
/* ---------- actions row (share / copy / save / re-run) ---------- */
.shc-actions{display:none; position:relative; margin-top:var(--sp-4); padding-top:var(--sp-4);
border-top:1px solid var(--color-border)}
.shc-actions.is-active{display:block}
.shc-actions-row{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2)}
.shc .shc-mini{font-size:var(--fs-sm); padding:.5em 1em; display:inline-flex; align-items:center; gap:.45em}
.shc-mini-ico{display:inline-flex; width:1.05em; height:1.05em; flex:none}
.shc-mini-ico svg{width:100%; height:100%}
.shc .shc-mini[disabled]{opacity:.45; cursor:not-allowed}
.shc .shc-mini.is-done{color:var(--color-success)}
/* share popover */
.shc-pop{position:absolute; z-index:40; bottom:calc(100% + var(--sp-2)); left:0; width:min(21rem, 92vw);
padding:var(--sp-4); border-radius:var(--r-xl); border:1px solid var(--color-border-strong);
background:var(--color-surface-2, var(--color-surface));
box-shadow:0 24px 48px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.4);
animation:shc-pop-in var(--dur-fast) var(--ease) both}
@keyframes shc-pop-in{from{opacity:0; transform:translateY(6px) scale(.97)} to{opacity:1; transform:none}}
/* No room above (button near the top of the viewport): flip below the button. */
.shc-pop.is-below{bottom:auto; top:calc(100% + var(--sp-2))}
.shc-pop-h{font-family:var(--font-display); font-weight:800; font-size:var(--fs-sm); color:var(--color-text);
margin-bottom:var(--sp-3)}
.shc-pop-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-2)}
.shc-pop-btn{display:flex; flex-direction:column; align-items:center; gap:.35em; padding:var(--sp-3) var(--sp-1);
border-radius:var(--r-lg); border:1px solid var(--color-border); background:var(--color-surface-3, transparent);
color:var(--color-text); text-decoration:none; font-size:var(--fs-xs); font-weight:700;
transition:border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease)}
.shc-pop-btn:hover{border-color:var(--color-primary); transform:translateY(-2px); color:var(--color-text)}
.shc-pop-ico{display:inline-flex; width:1.3rem; height:1.3rem}
.shc-pop-ico svg{width:100%; height:100%}
.shc .shc-pop-copy{width:100%; margin-top:var(--sp-3); justify-content:center}
/* ============================================================================
THE FLOATING CARD (celebration + offer)
Anchored to the board's top-right and deliberately overhanging its top border,
its right border and the corner of the tiles behind it.
THE CARD DOES NOT DRIFT. It used to wander on four nested infinite animations
(drift x / drift y / drift rotate / breathe, at 17.3s / 11.7s / 9.1s / 23.9s).
Because the card carries four stacked drop-shadows, moving it meant re-rasterising
that filter every frame, forever, and it dropped mid-range and older machines to a
bad frame rate for as long as the report was on screen. The idle drift is gone and
should not come back.
Everything else stays: the entry settle, the trophy, the headline shine and the
cursor-tracked glow. They are one-shot or small, and they were never the problem.
pointer-events:none on the card because it sits ON TOP of real tiles;
only its buttons take clicks.
========================================================================== */
/* --tilt and --tone live on the OUTER element: custom properties inherit
downward only, and the static rotate sits on .shc-float-r (an ancestor of the
card), so defining them on the card itself would leave the rotation reading an
undefined value. */
.shc-float{--tilt:-5.5deg; --tone:var(--color-primary);
/* Offsets tuned so the card breaks the board's top edge and its right edge and
clips only the TOP of the tiles behind it — enough overlap to read as
floating above the report, not so much that it hides a grade. */
position:absolute; z-index:20; top:-64px; right:-92px; width:18.5rem; max-width:46vw;
pointer-events:none; --shc-glow:var(--color-glow-soft)}
.shc-float--perfect{--tone:var(--color-success);
--shc-glow:color-mix(in srgb, var(--color-success) 20%, transparent)}
.shc-float--offer{--tone:var(--color-primary); --shc-glow:var(--color-glow-soft)}
/* The tilt the drift keyframes used to hold, now a plain static transform. The
wrapper stack is kept because the variants' layout hangs off it. */
.shc-float-r{transform:rotate(var(--tilt))}
.shc-float-card{
position:relative; text-align:center; padding:var(--sp-5) var(--sp-4);
border-radius:var(--r-xl); border:1px solid var(--tone, var(--color-border-strong));
background:linear-gradient(165deg,
color-mix(in srgb, var(--tone) 16%, var(--color-surface)),
var(--color-surface) 62%);
/* drop-shadow, not box-shadow: the card is rotated, and the shadow has to
follow the actual shape for it to read as lifted off the page. Stacked from
a wide soft cast down to a tight contact shadow — that gradient of hardness
is what makes it read as HEIGHT rather than as a dark blur behind a box. */
filter:drop-shadow(0 38px 62px rgba(0,0,0,.92))
drop-shadow(0 16px 26px rgba(0,0,0,.78))
drop-shadow(0 4px 8px rgba(0,0,0,.6))
drop-shadow(0 0 34px color-mix(in srgb, var(--tone) 26%, transparent));
/* entry: a physical settle (overshoot) into its resting place. Time-based here;
the board card overrides this with the scroll-driven version below. This is
also the fallback wherever scroll-driven animation isn't supported. */
opacity:0; transform:scale(.82) rotate(-16deg);
transition:opacity .42s var(--ease), transform .62s cubic-bezier(.34,1.56,.64,1)}
.shc-float.is-in .shc-float-card{opacity:1; transform:none}
/* ---- the board card's entry is SCROLL-DRIVEN ----------------------------------
The animation is scrubbed by the card's own position in the viewport, not by a
clock:
• it starts the instant the card's top edge crosses the BOTTOM of the
viewport, at opacity 0 and full overshoot → `entry 0%`
• it does not reach opacity 1 / its resting place until the card is 50%
through the viewport → `cover 50%`
• linear, one keyframe pair, so opacity AND transform run smoothly across
that entire range together — neither finishes early.
Scroll-linked, so scrolling back up rewinds it; that is the point of scrubbing
rather than firing once.
Board variants only. The modal's flag/FREE floats live in a position:fixed
dialog that never scrolls, where a view() timeline has nothing to measure
against — they keep the time-based settle above.
@supports because Chrome/Edge 115+, Firefox 136+ and Safari 26+ have this and
everything older simply keeps the time-based settle. */
@supports (animation-timeline: view()){
.shc-float--offer .shc-float-card,
.shc-float--perfect .shc-float-card,
.shc-float--offer.is-in .shc-float-card,
.shc-float--perfect.is-in .shc-float-card{
transition:none;
animation:shc-float-enter linear both;
animation-timeline:view();
animation-range:entry 0% cover 50%}
}
@keyframes shc-float-enter{
from{opacity:0; transform:scale(.82) rotate(-16deg)}
to{opacity:1; transform:none}}
/* Cursor-tracked glow: the same radial-gradient-at-(--mx,--my) trick as the
homepage service cards and the tools hub tiles. The card is pointer-events:none
(so it can't steal clicks from the tiles beneath), which means :hover never
matches on it — app.js tracks the cursor on the document and toggles .is-lit
instead. Children are lifted to z-index 1 so the glow sits behind the copy. */
.shc-float-card::before{content:''; position:absolute; inset:0; z-index:0;
border-radius:inherit; pointer-events:none;
background:radial-gradient(circle at var(--mx,50%) var(--my,0%), var(--shc-glow), transparent 55%);
opacity:0; transition:opacity var(--dur) var(--ease)}
.shc-float-card.is-lit::before{opacity:1}
.shc-float-card > *{position:relative; z-index:1}
.shc-float-trophy{font-size:2.9rem; line-height:1; animation:shc-trophy 6.7s ease-in-out infinite alternate}
@keyframes shc-trophy{from{transform:translateY(2px) rotate(-7deg)} to{transform:translateY(-4px) rotate(7deg)}}
.shc-float-h{font-family:var(--font-display); font-weight:900; font-size:var(--fs-2xl); line-height:1.1;
letter-spacing:.01em; margin:var(--sp-2) 0 var(--sp-1);
background:linear-gradient(90deg, var(--color-success), var(--color-accent-2), var(--color-secondary), var(--color-primary));
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
background-size:200% auto; animation:shc-shine 3s linear infinite}
@keyframes shc-shine{to{background-position:200% center}}
.shc-float-kicker{font-family:var(--font-display); font-weight:800; font-size:var(--fs-sm); color:var(--color-text);
line-height:1.3}
/* FREE is the largest thing on the card — larger than the headline. On purpose. */
.shc-float-free{font-family:var(--font-display); font-weight:900; font-size:var(--fs-4xl); line-height:1;
letter-spacing:.08em; color:var(--color-primary); margin:var(--sp-1) 0 var(--sp-2);
text-shadow:0 0 24px color-mix(in srgb, var(--color-primary) 45%, transparent)}
.shc-float-sub{color:var(--color-muted); font-size:var(--fs-xs); line-height:1.45; margin:0 0 var(--sp-3)}
/* ---- the two CTAs ----
The most important buttons on the page, so they are full-width, large, and
they zoom on hover rather than nudging. Each says FREE in the OTHER button's
colour, which ties the pair together as one offer.
The `.shc` parent is load-bearing on every override here: on the live site
app.css loads BEFORE the host bundle, so `.btn:hover{transform:translateY(-2px)}`
would otherwise beat a bare `.shc-float-btn:hover` on source order. */
.shc .shc-float-btn{pointer-events:auto; width:100%; margin-top:var(--sp-3);
font-size:var(--fs-base); font-weight:800; padding:.85em 1em; white-space:nowrap;
transition:transform .24s cubic-bezier(.34,1.56,.64,1),
box-shadow var(--dur) var(--ease), background var(--dur-fast) var(--ease)}
.shc .shc-float-btn:hover{transform:scale(1.11)}
.shc .shc-float-btn:focus-visible{transform:scale(1.11); outline:2px solid var(--color-focus); outline-offset:3px}
.shc .shc-float-btn:active{transform:scale(1.04)}
/* FREE sits a step larger and heavier: at this size it clears the WCAG
large-text threshold, which is what lets the yellow-on-purple (and the
purple-on-yellow) pass contrast at 3:1. */
.shc-free{font-size:1.25em; font-weight:900; letter-spacing:.02em}
/* Two roots on purpose: the board card lives inside .shc, the modal is appended
to document.body. Both selectors clear the host .btn specificity. */
.shc .shc-btn--purple,
.shc-modal .shc-btn--purple{background:var(--color-secondary); border-color:var(--color-secondary);
color:#fff; animation:none;
box-shadow:0 0 0 1px var(--color-secondary), 0 8px 24px var(--color-glow-2-soft)}
.shc .shc-btn--purple:hover,
.shc-modal .shc-btn--purple:hover{background:color-mix(in srgb, var(--color-secondary) 88%, #fff);
box-shadow:0 0 0 1px var(--color-secondary), 0 0 30px var(--color-glow-2), 0 14px 36px rgba(0,0,0,.55)}
.shc .shc-btn--purple .shc-free,
.shc-modal .shc-btn--purple .shc-free{color:var(--color-primary)} /* FREE in yellow */
.shc .shc-float-btn--yellow .shc-free{color:var(--color-secondary)} /* FREE in purple */
/* ---- the switch-to-option-2 flag, floated across the download modal's top-left ----
Same shell, tilt and lift as the board card, but the card itself is just
a carrier: the yellow button IS the visible object, so the card is stripped back
to nothing and the drop-shadow moves onto it. It deliberately sits over the
close button; ESC and a veil click both still close the modal. */
.shc-float--flag{--tilt:-7deg; --tone:var(--color-primary);
position:absolute; top:-30px; left:-34px; right:auto; z-index:5;
width:15rem; max-width:78%}
.shc-float--flag .shc-float-card{padding:0; background:none; border:0; border-radius:var(--r-lg);
filter:drop-shadow(0 26px 42px rgba(0,0,0,.92))
drop-shadow(0 10px 16px rgba(0,0,0,.78))
drop-shadow(0 0 28px var(--color-glow-soft))}
.shc-float--flag .shc-float-card::before{content:none}
.shc-modal .shc-flag-btn{pointer-events:auto; width:100%; flex-direction:column; gap:.1em;
padding:.7em .9em; text-align:center; white-space:normal; line-height:1.25;
transition:transform .24s cubic-bezier(.34,1.56,.64,1), box-shadow var(--dur) var(--ease)}
.shc-modal .shc-flag-btn:hover{transform:scale(1.09)}
.shc-modal .shc-flag-btn:focus-visible{transform:scale(1.09); outline:2px solid var(--color-focus); outline-offset:3px}
.shc-flag-kicker{font-size:var(--fs-xs); font-weight:700; opacity:.75}
.shc-flag-main{font-size:var(--fs-base); font-weight:900; letter-spacing:.01em}
/* ---- option 2's modal: FREE, big, purple, floating off the top-left ----
Decorative (the heading already says "Free"), so it is aria-hidden and never
takes a click — the shell's pointer-events:none covers it. */
.shc-float--free{--tilt:-11deg; --tone:var(--color-secondary);
position:absolute; top:-36px; left:-22px; right:auto; z-index:5; width:auto}
.shc-float--free .shc-float-card{padding:0; background:none; border:0;
filter:drop-shadow(0 24px 38px rgba(0,0,0,.92))
drop-shadow(0 8px 14px rgba(0,0,0,.7))
drop-shadow(0 0 34px var(--color-glow-2))}
.shc-float--free .shc-float-card::before{content:none}
.shc-freeflag{font-family:var(--font-display); font-weight:900; font-size:var(--fs-5xl);
line-height:.85; letter-spacing:.04em; color:var(--color-secondary);
text-shadow:0 0 30px var(--color-glow-2), 0 3px 0 color-mix(in srgb, var(--color-bg) 70%, transparent)}
/* ---------- modal (lead forms) ---------- */
.shc-modal-veil{position:fixed; inset:0; z-index:9990; display:flex; align-items:center; justify-content:center;
padding:var(--sp-4); overflow-y:auto;
background:color-mix(in srgb, var(--color-bg) 74%, transparent);
backdrop-filter:blur(9px) saturate(.75); -webkit-backdrop-filter:blur(9px) saturate(.75);
opacity:0; transition:opacity var(--dur) var(--ease)}
.shc-modal-veil.is-in{opacity:1}
.shc-modal{position:relative; width:min(30rem, 100%); margin:auto; padding:var(--sp-6);
border-radius:var(--r-xl); border:1px solid var(--color-primary);
background:linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)), var(--color-surface));
box-shadow:0 40px 80px rgba(0,0,0,.6);
transform:translateY(14px) scale(.97); transition:transform var(--dur) var(--ease)}
.shc-modal-veil.is-in .shc-modal{transform:none}
.shc-modal-x{position:absolute; top:var(--sp-3); right:var(--sp-3); width:2rem; height:2rem; display:inline-flex;
align-items:center; justify-content:center; padding:0; cursor:pointer; color:var(--color-muted);
border:1px solid var(--color-border); border-radius:var(--r-full); background:transparent}
.shc-modal-x:hover{color:var(--color-text); border-color:var(--color-border-strong)}
.shc-modal-x svg{width:1rem; height:1rem}
.shc-modal-h{font-family:var(--font-display); font-weight:900; font-size:var(--fs-xl); color:var(--color-text);
margin:0 var(--sp-6) var(--sp-1) 0}
.shc-modal-sub{color:var(--color-primary); font-family:var(--font-display); font-weight:800; font-size:var(--fs-xs);
letter-spacing:.08em; text-transform:uppercase; margin:0 0 var(--sp-3)}
.shc-modal-pitch{color:var(--color-muted); font-size:var(--fs-sm); line-height:1.6; margin:0 0 var(--sp-4)}
.shc-modal-body .shc-lead{margin-top:0; padding-top:0}
/* ---------- lead CTA: the two paths (shown after a run with open fixes) ---------- */
.shc-cta{display:none; margin:var(--sp-5) 0}
.shc-cta.is-active{display:block; animation:shc-pop var(--dur) var(--ease) both}
.shc-cta-head{text-align:center; margin-bottom:var(--sp-4)}
.shc-cta-h{font-family:var(--font-display); font-weight:900; font-size:var(--fs-2xl); color:var(--color-text); margin:0 0 var(--sp-1)}
.shc-cta-sub{color:var(--color-muted); margin:0; font-size:var(--fs-base)}
.shc-cta-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); align-items:stretch}
.shc-path{display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-5)}
.shc-path--hot{border-color:color-mix(in srgb, var(--color-primary) 65%, transparent);
background:linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 7%, var(--color-surface)), var(--color-surface));
box-shadow:0 0 34px color-mix(in srgb, var(--color-primary) 18%, transparent)}
.shc-path-badge{align-self:flex-start; font-family:var(--font-display); font-weight:800; font-size:var(--fs-xs);
letter-spacing:.08em; color:var(--color-muted); border:1.5px solid var(--color-border-strong);
border-radius:var(--r-full); padding:.25em .9em}
.shc-path-badge--hot{color:var(--color-primary); border-color:color-mix(in srgb, var(--color-primary) 60%, transparent);
background:color-mix(in srgb, var(--color-primary) 12%, transparent)}
.shc-path-h{font-family:var(--font-display); font-weight:800; font-size:var(--fs-xl); color:var(--color-text); margin:0}
.shc-path-p{color:var(--color-muted); margin:0; line-height:1.6; font-size:var(--fs-sm)}
.shc-lead{display:flex; flex-direction:column; gap:var(--sp-2); margin-top:auto; padding-top:var(--sp-3)}
.shc-lead-in{width:100%}
.shc-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0} /* honeypot */
.shc-lead-consent{display:flex; gap:var(--sp-2); align-items:flex-start; color:var(--color-muted);
font-size:var(--fs-xs); line-height:1.5; cursor:pointer}
.shc-lead-consent input{margin-top:.2em; flex:none; accent-color:var(--color-primary)}
.shc-lead-btn{width:100%}
.shc-lead-fine{color:var(--color-muted); font-size:var(--fs-xs); margin:0; text-align:center}
.shc-lead-status{min-height:1.2em; color:var(--color-status-partial); font-size:var(--fs-xs); text-align:center}
.shc-lead-done{display:flex; gap:var(--sp-2); align-items:center; justify-content:center; text-align:left;
color:var(--color-text); padding:var(--sp-4) 0; font-weight:700}
.shc-lead-done-ico{display:inline-flex; align-items:center; justify-content:center; flex:none; width:1.8em; height:1.8em;
border-radius:var(--r-full); color:var(--color-success); border:2px solid var(--color-success);
background:color-mix(in srgb, var(--color-success) 14%, transparent)}
.shc-lead-done-ico svg{width:.9em; height:.9em}
/* ---------- celebration ---------- */
.shc-confetti{position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:9999}
@media (prefers-reduced-motion: reduce){
.shc-ring-fg, .shc-oring-fg{transition:none}
.shc-ring--load svg{animation-duration:2s}
.shc-flip-inner, .shc-flip-front, .shc-flip-back{transition:none} /* instant swap, no tumble */
/* The card still floats — it just stops moving. Tilt and lift are the design;
the entry settle and the trophy bob are the flourish. */
.shc-float-trophy, .shc-float-h{animation:none}
/* including the scroll-driven entry: the card is simply there, at rest. */
.shc-float-card, .shc-float--offer .shc-float-card, .shc-float--perfect .shc-float-card{
animation:none; transition:none; opacity:1; transform:none}
.shc-float-card::before{transition:none}
/* The CTA zoom is motion too. Swap it for a brightness lift so the buttons
still respond to hover without anything moving. */
.shc .shc-float-btn, .shc-modal .shc-flag-btn{transition:none}
.shc .shc-float-btn:hover, .shc .shc-float-btn:focus-visible, .shc .shc-float-btn:active,
.shc-modal .shc-flag-btn:hover, .shc-modal .shc-flag-btn:focus-visible{transform:none; filter:brightness(1.12)}
.shc-modal-veil, .shc-modal{transition:none}
}
/* ---------- responsive ---------- */
/* The overhang needs page margin to hang into, and between the static fallback
below and a roomy desktop there isn't any: the .shc column is capped at 60rem,
so around 960-1080px the board almost fills the viewport and a -92px overhang
pushed a horizontal scrollbar (measured: 70px of overflow at 960px). Pull the
card back over the board through that band — it still breaks the top edge.
Declared BEFORE the 900px block so the static fallback wins below that. */
@media (max-width: 1120px){
.shc-float{top:-52px; right:-10px; width:16rem}
}
@media (max-width: 900px){
/* The overhang would run off-screen: drop the card back into the flow under
the board, keeping the tilt and the lift. */
.shc-float{position:static; width:auto; max-width:22rem; margin:var(--sp-5) auto 0; --tilt:-2deg}
}
@media (max-width: 720px){
.shc-cta-grid{grid-template-columns:1fr}
}
@media (max-width: 560px){
.shc-form{flex-direction:column}
.shc-board{padding:var(--sp-4)}
.shc-overall{flex-direction:column; text-align:center; gap:var(--sp-3)}
.shc-overall-h{justify-content:center}
.shc-grid{grid-template-columns:repeat(auto-fit, minmax(92px, 1fr))}
.shc-pop{left:auto; right:0}
.shc-pop-grid{grid-template-columns:repeat(2, 1fr)}
/* The modal flags hang off the panel's top-left; at phone widths the veil has
only ~16px of padding to hang into, so pull them back inside. */
.shc-float--flag{top:-20px; left:-8px; width:12.5rem; max-width:88%}
.shc-float--free{top:-26px; left:-4px}
.shc-freeflag{font-size:var(--fs-4xl)}
}
/* ---------- print ----------
We no longer offer a PDF button (the browser print of this page runs to six
pages of shell prose and looks nothing like the report — sharing the rendered
card image is the good version of that idea). This block stays only so an
ad-hoc Ctrl+P doesn't put the confetti canvas, a floating card mid-animation
or an open modal on paper. */
@media print{
.shc-confetti, .shc-pop, .shc-modal-veil, .shc-float{display:none !important}
.shc-board, .shc-tile{break-inside:avoid}
}