/* =========================================================
   OzzieSport — PayID Betting Sites
   Modern editorial · cool light + premium blue accents
   ========================================================= */

/* ---------- Reset & tokens ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
body{margin:0}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,p{margin:0}

:root{
  /* Palette — modern cool light + premium blues */
  --bg:           #F6F8FC;    /* page background — cool near-white */
  --bg-alt:       #EEF2F8;    /* section alt surface */
  --line:         #DDE5F0;    /* subtle dividers / borders */
  --paper:        #FFFFFF;    /* card surface — pure white */
  --ink:          #0B1426;    /* primary text — deep navy */
  --ink-2:        #2E3A4F;    /* secondary text — slate */
  --ink-3:        #67738A;    /* muted text */
  --brand:        #1E40AF;    /* deep premium blue */
  --brand-2:      #1D4ED8;    /* mid brand blue */
  --accent:       #2563EB;    /* primary accent blue */
  --accent-soft:  #DBEAFE;    /* light blue wash */
  --cta:          #2563EB;    /* primary CTA blue */
  --cta-2:        #1E40AF;    /* CTA hover — deeper */
  --ok:           #0F7A52;
  --warn:         #B45309;
  --bad:          #B91C1C;

  /* Type */
  --serif:  "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:   "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:   "Geist Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Spacing scale */
  --gutter: clamp(1rem, 2vw, 1.75rem);
  --section-y: clamp(4rem, 9vw, 7rem);

  /* Max content */
  --max: 1280px;

  /* Radii — gentle, never bubbly */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
}

html{background:var(--bg)}
body{
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  background:var(--bg);
  font-feature-settings:"ss01","ss02","cv11";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.container{
  max-width:var(--max);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* Eyebrows / small caps labels */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.eyebrow--dot::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--cta);
  display:inline-block;
  animation:pulse 2.4s ease-in-out infinite;
}
.eyebrow--light{color:var(--accent-soft)}
@keyframes pulse{
  0%,100%{opacity:.4;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.1)}
}

/* Display headings — Fraunces variable */
.display{
  font-family:var(--serif);
  font-weight:380;
  font-size:clamp(2.6rem, 6.6vw, 5.6rem);
  line-height:.96;
  letter-spacing:-0.025em;
  color:var(--ink);
  font-variation-settings:"opsz" 144, "SOFT" 30, "WONK" 0;
}
.display__italic{
  font-style:italic;
  font-weight:340;
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
  color:var(--brand);
}
.display--sm{
  font-size:clamp(2rem, 4.4vw, 3.4rem);
  line-height:1.02;
}
.display em{
  font-style:italic;
  font-weight:340;
  color:var(--brand);
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}
.display--light{color:var(--bg)}
.display--light em{color:var(--accent)}

/* ====================================================
   HEADER
   ==================================================== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(246,248,252,.82);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;
  min-height:64px;
  padding-top:.75rem;padding-bottom:.75rem;
}
.brand{
  display:inline-flex;align-items:center;gap:.6rem;
  color:var(--ink);
  flex:0 0 auto;
}
.brand__mark{width:32px;height:32px;color:var(--brand)}
.brand__word{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.2rem;
  letter-spacing:-0.02em;
}
.brand__word em{
  font-style:italic;
  color:var(--brand);
  font-variation-settings:"SOFT" 100, "WONK" 1;
}
.site-nav{
  display:flex;gap:1.75rem;
  font-size:14px;
  font-weight:500;
}
.site-nav a{
  color:var(--ink-2);
  position:relative;
  padding:.25rem 0;
  transition:color .2s;
}
.site-nav a:hover{color:var(--ink)}
.site-nav a::after{
  content:"";
  position:absolute;left:0;bottom:-2px;
  height:1px;width:0;
  background:var(--cta);
  transition:width .25s ease;
}
.site-nav a:hover::after{width:100%}
.header__cta{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.6rem 1rem;
  border:1px solid var(--ink);
  border-radius:999px;
  color:var(--ink);
  transition:background .2s, color .2s;
}
.header__cta:hover{background:var(--ink);color:var(--bg)}
@media (max-width:880px){
  .site-nav{display:none}
}

/* ====================================================
   HERO
   ==================================================== */
.hero{
  padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(3rem,6vw,5rem);
  position:relative;
  background:
    radial-gradient(900px 460px at 90% -10%, rgba(219,234,254,.55), transparent 60%),
    radial-gradient(700px 380px at -5% 30%, rgba(37,99,235,.07), transparent 60%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
.hero__inner{position:relative}
.hero__meta{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(2rem,4vw,3rem);
}
.hero__layout{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,4rem);
  align-items:start;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.hero__head{padding-top:0}
.hero__lede{
  margin-top:1.5rem;
  font-size:clamp(1.05rem,1.3vw,1.2rem);
  color:var(--ink-2);
  max-width:54ch;
  line-height:1.5;
}
.hero__stats{
  margin-top:clamp(1.75rem,3vw,2.5rem);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.5rem;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:1.5rem 0;
}
.stat{
  display:flex;flex-direction:column;gap:.35rem;
  padding-right:1rem;
  border-right:1px solid var(--line);
}
.stat:last-child{border-right:none}
.stat__num{
  font-family:var(--serif);
  font-weight:380;
  font-size:clamp(1.7rem,2.6vw,2.4rem);
  line-height:1;
  letter-spacing:-0.03em;
  color:var(--ink);
}
.stat__label{
  font-family:var(--mono);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-3);
  line-height:1.3;
}

/* Hero badge card */
.hero__badge{position:sticky;top:90px}
.badge-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:1.75rem;
  position:relative;
  box-shadow:0 1px 0 rgba(11,20,38,.04), 0 20px 40px -30px rgba(11,20,38,.14);
}
.badge-card::before{
  content:"";
  position:absolute;top:-1px;left:1.75rem;right:1.75rem;height:3px;
  background:linear-gradient(90deg,var(--cta),var(--accent));
  border-radius:0 0 3px 3px;
}
.badge-card__top{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.badge-card__rating{
  display:flex;align-items:baseline;gap:.25rem;
  margin-top:.6rem;
}
.badge-card__score{
  font-family:var(--serif);
  font-size:4.25rem;
  font-weight:380;
  line-height:1;
  letter-spacing:-0.04em;
  color:var(--ink);
}
.badge-card__out{
  font-family:var(--mono);
  font-size:1rem;
  color:var(--ink-3);
}
.badge-card__stars{
  display:flex;gap:.25rem;margin-top:.5rem;
}
.badge-card__stars span{
  width:14px;height:14px;
  background:var(--accent);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.badge-card__stars .half{
  background:linear-gradient(90deg,var(--accent) 50%,var(--line) 50%);
}
.badge-card__copy{
  margin-top:1rem;
  font-size:.95rem;
  line-height:1.5;
  color:var(--ink-2);
}
.badge-card__list{
  margin-top:1.25rem;
  padding-top:1.25rem;
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:.45rem;
  font-size:13px;
  color:var(--ink-2);
}
.badge-card__list li{
  display:flex;align-items:center;gap:.5rem;
}
.badge-card__list li::before{
  content:"✓";
  color:var(--brand);
  font-weight:600;
}

@media (max-width:900px){
  .hero__layout{grid-template-columns:1fr}
  .hero__badge{position:static}
  .badge-card{display:flex;flex-direction:column}
  .hero__stats{grid-template-columns:repeat(2,1fr);gap:1rem}
  .stat:nth-child(2){border-right:none}
}
@media (max-width:520px){
  .hero__stats{grid-template-columns:repeat(2,1fr)}
}

/* ====================================================
   COMPARISON TABLE (ranking)
   ==================================================== */
.table-wrap{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.5rem);
  position:relative;
  overflow:hidden;
}
.table-wrap::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--brand),var(--accent) 55%,#22D3EE);
}
.table-head{
  margin-bottom:1.5rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--line);
}
.section-title{
  font-family:var(--serif);
  font-weight:420;
  font-size:clamp(1.3rem,2vw,1.6rem);
  letter-spacing:-0.02em;
  color:var(--ink);
  display:flex;align-items:baseline;gap:.7rem;
  flex-wrap:wrap;
}
.section-title__num{
  font-family:var(--mono);
  font-weight:500;
  font-size:.8rem;
  color:var(--cta);
  letter-spacing:.05em;
  padding:.15rem .5rem;
  border:1px solid var(--cta);
  border-radius:3px;
}
.section-title__hint{
  font-family:var(--sans);
  font-size:.9rem;
  font-weight:400;
  color:var(--ink-3);
  font-style:italic;
}

.ranking{display:flex;flex-direction:column}

.ranking__head{
  display:grid;
  grid-template-columns:56px minmax(180px,1.4fr) minmax(160px,1.4fr) 120px 200px;
  gap:1.25rem;
  padding:0 .5rem .85rem;
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--ink-3);
}

.ranking__row{
  display:grid;
  grid-template-columns:56px minmax(180px,1.4fr) minmax(160px,1.4fr) 120px 200px;
  gap:1.25rem;
  padding:1.1rem .5rem;
  border-bottom:1px solid var(--line);
  align-items:center;
  transition:background .2s;
}
.ranking__row:last-child{border-bottom:none}
.ranking__row:hover{
  background:linear-gradient(90deg, rgba(219,234,254,.45), transparent 60%);
}

.rank-no{
  font-family:var(--serif);
  font-weight:380;
  font-size:2.6rem;
  line-height:1;
  letter-spacing:-0.04em;
  color:var(--ink);
}
.ranking__row:nth-child(2) .rank-no{color:var(--cta)} /* the actual first row */
.ranking__row:nth-child(3) .rank-no,
.ranking__row:nth-child(4) .rank-no{color:var(--brand)}

.op{display:flex;align-items:center;gap:.85rem;min-width:0}
.op__logo{
  width:120px;height:36px;
  flex:0 0 auto;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:6px;
  padding:0 4px;
  display:flex;align-items:center;justify-content:center;
}
.op__logo svg{width:100%;height:100%}
.op__meta{display:flex;flex-direction:column;min-width:0}
.op__name{
  font-weight:600;
  font-size:.95rem;
  color:var(--ink);
  letter-spacing:-0.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.op__tag{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-top:.15rem;
}

.offer{display:flex;flex-direction:column}
.offer__amount{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.1rem;
  letter-spacing:-0.01em;
  color:var(--ink);
  line-height:1.2;
}
.offer__type{
  font-size:.82rem;
  color:var(--ink-3);
  margin-top:.2rem;
  line-height:1.3;
}

.score{display:flex;flex-direction:column;gap:.4rem}
.score__num{
  font-family:var(--serif);
  font-weight:420;
  font-size:1.4rem;
  letter-spacing:-0.02em;
  color:var(--ink);
}
.score__bar{
  height:3px;
  background:var(--line);
  border-radius:2px;
  overflow:hidden;
  display:block;
}
.score__bar i{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--brand),var(--accent));
  border-radius:2px;
}

.cta-cell{display:flex;align-items:center;gap:.75rem;justify-content:flex-end}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.7rem 1.1rem;
  border-radius:999px;
  font-weight:600;
  font-size:.92rem;
  letter-spacing:-0.005em;
  transition:transform .15s, box-shadow .2s, background .2s;
  white-space:nowrap;
  border:1px solid transparent;
}
.btn--primary{
  background:var(--ink);
  color:var(--bg);
}
.btn--primary:hover{
  background:var(--cta);
  transform:translateY(-1px);
  box-shadow:0 10px 22px -8px rgba(37,99,235,.42);
}
.btn--lg{padding:.95rem 1.4rem;font-size:1rem}
.btn--lightcta{
  background:var(--accent);
  color:var(--ink);
  padding:1rem 1.6rem;
  font-size:1rem;
}
.btn--lightcta:hover{
  background:#1D4ED8;
  transform:translateY(-1px);
}
.btn__arrow{
  font-size:1.05em;
  transition:transform .2s;
}
.btn:hover .btn__arrow{transform:translate(2px,-2px)}

.btn-text{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
  border-bottom:1px solid transparent;
  padding-bottom:1px;
}
.btn-text:hover{color:var(--ink);border-bottom-color:var(--ink)}

.table-foot{
  margin-top:1.25rem;
  padding-top:1.25rem;
  border-top:1px solid var(--line);
  font-size:.82rem;
  color:var(--ink-3);
  font-style:italic;
}

/* Responsive table — collapse to stacked cards */
@media (max-width:980px){
  .ranking__head{display:none}
  .ranking__row{
    grid-template-columns:48px 1fr;
    grid-template-areas:
      "rank op"
      "rank offer"
      "rank score"
      "cta cta";
    row-gap:.7rem;
    padding:1.25rem 0;
    align-items:start;
  }
  .rank-no{grid-area:rank;font-size:2rem;align-self:start}
  .op{grid-area:op}
  .offer{grid-area:offer}
  .score{grid-area:score}
  .cta-cell{grid-area:cta;justify-content:flex-start;padding-top:.25rem}
  .score__bar{max-width:200px}
}

/* ====================================================
   GENERIC SECTION
   ==================================================== */
.block{padding:var(--section-y) 0;border-bottom:1px solid var(--line)}
.block__head{
  max-width:760px;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.block__head .eyebrow{display:block;margin-bottom:1.25rem}
.block__lede{
  margin-top:1.5rem;
  color:var(--ink-2);
  font-size:1.05rem;
  max-width:62ch;
}

/* ====================================================
   INTRO (What is PayID)
   ==================================================== */
.intro{background:var(--bg)}
.intro__grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
.intro__copy .eyebrow{display:block;margin-bottom:1.25rem}
.intro__copy p{
  font-size:1.08rem;
  color:var(--ink-2);
  line-height:1.6;
  margin-top:1.25rem;
  max-width:54ch;
}
.intro__copy p:first-of-type{margin-top:2rem}

.intro__facts{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:1.5rem 1.75rem;
  display:flex;flex-direction:column;
}
.fact{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;
  padding:1rem 0;
  border-bottom:1px dashed var(--line);
}
.fact:last-child{border-bottom:none}
.fact__label{
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-3);
}
.fact__val{
  font-family:var(--serif);
  font-weight:480;
  font-size:1rem;
  color:var(--ink);
  text-align:right;
  letter-spacing:-0.01em;
}
@media (max-width:840px){
  .intro__grid{grid-template-columns:1fr}
}

/* ====================================================
   HOW IT WORKS (flows)
   ==================================================== */
.howto{background:var(--bg-alt)}
.flows{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);
}
.flow{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:1.75rem;
  position:relative;
}
.flow__head{
  display:flex;align-items:baseline;gap:.85rem;
  padding-bottom:1.25rem;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.flow__num{
  font-family:var(--serif);
  font-style:italic;
  font-weight:380;
  font-size:1.6rem;
  color:var(--cta);
  font-variation-settings:"WONK" 1;
}
.flow__title{
  font-family:var(--serif);
  font-weight:480;
  font-size:1.5rem;
  letter-spacing:-0.02em;
}
.flow__time{
  margin-left:auto;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding:.3rem .6rem;
  border:1px solid var(--line);
  border-radius:999px;
}

.steps{
  display:flex;flex-direction:column;
  margin-top:1.5rem;
  counter-reset:s;
}
.steps li{
  display:flex;gap:1rem;
  padding:1rem 0;
  border-bottom:1px dashed var(--line);
  font-size:.95rem;
  color:var(--ink-2);
  line-height:1.55;
}
.steps li:last-child{border-bottom:none}
.steps li strong{color:var(--ink);font-weight:600}
.steps__n{
  flex:0 0 32px;
  height:32px;width:32px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand);
  color:var(--bg);
  font-family:var(--mono);
  font-size:.85rem;
  font-weight:500;
  border-radius:50%;
  margin-top:1px;
}

.callout{
  margin-top:clamp(1.5rem,3vw,2.5rem);
  display:flex;gap:1.25rem;
  background:var(--ink);
  color:var(--bg);
  padding:1.5rem 1.75rem;
  border-radius:var(--r-lg);
  align-items:flex-start;
  border:1px solid var(--ink);
}
.callout__tag{
  flex:0 0 auto;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  padding:.4rem .7rem;
  border:1px solid var(--accent);
  border-radius:3px;
  align-self:flex-start;
}
.callout p{
  font-size:.95rem;
  line-height:1.55;
  color:var(--accent-soft);
}
.callout p strong{color:var(--bg)}

@media (max-width:780px){
  .flows{grid-template-columns:1fr}
  .callout{flex-direction:column;gap:1rem}
}

/* ====================================================
   WHY PAYID
   ==================================================== */
.whypay{background:var(--bg)}
.why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.why{
  padding:2rem 1.75rem;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
  background:var(--bg);
  transition:background .2s;
}
.why:hover{background:var(--paper)}
.why__num{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--cta);
  display:block;
  margin-bottom:1rem;
}
.why h3{
  font-family:var(--serif);
  font-weight:480;
  font-size:1.2rem;
  letter-spacing:-0.015em;
  margin-bottom:.6rem;
  color:var(--ink);
}
.why p{
  font-size:.93rem;
  color:var(--ink-2);
  line-height:1.55;
}
@media (max-width:820px){
  .why-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .why-grid{grid-template-columns:1fr}
}

/* ====================================================
   REVIEWS (long-form, asymmetric)
   ==================================================== */
.reviews{background:var(--bg-alt)}
.review{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:clamp(1.5rem,3vw,2.5rem);
  padding:clamp(2rem,4vw,3rem) 0;
  border-bottom:1px solid var(--line);
  scroll-margin-top:90px;
}
.review:last-child{border-bottom:none}
.review__rail{
  display:flex;flex-direction:column;align-items:flex-start;
  position:sticky;
  top:90px;
  align-self:start;
  padding-right:1.5rem;
  border-right:1px solid var(--line);
  height:fit-content;
}
.review__rank{
  font-family:var(--serif);
  font-weight:340;
  font-size:5.5rem;
  line-height:.9;
  letter-spacing:-0.05em;
  color:var(--ink);
}
.review__score{
  font-family:var(--serif);
  font-style:italic;
  font-size:2rem;
  font-weight:380;
  color:var(--cta);
  margin-top:.4rem;
  font-variation-settings:"WONK" 1;
}
.review__scorelabel{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-top:.4rem;
}

.review__head{margin-bottom:1.25rem}
.review__name{
  font-family:var(--serif);
  font-weight:480;
  font-size:clamp(1.6rem,2.4vw,2.2rem);
  letter-spacing:-0.025em;
  color:var(--ink);
  line-height:1.05;
}
.review__cat{
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-3);
  display:block;
  margin-top:.5rem;
}
.review__lede{
  font-size:1.1rem;
  line-height:1.55;
  color:var(--ink);
  max-width:60ch;
  margin-bottom:1.5rem;
}

.review__cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  padding-top:1.5rem;
  border-top:1px dashed var(--line);
}
.review__cols h4{
  font-family:var(--mono);
  font-weight:500;
  font-size:11.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--brand);
  margin-bottom:.75rem;
}
.review__cols p{
  font-size:.95rem;
  color:var(--ink-2);
  line-height:1.6;
}

.review__offer{
  margin-top:1.75rem;
  padding:1.25rem 1.5rem;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  display:flex;align-items:center;gap:1.5rem;
  flex-wrap:wrap;
  border-left:3px solid var(--cta);
}
.review__offer > div{flex:1;min-width:200px}
.review__offerlabel{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:.3rem;
}
.review__offer strong{
  font-family:var(--serif);
  font-weight:480;
  font-size:1.15rem;
  letter-spacing:-0.01em;
  color:var(--ink);
}

@media (max-width:820px){
  .review{grid-template-columns:1fr;gap:1.5rem}
  .review__rail{
    position:static;
    flex-direction:row;
    align-items:baseline;
    gap:1rem;
    padding-right:0;padding-bottom:1rem;
    border-right:none;border-bottom:1px solid var(--line);
  }
  .review__rank{font-size:3rem}
  .review__score{font-size:1.4rem;margin-top:0}
  .review__scorelabel{margin-top:0;margin-left:auto}
  .review__cols{grid-template-columns:1fr;gap:1.25rem}
}

/* ====================================================
   METHODOLOGY
   ==================================================== */
.methodology{background:var(--bg)}
.method{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--ink);
}
.method__item{
  padding:2rem 1.75rem;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
}
.method__item:nth-child(3n){border-right:none}
.method__weight{
  position:absolute;
  top:1.75rem;right:1.75rem;
  font-family:var(--serif);
  font-style:italic;
  font-weight:380;
  font-size:2rem;
  color:var(--accent);
  font-variation-settings:"WONK" 1;
  line-height:1;
}
.method__item h3{
  font-family:var(--serif);
  font-weight:480;
  font-size:1.3rem;
  letter-spacing:-0.02em;
  margin-bottom:.7rem;
  margin-right:3.5rem;
  color:var(--ink);
}
.method__item p{
  font-size:.93rem;
  color:var(--ink-2);
  line-height:1.55;
}
@media (max-width:880px){
  .method{grid-template-columns:repeat(2,1fr)}
  .method__item:nth-child(3n){border-right:1px solid var(--line)}
  .method__item:nth-child(2n){border-right:none}
}
@media (max-width:560px){
  .method{grid-template-columns:1fr}
  .method__item{border-right:none !important}
}

/* ====================================================
   COMPARE TABLE
   ==================================================== */
.compare{background:var(--bg-alt)}
.compare-table{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.compare-table__head{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr 1fr 1fr;
  background:var(--ink);
  color:var(--bg);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.compare-table__head span{
  padding:1rem .9rem;
  border-right:1px solid rgba(255,255,255,.08);
}
.compare-table__head span:nth-child(2){
  background:var(--brand);
  color:var(--accent);
  font-weight:600;
}
.compare-table__head span:last-child{border-right:none}

.compare-table__row{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr 1fr 1fr;
  border-bottom:1px solid var(--line);
}
.compare-table__row:last-child{border-bottom:none}
.compare-table__row span{
  padding:1rem .9rem;
  font-size:.9rem;
  color:var(--ink-2);
  border-right:1px solid var(--line);
  display:flex;align-items:center;
}
.compare-table__row span:nth-child(2){
  background:rgba(30,64,175,.04);
  font-weight:600;
  color:var(--ink);
}
.compare-table__row span:last-child{border-right:none}
.compare-table__label{
  font-family:var(--mono);
  font-size:11.5px !important;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink) !important;
  font-weight:500;
  background:var(--bg-alt);
}
.ok{color:var(--ok) !important}
.warn{color:var(--warn) !important}
.bad{color:var(--bad) !important}

.compare-note{
  margin-top:1.5rem;
  font-size:.88rem;
  color:var(--ink-3);
  font-style:italic;
  max-width:64ch;
}

@media (max-width:900px){
  .compare-table{overflow-x:auto}
  .compare-table__head,
  .compare-table__row{
    grid-template-columns:160px repeat(5,150px);
    min-width:900px;
  }
}

/* ====================================================
   SAFETY
   ==================================================== */
.safety{background:var(--bg)}
.safety__grid{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
.safety__grid > div:first-child .eyebrow{display:block;margin-bottom:1.25rem}
.safety__grid > div:first-child p{
  margin-top:1.5rem;
  font-size:1.05rem;
  color:var(--ink-2);
  max-width:42ch;
}
.trust-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border-top:1px solid var(--line);
}
.trust-list li{
  padding:1.5rem 0 1.5rem 1.75rem;
  border-bottom:1px solid var(--line);
  position:relative;
}
.trust-list li:nth-child(odd){
  padding-right:1.75rem;
  border-right:1px solid var(--line);
}
.trust-list li::before{
  content:"";
  position:absolute;
  left:0;top:1.7rem;
  width:10px;height:10px;
  border:2px solid var(--brand);
  border-radius:2px;
  transform:rotate(45deg);
}
.trust-list h3{
  font-family:var(--serif);
  font-weight:480;
  font-size:1.1rem;
  letter-spacing:-0.015em;
  margin-bottom:.5rem;
}
.trust-list p{
  font-size:.92rem;
  color:var(--ink-2);
  line-height:1.55;
}
.trust-list p em{color:var(--ink);font-style:italic}

@media (max-width:880px){
  .safety__grid{grid-template-columns:1fr}
  .trust-list{grid-template-columns:1fr}
  .trust-list li:nth-child(odd){
    padding-right:0;border-right:none;
  }
  .trust-list li{padding-left:1.5rem}
}

/* ====================================================
   FAQ
   ==================================================== */
.faq{background:var(--bg-alt)}
.faq-list{
  border-top:1px solid var(--ink);
}
.faq-item{
  border-bottom:1px solid var(--line);
  padding:0;
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:1.5rem 0;
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;
  font-family:var(--serif);
  font-weight:440;
  font-size:clamp(1.1rem,1.6vw,1.35rem);
  color:var(--ink);
  letter-spacing:-0.015em;
  position:relative;
  transition:color .2s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";
  font-family:var(--sans);
  font-weight:300;
  font-size:1.75rem;
  color:var(--ink-3);
  line-height:1;
  transition:transform .25s, color .2s;
  flex:0 0 auto;
}
.faq-item[open] summary::after{transform:rotate(45deg);color:var(--cta)}
.faq-item:hover summary{color:var(--brand)}
.faq-item > div{
  padding-bottom:1.5rem;
  animation:fadeIn .3s ease;
}
.faq-item p{
  color:var(--ink-2);
  font-size:1rem;
  line-height:1.6;
  max-width:70ch;
}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}

/* ====================================================
   FINAL CTA
   ==================================================== */
.finalcta{
  background:var(--ink);
  color:var(--bg);
  border-bottom:none;
  position:relative;
  overflow:hidden;
}
.finalcta::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(700px 400px at 80% -10%, rgba(37,99,235,.14), transparent 60%),
    radial-gradient(600px 400px at 10% 100%, rgba(96,165,250,.18), transparent 60%);
  pointer-events:none;
}
.finalcta__inner{
  position:relative;
  text-align:center;
  max-width:680px;
  margin:0 auto;
}
.finalcta__inner .eyebrow{
  display:inline-block;
  color:var(--accent);
  margin-bottom:1.5rem;
}
.finalcta__inner p{
  margin-top:1.75rem;
  color:var(--accent-soft);
  font-size:1.1rem;
  line-height:1.55;
}
.finalcta__inner p a{
  color:var(--bg);
  border-bottom:1px solid var(--cta);
}
.finalcta .btn--lightcta{margin-top:2.25rem}
.finalcta__note{
  display:block;
  margin-top:1.5rem;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  opacity:.7;
}

/* ====================================================
   FOOTER
   ==================================================== */
.site-footer{
  background:var(--bg-alt);
  padding:clamp(3rem,5vw,4.5rem) 0 0;
  color:var(--ink-2);
}
.site-footer__grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:2.5rem;
  padding-bottom:2.5rem;
  border-bottom:1px solid var(--line);
}
.site-footer__brand p{
  margin-top:1rem;
  font-size:.92rem;
  color:var(--ink-3);
  line-height:1.55;
  max-width:36ch;
}
.site-footer h4{
  font-family:var(--mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:1rem;
}
.site-footer ul li{
  font-size:.92rem;
  padding:.3rem 0;
  color:var(--ink-2);
}
.site-footer ul li a{
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.site-footer ul li a:hover{border-bottom-color:var(--cta)}

.site-footer__legal{
  padding:1.75rem 0;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:1.5rem;
  align-items:center;
}
.age-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;
  border-radius:50%;
  border:2px solid var(--ink);
  font-weight:700;
  font-size:.95rem;
  color:var(--ink);
  flex:0 0 auto;
}
.site-footer__legal p{
  font-size:.82rem;
  color:var(--ink-3);
  line-height:1.5;
  max-width:74ch;
}
.footer-copy{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-3);
}
@media (max-width:880px){
  .site-footer__grid{grid-template-columns:repeat(2,1fr)}
  .site-footer__legal{grid-template-columns:auto 1fr;gap:1rem 1.25rem}
  .footer-copy{grid-column:1/-1}
}
@media (max-width:520px){
  .site-footer__grid{grid-template-columns:1fr}
}

/* Smooth scroll for anchor nav */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* Focus styles — visible without being ugly */
:focus-visible{
  outline:2px solid var(--cta);
  outline-offset:3px;
  border-radius:3px;
}

/* Selection */
::selection{background:var(--cta);color:var(--bg)}

/* Print: keep it readable, drop interactive flair */
@media print{
  .site-header,.finalcta,.btn,.cta-cell{display:none}
  body{background:#fff;color:#000}
}