/* ==========================================================================
   VPNCQ — component layer
   Hero console, gradient band, feature rows, pricing, node table, platform
   cards, article cards, tabs, toc, FAQ, callout, promo block, preview helpers.
   Colours / radii / shadows only via :root tokens from base.css.
   ========================================================================== */

/* ==========================================================================
   1. Hero — copy left, tilted client window right, gradient band below
   ========================================================================== */

.hero{
  position:relative;
  overflow-x:clip;
  padding-top:clamp(16px, 2.4vw, 34px);
}

.hero-glow{
  position:absolute;
  left:0;
  right:0;
  top:-40px;
  height:min(660px, 84vw);
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(720px 320px at 86% 2%, color-mix(in srgb, var(--mint) 24%, transparent), transparent 68%),
    radial-gradient(620px 260px at 4% -6%, color-mix(in srgb, var(--bg-panel) 94%, transparent), transparent 74%);
}

.hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.02fr);
  gap:clamp(24px, 3.4vw, 52px);
  align-items:start;
  max-width:var(--wrap-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* the copy column keeps a hard gap before the band — decoration never sits
   under a headline, in any breakpoint */
.hero-copy{
  position:relative;
  z-index:6;
  min-width:0;
  padding-bottom:clamp(28px, 4vw, 72px);
}

.hero-title{
  margin:12px 0 0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(38px, 4.35vw, 62px);
  line-height:1.06;
  letter-spacing:-.03em;
  color:var(--text);
}

.hero-title .line{display:block;}

.hero-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:24px;
}

.hero-lead{
  margin:18px 0 0;
  max-width:33em;
  font-size:15px;
  line-height:1.72;
  color:var(--text-muted);
}

.hero-lead strong{
  font-weight:700;
  color:var(--text);
  background:linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--mint) 52%, transparent) 60%);
  padding:0 2px;
}

.trust-row{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 0;
  font-size:13px;
  color:var(--text-muted);
}

.trust-row li{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 12px;
  border-left:1px solid color-mix(in srgb, var(--border) 88%, transparent);
  line-height:1.5;
}

.trust-row li:first-child{padding-left:0;border-left:0;}

.trust-row li::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent);
  opacity:.72;
  flex:none;
}

.platform-row{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:16px;
  padding-top:16px;
  border-top:var(--hairline-soft);
  min-width:0;
}

.row-label{
  flex:none;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--text-muted);
  white-space:nowrap;
}

.platform-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  min-width:0;
}

.platform-list li{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:-.01em;
  color:var(--text-muted);
  white-space:nowrap;
}

.platform-list svg{
  width:15px;
  height:15px;
  color:var(--accent);
  flex:none;
}

.route-row{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:12px;
  min-width:0;
}

.route-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  min-width:0;
}

.route-list li{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  color:var(--text);
  white-space:nowrap;
}

/* ---- flags ---- */
.flag{
  width:20px;
  height:14px;
  display:block;
  flex:none;
  border-radius:2px;
  overflow:hidden;
}

.flag--lg{width:24px;height:17px;}

.flag .fw{fill:var(--paper-white);}
.flag .fr{fill:var(--flag-red);}
.flag .fb{fill:var(--flag-blue);}
.flag .fm{fill:var(--mint);}

/* ==========================================================================
   2. Console window (static client mock)
   ========================================================================== */

.hero-stage{
  position:relative;
  z-index:3;
  min-width:0;
  padding-top:76px;
}

.console{
  position:relative;
  max-width:640px;
  margin-left:auto;
  border-radius:var(--r-lg);
  background:var(--bg-panel);
  overflow:hidden;
  transform:rotate(-1.2deg);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--border) 76%, transparent),
    var(--inset-glow),
    var(--shadow-lift);
}

.console-bar{
  display:flex;
  align-items:center;
  gap:10px;
  height:42px;
  padding:0 16px;
  background:linear-gradient(180deg,
      color-mix(in srgb, var(--bg-panel-2) 72%, var(--bg-panel)) 0%,
      color-mix(in srgb, var(--bg-panel-2) 42%, var(--bg-panel)) 100%);
  border-bottom:var(--hairline-soft);
}

.console-dots{display:inline-flex;gap:5px;flex:none;}

.console-dots i{
  display:block;
  width:8px;
  height:8px;
  border-radius:50%;
}

.console-dots i:nth-child(1){background:color-mix(in srgb, var(--error) 52%, var(--bg-panel-2));}
.console-dots i:nth-child(2){background:color-mix(in srgb, var(--warn) 58%, var(--bg-panel-2));}
.console-dots i:nth-child(3){background:color-mix(in srgb, var(--success) 58%, var(--bg-panel-2));}

.console-title{
  font-size:12px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.console-secure{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:22px;
  padding:0 9px;
  border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--mint) 28%, var(--bg-panel));
  color:var(--accent-dark);
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  flex:none;
}

.console-secure svg{width:11px;height:11px;flex:none;}

.console-body{
  padding:16px 18px 18px;
  display:flex;
  flex-direction:column;
}

.console-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.console-h{
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--text);
}

.console-sub{
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--text-muted);
  white-space:nowrap;
}

.region-row{
  list-style:none;
  margin:0 0 10px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.region-row li{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:28px;
  padding:0 9px;
  border-radius:var(--r-pill);
  border:1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background:var(--bg-panel);
  font-size:11.5px;
  color:var(--text-muted);
  white-space:nowrap;
}

.region-row li.is-on{
  border-color:color-mix(in srgb, var(--accent) 52%, transparent);
  background:color-mix(in srgb, var(--mint) 22%, var(--bg-panel));
  color:var(--text);
  font-weight:700;
}

.region-row .flag{width:17px;height:12px;}

.type-row{
  list-style:none;
  margin:0 0 12px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.type-row li{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 10px;
  border-radius:var(--r-xs);
  background:color-mix(in srgb, var(--bg-panel-2) 62%, var(--bg-panel));
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--text-muted);
  white-space:nowrap;
}

.type-row li.is-on{
  background:var(--accent);
  color:var(--bg-panel);
  font-weight:700;
}

.plat-row{
  list-style:none;
  margin:0 0 12px;
  padding:0 0 12px;
  display:flex;
  flex-wrap:wrap;
  gap:4px 14px;
  border-bottom:1px dashed color-mix(in srgb, var(--border) 88%, transparent);
}

.plat-row li{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--text-muted);
  white-space:nowrap;
}

.plat-row svg{width:13px;height:13px;flex:none;}

.plan-row{
  list-style:none;
  margin:0 0 12px;
  padding:0;
  display:grid;
  gap:2px;
}

.plan-row li{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  padding:0 10px;
  border-radius:var(--r-xs);
}

.plan-row li:hover{background:color-mix(in srgb, var(--mint) 12%, transparent);}

.plan-price{
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--text);
  flex:none;
}

.plan-unit{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--text-muted);
  flex:none;
}

.plan-dash{
  flex:1 1 auto;
  min-width:12px;
  height:1px;
  align-self:center;
  background-image:linear-gradient(90deg, color-mix(in srgb, var(--border) 96%, transparent) 50%, transparent 0);
  background-size:6px 1px;
  background-repeat:repeat-x;
}

.plan-gb{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-muted);
  flex:none;
}

.fact-row{
  list-style:none;
  margin:0 0 10px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.fact-row li{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:24px;
  padding:0 10px;
  border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--bg-panel-2) 56%, var(--bg-panel));
  font-size:11px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
}

.fact-row svg{width:11px;height:11px;color:var(--accent);flex:none;}

.pay-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:12px;
  font-size:11px;
  color:var(--text-muted);
}

.pay-label{font-weight:700;letter-spacing:.02em;color:var(--text-muted);}

.pay-sep{color:var(--rule);}

.switch-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 12px;
  border-radius:var(--r-md);
  border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  background:linear-gradient(180deg,
      color-mix(in srgb, var(--mint) 16%, var(--bg-panel)) 0%,
      color-mix(in srgb, var(--mint) 7%, var(--bg-panel)) 100%);
}

.switch-text{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:700;
  color:var(--accent-dark);
  white-space:nowrap;
}

.switch-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent);
  flex:none;
}

.switch{
  position:relative;
  width:42px;
  height:24px;
  border-radius:var(--r-pill);
  background:linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  box-shadow:inset 0 1px 2px color-mix(in srgb, var(--espresso) 34%, transparent);
  flex:none;
}

.switch::after{
  content:"";
  position:absolute;
  top:3px;
  right:3px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--bg-panel);
  box-shadow:0 1px 3px color-mix(in srgb, var(--espresso) 38%, transparent);
}

/* ---- floating side cards: anchored inside the stage column only ---- */
.float-card{
  position:absolute;
  z-index:5;
  border-radius:var(--r-md);
  background:var(--bg-panel);
}

.float-signup{
  top:0;
  left:0;
  width:216px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  transform:rotate(-1.8deg);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent),
    var(--inset-glow),
    var(--shadow-soft);
}

.float-ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--mint) 30%, var(--bg-panel));
  color:var(--accent-dark);
  flex:none;
}

.float-ic svg{width:14px;height:14px;}

.float-text{min-width:0;}

.float-strong{
  display:block;
  font-size:12.5px;
  font-weight:700;
  line-height:1.4;
  color:var(--text);
}

.float-sub{
  display:block;
  margin-top:2px;
  font-size:11.5px;
  line-height:1.45;
  color:var(--text-muted);
}

.float-ticket{
  right:0;
  bottom:-22px;
  width:234px;
  padding:14px 16px;
  background:var(--espresso);
  color:var(--bg-panel);
  transform:rotate(1.4deg);
  box-shadow:var(--shadow-card);
}

.ticket-label{
  display:block;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.1em;
  color:color-mix(in srgb, var(--mint) 86%, var(--bg-panel));
}

.ticket-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  padding:4px 10px;
  border-radius:var(--r-xs);
  background:var(--mint);
  color:var(--espresso);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.ticket-note{
  display:block;
  margin-top:8px;
  font-size:11.5px;
  line-height:1.5;
  color:color-mix(in srgb, var(--bg-panel) 70%, transparent);
}

/* ==========================================================================
   3. Gradient band with offset white cards
   ========================================================================== */

.hero-band{
  position:relative;
  z-index:1;
  margin-top:calc(-1 * clamp(40px, 6vw, 96px));
  padding:clamp(88px, 12vw, 172px) 0 clamp(40px, 5vw, 72px);
  background:var(--grad-band);
  overflow:hidden;
}

.hero-band::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:180px;
  pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--paper-white) 16%, transparent), transparent);
}

.band-inner{
  position:relative;
  z-index:1;
  max-width:var(--wrap-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.band-stack{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(14px, 2vw, 26px);
  align-items:start;
}

.band-card{
  min-width:0;
  padding:16px 18px;
  background:var(--bg-panel);
  border:var(--hairline-soft);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
}

.band-card:nth-child(1){transform:translateY(18px) rotate(-.8deg);}
.band-card:nth-child(2){transform:translateY(-8px) rotate(.6deg);}
.band-card:nth-child(3){transform:translateY(26px) rotate(-.5deg);}

.band-card-h{
  display:block;
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--text-muted);
}

.band-chips{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.band-chips li{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 9px;
  border-radius:var(--r-xs);
  background:color-mix(in srgb, var(--mint) 24%, var(--bg-panel));
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--accent-dark);
  white-space:nowrap;
}

.band-figures{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:8px;
}

.band-figure{
  font-family:var(--font-mono);
  font-size:19px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--text);
  white-space:nowrap;
}

.band-figure small{
  display:block;
  margin-top:2px;
  font-family:var(--font-body);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:0;
  color:var(--text-muted);
}

.band-note{
  margin:8px 0 0;
  font-size:12px;
  line-height:1.6;
  color:var(--text-muted);
}

/* ==========================================================================
   4. Feature rows (title + arrow, hairline separated) + ticket card
   ========================================================================== */

.feat-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:0 clamp(20px, 3vw, 48px);
}

.feat-col{
  grid-column:span 6;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.feat-item{
  padding:var(--sp-4) 0;
  border-top:var(--hairline-soft);
  min-width:0;
}

.feat-col > .feat-item:first-child{border-top:0;padding-top:0;}

.feat-title{
  margin:0;
  font-size:18px;
  font-weight:800;
  line-height:1.4;
  letter-spacing:-.01em;
  color:var(--text);
}

.feat-title svg{
  width:15px;
  height:15px;
  margin-left:6px;
  vertical-align:-2px;
  color:var(--accent);
}

.feat-desc{
  margin:4px 0 0;
  max-width:38em;
  font-size:14px;
  line-height:1.68;
  color:var(--text-muted);
}

.ticket-card{
  margin-top:var(--sp-5);
  padding:20px;
  background:var(--espresso);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  min-width:0;
}

.ticket-card-h{
  margin:0 0 12px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  color:color-mix(in srgb, var(--mint) 86%, var(--bg-panel));
}

.ticket-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}

.ticket-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:38px;
  padding:0 12px;
  border-radius:var(--r-xs);
  background:color-mix(in srgb, var(--mint) 88%, var(--paper-white));
  color:var(--espresso);
}

.ticket-row-name{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.ticket-row-price{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:-.01em;
  white-space:nowrap;
}

.ticket-card-note{
  margin:12px 0 0;
  font-size:11.5px;
  line-height:1.6;
  color:color-mix(in srgb, var(--bg-panel) 64%, transparent);
}

/* ==========================================================================
   5. Tables (node list / comparison) — always inside a scroll wrapper
   ========================================================================== */

.table-scroll{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  border:var(--hairline);
  border-radius:var(--r-md);
  background:var(--bg-panel);
  box-shadow:var(--inset-glow);
}

.table-scroll table{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  font-size:14px;
}

.table-scroll th,
.table-scroll td{
  padding:12px 14px;
  text-align:left;
  vertical-align:middle;
  border-bottom:var(--hairline-soft);
  word-break:keep-all;
}

.table-scroll th{
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--text-muted);
  background:color-mix(in srgb, var(--bg-panel-2) 58%, var(--bg-panel));
  white-space:nowrap;
}

.table-scroll td{color:var(--text);}

.table-scroll tbody tr:last-child td{border-bottom:0;}

.table-scroll tbody tr:hover td{background:color-mix(in srgb, var(--mint) 9%, transparent);}

.table-scroll .cell-country{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.table-scroll .cell-mono{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--text-muted);
}

.table-note{
  margin:10px 0 0;
  font-size:12.5px;
  color:var(--text-muted);
}

/* ==========================================================================
   6. Pricing cards
   ========================================================================== */

.plan-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--sp-5);
}

.plan-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  min-width:0;
  padding:var(--sp-5);
  background:var(--bg-panel);
  border:var(--hairline);
  border-radius:var(--r-lg);
  box-shadow:var(--inset-glow), var(--shadow-soft);
}

.plan-card.is-featured{
  border-color:color-mix(in srgb, var(--accent) 46%, var(--border));
  box-shadow:var(--inset-glow), var(--shadow-lift);
}

.plan-card.is-featured::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--mint) 16%, transparent), transparent 46%);
}

.plan-badge{
  position:absolute;
  top:-11px;
  left:var(--sp-5);
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 10px;
  border-radius:var(--r-pill);
  background:var(--mint);
  color:var(--espresso);
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}

.plan-name{
  margin:0;
  font-size:15px;
  font-weight:700;
  color:var(--text);
}

.plan-price{
  display:flex;
  align-items:baseline;
  gap:3px;
  font-family:var(--font-mono);
  font-size:38px;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.1;
  color:var(--text);
}

.plan-cur{font-size:20px;}

.plan-unit{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:0;
  color:var(--text-muted);
}

.plan-quota{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--accent-dark);
}

.plan-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:7px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--text-muted);
}

.plan-list li{
  position:relative;
  padding-left:16px;
}

.plan-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:color-mix(in srgb, var(--accent) 72%, transparent);
}

.plan-cta{margin-top:auto;padding-top:var(--sp-3);}

.pack-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--sp-4);
}

.pack-card{
  min-width:0;
  padding:18px;
  background:color-mix(in srgb, var(--bg-panel-2) 42%, var(--bg-panel));
  border:var(--hairline-soft);
  border-radius:var(--r-md);
}

.pack-name{
  margin:0;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--text-muted);
}

.pack-price{
  display:block;
  margin-top:6px;
  font-family:var(--font-mono);
  font-size:24px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--text);
}

.pack-note{
  display:block;
  margin-top:4px;
  font-size:12px;
  color:var(--text-muted);
}

/* ==========================================================================
   7. Platform cards
   ========================================================================== */

.platform-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:var(--sp-3);
}

.platform-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  min-width:0;
  padding:16px;
  background:var(--bg-panel);
  border:var(--hairline);
  border-radius:var(--r-md);
  box-shadow:var(--inset-glow), 0 12px 24px -22px color-mix(in srgb, var(--espresso) 42%, transparent);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.platform-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--inset-glow), var(--shadow-soft);
}

.platform-ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--mint) 22%, var(--bg-panel));
  color:var(--accent-dark);
  flex:none;
}

.platform-ic svg{width:18px;height:18px;}

.platform-name{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
}

.platform-note{
  font-size:12px;
  line-height:1.55;
  color:var(--text-muted);
}

.platform-card .btn{margin-top:auto;}

/* ==========================================================================
   8. Article cards
   ========================================================================== */

.post-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--sp-5);
}

.post-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  padding:var(--sp-5);
  background:var(--bg-panel);
  border:var(--hairline);
  border-radius:var(--r-md);
  box-shadow:var(--inset-glow), var(--shadow-soft);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.post-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--inset-glow), var(--shadow-lift);
}

.post-tag{align-self:flex-start;}

.post-title{
  margin:0;
  font-size:18px;
  font-weight:800;
  line-height:1.4;
  letter-spacing:-.012em;
  color:var(--text);
}

.post-title a{color:inherit;text-decoration:none;}

.post-title a:hover{color:var(--accent-dark);}

.post-meta{
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--text-muted);
}

.post-summary{
  margin:0;
  font-size:13.5px;
  line-height:1.7;
  color:var(--text-muted);
}

.post-more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:auto;
  min-height:28px;
  font-size:13px;
  font-weight:700;
  color:var(--accent-dark);
}

.post-more svg{width:14px;height:14px;flex:none;}

/* ==========================================================================
   9. Tabs
   ========================================================================== */

.tabs{min-width:0;}

.tablist{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  width:max-content;
  max-width:100%;
  padding:5px;
  background:color-mix(in srgb, var(--bg-panel-2) 62%, var(--bg-panel));
  border:var(--hairline-soft);
  border-radius:var(--r-pill);
}

.tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 16px;
  border:0;
  border-radius:var(--r-pill);
  background:transparent;
  font-family:inherit;
  font-size:13.5px;
  font-weight:700;
  color:var(--text-muted);
  white-space:nowrap;
  cursor:pointer;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.tab:hover{color:var(--text);}

.tab[aria-selected="true"]{
  background:var(--bg-panel);
  color:var(--text);
  box-shadow:var(--inset-glow), 0 8px 16px -14px color-mix(in srgb, var(--espresso) 44%, transparent);
}

.tab-panel{padding-top:var(--sp-4);}

.tab-panel[hidden]{display:none;}

/* ==========================================================================
   10. TOC tabs
   ========================================================================== */

.toc-tabs{
  position:sticky;
  top:var(--header-h);
  z-index:20;
  display:flex;
  gap:6px;
  max-width:100%;
  padding:10px 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  background:color-mix(in srgb, var(--bg) 94%, transparent);
  border-bottom:var(--hairline-soft);
  scrollbar-width:thin;
}

.toc-tabs a{
  display:inline-flex;
  align-items:center;
  flex:none;
  min-height:34px;
  padding:0 14px;
  border:var(--hairline-soft);
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  font-size:13px;
  color:var(--text-muted);
  white-space:nowrap;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.toc-tabs a:hover{color:var(--text);border-color:color-mix(in srgb, var(--accent) 36%, var(--border));}

.toc-tabs a.is-current{
  background:var(--mint);
  border-color:transparent;
  color:var(--espresso);
  font-weight:700;
}

body:has(.toc-tabs) section[id],
body:has(.toc-tabs) [id^="sec-"]{
  scroll-margin-top:calc(var(--header-h) + 74px);
}

/* ==========================================================================
   11. FAQ
   ========================================================================== */

.faq-list{
  display:grid;
  gap:10px;
  min-width:0;
}

.faq-item{
  background:var(--bg-panel);
  border:var(--hairline);
  border-radius:var(--r-md);
  box-shadow:var(--inset-glow);
  min-width:0;
}

.faq-item summary{
  position:relative;
  display:block;
  min-height:48px;
  padding:15px 48px 15px 16px;
  font-size:15px;
  font-weight:700;
  line-height:1.5;
  color:var(--text);
  cursor:pointer;
  list-style:none;
}

.faq-item summary::-webkit-details-marker{display:none;}

.faq-item summary::after{
  content:"";
  position:absolute;
  right:18px;
  top:calc(50% - 5px);
  width:8px;
  height:8px;
  border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(45deg);
  transition:transform .2s var(--ease);
}

.faq-item[open] summary::after{transform:rotate(-135deg);}

.faq-item[open] summary{color:var(--accent-dark);}

.faq-body{
  padding:0 16px 16px;
  font-size:14px;
  line-height:1.72;
  color:var(--text-muted);
}

.faq-body p + p{margin-top:8px;}

.faq-body ul{margin:8px 0 0;padding-left:1.2em;}

/* ==========================================================================
   12. Callout / promo block
   ========================================================================== */

.callout{
  position:relative;
  margin:var(--sp-5) 0;
  padding:16px 18px 16px 20px;
  background:color-mix(in srgb, var(--bg-panel-2) 52%, var(--bg-panel));
  border:var(--hairline-soft);
  border-left:3px solid var(--accent);
  border-radius:var(--r-sm);
  min-width:0;
}

.callout-title{
  margin:0 0 6px;
  font-size:14px;
  font-weight:700;
  color:var(--text);
}

.callout p{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:var(--text-muted);
}

.promo-block{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:var(--sp-4);
  align-items:center;
  padding:clamp(20px, 3vw, 32px);
  background:var(--espresso);
  color:var(--bg-panel);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}

.promo-block::after{
  content:"";
  position:absolute;
  right:-80px;
  top:-90px;
  width:260px;
  height:260px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--mint) 34%, transparent), transparent 68%);
}

.promo-copy{position:relative;z-index:1;min-width:0;}

.promo-brand{
  display:block;
  font-family:var(--font-display);
  font-weight:900;
  font-size:20px;
  letter-spacing:-.03em;
  color:var(--bg-panel);
}

.promo-desc{
  margin:6px 0 0;
  font-size:13.5px;
  line-height:1.7;
  color:color-mix(in srgb, var(--bg-panel) 72%, transparent);
}

.promo-block .btn{
  position:relative;
  z-index:1;
  flex-shrink:0;
  white-space:nowrap;
}

/* ==========================================================================
   13. Preview helpers (design-preview.html only, defined here on purpose)
   ========================================================================== */

.preview-block{
  padding-top:clamp(28px, 4vw, 48px);
  padding-bottom:clamp(28px, 4vw, 48px);
  border-top:var(--hairline-soft);
}

.preview-label{
  display:block;
  margin-bottom:12px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--text-muted);
}

.preview-hint{
  margin:0 0 16px;
  font-size:13px;
  line-height:1.7;
  color:var(--text-muted);
}

.swatches{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:12px;
}

.swatch{
  min-width:0;
  padding:10px;
  background:var(--bg-panel);
  border:var(--hairline);
  border-radius:var(--r-sm);
}

.swatch-chip{
  display:block;
  height:56px;
  border-radius:var(--r-xs);
  border:var(--hairline-soft);
}

.swatch-name{
  display:block;
  margin-top:8px;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:700;
  color:var(--text);
  overflow-wrap:anywhere;
}

.swatch-val{
  display:block;
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--text-muted);
  overflow-wrap:anywhere;
}

.sw-bg{background:var(--bg);}
.sw-panel{background:var(--bg-panel);}
.sw-panel-2{background:var(--bg-panel-2);}
.sw-warm{background:var(--bg-warm);}
.sw-espresso{background:var(--espresso);}
.sw-mint{background:var(--mint);}
.sw-accent{background:var(--accent);}
.sw-accent-dark{background:var(--accent-dark);}
.sw-border{background:var(--border);}
.sw-text{background:var(--text);}
.sw-muted{background:var(--text-muted);}
.sw-success{background:var(--success);}
.sw-warn{background:var(--warn);}
.sw-error{background:var(--error);}

.type-spec{
  display:grid;
  gap:14px;
  padding:18px;
  background:var(--bg-panel);
  border:var(--hairline);
  border-radius:var(--r-md);
}

.type-row-demo{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px;
  min-width:0;
}

.type-note{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-muted);
  white-space:nowrap;
}

.demo-grid{
  display:grid;
  gap:var(--sp-4);
  min-width:0;
}

.demo-grid--2{grid-template-columns:repeat(2, minmax(0, 1fr));}
.demo-grid--3{grid-template-columns:repeat(3, minmax(0, 1fr));}

.demo-panel{
  min-width:0;
  padding:var(--sp-4);
  background:var(--bg-panel);
  border:var(--hairline);
  border-radius:var(--r-md);
  box-shadow:var(--inset-glow);
}

.demo-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  min-width:0;
}

.demo-row + .demo-row{margin-top:14px;}

.demo-caption{
  margin:10px 0 0;
  font-size:12.5px;
  line-height:1.65;
  color:var(--text-muted);
}

/* ==========================================================================
   14. Responsive
   ========================================================================== */

@media (max-width:1180px){
  .platform-grid{grid-template-columns:repeat(3, minmax(0, 1fr));}
}

@media (max-width:1080px){
  .hero-inner{grid-template-columns:minmax(0, 1fr);}
  .hero-stage{display:flex;flex-direction:column;gap:12px;padding-top:0;}
  .console{margin-inline:auto;order:1;width:100%;}
  .float-card{position:static;width:auto;transform:none;}
  .float-signup{order:0;margin:0;}
  .float-ticket{order:2;margin:0;}
  .hero-band{margin-top:0;padding-top:clamp(36px, 6vw, 64px);}
  .hero-copy{padding-bottom:0;}
  .band-stack{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .band-card:nth-child(3){display:none;}
  .plan-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .post-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}

@media (max-width:900px){
  .feat-col{grid-column:1 / -1;}
  .feat-col + .feat-col{margin-top:var(--sp-5);}
  .pack-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .promo-block{grid-template-columns:minmax(0, 1fr);}
  .promo-block .btn{justify-self:start;}
}

@media (max-width:768px){
  .hero-title{font-size:clamp(28px, 6.6vw, 38px);}
  .platform-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .plan-grid{grid-template-columns:minmax(0, 1fr);}
  .post-grid{grid-template-columns:minmax(0, 1fr);}
  .band-stack{grid-template-columns:minmax(0, 1fr);}
  .band-card:nth-child(3){display:block;}
  .demo-grid--2,
  .demo-grid--3{grid-template-columns:minmax(0, 1fr);}
  .tablist{width:100%;flex-wrap:nowrap;overflow-x:auto;border-radius:var(--r-md);}
  .tab{flex:none;}
}

@media (max-width:640px){
  .console,
  .float-card,
  .band-card{transform:none;}
  .float-signup{width:auto;}
  .float-ticket{width:auto;}
  .console-body{padding:14px;}
  .console-title{font-size:11px;}
  .hero-cta .btn{flex:1 1 100%;}
  .pack-grid{grid-template-columns:minmax(0, 1fr);}
  .table-scroll table{min-width:560px;}
  .plan-price{font-size:32px;}
}