/* ==========================================================================
   RF Coordination — marketing landing page (the rf-cheatsheet tool).
   Ported verbatim from the Claude Design handoff (rf-landing.css). Self-
   contained: own dark palette + amber/teal + spectrum status tokens (--sp-*).
   Standalone page. The live spectrum analyzer demo (region tabs + animated
   scan trace + coordination windows) runs on js/landings/rf-cheatsheet.js
   (vanilla port of the React SpectrumDemo). No build step.
   ========================================================================== */

:root{
  --bg-app:#0d1117;
  --bg-primary:#0f0f0f;
  --bg-surface:#1a1d22;
  --text-primary:#f0ece4;
  --text-muted:#8a8a8a;
  --text-faint:rgba(240,236,228,.4);
  --accent-amber:#e8a838;
  --accent-amber-bright:#f0b840;
  --accent-teal:#3a8c8c;
  --color-success:#47c78a;
  --color-warning:#f5b759;
  --color-error:#ef5b5b;
  --color-tx:#5b9cf6;
  --color-cellular:#b464ff;
  --scan-trace:#4dd9ac;
  --border-surface:1px solid rgba(240,236,228,.07);
  --border-strong:rgba(240,236,228,.15);
  --radius:12px;
  --glow-amber:0 0 60px rgba(232,168,56,.15);
  --font-body:'DM Sans',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono','Courier New',monospace;
  --sp-occupied:rgba(239,91,91,.78);
  --sp-protected:rgba(245,183,89,.5);
  --sp-whitespace:rgba(71,199,138,.10);
  --sp-intermod:rgba(232,168,56,.32);
  --sp-intermod-stroke:rgba(232,168,56,.65);
  --sp-cellular:rgba(180,100,255,.30);
  --sp-cellular-stroke:rgba(180,100,255,.7);
  --sp-window:rgba(71,199,138,.10);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg-app);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.6;}
.rfl{position:relative;overflow-x:hidden;}
.rfl .wrap{max-width:1160px;margin:0 auto;padding:0 28px;}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}

/* ---------------- NAV ---------------- */
.rfl-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;height:64px;padding:0 28px;
  background:color-mix(in oklab,var(--bg-app) 84%,transparent);backdrop-filter:blur(12px);border-bottom:var(--border-surface);}
.rfl-brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto;}
.rfl-brand svg{width:30px;height:30px;flex:none;border-radius:5px;}
.rfl-brand .wm{font-family:var(--font-mono);font-weight:700;font-size:15px;color:var(--text-primary);letter-spacing:-.02em;}
.rfl-brand .wm b{color:var(--accent-amber);font-weight:700;}
.rfl-links{display:flex;align-items:center;gap:28px;}
.rfl-links a{color:var(--text-muted);font-size:14px;text-decoration:none;transition:color .2s;}
.rfl-links a:hover{color:var(--text-primary);}
.rfl-links a.cta{display:inline-flex;align-items:center;gap:7px;background:var(--accent-amber);color:#0d1117;font-weight:600;font-size:13px;padding:9px 16px;border-radius:7px;white-space:nowrap;transition:background .2s,transform .12s;}
.rfl-links a.cta:hover{background:var(--accent-amber-bright);transform:translateY(-1px);}
.rfl-links a.cta svg{width:15px;height:15px;}
.rfl-toggle{display:none;width:40px;height:40px;place-items:center;background:var(--bg-surface);border:var(--border-surface);border-radius:7px;color:var(--text-primary);cursor:pointer;}
.rfl-toggle svg{width:18px;height:18px;}

/* ---------------- buttons ---------------- */
.rfl-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);font-weight:600;font-size:14.5px;
  padding:13px 24px;border-radius:8px;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:all .18s;white-space:nowrap;}
.rfl-btn svg{width:18px;height:18px;}
.rfl-btn--amber{background:var(--accent-amber);color:#0d1117;box-shadow:0 14px 40px -16px rgba(232,168,56,.5);}
.rfl-btn--amber:hover{background:var(--accent-amber-bright);transform:translateY(-1px);}
.rfl-btn--ghost{background:var(--bg-surface);border-color:var(--border-strong);color:var(--text-primary);}
.rfl-btn--ghost:hover{border-color:var(--accent-amber);color:var(--accent-amber);}

/* ---------------- HERO ---------------- */
.rfl-hero{position:relative;padding:64px 0 56px;}
.rfl-hero::before{content:"";position:absolute;left:50%;top:-60px;width:1100px;height:440px;transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 50% 60% at 50% 50%, rgba(232,168,56,.10), transparent 68%);}
.rfl-hero-inner{position:relative;z-index:1;}
.rfl-hero-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:48px;align-items:center;margin-bottom:38px;}

.rfl-tagrow{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap;}
.rfl-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;border-radius:999px;}
.rfl-pill.amber{color:var(--accent-amber);background:rgba(232,168,56,.12);border:1px solid rgba(232,168,56,.3);}
.rfl-pill.muted{color:var(--text-muted);background:var(--bg-surface);border:var(--border-surface);}

.rfl-h1{font-family:var(--font-body);font-weight:800;font-size:clamp(36px,5vw,56px);line-height:1.02;letter-spacing:-.025em;margin:0;color:var(--text-primary);text-wrap:balance;}
.rfl-h1 .accent{color:var(--accent-amber);}
.rfl-lede{color:var(--text-muted);font-size:clamp(15px,1.6vw,17.5px);line-height:1.6;max-width:520px;margin:20px 0 0;}
.rfl-lede strong{color:var(--text-primary);font-weight:600;}
.rfl-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px;}
.rfl-trust{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;margin-top:24px;}
.rfl-trust span{display:inline-flex;align-items:center;gap:8px;color:var(--text-faint);font-size:13px;}
.rfl-trust svg{width:15px;height:15px;color:var(--accent-amber);flex:none;}

/* time-to-coordinate badge */
.rfl-ttc{position:relative;background:var(--bg-surface);border:var(--border-surface);border-radius:var(--radius);padding:22px 24px;box-shadow:0 30px 80px -44px rgba(0,0,0,.9);}
.rfl-ttc__big{font-family:var(--font-mono);font-weight:700;font-size:52px;line-height:1;color:var(--accent-amber);letter-spacing:-.02em;}
.rfl-ttc__big small{font-family:var(--font-body);font-size:17px;font-weight:600;color:var(--text-muted);margin-left:6px;letter-spacing:0;}
.rfl-ttc__lab{color:var(--text-muted);font-size:13.5px;line-height:1.5;margin-top:10px;}
.rfl-ttc__row{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap;}
.rfl-ttc__step{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;color:var(--text-faint);}
.rfl-ttc__step b{color:var(--text-primary);font-weight:500;}
.rfl-ttc__dot{width:6px;height:6px;border-radius:50%;background:var(--accent-amber);}

/* ---- live spectrum analyzer demo ---- */
.rfl-spectrum{background:var(--bg-surface);border:var(--border-surface);border-radius:16px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 40px 100px -50px rgba(0,0,0,.95);}
.rfl-spectrum__bar{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:var(--border-surface);flex-wrap:wrap;}
.rfl-spectrum__title{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);}
.rfl-regions{display:flex;gap:6px;margin-left:auto;}
.rfl-region-btn{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.04em;padding:6px 14px;border-radius:6px;
  color:var(--text-muted);background:var(--bg-app);border:1px solid transparent;cursor:pointer;transition:all .18s;}
.rfl-region-btn:hover{color:var(--text-primary);border-color:var(--border-strong);}
.rfl-region-btn.active{color:#0d1117;background:var(--accent-amber);border-color:var(--accent-amber);}
.rfl-spectrum__region-name{font-family:var(--font-mono);font-size:11px;color:var(--accent-teal);}

.rfl-spectrum__svg-wrap{position:relative;padding:18px 18px 6px;}
.rfl-spectrum__svg{display:block;width:100%;height:auto;}

.rfl-spectrum__legend{display:flex;gap:18px;flex-wrap:wrap;padding:10px 18px 16px;}
.rfl-leg{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--text-muted);}
.rfl-leg__sw{width:11px;height:11px;border-radius:2px;flex:none;}
.rfl-leg__sw--occ{background:var(--color-error);}
.rfl-leg__sw--im{background:var(--accent-amber);}
.rfl-leg__sw--cell{background:var(--color-cellular);}
.rfl-leg__sw--safe{background:var(--color-success);}
.rfl-leg__sw--scan{background:var(--scan-trace);}

/* coordination window cards under the spectrum */
.rfl-windows{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:0 18px 18px;}
.rfl-win{background:var(--bg-app);border:var(--border-surface);border-left:3px solid var(--color-success);border-radius:8px;padding:12px 13px;transition:transform .15s,border-color .15s;}
.rfl-win:hover{transform:translateY(-2px);border-left-color:var(--accent-amber);}
.rfl-win__range{font-family:var(--font-mono);font-size:13.5px;font-weight:700;color:var(--text-primary);}
.rfl-win__w{font-family:var(--font-mono);font-size:11.5px;color:var(--color-success);margin-top:4px;}
.rfl-win__tag{display:inline-block;font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--color-success);background:rgba(71,199,138,.15);border-radius:3px;padding:2px 6px;margin-top:8px;}

/* ---------------- STAT STRIP ---------------- */
.rfl-stats{border-top:var(--border-surface);border-bottom:var(--border-surface);background:color-mix(in oklab,var(--bg-app) 55%,#000);}
.rfl-stats-inner{display:grid;grid-template-columns:repeat(4,1fr);max-width:1160px;margin:0 auto;}
.rfl-stat{padding:26px 28px;text-align:center;border-left:var(--border-surface);}
.rfl-stat:first-child{border-left:none;}
.rfl-stat .big{font-family:var(--font-mono);font-weight:700;color:var(--accent-amber);font-size:28px;line-height:1;letter-spacing:-.02em;}
.rfl-stat .cap{color:var(--text-muted);font-size:12.5px;margin-top:10px;}

/* ---------------- section heads ---------------- */
.rfl-section{padding:74px 0;}
.rfl-band{background:var(--bg-surface);border-top:var(--border-surface);border-bottom:var(--border-surface);}
.rfl-eyebrow{text-align:center;color:var(--accent-amber);font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 16px;}
.rfl-title{text-align:center;font-family:var(--font-body);font-weight:800;color:var(--text-primary);font-size:clamp(28px,4.2vw,42px);line-height:1.1;letter-spacing:-.025em;margin:0 auto;max-width:20ch;}
.rfl-sub{text-align:center;color:var(--text-muted);font-size:15.5px;line-height:1.65;max-width:660px;margin:18px auto 0;}

/* ---------------- features ---------------- */
.rfl-features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px;}
.rfl-fcard{background:var(--bg-app);border:var(--border-surface);border-radius:14px;padding:24px 22px;transition:border-color .18s,transform .18s;}
.rfl-band .rfl-fcard{background:var(--bg-app);}
.rfl-fcard:hover{border-color:rgba(232,168,56,.4);transform:translateY(-2px);}
.rfl-fcard .ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;margin-bottom:16px;background:rgba(232,168,56,.12);color:var(--accent-amber);border:1px solid rgba(232,168,56,.24);}
.rfl-fcard .ic svg{width:19px;height:19px;}
.rfl-fcard h3{font-family:var(--font-body);font-weight:700;font-size:17.5px;color:var(--text-primary);margin:0 0 9px;letter-spacing:-.01em;}
.rfl-fcard p{color:var(--text-muted);font-size:14px;line-height:1.6;margin:0;}
.rfl-fcard p code{font-family:var(--font-mono);font-size:12px;background:var(--bg-surface);border:var(--border-surface);border-radius:5px;padding:1px 6px;color:var(--accent-amber);}

/* ---------------- scan import showcase ---------------- */
.rfl-showcase{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;margin-top:48px;align-items:center;}
.rfl-show-copy h3{font-family:var(--font-body);font-weight:800;font-size:clamp(23px,3vw,29px);color:var(--text-primary);margin:0 0 14px;letter-spacing:-.02em;line-height:1.14;}
.rfl-show-copy p{color:var(--text-muted);font-size:15px;line-height:1.66;margin:0 0 14px;}
.rfl-show-copy p strong{color:var(--text-primary);font-weight:600;}
.rfl-show-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:11px;}
.rfl-show-list li{display:flex;align-items:flex-start;gap:11px;color:var(--text-muted);font-size:14px;line-height:1.5;}
.rfl-show-list li svg{width:17px;height:17px;color:var(--color-success);flex:none;margin-top:2px;}

/* scan drop visual */
.rfl-drop{background:var(--bg-app);border:1.5px dashed var(--border-strong);border-radius:var(--radius);padding:22px;}
.rfl-drop__zone{border:1.5px dashed rgba(232,168,56,.4);border-radius:10px;padding:20px;text-align:center;background:rgba(232,168,56,.04);}
.rfl-drop__icon{width:34px;height:34px;margin:0 auto 10px;color:var(--accent-amber);}
.rfl-drop__icon svg{width:34px;height:34px;}
.rfl-drop__prompt{font-size:13px;color:var(--text-muted);}
.rfl-drop__prompt b{color:var(--text-primary);font-weight:600;}
.rfl-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;}
.rfl-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);background:var(--bg-surface);border:var(--border-surface);border-radius:999px;padding:5px 11px;}
.rfl-chip__dot{width:7px;height:7px;border-radius:50%;flex:none;}
.rfl-formats{margin-top:16px;display:flex;flex-direction:column;gap:7px;}
.rfl-format{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text-muted);padding:8px 12px;background:var(--bg-surface);border-radius:7px;}
.rfl-format .nm{font-weight:600;color:var(--text-primary);min-width:130px;}
.rfl-format code{font-family:var(--font-mono);font-size:11px;color:var(--accent-teal);}

/* ---------------- use cases ---------------- */
.rfl-uses{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px;}
.rfl-use{background:var(--bg-app);border:var(--border-surface);border-left:2px solid rgba(232,168,56,.45);border-radius:0 12px 12px 0;padding:20px 22px;}
.rfl-use h4{font-family:var(--font-body);font-weight:700;font-size:16px;color:var(--text-primary);margin:0 0 8px;letter-spacing:-.01em;}
.rfl-use p{color:var(--text-muted);font-size:13.5px;line-height:1.58;margin:0;}

/* ---------------- steps ---------------- */
.rfl-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px;}
.rfl-step{text-align:center;padding:6px;}
.rfl-step .badge{width:48px;height:48px;border-radius:13px;margin:0 auto 16px;display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:16px;color:var(--accent-amber);background:rgba(232,168,56,.10);border:1px solid rgba(232,168,56,.26);}
.rfl-step h4{font-family:var(--font-body);font-weight:700;font-size:16.5px;color:var(--text-primary);margin:0 0 9px;letter-spacing:-.01em;}
.rfl-step p{color:var(--text-muted);font-size:13.5px;line-height:1.55;margin:0 auto;max-width:26ch;}

/* ---------------- regions strip ---------------- */
.rfl-regions-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px;}
.rfl-reg-card{background:var(--bg-app);border:var(--border-surface);border-radius:12px;padding:20px;}
.rfl-reg-card__code{font-family:var(--font-mono);font-weight:700;font-size:22px;color:var(--accent-amber);}
.rfl-reg-card__name{font-size:13px;color:var(--text-primary);font-weight:600;margin-top:6px;}
.rfl-reg-card__auth{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);margin-top:3px;}
.rfl-reg-card__band{font-family:var(--font-mono);font-size:11px;color:var(--accent-teal);margin-top:10px;padding-top:10px;border-top:var(--border-surface);}

/* ---------------- FAQ ---------------- */
.rfl-faq{max-width:780px;margin:44px auto 0;border:var(--border-surface);border-radius:14px;overflow:hidden;background:var(--bg-app);}
.rfl-q{border-bottom:var(--border-surface);}
.rfl-q:last-child{border-bottom:none;}
.rfl-q summary{list-style:none;cursor:pointer;padding:21px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;font-family:var(--font-body);font-weight:700;font-size:16.5px;color:var(--text-primary);transition:color .15s;letter-spacing:-.01em;}
.rfl-q summary::-webkit-details-marker{display:none;}
.rfl-q summary:hover{color:var(--accent-amber);}
.rfl-q summary .chev{flex:none;color:var(--text-faint);transition:transform .22s;width:18px;height:18px;}
.rfl-q[open] summary .chev{transform:rotate(180deg);color:var(--accent-amber);}
.rfl-q .ans{padding:0 24px 22px;color:var(--text-muted);font-size:14.5px;line-height:1.66;margin:0;}
.rfl-q .ans strong{color:var(--text-primary);font-weight:600;}
.rfl-q .ans code{font-family:var(--font-mono);font-size:12px;background:var(--bg-surface);border:var(--border-surface);border-radius:5px;padding:1px 6px;color:var(--accent-amber);}

/* ---------------- closing ---------------- */
.rfl-closing{position:relative;text-align:center;padding:86px 0;overflow:hidden;}
.rfl-closing .glow{position:absolute;left:50%;top:0;width:700px;height:330px;transform:translateX(-50%);pointer-events:none;background:radial-gradient(ellipse 50% 60% at 50% 30%, rgba(232,168,56,.14), transparent 68%);}
.rfl-closing h2{position:relative;font-family:var(--font-body);font-weight:800;color:var(--text-primary);font-size:clamp(28px,4.6vw,44px);margin:0;letter-spacing:-.03em;}
.rfl-closing h2 .accent{color:var(--accent-amber);}
.rfl-closing p{position:relative;color:var(--text-muted);font-size:15.5px;line-height:1.65;max-width:540px;margin:18px auto 28px;}
.rfl-closing .rfl-cta{justify-content:center;}

/* ---------------- footer ---------------- */
.rfl-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 24px;padding:26px 24px 38px;border-top:var(--border-surface);color:var(--text-faint);font-size:12.5px;}
.rfl-footer a{color:var(--text-muted);text-decoration:none;transition:color .2s;}
.rfl-footer a:hover{color:var(--accent-amber);}
.rfl-disclaimer{text-align:center;font-size:11.5px;color:var(--text-faint);max-width:620px;margin:0 auto;padding:0 24px 30px;font-style:italic;line-height:1.5;}

/* ---------------- responsive ---------------- */
@media (max-width:940px){
  .rfl-hero-top{grid-template-columns:1fr;gap:32px;}
  .rfl-features,.rfl-uses{grid-template-columns:1fr 1fr;}
  .rfl-showcase{grid-template-columns:1fr;}
  .rfl-steps,.rfl-regions-grid{grid-template-columns:1fr 1fr;}
  .rfl-stats-inner{grid-template-columns:1fr 1fr;}
  .rfl-stat:nth-child(3){border-left:none;}
  .rfl-stat:nth-child(n+3){border-top:var(--border-surface);}
}
@media (max-width:760px){
  .rfl-links{position:fixed;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg-surface);border-bottom:var(--border-surface);padding:8px 16px 16px;transform:translateY(-130%);transition:transform .26s ease;z-index:49;}
  .rfl-links.open{transform:none;}
  .rfl-links a{padding:13px 6px;border-bottom:var(--border-surface);}
  .rfl-links a.cta{justify-content:center;margin-top:8px;}
  .rfl-toggle{display:grid;}
  .rfl-regions{margin-left:0;width:100%;}
}
@media (max-width:600px){
  .rfl-hero{padding:44px 0 40px;}
  .rfl-section{padding:54px 0;}
  .rfl-features,.rfl-uses,.rfl-steps,.rfl-regions-grid,.rfl-stats-inner{grid-template-columns:1fr;}
  .rfl-stat{border-left:none;border-top:var(--border-surface);}
  .rfl-stat:first-child{border-top:none;}
  .rfl-spectrum__bar{gap:10px;}
}