/* ============================================================ NorthGrid — css/plans.css AUDIT 2026-09-07 BW: New file. Components for pricing.php and features.php. Loaded AFTER option-a.css / option-b.css and relies on their tokens (--navy-*, --gold-*, --font-head, --font-body, --radius, --nav-h, --transition). Light values are the default (Option B); the [data-theme="dark"] block re-maps them for Option A. The page sets to match whichever sheet it loaded. ============================================================ */ :root { --pl-bg: var(--white, #ffffff); --pl-alt: var(--off-white, #f7f8fa); --pl-surface: var(--white, #ffffff); --pl-ink: var(--text-900, #0d1b2a); --pl-muted: var(--text-600, #3c4f66); --pl-faint: var(--text-400, #6b7f99); --pl-line: var(--light-300, #d8dfe9); --pl-line-soft: var(--light-200, #eef1f6); --pl-accent: var(--gold-500, #f5a623); --pl-accent-ink: var(--gold-600, #d4870a); --pl-primary: var(--navy-900, #0d1b2a); --pl-check: var(--navy-900, #0d1b2a); --pl-hi: rgba(245,166,35,0.07); --pl-shadow: 0 1px 2px rgba(13,27,42,0.05), 0 16px 36px -22px rgba(13,27,42,0.35); } [data-theme="dark"] { --pl-bg: var(--navy-900, #0d1b2a); --pl-alt: var(--navy-950, #07101d); --pl-surface: var(--navy-800, #122236); --pl-ink: var(--white, #ffffff); --pl-muted: var(--gray-300, #a8b5c8); --pl-faint: var(--gray-400, #7a8fa8); --pl-line: rgba(255,255,255,0.09); --pl-line-soft: rgba(255,255,255,0.05); --pl-accent: var(--gold-500, #f5a623); --pl-accent-ink: var(--gold-400, #f8bc55); --pl-primary: var(--gold-500, #f5a623); --pl-check: var(--gold-400, #f8bc55); --pl-hi: rgba(245,166,35,0.06); --pl-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 18px 40px -22px rgba(0,0,0,0.8); } a:focus-visible, button:focus-visible, summary:focus-visible, label:focus-visible { outline: 3px solid var(--pl-accent); outline-offset: 3px; } /* ── Page hero (shorter than the homepage hero) ─────────── */ .plans-hero { padding: calc(var(--nav-h) + 72px) 5% 64px; background: var(--pl-alt); border-bottom: 1px solid var(--pl-line); } [data-theme="dark"] .plans-hero { background: radial-gradient(ellipse 70% 60% at 70% 30%, rgba(245,166,35,0.07) 0%, transparent 70%), var(--navy-950); } .plans-hero-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; } .plans-hero h1 { font-family: var(--font-head); font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: 900; line-height: 1.1; color: var(--pl-ink); margin-bottom: 20px; max-width: 16ch; } [data-theme="dark"] .plans-hero h1 { font-weight: 800; } .plans-hero .lead { font-size: 1.12rem; color: var(--pl-muted); line-height: 1.75; max-width: 58ch; } .plans-hero .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; } @media (max-width: 1024px) { .plans-hero-inner { grid-template-columns: 1fr; } .plans-hero .art { max-width: 560px; } } /* ── One-line diagram (SVG in the pricing hero) ─────────── */ .oneline { width: 100%; height: auto; display: block; } .oneline .bus { stroke: var(--pl-primary); stroke-width: 4; } .oneline .wire { stroke: var(--pl-line); stroke-width: 2.5; } [data-theme="dark"] .oneline .wire { stroke: rgba(255,255,255,0.22); } .oneline .brk { stroke: var(--pl-primary); stroke-width: 2.5; fill: none; } .oneline .node { fill: var(--pl-surface); stroke: var(--pl-primary); stroke-width: 2.5; } .oneline .node.hi { stroke: var(--pl-accent); stroke-width: 3.5; } .oneline .star { fill: var(--pl-accent); } .oneline text { font-family: var(--font-body); font-weight: 600; fill: var(--pl-ink); font-size: 15px; } .oneline text.sub { font-weight: 400; fill: var(--pl-faint); font-size: 12.5px; } /* ── Billing toggle drawn as a breaker switch ───────────── */ .billing { display: flex; align-items: center; gap: 16px; margin-top: 30px; flex-wrap: wrap; } .breaker { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; background: var(--pl-surface); border: 2px solid var(--pl-line); border-radius: 10px; padding: 4px; user-select: none; } .breaker input { position: absolute; opacity: 0; pointer-events: none; } .breaker label { position: relative; z-index: 1; padding: 9px 22px; border-radius: 7px; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; cursor: pointer; text-align: center; color: var(--pl-muted); transition: color 0.18s ease; } .breaker .knob { position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px); background: var(--pl-primary); border-radius: 7px; transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1); } .breaker.annual .knob { transform: translateX(100%); } .breaker:not(.annual) label[for="bill-m"], .breaker.annual label[for="bill-a"] { color: var(--white, #fff); } [data-theme="dark"] .breaker:not(.annual) label[for="bill-m"], [data-theme="dark"] .breaker.annual label[for="bill-a"] { color: var(--navy-900, #0d1b2a); } .save-pill { background: var(--pl-accent); color: var(--navy-900, #0d1b2a); font-weight: 700; font-size: 0.85rem; border-radius: 999px; padding: 5px 13px; } @media (prefers-reduced-motion: reduce) { .breaker .knob { transition: none; } } /* ── Plan cards ─────────────────────────────────────────── */ .plans-section { background: var(--pl-bg); } .plans-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: stretch; } @media (max-width: 1024px) { .plans-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .plans-grid { grid-template-columns: 1fr; } } .plan { background: var(--pl-surface); border: 1px solid var(--pl-line); border-radius: var(--radius); padding: 30px 26px 26px; display: flex; flex-direction: column; position: relative; box-shadow: var(--pl-shadow); } .plan.featured { border: 2px solid var(--pl-accent); } .plan .flag { position: absolute; top: -13px; left: 24px; background: var(--pl-primary); color: var(--white, #fff); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; } [data-theme="dark"] .plan .flag { color: var(--navy-900, #0d1b2a); } .plan h3 { font-family: var(--font-head); font-size: 1.55rem; font-weight: 700; color: var(--pl-ink); margin-bottom: 4px; } .plan .for { color: var(--pl-muted); font-size: 0.93rem; line-height: 1.55; min-height: 3.1em; margin-bottom: 16px; } .price { display: flex; align-items: baseline; gap: 6px; } .price .amt { font-family: var(--font-head); font-size: 2.6rem; font-weight: 900; color: var(--pl-ink); letter-spacing: -0.01em; line-height: 1; } [data-theme="dark"] .price .amt { font-weight: 800; } .price .per { color: var(--pl-faint); font-weight: 500; } .price-note { color: var(--pl-muted); font-size: 0.88rem; line-height: 1.5; min-height: 2.7em; margin: 8px 0 18px; } .cap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 0; margin-bottom: 18px; border-top: 1px solid var(--pl-line); border-bottom: 1px solid var(--pl-line); } .cap div { font-size: 0.86rem; color: var(--pl-faint); } .cap strong { display: block; font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; color: var(--pl-ink); } .plan ul { list-style: none; padding: 0; margin: 0 0 24px; } .plan li { padding: 5px 0 5px 28px; position: relative; font-size: 0.94rem; line-height: 1.5; color: var(--pl-ink); } .plan li::before { content: ''; position: absolute; left: 2px; top: 11px; width: 13px; height: 7px; border-left: 2.5px solid var(--pl-check); border-bottom: 2.5px solid var(--pl-check); transform: rotate(-45deg); } .plan li.plus { font-weight: 700; padding-left: 0; color: var(--pl-muted); } .plan li.plus::before { display: none; } .plan .cta { margin-top: auto; } .plan .cta .btn-primary, .plan .cta .btn-secondary { width: 100%; justify-content: center; } .plan .fine { font-size: 0.8rem; color: var(--pl-faint); margin-top: 12px; } /* ── NECA show special ──────────────────────────────────── */ .promo { margin-top: 40px; padding: 24px 28px; border: 2px dashed var(--pl-accent); border-radius: var(--radius); background: var(--pl-surface); display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; } .promo .tag { font-family: var(--font-head); font-size: 1.35rem; font-weight: 700; color: var(--pl-accent-ink); } .promo p { margin: 0; color: var(--pl-muted); font-size: 0.98rem; line-height: 1.6; } .promo p strong { color: var(--pl-ink); } @media (max-width: 860px) { .promo { grid-template-columns: 1fr; } } /* ── Comparison table ───────────────────────────────────── */ .compare-section { background: var(--pl-alt); } .table-wrap { overflow-x: auto; border: 1px solid var(--pl-line); border-radius: var(--radius); background: var(--pl-surface); } table.compare { width: 100%; border-collapse: collapse; min-width: 840px; } .compare th, .compare td { padding: 12px 16px; border-bottom: 1px solid var(--pl-line-soft); vertical-align: top; } .compare thead th { /* AUDIT 2026-09-07 BW: sticky removed — inside the overflow-x:auto wrapper the header stuck to the wrapper, not the viewport, and its top offset pushed it down over the first data row. */ background: var(--pl-surface); font-family: var(--font-head); font-size: 1.05rem; font-weight: 700; color: var(--pl-ink); text-align: center; border-bottom: 2px solid var(--pl-line); } .compare thead th.feat { text-align: left; width: 34%; } .compare thead th .p { display: block; font-family: var(--font-body); font-size: 0.82rem; font-weight: 500; color: var(--pl-faint); } .compare td { text-align: center; color: var(--pl-ink); font-size: 0.95rem; } .compare td.feat { text-align: left; font-weight: 600; } .compare td.feat span { display: block; font-weight: 400; color: var(--pl-faint); font-size: 0.85rem; } .compare tr.group td { background: var(--pl-alt); text-align: left; font-family: var(--font-head); font-weight: 700; padding: 10px 16px; color: var(--pl-ink); } .compare th.hi, .compare td.hi { background: var(--pl-hi); } .compare .yes { display: inline-block; width: 18px; height: 18px; position: relative; } .compare .yes::before { content: ''; position: absolute; left: 3px; top: 3px; width: 11px; height: 6px; border-left: 2.5px solid var(--pl-check); border-bottom: 2.5px solid var(--pl-check); transform: rotate(-45deg); } .compare .no { color: var(--pl-faint); opacity: 0.6; } /* ── Add-ons ────────────────────────────────────────────── */ .addons-section { background: var(--pl-bg); } .addons { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } @media (max-width: 860px) { .addons { grid-template-columns: 1fr; } } .addon-list { background: var(--pl-surface); border: 1px solid var(--pl-line); border-radius: var(--radius); overflow: hidden; } .addon-list h3 { font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; color: var(--pl-ink); padding: 16px 20px; margin: 0; background: var(--pl-alt); border-bottom: 1px solid var(--pl-line); } .addon-list dl { margin: 0; } .addon-list .row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; padding: 14px 20px; border-bottom: 1px solid var(--pl-line-soft); } .addon-list .row:last-child { border-bottom: 0; } .addon-list dt { font-weight: 600; color: var(--pl-ink); } .addon-list dt span { display: block; font-weight: 400; color: var(--pl-faint); font-size: 0.88rem; line-height: 1.5; } .addon-list dd { margin: 0; font-family: var(--font-head); font-weight: 700; color: var(--pl-ink); white-space: nowrap; text-align: right; } .addon-list dd span { display: block; font-family: var(--font-body); font-weight: 400; color: var(--pl-faint); font-size: 0.82rem; } /* ── Onboarding tiles ───────────────────────────────────── */ .onboarding-section { background: var(--pl-alt); } .onb { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media (max-width: 900px) { .onb { grid-template-columns: 1fr 1fr; } } /* AUDIT 2026-09-07 BW: single column on phones; min-width:0 stops grid children from forcing the row wider than the container (seen on iPhone 17 Pro Max). */ @media (max-width: 600px) { .onb { grid-template-columns: 1fr; } } .onb > div, .plans-grid > *, .steps > div, .feat-grid > *, .addons > * { min-width: 0; } .onb > div { background: var(--pl-surface); border: 1px solid var(--pl-line); border-radius: var(--radius); padding: 20px; } .onb h4 { font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pl-accent-ink); margin-bottom: 6px; } .onb .big { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: var(--pl-ink); } .onb p { color: var(--pl-muted); font-size: 0.9rem; line-height: 1.55; margin-top: 4px; } /* ── FAQ ────────────────────────────────────────────────── */ .faq-section { background: var(--pl-bg); } .faq { max-width: 820px; } .faq details { border-bottom: 1px solid var(--pl-line); padding: 4px 0; } .faq summary { cursor: pointer; list-style: none; position: relative; font-family: var(--font-body); font-weight: 600; font-size: 1.06rem; color: var(--pl-ink); padding: 16px 40px 16px 0; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; position: absolute; right: 6px; top: 10px; font-size: 1.6rem; font-weight: 300; color: var(--pl-accent-ink); } .faq details[open] summary::after { content: '\2013'; } .faq details p { color: var(--pl-muted); line-height: 1.75; max-width: 70ch; padding-bottom: 16px; } .legal-note { color: var(--pl-faint); font-size: 0.88rem; margin-top: 24px; max-width: 70ch; } .legal-note a { color: var(--pl-accent-ink); text-decoration: underline; } /* ── Features page ──────────────────────────────────────── */ .feat-section { background: var(--pl-bg); } .feat-section.alt { background: var(--pl-alt); } .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 1024px) { .feat-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .feat-grid { grid-template-columns: 1fr; } } .feat { background: var(--pl-surface); border: 1px solid var(--pl-line); border-radius: var(--radius); padding: 28px 26px; } .feat .ico { width: 42px; height: 42px; border-radius: 9px; background: rgba(245,166,35,0.12); display: grid; place-items: center; margin-bottom: 16px; } .feat .ico svg { width: 22px; height: 22px; stroke: var(--pl-accent-ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .feat h3 { font-family: var(--font-head); font-size: 1.18rem; font-weight: 700; color: var(--pl-ink); margin-bottom: 10px; } .feat ul { list-style: disc; padding-left: 18px; } .feat li { color: var(--pl-muted); font-size: 0.94rem; line-height: 1.55; margin: 5px 0; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .split.rev .art { order: -1; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split.rev .art { order: 0; } } .split .section-lead { margin-bottom: 20px; } .split ul { list-style: disc; padding-left: 20px; } .split li { color: var(--pl-muted); line-height: 1.6; margin: 7px 0; } .art-slot { aspect-ratio: 4 / 3; border: 2px dashed var(--pl-line); border-radius: var(--radius); background: var(--pl-alt); display: grid; place-items: center; text-align: center; color: var(--pl-faint); padding: 24px; font-size: 0.95rem; line-height: 1.6; } .art-slot strong { display: block; font-family: var(--font-head); color: var(--pl-ink); font-size: 1.1rem; } .art img { width: 100%; height: auto; border-radius: var(--radius); display: block; } .steps { counter-reset: s; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } @media (max-width: 1024px) { .steps { grid-template-columns: 1fr 1fr; } } .steps div { background: var(--pl-surface); border: 1px solid var(--pl-line); border-radius: var(--radius); padding: 20px; } .steps div::before { counter-increment: s; content: counter(s); display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pl-primary); color: var(--white, #fff); font-family: var(--font-head); font-weight: 700; margin-bottom: 12px; } [data-theme="dark"] .steps div::before { color: var(--navy-900, #0d1b2a); } .steps h4 { font-family: var(--font-body); font-weight: 700; font-size: 1rem; color: var(--pl-ink); margin-bottom: 4px; } .steps p { color: var(--pl-muted); font-size: 0.92rem; line-height: 1.55; } .callout { border-left: 4px solid var(--pl-accent); background: var(--pl-surface); border-radius: 0 var(--radius) var(--radius) 0; padding: 18px 22px; margin-top: 28px; max-width: 860px; color: var(--pl-muted); line-height: 1.65; font-size: 0.96rem; } .callout strong { color: var(--pl-ink); } /* ── Shared ─────────────────────────────────────────────── */ .plans-section .section-lead, .compare-section .section-lead, .addons-section .section-lead, .onboarding-section .section-lead, .feat-section .section-lead { margin-bottom: 40px; } .section-h2 + .section-lead { margin-top: -4px; } .cta-section .cta-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .nav-links a.current { color: var(--pl-ink); } .nav-links a.current::after { transform: scaleX(1); }