/* ================================================================
   DESIGN TOKENS
   Palette:
     --bg          #0A0E14  near-black slate-navy, the "den"
     --bg-elevated #111823  panel/header surface
     --bg-inset    #0D1218  recessed surfaces (drop zone interior)
     --card        #F6F4EE  crisp warm white — the "paper" cards
     --card-dim    #EAE7DD  secondary card surface
     --ink         #12161D  text on card
     --mist        #C9D3DE  secondary text on dark
     --fog         #7C8B9C  tertiary/meta text on dark
     --emerald     #17C989  primary accent — "beast" green
     --emerald-dim #0E7A54
     --volt        #4C8DFF  electric blue — secondary accent (links, info)
     --amber       #F5A524  paywall / countdown / warning
     --red         #F2495C  danger / blocked state
   Type:
     Display  — Space Grotesk  (headlines, big numbers, nav)
     Body     — Inter          (paragraphs, UI labels)
     Mono     — JetBrains Mono (counters, filenames, technical readouts)
   Signature element: the "claw mark" triple-stripe motif + fuel-gauge
   conversion meter, used sparingly as the one bold flourish.
   ================================================================ */
:root{
  --bg:#0A0E14; --bg-elevated:#111823; --bg-inset:#0D1218;
  --card:#F6F4EE; --card-dim:#EAE7DD; --ink:#12161D;
  --mist:#C9D3DE; --fog:#7C8B9C;
  --emerald:#17C989; --emerald-dim:#0E7A54;
  --volt:#4C8DFF; --amber:#F5A524; --red:#F2495C;
  --radius-lg:20px; --radius-md:14px; --radius-sm:8px;
  --shadow-card:0 20px 50px -20px rgba(0,0,0,.6);
  --border-hair:1px solid rgba(255,255,255,.08);
  --ff-display:'Space Grotesk',sans-serif;
  --ff-body:'Inter',sans-serif;
  --ff-mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--mist); font-family:var(--ff-body);
  line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:var(--volt); text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none;}
:focus-visible{outline:2px solid var(--emerald); outline-offset:3px; border-radius:4px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

/* ---------- background texture: faint claw-mark scratches ---------- */
.claw-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05;
  background-image:
    repeating-linear-gradient(115deg, transparent 0 140px, var(--emerald) 140px 143px, transparent 143px 280px),
    repeating-linear-gradient(115deg, transparent 0 160px, var(--volt) 160px 162px, transparent 162px 300px);
}

.wrap{max-width:1240px; margin:0 auto; padding:0 24px; position:relative; z-index:1;}

/* ================= AD SLOTS ================= */
.ad-slot{
  display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 10px, rgba(255,255,255,.015) 10px 20px);
  border:1px dashed rgba(255,255,255,.15); border-radius:var(--radius-sm);
  color:var(--fog); font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase;
}
.ad-slot span{opacity:.7;}
.ad-top{ width:100%; min-height:90px; margin:14px auto 0; max-width:1240px; }
.ad-sidebar{ min-height:600px; width:100%; }
.ad-below-download{ width:100%; min-height:120px; margin:28px 0; }

/* ================= HEADER ================= */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,14,20,.85); backdrop-filter:blur(14px);
  border-bottom:var(--border-hair);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; }
.logo{
  display:flex; align-items:center; gap:10px; font-family:var(--ff-display);
  font-weight:700; font-size:1.28rem; color:#fff; letter-spacing:-.01em;
}
.logo-mark{
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(155deg, var(--emerald), var(--emerald-dim));
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:0 6px 18px -6px rgba(23,201,137,.6);
}
.logo-mark svg{ width:19px; height:19px; }
/* "Beast" + "Converter" wrapped together so flex gap on .logo (used to
   separate the icon from the wordmark) doesn't also push the two
   words apart from each other — that was the bug: an unwrapped text
   node next to <small> made them separate flex items. */
.logo-word{ display:inline-flex; align-items:baseline; }
.logo small{ color:var(--emerald); font-weight:600; margin-left:1px; }

/* Small "Free" badge sitting beside the wordmark — deliberately its
   own element with its own breathing room, not crammed onto the
   logo mark itself, so the brand mark stays clean. */
.free-badge{
  font-family:var(--ff-mono); font-size:.66rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--emerald);
  background:rgba(23,201,137,.12); border:1px solid rgba(23,201,137,.35);
  padding:3px 9px; border-radius:999px; margin-left:2px;
}

.nav-right{ display:flex; align-items:center; gap:14px; }

/* language selector */
.lang-select{
  appearance:none; background:var(--bg-elevated); color:var(--mist);
  border:var(--border-hair); border-radius:var(--radius-sm); padding:9px 34px 9px 14px;
  font-family:var(--ff-mono); font-size:.82rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237C8B9C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
}
[dir="rtl"] .lang-select{ background-position:left 13px center; padding:9px 14px 9px 34px; }

.beast-pass-btn{
  background:linear-gradient(140deg, var(--amber), #d9860f); color:#1a1206;
  font-weight:700; font-size:.82rem; padding:10px 18px; border-radius:999px;
  display:flex; align-items:center; gap:6px; box-shadow:0 8px 20px -8px rgba(245,165,36,.55);
  transition:transform .15s ease;
}
.beast-pass-btn:hover{ transform:translateY(-1px); }

/* ================= HERO ================= */
.hero{ padding:64px 0 40px; text-align:center; position:relative; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-mono);
  font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--emerald);
  background:rgba(23,201,137,.08); border:1px solid rgba(23,201,137,.25);
  padding:6px 14px; border-radius:999px; margin-bottom:22px;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--emerald); animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

h1{
  font-family:var(--ff-display); font-weight:700; color:#fff;
  font-size:clamp(2.1rem, 5vw, 3.4rem); letter-spacing:-.02em; line-height:1.06;
  max-width:800px; margin:0 auto 18px;
}
h1 em{ font-style:normal; color:var(--emerald); }
.hero-sub{ max-width:560px; margin:0 auto; font-size:1.05rem; color:var(--fog); }

/* ---------- conversion meter panel (signature element: fuel-gauge readout) ---------- */
/* Sits directly above the drop zone — the "cockpit gauge" of the Beast Engine. */
.meter-panel{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 18px;
  background:var(--bg-elevated); border:1px solid rgba(23,201,137,.22); border-radius:var(--radius-md);
  padding:14px 20px; margin-bottom:14px;
  box-shadow:0 0 0 1px rgba(23,201,137,.04) inset;
  transition:border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
/* Beast Pass active state — deliberately distinct from the normal
   green fuel-gauge look, so the panel itself signals "you're in
   premium mode now" at a glance, not just the text inside it. */
.meter-panel.pass-active{
  background:linear-gradient(135deg, rgba(245,165,36,.10), var(--bg-elevated) 60%);
  border-color:rgba(245,165,36,.45);
  box-shadow:0 0 0 1px rgba(245,165,36,.06) inset, 0 0 24px -8px rgba(245,165,36,.35);
}
.meter-panel-left{ display:flex; align-items:center; gap:14px; }
.meter-notches{ display:flex; gap:5px; }
.notch{ width:10px; height:26px; border-radius:3px; background:rgba(255,255,255,.12); transition:background .25s ease, box-shadow .25s ease; }
.notch.filled{ background:var(--emerald); box-shadow:0 0 10px rgba(23,201,137,.7); }
.notch.filled.warn{ background:var(--amber); box-shadow:0 0 10px rgba(245,165,36,.7); }
.notch.filled.danger{ background:var(--red); box-shadow:0 0 10px rgba(242,73,92,.7); }
/* Pass-active notches pulse gently in amber instead of sitting static
   green — a quiet "this is a premium, ticking-down state" cue. */
.notch.pass-active{
  background:var(--amber); box-shadow:0 0 12px rgba(245,165,36,.8);
  animation:notch-pulse 2s ease-in-out infinite;
}
@keyframes notch-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
.meter-readout{
  font-family:var(--ff-mono); font-weight:700; font-size:1rem; color:#fff; letter-spacing:.01em;
}
.meter-readout span{ font-weight:400; color:var(--mist); text-transform:lowercase; }
.meter-readout.pass-active{ color:var(--amber); }
.meter-window{
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.05em; color:var(--fog); text-transform:uppercase;
}
.meter-window.pass-active{ color:var(--amber); font-weight:700; }
@media (max-width:560px){ .meter-panel{ flex-direction:column; align-items:flex-start; } }

/* ================= DROP ZONE ================= */
.dropzone-region{ padding:36px 0 10px; }
.dropzone{
  position:relative; border-radius:var(--radius-lg); background:var(--bg-inset);
  border:2px dashed rgba(255,255,255,.16);
  padding:56px 24px; text-align:center; transition:border-color .2s ease, background .2s ease;
  overflow:hidden;
}
.dropzone::before{
  content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:
    repeating-linear-gradient(115deg, transparent 0 60px, rgba(23,201,137,.08) 60px 63px, transparent 63px 130px);
}
.dropzone.drag-over{ border-color:var(--emerald); background:rgba(23,201,137,.05); }

/* The wrapper around dropzone + tool grid — see the HTML comment at
   its opening tag for why it exists. A light full-area highlight so
   there's feedback wherever in the larger area you're dragging over,
   distinct from (and in addition to) the small dropzone box's own
   tighter highlight above. */
.drop-catch-area{ border-radius:var(--radius-lg); transition:box-shadow .2s ease, background .2s ease; }
.drop-catch-area.drag-over-wide{
  box-shadow:0 0 0 2px rgba(23,201,137,.3) inset;
  background:rgba(23,201,137,.02);
}
.dropzone.disabled{ opacity:.5; pointer-events:none; }

.drop-icon{
  width:74px; height:74px; margin:0 auto 20px; border-radius:20px;
  background:linear-gradient(155deg, rgba(23,201,137,.18), rgba(23,201,137,.04));
  border:1px solid rgba(23,201,137,.3);
  display:flex; align-items:center; justify-content:center;
}
.drop-icon svg{ width:32px; height:32px; }
.dropzone h3{ font-family:var(--ff-display); color:#fff; font-size:1.3rem; margin-bottom:8px; }
.dropzone p{ color:var(--fog); font-size:.92rem; margin-bottom:22px; }
.browse-btn{
  background:var(--emerald); color:#06231A; font-weight:700; font-size:.9rem;
  padding:13px 28px; border-radius:var(--radius-sm); display:inline-flex; align-items:center; gap:8px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.browse-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(23,201,137,.55); }
#file-input{ position:absolute; width:1px; height:1px; opacity:0; }
.drop-formats{ margin-top:20px; font-family:var(--ff-mono); font-size:.72rem; color:var(--fog); letter-spacing:.03em; }

/* file list */
.file-list-tool-label{
  margin-top:20px; margin-bottom:-4px; text-align:left; font-family:var(--ff-mono); font-size:.78rem;
  color:var(--emerald); letter-spacing:.02em;
}
[dir="rtl"] .file-list-tool-label{ text-align:right; }
.file-list{ margin-top:22px; display:flex; flex-direction:column; gap:10px; text-align:left; }
[dir="rtl"] .file-list{ text-align:right; }
.file-row{
  display:flex; align-items:center; gap:12px; background:var(--bg-elevated);
  border:var(--border-hair); border-radius:var(--radius-sm); padding:12px 14px;
}
.file-row .fi{ width:34px; height:34px; border-radius:8px; background:rgba(76,141,255,.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.file-row .meta{ flex:1; min-width:0; }
.file-row .fname{ font-family:var(--ff-mono); font-size:.84rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-row .fsize{ font-size:.75rem; color:var(--fog); }
.file-row .status{ font-family:var(--ff-mono); font-size:.72rem; padding:4px 10px; border-radius:999px; }
.status.pending{ background:rgba(255,255,255,.08); color:var(--fog); }
.status.working{ background:rgba(76,141,255,.15); color:var(--volt); }
.status.done{ background:rgba(23,201,137,.15); color:var(--emerald); }
.status.error{ background:rgba(242,73,92,.15); color:var(--red); }
.file-row .remove{ background:none; color:var(--fog); font-size:1.1rem; padding:2px 6px; border-radius:6px; }
.file-row .remove:hover{ color:var(--red); background:rgba(242,73,92,.1); }

/* ================= TOOL GRID ================= */
.tools-section{ padding:56px 0 20px; }
.section-head{ text-align:center; max-width:560px; margin:0 auto 36px; }
.section-head .kicker{ font-family:var(--ff-mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--volt); margin-bottom:10px; display:block; }
.section-head h2{ font-family:var(--ff-display); color:#fff; font-size:1.9rem; }

.tool-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; }
@media (max-width:980px){ .tool-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .tool-grid{ grid-template-columns:1fr; } }

.tool-card{
  background:var(--card); color:var(--ink); border-radius:var(--radius-md);
  padding:20px; text-align:left; box-shadow:var(--shadow-card); cursor:pointer;
  border:2px solid transparent; transition:transform .18s ease, border-color .18s ease;
  display:flex; flex-direction:column; gap:10px; position:relative;
}
[dir="rtl"] .tool-card{ text-align:right; }
/* --tool-color is set inline per card in JS so hover/active states pick up
   each tool's own accent rather than one uniform color across the grid. */
.tool-card:hover{ transform:translateY(-4px); border-color:var(--tool-color, var(--emerald)); }
.tool-card.active{
  border-color:var(--tool-color, var(--emerald));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--tool-color, var(--emerald)) 30%, transparent), 0 0 24px -6px color-mix(in srgb, var(--tool-color, var(--emerald)) 55%, transparent), var(--shadow-card);
  transform:translateY(-3px);
}
.tool-card.active::after{
  content:'✓'; position:absolute; bottom:14px; right:14px;
  width:22px; height:22px; border-radius:50%;
  background:var(--tool-color, var(--emerald)); color:#06231A;
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; box-shadow:0 2px 8px -2px rgba(0,0,0,.4);
}
[dir="rtl"] .tool-card.active::after{ right:auto; left:14px; }
.tool-icon{
  width:42px; height:42px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
}
.tool-icon svg{ width:22px; height:22px; }
.tool-card h4{ font-family:var(--ff-display); font-size:1.02rem; font-weight:600; }
.tool-card p{ font-size:.82rem; color:#4B5563; line-height:1.4; }
.tool-badge{
  position:absolute; top:14px; right:14px; font-family:var(--ff-mono); font-size:.62rem;
  background:var(--ink); color:var(--emerald); padding:3px 8px; border-radius:999px; letter-spacing:.04em;
}
[dir="rtl"] .tool-badge{ right:auto; left:14px; }

/* "Most Popular" ribbon — shown on the top 3 ranked tools only, so a
   first-time visitor's eye goes straight to the highest-demand tools
   instead of scanning all 10 cards equally. */
.popular-ribbon{
  position:absolute; top:-9px; left:16px; font-family:var(--ff-mono); font-size:.62rem;
  font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  background:linear-gradient(140deg, var(--amber), #d9860f); color:#1a1206;
  padding:4px 10px; border-radius:999px; box-shadow:0 4px 10px -3px rgba(245,165,36,.6);
}
[dir="rtl"] .popular-ribbon{ left:auto; right:16px; }

/* ================= CONVERT ACTION BAR ================= */
/* ================= RESIZE OPTIONS ================= */
.resize-options{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--bg-elevated); border:var(--border-hair); border-radius:var(--radius-md);
  padding:14px 18px; margin-top:18px; font-family:var(--ff-mono); font-size:.86rem; color:var(--mist);
}
.resize-options input[type="number"]{
  width:100px; padding:8px 10px; border-radius:8px; border:1px solid rgba(255,255,255,.18);
  background:var(--bg-inset); color:#fff; font-family:var(--ff-mono); font-size:.9rem;
}
.resize-options input[type="number"]:disabled{ opacity:.4; cursor:not-allowed; }
.resize-options .resize-unit{ color:var(--fog); font-size:.8rem; margin-left:-4px; }
.resize-options .resize-checkbox-label{
  display:flex; align-items:center; gap:6px; margin-left:16px; cursor:pointer; color:var(--mist);
}
.resize-options .resize-checkbox-label input[type="checkbox"]{ width:15px; height:15px; accent-color:var(--emerald); cursor:pointer; }
.resize-options .resize-hint{ color:var(--fog); font-size:.78rem; flex-basis:100%; }

/* ================= LANDING PAGE CONTENT (SEO / FAQ body copy) =================
   Reusable section for the substantive "how to" + FAQ content that gives
   each dedicated landing page real, unique value beyond the tool itself —
   this is what keeps a landing page from reading as thin/doorway content.
   Deliberately plain and readable rather than card-styled, since this is
   meant to read as genuine informational content, not another UI module. */
.page-content{ max-width:760px; margin:64px auto 0; padding:0 0 40px; }
.page-content h2{
  font-family:var(--ff-display); color:#fff; font-size:1.5rem; font-weight:700;
  margin:40px 0 14px; letter-spacing:-.01em;
}
.page-content h2:first-child{ margin-top:0; }
.page-content p{ color:var(--mist); font-size:.98rem; line-height:1.7; margin-bottom:12px; }
.page-content ul{ list-style:none; padding:0; margin:0 0 12px; }
.page-content ul li{
  color:var(--mist); font-size:.96rem; line-height:1.6; padding:10px 0 10px 28px;
  border-bottom:var(--border-hair); position:relative;
}
.page-content ul li:last-child{ border-bottom:none; }
.page-content ul li::before{
  content:''; position:absolute; left:0; top:18px; width:8px; height:8px;
  border-radius:50%; background:var(--emerald);
}
[dir="rtl"] .page-content ul li{ padding:10px 28px 10px 0; }
[dir="rtl"] .page-content ul li::before{ left:auto; right:0; }


.convert-bar{
  position:sticky; bottom:0; z-index:40; margin-top:30px;
  background:var(--bg-elevated); border:var(--border-hair); border-radius:var(--radius-md);
  padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  box-shadow:0 -20px 40px -20px rgba(0,0,0,.5);
}
.convert-bar .summary{ font-family:var(--ff-mono); font-size:.82rem; color:var(--fog); }
.convert-bar .summary b{ color:#fff; }
.convert-bar .summary #bar-tool-name{
  color:var(--emerald); background:rgba(23,201,137,.14); border:1px solid rgba(23,201,137,.35);
  padding:2px 9px; border-radius:6px; font-weight:700;
}
.convert-btn{
  background:var(--emerald); color:#06231A; font-weight:700; font-size:.94rem;
  padding:14px 30px; border-radius:var(--radius-sm); display:flex; align-items:center; gap:10px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.convert-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(23,201,137,.55); }
.convert-btn:disabled{ background:#3A4552; color:#7C8B9C; cursor:not-allowed; transform:none; box-shadow:none; }

/* ================= DOWNLOAD / RESULTS ================= */
.results{ padding:30px 0; display:none; }
.results.show{ display:block; }
.result-card{
  background:var(--card); color:var(--ink); border-radius:var(--radius-md); padding:22px;
  display:flex; align-items:center; gap:16px; box-shadow:var(--shadow-card); margin-bottom:12px;
}
.result-card .ri{ width:44px; height:44px; border-radius:11px; background:rgba(23,201,137,.14); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.result-card .rmeta{ flex:1; min-width:0; }
.result-card .rname{ font-family:var(--ff-mono); font-weight:500; font-size:.9rem; }
.result-card .rsub{ font-size:.78rem; color:#6B7280; }
.download-link{
  background:var(--ink); color:#fff; font-weight:600; font-size:.82rem;
  padding:10px 18px; border-radius:var(--radius-sm); white-space:nowrap;
}
.download-link:hover{ background:#000; }

/* ================= PAYWALL MODAL (full-screen overlay) ================= */
.paywall-overlay{
  display:none; position:fixed; inset:0; z-index:110; background:rgba(4,6,9,.82);
  backdrop-filter:blur(8px); align-items:center; justify-content:center; padding:20px;
}
.paywall-overlay.show{ display:flex; animation:pw-fade-in .25s ease; }
@keyframes pw-fade-in{ from{ opacity:0; } to{ opacity:1; } }
.paywall-card{
  position:relative; width:100%; max-width:480px;
  background:linear-gradient(155deg, var(--bg-elevated), var(--bg-inset));
  border:1px solid rgba(245,165,36,.4); border-radius:var(--radius-lg);
  padding:44px 34px; text-align:center;
  box-shadow:0 0 0 1px rgba(245,165,36,.08), 0 40px 90px -20px rgba(0,0,0,.75), 0 0 60px -10px rgba(245,165,36,.25);
  animation:pw-scale-in .3s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes pw-scale-in{ from{ transform:scale(.92) translateY(10px); opacity:0; } to{ transform:scale(1) translateY(0); opacity:1; } }
.paywall-card .pw-icon{
  width:64px; height:64px; margin:0 auto 20px; border-radius:18px;
  background:rgba(245,165,36,.14); border:1px solid rgba(245,165,36,.4);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 24px -6px rgba(245,165,36,.5);
}
.paywall-card h3{ font-family:var(--ff-display); color:#fff; font-size:1.55rem; margin-bottom:8px; }
.paywall-card p{ color:var(--fog); max-width:400px; margin:0 auto 22px; font-size:.94rem; }
.countdown{
  font-family:var(--ff-mono); font-size:2.9rem; font-weight:700; color:var(--amber);
  letter-spacing:.02em; margin-bottom:26px; text-shadow:0 0 30px rgba(245,165,36,.35);
}
.countdown span{ font-size:.78rem; color:var(--fog); display:block; font-weight:400; margin-top:6px; letter-spacing:.1em; text-transform:uppercase; }
.pw-actions{ display:flex; flex-direction:column; gap:12px; }

/* "Why a Beast Pass?" value-comparison micro-copy — quiet, not
   another button; sits directly under the purchase button to
   reframe the price right at the decision moment without shouting. */
.value-compare{
  background:rgba(23,201,137,.06); border:1px solid rgba(23,201,137,.2);
  border-radius:10px; padding:12px 14px; margin-top:2px;
}
.value-compare p{ margin:0; font-size:.78rem; line-height:1.5; color:var(--mist); text-align:left; max-width:none; }
[dir="rtl"] .value-compare p{ text-align:right; }
.value-compare strong{ display:block; color:var(--emerald); font-family:var(--ff-display); font-size:.82rem; margin-bottom:3px; }
.pw-btn{
  padding:16px 22px; border-radius:var(--radius-sm); font-weight:700; font-size:.9rem;
  display:flex; align-items:center; gap:10px; justify-content:center; text-align:left;
  transition:transform .15s ease, box-shadow .15s ease;
}
.pw-btn:hover{ transform:translateY(-2px); }
.pw-btn.video{ background:var(--bg-inset); color:var(--mist); border:1px solid rgba(255,255,255,.18); }
.pw-btn.video:hover{ border-color:var(--volt); }
.pw-btn.stripe{
  background:linear-gradient(140deg, var(--amber), #d9860f); color:#1a1206;
  box-shadow:0 12px 28px -10px rgba(245,165,36,.65);
}
.pw-btn .btn-icon{ flex-shrink:0; }
.pw-btn .btn-text{ display:flex; flex-direction:column; gap:1px; text-align:left; }
.pw-btn .btn-text b{ font-size:.92rem; }
.pw-btn .btn-text small{ font-weight:500; opacity:.75; font-size:.74rem; text-transform:none; letter-spacing:0; }


/* ================= ADBLOCK SOFT-WALL MODAL ================= */
.modal-overlay{
  display:none; position:fixed; inset:0; z-index:100; background:rgba(4,6,9,.78);
  backdrop-filter:blur(6px); align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.show{ display:flex; }
.modal-card{
  background:var(--card); color:var(--ink); border-radius:var(--radius-lg);
  max-width:440px; width:100%; padding:34px 28px; text-align:center;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.7);
}
.modal-card .mi{
  width:56px; height:56px; margin:0 auto 18px; border-radius:16px; background:rgba(242,73,92,.1);
  display:flex; align-items:center; justify-content:center;
}
.modal-card h3{ font-family:var(--ff-display); font-size:1.3rem; margin-bottom:10px; }
.modal-card p{ color:#4B5563; font-size:.92rem; margin-bottom:24px; line-height:1.5; }
.modal-actions{ display:flex; flex-direction:column; gap:10px; }
.modal-btn{ padding:14px; border-radius:var(--radius-sm); font-weight:700; font-size:.88rem; }
.modal-btn.primary{ background:var(--ink); color:#fff; }
.modal-btn.secondary{ background:var(--card-dim); color:var(--ink); }

/* ================= FOOTER ================= */
footer{ border-top:var(--border-hair); margin-top:60px; padding:40px 0 24px; }
.footer-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:24px; }
.footer-brand{ max-width:280px; }
.footer-brand p{ font-size:.82rem; color:var(--fog); margin-top:10px; }
.footer-links{ display:flex; gap:50px; flex-wrap:wrap; }
.footer-col h5{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fog); margin-bottom:12px; }
.footer-col a{ display:block; color:var(--mist); font-size:.86rem; margin-bottom:9px; }
.footer-col a:hover{ color:var(--emerald); }
.footer-bottom{ border-top:var(--border-hair); padding-top:20px; font-size:.78rem; color:var(--fog); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* cookie consent banner */
.cookie-banner{
  display:none; position:fixed; bottom:16px; left:16px; right:16px; z-index:90;
  max-width:520px; margin:0 auto; background:var(--card); color:var(--ink);
  border-radius:var(--radius-md); padding:18px 20px; box-shadow:0 20px 50px -15px rgba(0,0,0,.6);
  align-items:center; gap:14px; flex-wrap:wrap;
}
.cookie-banner.show{ display:flex; }
.cookie-banner p{ flex:1; min-width:220px; font-size:.82rem; }
.cookie-actions{ display:flex; gap:8px; }
.cookie-actions button{ padding:9px 16px; border-radius:8px; font-size:.8rem; font-weight:600; }
.cookie-actions .accept{ background:var(--ink); color:#fff; }
.cookie-actions .decline{ background:var(--card-dim); color:var(--ink); }

/* ================= LAYOUT: main grid with sidebar ad ================= */
.main-layout{ display:grid; grid-template-columns:1fr 300px; gap:28px; align-items:start; }
@media (max-width:980px){ .main-layout{ grid-template-columns:1fr; } .sidebar-col{ display:none; } }
.sidebar-col{ position:sticky; top:90px; }

.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }