/* ═══ RANKONTIME — INNER PAGE TEMPLATE ═══
   Extends style.css. Same tokens, same fonts, same palette. */

/* ── PAGE HERO ─────────────────────────────────── */
.phero { background: var(--copper); position: relative; overflow: hidden; padding: 132px 0 76px; }
.phero::after { content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 70% 50% at 5% 5%, rgba(229,164,69,.22) 0%, transparent 60%),
              radial-gradient(ellipse 50% 60% at 95% 95%, rgba(22,19,15,.15) 0%, transparent 60%); }
.phero__inner { position:relative; z-index:1; display:grid; grid-template-columns: 1.05fr .95fr; gap:52px; align-items:center; }
.crumb { display:flex; gap:8px; flex-wrap:wrap; font-family:var(--ff-mono); font-variation-settings:"wdth" 75;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:rgba(22,19,15,.6); margin-bottom:22px; }
.crumb a { color:rgba(22,19,15,.6); text-decoration:none; }
.crumb a:hover { color:var(--ink); }
.phero h1 { font-family:var(--ff-brand); font-weight:900; font-size:clamp(34px,3.9vw,54px);
  letter-spacing:-.04em; line-height:1.04; color:var(--bone); margin-bottom:20px; }
.phero h1 .alt { color:var(--ink); }
.phero__sub { font-variation-settings:"opsz" 48; font-weight:600; font-size:clamp(16px,1.5vw,18.5px);
  line-height:1.5; color:rgba(22,19,15,.8); max-width:52ch; margin-bottom:30px; }
.phero__actions { display:flex; gap:13px; flex-wrap:wrap; margin-bottom:38px; }
.phero__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:520px;
  border-top:1px solid rgba(22,19,15,.18); padding-top:22px; }
.phero__stat-n { font-family:var(--ff-brand); font-weight:900; font-size:clamp(24px,2.4vw,32px);
  letter-spacing:-.03em; color:var(--ink); line-height:1; }
.phero__stat-l { font-size:11.5px; line-height:1.45; color:rgba(22,19,15,.7); margin-top:7px; }

/* ── HERO VISUAL: terminal / dashboard ─────────── */
.viz { background:var(--ink); border-radius:14px; overflow:hidden; box-shadow:0 22px 60px rgba(22,19,15,.32); }
.viz__bar { display:flex; align-items:center; gap:7px; padding:11px 15px; background:#0d0b08; border-bottom:1px solid rgba(246,242,233,.08); }
.viz__dot { width:9px; height:9px; border-radius:50%; }
.viz__title { font-family:var(--ff-mono); font-variation-settings:"wdth" 75; font-size:10.5px;
  color:rgba(246,242,233,.5); margin-left:8px; letter-spacing:.05em; }
.viz__body { padding:18px 18px 20px; font-family:var(--ff-mono); font-variation-settings:"wdth" 75;
  font-size:11.5px; line-height:1.95; color:rgba(246,242,233,.9); }
.viz__body .d { color:rgba(246,242,233,.42); }
.viz__body .g { color:#5E9C8A; }
.viz__body .r { color:#E27D60; }
.viz__body .y { color:var(--dawn); }
.viz__body .c { color:var(--bone); font-weight:600; }
/* dashboard rows */
.vrow { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid rgba(246,242,233,.07); }
.vrow:last-child { border-bottom:none; }
.vrow__k { flex:1; font-size:11.5px; color:rgba(246,242,233,.72); }
.vrow__bar { width:88px; height:5px; background:rgba(246,242,233,.12); border-radius:100px; overflow:hidden; flex-shrink:0; }
.vrow__fill { height:100%; background:var(--patina); border-radius:100px; }
.vrow__v { width:42px; text-align:right; font-family:var(--ff-mono); font-size:10.5px; color:var(--dawn); flex-shrink:0; }

/* ── LOGO / PLATFORM STRIP ─────────────────────── */
.strip { background:var(--ink); padding:26px 0; border-bottom:1px solid rgba(246,242,233,.09); }
.strip__label { font-family:var(--ff-mono); font-variation-settings:"wdth" 75; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(246,242,233,.42); margin-bottom:16px; display:block; }
.strip__row { display:flex; gap:12px; flex-wrap:wrap; }
.strip__item { font-family:var(--ff-brand); font-weight:700; font-size:13.5px; color:rgba(246,242,233,.66);
  padding:7px 14px; border:1px solid rgba(246,242,233,.16); border-radius:6px; }

/* ── GENERIC SECTION HEADS ─────────────────────── */
.psec { padding:96px 0; }
.psec--dark { background:var(--ink); color:var(--bone); }
.psec--bone { background:var(--bone); border-top:1px solid var(--rule); }
.psec__eyebrow { font-family:var(--ff-mono); font-variation-settings:"wdth" 75; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--patina); margin-bottom:14px; display:block; }
.psec__h2 { font-family:var(--ff-brand); font-weight:800; font-size:clamp(26px,2.9vw,40px);
  letter-spacing:-.032em; line-height:1.1; margin-bottom:20px; max-width:24ch; }
.psec--dark .psec__h2 { color:var(--bone); }
.psec__lead { font-size:16px; line-height:1.65; color:var(--muted); max-width:70ch; margin-bottom:16px; }
.psec--dark .psec__lead { color:rgba(246,242,233,.72); }
.psec__lead:last-of-type { margin-bottom:44px; }

/* ── OLD VS NEW TABLE ──────────────────────────── */
.vs { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--rule); border-radius:12px; overflow:hidden; margin-top:36px; }
.psec--dark .vs { border-color:rgba(246,242,233,.16); }
.vs__h { padding:18px 22px; font-family:var(--ff-mono); font-variation-settings:"wdth" 75; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; }
.vs__h--old { background:rgba(22,19,15,.05); color:var(--muted); }
.vs__h--new { background:rgba(94,156,138,.14); color:var(--patina-d); }
.psec--dark .vs__h--old { background:rgba(246,242,233,.05); color:rgba(246,242,233,.5); }
.psec--dark .vs__h--new { background:rgba(94,156,138,.16); color:var(--patina); }
.vs__c { padding:15px 22px; font-size:14px; line-height:1.55; border-top:1px solid var(--rule); }
.psec--dark .vs__c { border-top-color:rgba(246,242,233,.12); color:rgba(246,242,233,.78); }
.vs__c--old { color:var(--muted); }
.vs__c--old::before { content:'✕'; color:#B4462F; margin-right:9px; font-size:11px; }
.vs__c--new::before { content:'✓'; color:var(--patina-d); margin-right:9px; font-size:11px; font-weight:700; }
.psec--dark .vs__c--new::before { color:var(--patina); }

/* ── DUO COMPARISON CARDS ──────────────────────── */
.duo { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.duo__card { border:1px solid var(--rule); border-radius:14px; padding:30px 28px; background:var(--bone-mid); }
.psec--dark .duo__card { background:rgba(246,242,233,.04); border-color:rgba(246,242,233,.14); }
.duo__card h3 { font-family:var(--ff-brand); font-weight:800; font-size:21px; letter-spacing:-.02em; margin-bottom:6px; }
.psec--dark .duo__card h3 { color:var(--bone); }
.duo__tag { font-family:var(--ff-mono); font-variation-settings:"wdth" 75; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--patina-d); margin-bottom:18px; display:block; }
.psec--dark .duo__tag { color:var(--patina); }
.duo__sh { font-family:var(--ff-mono); font-variation-settings:"wdth" 75; font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin:20px 0 10px; display:block; }
.duo__list { list-style:none; padding:0; margin:0; }
.duo__list li { font-size:13.5px; line-height:1.5; padding:7px 0 7px 22px; position:relative; color:var(--muted); }
.psec--dark .duo__list li { color:rgba(246,242,233,.74); }
.duo__list li::before { content:'→'; position:absolute; left:0; color:var(--copper); }
.duo__list--con li::before { content:'—'; color:var(--muted); }
.duo__best { margin-top:20px; padding-top:16px; border-top:1px dashed var(--rule); font-size:13px; color:var(--muted); }
.psec--dark .duo__best { border-top-color:rgba(246,242,233,.16); color:rgba(246,242,233,.6); }
.duo__best strong { color:var(--ink); }
.psec--dark .duo__best strong { color:var(--dawn); }

/* ── FEATURE / PILLAR GRID (4 across) ──────────── */
.pill { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.pill__card { border:1px solid var(--rule); border-radius:12px; padding:26px 24px; background:var(--bone-mid); }
.psec--dark .pill__card { background:rgba(246,242,233,.04); border-color:rgba(246,242,233,.14); }
.pill__code { font-family:var(--ff-mono); font-variation-settings:"wdth" 75; font-size:10px; letter-spacing:.1em;
  color:var(--copper); background:rgba(184,115,51,.1); border:1px solid rgba(184,115,51,.24);
  padding:4px 9px; border-radius:5px; display:inline-block; margin-bottom:14px; }
.pill__card h3 { font-family:var(--ff-brand); font-weight:700; font-size:17px; letter-spacing:-.015em; margin-bottom:9px; }
.psec--dark .pill__card h3 { color:var(--bone); }
.pill__card p { font-size:13.5px; line-height:1.6; color:var(--muted); }
.psec--dark .pill__card p { color:rgba(246,242,233,.7); }

/* ── SPLIT: content + readiness panel ──────────── */
.split { display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:start; }
.panel { border:1px solid var(--rule); border-radius:14px; padding:26px 24px; background:var(--bone-mid); }
.psec--dark .panel { background:rgba(246,242,233,.05); border-color:rgba(246,242,233,.15); }
.panel__h { font-family:var(--ff-mono); font-variation-settings:"wdth" 75; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:18px; display:block; }
.panel__row { display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--rule); font-size:13.5px; }
.psec--dark .panel__row { border-bottom-color:rgba(246,242,233,.12); color:rgba(246,242,233,.8); }
.panel__row:last-child { border-bottom:none; }
.panel__v { font-family:var(--ff-mono); font-size:11.5px; color:var(--patina-d); font-weight:600; flex-shrink:0; }
.psec--dark .panel__v { color:var(--patina); }

/* ── CHECKLIST ─────────────────────────────────── */
.checks { list-style:none; padding:0; margin:0 0 30px; }
.checks li { position:relative; padding:9px 0 9px 30px; font-size:14.5px; line-height:1.55; color:var(--muted); }
.psec--dark .checks li { color:rgba(246,242,233,.78); }
.checks li::before { content:'✓'; position:absolute; left:0; top:9px; width:19px; height:19px; border-radius:50%;
  background:rgba(94,156,138,.16); color:var(--patina-d); font-size:10px; display:flex; align-items:center; justify-content:center; }
.psec--dark .checks li::before { color:var(--patina); }

/* ── INCLUDED GRID (6) ─────────────────────────── */
.incl { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.incl__card { border:1px solid var(--rule); border-radius:12px; padding:26px 22px; background:var(--bone-mid); transition:.2s; }
.incl__card:hover { border-color:var(--copper); transform:translateY(-3px); }
.psec--dark .incl__card { background:rgba(246,242,233,.04); border-color:rgba(246,242,233,.14); }
.incl__card h3 { font-family:var(--ff-brand); font-weight:700; font-size:16.5px; margin-bottom:10px; letter-spacing:-.015em; }
.psec--dark .incl__card h3 { color:var(--bone); }
.incl__card p { font-size:13.5px; line-height:1.6; color:var(--muted); }
.psec--dark .incl__card p { color:rgba(246,242,233,.7); }

/* ── SEGMENTS (4 cards w/ stat) ────────────────── */
.seg { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.seg__card { border:1px solid var(--rule); border-radius:14px; padding:28px 26px; background:var(--bone-mid); }
.psec--dark .seg__card { background:rgba(246,242,233,.04); border-color:rgba(246,242,233,.14); }
.seg__top { display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:14px; }
.seg__cat { font-family:var(--ff-mono); font-variation-settings:"wdth" 75; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--patina-d); }
.psec--dark .seg__cat { color:var(--patina); }
.seg__stat { font-family:var(--ff-brand); font-weight:800; font-size:14px; color:var(--copper); }
.seg__card h3 { font-family:var(--ff-brand); font-weight:800; font-size:19px; letter-spacing:-.02em; margin-bottom:10px; }
.psec--dark .seg__card h3 { color:var(--bone); }
.seg__card > p { font-size:13.5px; line-height:1.6; color:var(--muted); margin-bottom:16px; }
.psec--dark .seg__card > p { color:rgba(246,242,233,.7); }

/* ── PROCESS STEPS ─────────────────────────────── */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--rule); }
.psec--dark .steps { border-top-color:rgba(246,242,233,.16); }
.steps__i { padding:30px 26px 30px 0; border-right:1px solid var(--rule); }
.psec--dark .steps__i { border-right-color:rgba(246,242,233,.14); }
.steps__i:last-child { border-right:none; }
.steps__n { font-family:var(--ff-mono); font-variation-settings:"wdth" 75; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--copper); margin-bottom:14px; }
.steps__i h3 { font-family:var(--ff-brand); font-weight:700; font-size:17px; margin-bottom:10px; letter-spacing:-.015em; }
.psec--dark .steps__i h3 { color:var(--bone); }
.steps__i p { font-size:13.5px; line-height:1.6; color:var(--muted); }
.psec--dark .steps__i p { color:rgba(246,242,233,.7); }

/* ── STAT BAND ─────────────────────────────────── */
.band { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:44px 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.psec--dark .band { border-color:rgba(246,242,233,.16); }
.band__n { font-family:var(--ff-brand); font-weight:900; font-size:clamp(28px,3vw,42px); letter-spacing:-.035em;
  color:var(--copper); line-height:1; }
.psec--dark .band__n { color:var(--dawn); }
.band__l { font-size:12.5px; line-height:1.5; color:var(--muted); margin-top:9px; }
.psec--dark .band__l { color:rgba(246,242,233,.66); }

/* ── FAQ ───────────────────────────────────────── */
.faq { max-width:860px; }
.faq__i { border-bottom:1px solid var(--rule); }
.psec--dark .faq__i { border-bottom-color:rgba(246,242,233,.14); }
.faq__i summary { cursor:pointer; list-style:none; padding:22px 40px 22px 0; position:relative;
  font-family:var(--ff-brand); font-weight:700; font-size:16.5px; letter-spacing:-.015em; }
.psec--dark .faq__i summary { color:var(--bone); }
.faq__i summary::-webkit-details-marker { display:none; }
.faq__i summary::after { content:'+'; position:absolute; right:6px; top:20px; font-size:22px;
  font-weight:400; color:var(--copper); transition:.2s; }
.faq__i[open] summary::after { transform:rotate(45deg); }
.faq__a { padding:0 40px 24px 0; font-size:14.5px; line-height:1.7; color:var(--muted); }
.psec--dark .faq__a { color:rgba(246,242,233,.74); }
.faq__a p { margin-bottom:12px; }
.faq__a p:last-child { margin-bottom:0; }

/* ── FINAL CTA ─────────────────────────────────── */
.fcta { background:var(--copper); padding:92px 0; position:relative; overflow:hidden; text-align:center; }
.fcta::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 60% at 50% 0%, rgba(229,164,69,.24) 0%, transparent 65%); }
.fcta__in { position:relative; z-index:1; max-width:720px; margin:0 auto; }
.fcta h2 { font-family:var(--ff-brand); font-weight:900; font-size:clamp(28px,3.4vw,46px);
  letter-spacing:-.035em; line-height:1.06; color:var(--bone); margin-bottom:18px; }
.fcta h2 .alt { color:var(--ink); }
.fcta p { font-size:16.5px; line-height:1.6; color:rgba(22,19,15,.78); margin-bottom:30px; }
.fcta__a { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.fcta__note { margin-top:20px; font-family:var(--ff-mono); font-variation-settings:"wdth" 75;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(22,19,15,.55); }

/* ── RELATED LINKS ─────────────────────────────── */
.rel { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.rel__a { display:block; border:1px solid var(--rule); border-radius:10px; padding:20px 22px;
  text-decoration:none; transition:.2s; background:var(--bone-mid); }
.rel__a:hover { border-color:var(--copper); transform:translateY(-2px); }
.rel__a strong { display:block; font-family:var(--ff-brand); font-weight:700; font-size:15px;
  color:var(--ink); margin-bottom:5px; letter-spacing:-.015em; }
.rel__a span { font-size:12.5px; color:var(--muted); line-height:1.5; }

/* ── RESPONSIVE ────────────────────────────────── */
@media (max-width:960px){
  .phero { padding:112px 0 60px; }
  .phero__inner { grid-template-columns:1fr; gap:40px; }
  .phero__stats { max-width:none; }
  .vs, .duo, .pill, .seg { grid-template-columns:1fr; }
  .split { grid-template-columns:1fr; gap:34px; }
  .incl { grid-template-columns:1fr 1fr; }
  .steps { grid-template-columns:1fr 1fr; }
  .steps__i { padding-right:22px; }
  .steps__i:nth-child(2) { border-right:none; }
  .band { grid-template-columns:1fr 1fr; row-gap:30px; }
  .rel { grid-template-columns:1fr; }
  .vs__h, .vs__c { border-top:1px solid var(--rule); }
}
@media (max-width:600px){
  .psec { padding:70px 0; }
  .phero__stats { grid-template-columns:1fr; gap:16px; }
  .incl, .steps, .band { grid-template-columns:1fr; }
  .steps__i { border-right:none; border-bottom:1px solid var(--rule); }
  .viz__body { font-size:10.5px; }
}