/* BookSwift marketing site - shared design system.
   Dark/cream editorial system: Bricolage Grotesque + Geist Mono, brand
   yellow #F3C403. Component classes here are a 1:1 transcription of the
   design handoff's inline-style values (see downloads/design_handoff_
   bookswift_site/README.md) into a reusable stylesheet, so 9 pages don't
   each hand-repeat the same few hundred declarations. */

:root{
  --ink:#0A0A0A; --ink-alt:#0C0C0C; --ink-alt2:#0E0E0E; --ink-lift:#111110;
  --text:#F2F1EE;
  --text-60:rgba(242,241,238,.6); --text-55:rgba(242,241,238,.55); --text-45:rgba(242,241,238,.45);
  --text-40:rgba(242,241,238,.4); --text-35:rgba(242,241,238,.35); --text-32:rgba(242,241,238,.32);
  --text-30:rgba(242,241,238,.3);
  --gold:#F3C403; --gold-mid:#F7D642; --gold-pale:#FDF0AE;
  --gold-on-cream:#8A6E00;
  --cream:#F0EEE9; --cream2:#E9E6DF; --white:#FFFFFF;
  --ink-cream:#14120E;
  --ink-cream-60:rgba(20,18,14,.6); --ink-cream-58:rgba(20,18,14,.58); --ink-cream-55:rgba(20,18,14,.55); --ink-cream-45:rgba(20,18,14,.45);
  --line-dark:rgba(255,255,255,.07); --line-dark-12:rgba(255,255,255,.12);
  --line-light:rgba(20,18,14,.12);
  --positive:oklch(0.72 0.13 150); --positive-cream:oklch(0.52 0.13 150);
  --negative:oklch(0.68 0.17 25); --negative-cream:oklch(0.55 0.17 25);
}

/* overflow-x lives on body, NOT .mkt - setting overflow-x on .mkt while
   its own overflow-y stays "visible" makes the UA auto-compute overflow-y
   as "auto" (CSS Overflow spec), turning .mkt into its own scroll
   container and silently breaking every position:sticky element inside it
   (the marquee/hero-mock sticky panel on Home, most notably). */
body{ overflow-x:hidden; }
.mkt{ background:var(--ink); color:var(--text); font-family:'Bricolage Grotesque',sans-serif; }
.mkt *{ box-sizing:border-box; }
.mkt a{ color:var(--gold); }
.mkt a:hover{ color:#fff; }
.mkt .mono{ font-family:'Geist Mono',monospace; }

@keyframes mktRise{ from{ opacity:0; transform:translateY(20px) } to{ opacity:1; transform:none } }
@keyframes mktPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.2 } }
@keyframes mktDrift{ 0%,100%{ transform:translate(-50%,-50%) scale(1) } 50%{ transform:translate(-50%,-54%) scale(1.1) } }
@keyframes mktDriftY{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-18px) } }
@keyframes mktMarquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@keyframes mktSweep{ 0%{ transform:scaleX(0) } 55%,100%{ transform:scaleX(1) } }
@keyframes mktFade{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

.r1{ animation:mktRise .6s ease both; }
.r2{ animation:mktRise .8s ease both; }
.r3{ animation:mktRise .95s ease both; }
.r4{ animation:mktRise 1.05s ease both; }
.r5{ animation:mktRise 1.1s ease both; }
.r6{ animation:mktRise 1.15s ease both; }
.r7{ animation:mktRise 1.2s ease both; }

[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in{ opacity:1; transform:none; }

/* ── Section shells ───────────────────────────────────────────────── */
.mkt-wrap{ max-width:1240px; margin:0 auto; }
.mkt-sec{ padding:100px 44px; }
.mkt-sec-hairline{ border-top:1px solid var(--line-dark); }
.mkt-sec-cream{ background:var(--cream); color:var(--ink-cream); padding:100px 44px; }
.mkt-sec-cream2{ background:var(--cream2); color:var(--ink-cream); padding:90px 44px; }
.mkt-sec-ink-alt{ background:var(--ink-alt); color:var(--text); padding:100px 44px; border-top:1px solid var(--line-dark); }
.mkt-sec-lift{ background:var(--ink-lift); }

.mkt-eyebrow-row{ display:flex; align-items:center; gap:14px; }
.mkt-eyebrow{ font-family:'Geist Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.cmp-table-mobile{ display:none; }
.hero-cal-daypicker{ display:none; }
.mkt-eyebrow-num-dark{ font-family:'Geist Mono',monospace; font-size:11px; color:var(--text-30); }
.mkt-eyebrow-num-cream{ font-family:'Geist Mono',monospace; font-size:11px; color:rgba(20,18,14,.3); }

.mkt-h2{ font-size:clamp(32px,4.2vw,60px); line-height:.97; letter-spacing:-.045em; font-weight:800; margin:16px 0 0; max-width:22ch; text-wrap:balance; }
.mkt-h2-sm{ font-size:clamp(30px,3.6vw,50px); line-height:1; letter-spacing:-.045em; font-weight:800; margin:16px 0 0; max-width:18ch; text-wrap:balance; }
.mkt-body{ font-size:16px; line-height:1.65; margin:16px 0 0; text-wrap:pretty; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.mkt-btn{ display:inline-block; padding:16px 28px; border-radius:10px; font-size:15px; font-weight:600; text-decoration:none; border:none; cursor:pointer; font-family:'Bricolage Grotesque',sans-serif; transition:background .2s,border-color .2s,color .2s; }
/* .mkt prefixed again on each of these so they out-specify the blanket
   `.mkt a{color:gold}` link default above (a bare single-class selector
   like `.mkt-btn-gold` alone has LOWER specificity than `.mkt a`, since
   that rule also carries the `a` element selector - without this prefix
   every gold button rendered gold text on a gold background, invisible). */
.mkt .mkt-btn-gold{ background:var(--gold); color:var(--ink); }
.mkt .mkt-btn-gold:hover{ background:#fff; color:var(--ink); }
.mkt .mkt-btn-outline-dark{ border:1px solid rgba(255,255,255,.16); color:var(--text); background:transparent; }
.mkt .mkt-btn-outline-dark:hover{ border-color:rgba(255,255,255,.5); color:var(--text); }
.mkt .mkt-btn-ink{ background:var(--ink-cream); color:var(--text); }
.mkt .mkt-btn-ink:hover{ background:var(--gold); color:var(--ink-cream); }
.mkt .mkt-btn-outline-cream{ border:1px solid rgba(20,18,14,.25); color:var(--ink-cream); background:transparent; }
.mkt .mkt-btn-outline-cream:hover{ border-color:var(--ink-cream); }
.mkt .mkt-btn-outline-cream2{ border:1px solid rgba(20,18,14,.28); color:var(--ink-cream); background:transparent; }
.mkt .mkt-btn-outline-cream2:hover{ border-color:var(--ink-cream); }
.mkt .mkt-btn-cream-fill{ background:var(--ink-cream); color:#F7F6F3; }
.mkt .mkt-btn-cream-fill:hover{ background:#2E2A20; }
.mkt-btn-sm{ padding:11px 18px; font-size:13px; }

/* ── Hero ─────────────────────────────────────────────────────────── */
/* Full-width shell so a glow/grid background element can bleed edge to
   edge - actual copy goes inside .mkt-hero-inner, which keeps the usual
   1240px reading width. Before this, .mkt-hero itself carried max-width,
   so every hero's background gradient was boxed into the same 1240px
   column as the text instead of spanning the viewport. */
.mkt-hero{ position:relative; padding:84px 44px 96px; overflow:hidden; }
.mkt-hero-inner{ position:relative; max-width:1240px; margin:0 auto; }
.mkt-hero-centered{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:74px 24px 0; }
.mkt-hero-grid-overlay{ position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size:96px 96px; pointer-events:none; }
.mkt-glow{ position:absolute; left:50%; top:38%; width:1200px; height:700px; transform:translate(-50%,-50%); background:radial-gradient(ellipse, rgba(243,196,3,.13), transparent 65%); filter:blur(30px); animation:mktDriftY 14s ease-in-out infinite; pointer-events:none; }
.mkt-glow-side{ position:absolute; left:40%; top:45%; width:900px; height:520px; background:radial-gradient(ellipse, rgba(243,196,3,.12), transparent 65%); filter:blur(30px); animation:mktDrift 15s ease-in-out infinite; pointer-events:none; }
.mkt-glow-center{ position:absolute; left:50%; top:40%; width:1000px; height:560px; background:radial-gradient(ellipse, rgba(243,196,3,.13), transparent 65%); filter:blur(30px); animation:mktDrift 16s ease-in-out infinite; pointer-events:none; }
.mkt-pulse-row{ position:relative; display:inline-flex; align-items:center; gap:10px; font-family:'Geist Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-50,rgba(242,241,238,.5)); }
.mkt-pulse-dot{ width:6px; height:6px; border-radius:50%; background:var(--positive); animation:mktPulse 1.5s ease-in-out infinite; flex:none; }
.mkt-h1{ position:relative; font-size:clamp(52px,8.4vw,132px); line-height:.88; letter-spacing:-.05em; font-weight:800; margin:22px 0 0; max-width:15ch; text-wrap:balance; }
.mkt-h1-page{ position:relative; font-size:clamp(44px,6.4vw,100px); line-height:.9; letter-spacing:-.05em; font-weight:800; margin:20px 0 0; max-width:20ch; text-wrap:balance; }
.mkt-lead{ position:relative; font-size:18px; line-height:1.6; color:var(--text-60); max-width:62ch; margin:24px 0 0; text-wrap:pretty; }
.mkt-lead-centered{ position:relative; font-size:19px; line-height:1.55; color:var(--text-60); max-width:58ch; margin:26px auto 0; text-wrap:pretty; }
.mkt-cta-row{ position:relative; display:flex; gap:12px; margin-top:32px; }
.mkt-cta-row-center{ position:relative; display:flex; gap:12px; margin-top:32px; justify-content:center; }
.mkt-sweep{ position:relative; height:4px; width:min(560px,70vw); background:var(--gold); margin-top:18px; transform-origin:left; animation:mktSweep 1.6s cubic-bezier(.2,.8,.2,1) .3s both; }

/* ── Nav ──────────────────────────────────────────────────────────── */
.mkt-nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:18px 44px; background:rgba(10,10,10,.82); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-dark); font-family:'Bricolage Grotesque',sans-serif; color:var(--text); }
.mkt-nav-logo{ display:block; line-height:0; }
.mkt-nav-logo img{ height:38px; width:auto; display:block; }
.mkt-nav-links{ display:flex; gap:28px; font-family:'Geist Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.mkt-nav-links > a{ color:rgba(242,241,238,.55); text-decoration:none; transition:color .2s; }
.mkt-nav-links > a:hover{ color:var(--text); }
.mkt-nav-links > a.active{ color:var(--gold); }
.mkt-nav-right{ display:flex; align-items:center; gap:16px; }
.mkt-nav-right .mkt-nav-login{ font-family:'Geist Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(242,241,238,.55); text-decoration:none; }
.mkt-nav-right .mkt-nav-login:hover{ color:var(--text); }
.mkt-nav-right .mkt-nav-cta{ background:var(--gold); color:var(--ink); font-family:'Geist Mono',monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:11px 18px; border-radius:8px; font-weight:500; text-decoration:none; }
.mkt-nav-right .mkt-nav-cta:hover{ background:#fff; color:var(--ink); }

.mkt-nav-dd{ position:relative; padding-bottom:20px; margin-bottom:-20px; }
.mkt-nav-dd > a{ display:inline-flex; align-items:center; gap:6px; color:rgba(242,241,238,.55); text-decoration:none; transition:color .2s; }
.mkt-nav-dd > a:hover{ color:var(--text); }
.mkt-nav-dd > a.active{ color:var(--gold); }
.mkt-nav-dd .caret{ font-size:9px; display:inline-block; transition:transform .2s; }
.mkt-nav-dd:hover .caret, .mkt-nav-dd.open .caret{ transform:rotate(180deg); }
.mkt-nav-dd-menu{
  position:absolute; top:100%; left:-14px; margin-top:0; min-width:210px; padding:8px;
  border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:rgba(14,14,14,.97); backdrop-filter:blur(14px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .2s, transform .2s;
}
.mkt-nav-dd:hover .mkt-nav-dd-menu, .mkt-nav-dd.open .mkt-nav-dd-menu{ opacity:1; transform:none; pointer-events:auto; }
.mkt-nav-dd-menu a{ display:block; padding:12px 16px; text-decoration:none; color:rgba(242,241,238,.72); border-radius:8px; font-size:11px; letter-spacing:.08em; }
.mkt-nav-dd-menu a:hover, .mkt-nav-dd-menu a:focus-visible{ background:rgba(255,255,255,.06); color:var(--gold); outline:none; }

/* ── Mobile nav (hamburger + slide-down panel) ───────────────────────
   Hidden entirely on desktop; the media query below both reveals the
   burger and hides the desktop link row. */
.mkt-nav-burger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px; padding:0; background:none; border:none; cursor:pointer; flex:none; }
.mkt-nav-burger span{ display:block; width:100%; height:1.5px; background:var(--text); border-radius:1px; transition:transform .25s, opacity .25s; }
.mkt-nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.mkt-nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.mkt-nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
.mkt-nav-mobile{
  display:none; flex-direction:column; gap:2px;
  position:sticky; top:0; z-index:49;
  background:rgba(10,10,10,.97); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-dark);
  max-height:0; overflow:hidden; transition:max-height .3s ease;
  font-family:'Geist Mono',monospace; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
}
.mkt-nav-mobile.open{ max-height:80vh; overflow-y:auto; }
.mkt-nav-mobile > a{ display:block; padding:14px 20px; color:rgba(242,241,238,.75); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.06); }
.mkt-nav-mobile > a.active{ color:var(--gold); }
.mkt-nav-mobile > a.sub{ padding-left:34px; color:rgba(242,241,238,.5); font-size:12px; }
.mkt-nav-mobile-label{ padding:14px 20px 4px; color:rgba(242,241,238,.35); font-size:11px; letter-spacing:.1em; }
.mkt-nav-mobile-actions{ display:flex; gap:10px; padding:16px 20px 20px; }
.mkt-nav-mobile-actions button{ flex:1; text-align:center; padding:12px 0; font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; -webkit-appearance:none; appearance:none; }
.mkt-nav-mobile-actions .mkt-nav-login{ border:1px solid rgba(255,255,255,.16); border-radius:8px; background:transparent; color:rgba(242,241,238,.85); }
.mkt-nav-mobile-actions .mkt-nav-cta{ border:none; border-radius:8px; background:var(--gold); color:var(--ink); font-weight:600; }

/* ── Footer ───────────────────────────────────────────────────────── */
.mkt-footer{ background:var(--ink); border-top:1px solid var(--line-dark); font-family:'Bricolage Grotesque',sans-serif; color:var(--text); padding:66px 44px 28px; }
.mkt-footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; max-width:1240px; margin:0 auto; }
.mkt-footer-logo{ height:46px; width:auto; display:block; }
.mkt-footer-desc{ color:var(--text-45); font-size:14px; line-height:1.6; max-width:34ch; margin:18px 0 0; }
.mkt-footer-col-title{ font-family:'Geist Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-30); margin-bottom:16px; }
.mkt-footer-links{ display:flex; flex-direction:column; gap:11px; font-size:14px; }
.mkt-footer-links a{ color:rgba(242,241,238,.7); text-decoration:none; }
.mkt-footer-links a:hover{ color:var(--gold); }
.mkt-footer-bottom{ display:flex; align-items:center; justify-content:space-between; max-width:1240px; margin:52px auto 0; padding-top:22px; border-top:1px solid rgba(255,255,255,.06); font-family:'Geist Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-30); flex-wrap:wrap; gap:10px; }

/* ── Alternating feature/industry rows (Features, Industry pages) ─── */
.mkt-rows{ max-width:1240px; margin:0 auto; display:flex; flex-direction:column; gap:110px; }
.mkt-row{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.mkt-row.flip .mkt-row-text{ grid-column:2; grid-row:1; }
.mkt-row.flip .mkt-row-panel{ grid-column:1; grid-row:1; }
.mkt-row-chip{ font-family:'Geist Mono',monospace; font-size:10px; letter-spacing:.08em; color:var(--ink-cream); background:var(--gold); border-radius:6px; padding:5px 7px; }
.mkt-row-tag{ font-family:'Geist Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-on-cream); }
.mkt-row-title{ font-size:clamp(28px,3.2vw,44px); line-height:1.02; letter-spacing:-.04em; font-weight:800; margin:18px 0 0; max-width:20ch; }
.mkt-row-blurb{ font-size:16px; line-height:1.65; color:var(--ink-cream-58); margin:16px 0 0; max-width:44ch; text-wrap:pretty; }
.mkt-row-items{ display:flex; flex-direction:column; gap:14px; margin-top:28px; border-top:1px solid var(--line-light); padding-top:24px; }
.mkt-row-item{ display:flex; gap:14px; align-items:flex-start; }
.mkt-row-item .dot{ width:5px; height:5px; border-radius:50%; background:var(--ink-cream); margin-top:9px; flex:none; }
.mkt-row-item .t{ font-size:15px; font-weight:700; letter-spacing:-.015em; }
.mkt-row-item .b{ font-size:14px; line-height:1.55; color:var(--ink-cream-55); margin-top:3px; max-width:42ch; }

/* ── Mock panel (product screenshot, built from markup) ─────────────── */
.mkt-mock-outer{ border-radius:28px; padding:20px; background:linear-gradient(150deg, #F3C403 0%, rgba(243,196,3,.35) 38%, rgba(20,18,14,.9) 100%); box-shadow:0 40px 80px -50px rgba(20,18,14,.7); }
.mkt-mock-inner{ border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,.1); background:linear-gradient(180deg, #171717, #0B0B0B); color:var(--text); box-shadow:0 30px 70px -40px rgba(0,0,0,.9); }
.mkt-mock-title{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line-dark); font-family:'Geist Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-42,rgba(242,241,238,.42)); }
.mkt-mock-title .badge{ color:var(--gold); }
.mkt-mock-body{ padding:22px 20px; }
.mkt-mock-rows{ display:flex; flex-direction:column; gap:8px; }
.mkt-mock-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); }
.mkt-mock-row.hot{ background:rgba(243,196,3,.09); border-color:rgba(243,196,3,.45); }
.mkt-mock-row .l{ font-size:14px; font-weight:600; line-height:1.25; }
.mkt-mock-row .s{ font-family:'Geist Mono',monospace; font-size:10px; color:var(--text-40); margin-top:4px; }
.mkt-mock-row .r{ font-family:'Geist Mono',monospace; font-size:10px; flex:none; color:var(--text-50,rgba(242,241,238,.5)); }
.mkt-mock-row.hot .r{ color:var(--gold); }
.mkt-mock-note{ font-family:'Geist Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-32); margin-top:18px; }

/* ── Closing CTA (yellow gradient) ───────────────────────────────── */
.mkt-cta-gold{ padding:130px 44px; text-align:center; color:var(--ink-cream); background:linear-gradient(180deg, #F3C403 0%, #F7D642 46%, #FDF0AE 100%); }
.mkt-cta-gold h2{ font-size:clamp(34px,5vw,76px); line-height:.92; letter-spacing:-.05em; font-weight:800; margin:0 auto; max-width:20ch; text-wrap:balance; }
.mkt-cta-gold .row{ display:flex; gap:12px; justify-content:center; margin-top:32px; }

/* ── FAQ accordion ────────────────────────────────────────────────── */
.mkt-faq-card{ cursor:pointer; border-radius:14px; padding:22px 24px; border:1px solid var(--line-dark); background:var(--ink-alt2); transition:all .3s; }
.mkt-faq-card.open{ border-color:rgba(243,196,3,.4); background:rgba(243,196,3,.04); }
.mkt-faq-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.mkt-faq-q{ font-size:17px; font-weight:600; letter-spacing:-.02em; }
.mkt-faq-sign{ font-family:'Geist Mono',monospace; font-size:18px; flex:none; color:var(--text-40); transition:all .3s; }
.mkt-faq-card.open .mkt-faq-sign{ color:var(--gold); transform:rotate(45deg); }
.mkt-faq-body{ max-height:0; opacity:0; overflow:hidden; transition:all .35s ease; }
.mkt-faq-card.open .mkt-faq-body{ max-height:240px; opacity:1; }
.mkt-faq-body p{ margin:14px 0 0; font-size:15px; line-height:1.65; color:var(--text-60); max-width:70ch; }

/* ── Home "scroll through the parts" sticky story section ───────────── */
.story-grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.story-item{ min-height:78vh; }
.story-mobile-panel{ display:none; }

/* ── Generic responsive grid utilities ───────────────────────────────
   Every page has several `display:grid` sections (stat bands, card grids,
   split hero/panel layouts) that need to collapse to one column on
   mobile. Rather than hand-write a media override per section, the grids
   themselves use these classes (gap/columns still set per-use via a
   data attribute isn't needed - column COUNT is the only thing that
   changes responsively, gap stays constant). */
.mkt-g2{ display:grid; grid-template-columns:1fr 1fr; }
.mkt-g3{ display:grid; grid-template-columns:repeat(3,1fr); }
.mkt-g4{ display:grid; grid-template-columns:repeat(4,1fr); }
.mkt-g6{ display:grid; grid-template-columns:repeat(6,1fr); }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width:900px){
  /* Every section on every page ends up the same width on mobile,
     regardless of whether its padding was set via one of the section
     classes below or hardcoded inline on that one page (several were -
     an inline `padding:96px 44px` on a <section> silently wins over a
     class's own media-query padding, since inline beats a non-!important
     stylesheet rule no matter what the viewport is). !important on just
     the horizontal sides fixes every section at once without having to
     hunt down and edit each page's own inline style. */
  .mkt section, .mkt-nav, .mkt-nav-mobile, .mkt-footer{
    padding-left:20px !important;
    padding-right:20px !important;
  }
  .mkt-wrap, .mkt-hero-inner, .mkt-rows, .mkt-footer-grid, .mkt-footer-bottom{
    max-width:none !important;
  }

  .mkt-sec, .mkt-sec-cream, .mkt-sec-cream2, .mkt-sec-ink-alt{ padding-top:56px; padding-bottom:56px; }
  .mkt-hero{ padding-top:56px; padding-bottom:56px; }
  .mkt-row, .mkt-row.flip{ grid-template-columns:1fr; gap:34px; }
  .mkt-row .mkt-row-text, .mkt-row.flip .mkt-row-text{ grid-column:1; grid-row:1; }
  .mkt-row .mkt-row-panel, .mkt-row.flip .mkt-row-panel{ grid-column:1; grid-row:2; }

  .mkt-nav{ padding-top:14px; padding-bottom:14px; }
  .mkt-nav-links, .mkt-nav-right{ display:none; }
  .mkt-nav-burger{ display:flex; }
  .mkt-nav-mobile{ display:flex; }

  .mkt-footer-grid{ grid-template-columns:1fr; gap:32px; }
  .mkt-footer-bottom{ flex-direction:column; align-items:flex-start; }
  .mkt-cta-gold h2, .mkt-h1-page{ font-size:clamp(32px,9vw,52px); }
  .mkt-h1{ font-size:clamp(42px,13vw,64px); }

  /* Sticky cross-fading panel makes no sense in one column - swap it for a
     static panel copy under each story item instead (see landing.php). */
  .story-grid{ grid-template-columns:1fr; gap:12px; }
  .story-item{ min-height:auto; padding-bottom:28px; }
  .story-sticky-col{ display:none; }
  .story-mobile-panel{ display:block; margin:20px 0 0 28px; }

  .mkt-g2, .mkt-g3, .mkt-g4, .mkt-g6{ grid-template-columns:1fr; gap:16px; }
  .mkt-appearance-grid{ grid-template-columns:1fr !important; gap:36px !important; }
  .mkt-appearance-grid .phone-mock{ justify-self:center; max-width:100%; }

  /* Home FAQ split (380px fixed left column + accordion) - collapses to
     one column; the "Still unsure" card no longer needs to be as wide as
     a whole desktop sidebar. */
  .mkt-faq-grid{ grid-template-columns:1fr !important; gap:28px !important; }

  /* Lifecycle: a horizontal bar across 6 side-by-side columns doesn't fit
     one column, so it becomes a vertical timeline - dot+line on the left,
     copy on the right, matching the site's other row-item pattern. */
  .life-grid{ display:flex !important; flex-direction:column; gap:0; position:static !important; }
  .life-track-h{ display:none; }
  .life-item{ display:flex !important; gap:16px; padding-bottom:28px; position:relative; }
  .life-item .life-track-v{ position:absolute; left:10px; top:28px; bottom:0; width:2px; background:rgba(255,255,255,.09); }
  .life-item:last-child .life-track-v{ display:none; }
  .life-item .life-dot{ margin-bottom:0 !important; flex:none; }
  .life-item .life-copy{ flex:1; padding-top:2px; }

  /* Hero product-demo calendar: a 7-column horizontal scroller reads as
     a cramped desktop table shrunk down. On mobile it becomes a single
     vertical agenda instead - one day per row, no horizontal drag, each
     row only as tall as its own bookings need. */
  .hero-cal-scroll{ overflow-x:visible !important; }
  .hero-cal-grid{ grid-template-columns:1fr !important; gap:0 !important; }
  /* Listing all seven days stacked ran way too long for a hero. Instead
     show one day at a time, picked from a compact date-strip above it -
     reads like an actual mobile calendar app, not a shrunk desktop table. */
  .hero-cal-day{ display:none !important; min-height:auto !important; padding:16px 18px !important; }
  .hero-cal-day.active{ display:block !important; }

  .hero-cal-head{ flex-direction:column !important; align-items:flex-start !important; gap:6px; }

  .hero-cal-daypicker{ display:flex; gap:6px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.07); overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .hero-cal-daybtn{ flex:none; display:flex; flex-direction:column; align-items:center; gap:2px; width:42px; padding:8px 0; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:transparent; color:rgba(242,241,238,.45); cursor:pointer; font-family:'Geist Mono',monospace; transition:all .2s; }
  .hero-cal-daybtn .hcd-num{ font-size:14px; font-weight:700; line-height:1.1; }
  .hero-cal-daybtn .hcd-name{ font-size:8px; letter-spacing:.08em; }
  .hero-cal-daybtn.active{ background:#F3C403; border-color:#F3C403; color:#0A0A0A; }

  /* The hero eyebrow line wraps into a lopsided two-line mess when it's
     laid out as a flex row (dot pinned left, text flowing off on its
     own) at narrow widths - let it wrap as plain centered text instead. */
  .mkt-pulse-row{ display:block; text-align:center; }
  .mkt-pulse-dot{ display:inline-block; vertical-align:middle; margin-right:8px; }

  /* Theme presets: eight labelled pills wrap to four cramped rows. On
     mobile the label is redundant next to the swatch itself, so drop it
     and show plain color dots in one row. */
  #themeSwatches{ flex-wrap:nowrap !important; gap:10px !important; overflow-x:auto; padding-bottom:4px; }
  .theme-chip{ padding:0 !important; width:32px !important; height:32px !important; flex:none; border-radius:50% !important; justify-content:center !important; }
  .theme-chip-label{ display:none; }
  .theme-chip .theme-dot{ width:14px !important; height:14px !important; }

  /* The mobile nav panel needs to read as a fully solid sheet, not a
     translucent overlay the page behind it shows through - and it should
     float over the page as an overlay instead of pushing the rest of the
     sections down when it opens (the header is a steady 67px tall here). */
  .mkt-nav-mobile{
    background:#0A0A09; backdrop-filter:none;
    position:fixed; top:67px; left:0; right:0;
  }
  .mkt-nav-mobile.open{ max-height:calc(100vh - 67px); }

  /* Vertical timeline: fill each connecting segment top-to-bottom as its
     dot activates, the same progressive-fill effect as the desktop bar. */
  .life-item .life-track-v{ overflow:hidden; }
  .life-item .life-track-v-fill{ position:absolute; left:0; top:0; width:100%; height:0%; background:#F3C403; transition:height .45s cubic-bezier(.2,.7,.2,1); }

  /* Pricing comparison table: a wide 4-column grid forces a horizontal
     scroll on mobile, so swap it for one stacked card per plan instead. */
  .cmp-table-wrap{ display:none !important; }
  .cmp-table-mobile{ display:block; }
}