:root{--ink:#10151d;--muted:#68717e;--line:#e5e9ef;--paper:#fff;--soft:#f6f8fb;--navy:#0d1117;--blue:#4e67ff;--violet:#7657f7;--green:#22b58b;--orange:#f39a45;--shadow:0 24px 70px rgba(15,23,42,.13)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}a{color:inherit;text-decoration:none}.container{width:min(1160px,calc(100% - 48px));margin:0 auto}.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(229,233,239,.8)}.nav-wrap{height:78px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:21px;letter-spacing:-.04em}.brand-mark,.mini-logo{display:grid;place-items:center;width:31px;height:31px;border-radius:10px;color:#fff;background:linear-gradient(145deg,#70e3bd,#4d68ff);font-weight:900}.site-nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:650;color:#5c6673}.site-nav a:not(.nav-cta):hover,.text-link:hover{color:var(--blue)}.nav-cta{padding:11px 17px;border-radius:10px;color:#fff;background:var(--navy);box-shadow:0 8px 18px rgba(13,17,23,.14)}.menu-toggle{display:none;border:0;background:transparent;font:inherit;font-weight:700}.section-pad{padding:112px 0}.hero{padding:88px 0 118px;background:radial-gradient(circle at 87% 15%,#ecf2ff 0,rgba(236,242,255,0) 32%),linear-gradient(180deg,#fff 0,#f8fbff 100%);overflow:hidden}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.eyebrow{margin:0 0 18px;color:var(--blue);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.eyebrow-dot{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(34,181,139,.12)}h1,h2,h3,p{margin-top:0}h1{max-width:640px;margin-bottom:24px;font-size:clamp(46px,6vw,78px);line-height:1.02;letter-spacing:-.075em}h2{margin-bottom:18px;font-size:clamp(34px,4vw,52px);line-height:1.08;letter-spacing:-.06em}h3{font-size:18px;line-height:1.2;letter-spacing:-.025em}.hero-text{max-width:530px;margin-bottom:32px;color:var(--muted);font-size:19px;line-height:1.65}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;gap:14px;padding:15px 20px;border-radius:12px;font-weight:750;font-size:15px;transition:transform .2s,box-shadow .2s}.button:hover{transform:translateY(-2px)}.button-primary{color:#fff;background:var(--blue);box-shadow:0 12px 24px rgba(78,103,255,.25)}.button-secondary{border:1px solid var(--line);background:#fff}.button-light{color:var(--navy);background:#fff}.microcopy{margin:17px 0 0;color:#8b95a3;font-size:12px}.hero-visual{position:relative;min-height:535px;display:grid;place-items:center}.glow{position:absolute;border-radius:50%;filter:blur(2px)}.glow-one{width:430px;height:430px;background:rgba(122,91,247,.13)}.glow-two{width:260px;height:260px;background:rgba(73,198,164,.15);right:0;bottom:30px}.app-window{position:relative;width:min(100%,535px);overflow:hidden;border:1px solid rgba(255,255,255,.75);border-radius:18px;background:#fff;box-shadow:var(--shadow);transform:rotate(2deg)}.window-top{height:46px;display:flex;align-items:center;gap:6px;padding:0 17px;border-bottom:1px solid #edf0f4;background:#fbfcfe;color:#98a0ab;font-size:12px}.window-top>span{width:8px;height:8px;border-radius:50%;background:#dce2e9}.window-top b{margin-left:13px;color:#6b7480;font-size:11px}.window-top i{margin-left:auto;font-style:normal}.window-body{display:grid;grid-template-columns:48px 1fr;min-height:375px}aside{display:flex;align-items:center;flex-direction:column;gap:17px;padding:17px 0;background:#111823}.mini-logo{width:25px;height:25px;border-radius:7px;font-size:13px}.side-line{width:20px;height:7px;border-radius:5px;background:#45505d}.side-line.active{height:30px;background:linear-gradient(180deg,#6d8bff,#68d6b3)}.side-line.short{width:13px}.side-spacer{height:63px}.invoice-preview{padding:31px 34px 22px;color:#343d49}.preview-head,.preview-parties,.preview-table>div,.preview-total,.preview-footer{display:flex;justify-content:space-between;align-items:center}.preview-head small,.preview-parties small{display:block;color:#8e98a5;font-size:9px;letter-spacing:.13em}.preview-head strong{display:block;margin-top:2px;font-size:15px}.preview-head em{padding:5px 9px;border-radius:20px;color:#b46b1c;background:#fff4e6;font-size:9px;font-style:normal;font-weight:750}.preview-rule{height:1px;margin:25px 0 23px;background:#e9edf2}.preview-parties{align-items:flex-start;gap:18px}.preview-parties>div{width:50%}.preview-parties b,.preview-parties span{display:block}.preview-parties b{margin:5px 0;font-size:12px}.preview-parties span{color:#8c96a1;font-size:9px}.preview-table{margin-top:28px;border-top:1px solid #e9edf2;font-size:11px}.preview-table>div{padding:11px 0;border-bottom:1px solid #edf0f4}.preview-table>div:first-child{color:#9ba4af;font-size:9px;text-transform:uppercase}.preview-table strong{font-weight:750}.preview-total{padding:18px 0;font-size:12px}.preview-total strong{font-size:21px;letter-spacing:-.04em}.preview-footer{padding-top:13px;border-top:1px solid #edf0f4;color:#9ba4af;font-size:9px}.status-dot{color:#2daf8a}.float-note{position:absolute;display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid rgba(255,255,255,.8);border-radius:12px;background:rgba(255,255,255,.93);box-shadow:0 16px 36px rgba(36,50,75,.14);font-size:11px}.float-note b,.float-note small{display:block}.float-note small{margin-top:2px;color:#929ba6;font-size:9px}.note-icon{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;color:#fff;background:var(--green);font-weight:800}.note-icon.purple{background:var(--violet)}.note-one{top:70px;right:-8px}.note-two{bottom:65px;left:-18px}.audience-strip{padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}.audience-inner,.audience-inner>div{display:flex;align-items:center;justify-content:space-between;gap:25px}.audience-inner>span{color:#8a94a0;font-size:13px}.audience-inner b{font-size:13px}.section-light{background:var(--soft)}.section-intro{max-width:620px;margin-bottom:54px}.section-intro>p:last-child,.section-lead{color:var(--muted);font-size:17px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.feature-card{padding:28px;border:1px solid var(--line);border-radius:16px;background:#fff;transition:transform .2s,box-shadow .2s}.feature-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(18,28,44,.07)}.feature-card p{margin-bottom:0;color:var(--muted);font-size:14px}.feature-icon{display:grid;place-items:center;width:39px;height:39px;margin-bottom:22px;border-radius:11px;font-weight:850}.blue{color:#4b65ee;background:#eaf0ff}.green{color:#209773;background:#e4f8f0}.orange{color:#c67422;background:#fff0dc}.purple{color:#7454dc;background:#eee9ff}.pink{color:#cf5b91;background:#ffedf5}.teal{color:#168d9e;background:#e3f8fb}.gst-section{background:#101720;color:#fff}.gst-section .eyebrow{color:#7fe1bd}.gst-section .section-lead{color:#adb7c4}.gst-grid{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:90px}.tax-cards{display:grid;grid-template-columns:1fr 1fr;gap:13px}.tax-card{padding:22px;border:1px solid #2a3542;border-radius:14px;background:#151e29}.tax-card strong,.tax-card span,.tax-card b{display:block}.tax-card strong{font-size:15px}.tax-card span{min-height:42px;margin-top:5px;color:#8f9aa8;font-size:12px}.tax-card b{color:#80dfbd;font-size:22px;letter-spacing:-.04em}.text-link{display:inline-flex;gap:11px;color:#80dfbd;font-size:14px;font-weight:800}.disclaimer{display:flex;gap:10px;align-items:flex-start;margin-top:54px;padding-top:19px;border-top:1px solid #2a3542;color:#9ea9b6;font-size:12px}.disclaimer p{margin:0}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.step{padding:25px;border-top:2px solid #cfd6df}.step>span{color:var(--blue);font-size:13px;font-weight:850}.step h3{margin:24px 0 10px}.step p{margin:0;color:var(--muted);font-size:14px}.product-section{background:#fff}.product-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:90px}.product-card{padding:28px;border:1px solid #dfe5ec;border-radius:18px;background:linear-gradient(150deg,#f8fbff,#fff);box-shadow:var(--shadow)}.product-card-top,.metric-row,.recent span{display:flex;align-items:center;justify-content:space-between}.pill{color:var(--blue);font-size:10px;font-weight:850;letter-spacing:.1em}.product-status{color:#5b6674;font-size:11px}.product-status i,.recent i{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:var(--green)}.metric-row{align-items:flex-start;margin:35px 0 22px}.metric-row>div{width:50%}.metric-row small{display:block;color:#8e98a4;font-size:11px}.metric-row strong{display:block;margin:6px 0;color:#1a2533;font-size:29px;letter-spacing:-.06em}.metric-row span{color:#8c97a3;font-size:10px}.metric-row .up{color:#1fa078}.bars{height:100px;display:flex;align-items:end;gap:12px;padding:0 12px;border-bottom:1px solid #dce3eb}.bars span{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#8d9cff,#c8d0ff)}.recent{margin-top:22px}.recent>b{display:block;margin-bottom:11px;color:#66717f;font-size:11px}.recent span{padding:9px 0;border-top:1px solid #edf0f4;color:#5c6774;font-size:11px}.recent em{color:#1d2734;font-style:normal;font-weight:750}.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px}.faq-list details{padding:18px 0;border-top:1px solid #dfe4eb}.faq-list details:last-child{border-bottom:1px solid #dfe4eb}.faq-list summary{cursor:pointer;list-style:none;font-weight:750}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:'+';float:right;color:var(--blue);font-size:20px;font-weight:500}.faq-list details[open] summary:after{content:'−'}.faq-list p{max-width:650px;margin:12px 28px 0 0;color:var(--muted);font-size:14px}.final-cta{padding:100px 0;background:linear-gradient(135deg,#536cff,#7657f7);color:#fff;text-align:center}.final-cta-inner{max-width:690px}.final-cta .eyebrow{color:#bff4e2}.final-cta p:not(.eyebrow){color:#e2e6ff}.final-cta h2{margin-bottom:15px}.site-footer{padding:58px 0 24px;background:#0d1117;color:#fff}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}.footer-brand{color:#fff}.footer-grid>div>p{max-width:280px;margin-top:17px;color:#8d98a7;font-size:13px}.footer-grid b{display:block;margin-bottom:15px;color:#fff;font-size:12px}.footer-grid a:not(.brand){display:block;margin:9px 0;color:#8d98a7;font-size:13px}.footer-grid a:not(.brand):hover{color:#fff}.footer-bottom{display:flex;justify-content:space-between;margin-top:50px;padding-top:22px;border-top:1px solid #27313d;color:#778392;font-size:11px}.heart{color:#ef7da9}@media(max-width:900px){.site-nav{gap:16px}.hero-grid,.gst-grid,.product-grid,.faq-wrap{grid-template-columns:1fr;gap:55px}.hero-visual{min-height:510px}.steps{grid-template-columns:1fr 1fr}.faq-wrap{gap:30px}}@media(max-width:700px){.container{width:min(100% - 32px,1160px)}.section-pad{padding:76px 0}.nav-wrap{height:68px}.menu-toggle{display:block;padding:10px 0;color:var(--ink)}.site-nav{position:absolute;top:68px;right:16px;left:16px;display:none;align-items:stretch;flex-direction:column;gap:0;padding:10px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow)}.site-nav.open{display:flex}.site-nav a{padding:12px}.nav-cta{text-align:center}.hero{padding:65px 0 78px}.hero-grid{gap:30px}h1{font-size:48px}.hero-text{font-size:17px}.hero-visual{min-height:430px}.app-window{transform:none}.invoice-preview{padding:23px 18px 18px}.note-one{top:12px;right:0}.note-two{bottom:14px;left:0}.audience-inner{align-items:flex-start;flex-direction:column}.audience-inner>div{width:100%;flex-wrap:wrap;gap:11px 18px}.feature-grid,.tax-cards{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.step{padding:20px}.footer-grid{grid-template-columns:1fr 1fr;gap:30px}.footer-grid>div:first-child{grid-column:1/-1}.footer-bottom{align-items:flex-start;flex-direction:column;gap:8px}}@media(max-width:430px){.hero-actions,.button{width:100%}.button{justify-content:center}.window-body{grid-template-columns:38px 1fr}.preview-parties{gap:8px}.preview-parties b{font-size:10px}.preview-parties span{font-size:8px}.preview-table{font-size:9px}.preview-total strong{font-size:17px}.float-note{padding:8px 10px}.float-note b{font-size:10px}}
/* Public product roadmap and editorial content. */
.brand-logo,.mini-logo{display:block;flex:0 0 auto;width:31px;height:31px;border-radius:10px;object-fit:contain;background:transparent}.mini-logo{width:25px;height:25px;border-radius:7px}.parent-company{margin-top:8px!important;color:#aeb7c3!important;font-size:12px!important}.nav-cta{border-radius:12px;background:var(--blue);}
.platform-section{background:#f4f7ff}.platform-grid{display:grid;grid-template-columns:.95fr 1.05fr;align-items:center;gap:90px}.platform-section h2{max-width:560px}.platform-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}.platform-card{display:flex;align-items:center;gap:15px;padding:22px;border:1px solid #dfe5f1;border-radius:16px;background:#fff;box-shadow:0 12px 30px rgba(40,55,95,.06)}.platform-symbol{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;color:#fff;background:linear-gradient(145deg,#536cff,#7b5cf5);font-size:23px;font-weight:750}.platform-card b,.platform-card small{display:block}.platform-card b{font-size:15px}.platform-card small{margin-top:3px;color:#8b95a3;font-size:12px}.blog-teaser{padding-top:100px}.blog-teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.blog-teaser-card{display:flex;flex-direction:column;min-height:255px;padding:25px;border:1px solid var(--line);border-radius:16px;background:#fff;transition:transform .2s,box-shadow .2s}.blog-teaser-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(18,28,44,.07)}.blog-label{color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.blog-teaser-card h3{margin:15px 0 11px;font-size:20px;line-height:1.25}.blog-teaser-card p{margin-bottom:20px;color:var(--muted);font-size:14px}.read-more{margin-top:auto;color:var(--blue);font-size:13px;font-weight:800}.templates-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:45px}.templates-heading .text-link{flex:none;margin-bottom:4px}
@media(max-width:900px){.platform-grid{grid-template-columns:1fr;gap:35px}.blog-teaser-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.templates-heading{align-items:flex-start;flex-direction:column;gap:0}.blog-teaser-grid{grid-template-columns:1fr}.blog-teaser{padding-top:76px}}
.platform-icon{display:block;width:25px;height:25px;object-fit:contain}

/* BillBookly design tokens: keep every page on one visual system. */
:root {
  --brand: #015fc6;
  --brand-rgb: 1, 95, 198;
  --brand-hover: #004f9f;
  --brand-soft: #eaf2fb;
  --brand-line: #a9c9ed;
  --brand-surface: #edf5fd;
  --brand-on-dark: #8cc7ff;
  --ink: #121212;
  --navy: #101010;
  --text-primary: #121212;
  --text-secondary: #5f6b7a;
  --text-muted: #8b95a3;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #b2bdca;
  --line: #e2e8f0;
  --paper: #ffffff;
  --soft: #f6f7f9;
  --surface-tint: #f8fbff;
  --surface-dark: #101720;
  --surface-dark-raised: #1c2b3a;
  --success: #19886b;
  --success-soft: #e5f7ef;
  --success-on-dark: #80dfbd;
  --accent-purple: #7657f7;
  --shadow: 0 24px 70px rgba(18, 28, 44, .13);
  --blue: var(--brand);
  --green: var(--success);
  --violet: var(--accent-purple);

  /* Shared typography tokens. Keep all pages on the same type system. */
  --font-family-base: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-body: 16px;
  --font-size-nav: 14px;
  --font-size-button: 15px;
  --font-size-link: 16px;
  --font-size-eyebrow: 12px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heading: 800;
  --line-height-body: 1.55;
  --line-height-heading: 1.08;
  --tracking-display: -.04em;
  --tracking-heading: -.02em;
  --type-display: clamp(46px, 6vw, 78px);
  --type-hero: clamp(44px, 4.5vw, 60px);
  --type-section: clamp(34px, 4vw, 52px);
}

body {
  color: var(--text-primary);
  background: var(--paper);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}
h1, h2, h3 {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-heading);
}
h1 {
  font-size: var(--type-display);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
}
.hero h1 { font-size: var(--type-hero); }
h2 {
  font-size: var(--type-section);
  line-height: var(--line-height-heading);
  letter-spacing: var(--tracking-heading);
}
h3 {
  letter-spacing: var(--tracking-heading);
}
.site-nav {
  color: var(--text-secondary);
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-medium);
}
.auth-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--text-secondary);
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-medium);
}
.auth-actions a:not(.nav-cta):hover { color: var(--brand); }
.menu-toggle { font-weight: 500; }
.nav-cta, .button-primary { background: var(--brand); }
.nav-cta:hover, .button-primary:hover { background: var(--brand-hover); }
.button {
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-bold);
}
.text-link {
  font-size: var(--font-size-link);
  font-weight: var(--font-weight-medium);
}
.eyebrow {
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-heading);
}
.button-primary { box-shadow: 0 12px 24px rgba(var(--brand-rgb), .22); }
.text-link, .blog-label, .blog-read, .article-nav { color: var(--brand); }
.section-light, .surface-tint { background: var(--surface-tint); }
.platform-section { background: var(--brand-soft); }
.platform-symbol { background: linear-gradient(145deg, var(--brand), var(--brand-hover)); }
.final-cta { background: var(--brand); }
.final-cta .eyebrow { color: var(--brand-on-dark); }
.final-cta p:not(.eyebrow) { color: var(--brand-soft); }
.final-cta-mockup {
  width: min(calc(100vw - 48px), 1040px);
  aspect-ratio: 3008 / 1656;
  margin: 34px auto 30px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 18px;
  background: #030d17;
  box-shadow: 0 24px 60px rgba(0, 34, 91, .28);
}
.final-cta-mockup img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-early-access {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 530px;
  margin: 20px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(25, 136, 107, .18);
  border-radius: 12px;
  color: var(--success);
  background: var(--success-soft);
  font-size: var(--font-size-body);
  line-height: 1.45;
  font-weight: var(--font-weight-medium);
}

.hero-early-access strong {
  font-weight: var(--font-weight-bold);
}

.hero-early-access .material-symbols-rounded {
  flex: 0 0 auto;
  color: var(--success);
  font-size: 20px;
}

@media (max-width: 430px) {
  .hero-early-access {
    align-items: flex-start;
    font-size: 14px;
  }
}
.site-header { transition: box-shadow .25s ease, background-color .25s ease; }
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(18, 28, 44, .08); background: rgba(255, 255, 255, .94); }
.button,.nav-cta,.text-link,.feature-card,.template-showcase,.tax-card,.platform-card,.blog-card { transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease; }
.button:focus-visible,.nav-cta:focus-visible,.site-nav a:focus-visible,.auth-actions a:focus-visible,.text-link:focus-visible { outline: 3px solid rgba(var(--brand-rgb), .28); outline-offset: 4px; }
.reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1); transition-delay: var(--reveal-delay, 0ms); }
  .reveal.is-visible { opacity: 1; transform: none; }
  .hero-copy { animation: hero-copy-in .75s cubic-bezier(.22, .61, .36, 1) both; }
  .hero-visual { animation: hero-visual-in .85s .08s cubic-bezier(.22, .61, .36, 1) both; }
  .button:hover,.nav-cta:hover { transform: translateY(-2px); }
  @keyframes hero-copy-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes hero-visual-in { from { opacity: 0; transform: translateY(22px) scale(.98); } to { opacity: 1; transform: none; } }
}

/* Keep the mobile menu icon and label on the same visual baseline. */
@media (max-width: 700px) {
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1;
  }

  .menu-toggle .material-symbols-rounded {
    display: block;
    font-size: 32px;
    line-height: 1;
  }

  .menu-toggle > span:last-child {
    display: block;
    line-height: 1;
  }
}

/* Pricing section: one clear comparison for the Free and Pro plans. */
.pricing-section {
  background: var(--surface-tint);
}

.pricing-intro {
  display: grid;
  grid-template-columns: 1fr .8fr;
  align-items: end;
  gap: 70px;
  margin-bottom: 34px;
}

.pricing-intro h2 {
  max-width: 650px;
  margin-bottom: 0;
}

.pricing-intro .section-lead {
  margin-bottom: 4px;
}

.pricing-toggle {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  flex: none;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
}

.pricing-toggle-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border: 0;
  border-radius: 999px;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-medium);
}

.pricing-toggle-option.is-active {
  color: var(--text-on-dark);
  background: var(--brand);
}

.pricing-toggle-option span {
  color: var(--brand);
  font-size: 12px;
}

.pricing-toggle-option.is-active span {
  color: var(--text-on-dark);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 14px 34px rgba(18, 28, 44, .05);
}

.pricing-card-pro {
  border: 2px solid var(--brand);
  padding: 31px;
  box-shadow: 0 18px 44px rgba(var(--brand-rgb), .12);
}

.pricing-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.pricing-kicker {
  margin-bottom: 9px;
  color: var(--text-muted);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-heading);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pricing-card h3 {
  margin: 0;
  padding: 8px 0 18px;
  font-size: 34px;
  line-height: 1;
  letter-spacing: var(--tracking-heading);
}

.pricing-badge {
  flex: none;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--brand);
  background: var(--brand-soft);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
}

.pricing-badge-muted {
  color: var(--text-secondary);
  background: var(--soft);
}

.pricing-description {
  min-height: 48px;
  margin: 22px 0 24px;
  color: var(--text-secondary);
  font-size: var(--font-size-body);
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 52px;
}

.pricing-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 19px;
}

.pricing-price strong {
  color: var(--text-primary);
  font-size: 42px;
  line-height: 1;
  letter-spacing: -.04em;
}

.pricing-price span {
  color: var(--text-secondary);
  font-size: 15px;
}

.pricing-early-access {
  margin: 0 0 19px;
  padding: 11px 13px;
  border: 1px solid rgba(25, 136, 107, .18);
  border-radius: 10px;
  color: var(--success);
  background: var(--success-soft);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
}

.pricing-button {
  justify-content: center;
  width: 100%;
}

.pricing-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px 20px;
  margin: 28px 0 0;
  padding: 25px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.pricing-features li {
  position: relative;
  padding-left: 25px;
  color: var(--text-secondary);
  font-size: 14px;
}

.pricing-features li::before {
  position: absolute;
  top: 1px;
  left: 0;
  color: var(--success);
  content: '✓';
  font-weight: var(--font-weight-bold);
}

.pricing-footnote {
  margin: 24px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

.pricing-comparison {
  margin-top: 58px;
}

.pricing-comparison-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 35px;
  margin-bottom: 24px;
}

.pricing-comparison-heading .eyebrow {
  margin-bottom: 10px;
}

.pricing-comparison-heading h3 {
  margin-bottom: 0;
  font-size: 30px;
}

.pricing-comparison-heading > p {
  max-width: 450px;
  margin-bottom: 2px;
  color: var(--text-secondary);
  font-size: 14px;
}

.pricing-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 14px 34px rgba(18, 28, 44, .05);
}

.pricing-table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--text-secondary);
  font-size: 14px;
}

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

.pricing-table th,
.pricing-table td {
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  vertical-align: middle;
}

.pricing-table thead th {
  padding-top: 22px;
  padding-bottom: 22px;
  color: var(--text-primary);
  background: var(--brand-soft);
  font-size: 16px;
}

.pricing-table thead th:first-child,
.pricing-table tbody th {
  text-align: left;
}

.pricing-table thead th:first-child {
  width: 46%;
}

.pricing-table thead th span,
.pricing-table thead th small {
  display: block;
}

.pricing-table thead th span {
  font-size: 18px;
  font-weight: var(--font-weight-heading);
}

.pricing-table thead th small {
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
}

.pricing-table thead th:last-child {
  color: var(--brand);
  background: #e1effd;
}

.pricing-table tbody th {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}

.pricing-table tbody tr:last-child th,
.pricing-table tbody tr:last-child td {
  border-bottom: 0;
}

.pricing-table-group th {
  padding-top: 19px;
  padding-bottom: 10px;
  border-bottom: 0;
  color: var(--brand) !important;
  background: var(--surface-tint);
  font-size: 12px;
  font-weight: var(--font-weight-heading) !important;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pricing-table-group + tr th,
.pricing-table-group + tr td {
  border-top: 1px solid var(--line);
}

.pricing-table-check {
  margin-right: 5px;
  color: var(--success);
  font-weight: var(--font-weight-bold);
}

/* Keep the plan details inside the comparison table, like a single pricing surface. */
.pricing-table thead th {
  padding: 0;
  text-align: left;
  vertical-align: top;
  background: var(--paper);
}

.pricing-table .pricing-table-feature-heading {
  padding: 28px 22px;
  color: var(--text-secondary);
  background: var(--surface-tint);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pricing-table .pricing-table-plan-heading {
  padding: 0;
}

.pricing-table-plan-card {
  display: flex;
  min-height: 365px;
  flex-direction: column;
  padding: 28px 22px 25px;
  background: var(--paper);
}

.pricing-table-plan-card-pro {
  background: var(--brand-soft);
  box-shadow: inset 2px 0 var(--brand);
}

.pricing-table-plan-card .pricing-kicker {
  margin-bottom: 13px;
}

.pricing-table-plan-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pricing-table-plan-title-row h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 32px;
  line-height: 1;
}

.pricing-table-plan-title-row .pricing-badge {
  display: block;
  flex: none;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
}

.pricing-table-plan-description {
  min-height: 44px;
  margin: 21px 0 22px;
  color: var(--text-secondary);
  font-size: 14px;
}

.pricing-table-plan-card .pricing-toggle {
  margin: 0 0 20px;
}

.pricing-table-plan-card .pricing-toggle-option span {
  display: inline;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
}

.pricing-table-plan-card .pricing-price {
  margin-top: auto;
}

.pricing-table-plan-card .pricing-price-note {
  margin-bottom: 14px;
}

.pricing-table-plan-card .pricing-early-access {
  margin-bottom: 15px;
}

.pricing-table-plan-card .pricing-button {
  margin-top: 0;
}

/* Card comparison rows: keep the same feature order and show each plan's value. */
.pricing-card .pricing-features {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 28px;
  padding-top: 14px;
}

.pricing-card .pricing-features li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  padding-left: 0;
  border-bottom: 1px solid var(--line);
}

.pricing-card .pricing-features li:last-child {
  border-bottom: 0;
}

.pricing-card .pricing-features li::before {
  display: none;
}

.pricing-feature-name {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.pricing-feature-value {
  flex: 0 0 auto;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  text-align: right;
}

.pricing-feature-value.is-muted {
  color: var(--text-muted);
  font-weight: var(--font-weight-regular);
}

.pricing-toggle-option:focus-visible,
.pricing-button:focus-visible {
  outline: 3px solid rgba(var(--brand-rgb), .28);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .pricing-intro {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

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

  .pricing-comparison-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .pricing-card,
  .pricing-card-pro {
    padding: 25px;
  }

  .pricing-price-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .pricing-features {
    grid-template-columns: 1fr;
  }
}