/* ═══════════════════════════════════════════════════════════════════════════
   site.css — the whole rodap site, in one sheet.

   THE FOUR ARCS OF THE FROZEN MARK ARE THE PALETTE. The ring carries blue,
   red, amber and green; nothing here invents a fifth. A colour on the screen
   is a colour of the logo, or it is a grey.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --arc-1:#1f6fe0; --arc-2:#d81f34; --arc-3:#c67c00; --arc-4:#1f9a52;
  --navy:#161b24;
  --ink:#1d1d1f; --sub:#6e6e73; --line:#e6e6e9; --ground:#ffffff; --raise:#f7f7f9;
  --link:#0d50ce; --bar:rgba(255,255,255,.82);
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{ --ink:#f5f5f7; --sub:#98989d; --line:#26262a; --ground:#0b0d11; --raise:#141821;
         --link:#5b9dff; --bar:rgba(11,13,17,.78); }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font:17px/1.6 var(--font);
     letter-spacing:-.011em;-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}

/* ── The bar ──────────────────────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:40;background:var(--bar);
     backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
     border-bottom:1px solid var(--line)}
.bar-in{display:flex;align-items:center;gap:28px;height:58px}
.bar-mark{display:block;flex:0 0 auto}
.bar-mark:hover{text-decoration:none}
#barmark{width:104px;height:auto;display:block}
.bar-nav{display:flex;gap:26px;margin-left:8px}
.bar-nav a{color:var(--ink);font-size:15px;letter-spacing:-.008em;opacity:.82}
.bar-nav a:hover{opacity:1;text-decoration:none}
.bar-act{margin-left:auto;background:var(--ink);color:var(--ground);
         padding:8px 17px;border-radius:980px;font-size:14px;font-weight:500}
.bar-act:hover{text-decoration:none;opacity:.86}
.bar-open{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer}
.bar-open span{display:block;width:19px;height:1.6px;background:var(--ink);margin:4px 0;border-radius:2px}
@media (max-width:820px){
  .bar-nav{position:absolute;left:0;right:0;top:58px;flex-direction:column;gap:0;
    background:var(--ground);border-bottom:1px solid var(--line);padding:8px 28px 18px;display:none}
  .bar-nav a{padding:12px 0;font-size:17px;border-bottom:1px solid var(--line)}
  .bar.open .bar-nav{display:flex}
  .bar-act{display:none}
  .bar-open{display:block}
}

/* ── The hero, dark, with the four lights behind it ───────────────────── */
.hero{position:relative;overflow:hidden;background:var(--navy);color:#fff;
      padding:78px 0 92px;text-align:center}
.hero::before{content:"";position:absolute;inset:-30% -10% auto -10%;height:150%;
  background:
    radial-gradient(30% 40% at 6% 8%, rgba(31,111,224,.62) 0%, transparent 66%),
    radial-gradient(28% 36% at 95% 4%, rgba(216,31,52,.44) 0%, transparent 66%),
    radial-gradient(30% 38% at 96% 92%, rgba(198,124,0,.36) 0%, transparent 68%),
    radial-gradient(28% 36% at 4% 96%, rgba(31,154,82,.34) 0%, transparent 68%);
  filter:blur(34px);opacity:.8;pointer-events:none}
.hero>*{position:relative}
.pill{display:inline-block;padding:7px 16px;border-radius:980px;
      border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);
      font-size:13px;letter-spacing:.01em;color:rgba(255,255,255,.9)}
.hero h1{font-size:clamp(34px,5vw,56px);line-height:1.08;letter-spacing:-.028em;font-weight:600;
   margin:22px auto 0;max-width:18ch}
.hero h1 em{font-style:normal;color:#7fb2ff}
.hero .lead{font-size:clamp(18px,2.1vw,21px);line-height:1.5;letter-spacing:-.014em;
      color:rgba(255,255,255,.74);margin:22px auto 0;max-width:54ch}
.act{margin:34px 0 0;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.act a{padding:13px 26px;border-radius:980px;font-size:16px;font-weight:500;letter-spacing:-.01em}
.act a.primary{background:#fff;color:var(--navy)}
.act a.second{border:1px solid rgba(255,255,255,.28);color:#fff}
.act a:hover{text-decoration:none;opacity:.88}

/* ── Sections ─────────────────────────────────────────────────────────── */
section{padding:92px 0 0}
.eyebrow{display:block;text-align:center;font-size:13px;font-weight:600;letter-spacing:.07em;
         text-transform:uppercase;color:var(--sub)}
h2{text-align:center;font-size:clamp(26px,3.3vw,37px);line-height:1.16;letter-spacing:-.024em;
   font-weight:600;margin:14px auto 0;max-width:22ch}
.sub{text-align:center;color:var(--sub);margin:16px auto 0;max-width:58ch;font-size:17px}
.under{width:56px;height:3px;border-radius:3px;margin:20px auto 0;
       background:linear-gradient(90deg,var(--arc-1),var(--arc-2),var(--arc-3),var(--arc-4))}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:18px;margin:46px 0 0}
.card{border-radius:20px;padding:28px 26px 30px;color:#fff;min-height:248px;
      display:flex;flex-direction:column}
.card b{display:block;font-size:19px;font-weight:600;letter-spacing:-.018em}
.card p{margin:10px 0 0;font-size:15px;line-height:1.55;color:rgba(255,255,255,.88)}
.c1{background:linear-gradient(155deg,#3f8bf5,var(--arc-1))}
.c2{background:linear-gradient(155deg,#ef4a5d,var(--arc-2))}
.c3{background:linear-gradient(155deg,#e0a02c,var(--arc-3))}
.c4{background:linear-gradient(155deg,#3fbd76,var(--arc-4))}

.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin:46px 0 0}
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:46px 0 0}
.panel{border:1px solid var(--line);border-radius:20px;padding:28px;background:var(--raise)}
.panel b{display:block;font-size:19px;font-weight:600;letter-spacing:-.018em}
.panel p{margin:8px 0 0;color:var(--sub);font-size:16px;line-height:1.55}

/* A row of facts, each with its own line and nothing decorative around it. */
.rows{border-top:1px solid var(--line);margin:46px 0 0}
.row{border-bottom:1px solid var(--line);padding:24px 0;display:grid;
     grid-template-columns:minmax(0,17ch) minmax(0,1fr);gap:10px 40px}
.row b{font-weight:600;font-size:17px;letter-spacing:-.014em}
.row p{margin:0;color:var(--sub);font-size:16px;line-height:1.55}
@media (max-width:620px){ .row{grid-template-columns:1fr;gap:6px} }

/* The price, given once and plainly. */
.price{margin:46px auto 0;max-width:560px;border:1px solid var(--line);border-radius:24px;
       padding:36px 34px 34px;background:var(--raise);text-align:center}
.price .fig{font-size:clamp(46px,7vw,64px);line-height:1;letter-spacing:-.03em;font-weight:600}
.price .per{color:var(--sub);font-size:16px;margin:10px 0 0}
.price ul{list-style:none;margin:24px 0 0;padding:0;text-align:left;display:inline-block}
.price li{padding:9px 0 9px 26px;position:relative;color:var(--sub);font-size:16px}
.price li::before{content:"";position:absolute;left:0;top:16px;width:12px;height:2px;
  border-radius:2px;background:var(--arc-4)}
.price .act{margin-top:28px}
.price .act a.primary{background:var(--ink);color:var(--ground)}

.note{margin:88px auto 0;max-width:780px;padding:30px 32px;border-radius:22px;
      background:var(--raise);border:1px solid var(--line);
      color:var(--sub);font-size:16px;line-height:1.6;text-align:center}

.prose{max-width:760px;margin:46px auto 0}
.prose h3{font-size:19px;font-weight:600;letter-spacing:-.016em;margin:36px 0 0}
.prose p{color:var(--sub);margin:10px 0 0;font-size:16px;line-height:1.65}

/* ── The foot ─────────────────────────────────────────────────────────── */
.foot{margin:100px 0 0;border-top:1px solid var(--line);background:var(--raise)}
.foot-in{padding:52px 28px 60px}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:32px}
.foot-cols b{display:block;font-size:14px;font-weight:600;margin:0 0 12px}
.foot-cols a{display:block;color:var(--sub);font-size:15px;padding:5px 0}
.foot-fine{margin:44px 0 0;color:var(--sub);font-size:14px}

/* An inner page keeps the dark head, without the mark and with less room. */
.hero.thin{padding:54px 0 60px}
.hero.thin h1{font-size:clamp(30px,4.2vw,44px);max-width:20ch}
.hero.thin .lead{font-size:clamp(17px,1.9vw,19px)}
.status{display:inline-block;padding:5px 12px;border-radius:980px;font-size:13px;font-weight:500}
.status.live{background:rgba(31,154,82,.14);color:var(--arc-4)}
.status.wait{background:rgba(198,124,0,.16);color:var(--arc-3)}
.row .status{margin-top:4px}
.grid-price{width:100%;border-collapse:collapse;margin:46px 0 0;font-size:16px}
.grid-price th,.grid-price td{text-align:left;padding:16px 12px;border-bottom:1px solid var(--line)}
.grid-price th{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--sub)}
.grid-price td.fig{white-space:nowrap;font-weight:600}
.grid-price tr td:last-child{color:var(--sub)}
.scroll{overflow-x:auto}