/* ==========================================================================
   ggdrop-promo-codes.com — design system
   Signature: the "drop ticket" — a stylized skin-inspection ticket used to
   present every promo code, colored along the CS-rarity spectrum
   (mil-spec blue -> restricted purple -> classified pink -> covert red -> gold).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&family=Syne:wght@500;600;700&display=swap');

:root{
  --void: #0A0D13;
  --surface: #12161F;
  --surface-2: #1A2029;
  --surface-3: #222A38;
  --border: #2A3246;
  --border-soft: #1F2634;

  --ink: #EDEFF4;
  --muted: #93A0B4;
  --muted-2: #5C6478;

  --mil-blue: #4C7EF3;
  --restricted: #8B5CF6;
  --classified: #D946A6;
  --covert: #EA4B45;
  --covert-dim: #B23632;
  --gold: #E8B84B;
  --gold-dim: #B98F35;
  --success: #3DBE7A;
  --danger: #EA4B45;

  --rarity-gradient: linear-gradient(90deg, var(--mil-blue) 0%, var(--restricted) 32%, var(--classified) 58%, var(--covert) 80%, var(--gold) 100%);

  --radius-s: 6px;
  --radius: 12px;
  --radius-l: 18px;

  --font-display: 'Chakra Petch', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --shadow-card: 0 8px 30px -12px rgba(0,0,0,0.55);
  --shadow-pop: 0 16px 50px -16px rgba(234,75,69,0.35);

  --container: 1160px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul,ol{ padding-left: 1.2em; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: .2px;
}
h1{ font-size: clamp(2.1rem, 4.2vw, 3.4rem); font-weight:700; }
h2{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-top: 2.6em; }
h3{ font-size: 1.25rem; margin-top: 1.6em; }
p{ margin: 0 0 1.1em; color: var(--ink); }
.container{ max-width: var(--container); margin: 0 auto; padding: 0 20px; }

::selection{ background: var(--covert); color:#fff; }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- background texture ---------- */
.bg-grid{
  position: fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(circle at 18% -10%, rgba(139,92,246,.16), transparent 42%),
    radial-gradient(circle at 100% 8%, rgba(234,75,69,.14), transparent 38%),
    linear-gradient(var(--void), var(--void));
}

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(10,13,19,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height: 68px;
}
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:700; font-size:1.15rem; color:var(--ink); }
.brand .mark{ width:30px; height:30px; }
.brand .drops{ color: var(--covert); }

.main-nav{ display:flex; align-items:center; gap: 28px; }
.main-nav a{ font-size:.92rem; color: var(--muted); font-weight:500; transition: color .15s; position:relative; }
.main-nav a:hover{ color: var(--ink); }
.main-nav a.active{ color: var(--ink); }

.header-cta{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--covert); color:#fff; font-weight:600; font-size:.88rem;
  padding: 10px 16px; border-radius: 999px; white-space:nowrap;
  box-shadow: 0 6px 20px -8px rgba(234,75,69,.55);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.header-cta:hover{ transform: translateY(-1px); background:#ff5952; }
.header-cta:active{ transform: translateY(0); }

.menu-btn{
  display:none; background:none; border:1px solid var(--border); color:var(--ink);
  width:42px; height:42px; border-radius: 10px; cursor:pointer;
  align-items:center; justify-content:center;
}
.menu-btn svg{ width:20px; height:20px; }

.mobile-menu{
  display:none; position:fixed; inset: 68px 0 0 0; z-index:99;
  background: var(--void); padding: 22px 20px; overflow-y:auto;
}
.mobile-menu.open{ display:block; }
.mobile-menu a{ display:block; padding: 14px 4px; font-size:1.05rem; color: var(--ink); border-bottom:1px solid var(--border-soft); }
.mobile-menu .header-cta{ display:flex; justify-content:center; margin-top:18px; }

@media (max-width: 880px){
  .main-nav{ display:none; }
  .menu-btn{ display:flex; }
  .header-cta.desktop-only{ display:none; }
}

/* ---------- breadcrumbs ---------- */
.breadcrumbs{ font-size:.82rem; color: var(--muted-2); margin: 18px 0 6px; }
.breadcrumbs a{ color: var(--muted); }
.breadcrumbs a:hover{ color: var(--ink); }
.breadcrumbs .sep{ margin: 0 6px; opacity:.5; }

/* ---------- hero ---------- */
.hero{ padding: 48px 0 20px; }
.hero-grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--gold); background: rgba(232,184,75,.1); border:1px solid rgba(232,184,75,.35);
  padding: 5px 10px; border-radius: 999px; margin-bottom: 18px;
}
.hero p.lede{ font-size: 1.1rem; color: var(--muted); max-width: 46ch; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 22px; }

@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:.95rem; padding: 14px 22px; border-radius: 12px;
  border:1px solid transparent; cursor:pointer; transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
  font-family: var(--font-body);
}
.btn-primary{ background: var(--covert); color:#fff; box-shadow: var(--shadow-pop); }
.btn-primary:hover{ background:#ff5952; transform: translateY(-2px); }
.btn-primary:focus-visible{ outline-offset:3px; }
.btn-primary:active{ transform: translateY(0); box-shadow:none; }
.btn-secondary{ background: var(--surface-2); color: var(--ink); border-color: var(--border); }
.btn-secondary:hover{ border-color: var(--muted-2); background: var(--surface-3); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--border); }
.btn-ghost:hover{ background: var(--surface-2); }
.btn-sm{ padding: 9px 14px; font-size:.85rem; border-radius:9px; }
.btn[disabled]{ opacity:.5; cursor:default; transform:none !important; }

/* ---------- drop ticket (signature component) ---------- */
.drop-ticket{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 22px 22px 22px 26px;
  box-shadow: var(--shadow-card);
  overflow:hidden;
}
.drop-ticket::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  background: var(--rarity-gradient);
}
.drop-ticket::after{
  content:""; position:absolute; right:-14px; top:50%; width:28px; height:28px;
  background: var(--void); border:1px solid var(--border); border-radius:50%;
  transform: translateY(-50%);
}
.drop-ticket .tier{
  font-family: var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--gold); margin-bottom:10px; display:flex; align-items:center; gap:6px;
}
.drop-ticket .tier.recommended::before{ content:"★"; }
.drop-ticket .code-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background: var(--void); border: 1px dashed var(--border); border-radius: var(--radius-s);
  padding: 12px 14px; margin: 10px 0 14px;
}
.drop-ticket .code{
  font-family: var(--font-mono); font-weight:700; font-size:1.25rem; letter-spacing:.06em; color:var(--ink);
}
.copy-btn{
  display:inline-flex; align-items:center; gap:6px; background: var(--surface-3);
  border:1px solid var(--border); color: var(--ink); font-size:.78rem; font-weight:600;
  padding:8px 12px; border-radius: 8px; cursor:pointer; font-family: var(--font-body);
  transition: background .15s, border-color .15s;
  white-space:nowrap;
}
.copy-btn:hover{ background: var(--surface-2); border-color: var(--muted-2); }
.copy-btn.copied{ background: rgba(61,190,122,.16); border-color: var(--success); color: var(--success); }
.drop-ticket .offer{ color: var(--muted); font-size:.92rem; margin-bottom: 14px; }
.drop-ticket .ticket-cta{ width:100%; }

.ticket-hero{ transform: rotate(-1.2deg); }
.ticket-hero .code{ font-size:1.7rem; }

/* ---------- promo grid / comparison ---------- */
.promo-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin: 28px 0; }
@media (max-width: 920px){ .promo-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .promo-grid{ grid-template-columns: 1fr; } }

.table-wrap{ overflow-x:auto; margin: 24px 0; border:1px solid var(--border); border-radius: var(--radius); }
table.promo-table{ width:100%; border-collapse: collapse; min-width: 560px; }
table.promo-table th, table.promo-table td{ padding: 14px 16px; text-align:left; border-bottom:1px solid var(--border-soft); font-size:.92rem; }
table.promo-table th{ background: var(--surface-2); font-family: var(--font-display); font-weight:600; color:var(--muted); text-transform:uppercase; font-size:.72rem; letter-spacing:.06em; }
table.promo-table tr:last-child td{ border-bottom:none; }
table.promo-table td .code{ font-family: var(--font-mono); font-weight:700; }
table.promo-table tr.is-recommended td{ background: rgba(232,184,75,.06); }
.badge{ display:inline-flex; align-items:center; gap:5px; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:3px 8px; border-radius:999px; }
.badge-gold{ background: rgba(232,184,75,.15); color: var(--gold); border:1px solid rgba(232,184,75,.4); }

/* ---------- steps ---------- */
.steps{ counter-reset: step; display:grid; gap:14px; margin: 24px 0; }
.step{
  display:grid; grid-template-columns: 40px 1fr; gap:16px; background: var(--surface);
  border:1px solid var(--border); border-radius: var(--radius); padding:16px 18px;
}
.step .num{
  counter-increment: step; font-family: var(--font-display); font-weight:700;
  width:40px; height:40px; border-radius:10px; background: var(--surface-3);
  display:flex; align-items:center; justify-content:center; color: var(--gold);
}
.step .num::before{ content: counter(step); }
.step h3{ margin:0 0 4px; font-size:1.02rem; }
.step p{ margin:0; color: var(--muted); font-size:.94rem; }

/* ---------- cards / sections ---------- */
.section{ padding: 8px 0; }
.card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; }
.card-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin: 22px 0; }
@media (max-width: 920px){ .card-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .card-grid{ grid-template-columns: 1fr; } }

.callout{
  border-left: 3px solid var(--restricted); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px; margin: 22px 0; color: var(--muted);
}
.callout strong{ color: var(--ink); }
.callout.warn{ border-left-color: var(--covert); }
.callout.safe{ border-left-color: var(--success); }

/* ---------- calculator ---------- */
.calculator{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-l);
  padding: 24px; margin: 26px 0;
}
.calculator .calc-row{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-bottom:16px; }
@media (max-width:600px){ .calculator .calc-row{ grid-template-columns:1fr; } }
.calc-field label{ display:block; font-size:.8rem; color: var(--muted); margin-bottom:6px; font-family: var(--font-mono); text-transform:uppercase; letter-spacing:.04em; }
.calc-field select, .calc-field input[type="number"]{
  width:100%; background: var(--void); border:1px solid var(--border); color: var(--ink);
  padding: 11px 12px; border-radius: 9px; font-size:1rem; font-family: var(--font-body);
}
.calc-result{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  background: var(--void); border:1px dashed var(--border); border-radius: var(--radius-s);
  padding: 16px 18px; margin-top: 6px;
}
.calc-result .figure{ font-family: var(--font-mono); font-size:1.5rem; font-weight:700; color: var(--gold); }
.calc-result .label{ color: var(--muted); font-size:.85rem; }

/* ---------- FAQ ---------- */
.faq{ margin: 20px 0 0; }
.faq-item{ border-bottom: 1px solid var(--border-soft); }
.faq-item summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  padding: 18px 4px; font-weight:600; font-family: var(--font-display); font-size:1.02rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .chev{ transition: transform .2s; color: var(--muted); flex-shrink:0; margin-left:14px; }
.faq-item[open] summary .chev{ transform: rotate(180deg); }
.faq-item .faq-a{ padding: 0 4px 18px; color: var(--muted); }

/* ---------- related guides ---------- */
.related-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin: 22px 0; }
@media (max-width: 920px){ .related-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .related-grid{ grid-template-columns: 1fr; } }
.related-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:18px;
  transition: border-color .15s, transform .15s;
}
.related-card:hover{ border-color: var(--muted-2); transform: translateY(-2px); }
.related-card .tag{ font-family: var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color: var(--restricted); }
.related-card h3{ margin: 8px 0 6px; font-size:1.02rem; }
.related-card p{ font-size:.88rem; color: var(--muted); margin:0; }

/* ---------- final CTA band ---------- */
.final-cta{
  margin: 48px 0 16px; padding: 34px 28px; border-radius: var(--radius-l);
  background: linear-gradient(135deg, rgba(234,75,69,.14), rgba(139,92,246,.12));
  border: 1px solid var(--border); text-align:center;
}
.final-cta h2{ margin-top:0; }
.final-cta .btn{ margin-top: 10px; }

/* ---------- sticky mobile CTA ---------- */
.sticky-cta{
  position: fixed; left:0; right:0; bottom:0; z-index: 90;
  display:none; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(10,13,19,.92); backdrop-filter: blur(10px); border-top:1px solid var(--border-soft);
}
.sticky-cta .btn{ width:100%; }
@media (max-width: 720px){ .sticky-cta.enabled{ display:block; } body{ padding-bottom: 74px; } }

/* ---------- footer ---------- */
.site-footer{ border-top: 1px solid var(--border-soft); margin-top: 60px; padding: 40px 0 90px; background: var(--surface); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:32px; }
@media (max-width: 720px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color: var(--muted); margin-bottom:12px; }
.footer-grid ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.footer-grid a{ color: var(--muted); font-size:.92rem; }
.footer-grid a:hover{ color: var(--ink); }
.footer-legal{ color: var(--muted-2); font-size:.8rem; margin-top: 30px; line-height:1.7; border-top:1px solid var(--border-soft); padding-top:22px; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:20px; color: var(--muted-2); font-size:.8rem; }

/* ---------- content typography helpers ---------- */
.prose{ max-width: 74ch; }
.prose ul, .prose ol{ color: var(--ink); margin-bottom: 1.1em; }
.prose li{ margin-bottom:.4em; }
.lead-answer{ font-size: 1.08rem; color: var(--ink); background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }

.skip-link{
  position:absolute; left:-9999px; top:0; background: var(--gold); color:#111; padding:10px 16px; z-index:200; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left:0; }

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


/* ==========================================================================\n   GGDrop brand refresh — dark navy + orange conversion system\n   ========================================================================== */
:root{
  --void:#0D0D14;
  --surface:#161622;
  --surface-2:#1E1E2E;
  --surface-3:#242438;
  --border:#2A2A3E;
  --border-soft:#212133;
  --ink:#FFFFFF;
  --muted:#A0A0B0;
  --muted-2:#727284;
  --covert:#FF6B35;
  --covert-dim:#D95425;
  --gold:#FF8C5A;
  --gold-dim:#FF6B35;
  --success:#2ECC71;
  --danger:#FF6B35;
  --mil-blue:#FF6B35;
  --restricted:#FF7A45;
  --classified:#FF8C5A;
  --rarity-gradient:linear-gradient(180deg,#FF6B35 0%,#FF8C5A 100%);
  --font-display:'Syne','Inter',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono','Courier New',monospace;
  --shadow-card:0 18px 45px -24px rgba(0,0,0,.85);
  --shadow-pop:0 18px 45px -18px rgba(255,107,53,.42);
}
body{background:#0D0D14;line-height:1.7;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;}
.bg-grid{
  background:
    radial-gradient(circle at 10% -5%,rgba(255,107,53,.14),transparent 34%),
    radial-gradient(circle at 95% 10%,rgba(255,140,90,.09),transparent 30%),
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
    #0D0D14;
  background-size:auto,auto,54px 54px,54px 54px,auto;
}
.site-header{background:rgba(13,13,20,.9);border-bottom-color:#2A2A3E;}
.brand{min-width:142px;height:42px;display:flex;align-items:center;}
.brand-logo{display:block;width:auto;height:38px;max-width:150px;object-fit:contain;}
.main-nav a:hover,.main-nav a.active{color:#FF8C5A;}
.header-cta,.btn-primary{background:#FF6B35;color:#fff;}
.header-cta:hover,.btn-primary:hover{background:#FF8C5A;}
.eyebrow{color:#FF8C5A;background:rgba(255,107,53,.1);border-color:rgba(255,107,53,.38);}
.hero{padding-top:56px;overflow:hidden;}
.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:34px;}
.hero-visual{position:relative;min-height:520px;display:flex;align-items:flex-end;justify-content:center;padding:0 14px 24px;}
.hero-art{position:absolute;inset:-36px 0 70px;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.hero-art::before{content:"";position:absolute;width:78%;height:70%;border-radius:50%;background:radial-gradient(circle,rgba(255,107,53,.22),rgba(255,107,53,.04) 55%,transparent 72%);filter:blur(8px);}
.hero-art img{position:relative;width:min(100%,500px);height:auto;filter:drop-shadow(0 28px 40px rgba(0,0,0,.62));}
.hero-visual>.drop-ticket{position:relative;z-index:2;width:min(100%,430px);margin-top:auto;backdrop-filter:blur(12px);background:rgba(30,30,46,.93);}
.drop-ticket{background:#161622;border-color:#2A2A3E;}
.drop-ticket::before{background:linear-gradient(180deg,#FF6B35,#FF8C5A);}
.drop-ticket .code-row{background:#1E1E2E;border-color:#3A3A51;}
.drop-ticket .code{color:#fff;}
.copy-btn{background:#242438;border-color:#3A3A51;}
.copy-btn:hover{background:#2C2C42;border-color:#FF6B35;}
.copy-btn.copied{background:rgba(46,204,113,.14);border-color:#2ECC71;color:#2ECC71;}
.section{position:relative;}
.section h2::after{content:"";display:block;width:54px;height:3px;margin-top:12px;border-radius:99px;background:#FF6B35;}
.table-wrap,.card,.calculator,.related-card,.faq-item,.lead-answer{background:#161622;border-color:#2A2A3E;}
table.promo-table th{background:#1E1E2E;}
table.promo-table tr.is-recommended td{background:rgba(255,107,53,.08);}
.badge-gold{color:#FF8C5A;background:rgba(255,107,53,.1);border-color:rgba(255,107,53,.35);}
.callout{background:#161622;border-color:#2A2A3E;}
.callout.warn{border-left-color:#FF6B35;background:rgba(255,107,53,.07);}
.calc-result{background:#1E1E2E;}
input,select{background:#1E1E2E!important;border-color:#2A2A3E!important;color:#fff!important;}
.content-visual{max-width:520px;margin:20px auto 58px;padding:14px;border-radius:28px;background:linear-gradient(145deg,rgba(255,107,53,.12),rgba(22,22,34,.35));border:1px solid rgba(255,107,53,.22);box-shadow:0 26px 60px -35px rgba(255,107,53,.5);}
.content-visual img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 22px 26px rgba(0,0,0,.48));}
.site-footer{border-top-color:#2A2A3E;background:#0B0B12;}
.sticky-mobile-cta{background:rgba(13,13,20,.94);border-top-color:#2A2A3E;}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{min-height:480px;margin-top:-20px;}
  .hero-art{inset:-20px 0 60px;}
}
@media(max-width:620px){
  .brand-logo{height:32px;max-width:125px;}
  .hero{padding-top:32px;}
  .hero-visual{min-height:410px;padding-inline:0;}
  .hero-art{inset:-12px -14px 72px;}
  .hero-art img{width:390px;max-width:108%;}
  .hero-visual>.drop-ticket{width:94%;}
  .content-visual{margin:12px auto 40px;padding:8px;border-radius:20px;}
}

/* Rich intent-coverage content */
.content-rich{padding-top:36px;padding-bottom:36px}.prose-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.75fr);gap:28px;align-items:start}.info-card,.step-card{background:#161622;border:1px solid #2A2A3E;border-radius:18px;padding:22px}.comparison-cards,.steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.steps-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.step-card>span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#FF6B35;color:#fff;font-weight:700;margin-bottom:12px}.numbered-list,.check-list{line-height:1.75;color:#A0A0B0;padding-left:24px}.numbered-list li,.check-list li{margin:8px 0}.content-rich p{line-height:1.75}.content-rich h2{margin-bottom:16px}.content-rich h3{margin:0 0 10px}.notice.warning{background:#1E1E2E;border:1px solid #FF6B35;border-left-width:4px;border-radius:14px;padding:18px 20px;margin-bottom:20px}@media(max-width:900px){.prose-grid,.comparison-cards,.steps-grid{grid-template-columns:1fr}}