:root{
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --shadow-soft: 0 16px 40px rgba(27,31,33,.08);
  --shadow-card: 0 18px 50px rgba(24,28,34,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);line-height:1.5;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input{font:inherit}
button{cursor:pointer}
.sr-only{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.container{width:min(1220px, calc(100% - 32px));margin-inline:auto}

.theme-light{
  --bg:#f8f4e8;
  --surface:#fbf8ee;
  --surface-2:#fffdf7;
  --surface-3:#efe6cf;
  --text:#191612;
  --muted:#665d50;
  --line:#d8ceb6;
  --accent:#0e5167;
  --accent-2:#1b97b1;
  --accent-soft:#d8f0f7;
  --button:#0b2230;
  --button-text:#fff;
  --warm:#d96e0a;
  --warm-2:#f4b03a;
  --hero-overlay:linear-gradient(90deg, rgba(248,244,232,.98) 0%, rgba(248,244,232,.93) 32%, rgba(248,244,232,.72) 44%, rgba(248,244,232,.1) 60%, rgba(248,244,232,0) 100%);
}
.theme-dark{
  --bg:#080d1a;
  --surface:#0f1628;
  --surface-2:#131b31;
  --surface-3:#161f38;
  --text:#eef0ff;
  --muted:#a7b0d4;
  --line:#253055;
  --accent:#8a6dff;
  --accent-2:#5f82ff;
  --accent-soft:#1a2342;
  --button:#8a6dff;
  --button-text:#fff;
  --warm:#ff8c2b;
  --warm-2:#fb58ff;
  --hero-overlay:linear-gradient(90deg, rgba(8,13,26,.97) 0%, rgba(8,13,26,.9) 34%, rgba(8,13,26,.64) 48%, rgba(8,13,26,.14) 63%, rgba(8,13,26,0) 100%);
}

.site-header{position:sticky;top:0;z-index:30;background:color-mix(in srgb, var(--bg) 86%, transparent);backdrop-filter:blur(16px);border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:-.02em}
.brand__mark{width:42px;height:42px;flex:none}
.brand__word{font-size:1.45rem;font-family:var(--font-display)}
.site-nav{display:flex;align-items:center;gap:28px;font-size:.96rem;color:var(--muted)}
.site-nav a:hover{color:var(--text)}
.nav-cta{position:relative;display:inline-flex;align-items:center;overflow:hidden;
  padding:.72rem 1.15rem;border-radius:14px;
  background:linear-gradient(135deg,var(--warm),var(--warm-2));
  color:#fff!important;font-weight:700;
  box-shadow:0 10px 24px rgba(217,110,10,.18)}
.nav-cta__label{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.4em}
.nav-cta--support .nav-cta__label::after{content:"\2197";font-size:.85em;opacity:.85}

/* Support.
   Three cues, each doing a different job. A halo that breathes so it reads as warm
   rather than urgent. A shine that crosses the button on a long cycle, which is what
   the eye actually catches. And a short nudge that fires a handful of times on arrival
   and then stops, because motion that never stops gets tuned out within seconds. */
.nav-cta--support{
  box-shadow:0 10px 26px rgba(217,110,10,.3), 0 0 0 0 color-mix(in srgb, var(--warm) 55%, transparent);
  animation:supportHalo 3.2s ease-in-out infinite,
            supportNudge 6s cubic-bezier(.36,.07,.19,.97) 3;
  transform-origin:center}

.nav-cta--support::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.42) 50%,
    rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);
  animation:supportShine 5.5s ease-in-out infinite;
  animation-delay:1.4s;
  pointer-events:none}

@keyframes supportHalo{
  0%,100%{box-shadow:0 10px 26px rgba(217,110,10,.3), 0 0 0 0 color-mix(in srgb, var(--warm) 48%, transparent)}
  50%    {box-shadow:0 12px 30px rgba(217,110,10,.42), 0 0 0 7px color-mix(in srgb, var(--warm) 0%, transparent)}
}
@keyframes supportShine{
  0%,62%{left:-60%}
  86%,100%{left:118%}
}
/* A nudge, not a shake. Two small tilts, then still. */
@keyframes supportNudge{
  0%,8%,100%{transform:none}
  10%{transform:rotate(-2.2deg) scale(1.03)}
  12.5%{transform:rotate(1.8deg) scale(1.03)}
  15%{transform:rotate(-1.2deg) scale(1.02)}
  17.5%{transform:rotate(.7deg)}
  20%{transform:none}
}

.nav-cta--support:hover{animation-play-state:paused;transform:translateY(-1px)}
.nav-cta:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .nav-cta--support{animation:none}
  .nav-cta--support::after{animation:none;display:none}
}

.hero{position:relative;padding:28px 0 0}
.hero__panorama{position:absolute;inset:0 0 auto 0;height:640px;border-bottom-left-radius:32px;border-bottom-right-radius:32px;overflow:hidden}
.hero__panorama > img:first-child{width:100%;height:100%;object-fit:cover;object-position:center}
.hero__panorama::after{content:"";position:absolute;inset:0;background:var(--hero-overlay)}
.hero__content{position:relative;z-index:2;min-height:640px;display:flex;align-items:stretch}
.hero__copy{width:min(620px,100%);padding:48px 0 44px;display:flex;flex-direction:column;justify-content:center}
.eyebrow{margin:0 0 14px;text-transform:uppercase;letter-spacing:.16em;font-size:.75rem;font-weight:800;color:var(--accent-2)}
.hero h1{margin:0;font-family:var(--font-display);font-size:clamp(3rem, 5vw, 5.2rem);line-height:.95;letter-spacing:-.05em;max-width:8ch}
.hero__lede{margin:22px 0 0;max-width:58ch;color:var(--muted);font-size:1.08rem}
.pulse-word{color:#a977ff;animation:pulseWord 2.2s ease-in-out infinite}
.pulse-word:nth-child(2){animation-delay:.35s}
@keyframes pulseWord{0%,100%{color:#ab8aff;text-shadow:0 0 0 rgba(171,138,255,0)}50%{color:#d0c2ff;text-shadow:0 0 18px rgba(171,138,255,.5)}}

.hero-form{margin-top:28px;max-width:640px}
.hero-form__row{display:grid;grid-template-columns:1fr auto;gap:14px;padding:10px;border-radius:22px;background:color-mix(in srgb, var(--surface) 84%, transparent);border:1px solid color-mix(in srgb, var(--line) 82%, transparent);box-shadow:var(--shadow-soft)}
.hero-form input{width:100%;background:transparent;border:0;outline:none;color:var(--text);padding:14px 16px;font-size:1.02rem}
.hero-form input::placeholder{color:color-mix(in srgb, var(--muted) 85%, transparent)}
.hero-form__meta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px}
.hero-form__help{margin:0;color:var(--muted);font-size:.88rem}
.status{display:inline-flex;min-height:1.25rem;margin-top:10px;color:var(--accent);font-weight:700;font-size:.92rem}
.status.is-busy::after{content:"";width:10px;height:10px;margin-left:8px;border-radius:999px;background:currentColor;display:inline-block;animation:blink 1s infinite}
@keyframes blink{0%,100%{opacity:.22;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}
.alert{margin:10px 0 0;padding:12px 14px;border-radius:14px;background:rgba(192,43,43,.1);color:#9e2424;border:1px solid rgba(192,43,43,.18)}

.btn{appearance:none;border:0;border-radius:16px;padding:.95rem 1.2rem;font-weight:700;letter-spacing:-.01em;transition:transform .2s ease, box-shadow .2s ease, background .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--button);color:var(--button-text);box-shadow:0 14px 30px rgba(8,13,26,.18)}
.theme-dark .btn--primary{background:linear-gradient(135deg,#8162ff,#5c89ff)}
.btn--secondary{background:color-mix(in srgb, var(--accent) 12%, var(--surface-2));color:var(--text);border:1px solid var(--line)}
.btn--ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
.btn--small{padding:.58rem .95rem;border-radius:12px}

.trust-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:32px}
.trust-item{padding:16px 14px;border-radius:18px;background:color-mix(in srgb, var(--surface-2) 74%, transparent);border:1px solid color-mix(in srgb, var(--line) 78%, transparent);box-shadow:var(--shadow-soft)}
.trust-item__icon{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-weight:800;margin-bottom:10px}
.trust-item p{margin:0;color:var(--muted);font-size:.92rem}

.hero__dog{position:absolute;right:max(4vw, 34px);bottom:24px;z-index:1;pointer-events:none;filter:drop-shadow(0 28px 28px rgba(0,0,0,.18))}
.hero__dog--standing{width:min(34vw, 440px)}
.hero__dog--lying{width:min(36vw, 490px);right:max(3vw, 24px);bottom:30px}
.drift,.spark{position:absolute;display:block;pointer-events:none;z-index:0}
.hero--light .drift--one{left:52%;top:102px;width:180px;height:70px;background:radial-gradient(circle at 40% 50%, rgba(255,248,218,.9), rgba(255,248,218,0) 70%);filter:blur(6px);animation:floaty 7s ease-in-out infinite}
.hero--light .drift--two{left:17%;top:124px;width:260px;height:90px;background:radial-gradient(circle at 40% 50%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);filter:blur(14px);animation:floaty 10s ease-in-out infinite reverse}
@keyframes floaty{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(18px,-8px,0)}}
.hero--dark .spark--one,.hero--dark .spark--two{width:150px;height:150px;border-radius:999px;background:radial-gradient(circle, rgba(153,124,255,.35), rgba(153,124,255,0) 65%);filter:blur(6px);animation:glowdrift 8s ease-in-out infinite}
.hero--dark .spark--one{left:59%;top:130px}
.hero--dark .spark--two{left:72%;top:280px;animation-delay:1s;animation-direction:reverse}
@keyframes glowdrift{0%,100%{transform:translate3d(0,0,0) scale(.94)}50%{transform:translate3d(14px,-10px,0) scale(1.06)}}

.sample-cards{position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:-58px;padding-bottom:24px}
.sample-card,.result-card,.panel,.guide article{background:color-mix(in srgb, var(--surface-2) 88%, transparent);backdrop-filter:blur(10px);border:1px solid color-mix(in srgb, var(--line) 85%, transparent);border-radius:24px;box-shadow:var(--shadow-card)}
.sample-card{padding:24px 22px 22px;position:relative;overflow:hidden;min-height:290px}
.sample-card::after,.result-card::after{content:"";position:absolute;inset:auto -40px -42px auto;width:130px;height:130px;border-radius:999px;background:radial-gradient(circle, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 70%);opacity:.5}
.sample-card__art{width:58px;height:58px;color:color-mix(in srgb, var(--accent-2) 65%, var(--text));margin-bottom:16px;opacity:.7}
.sample-card__label,.result-card__label{margin:0 0 10px;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;font-weight:800;color:var(--accent-2)}
.sample-card h2{margin:0 0 10px;font-size:1.48rem;line-height:1.08;letter-spacing:-.03em}
.sample-card p:not(.sample-card__label){margin:0;color:var(--muted)}
.card-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:.72rem 1rem;border-radius:14px;background:color-mix(in srgb, var(--accent-soft) 72%, transparent);color:var(--text);font-weight:700}
.card-link::after{content:"→"}

.panel{padding:28px 30px;margin-top:26px}
.panel h2,.panel h3{margin:0 0 10px;font-family:var(--font-display);letter-spacing:-.03em;font-size:2rem}
.panel p{margin:0;color:var(--muted)}
.panel--accent{background:linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 92%, transparent), color-mix(in srgb, var(--accent-soft) 35%, transparent))}
.plain-list{margin:18px 0 0;padding-left:18px;color:var(--muted)}
.plain-list li+li{margin-top:8px}

.results{padding-top:20px;padding-bottom:22px}
.result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.result-card{position:relative;padding:24px 22px 22px;overflow:hidden;min-height:290px}
.result-card__art{position:absolute;top:18px;right:18px;width:64px;height:64px;opacity:.4}
.result-card__host{font-size:2rem;line-height:1.05;letter-spacing:-.04em;font-weight:800;margin:6px 0 8px;font-family:var(--font-display);max-width:10ch;overflow-wrap:anywhere}
.result-card__url,.result-card__mono,.result-card__sub{color:var(--muted);margin:0 0 14px;overflow-wrap:anywhere}
.result-card__mono{font-family:ui-monospace, SFMono-Regular, Menlo, monospace}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 18px}
.chips li{padding:.35rem .55rem;border-radius:999px;background:color-mix(in srgb, var(--surface-3) 65%, transparent);border:1px solid var(--line);font-size:.8rem;color:var(--muted)}
.rail{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:12px}
.stop{position:relative;padding:14px 16px;border-radius:16px;background:color-mix(in srgb, var(--surface) 76%, transparent);border:1px solid color-mix(in srgb, var(--line) 70%, transparent)}
.stop__top{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:8px}
.stop__code{display:inline-flex;padding:.24rem .5rem;border-radius:999px;background:color-mix(in srgb, var(--accent) 16%, transparent);font-size:.78rem;font-weight:800}
.stop__host{font-weight:800}
.stop__url,.stop__why{margin:0;color:var(--muted);font-size:.92rem;overflow-wrap:anywhere}
.warning-panel{margin-top:22px}

.guide{padding:36px 0 44px}
.guide__wrap{padding:30px;border-radius:32px;background:linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 85%, transparent), color-mix(in srgb, var(--surface) 78%, transparent));border:1px solid color-mix(in srgb, var(--line) 80%, transparent);box-shadow:var(--shadow-card)}
.guide__intro h2{margin:.2rem 0 .6rem;font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);letter-spacing:-.04em}
.guide__intro p:last-child{margin:0;color:var(--muted);max-width:60ch}
.guide__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:24px}
.guide article{padding:22px}
.guide article h3{margin:0 0 8px;font-size:1.2rem;line-height:1.15}
.guide article p{margin:0;color:var(--muted)}
.guide__close{margin:22px 0 0;font-weight:700;color:var(--text)}

.site-footer{padding:28px 0 46px;border-top:1px solid color-mix(in srgb, var(--line) 78%, transparent)}

input.is-bad{box-shadow:inset 0 0 0 2px #c23f3f;border-radius:12px}

@media (max-width: 1080px){
  .hero__panorama{height:690px}
  .hero__content{min-height:690px}
  .hero__dog--standing{width:min(38vw, 380px)}
  .hero__dog--lying{width:min(42vw, 420px)}
  .trust-strip,.sample-cards,.result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide__grid{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .site-header{position:static}
  .nav-wrap{flex-wrap:wrap}
  .site-nav{width:100%;justify-content:space-between;gap:12px;font-size:.9rem;flex-wrap:wrap}
  .nav-cta{padding:.66rem .9rem}
  .hero__panorama{position:relative;height:560px;border-radius:28px}
  .hero__panorama::after{background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.04) 33%, var(--bg) 94%)}
  .theme-dark .hero__panorama::after{background:linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.12) 38%, var(--bg) 94%)}
  .hero{padding-top:18px}
  .hero__content{min-height:auto;margin-top:-120px;padding-bottom:0}
  .hero__copy{width:100%;padding:0 0 10px}
  .hero h1{max-width:unset;font-size:clamp(2.7rem, 12vw, 4rem)}
  .hero__dog{right:8px;bottom:22px}
  .hero__dog--standing{width:250px}
  .hero__dog--lying{width:290px}
  .hero-form__row{grid-template-columns:1fr}
  .trust-strip,.sample-cards,.result-grid{grid-template-columns:1fr}
  .sample-cards{margin-top:12px}
  .panel,.guide__wrap{padding:22px}
  .guide{padding-top:16px}
}


/* Corrected panoramic hero build */
.hero{padding-top:18px}
.hero__panorama{position:absolute;inset:0 0 auto 0;height:720px;border-bottom-left-radius:34px;border-bottom-right-radius:34px;overflow:hidden;background:var(--surface)}
.hero__panorama > img:first-child{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
.hero--light .hero__panorama::after{background:linear-gradient(90deg, rgba(248,244,232,.96) 0%, rgba(248,244,232,.93) 28%, rgba(248,244,232,.7) 40%, rgba(248,244,232,.28) 56%, rgba(248,244,232,0) 69%)}
.hero--dark .hero__panorama::after{background:linear-gradient(90deg, rgba(6,10,24,.88) 0%, rgba(6,10,24,.86) 30%, rgba(6,10,24,.62) 42%, rgba(6,10,24,.2) 58%, rgba(6,10,24,0) 72%)}
.hero__content{min-height:720px;align-items:flex-start}
.hero__copy{width:min(650px, 52%);padding:78px 0 54px;justify-content:flex-start}
.hero h1{max-width:8.5ch}
.hero__lede{max-width:34rem;font-size:1.1rem}
.hero-form{max-width:720px}
.hero-form__row{background:color-mix(in srgb, var(--surface) 90%, transparent)}
.theme-dark .hero-form__row{background:rgba(10,16,33,.72);box-shadow:0 14px 40px rgba(0,0,0,.25)}
.theme-dark .hero-form__meta .btn--ghost{background:rgba(18,28,54,.85)}
.trust-strip{max-width:740px}
.trust-item{padding:14px 14px 16px}
.sample-cards{margin-top:22px}
.card-link, .result-card .btn--secondary{background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 14%, var(--surface-2)), color-mix(in srgb,var(--accent-2) 12%, var(--surface-2)))}
.result-card .btn--secondary, .sample-card .btn--secondary{border-color:color-mix(in srgb, var(--accent-2) 25%, var(--line))}
.theme-dark .sample-card, .theme-dark .result-card, .theme-dark .panel, .theme-dark .guide article{background:linear-gradient(180deg, rgba(15,22,40,.95), rgba(17,26,48,.86))}
.theme-dark .sample-card::after, .theme-dark .result-card::after{background:radial-gradient(circle, rgba(138,109,255,.18), transparent 72%)}
.theme-dark .site-header{background:rgba(4,8,20,.72)}
.theme-dark .guide__wrap{background:linear-gradient(180deg, rgba(15,22,40,.94), rgba(12,18,34,.86))}
@media (max-width: 1080px){
  .hero__panorama{height:680px}
  .hero__content{min-height:680px}
  .hero__copy{width:min(620px,58%);padding-top:64px}
}
@media (max-width: 760px){
  .hero__panorama{position:relative;height:520px;border-radius:28px}
  .hero__panorama > img:first-child{object-position:62% center}
  .hero--light .hero__panorama::after{background:linear-gradient(180deg, rgba(248,244,232,.06) 0%, rgba(248,244,232,.06) 36%, rgba(248,244,232,.92) 84%, rgba(248,244,232,1) 100%)}
  .hero--dark .hero__panorama::after{background:linear-gradient(180deg, rgba(7,10,22,.08) 0%, rgba(7,10,22,.15) 36%, rgba(8,13,26,.9) 84%, rgba(8,13,26,1) 100%)}
  .hero__content{min-height:auto;margin-top:-92px}
  .hero__copy{width:100%;padding:0 0 10px}
  .trust-strip{max-width:none}
  .sample-cards{margin-top:12px}
}

/* Dark-mode polish pass: marquee crop + intentional icon system */
.hero__panorama > picture{position:absolute;inset:0;display:block;width:100%;height:100%}
.hero__panorama > picture img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
.hero__panorama > picture + *{position:relative}

.trust-item{position:relative;overflow:hidden;min-height:142px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.trust-item:hover{transform:translateY(-3px);border-color:rgba(145,116,255,.58);box-shadow:0 18px 40px rgba(61,56,140,.18)}
.trust-item__icon{position:relative;width:56px;height:56px;padding:8px;border-radius:18px;background:linear-gradient(145deg,rgba(122,95,255,.25),rgba(43,74,142,.18));border:1px solid rgba(145,116,255,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 24px rgba(122,95,255,.12);margin-bottom:14px;animation:trustFloat 4.6s ease-in-out infinite}
.trust-item:nth-child(2) .trust-item__icon{animation-delay:.55s}
.trust-item:nth-child(3) .trust-item__icon{animation-delay:1.1s}
.trust-item:nth-child(4) .trust-item__icon{animation-delay:1.65s}
.trust-item__icon::after{content:"";position:absolute;inset:5px;border-radius:14px;background:radial-gradient(circle at 50% 42%,rgba(170,142,255,.16),transparent 66%);pointer-events:none}
.trust-item__icon img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 9px rgba(139,108,255,.28))}
@keyframes trustFloat{0%,100%{transform:translateY(0);filter:brightness(1)}50%{transform:translateY(-4px);filter:brightness(1.14)}}

.sample-card__art{width:84px;height:84px;padding:10px;border-radius:22px;background:linear-gradient(145deg,rgba(122,95,255,.16),rgba(55,87,155,.10));border:1px solid rgba(145,116,255,.22);opacity:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 28px rgba(28,20,76,.13);transition:transform .25s ease,box-shadow .25s ease}
.sample-card:hover .sample-card__art{transform:translateY(-3px) rotate(-1deg);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 16px 34px rgba(75,56,170,.20)}
.sample-card__art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 8px rgba(139,108,255,.20))}
.result-card__art{width:76px;height:76px;top:16px;right:16px;padding:9px;opacity:1}

@media (max-width:760px){
  .hero__panorama > picture img{object-position:center top}
  .hero__panorama{height:590px}
  .hero__content{margin-top:-96px}
  .trust-item{min-height:128px}
  .trust-item__icon{width:60px;height:60px}
  .sample-card__art{width:78px;height:78px}
}

@media (prefers-reduced-motion:reduce){
  .trust-item__icon{animation:none!important}
}

/* The header is sticky, so anchor targets need clearance or they land underneath it. */
:target,#start,#how,#about,#results{scroll-margin-top:96px}
@media (max-width:760px){:target,#start,#how,#about,#results{scroll-margin-top:16px}}

/* Sending someone away from the page should be signposted, not a surprise. */
.site-nav a[href^="https://ookiipup.com"]:not(.nav-cta)::after,
.footer-wrap a[href^="https://ookiipup.com"]::after{content:"\2197";margin-left:.3em;font-size:.85em;opacity:.7}

/* Footer.
   Two rows: an invitation with its own call to action, then the quiet legal base.
   The support ask gets room to breathe instead of being one more grey link. */
.site-footer{padding:44px 0 46px}
.footer-wrap{display:block}
.footer-lead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px 40px;padding-bottom:26px}
.footer-lead__text{flex:1 1 340px;min-width:0}
.footer-brand{margin:0 0 6px}
.footer-support{margin:0;max-width:52ch;color:var(--muted)}

.footer-cta{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  padding:.86rem 1.5rem;border-radius:14px;
  background:linear-gradient(135deg,var(--warm),var(--warm-2));
  color:#fff!important;font-weight:700;letter-spacing:-.01em;
  box-shadow:0 10px 26px rgba(217,110,10,.22);
  transition:transform .2s ease, box-shadow .2s ease}
.footer-cta:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(217,110,10,.3)}
.footer-cta:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.footer-cta::after{content:none!important}

.footer-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;
  padding-top:22px;border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent)}
.footer-nav{display:flex;flex-wrap:wrap;gap:22px;color:var(--muted)}
.footer-nav a:hover{color:var(--text)}
.footer-note{margin:0;color:var(--muted)}
.footer-note a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.footer-note a:hover{color:var(--accent)}

@media (max-width:760px){
  .site-footer{padding:32px 0 40px}
  .footer-lead{gap:20px}
  .footer-cta{width:100%}
  .footer-base{justify-content:flex-start;gap:14px}
  .footer-note{flex:1 1 100%}
}

/* Empty status text reserved a full line and pushed the trust tiles down. It now
   sits inside the meta row and takes no height until it has something to say. */
.hero-form__meta{flex-wrap:wrap}
.hero-form__help{flex:1 1 auto}
.status{min-height:0;margin-top:0}
.status:empty{display:none}
.trust-strip{margin-top:22px}

/* Belt and braces: any author display rule beats the browser default for [hidden]. */
[hidden]{display:none!important}

/* Why check a link.
   Sits after the preview cards, which carry a -42px pull-up, so it needs its own
   clearance rather than inheriting the overlap. */
.why{position:relative;z-index:1;padding:26px 0 12px}
.why__intro{max-width:62ch;margin:0 0 28px}
.why__intro h2{margin:0;font-family:var(--font-display);font-size:clamp(1.8rem,3.2vw,2.7rem);line-height:1.06;letter-spacing:-.03em}
.why__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.why-card{padding:24px 22px;border-radius:18px;background:color-mix(in srgb, var(--surface-2) 74%, transparent);border:1px solid color-mix(in srgb, var(--line) 78%, transparent);box-shadow:var(--shadow-soft)}
.why-card h3{margin:0 0 10px;font-size:1.06rem;line-height:1.3;letter-spacing:-.01em}
.why-card p{margin:0;color:var(--muted);font-size:.98rem;line-height:1.6}
@media (max-width:1040px){.why__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.why__grid{grid-template-columns:1fr}}

/* Hero band sizing.
   The marquee used to be a fixed 720px while the copy column was a separate fixed
   height, so the tiles floated off the bottom of the image at some widths and left
   dead space at others. Instead the image now stretches to the hero box, and the
   hero's own bottom padding is the strip of marquee left visible under the tiles.
   Content length and viewport width can both change and the relationship holds. */
@media (min-width:761px){
  .hero{padding:28px 0 72px}
  .hero__panorama{inset:0;height:auto}
  .hero__content{min-height:0;align-items:flex-start}
  .hero__copy{padding:44px 0 0;justify-content:flex-start}

  /* Tightened so the whole column, tiles included, clears the marquee comfortably. */
  .hero h1{font-size:clamp(2.9rem,4.4vw,4.5rem)}
  .hero__lede{margin-top:18px}
  .hero-form{margin-top:22px}
  .trust-strip{margin-top:18px}

  /* The preview cards tuck into the bottom of the image rather than sitting under it. */
  .sample-cards{margin-top:26px}
}

/* Mobile keeps the stacked arrangement: image first, copy riding up over it. */
@media (max-width:760px){
  .hero{padding-bottom:0}
  .hero__content{min-height:auto}
  .trust-strip{margin-top:18px}
  .sample-cards{margin-top:16px}
}

/* Results.
   Sits directly under the hero so the answer lands where the question was asked. */
.results{scroll-margin-top:96px;padding-top:34px}
.results:focus{outline:none}
.results__head{margin:0 0 18px;font-family:var(--font-display);font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.03em}

/* Long hostnames were breaking mid-word into unreadable stacks. Break at the dots
   where possible, and step the size down so a long name still reads as one thing. */
.result-card__host{overflow-wrap:break-word;word-break:normal;hyphens:none;
  font-size:clamp(1.35rem,2.2vw,2rem);line-height:1.12}
.result-card__url,.stop__url{overflow-wrap:anywhere}

/* With no tracking to strip, the clean card is hidden and two cards are left.
   The grid should close up rather than leave a hole. */
.result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;align-items:start}

@media (max-width:760px){
  .results{scroll-margin-top:12px;padding-top:24px}
}

/* The preview cards carry a negative top margin so they tuck into the marquee.
   With results now sitting between the hero and the cards, that pull-up has to
   switch off once there is a result, or the cards climb into it. */
/* No pull-up. Cards sit below whatever precedes them, hero or results, and can
   never climb into it. */
.sample-cards{margin-top:26px!important;padding-top:0}
@media (max-width:760px){.sample-cards{margin-top:18px!important}}

/* Hostnames now carry <wbr> after each dot, so they wrap at the joints and never
   need to break inside a label. */
.result-card__host,.stop__host{overflow-wrap:normal;word-break:normal}

/* What this is telling you.
   This is the conclusion, not more evidence, so it leads the results and is styled
   to look different from the data cards rather than like another one of them. */
.reading{position:relative;margin:0 0 22px;padding:28px 28px 24px 32px;border-radius:18px;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 12%, var(--surface-2)),
    color-mix(in srgb, var(--accent-2) 7%, var(--surface-2)));
  border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  box-shadow:0 18px 44px rgba(8,13,26,.34), 0 0 0 1px rgba(255,255,255,.02) inset}

/* A lit edge so the eye finds it before the cards below. */
.reading::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:4px;
  border-radius:0 4px 4px 0;background:linear-gradient(180deg,var(--accent),var(--accent-2))}

.reading__head{margin:0 0 16px;font-size:1.18rem;letter-spacing:-.01em;color:var(--text)}
.reading__list{list-style:none;margin:0;padding:0;display:grid;gap:13px}

.reading__item{position:relative;padding-left:28px;color:var(--text);line-height:1.6;
  opacity:0;transform:translateY(6px);
  animation:readingIn .42s ease-out forwards;
  animation-delay:calc(var(--i, 0) * 90ms)}
@keyframes readingIn{to{opacity:1;transform:none}}

.reading__item::before{content:"";position:absolute;left:2px;top:.52em;width:11px;height:11px;
  border-radius:3px;background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent)}

/* Anything worth pausing over reads warm and sits on its own tinted band, so a
   quick glance separates "noted" from "worth a second look". */
.reading__item.is-warn{padding:10px 14px 10px 30px;margin-left:-2px;border-radius:12px;
  background:color-mix(in srgb, var(--warm) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--warm) 32%, transparent);font-weight:600}
.reading__item.is-warn::before{left:12px;top:1.05em;background:var(--warm);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--warm) 22%, transparent)}

.reading__foot{margin:20px 0 0;padding-top:16px;font-size:.95rem;color:var(--muted);
  border-top:1px solid color-mix(in srgb, var(--line) 55%, transparent)}

@media (max-width:760px){.reading{padding:22px 18px 20px 24px}}
@media (prefers-reduced-motion:reduce){
  .reading__item{opacity:1;transform:none;animation:none}
}

/* Shooting stars.
   Seven comets riding the same arcs the marquee already paints: rising steeply from
   the low left, then flattening as they climb right. Every one stops short of the
   dog, and the ones that travel furthest right are the ones running high above his
   head, where there is clear sky.

   Each has its own cycle length rather than a shared one with offsets, so they never
   settle into a repeating pattern. Over a minute the order and spacing keep changing. */
.skystreak{position:absolute;top:0;right:0;z-index:1;width:min(64%,1180px);height:92%;
  pointer-events:none;overflow:hidden}

.skystreak__comet{opacity:0;offset-rotate:auto;
  animation-name:cometRun;animation-iteration-count:infinite;
  animation-timing-function:cubic-bezier(.28,.04,.35,1)}

/* High lane. Clear sky above the head, so these run furthest right. */
.skystreak__comet--a{offset-path:path("M -40 396 C 44 268, 174 138, 548 34");
  animation-duration:9.5s;  animation-delay:.6s}
.skystreak__comet--e{offset-path:path("M 0 356 C 84 246, 208 118, 574 22");
  animation-duration:13s;   animation-delay:4.1s}
.skystreak__comet--g{offset-path:path("M -60 424 C 30 296, 158 152, 512 46");
  animation-duration:15.5s; animation-delay:8.8s}

/* Middle lane. Stops level with his shoulder, never reaching the head. */
.skystreak__comet--b{offset-path:path("M 20 500 C 92 362, 202 232, 402 128");
  animation-duration:11s;   animation-delay:2.3s}
.skystreak__comet--d{offset-path:path("M -20 462 C 52 332, 152 202, 356 102");
  animation-duration:12.5s; animation-delay:6.4s}

/* Low lane. Shortest reach, well clear of his chest. */
.skystreak__comet--c{offset-path:path("M 72 546 C 152 404, 262 274, 398 206");
  animation-duration:10.5s; animation-delay:3.4s}
.skystreak__comet--f{offset-path:path("M 112 574 C 190 436, 296 306, 384 244");
  animation-duration:14s;   animation-delay:10.2s}

/* Short bright streak, then a long wait. The gap is what keeps it feeling like
   weather rather than a loading spinner. */
@keyframes cometRun{
  0%   {offset-distance:0%;   opacity:0}
  2%   {opacity:0}
  5%   {opacity:.88}
  11%  {opacity:.88}
  15%  {offset-distance:100%; opacity:0}
  100% {offset-distance:100%; opacity:0}
}

/* Mobile.
   The marquee becomes a banner at the top, so the layer is repositioned over it and
   the arcs are redrawn for the portrait crop: a band across the top where the sky is
   open, then down the left side, following the dog's silhouette. Same three-lane idea,
   different geometry, because the crop is different. */
@media (max-width:760px){
  .skystreak{left:0;right:auto;width:100%;height:590px;border-radius:28px}
  /* viewBox is 1000x600 with preserveAspectRatio none, so these coordinates stretch
     to the banner box at any phone width. */

  /* Top lane. Clear sky above his head, so these cross the full width. */
  .skystreak__comet--a{offset-path:path("M -40 300 C 90 210, 300 96, 900 44");
    animation-duration:9s;    animation-delay:.5s}
  .skystreak__comet--e{offset-path:path("M -30 258 C 110 176, 340 74, 940 30");
    animation-duration:12.5s; animation-delay:3.6s}

  /* Upper left. Stops before his ears. */
  .skystreak__comet--g{offset-path:path("M -60 372 C 60 274, 210 168, 392 96");
    animation-duration:15s;   animation-delay:7.9s}
  .skystreak__comet--b{offset-path:path("M -50 430 C 60 330, 190 222, 356 140");
    animation-duration:10.5s; animation-delay:2.1s}

  /* Left flank. Runs down the open strip beside him. */
  .skystreak__comet--d{offset-path:path("M -60 520 C 30 430, 130 336, 268 258");
    animation-duration:13.5s; animation-delay:5.8s}
  .skystreak__comet--c{offset-path:path("M -40 578 C 40 496, 120 410, 226 340");
    animation-duration:11.5s; animation-delay:9.4s}
  .skystreak__comet--f{offset-path:path("M -70 470 C 20 386, 110 300, 240 214");
    animation-duration:14.5s; animation-delay:12.3s}

  /* Smaller heads, so they read at phone scale. */
  .comet__head{r:5}
}

@media (prefers-reduced-motion:reduce){
  .skystreak{display:none}
}