/* Radary — landing page. Light-committed marketing surface; the console keeps
   its own theme toggle. Layout language: centered hero + framed product shot
   (Plausible), value sections with product visuals (Otterly). */

:root{
  --plane:#f9f9f7; --surface:#fcfcfb; --surface-2:#f2f2ee; --surface-3:#eaeae4;
  --ink:#0b0b0b; --ink-2:#52514e; --muted:#898781;
  --border:rgba(11,11,11,.10); --border-strong:rgba(11,11,11,.18);
  --accent:#2a78d6; --accent-soft:rgba(42,120,214,.10);
  --good:#0ca30c; --warn:#fab219; --crit:#d03b3b;
  --shadow:0 1px 2px rgba(11,11,11,.05), 0 10px 30px -18px rgba(11,11,11,.25);
  --shadow-lg:0 2px 4px rgba(11,11,11,.05), 0 24px 70px -28px rgba(11,11,11,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--plane);color:var(--ink);
  font:15px/1.6 Inter,ui-sans-serif,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--accent);text-decoration:none}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--ink);color:#fff;
  border:0;border-radius:12px;padding:13px 24px;font:inherit;font-weight:600;font-size:15px;cursor:pointer;
  transition:transform .12s,opacity .12s}
.btn:hover{opacity:.88;transform:translateY(-1px)}
.btn.sm{padding:8px 16px;font-size:13px;border-radius:9px}
.btn.big{padding:15px 28px;font-size:16px}
.btn.google{background:#fff;color:var(--ink);border:1px solid var(--border-strong);box-shadow:var(--shadow)}
.btn.google:hover{opacity:1;border-color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--border-strong)}
.btn.ghost:hover{opacity:1;color:var(--ink);border-color:var(--ink)}

/* nav — just the mark, centred, inside the hero so its backdrop flows from the
   very top edge (no seam between page background and hero gradient) */
.lnav{position:relative;display:flex;justify-content:center;padding:40px 24px 58px}
.brand{display:flex;align-items:center;gap:13px;font-weight:800;font-size:28px;letter-spacing:-.035em;color:var(--ink)}
.brand svg{color:var(--accent)}
.sweep{transform-origin:16px 16px;animation:sweep 9s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sweep{animation:none}}
.brand .blip{opacity:0;animation:blip 9s linear infinite}
@keyframes blip{0%,52%{opacity:0}58%{opacity:1}74%{opacity:.85}88%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.brand .blip{animation:none;opacity:1}}

/* ============ hero ============ */
.hero-l{position:relative;overflow:hidden;padding:0 0 0;
  background:
    radial-gradient(52% 48% at 50% -6%, rgba(42,120,214,.10), transparent 70%),
    radial-gradient(40% 34% at 88% 30%, rgba(27,175,122,.06), transparent 70%),
    radial-gradient(40% 34% at 10% 36%, rgba(235,104,52,.05), transparent 70%);}
.hero-l::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(11,11,11,.05) 1px, transparent 1.4px);
  background-size:26px 26px;
  mask-image:linear-gradient(180deg,#000 0%,transparent 52%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 52%);}
.hero-center{position:relative;text-align:center;max-width:860px}
.kicker{display:inline-block;margin:0 0 18px;font-size:12.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}
.hero-center h1{margin:0 0 20px;font-size:clamp(32px,6vw,56px);line-height:1.08;letter-spacing:-.04em;font-weight:800}
.hero-center h1 em{font-style:normal;color:var(--accent)}
.sub{color:var(--ink-2);font-size:clamp(16px,2vw,18.5px);line-height:1.6;max-width:62ch;margin:0 auto 30px}
.cta-row{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap}
.gate-note{font-size:12.5px;color:var(--muted);margin:16px 0 0}
.canary-signature{display:inline-flex;align-items:center;gap:9px;margin:13px auto 0;padding:6px 13px 6px 8px;
  color:var(--ink-2);font-size:13px;background:rgba(252,252,251,.82);border:1px solid var(--border);
  border-radius:99px;box-shadow:0 1px 2px rgba(11,11,11,.04);backdrop-filter:blur(8px)}
.canary-signature strong{color:var(--ink);font-weight:700}
.auth-status{font-size:13px;color:var(--crit);margin:10px auto 0;max-width:60ch}
.btn:disabled{cursor:wait;opacity:.65;transform:none}

/* ============ the framed dashboard ============ */
.frame-wrap{position:relative;margin-top:56px;padding-bottom:96px}
.frame-wrap::after{content:"";position:absolute;left:10%;right:10%;bottom:60px;height:120px;
  background:radial-gradient(50% 100% at 50% 100%, rgba(42,120,214,.14), transparent 70%);z-index:-1}
.frame{background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow-lg);pointer-events:none;user-select:none}
.frame-bar{display:flex;align-items:center;gap:7px;padding:11px 16px;border-bottom:1px solid var(--border);
  background:var(--surface-2)}
.tl{width:11px;height:11px;border-radius:50%;background:#ec6a5e}
.tl.y{background:#f4bf4f}.tl.g{background:#61c554}
.frame-url{margin-left:14px;font-size:12px;color:var(--muted);background:var(--surface);
  border:1px solid var(--border);border-radius:7px;padding:3px 14px}
.sample-tag{margin-left:auto;font-size:11px;font-weight:600;color:#8a6510;background:rgba(250,178,25,.14);
  border-radius:99px;padding:3px 11px}
.frame-body{display:flex;min-height:520px}
@media(max-width:820px){.f-side{display:none}}

/* frame: sidebar */
.f-side{flex:0 0 178px;border-right:1px solid var(--border);padding:16px 12px;
  background:color-mix(in srgb,var(--surface-2) 45%,var(--surface));display:flex;flex-direction:column;gap:14px;text-align:left}
.f-brand{display:flex;align-items:center;gap:7px;font-weight:800;font-size:13.5px;letter-spacing:-.02em}
.f-org{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;padding:7px 9px;font-size:11px;line-height:1.25}
.f-org b{display:block;font-size:12px}
.f-org i{font-style:normal;color:var(--muted);font-size:10.5px}
.f-av{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,#2a78d6,#1baf7a);
  color:#fff;font-weight:700;font-size:11px;display:grid;place-items:center;flex:0 0 22px}
.f-nav{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--ink-2)}
.f-nav span{padding:7px 9px;border-radius:8px;display:flex;align-items:center;gap:6px}
.f-nav .on{background:var(--accent-soft);color:var(--ink);font-weight:600}
.f-count{margin-left:auto;font-size:10px;font-weight:700;color:var(--crit);background:rgba(208,59,59,.1);
  border-radius:99px;padding:1px 7px}

/* frame: main */
.f-main{flex:1;padding:16px 20px 20px;display:flex;flex-direction:column;gap:12px;text-align:left;min-width:0}
.f-top{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);padding-bottom:4px;border-bottom:1px solid var(--border)}
.f-top b{font-size:13.5px;color:var(--ink)}
.f-live{width:7px;height:7px;border-radius:50%;background:var(--good);margin-left:auto;box-shadow:0 0 0 3px rgba(12,163,12,.14)}
.f-cap{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:9px}
.f-card{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:14px 16px;box-shadow:0 1px 2px rgba(11,11,11,.04)}

.f-hero{display:flex;align-items:center;gap:20px;background:var(--surface);border:1px solid var(--border);
  border-radius:13px;padding:14px 18px;box-shadow:0 1px 2px rgba(11,11,11,.04)}
.f-ring{flex:0 0 86px}
.f-hero-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.f-hero-copy .f-cap{margin-bottom:2px}
.f-hero-copy b{font-size:14.5px;letter-spacing:-.01em;line-height:1.3}
.f-delta{font-size:11.5px;color:var(--ink-2);font-weight:600}
.f-delta.watch{color:#a94722}
.f-kpis{margin-left:auto;display:flex;gap:22px}
@media(max-width:960px){.f-kpis{display:none}}
.f-kpis i{display:block;font-style:normal;font-size:10.5px;color:var(--muted);font-weight:600}
.f-kpis b{font-size:17px;letter-spacing:-.02em}
.f-kpis .crit{color:var(--crit)}
.f-kpis .watch{color:#a94722}

.f-products{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.f-pcard{display:flex;flex-direction:column;gap:7px;min-width:0;padding:12px 13px;background:var(--surface);
  border:1px solid var(--border);border-radius:12px}
.f-ptop{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.f-ptop b{font-size:12.5px;letter-spacing:-.015em;line-height:1.25}
.f-score{display:inline-flex;align-items:baseline;gap:1px;border-radius:8px;padding:3px 6px;font-weight:800;font-size:13px;line-height:1}
.f-score small{font-size:8.5px;font-weight:700;opacity:.7}
.f-score.is-good,.f-state.is-good{color:#0a7c0a;background:rgba(12,163,12,.1)}
.f-score.is-warn,.f-state.is-warn{color:#8a6510;background:rgba(250,178,25,.16)}
.f-score.is-serious,.f-state.is-serious{color:#a94722;background:rgba(236,131,90,.15)}
.f-score.is-crit,.f-state.is-crit{color:var(--crit);background:rgba(208,59,59,.1)}
.f-state{display:inline-flex;width:max-content;border-radius:99px;padding:2px 7px;font-size:10px;font-weight:800}
.f-psum{font-size:10.5px;color:var(--ink-2);line-height:1.3}
.f-pstrip{display:flex;gap:3px;height:6px}
.f-pstrip i{flex:1;border-radius:2px;background:#c2c1b9}
.f-pstrip i.is-leading{background:#0ca30c}
.f-pstrip i.is-behind{background:#fab219}
.f-pstrip i.is-risk{background:#a94722}
.f-pstrip i.is-absent{background:var(--crit)}
@media(max-width:960px){.f-products{grid-template-columns:1fr}}

.f-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:960px){.f-cols{grid-template-columns:1fr}}
.f-bar{display:grid;grid-template-columns:15px 58px 1fr 24px;gap:8px;align-items:center;padding:5px 0;font-size:12px;color:var(--ink-2)}
.f-bar img{width:14px;height:14px;object-fit:contain}
.f-bar em{display:block;height:12px;position:relative}
.f-bar em::before{content:"";position:absolute;inset:3px 0;background:var(--surface-2);border-radius:4px}
.f-bar u{position:absolute;top:0;bottom:0;left:0;border-radius:0 4px 4px 0;display:block;text-decoration:none}
.f-bar b{font-size:11.5px;text-align:right;color:var(--ink)}
.f-stack{display:flex;gap:2px;height:16px;border-radius:5px;overflow:hidden;margin-bottom:9px}
.f-stack i{border-radius:2.5px}
.f-keys{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--ink-2)}
.f-keys i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}
.f-row{display:flex;align-items:center;gap:9px;padding:5.5px 0;font-size:12.5px;border-bottom:1px solid var(--surface-2)}
.f-row:last-child{border-bottom:0}
.f-row.you{background:var(--accent-soft);border-radius:7px;padding-left:7px;padding-right:7px;border-bottom:0}
.f-row b{margin-left:auto;font-size:12px}
.f-rank{color:var(--muted);font-size:11px;width:12px}
.f-fav{width:15px;height:15px;border-radius:4px;object-fit:contain;display:inline-grid;place-items:center}
.f-avme{background:linear-gradient(135deg,#2a78d6,#1baf7a);color:#fff;font-size:9px;font-weight:700}
.f-avx{background:var(--surface-3);color:var(--ink-2);font-size:9px;font-weight:700}

.f-band{
  display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap;
  border-radius:12px;padding:11px 16px;color:#fff;font-size:12px;
  background:
    radial-gradient(70% 140% at 10% 0%, rgba(57,135,229,.32), transparent 60%),
    radial-gradient(60% 140% at 92% 100%, rgba(27,175,122,.24), transparent 60%),
    #0d1220;}
.f-band b{font-weight:700}
.f-band-next{font-size:11px;color:#fab219;border:1px dashed rgba(250,178,25,.55);border-radius:99px;padding:3px 11px;white-space:nowrap}

.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:6px;align-items:center}
.f-gh{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.f-gt{font-size:12.5px;font-weight:600}
.f-cell{font-size:11px;font-weight:700;text-align:center;border-radius:7px;padding:6px 4px}
.f-cell.ok{color:#0a7c0a;background:rgba(12,163,12,.1)}
.f-cell.mid{color:#8a6510;background:rgba(250,178,25,.16)}
.f-cell.bad{color:var(--crit);background:rgba(208,59,59,.09)}

/* ============ logo strip ============ */
.strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface)}
.strip-in{display:flex;align-items:center;gap:18px;padding:20px 24px;flex-wrap:wrap;justify-content:center}
.strip-label{font-size:12px;color:var(--muted)}
.strip-logos{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.lg{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink-2)}
.lg img{width:16px;height:16px;object-fit:contain}
.favs .lg img{border-radius:3px}
.strip-div{width:1px;height:22px;background:var(--border)}
@media(max-width:760px){.strip-div{display:none}}

/* ============ value sections ============ */
.val{padding:96px 0}
.val.alt{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.val-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
@media(max-width:880px){.val-grid{grid-template-columns:1fr;gap:36px}}
.val.alt .val-grid{direction:rtl}
.val.alt .val-grid>*{direction:ltr}
.eyebrow{display:inline-block;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  border-radius:99px;padding:5px 13px;margin-bottom:18px}
.val-copy h2{margin:0 0 16px;font-size:clamp(28px,3.6vw,40px);line-height:1.08;letter-spacing:-.035em;font-weight:800}
.val-copy p{margin:0 0 20px;color:var(--ink-2);font-size:15.5px;max-width:56ch}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ticks li{position:relative;padding-left:28px;font-size:14px;color:var(--ink-2);font-weight:500}
.ticks li::before{content:"✓";position:absolute;left:0;top:-1px;width:19px;height:19px;border-radius:6px;
  background:rgba(12,163,12,.1);color:#0a7c0a;font-size:11px;font-weight:800;display:grid;place-items:center}

.val-visual{display:flex;flex-direction:column;justify-content:center}
.v-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px 22px;
  box-shadow:var(--shadow-lg);text-align:left}
.val.alt .v-card{background:var(--plane)}
.v-states{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.v-states .f-cell{padding:8px 13px}
.v-note{margin:0;font-size:13px;color:var(--ink-2);line-height:1.55}
.v-tag{font-style:normal;font-size:10.5px;font-weight:700;border-radius:99px;padding:2px 9px;
  background:var(--surface-2);color:var(--muted)}
.v-tag.you-t{background:var(--accent-soft);color:var(--accent)}
.v-tag.comp{background:rgba(27,175,122,.12);color:#0d7a54}
.v-tag.rev{background:rgba(235,104,52,.1);color:#b4552f}
.v-action b{display:block;font-size:15.5px;letter-spacing:-.01em;margin:9px 0 7px}
.sevtag{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;border-radius:99px;padding:3px 10px}
.sevtag.crit{color:var(--crit);background:rgba(208,59,59,.1)}
.sevtag.ser{color:#b4552f;background:rgba(236,131,90,.13)}

/* ============ method ============ */
.method{padding:96px 0}
.method h2.center{text-align:center;font-size:clamp(28px,3.6vw,40px);letter-spacing:-.035em;margin:0 0 12px;font-weight:800}
.method-sub{text-align:center;color:var(--ink-2);font-size:15.5px;margin:0 auto 44px;max-width:52ch}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding:26px 26px 22px;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}
.step .n{position:absolute;top:-14px;left:22px;width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,#2a78d6,#1baf7a);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800}
.step h3{margin:6px 0 8px;font-size:16.5px;letter-spacing:-.015em}
.step p{margin:0;color:var(--ink-2);font-size:13.8px}

/* ============ CTA band ============ */
.band{padding:40px 0 96px}
.band-in{display:flex;align-items:center;gap:32px;justify-content:space-between;flex-wrap:wrap;
  background:
    radial-gradient(70% 120% at 15% 0%, rgba(57,135,229,.25), transparent 60%),
    radial-gradient(60% 120% at 90% 100%, rgba(27,175,122,.18), transparent 60%),
    #0d1220;
  border-radius:24px;padding:52px 54px;color:#fff;box-shadow:var(--shadow-lg)}
.band h2{margin:0 0 10px;font-size:clamp(24px,3.2vw,34px);letter-spacing:-.03em;font-weight:800}
.band p{margin:0;color:rgba(255,255,255,.72);font-size:15px;max-width:52ch}
.band .btn{background:#fff;color:#0b0b0b}

/* footer */
.lfoot{border-top:1px solid var(--border);padding:24px 0;background:var(--surface)}
.lfoot-in{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}