/* ═══════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════ */
:root {
  /* Backgrounds — three levels */
  --bg-white:  #FFFFFF;
  --bg-light:  #F6F4F1;
  --bg-mid:    #EEEAE4;
  --bg-mid-2:  #E6E2DB;

  /* Borders */
  --border:    #D8D4CC;
  --border-strong: #C2BDB5;
  --border-card:   #E4E0D8;

  /* Text */
  --text:      #1A1917;
  --text-sec:  #4A4640;
  --text-mute: #7B7670;

  /* Brand / accent */
  --blue:      #3356E8;
  --blue-text: #FFFFFF;
  --blue-sub:  #DBE4FF;
  --blue-sub-text: #00115C;

  /* Interactions */
  --hover: rgba(26,25,23,.06);

  /* Radii */
  --r-md: 12px; --r-xl: 20px; --r-pill: 999px; --r-btn: 9px;

  /* Motion */
  --ease: cubic-bezier(.2,0,0,1);
  --ease-d: cubic-bezier(0,0,0,1);
  --t: 150ms;

  /* Fonts */
  --font-ui:    'Inter', system-ui, sans-serif;
  --font-serif: 'Newsreader', 'Source Serif 4', Georgia, serif;

  /* Compatibility aliases for migrated sections */
  --surface: var(--bg-white);
  --surface-soft: var(--bg-mid);
  --line: var(--border);
  --line-soft: var(--border-card);
  --text-muted: var(--text-mute);
  --accent: var(--blue);
  --bg-soft: var(--blue-sub);
  --bg: var(--bg-white);
  --font-sans: var(--font-ui);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--route-scroll-offset, 96px); }
html, body { background: var(--bg-light); min-height: 100%; }
body { min-height: 100svh; display: flex; flex-direction: column; font-family: var(--font-ui); color: var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }

/* ── LAYOUT ── */
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 40px; }
.sec-header { margin-bottom: 40px; }
.sec-divider { border: none; border-top: 1px solid var(--border); }

/* ── SECTION BACKGROUNDS & PADDING ── */
:is(.roadmap-section, .about-section, .site-footer) { background: var(--bg-white); }
.features-section { background: var(--bg-light); }
.audience-section { background: var(--bg-mid); }
.support-section   { background: var(--bg-light); }
:is(.features-section, .roadmap-section, .audience-section, .about-section) { padding: 80px 0; }
.support-section { padding: 96px 0; }

/* ── TYPOGRAPHY ── */

/* Eyebrow — e.g. "A writing tool for people who think" */
:is(.hero-eyebrow, .support-right-label) {
  font-size: 16px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-mute);
}
.hero-eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px; letter-spacing: .1em; font-weight: 500;
}
.hero-eyebrow::before { content: ''; display: block; width: 20px; height: 1px; background: var(--border-strong); }
.support-right-label { margin-bottom: 16px; display: block; }

/* H1 — hero headline only */
.hero-headline {
  font-family: var(--font-serif);
  font-size: clamp(34px, 4.2vw, 56px); font-weight: 700;
  line-height: 1.06; letter-spacing: -0.03em;
  color: var(--text); margin-bottom: 20px;
}
.hero-headline em { font-style: italic; font-weight: 400; color: var(--text-sec); }

/* H2 — all section headings */
:is(.sec-title, .about-headline, .support-headline) {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.6vw, 30px); font-weight: 600;
  letter-spacing: -.025em; line-height: 1.2;
  color: var(--text); margin-bottom: 20px;
}

/* H3 — card & donor amount titles */
:is(.feat-name, .road-title) {
  font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  color: var(--text); margin-bottom: 6px;
}

/* Body copy */
:is(.hero-sub, .aud-left-body, .support-body, .about-body) {
  font-size: 16px; line-height: 1.78; color: var(--text-sec);
}
.hero-sub { font-size: 16px; margin-bottom: 36px; max-width: 420px; }
.support-body { font-size: 16px; margin-bottom: 32px; }
.aud-left-body { margin-top: 8px; font-size: 16px; line-height: 1.75; }
.about-body { max-width: 560px; }
.about-body p + p { margin-top: 14px; }

/* Small body — card descriptions */
:is(.feat-desc, .road-desc) {
  font-size: 16px; font-weight: 400; line-height: 1.65; color: var(--text-sec);
}
.road-desc { margin-bottom: 16px; }

/* ── BUTTONS — shared rounded-rect base ── */
:is(.btn-cta, .btn-ghost, .hbtn-launch, .hbtn-support, .road-notify) {
  display: inline-flex; align-items: center;
  border-radius: var(--r-btn); font-family: var(--font-ui);
  letter-spacing: -.01em; text-decoration: none; border: none;
  cursor: pointer; position: relative; overflow: hidden; white-space: nowrap;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
/* Hover ripple overlay on tonal/ghost buttons */
:is(.btn-ghost, .hbtn-support, .footer-link)::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--hover); opacity: 0; transition: opacity var(--t) var(--ease);
}
:is(.btn-ghost, .hbtn-support, .footer-link):hover::before { opacity: 1; }

/* Primary — filled blue */
:is(.btn-cta, .road-notify) {
  background: var(--blue); color: var(--blue-text); font-weight: 600;
}
:is(.btn-cta, .road-notify):hover { background: #3356E8; transform: translateY(-2px); }
.btn-cta    { gap: 8px; padding: 0 20px; height: 44px; font-size: 16px; }
.road-notify { gap: 7px; padding: 0 16px; height: 38px; font-size: 16px; }
:is(.btn-cta, .road-notify) svg { width: 14px; height: 14px; flex-shrink: 0; position: relative; }

/* Tonal blue — header launch */
.hbtn-launch {
  background: var(--blue-sub); color: var(--blue-sub-text);
  gap: 6px; padding: 0 16px; height: 34px; font-size: 16px; font-weight: 600;
}
.hbtn-launch:hover { background: var(--blue); color: var(--blue-text); box-shadow: 0 2px 12px rgba(51,86,232,.28); }
:is(.hbtn-launch, .hbtn-support) svg, :is(.hbtn-launch, .hbtn-support) span { position: relative; }
:is(.hbtn-launch, .hbtn-support) svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Tonal grey — support + hero ghost */
:is(.hbtn-support, .btn-ghost) {
  background: var(--bg-mid); color: var(--text-sec); font-weight: 500;
}
:is(.hbtn-support, .btn-ghost):hover { color: var(--text); }
.hbtn-support { gap: 5px; padding: 0 14px; height: 34px; font-size: 16px; }
.btn-ghost    { gap: 6px; padding: 0 20px; height: 44px; font-size: 16px; }
.btn-compact  { height: 38px; padding: 0 16px; font-size: 16px; }
.btn-ghost svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── HEADER ── */
#site-hdr {
  background: var(--bg-white); height: 54px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; position: sticky; top: 0; z-index: 200;
  border-bottom: 1px solid var(--border-card);
}
.hdr-brand { display: flex; align-items: center; gap: 8px; }
.hdr-brand-name { font-size: 16px; font-weight: 600; letter-spacing: -.025em; }
.hdr-brand-sep  { width: 1px; height: 14px; background: var(--border-strong); flex-shrink: 0; }
.hdr-brand-sub  { font-size: 16px; font-weight: 500; color: var(--blue); opacity: .85; letter-spacing: .01em; }
.hdr-actions    { display: flex; align-items: center; gap: 6px; }

/* ── HERO ── */
.hero {
  max-width: 1000px; margin: 0 auto; padding: 80px 40px 72px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.hero-right { min-width: 0; max-width: min(100%, 560px); }
.hero-actions { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }

/* ── APP SCREENSHOT MOCKUP ── */
.app-screenshot {
  border: 1px solid var(--border-card); border-radius: var(--r-xl);
  overflow: hidden; background: var(--bg-light); font-family: var(--font-ui);
  box-shadow: 0 0 0 1px rgba(26,25,23,.04), 0 4px 16px rgba(26,25,23,.08), 0 16px 48px rgba(26,25,23,.10);
  display: flex; flex-direction: column;
}
.ss-hdr {
  background: var(--bg-white); border-bottom: 1px solid var(--border);
  height: 48px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 8px 0 16px;
}
.ss-brand { display: flex; align-items: center; gap: 6px; }
.ss-brand-name { font-size: 16px; font-weight: 600; letter-spacing: -.025em; }
.ss-brand-sep  { width: 1px; height: 12px; background: var(--border-strong); flex-shrink: 0; }
.ss-brand-sub  { font-size: 16px; font-weight: 500; color: var(--blue); opacity: .85; }
.ss-actions { display: flex; align-items: center; gap: 2px; justify-content: flex-end; }
.ss-hbtn {
  height: 26px; padding: 0 7px; border-radius: var(--r-pill);
  font-size: 16px; font-weight: 500; color: var(--text-mute);
  display: flex; align-items: center; gap: 3px;
}
.ss-hbtn svg { width: 11px; height: 11px; }
.ss-hdiv { width: 1px; height: 15px; background: var(--border); margin: 0 2px; }
.ss-cta {
  height: 26px; padding: 0 9px 0 6px; border-radius: 7px;
  font-size: 16px; font-weight: 600; color: var(--blue-sub-text);
  background: var(--blue-sub); display: flex; align-items: center; gap: 4px; margin-left: 3px;
}
.ss-cta svg { width: 10px; height: 10px; }
.ss-body { display: flex; flex-direction: column; flex: 1; background: var(--bg-light); }
.ss-main { display: flex; flex-direction: column; min-height: 420px; position: relative; width: 100%; flex: 1; background: var(--bg-light); }
.ss-toolbar-wrap {
  display: flex; align-items: center; justify-content: center;
  padding: 5px 12px 5px; background: var(--bg-white);
  border-bottom: 1px solid var(--border);
}
.ss-toolbar {
  background: transparent; border: none;
  border-radius: 0; padding: 0;
  display: flex; flex-direction: row; align-items: center; gap: 1px;
  box-shadow: none;
  flex-wrap: nowrap;
}
.ss-tbtn {
  width: 26px; height: 26px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; color: var(--text-mute);
  flex-shrink: 0;
}
.ss-tbtn.act { background: var(--blue-sub); color: var(--blue-sub-text); }
.ss-tbtn svg { width: 11px; height: 11px; }
.ss-tsep { width: 1px; height: 14px; background: var(--border); margin: 0 4px; flex-shrink: 0; }
.ss-editor {
  padding: 28px 32px 20px; font-family: var(--font-ui);
  font-size: 16px; line-height: 1.6; color: var(--text); background: var(--bg-light);
  flex: 1; width: 100%; max-width: 520px; margin: 0 auto;
}
.ss-h1  { font-size: 26px; font-weight: 700; letter-spacing: -.03em; margin-bottom: 16px; line-height: 1.2; }
.ss-h3  { font-size: 16px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text); margin-bottom: 8px; line-height: 1; }
.ss-p   { color: var(--text); margin-bottom: 9px; font-size: 16px; line-height: 1.65; }
.ss-p.dim { color: var(--text); }
.ss-cursor {
  display: inline-block; width: 1.5px; height: 14px;
  background: var(--blue); vertical-align: middle;
  animation: blink 1.1s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.ss-pill-placeholder { gap: 5px; }
.ss-pill-label { display: inline-block; height: 7px; border-radius: var(--r-pill); background: var(--border); width: 28px; flex-shrink: 0; }
.ss-pill-label--sm { width: 18px; }
.ss-pill-label--md { width: 34px; }
.ss-cta .ss-pill-label { background: rgba(0,17,92,.2); width: 36px; }
.ss-ftr {
  height: 32px; background: var(--bg-light); border-top: 1px solid var(--border);
  display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0 14px;
}
.ss-ftr-status { font-size: 16px; color: var(--text-mute); }
.ss-count-pill { display: flex; align-items: center; background: var(--bg-mid); border-radius: var(--r-pill); padding: 3px 10px; gap: 10px; }
.ss-cp-seg { display: flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 500; color: var(--text-mute); }
.ss-cp-seg svg { width: 10px; height: 10px; }

:is(.features-grid, .roadmap-grid) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
:is(.feat-card, .road-card) {
  background: var(--bg-white); border: 1px solid var(--border-card);
  border-radius: var(--r-xl); padding: 24px 22px;
  position: relative; overflow: hidden;
}
:is(.feat-icon, .road-icon) {
  width: 36px; height: 36px; background: var(--blue-sub); border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; color: var(--blue-sub-text);
}
:is(.feat-icon, .road-icon) svg { width: 16px; height: 16px; }
.road-tag {
  display: inline-flex; align-items: center; background: var(--blue-sub);
  border-radius: var(--r-pill); font-size: 16px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--blue-sub-text);
  padding: 3px 10px; margin-bottom: 12px; opacity: .75;
}

/* ── AUDIENCE ── */
.audience-swiss { display: grid; grid-template-columns: 280px 1fr; }
.aud-left {
  padding-right: 48px; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: flex-start;
}
.aud-big-number {
  font-family: var(--font-serif); font-size: 96px; font-weight: 700;
  letter-spacing: -.05em; color: var(--blue); opacity: .12;
  line-height: 1; margin-bottom: 4px; user-select: none;
}
.aud-right { padding-left: 48px; }
.aud-row {
  display: grid; grid-template-columns: 32px 1fr; gap: 20px;
  align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--border);
}
.aud-row:first-child { border-top: 1px solid var(--border); }
.aud-n { font-size: 16px; font-weight: 600; letter-spacing: .1em; color: var(--blue); opacity: .6; font-variant-numeric: tabular-nums; }
.aud-name { font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.aud-sub  { font-size: 16px; font-weight: 400; color: var(--text-mute); margin-top: 2px; }

/* ── DONATE ── */
.support-swiss { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: stretch; }
.support-momentum {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--bg-white); border: 1px solid var(--border-card);
  border-radius: var(--r-xl); padding: 20px 22px;
}
.support-momentum-icon { flex-shrink: 0; color: var(--blue); opacity: .7; margin-top: 1px; }
.support-momentum-icon svg { width: 16px; height: 16px; }
.support-momentum-text { font-size: 16px; color: var(--text-mute); line-height: 1.65; }
.support-right { display: flex; flex-direction: column; }
.support-panel {
  flex: 1; display: flex; flex-direction: column;
  background: var(--bg-white); border: 1.5px solid var(--border-card);
  border-radius: var(--r-xl); overflow: hidden; margin-bottom: 14px;
}
.d-row {
  display: flex; align-items: center; gap: 16px; padding: 0 24px;
  text-decoration: none; border-bottom: 1px solid var(--border-card);
  transition: background var(--t) var(--ease); height: 80px;
}
.d-row:last-child { border-bottom: none; }
.d-row:hover { background: #EEF1FF; }
.d-row--featured { background: var(--blue-sub); }
.d-row--featured:hover { background: #D4DCFF; }
.d-row-price {
  font-family: var(--font-serif); font-size: 28px; font-weight: 600;
  letter-spacing: -.03em; line-height: 1; flex-shrink: 0; min-width: 64px;
}
.d-row--featured .d-row-price { color: var(--blue-sub-text); }
.d-row-body { flex: 1; min-width: 0; }
.d-row-give {
  font-size: 16px; font-weight: 500; letter-spacing: .01em; color: var(--text-mute);
  transition: color var(--t) var(--ease);
}
.d-row:hover .d-row-give { color: var(--blue); }
.d-row--featured .d-row-give { color: var(--blue-sub-text); opacity: .6; }
.d-row--featured:hover .d-row-give { opacity: 1; }
.d-row-badge {
  display: inline-flex; align-items: center; background: var(--blue); color: var(--blue-text);
  border-radius: var(--r-pill); font-size: 16px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; padding: 3px 8px;
  flex-shrink: 0; white-space: nowrap;
}
.d-row-arrow {
  flex-shrink: 0; color: var(--border-strong);
  transition: color var(--t) var(--ease), transform var(--t) var(--ease);
}
.d-row-arrow svg { width: 14px; height: 14px; display: block; }
.d-row:hover .d-row-arrow { color: var(--blue); transform: translateX(3px); }
.d-row--featured .d-row-arrow { color: var(--blue-sub-text); opacity: .4; }
.d-row--featured:hover .d-row-arrow { opacity: 1; }
.d-row-icon { flex-shrink: 0; min-width: 64px; display: flex; align-items: center; color: var(--text-mute); }
.d-row-icon svg { width: 15px; height: 15px; }
.support-note { font-size: 16px; font-style: italic; color: var(--text-mute); line-height: 1.6; }

/* ── ABOUT ── */
.about-grid { display: grid; grid-template-columns: 280px 1fr; gap: 64px; align-items: center; }
.about-photo-col { display: flex; flex-direction: column; align-items: center; }
.about-photo {
  width: 100%; aspect-ratio: 1/1; border-radius: 50%;
  overflow: hidden; background: var(--blue-sub); margin-bottom: 14px; flex-shrink: 0;
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.about-photo-init {
  width: 100%; height: 100%; display: flex; align-items: center;
  justify-content: center; font-size: 48px; font-weight: 600;
  color: var(--blue-sub-text); opacity: .4;
}
.about-caption { font-size: 16px; color: var(--text-mute); line-height: 1.5; text-align: center; }

/* ── FOOTER ── */
.site-footer { margin-top: auto; background: var(--bg-white); border-top: 1px solid var(--border-card); min-height: 54px; padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); display: flex; align-items: center; }
.footer-bottom { width: 100%; padding: 0; }
.footer-inner { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: nowrap; }
.footer-brand-row { display: flex; align-items: center; gap: 8px; margin-bottom: 0; }
.footer-brand-name { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.footer-brand-sep  { width: 1px; height: 12px; background: var(--border-strong); flex-shrink: 0; }
.footer-brand-sub  { font-size: 16px; font-weight: 500; color: var(--blue); opacity: .85; }
.footer-maker      { font-size: 16px; color: var(--text-mute); }
.footer-links { display: flex; align-items: center; gap: 2px; }
.footer-link {
  font-size: 16px; font-weight: 500; color: var(--text-mute); text-decoration: none;
  padding: 5px 9px; border-radius: var(--r-pill); position: relative; overflow: hidden;
  transition: color var(--t) var(--ease); background: none; border: none;
  cursor: pointer; font-family: var(--font-ui);
}
.footer-link:hover { color: var(--text); }
.footer-sep { color: var(--border-strong); font-size: 16px; user-select: none; }

/* ── MODALS ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 500; background: rgba(26,25,23,.45);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease);
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-sheet {
  background: var(--bg-white); border: 1px solid var(--border-card); border-radius: var(--r-xl);
  width: 100%; max-width: 640px; max-height: 80vh; display: flex; flex-direction: column;
  box-shadow: 0 8px 48px rgba(26,25,23,.18), 0 2px 8px rgba(26,25,23,.08);
  transform: translateY(12px); transition: transform 220ms var(--ease-d);
}
.modal-overlay.open .modal-sheet { transform: translateY(0); }
.modal-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px; border-bottom: 1px solid var(--border-card); flex-shrink: 0;
}
.modal-title { font-family: var(--font-serif); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.modal-close {
  width: 32px; height: 32px; border-radius: var(--r-pill); border: none;
  background: var(--bg-mid); cursor: pointer; display: flex; align-items: center;
  justify-content: center; color: var(--text-mute);
  transition: background var(--t), color var(--t); flex-shrink: 0;
}
.modal-close:hover { background: var(--bg-mid-2); color: var(--text); }
.modal-close svg { width: 14px; height: 14px; }
.modal-body {
  overflow-y: auto; padding: 24px; font-size: 16px; line-height: 1.75;
  color: var(--text-sec); scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.modal-body::-webkit-scrollbar { width: 5px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
.modal-body h2 { font-family: var(--font-serif); font-size: 16px; font-weight: 600; margin: 24px 0 8px; letter-spacing: -.01em; }
.modal-body h2:first-child { margin-top: 0; }
.modal-body p { margin-bottom: 10px; }
.modal-body ul { padding-left: 20px; margin-bottom: 10px; }
.modal-body li { margin-bottom: 4px; }
.modal-body a { color: var(--blue); text-decoration: none; }
.modal-body a:hover { text-decoration: underline; }
.modal-updated { font-size: 16px; color: var(--text-mute); margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border-card); }

/* ── RESPONSIVE ── */
@media (min-width: 1100px) {
  .hero { max-width: 1160px; grid-template-columns: 1fr minmax(0, 560px); }
}
@media (max-width: 820px) {
  .hdr-brand-sep, .hdr-brand-sub { display: none; }
  .ss-hide-mobile { display: none; }
  .wrap { padding-left: 24px; padding-right: 24px; }
  .hero { grid-template-columns: 1fr; gap: 20px; padding: 36px 14px 52px; }
  .hero-sub { max-width: 100%; }
  .hero-right { order: -1; width: 100%; position: relative; max-width: 100%; }
  .app-screenshot { width: 100%; border-radius: var(--r-xl); }
  .ss-main { min-height: auto; }
  :is(.features-grid, .roadmap-grid) { grid-template-columns: 1fr 1fr; }
  .audience-swiss { grid-template-columns: 1fr; }
  .aud-left { border-right: none; padding-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 32px; }
  .aud-right { padding-left: 0; padding-top: 8px; }
  .support-swiss { grid-template-columns: 1fr; gap: 48px; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-photo { width: 220px; }
  .about-photo-col { align-items: center; }
  .about-caption { text-align: center; }
  .about-content { order: 2; }
  .about-photo-col { order: 1; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* Header: collapse text labels on the two secondary buttons at narrow widths */
@media (max-width: 600px) {
  .hdr-actions { gap: 4px; }
  .hbtn-support span { display: none; }
  .hbtn-support { padding: 0 9px; }
  .hbtn-launch-full { display: none; }
}
@media (min-width: 601px) {
  .hbtn-launch-short { display: none; }
}
@media (max-width: 520px) {
  :is(.features-grid, .roadmap-grid) { grid-template-columns: 1fr; }
  .hero { padding: 28px 20px 44px; }
}

/* Scale the desktop screenshot uniformly on narrow screens.
   zoom participates in layout flow so no margin hacks needed.
   transform is kept as fallback for Firefox which doesn't support zoom. */
@media (max-width: 480px) {
  .app-screenshot { zoom: 0.82; transform: scale(0.82); transform-origin: top left; width: calc(100% / 0.82); }
}
@media (max-width: 400px) {
  .app-screenshot { zoom: 0.70; transform: scale(0.70); transform-origin: top left; width: calc(100% / 0.70); }
}
@media (max-width: 340px) {
  .app-screenshot { zoom: 0.60; transform: scale(0.60); transform-origin: top left; width: calc(100% / 0.60); }
}

/* ── LANGUAGE BANNER ── */
.lang-banner {
  background: var(--blue-sub); border-bottom: 1px solid rgba(51,86,232,.15);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px; font-size: 16px; color: var(--blue-sub-text);
}
.lang-banner[hidden] { display: none !important; }
.lang-banner-msg { flex: 1; font-weight: 500; }
.lang-banner-cta {
  background: var(--blue); color: var(--blue-text); border: none;
  border-radius: var(--r-btn); padding: 6px 14px; font-size: 16px; font-weight: 600;
  cursor: pointer; font-family: var(--font-ui); white-space: nowrap; flex-shrink: 0;
  transition: background var(--t) var(--ease);
}
.lang-banner-cta:hover { background: #3356E8; }
.lang-banner-dismiss {
  background: none; border: none; cursor: pointer; color: var(--blue-sub-text);
  opacity: .6; padding: 4px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 18px; line-height: 1; font-family: var(--font-ui);
}
.lang-banner-dismiss::after { content: '×'; }
.lang-banner-dismiss:hover { opacity: 1; }

/* ── LANGUAGE MENU IN FOOTER ── */
.footer-lang-wrap { position: relative; }
.footer-lang-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 16px; font-weight: 500; color: var(--text-mute);
  padding: 5px 9px; border-radius: var(--r-pill);
  background: none; border: none; cursor: pointer; font-family: var(--font-ui);
  transition: color var(--t) var(--ease);
}
.footer-lang-btn:hover { color: var(--text); }
.lang-menu {
  position: fixed; bottom: auto; right: auto;
  background: var(--bg-white); border: 1px solid var(--border-card);
  border-radius: var(--r-md); box-shadow: 0 4px 24px rgba(26,25,23,.12);
  min-width: 148px; overflow: hidden; z-index: 300;
  display: grid; grid-template-columns: 1fr 1fr;
  max-width: calc(100vw - 32px);
}
.lang-menu[hidden] { display: none; }
.lang-menu-item {
  font-size: 16px; font-weight: 500; color: var(--text-sec);
  padding: 9px 14px; text-decoration: none;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
  white-space: nowrap;
}
.lang-menu-item:hover { background: var(--bg-light); color: var(--text); }
.lang-menu-item--active { color: var(--blue); font-weight: 600; }

/* ── RTL SUPPORT ── */
[dir="rtl"] .hdr-brand,
[dir="rtl"] .hdr-actions,
[dir="rtl"] .footer-links,
[dir="rtl"] .footer-brand-row { flex-direction: row-reverse; }
[dir="rtl"] .aud-left { padding-right: 0; padding-left: 48px; border-right: none; border-left: 1px solid var(--border); }
[dir="rtl"] .aud-right { padding-left: 0; padding-right: 48px; }
[dir="rtl"] .d-row { flex-direction: row-reverse; }
[dir="rtl"] .modal-hdr { flex-direction: row-reverse; }
/* lang-menu position is set by JS to stay within viewport */
[dir="rtl"] .lang-banner { flex-direction: row-reverse; }

@media (max-width: 820px) {
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
}


/* ===== Unified Compose rebuild overrides ===== */
:root {
  --font-serif: 'Newsreader', 'Source Serif 4', Georgia, serif;
  --max: 1000px;
}
html, body { min-height: 100%; }
body { background: var(--bg-light); }
.wrap { max-width: var(--max); }

a { text-underline-offset: 0.15em; }

#site-hdr {
  height: 58px;
  padding: 0 20px;
  gap: 18px;
}
.hdr-center {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
  margin-right: 10px;
}
.hdr-nav-link {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-sec);
  text-decoration: none;
  letter-spacing: -.01em;
  padding: 6px 0;
}
.hdr-nav-link:hover { color: var(--text); }
.hdr-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.locale-switch {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-white);
  border-radius: 999px;
  height: 34px;
  padding: 0 30px 0 12px;
  font: 500 12px/1 var(--font-ui);
  color: var(--text-sec);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-mute) 50%), linear-gradient(135deg, var(--text-mute) 50%, transparent 50%);
  background-position: calc(100% - 14px) 14px, calc(100% - 10px) 14px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.hdr-menu-btn {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-white);
  color: var(--text);
  align-items: center;
  justify-content: center;
}
.hdr-menu-btn svg { width: 16px; height: 16px; }
.mobile-menu {
  position: fixed;
  inset: 58px 16px auto 16px;
  z-index: 250;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 18px 44px rgba(26,25,23,.12);
  display: none;
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block;
  text-decoration: none;
  color: var(--text);
  font-size: 16px;
  padding: 12px 10px;
  border-radius: 12px;
}
.mobile-menu a:hover { background: var(--hover); }
.mobile-menu .mobile-launch { margin-top: 6px; }

.hero { padding-top: 72px; padding-bottom: 72px; }
.hero-sub { max-width: 470px; }
.placeholder-screen {
  border: 1px solid var(--border-card);
  background: linear-gradient(180deg, var(--bg-white), #fbfaf8);
  border-radius: var(--r-xl);
  box-shadow: 0 0 0 1px rgba(26,25,23,.03), 0 18px 42px rgba(26,25,23,.08);
  overflow: hidden;
}
.placeholder-topbar {
  height: 46px;
  border-bottom: 1px solid var(--border-card);
  background: var(--bg-white);
  display: flex;
  align-items: center;
  padding: 0 14px;
  justify-content: space-between;
}
.placeholder-dots { display: flex; gap: 6px; }
.placeholder-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--border); display:block; }
.placeholder-pill {
  width: 72px; height: 22px; border-radius: 999px; background: var(--bg-mid);
}
.placeholder-canvas {
  padding: 24px;
  min-height: 340px;
  display: grid;
  gap: 14px;
}
.placeholder-line, .placeholder-block {
  background: linear-gradient(90deg, #efebe4, #e6e2db);
  border-radius: 999px;
  height: 10px;
}
.placeholder-line.short { width: 32%; }
.placeholder-line.medium { width: 54%; }
.placeholder-line.long { width: 78%; }
.placeholder-heading { height: 22px; width: 66%; border-radius: 8px; background: linear-gradient(90deg, #ddd7ce, #ebe7e1); }
.placeholder-block { height: 92px; border-radius: 14px; width: 100%; }
.placeholder-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-top: 12px;
}
.placeholder-label::before { content: ''; width: 16px; height: 1px; background: var(--border-strong); display:block; }

.compose-section { padding: 84px 0; }
.compose-section--white { background: var(--bg-white); }
.compose-section--mid { background: var(--bg-mid); }
.section-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute);
  margin-bottom: 18px;
}
.section-kicker::before { content:''; width:18px; height:1px; background: var(--border-strong); display:block; }
.compose-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 24px;
  margin-bottom: 34px;
  align-items: start;
}
.compose-title {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -.03em;
  font-weight: 650;
}
.compose-intro {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-sec);
  max-width: 620px;
}
.value-list, .trust-list, .compat-list {
  border-top: 1px solid var(--border);
}
.value-item, .trust-item, .compat-item {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.value-item .num, .trust-item .num, .compat-item .num {
  font-size: 16px; font-weight: 600; color: var(--text-mute); margin-top: 2px;
}
.value-item h3, .trust-item h3, .compat-item h3, .proof-copy h3, .pricing-card h3, .faq-q, .about-panel h3 {
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -.015em;
  font-weight: 600;
  margin-bottom: 6px;
}
.value-item p, .trust-item p, .compat-item p, .proof-copy p, .pricing-card p, .role-copy p, .faq-a, .about-panel p {
  font-size: 16px;
  line-height: 1.78;
  color: var(--text-sec);
}
.proof-stack { display: grid; gap: 20px; }
.proof-module {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(280px, .88fr);
  gap: 24px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid var(--border);
}
.proof-module:last-child { border-bottom: 1px solid var(--border); }
.proof-module:nth-child(even) { grid-template-columns: minmax(280px, .88fr) minmax(0, .92fr); }
.proof-module:nth-child(even) .proof-copy { order: 2; }
.proof-module:nth-child(even) .proof-visual { order: 1; }
.proof-visual .placeholder-screen { min-height: 220px; }
.proof-visual .placeholder-canvas { min-height: 220px; }
.roles-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.role-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.role-tab {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 12px;
  padding: 10px 12px;
  font: 500 13px/1.35 var(--font-ui);
  color: var(--text-sec);
  cursor: pointer;
}
.role-tab:hover { background: rgba(255,255,255,.45); color: var(--text); }
.role-tab.active {
  background: var(--bg-white);
  color: var(--text);
  border-color: var(--border-card);
  box-shadow: 0 1px 0 rgba(26,25,23,.02), 0 10px 24px rgba(26,25,23,.04);
}
.role-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
.role-bullets {
  list-style: none;
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.role-bullets li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-sec);
}
.role-bullets li::before {
  content: '—';
  color: var(--blue);
  font-weight: 600;
}
.role-visual .placeholder-screen { min-height: 260px; }
.role-visual .placeholder-canvas { min-height: 260px; }
.pricing-shell {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 30px;
  align-items: start;
}
.pricing-rail { display: grid; gap: 12px; }
.pricing-card {
  background: var(--bg-white);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 18px 18px 16px;
}
.pricing-card.featured {
  border-color: rgba(51,86,232,.28);
  box-shadow: 0 8px 24px rgba(51,86,232,.08);
}
.pricing-card .eyebrow {
  font-size: 16px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-mute); margin-bottom: 10px; font-weight: 600;
}
.pricing-card ul {
  list-style: none; display:grid; gap:8px; margin: 14px 0 16px;
}
.pricing-card li {
  font-size: 16px; color: var(--text-sec); line-height: 1.55; display:grid; grid-template-columns: 16px 1fr; gap: 8px;
}
.pricing-card li::before { content:'•'; color: var(--blue); }
.pricing-side {
  display: grid;
  gap: 18px;
}
.pricing-note, .institution-box, .about-panel {
  background: var(--bg-white);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 18px;
}
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-trigger {
  width: 100%; background: transparent; border: none; text-align: left; padding: 16px 0;
  display:flex; justify-content: space-between; align-items:flex-start; gap:14px; cursor:pointer;
}
.faq-trigger .icon { color: var(--text-mute); transition: transform 180ms ease; margin-top: 2px; }
.faq-item.open .faq-trigger .icon { transform: rotate(45deg); }
.faq-a { display: none; padding: 0 0 18px; max-width: 760px; }
.faq-item.open .faq-a { display:block; }
.final-cta {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 68px 0;
}
.final-cta-inner {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(220px,.85fr);
  gap: 28px;
  align-items: end;
}
.final-cta-title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 650;
  margin-bottom: 14px;
}
.final-actions { display:flex; gap:10px; flex-wrap:wrap; }
.about-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.about-portrait {
  background: var(--bg-white);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  overflow: hidden;
}
.about-portrait img { display:block; width:100%; height:auto; }
.about-caption { padding: 14px 16px; font-size: 16px; color: var(--text-sec); }
.legal-hero {
  max-width: 860px;
  margin: 0 auto;
  padding: 54px 40px 24px;
}
.legal-title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.1;
  letter-spacing: -.03em;
  margin-bottom: 10px;
}
.legal-sub { font-size: 16px; color: var(--text-sec); line-height: 1.7; max-width: 640px; }
.legal-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 18px 40px 72px;
}
.legal-sheet {
  background: var(--bg-white);
  border: 1px solid var(--border-card);
  border-radius: 20px;
  padding: 28px 28px 24px;
}
.legal-sheet .modal-body { padding: 0; overflow: visible; max-height: none; }
.legal-sheet .modal-updated { margin-bottom: 20px; }

.footer-links .locale-switch { height: 30px; padding: 0 28px 0 10px; font-size: 16px; }
.footer-contact-link { font-size: 16px; color: var(--text-sec); text-decoration: none; }
.footer-contact-link:hover { color: var(--text); }


/* Section separation fixes for unified homepage */
#install.compose-section--white {
  background: var(--bg-mid);
  border-top: 1px solid var(--border-card);
  border-bottom: 1px solid var(--border-card);
}
#pricing.compose-section--white {
  background: var(--bg-white);
}
#pricing .compose-head,
#install .compose-head {
  margin-bottom: 28px;
}
.install-inline-shell {
  background: transparent;
}
.install-panel-wrap,
.install-benefits-grid {
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.install-benefits-grid {
  margin-top: 16px;
}

@media (max-width: 980px) {
  .hdr-center { gap: 14px; }
  .proof-module, .proof-module:nth-child(even), .pricing-shell, .role-panel, .final-cta-inner, .about-grid {
    grid-template-columns: 1fr;
  }
  .proof-module:nth-child(even) .proof-copy, .proof-module:nth-child(even) .proof-visual { order: initial; }
  .roles-shell { grid-template-columns: 1fr; }
  .role-tabs { flex-direction: row; flex-wrap: wrap; }
  .role-tab { width: auto; }
  .compose-head { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .hdr-center, .hdr-right .locale-switch, .hdr-right .hbtn-launch { display: none; }
  .hdr-menu-btn { display: inline-flex; margin-left: auto; }
}
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; gap: 28px; padding-top: 54px; padding-bottom: 54px; }
  .compose-section { padding: 64px 0; }
  .legal-hero, .legal-wrap { padding-left: 24px; padding-right: 24px; }
  .footer-inner { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  #site-hdr { padding: 0 14px; }
  .hero, .wrap, .platform-nav, .legal-hero, .legal-wrap { padding-left: 20px; padding-right: 20px; }
  .value-item, .trust-item, .compat-item { grid-template-columns: 26px 1fr; gap: 12px; }
  .role-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .role-tab { width: 100%; }
  .pricing-card, .pricing-note, .institution-box, .about-panel, .legal-sheet { padding: 16px; }
  .footer-bottom { padding: 0; }
  .footer-link { padding: 5px 7px; }
}



/* --- Inline install section --- */
.install-inline-shell { margin-top: 8px; }
.install-tabbar {
  display:flex; gap:6px; flex-wrap:wrap; margin: 0 0 24px;
}
.install-tab {
  display:inline-flex; align-items:center; justify-content:center;
  height:34px; padding:0 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); color:var(--text); font:500 13px/1 var(--font-sans);
  cursor:pointer; transition:all .18s ease;
}
.install-tab:hover { border-color: var(--text); }
.install-tab.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.install-panel-wrap { margin-bottom: 28px; }
.install-panel-head { margin-bottom: 20px; max-width: 720px; }
.install-panel-head h3 {
  margin:0 0 8px; font:600 clamp(1.25rem, 2vw, 1.75rem)/1.15 var(--font-serif); color: var(--text);
}
.install-panel-head p { margin:0; color: var(--text-muted); max-width: 680px; }
.install-group-label {
  margin: 24px 0 12px; font:600 11px/1.2 var(--font-sans); letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted);
}
.install-browser-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.install-browser-card {
  background: var(--surface); border:1px solid var(--line); border-radius: 18px; overflow:hidden;
}
.install-browser-card-hdr {
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:18px 20px 14px; border-bottom:1px solid var(--line-soft);
}
.install-browser-name { font-weight:600; color:var(--text); margin-bottom:3px; }
.install-browser-platforms { font-size:16px; line-height:1.45; color:var(--text-muted); }
.install-support-pill {
  flex-shrink:0; display:inline-flex; align-items:center; border-radius:999px; padding:4px 8px; font-size:16px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.install-support-pill.full { background:#e7f2ea; color:#215f37; }
.install-support-pill.partial { background:#fff4d8; color:#7a5800; }
.install-support-pill.extension { background:#efe6ff; color:#5b2a9b; }
.install-steps { padding:18px 20px 20px; display:grid; gap:14px; }
.install-step { display:grid; grid-template-columns:24px 1fr; gap:12px; align-items:flex-start; }
.install-step-n {
  width:24px; height:24px; border-radius:999px; background:var(--bg-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700;
}
.install-step-body { font-size:16px; line-height:1.65; color:var(--text-muted); }
.install-benefits-head { margin: 18px 0 18px; max-width: 720px; }
.install-benefits-head h3 { margin:0 0 8px; font:600 clamp(1.15rem, 1.8vw, 1.5rem)/1.15 var(--font-serif); color: var(--text); }
.install-benefits-head p { margin:0; color: var(--text-muted); }
.install-benefits-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:16px; }
.install-benefit-card {
  background: var(--surface-soft); border:1px solid var(--line-soft); border-radius: 18px; padding:20px;
}
.install-benefit-card h4 { margin:0 0 6px; font:600 14px/1.35 var(--font-sans); color:var(--text); }
.install-benefit-card p { margin:0; font-size:16px; line-height:1.65; color:var(--text-muted); }
@media (max-width: 980px) {
  .install-browser-grid, .install-benefits-grid { grid-template-columns:1fr; }
}
@media (max-width: 700px) {
  .install-tabbar { overflow:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .install-tab { white-space:nowrap; }
}


/* One-page install section integration */
.install-full-section{border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.install-full-section .page-hero{padding-top:96px;padding-bottom:42px;}
.install-full-section .platform-nav{margin-bottom:38px;}
.install-full-section .info-section{padding-top:12px;}
@media (max-width: 900px){
  .install-full-section .page-hero{padding-top:72px;padding-bottom:28px;}
}


/* Pass 1 structural normalization */
body{min-height:100svh;}
#main-content, #page-content{display:block;}



/* Pass 4: site is intentionally English-only until full localisation is wired. */

body.menu-open { overflow: hidden; }
.role-tab:focus-visible, .pbtn:focus-visible, .faq-trigger:focus-visible, .hdr-menu-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.faq-a[hidden] { display: none !important; }

/* ===== Header, footer, mobile, and locale restoration ===== */
.hdr-right { display:flex; align-items:center; gap:8px; margin-left:auto; }
.hbtn-install, .hbtn-launch { gap:6px; }
.hbtn-install-short, .hbtn-launch-short { display:none; }
.hbtn-install svg, .hbtn-launch svg { width:13px; height:13px; }
.hdr-brand { min-width:0; }
.hdr-brand-name, .hdr-brand-sub { white-space:nowrap; }

.footer-lang-wrap { display:flex; align-items:center; position:relative; }
.footer-lang-btn { display:inline-flex; align-items:center; gap:6px; }
.footer-lang-btn::after {
  content:'▾'; font-size:16px; line-height:1; color:var(--text-mute);
}
.lang-menu { min-width:160px; max-height:260px; overflow:auto; }

@media (max-width: 980px) {
  #site-hdr { gap: 12px; }
  .hdr-brand-name { font-size: 16px; }
  .hdr-brand-sub { font-size: 16px; }
}
@media (max-width: 760px) {
  #site-hdr { height: 56px; padding: 0 14px; }
  .hdr-brand-name { font-size: 16px; }
  .hdr-brand-sub { font-size: 16px; }
  .hbtn-support, .hbtn-launch { height: 32px; padding: 0 10px; font-size: 16px; }
  .footer-inner { flex-wrap: wrap; align-items:flex-start; gap:10px 16px; min-height:auto; padding:10px 0; }
  .footer-links { flex-wrap: wrap; gap: 4px 0; }
}
@media (max-width: 560px) {
  #site-hdr { padding: 0 12px; gap: 8px; }
  .hdr-brand-sub, .hdr-brand-sep { display:none; }
  .hdr-brand-name { display:block !important; font-size: 16px; max-width: 132px; overflow:hidden; text-overflow:ellipsis; }
  .hbtn-install-full, .hbtn-launch-full { display:none; }
  .hbtn-install-short, .hbtn-launch-short { display:inline; }
  .hbtn-support, .hbtn-launch { padding: 0 9px; font-size: 16px; }
  .hbtn-install svg, .hbtn-launch svg { width:12px; height:12px; }
  .site-footer { align-items:flex-start; }
  .footer-bottom { padding: 0; }
  .footer-inner { padding: 12px 0; gap: 8px; }
  .footer-brand-row { width:100%; }
  .footer-links { width:100%; }
  .footer-sep { display:none; }
  .footer-link, .footer-lang-btn { padding: 4px 8px 4px 0; }
}
@media (max-width: 400px) {
  .hdr-brand-name { max-width: 110px; font-size: 16px; }
  .hbtn-support, .hbtn-launch { padding: 0 8px; font-size: 16px; }
  .footer-link, .footer-lang-btn { font-size: 16px; }
}

@media (max-width: 860px) { .hdr-right .hbtn-launch { display: inline-flex !important; } .hdr-menu-btn { display:none !important; } }
@media (max-width: 560px) { .hdr-right { gap: 6px; } }

/* ===== Pass 1: shared shell and component consolidation ===== */
.hdr-brand a,
.footer-brand-row a {
  text-decoration: none;
  color: inherit;
}

.hbtn-install.is-current {
  background: var(--bg-mid-2);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border);
}

.footer-link.is-current {
  color: var(--text);
  background: var(--bg-mid);
}

.footer-link[aria-current="page"],
.hbtn-install[aria-current="page"] {
  pointer-events: none;
}


/* ===== Pass 2: mobile-first layout hardening ===== */
#site-hdr {
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}
.site-footer {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

@media (max-width: 900px) {
  .hero {
    align-items: start;
  }
  .hero-right,
  .placeholder-screen {
    max-width: 100%;
  }
  .compose-head {
    gap: 18px;
  }
  .compose-intro {
    max-width: 100%;
  }
  .final-cta {
    padding: 60px 0;
  }
}

@media (max-width: 760px) {
  .wrap,
  .legal-hero,
  .legal-wrap {
    padding-left: 22px;
    padding-right: 22px;
  }
  #site-hdr {
    min-height: 56px;
    height: auto;
    gap: 10px;
  }
  .hdr-brand {
    flex: 1 1 auto;
    min-width: 0;
  }
  .hdr-brand-name {
    max-width: none;
  }
  .hdr-right {
    flex: 0 0 auto;
    gap: 8px;
  }
  .hbtn-install,
  .hbtn-launch {
    min-width: 0;
    flex-shrink: 0;
  }
  .hero {
    padding: 30px 22px 44px;
    gap: 22px;
  }
  .hero-sub {
    max-width: none;
    font-size: 16px;
    line-height: 1.72;
    margin-bottom: 28px;
  }
  .placeholder-canvas {
    min-height: 260px;
    padding: 20px;
  }
  .placeholder-label {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .compose-section {
    padding: 60px 0;
  }
  .value-item,
  .trust-item,
  .compat-item {
    gap: 14px;
    padding: 16px 0;
  }
  .role-panel {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .role-visual {
    order: 2;
  }
  .role-copy {
    order: 1;
  }
  .faq-trigger {
    padding: 18px 0;
  }
  .faq-a {
    padding: 0 0 20px;
  }
}

@media (max-width: 620px) {
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .hero-actions .btn-cta,
  .hero-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }
  .role-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
    margin: 0 -2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .role-tabs::-webkit-scrollbar {
    display: none;
  }
  .role-tab {
    width: auto;
    min-width: max-content;
    white-space: nowrap;
  }
  .pricing-shell {
    gap: 18px;
  }
  .pricing-rail,
  .pricing-side {
    gap: 14px;
  }
  .footer-inner {
    min-height: auto;
    padding: 10px 0 12px;
    gap: 10px;
  }
  .footer-brand-row {
    width: 100%;
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .footer-links {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 2px 12px;
  }
  .footer-sep {
    display: none;
  }
  .footer-link,
  .footer-lang-btn {
    padding: 8px 0;
    min-height: 36px;
    justify-content: flex-start;
  }
  .footer-lang-wrap {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  #site-hdr {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .hdr-brand-name {
    display: block !important;
    max-width: 168px;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hdr-brand-sub,
  .hdr-brand-sep {
    display: none;
  }
  .hbtn-install-full,
  .hbtn-launch-full {
    display: none;
  }
  .hbtn-install-short,
  .hbtn-launch-short {
    display: inline;
  }
  .hbtn-support,
  .hbtn-launch {
    height: 34px;
    padding: 0 10px;
    font-size: 16px;
    border-radius: 10px;
  }
  .hero,
  .wrap,
  .legal-hero,
  .legal-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
  .hero {
    padding-top: 24px;
    padding-bottom: 40px;
  }
  .compose-title {
    font-size: clamp(24px, 8vw, 30px);
  }
  .compose-section {
    padding: 52px 0;
  }
  .value-item,
  .trust-item,
  .compat-item {
    grid-template-columns: 30px 1fr;
    gap: 12px;
  }
  .pricing-card,
  .pricing-note,
  .institution-box,
  .about-panel,
  .legal-sheet {
    padding: 16px;
  }
  .faq-trigger {
    gap: 10px;
  }
  .faq-trigger .icon {
    font-size: 20px;
    line-height: 1;
  }
}

@media (max-width: 380px) {
  #site-hdr {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  .hdr-brand-name {
    max-width: 124px;
    font-size: 16px;
  }
  .hbtn-support,
  .hbtn-launch {
    padding: 0 8px;
  }
  .footer-links {
    grid-template-columns: 1fr;
  }
}


/* ===== Pass 3: route, entry-point, and navigation cleanup ===== */
:root {
  --route-scroll-offset: 96px;
}
main [id],
section[id],
.install-page-shell [id] {
  scroll-margin-top: var(--route-scroll-offset, 96px);
}
@media (max-width: 900px) {
  :root {
    --route-scroll-offset: 84px;
  }
}
@media (max-width: 560px) {
  :root {
    --route-scroll-offset: 76px;
  }
}

/* Pass 5: content architecture and section scaffolding */
.role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.role-card {
  background: var(--bg-white);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 20px;
  display: grid;
  gap: 16px;
}
.role-card-head {
  display: grid;
  gap: 8px;
}
.role-kicker {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-mute);
  font-weight: 600;
}
.role-card h3 {
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -.015em;
  font-weight: 600;
}
.role-card-body {
  font-size: 16px;
  line-height: 1.78;
  color: var(--text-sec);
}
.role-card .role-bullets {
  margin-top: 0;
}
.role-card .role-visual .placeholder-screen,
.role-card .role-visual .placeholder-canvas {
  min-height: 200px;
}
.decision-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.decision-pill {
  background: var(--bg-soft);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 14px 16px;
}
.decision-label {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-mute);
  font-weight: 600;
  margin-bottom: 6px;
}
.decision-text {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-sec);
}
.pricing-rail--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.pricing-support {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}
.pricing-note--panel {
  min-height: 100%;
}
.institution-box--wide ul {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 14px 0 16px;
}
.institution-box--wide li {
  font-size: 16px;
  color: var(--text-sec);
  line-height: 1.55;
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
}
.institution-box--wide li::before {
  content: '•';
  color: var(--blue);
}
@media (max-width: 1100px) {
  .pricing-rail--three,
  .role-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 980px) {
  .pricing-support,
  .decision-strip {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .role-card,
  .decision-pill {
    padding: 16px;
  }
}


/* ===== Pass 8: performance, accessibility, and QA hardening ===== */
.skip-link {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--blue);
  color: var(--blue-text);
  text-decoration: none;
  font: 600 13px/1 var(--font-ui);
  transform: translateY(-160%);
  transition: transform var(--t) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

a:focus-visible,
button:focus-visible,
select:focus-visible,
.lang-menu-item:focus-visible,
.footer-link:focus-visible,
.footer-lang-btn:focus-visible,
.hbtn-install:focus-visible,
.hbtn-launch:focus-visible,
.btn-cta:focus-visible,
.btn-ghost:focus-visible,
.install-tab:focus-visible,
.role-tab:focus-visible,
.faq-trigger:focus-visible,
.hdr-brand a:focus-visible,
.footer-brand-row a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.lang-menu-item:focus-visible {
  background: var(--bg-light);
  color: var(--text);
}

.compose-section,
.page-hero,
.info-section,
.about-section,
.legal-wrap {
  content-visibility: auto;
  contain-intrinsic-size: 1px 900px;
}

.placeholder-screen,
.role-card,
.pricing-card,
.install-browser-card,
.install-benefit-card,
.legal-sheet,
.institution-box,
.pricing-note,
.about-panel {
  contain: layout paint;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .app-screenshot { transform: none !important; }
}

@media (max-width: 560px) {
  .skip-link { left: 10px; right: 10px; width: max-content; max-width: calc(100vw - 20px); }
}


/* Product-specific mock visuals replacing generic skeleton screens. */
.product-mock {
  border: 1px solid var(--border-card);
  background: linear-gradient(180deg, var(--bg-white), #fbfaf8);
  border-radius: var(--r-xl);
  box-shadow: 0 0 0 1px rgba(26,25,23,.03), 0 18px 42px rgba(26,25,23,.08);
  overflow: hidden;
}
.mock-topbar {
  min-height: 46px;
  border-bottom: 1px solid var(--border-card);
  background: var(--bg-white);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
}
.mock-topbar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  display: block;
}
.mock-topbar em {
  margin-left: auto;
  font-style: normal;
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.mock-body {
  min-height: 300px;
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 18px;
  align-items: stretch;
}
.product-mock--hero .mock-body { min-height: 350px; grid-template-columns: minmax(0, 1fr) 168px; }
.proof-visual .product-mock .mock-body { min-height: 220px; }
.role-visual .product-mock .mock-body { min-height: 220px; }
.mock-doc,
.mock-side {
  background: rgba(255,255,255,.74);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 16px;
}
.mock-doc {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mock-doc strong,
.mock-side b {
  display: block;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--text);
  margin-bottom: 3px;
}
.mock-doc i {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e4dfd6, #f0ece6);
}
.mock-doc i:nth-of-type(1) { width: 84%; }
.mock-doc i:nth-of-type(2) { width: 70%; }
.mock-doc i:nth-of-type(3) { width: 92%; }
.mock-doc i:nth-of-type(4) { width: 58%; }
.mock-doc i:nth-of-type(5) { width: 76%; }
.mock-highlight { height: 30px !important; border-radius: 10px !important; background: rgba(51,86,232,.10) !important; border: 1px solid rgba(51,86,232,.16); }
.mock-doc mark {
  width: fit-content;
  border-radius: 999px;
  padding: 4px 9px;
  background: rgba(51,86,232,.08);
  color: var(--blue);
  font: 600 11px/1 var(--font-ui);
}
.mock-side {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.mock-side small {
  display: block;
  border: 1px solid var(--border-card);
  border-radius: 999px;
  padding: 7px 9px;
  color: var(--text-sec);
  background: #fff;
  font-size: 16px;
  line-height: 1.2;
}
.mock-timeline small { border-radius: 10px; position: relative; padding-left: 18px; }
.mock-timeline small::before { content: ''; position: absolute; left: 8px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); transform: translateY(-50%); }
.mock-export-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.mock-export-row small { border: 1px solid var(--border-card); border-radius: 999px; padding: 7px 10px; background: #fff; font: 600 11px/1 var(--font-ui); color: var(--text-sec); }
.product-mock--role-card .mock-body { grid-template-columns: 1fr; min-height: 190px; }
.product-mock--role-card .mock-side { display: grid; grid-template-columns: 1fr; }
.product-mock--role-card .mock-side small:nth-of-type(n+3) { display: none; }
.about-portrait picture { display: block; }
@media (max-width: 560px) {
  .mock-body,
  .product-mock--hero .mock-body {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .mock-side { min-height: 0; }
}


/* ── HERO REFINEMENT PASS ── */
.hero {
  max-width: 1160px;
  grid-template-columns: minmax(0, 460px) minmax(0, 620px);
  gap: 84px;
  align-items: start;
  padding-top: 96px;
  padding-bottom: 84px;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 10px;
}
.hero-headline {
  font-size: clamp(42px, 5.4vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  max-width: 8.4ch;
  margin-bottom: 24px;
}
.hero-sub {
  max-width: 540px;
  margin-bottom: 28px;
  font-size: 16px;
  line-height: 1.8;
}
.hero-actions {
  margin-bottom: 18px;
}
.hero-note {
  max-width: 540px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-sec);
  margin-bottom: 20px;
}
.hero-proof-rail {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-card);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.hero-proof-rail span { position: relative; }
.hero-proof-rail span:not(:first-child)::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border-strong);
  transform: translateY(-50%);
}
.hero-right {
  min-width: 0;
  max-width: none;
  width: 100%;
}
.hero-carousel {
  background: var(--bg-white);
  border: 1px solid var(--border-card);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(26,25,23,.03), 0 6px 24px rgba(26,25,23,.06);
}
.hero-carousel-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #f4f2ee;
}
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 260ms ease;
}
.hero-slide.is-active { opacity: 1; }
.hero-carousel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border-top: 1px solid var(--border-card);
  background: var(--bg-white);
}
.hero-carousel-caption {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}
.hero-carousel-count {
  flex: 0 0 auto;
  min-width: 46px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding-top: 2px;
}
.hero-carousel-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: 4px;
}
.hero-carousel-copy {
  margin: 0;
  max-width: 360px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-sec);
}
.hero-carousel-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.hero-carousel-arrow,
.hero-carousel-dot {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-sec);
}
.hero-carousel-arrow {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-mid);
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.hero-carousel-arrow:hover {
  background: var(--bg-mid-2);
  color: var(--text);
}
.hero-carousel-arrow svg { width: 16px; height: 16px; }
.hero-carousel-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d4d0ca;
  transition: transform var(--t) var(--ease), background var(--t) var(--ease);
}
.hero-carousel-dot.is-active {
  background: var(--blue);
  transform: scale(1.2);
}
.hero-carousel-dot:focus-visible,
.hero-carousel-arrow:focus-visible {
  outline: 2px solid rgba(51, 86, 232, .35);
  outline-offset: 2px;
}

@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: 68px;
    padding-bottom: 60px;
  }
  .hero-copy { padding-top: 0; }
  .hero-right { order: 0; }
  .hero-carousel-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-carousel-controls { justify-content: space-between; }
}

@media (max-width: 640px) {
  .hero {
    padding-left: 20px;
    padding-right: 20px;
  }
  .hero-headline {
    font-size: clamp(38px, 13vw, 58px);
    max-width: none;
  }
  .hero-sub,
  .hero-note,
  .hero-proof-rail { max-width: none; }
  .hero-actions {
    width: 100%;
    gap: 10px;
  }
  .hero-actions .btn-cta,
  .hero-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }
  .hero-proof-rail { gap: 10px 14px; }
  .hero-carousel-caption {
    flex-direction: column;
    gap: 8px;
  }
  .hero-carousel-count {
    min-width: auto;
    padding-top: 0;
  }
  .hero-carousel-controls { gap: 14px; }
}


/* ── HERO REFINEMENT PASS 11 ── */
.hero {
  max-width: 1160px;
  grid-template-columns: minmax(0, 450px) minmax(0, 620px);
  gap: 84px;
  align-items: start;
  padding-top: 94px;
  padding-bottom: 82px;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 6px;
}
.hero-headline {
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  max-width: 9ch;
  margin-bottom: 24px;
}
.hero-body {
  max-width: 560px;
  margin-bottom: 28px;
  color: var(--text-sec);
}
.hero-body p {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
}
.hero-body p + p {
  margin-top: 18px;
}
.hero-sub,
.hero-note,
.hero-proof-rail,
.hero-eyebrow,
.hero-carousel-footer {
  display: none !important;
}
.hero-actions {
  margin-bottom: 0;
}
.hero-right {
  min-width: 0;
  width: 100%;
}
.hero-gallery {
  width: 100%;
}
.hero-gallery-main {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border-card);
  border-radius: 28px;
  overflow: hidden;
  background: var(--bg-white);
  box-shadow: 0 0 0 1px rgba(26,25,23,.03), 0 8px 28px rgba(26,25,23,.06);
}
.hero-gallery-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 220ms ease;
}
.hero-gallery-image.is-active {
  opacity: 1;
}
.hero-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.hero-thumb {
  appearance: none;
  border: 1px solid var(--border-card);
  background: var(--bg-white);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.hero-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.hero-thumb:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
}
.hero-thumb.is-active {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(51, 86, 232, .12);
}
.hero-thumb:focus-visible {
  outline: 2px solid rgba(51, 86, 232, .35);
  outline-offset: 2px;
}

@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-top: 68px;
    padding-bottom: 58px;
  }
  .hero-copy {
    padding-top: 0;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-left: 20px;
    padding-right: 20px;
  }
  .hero-headline {
    font-size: clamp(34px, 11vw, 48px);
    max-width: none;
    margin-bottom: 20px;
  }
  .hero-body {
    margin-bottom: 24px;
    max-width: none;
  }
  .hero-body p {
    font-size: 16px;
    line-height: 1.75;
  }
  .hero-actions {
    width: 100%;
    gap: 10px;
  }
  .hero-actions .btn-cta,
  .hero-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }
  .hero-gallery-thumbs {
    gap: 10px;
    margin-top: 12px;
  }
}


/* ── HERO COMPOSITION PASS 12 ── */
.hero {
  max-width: 1180px;
  grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
  gap: 96px;
  align-items: start;
  padding-top: 96px;
  padding-bottom: 112px;
}

.hero-copy {
  padding-top: 0;
}

.hero-headline {
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1;
  letter-spacing: -0.04em;
  max-width: 9.6ch;
  margin-bottom: 28px;
}

.hero-body {
  max-width: 430px;
  margin-bottom: 30px;
}

.hero-body p {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-sec);
}

.hero-body p + p {
  margin-top: 20px;
}

.hero-body p:nth-child(2) {
  font-size: 16px;
  line-height: 1.82;
  color: var(--text-mute);
}

.hero-actions {
  gap: 12px;
  margin-bottom: 0;
}

.hero-actions .btn-cta,
.hero-actions .btn-ghost {
  height: 48px;
  padding-left: 22px;
  padding-right: 22px;
}

.hero-actions .btn-ghost {
  background: transparent;
  border: 1px solid var(--border-card);
  color: var(--text-sec);
}

.hero-actions .btn-ghost:hover {
  background: var(--bg-white);
  border-color: var(--border-strong);
  color: var(--text);
}

.hero-right {
  transform: translateY(12px);
}

.hero-gallery-main {
  border-radius: 22px;
  box-shadow: 0 0 0 1px rgba(26,25,23,.025), 0 6px 22px rgba(26,25,23,.055);
}

.hero-gallery-thumbs {
  gap: 12px;
  margin-top: 20px;
}

.hero-thumb {
  border-color: rgba(26,25,23,.12);
  border-radius: 15px;
  box-shadow: none;
}

.hero-thumb:hover {
  transform: none;
  border-color: rgba(26,25,23,.22);
}

.hero-thumb.is-active {
  border-color: rgba(51, 86, 232, .78);
  box-shadow: 0 0 0 2px rgba(51, 86, 232, .08);
}

.hero-thumb img {
  opacity: .86;
}

.hero-thumb.is-active img,
.hero-thumb:hover img {
  opacity: 1;
}

@media (max-width: 1100px) {
  .hero {
    gap: 72px;
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 72px;
    padding-bottom: 88px;
  }

  .hero-right {
    transform: none;
  }

  .hero-body {
    max-width: 560px;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-top: 58px;
    padding-bottom: 72px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero-headline {
    font-size: clamp(34px, 10.5vw, 48px);
    line-height: 1.02;
    max-width: none;
    margin-bottom: 24px;
  }

  .hero-body {
    max-width: none;
    margin-bottom: 28px;
  }

  .hero-body p {
    font-size: 16px;
    line-height: 1.76;
  }

  .hero-body p:nth-child(2) {
    font-size: 16px;
    line-height: 1.78;
  }

  .hero-actions {
    width: 100%;
    gap: 10px;
  }

  .hero-actions .btn-cta,
  .hero-actions .btn-ghost {
    width: 100%;
    justify-content: center;
    height: 48px;
  }

  .hero-gallery-main {
    border-radius: 20px;
  }

  .hero-gallery-thumbs {
    gap: 10px;
    margin-top: 14px;
  }

  .hero-thumb {
    border-radius: 13px;
  }
}


/* ── HERO TUNING PASS 13 ── */
.hero-headline {
  font-size: clamp(32px, 4.05vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.038em;
  max-width: 10.2ch;
}

.hero-actions .btn-ghost {
  background: var(--bg-mid);
  border: none;
  color: var(--text-sec);
}

.hero-actions .btn-ghost:hover {
  background: var(--bg-mid);
  border: none;
  color: var(--text);
}

@media (max-width: 640px) {
  .hero-headline {
    font-size: clamp(32px, 9.6vw, 44px);
    line-height: 1.04;
  }
}


/* ── HERO NATURAL H1 WRAP PASS 15 ── */
.hero {
  grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
}

.hero-headline {
  font-size: clamp(31px, 3.8vw, 49px);
  line-height: 1.05;
  letter-spacing: -0.037em;
  max-width: 12ch;
}

.hero-body {
  max-width: 450px;
}

@media (max-width: 1100px) {
  .hero {
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  }
}

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

  .hero-headline,
  .hero-body {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .hero-headline {
    font-size: clamp(31px, 9vw, 42px);
    line-height: 1.06;
    max-width: 12.5ch;
  }
}


/* ── FONT SYSTEM PASS 16 ── */
body,
button,
input,
textarea,
select {
  font-family: var(--font-ui);
}

.hero-headline,
.compose-title,
.sec-title,
.about-headline,
.support-headline,
.legal-title,
.legal-content h2,
.pricing-card h3,
.faq-q,
.proof-copy h3,
.role-card h3,
.institution-box h3,
.platform-card h3,
.install-title,
.page-title {
  font-family: var(--font-display);
}

.hero-headline {
  font-size: clamp(31px, 3.65vw, 47px);
  line-height: 1.05;
  letter-spacing: -0.055em;
  font-weight: 700;
  max-width: 13ch;
}

.compose-title,
.sec-title,
.about-headline,
.support-headline {
  letter-spacing: -0.045em;
}

.product-mock .mock-doc,
.product-document-preview,
.editor-preview {
  font-family: var(--font-editor-body);
}

.product-mock .mock-doc strong,
.product-document-preview h1,
.editor-preview h1 {
  font-family: var(--font-editor-heading);
}

@media (max-width: 640px) {
  .hero-headline {
    font-size: clamp(30px, 8.7vw, 40px);
    line-height: 1.06;
    max-width: 13ch;
  }
}


/* ── FONT SYSTEM PASS 17: CRIMSON PRO + PUBLIC SANS ── */
:root {
  --font-ui: 'Public Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Public Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Crimson Pro', Georgia, serif;
  --font-serif: var(--font-display);
  --font-editor-body: 'Source Serif 4', Georgia, serif;
  --font-editor-heading: 'Newsreader', Georgia, serif;
}

body,
button,
input,
textarea,
select {
  font-family: var(--font-body);
}

.hero-headline,
.compose-title,
.sec-title,
.about-headline,
.support-headline,
.legal-title,
.legal-content h2,
.pricing-card h3,
.faq-q,
.proof-copy h3,
.role-card h3,
.institution-box h3,
.platform-card h3,
.install-title,
.page-title {
  font-family: var(--font-display);
}

.hero-headline {
  font-size: clamp(33px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.034em;
  font-weight: 600;
  max-width: 12.4ch;
}

.compose-title,
.sec-title,
.about-headline,
.support-headline,
.legal-title,
.install-title,
.page-title {
  letter-spacing: -0.028em;
  font-weight: 600;
}

.proof-copy h3,
.role-card h3,
.pricing-card h3,
.faq-q,
.institution-box h3,
.platform-card h3 {
  letter-spacing: -0.02em;
  font-weight: 600;
}

.hero-body p,
.compose-intro,
.value-item p,
.proof-copy p,
.role-card-body,
.pricing-card p,
.faq-a {
  font-family: var(--font-body);
}

@media (max-width: 640px) {
  .hero-headline {
    font-size: clamp(32px, 9.2vw, 44px);
    line-height: 1.04;
    max-width: 12.8ch;
  }
}


/* ── FONT SYSTEM PASS 18: SPECTRAL HEADINGS + PUBLIC SANS ── */
:root {
  --font-ui: 'Public Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Public Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Spectral', Georgia, serif;
  --font-serif: var(--font-display);
  --font-editor-body: 'Source Serif 4', Georgia, serif;
  --font-editor-heading: 'Newsreader', Georgia, serif;
}

.hero-headline,
.compose-title,
.sec-title,
.about-headline,
.support-headline,
.legal-title,
.legal-content h2,
.pricing-card h3,
.faq-q,
.proof-copy h3,
.role-card h3,
.institution-box h3,
.platform-card h3,
.install-title,
.page-title {
  font-family: var(--font-display);
}

.hero-headline {
  font-size: clamp(32px, 3.9vw, 50px);
  line-height: 1.03;
  letter-spacing: -0.038em;
  font-weight: 600;
  max-width: 12.8ch;
}

.compose-title,
.sec-title,
.about-headline,
.support-headline,
.legal-title,
.install-title,
.page-title {
  letter-spacing: -0.032em;
  font-weight: 600;
}

.proof-copy h3,
.role-card h3,
.pricing-card h3,
.faq-q,
.institution-box h3,
.platform-card h3 {
  letter-spacing: -0.022em;
  font-weight: 600;
}

@media (max-width: 640px) {
  .hero-headline {
    font-size: clamp(31px, 9vw, 43px);
    line-height: 1.04;
    max-width: 13ch;
  }
}


/* ── FONT SYSTEM PASS 19: NEWSREADER WEIGHT TUNING ── */
:root {
  --font-ui: 'Public Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Public Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Newsreader', Georgia, serif;
  --font-serif: var(--font-display);
  --font-editor-body: 'Source Serif 4', Georgia, serif;
  --font-editor-heading: 'Newsreader', Georgia, serif;
}

body,
button,
input,
textarea,
select {
  font-family: var(--font-body);
}

.hero-headline,
.compose-title,
.sec-title,
.about-headline,
.support-headline,
.legal-title,
.legal-content h2,
.install-title,
.page-title {
  font-family: var(--font-display);
  font-weight: 600;
}

.hero-headline {
  font-size: clamp(33px, 3.9vw, 50px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  max-width: 13ch;
}

.compose-title,
.sec-title,
.about-headline,
.support-headline,
.legal-title,
.install-title,
.page-title {
  letter-spacing: -0.034em;
  line-height: 1.12;
}

.proof-copy h3,
.role-card h3,
.pricing-card h3,
.faq-q,
.institution-box h3,
.platform-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.026em;
  line-height: 1.18;
}

.value-item h3,
.pricing-decision strong,
.role-kicker,
.section-kicker,
.hero-carousel-title {
  font-family: var(--font-body);
}

.hero-body p,
.compose-intro,
.value-item p,
.proof-copy p,
.role-card-body,
.pricing-card p,
.faq-a {
  font-family: var(--font-body);
}

.product-mock .mock-doc,
.product-document-preview,
.editor-preview {
  font-family: var(--font-editor-body);
}

.product-mock .mock-doc strong,
.product-document-preview h1,
.editor-preview h1 {
  font-family: var(--font-editor-heading);
}

@media (max-width: 640px) {
  .hero-headline {
    font-size: clamp(32px, 9vw, 43px);
    line-height: 1.05;
    max-width: 13.2ch;
  }
}


/* ── HOME CAPABILITIES REDESIGN PASS 20 ── */
.capabilities-section {
  padding-top: 108px;
  padding-bottom: 112px;
}

.capabilities-shell {
  display: grid;
  gap: 42px;
}

.capabilities-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding-bottom: 10px;
}

.capabilities-title {
  max-width: 10.5ch;
  margin: 0;
}

.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 42px;
  row-gap: 0;
  border-top: 1px solid var(--border-card);
}

.capability-card {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 18px;
  padding: 24px 0 28px;
  border-bottom: 1px solid var(--border-card);
  align-items: start;
}

.capability-card--wide {
  grid-column: 1 / -1;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 18px 28px;
  align-items: center;
}

.capability-num {
  padding-top: 5px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.capability-copy h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.028em;
  font-weight: 600;
  max-width: 18ch;
}

.capability-copy p {
  margin: 0;
  max-width: 45ch;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.76;
  color: var(--text-sec);
}

.capability-platforms {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.capability-platforms span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--border-card);
  border-radius: 999px;
  background: var(--bg-mid);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-sec);
}

@media (max-width: 1100px) {
  .capabilities-grid {
    column-gap: 32px;
  }

  .capability-copy h3 {
    font-size: clamp(22px, 2.5vw, 28px);
  }
}

@media (max-width: 980px) {
  .capabilities-section {
    padding-top: 88px;
    padding-bottom: 90px;
  }

  .capabilities-grid {
    grid-template-columns: 1fr;
  }

  .capability-card,
  .capability-card--wide {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .capability-card--wide {
    gap: 18px;
  }

  .capability-platforms {
    grid-column: 2;
    justify-content: flex-start;
    margin-top: 2px;
  }
}

@media (max-width: 640px) {
  .capabilities-section {
    padding-top: 72px;
    padding-bottom: 76px;
  }

  .capabilities-shell {
    gap: 30px;
  }

  .capabilities-header {
    gap: 12px;
    padding-bottom: 4px;
  }

  .capability-card,
  .capability-card--wide {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px 0 24px;
  }

  .capability-num {
    padding-top: 0;
  }

  .capability-copy h3 {
    font-size: 22px;
    line-height: 1.16;
    max-width: none;
  }

  .capability-copy p {
    font-size: 16px;
    line-height: 1.72;
    max-width: none;
  }

  .capability-platforms {
    grid-column: auto;
    margin-top: 4px;
    gap: 8px;
  }

  .capability-platforms span {
    min-height: 32px;
    font-size: 16px;
    padding: 6px 10px;
  }
}


/* ── HOME CAPABILITIES MATRIX PASS 21 ── */
.capabilities-section {
  padding-top: 104px;
  padding-bottom: 112px;
}

.capabilities-shell {
  display: grid;
  gap: 34px;
}

.capabilities-title {
  margin: 0;
  max-width: 10.5ch;
}

.capability-matrix {
  border-top: 1px solid var(--border-card);
}

.capability-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 38px;
  border-bottom: 1px solid var(--border-card);
}

.capability-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 24px 0 28px;
}

.capability-num {
  padding-top: 6px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.capability-copy h3 {
  margin: 0 0 10px;
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.9vw, 24px);
  line-height: 1.12;
  letter-spacing: -0.026em;
  font-weight: 600;
}

.capability-copy p {
  margin: 0;
  max-width: 40ch;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-sec);
}

@media (max-width: 1100px) {
  .capability-row {
    column-gap: 28px;
  }

  .capability-copy h3 {
    font-size: clamp(18px, 2.05vw, 23px);
  }
}

@media (max-width: 980px) {
  .capabilities-section {
    padding-top: 88px;
    padding-bottom: 92px;
  }

  .capability-row {
    grid-template-columns: 1fr;
  }

  .capability-item {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 22px 0 24px;
  }

  .capability-row .capability-item:first-child {
    padding-bottom: 10px;
  }

  .capability-row .capability-item:last-child {
    padding-top: 10px;
  }
}

@media (max-width: 640px) {
  .capabilities-section {
    padding-top: 72px;
    padding-bottom: 76px;
  }

  .capabilities-shell {
    gap: 24px;
  }

  .capability-item {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px 0 22px;
  }

  .capability-row .capability-item:first-child,
  .capability-row .capability-item:last-child {
    padding-top: 18px;
    padding-bottom: 22px;
  }

  .capability-num {
    padding-top: 0;
  }

  .capability-copy h3 {
    max-width: none;
    font-size: 21px;
    line-height: 1.14;
  }

  .capability-copy p {
    max-width: none;
    font-size: 16px;
    line-height: 1.74;
  }
}


/* ── HOME AUDIENCE TABS PASS 22 ── */
.audience-section {
  padding-top: 108px;
  padding-bottom: 112px;
}

.audience-shell {
  display: grid;
  gap: 34px;
}

.audience-title {
  margin: 0;
  max-width: 10ch;
}

.audience-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.audience-tablist {
  display: grid;
  border-top: 1px solid var(--border-card);
}

.audience-tab {
  appearance: none;
  border: none;
  border-bottom: 1px solid var(--border-card);
  border-radius: 0;
  background: transparent;
  padding: 16px 0 18px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  text-align: left;
  cursor: pointer;
  color: var(--text-sec);
  transition: color var(--t) var(--ease), transform var(--t) var(--ease);
}

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

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

.audience-tab.active .audience-tab-title {
  transform: translateX(3px);
}

.audience-tab-index {
  padding-top: 4px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.audience-tab-title {
  display: block;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.012em;
  transition: transform var(--t) var(--ease);
}

.audience-panels {
  min-width: 0;
}

.audience-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-card);
  border-radius: 26px;
  background: rgba(255,255,255,.62);
  min-height: 460px;
  padding: 30px 32px 34px;
}

.audience-panel.active {
  display: block;
}

.audience-panel-art {
  position: absolute;
  right: -28px;
  top: -16px;
  width: min(44%, 360px);
  opacity: .32;
  filter: grayscale(1);
  pointer-events: none;
  user-select: none;
}

.audience-panel-header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-card);
  margin-bottom: 24px;
}

.audience-panel-count {
  padding-top: 6px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.audience-panel-header h3 {
  margin: 0 0 8px;
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 600;
}

.audience-panel-subhead {
  margin: 0;
  max-width: 50ch;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-sec);
}

.audience-panel-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.audience-panel-body p {
  margin: 0;
  max-width: 40ch;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.86;
  color: var(--text-sec);
}

.audience-tab:focus-visible {
  outline: 2px solid rgba(51, 86, 232, .28);
  outline-offset: 2px;
}

@media (max-width: 1100px) {
  .audience-layout {
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 30px;
  }

  .audience-panel {
    padding: 26px 26px 30px;
  }

  .audience-panel-header h3 {
    font-size: clamp(26px, 2.7vw, 34px);
  }

  .audience-panel-body {
    gap: 22px;
  }
}

@media (max-width: 980px) {
  .audience-section {
    padding-top: 88px;
    padding-bottom: 92px;
  }

  .audience-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .audience-tablist {
    display: grid;
    grid-template-columns: 1fr;
  }

  .audience-panel {
    min-height: 0;
  }

  .audience-panel-art {
    width: min(36%, 260px);
    right: -24px;
    top: -20px;
  }
}

@media (max-width: 760px) {
  .audience-tablist {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    border-top: none;
    scrollbar-width: none;
  }
  .audience-tablist::-webkit-scrollbar { display: none; }

  .audience-tab {
    flex: 0 0 248px;
    border: 1px solid var(--border-card);
    border-radius: 16px;
    padding: 14px 14px 15px;
    background: rgba(255,255,255,.55);
  }

  .audience-tab.active {
    background: var(--bg-white);
    border-color: var(--border-strong);
  }
}

@media (max-width: 640px) {
  .audience-section {
    padding-top: 72px;
    padding-bottom: 76px;
  }

  .audience-shell {
    gap: 24px;
  }

  .audience-tab {
    flex-basis: 220px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
  }

  .audience-tab-title {
    font-size: 16px;
    line-height: 1.4;
  }

  .audience-panel {
    border-radius: 22px;
    padding: 22px 20px 24px;
  }

  .audience-panel-art {
    display: none;
  }

  .audience-panel-header {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-bottom: 18px;
    margin-bottom: 18px;
  }

  .audience-panel-count {
    padding-top: 0;
  }

  .audience-panel-header h3 {
    font-size: 26px;
    line-height: 1.08;
    max-width: none;
  }

  .audience-panel-subhead {
    font-size: 16px;
    line-height: 1.66;
    max-width: none;
  }

  .audience-panel-body {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .audience-panel-body p {
    max-width: none;
    font-size: 16px;
    line-height: 1.78;
  }
}


/* ── HOME AUDIENCE REFINEMENT PASS 23 ── */
.audience-section {
  padding-top: 112px;
  padding-bottom: 118px;
}

.audience-shell {
  display: grid;
  gap: 28px;
}

.audience-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.audience-title {
  margin: 0;
  max-width: 12ch;
}

.audience-layout {
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.audience-tablist {
  display: grid;
  border-top: 1px solid var(--border-card);
}

.audience-tab {
  position: relative;
  appearance: none;
  border: none;
  border-bottom: 1px solid var(--border-card);
  border-radius: 0;
  background: transparent;
  padding: 14px 0 16px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  text-align: left;
  cursor: pointer;
  color: var(--text-sec);
  transition: color var(--t) var(--ease);
}

.audience-tab::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--text);
  transform: translateY(-50%);
  transition: width var(--t) var(--ease);
}

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

.audience-tab.active::before {
  width: 6px;
}

.audience-tab-title {
  display: block;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.42;
  font-weight: 500;
  letter-spacing: -0.012em;
}

.audience-panel {
  border: 1px solid var(--border-card);
  border-radius: 28px;
  background: rgba(255,255,255,.72);
  padding: 28px 30px 32px;
  min-height: 0;
}

.audience-panel-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 246px;
  gap: 28px;
  align-items: start;
}

.audience-panel-header {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.audience-panel-headcopy h3 {
  margin: 0 0 10px;
  max-width: 15ch;
  font-family: var(--font-display);
  font-size: clamp(30px, 2.65vw, 42px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 600;
}

.audience-panel-subhead {
  margin: 0;
  max-width: 44ch;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.72;
  color: var(--text-sec);
}

.audience-panel-figure {
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 176px;
  padding: 10px;
  border: 1px solid var(--border-card);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(247,245,240,.9), rgba(247,245,240,.55));
}

.audience-panel-art {
  width: 100%;
  height: auto;
  opacity: .66;
  filter: grayscale(1);
}

.audience-panel-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border-card);
}

.audience-panel-body p {
  margin: 0;
  max-width: 67ch;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.84;
  color: var(--text-sec);
}

@media (max-width: 1180px) {
  .audience-layout {
    grid-template-columns: 238px minmax(0, 1fr);
    gap: 28px;
  }

  .audience-panel-top {
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 22px;
  }
}

@media (max-width: 980px) {
  .audience-section {
    padding-top: 90px;
    padding-bottom: 96px;
  }

  .audience-top {
    margin-bottom: 2px;
  }

  .audience-title {
    max-width: 11ch;
  }

  .audience-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .audience-panel {
    padding: 24px 24px 28px;
  }

  .audience-panel-top {
    grid-template-columns: minmax(0, 1fr) 220px;
  }
}

@media (max-width: 760px) {
  .audience-tablist {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    border-top: none;
    scrollbar-width: none;
  }

  .audience-tablist::-webkit-scrollbar {
    display: none;
  }

  .audience-tab {
    flex: 0 0 232px;
    border: 1px solid var(--border-card);
    border-radius: 16px;
    padding: 14px 14px 15px;
    background: rgba(255,255,255,.52);
  }

  .audience-tab::before {
    display: none;
  }

  .audience-tab.active {
    background: var(--bg-white);
    border-color: var(--border-strong);
  }

  .audience-panel-top {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .audience-panel-figure {
    order: -1;
    min-height: 144px;
  }
}

@media (max-width: 640px) {
  .audience-section {
    padding-top: 74px;
    padding-bottom: 80px;
  }

  .audience-shell {
    gap: 22px;
  }

  .audience-title {
    max-width: 9ch;
  }

  .audience-tab {
    flex-basis: 224px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
  }

  .audience-tab-title {
    font-size: 16px;
  }

  .audience-panel {
    border-radius: 24px;
    padding: 20px 18px 22px;
  }

  .audience-panel-header {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .audience-panel-headcopy h3 {
    font-size: 28px;
    line-height: 1.06;
    max-width: none;
  }

  .audience-panel-subhead {
    max-width: none;
    font-size: 16px;
    line-height: 1.66;
  }

  .audience-panel-figure {
    min-height: 128px;
    padding: 8px;
    border-radius: 18px;
  }

  .audience-panel-body {
    gap: 16px;
    margin-top: 18px;
    padding-top: 18px;
  }

  .audience-panel-body p {
    max-width: none;
    font-size: 16px;
    line-height: 1.78;
  }
}


/* ── HOME AUDIENCE EDITORIAL NAVIGATOR PASS 24 ── */
.audience-section {
  padding-top: 116px;
  padding-bottom: 122px;
}

.audience-shell {
  display: grid;
  gap: 34px;
}

.audience-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.audience-title {
  margin: 0;
  max-width: 11.8ch;
}

.audience-layout {
  display: grid;
  grid-template-columns: 274px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.audience-tablist {
  display: grid;
  border-top: 1px solid var(--border-card);
}

.audience-tab {
  position: relative;
  appearance: none;
  border: none;
  border-bottom: 1px solid var(--border-card);
  border-radius: 0;
  background: transparent;
  padding: 17px 0 18px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  text-align: left;
  cursor: pointer;
  color: var(--text-sec);
  transition: color var(--t) var(--ease);
}

.audience-tab::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--text);
  transform: translateY(-50%);
  transition: width var(--t) var(--ease);
}

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

.audience-tab.active::before {
  width: 8px;
}

.audience-tab-index {
  padding-top: 4px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.audience-tab-title {
  display: block;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.42;
  font-weight: 500;
  letter-spacing: -0.012em;
}

.audience-panel {
  border: 1px solid var(--border-card);
  border-radius: 26px;
  background: rgba(255,255,255,.62);
  padding: 34px 36px 38px;
  min-height: 0;
}

.audience-panel-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 248px;
  gap: 34px;
  align-items: start;
}

.audience-panel-header {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.audience-panel-count {
  padding-top: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.audience-panel-headcopy h3 {
  margin: 0 0 12px;
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(31px, 2.8vw, 42px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 600;
}

.audience-panel-subhead {
  margin: 0;
  max-width: 49ch;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.74;
  color: var(--text-sec);
}

.audience-panel-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 176px;
  padding-left: 24px;
  border-left: 1px solid var(--border-card);
}

.audience-panel-art {
  width: 100%;
  max-width: 230px;
  height: auto;
  opacity: .63;
  filter: grayscale(1);
}

.audience-panel-body {
  display: grid;
  grid-template-columns: minmax(0, 68ch);
  gap: 20px;
  margin-top: 28px;
  margin-left: 92px;
  padding-top: 26px;
  border-top: 1px solid var(--border-card);
}

.audience-panel-body p {
  margin: 0;
  max-width: 68ch;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.86;
  color: var(--text-sec);
}

.audience-tab:focus-visible {
  outline: 2px solid rgba(51, 86, 232, .24);
  outline-offset: 2px;
}

@media (max-width: 1180px) {
  .audience-layout {
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 36px;
  }

  .audience-panel {
    padding: 30px 30px 34px;
  }

  .audience-panel-top {
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 28px;
  }

  .audience-panel-body {
    margin-left: 84px;
  }
}

@media (max-width: 980px) {
  .audience-section {
    padding-top: 92px;
    padding-bottom: 98px;
  }

  .audience-title {
    max-width: 10.8ch;
  }

  .audience-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .audience-panel {
    padding: 28px 28px 30px;
  }

  .audience-panel-top {
    grid-template-columns: minmax(0, 1fr) 212px;
    gap: 24px;
  }

  .audience-panel-body {
    margin-left: 0;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .audience-tablist {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    border-top: none;
    scrollbar-width: none;
  }

  .audience-tablist::-webkit-scrollbar {
    display: none;
  }

  .audience-tab {
    flex: 0 0 236px;
    border: 1px solid var(--border-card);
    border-radius: 16px;
    padding: 14px 14px 15px;
    background: rgba(255,255,255,.5);
  }

  .audience-tab::before {
    display: none;
  }

  .audience-tab.active {
    background: var(--bg-white);
    border-color: var(--border-strong);
  }

  .audience-panel-top {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .audience-panel-figure {
    order: -1;
    min-height: 138px;
    padding-left: 0;
    border-left: none;
    border-bottom: 1px solid var(--border-card);
    padding-bottom: 16px;
  }

  .audience-panel-art {
    max-width: 208px;
  }
}

@media (max-width: 640px) {
  .audience-section {
    padding-top: 74px;
    padding-bottom: 82px;
  }

  .audience-shell {
    gap: 24px;
  }

  .audience-title {
    max-width: 8.8ch;
  }

  .audience-tab {
    flex-basis: 224px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
  }

  .audience-tab-title {
    font-size: 16px;
  }

  .audience-panel {
    border-radius: 24px;
    padding: 22px 18px 24px;
  }

  .audience-panel-header {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .audience-panel-count {
    padding-top: 0;
  }

  .audience-panel-headcopy h3 {
    font-size: 28px;
    line-height: 1.06;
    max-width: none;
  }

  .audience-panel-subhead {
    max-width: none;
    font-size: 16px;
    line-height: 1.66;
  }

  .audience-panel-figure {
    min-height: 124px;
    padding-bottom: 14px;
  }

  .audience-panel-art {
    max-width: 186px;
  }

  .audience-panel-body {
    gap: 16px;
    margin-top: 18px;
    padding-top: 18px;
  }

  .audience-panel-body p {
    max-width: none;
    font-size: 16px;
    line-height: 1.78;
  }
}


/* ── HOME AUDIENCE POLISH PASS 25 ── */
.audience-section {
  padding-top: 118px;
  padding-bottom: 126px;
}

.audience-shell {
  gap: 30px;
}

.audience-title {
  max-width: 12.2ch;
}

.audience-layout {
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 42px;
}

.audience-tablist {
  border-top: 1px solid var(--border-card);
}

.audience-tab {
  padding: 16px 14px 17px 0;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 16px;
  color: var(--text-sec);
}

.audience-tab::before {
  left: -14px;
  width: 0;
  height: calc(100% - 14px);
  top: 7px;
  transform: none;
  background: rgba(17, 17, 17, 0.72);
}

.audience-tab::after {
  content: '';
  position: absolute;
  inset: 6px -6px 6px -10px;
  border-radius: 14px;
  background: transparent;
  z-index: -1;
  transition: background var(--t) var(--ease);
}

.audience-tab:hover::after {
  background: rgba(255, 255, 255, 0.42);
}

.audience-tab.active::before {
  width: 1px;
}

.audience-tab.active::after {
  background: rgba(255, 255, 255, 0.74);
}

.audience-tab-index {
  font-size: 16px;
  letter-spacing: 0.14em;
}

.audience-tab-title {
  font-size: 16px;
  line-height: 1.45;
  font-weight: 500;
}

.audience-tab.active .audience-tab-title {
  font-weight: 600;
  color: var(--text);
}

.audience-panel {
  border-radius: 24px;
  background: rgba(255,255,255,.68);
  padding: 36px 38px 40px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}

.audience-panel-top {
  grid-template-columns: minmax(0, 1fr) 228px;
  gap: 32px;
}

.audience-panel-header {
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 18px;
}

.audience-panel-count {
  font-size: 16px;
  letter-spacing: 0.14em;
  padding-top: 8px;
}

.audience-panel-headcopy h3 {
  max-width: 14.5ch;
  margin-bottom: 10px;
  font-size: clamp(30px, 2.7vw, 40px);
  letter-spacing: -0.032em;
}

.audience-panel-subhead {
  max-width: 47ch;
  font-size: 16px;
  line-height: 1.72;
}

.audience-panel-figure {
  min-height: 164px;
  padding-left: 22px;
  border-left: 1px solid rgba(0,0,0,.08);
  opacity: 0.9;
}

.audience-panel-art {
  max-width: 214px;
  opacity: .56;
}

.audience-panel-body {
  grid-template-columns: minmax(0, 64ch);
  gap: 18px;
  margin-top: 26px;
  margin-left: 86px;
  padding-top: 24px;
}

.audience-panel-body p {
  max-width: 64ch;
  font-size: 16px;
  line-height: 1.84;
  color: var(--text-sec);
}

@media (max-width: 1180px) {
  .audience-layout {
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 34px;
  }

  .audience-panel {
    padding: 32px 32px 36px;
  }

  .audience-panel-top {
    grid-template-columns: minmax(0, 1fr) 208px;
    gap: 24px;
  }

  .audience-panel-body {
    margin-left: 82px;
  }
}

@media (max-width: 980px) {
  .audience-section {
    padding-top: 92px;
    padding-bottom: 98px;
  }

  .audience-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .audience-tab {
    padding-right: 0;
  }

  .audience-panel {
    padding: 30px 28px 32px;
  }

  .audience-panel-top {
    grid-template-columns: minmax(0, 1fr) 206px;
    gap: 22px;
  }

  .audience-panel-body {
    margin-left: 0;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .audience-tab {
    flex: 0 0 236px;
    border: 1px solid var(--border-card);
    border-radius: 16px;
    padding: 14px 14px 15px;
    background: rgba(255,255,255,.48);
  }

  .audience-tab::after {
    inset: 0;
    border-radius: 16px;
  }

  .audience-tab.active {
    border-color: rgba(17,17,17,.12);
    background: rgba(255,255,255,.88);
  }

  .audience-panel-top {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .audience-panel-figure {
    order: -1;
    border-left: none;
    border-bottom: 1px solid rgba(0,0,0,.08);
    padding-left: 0;
    padding-bottom: 14px;
    min-height: 132px;
  }

  .audience-panel-art {
    max-width: 196px;
  }
}

@media (max-width: 640px) {
  .audience-section {
    padding-top: 74px;
    padding-bottom: 80px;
  }

  .audience-shell {
    gap: 22px;
  }

  .audience-title {
    max-width: 8.8ch;
  }

  .audience-tab {
    flex-basis: 224px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
  }

  .audience-tab-title {
    font-size: 16px;
  }

  .audience-panel {
    border-radius: 22px;
    padding: 22px 18px 24px;
  }

  .audience-panel-header {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .audience-panel-count {
    padding-top: 0;
  }

  .audience-panel-headcopy h3 {
    font-size: 28px;
    line-height: 1.06;
    max-width: none;
  }

  .audience-panel-subhead {
    max-width: none;
    font-size: 16px;
    line-height: 1.66;
  }

  .audience-panel-body {
    gap: 16px;
    margin-top: 18px;
    padding-top: 18px;
  }

  .audience-panel-body p {
    max-width: none;
    font-size: 16px;
    line-height: 1.78;
  }
}


/* ── HOME AUDIENCE OPEN-LAYOUT PASS 26 ── */
.audience-section {
  padding-top: 118px;
  padding-bottom: 126px;
}

.audience-shell {
  display: grid;
  gap: 28px;
}

.audience-title {
  margin: 0;
  max-width: 12ch;
}

.audience-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.audience-tablist {
  display: grid;
  border-top: 1px solid var(--border-card);
}

.audience-tab {
  position: relative;
  appearance: none;
  border: none;
  border-bottom: 1px solid var(--border-card);
  background: transparent;
  padding: 16px 0 18px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  text-align: left;
  color: var(--text-sec);
  cursor: pointer;
  transition: color var(--t) var(--ease);
}

.audience-tab::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 16px;
  bottom: 16px;
  width: 0;
  background: var(--text);
  transition: width var(--t) var(--ease);
}

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

.audience-tab.active::before {
  width: 1px;
}

.audience-tab-index {
  padding-top: 4px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.audience-tab-title {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.44;
  letter-spacing: -0.012em;
  font-weight: 500;
}

.audience-panels {
  min-width: 0;
}

.audience-panel {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  min-height: 0;
}

.audience-panel-topline {
  margin-bottom: 20px;
}

.audience-panel-count {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.audience-panel-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  gap: 42px;
  align-items: start;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--border-card);
}

.audience-panel-headcopy h3 {
  margin: 0 0 12px;
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(42px, 5.2vw, 64px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  font-weight: 600;
}

.audience-panel-subhead {
  margin: 0;
  max-width: 34ch;
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.58;
  letter-spacing: -0.014em;
  color: var(--text-sec);
}

.audience-panel-iconwrap {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 6px;
}

.audience-panel-icon {
  width: 132px;
  height: 132px;
  opacity: 0.9;
}

.audience-panel-body {
  display: grid;
  grid-template-columns: minmax(0, 70ch);
  gap: 20px;
  padding-top: 28px;
}

.audience-panel-body p {
  margin: 0;
  max-width: 70ch;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.92;
  color: var(--text-sec);
}

.audience-tab:focus-visible {
  outline: 2px solid rgba(51, 86, 232, .24);
  outline-offset: 2px;
}

@media (max-width: 1180px) {
  .audience-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 44px;
  }

  .audience-panel-header {
    grid-template-columns: minmax(0, 1fr) 148px;
    gap: 30px;
  }

  .audience-panel-headcopy h3 {
    font-size: clamp(38px, 5vw, 56px);
  }

  .audience-panel-subhead {
    font-size: 18px;
  }
}

@media (max-width: 980px) {
  .audience-section {
    padding-top: 92px;
    padding-bottom: 98px;
  }

  .audience-layout {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .audience-panel-header {
    grid-template-columns: minmax(0, 1fr) 128px;
    gap: 24px;
  }

  .audience-panel-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .audience-tablist {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    border-top: none;
    scrollbar-width: none;
  }

  .audience-tablist::-webkit-scrollbar { display: none; }

  .audience-tab {
    flex: 0 0 236px;
    border: 1px solid var(--border-card);
    border-radius: 16px;
    padding: 14px 14px 15px;
    background: rgba(255,255,255,.36);
  }

  .audience-tab::before {
    display: none;
  }

  .audience-tab.active {
    border-color: rgba(17,17,17,.12);
    background: rgba(255,255,255,.74);
  }

  .audience-panel-header {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .audience-panel-iconwrap {
    justify-content: flex-start;
    padding-top: 0;
  }

  .audience-panel-icon {
    width: 112px;
    height: 112px;
  }
}

@media (max-width: 640px) {
  .audience-section {
    padding-top: 74px;
    padding-bottom: 82px;
  }

  .audience-shell {
    gap: 22px;
  }

  .audience-title {
    max-width: 8.8ch;
  }

  .audience-tab {
    flex-basis: 224px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
  }

  .audience-tab-title {
    font-size: 16px;
  }

  .audience-panel-topline {
    margin-bottom: 14px;
  }

  .audience-panel-headcopy h3 {
    font-size: 36px;
    line-height: 0.98;
    max-width: none;
  }

  .audience-panel-subhead {
    max-width: none;
    font-size: 16px;
    line-height: 1.56;
  }

  .audience-panel-icon {
    width: 96px;
    height: 96px;
  }

  .audience-panel-body {
    gap: 16px;
    padding-top: 18px;
  }

  .audience-panel-body p {
    max-width: none;
    font-size: 16px;
    line-height: 1.82;
  }
}


/* ── HOME AUDIENCE LUXURY REFINEMENT PASS 27 ── */
.audience-section {
  padding-top: 122px;
  padding-bottom: 132px;
}

.audience-shell {
  gap: 32px;
}

.audience-title {
  max-width: 11.2ch;
}

.audience-layout {
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.audience-tablist {
  border-top: 1px solid var(--border-card);
}

.audience-tab {
  padding: 18px 0 20px;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 16px;
  color: var(--text-sec);
}

.audience-tab::before {
  left: -14px;
  top: 18px;
  bottom: 18px;
  width: 0;
  background: rgba(17, 17, 17, 0.72);
}

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

.audience-tab.active::before {
  width: 1px;
}

.audience-tab-index {
  padding-top: 5px;
  font-size: 16px;
  letter-spacing: 0.16em;
}

.audience-tab-title {
  font-size: 16px;
  line-height: 1.46;
  font-weight: 500;
}

.audience-tab.active .audience-tab-title {
  font-weight: 600;
}

.audience-panel {
  padding: 0;
}

.audience-panel-topline {
  margin-bottom: 14px;
}

.audience-panel-count {
  font-size: 16px;
  letter-spacing: 0.16em;
}

.audience-panel-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 156px;
  gap: 40px;
  align-items: end;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--border-card);
}

.audience-panel-headcopy {
  display: grid;
  gap: 12px;
}

.audience-panel-headcopy h3 {
  margin: 0;
  max-width: 12ch;
  font-family: var(--font-display);
  font-size: clamp(46px, 5.4vw, 72px);
  line-height: 0.94;
  letter-spacing: -0.05em;
  font-weight: 600;
  text-wrap: balance;
}

.audience-panel-subhead {
  margin: 0;
  max-width: 35ch;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.015em;
  color: var(--text-sec);
}

.audience-panel-iconwrap {
  justify-content: center;
  align-items: center;
  padding-top: 0;
  min-height: 128px;
}

.audience-panel-icon {
  width: 124px;
  height: 124px;
  opacity: 0.84;
}

/* Remove previous top border from body area so there is only one separator */
.audience-panel-body {
  display: grid;
  grid-template-columns: minmax(0, 66ch);
  gap: 18px;
  padding-top: 30px;
  margin-top: 0;
  border-top: none;
  justify-content: start;
}

.audience-panel-body p {
  max-width: 66ch;
  font-size: 16px;
  line-height: 1.96;
  color: var(--text-sec);
}

@media (max-width: 1180px) {
  .audience-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 52px;
  }

  .audience-panel-header {
    grid-template-columns: minmax(0, 1fr) 144px;
    gap: 30px;
  }

  .audience-panel-headcopy h3 {
    font-size: clamp(42px, 5.2vw, 62px);
  }

  .audience-panel-subhead {
    font-size: 17px;
  }
}

@media (max-width: 980px) {
  .audience-section {
    padding-top: 96px;
    padding-bottom: 104px;
  }

  .audience-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .audience-panel-topline {
    margin-bottom: 12px;
  }

  .audience-panel-header {
    grid-template-columns: minmax(0, 1fr) 136px;
    gap: 24px;
    padding-bottom: 24px;
  }

  .audience-panel-body {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 24px;
  }
}

@media (max-width: 760px) {
  .audience-tab {
    flex: 0 0 236px;
    border: 1px solid var(--border-card);
    border-radius: 16px;
    padding: 14px 14px 15px;
    background: rgba(255,255,255,.36);
  }

  .audience-tab.active {
    background: rgba(255,255,255,.78);
    border-color: rgba(17,17,17,.12);
  }

  .audience-panel-header {
    grid-template-columns: 1fr 104px;
    gap: 18px;
    align-items: start;
  }

  .audience-panel-headcopy h3 {
    font-size: clamp(38px, 8vw, 56px);
    max-width: none;
  }

  .audience-panel-subhead {
    max-width: none;
    font-size: 16px;
  }

  .audience-panel-iconwrap {
    justify-content: flex-end;
    min-height: 96px;
  }

  .audience-panel-icon {
    width: 92px;
    height: 92px;
  }

  .audience-panel-body {
    padding-top: 20px;
  }
}

@media (max-width: 640px) {
  .audience-section {
    padding-top: 76px;
    padding-bottom: 84px;
  }

  .audience-shell {
    gap: 24px;
  }

  .audience-title {
    max-width: 8.8ch;
  }

  .audience-tab {
    flex-basis: 224px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
  }

  .audience-tab-title {
    font-size: 16px;
  }

  .audience-panel-topline {
    margin-bottom: 10px;
  }

  .audience-panel-header {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-bottom: 18px;
  }

  .audience-panel-headcopy {
    gap: 10px;
  }

  .audience-panel-headcopy h3 {
    font-size: 38px;
    line-height: 0.98;
  }

  .audience-panel-subhead {
    font-size: 16px;
    line-height: 1.56;
  }

  .audience-panel-iconwrap {
    justify-content: flex-start;
    min-height: 0;
  }

  .audience-panel-icon {
    width: 84px;
    height: 84px;
  }

  .audience-panel-body {
    gap: 16px;
    padding-top: 18px;
  }

  .audience-panel-body p {
    font-size: 16px;
    line-height: 1.84;
    max-width: none;
  }
}


/* ── HOME AUDIENCE MICRO-TYPOGRAPHY PASS 28 ── */
.audience-section {
  padding-top: 120px;
  padding-bottom: 128px;
}

.audience-shell {
  gap: 30px;
}

.audience-title {
  max-width: 11ch;
}

.audience-layout {
  grid-template-columns: 228px minmax(0, 1fr);
  gap: 60px;
}

.audience-tab {
  padding: 17px 0 19px;
}

.audience-tab-index {
  padding-top: 4px;
}

.audience-tab-title {
  font-size: 16px;
  line-height: 1.44;
}

.audience-panel-topline {
  margin-bottom: 12px;
}

.audience-panel-header {
  grid-template-columns: minmax(0, 1fr) 148px;
  gap: 34px;
  align-items: center;
  padding-bottom: 28px;
}

.audience-panel-headcopy {
  gap: 10px;
}

.audience-panel-headcopy h3 {
  max-width: 11.5ch;
  font-size: clamp(44px, 5vw, 66px);
  line-height: 0.95;
  letter-spacing: -0.048em;
}

.audience-panel-subhead {
  max-width: 33ch;
  font-size: 17px;
  line-height: 1.58;
}

.audience-panel-iconwrap {
  min-height: 116px;
}

.audience-panel-icon {
  width: 116px;
  height: 116px;
  opacity: 0.8;
}

.audience-panel-body {
  grid-template-columns: minmax(0, 64ch);
  gap: 16px;
  padding-top: 26px;
}

.audience-panel-body p {
  max-width: 64ch;
  font-size: 16px;
  line-height: 1.9;
}

@media (max-width: 1180px) {
  .audience-layout {
    grid-template-columns: 218px minmax(0, 1fr);
    gap: 48px;
  }

  .audience-panel-header {
    grid-template-columns: minmax(0, 1fr) 136px;
    gap: 28px;
  }

  .audience-panel-headcopy h3 {
    font-size: clamp(40px, 4.8vw, 58px);
  }

  .audience-panel-subhead {
    font-size: 16.5px;
  }

  .audience-panel-icon {
    width: 108px;
    height: 108px;
  }
}

@media (max-width: 980px) {
  .audience-section {
    padding-top: 94px;
    padding-bottom: 102px;
  }

  .audience-layout {
    gap: 26px;
  }

  .audience-panel-header {
    grid-template-columns: minmax(0, 1fr) 126px;
    gap: 22px;
    padding-bottom: 22px;
  }

  .audience-panel-headcopy h3 {
    font-size: clamp(40px, 6vw, 54px);
  }

  .audience-panel-subhead {
    max-width: 36ch;
    font-size: 16px;
  }

  .audience-panel-body {
    padding-top: 22px;
  }
}

@media (max-width: 760px) {
  .audience-panel-topline {
    margin-bottom: 10px;
  }

  .audience-panel-header {
    grid-template-columns: 1fr 96px;
    gap: 16px;
    padding-bottom: 18px;
  }

  .audience-panel-headcopy {
    gap: 8px;
  }

  .audience-panel-headcopy h3 {
    font-size: clamp(36px, 8vw, 50px);
    line-height: 0.98;
  }

  .audience-panel-subhead {
    font-size: 16px;
    line-height: 1.56;
  }

  .audience-panel-icon {
    width: 86px;
    height: 86px;
  }

  .audience-panel-body {
    gap: 15px;
    padding-top: 18px;
  }

  .audience-panel-body p {
    font-size: 16px;
    line-height: 1.82;
  }
}

@media (max-width: 640px) {
  .audience-section {
    padding-top: 74px;
    padding-bottom: 82px;
  }

  .audience-shell {
    gap: 22px;
  }

  .audience-panel-header {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-bottom: 16px;
  }

  .audience-panel-headcopy h3 {
    font-size: 36px;
    max-width: none;
  }

  .audience-panel-subhead {
    max-width: none;
    font-size: 16px;
  }

  .audience-panel-iconwrap {
    justify-content: flex-start;
    min-height: 0;
  }

  .audience-panel-icon {
    width: 78px;
    height: 78px;
  }

  .audience-panel-body {
    padding-top: 16px;
  }

  .audience-panel-body p {
    font-size: 16px;
    line-height: 1.8;
  }
}


/* ── HOME WORK STORIES SECTION ── */
.audience-section {
  padding-top: 108px;
  padding-bottom: 112px;
}

.story-stack {
  display: grid;
  gap: 34px;
}

.story-header {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(300px, 0.7fr);
  column-gap: 42px;
  row-gap: 18px;
  align-items: end;
}

.story-header .section-kicker {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.story-title {
  max-width: 13ch;
}

.story-intro {
  max-width: 52ch;
  align-self: end;
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.story-card {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 18px;
  min-height: 100%;
  padding: 24px 22px 22px;
  border: 1px solid rgba(26, 25, 23, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.54);
  box-shadow: 0 18px 44px rgba(26, 25, 23, 0.045);
}

.story-card--primary {
  background: var(--bg-white);
  border-color: rgba(51, 86, 232, 0.22);
  box-shadow: 0 22px 56px rgba(51, 86, 232, 0.08);
}

.story-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.story-label {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px;
  border: 1px solid var(--border-card);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.58);
  color: var(--text-mute);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.story-icon {
  width: 58px;
  height: 58px;
  opacity: 0.82;
  flex: 0 0 auto;
}

.story-card h3 {
  margin: 4px 0 0;
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.038em;
  line-height: 1;
  text-wrap: balance;
}

.story-lede {
  margin: 0;
  color: var(--text-sec);
  font-size: 16px;
  letter-spacing: -0.012em;
  line-height: 1.7;
}

.story-flow {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--border-card);
}

.story-flow div {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-card);
}

.story-flow div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.story-flow dt {
  color: var(--text-mute);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.35;
  text-transform: uppercase;
}

.story-flow dd {
  margin: 0;
  color: var(--text-sec);
  font-size: 16px;
  line-height: 1.62;
}

.story-proof {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--border-card);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.42);
}

.story-proof p {
  margin: 0;
  max-width: 76ch;
  color: var(--text-sec);
  font-size: 16px;
  line-height: 1.7;
}

.story-proof strong {
  color: var(--text);
  font-weight: 700;
}

@media (max-width: 1080px) {
  .story-header {
    grid-template-columns: 1fr;
  }

  .story-title {
    max-width: 16ch;
  }

  .story-intro {
    max-width: 70ch;
  }

  .story-grid {
    grid-template-columns: 1fr;
  }

  .story-card {
    grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
  }

  .story-card-top,
  .story-card h3,
  .story-lede {
    grid-column: 1;
  }

  .story-flow {
    grid-column: 2;
    grid-row: 1 / span 4;
  }
}

@media (max-width: 760px) {
  .audience-section {
    padding-top: 78px;
    padding-bottom: 84px;
  }

  .story-stack {
    gap: 24px;
  }

  .story-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px 18px 18px;
    border-radius: 18px;
  }

  .story-card-top,
  .story-card h3,
  .story-lede,
  .story-flow {
    grid-column: auto;
    grid-row: auto;
  }

  .story-card h3 {
    max-width: none;
    font-size: 29px;
    line-height: 1.04;
  }

  .story-flow div {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 0;
  }

  .story-proof {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 17px 16px;
  }

  .story-proof .btn-compact {
    width: fit-content;
  }
}


/* ── HOME WORK STORIES SECTION — 5 STORY LEDGER PASS ── */
.audience-section {
  padding-top: 108px;
  padding-bottom: 116px;
  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 34%),
    var(--bg-mid);
}

.story-shell {
  display: grid;
  gap: 38px;
}

.story-head {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(320px, .68fr);
  gap: 36px;
  align-items: end;
}

.story-title {
  max-width: 12.5ch;
  margin: 0;
}

.story-intro {
  max-width: 58ch;
  margin: 0;
  color: var(--text-sec);
}

.story-ledger {
  display: grid;
  border-top: 1px solid rgba(26,25,23,.14);
  border-bottom: 1px solid rgba(26,25,23,.14);
}

.story-row {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1fr);
  gap: 38px;
  padding: 30px 0;
  border-bottom: 1px solid rgba(26,25,23,.11);
}

.story-row:last-child {
  border-bottom: 0;
}

.story-row-meta {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.story-index {
  padding-top: 8px;
  color: var(--text-mute);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .12em;
}

.story-identity {
  display: grid;
  gap: 14px;
}

.story-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.story-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid rgba(26,25,23,.12);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.48);
  color: var(--text-sec);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}

.story-iconbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(26,25,23,.1);
  border-radius: 16px;
  background: rgba(255,255,255,.4);
  flex: 0 0 auto;
}

.story-icon {
  width: 28px;
  height: 28px;
  opacity: .76;
}

.story-identity h3 {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.08;
  text-wrap: balance;
}

.story-lede {
  margin: 0;
  max-width: 42ch;
  color: var(--text-sec);
  font-size: 16px;
  letter-spacing: -.01em;
  line-height: 1.72;
}

.story-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-self: stretch;
  margin: 0;
}

.story-step {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 172px;
  padding: 18px 16px 17px;
  border: 1px solid rgba(26,25,23,.1);
  border-radius: 18px;
  background: rgba(255,255,255,.42);
  box-shadow: 0 14px 34px rgba(26,25,23,.035);
}

.story-step--active {
  border-color: rgba(51,86,232,.2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.48)),
    rgba(51,86,232,.045);
  box-shadow: 0 18px 44px rgba(51,86,232,.06);
}

.story-step dt {
  color: var(--text-mute);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.story-step--active dt {
  color: var(--blue);
}

.story-step dd {
  margin: 0;
  color: var(--text-sec);
  font-size: 16px;
  line-height: 1.68;
}

.story-proof {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid rgba(26,25,23,.11);
  border-radius: 20px;
  background: rgba(255,255,255,.46);
  box-shadow: 0 14px 36px rgba(26,25,23,.035);
}

.story-proof p {
  margin: 0;
  max-width: 82ch;
  color: var(--text-sec);
  font-size: 16px;
  line-height: 1.72;
}

.story-proof strong {
  color: var(--text);
  font-weight: 700;
}

@media (max-width: 1120px) {
  .story-head,
  .story-row {
    grid-template-columns: 1fr;
  }

  .story-title {
    max-width: 15ch;
  }

  .story-intro {
    max-width: 72ch;
  }

  .story-row {
    gap: 22px;
  }

  .story-row-meta {
    max-width: 720px;
  }
}

@media (max-width: 820px) {
  .story-steps {
    grid-template-columns: 1fr;
  }

  .story-step {
    min-height: 0;
    padding: 16px 15px;
  }
}

@media (max-width: 640px) {
  .audience-section {
    padding-top: 72px;
    padding-bottom: 80px;
  }

  .story-shell {
    gap: 28px;
  }

  .story-head {
    gap: 18px;
  }

  .story-title {
    max-width: none;
  }

  .story-row {
    padding: 24px 0;
  }

  .story-row-meta {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .story-index {
    padding-top: 0;
  }

  .story-card-top {
    align-items: flex-start;
  }

  .story-identity h3 {
    max-width: none;
    font-size: 25px;
    line-height: 1.1;
  }

  .story-lede {
    max-width: none;
    font-size: 16px;
    line-height: 1.7;
  }

  .story-proof {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 17px 16px;
  }

  .story-proof .btn-compact {
    width: fit-content;
  }
}


/* ── HOME AUDIENCE LEDGER — SWISS TYPOGRAPHIC PASS ── */
.audience-section {
  padding-top: 112px;
  padding-bottom: 120px;
  background: var(--bg-mid);
}

.audience-ledger-shell {
  display: grid;
  gap: 46px;
}

.audience-ledger-head {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  column-gap: 48px;
  align-items: start;
  border-top: 1px solid rgba(26,25,23,.22);
  padding-top: 22px;
}

.audience-ledger-kicker {
  color: var(--text-mute);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.audience-ledger-titleblock {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(260px, .5fr);
  column-gap: 38px;
  align-items: end;
}

.audience-ledger-title {
  margin: 0;
  max-width: 11.5ch;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: clamp(42px, 6.2vw, 76px);
  font-weight: 650;
  letter-spacing: -.055em;
  line-height: .92;
}

.audience-ledger-intro {
  margin: 0 0 4px;
  max-width: 42ch;
  color: var(--text-sec);
  font-size: 16px;
  letter-spacing: -.012em;
  line-height: 1.72;
}

.audience-ledger {
  display: grid;
  border-top: 1px solid rgba(26,25,23,.22);
}

.audience-case {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  column-gap: 48px;
  padding: 34px 0 38px;
  border-bottom: 1px solid rgba(26,25,23,.18);
}

.audience-case-number {
  color: var(--text-mute);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.3;
}

.audience-case-main {
  display: grid;
  grid-template-columns: minmax(230px, .5fr) minmax(0, .72fr);
  grid-template-areas:
    "head body"
    "flow flow";
  column-gap: 38px;
  row-gap: 28px;
}

.audience-case-head {
  grid-area: head;
  display: grid;
  align-content: start;
  gap: 13px;
}

.audience-case-head h3 {
  margin: 0;
  max-width: 13ch;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: clamp(25px, 3.4vw, 39px);
  font-weight: 560;
  letter-spacing: -.045em;
  line-height: .98;
}

.audience-case-head p {
  margin: 0;
  max-width: 32ch;
  color: var(--text-sec);
  font-size: 16px;
  font-weight: 520;
  letter-spacing: -.018em;
  line-height: 1.55;
}

.audience-case-body {
  grid-area: body;
  display: grid;
  gap: 16px;
  max-width: 64ch;
}

.audience-case-body p {
  margin: 0;
  color: var(--text-sec);
  font-size: 16px;
  letter-spacing: -.012em;
  line-height: 1.78;
}

.audience-case-flow {
  grid-area: flow;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid rgba(26,25,23,.16);
}

.audience-case-flow div {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 116px;
  padding: 17px 22px 0 0;
  border-right: 1px solid rgba(26,25,23,.12);
}

.audience-case-flow div:last-child {
  border-right: 0;
  padding-right: 0;
}

.audience-case-flow dt {
  color: var(--text-mute);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.audience-case-flow dd {
  margin: 0;
  max-width: 28ch;
  color: var(--text-sec);
  font-size: 16px;
  letter-spacing: -.01em;
  line-height: 1.55;
}

.audience-case-flow div:nth-child(2) dt {
  color: var(--blue);
}

@media (max-width: 1120px) {
  .audience-ledger-titleblock,
  .audience-case-main {
    grid-template-columns: 1fr;
  }

  .audience-case-main {
    grid-template-areas:
      "head"
      "body"
      "flow";
  }

  .audience-ledger-title,
  .audience-case-head h3,
  .audience-case-head p,
  .audience-ledger-intro,
  .audience-case-body {
    max-width: none;
  }
}

@media (max-width: 820px) {
  .audience-ledger-head,
  .audience-case {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }

  .audience-ledger-title {
    font-size: clamp(40px, 12vw, 64px);
  }

  .audience-case {
    padding: 30px 0 34px;
  }

  .audience-case-flow {
    grid-template-columns: 1fr;
  }

  .audience-case-flow div {
    min-height: 0;
    padding: 14px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(26,25,23,.12);
  }

  .audience-case-flow div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .audience-case-flow dd {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .audience-section {
    padding-top: 74px;
    padding-bottom: 82px;
  }

  .audience-ledger-shell {
    gap: 34px;
  }

  .audience-ledger-head {
    padding-top: 18px;
  }

  .audience-ledger-titleblock {
    gap: 18px;
  }

  .audience-ledger-title {
    max-width: 8.6ch;
  }

  .audience-case-main {
    row-gap: 22px;
  }

  .audience-case-head h3 {
    max-width: 12.5ch;
    font-size: 31px;
  }

  .audience-case-body p {
    font-size: 16px;
    line-height: 1.74;
  }
}

/* ── HOME PLANS SECTION — SWISS LEDGER PASS ── */
.plans-section {
  padding-top: 112px;
  padding-bottom: 116px;
  background: var(--bg-white);
  border-top: 1px solid rgba(26,25,23,.1);
}

.plans-shell {
  display: grid;
  gap: 44px;
}

.plans-head {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  column-gap: 48px;
  align-items: start;
  border-top: 1px solid rgba(26,25,23,.22);
  padding-top: 22px;
}

.plans-kicker {
  color: var(--text-mute);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.plans-titleblock {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(220px, .36fr);
  column-gap: 38px;
  align-items: end;
}

.plans-title {
  margin: 0;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: clamp(48px, 7vw, 86px);
  font-weight: 650;
  letter-spacing: -.06em;
  line-height: .9;
}

.plans-map {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: end;
  gap: 18px;
  color: var(--text-mute);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.plans-map span {
  position: relative;
  white-space: nowrap;
}

.plans-map span + span::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -11px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(26,25,23,.22);
  transform: translateY(-50%);
}

.plans-ledger {
  display: grid;
  border-top: 1px solid rgba(26,25,23,.22);
}

.plan-row {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(170px, .34fr) minmax(0, 1fr) minmax(132px, .22fr);
  column-gap: 34px;
  align-items: start;
  padding: 32px 0 34px;
  border-bottom: 1px solid rgba(26,25,23,.18);
}

.plan-row--pro::before {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 0;
  width: 3px;
  background: var(--blue);
}

.plan-index {
  padding-top: 7px;
  color: var(--text-mute);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.3;
}

.plan-row--pro .plan-index {
  color: var(--blue);
}

.plan-head {
  display: grid;
  gap: 12px;
  align-content: start;
}

.plan-head h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 560;
  letter-spacing: -.052em;
  line-height: .94;
}

.plan-head p {
  margin: 0;
  max-width: 25ch;
  color: var(--text-sec);
  font-size: 16px;
  font-weight: 520;
  letter-spacing: -.018em;
  line-height: 1.55;
}

.plan-copy {
  display: grid;
  gap: 16px;
  max-width: 70ch;
}

.plan-copy p {
  margin: 0;
  color: var(--text-sec);
  font-size: 16px;
  letter-spacing: -.012em;
  line-height: 1.78;
}

.plan-choice {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 18px;
  padding-top: 15px;
  border-top: 1px solid rgba(26,25,23,.13);
}

.plan-choice span:first-child {
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.45;
  text-transform: uppercase;
}

.plan-action {
  display: grid;
  justify-items: stretch;
  padding-top: 4px;
}

.plan-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 42px;
  padding: 12px 0;
  border-top: 1px solid rgba(26,25,23,.24);
  border-bottom: 1px solid rgba(26,25,23,.24);
  color: var(--text);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: .06em;
  line-height: 1.25;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.plan-link::after {
  content: '→';
  color: var(--text-mute);
  font-size: 16px;
  line-height: 1;
  transition: color var(--t) var(--ease), transform var(--t) var(--ease);
}

.plan-link:hover,
.plan-link:focus-visible {
  color: var(--blue);
  border-color: rgba(51,86,232,.5);
}

.plan-link:hover::after,
.plan-link:focus-visible::after {
  color: var(--blue);
  transform: translateX(3px);
}

.plan-link:focus-visible {
  outline: 2px solid rgba(51,86,232,.28);
  outline-offset: 4px;
}

.plan-link--primary {
  color: var(--blue);
  border-color: rgba(51,86,232,.45);
}

.plan-link--primary::after {
  color: var(--blue);
}

@media (max-width: 1120px) {
  .plans-titleblock,
  .plan-row {
    grid-template-columns: 1fr;
  }

  .plans-titleblock {
    gap: 18px;
  }

  .plans-map {
    justify-content: start;
  }

  .plan-row {
    row-gap: 18px;
    padding-left: 18px;
  }

  .plan-row:not(.plan-row--pro) {
    padding-left: 0;
  }

  .plan-head p,
  .plan-copy {
    max-width: none;
  }

  .plan-action {
    justify-items: start;
    max-width: 220px;
  }
}

@media (max-width: 820px) {
  .plans-head {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }

  .plans-title {
    font-size: clamp(42px, 13vw, 72px);
  }

  .plans-map {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .plans-map span + span::before {
    display: none;
  }

  .plan-choice {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

@media (max-width: 640px) {
  .plans-section {
    padding-top: 74px;
    padding-bottom: 82px;
  }

  .plans-shell {
    gap: 34px;
  }

  .plans-head {
    padding-top: 18px;
  }

  .plan-row {
    padding-top: 28px;
    padding-bottom: 30px;
  }

  .plan-head h3 {
    font-size: 34px;
  }

  .plan-copy p {
    font-size: 16px;
    line-height: 1.74;
  }
}
/* ── PRODUCT-NATIVE WEBSITE SYSTEM ─────────────────────────────────
   Aligns the marketing site to the Compose app language:
   flat workspace surfaces, thin rules, compact radii, restrained blue,
   document typography, and one shared homepage ledger system.
------------------------------------------------------------------- */

:root {
  /* App-aligned surfaces */
  --bg-white: #FFFFFF;
  --bg-light: #F5F5F5;
  --bg-mid: #F5F5F5;
  --bg-mid-2: #ECEAE6;

  /* App-aligned borders and fills */
  --border: #E4E0D8;
  --border-card: #E4E0D8;
  --border-strong: #C2BDB5;
  --fill-subtle: rgba(26,25,23,.04);
  --fill-muted: rgba(26,25,23,.07);
  --fill-hover: rgba(26,25,23,.05);
  --fill-active: rgba(26,25,23,.09);

  /* App-aligned text and accent */
  --text: #1A1917;
  --text-sec: #4A4640;
  --text-mute: #7B7670;
  --blue: #3356E8;
  --blue-text: #FFFFFF;
  --blue-sub: rgba(51,86,232,.075);
  --blue-sub-text: #3356E8;
  --hover: var(--fill-hover);

  /* App-aligned geometry */
  --r-md: 6px;
  --r-xl: 10px;
  --r-pill: 999px;
  --r-btn: 6px;

  /* App-aligned interaction timing */
  --t: 140ms;

  /* Shared homepage system */
  --home-wrap: 1080px;
  --home-section-y: clamp(76px, 9vw, 108px);
  --home-section-gap: clamp(30px, 4vw, 42px);
  --home-ledger-index: 34px;
  --home-ledger-index-gap: 20px;
  --home-ledger-side: minmax(220px, 0.42fr);
  --home-ledger-body: minmax(0, 0.72fr);
  --home-ledger-content-gap: clamp(34px, 4.5vw, 52px);
  --home-ledger-row-y: clamp(28px, 3.8vw, 38px);
  --home-text-measure: 64ch;

  /* Compatibility aliases */
  --surface: var(--bg-white);
  --surface-soft: var(--bg-light);
  --line: var(--border);
  --line-soft: var(--border-card);
  --text-muted: var(--text-mute);
  --accent: var(--blue);
  --bg-soft: var(--blue-sub);
  --bg: var(--bg-white);
  --font-sans: var(--font-ui);
}

/* Global product-language tightening */
html {
  background: var(--bg-light);
}

body {
  color: var(--text);
  background: var(--bg-white);
}

.wrap,
.hero {
  max-width: var(--home-wrap);
}

a {
  text-underline-offset: 0.18em;
}

/* Header: closer to the app topbar — compact, flat, precise. */
#site-hdr {
  height: 48px;
  padding: 0 20px;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  backdrop-filter: saturate(1.1) blur(10px);
}

.hdr-brand {
  height: 100%;
  gap: 8px;
}

.hdr-brand-name,
.footer-brand-name {
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.hdr-brand-sub,
.footer-brand-sub {
  color: var(--blue);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: .86;
}

.hdr-brand-sep,
.footer-brand-sep {
  width: 1px;
  height: 14px;
  background: var(--border-strong);
}

.hdr-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

:is(.hbtn-support, .hbtn-launch) {
  min-height: 32px;
  padding: 0 10px;
  border-radius: var(--r-btn);
  font-size: 16px;
  font-weight: 560;
  letter-spacing: -0.014em;
  box-shadow: none;
  transform: none;
}

:is(.hbtn-support, .hbtn-launch) svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.8;
}

.hbtn-support {
  color: var(--text-sec);
  background: transparent;
  border: 1px solid transparent;
}

.hbtn-support:hover {
  color: var(--text);
  background: var(--fill-hover);
  border-color: transparent;
}

.hbtn-launch {
  color: var(--blue);
  background: var(--blue-sub);
  border: 1px solid rgba(51,86,232,.14);
}

.hbtn-launch:hover {
  color: var(--blue);
  background: rgba(51,86,232,.11);
  border-color: rgba(51,86,232,.22);
  transform: none;
}

/* Buttons: flat app-like controls, not campaign buttons. */
:is(.btn-cta, .btn-ghost, .road-notify) {
  min-height: 40px;
  border-radius: var(--r-btn);
  box-shadow: none !important;
  transform: none !important;
  transition:
    background var(--t) var(--ease),
    color var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

:is(.btn-cta, .road-notify) {
  background: var(--blue);
  border: 1px solid var(--blue);
  color: var(--blue-text);
}

:is(.btn-cta, .road-notify):hover {
  background: #3356E8;
  border-color: #3356E8;
  transform: none;
}

.btn-ghost {
  color: var(--text-sec);
  background: var(--bg-white);
  border: 1px solid var(--border);
}

.btn-ghost:hover {
  color: var(--text);
  background: var(--fill-hover);
  border-color: var(--border-strong);
}

/* Hero: more workspace-native and less illustrative. */
.hero {
  padding-top: clamp(70px, 9vw, 104px);
  padding-bottom: clamp(66px, 8vw, 96px);
  grid-template-columns: minmax(0, .93fr) minmax(420px, 1.07fr);
  gap: clamp(44px, 6vw, 68px);
}

.hero-headline {
  max-width: 10.8ch;
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.hero-body {
  max-width: 58ch;
}

.hero-body p {
  color: var(--text-sec);
  font-size: 16px;
  line-height: 1.78;
}

.hero-gallery {
  border-radius: 10px;
  background: var(--bg-light);
  box-shadow: none;
}

.hero-gallery-main {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-light);
  box-shadow: none;
}

.hero-gallery-image {
  border-radius: 9px;
}

.hero-gallery-thumbs {
  gap: 8px;
  margin-top: 10px;
}

.hero-thumb {
  border-radius: 6px;
  border-color: var(--border);
  background: var(--bg-white);
  box-shadow: none;
}

.hero-thumb:hover {
  background: var(--fill-hover);
  border-color: var(--border-strong);
  transform: none;
}

.hero-thumb.is-active {
  border-color: rgba(51,86,232,.42);
  box-shadow: 0 0 0 2px rgba(51,86,232,.08);
}

/* Shared homepage section system */
:is(.capabilities-section, .audience-section, .plans-section, .faq-section) {
  padding-top: var(--home-section-y);
  padding-bottom: var(--home-section-y);
}

.capabilities-section,
.plans-section,
.faq-section {
  background: var(--bg-white);
}

.audience-section {
  background: var(--bg-light);
}

.audience-section,
.plans-section,
.faq-section {
  border-top: 1px solid var(--border-card);
}

:is(.capabilities-shell, .audience-ledger-shell, .plans-shell, .faq-ledger-shell) {
  display: grid;
  gap: var(--home-section-gap);
}

:is(.audience-ledger-head, .plans-head, .faq-ledger-head) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  margin: 0;
  border: 0;
}

:is(.audience-ledger-titleblock, .plans-titleblock, .faq-ledger-titleblock) {
  display: block;
  margin: 0;
  padding: 0;
}

:is(.capabilities-title, .audience-ledger-title, .plans-title, .faq-ledger-title) {
  margin: 0;
  max-width: 12.5ch;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: clamp(36px, 4.7vw, 56px);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1.02;
  text-wrap: balance;
}

.faq-ledger-title {
  max-width: none;
}

:is(.capability-matrix, .audience-ledger, .plans-ledger, .faq-ledger-list) {
  border-top: 1px solid var(--border-card);
}

/* Capabilities: preserve the final two-column section while aligning its rhythm. */
.capability-row {
  column-gap: var(--home-ledger-content-gap);
  border-bottom: 1px solid var(--border-card);
}

.capability-item {
  grid-template-columns: var(--home-ledger-index) minmax(0, 1fr);
  gap: var(--home-ledger-index-gap);
  padding-top: calc(var(--home-ledger-row-y) - 5px);
  padding-bottom: calc(var(--home-ledger-row-y) + 1px);
}

.capability-num {
  padding-top: 6px;
  color: var(--text-mute);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.3;
}

.capability-copy h3 {
  max-width: 19ch;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.13;
  text-wrap: balance;
}

.capability-copy p {
  max-width: 38ch;
  color: var(--text-sec);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.72;
}

/* Shared lower-page ledger: Audience, Plans, FAQ. */
:is(.audience-case, .plan-row, .faq-section .faq-item) {
  display: grid;
  grid-template-columns:
    var(--home-ledger-index)
    var(--home-ledger-index-gap)
    var(--home-ledger-side)
    var(--home-ledger-content-gap)
    var(--home-ledger-body);
  column-gap: 0;
  align-items: start;
  padding-top: var(--home-ledger-row-y);
  padding-bottom: var(--home-ledger-row-y);
  border-bottom: 1px solid var(--border-card);
}

.audience-case-main {
  display: grid;
  grid-column: 3 / -1;
  grid-template-columns:
    var(--home-ledger-side)
    var(--home-ledger-content-gap)
    var(--home-ledger-body);
  column-gap: 0;
  min-width: 0;
}

:is(.audience-case-number, .plan-index, .faq-section .faq-index) {
  grid-column: 1;
  padding-top: 6px;
  color: var(--text-mute);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.audience-case-head {
  grid-column: 1;
  min-width: 0;
}

.audience-case-body {
  grid-column: 3;
  min-width: 0;
  max-width: var(--home-text-measure);
}

.plan-head,
.faq-section .faq-question {
  grid-column: 3;
  min-width: 0;
}

.plan-copy,
.faq-section .faq-answer {
  grid-column: 5;
  min-width: 0;
  max-width: var(--home-text-measure);
}

.plan-row--pro {
  padding-left: 0;
}

.plan-row--pro::before {
  display: none;
}

:is(.audience-case-head h3, .plan-head h3, .faq-section .faq-q) {
  margin: 0;
  max-width: 18ch;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.05vw, 27px);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-wrap: balance;
}

:is(.audience-case-head p, .plan-head p) {
  margin: 14px 0 0;
  max-width: 31ch;
  color: var(--text-sec);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.58;
}

:is(.audience-case-body, .plan-copy) {
  display: grid;
  gap: 16px;
}

:is(.audience-case-body p, .plan-copy p, .faq-section .faq-a) {
  margin: 0;
  padding: 0;
  max-width: var(--home-text-measure);
  color: var(--text-sec);
  font-family: var(--font-ui);
  font-size: 16px;
  letter-spacing: 0;
  line-height: 1.8;
}

.faq-section .faq-a {
  display: block !important;
}

.faq-section .faq-trigger,
.faq-section .faq-icon {
  display: none !important;
}

/* Remove legacy marketing components no longer used by final markup. */
:is(.plans-tabs, .plan-actions, .plan-badge, .plans-kicker, .faq-ledger-kicker, .faq-ledger-count) {
  display: none !important;
}

/* Footer: same product chrome language as the header. */
.site-footer {
  background: var(--bg-light);
  border-top: 1px solid var(--border);
}

.footer-bottom {
  border-top: 0;
  background: transparent;
}

.footer-link {
  border-radius: var(--r-btn);
}

/* Disable older decorative depth where it conflicts with product flatness. */
:is(.app-screenshot, .hero-card, .pricing-card, .audience-card, .value-item, .trust-item, .compat-item) {
  box-shadow: none !important;
}

@media (max-width: 1120px) {
  :root {
    --home-ledger-side: minmax(0, 1fr);
    --home-ledger-content-gap: 0px;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-headline {
    max-width: 12ch;
  }

  .hero-right {
    max-width: 760px;
  }

  .audience-case-main {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
  }

  .audience-case-head,
  .audience-case-body {
    grid-column: 1;
  }

  :is(.plan-row, .faq-section .faq-item) {
    grid-template-columns:
      var(--home-ledger-index)
      var(--home-ledger-index-gap)
      minmax(0, 1fr);
    row-gap: 18px;
  }

  :is(.plan-index, .faq-section .faq-index) {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  :is(.plan-head, .plan-copy, .faq-section .faq-question, .faq-section .faq-answer) {
    grid-column: 3;
    max-width: none;
  }

  :is(.audience-case-head h3, .plan-head h3, .faq-section .faq-q) {
    max-width: 24ch;
  }

  :is(.audience-case-body, .plan-copy, .faq-section .faq-answer) {
    max-width: var(--home-text-measure);
  }
}

@media (max-width: 820px) {
  :root {
    --home-section-y: clamp(58px, 14vw, 78px);
    --home-section-gap: 28px;
    --home-ledger-row-y: 26px;
  }

  #site-hdr {
    padding: 0 14px;
  }

  .hero {
    padding-top: 58px;
    padding-bottom: 64px;
  }

  .hero-headline {
    max-width: none;
  }

  .hero-body p {
    font-size: 16px;
  }

  .capability-row {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  .capability-row:not(:last-child) {
    border-bottom: 0;
  }

  .capability-item {
    border-bottom: 1px solid var(--border-card);
  }

  :is(.audience-case, .plan-row, .faq-section .faq-item) {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }

  .audience-case-main {
    grid-column: 1;
  }

  :is(
    .audience-case-number,
    .plan-index,
    .faq-section .faq-index,
    .audience-case-head,
    .audience-case-body,
    .plan-head,
    .plan-copy,
    .faq-section .faq-question,
    .faq-section .faq-answer
  ) {
    grid-column: 1;
    grid-row: auto;
  }

  :is(.audience-case-number, .plan-index, .faq-section .faq-index) {
    padding-top: 0;
  }

  :is(.audience-case-head h3, .plan-head h3, .faq-section .faq-q) {
    max-width: none;
  }

  :is(.audience-case-body, .plan-copy, .faq-section .faq-answer) {
    max-width: none;
  }
}

@media (max-width: 640px) {
  :is(.hbtn-support, .hbtn-launch) {
    padding: 0 8px;
  }

  :is(.capabilities-title, .audience-ledger-title, .plans-title, .faq-ledger-title) {
    max-width: none;
    font-size: clamp(32px, 9vw, 43px);
    letter-spacing: -0.04em;
    line-height: 1.05;
  }

  :is(.audience-case-head h3, .plan-head h3, .faq-section .faq-q, .capability-copy h3) {
    font-size: 22px;
    line-height: 1.14;
  }

  :is(.audience-case-body p, .plan-copy p, .faq-section .faq-a, .capability-copy p) {
    font-size: 16px;
    line-height: 1.76;
  }
}


/* ── FEEDBACK CORRECTION PASS ──────────────────────────────────────
   Keep the stronger product-native direction, but restore warmth,
   alternation, useful depth, clearer install affordance, and a more
   spacious hero/gallery frame.
------------------------------------------------------------------- */

:root {
  --bg-white: #FFFFFF;
  --bg-light: #F6F4F1;
  --bg-mid: #EEEAE4;
  --bg-mid-2: #E6E2DB;

  --border: #D8D4CC;
  --border-card: #E4E0D8;
  --border-strong: #C2BDB5;

  --fill-subtle: rgba(26,25,23,.035);
  --fill-muted: rgba(26,25,23,.065);
  --fill-hover: rgba(26,25,23,.055);
  --fill-active: rgba(26,25,23,.09);

  --r-md: 9px;
  --r-xl: 20px;
  --r-btn: 8px;

  --home-section-y: clamp(82px, 9.5vw, 116px);
  --home-section-gap: clamp(34px, 4.5vw, 48px);
  --home-ledger-row-y: clamp(30px, 3.9vw, 40px);
}

/* Warm alternating document rhythm. */
body {
  background: var(--bg-white);
}

.capabilities-section {
  background: var(--bg-white);
}

.audience-section {
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 120px),
    var(--bg-mid);
}

.plans-section {
  background: var(--bg-white);
}

.faq-section {
  background:
    linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,0) 120px),
    var(--bg-light);
}

.audience-section,
.plans-section,
.faq-section {
  border-top: 1px solid var(--border-card);
}

/* Restore selective physicality. */
.hero-gallery-main {
  border-color: var(--border-card);
  border-radius: 28px;
  background: var(--bg-white);
  box-shadow:
    0 0 0 1px rgba(26,25,23,.03),
    0 8px 28px rgba(26,25,23,.06);
}

.hero-gallery-image {
  border-radius: 27px;
}

.hero-thumb {
  border-color: var(--border-card);
  border-radius: 18px;
  background: var(--bg-white);
  box-shadow: 0 1px 2px rgba(26,25,23,.03);
  transition:
    border-color var(--t) var(--ease),
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}

.hero-thumb:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  background: var(--bg-white);
}

.hero-thumb.is-active {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(51,86,232,.12);
}

.hero-gallery-thumbs {
  gap: 14px;
  margin-top: 16px;
}

/* Keep header structure, fix the install button hierarchy. */
#site-hdr {
  background: rgba(255,255,255,.92);
  border-bottom-color: var(--border-card);
}

.hbtn-support.hbtn-install {
  color: var(--text);
  background: var(--bg-white);
  border: 1px solid var(--border-card);
  box-shadow: 0 1px 2px rgba(26,25,23,.035);
}

.hbtn-support.hbtn-install:hover {
  color: var(--text);
  background: var(--bg-light);
  border-color: var(--border-strong);
}

.hbtn-launch {
  color: var(--blue-text);
  background: var(--blue);
  border-color: var(--blue);
}

.hbtn-launch:hover {
  color: var(--blue-text);
  background: #3356E8;
  border-color: #3356E8;
}

/* Keep the improved button direction, but give controls enough presence. */
:is(.btn-cta, .btn-ghost, .road-notify) {
  border-radius: var(--r-btn);
}

.btn-ghost {
  background: var(--bg-white);
  box-shadow: 0 1px 2px rgba(26,25,23,.03) !important;
}

/* Unsquash hero and give product visual more room. */
.hero {
  max-width: 1080px;
  padding-top: clamp(84px, 9vw, 124px);
  padding-bottom: clamp(78px, 8vw, 112px);
  grid-template-columns: minmax(0, .86fr) minmax(500px, 1.14fr);
  gap: clamp(56px, 7vw, 86px);
  align-items: center;
}

.hero-headline {
  max-width: 11.4ch;
}

.hero-body {
  max-width: 60ch;
}

.hero-right {
  max-width: min(100%, 620px);
}

.hero-gallery {
  width: 100%;
}

/* Pull the rebuilt product-state SVGs back into the warmer site palette. */
.hero-gallery-image,
.hero-thumb img {
  background: var(--bg-light);
}

/* Preserve useful depth on product-facing surfaces, but not on every section. */
:is(.app-screenshot, .placeholder-screen, .install-browser-card, .install-benefit-card) {
  box-shadow:
    0 0 0 1px rgba(26,25,23,.03),
    0 6px 22px rgba(26,25,23,.055) !important;
}

:is(.value-item, .trust-item, .compat-item, .pricing-card, .audience-card) {
  box-shadow: none !important;
}

/* Keep lower sections editorial and not over-flat. */
:is(.audience-case, .plan-row, .faq-section .faq-item) {
  border-bottom-color: color-mix(in srgb, var(--border-card) 92%, transparent);
}

:is(.capability-row, .capability-item) {
  border-color: var(--border-card);
}

@media (max-width: 1120px) {
  .hero {
    max-width: var(--home-wrap);
    grid-template-columns: minmax(0, 1fr);
    gap: 42px;
  }

  .hero-right {
    max-width: 760px;
  }
}

@media (max-width: 820px) {
  .hero {
    padding-top: 66px;
    padding-bottom: 70px;
  }

  .hero-gallery-main {
    border-radius: 22px;
  }

  .hero-gallery-image {
    border-radius: 21px;
  }

  .hero-thumb {
    border-radius: 14px;
  }

  .audience-section {
    background: var(--bg-mid);
  }

  .faq-section {
    background: var(--bg-light);
  }
}

@media (max-width: 640px) {
  .hero {
    gap: 32px;
  }

  .hero-gallery-thumbs {
    gap: 10px;
    margin-top: 12px;
  }
}


/* ── HERO BACKGROUND RESTORE ───────────────────────────────────────
   Restores the original warmer hero visual backdrop while keeping the
   corrected product-native structure and spacing.
------------------------------------------------------------------- */
.hero-gallery-image,
.hero-thumb img {
  background: #F4F2EE;
}


/* ── HERO SECTION BACKGROUND RESTORE ───────────────────────────────
   Applies the original warm hero background to the whole hero band,
   not only to the image artwork.
------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
}

.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #F4F2EE;
}

.capabilities-section {
  border-top: 1px solid var(--border-card);
}

/* ── HERO COPY SEPARATION ──────────────────────────────────────────
   Keeps the upgrade note visually secondary while preserving the copy.
------------------------------------------------------------------- */
.hero-body .hero-upgrade-line {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.82;
  color: var(--text-mute);
}


/* ── HEADING OPTICAL TUNE ─────────────────────────────────────────
   Reduces display weight/tracking and prevents the hero headline
   from orphaning “document.” without changing the visible copy.
------------------------------------------------------------------- */
.hero-headline {
  max-width: 15.6ch;
  font-size: clamp(33px, 3.65vw, 48px);
  font-weight: 600;
  letter-spacing: -0.026em;
  line-height: 1.06;
  text-wrap: balance;
}

.hero-headline-keep {
  display: inline-block;
  white-space: nowrap;
}

:is(.capabilities-title, .audience-ledger-title, .plans-title, .faq-ledger-title) {
  font-size: clamp(34px, 4.25vw, 52px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.055;
}

:is(.capability-copy h3, .audience-case-head h3, .plan-head h3, .faq-section .faq-q) {
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.16;
}

@media (max-width: 820px) {
  .hero-headline {
    max-width: 15.6ch;
  }
}

@media (max-width: 640px) {
  .hero-headline {
    font-size: clamp(32px, 8.8vw, 42px);
    line-height: 1.07;
  }

  :is(.capabilities-title, .audience-ledger-title, .plans-title, .faq-ledger-title) {
    font-size: clamp(31px, 8.7vw, 41px);
    letter-spacing: -0.026em;
    line-height: 1.07;
  }
}

/* ── TYPOGRAPHY AUDIT PASS: SOURCE SERIF 4 HEADING SYSTEM ─────────
   Consolidates all public-site and app-preview headings onto one
   optical serif system while keeping the existing Public Sans body.
------------------------------------------------------------------- */
:root {
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-serif: var(--font-display);
  --font-editor-heading: var(--font-display);
  --font-editor-body: var(--font-display);
}

body,
button,
input,
textarea,
select,
.hero-body p,
.compose-intro,
.capability-copy p,
.plan-copy p,
.plan-head p,
.legal-sub,
.legal-content p,
.modal-body,
.page-sub,
.section-sub,
.step-body,
.note-text,
.info-desc {
  font-family: var(--font-body, var(--font-ui));
  letter-spacing: 0;
}

.hero-headline,
.compose-title,
.capabilities-title,
.plans-title,
.audience-ledger-title,
.faq-ledger-title,
.story-title,
.sec-title,
.about-headline,
.support-headline,
.legal-title,
.legal-content h2,
.install-title,
.page-title,
.final-cta-title,
.section-title,
.modal-title,
.modal-body h2,
.product-document-preview h1,
.editor-preview h1,
.ss-h1 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-synthesis-weight: none;
  color: var(--text);
  text-wrap: balance;
}

.hero-headline {
  max-width: 15.8ch;
  font-size: clamp(35px, 3.82vw, 50px);
  line-height: 1.045;
  letter-spacing: -0.018em;
  margin-bottom: 28px;
}

.hero-headline-keep {
  display: inline-block;
  white-space: nowrap;
}

:is(.capabilities-title, .plans-title, .audience-ledger-title, .faq-ledger-title, .story-title) {
  max-width: 13ch;
  font-size: clamp(35px, 4.15vw, 52px);
  line-height: 1.055;
  letter-spacing: -0.018em;
}

.plans-title,
.faq-ledger-title {
  max-width: none;
}

:is(.compose-title:not(.capabilities-title), .sec-title, .about-headline, .support-headline, .legal-title, .install-title, .page-title, .final-cta-title) {
  font-size: clamp(30px, 3.3vw, 44px);
  line-height: 1.085;
  letter-spacing: -0.016em;
}

.legal-content h2,
.modal-body h2,
.section-title {
  font-size: clamp(20px, 1.65vw, 26px);
  line-height: 1.18;
  letter-spacing: -0.012em;
}

:is(.capability-copy h3, .plan-head h3, .audience-case-head h3, .faq-section .faq-q, .story-identity h3, .story-card h3, .pricing-card h3, .proof-copy h3, .role-card h3, .institution-box h3, .platform-card h3, .about-panel h3, .value-item h3, .trust-item h3, .compat-item h3, .install-benefits-head h3, .info-title, .browser-name, .ss-h3) {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--text);
  text-wrap: balance;
}

.capability-copy h3,
.plan-head h3,
.audience-case-head h3,
.faq-section .faq-q {
  font-size: clamp(21px, 1.9vw, 26px);
  line-height: 1.16;
  letter-spacing: -0.014em;
  max-width: 20ch;
}

.plan-head h3 {
  max-width: 18ch;
}

.capability-copy p,
.plan-copy p,
.faq-section .faq-a,
.legal-content p,
.modal-body p {
  font-weight: 400;
}

:is(.section-kicker, .hero-eyebrow, .capability-num, .plan-index, .faq-section .faq-index, .story-index, .story-label, .subsection-label, .page-eyebrow) {
  font-family: var(--font-body, var(--font-ui));
  font-weight: 600;
  letter-spacing: 0.105em;
}

.product-mock .mock-doc,
.product-document-preview,
.editor-preview {
  font-family: var(--font-editor-body);
}

.product-mock .mock-doc strong,
.product-document-preview h1,
.editor-preview h1 {
  font-family: var(--font-editor-heading);
  font-weight: 600;
  letter-spacing: -0.012em;
}

@media (max-width: 820px) {
  .hero-headline {
    max-width: 16ch;
  }
}

@media (max-width: 640px) {
  .hero-headline {
    max-width: none;
    font-size: clamp(33px, 9vw, 43px);
    line-height: 1.06;
    letter-spacing: -0.016em;
  }

  :is(.capabilities-title, .plans-title, .audience-ledger-title, .faq-ledger-title, .story-title) {
    max-width: none;
    font-size: clamp(32px, 8.8vw, 42px);
    line-height: 1.07;
    letter-spacing: -0.016em;
  }

  :is(.compose-title:not(.capabilities-title), .sec-title, .about-headline, .support-headline, .legal-title, .install-title, .page-title, .final-cta-title) {
    font-size: clamp(29px, 8vw, 38px);
    line-height: 1.09;
  }

  :is(.capability-copy h3, .plan-head h3, .audience-case-head h3, .faq-section .faq-q) {
    max-width: none;
    font-size: 22px;
    line-height: 1.18;
  }
}


/* ── BODY TYPOGRAPHY AUDIT PASS: SOURCE SANS 3 + SOURCE SERIF 4 ───
   Sets Public Sans as the companion sans, strengthens the established
   Source Serif 4 heading system, and normalises copy rhythm across pages.
------------------------------------------------------------------- */
:root {
  --font-body: 'Public Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui: var(--font-body);
  --font-sans: var(--font-body);
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-serif: var(--font-display);
  --font-editor-heading: var(--font-display);
  --font-editor-body: var(--font-display);

  --heading-weight-display: 650;
  --heading-weight-section: 650;
  --heading-weight-sub: 625;
  --body-weight: 400;
  --body-weight-strong: 600;
}

html,
body,
button,
input,
textarea,
select {
  font-family: var(--font-body);
  font-kerning: normal;
  font-feature-settings: 'kern' 1;
}

body {
  font-weight: var(--body-weight);
  letter-spacing: 0;
}

:is(.hero-body p, .compose-intro, .capability-copy p, .audience-case-body p, .plan-copy p, .faq-section .faq-a, .legal-sub, .legal-content p, .modal-body p, .page-sub, .section-sub, .step-body, .note-text, .info-desc, .browser-platforms, .install-step-body, .support-body, .about-body, .aud-left-body, .feat-desc, .road-desc) {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.002em;
  color: var(--text-sec);
}

.hero-body p {
  font-size: 16px;
  line-height: 1.76;
  max-width: 46ch;
}

.hero-body .hero-upgrade-line {
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.76;
  color: var(--text-mute);
}

:is(.capability-copy p, .audience-case-body p, .plan-copy p, .faq-section .faq-a) {
  font-size: 16px;
  line-height: 1.76;
  max-width: 58ch;
}

:is(.plan-head p, .audience-case-head p) {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.001em;
  line-height: 1.58;
}

:is(.legal-content, .modal-body) {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.76;
}

:is(.btn-cta, .btn-ghost, .hbtn-launch, .hbtn-support, .road-notify, .footer-link, .pbtn, .tab-btn, .install-tab, .platform-btn, .road-notify) {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0;
}

.btn-ghost,
.hbtn-support,
.footer-link {
  font-weight: 500;
}

:is(.hdr-brand-name, .hdr-brand-sub, .footer-brand-name, .footer-brand-sub, .ss-brand-name, .ss-brand-sub, .capability-num, .plan-index, .faq-section .faq-index, .section-kicker, .hero-eyebrow, .story-index, .story-label, .subsection-label, .page-eyebrow) {
  font-family: var(--font-body);
}

.hero-headline,
.compose-title,
.capabilities-title,
.plans-title,
.audience-ledger-title,
.faq-ledger-title,
.story-title,
.sec-title,
.about-headline,
.support-headline,
.legal-title,
.install-title,
.page-title,
.final-cta-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: var(--heading-weight-display);
  letter-spacing: -0.019em;
}

.hero-headline {
  font-size: clamp(35px, 3.82vw, 50px);
  line-height: 1.045;
  letter-spacing: -0.019em;
}

:is(.capabilities-title, .plans-title, .audience-ledger-title, .faq-ledger-title, .story-title) {
  font-weight: var(--heading-weight-section);
  letter-spacing: -0.019em;
  line-height: 1.055;
}

:is(.capability-copy h3, .plan-head h3, .audience-case-head h3, .faq-section .faq-q, .story-identity h3, .story-card h3, .pricing-card h3, .proof-copy h3, .role-card h3, .institution-box h3, .platform-card h3, .about-panel h3, .value-item h3, .trust-item h3, .compat-item h3, .install-benefits-head h3, .info-title, .browser-name, .ss-h3, .legal-content h2, .modal-body h2, .section-title) {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: var(--heading-weight-sub);
  letter-spacing: -0.012em;
}

:is(.product-document-preview h1, .editor-preview h1, .ss-h1) {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 650;
  letter-spacing: -0.012em;
}

.product-mock .mock-doc,
.product-document-preview,
.editor-preview {
  font-family: var(--font-editor-body);
}

.product-mock .mock-doc strong,
.product-document-preview h1,
.editor-preview h1 {
  font-family: var(--font-editor-heading);
  font-weight: 650;
}

@media (max-width: 640px) {
  .hero-headline {
    letter-spacing: -0.017em;
  }

  :is(.capabilities-title, .plans-title, .audience-ledger-title, .faq-ledger-title, .story-title) {
    letter-spacing: -0.017em;
  }

  .hero-body p {
    font-size: 16px;
    line-height: 1.72;
  }
}

/* ── BODY SIZE LEGIBILITY PASS ───────────────────────────────────
   Slightly scales Public Sans copy up while preserving established
   heading proportions and the existing layout rhythm.
------------------------------------------------------------------- */
:root {
  --body-size-hero: 16.5px;
  --body-size-hero-secondary: 16px;
  --body-size-primary: 16px;
  --body-size-secondary: 16px;
  --body-size-small: 16px;
}

:is(.hero-body p, .hero-sub) {
  font-size: var(--body-size-hero);
  line-height: 1.74;
}

.hero-body .hero-upgrade-line,
.hero-upgrade-line {
  font-size: var(--body-size-hero-secondary);
  line-height: 1.74;
}

:is(.compose-intro, .capability-copy p, .audience-case-body p, .plan-copy p, .faq-section .faq-a, .support-body, .about-body, .aud-left-body, .legal-sub) {
  font-size: var(--body-size-primary);
  line-height: 1.74;
}

:is(.plan-head p, .audience-case-head p, .modal-body, .legal-content, .install-step-body) {
  font-size: var(--body-size-secondary);
  line-height: 1.72;
}

:is(.feat-desc, .road-desc, .support-note, .about-caption, .footer-maker, .footer-link, .modal-updated) {
  font-size: var(--body-size-small);
}

@media (max-width: 640px) {
  :root {
    --body-size-hero: 16px;
    --body-size-hero-secondary: 16px;
    --body-size-primary: 16px;
    --body-size-secondary: 16px;
  }
}


/* ── PRICING ROW ENHANCEMENT ─────────────────────────────────────
   Adds a dedicated price / CTA column to the plans ledger while
   preserving the editorial table feel established for the section.
------------------------------------------------------------------- */
.plan-row {
  grid-template-columns:
    var(--home-ledger-index)
    var(--home-ledger-index-gap)
    minmax(210px, 0.34fr)
    var(--home-ledger-content-gap)
    minmax(0, 0.54fr)
    clamp(24px, 2vw, 34px)
    minmax(150px, 0.2fr);
}

.plan-head {
  grid-column: 3;
}

.plan-copy {
  grid-column: 5;
}

.plan-action {
  grid-column: 7;
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
}

.plan-price-block {
  display: grid;
  gap: 4px;
}

.plan-price {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(28px, 2.5vw, 36px);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1;
}

.plan-price-note {
  margin: 0;
  color: var(--text-mute);
  font-family: var(--font-body, var(--font-ui));
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1.5;
  text-transform: uppercase;
}

.plan-cta {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.plan-cta--primary {
  box-shadow: none;
}

.plan-row--pro .plan-price,
.plan-row--pro .plan-index {
  color: var(--blue);
}

@media (max-width: 1120px) {
  .plan-row {
    grid-template-columns:
      var(--home-ledger-index)
      var(--home-ledger-index-gap)
      minmax(0, 1fr)
      minmax(170px, 0.34fr);
    column-gap: 0;
    row-gap: 20px;
  }

  .plan-index {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  .plan-head {
    grid-column: 3;
    grid-row: 1;
  }

  .plan-copy {
    grid-column: 3;
    grid-row: 2;
  }

  .plan-action {
    grid-column: 4;
    grid-row: 1 / span 2;
    align-self: start;
  }
}

@media (max-width: 820px) {
  .plan-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
  }

  .plan-index,
  .plan-head,
  .plan-copy,
  .plan-action {
    grid-column: 1;
    grid-row: auto;
  }

  .plan-action {
    max-width: 260px;
  }
}


/* ── PLANS COLUMN REFINEMENT ─────────────────────────────────────
   Move pricing and actions back into the plan-name column so the
   section reads as one integrated ledger rather than a four-column grid.
------------------------------------------------------------------- */
.plan-row {
  grid-template-columns:
    var(--home-ledger-index)
    var(--home-ledger-index-gap)
    var(--home-ledger-side)
    var(--home-ledger-content-gap)
    var(--home-ledger-body);
}

.plan-head {
  grid-column: 3;
  display: grid;
  gap: 12px;
  align-content: start;
}

.plan-copy {
  grid-column: 5;
}

.plan-action.plan-action--inline {
  grid-column: auto;
  display: grid;
  gap: 12px;
  justify-items: start;
  padding-top: 4px;
}

.plan-head .plan-price-block {
  display: grid;
  gap: 3px;
  margin-top: 6px;
}

.plan-head .plan-price {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(30px, 2.2vw, 38px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.plan-head .plan-price-note {
  margin: 0;
  color: var(--text-mute);
  font-family: var(--font-body, var(--font-ui));
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.plan-head .plan-cta {
  width: auto;
  min-width: 154px;
  justify-content: center;
  text-align: center;
}

.plan-head .plan-support-note {
  margin: 0;
  max-width: 24ch;
  color: var(--text-mute);
  font-family: var(--font-body, var(--font-ui));
  font-size: 16px;
  line-height: 1.55;
}

.plan-secondary-link {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(26,25,23,.22);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.plan-secondary-link:hover,
.plan-secondary-link:focus-visible {
  color: var(--blue);
  border-color: rgba(51,86,232,.35);
}

.plan-secondary-link:focus-visible {
  outline: none;
}

.plan-row--pro .plan-price,
.plan-row--pro .plan-index {
  color: var(--blue);
}

@media (max-width: 1120px) {
  .plan-row {
    grid-template-columns:
      var(--home-ledger-index)
      var(--home-ledger-index-gap)
      minmax(0, 1fr);
    row-gap: 18px;
  }

  .plan-index {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .plan-head,
  .plan-copy {
    grid-column: 3;
  }
}

@media (max-width: 820px) {
  .plan-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }

  .plan-index,
  .plan-head,
  .plan-copy {
    grid-column: 1;
    grid-row: auto;
  }

  .plan-head .plan-cta {
    min-width: 0;
  }
}


/* ── PLANS COPY REWRITE REFINEMENT ───────────────────────────────
   Supports the revised plan copy, bullet structure, and the lighter
   pricing note that now sits below the full plans ledger.
------------------------------------------------------------------- */
.plan-head--named {
  gap: 14px;
}

.plan-head--priced {
  gap: 18px;
}

.plan-head--named p,
.plan-head--priced .plan-price-note {
  max-width: 24ch;
}

.plan-head--named .plan-action,
.plan-head--priced .plan-action {
  padding-top: 0;
}

.plan-head--named .plan-cta,
.plan-head--priced .plan-cta {
  min-width: 156px;
}

.plan-copy {
  gap: 14px;
}

.plan-copy > p {
  margin: 0;
}

.plan-copy-label {
  margin: 4px 0 0;
  color: var(--text);
  font-family: var(--font-body, var(--font-ui));
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.55;
}

.plan-copy-list {
  margin: 0;
  padding: 0 0 0 1.15em;
  display: grid;
  gap: 10px;
  color: var(--text-sec);
  font-family: var(--font-body, var(--font-ui));
  font-size: var(--body-size-primary);
  line-height: 1.72;
}

.plan-copy-list li {
  margin: 0;
}

.plans-note {
  padding-top: 18px;
}

.plans-note-copy {
  margin: 0;
  max-width: 58ch;
  color: var(--text-mute);
  font-family: var(--font-body, var(--font-ui));
  font-size: 16px;
  line-height: 1.65;
}

.plan-secondary-link {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(26,25,23,.22);
}

.plan-secondary-link:hover,
.plan-secondary-link:focus-visible {
  color: var(--blue);
  border-color: rgba(51,86,232,.35);
}

@media (max-width: 820px) {
  .plan-copy-list {
    gap: 9px;
  }

  .plans-note {
    padding-top: 16px;
  }
}


/* ── PLANS AUDIT REFINEMENT ──────────────────────────────────────
   Simplifies the revised plans section back toward the stronger earlier
   version: clearer plan identities, shorter copy, and a cleaner rhythm.
------------------------------------------------------------------- */
.plan-head--free,
.plan-head--paid {
  gap: 12px;
}

.plan-head--free .plan-action,
.plan-head--paid .plan-action {
  padding-top: 4px;
}

.plan-head--free p,
.plan-head--paid p {
  margin: 0;
}

.plan-head--free .plan-cta,
.plan-head--paid .plan-cta {
  min-width: 156px;
}

.plan-head--paid .plan-price-block {
  display: grid;
  gap: 3px;
  margin-top: 4px;
}

.plan-head--paid .plan-price {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(32px, 2.35vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.plan-head--paid .plan-price-note {
  margin: 0;
  color: var(--text-mute);
  font-family: var(--font-body, var(--font-ui));
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.plan-row--pro .plan-price,
.plan-row--pro .plan-index {
  color: var(--blue);
}

.plan-copy {
  gap: 14px;
}

.plan-copy > p {
  margin: 0;
}

.plan-copy-list {
  margin: 0;
  padding: 0 0 0 1.1em;
  display: grid;
  gap: 9px;
  color: var(--text-sec);
  font-family: var(--font-body, var(--font-ui));
  font-size: var(--body-size-primary);
  line-height: 1.72;
}

.plan-copy-list li {
  margin: 0;
}

.plan-fit {
  margin: 2px 0 0;
  color: var(--text);
  font-family: var(--font-body, var(--font-ui));
  font-size: 16px;
  font-weight: 500;
  line-height: 1.66;
}

.plans-note {
  padding-top: 18px;
}

.plans-note-copy {
  margin: 0;
  max-width: 60ch;
  color: var(--text-mute);
  font-family: var(--font-body, var(--font-ui));
  font-size: 16px;
  line-height: 1.65;
}

.plan-secondary-link {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(26,25,23,.22);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.plan-secondary-link:hover,
.plan-secondary-link:focus-visible {
  color: var(--blue);
  border-color: rgba(51,86,232,.35);
}

@media (max-width: 820px) {
  .plan-head--free .plan-cta,
  .plan-head--paid .plan-cta {
    min-width: 0;
  }

  .plan-copy-list {
    gap: 8px;
  }

  .plans-note {
    padding-top: 16px;
  }
}


/* ── PLANS FINAL POLISH ──────────────────────────────────────────
   Small editorial refinements to move the section from good to excellent:
   quieter bullets, narrower measure, calmer "Best for" notes, and better
   balance between the Free plan and the paid plans.
------------------------------------------------------------------- */
.plan-head--free {
  gap: 14px;
}

.plan-head--free .plan-action {
  margin-top: 6px;
}

.plan-head--paid {
  gap: 10px;
}

.plan-head--paid .plan-action {
  gap: 10px;
}

.plan-copy {
  max-width: 54ch;
  gap: 13px;
}

.plan-copy > p:first-child {
  color: var(--text);
}

.plan-copy-list {
  list-style: none;
  padding: 0;
  gap: 11px;
}

.plan-copy-list li {
  position: relative;
  padding-left: 1.05rem;
}

.plan-copy-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 0.26rem;
  height: 0.26rem;
  border-radius: 50%;
  background: rgba(26, 25, 23, 0.34);
}

.plan-fit {
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid rgba(26, 25, 23, 0.08);
  color: var(--text-mute);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.62;
}

.plan-head--free p,
.plan-head--paid p {
  max-width: 22ch;
}

.plan-head--paid .plan-price-note {
  letter-spacing: 0.07em;
}

@media (max-width: 1120px) {
  .plan-copy {
    max-width: 56ch;
  }
}

@media (max-width: 820px) {
  .plan-copy {
    max-width: none;
  }

  .plan-copy-list {
    gap: 10px;
  }

  .plan-fit {
    padding-top: 10px;
  }
}


/* ── PLANS SWISS GRID RESTORE ────────────────────────────────────
   Clean restore of the Plans section to a 12-column Swiss-style grid.
   Structure: index | main plan content | pricing / CTA.
------------------------------------------------------------------- */
.plans-section {
  background: var(--bg-light);
}

.plans-ledger {
  border-top: 1px solid var(--border-card);
}

.plans-ledger > .plan-row {
  display: grid;
  grid-template-columns: var(--home-ledger-index) repeat(12, minmax(0, 1fr));
  column-gap: clamp(18px, 2vw, 24px);
  row-gap: 0;
  align-items: start;
  padding-top: var(--home-ledger-row-y);
  padding-bottom: var(--home-ledger-row-y);
  border-bottom: 1px solid var(--border-card);
}

.plans-ledger > .plan-row > .plan-index {
  grid-column: 1;
  align-self: start;
  padding-top: 6px;
  color: var(--text-mute);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.3;
}

.plans-ledger > .plan-row > .plan-main {
  grid-column: 2 / span 9;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  column-gap: clamp(18px, 2vw, 24px);
  align-items: start;
  min-width: 0;
}

.plans-ledger > .plan-row > .plan-main > h3 {
  grid-column: 1 / span 2;
  margin: 0;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
}

.plans-ledger > .plan-row > .plan-main > .plan-copy {
  grid-column: 3 / span 7;
  display: grid;
  gap: 14px;
  min-width: 0;
  max-width: none;
}

.plans-ledger .plan-copy > p,
.plans-ledger .plan-fit,
.plans-ledger .plan-copy-list,
.plans-note-copy,
.plans-ledger .plan-price-note {
  font-size: 16px;
}

.plans-ledger .plan-copy > p,
.plans-ledger .plan-fit {
  margin: 0;
  max-width: none;
  color: var(--text-sec);
  font-family: var(--font-body, var(--font-ui));
  line-height: 1.72;
}

.plans-ledger .plan-copy > p:first-child {
  color: var(--text);
}

.plans-ledger .plan-fit {
  color: var(--text-mute);
}

.plans-ledger .plan-copy-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  color: var(--text-sec);
  font-family: var(--font-body, var(--font-ui));
  line-height: 1.72;
}

.plans-ledger .plan-copy-list li {
  position: relative;
  margin: 0;
  padding-left: 1.1rem;
}

.plans-ledger .plan-copy-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: var(--blue);
}

.plans-ledger > .plan-row > .plan-action {
  grid-column: 11 / span 3;
  display: grid;
  gap: 12px;
  justify-items: start;
  align-content: start;
  min-width: 0;
}

.plans-ledger .plan-price-block {
  display: grid;
  gap: 3px;
}

.plans-ledger .plan-price {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(32px, 2.3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.plans-ledger .plan-price-note {
  margin: 0;
  color: var(--text-mute);
  font-family: var(--font-body, var(--font-ui));
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
}

.plans-ledger .plan-cta {
  width: auto;
  min-width: 172px;
}

.plans-ledger .plan-row--pro > .plan-index,
.plans-ledger .plan-row--pro .plan-price {
  color: var(--blue);
}

.plans-note {
  display: flex;
  justify-content: center;
  padding-top: 24px;
}

.plans-note-copy {
  margin: 0;
  max-width: 64ch;
  text-align: center;
  color: var(--text-mute);
  font-family: var(--font-body, var(--font-ui));
  line-height: 1.7;
}

@media (max-width: 1120px) {
  .plans-ledger > .plan-row {
    grid-template-columns: var(--home-ledger-index) repeat(8, minmax(0, 1fr));
  }

  .plans-ledger > .plan-row > .plan-main {
    grid-column: 2 / span 6;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .plans-ledger > .plan-row > .plan-main > h3 {
    grid-column: 1 / span 2;
  }

  .plans-ledger > .plan-row > .plan-main > .plan-copy {
    grid-column: 3 / span 4;
  }

  .plans-ledger > .plan-row > .plan-action {
    grid-column: 8 / span 2;
  }
}

@media (max-width: 860px) {
  .plans-ledger > .plan-row {
    grid-template-columns: var(--home-ledger-index) minmax(0, 1fr);
    row-gap: 14px;
  }

  .plans-ledger > .plan-row > .plan-index {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  .plans-ledger > .plan-row > .plan-main {
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }

  .plans-ledger > .plan-row > .plan-main > h3,
  .plans-ledger > .plan-row > .plan-main > .plan-copy,
  .plans-ledger > .plan-row > .plan-action {
    grid-column: auto;
  }

  .plans-ledger > .plan-row > .plan-action {
    grid-column: 2;
  }

  .plans-ledger .plan-cta {
    min-width: 0;
  }
}

/* ── PLANS INTEGRATED LEDGER PASS ───────────────────────────────
   Keeps the Swiss ledger, but groups each plan's identity, price, and
   action together so the row reads as one object instead of fragments.
------------------------------------------------------------------- */
.plans-ledger > .plan-row {
  grid-template-columns: var(--home-ledger-index) repeat(12, minmax(0, 1fr));
  column-gap: clamp(18px, 2vw, 24px);
  align-items: start;
  padding-top: clamp(26px, 3.1vw, 32px);
  padding-bottom: clamp(28px, 3.3vw, 34px);
}

.plans-ledger > .plan-row > .plan-head {
  grid-column: 2 / span 3;
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}

.plans-ledger > .plan-row > .plan-copy {
  grid-column: 5 / span 8;
  display: grid;
  gap: 13px;
  max-width: 56ch;
  min-width: 0;
}

.plans-ledger > .plan-row > .plan-head > h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
}

.plans-ledger .plan-head .plan-price-block {
  margin-top: 2px;
}

.plans-ledger .plan-head .plan-price {
  color: var(--text);
}

.plans-ledger .plan-head .plan-price-note {
  max-width: 22ch;
  color: var(--text-mute);
  font-size: 16px;
  line-height: 1.45;
}

.plans-ledger .plan-head .plan-action {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding-top: 4px;
}

.plans-ledger .plan-head .plan-cta {
  width: auto;
  min-width: 156px;
  justify-content: center;
}

.plans-ledger .plan-copy > p,
.plans-ledger .plan-fit,
.plans-ledger .plan-copy-list,
.plans-note-copy,
.plans-ledger .plan-price-note {
  font-size: 16px;
}

.plans-ledger .plan-copy-list {
  gap: 10px;
}

.plans-ledger .plan-copy-list li::before {
  background: rgba(26, 25, 23, 0.34);
}

.plans-ledger .plan-row--pro > .plan-index {
  color: var(--text-mute);
}

.plans-ledger .plan-row--pro .plan-price {
  color: var(--text);
}

@media (max-width: 1120px) {
  .plans-ledger > .plan-row {
    grid-template-columns: var(--home-ledger-index) repeat(8, minmax(0, 1fr));
  }

  .plans-ledger > .plan-row > .plan-head {
    grid-column: 2 / span 2;
  }

  .plans-ledger > .plan-row > .plan-copy {
    grid-column: 4 / span 6;
    max-width: 58ch;
  }
}

@media (max-width: 860px) {
  .plans-ledger > .plan-row {
    grid-template-columns: var(--home-ledger-index) minmax(0, 1fr);
    row-gap: 14px;
  }

  .plans-ledger > .plan-row > .plan-index {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .plans-ledger > .plan-row > .plan-head,
  .plans-ledger > .plan-row > .plan-copy {
    grid-column: 2;
  }

  .plans-ledger > .plan-row > .plan-copy {
    max-width: none;
  }
}


/* ── PLANS 1 / 9 / 3 SWISS LEDGER PASS ─────────────────────────
   Row anatomy: index column | 9-column plan content | 3-column action.
------------------------------------------------------------------- */
.plans-ledger > .plan-row {
  grid-template-columns: var(--home-ledger-index) repeat(12, minmax(0, 1fr));
  column-gap: clamp(18px, 2vw, 24px);
  align-items: start;
  padding-top: clamp(28px, 3.2vw, 36px);
  padding-bottom: clamp(30px, 3.4vw, 38px);
}

.plans-ledger > .plan-row > .plan-index {
  grid-column: 1;
}

.plans-ledger > .plan-row > .plan-main {
  grid-column: 2 / span 9;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  column-gap: clamp(18px, 2vw, 24px);
  align-items: start;
  min-width: 0;
}

.plans-ledger > .plan-row > .plan-main > h3 {
  grid-column: 1 / span 2;
  margin: 0;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
}

.plans-ledger > .plan-row > .plan-main > .plan-copy {
  grid-column: 3 / span 7;
  display: grid;
  gap: 13px;
  max-width: 58ch;
  min-width: 0;
}

.plans-ledger > .plan-row > .plan-action {
  grid-column: 11 / span 3;
  display: grid;
  gap: 12px;
  justify-items: stretch;
  align-content: start;
  min-width: 0;
  padding-top: 0;
}

.plans-ledger .plan-price-block {
  display: grid;
  gap: 3px;
}

.plans-ledger .plan-price {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(32px, 2.3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.plans-ledger .plan-price-note {
  margin: 0;
  color: var(--text-mute);
  font-family: var(--font-body, var(--font-ui));
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
}

.plans-ledger .plan-cta {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

.plans-ledger .plan-copy > p,
.plans-ledger .plan-fit,
.plans-ledger .plan-copy-list,
.plans-note-copy {
  font-size: 16px;
}

.plans-ledger .plan-copy-list li::before {
  background: rgba(26, 25, 23, 0.34);
}

.plans-ledger .plan-row--pro > .plan-index,
.plans-ledger .plan-row--pro .plan-price {
  color: var(--text-mute);
}

.plans-ledger .plan-row--pro .plan-price {
  color: var(--text);
}

@media (max-width: 1120px) {
  .plans-ledger > .plan-row {
    grid-template-columns: var(--home-ledger-index) repeat(8, minmax(0, 1fr));
  }

  .plans-ledger > .plan-row > .plan-main {
    grid-column: 2 / span 6;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .plans-ledger > .plan-row > .plan-main > h3 {
    grid-column: 1 / span 2;
  }

  .plans-ledger > .plan-row > .plan-main > .plan-copy {
    grid-column: 3 / span 4;
    max-width: 58ch;
  }

  .plans-ledger > .plan-row > .plan-action {
    grid-column: 8 / span 2;
  }
}

@media (max-width: 860px) {
  .plans-ledger > .plan-row {
    grid-template-columns: var(--home-ledger-index) minmax(0, 1fr);
    row-gap: 14px;
  }

  .plans-ledger > .plan-row > .plan-index {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .plans-ledger > .plan-row > .plan-main,
  .plans-ledger > .plan-row > .plan-action {
    grid-column: 2;
  }

  .plans-ledger > .plan-row > .plan-main {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }

  .plans-ledger > .plan-row > .plan-main > h3,
  .plans-ledger > .plan-row > .plan-main > .plan-copy {
    grid-column: auto;
  }

  .plans-ledger > .plan-row > .plan-main > .plan-copy {
    max-width: none;
  }

  .plans-ledger > .plan-row > .plan-action {
    justify-items: start;
  }

  .plans-ledger .plan-cta {
    width: auto;
    min-width: 0;
  }
}

/* ── PLANS STACKED CONTENT OVERRIDE ─────────────────────────────
   Keep the 1 | 9 | 3 outer grid, but stack name, description,
   and bullets vertically within the 9-column content area.
---------------------------------------------------------------- */
.plans-ledger > .plan-row > .plan-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 14px;
  align-content: start;
}

.plans-ledger > .plan-row > .plan-main > h3 {
  grid-column: 1;
  max-width: none;
}

.plans-ledger > .plan-row > .plan-main > .plan-copy {
  grid-column: 1;
  max-width: 72ch;
}

@media (max-width: 1120px) {
  .plans-ledger > .plan-row > .plan-main {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }

  .plans-ledger > .plan-row > .plan-main > h3,
  .plans-ledger > .plan-row > .plan-main > .plan-copy {
    grid-column: 1;
  }
}


/* ── PLANS COHESION TUNING OVERRIDE ──────────────────────────────
   Reorder the supporting line before bullets, remove the internal
   separator, and keep the 1 | 9 | 3 Swiss grid while tightening
   readable measure inside the 9-column content area.
---------------------------------------------------------------- */
.plans-ledger > .plan-row {
  column-gap: clamp(18px, 2vw, 28px);
}

.plans-ledger > .plan-row > .plan-main {
  grid-column: 2 / span 9;
  max-width: none;
}

.plans-ledger > .plan-row > .plan-main > .plan-copy {
  max-width: 67ch;
  gap: 10px;
}

.plans-ledger .plan-fit {
  margin: 0;
  padding-top: 0;
  border-top: 0;
  color: var(--text-mute);
  font-size: 16px;
  line-height: 1.6;
}

.plans-ledger .plan-copy-list {
  margin-top: 6px;
  gap: 10px;
}

.plans-ledger > .plan-row > .plan-action {
  grid-column: 11 / span 3;
  justify-self: stretch;
  width: 100%;
  max-width: 240px;
}

.plans-ledger .plan-price-block {
  gap: 4px;
}

@media (max-width: 1120px) {
  .plans-ledger > .plan-row > .plan-main {
    grid-column: 2 / span 6;
  }
  .plans-ledger > .plan-row > .plan-main > .plan-copy {
    max-width: 60ch;
  }
  .plans-ledger > .plan-row > .plan-action {
    grid-column: 8 / span 2;
    max-width: none;
  }
}

@media (max-width: 860px) {
  .plans-ledger > .plan-row > .plan-main > .plan-copy {
    max-width: none;
  }
  .plans-ledger > .plan-row > .plan-action {
    max-width: none;
  }
}


/* ── PLANS FREE ACTION BALANCE OVERRIDE ─────────────────────────
   Give the Free tier a non-pricing meta block so the right-hand
   action column has the same visual rhythm as paid plans.
---------------------------------------------------------------- */
.plans-ledger .plan-action--free {
  gap: 10px;
}

.plans-ledger .plan-meta-block {
  display: grid;
  gap: 4px;
}

.plans-ledger .plan-meta-title {
  margin: 0;
  color: var(--text);
  font-family: var(--font-body, var(--font-ui));
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
}

.plans-ledger .plan-meta-note {
  margin: 0;
  color: var(--text-mute);
  font-family: var(--font-body, var(--font-ui));
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}


/* ── PLANS ESSENTIALS / FREE DISPLAY OVERRIDE ───────────────────
   Rename the Free plan to Essentials, and present the Free label
   in the action column with the same display scale as paid prices.
---------------------------------------------------------------- */
.plans-ledger .plan-action--free .plan-meta-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 2.3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}


/* ── PLANS TYPOGRAPHY AUDIT OVERRIDE ─────────────────────────────
   Make the plan names the row headings, and treat price/free as
   functional metadata rather than the dominant typographic element.
---------------------------------------------------------------- */
.plans-ledger > .plan-row > .plan-main > h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(32px, 2.9vw, 42px);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.055;
}

.plans-ledger .plan-price,
.plans-ledger .plan-action--free .plan-meta-title {
  font-family: var(--font-body, var(--font-ui));
  font-size: clamp(27px, 2vw, 34px);
  font-weight: 650;
  letter-spacing: -0.026em;
  line-height: 1.05;
  font-variant-numeric: lining-nums tabular-nums;
}

.plans-ledger .plan-price-note,
.plans-ledger .plan-meta-note {
  font-family: var(--font-body, var(--font-ui));
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.45;
}

.plans-ledger > .plan-row > .plan-action {
  padding-top: 4px;
}

.plans-ledger .plan-copy > p:first-child {
  color: var(--text);
  font-weight: 450;
}

.plans-ledger .plan-fit {
  font-weight: 450;
}

.plans-ledger .plan-copy-list {
  color: var(--text-sec);
}

@media (max-width: 640px) {
  .plans-ledger > .plan-row > .plan-main > h3 {
    font-size: clamp(28px, 8vw, 36px);
    line-height: 1.07;
  }

  .plans-ledger .plan-price,
  .plans-ledger .plan-action--free .plan-meta-title {
    font-size: clamp(24px, 7vw, 30px);
  }
}


/* ── PLANS ACTION ZONE REBALANCE OVERRIDE ───────────────────────
   Treat the right-hand area as a real decision zone instead of a
   narrow floating stack. On large screens, rebalance from 9|3 to 8|4
   within the 12-column content grid and use an internal 2-part layout
   for meta + CTA so the space feels deliberately occupied.
---------------------------------------------------------------- */
@media (min-width: 1121px) {
  .plans-ledger > .plan-row > .plan-main {
    grid-column: 2 / span 8;
  }

  .plans-ledger > .plan-row > .plan-main > .plan-copy {
    max-width: 60ch;
  }

  .plans-ledger > .plan-row > .plan-action {
    grid-column: 10 / span 4;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(184px, 1.25fr);
    grid-template-areas: 'meta cta';
    column-gap: clamp(18px, 1.8vw, 26px);
    row-gap: 0;
    align-items: start;
    width: 100%;
    max-width: none;
    padding-top: 6px;
  }

  .plans-ledger .plan-price-block,
  .plans-ledger .plan-meta-block {
    grid-area: meta;
    align-self: start;
  }

  .plans-ledger .plan-cta {
    grid-area: cta;
    width: 100%;
    min-width: 0;
    justify-self: stretch;
    align-self: start;
  }
}


/* ── PLANS ACTION RAIL REVERT + FULL-HEIGHT ANCHOR OVERRIDE ─────
   Revert the widened action-zone experiment. Keep the outer 1|9|3
   Swiss grid and make the right column feel intentional by turning it
   into a full-height decision rail: value at the top, CTA anchored low.
---------------------------------------------------------------- */
@media (min-width: 1121px) {
  .plans-ledger > .plan-row {
    align-items: stretch;
  }

  .plans-ledger > .plan-row > .plan-main {
    grid-column: 2 / span 9;
  }

  .plans-ledger > .plan-row > .plan-main > .plan-copy {
    max-width: 67ch;
  }

  .plans-ledger > .plan-row > .plan-action {
    grid-column: 11 / span 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
    width: 100%;
    max-width: 240px;
    min-height: 100%;
    padding-top: 6px;
    padding-left: 18px;
    border-left: 1px solid rgba(26, 25, 23, 0.08);
  }

  .plans-ledger .plan-price-block,
  .plans-ledger .plan-meta-block {
    display: grid;
    gap: 4px;
    align-content: start;
  }

  .plans-ledger .plan-cta {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
    margin-top: 26px;
  }
}


/* ── PLANS FINAL HIERARCHY + ACTION RAIL TUNING ─────────────────
   Match plan titles to the section-above heading style for consistency,
   and slightly refine the action rail so the last column feels occupied
   by structure rather than by extra content.
---------------------------------------------------------------- */
.plans-ledger > .plan-row > .plan-main > h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(21px, 1.9vw, 26px);
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.16;
  max-width: 20ch;
}

.plans-ledger .plan-price,
.plans-ledger .plan-action--free .plan-meta-title {
  font-family: var(--font-body, var(--font-ui));
  font-size: clamp(22px, 1.8vw, 27px);
  font-weight: 650;
  letter-spacing: -0.018em;
  line-height: 1.08;
}

.plans-ledger .plan-price-note,
.plans-ledger .plan-meta-note {
  font-size: 16px;
}

@media (min-width: 1121px) {
  .plans-ledger > .plan-row > .plan-action {
    max-width: 252px;
    gap: 24px;
    padding-top: 8px;
    padding-bottom: 6px;
    padding-left: 20px;
  }

  .plans-ledger .plan-cta {
    width: 100%;
  }
}


/* ── PLANS MOBILE OPTIMISATION OVERRIDE ─────────────────────────
   Recompose the Plans section for tablets and phones so the rows keep
   a clear hierarchy, and the action zone becomes a compact, deliberate
   mobile decision area rather than a leftover desktop column.
---------------------------------------------------------------- */
@media (max-width: 860px) {
  .plans-section {
    padding-top: 88px;
    padding-bottom: 92px;
  }

  .plans-ledger > .plan-row {
    grid-template-columns: 34px minmax(0, 1fr);
    row-gap: 16px;
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .plans-ledger > .plan-row > .plan-index {
    grid-column: 1;
    grid-row: 1 / span 2;
    padding-top: 3px;
  }

  .plans-ledger > .plan-row > .plan-main {
    grid-column: 2;
    row-gap: 10px;
  }

  .plans-ledger > .plan-row > .plan-main > h3 {
    max-width: none;
  }

  .plans-ledger > .plan-row > .plan-main > .plan-copy {
    max-width: none;
    gap: 10px;
  }

  .plans-ledger .plan-copy-list {
    margin-top: 4px;
    gap: 9px;
  }

  .plans-ledger > .plan-row > .plan-action {
    grid-column: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: end;
    width: 100%;
    max-width: none;
    margin-top: 4px;
    padding-top: 14px;
    padding-left: 0;
    padding-bottom: 0;
    border-top: 1px solid rgba(26, 25, 23, 0.08);
    border-left: 0;
  }

  .plans-ledger .plan-price-block,
  .plans-ledger .plan-meta-block {
    display: grid;
    gap: 3px;
    align-content: start;
  }

  .plans-ledger .plan-cta {
    width: auto;
    min-width: 172px;
    margin-top: 0;
    justify-self: end;
  }
}

@media (max-width: 560px) {
  .plans-section {
    padding-top: 76px;
    padding-bottom: 80px;
  }

  .plans-ledger > .plan-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .plans-ledger > .plan-row > .plan-index,
  .plans-ledger > .plan-row > .plan-main,
  .plans-ledger > .plan-row > .plan-action {
    grid-column: 1;
  }

  .plans-ledger > .plan-row > .plan-index {
    grid-row: auto;
    padding-top: 0;
  }

  .plans-ledger > .plan-row > .plan-main {
    row-gap: 8px;
  }

  .plans-ledger > .plan-row > .plan-main > h3 {
    font-size: clamp(21px, 7vw, 26px);
    line-height: 1.14;
  }

  .plans-ledger .plan-price,
  .plans-ledger .plan-action--free .plan-meta-title {
    font-size: 24px;
  }

  .plans-ledger > .plan-row > .plan-action {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

  .plans-ledger .plan-cta {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }
}


/* ── GLOBAL STANDARDISATION PASS ────────────────────────────────
   Final shared tokens and active component rules.
   - one canonical primary blue
   - unified button system
   - consistent heading/body font scale
   - no rendered text below 16px
   - section spacing/backgrounds routed through common tokens
---------------------------------------------------------------- */
:root {
  --blue: #3356E8;
  --blue-text: #FFFFFF;

  --button-primary-bg: var(--blue);
  --button-primary-bg-hover: var(--blue);
  --button-primary-text: var(--blue-text);

  --button-secondary-bg: var(--bg-mid);
  --button-secondary-bg-hover: var(--bg-mid-2);
  --button-secondary-border: var(--border-card);
  --button-secondary-text: var(--text-sec);

  --section-y-lg: clamp(88px, 9vw, 124px);
  --section-y-md: clamp(72px, 8vw, 104px);

  --text-size-min: 16px;
  --text-size-body: 16px;
  --text-size-lead: clamp(16px, 1.25vw, 18px);
  --text-size-small: 16px;

  --heading-size-section: clamp(38px, 4.4vw, 56px);
  --heading-size-card: clamp(21px, 1.9vw, 26px);
  --heading-size-small: clamp(18px, 1.4vw, 21px);
}

body {
  font-size: var(--text-size-body);
}

:is(p, li, a, button, input, textarea, select, label, summary, figcaption, small, span, th, td) {
  font-size: max(16px, 1em);
}

:is(.compose-section, .plans-section, .capabilities-section, .audience-section, .support-section, .about-section) {
  padding-top: var(--section-y-lg);
  padding-bottom: var(--section-y-lg);
}

:is(.compose-title, .sec-title, .plans-title, .about-headline, .support-headline, .legal-title, .install-title, .page-title) {
  font-family: var(--font-display);
  font-size: var(--heading-size-section);
  font-weight: var(--heading-weight-section, 650);
  letter-spacing: -0.034em;
  line-height: 1.08;
  text-wrap: balance;
}

:is(.capability-copy h3, .plans-ledger > .plan-row > .plan-main > h3, .audience-case-head h3, .faq-section .faq-q, .pricing-card h3, .proof-copy h3, .role-card h3, .platform-card h3) {
  font-family: var(--font-display);
  font-size: var(--heading-size-card);
  font-weight: var(--heading-weight-sub, 625);
  letter-spacing: -0.014em;
  line-height: 1.16;
  text-wrap: balance;
}

:is(.hero-body p, .compose-intro, .capability-copy p, .audience-case-body p, .plans-ledger .plan-copy > p, .plans-ledger .plan-fit, .plans-ledger .plan-copy-list, .faq-section .faq-a, .legal-sub, .legal-content p, .modal-body p, .page-sub, .section-sub, .support-body, .about-body, .aud-left-body) {
  font-family: var(--font-body, var(--font-ui));
  font-size: var(--text-size-body);
  line-height: 1.68;
}

:is(.btn-cta, .btn-ghost, .hbtn-launch, .hbtn-support, .road-notify, .lang-banner-cta) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: var(--r-btn);
  font-family: var(--font-body, var(--font-ui));
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}

:is(.btn-cta, .road-notify, .lang-banner-cta) {
  background: var(--button-primary-bg);
  border: 1px solid var(--button-primary-bg);
  color: var(--button-primary-text);
}

:is(.btn-cta, .road-notify, .lang-banner-cta):hover {
  background: var(--button-primary-bg-hover);
  border-color: var(--button-primary-bg-hover);
  color: var(--button-primary-text);
  transform: translateY(-1px);
}

:is(.btn-ghost, .hbtn-support) {
  background: var(--button-secondary-bg);
  border: 1px solid var(--button-secondary-border);
  color: var(--button-secondary-text);
}

:is(.btn-ghost, .hbtn-support):hover {
  background: var(--button-secondary-bg-hover);
  color: var(--text);
}

.hbtn-launch {
  background: var(--button-primary-bg);
  border: 1px solid var(--button-primary-bg);
  color: var(--button-primary-text);
}

.hbtn-launch:hover {
  background: var(--button-primary-bg-hover);
  border-color: var(--button-primary-bg-hover);
  color: var(--button-primary-text);
}

.btn-cta,
.btn-ghost {
  height: 44px;
  padding: 0 20px;
}

.btn-compact {
  height: 40px;
  min-height: 40px;
  padding: 0 16px;
  font-size: 16px;
}

.hbtn-launch,
.hbtn-support {
  min-height: 38px;
  height: 38px;
  padding: 0 14px;
}

.plan-row--free .plan-cta,
.hero-actions .btn-ghost {
  background: var(--button-secondary-bg);
  border-color: var(--button-secondary-border);
  color: var(--button-secondary-text);
}

.plan-row--free .plan-cta:hover,
.hero-actions .btn-ghost:hover {
  background: var(--button-secondary-bg-hover);
  color: var(--text);
}

:is(.hdr-brand-name, .hdr-brand-sub, .ss-brand-name, .ss-brand-sub, .capability-num, .plan-index, .footer-brand-name, .footer-brand-sub, .footer-maker, .footer-link, .footer-lang-btn, .plans-ledger .plan-price-note, .plans-ledger .plan-meta-note, .install-browser-platforms, .install-step-body, .note-text, .info-desc, .browser-platforms) {
  font-size: 16px;
}

.plans-ledger .plan-price,
.plans-ledger .plan-action--free .plan-meta-title {
  font-family: var(--font-body, var(--font-ui));
  font-size: clamp(22px, 1.8vw, 27px);
  font-weight: 650;
  letter-spacing: -0.018em;
  line-height: 1.08;
  font-variant-numeric: lining-nums tabular-nums;
}

@media (max-width: 860px) {
  :is(.compose-section, .plans-section, .capabilities-section, .audience-section, .support-section, .about-section) {
    padding-top: var(--section-y-md);
    padding-bottom: var(--section-y-md);
  }

  :is(.compose-title, .sec-title, .plans-title, .about-headline, .support-headline, .legal-title, .install-title, .page-title) {
    font-size: clamp(34px, 9vw, 46px);
  }
}


/* ── BODY FONT RESTORE OVERRIDE ─────────────────────────────────
   Restore Public Sans as the body/UI sans across the site.
---------------------------------------------------------------- */
:root {
  --font-body: 'Public Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui: var(--font-body);
  --font-sans: var(--font-body);
}


/* ── BODY TEXT SIZE TUNING ──────────────────────────────────────
   Increase primary reading text slightly while keeping utility/meta
   text at the 16px accessibility floor.
---------------------------------------------------------------- */
:root {
  --text-size-body: 17px;
  --text-size-lead: clamp(17px, 1.25vw, 19px);
  --text-size-small: 16px;
}

body {
  font-size: var(--text-size-body);
}

:is(.hero-body p, .compose-intro, .capability-copy p, .audience-case-body p, .plans-ledger .plan-copy > p, .plans-ledger .plan-fit, .plans-ledger .plan-copy-list, .faq-section .faq-a, .legal-sub, .legal-content p, .modal-body p, .page-sub, .section-sub, .support-body, .about-body, .aud-left-body) {
  font-size: var(--text-size-body);
  line-height: 1.66;
}

:is(.plans-ledger .plan-price-note, .plans-ledger .plan-meta-note, .capability-num, .plan-index, .footer-link, .footer-lang-btn, .footer-maker) {
  font-size: 16px;
}


/* ── LEDGER INDEX TUNING ────────────────────────────────────────
   Make numeric ledger labels quieter than body copy.
---------------------------------------------------------------- */
.plans-ledger > .plan-row > .plan-index,
.capability-num,
.plan-index {
  font-size: 14px;
  line-height: 1.3;
}


/* ── FINAL BUTTON + INDEX STANDARDISATION ───────────────────────
   Use only the two hero button treatments across the site:
   1. blue primary
   2. beige secondary

   Also make ledger indices visibly smaller/quieter after the global
   16px accessibility pass, since these are navigational markers rather
   than body copy.
---------------------------------------------------------------- */

/* Ledger indices */
:is(.plans-ledger > .plan-row > .plan-index, .capability-num, .plan-index) {
  font-size: 14px !important;
  line-height: 1.3;
  letter-spacing: 0.12em;
}

/* Shared hero button geometry */
:is(.btn-cta, .btn-ghost, .hbtn-launch, .hbtn-support, .road-notify, .lang-banner-cta, .plan-cta, .plan-cta--primary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--r-btn);
  font-family: var(--font-body, var(--font-ui));
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  box-shadow: none;
}

/* Blue hero button */
:is(.btn-cta, .hbtn-launch, .road-notify, .lang-banner-cta, .plan-cta--primary) {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--blue-text);
}

/* Keep primary hover blue; only movement changes */
:is(.btn-cta, .hbtn-launch, .road-notify, .lang-banner-cta, .plan-cta--primary):hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--blue-text);
  transform: translateY(-1px);
}

/* Beige hero button */
:is(.btn-ghost, .hbtn-support, .plan-row--free .plan-cta) {
  background: var(--bg-mid);
  border-color: var(--border-card);
  color: var(--text-sec);
}

/* Beige hover */
:is(.btn-ghost, .hbtn-support, .plan-row--free .plan-cta):hover {
  background: var(--bg-mid-2);
  border-color: var(--border-card);
  color: var(--text);
  transform: translateY(-1px);
}

/* Compact buttons retain hero treatment but not tiny sizing */
.btn-compact {
  height: 44px;
  min-height: 44px;
  padding: 0 20px;
  font-size: 16px;
}

/* Header buttons should use the same two treatments, only slightly tighter in width */
:is(.hbtn-launch, .hbtn-support) {
  padding-inline: 16px;
}

/* Remove extra overlay effects that made beige variants look different */
:is(.btn-ghost, .hbtn-support, .footer-link)::before {
  display: none;
}

/* ── HERO-BUTTON PARITY FIX ─────────────────────────────────────
   Make the free-plan CTA use the exact same treatment as the hero
   secondary button. This removes the border and matches geometry.
---------------------------------------------------------------- */
.plan-row--free .plan-cta {
  height: 48px;
  min-height: 48px;
  padding-left: 22px;
  padding-right: 22px;
  background: var(--bg-mid);
  border: none;
  color: var(--text-sec);
  box-shadow: none;
}

.plan-row--free .plan-cta:hover,
.plan-row--free .plan-cta:focus-visible {
  background: var(--bg-mid);
  border: none;
  color: var(--text);
}

/* ── CAPABILITIES HEADING REFINEMENT ────────────────────────────
   Make the capability item headings feel cleaner and more direct:
   - use the sans-serif UI/body family
   - slightly smaller than the current display treatment
   - remove the narrow max-width and balance wrapping so line breaks are
     natural rather than feeling artificially forced
---------------------------------------------------------------- */
.capabilities-section .capability-copy h3 {
  font-family: var(--font-body, var(--font-ui));
  font-optical-sizing: auto;
  font-size: clamp(18px, 1.45vw, 22px);
  font-weight: 650;
  letter-spacing: -0.012em;
  line-height: 1.14;
  max-width: none;
  text-wrap: pretty;
}

@media (max-width: 860px) {
  .capabilities-section .capability-copy h3 {
    font-size: clamp(18px, 4.8vw, 21px);
    line-height: 1.16;
  }
}

/* ── CAPABILITIES HEADING TEST: INDEX-LIKE UPPERCASE ────────────
   Test version requested by user: use the same general code language
   as the 01/02 ledger indices, but in black and with a stronger weight.
---------------------------------------------------------------- */
.capabilities-section .capability-copy h3 {
  font-family: var(--font-body, var(--font-ui));
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--text);
  max-width: none;
  text-wrap: normal;
}

/* ── HEADER + FOOTER BREATHING ROOM ─────────────────────────────
   Adds vertical padding so the shared site chrome feels less cramped.
---------------------------------------------------------------- */
#site-hdr {
  height: auto;
  min-height: 64px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}

.site-footer {
  min-height: 76px;
  padding-top: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.footer-inner {
  min-height: auto;
}

@media (max-width: 760px) {
  #site-hdr {
    min-height: 60px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  .site-footer {
    min-height: auto;
    padding-top: 14px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
}

/* ── FOOTER HEADER PARITY ───────────────────────────────────────
   Makes the footer use the same full-width, app-bar language as
   the sticky header: matching surface, brand scale, spacing, and
   button-like link treatment.
---------------------------------------------------------------- */
.site-footer {
  background: rgba(255,255,255,.92);
  border-top: 1px solid var(--border-card);
  box-shadow: none;
  backdrop-filter: saturate(1.1) blur(10px);
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
  min-height: auto;
  padding: 10px max(20px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

.site-footer .footer-bottom {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
}

.site-footer .wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.footer-inner {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  padding: 0;
}

.footer-brand-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  margin: 0;
  min-width: 0;
  white-space: nowrap;
}

.footer-brand-name,
.footer-brand-sub {
  font-size: 16px;
  line-height: 1;
}

.footer-brand-name {
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.footer-brand-sub {
  color: var(--blue);
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: .86;
}

.footer-brand-sep {
  width: 1px;
  height: 14px;
  background: var(--border-strong);
  flex: 0 0 auto;
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}

.footer-sep {
  display: none;
}

.footer-link,
.footer-lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: var(--r-btn);
  border: 1px solid var(--button-secondary-border, var(--border-card));
  background: var(--button-secondary-bg, var(--bg-white));
  color: var(--button-secondary-text, var(--text-sec));
  font-family: var(--font-body, var(--font-ui));
  font-size: 16px;
  font-weight: 560;
  letter-spacing: -0.014em;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
}

.footer-link:hover,
.footer-lang-btn:hover {
  background: var(--button-secondary-bg-hover, var(--bg-light));
  color: var(--text);
  border-color: var(--border-strong);
}

.footer-link.is-current,
.footer-link[aria-current="page"] {
  background: var(--bg-mid-2, var(--bg-mid));
  color: var(--text);
  border-color: var(--border);
}

@media (max-width: 760px) {
  .site-footer {
    padding: 8px max(14px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }

  .footer-inner {
    min-height: auto;
    align-items: flex-start;
    gap: 8px 12px;
    flex-wrap: wrap;
  }

  .footer-brand-row {
    width: 100%;
    height: 36px;
  }

  .footer-links {
    width: 100%;
    justify-content: flex-start;
    gap: 6px;
  }

  .footer-link,
  .footer-lang-btn {
    min-height: 32px;
    padding: 0 9px;
    font-size: 16px;
  }
}

@media (max-width: 560px) {
  .footer-brand-sub,
  .footer-brand-sep {
    display: none;
  }

  .footer-brand-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ── FOOTER HEADER MATCH ────────────────────────────────────────
   Keep footer surface and spacing aligned with the header chrome.
---------------------------------------------------------------- */
.site-footer {
  background: rgba(255,255,255,.94);
  border-top: 1px solid var(--border);
  min-height: 64px;
  padding-top: 10px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}

.site-footer .footer-inner {
  min-height: 44px;
  align-items: center;
}

@media (max-width: 760px) {
  .site-footer {
    min-height: 60px;
    padding-top: 8px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  .site-footer .footer-inner {
    min-height: 44px;
  }
}


/* ── Site modal pages: install / legal policies ─────────────────── */
.modal-overlay[hidden] {
  display: none !important;
}

body.modal-open {
  overflow: hidden;
}

.site-modal {
  z-index: 1200;
}

.modal-sheet--wide {
  width: min(1120px, calc(100vw - 40px));
  max-width: min(1120px, calc(100vw - 40px));
  max-height: min(88vh, 920px);
}

.modal-sheet--install {
  background: var(--bg-white);
}

.modal-body--install {
  padding: 0;
  background: var(--bg-white);
}

.modal-body--install > .compose-section:first-child {
  padding-top: 0;
  padding-bottom: 0;
}

.modal-body--install > .compose-section:first-child .wrap {
  padding-top: 26px;
  padding-bottom: 12px;
}

.modal-body--install .install-page-shell {
  background: var(--bg-white);
}

.modal-body--install .page-hero {
  padding-top: 28px;
}

.modal-body--install .platform-nav {
  position: sticky;
  top: 0;
  z-index: 3;
  background: color-mix(in srgb, var(--bg-white) 92%, transparent);
  border-bottom: 1px solid var(--border-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.modal-body--install .platform-section {
  padding-top: 32px;
  padding-bottom: 40px;
}

.modal-body--install .wrap,
.modal-body--install .page-hero,
.modal-body--install .platform-nav {
  max-width: none;
}

.modal-body--install .browser-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.modal-body--install .info-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 820px) {
  .modal-overlay {
    padding: 12px;
  }

  .modal-sheet,
  .modal-sheet--wide {
    max-width: calc(100vw - 24px);
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .modal-hdr {
    padding: 16px 18px 14px;
  }

  .modal-body {
    padding: 18px;
  }

  .modal-body--install {
    padding: 0;
  }

  .modal-body--install .browser-grid,
  .modal-body--install .info-grid {
    grid-template-columns: 1fr;
  }

  .modal-body--install .platform-btns {
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
  }
}

@media (max-width: 520px) {
  .modal-overlay {
    align-items: stretch;
    padding: 0;
  }

  .modal-sheet,
  .modal-sheet--wide {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .modal-body {
    padding: 16px;
  }

  .modal-body--install {
    padding: 0;
  }
}


/* ── Bottom-right sidebar popovers for install and policy content ── */
body.modal-open { overflow: auto; }
.modal-overlay.site-modal {
  inset: auto max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) auto;
  width: min(520px, calc(100vw - 32px));
  height: min(78vh, 720px);
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms var(--ease);
}
.modal-overlay.site-modal.open { opacity: 1; pointer-events: none; }
.modal-overlay.site-modal .modal-sheet {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  border-radius: 24px;
  overflow: hidden;
  pointer-events: auto;
  box-shadow: 0 22px 70px rgba(26,25,23,.20), 0 5px 16px rgba(26,25,23,.10);
  transform: translate3d(18px, 18px, 0) scale(.985);
  opacity: 0;
  transition: transform 220ms var(--ease-d), opacity 180ms var(--ease);
}
.modal-overlay.site-modal.open .modal-sheet { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
.site-modal--install { width: min(620px, calc(100vw - 32px)); height: min(86vh, 780px); }
.site-modal .modal-hdr { padding: 18px 20px 14px; }
.site-modal .modal-body { padding: 20px; max-height: none; }
.site-modal .modal-body--install { padding: 0; background: var(--bg-white); }
.install-modal { padding: 18px; }
.install-modal .platform-nav {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0 0 14px;
  margin: 0 0 18px;
  max-width: none;
  background: color-mix(in srgb, var(--bg-white) 92%, transparent);
  border-bottom: 1px solid var(--border-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.install-modal .platform-btns { display: flex; gap: 6px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.install-modal .platform-btns::-webkit-scrollbar { display: none; }
.install-modal .pbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-btn);
  border: 1px solid var(--border-card);
  background: var(--bg-mid);
  color: var(--text-sec);
  cursor: pointer;
  flex: 0 0 auto;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  height: 34px;
  padding: 0 13px;
  white-space: nowrap;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.install-modal .pbtn:hover { color: var(--text); border-color: var(--border-strong); }
.install-modal .pbtn.active { background: var(--blue); border-color: var(--blue); color: var(--blue-text); }
.install-modal .platform-section { display: none; padding: 0 0 10px; }
.install-modal .platform-section.active { display: block; }
.install-modal .section-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.18;
  color: var(--text);
  margin: 0 0 18px;
}
.install-modal .subsection-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 22px 0 10px;
}
.install-modal .section-title + .subsection-label { margin-top: 0; }
.install-modal .browser-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 18px; }
.install-modal .browser-card { background: var(--bg-white); border: 1px solid var(--border-card); border-radius: 18px; overflow: hidden; }
.install-modal .browser-card-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px 16px 12px; border-bottom: 1px solid var(--border-card); background: rgba(247,246,243,.6); }
.install-modal .browser-name { font-size: 14px; font-weight: 700; letter-spacing: -.015em; color: var(--text); }
.install-modal .browser-platforms { font-size: 12px; color: var(--text-mute); margin-top: 3px; }
.install-modal .steps { display: flex; flex-direction: column; gap: 12px; padding: 15px 16px 16px; }
.install-modal .step { display: grid; grid-template-columns: 24px 1fr; gap: 11px; align-items: flex-start; }
.install-modal .step-n { width: 24px; height: 24px; border-radius: 50%; background: var(--blue-sub); color: var(--blue-sub-text); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; line-height: 1; margin-top: 1px; }
.install-modal .step-body { font-size: 14px; line-height: 1.6; color: var(--text-sec); }
.install-modal .step-body strong { color: var(--text); font-weight: 700; }
@media (max-width: 640px) {
  .modal-overlay.site-modal,
  .modal-overlay.site-modal.site-modal--install {
    inset: auto 10px max(10px, env(safe-area-inset-bottom)) 10px;
    width: auto;
    height: min(84vh, calc(100dvh - 28px));
  }
  .modal-overlay.site-modal .modal-sheet { border-radius: 22px; }
  .site-modal .modal-hdr { padding: 16px 16px 12px; }
  .site-modal .modal-body { padding: 16px; }
  .site-modal .modal-body--install { padding: 0; }
  .install-modal { padding: 14px; }
}

/* ── CAPABILITIES HEADING STYLE ALIGNMENT ────────────────────────
   Match the "What you can do in Compose" item headings to the plan
   row headings instead of using the index-like uppercase treatment.
---------------------------------------------------------------- */
.capabilities-section .capability-copy h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(21px, 1.9vw, 26px);
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.16;
  text-transform: none;
  color: var(--text);
  max-width: 20ch;
  text-wrap: balance;
}

@media (max-width: 860px) {
  .capabilities-section .capability-copy h3 {
    max-width: none;
  }
}


/* ── Footer links: original concept treatment ─────────────────────
   Keep the newer white footer shell, but make links read as quiet
   text links rather than secondary buttons.
---------------------------------------------------------------- */
.site-footer .footer-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  margin-left: auto;
  flex-wrap: wrap;
}

.site-footer .footer-sep {
  display: inline-flex;
  align-items: center;
  color: var(--border-strong);
  font-size: 11px;
  line-height: 1;
  user-select: none;
  margin: 0 1px;
}

.site-footer .footer-link,
.site-footer .footer-lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: auto;
  padding: 5px 9px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  box-shadow: none;
  color: var(--text-mute);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease);
}

.site-footer .footer-link::before,
.site-footer .footer-lang-btn::before {
  content: none;
  display: none;
}

.site-footer .footer-link:hover,
.site-footer .footer-lang-btn:hover,
.site-footer .footer-link:focus-visible,
.site-footer .footer-lang-btn:focus-visible {
  background: transparent;
  border-color: transparent;
  color: var(--text);
  box-shadow: none;
}

.site-footer .footer-link.is-current,
.site-footer .footer-link[aria-current="page"] {
  background: transparent;
  border-color: transparent;
  color: var(--text);
}

.site-footer .footer-lang-wrap {
  display: inline-flex;
  align-items: center;
  position: relative;
}

@media (max-width: 760px) {
  .site-footer .footer-links {
    justify-content: flex-start;
    gap: 2px;
  }

  .site-footer .footer-link,
  .site-footer .footer-lang-btn {
    padding: 5px 8px;
    font-size: 12px;
  }
}

/* ── REQUESTED HERO / CAPABILITIES / PLANS HIERARCHY TUNE ─────────
   Applies the latest requested typography and plans-row structure.
------------------------------------------------------------------- */
.hero-headline {
  font-size: clamp(36px, 4.4vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.hero-actions .btn-ghost {
  background: transparent;
  border: 1px solid var(--border-strong);
  box-shadow: none !important;
  color: var(--text-sec);
}

.hero-actions .btn-ghost:hover,
.hero-actions .btn-ghost:focus-visible {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}

.capabilities-section .capability-copy h3 {
  font-size: clamp(16px, 1.7vw, 20px);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.18;
}

.capabilities-section .capability-copy p {
  font-size: 15px;
  line-height: 1.78;
}

.plans-ledger > .plan-row {
  align-items: stretch;
  padding-top: 36px;
  padding-bottom: 38px;
}

.plans-ledger > .plan-row > .plan-main > h3 {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.15;
}

.plans-ledger .plan-copy > p {
  font-size: 15px;
  line-height: 1.72;
}

.plans-ledger .plan-fit,
.plans-ledger .plan-copy-list {
  font-size: 14px;
  line-height: 1.68;
}

.plans-ledger .plan-copy-list {
  gap: 8px;
}

.plans-ledger .plan-copy-list li::before {
  top: 0.72em;
}

.plans-ledger > .plan-row > .plan-action {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  gap: 20px;
  width: 100%;
  max-width: 252px;
  min-height: 100%;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 24px;
  border-left: 1px solid rgba(26, 25, 23, 0.1);
}

.plans-ledger .plan-price-block,
.plans-ledger .plan-meta-block {
  display: grid;
  gap: 4px;
  align-content: start;
}

.plans-ledger .plan-price,
.plans-ledger .plan-action--free .plan-meta-title {
  font-size: clamp(26px, 2.5vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.04;
}

.plans-ledger .plan-price-note,
.plans-ledger .plan-meta-note {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.38;
  text-transform: none;
}

.plans-ledger .plan-cta {
  width: 100%;
  margin-top: 0;
}

@media (max-width: 860px) {
  .plans-ledger > .plan-row {
    padding-top: 32px;
    padding-bottom: 34px;
  }

  .plans-ledger > .plan-row > .plan-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: end;
    max-width: none;
    margin-top: 4px;
    padding-top: 14px;
    padding-left: 0;
    border-top: 1px solid rgba(26, 25, 23, 0.1);
    border-left: 0;
  }

  .plans-ledger .plan-cta {
    width: auto;
  }
}

@media (max-width: 560px) {
  .hero-headline {
    font-size: clamp(36px, 10vw, 46px);
    line-height: 1.06;
  }

  .plans-ledger > .plan-row {
    padding-top: 28px;
    padding-bottom: 30px;
  }

  .plans-ledger > .plan-row > .plan-main > h3 {
    font-size: clamp(20px, 7vw, 24px);
  }

  .plans-ledger > .plan-row > .plan-action {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

  .plans-ledger .plan-cta {
    width: 100%;
  }
}

/* ── REQUESTED PLANS RAIL CONSISTENCY FIX ───────────────────────
   Keep the price / CTA rail treatment active at every breakpoint.
------------------------------------------------------------------- */
.hero-headline {
  font-size: clamp(36px, 4.4vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.plans-ledger > .plan-row {
  padding-top: 36px;
  padding-bottom: 38px;
}

.plans-ledger > .plan-row > .plan-action {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  gap: 20px;
  align-items: stretch;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 24px;
  border-left: 1px solid rgba(26, 25, 23, 0.1);
  border-top: 0;
}

.plans-ledger .plan-copy-list li {
  font-size: 14px;
}

.plans-ledger .plan-cta {
  width: 100%;
  margin-top: 0;
}

/* ── APP-LINKED VISUAL PASS: CAPABILITY ICONS + PRODUCT POPOVERS ──
   Introduces app-style Lucide icon tiles in the capabilities matrix
   and refines install/legal dialogs as compact floating cards.
------------------------------------------------------------------- */
.capabilities-section .capability-item {
  grid-template-columns: 42px minmax(0, 1fr);
}

.capabilities-section .capability-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-mid) 72%, var(--bg-white));
  border: 1px solid color-mix(in srgb, var(--border-card) 90%, transparent);
  color: color-mix(in srgb, var(--text-sec) 88%, var(--blue));
  box-shadow: 0 1px 2px rgba(26,25,23,.035), inset 0 1px 0 rgba(255,255,255,.58);
}

.capabilities-section .capability-icon svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.capabilities-section .capability-item:hover .capability-icon {
  background: color-mix(in srgb, var(--blue-sub) 44%, var(--bg-white));
  border-color: color-mix(in srgb, var(--blue) 18%, var(--border-card));
  color: var(--blue);
}

@media (max-width: 980px) {
  .capabilities-section .capability-item {
    grid-template-columns: 42px minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .capabilities-section .capability-item {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
  }

  .capabilities-section .capability-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  .capabilities-section .capability-icon svg {
    width: 17px;
    height: 17px;
  }
}

body.modal-open {
  overflow: auto;
}

.modal-overlay.site-modal {
  inset: auto max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) auto;
  width: min(500px, calc(100vw - 32px));
  height: min(74dvh, 680px);
  padding: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms var(--ease);
}

.modal-overlay.site-modal.open {
  opacity: 1;
  pointer-events: none;
}

.modal-overlay.site-modal .modal-sheet {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-white) 94%, var(--bg-light));
  border: 1px solid color-mix(in srgb, var(--border-card) 86%, transparent);
  box-shadow: 0 1px 2px rgba(26,25,23,.05), 0 16px 42px rgba(26,25,23,.13);
  pointer-events: auto;
  opacity: 0;
  transform: translate3d(10px, 12px, 0) scale(.985);
  transition: transform 180ms var(--ease-d), opacity 150ms var(--ease), box-shadow 150ms var(--ease);
}

@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
  .modal-overlay.site-modal .modal-sheet {
    background: color-mix(in srgb, var(--bg-white) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.04) blur(18px);
    backdrop-filter: saturate(1.04) blur(18px);
  }
}

.modal-overlay.site-modal.open .modal-sheet {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.modal-overlay.site-modal.site-modal--install {
  width: min(680px, calc(100vw - 32px));
  height: min(86dvh, 780px);
}

.site-modal .modal-hdr {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-card) 88%, transparent);
  background: color-mix(in srgb, var(--bg-white) 82%, transparent);
}

.site-modal .modal-title-wrap {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.site-modal .modal-title-chip {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg-mid) 78%, var(--bg-white));
  border: 1px solid color-mix(in srgb, var(--border-card) 92%, transparent);
  color: var(--text-sec);
}

.site-modal .modal-title-chip--install,
.site-modal .modal-title-chip--privacy {
  background: color-mix(in srgb, var(--blue-sub) 42%, var(--bg-white));
  border-color: color-mix(in srgb, var(--blue) 16%, var(--border-card));
  color: var(--blue);
}

.site-modal .modal-title-chip svg {
  width: 15px;
  height: 15px;
}

.site-modal .modal-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.014em;
  color: var(--text);
}

.site-modal .modal-close {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-mute);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), transform 80ms var(--ease);
}

.site-modal .modal-close:hover,
.site-modal .modal-close:focus-visible {
  background: color-mix(in srgb, var(--blue-sub) 36%, transparent);
  border-color: color-mix(in srgb, var(--blue) 14%, var(--border-card));
  color: var(--text);
  outline: none;
}

.site-modal .modal-close:active {
  transform: scale(.97);
}

.site-modal .modal-close svg {
  width: 15px;
  height: 15px;
}

.site-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding: 18px 20px 20px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--text-sec);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--border-strong) 80%, transparent) transparent;
}

.site-modal .modal-body h2 {
  margin: 22px 0 7px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.28;
  letter-spacing: -0.012em;
  color: var(--text);
}

.site-modal .modal-body h2:first-child {
  margin-top: 0;
}

.site-modal .modal-body p,
.site-modal .modal-body ul {
  margin-bottom: 10px;
}

.site-modal .modal-body li {
  margin-bottom: 5px;
}

.site-modal .modal-updated {
  margin: -2px 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-card) 90%, transparent);
  color: var(--text-mute);
  font-size: 12.5px;
  line-height: 1.45;
}

.site-modal .modal-body--install {
  padding: 0;
  background: var(--bg-white);
}

.site-modal .install-modal {
  padding: 16px;
}

.site-modal .install-modal .platform-nav {
  margin: 0 0 16px;
  padding: 0 0 12px;
  background: color-mix(in srgb, var(--bg-white) 88%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border-card) 88%, transparent);
}

.site-modal .install-modal .pbtn {
  height: 32px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg-mid) 72%, var(--bg-white));
  border-color: color-mix(in srgb, var(--border-card) 92%, transparent);
  font-size: 12.5px;
}

.site-modal .install-modal .pbtn.active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--blue-text);
}

.site-modal .install-modal .browser-card {
  border-radius: 16px;
  border-color: color-mix(in srgb, var(--border-card) 92%, transparent);
  box-shadow: 0 1px 2px rgba(26,25,23,.035);
}

.site-modal .install-modal .browser-card-hdr {
  background: color-mix(in srgb, var(--bg-light) 64%, var(--bg-white));
}

.site-modal .install-modal .step-n {
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue-sub) 48%, var(--bg-white));
  color: var(--blue);
}

@media (max-width: 640px) {
  .modal-overlay.site-modal,
  .modal-overlay.site-modal.site-modal--install {
    inset: auto 0 0 0;
    width: 100vw;
    height: min(88dvh, calc(100dvh - 18px));
  }

  .modal-overlay.site-modal .modal-sheet {
    border-radius: 22px 22px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    transform: translate3d(0, 16px, 0) scale(1);
  }

  .site-modal .modal-hdr {
    min-height: 52px;
    padding: 10px 10px 10px 14px;
  }

  .site-modal .modal-body {
    padding: 16px;
  }

  .site-modal .modal-body--install {
    padding: 0;
  }

  .site-modal .install-modal {
    padding: 14px;
  }
}



/* ── PASS 1 REFINEMENT: capability icons without background ── */
.capabilities-section .capability-item {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 16px;
}

.capabilities-section .capability-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: color-mix(in srgb, var(--text) 78%, var(--blue) 22%);
}

.capabilities-section .capability-icon svg {
  width: 18px;
  height: 18px;
}

.capabilities-section .capability-item:hover .capability-icon {
  background: transparent;
  border-color: transparent;
  color: var(--blue);
}

@media (max-width: 980px) {
  .capabilities-section .capability-item {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .capabilities-section .capability-item {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
  }

  .capabilities-section .capability-icon {
    width: 20px;
    height: 20px;
  }

  .capabilities-section .capability-icon svg {
    width: 18px;
    height: 18px;
  }
}

/* ── PASS 2 REFINEMENT: harmonised product popover surfaces ── */
:root {
  --site-popover-radius: 16px;
  --site-popover-border: color-mix(in srgb, var(--border-card) 84%, transparent);
  --site-popover-shadow: 0 1px 2px rgba(26,25,23,.045), 0 10px 28px rgba(26,25,23,.085);
  --site-popover-shadow-open: 0 1px 2px rgba(26,25,23,.05), 0 14px 34px rgba(26,25,23,.10);
  --site-popover-fill: color-mix(in srgb, var(--bg-white) 94%, var(--bg-light));
  --site-popover-header: color-mix(in srgb, var(--bg-white) 90%, transparent);
  --site-popover-control-fill: color-mix(in srgb, var(--bg-mid) 46%, var(--bg-white));
}

.modal-overlay.site-modal {
  width: min(480px, calc(100vw - 32px));
  height: min(72dvh, 660px);
}

.modal-overlay.site-modal .modal-sheet {
  border-radius: var(--site-popover-radius);
  background: var(--site-popover-fill);
  border: 1px solid var(--site-popover-border);
  box-shadow: var(--site-popover-shadow);
  transform: translate3d(8px, 10px, 0) scale(.988);
  transition: transform 180ms var(--ease-d), opacity 150ms var(--ease), box-shadow 150ms var(--ease), border-color 150ms var(--ease);
}

@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
  .modal-overlay.site-modal .modal-sheet {
    background: color-mix(in srgb, var(--bg-white) 86%, transparent);
    -webkit-backdrop-filter: saturate(1.03) blur(14px);
    backdrop-filter: saturate(1.03) blur(14px);
  }
}

.modal-overlay.site-modal.open .modal-sheet {
  box-shadow: var(--site-popover-shadow-open);
}

.modal-overlay.site-modal.site-modal--install {
  width: min(660px, calc(100vw - 32px));
  height: min(84dvh, 760px);
}

.site-modal .modal-hdr {
  min-height: 48px;
  padding: 8px 8px 8px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-card) 76%, transparent);
  background: var(--site-popover-header);
}

.site-modal .modal-title-wrap {
  gap: 9px;
}

.site-modal .modal-title-chip {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--site-popover-control-fill);
  border: 1px solid color-mix(in srgb, var(--border-card) 80%, transparent);
  color: color-mix(in srgb, var(--text-sec) 88%, var(--blue) 12%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
}

.site-modal .modal-title-chip--install,
.site-modal .modal-title-chip--privacy,
.site-modal .modal-title-chip--terms,
.site-modal .modal-title-chip--cookies {
  background: color-mix(in srgb, var(--blue-sub) 18%, var(--bg-white));
  border-color: color-mix(in srgb, var(--blue) 10%, var(--border-card));
  color: color-mix(in srgb, var(--text-sec) 76%, var(--blue) 24%);
}

.site-modal .modal-title-chip svg {
  width: 14px;
  height: 14px;
}

.site-modal .modal-title {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.012em;
}

.site-modal .modal-close {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: color-mix(in srgb, var(--text-mute) 92%, var(--text));
}

.site-modal .modal-close:hover,
.site-modal .modal-close:focus-visible {
  background: color-mix(in srgb, var(--bg-mid) 62%, transparent);
  border-color: color-mix(in srgb, var(--border-card) 88%, transparent);
  color: var(--text);
}

.site-modal .modal-close svg {
  width: 14px;
  height: 14px;
}

.site-modal .modal-body {
  padding: 17px 19px 20px;
  font-size: 13.75px;
  line-height: 1.72;
}

.site-modal .modal-body h2 {
  margin: 21px 0 7px;
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.site-modal .modal-updated {
  margin: -1px 0 17px;
  padding-bottom: 13px;
  font-size: 12px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text-mute) 90%, var(--text-sec));
  border-bottom-color: color-mix(in srgb, var(--border-card) 78%, transparent);
}

.site-modal .modal-body--install {
  background: color-mix(in srgb, var(--bg-white) 96%, var(--bg-light));
}

.site-modal .install-modal {
  padding: 14px;
}

.site-modal .install-modal .platform-nav {
  margin: 0 0 14px;
  padding: 0 0 10px;
  border-bottom-color: color-mix(in srgb, var(--border-card) 76%, transparent);
  background: transparent;
}

.site-modal .install-modal .pbtn {
  height: 30px;
  border-radius: 8px;
  background: var(--site-popover-control-fill);
  border-color: color-mix(in srgb, var(--border-card) 82%, transparent);
  font-size: 12px;
  font-weight: 560;
}

.site-modal .install-modal .pbtn:hover {
  border-color: color-mix(in srgb, var(--border-strong) 70%, transparent);
  background: color-mix(in srgb, var(--bg-mid) 58%, var(--bg-white));
}

.site-modal .install-modal .pbtn.active {
  background: color-mix(in srgb, var(--blue) 92%, var(--text));
  border-color: color-mix(in srgb, var(--blue) 88%, var(--text));
  color: var(--blue-text);
}

.site-modal .install-modal .browser-card {
  border-radius: 14px;
  border-color: color-mix(in srgb, var(--border-card) 82%, transparent);
  box-shadow: 0 1px 2px rgba(26,25,23,.03);
  background: color-mix(in srgb, var(--bg-white) 96%, var(--bg-light));
}

.site-modal .install-modal .browser-card-hdr {
  background: color-mix(in srgb, var(--bg-light) 50%, var(--bg-white));
  border-bottom-color: color-mix(in srgb, var(--border-card) 72%, transparent);
}

.site-modal .install-modal .browser-name {
  font-size: 13.5px;
  letter-spacing: -0.01em;
}

.site-modal .install-modal .browser-platforms,
.site-modal .install-modal .step-body {
  font-size: 13.25px;
  line-height: 1.58;
}

.site-modal .install-modal .step-n {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--blue-sub) 28%, var(--bg-white));
  color: color-mix(in srgb, var(--text-sec) 70%, var(--blue) 30%);
  border: 1px solid color-mix(in srgb, var(--blue) 9%, var(--border-card));
}

@media (max-width: 640px) {
  .modal-overlay.site-modal,
  .modal-overlay.site-modal.site-modal--install {
    height: min(88dvh, calc(100dvh - 18px));
  }

  .modal-overlay.site-modal .modal-sheet {
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -1px 2px rgba(26,25,23,.035), 0 -10px 30px rgba(26,25,23,.10);
  }

  .modal-overlay.site-modal .modal-sheet::before {
    content: "";
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border-strong) 72%, transparent);
    align-self: center;
    flex: 0 0 auto;
    margin-top: 8px;
  }

  .site-modal .modal-hdr {
    min-height: 48px;
    padding: 8px 8px 8px 12px;
  }

  .site-modal .modal-body {
    padding: 15px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    font-size: 13.75px;
  }

  .site-modal .modal-body--install {
    padding: 0;
  }

  .site-modal .install-modal {
    padding: 13px 13px calc(16px + env(safe-area-inset-bottom, 0px));
  }
}


/* ── PASS 3: SMALL UI HARMONY ─────────────────────────────────────
   Unifies repeated small interface details across buttons, footer,
   plan metadata, and install/legal supporting UI.
------------------------------------------------------------------- */

:root {
  --ui-hairline: rgba(26, 25, 23, 0.11);
  --ui-hairline-strong: rgba(26, 25, 23, 0.16);
  --ui-soft-fill: rgba(26, 25, 23, 0.03);
}

/* Shared small-label rhythm */
:is(.hero-eyebrow, .support-right-label, .capability-num, .plans-ledger .plan-price-note, .plans-ledger .plan-meta-note, .footer-link, .footer-lang-btn, .footer-maker, .modal-updated, .install-browser-platforms, .install-step-body, .note-text, .info-desc, .browser-platforms) {
  letter-spacing: 0.01em;
}

.hero-eyebrow,
.support-right-label {
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in srgb, var(--text-mute) 88%, var(--text));
}

/* Buttons: align secondary/compact controls with the calmer app-linked language */
:is(.btn-cta, .btn-ghost, .plan-cta, .install-tab) {
  border-radius: 10px;
}

.btn-cta,
.btn-ghost {
  height: 42px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.btn-compact,
.plan-cta.btn-compact {
  height: 37px;
  padding-inline: 15px;
  font-size: 14px;
}

.btn-ghost,
.plan-row--free .plan-cta {
  background: transparent;
  border: 1px solid var(--ui-hairline-strong);
  color: var(--text-sec);
}

.btn-ghost:hover,
.btn-ghost:focus-visible,
.plan-row--free .plan-cta:hover,
.plan-row--free .plan-cta:focus-visible {
  background: var(--ui-soft-fill);
  border-color: rgba(26, 25, 23, 0.2);
  color: var(--text);
  box-shadow: none;
}

.hero-actions {
  gap: 12px;
}

/* Plan support text: keep hierarchy quiet and consistent */
.plans-ledger .plan-fit,
.plans-ledger .plan-copy-list,
.plans-note-copy {
  color: color-mix(in srgb, var(--text-sec) 92%, var(--text));
}

.plans-ledger .plan-copy-list {
  gap: 7px;
}

.plans-ledger .plan-price-note,
.plans-ledger .plan-meta-note {
  color: var(--text-mute);
}

.plan-secondary-link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(26, 25, 23, 0.22);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: color var(--t) var(--ease), text-decoration-color var(--t) var(--ease);
}

.plan-secondary-link:hover,
.plan-secondary-link:focus-visible {
  color: var(--blue);
  text-decoration-color: rgba(51, 86, 232, 0.32);
}

/* Footer: make links feel like one calm text system */
.site-footer {
  border-top-color: var(--ui-hairline);
}

.site-footer .footer-inner {
  gap: 18px;
}

.site-footer .footer-brand-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.site-footer .footer-brand-sub,
.site-footer .footer-maker {
  font-size: 12px;
}

.site-footer .footer-links {
  gap: 3px;
}

.site-footer .footer-link,
.site-footer .footer-lang-btn {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: color-mix(in srgb, var(--text-mute) 92%, var(--text));
}

.site-footer .footer-link:hover,
.site-footer .footer-lang-btn:hover,
.site-footer .footer-link:focus-visible,
.site-footer .footer-lang-btn:focus-visible {
  background: rgba(26, 25, 23, 0.045);
  color: var(--text);
}

.site-footer .footer-link.is-current,
.site-footer .footer-link[aria-current="page"] {
  background: rgba(26, 25, 23, 0.05);
  color: var(--text);
}

.site-footer .footer-sep {
  opacity: 0.6;
}

/* Popover internals: keep small controls aligned with the refined site language */
.modal-updated {
  font-size: 12px;
  color: color-mix(in srgb, var(--text-mute) 95%, var(--text));
  border-bottom-color: var(--ui-hairline);
}

.install-tabbar {
  gap: 8px;
}

.install-tab {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--ui-hairline-strong);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-sec);
}

.install-tab:hover,
.install-tab:focus-visible {
  background: rgba(26, 25, 23, 0.035);
  border-color: rgba(26, 25, 23, 0.2);
  color: var(--text);
}

.install-tab.active {
  background: rgba(26, 25, 23, 0.94);
  border-color: rgba(26, 25, 23, 0.94);
  color: var(--bg-white);
}

@media (max-width: 760px) {
  .site-footer .footer-inner {
    gap: 14px;
  }

  .site-footer .footer-links {
    gap: 2px;
  }
}


/* ── RESTORE CAPABILITY NUMBERING SYSTEM ───────────────────────────
   Reverts the capability matrix markers from app icons back to the
   quieter editorial 01 / 02 / 03 numbering system.
------------------------------------------------------------------- */
.capabilities-section .capability-item {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 18px;
}

.capabilities-section .capability-num {
  display: block;
  padding-top: 5px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-mute) 86%, var(--text));
  font-variant-numeric: tabular-nums;
}

@media (max-width: 980px) {
  .capabilities-section .capability-item {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .capabilities-section .capability-item {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .capabilities-section .capability-num {
    padding-top: 0;
    font-size: 12px;
  }
}


/* ── PLANS PASS 1: ROW ARCHITECTURE REWORK ───────────────────────
   Keep the numbered ledger concept, but make the right rail feel less
   detached by grouping price + note + CTA together in a tighter, more
   coherent action zone. Also soften the row indices slightly.
------------------------------------------------------------------- */
.plans-ledger > .plan-row {
  align-items: start;
}

.plans-ledger > .plan-row > .plan-index {
  padding-top: 5px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  color: color-mix(in srgb, var(--text-mute) 84%, var(--text));
  font-variant-numeric: tabular-nums;
}

.plans-ledger > .plan-row > .plan-main {
  min-width: 0;
}

.plans-ledger > .plan-row > .plan-main > .plan-copy {
  max-width: 68ch;
}

.plans-ledger > .plan-row > .plan-action {
  display: grid;
  align-content: start;
  justify-items: stretch;
  gap: 14px;
  width: 100%;
  max-width: 218px;
  min-height: 0;
  padding-top: 2px;
  padding-bottom: 0;
  padding-left: 18px;
  border-left: 1px solid rgba(26, 25, 23, 0.09);
}

.plans-ledger .plan-price-block,
.plans-ledger .plan-meta-block {
  display: grid;
  gap: 4px;
  align-content: start;
}

.plans-ledger .plan-price,
.plans-ledger .plan-action--free .plan-meta-title {
  margin: 0;
}

.plans-ledger .plan-price-note,
.plans-ledger .plan-meta-note {
  margin: 0;
}

.plans-ledger .plan-cta {
  width: 100%;
  margin-top: 4px;
  align-self: start;
}

@media (min-width: 1121px) {
  .plans-ledger > .plan-row > .plan-main {
    grid-column: 2 / span 9;
  }

  .plans-ledger > .plan-row > .plan-main > .plan-copy {
    max-width: 66ch;
  }

  .plans-ledger > .plan-row > .plan-action {
    grid-column: 11 / span 3;
    max-width: 214px;
    gap: 14px;
    padding-top: 4px;
    padding-left: 18px;
    border-left: 1px solid rgba(26, 25, 23, 0.09);
  }

  .plans-ledger .plan-cta {
    margin-top: 6px;
  }
}

@media (max-width: 860px) {
  .plans-ledger > .plan-row {
    row-gap: 14px;
  }

  .plans-ledger > .plan-row > .plan-index {
    padding-top: 4px;
    font-size: 12px;
  }

  .plans-ledger > .plan-row > .plan-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    max-width: none;
    margin-top: 2px;
    padding-top: 12px;
    padding-left: 0;
    border-top: 1px solid rgba(26, 25, 23, 0.09);
    border-left: 0;
  }

  .plans-ledger .plan-cta {
    width: auto;
    min-width: 168px;
    margin-top: 0;
    justify-self: end;
  }
}

@media (max-width: 560px) {
  .plans-ledger > .plan-row > .plan-action {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

  .plans-ledger .plan-cta {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }
}


/* ── PLANS PASS 2: CLARIFY PLAN PRIORITY ─────────────────────────
   Make Pro the clear default path without breaking the editorial
   ledger system. Keep Essentials low-friction and quiet Teams down so
   it reads as the organisational option rather than a second primary.
------------------------------------------------------------------- */
.plans-ledger .plan-row--pro > .plan-index {
  color: color-mix(in srgb, var(--blue) 68%, var(--text));
}

.plans-ledger .plan-row--pro > .plan-action {
  border-left-color: rgba(51, 86, 232, 0.16);
  background: linear-gradient(180deg, rgba(51, 86, 232, 0.05), rgba(51, 86, 232, 0.025));
  border-radius: 12px;
  padding-top: 12px;
  padding-right: 14px;
  padding-bottom: 12px;
  padding-left: 18px;
}

.plans-ledger .plan-row--pro .plan-price {
  color: var(--text);
}

.plans-ledger .plan-row--pro .plan-price-note {
  color: color-mix(in srgb, var(--text-mute) 88%, var(--blue));
}

.plans-ledger .plan-row--pro .plan-cta {
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 20px rgba(51, 86, 232, 0.10);
}

.plans-ledger .plan-row--pro .plan-cta:hover,
.plans-ledger .plan-row--pro .plan-cta:focus-visible {
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 24px rgba(51, 86, 232, 0.14);
}

.plans-ledger .plan-row--teams .plan-cta {
  background: transparent;
  border: 1px solid rgba(26, 25, 23, 0.14);
  color: var(--text-sec);
  box-shadow: none;
}

.plans-ledger .plan-row--teams .plan-cta:hover,
.plans-ledger .plan-row--teams .plan-cta:focus-visible {
  background: rgba(26, 25, 23, 0.035);
  border-color: rgba(26, 25, 23, 0.2);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: none;
}

.plans-ledger .plan-row--teams .plan-price,
.plans-ledger .plan-row--teams .plan-price-note {
  color: color-mix(in srgb, var(--text) 88%, var(--text-mute));
}

@media (min-width: 1121px) {
  .plans-ledger .plan-row--pro > .plan-action {
    max-width: 222px;
  }
}

@media (max-width: 860px) {
  .plans-ledger .plan-row--pro > .plan-action {
    background: rgba(51, 86, 232, 0.035);
    border-top-color: rgba(51, 86, 232, 0.14);
    border-radius: 10px;
    padding: 12px 12px 0 12px;
  }

  .plans-ledger .plan-row--teams .plan-cta {
    justify-self: end;
  }
}

@media (max-width: 560px) {
  .plans-ledger .plan-row--pro > .plan-action {
    padding: 12px;
  }

  .plans-ledger .plan-row--teams .plan-cta {
    justify-self: stretch;
  }
}


/* ── PLANS PASS 3: COPY TIGHTENING + NOTE CLEANUP ────────────────
   Final pass: merge description + best-for into a single paragraph,
   keep the bullets as the scannable support layer, and make the
   tailored-pricing note feel more intentional.
------------------------------------------------------------------- */
.plans-ledger > .plan-row > .plan-main > .plan-copy {
  gap: 12px;
}

.plans-ledger .plan-copy > p {
  margin: 0;
  max-width: 62ch;
  color: var(--text);
  font-size: 15px;
  line-height: 1.68;
}

.plans-ledger .plan-fit {
  display: none;
}

.plans-ledger .plan-copy-list {
  margin-top: 2px;
  gap: 8px;
  max-width: 58ch;
}

.plans-ledger .plan-copy-list li {
  font-size: 14px;
  line-height: 1.64;
}

.plans-ledger .plan-copy-list li::before {
  top: 0.7em;
}

.plans-note {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.plans-note-copy {
  max-width: 66ch;
  margin: 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-sec);
}

.plans-note-copy .plan-secondary-link {
  white-space: nowrap;
}

@media (max-width: 860px) {
  .plans-ledger > .plan-row > .plan-main > .plan-copy {
    gap: 11px;
  }

  .plans-ledger .plan-copy > p {
    max-width: none;
  }

  .plans-ledger .plan-copy-list {
    max-width: none;
  }

  .plans-note {
    margin-top: 24px;
  }
}

@media (max-width: 560px) {
  .plans-ledger .plan-copy > p {
    font-size: 15px;
    line-height: 1.66;
  }

  .plans-ledger .plan-copy-list li,
  .plans-note-copy {
    font-size: 14px;
  }

  .plans-note-copy .plan-secondary-link {
    white-space: normal;
  }
}


/* ── PLANS PASS 3 FIXES ──────────────────────────────────────────
   Fix action-rail layout regressions and make the tailored-pricing
   note use one consistent text size.
------------------------------------------------------------------- */
.plans-ledger > .plan-row > .plan-action {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  max-width: 214px;
  min-width: 0;
}

.plans-ledger > .plan-row > .plan-action > * {
  min-width: 0;
}

.plans-ledger .plan-price-block,
.plans-ledger .plan-meta-block {
  width: 100%;
}

.plans-ledger .plan-cta {
  width: 100%;
  min-width: 0;
  margin-top: 2px;
  align-self: stretch;
  justify-content: center;
}

.plans-ledger .plan-row--pro > .plan-action {
  max-width: 214px;
  padding-right: 14px;
}

@media (max-width: 860px) {
  .plans-ledger > .plan-row > .plan-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    max-width: none;
  }

  .plans-ledger .plan-cta {
    width: auto;
    min-width: 168px;
    margin-top: 0;
    justify-self: end;
  }

  .plans-ledger .plan-row--pro > .plan-action {
    padding-right: 12px;
  }
}

@media (max-width: 560px) {
  .plans-ledger > .plan-row > .plan-action {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .plans-ledger .plan-cta {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }
}

.plans-note-copy,
.plans-note-copy .plan-secondary-link {
  font-size: 14px;
  line-height: 1.6;
}

.plans-note-copy .plan-secondary-link {
  font-weight: inherit;
  letter-spacing: inherit;
}


/* ── PLANS FINAL TUNE: BOTTOM CTA + UPDATED PRICING ──────────────
   Return the CTA to the bottom of each action rail, keep Pro as the
   blue-emphasis option, give Essentials and Teams the darker beige
   surface, and add a touch more breathing room.
------------------------------------------------------------------- */
.plans-ledger > .plan-row {
  align-items: stretch;
  padding-top: 40px;
  padding-bottom: 42px;
}

.plans-ledger > .plan-row > .plan-action {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  gap: 18px;
  width: 100%;
  max-width: 224px;
  min-height: 100%;
  padding: 16px 14px 16px 16px;
  border-left: 1px solid rgba(26, 25, 23, 0.09);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-mid-2) 78%, var(--bg-white));
}

.plans-ledger .plan-price-block,
.plans-ledger .plan-meta-block {
  display: grid;
  gap: 4px;
  align-content: start;
}

.plans-ledger .plan-cta {
  width: 100%;
  min-width: 0;
  margin-top: auto;
  align-self: stretch;
}

.plans-ledger .plan-row--pro > .plan-action {
  max-width: 224px;
  border-left-color: rgba(51, 86, 232, 0.16);
  background: linear-gradient(180deg, rgba(51, 86, 232, 0.07), rgba(51, 86, 232, 0.035));
}

.plans-ledger .plan-row--free > .plan-action,
.plans-ledger .plan-row--teams > .plan-action {
  background: color-mix(in srgb, var(--bg-mid-2) 84%, var(--bg-white));
}

.plans-ledger .plan-row--teams .plan-price {
  font-size: clamp(25px, 1.95vw, 31px);
}

.plans-ledger .plan-row--teams .plan-price-note {
  max-width: 16ch;
}

.plans-note-copy,
.plans-note-copy .plan-secondary-link {
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 860px) {
  .plans-ledger > .plan-row {
    padding-top: 34px;
    padding-bottom: 36px;
  }

  .plans-ledger > .plan-row > .plan-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: end;
    max-width: none;
    min-height: 0;
    padding: 14px 12px 14px 12px;
    border-top: 1px solid rgba(26, 25, 23, 0.09);
    border-left: 0;
  }

  .plans-ledger .plan-cta {
    width: auto;
    min-width: 172px;
    margin-top: 0;
    justify-self: end;
  }

  .plans-ledger .plan-row--teams .plan-price-note {
    max-width: none;
  }
}

@media (max-width: 560px) {
  .plans-ledger > .plan-row {
    padding-top: 30px;
    padding-bottom: 32px;
  }

  .plans-ledger > .plan-row > .plan-action {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

  .plans-ledger .plan-cta {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }

  .plans-ledger .plan-row--teams .plan-price {
    font-size: 24px;
  }
}


/* ── PLANS FINAL MICRO-TUNE: SOFTER BEIGE + NO SEPARATOR ─────────
   The rail background now does the separation work, so remove the
   left divider and soften the beige treatment slightly.
------------------------------------------------------------------- */
.plans-ledger > .plan-row > .plan-action {
  border-left: 0;
  background: color-mix(in srgb, var(--bg-mid-2) 62%, var(--bg-white));
}

.plans-ledger .plan-row--free > .plan-action,
.plans-ledger .plan-row--teams > .plan-action {
  border-left: 0;
  background: color-mix(in srgb, var(--bg-mid-2) 66%, var(--bg-white));
}

.plans-ledger .plan-row--pro > .plan-action {
  border-left: 0;
  border-left-color: transparent;
  background: linear-gradient(180deg, rgba(51, 86, 232, 0.055), rgba(51, 86, 232, 0.025));
}

@media (max-width: 860px) {
  .plans-ledger > .plan-row > .plan-action,
  .plans-ledger .plan-row--free > .plan-action,
  .plans-ledger .plan-row--teams > .plan-action,
  .plans-ledger .plan-row--pro > .plan-action {
    border-top: 0;
    border-left: 0;
  }
}


/* ── PLANS RIGHT-CARD FINAL PASS ─────────────────────────────────
   Finish the commercial cards: calmer price scale, one support line,
   cleaner Teams price note, and bottom-anchored CTAs retained.
------------------------------------------------------------------- */
.plans-ledger > .plan-row > .plan-action {
  padding: 18px 16px 16px;
  gap: 14px;
}

.plans-ledger .plan-price,
.plans-ledger .plan-action--free .plan-meta-title,
.plans-ledger .plan-row--teams .plan-price {
  font-family: var(--font-body, var(--font-ui));
  font-size: clamp(23px, 1.65vw, 27px);
  font-weight: 700;
  letter-spacing: -0.026em;
  line-height: 1.06;
  font-variant-numeric: lining-nums tabular-nums;
}

.plans-ledger .plan-price-note,
.plans-ledger .plan-meta-note {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.32;
  color: color-mix(in srgb, var(--text-mute) 92%, var(--text));
}

.plans-ledger .plan-price-note span {
  display: block;
}

.plans-ledger .plan-card-support {
  margin: 2px 0 0;
  max-width: 18ch;
  font-family: var(--font-body, var(--font-ui));
  font-size: 13px;
  font-weight: 500;
  line-height: 1.42;
  color: color-mix(in srgb, var(--text-sec) 88%, var(--text));
}

.plans-ledger .plan-row--pro .plan-card-support {
  color: color-mix(in srgb, var(--text-sec) 82%, var(--blue));
}

.plans-ledger .plan-cta {
  margin-top: auto;
}

@media (min-width: 1121px) {
  .plans-ledger > .plan-row > .plan-action {
    min-height: 188px;
  }
}

@media (max-width: 860px) {
  .plans-ledger > .plan-row > .plan-action {
    padding: 14px 12px;
  }

  .plans-ledger .plan-card-support {
    max-width: none;
  }
}

@media (max-width: 560px) {
  .plans-ledger .plan-price,
  .plans-ledger .plan-action--free .plan-meta-title,
  .plans-ledger .plan-row--teams .plan-price {
    font-size: 24px;
  }
}


/* ── PLANS RIGHT-CARD PRICE SCALE FIX ────────────────────────────
   Remove escaped HTML risk in Teams pricing and lower the commercial
   label scale so prices support, rather than compete with, plan names.
------------------------------------------------------------------- */
.plans-ledger .plan-price,
.plans-ledger .plan-action--free .plan-meta-title,
.plans-ledger .plan-row--teams .plan-price {
  font-size: clamp(20px, 1.35vw, 23px);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.08;
}

.plans-ledger .plan-price-note,
.plans-ledger .plan-meta-note {
  font-size: 12px;
  line-height: 1.32;
}

.plans-ledger .plan-card-support {
  font-size: 12px;
  line-height: 1.42;
  max-width: 19ch;
}

.plans-ledger .plan-row--teams .plan-price-note {
  max-width: 17ch;
}

@media (max-width: 560px) {
  .plans-ledger .plan-price,
  .plans-ledger .plan-action--free .plan-meta-title,
  .plans-ledger .plan-row--teams .plan-price {
    font-size: 22px;
  }
}


/* ── PLAN CARD CENTERED TEST ─────────────────────────────────────
   Remove card support descriptions, put Teams minimum on its own line,
   and centre the remaining card contents. Pricing is reduced so it
   supports rather than competes with the plan names.
------------------------------------------------------------------- */
.plans-ledger > .plan-row > .plan-action {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 20px 16px;
}

.plans-ledger .plan-price-block,
.plans-ledger .plan-meta-block {
  justify-items: center;
  text-align: center;
  width: 100%;
  gap: 4px;
}

.plans-ledger .plan-price,
.plans-ledger .plan-action--free .plan-meta-title,
.plans-ledger .plan-row--teams .plan-price {
  font-size: clamp(20px, 1.35vw, 23px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.08;
}

.plans-ledger .plan-price-note,
.plans-ledger .plan-meta-note {
  font-size: 12px;
  line-height: 1.32;
  text-align: center;
}

.plans-ledger .plan-price-note span {
  display: block;
}

.plans-ledger .plan-card-support {
  display: none;
}

.plans-ledger .plan-cta {
  margin-top: 0;
  align-self: stretch;
}

@media (min-width: 1121px) {
  .plans-ledger > .plan-row > .plan-action {
    min-height: 188px;
  }
}

@media (max-width: 860px) {
  .plans-ledger > .plan-row > .plan-action {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 18px 14px;
  }

  .plans-ledger .plan-cta {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }
}


/* ── PLAN CARD NOTE REFINEMENT ───────────────────────────────────
   Keep the Teams minimum on a second line, but make both note lines
   use the same colour, weight, size, and spacing.
------------------------------------------------------------------- */
.plans-ledger .plan-row--teams .plan-price-note {
  display: grid;
  gap: 2px;
  color: color-mix(in srgb, var(--text-mute) 92%, var(--text));
  font-size: 12px;
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: 0;
  text-align: center;
}

.plans-ledger .plan-row--teams .plan-price-note span {
  display: block;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}


/* ── PLANS MICRO-REFINEMENT: INDICES + CONTACT LINK ──────────────
   Slightly reduce and retune the numbered ledger markers while keeping
   them legible. Simplify the tailored-pricing contact link treatment.
------------------------------------------------------------------- */
.plans-ledger > .plan-row > .plan-index,
.capabilities-section .capability-num {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.105em;
  line-height: 1;
  color: color-mix(in srgb, var(--text-mute) 88%, var(--text));
}

.plans-ledger .plan-row--pro > .plan-index {
  color: color-mix(in srgb, var(--blue) 62%, var(--text));
}

.plans-note-copy .plan-secondary-link,
.plan-secondary-link {
  font-size: inherit;
  font-weight: 600;
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
  text-underline-offset: 0.16em;
  text-decoration-skip-ink: auto;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.plans-note-copy .plan-secondary-link:hover,
.plans-note-copy .plan-secondary-link:focus-visible,
.plan-secondary-link:hover,
.plan-secondary-link:focus-visible {
  color: var(--text);
  text-decoration-color: currentColor;
}

@media (max-width: 640px) {
  .plans-ledger > .plan-row > .plan-index,
  .capabilities-section .capability-num {
    font-size: 11px;
    letter-spacing: 0.1em;
  }
}


/* ── LEDGER INDEX PATCH: override earlier !important rule ─────────
   Previous index tuning was blocked by an earlier 14px !important
   declaration. This final rule intentionally overrides that lock.
------------------------------------------------------------------- */
:is(.plans-ledger > .plan-row > .plan-index, .capabilities-section .capability-num, .capability-num, .plan-index) {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.095em !important;
  line-height: 1 !important;
}

.plans-ledger .plan-row--pro > .plan-index {
  color: color-mix(in srgb, var(--blue) 60%, var(--text)) !important;
}

@media (max-width: 640px) {
  :is(.plans-ledger > .plan-row > .plan-index, .capabilities-section .capability-num, .capability-num, .plan-index) {
    font-size: 11.5px !important;
    letter-spacing: 0.09em !important;
  }
}


/* ── GLOBAL LEDGER INDEX OPTICAL REFINEMENT ───────────────────────
   Make 01 / 02 / 03-style markers quieter and align them optically
   with their paired headings across the site.
------------------------------------------------------------------- */
:is(
  .plans-ledger > .plan-row > .plan-index,
  .capabilities-section .capability-num,
  .audience-case-number,
  .aud-n,
  .faq-section .faq-index,
  .story-index,
  .story-label,
  .subsection-label,
  .page-eyebrow
) {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.085em !important;
  line-height: 1 !important;
  transform: translateY(3px);
  color: color-mix(in srgb, var(--text-mute) 88%, var(--text));
  font-variant-numeric: tabular-nums;
}

.plans-ledger .plan-row--pro > .plan-index {
  color: color-mix(in srgb, var(--blue) 58%, var(--text)) !important;
}

@media (max-width: 640px) {
  :is(
    .plans-ledger > .plan-row > .plan-index,
    .capabilities-section .capability-num,
    .audience-case-number,
    .aud-n,
    .faq-section .faq-index,
    .story-index,
    .story-label,
    .subsection-label,
    .page-eyebrow
  ) {
    font-size: 10.5px !important;
    letter-spacing: 0.08em !important;
    transform: translateY(2px);
  }
}


/* ── HERO + PLANS BACKGROUND UPDATE ───────────────────────────────
   Use the requested neutral background for the main opening section
   and the Plans section.
------------------------------------------------------------------- */
.hero-section,
.plans-section {
  background: #F5F5F5 !important;
}


/* ── HERO BACKGROUND + PLAN NEUTRAL CARD FIX ──────────────────────
   Broader late override because the hero background is applied through
   nested hero wrappers in parts of the cascade.
------------------------------------------------------------------- */
body,
.main,
main {
  background-color: #F5F5F5;
}

.hero-section,
.compose-hero,
.home-hero,
.hero,
.hero-wrap,
.hero-shell,
.hero-panel,
.hero-content,
section:has(.hero-headline) {
  background: #F5F5F5 !important;
  background-color: #F5F5F5 !important;
}

.plans-section,
section.plans-section,
section:has(.plans-ledger) {
  background: #F5F5F5 !important;
  background-color: #F5F5F5 !important;
}

/* Neutral plan cards only. Keep Pro blue-tinted. */
.plans-ledger .plan-row--free > .plan-action,
.plans-ledger .plan-row--teams > .plan-action {
  background: #EFEFEF !important;
  background-color: #EFEFEF !important;
}

.plans-ledger .plan-row--pro > .plan-action {
  background: linear-gradient(180deg, rgba(51, 86, 232, 0.055), rgba(51, 86, 232, 0.025)) !important;
}


/* ── HERO PSEUDO-BACKGROUND FIX ──────────────────────────────────
   The hero band colour is drawn by .hero::before, not just .hero.
   Override that full-bleed pseudo-element directly.
------------------------------------------------------------------- */
.hero,
#top.hero {
  background: transparent !important;
  background-color: transparent !important;
}

.hero::before,
#top.hero::before {
  background: #F5F5F5 !important;
  background-color: #F5F5F5 !important;
}

.hero-gallery-image,
.hero-thumb img {
  background: #F5F5F5 !important;
  background-color: #F5F5F5 !important;
}


/* ── HERO BACKGROUND SIMPLIFICATION ───────────────────────────────
   Single source of truth: the hero section owns the hero band colour.
   The old full-width .hero::before background layer is disabled so
   future background changes do not need to chase a pseudo-element.
------------------------------------------------------------------- */
:root {
  --hero-bg: #F5F5F5;
}

.hero-section,
.compose-hero,
.home-hero,
.hero,
section:has(.hero-headline) {
  background: var(--hero-bg) !important;
  background-color: var(--hero-bg) !important;
}

.hero::before {
  content: none !important;
  display: none !important;
  background: transparent !important;
}

.hero-gallery,
.hero-gallery-shell,
.hero-frame,
.hero-stage,
.hero-thumbs,
.hero-thumb,
.hero-gallery-thumbs {
  background-color: var(--hero-bg) !important;
}


/* ── MOBILE SPACING PASS: CAPABILITIES + PLANS ────────────────────
   Desktop/tablet are intentionally left alone. This pass opens up the
   mobile row rhythm so the separator-ledger sections feel less cramped.
------------------------------------------------------------------- */
@media (max-width: 640px) {
  .capabilities-section {
    padding-top: 84px;
    padding-bottom: 88px;
  }

  .capabilities-shell {
    gap: 30px;
  }

  .capability-matrix {
    border-top-color: rgba(26, 25, 23, 0.11);
  }

  .capability-row {
    border-bottom-color: rgba(26, 25, 23, 0.11);
  }

  .capability-item {
    padding-top: 26px;
    padding-bottom: 30px;
    gap: 12px;
  }

  .capability-row .capability-item:first-child,
  .capability-row .capability-item:last-child {
    padding-top: 26px;
    padding-bottom: 30px;
  }

  .capability-copy h3 {
    margin-bottom: 12px;
  }

  .capability-copy p {
    line-height: 1.76;
  }

  .plans-section {
    padding-top: 86px;
    padding-bottom: 90px;
  }

  .plans-shell {
    gap: 30px;
  }

  .plans-ledger {
    border-top-color: rgba(26, 25, 23, 0.11);
  }

  .plans-ledger > .plan-row {
    padding-top: 34px;
    padding-bottom: 36px;
    row-gap: 16px;
    border-bottom-color: rgba(26, 25, 23, 0.11);
  }

  .plans-ledger > .plan-row > .plan-main {
    row-gap: 11px;
  }

  .plans-ledger > .plan-row > .plan-main > h3 {
    margin-bottom: 2px;
  }

  .plans-ledger > .plan-row > .plan-main > .plan-copy {
    gap: 14px;
  }

  .plans-ledger .plan-copy > p {
    line-height: 1.72;
  }

  .plans-ledger .plan-copy-list {
    margin-top: 2px;
    gap: 10px;
  }

  .plans-ledger > .plan-row > .plan-action {
    margin-top: 4px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .plans-note {
    margin-top: 30px;
  }
}

@media (max-width: 420px) {
  .capability-item,
  .capability-row .capability-item:first-child,
  .capability-row .capability-item:last-child {
    padding-top: 24px;
    padding-bottom: 28px;
  }

  .plans-ledger > .plan-row {
    padding-top: 32px;
    padding-bottom: 34px;
  }
}


/* ── FOOTER REFINEMENT: LARGER LINKS, NO DOTS, COPYRIGHT ──────────
   Remove dot separators, rely on spacing, center mobile footer links,
   and add a copyright line under the footer brand.
------------------------------------------------------------------- */
.site-footer {
  min-height: 68px;
}

.site-footer .footer-inner {
  min-height: 68px;
  gap: 24px;
}

.site-footer .footer-brand-block {
  display: grid;
  gap: 4px;
}

.site-footer .footer-copyright {
  margin: 0;
  font-family: var(--font-ui, var(--font-body));
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  color: color-mix(in srgb, var(--text-mute) 92%, var(--text));
}

.site-footer .footer-links {
  gap: 14px;
  margin-left: auto;
}

.site-footer .footer-sep {
  display: none !important;
}

.site-footer .footer-link,
.site-footer .footer-lang-btn {
  font-size: 13.5px;
  font-weight: 500;
  padding: 5px 0;
  border-radius: 0;
}

.site-footer .footer-link:hover,
.site-footer .footer-lang-btn:hover,
.site-footer .footer-link:focus-visible,
.site-footer .footer-lang-btn:focus-visible,
.site-footer .footer-link.is-current,
.site-footer .footer-link[aria-current="page"] {
  background: transparent;
}

@media (max-width: 760px) {
  .site-footer {
    padding-top: 18px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .site-footer .footer-inner {
    min-height: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
  }

  .site-footer .footer-brand-row {
    justify-content: center;
  }

  .site-footer .footer-links {
    width: 100%;
    justify-content: center;
    gap: 10px 16px;
    margin-left: 0;
  }

  .site-footer .footer-link,
  .site-footer .footer-lang-btn {
    font-size: 13.5px;
    padding: 4px 0;
  }
}


/* ── FOOTER ORDER REFINEMENT + AUTO-YEAR STRUCTURE ────────────────
   Copyright is now a separate footer item. Desktop keeps brand/copy on
   the left and links on the right; mobile orders brand → links → copy.
   The year itself is generated in JS with new Date().getFullYear().
------------------------------------------------------------------- */
.site-footer .footer-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "brand links"
    "copy links";
  align-items: center;
  column-gap: 24px;
  row-gap: 4px;
}

.site-footer .footer-brand-block {
  grid-area: brand;
}

.site-footer .footer-links {
  grid-area: links;
  justify-self: end;
}

.site-footer .footer-copyright {
  grid-area: copy;
}

@media (max-width: 760px) {
  .site-footer .footer-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "brand"
      "links"
      "copy";
    justify-items: center;
    row-gap: 12px;
  }

  .site-footer .footer-links {
    justify-self: center;
    order: initial;
  }

  .site-footer .footer-copyright {
    order: initial;
    max-width: 34ch;
    text-align: center;
  }
}


/* ── PLAN CARD PADDING REFINEMENT ─────────────────────────────────
   Give the right-hand plan cards more vertical breathing room,
   especially on mobile where the centered contents felt compressed.
------------------------------------------------------------------- */
.plans-ledger > .plan-row > .plan-action {
  padding-top: 22px;
  padding-bottom: 22px;
}

@media (max-width: 860px) {
  .plans-ledger > .plan-row > .plan-action {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

@media (max-width: 560px) {
  .plans-ledger > .plan-row > .plan-action {
    padding-top: 26px;
    padding-bottom: 26px;
  }
}


/* ── FOOTER COPYRIGHT SINGLE-LINE FIX ─────────────────────────────
   Keep the copyright notice on one line at all breakpoints.
------------------------------------------------------------------- */
.site-footer .footer-copyright {
  max-width: none !important;
  white-space: nowrap !important;
  text-align: center;
}

@media (max-width: 760px) {
  .site-footer .footer-copyright {
    max-width: none !important;
    white-space: nowrap !important;
    font-size: 12.5px;
  }
}

@media (max-width: 360px) {
  .site-footer .footer-copyright {
    font-size: 11.5px;
  }
}


/* ── HEADER BUTTON ALIGNMENT ──────────────────────────────────────
   Bring the header actions back into the same button system as the
   homepage CTAs: same radius, weight, height, and primary/secondary
   hierarchy, with only width/padding adjusted for the header.
------------------------------------------------------------------- */
.hdr-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

:is(.hbtn-launch, .hbtn-support, .hbtn-install) {
  height: 42px !important;
  min-height: 42px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-family: var(--font-body, var(--font-ui));
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
  text-decoration: none;
  box-shadow: none !important;
  transform: none;
}

:is(.hbtn-launch, .hbtn-support, .hbtn-install) svg {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 auto;
  stroke-width: 2;
}

.hbtn-launch {
  background: var(--blue) !important;
  border: 1px solid var(--blue) !important;
  color: var(--blue-text) !important;
}

.hbtn-launch:hover,
.hbtn-launch:focus-visible {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: var(--blue-text) !important;
  transform: translateY(-1px);
}

.hbtn-support,
.hbtn-install {
  background: transparent !important;
  border: 1px solid rgba(26, 25, 23, 0.16) !important;
  color: var(--text-sec) !important;
}

.hbtn-support:hover,
.hbtn-support:focus-visible,
.hbtn-install:hover,
.hbtn-install:focus-visible {
  background: rgba(26, 25, 23, 0.035) !important;
  border-color: rgba(26, 25, 23, 0.22) !important;
  color: var(--text) !important;
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .hdr-right {
    gap: 8px;
  }

  .hbtn-support,
  .hbtn-install {
    width: 42px !important;
    padding: 0 !important;
  }

  .hbtn-support span,
  .hbtn-install span {
    display: none !important;
  }

  .hbtn-launch {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    font-size: 15px !important;
  }
}


/* ── CANONICAL BUTTON SYSTEM FINAL ────────────────────────────────
   One shared button geometry for header actions, hero CTAs, and plan
   CTAs. Header buttons are no longer bespoke; they inherit the same
   size, font, radius, icon sizing, and primary/secondary treatment as
   the homepage buttons.
------------------------------------------------------------------- */
:root {
  --compose-button-height: 42px;
  --compose-button-radius: 10px;
  --compose-button-font-size: 15px;
  --compose-button-font-weight: 600;
  --compose-button-x: 18px;
  --compose-button-gap: 7px;
}

:is(.btn-cta, .btn-ghost, .plan-cta, .hbtn-launch, .hbtn-support, .hbtn-install) {
  min-height: var(--compose-button-height) !important;
  height: var(--compose-button-height) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--compose-button-gap) !important;
  padding: 0 var(--compose-button-x) !important;
  border-radius: var(--compose-button-radius) !important;
  font-family: var(--font-body, var(--font-ui)) !important;
  font-size: var(--compose-button-font-size) !important;
  font-weight: var(--compose-button-font-weight) !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transform: none;
}

:is(.btn-cta, .btn-ghost, .plan-cta, .hbtn-launch, .hbtn-support, .hbtn-install) > span {
  position: relative;
  font: inherit !important;
  line-height: 1 !important;
}

:is(.btn-cta, .btn-ghost, .plan-cta, .hbtn-launch, .hbtn-support, .hbtn-install) svg,
:is(.btn-cta, .btn-ghost, .plan-cta, .hbtn-launch, .hbtn-support, .hbtn-install) .btn-icon {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 auto !important;
  stroke-width: 2 !important;
}

/* Primary buttons */
:is(.btn-cta, .hbtn-launch, .plan-cta--primary) {
  background: var(--blue) !important;
  border: 1px solid var(--blue) !important;
  color: var(--blue-text) !important;
}

:is(.btn-cta, .hbtn-launch, .plan-cta--primary):hover,
:is(.btn-cta, .hbtn-launch, .plan-cta--primary):focus-visible {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: var(--blue-text) !important;
  transform: translateY(-1px);
}

/* Secondary buttons */
:is(.btn-ghost, .hbtn-support, .hbtn-install, .plan-row--free .plan-cta) {
  background: transparent !important;
  border: 1px solid rgba(26, 25, 23, 0.16) !important;
  color: var(--text-sec) !important;
}

:is(.btn-ghost, .hbtn-support, .hbtn-install, .plan-row--free .plan-cta):hover,
:is(.btn-ghost, .hbtn-support, .hbtn-install, .plan-row--free .plan-cta):focus-visible {
  background: rgba(26, 25, 23, 0.035) !important;
  border-color: rgba(26, 25, 23, 0.22) !important;
  color: var(--text) !important;
  transform: translateY(-1px);
}

/* Plan cards keep their full-width button layout, but use the same button system. */
.plans-ledger .plan-cta {
  width: 100% !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* Hero buttons use the same system; only spacing between them is contextual. */
.hero-actions {
  gap: 12px;
}

/* Header buttons use the exact same typography and geometry.
   On small screens the Install button may be icon-only, but the button
   height, radius, font system, and icon size remain identical. */
.hdr-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 600px) {
  .hbtn-support,
  .hbtn-install {
    width: var(--compose-button-height) !important;
    min-width: var(--compose-button-height) !important;
    padding: 0 !important;
  }

  .hbtn-support span,
  .hbtn-install span {
    display: none !important;
  }

  .hbtn-launch {
    padding: 0 var(--compose-button-x) !important;
  }
}


/* ── FOOTER PADDING REFINEMENT ────────────────────────────────────
   Give the footer more vertical breathing room on desktop and mobile.
------------------------------------------------------------------- */
.site-footer {
  padding-top: 18px !important;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
}

.site-footer .footer-inner {
  min-height: 72px;
}

@media (max-width: 760px) {
  .site-footer {
    padding-top: 26px !important;
    padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .site-footer .footer-inner {
    min-height: 0;
    row-gap: 14px;
  }
}




/* ── ABOUT FOUNDER SECTION ────────────────────────────────────────
   Swiss 12-column about block following Plans.
------------------------------------------------------------------- */
.about-founder-section {
  background: #FFFFFF;
  padding-top: clamp(86px, 8vw, 116px);
  padding-bottom: clamp(92px, 8.5vw, 124px);
  border-top: 1px solid rgba(26, 25, 23, 0.10);
}

.about-founder-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(18px, 2vw, 24px);
  align-items: start;
}

.about-founder-aside {
  grid-column: 1 / span 4;
}

.about-founder-figure {
  margin: 0;
  display: grid;
  justify-items: start;
  gap: 18px;
}

.about-founder-avatar {
  width: clamp(136px, 13vw, 176px);
  aspect-ratio: 1;
  border-radius: 999px;
  object-fit: cover;
  object-position: center;
  display: block;
  background: #F5F5F5;
  border: 1px solid rgba(26, 25, 23, 0.10);
}

.about-founder-caption {
  display: grid;
  gap: 4px;
  font-family: var(--font-body, var(--font-ui));
}

.about-founder-caption strong {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
}

.about-founder-caption span {
  max-width: 18ch;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.42;
  color: var(--text-mute);
}

.about-founder-copy {
  grid-column: 5 / span 8;
  max-width: 760px;
}

.about-founder-copy h2 {
  margin: 0 0 24px;
  max-width: 13ch;
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 650;
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: var(--text);
}

.about-founder-copy p {
  margin: 0;
  max-width: 66ch;
  font-family: var(--font-body, var(--font-ui));
  font-size: 16px;
  line-height: 1.76;
  color: var(--text-sec);
}

.about-founder-copy p + p {
  margin-top: 16px;
}

@media (max-width: 860px) {
  .about-founder-grid {
    row-gap: 34px;
  }

  .about-founder-aside {
    grid-column: 1 / span 4;
  }

  .about-founder-copy {
    grid-column: 5 / span 8;
  }

  .about-founder-copy h2 {
    font-size: clamp(32px, 5vw, 44px);
  }
}

@media (max-width: 640px) {
  .about-founder-section {
    padding-top: 78px;
    padding-bottom: 84px;
  }

  .about-founder-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
  }

  .about-founder-aside,
  .about-founder-copy {
    grid-column: 1;
  }

  .about-founder-figure {
    justify-items: start;
    gap: 14px;
  }

  .about-founder-avatar {
    width: 112px;
  }

  .about-founder-copy h2 {
    margin-bottom: 20px;
    max-width: 12ch;
    font-size: clamp(31px, 9vw, 40px);
    line-height: 1.08;
  }

  .about-founder-copy p {
    font-size: 16px;
    line-height: 1.72;
  }
}


/* ── ABOUT FOUNDER SECTION: TEXT LEFT, AVATAR RIGHT ───────────────
   Keep the Swiss 12-column structure, but make the writing the entry
   point and give the portrait more presence.
------------------------------------------------------------------- */
.about-founder-copy {
  grid-column: 1 / span 7;
  grid-row: 1;
  max-width: 720px;
}

.about-founder-aside {
  grid-column: 9 / span 4;
  grid-row: 1;
  align-self: start;
}

.about-founder-figure {
  justify-items: center;
  gap: 20px;
}

.about-founder-avatar {
  width: clamp(210px, 19vw, 292px);
}

.about-founder-caption {
  justify-items: center;
  text-align: center;
}

.about-founder-caption span {
  max-width: 22ch;
}

.about-founder-copy h2 {
  max-width: 13.5ch;
}

@media (max-width: 860px) {
  .about-founder-copy {
    grid-column: 1 / span 7;
  }

  .about-founder-aside {
    grid-column: 9 / span 4;
  }

  .about-founder-avatar {
    width: clamp(180px, 24vw, 240px);
  }
}

@media (max-width: 640px) {
  .about-founder-copy,
  .about-founder-aside {
    grid-column: 1;
  }

  .about-founder-copy {
    grid-row: 1;
  }

  .about-founder-aside {
    grid-row: 2;
  }

  .about-founder-figure {
    justify-items: start;
  }

  .about-founder-caption {
    justify-items: start;
    text-align: left;
  }

  .about-founder-avatar {
    width: 148px;
  }
}


/* ── HERO GALLERY CHROME REFINEMENT ───────────────────────────────
   Adds a neutral macOS-style traffic-light bar, slightly reduces the
   product gallery radius, and removes remaining warm beige remnants
   from the hero/gallery surfaces.
------------------------------------------------------------------- */
:root {
  --hero-bg: #F5F5F5;
  --hero-gallery-surface: #FFFFFF;
  --hero-gallery-rule: rgba(26, 25, 23, 0.10);
  --hero-gallery-dot: rgba(26, 25, 23, 0.22);
}

.hero,
#top.hero,
.hero-section,
.compose-hero,
.home-hero,
section:has(.hero-headline) {
  background: var(--hero-bg) !important;
  background-color: var(--hero-bg) !important;
}

.hero::before,
#top.hero::before {
  content: none !important;
  display: none !important;
  background: transparent !important;
}

.hero-gallery {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--hero-gallery-rule);
  border-radius: 20px;
  background: var(--hero-gallery-surface) !important;
  box-shadow: 0 0 0 1px rgba(26,25,23,.025), 0 8px 24px rgba(26,25,23,.055);
}

.hero-gallery-chrome {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-bottom: 1px solid var(--hero-gallery-rule);
  background: #F5F5F5;
}

.hero-gallery-chrome span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--hero-gallery-dot);
  opacity: .72;
}

.hero-gallery-main {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--hero-gallery-surface) !important;
}

.hero-gallery-image {
  border-radius: 0 !important;
  background: var(--hero-gallery-surface) !important;
  background-color: var(--hero-gallery-surface) !important;
}

.hero-gallery-thumbs {
  background: transparent !important;
}

.hero-thumb {
  border-radius: 12px !important;
  background: var(--hero-gallery-surface) !important;
  background-color: var(--hero-gallery-surface) !important;
}

.hero-thumb img {
  background: var(--hero-gallery-surface) !important;
  background-color: var(--hero-gallery-surface) !important;
}

@media (max-width: 820px) {
  .hero-gallery {
    border-radius: 18px;
  }

  .hero-gallery-chrome {
    height: 32px;
    padding-inline: 12px;
  }

  .hero-thumb {
    border-radius: 11px !important;
  }
}


/* ── HERO GALLERY: REMOVE OUTER SURFACE ───────────────────────────
   The gallery no longer has its own white container/background. The
   screenshot frame and thumbnail controls stand directly on the hero
   background, reducing one maintained surface layer.
------------------------------------------------------------------- */
.hero-gallery {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.hero-gallery-chrome {
  border: 1px solid var(--hero-gallery-rule);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: var(--hero-bg) !important;
}

.hero-gallery-main {
  border: 1px solid var(--hero-gallery-rule) !important;
  border-top: 0 !important;
  border-radius: 0 0 18px 18px !important;
  overflow: hidden;
  background: transparent !important;
  box-shadow: 0 0 0 1px rgba(26,25,23,.02), 0 8px 24px rgba(26,25,23,.045) !important;
}

.hero-gallery-image {
  background: transparent !important;
  background-color: transparent !important;
}

.hero-gallery-thumbs {
  background: transparent !important;
  background-color: transparent !important;
}

.hero-thumb {
  background: transparent !important;
  background-color: transparent !important;
}

.hero-thumb img {
  background: transparent !important;
  background-color: transparent !important;
}

@media (max-width: 820px) {
  .hero-gallery-chrome {
    border-radius: 16px 16px 0 0;
  }

  .hero-gallery-main {
    border-radius: 0 0 16px 16px !important;
  }
}


/* ── APP PAPER SHADOW ALIGNMENT ───────────────────────────────────
   Matches the app writing-paper elevation:
   0 1px 2px rgba(60,45,30,.04),
   0 12px 32px rgba(60,45,30,.06),
   0 0 0 1px rgba(60,45,30,.025)
------------------------------------------------------------------- */
:root {
  --compose-paper-shadow: 0 1px 2px rgba(60,45,30,.04),
                          0 12px 32px rgba(60,45,30,.06),
                          0 0 0 1px rgba(60,45,30,.025);
}

.hero-gallery-main {
  box-shadow: var(--compose-paper-shadow) !important;
}

.hero-thumb {
  box-shadow: var(--compose-paper-shadow) !important;
}

.hero-thumb:hover {
  box-shadow: 0 1px 2px rgba(60,45,30,.05),
              0 14px 34px rgba(60,45,30,.075),
              0 0 0 1px rgba(60,45,30,.03) !important;
}

.hero-thumb.is-active {
  box-shadow: var(--compose-paper-shadow),
              0 0 0 2px rgba(51, 86, 232, .14) !important;
}

.plans-ledger > .plan-row > .plan-action {
  box-shadow: var(--compose-paper-shadow) !important;
}

.plans-ledger .plan-row--pro > .plan-action {
  box-shadow: var(--compose-paper-shadow) !important;
}


/* ── PLAN CARD FINAL SURFACE TUNE ─────────────────────────────────
   Plan cards should remain flat UI surfaces, not elevated paper.
   Pro uses a flat blue surface rather than a soft gradient.
------------------------------------------------------------------- */
.plans-ledger > .plan-row > .plan-action,
.plans-ledger .plan-row--free > .plan-action,
.plans-ledger .plan-row--teams > .plan-action,
.plans-ledger .plan-row--pro > .plan-action {
  box-shadow: none !important;
}

.plans-ledger .plan-row--pro > .plan-action {
  background: var(--blue) !important;
  background-color: var(--blue) !important;
  border-color: var(--blue) !important;
}

.plans-ledger .plan-row--pro .plan-price,
.plans-ledger .plan-row--pro .plan-price-note {
  color: var(--blue-text) !important;
}

.plans-ledger .plan-row--pro .plan-price-note {
  opacity: .78;
}

.plans-ledger .plan-row--pro .plan-cta {
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.26) !important;
  color: var(--blue-text) !important;
  box-shadow: none !important;
}

.plans-ledger .plan-row--pro .plan-cta:hover,
.plans-ledger .plan-row--pro .plan-cta:focus-visible {
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.34) !important;
  color: var(--blue-text) !important;
}


/* ── PRO PLAN CARD: APP LIGHT BLUE SURFACE ────────────────────────
   Use the app's light selected-blue surface rather than the solid
   brand-blue treatment.
------------------------------------------------------------------- */
:root {
  --app-selected-blue-bg: rgba(51, 86, 232, .085);
  --app-selected-blue-border: rgba(51, 86, 232, .20);
  --app-selected-blue-fg: var(--blue);
}

.plans-ledger .plan-row--pro > .plan-action {
  background: var(--app-selected-blue-bg) !important;
  background-color: var(--app-selected-blue-bg) !important;
  border: 1px solid var(--app-selected-blue-border) !important;
  box-shadow: none !important;
}

.plans-ledger .plan-row--pro .plan-price {
  color: var(--text) !important;
}

.plans-ledger .plan-row--pro .plan-price-note {
  color: var(--text-mute) !important;
  opacity: 1 !important;
}

.plans-ledger .plan-row--pro .plan-cta {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: var(--blue-text) !important;
  box-shadow: none !important;
}

.plans-ledger .plan-row--pro .plan-cta:hover,
.plans-ledger .plan-row--pro .plan-cta:focus-visible {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: var(--blue-text) !important;
}


/* ── NEUTRAL PLAN CARD BORDER ─────────────────────────────────────
   Give Essentials and Teams the same deliberate card edge as Pro,
   but keep the treatment neutral.
------------------------------------------------------------------- */
.plans-ledger .plan-row--free > .plan-action,
.plans-ledger .plan-row--teams > .plan-action {
  border: 1px solid rgba(26, 25, 23, 0.10) !important;
  box-shadow: none !important;
}

.plans-ledger .plan-row--free > .plan-action:hover,
.plans-ledger .plan-row--teams > .plan-action:hover {
  border-color: rgba(26, 25, 23, 0.13) !important;
}


/* ── HEADER APP ALIGNMENT FINAL PASS ──────────────────────────────
   Match the Compose app topbar language: white chrome, app border,
   app brand sizing, Lucide icon geometry, and the shared website button
   system rather than separate bespoke header button styling.
------------------------------------------------------------------- */
:root {
  --app-topbar-bg: #FFFFFF;
  --app-topbar-border: #E4E0D8;
  --site-button-h: 42px;
  --site-button-radius: 10px;
  --site-button-font-size: 15px;
  --site-button-font-weight: 600;
  --site-button-icon-size: 14px;
}

#site-hdr,
.site-header {
  height: 64px !important;
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding: 0 clamp(18px, 2.25vw, 32px) !important;
  background: var(--app-topbar-bg) !important;
  border-bottom: 1px solid var(--app-topbar-border) !important;
  box-shadow: none !important;
}

.hdr-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 36px !important;
  padding-inline: 10px !important;
  margin-left: -10px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
}

.hdr-brand-name,
.hdr-brand-name a {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
  color: var(--text) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

.hdr-brand-sep {
  width: 1px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
  background: var(--border-strong, #C2BDB5) !important;
}

.hdr-brand-sub,
.hdr-brand-sub a {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  color: var(--blue) !important;
  opacity: .85 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

.hdr-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
}

/* Canonical website button geometry, applied to header without new design. */
:is(.btn-cta, .btn-ghost, .plan-cta, .hbtn-launch, .hbtn-support, .hbtn-install) {
  min-height: var(--site-button-h) !important;
  height: var(--site-button-h) !important;
  border-radius: var(--site-button-radius) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  font-family: var(--font-body, var(--font-ui)) !important;
  font-size: var(--site-button-font-size) !important;
  font-weight: var(--site-button-font-weight) !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
}

:is(.btn-cta, .btn-ghost, .plan-cta, .hbtn-launch, .hbtn-support, .hbtn-install) svg {
  width: var(--site-button-icon-size) !important;
  height: var(--site-button-icon-size) !important;
  flex: 0 0 var(--site-button-icon-size) !important;
  stroke-width: 2 !important;
}

/* Header buttons use the same visual treatments as the homepage buttons. */
.hbtn-launch {
  padding-inline: 18px !important;
  background: var(--blue) !important;
  border: 1px solid var(--blue) !important;
  color: var(--blue-text) !important;
}

.hbtn-support,
.hbtn-install {
  padding-inline: 16px !important;
  background: transparent !important;
  border: 1px solid var(--ui-hairline-strong, rgba(26,25,23,.16)) !important;
  color: var(--text-sec) !important;
}

.hbtn-launch:hover,
.hbtn-launch:focus-visible {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: var(--blue-text) !important;
  transform: translateY(-1px);
}

.hbtn-support:hover,
.hbtn-support:focus-visible,
.hbtn-install:hover,
.hbtn-install:focus-visible {
  background: var(--ui-soft-fill, rgba(26,25,23,.035)) !important;
  border-color: rgba(26,25,23,.20) !important;
  color: var(--text) !important;
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  #site-hdr,
  .site-header {
    height: 64px !important;
    min-height: 64px !important;
    padding-inline: 18px !important;
    gap: 12px !important;
  }

  .hdr-brand {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .hdr-brand-name,
  .hdr-brand-name a {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .hbtn-support,
  .hbtn-install {
    width: var(--site-button-h) !important;
    padding-inline: 0 !important;
  }

  .hbtn-support span,
  .hbtn-install span {
    display: none !important;
  }

  .hbtn-launch {
    padding-inline: 16px !important;
  }
}


/* ── BUTTON SCALE REFINEMENT ──────────────────────────────────────
   Bring the shared website button system down to an app-native scale.
   This keeps header, hero, and plan CTAs aligned instead of using
   separate one-off button treatments.
------------------------------------------------------------------- */
:root {
  --site-button-h: 38px;
  --site-button-radius: 9px;
  --site-button-font-size: 14px;
  --site-button-font-weight: 600;
  --site-button-icon-size: 13px;
}

:is(.btn-cta, .btn-ghost, .plan-cta, .hbtn-launch, .hbtn-support, .hbtn-install) {
  min-height: var(--site-button-h) !important;
  height: var(--site-button-h) !important;
  border-radius: var(--site-button-radius) !important;
  gap: 6px !important;
  font-size: var(--site-button-font-size) !important;
  font-weight: var(--site-button-font-weight) !important;
  letter-spacing: -0.008em !important;
}

:is(.btn-cta, .btn-ghost) {
  padding-inline: 16px !important;
}

:is(.plan-cta, .plan-cta.btn-compact) {
  padding-inline: 14px !important;
}

:is(.hbtn-launch) {
  padding-inline: 16px !important;
}

:is(.hbtn-support, .hbtn-install) {
  padding-inline: 14px !important;
}

:is(.btn-cta, .btn-ghost, .plan-cta, .hbtn-launch, .hbtn-support, .hbtn-install) svg,
:is(.btn-cta, .btn-ghost, .plan-cta, .hbtn-launch, .hbtn-support, .hbtn-install) .btn-icon {
  width: var(--site-button-icon-size) !important;
  height: var(--site-button-icon-size) !important;
  flex-basis: var(--site-button-icon-size) !important;
}

@media (max-width: 600px) {
  :root {
    --site-button-h: 40px;
    --site-button-font-size: 14px;
    --site-button-icon-size: 13px;
  }

  .hbtn-support,
  .hbtn-install {
    width: var(--site-button-h) !important;
    padding-inline: 0 !important;
  }

  .hbtn-launch {
    padding-inline: 15px !important;
  }
}


/* ── APP RADIUS + BRAND CONTRAST REFINEMENT ───────────────────────
   The Compose app uses --r-md: 6px for toolbar controls. Apply that
   exact radius to the shared website button system and make the
   secondary brand label more legible.
------------------------------------------------------------------- */
:root {
  --site-button-radius: 6px;
}

:is(.btn-cta, .btn-ghost, .plan-cta, .hbtn-launch, .hbtn-support, .hbtn-install) {
  border-radius: 6px !important;
}

.hdr-brand {
  border-radius: 6px !important;
}

.hdr-brand-sub,
.hdr-brand-sub a {
  color: var(--blue) !important;
  opacity: 1 !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}

.hdr-brand-sep {
  background: color-mix(in srgb, var(--border-strong, #C2BDB5) 88%, var(--text)) !important;
}


/* ── HERO FINAL COPY + GALLERY BAR REFINEMENT ─────────────────────
   Clarify hero copy hierarchy and make the gallery chrome read as part
   of the screenshot frame rather than a tinted separate band.
------------------------------------------------------------------- */
.hero-gallery-chrome {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-color: var(--hero-gallery-rule) !important;
}

.hero-body {
  display: grid;
  gap: 18px;
}

.hero-body p {
  margin: 0 !important;
}

.hero-body .hero-subheadline {
  max-width: 34ch;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.55;
  letter-spacing: -0.018em;
  color: var(--text);
}

.hero-body .hero-subheadline + p {
  max-width: 40ch;
  color: var(--text-sec);
}

.hero-actions .btn-ghost[href="#pricing"] {
  scroll-margin-top: 90px;
}


/* ── HERO SUBHEADLINE / NOTE DISTINCTION ──────────────────────────
   Make the first body line a true subheadline and let the second line
   recede as supporting information.
------------------------------------------------------------------- */
.hero-body {
  gap: 20px !important;
}

.hero-body .hero-subheadline {
  max-width: 32ch;
  font-size: clamp(19px, 1.75vw, 23px) !important;
  line-height: 1.48 !important;
  letter-spacing: -0.024em !important;
  font-weight: 500 !important;
  color: var(--text) !important;
}

.hero-body .hero-subheadline + p {
  max-width: 39ch;
  font-size: 15px !important;
  line-height: 1.72 !important;
  letter-spacing: -0.006em !important;
  font-weight: 400 !important;
  color: color-mix(in srgb, var(--text-sec) 86%, var(--text-mute)) !important;
}

@media (max-width: 640px) {
  .hero-body {
    gap: 18px !important;
  }

  .hero-body .hero-subheadline {
    font-size: 18px !important;
    line-height: 1.52 !important;
  }

  .hero-body .hero-subheadline + p {
    font-size: 15px !important;
    line-height: 1.72 !important;
  }
}


/* ── HERO TYPOGRAPHY FINAL REFINEMENT ─────────────────────────────
   Slightly reduce the headline dominance, keep the subheadline clear,
   and let the supporting note recede.
------------------------------------------------------------------- */
.hero-headline {
  font-size: clamp(40px, 4.15vw, 56px) !important;
  line-height: 1.045 !important;
  letter-spacing: -0.035em !important;
}

.hero-body .hero-subheadline {
  max-width: 33ch;
  font-size: clamp(18px, 1.55vw, 21px) !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  letter-spacing: -0.018em !important;
  color: var(--text) !important;
}

.hero-body .hero-subheadline + p {
  max-width: 39ch;
  font-size: 14.5px !important;
  line-height: 1.68 !important;
  font-weight: 400 !important;
  letter-spacing: -0.004em !important;
  color: var(--text-sec) !important;
}

@media (max-width: 640px) {
  .hero-headline {
    font-size: clamp(36px, 10vw, 44px) !important;
    line-height: 1.055 !important;
  }

  .hero-body .hero-subheadline {
    font-size: 18px !important;
    line-height: 1.54 !important;
  }

  .hero-body .hero-subheadline + p {
    font-size: 14.5px !important;
    line-height: 1.68 !important;
  }
}


/* ── MOBILE HERO ORDER ────────────────────────────────────────────
   On mobile, show the product/gallery first, then the hero copy.
   Desktop and tablet keep the established copy-left/gallery-right order.
------------------------------------------------------------------- */
@media (max-width: 640px) {
  .hero {
    display: grid !important;
  }

  .hero-right {
    order: 1;
  }

  .hero-copy {
    order: 2;
  }
}


/* ── CAPABILITIES HEADING WRAP REFINEMENT ─────────────────────────
   The longer section title should wrap naturally rather than being
   forced into narrow, artificial line breaks.
------------------------------------------------------------------- */
.capabilities-title {
  max-width: 18ch !important;
  text-wrap: normal !important;
  text-wrap: pretty !important;
}

@media (min-width: 760px) {
  .capabilities-title {
    max-width: 22ch !important;
  }
}

@media (min-width: 1040px) {
  .capabilities-title {
    max-width: 24ch !important;
  }
}

@media (max-width: 640px) {
  .capabilities-title {
    max-width: 16ch !important;
  }
}


/* ── CAPABILITIES HEADING TWO-LINE DESKTOP WRAP ───────────────────
   Give the longer section heading enough measure to resolve into two
   lines on desktop instead of three short artificial lines.
------------------------------------------------------------------- */
@media (min-width: 900px) {
  .capabilities-title {
    max-width: 29ch !important;
  }
}

@media (min-width: 1180px) {
  .capabilities-title {
    max-width: 31ch !important;
  }
}


/* ── ABOUT SECTION FINAL TIGHTENING ───────────────────────────────
   Keep "responsible writing" together, reduce copy density, and make
   the portrait/caption feel like a deliberate founder signal.
------------------------------------------------------------------- */
.about-founder-copy h2 {
  max-width: 16ch !important;
}

.about-founder-copy p {
  max-width: 60ch !important;
}

.about-founder-caption strong {
  font-size: 15px !important;
  font-weight: 700 !important;
}

.about-founder-caption span {
  max-width: 24ch !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

@media (max-width: 640px) {
  .about-founder-copy h2 {
    max-width: 14ch !important;
  }
}


/* ── ABOUT HEADING TWO-LINE DESKTOP WRAP ──────────────────────────
   Give the promise heading enough measure to read as two confident
   lines on desktop instead of three narrow fragments.
------------------------------------------------------------------- */
@media (min-width: 900px) {
  .about-founder-copy h2 {
    max-width: 20ch !important;
  }
}

@media (min-width: 1180px) {
  .about-founder-copy h2 {
    max-width: 22ch !important;
  }
}

@media (max-width: 640px) {
  .about-founder-copy h2 {
    max-width: 13.5ch !important;
  }
}


/* ── ABOUT HEADING FORCED WRAP FIX ────────────────────────────────
   Remove earlier artificial measures/balancing that force the promise
   heading into three lines. Desktop should read as two lines.
------------------------------------------------------------------- */
@media (min-width: 900px) {
  .about-founder-copy {
    max-width: 820px !important;
  }

  .about-founder-copy h2 {
    max-width: 760px !important;
    width: 760px !important;
    text-wrap: normal !important;
    text-wrap: pretty !important;
  }
}

@media (min-width: 1180px) {
  .about-founder-copy h2 {
    max-width: 800px !important;
    width: 800px !important;
  }
}

@media (max-width: 899px) {
  .about-founder-copy h2 {
    width: auto !important;
  }
}


/* ── EXPLICIT HEADING BREAK RHYTHM ────────────────────────────────
   Heading line breaks are now intentional in the markup. Let the text
   respect those breaks rather than fighting them with artificial widths.
------------------------------------------------------------------- */
.capabilities-title,
.about-founder-copy h2 {
  text-wrap: normal !important;
}

@media (min-width: 900px) {
  .capabilities-title {
    max-width: none !important;
  }

  .about-founder-copy h2 {
    width: auto !important;
    max-width: none !important;
  }
}

@media (max-width: 640px) {
  .capabilities-title,
  .about-founder-copy h2 {
    max-width: 14ch !important;
  }

  .capabilities-title br,
  .about-founder-copy h2 br {
    display: none;
  }
}


/* ── FOOTER FINAL REFINEMENT ──────────────────────────────────────
   Match the header brand system, add section-like breathing room,
   center the copyright, and use a native language select styled as a
   compact app button.
------------------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.site-footer,
.footer-bottom {
  background: #FFFFFF !important;
  border-top: 1px solid var(--app-topbar-border, #E4E0D8) !important;
}

.footer-bottom {
  padding-top: clamp(44px, 5vw, 68px) !important;
  padding-bottom: clamp(42px, 4.5vw, 62px) !important;
}

.footer-inner {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 24px !important;
  text-align: center !important;
}

.footer-brand-block {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

.footer-brand-row {
  margin: 0 !important;
  padding-inline: 0 !important;
  justify-content: center !important;
}

.footer-links {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 18px 28px !important;
  width: 100% !important;
}

.footer-link {
  font-family: var(--font-body, var(--font-ui)) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--text-sec) !important;
  text-decoration: none !important;
  padding: 8px 0 !important;
}

.footer-link:hover,
.footer-link:focus-visible {
  color: var(--text) !important;
  text-decoration: none !important;
}

.footer-lang-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.footer-language-select {
  height: var(--site-button-h, 38px) !important;
  min-height: var(--site-button-h, 38px) !important;
  border-radius: var(--site-button-radius, 6px) !important;
  border: 1px solid var(--ui-hairline-strong, rgba(26,25,23,.16)) !important;
  background: #FFFFFF !important;
  color: var(--text-sec) !important;
  font-family: var(--font-body, var(--font-ui)) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 0 32px 0 14px !important;
  appearance: auto !important;
  cursor: pointer !important;
}

.footer-language-select:hover,
.footer-language-select:focus-visible {
  border-color: rgba(26,25,23,.22) !important;
  color: var(--text) !important;
  outline: none !important;
}

.footer-copyright {
  order: 3 !important;
  margin: 0 !important;
  width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-family: var(--font-body, var(--font-ui)) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: var(--text-mute) !important;
}

@media (max-width: 640px) {
  .footer-bottom {
    padding-top: 44px !important;
    padding-bottom: 46px !important;
  }

  .footer-inner {
    gap: 22px !important;
  }

  .footer-links {
    gap: 14px 22px !important;
  }

  .footer-link {
    font-size: 11.5px !important;
    letter-spacing: .075em !important;
  }

  .footer-language-select {
    font-size: 11.5px !important;
  }

  .footer-copyright {
    font-size: 12.5px !important;
    white-space: normal !important;
  }
}


/* ── FOOTER LAYOUT CORRECTION ─────────────────────────────────────
   Keep the footer as a clean centered stack. Remove the extra internal
   separator line and prevent earlier desktop footer rules from forcing
   brand/copyright left and links right.
------------------------------------------------------------------- */
.site-footer,
.footer-bottom {
  border-top: 0 !important;
  box-shadow: none !important;
}

.site-footer::before,
.site-footer::after,
.footer-bottom::before,
.footer-bottom::after,
.footer-inner::before,
.footer-inner::after {
  content: none !important;
  display: none !important;
}

.footer-bottom {
  padding-top: clamp(54px, 5.5vw, 76px) !important;
  padding-bottom: clamp(54px, 5.5vw, 76px) !important;
}

.footer-inner {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 24px !important;
  text-align: center !important;
}

.footer-brand-block,
.footer-links,
.footer-copyright {
  width: auto !important;
  justify-self: center !important;
  align-self: center !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

.footer-brand-block {
  order: 1 !important;
  display: flex !important;
  justify-content: center !important;
}

.footer-brand-row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  margin: 0 !important;
}

.footer-links {
  order: 2 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px 30px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.footer-copyright {
  order: 3 !important;
  margin: -2px 0 0 !important;
  text-align: center !important;
}

.footer-language-select {
  max-width: 180px !important;
}

@media (max-width: 640px) {
  .footer-bottom {
    padding-top: 48px !important;
    padding-bottom: 50px !important;
  }

  .footer-inner {
    gap: 22px !important;
  }

  .footer-links {
    gap: 14px 22px !important;
  }

  .footer-copyright {
    max-width: none !important;
    white-space: nowrap !important;
  }
}


/* ── FOOTER FINAL TYPOGRAPHY + BORDER TUNE ────────────────────────
   Restore the section divider, soften link typography, and make the
   copyright read like quiet metadata rather than a primary footer item.
------------------------------------------------------------------- */
.site-footer,
.footer-bottom {
  border-top: 1px solid var(--app-topbar-border, #E4E0D8) !important;
}

.footer-bottom {
  padding-top: clamp(52px, 5vw, 70px) !important;
  padding-bottom: clamp(50px, 5vw, 68px) !important;
}

.footer-inner {
  gap: 22px !important;
}

.footer-links {
  gap: 14px 26px !important;
}

.footer-link {
  font-size: 10.5px !important;
  font-weight: 650 !important;
  letter-spacing: .085em !important;
  color: color-mix(in srgb, var(--text-sec) 78%, var(--text-mute)) !important;
}

.footer-link:hover,
.footer-link:focus-visible {
  color: var(--text-sec) !important;
}

.footer-language-select {
  height: 34px !important;
  min-height: 34px !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
  letter-spacing: .085em !important;
  color: color-mix(in srgb, var(--text-sec) 78%, var(--text-mute)) !important;
  padding-left: 12px !important;
  padding-right: 28px !important;
}

.footer-copyright {
  margin-top: -4px !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  color: var(--text-mute) !important;
}

@media (max-width: 640px) {
  .footer-bottom {
    padding-top: 44px !important;
    padding-bottom: 48px !important;
  }

  .footer-links {
    gap: 12px 20px !important;
  }

  .footer-link,
  .footer-language-select {
    font-size: 10.5px !important;
  }

  .footer-copyright {
    font-size: 11.5px !important;
    white-space: nowrap !important;
  }
}


/* ── FOOTER SINGLE DIVIDER + COPYRIGHT YEAR FIX ───────────────────
   Keep one divider only and force the JS-updated year span to inherit
   the exact same typography as the surrounding copyright text.
------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--app-topbar-border, #E4E0D8) !important;
}

.footer-bottom,
.footer-inner {
  border-top: 0 !important;
  box-shadow: none !important;
}

.footer-bottom::before,
.footer-bottom::after,
.footer-inner::before,
.footer-inner::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

.footer-copyright,
.footer-copyright span,
.footer-copyright [data-current-year] {
  font-family: var(--font-body, var(--font-ui)) !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  color: var(--text-mute) !important;
  text-transform: none !important;
  font-variant-numeric: normal !important;
}


/* ── HERO GALLERY PLACEHOLDER REFINEMENT ──────────────────────────
   Three swap-ready screenshot placeholders. Keep the screenshot fully
   visible and make the hero gallery large enough to read.
------------------------------------------------------------------- */
@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, .88fr) minmax(560px, 1.12fr) !important;
    column-gap: clamp(54px, 6vw, 92px) !important;
  }

  .hero-right {
    max-width: 680px !important;
  }
}

.hero-gallery {
  width: min(100%, 680px) !important;
}

.hero-gallery-main {
  aspect-ratio: 16 / 10 !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

.hero-gallery-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  background: #FFFFFF !important;
}

.hero-gallery-thumbs {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.hero-thumb {
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
}

.hero-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #FFFFFF !important;
}

@media (max-width: 899px) {
  .hero-gallery {
    width: 100% !important;
  }

  .hero-gallery-main {
    aspect-ratio: 16 / 10 !important;
  }

  .hero-gallery-thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}


/* ── HERO BALANCE + CROPPED GALLERY PASS ──────────────────────────
   Keep the copy at a proper editorial measure and make the screenshot
   legible through prepared crops, not by compressing the text column.
------------------------------------------------------------------- */
@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(420px, 0.95fr) minmax(520px, 1.05fr) !important;
    column-gap: clamp(56px, 6vw, 88px) !important;
    align-items: center !important;
  }

  .hero-copy {
    max-width: 470px !important;
  }

  .hero-right {
    max-width: 620px !important;
  }

  .hero-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .hero-headline {
    max-width: 11.5ch !important;
  }
}

.hero-gallery {
  width: min(100%, 620px) !important;
}

.hero-gallery-main {
  aspect-ratio: 16 / 10 !important;
  display: block !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
}

.hero-gallery-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  background: #FFFFFF !important;
}

.hero-gallery-thumbs {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 14px !important;
}

.hero-thumb {
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border-radius: 10px !important;
}

.hero-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #FFFFFF !important;
}

@media (max-width: 899px) {
  .hero-headline br {
    display: none;
  }

  .hero-gallery {
    width: 100% !important;
  }

  .hero-gallery-main {
    aspect-ratio: 16 / 10 !important;
  }

  .hero-gallery-thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .hero-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
}


/* ── HERO GALLERY RESOLUTION PASS ─────────────────────────────────
   The gallery now uses purpose-made 16:10 assets, so the layout should
   protect copy measure and let the image scale cleanly without cropping.
------------------------------------------------------------------- */
@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(430px, 0.95fr) minmax(560px, 1.05fr) !important;
    column-gap: clamp(58px, 6vw, 90px) !important;
    align-items: center !important;
  }

  .hero-copy {
    max-width: 480px !important;
    min-width: 430px !important;
  }

  .hero-right {
    max-width: 660px !important;
    min-width: 0 !important;
  }

  .hero-headline {
    max-width: 12.5ch !important;
  }

  .hero-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }
}

.hero-gallery {
  width: min(100%, 660px) !important;
}

.hero-gallery-main {
  aspect-ratio: 16 / 10 !important;
  display: block !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
}

.hero-gallery-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  background: #FFFFFF !important;
}

.hero-gallery-thumbs {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 14px !important;
  max-width: 100% !important;
}

.hero-thumb {
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border-radius: 10px !important;
}

.hero-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #FFFFFF !important;
}

@media (max-width: 899px) {
  .hero-copy {
    min-width: 0 !important;
  }

  .hero-headline br {
    display: none;
  }

  .hero-gallery {
    width: 100% !important;
  }

  .hero-gallery-main {
    aspect-ratio: 16 / 10 !important;
  }
}

@media (max-width: 640px) {
  .hero-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
}


/* ── STACKED HERO LAYOUT PASS ─────────────────────────────────────
   Put the product image first, then the copy underneath. This avoids
   squeezing the headline while letting the app screenshot read clearly.
------------------------------------------------------------------- */
@media (min-width: 900px) {
  .hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 42px !important;
    justify-items: center !important;
    align-items: start !important;
    text-align: center !important;
    padding-top: clamp(82px, 9vw, 132px) !important;
    padding-bottom: clamp(82px, 9vw, 126px) !important;
  }

  .hero-right {
    order: 1 !important;
    width: 100% !important;
    max-width: 860px !important;
    min-width: 0 !important;
    justify-self: center !important;
  }

  .hero-copy {
    order: 2 !important;
    width: 100% !important;
    max-width: 680px !important;
    min-width: 0 !important;
    justify-self: center !important;
    text-align: center !important;
    display: grid !important;
    justify-items: center !important;
  }

  .hero-gallery {
    width: min(100%, 860px) !important;
  }

  .hero-gallery-main {
    aspect-ratio: 16 / 10 !important;
  }

  .hero-gallery-thumbs {
    max-width: 660px !important;
    margin-inline: auto !important;
  }

  .hero-headline {
    max-width: 12.5ch !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  .hero-body {
    justify-items: center !important;
    text-align: center !important;
  }

  .hero-body .hero-subheadline {
    max-width: 34ch !important;
    text-align: center !important;
  }

  .hero-body .hero-subheadline + p {
    max-width: 44ch !important;
    text-align: center !important;
  }

  .hero-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
  }
}

@media (max-width: 899px) {
  .hero {
    text-align: left !important;
  }

  .hero-right {
    order: 1 !important;
  }

  .hero-copy {
    order: 2 !important;
  }
}


/* ── HERO SINGLE IMAGE SIMPLIFICATION ─────────────────────────────
   Remove the gallery behaviour visually, keep one strong product image,
   and restore natural copy measures/line wrapping.
------------------------------------------------------------------- */
.hero-gallery--single .hero-gallery-thumbs,
.hero-gallery-thumbs {
  display: none !important;
}

.hero-gallery--single {
  width: min(100%, 900px) !important;
}

.hero-gallery--single .hero-gallery-main {
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
}

.hero-gallery--single .hero-gallery-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #FFFFFF !important;
}

@media (min-width: 900px) {
  .hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    row-gap: 48px !important;
    padding-top: clamp(76px, 8vw, 116px) !important;
    padding-bottom: clamp(80px, 8vw, 118px) !important;
    text-align: center !important;
  }

  .hero-right {
    order: 1 !important;
    width: 100% !important;
    max-width: 900px !important;
    justify-self: center !important;
  }

  .hero-copy {
    order: 2 !important;
    width: 100% !important;
    max-width: 760px !important;
    min-width: 0 !important;
    display: grid !important;
    justify-items: center !important;
    text-align: center !important;
  }

  .hero-headline {
    max-width: 13.5ch !important;
    margin-inline: auto !important;
    text-align: center !important;
    text-wrap: balance !important;
  }

  .hero-headline br {
    display: none !important;
  }

  .hero-body {
    display: grid !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 18px !important;
  }

  .hero-body .hero-subheadline {
    max-width: 38ch !important;
    text-align: center !important;
  }

  .hero-body .hero-subheadline + p {
    max-width: 46ch !important;
    text-align: center !important;
  }

  .hero-actions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
  }
}

@media (max-width: 899px) {
  .hero-gallery--single {
    width: 100% !important;
  }

  .hero-headline br {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .hero-copy {
    text-align: left !important;
    justify-items: start !important;
  }

  .hero-body,
  .hero-body .hero-subheadline,
  .hero-body .hero-subheadline + p {
    text-align: left !important;
    justify-items: start !important;
  }

  .hero-actions {
    justify-content: flex-start !important;
  }
}


/* ── HERO SINGLE IMAGE HARD FIX ───────────────────────────────────
   The hero no longer uses a carousel. Hide/remove any remaining thumb
   UI from older generated markup and give the single image stable sizing.
------------------------------------------------------------------- */
.hero-gallery-thumbs,
.hero-thumb,
[data-hero-thumb] {
  display: none !important;
}

.hero-gallery,
.hero-gallery--single {
  width: min(100%, 900px) !important;
  max-width: 900px !important;
}

.hero-gallery-main {
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
}

.hero-gallery-main .hero-gallery-image:not(.is-active) {
  display: none !important;
}

.hero-gallery-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #FFFFFF !important;
}

@media (min-width: 900px) {
  .hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    row-gap: 48px !important;
    text-align: center !important;
  }

  .hero-right {
    order: 1 !important;
    width: 100% !important;
    max-width: 900px !important;
    justify-self: center !important;
  }

  .hero-copy {
    order: 2 !important;
    max-width: 760px !important;
    min-width: 0 !important;
    justify-items: center !important;
    text-align: center !important;
  }

  .hero-headline {
    max-width: 14ch !important;
    text-wrap: balance !important;
  }

  .hero-headline br {
    display: none !important;
  }

  .hero-body,
  .hero-body .hero-subheadline,
  .hero-body .hero-subheadline + p {
    text-align: center !important;
  }

  .hero-actions {
    justify-content: center !important;
  }
}


/* ── HERO SINGLE SCREENSHOT + LAPTOP FIT REFINEMENT ───────────────
   The hero now uses the screenshot itself, not a simulated window
   frame. Tighten vertical rhythm and widen copy measures so the hero
   reads in one laptop viewport more often.
------------------------------------------------------------------- */
.hero-gallery-chrome {
  display: none !important;
}

.hero-gallery,
.hero-gallery--single {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.hero-gallery-main {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.hero-gallery-image {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

@media (min-width: 900px) {
  .hero {
    row-gap: clamp(28px, 3vw, 40px) !important;
    padding-top: clamp(44px, 5.2vw, 76px) !important;
    padding-bottom: clamp(58px, 6vw, 88px) !important;
  }

  .hero-right {
    max-width: min(860px, 62vw) !important;
  }

  .hero-gallery,
  .hero-gallery--single {
    width: min(100%, 860px) !important;
    max-width: min(860px, 62vw) !important;
  }

  .hero-gallery-main {
    aspect-ratio: 16 / 9.6 !important;
  }

  .hero-copy {
    max-width: 820px !important;
  }

  .hero-headline {
    max-width: 15.5ch !important;
    margin-bottom: 22px !important;
  }

  .hero-body {
    gap: 14px !important;
  }

  .hero-body .hero-subheadline {
    max-width: 48ch !important;
  }

  .hero-body .hero-subheadline + p {
    max-width: 60ch !important;
  }

  .hero-actions {
    margin-top: 24px !important;
  }
}

@media (min-width: 900px) and (max-height: 860px) {
  .hero {
    padding-top: 36px !important;
    padding-bottom: 58px !important;
    row-gap: 26px !important;
  }

  .hero-right,
  .hero-gallery,
  .hero-gallery--single {
    max-width: min(780px, 58vw) !important;
  }

  .hero-headline {
    font-size: clamp(38px, 3.7vw, 52px) !important;
    line-height: 1.045 !important;
    margin-bottom: 18px !important;
  }

  .hero-body .hero-subheadline {
    font-size: clamp(17px, 1.35vw, 20px) !important;
    line-height: 1.48 !important;
  }

  .hero-body .hero-subheadline + p {
    font-size: 14px !important;
    line-height: 1.58 !important;
  }

  .hero-actions {
    margin-top: 20px !important;
  }
}

@media (max-width: 899px) {
  .hero-gallery,
  .hero-gallery--single,
  .hero-gallery-main,
  .hero-gallery-image {
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}


/* ── HERO TEXT WRAP REAL FIX ──────────────────────────────────────
   Earlier passes left multiple max-width and text-wrap rules with
   !important. This final override removes artificial line breaks and
   allows the stacked hero copy to use the available width.
------------------------------------------------------------------- */
@media (min-width: 900px) {
  .hero .hero-copy {
    width: min(100%, 920px) !important;
    max-width: 920px !important;
    min-width: 0 !important;
  }

  .hero .hero-headline {
    width: 100% !important;
    max-width: 920px !important;
    text-wrap: normal !important;
    white-space: normal !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero .hero-headline br {
    display: none !important;
  }

  .hero .hero-body {
    width: min(100%, 860px) !important;
    max-width: 860px !important;
  }

  .hero .hero-body .hero-subheadline {
    width: 100% !important;
    max-width: 760px !important;
    text-wrap: normal !important;
    white-space: normal !important;
  }

  .hero .hero-body .hero-subheadline + p {
    width: 100% !important;
    max-width: 760px !important;
    text-wrap: normal !important;
    white-space: normal !important;
  }
}

@media (min-width: 900px) and (max-height: 860px) {
  .hero .hero-copy {
    max-width: 900px !important;
  }

  .hero .hero-headline {
    max-width: 900px !important;
  }

  .hero .hero-body,
  .hero .hero-body .hero-subheadline,
  .hero .hero-body .hero-subheadline + p {
    max-width: 780px !important;
  }
}


/* ── HERO SCREENSHOT MATTE REMOVAL + SHADOW RESTORE ───────────────
   The screenshot asset has been trimmed. Do not add a white matte or
   frame in CSS; apply the product-card shadow directly to the image.
------------------------------------------------------------------- */
.hero-gallery,
.hero-gallery--single,
.hero-gallery-main {
  padding: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.hero-gallery-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  border: 1px solid var(--app-topbar-border, #E4E0D8) !important;
  border-radius: 14px !important;
  box-shadow:
    0 28px 80px rgba(26, 25, 23, 0.10),
    0 10px 28px rgba(26, 25, 23, 0.075),
    0 1px 2px rgba(26, 25, 23, 0.08) !important;
}

@media (min-width: 900px) {
  .hero-gallery,
  .hero-gallery--single {
    width: min(100%, 880px) !important;
    max-width: min(880px, 64vw) !important;
  }

  .hero-gallery-main {
    aspect-ratio: auto !important;
  }
}

@media (max-width: 899px) {
  .hero-gallery-image {
    border-radius: 12px !important;
  }
}


/* ── HERO IMAGE NO FRAME + COPY WRAP FINAL ────────────────────────
   The screenshot should be the asset itself, with only an outer shadow.
   Remove wrapper/frame/border styling. Keep the subheadline manual break
   on desktop, but allow natural wrapping on mobile.
------------------------------------------------------------------- */
.hero-gallery,
.hero-gallery--single,
.hero-gallery-main {
  padding: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.hero-gallery::before,
.hero-gallery::after,
.hero-gallery-main::before,
.hero-gallery-main::after {
  content: none !important;
  display: none !important;
}

.hero-gallery-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow:
    0 30px 90px rgba(26, 25, 23, 0.13),
    0 12px 34px rgba(26, 25, 23, 0.09),
    0 2px 5px rgba(26, 25, 23, 0.06) !important;
}

@media (min-width: 900px) {
  .hero .hero-body .hero-subheadline {
    max-width: 64ch !important;
  }

  .hero .hero-body .hero-subheadline br {
    display: block !important;
  }

  .hero .hero-body .hero-subheadline + p {
    max-width: 54ch !important;
  }

  .hero .hero-headline {
    max-width: 920px !important;
  }
}

@media (max-width: 899px) {
  .hero .hero-body .hero-subheadline br {
    display: none !important;
  }
}


/* ── HERO VERTICAL SPACING TIGHTENING ─────────────────────────────
   Reduce excess top space and bring the CTAs closer to the note.
------------------------------------------------------------------- */
@media (min-width: 900px) {
  .hero {
    padding-top: clamp(28px, 3.4vw, 52px) !important;
    padding-bottom: clamp(54px, 5.2vw, 78px) !important;
    row-gap: clamp(24px, 2.6vw, 34px) !important;
  }

  .hero-body {
    gap: 12px !important;
  }

  .hero-actions {
    margin-top: 14px !important;
  }
}

@media (min-width: 900px) and (max-height: 860px) {
  .hero {
    padding-top: 24px !important;
    padding-bottom: 48px !important;
    row-gap: 22px !important;
  }

  .hero-actions {
    margin-top: 12px !important;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-top: 32px !important;
  }

  .hero-actions {
    margin-top: 14px !important;
  }
}


/* ── HERO NOTE NATURAL WRAP FIX ───────────────────────────────────
   Remove the narrow measure forcing the supporting note onto two
   artificial lines.
------------------------------------------------------------------- */
@media (min-width: 900px) {
  .hero .hero-body .hero-subheadline + p {
    width: 100% !important;
    max-width: 720px !important;
    text-wrap: normal !important;
    white-space: normal !important;
  }
}

@media (min-width: 900px) and (max-height: 860px) {
  .hero .hero-body .hero-subheadline + p {
    max-width: 720px !important;
  }
}


/* ── HERO IMAGE FRAME REMOVAL ─────────────────────────────────────
   The PNG has been cropped to the screenshot bounds. Keep all wrappers
   transparent and do not add borders, backgrounds, padding, or radius.
------------------------------------------------------------------- */
.hero-gallery,
.hero-gallery--single,
.hero-gallery-main {
  padding: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.hero-gallery-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  box-shadow:
    0 30px 90px rgba(26, 25, 23, 0.13),
    0 12px 34px rgba(26, 25, 23, 0.09),
    0 2px 5px rgba(26, 25, 23, 0.06) !important;
}

.hero-gallery-image::before,
.hero-gallery-image::after {
  content: none !important;
}


/* ── HERO SCREENSHOT FINAL SHADOW + ARTIFACT CLEANUP ──────────────
   Remove any visible wrapper footprint and use the same kind of soft,
   page-like elevation as the app document surface.
------------------------------------------------------------------- */
.hero-gallery,
.hero-gallery--single,
.hero-gallery-main {
  line-height: 0 !important;
  font-size: 0 !important;
  padding: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.hero-gallery-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  filter:
    drop-shadow(0 34px 72px rgba(26, 25, 23, 0.10))
    drop-shadow(0 12px 24px rgba(26, 25, 23, 0.07))
    drop-shadow(0 1px 2px rgba(26, 25, 23, 0.08)) !important;
  box-shadow: none !important;
}


/* ── HERO PLAIN SCREENSHOT STRUCTURE ──────────────────────────────
   The screenshot is now a direct child of the hero image column. Remove
   all legacy gallery structure from layout and apply shadow directly to
   the screenshot asset.
------------------------------------------------------------------- */
.hero-gallery,
.hero-gallery--single,
.hero-gallery-main,
.hero-gallery-thumbs,
.hero-thumb,
[data-hero-carousel],
[data-hero-thumb],
[data-hero-slide] {
  display: none !important;
}

.hero-right {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.hero-screenshot {
  display: block !important;
  width: min(100%, 880px) !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow:
    0 34px 72px rgba(26, 25, 23, 0.10),
    0 12px 24px rgba(26, 25, 23, 0.07),
    0 1px 2px rgba(26, 25, 23, 0.08) !important;
}

@media (min-width: 900px) {
  .hero-right {
    order: 1 !important;
    width: 100% !important;
    max-width: min(880px, 64vw) !important;
    justify-self: center !important;
  }

  .hero-screenshot {
    max-width: min(880px, 64vw) !important;
  }
}

@media (max-width: 899px) {
  .hero-right {
    width: 100% !important;
  }

  .hero-screenshot {
    width: 100% !important;
  }
}


/* ── HERO: SINGLE IMAGE ONLY ──────────────────────────────────────
   Gallery/carousel structure has been removed. The hero visual is now
   one direct image element. No wrapper footprint, no hidden gallery
   surfaces, no inline-image baseline artefact.
------------------------------------------------------------------- */
.hero-right {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

.hero-right > *:not(.hero-screenshot) {
  display: none !important;
}

.hero-screenshot {
  display: block !important;
  vertical-align: top !important;
  width: min(100%, 880px) !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow:
    0 34px 72px rgba(26, 25, 23, 0.10),
    0 12px 24px rgba(26, 25, 23, 0.07),
    0 1px 2px rgba(26, 25, 23, 0.08) !important;
}

.hero-gallery,
.hero-gallery--single,
.hero-gallery-main,
.hero-gallery-chrome,
.hero-gallery-thumbs,
.hero-thumb,
.hero-gallery-image,
[data-hero-carousel],
[data-hero-slide],
[data-hero-thumb] {
  display: none !important;
}

@media (min-width: 900px) {
  .hero-right {
    order: 1 !important;
    width: 100% !important;
    max-width: min(880px, 64vw) !important;
    justify-self: center !important;
  }

  .hero-screenshot {
    max-width: min(880px, 64vw) !important;
  }
}

@media (max-width: 899px) {
  .hero-right,
  .hero-screenshot {
    width: 100% !important;
  }
}


/* ── HERO SINGLE SCREENSHOT SHELL ─────────────────────────────────
   One static screenshot inside a clean app/browser-style shell. This is
   not the carousel/gallery structure.
------------------------------------------------------------------- */
.hero-right {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  line-height: normal !important;
  font-size: inherit !important;
}

.hero-right > *:not(.hero-screenshot-shell) {
  display: none !important;
}

.hero-screenshot-shell {
  display: block !important;
  width: min(100%, 890px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
  border: 1px solid var(--app-topbar-border, #E4E0D8) !important;
  border-radius: 16px !important;
  box-shadow:
    0 26px 64px rgba(26, 25, 23, 0.09),
    0 8px 22px rgba(26, 25, 23, 0.055),
    0 1px 2px rgba(26, 25, 23, 0.055) !important;
}

.hero-screenshot-bar {
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 16px !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--app-topbar-border, #E4E0D8) !important;
}

.hero-screenshot-bar span {
  width: 8px !important;
  height: 8px !important;
  flex: 0 0 auto !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--text-mute) 34%, transparent) !important;
}

.hero-screenshot {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

.hero-gallery,
.hero-gallery--single,
.hero-gallery-main,
.hero-gallery-chrome,
.hero-gallery-thumbs,
.hero-thumb,
.hero-gallery-image,
[data-hero-carousel],
[data-hero-slide],
[data-hero-thumb] {
  display: none !important;
}

@media (min-width: 900px) {
  .hero-right {
    order: 1 !important;
    width: 100% !important;
    max-width: min(890px, 64vw) !important;
    justify-self: center !important;
  }

  .hero-screenshot-shell {
    max-width: min(890px, 64vw) !important;
  }
}

@media (max-width: 899px) {
  .hero-right,
  .hero-screenshot-shell {
    width: 100% !important;
  }

  .hero-screenshot-shell {
    border-radius: 12px !important;
  }

  .hero-screenshot-bar {
    height: 30px !important;
    padding-inline: 12px !important;
  }
}


/* ── HERO SHELL VISIBILITY FIX ────────────────────────────────────
   Earlier single-image passes hid any hero-right child that was not
   .hero-screenshot. The current version uses a shell wrapper, so force
   that shell and its image visible.
------------------------------------------------------------------- */
.hero-right > .hero-screenshot-shell {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.hero-screenshot-shell,
.hero-screenshot-shell .hero-screenshot,
.hero-right .hero-screenshot {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.hero-right > *:not(.hero-screenshot-shell) {
  display: none !important;
}

.hero-screenshot-shell {
  width: min(100%, 890px) !important;
  max-width: min(890px, 64vw) !important;
}

.hero-screenshot-shell .hero-screenshot {
  width: 100% !important;
  height: auto !important;
}


/* ── HERO SCREENSHOT BORDER, NO SHADOW ────────────────────────────
   Remove the hero image elevation entirely. Keep the screenshot inside
   a subtle light/white shell border like the earlier app-style frame.
------------------------------------------------------------------- */
.hero-screenshot-shell {
  box-shadow: none !important;
  filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.92) !important;
  background: #FFFFFF !important;
}

.hero-screenshot {
  box-shadow: none !important;
  filter: none !important;
}

.hero-screenshot-bar {
  background: #FFFFFF !important;
  border-bottom: 1px solid rgba(26, 25, 23, 0.08) !important;
}


/* ── HERO IMAGE SIZE + BORDER REFINEMENT ──────────────────────────
   Slightly reduce the screenshot size, make the light border more
   present, and remove every remaining shadow/filter path.
------------------------------------------------------------------- */
.hero-screenshot-shell {
  width: min(100%, 820px) !important;
  max-width: min(820px, 58vw) !important;
  border: 2px solid rgba(255, 255, 255, 0.98) !important;
  box-shadow: none !important;
  filter: none !important;
}

.hero-screenshot-shell,
.hero-screenshot-shell *,
.hero-screenshot,
.hero-right,
.hero-right * {
  box-shadow: none !important;
  filter: none !important;
}

.hero-screenshot {
  box-shadow: none !important;
  filter: none !important;
}

@media (min-width: 900px) {
  .hero-right {
    max-width: min(820px, 58vw) !important;
  }

  .hero-screenshot-shell {
    max-width: min(820px, 58vw) !important;
  }
}

@media (min-width: 900px) and (max-height: 860px) {
  .hero-right,
  .hero-screenshot-shell {
    max-width: min(760px, 56vw) !important;
  }
}

@media (max-width: 899px) {
  .hero-screenshot-shell {
    width: 100% !important;
    max-width: 100% !important;
    border-width: 2px !important;
  }
}


/* ── HERO PADDING REDUCTION ───────────────────────────────────────
   Tighten the hero vertically so the screenshot, copy, and buttons fit
   more comfortably on laptop-height screens.
------------------------------------------------------------------- */
@media (min-width: 900px) {
  .hero {
    padding-top: clamp(18px, 2.4vw, 36px) !important;
    padding-bottom: clamp(36px, 4vw, 58px) !important;
    row-gap: clamp(18px, 2vw, 28px) !important;
  }
}

@media (min-width: 900px) and (max-height: 860px) {
  .hero {
    padding-top: 16px !important;
    padding-bottom: 34px !important;
    row-gap: 18px !important;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-top: 24px !important;
    padding-bottom: 42px !important;
  }
}


/* Hero curated product mockup */
.hero-gallery,.hero-gallery--single,.hero-gallery-main,.hero-gallery-chrome,.hero-gallery-thumbs,.hero-thumb,.hero-gallery-image,.hero-screenshot,.hero-screenshot-shell,[data-hero-carousel],[data-hero-slide],[data-hero-thumb]{display:none!important}

@media (min-width:900px){
  .hero{display:grid!important;grid-template-columns:minmax(0,1fr)!important;justify-items:center!important;text-align:center!important;padding-top:clamp(24px,3vw,46px)!important;padding-bottom:clamp(42px,4.4vw,66px)!important;row-gap:clamp(24px,2.8vw,38px)!important}
  .hero-right{order:1!important;width:100%!important;max-width:900px!important;justify-self:center!important}
  .hero-copy{order:2!important;width:min(100%,920px)!important;max-width:920px!important;min-width:0!important;display:grid!important;justify-items:center!important;text-align:center!important}
  .hero-headline{width:100%!important;max-width:920px!important;text-wrap:normal!important;white-space:normal!important;margin-bottom:20px!important}
  .hero-body{width:min(100%,860px)!important;max-width:860px!important;gap:12px!important}
  .hero-body .hero-subheadline{max-width:66ch!important}
  .hero-body .hero-subheadline br{display:block!important}
  .hero-body .hero-subheadline+p{max-width:720px!important}
  .hero-actions{margin-top:16px!important;justify-content:center!important}
}

.hero-product-mockup{width:min(100%,900px);margin:0 auto;overflow:hidden;border:1px solid rgba(255,255,255,.98);border-radius:18px;background:#fff;color:var(--text)}
.mockup-topbar{height:48px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:0 22px;border-bottom:1px solid var(--app-topbar-border,#E4E0D8);font-family:var(--font-body,var(--font-ui));font-size:12px}
.mockup-brand{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-width:0}.mockup-brand strong{font-weight:700}.mockup-brand span{width:1px;height:14px;background:var(--app-topbar-border,#E4E0D8)}.mockup-brand em{font-style:normal;color:var(--accent);font-weight:650}.mockup-title{justify-self:center;font-weight:700}.mockup-status{justify-self:end;color:var(--text-mute);font-weight:550}
.mockup-toolbar{height:42px;display:flex;align-items:center;justify-content:center;gap:13px;border-bottom:1px solid var(--app-topbar-border,#E4E0D8);background:#fff}.mockup-toolbar span{width:18px;height:3px;border-radius:999px;background:rgba(26,25,23,.22)}.mockup-toolbar span.wide{width:58px}.mockup-toolbar span.dot{width:14px;height:14px;border:1px solid rgba(26,25,23,.18);background:transparent;border-radius:4px}.mockup-toolbar i{width:1px;height:20px;background:var(--app-topbar-border,#E4E0D8)}
.mockup-workspace{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:18px;padding:30px;background:#F5F5F5}
.mockup-page{min-height:360px;display:flex;flex-direction:column;align-items:flex-start;padding:58px 72px;border:1px solid rgba(26,25,23,.08);border-radius:8px;background:#fff;box-shadow:0 18px 42px rgba(26,25,23,.055),0 1px 2px rgba(26,25,23,.05);text-align:left}
.mockup-kicker{margin:0 0 10px;font-family:var(--font-body,var(--font-ui));font-size:10px;letter-spacing:.12em;color:var(--text-mute);font-weight:700}.mockup-page h3{margin:0 0 22px;font-family:var(--font-display);font-size:34px;line-height:1;letter-spacing:-.035em}
.mockup-line{height:6px;width:66%;margin:0 0 12px;border-radius:999px;background:#E5E1DA}.mockup-line.line-lg{width:72%}.mockup-line.line-md{width:54%}.mockup-line.line-sm{width:40%}.mockup-line.line-full{width:82%}
.mockup-note{margin:2px 0 14px 44px;padding:6px 20px;border-radius:6px;background:#EAF0FF;color:var(--accent);font-family:var(--font-body,var(--font-ui));font-size:11px;font-weight:700}
.mockup-panel{display:grid;align-content:start;gap:12px}.mockup-panel-tabs{display:flex;gap:8px;margin-bottom:2px;font-family:var(--font-body,var(--font-ui));font-size:11px;font-weight:700}.mockup-panel-tabs span{flex:1;padding:8px 0;border-radius:7px;color:var(--text-mute);background:transparent}.mockup-panel-tabs .active{color:var(--accent);background:#EAF0FF}
.mockup-card{padding:16px;border:1px solid rgba(26,25,23,.10);border-radius:10px;background:#fff;text-align:left;font-family:var(--font-body,var(--font-ui))}.mockup-card strong{display:block;margin-bottom:5px;font-size:13px;color:var(--text)}.mockup-card p{margin:0;font-size:12px;line-height:1.4;color:var(--text-mute)}.mockup-panel button{height:38px;border:0;border-radius:var(--site-button-radius,6px);background:var(--accent);color:#fff;font-family:var(--font-body,var(--font-ui));font-size:13px;font-weight:700}
@media (min-width:900px) and (max-height:860px){.hero{padding-top:18px!important;padding-bottom:40px!important;row-gap:22px!important}.hero-product-mockup{width:min(100%,820px)}.mockup-workspace{padding:24px}.mockup-page{min-height:300px;padding:44px 62px}.mockup-page h3{font-size:30px}.hero-headline{font-size:clamp(38px,3.7vw,52px)!important;margin-bottom:16px!important}.hero-actions{margin-top:12px!important}}
@media (max-width:899px){.hero-product-mockup{width:100%;border-radius:14px}.mockup-status,.mockup-toolbar{display:none}.mockup-topbar{grid-template-columns:1fr auto;height:44px;padding:0 16px}.mockup-title{justify-self:end}.mockup-workspace{grid-template-columns:1fr;padding:18px}.mockup-panel{display:none}.mockup-page{min-height:300px;padding:44px 34px}.hero-body .hero-subheadline br{display:none!important}}
@media (max-width:640px){.mockup-brand strong{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mockup-page{min-height:260px;padding:36px 24px}.mockup-page h3{font-size:28px}}


/* ── HERO CURATED MOCKUP VISIBILITY FIX ───────────────────────────
   Earlier screenshot-only passes hid any .hero-right child that was not
   .hero-screenshot or .hero-screenshot-shell. The hero now uses
   .hero-product-mockup, so explicitly allow that element and its children.
------------------------------------------------------------------- */
.hero-right {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  line-height: normal !important;
  font-size: inherit !important;
}

.hero-right > .hero-product-mockup,
.hero-product-mockup,
.hero-product-mockup * {
  display: revert;
  visibility: visible !important;
  opacity: 1 !important;
}

.hero-right > .hero-product-mockup {
  display: block !important;
}

.hero-right > *:not(.hero-product-mockup) {
  display: none !important;
}

.hero-product-mockup .mockup-topbar {
  display: grid !important;
}

.hero-product-mockup .mockup-toolbar {
  display: flex !important;
}

.hero-product-mockup .mockup-workspace {
  display: grid !important;
}

.hero-product-mockup .mockup-page,
.hero-product-mockup .mockup-panel,
.hero-product-mockup .mockup-card {
  display: block !important;
}

.hero-product-mockup .mockup-panel {
  display: grid !important;
}

.hero-product-mockup .mockup-brand,
.hero-product-mockup .mockup-panel-tabs {
  display: flex !important;
}

.hero-product-mockup .mockup-line,
.hero-product-mockup .mockup-note,
.hero-product-mockup .mockup-toolbar span,
.hero-product-mockup .mockup-toolbar i,
.hero-product-mockup .mockup-swatch,
.hero-product-mockup button {
  display: block !important;
}

@media (max-width: 899px) {
  .hero-product-mockup .mockup-toolbar,
  .hero-product-mockup .mockup-status,
  .hero-product-mockup .mockup-panel {
    display: none !important;
  }

  .hero-product-mockup .mockup-workspace {
    display: grid !important;
  }
}


/* ── HERO LITERAL COMPOSE EXPORT MOCKUP ───────────────────────────
   Closer to the real app: exact two-row header model, Lucide-like SVG
   toolbar icons, page layout, and Files → Export sidebar.
------------------------------------------------------------------- */
.hero-product-mockup,.hero-product-mockup--app,.hero-gallery,.hero-screenshot,.hero-screenshot-shell{display:none!important}
.hero-right{display:flex!important;justify-content:center!important;align-items:center!important}
.hero-right>*:not(.hero-literal-app){display:none!important}

.hero-literal-app{
  width:min(100%,920px)!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.98)!important;
  border-radius:14px!important;
  background:#fff!important;
  font-family:var(--font-body,var(--font-ui))!important;
  color:var(--text)!important;
}
.literal-topbar{
  height:48px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  align-items:center!important;
  gap:14px!important;
  padding:0 20px!important;
  border-bottom:1px solid var(--app-topbar-border,#E4E0D8)!important;
  background:#fff!important;
}
.literal-brand{justify-self:start;display:flex!important;align-items:center!important;gap:8px!important;white-space:nowrap!important}
.literal-brand strong{font-size:15px!important;font-weight:600!important;letter-spacing:-.025em!important}
.literal-brand span{width:1px!important;height:14px!important;background:var(--app-topbar-border,#E4E0D8)!important}
.literal-brand em{font-size:12px!important;font-style:normal!important;font-weight:500!important;color:var(--accent)!important;opacity:.85!important}
.literal-title{justify-self:center!important;font-size:14px!important;font-weight:560!important;letter-spacing:-.015em!important}
.literal-tools{justify-self:end!important;display:flex!important;align-items:center!important;gap:14px!important;color:var(--text-muted,var(--text-mute))!important}
.literal-tools span{font-size:11px!important;font-variant-numeric:tabular-nums!important}
.literal-tools svg,.literal-toolbar svg,.literal-sidebar-head svg{width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.literal-tools svg:first-of-type{padding:8px!important;box-sizing:content-box!important;border-radius:8px!important;background:#EAF0FF!important;color:var(--accent)!important;box-shadow:inset 0 0 0 1px rgba(48,86,232,.16)!important}

.literal-toolbar{
  height:48px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  padding:0 18px!important;
  border-bottom:1px solid var(--app-topbar-border,#E4E0D8)!important;
  background:#fff!important;
  color:rgba(26,25,23,.72)!important;
}
.literal-toolbar svg{width:16px!important;height:16px!important;flex:0 0 auto!important}
.mock-divider{display:block!important;width:1px!important;height:16px!important;background:color-mix(in srgb,var(--app-topbar-border,#E4E0D8) 82%,transparent)!important;margin:0 2px!important}
.mock-select{display:inline-flex!important;align-items:center!important;min-width:116px!important;font-size:12.5px!important;font-weight:500!important;color:var(--text-sec)!important}
.mock-select:after{content:"⌄";margin-left:auto;color:var(--text-muted,var(--text-mute))}

.literal-body{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 352px!important;
  min-height:430px!important;
  background:#F6F4F1!important;
}
.literal-canvas{display:flex!important;align-items:flex-start!important;justify-content:center!important;padding:28px 42px 42px!important;overflow:hidden!important}
.literal-paper{
  width:min(100%,590px)!important;
  min-height:338px!important;
  padding:72px 76px!important;
  background:#fff!important;
  border-radius:6px!important;
  box-shadow:var(--paper-shadow-light,0 1px 2px rgba(60,45,30,.04),0 12px 32px rgba(60,45,30,.06),0 0 0 1px rgba(60,45,30,.025))!important;
  text-align:left!important;
}
.literal-kicker{margin:0 0 10px!important;font-size:10px!important;letter-spacing:.13em!important;color:var(--text-mute)!important;font-weight:700!important}
.literal-paper h3{font-family:var(--font-display)!important;font-size:32px!important;line-height:1.02!important;letter-spacing:-.035em!important;margin:0 0 22px!important}
.literal-line{height:6px!important;border-radius:999px!important;background:#E5E1DA!important;margin-bottom:12px!important}
.literal-line.w72{width:72%!important}.literal-line.w64{width:64%!important}.literal-line.w48{width:48%!important}.literal-line.w82{width:82%!important}.literal-line.w58{width:58%!important}
.literal-callout{width:62%!important;margin:4px 0 16px 44px!important;padding:7px 14px!important;border-radius:6px!important;background:#EAF0FF!important;color:var(--accent)!important;font-size:11px!important;font-weight:700!important;text-align:center!important}

.literal-sidebar{
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
  padding:16px!important;
  border-left:1px solid var(--app-topbar-border,#E4E0D8)!important;
  background:#F6F4F1!important;
  text-align:left!important;
}
.literal-sidebar-head{height:26px!important;display:grid!important;grid-template-columns:18px 1fr 18px!important;align-items:center!important;gap:10px!important}
.literal-sidebar-head strong{font-size:18px!important;font-weight:700!important;letter-spacing:-.02em!important}
.literal-sidebar-head svg:last-child{width:16px!important;height:16px!important;color:rgba(26,25,23,.72)!important}
.literal-tabs{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important}
.literal-tabs span{height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:8px!important;font-size:12px!important;font-weight:700!important;color:var(--text-sec)!important}
.literal-tabs .active{background:#EAF0FF!important;color:var(--accent)!important;box-shadow:inset 0 0 0 1px rgba(48,86,232,.16)!important}

.literal-card{
  padding:16px!important;
  border:1px solid var(--sp-card-border,rgba(26,25,23,.12))!important;
  border-radius:16px!important;
  background:#fff!important;
}
.literal-card header{display:grid!important;grid-template-columns:1fr auto auto!important;align-items:center!important;gap:10px!important;margin-bottom:12px!important}
.literal-card header strong{font-size:14px!important;font-weight:700!important}
.literal-card header span{font-size:12px!important;color:var(--text-sec)!important}
.literal-card header button{height:30px!important;padding:0 12px!important;border:1px solid rgba(26,25,23,.14)!important;border-radius:7px!important;background:#F6F4F1!important;color:var(--text-sec)!important;font-size:12px!important}
.literal-export-row{min-height:48px!important;display:grid!important;grid-template-columns:minmax(0,1fr) 104px!important;align-items:center!important;gap:12px!important;border-top:1px solid color-mix(in srgb,var(--sp-card-border,rgba(26,25,23,.12)) 72%,transparent)!important}
.literal-export-row:first-of-type{border-top:0!important}
.literal-export-row strong{font-size:13px!important;font-weight:700!important}
.literal-export-row button{height:36px!important;border:0!important;border-radius:6px!important;background:var(--accent)!important;color:#fff!important;font-size:13px!important;font-weight:600!important}
.literal-publish .literal-export-row{grid-template-columns:minmax(0,1fr) 104px!important}

@media (min-width:900px) and (max-height:860px){
  .hero-literal-app{width:min(100%,840px)!important}
  .literal-body{grid-template-columns:minmax(0,1fr) 320px!important;min-height:372px!important}
  .literal-canvas{padding:24px 34px 34px!important}
  .literal-paper{min-height:285px!important;padding:54px 66px!important}
  .literal-publish{display:none!important}
}
@media (max-width:899px){
  .hero-literal-app{width:100%!important;border-radius:12px!important}
  .literal-tools,.literal-toolbar,.literal-sidebar{display:none!important}
  .literal-topbar{grid-template-columns:minmax(0,1fr) auto!important;height:44px!important;padding:0 14px!important}
  .literal-title{justify-self:end!important}
  .literal-body{grid-template-columns:1fr!important;min-height:320px!important}
  .literal-canvas{padding:22px!important}
  .literal-paper{min-height:270px!important;padding:42px 34px!important}
}
@media (max-width:640px){
  .literal-brand strong{max-width:120px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .literal-paper{padding:36px 24px!important}
}


/* ── HERO LITERAL EXPORT MOCKUP VISIBILITY FIX ─────────────────────
   Earlier hero iterations added restrictive child selectors. The current
   hero visual is .hero-literal-app, so explicitly allow it and suppress
   only the older screenshot/gallery/mockup variants.
------------------------------------------------------------------- */
.hero-right {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  line-height: normal !important;
  font-size: inherit !important;
}

.hero-right > .hero-literal-app,
.hero-literal-app {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.hero-literal-app * {
  visibility: visible !important;
  opacity: 1 !important;
}

.hero-right > *:not(.hero-literal-app) {
  display: none !important;
}

.hero-product-mockup,
.hero-product-mockup--app,
.hero-screenshot,
.hero-screenshot-shell,
.hero-gallery,
.hero-gallery--single,
.hero-gallery-main,
.hero-gallery-chrome,
.hero-gallery-thumbs,
.hero-thumb,
.hero-gallery-image,
[data-hero-carousel],
[data-hero-slide],
[data-hero-thumb] {
  display: none !important;
}

.hero-literal-app .literal-topbar {
  display: grid !important;
}

.hero-literal-app .literal-toolbar,
.hero-literal-app .literal-brand,
.hero-literal-app .literal-tools,
.hero-literal-app .literal-tabs span,
.hero-literal-app .literal-export-row,
.hero-literal-app .literal-sidebar {
  display: flex !important;
}

.hero-literal-app .literal-body,
.hero-literal-app .literal-sidebar-head,
.hero-literal-app .literal-tabs,
.hero-literal-app .literal-card header {
  display: grid !important;
}

.hero-literal-app .literal-canvas {
  display: flex !important;
}

.hero-literal-app .literal-paper,
.hero-literal-app .literal-card,
.hero-literal-app .literal-line,
.hero-literal-app .literal-callout,
.hero-literal-app .mock-divider,
.hero-literal-app svg,
.hero-literal-app button {
  display: block !important;
}

.hero-literal-app .mock-select {
  display: inline-flex !important;
}

@media (max-width: 899px) {
  .hero-literal-app .literal-tools,
  .hero-literal-app .literal-toolbar,
  .hero-literal-app .literal-sidebar {
    display: none !important;
  }

  .hero-literal-app .literal-body {
    display: grid !important;
  }

  .hero-literal-app .literal-canvas {
    display: flex !important;
  }
}


/* ── HERO LITERAL MOCKUP WINDOW + EXPORT PANEL TUNE ───────────────
   Add a single neutral window shell around the app preview and make the
   Export sidebar controls closer to the actual app scale and spacing.
------------------------------------------------------------------- */
.hero-right > .hero-window-shell,
.hero-window-shell,
.hero-window-shell * {
  visibility: visible !important;
  opacity: 1 !important;
}

.hero-right > .hero-window-shell {
  display: block !important;
}

.hero-right > *:not(.hero-window-shell) {
  display: none !important;
}

.hero-window-shell {
  width: min(100%, 930px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.98) !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}

.hero-window-bar {
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 16px !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--app-topbar-border,#E4E0D8) !important;
}

.hero-window-bar span {
  width: 8px !important;
  height: 8px !important;
  display: block !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--text-mute) 36%, transparent) !important;
}

.hero-window-shell .hero-literal-app {
  width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Reset legacy direct-child visibility from previous passes. */
.hero-right > .hero-literal-app {
  display: none !important;
}

/* Smaller, more literal app scale inside the window. */
.literal-topbar {
  height: 46px !important;
}

.literal-toolbar {
  height: 46px !important;
  gap: 12px !important;
}

.literal-body {
  grid-template-columns: minmax(0,1fr) 352px !important;
  min-height: 404px !important;
}

.literal-canvas {
  padding: 26px 38px 38px !important;
}

.literal-paper {
  width: min(100%, 570px) !important;
  min-height: 318px !important;
  padding: 64px 72px !important;
}

.literal-sidebar {
  gap: 13px !important;
  padding: 16px !important;
}

.literal-sidebar-head {
  height: 24px !important;
}

.literal-sidebar-head strong {
  font-size: 17px !important;
}

.literal-tabs span {
  height: 38px !important;
  font-size: 12px !important;
}

/* Export rows: match the app’s clear label-left/action-right layout. */
.literal-card {
  padding: 15px 16px !important;
}

.literal-card header {
  grid-template-columns: minmax(0,1fr) auto auto !important;
  gap: 9px !important;
  margin-bottom: 10px !important;
}

.literal-card header strong {
  font-size: 14px !important;
}

.literal-card header button {
  height: 30px !important;
  min-width: 86px !important;
  white-space: nowrap !important;
}

.literal-export-row {
  min-height: 50px !important;
  grid-template-columns: minmax(0,1fr) 126px !important;
  gap: 18px !important;
}

.literal-export-row strong {
  min-width: 0 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

.literal-export-row button {
  width: 126px !important;
  height: 36px !important;
  justify-self: end !important;
  padding-inline: 12px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.literal-publish .literal-export-row {
  grid-template-columns: minmax(0,1fr) 126px !important;
}

/* Prevent any generic button CSS from distorting the mockup controls. */
.hero-window-shell button {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

@media (min-width:900px) and (max-height:860px) {
  .hero-window-shell {
    width: min(100%, 850px) !important;
  }

  .literal-body {
    grid-template-columns: minmax(0,1fr) 330px !important;
    min-height: 370px !important;
  }

  .literal-paper {
    min-height: 285px !important;
    padding: 52px 64px !important;
  }

  .literal-publish {
    display: none !important;
  }
}

@media (max-width:899px) {
  .hero-window-shell {
    width: 100% !important;
    border-radius: 14px !important;
  }

  .hero-window-bar {
    height: 26px !important;
    padding-inline: 13px !important;
  }
}


/* ── HERO WINDOW FINAL REFINEMENTS ────────────────────────────────
   Narrower sidebar, correct app sidebar background, right-aligned export
   actions, and a fuller writing-paper example using real prose.
------------------------------------------------------------------- */
.literal-body {
  grid-template-columns: minmax(0, 1fr) 312px !important;
  min-height: 430px !important;
}

.literal-sidebar {
  background: #F5F5F5 !important;
  width: 312px !important;
}

.literal-canvas {
  padding: 24px 32px 32px !important;
}

.literal-paper {
  width: min(100%, 640px) !important;
  min-height: 382px !important;
  padding: 58px 70px 68px !important;
}

.literal-book-part {
  margin: 0 0 8px !important;
  font-family: var(--font-body, var(--font-ui)) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: .13em !important;
  font-weight: 750 !important;
  color: var(--text-mute) !important;
  text-transform: uppercase !important;
}

.literal-paper h3 {
  margin: 0 0 18px !important;
  font-family: var(--font-display) !important;
  font-size: 30px !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  color: var(--text) !important;
}

.literal-prose {
  max-width: 42rem !important;
  margin: 0 0 13px !important;
  font-family: var(--font-display) !important;
  font-size: 14.2px !important;
  line-height: 1.58 !important;
  letter-spacing: -.004em !important;
  color: color-mix(in srgb, var(--text) 88%, var(--text-sec)) !important;
}

.literal-export-row {
  grid-template-columns: minmax(0, 1fr) 120px !important;
  gap: 16px !important;
  align-items: center !important;
}

.literal-export-row button {
  width: 120px !important;
  justify-self: end !important;
  margin-left: auto !important;
}

.literal-card header {
  grid-template-columns: minmax(0, 1fr) auto auto !important;
}

.literal-card header button {
  justify-self: end !important;
}

.literal-publish .literal-export-row {
  grid-template-columns: minmax(0, 1fr) 120px !important;
}

@media (min-width:900px) and (max-height:860px) {
  .literal-body {
    grid-template-columns: minmax(0, 1fr) 292px !important;
    min-height: 388px !important;
  }

  .literal-sidebar {
    width: 292px !important;
  }

  .literal-paper {
    width: min(100%, 600px) !important;
    min-height: 330px !important;
    padding: 46px 62px 54px !important;
  }

  .literal-paper h3 {
    font-size: 28px !important;
    margin-bottom: 14px !important;
  }

  .literal-prose {
    font-size: 13.2px !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
  }

  .literal-export-row {
    grid-template-columns: minmax(0, 1fr) 108px !important;
  }

  .literal-export-row button {
    width: 108px !important;
  }
}

@media (max-width:899px) {
  .literal-sidebar {
    width: auto !important;
  }

  .literal-paper {
    min-height: 300px !important;
  }

  .literal-prose {
    font-size: 13.5px !important;
  }
}


/* ── HERO TABLET DEVICE FRAME + LOAD FIT ──────────────────────────
   Replace the browser-window feel with a tablet-style product frame.
   Reduce the visual slightly so the primary CTAs are visible sooner.
------------------------------------------------------------------- */
.hero-window-bar {
  display: none !important;
}

.hero-window-shell {
  width: min(100%, 820px) !important;
  max-width: min(820px, 58vw) !important;
  padding: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.98) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.72)) border-box !important;
  box-shadow: none !important;
  position: relative !important;
}

.hero-window-shell::before {
  content: "" !important;
  position: absolute !important;
  top: 7px !important;
  left: 50% !important;
  width: 44px !important;
  height: 3px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: rgba(26, 25, 23, 0.10) !important;
  pointer-events: none !important;
}

.hero-window-shell .hero-literal-app {
  border: 1px solid var(--app-topbar-border, #E4E0D8) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
}

@media (min-width: 900px) {
  .hero {
    padding-top: clamp(14px, 2vw, 30px) !important;
    padding-bottom: clamp(28px, 3.4vw, 48px) !important;
    row-gap: clamp(16px, 2vw, 26px) !important;
  }

  .hero-right {
    max-width: min(820px, 58vw) !important;
  }

  .hero-copy {
    max-width: 900px !important;
  }

  .hero-headline {
    font-size: clamp(40px, 4.2vw, 58px) !important;
    margin-bottom: 16px !important;
  }

  .hero-body {
    gap: 10px !important;
  }

  .hero-actions {
    margin-top: 12px !important;
  }

  .hero-window-shell {
    max-width: min(820px, 58vw) !important;
  }

  .literal-topbar {
    height: 42px !important;
  }

  .literal-toolbar {
    height: 42px !important;
  }

  .literal-body {
    min-height: 386px !important;
    grid-template-columns: minmax(0, 1fr) 292px !important;
  }

  .literal-sidebar {
    width: 292px !important;
    padding: 14px !important;
    gap: 12px !important;
  }

  .literal-canvas {
    padding: 22px 28px 30px !important;
  }

  .literal-paper {
    width: min(100%, 610px) !important;
    min-height: 350px !important;
    padding: 48px 58px 56px !important;
  }

  .literal-prose {
    font-size: 13.1px !important;
    line-height: 1.48 !important;
    margin-bottom: 10px !important;
  }

  .literal-paper h3 {
    font-size: 28px !important;
    margin-bottom: 14px !important;
  }

  .literal-export-row {
    min-height: 44px !important;
    grid-template-columns: minmax(0, 1fr) 108px !important;
  }

  .literal-export-row button {
    width: 108px !important;
    height: 34px !important;
  }

  .literal-card {
    padding: 13px 14px !important;
  }

  .literal-publish {
    display: none !important;
  }
}

@media (min-width: 900px) and (max-height: 860px) {
  .hero {
    padding-top: 12px !important;
    padding-bottom: 28px !important;
    row-gap: 16px !important;
  }

  .hero-window-shell,
  .hero-right {
    max-width: min(760px, 55vw) !important;
  }

  .hero-window-shell {
    padding: 10px !important;
    border-radius: 24px !important;
  }

  .literal-topbar,
  .literal-toolbar {
    height: 38px !important;
  }

  .literal-body {
    min-height: 328px !important;
    grid-template-columns: minmax(0, 1fr) 278px !important;
  }

  .literal-sidebar {
    width: 278px !important;
  }

  .literal-paper {
    min-height: 300px !important;
    padding: 38px 52px 44px !important;
  }

  .literal-prose {
    font-size: 12.2px !important;
    line-height: 1.42 !important;
    margin-bottom: 8px !important;
  }

  .literal-paper h3 {
    font-size: 25px !important;
    margin-bottom: 12px !important;
  }

  .literal-book-part {
    margin-bottom: 7px !important;
  }

  .literal-download .literal-export-row:nth-of-type(n+3) {
    display: none !important;
  }

  .hero-headline {
    font-size: clamp(36px, 3.6vw, 50px) !important;
    margin-bottom: 12px !important;
  }

  .hero-body .hero-subheadline {
    font-size: clamp(16px, 1.22vw, 19px) !important;
    line-height: 1.42 !important;
  }

  .hero-body .hero-subheadline + p {
    font-size: 13.5px !important;
  }

  .hero-actions {
    margin-top: 10px !important;
  }
}

@media (max-width: 899px) {
  .hero-window-shell {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px !important;
    border-radius: 20px !important;
  }

  .hero-window-shell::before {
    width: 34px !important;
    top: 5px !important;
  }

  .hero-window-shell .hero-literal-app {
    border-radius: 14px !important;
  }
}


/* ── HERO FINAL POLISH PASS ───────────────────────────────────────
   Reduce visual demand, make the device frame quieter, simplify the
   export panel, and let the CTA breathe on laptop screens.
------------------------------------------------------------------- */

/* Subtler tablet/device treatment */
.hero-window-shell {
  width: min(100%, 780px) !important;
  max-width: min(780px, 54vw) !important;
  padding: 8px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}

.hero-window-shell::before {
  display: none !important;
  content: none !important;
}

.hero-window-shell .hero-literal-app {
  border-radius: 15px !important;
  border: 1px solid var(--app-topbar-border, #E4E0D8) !important;
}

/* Overall hero fit */
@media (min-width: 900px) {
  .hero {
    padding-top: clamp(10px, 1.6vw, 24px) !important;
    padding-bottom: clamp(24px, 3vw, 42px) !important;
    row-gap: clamp(12px, 1.6vw, 22px) !important;
  }

  .hero-right {
    max-width: min(780px, 54vw) !important;
  }

  .hero-headline {
    font-size: clamp(38px, 3.75vw, 52px) !important;
    line-height: 1.02 !important;
    margin-bottom: 14px !important;
    max-width: 18ch !important;
    text-wrap: balance !important;
  }

  .hero-body {
    gap: 9px !important;
  }

  .hero-body .hero-subheadline {
    font-size: clamp(17px, 1.24vw, 20px) !important;
    line-height: 1.45 !important;
    max-width: 64ch !important;
  }

  .hero-body .hero-subheadline + p {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
  }

  .hero-actions {
    margin-top: 10px !important;
  }
}

/* App mockup scale and precision */
@media (min-width: 900px) {
  .literal-topbar,
  .literal-toolbar {
    height: 40px !important;
  }

  .literal-brand strong {
    font-size: 14px !important;
  }

  .literal-brand em {
    font-size: 11.5px !important;
  }

  .literal-title {
    font-size: 13px !important;
  }

  .literal-tools span {
    font-size: 10.5px !important;
  }

  .literal-toolbar {
    gap: 11px !important;
  }

  .literal-toolbar svg {
    width: 15px !important;
    height: 15px !important;
  }

  .mock-select {
    min-width: 106px !important;
    font-size: 12px !important;
  }

  .literal-body {
    grid-template-columns: minmax(0, 1fr) 270px !important;
    min-height: 350px !important;
  }

  .literal-sidebar {
    width: 270px !important;
    padding: 13px !important;
    gap: 11px !important;
    background: #F5F5F5 !important;
  }

  .literal-sidebar-head {
    height: 22px !important;
  }

  .literal-sidebar-head strong {
    font-size: 16px !important;
  }

  .literal-tabs span {
    height: 34px !important;
    font-size: 11.5px !important;
  }

  .literal-canvas {
    padding: 20px 26px 28px !important;
  }

  .literal-paper {
    width: min(100%, 570px) !important;
    min-height: 315px !important;
    padding: 46px 54px 58px !important;
  }

  .literal-book-part {
    font-size: 9.5px !important;
    margin-bottom: 7px !important;
  }

  .literal-paper h3 {
    font-size: 26px !important;
    margin-bottom: 13px !important;
  }

  .literal-prose {
    font-size: 12.6px !important;
    line-height: 1.48 !important;
    margin-bottom: 10px !important;
  }
}

/* Simplify sidebar: one focused export card with a publish row. */
.literal-publish {
  display: none !important;
}

.literal-download header {
  margin-bottom: 8px !important;
}

.literal-download .literal-export-row {
  min-height: 42px !important;
  grid-template-columns: minmax(0, 1fr) 104px !important;
  gap: 14px !important;
}

.literal-download .literal-export-row button {
  width: 104px !important;
  height: 32px !important;
  justify-self: end !important;
  margin-left: auto !important;
  font-size: 12px !important;
}

.literal-download .literal-export-row:nth-of-type(4)::before {
  content: "Publish" !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

.literal-download .literal-export-row:nth-of-type(4) strong {
  display: none !important;
}

.literal-download .literal-export-row:nth-of-type(4) button {
  font-size: 0 !important;
}

.literal-download .literal-export-row:nth-of-type(4) button::after {
  content: "Connect" !important;
  font-size: 12px !important;
}

/* Hide excess export rows if any are introduced later. */
.literal-download .literal-export-row:nth-of-type(n+5) {
  display: none !important;
}

.literal-card {
  padding: 13px 14px !important;
}

.literal-card header strong {
  font-size: 13.5px !important;
}

.literal-card header span {
  font-size: 11.5px !important;
}

.literal-card header button {
  min-width: 78px !important;
  height: 28px !important;
  font-size: 11.5px !important;
}

@media (min-width: 900px) and (max-height: 860px) {
  .hero {
    padding-top: 8px !important;
    padding-bottom: 24px !important;
    row-gap: 12px !important;
  }

  .hero-window-shell,
  .hero-right {
    max-width: min(720px, 52vw) !important;
  }

  .hero-window-shell {
    padding: 7px !important;
    border-radius: 20px !important;
  }

  .literal-topbar,
  .literal-toolbar {
    height: 36px !important;
  }

  .literal-body {
    grid-template-columns: minmax(0, 1fr) 252px !important;
    min-height: 300px !important;
  }

  .literal-sidebar {
    width: 252px !important;
    padding: 11px !important;
    gap: 9px !important;
  }

  .literal-tabs span {
    height: 30px !important;
    font-size: 11px !important;
  }

  .literal-canvas {
    padding: 18px 22px 24px !important;
  }

  .literal-paper {
    min-height: 268px !important;
    padding: 36px 46px 42px !important;
  }

  .literal-paper h3 {
    font-size: 23px !important;
    margin-bottom: 10px !important;
  }

  .literal-prose {
    font-size: 11.4px !important;
    line-height: 1.42 !important;
    margin-bottom: 8px !important;
  }

  .literal-download .literal-export-row {
    min-height: 36px !important;
    grid-template-columns: minmax(0, 1fr) 92px !important;
  }

  .literal-download .literal-export-row button {
    width: 92px !important;
    height: 30px !important;
    font-size: 11.5px !important;
  }

  .hero-headline {
    font-size: clamp(34px, 3.35vw, 46px) !important;
    margin-bottom: 10px !important;
  }

  .hero-body .hero-subheadline {
    font-size: clamp(15.5px, 1.12vw, 18px) !important;
    line-height: 1.38 !important;
  }

  .hero-actions {
    margin-top: 8px !important;
  }
}

@media (max-width: 899px) {
  .hero-window-shell {
    padding: 7px !important;
    border-radius: 18px !important;
  }
}


/* ── HERO MOCKUP SCALE + HIERARCHY TUNE ───────────────────────────
   Darker tablet shell, fuller paper, no topbar title, consistent icon
   scale/spacing, and smaller sidebar controls.
------------------------------------------------------------------- */

/* Tablet shell: dark grey, like the neutral/free plan card tone. */
.hero-window-shell {
  background: #2F2F2D !important;
  border-color: rgba(26, 25, 23, 0.22) !important;
  padding: 9px !important;
}

.hero-window-shell .hero-literal-app {
  background: #FFFFFF !important;
  border-color: var(--app-topbar-border, #E4E0D8) !important;
}

/* Remove visual space taken by the old centered title. */
.literal-title {
  display: block !important;
  width: 1px !important;
  min-width: 1px !important;
  overflow: hidden !important;
  color: transparent !important;
}

/* Consistent icon scale and spacing across topbar and toolbar. */
.literal-tools,
.literal-toolbar {
  gap: 16px !important;
}

.literal-tools svg,
.literal-toolbar svg,
.literal-sidebar-head svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  stroke-width: 2 !important;
}

.literal-tools svg:first-of-type {
  padding: 7px !important;
  border-radius: 7px !important;
}

.literal-tools {
  gap: 16px !important;
}

.literal-toolbar {
  gap: 16px !important;
}

.mock-divider {
  margin-inline: 1px !important;
}

/* Sidebar header icons should not dominate. */
.literal-sidebar-head {
  grid-template-columns: 16px 1fr 16px !important;
  gap: 9px !important;
}

.literal-sidebar-head strong {
  font-size: 15.5px !important;
}

.literal-sidebar-head svg,
.literal-sidebar-head svg:last-child {
  width: 16px !important;
  height: 16px !important;
}

/* Paper should keep a full document surface even with less text. */
.literal-paper {
  min-height: 342px !important;
  display: block !important;
  padding-bottom: 82px !important;
}

@media (min-width: 900px) {
  .literal-paper {
    min-height: 342px !important;
    padding-bottom: 82px !important;
  }
}

/* Remove Customise button and "shown" text from the export card header. */
.literal-card header span,
.literal-card header button {
  display: none !important;
}

.literal-card header {
  grid-template-columns: 1fr !important;
  margin-bottom: 8px !important;
}

/* Smaller, calmer sidebar controls. */
.literal-tabs span {
  height: 30px !important;
  border-radius: 7px !important;
  font-size: 10.8px !important;
  font-weight: 700 !important;
}

.literal-download .literal-export-row {
  min-height: 38px !important;
  grid-template-columns: minmax(0, 1fr) 92px !important;
  gap: 12px !important;
}

.literal-download .literal-export-row strong,
.literal-download .literal-export-row:nth-of-type(4)::before {
  font-size: 12.2px !important;
}

.literal-download .literal-export-row button {
  width: 92px !important;
  height: 29px !important;
  border-radius: 6px !important;
  font-size: 11.2px !important;
  font-weight: 600 !important;
  padding-inline: 10px !important;
}

.literal-download .literal-export-row:nth-of-type(4) button::after {
  font-size: 11.2px !important;
}

/* Slightly tighter card now that header chrome is removed. */
.literal-card {
  padding: 12px 13px !important;
}

.literal-card header strong {
  font-size: 13px !important;
}

/* Keep the app balanced after removing top title. */
.literal-topbar {
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
}

/* Laptop-height refinements */
@media (min-width: 900px) and (max-height: 860px) {
  .hero-window-shell {
    padding: 8px !important;
  }

  .literal-tools,
  .literal-toolbar {
    gap: 14px !important;
  }

  .literal-tools svg,
  .literal-toolbar svg,
  .literal-sidebar-head svg {
    width: 15px !important;
    height: 15px !important;
    flex-basis: 15px !important;
  }

  .literal-paper {
    min-height: 286px !important;
    padding-bottom: 58px !important;
  }

  .literal-tabs span {
    height: 28px !important;
    font-size: 10.5px !important;
  }

  .literal-download .literal-export-row {
    min-height: 34px !important;
    grid-template-columns: minmax(0, 1fr) 86px !important;
  }

  .literal-download .literal-export-row button {
    width: 86px !important;
    height: 28px !important;
    font-size: 10.8px !important;
  }

  .literal-download .literal-export-row:nth-of-type(4) button::after {
    font-size: 10.8px !important;
  }
}

@media (max-width: 899px) {
  .hero-window-shell {
    background: #2F2F2D !important;
  }
}


/* ── HERO TOPBAR TITLE HARD REMOVE ──────────────────────────────── */
.literal-topbar .literal-title {
  display: block !important;
  width: 1px !important;
  min-width: 1px !important;
  max-width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  color: transparent !important;
  pointer-events: none !important;
}


/* ── HERO SCALE + TOOLBAR SEPARATOR PASS ──────────────────────────
   Rebalance the mockup scale, reduce bezel dominance, and make toolbar
   groups read closer to the actual app.
------------------------------------------------------------------- */
.hero-window-shell {
  width: min(100%, 760px) !important;
  max-width: min(760px, 52vw) !important;
  padding: 6px !important;
  border-radius: 18px !important;
  background: #30302E !important;
}

.hero-window-shell .hero-literal-app {
  border-radius: 12px !important;
}

@media (min-width: 900px) {
  .hero-right {
    max-width: min(760px, 52vw) !important;
  }

  .literal-topbar {
    height: 38px !important;
    padding-inline: 16px !important;
  }

  .literal-brand strong {
    font-size: 13px !important;
    letter-spacing: -0.02em !important;
  }

  .literal-brand em {
    font-size: 10.8px !important;
  }

  .literal-brand {
    gap: 7px !important;
  }

  .literal-tools {
    gap: 13px !important;
  }

  .literal-tools span {
    font-size: 10px !important;
  }

  .literal-tools svg,
  .literal-toolbar svg,
  .literal-sidebar-head svg {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
  }

  .literal-tools svg:first-of-type {
    padding: 6px !important;
    border-radius: 7px !important;
  }

  .literal-toolbar {
    height: 38px !important;
    gap: 9px !important;
    padding-inline: 14px !important;
  }

  .mock-divider {
    width: 1px !important;
    height: 16px !important;
    margin-inline: 5px !important;
    background: color-mix(in srgb, var(--app-topbar-border, #E4E0D8) 92%, transparent) !important;
    flex: 0 0 1px !important;
  }

  .mock-select {
    min-width: 86px !important;
    width: 86px !important;
    font-size: 11.4px !important;
    padding-inline: 0 !important;
  }

  .mock-select::after {
    margin-left: 8px !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  .literal-body {
    grid-template-columns: minmax(0, 1fr) 258px !important;
    min-height: 326px !important;
  }

  .literal-canvas {
    padding: 18px 22px 24px !important;
  }

  .literal-paper {
    width: min(100%, 548px) !important;
    min-height: 294px !important;
    padding: 38px 48px 56px !important;
  }

  .literal-book-part {
    font-size: 8.8px !important;
    margin-bottom: 6px !important;
  }

  .literal-paper h3 {
    font-size: 23.5px !important;
    margin-bottom: 11px !important;
  }

  .literal-prose {
    font-size: 11.4px !important;
    line-height: 1.43 !important;
    margin-bottom: 8px !important;
  }

  .literal-sidebar {
    width: 258px !important;
    padding: 12px !important;
    gap: 10px !important;
  }

  .literal-sidebar-head {
    height: 20px !important;
    grid-template-columns: 14px 1fr 14px !important;
    gap: 8px !important;
  }

  .literal-sidebar-head strong {
    font-size: 14px !important;
  }

  .literal-tabs {
    gap: 7px !important;
  }

  .literal-tabs span {
    height: 28px !important;
    border-radius: 7px !important;
    font-size: 10.2px !important;
  }

  .literal-card {
    padding: 11px 12px !important;
    border-radius: 13px !important;
  }

  .literal-card header strong {
    font-size: 12.4px !important;
  }

  .literal-download .literal-export-row {
    min-height: 34px !important;
    grid-template-columns: minmax(0, 1fr) 84px !important;
    gap: 10px !important;
  }

  .literal-download .literal-export-row strong,
  .literal-download .literal-export-row:nth-of-type(4)::before {
    font-size: 11.3px !important;
  }

  .literal-download .literal-export-row button {
    width: 84px !important;
    height: 27px !important;
    font-size: 10.4px !important;
    border-radius: 6px !important;
  }

  .literal-download .literal-export-row:nth-of-type(4) button::after {
    font-size: 10.4px !important;
  }
}

/* Laptop-height: preserve proportions rather than crushing only one area. */
@media (min-width: 900px) and (max-height: 860px) {
  .hero-window-shell,
  .hero-right {
    max-width: min(700px, 50vw) !important;
  }

  .hero-window-shell {
    padding: 6px !important;
    border-radius: 17px !important;
  }

  .literal-topbar,
  .literal-toolbar {
    height: 35px !important;
  }

  .literal-toolbar {
    gap: 8px !important;
  }

  .mock-divider {
    margin-inline: 4px !important;
    height: 15px !important;
  }

  .mock-select {
    min-width: 78px !important;
    width: 78px !important;
    font-size: 10.8px !important;
  }

  .literal-body {
    grid-template-columns: minmax(0, 1fr) 238px !important;
    min-height: 286px !important;
  }

  .literal-sidebar {
    width: 238px !important;
  }

  .literal-paper {
    min-height: 258px !important;
    padding: 30px 42px 42px !important;
  }

  .literal-paper h3 {
    font-size: 21px !important;
  }

  .literal-prose {
    font-size: 10.6px !important;
    line-height: 1.38 !important;
  }

  .literal-download .literal-export-row {
    min-height: 31px !important;
    grid-template-columns: minmax(0, 1fr) 78px !important;
  }

  .literal-download .literal-export-row button {
    width: 78px !important;
    height: 25px !important;
    font-size: 9.8px !important;
  }
}


/* ── HERO PUBLISH SCALE + PAPER HEIGHT + SOFTER BEZEL ─────────────
   Match publish controls to download controls, let the paper extend
   lower in the canvas, and use the softer plan-card grey for the device.
------------------------------------------------------------------- */

/* Softer grey device frame instead of black bezel */
.hero-window-shell {
  background: #E9E9E6 !important;
  border-color: rgba(26, 25, 23, 0.08) !important;
}

/* Make the paper feel like a full page surface rather than a short card */
@media (min-width: 900px) {
  .literal-canvas {
    align-items: stretch !important;
  }

  .literal-paper {
    min-height: 340px !important;
    height: auto !important;
    padding-bottom: 88px !important;
  }

  .literal-body {
    min-height: 356px !important;
  }
}

/* Publish rows should match download row/button scale */
.literal-publish {
  display: block !important;
}

.literal-publish .literal-export-row {
  min-height: 34px !important;
  grid-template-columns: minmax(0, 1fr) 84px !important;
  gap: 10px !important;
}

.literal-publish .literal-export-row strong {
  font-size: 11.3px !important;
}

.literal-publish .literal-export-row button {
  width: 84px !important;
  height: 27px !important;
  justify-self: end !important;
  margin-left: auto !important;
  border-radius: 6px !important;
  font-size: 10.4px !important;
  font-weight: 600 !important;
  padding-inline: 10px !important;
}

/* Keep both sidebar cards visually consistent */
.literal-publish,
.literal-download {
  padding: 11px 12px !important;
  border-radius: 13px !important;
}

.literal-publish header,
.literal-download header {
  margin-bottom: 8px !important;
}

.literal-publish header strong,
.literal-download header strong {
  font-size: 12.4px !important;
}

/* The publish card should not feel heavier than the download card */
.literal-publish .literal-export-row:first-of-type {
  border-top: 0 !important;
}

/* Laptop-height keeps the same scale relationship */
@media (min-width: 900px) and (max-height: 860px) {
  .literal-body {
    min-height: 300px !important;
  }

  .literal-paper {
    min-height: 276px !important;
    padding-bottom: 56px !important;
  }

  .literal-publish .literal-export-row {
    min-height: 31px !important;
    grid-template-columns: minmax(0, 1fr) 78px !important;
  }

  .literal-publish .literal-export-row button {
    width: 78px !important;
    height: 25px !important;
    font-size: 9.8px !important;
  }

  .literal-publish .literal-export-row strong {
    font-size: 10.8px !important;
  }
}


/* ── HERO MOCKUP WRITING TYPOGRAPHY ───────────────────────────────
   Make the document surface closer to the app: Newsreader headings,
   Inter body copy, and a more generous reading line height.
------------------------------------------------------------------- */
.literal-paper h3 {
  font-family: "Newsreader", var(--font-display), Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.04 !important;
}

.literal-book-part {
  font-family: "Inter", var(--font-body, var(--font-ui)), system-ui, sans-serif !important;
  line-height: 1.2 !important;
}

.literal-prose {
  font-family: "Inter", var(--font-body, var(--font-ui)), system-ui, sans-serif !important;
  font-weight: 450 !important;
  line-height: 1.68 !important;
  letter-spacing: -0.012em !important;
  color: color-mix(in srgb, var(--text) 86%, var(--text-sec)) !important;
  max-width: 39rem !important;
}

@media (min-width: 900px) {
  .literal-paper h3 {
    font-size: 24px !important;
    margin-bottom: 14px !important;
  }

  .literal-prose {
    font-size: 11.6px !important;
    line-height: 1.68 !important;
    margin-bottom: 11px !important;
  }

  .literal-paper {
    padding-top: 40px !important;
  }
}

@media (min-width: 900px) and (max-height: 860px) {
  .literal-paper h3 {
    font-size: 21.5px !important;
    margin-bottom: 11px !important;
  }

  .literal-prose {
    font-size: 10.7px !important;
    line-height: 1.58 !important;
    margin-bottom: 8px !important;
  }
}


/* ── HERO SECTION PADDING RESTORE ─────────────────────────────────
   The mockup is now compact enough to return the hero to the same
   generous section rhythm used elsewhere on the page.
------------------------------------------------------------------- */
@media (min-width: 900px) {
  .hero {
    padding-top: clamp(72px, 7.5vw, 112px) !important;
    padding-bottom: clamp(72px, 7.5vw, 112px) !important;
    row-gap: clamp(28px, 3vw, 44px) !important;
  }
}

@media (min-width: 900px) and (max-height: 860px) {
  .hero {
    padding-top: 58px !important;
    padding-bottom: 64px !important;
    row-gap: 28px !important;
  }
}

@media (max-width: 899px) {
  .hero {
    padding-top: 56px !important;
    padding-bottom: 64px !important;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-top: 44px !important;
    padding-bottom: 56px !important;
  }
}


/* ── HERO MOCKUP ASPECT RATIO IMPROVEMENT ─────────────────────────
   With the restored section rhythm, the product portrait can be wider
   and more app-like. This gives the document canvas and export sidebar
   a more natural relationship instead of feeling compressed.
------------------------------------------------------------------- */
@media (min-width: 900px) {
  .hero-window-shell {
    width: min(100%, 920px) !important;
    max-width: min(920px, 68vw) !important;
    padding: 8px !important;
    border-radius: 22px !important;
  }

  .hero-right {
    max-width: min(920px, 68vw) !important;
  }

  .hero-window-shell .hero-literal-app {
    border-radius: 15px !important;
  }

  .literal-body {
    grid-template-columns: minmax(0, 1fr) 284px !important;
    min-height: 370px !important;
  }

  .literal-sidebar {
    width: 284px !important;
  }

  .literal-canvas {
    padding: 22px 30px 30px !important;
  }

  .literal-paper {
    width: min(100%, 650px) !important;
    min-height: 338px !important;
    padding: 46px 62px 72px !important;
  }

  .literal-prose {
    max-width: 42rem !important;
  }
}

/* Keep laptop-height screens from getting too tall while preserving width. */
@media (min-width: 900px) and (max-height: 860px) {
  .hero-window-shell,
  .hero-right {
    max-width: min(860px, 64vw) !important;
  }

  .literal-body {
    grid-template-columns: minmax(0, 1fr) 268px !important;
    min-height: 330px !important;
  }

  .literal-sidebar {
    width: 268px !important;
  }

  .literal-canvas {
    padding: 20px 26px 26px !important;
  }

  .literal-paper {
    width: min(100%, 610px) !important;
    min-height: 298px !important;
    padding: 38px 56px 56px !important;
  }
}

@media (max-width: 899px) {
  .hero-window-shell {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* ── HERO 4:3 TABLET RATIO PASS ───────────────────────────────────
   Make the product portrait taller, closer to an iPad Pro-style 4:3
   ratio, then condense the surrounding hero padding proportionally.
------------------------------------------------------------------- */
@media (min-width: 900px) {
  .hero {
    padding-top: clamp(46px, 5vw, 76px) !important;
    padding-bottom: clamp(46px, 5vw, 76px) !important;
    row-gap: clamp(22px, 2.5vw, 34px) !important;
  }

  .hero-window-shell {
    width: min(100%, 820px) !important;
    max-width: min(820px, 60vw) !important;
    padding: 8px !important;
    border-radius: 22px !important;
  }

  .hero-right {
    max-width: min(820px, 60vw) !important;
  }

  .hero-window-shell .hero-literal-app {
    border-radius: 15px !important;
  }

  .literal-body {
    grid-template-columns: minmax(0, 1fr) 278px !important;
    min-height: 470px !important;
  }

  .literal-sidebar {
    width: 278px !important;
  }

  .literal-canvas {
    padding: 26px 30px 34px !important;
    align-items: stretch !important;
  }

  .literal-paper {
    width: min(100%, 560px) !important;
    min-height: 430px !important;
    padding: 54px 58px 96px !important;
  }

  .literal-prose {
    max-width: 38rem !important;
  }

  .literal-card {
    padding: 12px 13px !important;
  }

  .literal-download .literal-export-row,
  .literal-publish .literal-export-row {
    min-height: 38px !important;
  }
}

/* Short laptop screens: keep the 4:3 feeling but reduce physical size. */
@media (min-width: 900px) and (max-height: 860px) {
  .hero {
    padding-top: 34px !important;
    padding-bottom: 42px !important;
    row-gap: 22px !important;
  }

  .hero-window-shell,
  .hero-right {
    max-width: min(760px, 56vw) !important;
  }

  .literal-body {
    grid-template-columns: minmax(0, 1fr) 260px !important;
    min-height: 405px !important;
  }

  .literal-sidebar {
    width: 260px !important;
  }

  .literal-canvas {
    padding: 22px 26px 30px !important;
  }

  .literal-paper {
    width: min(100%, 520px) !important;
    min-height: 365px !important;
    padding: 42px 50px 74px !important;
  }

  .literal-prose {
    font-size: 10.9px !important;
    line-height: 1.56 !important;
  }

  .hero-headline {
    margin-bottom: 12px !important;
  }

  .hero-actions {
    margin-top: 10px !important;
  }
}

@media (max-width: 899px) {
  .hero {
    padding-top: 44px !important;
    padding-bottom: 54px !important;
  }

  .literal-body {
    min-height: 390px !important;
  }

  .literal-paper {
    min-height: 340px !important;
  }
}


/* ── HERO PUBLISH OPTIONS + PADDING TUNE ──────────────────────────
   Add room for four publish options and reduce vertical padding
   slightly while preserving the taller tablet composition.
------------------------------------------------------------------- */
@media (min-width: 900px) {
  .hero {
    padding-top: clamp(34px, 4.1vw, 62px) !important;
    padding-bottom: clamp(34px, 4.1vw, 62px) !important;
    row-gap: clamp(18px, 2.1vw, 30px) !important;
  }

  .literal-publish .literal-export-row {
    min-height: 34px !important;
  }

  .literal-publish .literal-export-row button {
    height: 27px !important;
  }

  .literal-publish,
  .literal-download {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
  }
}

@media (min-width: 900px) and (max-height: 860px) {
  .hero {
    padding-top: 28px !important;
    padding-bottom: 34px !important;
    row-gap: 18px !important;
  }

  .literal-publish .literal-export-row {
    min-height: 29px !important;
  }

  .literal-publish .literal-export-row button {
    height: 24px !important;
  }

  .literal-publish,
  .literal-download {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

@media (max-width: 899px) {
  .hero {
    padding-top: 38px !important;
    padding-bottom: 48px !important;
  }
}


/* ── HERO TOOLBAR SEPARATOR + ICON ALIGNMENT FIX ──────────────────
   Add the missing group break between list controls and indent controls,
   and force every app-preview icon to share the same centred box model.
------------------------------------------------------------------- */
.literal-toolbar {
  align-items: center !important;
}

.literal-toolbar > *,
.literal-tools > *,
.literal-sidebar-head > * {
  align-self: center !important;
}

.literal-toolbar svg,
.literal-tools svg,
.literal-sidebar-head svg {
  display: block !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  vertical-align: middle !important;
  transform: translateY(0) !important;
}

.literal-toolbar svg {
  width: 14px !important;
  height: 14px !important;
}

.literal-tools svg,
.literal-sidebar-head svg {
  width: 14px !important;
  height: 14px !important;
}

/* Active topbar document icon has padding, so centre its visible glyph in a stable hitbox. */
.literal-tools svg:first-of-type {
  width: 14px !important;
  height: 14px !important;
  padding: 6px !important;
  box-sizing: content-box !important;
  display: block !important;
}

/* Paragraph select and separators should use the same vertical centreline as icons. */
.mock-select {
  display: inline-flex !important;
  align-items: center !important;
  height: 18px !important;
  line-height: 1 !important;
}

.mock-select::after {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  height: 1em !important;
}

.mock-divider {
  align-self: center !important;
  flex: 0 0 1px !important;
  height: 16px !important;
}

/* Make SVG strokes visually balanced in the tiny toolbar. */
.literal-toolbar svg path,
.literal-toolbar svg line,
.literal-toolbar svg polyline,
.literal-toolbar svg rect,
.literal-toolbar svg circle,
.literal-tools svg path,
.literal-tools svg line,
.literal-tools svg polyline,
.literal-tools svg rect,
.literal-tools svg circle,
.literal-sidebar-head svg path,
.literal-sidebar-head svg line,
.literal-sidebar-head svg polyline,
.literal-sidebar-head svg rect,
.literal-sidebar-head svg circle {
  vector-effect: non-scaling-stroke !important;
}

/* Keep toolbar text controls aligned with icons. */
.literal-toolbar .mock-select,
.literal-toolbar .mock-divider {
  position: relative !important;
  top: 0 !important;
}

@media (min-width: 900px) and (max-height: 860px) {
  .literal-toolbar svg,
  .literal-tools svg,
  .literal-sidebar-head svg {
    width: 13.5px !important;
    height: 13.5px !important;
  }

  .literal-tools svg:first-of-type {
    width: 13.5px !important;
    height: 13.5px !important;
    padding: 5.5px !important;
  }
}


/* ── HERO PAPER SURFACE APP MATCH ─────────────────────────────────
   Match the actual Compose page treatment more closely: a soft paper
   surface with outer page elevation instead of a flat pure-white card.
------------------------------------------------------------------- */
.literal-paper {
  background: #FAFAF8 !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow:
    0 1px 2px rgba(60,45,30,.04),
    0 12px 32px rgba(60,45,30,.06),
    0 0 0 1px rgba(60,45,30,.025) !important;
}

.literal-canvas {
  background: #F5F5F5 !important;
}

.literal-body {
  background: #F5F5F5 !important;
}

.literal-sidebar {
  background: #F5F5F5 !important;
}

/* Keep document text readable on the softer paper tone. */
.literal-prose {
  color: color-mix(in srgb, var(--text) 88%, var(--text-sec)) !important;
}

.literal-paper h3 {
  color: var(--text) !important;
}

.literal-book-part {
  color: color-mix(in srgb, var(--text-mute) 92%, var(--text)) !important;
}


/* ── HERO ICON REBALANCE ──────────────────────────────────────────
   The prior alignment pass made the icons feel too heavy and mechanical.
   Restore a lighter app-like rhythm while keeping group separators and
   vertical centering.
------------------------------------------------------------------- */
.literal-toolbar {
  gap: 11px !important;
  align-items: center !important;
  color: rgba(26, 25, 23, 0.68) !important;
}

.literal-tools {
  gap: 12px !important;
  align-items: center !important;
  color: rgba(26, 25, 23, 0.64) !important;
}

.literal-sidebar-head {
  align-items: center !important;
}

.literal-toolbar svg,
.literal-tools svg,
.literal-sidebar-head svg {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
  display: block !important;
  stroke-width: 1.75 !important;
  color: currentColor !important;
  transform: none !important;
  vertical-align: middle !important;
}

.literal-toolbar svg path,
.literal-toolbar svg line,
.literal-toolbar svg polyline,
.literal-toolbar svg rect,
.literal-toolbar svg circle,
.literal-tools svg path,
.literal-tools svg line,
.literal-tools svg polyline,
.literal-tools svg rect,
.literal-tools svg circle,
.literal-sidebar-head svg path,
.literal-sidebar-head svg line,
.literal-sidebar-head svg polyline,
.literal-sidebar-head svg rect,
.literal-sidebar-head svg circle {
  vector-effect: none !important;
}

/* Active topbar document icon should feel like the app button, not an oversized badge. */
.literal-tools svg:first-of-type {
  width: 15px !important;
  height: 15px !important;
  padding: 5px !important;
  border-radius: 7px !important;
  box-sizing: content-box !important;
  background: #EAF0FF !important;
  color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px rgba(48, 86, 232, 0.18) !important;
}

/* Separators: visible but quiet, matching actual toolbar grouping. */
.mock-divider {
  width: 1px !important;
  height: 16px !important;
  flex: 0 0 1px !important;
  margin-inline: 5px !important;
  align-self: center !important;
  background: color-mix(in srgb, var(--app-topbar-border, #E4E0D8) 80%, transparent) !important;
}

/* Paragraph selector: compact arrow, not detached. */
.mock-select {
  width: auto !important;
  min-width: 84px !important;
  max-width: 92px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  line-height: 1 !important;
  padding: 0 !important;
}

.mock-select::after {
  margin-left: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  font-size: 11px !important;
  transform: translateY(-1px) !important;
}

/* Sidebar header icons should match the topbar scale but stay quieter. */
.literal-sidebar-head {
  grid-template-columns: 15px 1fr 15px !important;
  gap: 8px !important;
}

.literal-sidebar-head svg {
  color: rgba(26, 25, 23, 0.70) !important;
}

.literal-sidebar-head svg:last-child {
  color: rgba(26, 25, 23, 0.58) !important;
}

/* Slightly reduce visual heaviness of toolbar text icons. */
.literal-toolbar svg[viewBox] {
  opacity: 0.92 !important;
}

@media (min-width: 900px) and (max-height: 860px) {
  .literal-toolbar {
    gap: 10px !important;
  }

  .literal-tools {
    gap: 11px !important;
  }

  .literal-toolbar svg,
  .literal-tools svg,
  .literal-sidebar-head svg {
    width: 14px !important;
    height: 14px !important;
    flex-basis: 14px !important;
  }

  .literal-tools svg:first-of-type {
    width: 14px !important;
    height: 14px !important;
    padding: 5px !important;
  }

  .mock-divider {
    margin-inline: 4px !important;
    height: 15px !important;
  }

  .mock-select {
    min-width: 78px !important;
    max-width: 86px !important;
    font-size: 10.8px !important;
  }
}


/* ── HERO SIDEBAR EXTENSION STRUCTURE FIX ─────────────────────────
   Match the actual app structure more closely: the Files sidebar is an
   extension to the right, while the app topbar and toolbar occupy only
   the main editor column. The sidebar's own header and tab rows sit on
   white and align with the app header rows.
------------------------------------------------------------------- */

.literal-topbar,
.literal-toolbar {
  width: calc(100% - 258px) !important;
  margin-right: 258px !important;
  box-sizing: border-box !important;
}

/* The right sidebar starts at the top of the app surface, not below toolbar. */
.literal-body {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 258px !important;
  min-height: 356px !important;
  background: #F5F5F5 !important;
}

.literal-sidebar {
  position: absolute !important;
  top: -76px !important; /* topbar + toolbar */
  right: 0 !important;
  bottom: 0 !important;
  width: 258px !important;
  min-height: calc(100% + 76px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  border-left: 1px solid var(--app-topbar-border, #E4E0D8) !important;
  background: #F5F5F5 !important;
  z-index: 2 !important;
}

.literal-sidebar-head {
  height: 38px !important;
  display: grid !important;
  grid-template-columns: 15px 1fr 15px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 14px !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--app-topbar-border, #E4E0D8) !important;
}

.literal-sidebar-head strong {
  font-size: 15px !important;
  font-weight: 700 !important;
}

.literal-tabs {
  height: 38px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 7px !important;
  align-items: center !important;
  padding: 0 12px !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--app-topbar-border, #E4E0D8) !important;
}

.literal-tabs span {
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 7px !important;
  font-size: 10.2px !important;
  font-weight: 700 !important;
}

.literal-sidebar .literal-card {
  margin: 12px 12px 0 !important;
}

.literal-sidebar .literal-card:first-of-type {
  margin-top: 12px !important;
}

/* Main canvas should now only occupy the editor column under the main toolbar. */
.literal-canvas {
  grid-column: 1 !important;
  padding: 18px 22px 24px !important;
  background: #F5F5F5 !important;
}

/* Remove the old body grid sidebar slot footprint; sidebar is absolute. */
.literal-body > .literal-sidebar {
  grid-column: auto !important;
}

.literal-paper {
  width: min(100%, 548px) !important;
}

/* Keep topbar right cluster visually aligned at end of editor column. */
.literal-tools {
  justify-self: end !important;
}

/* Tablet shell still wraps the whole app including sidebar extension. */
.hero-window-shell .hero-literal-app {
  position: relative !important;
  overflow: hidden !important;
}

/* Short laptop scale */
@media (min-width: 900px) and (max-height: 860px) {
  .literal-topbar,
  .literal-toolbar {
    width: calc(100% - 238px) !important;
    margin-right: 238px !important;
  }

  .literal-body {
    grid-template-columns: minmax(0, 1fr) 238px !important;
    min-height: 300px !important;
  }

  .literal-sidebar {
    top: -70px !important;
    width: 238px !important;
    min-height: calc(100% + 70px) !important;
  }

  .literal-sidebar-head,
  .literal-tabs {
    height: 35px !important;
  }

  .literal-sidebar-head {
    padding: 0 12px !important;
  }

  .literal-tabs {
    padding: 0 10px !important;
    gap: 6px !important;
  }

  .literal-tabs span {
    height: 26px !important;
    font-size: 10px !important;
  }

  .literal-sidebar .literal-card {
    margin: 10px 10px 0 !important;
  }
}

/* Mobile keeps the previous simplified no-sidebar preview. */
@media (max-width: 899px) {
  .literal-topbar,
  .literal-toolbar {
    width: 100% !important;
    margin-right: 0 !important;
  }

  .literal-sidebar {
    display: none !important;
  }

  .literal-body {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .literal-canvas {
    grid-column: 1 !important;
  }
}

/* Minimal hero toolbar patch: keep the original mockup design intact while removing
   copy/paste and the paragraph dropdown. On smaller screens, preserve the desktop
   mockup instead of switching to the simplified mobile crop. */
@media (max-width: 899px) {
  .hero-right {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .hero-window-shell {
    min-width: 760px !important;
    width: 760px !important;
    max-width: none !important;
  }

  .hero-literal-app {
    width: 100% !important;
    border-radius: 12px !important;
  }

  .literal-tools,
  .literal-toolbar,
  .literal-sidebar {
    display: flex !important;
  }

  .literal-sidebar {
    display: flex !important;
  }

  .literal-topbar {
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
    height: 46px !important;
    padding: 0 18px !important;
  }

  .literal-title {
    justify-self: center !important;
  }

  .literal-body {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 292px !important;
    min-height: 386px !important;
  }

  .literal-canvas {
    padding: 22px 28px 30px !important;
  }

  .literal-paper {
    min-height: 350px !important;
    padding: 48px 58px 56px !important;
  }
}

/* ======================================================================
   VERIFIED MOBILE/TABLET HERO IMAGE
   Desktop keeps the approved live code mockup. Mobile/tablet show an exact
   embedded snapshot of that approved desktop mockup, with real side gutters.
   The image is embedded directly in HTML to avoid asset path issues.
   ====================================================================== */
.hero-mobile-snapshot {
  display: none;
}

@media (max-width: 899px) {
  .hero {
    row-gap: 34px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .hero-right {
    order: -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .hero-right > .hero-window-shell,
  .hero-right > .hero-scale-frame,
  .hero-right > .hero-literal-app {
    display: none !important;
  }

  .hero-mobile-snapshot {
    display: block !important;
    width: 100% !important;
    max-width: 760px !important;
    height: auto !important;
    margin: 0 auto 20px !important;
    border-radius: 18px !important;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .hero-mobile-snapshot {
    width: calc(100% - 12px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 460px) {
  .hero {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .hero-mobile-snapshot {
    width: calc(100% - 8px) !important;
    border-radius: 16px !important;
  }
}

/* Visibility fix: older hero CSS hides any direct child that is not
   .hero-window-shell. This more-specific selector restores the mobile image. */
@media (min-width: 900px) {
  .hero-right > img.hero-mobile-snapshot {
    display: none !important;
  }
}

@media (max-width: 899px) {
  .hero-right > img.hero-mobile-snapshot {
    display: block !important;
    width: 100% !important;
    max-width: 760px !important;
    height: auto !important;
    margin: 0 auto 20px !important;
    border-radius: 18px !important;
  }

  .hero-right > .hero-window-shell,
  .hero-right > .hero-scale-frame,
  .hero-right > .hero-literal-app {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .hero-right > img.hero-mobile-snapshot {
    width: calc(100% - 12px) !important;
    max-width: none !important;
  }
}

@media (max-width: 460px) {
  .hero-right > img.hero-mobile-snapshot {
    width: calc(100% - 8px) !important;
    border-radius: 16px !important;
  }
}


/* Tablet/mobile snapshot already contains the app's real rounded corners.
   Remove the extra image clipping radius so the border shape matches exactly. */
@media (max-width: 899px) {
  .hero-mobile-snapshot,
  .hero-right > img.hero-mobile-snapshot {
    border-radius: 0 !important;
  }
}


/* ── ABOUT SECTION MOBILE ORDER ONLY ──────────────────────────────
   Keep the original mobile sizing/spacing, but place the founder block
   above the copy on phones.
------------------------------------------------------------------- */
@media (max-width: 640px) {
  .about-founder-aside {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .about-founder-copy {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
}

/* ── PASS 1: app-sidebar modal parity for install and policy popovers ──
   Emulates Compose's sidebar system: opaque #F5F5F5 shell, flat cards,
   compact section rhythm, and hotkeys-style row separators.
------------------------------------------------------------------- */
:root {
  --site-sidebar-bg: #F5F5F5;
  --site-sidebar-border: #E4E0D8;
  --site-sidebar-border-strong: #C2BDB5;
  --site-sidebar-card-bg: color-mix(in srgb, #FFFFFF 78%, var(--site-sidebar-bg));
  --site-sidebar-card-border: color-mix(in srgb, var(--site-sidebar-border) 84%, var(--site-sidebar-border-strong));
  --site-sidebar-card-radius: 14px;
  --site-sidebar-card-pad: 16px;
  --site-sidebar-section-gap: 16px;
  --site-sidebar-section-gap-tight: 12px;
  --site-sidebar-item-radius: 10px;
  --site-sidebar-row-separator: color-mix(in srgb, var(--site-sidebar-card-border) 72%, transparent);
}

body.modal-open {
  overflow: auto;
}

.modal-overlay.site-modal {
  width: min(500px, calc(100vw - 32px));
  height: min(78dvh, 720px);
}

.modal-overlay.site-modal.site-modal--install {
  width: min(620px, calc(100vw - 32px));
  height: min(86dvh, 780px);
}

.modal-overlay.site-modal .modal-sheet {
  border-radius: 18px;
  border: 1px solid var(--site-sidebar-card-border);
  background: var(--site-sidebar-bg) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 18px 52px rgba(26,25,23,.16), 0 4px 14px rgba(26,25,23,.08);
}

.modal-overlay.site-modal.open .modal-sheet {
  box-shadow: 0 18px 52px rgba(26,25,23,.16), 0 4px 14px rgba(26,25,23,.08);
}

.site-modal .modal-hdr {
  min-height: 52px;
  padding: 9px 10px 9px 14px;
  background: var(--site-sidebar-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--site-sidebar-border) 72%, transparent);
}

.site-modal .modal-title-wrap {
  gap: 9px;
}

.site-modal .modal-title-chip,
.site-modal .modal-title-chip--install,
.site-modal .modal-title-chip--privacy,
.site-modal .modal-title-chip--terms,
.site-modal .modal-title-chip--cookies {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--site-sidebar-card-bg) 92%, var(--site-sidebar-bg));
  border: 1px solid color-mix(in srgb, var(--site-sidebar-card-border) 76%, transparent);
  color: color-mix(in srgb, var(--text-sec) 86%, var(--text-muted));
  box-shadow: none;
}

.site-modal .modal-title-chip svg {
  width: 14px;
  height: 14px;
}

.site-modal .modal-title {
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.014em;
  line-height: 1.2;
}

.site-modal .modal-close {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: color-mix(in srgb, var(--text-mute) 92%, var(--text-sec));
}

.site-modal .modal-close:hover,
.site-modal .modal-close:focus-visible {
  background: color-mix(in srgb, var(--site-sidebar-card-bg) 74%, var(--site-sidebar-bg));
  border-color: color-mix(in srgb, var(--site-sidebar-card-border) 80%, transparent);
  color: var(--text);
}

.site-modal .modal-body,
.site-modal .modal-body--install,
.site-modal .modal-body--install-sidebar {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding: 16px;
  background: var(--site-sidebar-bg);
  color: var(--text-sec);
  font-size: 12.75px;
  line-height: 1.55;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--site-sidebar-border-strong) 78%, transparent) transparent;
}

.site-sidebar-stack,
.site-sidebar-policy,
.site-modal .install-modal {
  display: flex;
  flex-direction: column;
  gap: var(--site-sidebar-section-gap);
}

.site-sidebar-policy {
  min-width: 0;
}

.site-sidebar-card,
.site-modal .install-modal .browser-card {
  padding: var(--site-sidebar-card-pad);
  border-radius: var(--site-sidebar-card-radius);
  border: 1px solid var(--site-sidebar-card-border);
  background: var(--site-sidebar-card-bg);
  box-shadow: none;
  overflow: hidden;
}

.site-sidebar-card--meta {
  padding: 12px 14px;
}

.site-modal .modal-updated,
.site-sidebar-meta-text {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--text-muted);
  font-size: 12.25px;
  line-height: 1.45;
}

.site-sidebar-card-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.site-modal .modal-body .site-sidebar-card-title,
.site-modal .modal-body h2.site-sidebar-card-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--text);
}

.site-sidebar-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.site-sidebar-card-body > :is(p, ul, ol) {
  margin: 0;
  font-size: 12.75px;
  line-height: 1.58;
  color: var(--text-sec);
}

.site-sidebar-card-body > :is(p, ul, ol) + :is(p, ul, ol) {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--site-sidebar-row-separator);
}

.site-sidebar-card-body ul,
.site-sidebar-card-body ol {
  padding-left: 18px;
}

.site-sidebar-card-body li + li {
  margin-top: 6px;
}

.site-sidebar-card-body a,
.site-modal .modal-body a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--text) 22%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
}

.site-sidebar-card-body a:hover,
.site-modal .modal-body a:hover {
  color: var(--blue);
  text-decoration-color: color-mix(in srgb, var(--blue) 42%, transparent);
}

.site-modal .install-modal {
  padding: 0;
}

.site-modal .install-modal .platform-nav {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: -16px -16px 0;
  padding: 14px 16px;
  background: linear-gradient(to bottom, var(--site-sidebar-bg) 0%, var(--site-sidebar-bg) calc(100% - 12px), color-mix(in srgb, var(--site-sidebar-bg) 0%, transparent) 100%);
  border-bottom: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-modal .install-modal .platform-btns {
  display: flex;
  align-items: stretch;
  gap: 2px;
  width: 100%;
  padding: 2px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--site-sidebar-card-border) 72%, transparent);
  background: color-mix(in srgb, var(--fill-muted) 88%, var(--site-sidebar-card-bg));
  overflow-x: auto;
  scrollbar-width: none;
}

.site-modal .install-modal .platform-btns::-webkit-scrollbar {
  display: none;
}

.site-modal .install-modal .pbtn {
  flex: 1 0 auto;
  min-width: max-content;
  height: 34px;
  padding: 0 11px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: color-mix(in srgb, var(--text-sec) 88%, var(--text-muted));
  box-shadow: none;
  font-size: 12.25px;
  font-weight: 600;
  line-height: 1.2;
}

.site-modal .install-modal .pbtn:hover:not(.active) {
  color: var(--text);
  background: color-mix(in srgb, var(--fill-muted) 72%, transparent);
  border-color: color-mix(in srgb, var(--site-sidebar-card-border) 28%, transparent);
}

.site-modal .install-modal .pbtn.active,
.site-modal .install-modal .pbtn[aria-selected="true"] {
  color: var(--blue);
  background: var(--bg-white);
  border-color: color-mix(in srgb, var(--site-sidebar-border) 62%, var(--site-sidebar-border-strong));
  box-shadow: 0 1px 2px rgba(26,25,23,.045);
}

.site-modal .install-modal .platform-section {
  display: none;
  padding: 0;
}

.site-modal .install-modal .platform-section.active {
  display: flex;
  flex-direction: column;
  gap: var(--site-sidebar-section-gap);
}

.site-modal .install-modal .section-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--text);
}

.site-modal .install-modal .subsection-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.site-modal .install-modal .subsection-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--site-sidebar-border);
}

.site-modal .install-modal .browser-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--site-sidebar-section-gap-tight);
  margin: 0;
}

.site-modal .install-modal .browser-card {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.site-modal .install-modal .browser-card-hdr {
  padding: 14px 16px 12px;
  background: transparent;
  border-bottom: 1px solid var(--site-sidebar-row-separator);
}

.site-modal .install-modal .browser-name {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--text);
}

.site-modal .install-modal .browser-platforms {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.4;
}

.site-modal .install-modal .steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 16px;
}

.site-modal .install-modal .step {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: flex-start;
  gap: 10px;
  min-height: 42px;
  padding: 10px 0;
}

.site-modal .install-modal .step + .step {
  border-top: 1px solid var(--site-sidebar-row-separator);
}

.site-modal .install-modal .step-n {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--site-sidebar-card-border) 92%, var(--site-sidebar-border-strong));
  background: color-mix(in srgb, var(--fill-muted) 90%, var(--site-sidebar-card-bg));
  color: var(--text);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--site-sidebar-card-border) 42%, transparent);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1;
}

.site-modal .install-modal .step-body {
  color: var(--text-sec);
  font-size: 12.75px;
  line-height: 1.58;
}

.site-modal .install-modal .step-body strong {
  color: var(--text);
  font-weight: 650;
}

@media (max-width: 640px) {
  .modal-overlay.site-modal,
  .modal-overlay.site-modal.site-modal--install {
    inset: auto 0 0 0;
    width: 100vw;
    height: min(88dvh, calc(100dvh - 18px));
  }

  .modal-overlay.site-modal .modal-sheet {
    border-radius: 20px 20px 0 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
  }

  .site-modal .modal-hdr {
    min-height: 50px;
  }

  .site-modal .modal-body,
  .site-modal .modal-body--install,
  .site-modal .modal-body--install-sidebar {
    padding: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .site-modal .install-modal .platform-nav {
    margin: -14px -14px 0;
    padding: 12px 14px;
  }

  .site-modal .install-modal .pbtn {
    flex: 0 0 auto;
  }
}

/* ── PASS 2: remove modal icons and restore website typography scale ──
   Keep the app-sidebar surfaces/cards from Pass 1, but use the final site
   type system rather than compact app-sidebar typography.
------------------------------------------------------------------- */
.site-modal .modal-title-wrap {
  gap: 0;
}

.site-modal .modal-title-chip {
  display: none !important;
}

.site-modal .modal-hdr {
  min-height: 58px;
  padding: 18px 16px 16px 20px;
}

.site-modal .modal-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.site-modal .modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
}

.site-modal .modal-body,
.site-modal .modal-body--install,
.site-modal .modal-body--install-sidebar {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-sec);
}

.site-modal .modal-updated,
.site-sidebar-meta-text {
  font-size: 16px;
  line-height: 1.55;
}

.site-modal .modal-body .site-sidebar-card-title,
.site-modal .modal-body h2.site-sidebar-card-title,
.site-modal .install-modal .section-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35;
}

.site-sidebar-card-body > :is(p, ul, ol) {
  font-size: 16px;
  line-height: 1.7;
}

.site-sidebar-card-body > :is(p, ul, ol) + :is(p, ul, ol) {
  margin-top: 12px;
  padding-top: 12px;
}

.site-modal .install-modal .pbtn {
  height: 38px;
  padding: 0 14px;
  font-size: 16px;
  font-weight: 600;
}

.site-modal .install-modal .subsection-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
}

.site-modal .install-modal .browser-name {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.site-modal .install-modal .browser-platforms {
  font-size: 16px;
  line-height: 1.45;
}

.site-modal .install-modal .step {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  min-height: 48px;
  padding: 12px 0;
}

.site-modal .install-modal .step-n {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.site-modal .install-modal .step-body {
  font-size: 16px;
  line-height: 1.65;
}

.site-modal .install-modal .step-body strong {
  font-weight: 600;
}

@media (max-width: 640px) {
  .site-modal .modal-hdr {
    min-height: 56px;
    padding: 17px 14px 15px 18px;
  }
}

/* ── PASS 3: install popover platform tabs scroll containment ──
   Keep the install device tabs sticky, but give them a fully opaque
   app-sidebar backing plate so install content cannot bleed above or
   behind the control while the modal body scrolls.
------------------------------------------------------------------- */
.site-modal .modal-body--install-sidebar {
  overscroll-behavior: contain;
}

.site-modal .install-modal .platform-nav {
  z-index: 12;
  isolation: isolate;
  background: var(--site-sidebar-bg) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--site-sidebar-border) 76%, transparent);
  box-shadow: 0 1px 0 rgba(26, 25, 23, 0.035);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.site-modal .install-modal .platform-nav::before {
  content: "";
  position: absolute;
  inset: -2px 0 0;
  z-index: -1;
  background: var(--site-sidebar-bg);
  pointer-events: none;
}

.site-modal .install-modal .platform-btns {
  position: relative;
  z-index: 1;
  background: color-mix(in srgb, var(--fill-muted) 88%, var(--site-sidebar-card-bg));
}

.site-modal .install-modal .platform-section {
  position: relative;
  z-index: 0;
}

@media (max-width: 640px) {
  .site-modal .install-modal .platform-nav {
    border-bottom-color: color-mix(in srgb, var(--site-sidebar-border) 80%, transparent);
  }
}

/* ── PASS 4: install platform tabs flush sticky edge ───────────────
   Removes the visible runway above the device tabs when the install
   panel is scrolled. The sticky control now sits directly under the
   popover header with only bottom breathing room for the content below.
------------------------------------------------------------------- */
.site-modal .install-modal .platform-nav {
  margin-top: -16px;
  padding-top: 0 !important;
  padding-bottom: 10px;
  top: 0;
}

.site-modal .install-modal .platform-nav::before {
  inset: -18px 0 0;
}

.site-modal .install-modal .platform-btns {
  margin-top: 0;
}

@media (max-width: 640px) {
  .site-modal .install-modal .platform-nav {
    margin-top: -14px;
    padding-top: 0 !important;
    padding-bottom: 10px;
  }

  .site-modal .install-modal .platform-nav::before {
    inset: -16px 0 0;
  }
}

/* Pass 5: understated lift for blue calls-to-action. */
:is(.btn-cta, .road-notify, .hbtn-launch, .lang-banner-cta) {
  transition:
    background var(--t) var(--ease),
    color var(--t) var(--ease),
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    transform var(--t) var(--ease);
  will-change: transform;
}

@media (hover: hover) and (pointer: fine), (any-hover: hover) and (any-pointer: fine) {
  :is(.btn-cta, .road-notify, .hbtn-launch, .lang-banner-cta):hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(51, 86, 232, .18) !important;
  }

  .hbtn-launch:hover {
    box-shadow: 0 5px 14px rgba(51, 86, 232, .20) !important;
  }

  :is(.btn-cta, .road-notify, .hbtn-launch, .lang-banner-cta):active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(51, 86, 232, .14) !important;
  }
}

:is(.btn-cta, .road-notify, .hbtn-launch, .lang-banner-cta).is-pen-hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(51, 86, 232, .18) !important;
}

.hbtn-launch.is-pen-hover {
  box-shadow: 0 5px 14px rgba(51, 86, 232, .20) !important;
}

:is(.btn-cta, .road-notify, .hbtn-launch, .lang-banner-cta).is-pen-hover:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(51, 86, 232, .14) !important;
}

@media (prefers-reduced-motion: reduce) {
  :is(.btn-cta, .road-notify, .hbtn-launch, .lang-banner-cta),
  :is(.btn-cta, .road-notify, .hbtn-launch, .lang-banner-cta):hover,
  :is(.btn-cta, .road-notify, .hbtn-launch, .lang-banner-cta).is-pen-hover,
  :is(.btn-cta, .road-notify, .hbtn-launch, .lang-banner-cta):active {
    transform: none !important;
    will-change: auto;
  }
}

/* Pass 7: popover typography scale refinement.
   Keep the finalized website font families, but reduce popover text from
   full-page body scale so sidebar popovers sit visually below the page copy. */
.modal-overlay.site-modal {
  --site-popover-title-size: 16px;
  --site-popover-heading-size: 15px;
  --site-popover-body-size: 14px;
  --site-popover-meta-size: 13.5px;
  --site-popover-small-size: 12.5px;
}

.modal-overlay.site-modal .modal-hdr {
  min-height: 54px;
  padding: 16px 14px 14px 18px;
}

.modal-overlay.site-modal .modal-title {
  font-family: var(--font-display);
  font-size: var(--site-popover-title-size);
  font-weight: var(--heading-weight-sub, 625);
  line-height: 1.18;
  letter-spacing: -0.014em;
}

.modal-overlay.site-modal .modal-body,
.modal-overlay.site-modal .modal-body--install,
.modal-overlay.site-modal .modal-body--install-sidebar {
  font-family: var(--font-body);
  font-size: var(--site-popover-body-size);
  line-height: 1.62;
  letter-spacing: 0.001em;
}

.modal-overlay.site-modal .modal-updated,
.modal-overlay.site-modal .site-sidebar-meta-text {
  font-size: var(--site-popover-meta-size);
  line-height: 1.45;
}

.modal-overlay.site-modal .modal-body .site-sidebar-card-title,
.modal-overlay.site-modal .modal-body h2.site-sidebar-card-title,
.modal-overlay.site-modal .install-modal .section-title {
  font-family: var(--font-display);
  font-size: var(--site-popover-heading-size);
  font-weight: var(--heading-weight-sub, 625);
  line-height: 1.24;
  letter-spacing: -0.01em;
}

.modal-overlay.site-modal .site-sidebar-card-body > :is(p, ul, ol),
.modal-overlay.site-modal .modal-body p,
.modal-overlay.site-modal .modal-body ul,
.modal-overlay.site-modal .modal-body ol {
  font-family: var(--font-body);
  font-size: var(--site-popover-body-size);
  line-height: 1.62;
  letter-spacing: 0.001em;
}

.modal-overlay.site-modal .site-sidebar-card-body > :is(p, ul, ol) + :is(p, ul, ol) {
  margin-top: 10px;
  padding-top: 10px;
}

.modal-overlay.site-modal .install-modal .pbtn {
  height: 34px;
  padding: 0 12px;
  font-size: 14px;
  line-height: 1.2;
}

.modal-overlay.site-modal .install-modal .browser-name {
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.006em;
}

.modal-overlay.site-modal .install-modal .browser-platforms,
.modal-overlay.site-modal .install-modal .step-body {
  font-size: var(--site-popover-body-size);
  line-height: 1.56;
}

.modal-overlay.site-modal .install-modal .subsection-label {
  font-size: 10.5px;
  letter-spacing: .105em;
}

.modal-overlay.site-modal .install-modal .step {
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  min-height: 44px;
  padding: 10px 0;
}

.modal-overlay.site-modal .install-modal .step-n {
  width: 22px;
  height: 22px;
  font-size: 11px;
}

@media (max-width: 640px) {
  .modal-overlay.site-modal {
    --site-popover-title-size: 16px;
    --site-popover-heading-size: 15px;
    --site-popover-body-size: 14px;
    --site-popover-meta-size: 13.5px;
  }

  .modal-overlay.site-modal .modal-hdr {
    min-height: 52px;
    padding: 15px 13px 13px 16px;
  }
}


/* Pass 10: policy legal hardening tables */
.modal-overlay.site-modal .policy-table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: var(--font-body);
  font-size: var(--site-popover-small-size, 12.5px);
  line-height: 1.48;
  color: var(--text-sec);
  -webkit-overflow-scrolling: touch;
}

.modal-overlay.site-modal .policy-table thead,
.modal-overlay.site-modal .policy-table tbody,
.modal-overlay.site-modal .policy-table tr {
  min-width: 640px;
}

.modal-overlay.site-modal .policy-table th,
.modal-overlay.site-modal .policy-table td {
  min-width: 150px;
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--site-sidebar-row-separator);
}

.modal-overlay.site-modal .policy-table th {
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .045em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--site-sidebar-bg) 48%, transparent);
}

.modal-overlay.site-modal .policy-table tr:first-child th {
  border-top: 0;
}

.modal-overlay.site-modal .site-sidebar-card-body > .policy-table + :is(p, ul, ol, table) {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--site-sidebar-row-separator);
}

/* ── TEAMS SEAT CALCULATOR ────────────────────────────────────────
   Supports the simplified Teams model: £70 per person per year, with
   a live annual total that defaults to five people.
------------------------------------------------------------------- */
.team-seat-calculator {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(26, 25, 23, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: 0 1px 0 rgba(26, 25, 23, 0.04);
}

.team-seat-label,
.team-seat-total span,
.team-seat-help {
  color: var(--text-mute);
  font-family: var(--font-body, var(--font-ui));
  font-size: 14px;
  line-height: 1.45;
}

.team-seat-label {
  font-weight: 650;
  color: var(--text);
}

.team-seat-control {
  display: flex;
  align-items: center;
  gap: 10px;
}

.team-seat-control input {
  width: 92px;
  min-height: 44px;
  border: 1px solid rgba(26, 25, 23, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 650;
  line-height: 1;
  padding: 8px 10px;
}

.team-seat-control input:focus {
  outline: 2px solid rgba(51, 86, 232, 0.35);
  outline-offset: 2px;
  border-color: rgba(51, 86, 232, 0.48);
}

.team-seat-control span {
  color: var(--text-sec);
  font-family: var(--font-body, var(--font-ui));
  font-size: 15px;
  font-weight: 600;
}

.team-seat-total {
  display: grid;
  gap: 2px;
  padding-top: 2px;
}

.team-seat-total strong {
  color: var(--blue);
  font-family: var(--font-display);
  font-size: clamp(28px, 2.2vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.team-seat-total small {
  color: var(--text-mute);
  font-family: var(--font-body, var(--font-ui));
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.07em;
  line-height: 1.4;
  text-transform: uppercase;
}

.team-seat-help {
  margin: 0;
}

html[dir="rtl"] .team-seat-control,
html[dir="rtl"] .team-seat-total {
  text-align: right;
}

@media (max-width: 820px) {
  .team-seat-calculator {
    max-width: min(100%, 320px);
  }
}

/* ── AUDITED TEAMS SEAT CALCULATOR ────────────────────────────────
   Preserve the existing plan-card rail. The Teams calculator is now
   content inside that card, not a second card nested inside it.
------------------------------------------------------------------- */
.plans-ledger .plan-row--teams > .plan-action--teams-calculator {
  justify-content: center;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  max-width: 224px;
  min-width: 0;
  padding: 20px 16px 16px;
  overflow: hidden;
  text-align: center;
}

.plans-ledger .plan-row--teams > .plan-action--teams-calculator > .team-seat-calculator {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.plans-ledger .team-seat-label,
.plans-ledger .team-seat-total span,
.plans-ledger .team-seat-help {
  margin: 0;
  font-family: var(--font-body, var(--font-ui));
  letter-spacing: 0;
}

.plans-ledger .team-seat-label {
  max-width: 19ch;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.32;
  text-align: center;
}

.plans-ledger .team-seat-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.plans-ledger .team-seat-control input {
  flex: 0 0 76px;
  width: 76px;
  min-width: 0;
  min-height: 42px;
  padding: 7px 8px;
  border: 1px solid rgba(26, 25, 23, 0.15);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
  font-family: var(--font-body, var(--font-ui));
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  font-variant-numeric: tabular-nums lining-nums;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.42) inset;
  appearance: textfield;
  -moz-appearance: textfield;
}

.plans-ledger .team-seat-control input::-webkit-outer-spin-button,
.plans-ledger .team-seat-control input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

.plans-ledger .team-seat-control input:focus {
  outline: 2px solid rgba(51, 86, 232, 0.28);
  outline-offset: 2px;
  border-color: rgba(51, 86, 232, 0.48);
}

.plans-ledger .team-seat-control span {
  min-width: 0;
  max-width: 9ch;
  color: var(--text-sec);
  font-family: var(--font-body, var(--font-ui));
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  text-align: left;
  overflow-wrap: anywhere;
}

.plans-ledger .team-seat-divider {
  width: 100%;
  height: 1px;
  background: rgba(26, 25, 23, 0.11);
}

.plans-ledger .team-seat-total {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 100%;
  padding: 0;
  text-align: center;
}

.plans-ledger .team-seat-total span {
  color: var(--text-sec);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

.plans-ledger .team-seat-total strong {
  color: var(--blue);
  font-family: var(--font-body, var(--font-ui));
  font-size: clamp(30px, 2.15vw, 36px);
  font-weight: 700;
  letter-spacing: -0.034em;
  line-height: 0.98;
  font-variant-numeric: tabular-nums lining-nums;
}

.plans-ledger .team-seat-total small {
  color: var(--text);
  font-family: var(--font-body, var(--font-ui));
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.plans-ledger .team-seat-help {
  max-width: 20ch;
  color: var(--text-sec);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.36;
  text-align: center;
}

.plans-ledger .plan-row--teams > .plan-action--teams-calculator .plan-cta {
  width: 100%;
  min-width: 0;
  margin-top: 0;
  align-self: stretch;
  justify-content: center;
}

html[dir="rtl"] .plans-ledger .team-seat-control span {
  text-align: right;
}

@media (max-width: 860px) {
  .plans-ledger .plan-row--teams > .plan-action--teams-calculator {
    max-width: 224px;
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .plans-ledger .plan-row--teams > .plan-action--teams-calculator {
    max-width: none;
  }

  .plans-ledger .team-seat-label,
  .plans-ledger .team-seat-help {
    max-width: none;
  }
}

/* ── TEAMS CALCULATOR ALIGNMENT PATCH ────────────────────────────
   Keep Teams calculator-led, but make its right rail match the Free
   and Pro plan-card rhythm. The calculated annual total is the price
   equivalent, not a standalone £70 headline.
------------------------------------------------------------------- */
.plans-ledger .plan-price,
.plans-ledger .team-seat-total strong {
  color: var(--blue);
  font-family: var(--font-body, var(--font-ui));
  font-weight: 780;
  letter-spacing: -0.034em;
  font-variant-numeric: tabular-nums lining-nums;
}

.plans-ledger .plan-price-note,
.plans-ledger .team-seat-label,
.plans-ledger .team-seat-control span,
.plans-ledger .team-seat-total span,
.plans-ledger .team-seat-total small,
.plans-ledger .team-seat-help {
  font-family: var(--font-body, var(--font-ui));
  font-weight: 650;
  letter-spacing: 0;
}

.plans-ledger .plan-price-note {
  color: var(--text-sec);
}

.plans-ledger .plan-row--teams > .plan-action--teams-calculator {
  justify-content: space-between;
  align-items: stretch;
  gap: 24px;
  width: 100%;
  max-width: 252px;
  padding: 8px 0 6px 20px;
  overflow: visible;
  text-align: left;
}

.plans-ledger .plan-row--teams > .plan-action--teams-calculator > .team-seat-calculator {
  justify-items: stretch;
  gap: 10px;
  text-align: left;
}

.plans-ledger .team-seat-label {
  max-width: none;
  color: var(--text-sec);
  font-size: 13px;
  line-height: 1.25;
  text-align: left;
}

.plans-ledger .team-seat-control {
  justify-content: flex-start;
  gap: 8px;
}

.plans-ledger .team-seat-control input {
  flex-basis: 58px;
  width: 58px;
  min-height: 38px;
  border-radius: 10px;
  font-size: 19px;
  font-weight: 760;
}

.plans-ledger .team-seat-control span {
  max-width: none;
  color: var(--text-sec);
  font-size: 13px;
  line-height: 1.25;
  text-align: left;
}

.plans-ledger .team-seat-divider {
  margin-top: 2px;
  background: rgba(26, 25, 23, 0.10);
}

.plans-ledger .team-seat-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-items: start;
  gap: 3px 5px;
  text-align: left;
}

.plans-ledger .team-seat-total span {
  flex: 0 0 100%;
  color: var(--text-sec);
  font-size: 13px;
  line-height: 1.25;
}

.plans-ledger .team-seat-total strong {
  font-size: clamp(31px, 2.25vw, 38px);
  line-height: 0.98;
}

.plans-ledger .team-seat-total small {
  color: var(--text-sec);
  font-size: 14px;
  line-height: 1.2;
  text-transform: none;
}

.plans-ledger .team-seat-help {
  max-width: none;
  color: var(--text-sec);
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
}

html[dir="rtl"] .plans-ledger .plan-row--teams > .plan-action--teams-calculator,
html[dir="rtl"] .plans-ledger .plan-row--teams > .plan-action--teams-calculator > .team-seat-calculator,
html[dir="rtl"] .plans-ledger .team-seat-label,
html[dir="rtl"] .plans-ledger .team-seat-control span,
html[dir="rtl"] .plans-ledger .team-seat-total,
html[dir="rtl"] .plans-ledger .team-seat-help {
  text-align: right;
}

@media (max-width: 860px) {
  .plans-ledger .plan-row--teams > .plan-action--teams-calculator {
    max-width: 252px;
    padding-left: 0;
  }
}

@media (max-width: 560px) {
  .plans-ledger .plan-row--teams > .plan-action--teams-calculator {
    max-width: none;
  }
}

/* ── PRICING TYPOGRAPHY REFINEMENT: PRO × TEAMS ALIGNMENT ────────
   Requested follow-up:
   - Keep Teams calculator-led.
   - Stack the Teams total and year note like the Pro price block.
   - Keep the Teams total blue.
   - Make the Pro price blue and match the Teams price treatment.
   This is appended late so it safely overrides earlier pricing passes.
------------------------------------------------------------------- */
.plans-ledger .plan-row--pro .plan-price,
.plans-ledger .plan-row--teams .team-seat-total strong {
  color: var(--blue) !important;
  font-family: var(--font-body, var(--font-ui));
  font-size: clamp(32px, 2.25vw, 38px);
  font-weight: 780;
  line-height: 0.98;
  letter-spacing: -0.034em;
  font-variant-numeric: tabular-nums lining-nums;
}

.plans-ledger .plan-row--pro .plan-price-note,
.plans-ledger .plan-row--teams .team-seat-total small {
  color: var(--text-sec) !important;
  font-family: var(--font-body, var(--font-ui));
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}

/* Keep Pro visually centred in its card, but use the Teams typographic tone. */
.plans-ledger .plan-row--pro .plan-price-block {
  justify-items: center;
  text-align: center;
  gap: 4px;
}

/* Stack Teams annual total like Pro: label, amount, then year note. */
.plans-ledger .plan-row--teams .team-seat-total {
  display: grid !important;
  justify-items: start;
  align-items: start;
  gap: 4px;
  text-align: left;
}

.plans-ledger .plan-row--teams .team-seat-total span {
  grid-column: 1;
  color: var(--text-sec);
  font-family: var(--font-body, var(--font-ui));
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
}

.plans-ledger .plan-row--teams .team-seat-total strong,
.plans-ledger .plan-row--teams .team-seat-total small {
  display: block;
}

/* Slightly tighten the grouped price stack so it feels more like the Pro block. */
.plans-ledger .plan-row--teams .team-seat-total strong {
  margin-top: 1px;
}

.plans-ledger .plan-row--teams .team-seat-total small {
  margin-top: -1px;
}

@media (max-width: 860px) {
  .plans-ledger .plan-row--pro .plan-price-block {
    justify-items: start;
    text-align: left;
  }
}


/* ── PRICING VISUAL ALIGNMENT PATCH (APR 2026) ───────────────────
   Stack the Teams annual total like Pro, make both Pro and Teams use
   the same blue pricing treatment, and make seat changes visibly
   adjustable with explicit stepper buttons.
------------------------------------------------------------------- */
.plans-ledger .plan-action {
  align-items: center;
}

.plans-ledger .plan-price-block,
.plans-ledger .team-seat-total .plan-price-block {
  display: grid;
  gap: 3px;
  justify-items: center;
  text-align: center;
}

.plans-ledger .plan-row--pro .plan-price,
.plans-ledger .plan-row--pro .plan-price-note,
.plans-ledger .plan-row--teams .team-seat-total .plan-price,
.plans-ledger .plan-row--teams .team-seat-total .plan-price-note {
  font-family: var(--font-body, var(--font-ui));
  letter-spacing: -0.034em;
}

.plans-ledger .plan-row--pro .plan-price,
.plans-ledger .plan-row--teams .team-seat-total .plan-price {
  color: var(--blue);
  font-size: clamp(30px, 2.15vw, 36px);
  font-weight: 780;
  line-height: 0.98;
  font-variant-numeric: tabular-nums lining-nums;
}

.plans-ledger .plan-row--pro .plan-price-note,
.plans-ledger .plan-row--teams .team-seat-total .plan-price-note {
  color: var(--text-sec);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}

.plans-ledger .plan-row--teams > .plan-action--teams-calculator {
  justify-content: space-between;
  align-items: stretch;
  gap: 22px;
  width: 100%;
  max-width: 252px;
  padding: 8px 0 6px 20px;
  overflow: visible;
  text-align: left;
}

.plans-ledger .plan-row--teams > .plan-action--teams-calculator > .team-seat-calculator {
  justify-items: stretch;
  gap: 10px;
  text-align: left;
}

.plans-ledger .team-seat-label {
  max-width: none;
  color: var(--text-sec);
  font-family: var(--font-body, var(--font-ui));
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  text-align: left;
}

.plans-ledger .team-seat-control {
  display: grid;
  grid-template-columns: 36px 58px 36px auto;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}

.plans-ledger .team-seat-stepper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(26, 25, 23, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--text);
  font-family: var(--font-body, var(--font-ui));
  font-size: 20px;
  font-weight: 760;
  line-height: 1;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.plans-ledger .team-seat-stepper:hover,
.plans-ledger .team-seat-stepper:focus-visible {
  border-color: rgba(62, 90, 255, 0.35);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 0 0 3px rgba(62, 90, 255, 0.10);
  outline: none;
}

.plans-ledger .team-seat-stepper:active {
  transform: translateY(1px);
}

.plans-ledger .team-seat-control input {
  width: 58px;
  min-height: 38px;
  border-radius: 10px;
  font-family: var(--font-body, var(--font-ui));
  font-size: 19px;
  font-weight: 760;
  text-align: center;
}

.plans-ledger .team-seat-control span {
  max-width: none;
  color: var(--text-sec);
  font-family: var(--font-body, var(--font-ui));
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  text-align: left;
}

.plans-ledger .team-seat-divider {
  margin-top: 2px;
  background: rgba(26, 25, 23, 0.10);
}

.plans-ledger .team-seat-total {
  display: grid;
  gap: 5px;
  justify-items: start;
  width: 100%;
  text-align: left;
}

.plans-ledger .team-seat-total-label {
  color: var(--text-sec);
  font-family: var(--font-body, var(--font-ui));
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
}

.plans-ledger .team-seat-total .plan-price-block {
  justify-items: start;
  text-align: left;
}

.plans-ledger .team-seat-help {
  max-width: none;
  color: var(--text-sec);
  font-family: var(--font-body, var(--font-ui));
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
}

html[dir="rtl"] .plans-ledger .plan-row--teams > .plan-action--teams-calculator,
html[dir="rtl"] .plans-ledger .plan-row--teams > .plan-action--teams-calculator > .team-seat-calculator,
html[dir="rtl"] .plans-ledger .team-seat-label,
html[dir="rtl"] .plans-ledger .team-seat-control span,
html[dir="rtl"] .plans-ledger .team-seat-total,
html[dir="rtl"] .plans-ledger .team-seat-total-label,
html[dir="rtl"] .plans-ledger .team-seat-total .plan-price-block,
html[dir="rtl"] .plans-ledger .team-seat-help {
  text-align: right;
  justify-items: stretch;
}

html[dir="rtl"] .plans-ledger .team-seat-control {
  grid-template-columns: auto 36px 58px 36px;
}

html[dir="rtl"] .plans-ledger .team-seat-control span {
  order: -1;
}

@media (max-width: 860px) {
  .plans-ledger .plan-row--teams > .plan-action--teams-calculator {
    max-width: 224px;
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .plans-ledger .plan-row--teams > .plan-action--teams-calculator {
    max-width: none;
    padding-left: 0;
  }

  .plans-ledger .team-seat-control {
    grid-template-columns: 34px 56px 34px auto;
    gap: 6px;
  }

  html[dir="rtl"] .plans-ledger .team-seat-control {
    grid-template-columns: auto 34px 56px 34px;
  }
}

/* ── ACTION CARD CONSISTENCY PASS: FREE + TEAMS ───────────────────
   Final alignment pass based on review:
   - Free card should visually follow the same centred card rhythm.
   - Teams annual total should be centred and stack like Pro.
   - Remove the commercial helper tone and make seat-choice clearer.
------------------------------------------------------------------- */
.plans-ledger .plan-row--free > .plan-action,
.plans-ledger .plan-row--pro > .plan-action,
.plans-ledger .plan-row--teams > .plan-action--teams-calculator {
  align-items: center;
  text-align: center;
}

.plans-ledger .plan-row--free .plan-meta-block,
.plans-ledger .plan-row--pro .plan-price-block,
.plans-ledger .plan-row--teams > .plan-action--teams-calculator > .team-seat-calculator {
  justify-items: center;
  text-align: center;
}

.plans-ledger .plan-row--teams > .plan-action--teams-calculator {
  padding-left: 16px;
  padding-right: 16px;
}

.plans-ledger .plan-row--teams > .plan-action--teams-calculator > .team-seat-calculator {
  width: 100%;
  gap: 10px;
}

.plans-ledger .plan-row--teams .team-seat-label {
  max-width: none;
  color: var(--text-sec);
  text-align: center;
}

.plans-ledger .plan-row--teams .team-seat-control {
  justify-content: center;
  width: 100%;
}

.plans-ledger .plan-row--teams .team-seat-control span {
  text-align: center;
}

.plans-ledger .plan-row--teams .team-seat-total {
  display: grid !important;
  justify-items: center !important;
  align-items: start;
  width: 100%;
  gap: 4px;
  text-align: center !important;
}

.plans-ledger .plan-row--teams .team-seat-total span,
.plans-ledger .plan-row--teams .team-seat-total small,
.plans-ledger .plan-row--teams .team-seat-help {
  text-align: center;
}

.plans-ledger .plan-row--teams .team-seat-total span {
  grid-column: 1;
}

.plans-ledger .plan-row--teams .team-seat-help {
  max-width: 18ch;
  margin: 0 auto;
}

@media (max-width: 860px) {
  .plans-ledger .plan-row--free > .plan-action,
  .plans-ledger .plan-row--pro > .plan-action,
  .plans-ledger .plan-row--teams > .plan-action--teams-calculator {
    align-items: start;
    text-align: left;
  }

  .plans-ledger .plan-row--free .plan-meta-block,
  .plans-ledger .plan-row--pro .plan-price-block,
  .plans-ledger .plan-row--teams > .plan-action--teams-calculator > .team-seat-calculator,
  .plans-ledger .plan-row--teams .team-seat-total {
    justify-items: start !important;
    text-align: left !important;
  }

  .plans-ledger .plan-row--teams .team-seat-label,
  .plans-ledger .plan-row--teams .team-seat-total span,
  .plans-ledger .plan-row--teams .team-seat-total small,
  .plans-ledger .plan-row--teams .team-seat-help,
  .plans-ledger .plan-row--teams .team-seat-control span {
    text-align: left;
  }

  .plans-ledger .plan-row--teams .team-seat-control {
    justify-content: flex-start;
  }

  .plans-ledger .plan-row--teams .team-seat-help {
    margin: 0;
    max-width: none;
  }
}

/* ── PRICING PASS 1: SHARED ACTION MARKUP BASELINE ────────────────
   Free, Pro, and Teams now share the same value/note/CTA structure.
   This block only normalises the new shared markup; the broader visual
   reset belongs to pass 2.
------------------------------------------------------------------- */
.plans-ledger .plan-row--free > .plan-action,
.plans-ledger .plan-row--pro > .plan-action,
.plans-ledger .plan-row--teams > .plan-action--teams-calculator {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.plans-ledger .plan-row--free .plan-price-block,
.plans-ledger .plan-row--pro .plan-price-block,
.plans-ledger .plan-row--teams .plan-price-block--teams {
  width: 100%;
  justify-items: center;
  text-align: center;
  gap: 4px;
}

.plans-ledger .plan-row--free .plan-price,
.plans-ledger .plan-row--pro .plan-price,
.plans-ledger .plan-row--teams .plan-price-block--teams .plan-price {
  color: var(--blue) !important;
  font-family: var(--font-body, var(--font-ui));
  font-size: clamp(32px, 2.25vw, 38px);
  font-weight: 780;
  line-height: 0.98;
  letter-spacing: -0.034em;
  font-variant-numeric: tabular-nums lining-nums;
}

.plans-ledger .plan-row--free .plan-price-note,
.plans-ledger .plan-row--pro .plan-price-note,
.plans-ledger .plan-row--teams .plan-price-block--teams .plan-price-note {
  color: var(--text-sec) !important;
  font-family: var(--font-body, var(--font-ui));
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}

.plans-ledger .plan-row--teams > .plan-action--teams-calculator > .team-seat-calculator {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

.plans-ledger .plan-row--teams .team-seat-label {
  max-width: none;
  color: var(--text-sec);
  font-family: var(--font-body, var(--font-ui));
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.plans-ledger .plan-row--teams .team-seat-control {
  justify-content: center;
  margin-inline: auto;
}

html[dir="rtl"] .plans-ledger .plan-row--teams > .plan-action--teams-calculator,
html[dir="rtl"] .plans-ledger .plan-row--teams > .plan-action--teams-calculator > .team-seat-calculator,
html[dir="rtl"] .plans-ledger .plan-row--teams .team-seat-label,
html[dir="rtl"] .plans-ledger .plan-row--teams .plan-price-block--teams {
  text-align: center;
  justify-items: center;
}

@media (max-width: 860px) {
  .plans-ledger .plan-row--free > .plan-action,
  .plans-ledger .plan-row--pro > .plan-action,
  .plans-ledger .plan-row--teams > .plan-action--teams-calculator {
    align-items: start;
    justify-content: start;
    text-align: left;
  }

  .plans-ledger .plan-row--free .plan-price-block,
  .plans-ledger .plan-row--pro .plan-price-block,
  .plans-ledger .plan-row--teams .plan-price-block--teams,
  .plans-ledger .plan-row--teams > .plan-action--teams-calculator > .team-seat-calculator {
    justify-items: start;
    text-align: left;
  }

  .plans-ledger .plan-row--teams .team-seat-label,
  .plans-ledger .plan-row--teams .team-seat-control {
    text-align: left;
    margin-inline: 0;
  }
}

/* ── PRICING PASS 2: CANONICAL ACTION-CARD RESET ─────────────────
   Visual reset for the three pricing action cards after the shared
   markup cleanup. One component model: value/note/CTA, with Teams'
   seat selector as a compact control above its calculated value.
------------------------------------------------------------------- */
#pricing .plans-ledger > .plan-row > .plan-action {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  align-content: center !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 224px !important;
  min-width: 0 !important;
  min-height: 236px !important;
  padding: 20px 16px !important;
  margin: 0 !important;
  border: 1px solid rgba(26, 25, 23, 0.12) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.58) !important;
  box-shadow: none !important;
  color: var(--text) !important;
  text-align: center !important;
  overflow: visible !important;
}

#pricing .plans-ledger .plan-row--pro > .plan-action,
#pricing .plans-ledger .plan-row--teams > .plan-action--teams-calculator {
  background: rgba(51, 86, 232, 0.065) !important;
  border-color: rgba(51, 86, 232, 0.18) !important;
}

#pricing .plans-ledger .plan-row--free > .plan-action:hover,
#pricing .plans-ledger .plan-row--teams > .plan-action:hover {
  transform: none !important;
  box-shadow: none !important;
}

#pricing .plans-ledger .plan-price-block,
#pricing .plans-ledger .plan-price-block--free,
#pricing .plans-ledger .plan-price-block--pro,
#pricing .plans-ledger .plan-price-block--teams {
  display: grid !important;
  align-content: center !important;
  justify-content: center !important;
  justify-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

#pricing .plans-ledger .plan-row--free .plan-price,
#pricing .plans-ledger .plan-row--pro .plan-price,
#pricing .plans-ledger .plan-row--teams .plan-price-block--teams .plan-price {
  display: block !important;
  margin: 0 !important;
  color: var(--blue) !important;
  font-family: var(--font-body, var(--font-ui)) !important;
  font-size: clamp(33px, 2.35vw, 40px) !important;
  font-weight: 780 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.035em !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums lining-nums !important;
}

#pricing .plans-ledger .plan-row--free .plan-price-note,
#pricing .plans-ledger .plan-row--pro .plan-price-note,
#pricing .plans-ledger .plan-row--teams .plan-price-block--teams .plan-price-note {
  display: block !important;
  margin: 0 !important;
  color: var(--text-sec) !important;
  font-family: var(--font-body, var(--font-ui)) !important;
  font-size: 14px !important;
  font-weight: 720 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: none !important;
  opacity: 1 !important;
}

#pricing .plans-ledger .plan-row--teams > .plan-action--teams-calculator > .team-seat-calculator {
  display: grid !important;
  justify-content: center !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
}

#pricing .plans-ledger .team-seat-label {
  display: block !important;
  max-width: none !important;
  margin: 0 !important;
  color: var(--text-sec) !important;
  font-family: var(--font-body, var(--font-ui)) !important;
  font-size: 13px !important;
  font-weight: 720 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

#pricing .plans-ledger .team-seat-control {
  display: inline-grid !important;
  grid-template-columns: 34px 58px 34px auto !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
}

#pricing .plans-ledger .team-seat-stepper {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
  border-color: rgba(26, 25, 23, 0.13) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--text) !important;
  font-size: 19px !important;
  font-weight: 760 !important;
}

#pricing .plans-ledger .team-seat-control input {
  width: 58px !important;
  min-width: 58px !important;
  flex-basis: 58px !important;
  min-height: 38px !important;
  padding: 6px 8px !important;
  border: 1px solid rgba(26, 25, 23, 0.14) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.84) !important;
  color: var(--text) !important;
  font-family: var(--font-body, var(--font-ui)) !important;
  font-size: 20px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums lining-nums !important;
}

#pricing .plans-ledger .team-seat-control span {
  min-width: 0 !important;
  max-width: 8ch !important;
  color: var(--text-sec) !important;
  font-family: var(--font-body, var(--font-ui)) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  overflow-wrap: anywhere !important;
}

#pricing .plans-ledger .team-seat-divider,
#pricing .plans-ledger .team-seat-total,
#pricing .plans-ledger .team-seat-total-label,
#pricing .plans-ledger .team-seat-help {
  display: none !important;
}

#pricing .plans-ledger .plan-cta {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  align-self: end !important;
  justify-self: stretch !important;
  justify-content: center !important;
  text-align: center !important;
}

#pricing .plans-ledger .plan-row--free .plan-cta {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(26, 25, 23, 0.13) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

#pricing .plans-ledger .plan-row--free .plan-cta:hover,
#pricing .plans-ledger .plan-row--free .plan-cta:focus-visible {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(51, 86, 232, 0.26) !important;
  color: var(--blue) !important;
}

#pricing .plans-ledger .plan-row--pro .plan-cta,
#pricing .plans-ledger .plan-row--teams .plan-cta {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: var(--blue-text) !important;
  box-shadow: none !important;
}

#pricing .plans-ledger .plan-row--pro .plan-cta:hover,
#pricing .plans-ledger .plan-row--pro .plan-cta:focus-visible,
#pricing .plans-ledger .plan-row--teams .plan-cta:hover,
#pricing .plans-ledger .plan-row--teams .plan-cta:focus-visible {
  background: color-mix(in srgb, var(--blue) 92%, #000) !important;
  border-color: color-mix(in srgb, var(--blue) 92%, #000) !important;
  color: var(--blue-text) !important;
  box-shadow: none !important;
}

html[dir="rtl"] #pricing .plans-ledger .team-seat-control {
  grid-template-columns: auto 34px 58px 34px !important;
}

html[dir="rtl"] #pricing .plans-ledger .team-seat-control span {
  order: -1 !important;
  text-align: right !important;
}

html[dir="rtl"] #pricing .plans-ledger > .plan-row > .plan-action,
html[dir="rtl"] #pricing .plans-ledger .plan-price-block,
html[dir="rtl"] #pricing .plans-ledger .team-seat-label,
html[dir="rtl"] #pricing .plans-ledger .plan-price,
html[dir="rtl"] #pricing .plans-ledger .plan-price-note {
  text-align: center !important;
  justify-items: center !important;
}

@media (min-width: 1121px) {
  #pricing .plans-ledger > .plan-row > .plan-action {
    grid-column: 11 / span 3 !important;
    justify-self: end !important;
  }
}

@media (max-width: 860px) {
  #pricing .plans-ledger > .plan-row > .plan-action {
    max-width: none !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    justify-items: stretch !important;
    gap: 14px !important;
    padding: 16px !important;
    text-align: center !important;
  }

  #pricing .plans-ledger .team-seat-control {
    margin-inline: auto !important;
  }
}

@media (max-width: 560px) {
  #pricing .plans-ledger > .plan-row > .plan-action {
    padding: 16px !important;
  }

  #pricing .plans-ledger .team-seat-control {
    grid-template-columns: 32px 56px 32px auto !important;
    gap: 7px !important;
  }

  html[dir="rtl"] #pricing .plans-ledger .team-seat-control {
    grid-template-columns: auto 32px 56px 32px !important;
  }
}

/* ── PRICING PASS 3: CONTENT RHYTHM + SEAT-CONTROL POLISH ────────
   This pass does not introduce a new visual model. It tightens the
   shared action-card rhythm from Pass 2: the value/control area is
   centred in the card, while every CTA resolves to the same lower
   anchor. Teams keeps its calculator, but the selector reads as a
   compact control rather than a separate form.
------------------------------------------------------------------- */
#pricing .plans-ledger > .plan-row > .plan-action {
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-content: stretch !important;
  min-height: 248px !important;
  gap: 16px !important;
}

#pricing .plans-ledger .plan-price-block,
#pricing .plans-ledger .plan-row--teams > .plan-action--teams-calculator > .team-seat-calculator {
  align-self: center !important;
}

#pricing .plans-ledger .plan-row--teams > .plan-action--teams-calculator > .team-seat-calculator {
  gap: 13px !important;
}

#pricing .plans-ledger .plan-cta {
  align-self: end !important;
}

#pricing .plans-ledger .team-seat-label {
  max-width: 18ch !important;
  color: color-mix(in srgb, var(--text-sec) 84%, var(--text)) !important;
  font-size: 12px !important;
  font-weight: 740 !important;
  line-height: 1.18 !important;
}

#pricing .plans-ledger .team-seat-control {
  grid-template-columns: 32px 56px 32px auto !important;
  gap: 7px !important;
}

#pricing .plans-ledger .team-seat-stepper {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 9px !important;
}

#pricing .plans-ledger .team-seat-control input {
  width: 56px !important;
  min-width: 56px !important;
  flex-basis: 56px !important;
  min-height: 36px !important;
  border-radius: 9px !important;
}

#pricing .plans-ledger .team-seat-control span {
  max-width: 7ch !important;
}

#pricing .plans-ledger .plan-row--teams .plan-price-block--teams {
  margin-top: 2px !important;
}

@media (max-width: 560px) {
  #pricing .plans-ledger > .plan-row > .plan-action {
    min-height: 0 !important;
  }
}

/* ── PRICING PASS 4: DETERMINISTIC ALIGNMENT RESET ───────────────
   The previous passes left several competing alignment rules in the
   cascade. This block defines the pricing action cards as one system:
   shared outer card, shared value typography, shared CTA anchor, and a
   compact Teams selector that does not change the card model.
------------------------------------------------------------------- */
#pricing .plans-ledger > .plan-row > .plan-action,
#pricing .plans-ledger > .plan-row > .plan-action--free,
#pricing .plans-ledger > .plan-row > .plan-action--pro,
#pricing .plans-ledger > .plan-row > .plan-action--teams-calculator {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(142px, 1fr) 44px !important;
  align-content: stretch !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 236px !important;
  min-height: 220px !important;
  margin: 0 !important;
  padding: 18px !important;
  border: 1px solid rgba(26, 25, 23, 0.12) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  overflow: visible !important;
  text-align: center !important;
}

#pricing .plans-ledger .plan-row--free > .plan-action {
  background: rgba(255, 255, 255, 0.62) !important;
  border-color: rgba(26, 25, 23, 0.12) !important;
}

#pricing .plans-ledger .plan-row--pro > .plan-action,
#pricing .plans-ledger .plan-row--teams > .plan-action--teams-calculator {
  background: var(--app-selected-blue-bg, rgba(51, 86, 232, .085)) !important;
  border-color: var(--app-selected-blue-border, rgba(51, 86, 232, .20)) !important;
}

#pricing .plans-ledger .plan-price-block,
#pricing .plans-ledger .plan-price-block--free,
#pricing .plans-ledger .plan-price-block--pro,
#pricing .plans-ledger .plan-price-block--teams {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: center !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 6px !important;
  text-align: center !important;
}

#pricing .plans-ledger .plan-price {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--blue) !important;
  font-family: var(--font-body, var(--font-ui)) !important;
  font-size: clamp(34px, 2.55vw, 42px) !important;
  font-weight: 790 !important;
  line-height: .96 !important;
  letter-spacing: -0.04em !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums lining-nums !important;
}

#pricing .plans-ledger .plan-row--free .plan-price {
  color: var(--blue) !important;
}

#pricing .plans-ledger .plan-price-note {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--text-sec) !important;
  font-family: var(--font-body, var(--font-ui)) !important;
  font-size: 14px !important;
  font-weight: 720 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: none !important;
  white-space: normal !important;
}

#pricing .plans-ledger .plan-row--teams > .plan-action--teams-calculator > .team-seat-calculator {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto minmax(56px, 1fr) !important;
  align-content: center !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  gap: 9px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
}

#pricing .plans-ledger .team-seat-label {
  display: block !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--text-sec) !important;
  font-family: var(--font-body, var(--font-ui)) !important;
  font-size: 12px !important;
  font-weight: 740 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

#pricing .plans-ledger .team-seat-control {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 32px 58px 32px !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  gap: 7px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
}

#pricing .plans-ledger .team-seat-control span {
  display: none !important;
}

#pricing .plans-ledger .team-seat-stepper {
  box-sizing: border-box !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(26, 25, 23, 0.13) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--text) !important;
  font-family: var(--font-body, var(--font-ui)) !important;
  font-size: 18px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  text-align: center !important;
  box-shadow: none !important;
}

#pricing .plans-ledger .team-seat-control input {
  box-sizing: border-box !important;
  display: block !important;
  flex: none !important;
  width: 58px !important;
  min-width: 58px !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  border: 1px solid rgba(26, 25, 23, 0.14) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.84) !important;
  color: var(--text) !important;
  font-family: var(--font-body, var(--font-ui)) !important;
  font-size: 20px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  box-shadow: none !important;
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}

#pricing .plans-ledger .team-seat-control input::-webkit-outer-spin-button,
#pricing .plans-ledger .team-seat-control input::-webkit-inner-spin-button {
  margin: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#pricing .plans-ledger .plan-row--teams .plan-price-block--teams {
  grid-row: 3 !important;
  align-self: center !important;
  gap: 5px !important;
}

#pricing .plans-ledger .plan-cta {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: end !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  text-align: center !important;
  white-space: normal !important;
}

#pricing .plans-ledger .plan-cta .btn-icon {
  flex: 0 0 auto !important;
  width: 16px !important;
  height: 16px !important;
}

#pricing .plans-ledger .plan-row--free .plan-cta {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(26, 25, 23, 0.13) !important;
  color: var(--text) !important;
}

#pricing .plans-ledger .plan-row--pro .plan-cta,
#pricing .plans-ledger .plan-row--teams .plan-cta {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: var(--blue-text) !important;
}

html[dir="rtl"] #pricing .plans-ledger > .plan-row > .plan-action,
html[dir="rtl"] #pricing .plans-ledger .plan-price-block,
html[dir="rtl"] #pricing .plans-ledger .team-seat-calculator,
html[dir="rtl"] #pricing .plans-ledger .team-seat-label {
  text-align: center !important;
}

@media (min-width: 1121px) {
  #pricing .plans-ledger > .plan-row > .plan-action {
    grid-column: 11 / span 3 !important;
    justify-self: end !important;
  }
}

@media (max-width: 860px) {
  #pricing .plans-ledger > .plan-row > .plan-action,
  #pricing .plans-ledger > .plan-row > .plan-action--free,
  #pricing .plans-ledger > .plan-row > .plan-action--pro,
  #pricing .plans-ledger > .plan-row > .plan-action--teams-calculator {
    max-width: none !important;
    min-height: 0 !important;
    grid-template-rows: auto 44px !important;
    gap: 14px !important;
    padding: 16px !important;
    justify-self: stretch !important;
  }

  #pricing .plans-ledger .plan-price-block,
  #pricing .plans-ledger .plan-row--teams > .plan-action--teams-calculator > .team-seat-calculator {
    min-height: 108px !important;
  }
}

@media (max-width: 560px) {
  #pricing .plans-ledger .plan-price {
    font-size: clamp(32px, 10vw, 40px) !important;
  }

  #pricing .plans-ledger .plan-price-note {
    font-size: 13px !important;
  }
}

/* ── PRICING PASS 5: CONTAINED ACTION CARD SYSTEM ────────────────
   This replaces the visible behaviour of the accumulated pricing
   passes with a single contained layout. All three cards use the same
   flex model. Teams keeps the editable seat count, but the control is
   now inside the card flow instead of floating across the card edge.
------------------------------------------------------------------- */
#pricing .plans-ledger > .plan-row > .plan-action {
  box-sizing: border-box !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 252px !important;
  min-height: 224px !important;
  margin: 0 !important;
  padding: 22px 18px 18px !important;
  border: 1px solid rgba(26, 25, 23, 0.12) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  text-align: center !important;
  box-shadow: none !important;
}

#pricing .plans-ledger .plan-row--free > .plan-action {
  background: rgba(255, 255, 255, 0.64) !important;
  border-color: rgba(26, 25, 23, 0.12) !important;
}

#pricing .plans-ledger .plan-row--pro > .plan-action,
#pricing .plans-ledger .plan-row--teams > .plan-action {
  background: var(--app-selected-blue-bg, rgba(51, 86, 232, .085)) !important;
  border-color: var(--app-selected-blue-border, rgba(51, 86, 232, .20)) !important;
}

#pricing .plans-ledger > .plan-row > .plan-action > .plan-price-block {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

#pricing .plans-ledger .plan-price-block,
#pricing .plans-ledger .plan-price-block--free,
#pricing .plans-ledger .plan-price-block--pro,
#pricing .plans-ledger .plan-price-block--teams {
  box-sizing: border-box !important;
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 6px !important;
  text-align: center !important;
}

#pricing .plans-ledger .plan-price {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--blue) !important;
  font-family: var(--font-body, var(--font-ui)) !important;
  font-size: clamp(34px, 2.55vw, 42px) !important;
  font-weight: 790 !important;
  line-height: .96 !important;
  letter-spacing: -0.04em !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums lining-nums !important;
}

#pricing .plans-ledger .plan-price-note {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--text-sec) !important;
  font-family: var(--font-body, var(--font-ui)) !important;
  font-size: 13px !important;
  font-weight: 720 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: none !important;
  white-space: normal !important;
}

#pricing .plans-ledger .plan-row--teams > .plan-action > .team-seat-calculator {
  box-sizing: border-box !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
  text-align: center !important;
}

#pricing .plans-ledger .team-seat-label {
  box-sizing: border-box !important;
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--text-sec) !important;
  font-family: var(--font-body, var(--font-ui)) !important;
  font-size: 12px !important;
  font-weight: 740 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: normal !important;
}

#pricing .plans-ledger .team-seat-control {
  box-sizing: border-box !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  margin: 0 auto !important;
  padding: 5px 11px !important;
  border: 1px solid rgba(26, 25, 23, 0.13) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.76) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  text-align: center !important;
}

#pricing .plans-ledger .team-seat-stepper {
  display: none !important;
}

#pricing .plans-ledger .team-seat-control input {
  box-sizing: border-box !important;
  position: static !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--text) !important;
  font-family: var(--font-body, var(--font-ui)) !important;
  font-size: 20px !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  box-shadow: none !important;
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}

#pricing .plans-ledger .team-seat-control input::-webkit-outer-spin-button,
#pricing .plans-ledger .team-seat-control input::-webkit-inner-spin-button {
  margin: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#pricing .plans-ledger .team-seat-control span {
  box-sizing: border-box !important;
  display: inline-block !important;
  flex: 0 1 auto !important;
  max-width: 9ch !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--text-sec) !important;
  font-family: var(--font-body, var(--font-ui)) !important;
  font-size: 12px !important;
  font-weight: 720 !important;
  line-height: 1.15 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
}

#pricing .plans-ledger .plan-row--teams .plan-price-block--teams {
  flex: 0 0 auto !important;
  width: 100% !important;
  gap: 5px !important;
}

#pricing .plans-ledger .team-seat-divider,
#pricing .plans-ledger .team-seat-total,
#pricing .plans-ledger .team-seat-total-label,
#pricing .plans-ledger .team-seat-help {
  display: none !important;
}

#pricing .plans-ledger .plan-cta {
  box-sizing: border-box !important;
  position: static !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: hidden !important;
}

#pricing .plans-ledger .plan-cta .btn-icon {
  flex: 0 0 auto !important;
  width: 15px !important;
  height: 15px !important;
}

#pricing .plans-ledger .plan-row--free .plan-cta {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(26, 25, 23, 0.13) !important;
  color: var(--text) !important;
}

#pricing .plans-ledger .plan-row--pro .plan-cta,
#pricing .plans-ledger .plan-row--teams .plan-cta {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: var(--blue-text) !important;
}

@media (min-width: 1121px) {
  #pricing .plans-ledger > .plan-row > .plan-action {
    grid-column: 11 / span 3 !important;
    justify-self: end !important;
  }
}

@media (max-width: 860px) {
  #pricing .plans-ledger > .plan-row > .plan-action {
    max-width: none !important;
    min-height: 0 !important;
    padding: 16px !important;
    align-items: center !important;
  }

  #pricing .plans-ledger > .plan-row > .plan-action > .plan-price-block,
  #pricing .plans-ledger .plan-row--teams > .plan-action > .team-seat-calculator {
    min-height: 108px !important;
  }
}

/* ── PASS 6: INPUT CLARITY + CALCULATION SEPARATOR ────────────────
   Make it obvious that the Teams seat count is editable, and add a
   visible divider so the card reads as input above, result below.
------------------------------------------------------------------- */
#pricing .plans-ledger .team-seat-label {
  font-size: 12px !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
}

#pricing .plans-ledger .team-seat-divider {
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: 1px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: rgba(26, 25, 23, 0.10) !important;
}

#pricing .plans-ledger .plan-row--teams > .plan-action > .team-seat-calculator {
  gap: 14px !important;
}

#pricing .plans-ledger .team-seat-control {
  margin-bottom: 0 !important;
}

#pricing .plans-ledger .plan-row--teams .plan-price-block--teams {
  padding-top: 0 !important;
}

/* Pre-release fix: compact legal popover typography.
   Keep legal popovers visually subordinate to page copy and prevent
   browser/default table and list sizing from overriding the popover scale. */
.modal-overlay.site-modal {
  --site-popover-title-size: 16px;
  --site-popover-heading-size: 14.5px;
  --site-popover-body-size: 13px;
  --site-popover-meta-size: 12.5px;
  --site-popover-small-size: 11.75px;
}

.modal-overlay.site-modal .modal-body,
.modal-overlay.site-modal .modal-body--install,
.modal-overlay.site-modal .modal-body--install-sidebar,
.modal-overlay.site-modal .site-sidebar-card-body > :is(p, ul, ol),
.modal-overlay.site-modal .modal-body p,
.modal-overlay.site-modal .modal-body ul,
.modal-overlay.site-modal .modal-body ol,
.modal-overlay.site-modal .modal-body li {
  font-size: var(--site-popover-body-size);
  line-height: 1.58;
}

.modal-overlay.site-modal .modal-updated,
.modal-overlay.site-modal .site-sidebar-meta-text {
  font-size: var(--site-popover-meta-size);
  line-height: 1.45;
}

.modal-overlay.site-modal .modal-body .site-sidebar-card-title,
.modal-overlay.site-modal .modal-body h2.site-sidebar-card-title,
.modal-overlay.site-modal .modal-body h2 {
  font-size: var(--site-popover-heading-size);
  line-height: 1.28;
}

.modal-overlay.site-modal .policy-table,
.modal-overlay.site-modal .policy-table :is(thead, tbody, tr, th, td) {
  font-size: var(--site-popover-small-size) !important;
  line-height: 1.45;
}

.modal-overlay.site-modal .policy-table th {
  font-size: 10.5px !important;
  line-height: 1.3;
}

.modal-overlay.site-modal .policy-table td {
  padding: 8px 9px;
}

/* Final policy popover typography pass: keep legal popover copy compact and consistent. */
.site-modal:not(.site-modal--install) .modal-body {
  font-size: 12.5px !important;
  line-height: 1.58 !important;
}

.site-modal:not(.site-modal--install) .modal-body p,
.site-modal:not(.site-modal--install) .modal-body li,
.site-modal:not(.site-modal--install) .modal-body a {
  font-size: inherit !important;
  line-height: inherit !important;
}

.site-modal:not(.site-modal--install) .modal-body ul,
.site-modal:not(.site-modal--install) .modal-body ol {
  font-size: inherit !important;
  line-height: inherit !important;
  margin-top: 6px !important;
  margin-bottom: 10px !important;
}

.site-modal:not(.site-modal--install) .modal-body h2 {
  font-size: 13px !important;
  line-height: 1.32 !important;
  margin: 18px 0 7px !important;
}

.site-modal:not(.site-modal--install) .modal-updated {
  font-size: 11.5px !important;
  line-height: 1.42 !important;
}

.site-modal:not(.site-modal--install) .policy-table,
.site-modal:not(.site-modal--install) .policy-table th,
.site-modal:not(.site-modal--install) .policy-table td {
  font-size: 11px !important;
  line-height: 1.42 !important;
}

.site-modal:not(.site-modal--install) .policy-table th,
.site-modal:not(.site-modal--install) .policy-table td {
  padding: 9px 10px !important;
  vertical-align: top !important;
}


/* Final email/link pass: keep policy email links compact and prevent link text from overpowering policy copy. */
.site-modal:not(.site-modal--install) .modal-body a[href^="mailto:"],
.site-modal:not(.site-modal--install) .modal-body a[href^="mailto:"] * {
  font-size: 12px !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Language suggestion banner: soft locale prompt for visitors whose browser language matches a supported locale. */
.language-suggestion-banner {
  width: 100%;
  border-bottom: 1px solid rgba(28, 25, 22, 0.12);
  background: rgba(250, 247, 240, 0.96);
  color: #2f2b26;
  position: relative;
  z-index: 70;
}

.language-suggestion-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 9px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

.language-suggestion-copy {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: inherit;
}

.language-suggestion-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
}

.language-suggestion-link,
.language-suggestion-dismiss {
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.2;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.language-suggestion-link {
  border: 1px solid rgba(28, 25, 22, 0.22);
  background: #1c1916;
  color: #fffaf2;
}

.language-suggestion-dismiss {
  border: 1px solid rgba(28, 25, 22, 0.18);
  background: transparent;
  color: #4d4740;
  font: inherit;
}

.language-suggestion-link:hover,
.language-suggestion-link:focus-visible,
.language-suggestion-dismiss:hover,
.language-suggestion-dismiss:focus-visible {
  transform: translateY(-1px);
}

.language-suggestion-link:focus-visible,
.language-suggestion-dismiss:focus-visible {
  outline: 2px solid rgba(28, 25, 22, 0.45);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .language-suggestion-inner {
    padding: 10px 16px;
    flex-direction: column;
    gap: 7px;
  }

  .language-suggestion-actions {
    gap: 7px;
  }

  .language-suggestion-link,
  .language-suggestion-dismiss {
    min-height: 32px;
    padding: 7px 11px;
  }
}