/* ═══════════════════════════════════════════════════════════════════════════
   The Rank Masters — Liquid Glass design system
   ───────────────────────────────────────────────────────────────────────────
   Apple's Liquid Glass is not "a blurry box". Four things make it read as a
   physical material, and all four are cheap on the web:

     1. REFRACTION   backdrop-filter blur + saturate, so colour from behind
                     bleeds through instead of a flat grey wash.
     2. SPECULAR     a bright hairline on the TOP edge only, dimming toward
                     the bottom — light arriving from above. This is the cue
                     that sells it; a uniform 1px border just looks like a card.
     3. DEPTH        a wide soft shadow plus an inset lift, so the pane sits
                     ABOVE the page rather than being cut into it.
     4. CONCENTRIC   a nested radius equals the parent's minus the gap. Equal
                     radii on nested panes is the single most common tell.

   Everything degrades: @supports gates the glass, and the fallback is an
   opaque panel that is still legible.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Base — near-black, very slightly blue so warm accents stay warm. */
  --ink:#06070A; --ink2:#0B0D12; --ink3:#11141B;

  /* Glass tints. Alpha is deliberately low; the blur does the work, not opacity. */
  --glass:rgba(255,255,255,.055);
  --glass-hi:rgba(255,255,255,.085);
  --glass-lo:rgba(255,255,255,.03);
  --spec:rgba(255,255,255,.16);      /* top specular hairline */
  --spec-dim:rgba(255,255,255,.04);  /* bottom of the same border */

  --fg:#F7F8FB; --body:#C9D1E0; --muted:#7C869B; --faint:#4A5366;

  /* One accent, used sparingly. Amber is for money only (pricing, stats). */
  --a1:#5B8CFF; --a2:#8B7CFF; --amber:#FFB020; --good:#3DDC97;
  --grad:linear-gradient(135deg,var(--a1),var(--a2));

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;

  --maxw:1180px; --narrow:720px; --hdr:68px;

  /* Concentric radius scale: outer 24 → inner 16 → 10, each minus the 8px gap. */
  --r-xl:24px; --r:16px; --r-sm:10px; --r-xs:7px;

  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;font-family:var(--sans);background:var(--ink);color:var(--body);
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}

/* ── The light sources ──────────────────────────────────────────────────────
   Glass needs something behind it to refract. Two fixed, very large radial
   gradients give every pane on the page something to pick up. They are fixed
   (not scrolled) so panes change tint as they travel over them. */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 600px at 12% -5%, rgba(91,140,255,.16), transparent 70%),
    radial-gradient(800px 560px at 92% 8%, rgba(139,124,255,.13), transparent 72%),
    radial-gradient(700px 700px at 60% 105%, rgba(255,176,32,.055), transparent 70%);
}
/* Grain. Real glass is never perfectly smooth; without this, large panes band
   on OLED displays. Inline SVG so there is no image request. */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:22px}
.narrow{max-width:var(--narrow);margin-inline:auto}

/* ── THE GLASS PRIMITIVE ────────────────────────────────────────────────────
   .glass is the one class everything else builds on. The specular edge is a
   ::before with a gradient clipped to a 1px ring — a plain `border` cannot
   fade from bright to dim around a corner. */
.glass{
  position:relative;border-radius:var(--r-xl);background:var(--glass);
  box-shadow:0 1px 1px rgba(255,255,255,.04) inset, 0 18px 50px -12px rgba(0,0,0,.65);
  isolation:isolate;
}
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;
  background:linear-gradient(160deg,var(--spec),var(--spec-dim) 42%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{-webkit-backdrop-filter:blur(22px) saturate(175%);backdrop-filter:blur(22px) saturate(175%)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:var(--ink3)}
}

/* ── Header. The blur sits on a pseudo-element, never the header itself:
   backdrop-filter makes an element the containing block for its fixed
   descendants, which would open the mobile menu *behind* the page. */
.site-header{position:sticky;top:0;z-index:100;height:var(--hdr)}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(6,7,10,.72);border-bottom:1px solid rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
}
.site-header .container{height:100%;display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.025em;
  font-size:16px;color:var(--fg);text-decoration:none;flex:0 0 auto}
.brand svg{width:29px;height:29px;flex:0 0 auto}

.nav{display:flex;align-items:center;gap:2px;margin-left:auto;list-style:none;margin-block:0;padding:0}
.nav a{display:block;padding:9px 13px;border-radius:var(--r-sm);color:var(--body);
  text-decoration:none;font-size:14.5px;font-weight:500;transition:.2s var(--ease)}
.nav a:hover{background:var(--glass-hi);color:var(--fg)}
.hdr-cta{display:flex;align-items:center;gap:10px;flex:0 0 auto}

.nav-toggle{display:none;width:40px;height:40px;margin-left:auto;
  border:1px solid rgba(255,255,255,.1);border-radius:var(--r-sm);
  background:var(--glass);color:var(--fg);cursor:pointer;
  align-items:center;justify-content:center}

/* ── Buttons. The primary is the only saturated surface on the page. ──────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:var(--r-sm);font-size:14.5px;font-weight:600;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease);
  white-space:nowrap;font-family:inherit;letter-spacing:-.01em}
.btn-p{background:var(--grad);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 10px 26px -8px rgba(91,140,255,.6)}
.btn-p:hover{transform:translateY(-1.5px);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 16px 34px -8px rgba(91,140,255,.72)}
.btn-g{background:var(--glass);color:var(--fg);border-color:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn-g:hover{background:var(--glass-hi);transform:translateY(-1.5px)}
.btn-sm{padding:9px 15px;font-size:13.5px}
.btn-lg{padding:15px 28px;font-size:15.5px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ── Type scale ─────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{color:var(--fg);letter-spacing:-.035em;line-height:1.1;margin:0 0 .5em;font-weight:650}
.h-xl{font-size:clamp(38px,6.2vw,66px);letter-spacing:-.04em}
.h-lg{font-size:clamp(29px,4vw,43px)}
.h-md{font-size:clamp(21px,2.4vw,27px);letter-spacing:-.03em}
.h-sm{font-size:18px;letter-spacing:-.02em}
.em{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.02em}
.grad-txt{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.lede{font-size:clamp(16.5px,1.9vw,19.5px);color:var(--body);line-height:1.68;max-width:58ch}
.muted{color:var(--muted)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:650;
  letter-spacing:.1em;text-transform:uppercase;color:var(--a1);margin-bottom:16px}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}

section{padding:clamp(60px,8vw,104px) 0;position:relative}
.sec-head{margin-bottom:clamp(32px,4.5vw,52px);max-width:66ch}

/* ── Hero ───────────────────────────────────────────────────────────────────── */
.hero{padding-top:clamp(52px,7vw,92px);padding-bottom:clamp(46px,6vw,80px)}
.hero h1{margin-bottom:22px}
.hero .lede{margin-bottom:30px}
.trust{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:34px;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.07)}
.trust-n{font-size:27px;font-weight:700;color:var(--fg);letter-spacing:-.03em;line-height:1}
.trust-l{font-size:13.5px;color:var(--muted);line-height:1.4}
.trust-sep{width:1px;height:34px;background:rgba(255,255,255,.09)}

/* ── Cards. Nested radius = outer minus gap, per the concentric rule. ──────── */
.cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-2{grid-template-columns:repeat(2,1fr)}
.card{padding:26px;border-radius:var(--r-xl);transition:transform .3s var(--ease)}
.card:hover{transform:translateY(-3px)}
.card h3{margin-bottom:9px}
.card p{margin:0;font-size:15px;color:var(--body)}
.card-ico{width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;
  margin-bottom:16px;background:var(--glass-hi);color:var(--a1);
  border:1px solid rgba(255,255,255,.08)}
.card-ico svg{width:19px;height:19px}
.card-n{font-family:var(--serif);font-size:34px;color:var(--faint);line-height:1;margin-bottom:12px}

/* ── Pricing ────────────────────────────────────────────────────────────────── */
.price-grid{display:grid;gap:18px;grid-template-columns:repeat(3,1fr);align-items:start}
.price{padding:28px;border-radius:var(--r-xl);display:flex;flex-direction:column;height:100%}
.price.feat{background:var(--glass-hi);box-shadow:0 1px 1px rgba(255,255,255,.07) inset,
  0 24px 64px -14px rgba(91,140,255,.3),0 0 0 1px rgba(91,140,255,.16)}
.price-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  padding:5px 13px;border-radius:999px;background:var(--grad);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.price-name{font-size:14px;font-weight:650;color:var(--fg);letter-spacing:.02em;margin-bottom:5px}
.price-sub{font-size:13.5px;color:var(--muted);margin:0 0 20px;min-height:40px}
.price-fig{display:flex;align-items:baseline;gap:5px;margin-bottom:5px}
.price-fig b{font-size:40px;font-weight:700;color:var(--fg);letter-spacing:-.04em;line-height:1}
.price-fig span{font-size:14.5px;color:var(--muted)}
.price-note{font-size:12.5px;color:var(--faint);margin:0 0 22px}
.price ul{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:11px}
.price li{display:flex;gap:10px;font-size:14.5px;align-items:flex-start;line-height:1.5}
.price li svg{width:16px;height:16px;flex:0 0 auto;margin-top:3px;color:var(--good)}
.price li b{color:var(--fg);font-weight:650}
.price .btn{margin-top:auto;width:100%}

/* ── Checklist / includes ───────────────────────────────────────────────────── */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:13px;
  grid-template-columns:repeat(auto-fit,minmax(282px,1fr))}
.checks li{display:flex;gap:11px;font-size:15px;align-items:flex-start;line-height:1.55}
.checks svg{width:17px;height:17px;flex:0 0 auto;margin-top:3.5px;color:var(--a1)}
.checks b{color:var(--fg);font-weight:650}

/* ── Stat band ──────────────────────────────────────────────────────────────── */
.stats{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  border-radius:var(--r-xl);overflow:hidden;background:rgba(255,255,255,.07)}
.stat{padding:30px 24px;background:var(--ink2);text-align:center}
.stat b{display:block;font-size:clamp(31px,4.4vw,43px);font-weight:700;color:var(--fg);
  letter-spacing:-.04em;line-height:1;margin-bottom:7px}
.stat .amber{color:var(--amber)}
.stat span{font-size:13.5px;color:var(--muted);line-height:1.45;display:block}

/* ── Two-column fit check ──────────────────────────────────────────────────── */
.fit{display:grid;gap:18px;grid-template-columns:1fr 1fr}
.fit ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.fit li{display:flex;gap:11px;font-size:14.5px;align-items:flex-start;line-height:1.55}
.fit li svg{width:16px;height:16px;flex:0 0 auto;margin-top:3px}
.fit-y li svg{color:var(--good)}
.fit-n li svg{color:#FF6B6B}

/* ── Timeline / measurement ────────────────────────────────────────────────── */
.tl{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.tl-item{padding:24px;border-radius:var(--r-xl);position:relative}
.tl-when{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--amber);margin-bottom:12px}
.tl-item ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.tl-item li{font-size:14.5px;display:flex;gap:9px;line-height:1.5}
.tl-item li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--a1);
  flex:0 0 auto;margin-top:9px}

/* ── FAQ ────────────────────────────────────────────────────────────────────── */
.faq{display:grid;gap:11px}
.faq details{border-radius:var(--r);padding:0;overflow:hidden}
.faq summary{padding:19px 22px;cursor:pointer;font-weight:600;color:var(--fg);font-size:15.5px;
  list-style:none;display:flex;align-items:center;gap:14px;transition:.2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:9px;height:9px;margin-left:auto;flex:0 0 auto;
  border-right:1.8px solid var(--muted);border-bottom:1.8px solid var(--muted);
  transform:rotate(45deg);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{background:var(--glass-lo)}
.faq-a{padding:0 22px 21px;font-size:15px;color:var(--body);line-height:1.68}
.faq-a p{margin:0 0 .8em}
.faq-a p:last-child{margin:0}

/* ── CTA band ───────────────────────────────────────────────────────────────── */
.cta-band{padding:clamp(38px,5.5vw,62px);border-radius:var(--r-xl);text-align:center}
.cta-band h2{margin-bottom:14px}
.cta-band .lede{margin:0 auto 28px}
.cta-band .btn-row{justify-content:center}

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.site-footer{padding:clamp(48px,6vw,76px) 0 34px;border-top:1px solid rgba(255,255,255,.07);
  margin-top:clamp(40px,6vw,80px)}
.ft-grid{display:grid;gap:40px;grid-template-columns:1.6fr 1fr 1fr 1fr;margin-bottom:46px}
.ft-about p{font-size:14.5px;color:var(--muted);margin:16px 0 0;max-width:34ch}
.site-footer h4{font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:16px;font-weight:650}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.site-footer a{color:var(--body);text-decoration:none;font-size:14.5px;transition:.18s}
.site-footer a:hover{color:var(--fg)}
.ft-base{display:flex;gap:18px;flex-wrap:wrap;align-items:center;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.07);font-size:13.5px;color:var(--faint)}
.ft-base .sp{margin-left:auto}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .price-grid,.cards-3{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr 1fr;gap:32px}
  .fit,.cards-2{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav-toggle{display:flex}
  .nav{position:fixed;inset:var(--hdr) 0 auto;flex-direction:column;align-items:stretch;
    gap:2px;padding:16px 22px 22px;background:rgba(6,7,10,.97);
    border-bottom:1px solid rgba(255,255,255,.08);display:none}
  .nav-open .nav{display:flex}
  .nav a{padding:13px 10px;font-size:16px}
  .site-header .hdr-cta .btn-g{display:none}
  .ft-grid{grid-template-columns:1fr}
  .trust-sep{display:none}
  .trust{gap:20px}
  .site-header .container{gap:12px}
}
/* Below ~430px the mark, the wordmark, the menu button and the CTA cannot all
   fit on one line, and the CTA is the first thing to slide off the edge. Drop
   the wordmark and keep the mark — the CTA is worth more than the repeat of a
   name that is already in the tab title. */
@media (max-width:430px){
  .brand span{display:none}
  .site-header .hdr-cta .btn{padding:9px 14px}
}

/* Focus ring — one consistent ring, never removed. */
:focus-visible{outline:2px solid var(--a1);outline-offset:2.5px;border-radius:4px}