/* Shared styles for the tutoring landing pages (matches the homepage design system) */
:root{
--navy:#0B1220; --navy-2:#111827; --line-dark:rgba(255,255,255,0.11);
--gold:#B8923F; --gold-bright:#D9B168; --white:#FFFFFF; --soft-grey:#F5F6F8;
--ink:#10151F; --muted:#667085; --line:#E7E9EE;
--max:1080px; --pad:clamp(20px,5vw,56px); --section-pad:clamp(56px,8vw,104px); --radius:14px;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{ margin:0; background:var(--white); color:var(--ink); font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-size:16.5px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
h1,h2,h3{ font-family:'Plus Jakarta Sans','Inter',-apple-system,sans-serif; font-weight:700; margin:0; letter-spacing:-0.02em; line-height:1.2; }
a{ color:inherit; }
p{ margin:0 0 16px; }
.container{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); }
.narrow{ max-width:720px; }
.mono{ font-family:'IBM Plex Mono',ui-monospace,monospace; }
.eyebrow{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; }
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.section{ padding:var(--section-pad) 0; }
.on-grey{ background:var(--soft-grey); }
.on-dark{ background:var(--navy); color:rgba(255,255,255,.88); }
.on-dark h2,.on-dark h3{ color:#fff; }
.on-dark .eyebrow{ color:var(--gold-bright); }
h2{ font-size:clamp(24px,3.2vw,34px); margin-bottom:18px; }
h3{ font-size:19px; margin-bottom:8px; }
.lead{ font-size:18px; color:var(--muted); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

/* Nav */
.nav{ position:sticky; top:0; z-index:50; background:rgba(11,18,32,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line-dark); }
.nav .container{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px; }
.brand{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:16px; color:#fff; text-decoration:none; white-space:nowrap; }
.brand .dot{ color:var(--gold-bright); }
.nav-links{ display:flex; gap:2px; list-style:none; margin:0; padding:0; }
.nav-links a{ font-size:14px; font-weight:500; color:rgba(255,255,255,.7); padding:8px 11px; border-radius:8px; text-decoration:none; }
.nav-links a:hover{ color:#fff; background:rgba(255,255,255,.06); }
.nav-cta{ font-size:13.5px; font-weight:600; color:var(--navy); background:var(--gold-bright); padding:9px 18px; border-radius:10px; text-decoration:none; white-space:nowrap; }
@media (max-width:860px){ .nav-links{ display:none; } }

/* Hero */
.hero{ background:var(--navy); color:#fff; padding:clamp(48px,8vw,96px) 0 clamp(40px,6vw,72px); position:relative; overflow:hidden; }
.hero::before{ content:""; position:absolute; width:620px; height:620px; right:-180px; top:-260px; border-radius:50%; background:radial-gradient(circle,rgba(217,177,104,.18),transparent 65%); pointer-events:none; }
.crumbs{ font-size:13px; color:rgba(255,255,255,.5); margin-bottom:22px; position:relative; }
.crumbs a{ color:rgba(255,255,255,.7); text-decoration:none; }
.crumbs a:hover{ color:#fff; }
.hero .eyebrow{ color:var(--gold-bright); position:relative; }
.hero h1{ font-size:clamp(32px,5.4vw,54px); line-height:1.1; max-width:820px; position:relative; }
.hero .lede{ font-size:clamp(17px,2vw,19px); color:rgba(255,255,255,.68); max-width:640px; margin:22px 0 30px; position:relative; }
.actions{ display:flex; flex-wrap:wrap; gap:12px; position:relative; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:600; font-size:15px; padding:15px 26px; border-radius:12px; border:1px solid transparent; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; }
.btn svg{ width:18px; height:18px; flex-shrink:0; }
.btn-gold{ background:var(--gold-bright); color:var(--navy); }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(217,177,104,.3); }
.btn-outline-light{ border-color:rgba(255,255,255,.28); color:#fff; }
.btn-outline-light:hover{ border-color:#fff; }
.trust{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:40px; padding-top:24px; border-top:1px solid var(--line-dark); font-size:14px; color:rgba(255,255,255,.6); position:relative; }
.trust strong{ color:#fff; font-weight:600; }

/* Cards & grids */
.grid{ display:grid; gap:18px; }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; }
.card p{ color:var(--muted); font-size:15.5px; margin:0; }
.card .code{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.06em; color:var(--gold); display:block; margin-bottom:10px; }
.card ul{ margin:12px 0 0; padding-left:18px; color:var(--muted); font-size:15px; }
.card li{ margin-bottom:4px; }

/* Steps */
.steps{ list-style:none; padding:0; margin:28px 0 0; counter-reset:s; display:grid; gap:14px; }
.steps li{ counter-increment:s; display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:start; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; }
.steps li::before{ content:counter(s); width:44px; height:44px; border-radius:50%; background:var(--navy); color:var(--gold-bright); font:600 16px 'IBM Plex Mono',monospace; display:flex; align-items:center; justify-content:center; }
.steps h3{ font-size:17px; margin:0 0 4px; }
.steps p{ margin:0; color:var(--muted); font-size:15.5px; }

/* Stats */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:14px; margin:28px 0 8px; }
.stat{ border:1px solid var(--line-dark); border-radius:var(--radius); padding:22px; }
.stat .n{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:40px; color:#fff; line-height:1; }
.stat .n span{ color:var(--gold-bright); }
.stat .l{ font-size:14px; color:rgba(255,255,255,.6); margin-top:10px; }
.callout{ border-left:3px solid var(--gold-bright); padding:4px 0 4px 18px; margin:26px 0 0; color:rgba(255,255,255,.85); }

/* Quotes */
.quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:16px; margin-top:28px; }
.quote{ margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.quote p{ font-size:16px; color:var(--ink); margin:0 0 14px; }
.quote cite{ font-style:normal; font-size:14px; color:var(--muted); }
.quote cite::before{ content:"— "; }

/* Pills */
.pills{ display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; padding:0; list-style:none; }
.pills li{ font-size:14px; padding:7px 14px; border-radius:999px; background:#fff; border:1px solid var(--line); }

/* Table */
.tz{ width:100%; border-collapse:collapse; margin-top:24px; font-size:15px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.tz th,.tz td{ text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); }
.tz th{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:500; background:var(--soft-grey); }
.tz tr:last-child td{ border-bottom:none; }
.table-wrap{ overflow-x:auto; }

/* Resource links */
.res{ display:block; text-decoration:none; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; transition:transform .2s ease, box-shadow .2s ease; }
.res:hover{ transform:translateY(-3px); box-shadow:0 16px 32px rgba(16,21,31,.08); }
.res h3{ font-size:17px; }
.res p{ margin:0; color:var(--muted); font-size:15px; }
.res .go{ display:inline-block; margin-top:12px; font-weight:600; font-size:14px; color:var(--gold); }

/* FAQ */
.faq{ margin-top:24px; display:grid; gap:10px; }
.faq details{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:0 22px; }
.faq summary{ cursor:pointer; list-style:none; font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:16.5px; padding:18px 30px 18px 0; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:0; top:16px; font:400 22px 'IBM Plex Mono',monospace; color:var(--gold); transition:transform .25s ease; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ color:var(--muted); font-size:15.5px; padding-bottom:6px; }

/* Final CTA */
.final{ text-align:center; }
.final h2{ max-width:640px; margin:0 auto 14px; }
.final p{ color:rgba(255,255,255,.65); max-width:560px; margin:0 auto 28px; }
.final .actions{ justify-content:center; }

/* Footer */
footer{ background:var(--navy-2); color:rgba(255,255,255,.6); padding:44px 0 96px; font-size:14px; }
footer .cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:28px; }
footer h3{ font-size:13px; font-family:'IBM Plex Mono',monospace; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:12px; }
footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
footer a{ color:rgba(255,255,255,.75); text-decoration:none; }
footer a:hover{ color:#fff; }
footer .copy{ margin-top:32px; padding-top:20px; border-top:1px solid var(--line-dark); font-size:13px; }

/* Sticky mobile CTA */
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:60; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:rgba(11,18,32,.95); border-top:1px solid var(--line-dark); display:none; }
.sticky-cta a{ display:flex; align-items:center; justify-content:center; gap:10px; background:var(--gold-bright); color:var(--navy); font-weight:600; padding:14px; border-radius:12px; text-decoration:none; }
.sticky-cta svg{ width:18px; height:18px; }
@media (max-width:700px){ .sticky-cta{ display:block; } .hero .actions .btn{ width:100%; } }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; } }
@media (max-width:600px){ .tz th,.tz td{ padding:10px 10px; font-size:14px; } }
.hero-offer{ position:relative; margin:18px 0 0; font-size:14.5px; color:rgba(255,255,255,.62); max-width:560px; display:flex; gap:10px; align-items:baseline; }
.hero-offer::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gold-bright); flex-shrink:0; transform:translateY(-2px); }