/* Revnew premium static design system */

:root{
  /* Color */
  --black:#000000;
  --ink:#050505;
  --surface:rgba(255,255,255,.045);
  --surface-2:#111111;
  --surface-3:#181818;
  --surface-strong:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.12);
  --border:#2A2A2A;
  --text:#f5f5f0;
  --muted:rgba(245,245,240,.72);
  --muted-2:var(--text);
  --light-muted:var(--muted);
  --light-rule:var(--border);
  --light-hover:var(--surface-3);
  --bg:var(--black);
  --fg:var(--text);
  --fg-soft:var(--text);
  --fg-mute:var(--text);
  --rule:var(--border);
  --rule-h:#333333;
  --paper:var(--surface);
  --paper-soft:var(--light-hover);
  --ink-soft:var(--text);
  --ink-mute:var(--muted);
  --ink-rule:var(--border);
  --feature-accent:#38BDF8;
  --btn-fill:#fff;
  --btn-fill-hover:#e8e8e4;
  --button-h:56px;
  --button-radius:12px;
  --button-font:18px;
  --button-line:22px;
  --button-weight:800;
  /* Layout */
  --maxw:1440px;
  /* Side gutter. Widened at laptop/desktop widths so content breathes off the
     edges instead of hugging them; mobile is pinned to 20px below (<=900px). */
  --pad:clamp(20px,3.4vw,52px);
  --section-y:clamp(72px,7.5vw,112px);
  --section-y-tight:clamp(56px,6vw,88px);
  /* Cap lowered 132->96 so the pricing hero card clears the fold on short
     desktop viewports (1536x~790 at 125% scaling); every .page-hero page
     shifts equally, keeping cross-page hero alignment. */
  --hero-y:clamp(72px,7vw,96px);
  --header-logo-col:220px;
  --header-cta-col:220px;
  --header-h:92px;
  --logo-w:72px;
  --logo-mobile-w:60px;
  --book-inset:clamp(28px,3vw,44px);
  /* Spacing */
  --space-xs:8px;
  --space-s:12px;
  --space-m:20px;
  --space-l:32px;
  --space-xl:56px;
  --space-2xl:96px;
  /* Type scale (role tokens; applied via the EOF TYPE & RHYTHM SYSTEM block) */
  --t-display:clamp(44px,5vw,84px);   /* home marketing hero h1 */
  --t-title:clamp(38px,3.8vw,62px);   /* interior page-hero h1 */
  --t-section:clamp(28px,2.9vw,46px); /* section h2 */
  --t-card:clamp(24px,1.6vw,28px);    /* h3 / card headings */
  --t-lead:clamp(21px,1.35vw,24px);   /* intro paragraphs */
  --t-body:clamp(20px,1.22vw,22px);   /* primary body / list copy */
  --t-small:clamp(17px,calc(16.5px + .1vw),18px); /* metadata, captions */
  --t-label:17px;                     /* eyebrow / kicker */
  --weight-small:700;
  --t-price:clamp(44px,3.4vw,64px);   /* pricing amount */
  --sans:'Manrope',system-ui,sans-serif;
  --serif:'Manrope',sans-serif;
  /* Misc */
  --radius:8px;
  --shadow:0 18px 44px rgba(0,0,0,.18);
  /* Motion. Measured on the mobile nav panel's real 572px travel: the default
     `ease` throws 82px in the very first frame, which is the snap that made the
     dropdowns feel wrong. This launches ~5x gentler (16px) and has a lower
     mid-flight peak, so it reads as one smooth move. Panel and its chevron must
     share curve AND duration or the arrow lands early and they stop feeling
     like a single gesture. */
  --ease-expand:cubic-bezier(.4,0,.2,1);
  --dur-expand:320ms;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);font-size:var(--t-body);line-height:1.6;
  color:var(--fg);background:var(--bg);
  position:relative;
  /* clip (not hidden) never creates a scroll container, so position:sticky
     descendants keep working on iOS Safari while horizontal overflow is still
     contained. See TECH_DEBT re: sticky-header/overflow interplay. */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3,h4,h5,h6,p,ul,ol,blockquote,figure{margin:0}
ul{list-style:none;padding:0}
[id]{scroll-margin-top:96px}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.skip-link{
  position:fixed;
  top:12px;
  left:12px;
  z-index:3000;
  padding:10px 14px;
  border-radius:8px;
  background:#f5f5f0;
  color:#050505;
  font-weight:800;
  transform:translateY(-160%);
  transition:transform 160ms ease;
}
.skip-link:focus{transform:translateY(0)}
main{position:relative;z-index:1}

/* Scroll reveal system: short, restrained motion for small content groups only.
   Large sections and the shared shell always paint immediately. */
/* No will-change / backface-visibility here on purpose. There are ~55 .reveal
   elements per page and both properties pre-promote every one of them to its
   own compositor layer, which measured 45 layers and ~30MB of GPU memory on a
   390px viewport. Phones evict layers under that pressure and re-rasterise
   while scrolling, which is felt as lag. opacity and transform are composited
   automatically for the duration of the transition anyway, so pre-promoting
   buys a first-frame hitch at best and costs memory on every element. */
body.reveal-ready .reveal{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:
    opacity 420ms cubic-bezier(.22,1,.36,1),
    transform 420ms cubic-bezier(.22,1,.36,1);
}

body.reveal-ready .reveal.is-revealed,
.reveal.is-revealed{
  opacity:1;
  transform:translate3d(0,0,0);
}

.reveal-stagger > .reveal:nth-child(2){transition-delay:35ms}
.reveal-stagger > .reveal:nth-child(3){transition-delay:70ms}
.reveal-stagger > .reveal:nth-child(4){transition-delay:105ms}
.reveal-stagger > .reveal:nth-child(n+5){transition-delay:140ms}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.wrap,.hero-grid,.split,.card-grid,.feature-panel,.feature-panel-body,.process-line,.detail-grid,.book-layout,.stat-strip,.pricing-card,.white-card,.dark-card,.feature-item,.step-card,.detail-card,.faq-shell,.book-embed,.book-side,.founder{min-width:0}
.hero-grid > *,.split > *,.card-grid > *,.feature-panel-body > *,.process-line > *,.detail-grid > *,.book-layout > *,.stat-strip > *,.founder > *{min-width:0}
h1,h2,h3,h4,.lead,p,li,summary,span,strong{max-width:100%;overflow-wrap:break-word}
.section{padding:clamp(72px,8vw,96px) 0}
.section-tight{padding:clamp(52px,6vw,64px) 0}
.dark-band{background:var(--bg);color:var(--fg)}
.light-band{background:var(--bg);color:var(--fg)}
.soft-band{background:var(--bg);color:var(--fg)}
.section-rule{border-top:1px solid var(--rule)}
.light-band.section-rule,.soft-band.section-rule{border-top-color:var(--rule)}

.eyebrow{
  font-size:16px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-mute);margin-bottom:18px;
}
.light-band .eyebrow,.soft-band .eyebrow,.white-card .eyebrow,.pricing-card .eyebrow{color:var(--fg-mute)}
h1{font-weight:800;font-size:clamp(44px,7vw,88px);line-height:1.08;letter-spacing:-.04em;text-wrap:balance}
h2{font-weight:800;font-size:clamp(34px,5vw,64px);line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
h3{font-weight:800;font-size:clamp(22px,2.1vw,30px);line-height:1.2;letter-spacing:-.014em}
h4{font-weight:800;font-size:21px;line-height:1.35}
.lead{font-size:clamp(18px,1.3vw,21px);line-height:1.55;color:var(--fg-soft);max-width:58ch}
.light-band .lead,.soft-band .lead,.white-card .lead,.pricing-card .lead{color:var(--fg-soft)}
.serif{font-family:var(--serif);font-style:italic;font-weight:500}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--button-h);padding:16px 26px;border:1px solid var(--btn-fill);border-radius:var(--button-radius);
  background:var(--btn-fill);color:#0a0a0a;
  font-family:var(--sans);font-weight:var(--button-weight);font-size:var(--button-font);line-height:var(--button-line);white-space:nowrap;
  transition:background 180ms,color 180ms,border-color 180ms,transform 180ms;
}
.btn:hover{background:var(--btn-fill-hover);color:#000;transform:translateY(-1px)}
.btn:active,.ft-cta:active{transform:scale(.975)}
.btn-ghost{background:rgba(255,255,255,.92);color:#0a0a0a;border-color:#fff;box-shadow:0 6px 18px -12px rgba(0,0,0,.45)}
.btn-ghost:hover{background:rgba(255,255,255,.82);border-color:#fff;color:#000}
.actions,.hero-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

.site-header{
  position:sticky;top:0;z-index:100;background:rgba(0,0,0,.92);
  border-bottom:1px solid var(--rule);
}
.brand{display:flex;align-items:center;flex:0 0 auto}
.site-nav{display:flex;align-items:center;gap:34px}
.site-nav a,.nav-trigger{font-size:18px;font-weight:800;color:var(--fg-mute);transition:color 160ms,background 160ms,border-color 160ms;letter-spacing:.01em}
.site-nav a:not(.nav-cta),.nav-trigger{position:relative}
.site-nav a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform 180ms ease;
}
.site-nav a:not(.nav-cta):hover::after,.site-nav a:not(.nav-cta)[aria-current="page"]::after{transform:scaleX(1)}
.site-nav a:hover,.site-nav a[aria-current="page"],.nav-trigger:hover,.nav-trigger.is-active,.nav-dropdown.is-open .nav-trigger{color:var(--fg)}
.site-nav .nav-cta{
  min-width:150px;min-height:56px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--bg);background:var(--fg);padding:15px 24px;border:1px solid var(--fg);
}
.site-nav .nav-cta:hover,.site-nav .nav-cta[aria-current="page"]{
  background:var(--bg);color:var(--fg);
}
.mobile-home{display:none}
.nav-dropdown{position:relative}
.nav-dropdown::after{
  content:"";position:absolute;left:-16px;right:-16px;top:100%;height:18px;
}
.nav-trigger{display:inline-flex;align-items:center;gap:8px;padding:0}
.nav-trigger::before{
  content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);order:2;
  transition:transform var(--dur-expand) var(--ease-expand);
}
.nav-dropdown.is-open .nav-trigger::before{transform:rotate(225deg) translateY(-1px)}
.dropdown-panel{
  position:absolute;top:calc(100% + 12px);left:50%;width:min(520px,calc(100vw - 40px));
  transform:translateX(-50%) translateY(8px);padding:20px;border:1px solid var(--rule-h);border-radius:12px;
  background:var(--surface-2);color:var(--fg);box-shadow:0 16px 40px rgba(0,0,0,.45);opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity 160ms ease,transform 160ms ease,visibility 160ms ease;
}
.nav-dropdown.is-open .dropdown-panel{
  opacity:1;pointer-events:auto;visibility:visible;transform:translateX(-50%) translateY(0);
}
.dropdown-panel a{
  display:grid;gap:5px;padding:18px 22px;border:0;color:var(--fg);
  border-radius:10px;
  transition:background 150ms ease;
}
.dropdown-panel a:hover,.dropdown-panel a:focus-visible{background:var(--surface-3)}
.dropdown-panel a[aria-current="page"]{background:rgba(56,189,248,.08)}
.dropdown-panel strong{font-size:16px;line-height:1.3;color:var(--fg);font-weight:800}
.dropdown-panel span{font-size:16px;line-height:1.45;color:var(--fg-mute);font-weight:700}
.dropdown-panel-icons a{
  grid-template-columns:44px minmax(0,1fr);
  align-items:center;
  gap:13px;
  padding:11px 13px;
}
.dropdown-panel-icons .nav-icon{
  display:grid;
  place-items:center;
  align-self:center;
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  border-radius:11px;
  color:var(--fg);
  background:rgba(255,255,255,.07);
  border:0;
  font-size:22px;
  line-height:1;
  font-weight:800;
  font-family:Manrope,system-ui,sans-serif;
  text-align:center;
}
.dropdown-panel-icons .icon-booking{
  font-size:25px;
}
.dropdown-panel-icons .icon-ai{
  font-size:25px;
  font-weight:700;
}
.dropdown-panel-icons .nav-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.dropdown-panel-icons .nav-copy span{
  color:var(--fg-mute);
  font-size:16px;
  line-height:1.45;
  font-weight:700;
}
.dropdown-heading{
  margin:0 0 12px;
  padding:0 4px 12px;
  border-bottom:1px solid var(--rule);
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--fg-mute);
}
@media (min-width: 1024px) {
  #included-menu.dropdown-panel {
    width: 540px;
    padding: 14px;
  }
  #about-menu.dropdown-panel {
    width: 396px;
    padding: 14px;
  }
  .dropdown-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  #about-menu .dropdown-grid {
    grid-template-columns: 1fr;
  }
}
.hamburger{display:none;flex-direction:column;gap:5px;padding:10px}
.hamburger span{display:block;width:22px;height:2px;background:var(--fg);transition:transform 200ms}
.hamburger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.hero{padding:clamp(58px,7vw,92px) 0 clamp(44px,5vw,64px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);gap:clamp(34px,6vw,72px);align-items:center}
.hero-copy h1{max-width:13ch;margin-bottom:24px;font-size:clamp(48px,7vw,92px)}
.hero-copy .lead{margin-bottom:34px}
.hero-narrative{
  max-width:62ch;
  margin:0 0 34px;
  color:var(--fg-mute);
  font-size:clamp(18px,1.32vw,20px);
  line-height:1.65;
}
.hero-narrative p{
  display:inline;
}
.hero-narrative p + p::before{
  content:" ";
}
.hero-narrative p:last-child{
  display:block;
  margin-top:14px;
  color:var(--fg);
  font-weight:700;
}
.hero-actions{
  flex-direction:row;
}
.hero-actions .btn{
  width:auto;
  flex:0 1 auto;
}

/* Illustrative platform badges under the hero CTAs — decorative stars, not a
   live rating claim (no numeric score, no outbound links). */
/* Badges (left) and the two CTAs (right) share one row under the showcase,
   filling the empty space beside the stars. They wrap to stacked rows only
   when the column is too narrow to hold both. */
.showcase-cta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:18px;
  flex-wrap:wrap;
  /* Slightly larger left inset than right so the row reads as nudged right of
     center under the showcase, while both ends stay safely inside its edges
     (flex-wrap keeps it from ever overflowing them). */
  padding-left:clamp(18px,3vw,30px);
  padding-right:10px;
}
.review-badges{
  display:flex;
  align-items:center;
  gap:clamp(16px,2vw,28px);
  flex-wrap:wrap;
}
/* In the shared row the badges use a tighter internal gap so both they and the
   CTAs fit on one line beside the empty space. */
.showcase-cta-row .review-badges{
  gap:clamp(14px,1.2vw,18px);
}
/* Compact CTAs so both fit beside the badges on wide columns (owner-approved
   smaller buttons); they keep full size everywhere else. */
.showcase-cta-row .hero-actions{
  gap:8px;
  flex-shrink:0;
}
.showcase-cta-row .hero-actions .btn{
  min-width:0;
  padding:11px 16px;
  min-height:46px;
  font-size:15px;
}
/* Owner request: both CTAs in this row read as the same solid white, not
   one solid and one faded/greyish ghost. */
.showcase-cta-row .hero-actions .btn-ghost{
  background:var(--btn-fill);
  border-color:var(--btn-fill);
  color:#0a0a0a;
}
.showcase-cta-row .hero-actions .btn-ghost:hover{
  background:var(--btn-fill-hover);
  border-color:var(--btn-fill-hover);
  color:#000;
}
/* On the desktop hero the badges and CTAs must read as one line under the
   showcase. The hero's right column is narrower than the two at their default
   size, so both step down here to buy back the ~130px that forced a second row.
   Declared after the base .btn sizing above so it wins on source order.
   flex-wrap stays on: if the column still can't hold the line (narrow desktop
   widths) it wraps rather than overflowing, and the auto margin keeps the CTAs
   on the showcase's right edge when it does. Below 1080px the showcase is
   full-width and stacked, where the CTAs belong left-aligned under the badges,
   so none of this applies. */
@media(min-width:1080px){
  .showcase-cta-row{
    gap:12px;
  }
  .showcase-cta-row .review-badges{
    gap:10px;
    flex-wrap:nowrap;
    min-width:0;
  }
  .showcase-cta-row .review-badge{
    padding-right:10px;
    min-width:0;
  }
  .showcase-cta-row .review-badge-head{
    gap:5px;
    font-size:12.5px;
  }
  .showcase-cta-row .review-badge-head span{
    white-space:nowrap;
  }
  .showcase-cta-row .review-badge-logo{
    width:17px;
    height:17px;
  }
  .showcase-cta-row .review-badge-stars{
    gap:1px;
  }
  .showcase-cta-row .review-badge-stars .star-icon{
    width:11px;
    height:11px;
  }
  .showcase-cta-row .hero-actions{
    margin-left:auto;
  }
  .showcase-cta-row .hero-actions .btn{
    padding:10px 13px;
    min-height:42px;
    font-size:13.5px;
    white-space:nowrap;
  }
}
.review-badge{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-right:clamp(16px,2vw,28px);
  border-right:1px solid var(--rule);
}
.review-badge:last-child{
  padding-right:0;
  border-right:0;
}
.review-badge-head{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  font-size:15px;
  color:var(--fg);
}
.review-badge-logo{
  display:block;
  width:22px;
  height:22px;
  flex:0 0 auto;
}
.review-badge-stars{
  display:flex;
  gap:2px;
  color:#FBBF24;
}
.star-icon{
  width:15px;
  height:15px;
}
@media(max-width:520px){
  .review-badges{
    gap:14px 20px;
  }
  .review-badge{
    padding-right:14px;
  }
}
@media(max-width:420px){
  /* Keep Google/Facebook/Trustpilot on one row on phones, buttons wrap below. */
  .review-badges{
    flex-wrap:nowrap;
    gap:0 8px;
    width:100%;
  }
  .review-badge{
    padding-right:8px;
    min-width:0;
  }
  .review-badge-head{
    gap:5px;
    font-size:12px;
  }
  .review-badge-head span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .review-badge-logo{
    width:15px;
    height:15px;
  }
  .review-badge-stars{
    gap:1px;
  }
  .star-icon{
    width:10px;
    height:10px;
  }
}

.hero-panel{
  border:1px solid var(--rule);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
  padding:clamp(34px,4vw,52px);box-shadow:var(--shadow);
}
.hero-price{font-size:clamp(64px,8vw,112px);font-weight:800;line-height:1;letter-spacing:-.055em}
.hero-price small{font-size:.2em;letter-spacing:0;color:var(--fg-soft);font-weight:700}
.mini-list{display:grid;gap:18px;margin-top:30px;padding-top:28px;border-top:1px solid var(--rule)}
.mini-list li{position:relative;display:block;padding-left:20px;color:var(--fg-soft);font-size:18px;line-height:1.55}
.mini-list li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--fg)}

.page-head{padding:clamp(58px,8vw,96px) 0 clamp(38px,5vw,64px)}
.page-head h1{max-width:14ch;margin-bottom:22px}
.page-head .lead{max-width:62ch}
.subpage-head h1{max-width:15ch}
.subpage-head .lead{max-width:56ch}
.subpage-copy{max-width:760px}
.subpage-cards{grid-template-columns:1fr;gap:14px}
.subpage-cards .white-card{padding:clamp(24px,3vw,32px)}
.subpage-cards .card-kicker{display:none}
.center-head{text-align:center}
.center-head h1,.center-head h2,.center-head .lead{margin-left:auto;margin-right:auto}

.stat-strip{
  display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule);
  background:rgba(255,255,255,.035);
}
.stat{padding:clamp(30px,3vw,36px);border-right:1px solid var(--rule)}
.stat:last-child{border-right:0}
.stat strong{display:block;font-size:clamp(30px,3vw,38px);line-height:1;font-weight:800;letter-spacing:-.035em;margin-bottom:10px}
.stat span{display:block;color:var(--fg-soft);font-size:18px;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.light-band .stat-strip,.soft-band .stat-strip{border-color:var(--rule);background:var(--surface)}
.light-band .stat,.soft-band .stat{border-color:var(--rule)}
.light-band .stat span,.soft-band .stat span{color:var(--fg-soft)}

.showcase-grid{display:grid;grid-template-columns:minmax(360px,.5fr) minmax(0,1fr);gap:clamp(32px,6vw,78px);align-items:center}
.showcase-grid h2{max-width:16ch;font-size:clamp(40px,4vw,56px)}
.sample-note{margin-top:22px;color:var(--fg-mute);font-size:18px;line-height:1.6;max-width:42ch}
.showcase-media{
  margin:0;border:1px solid var(--rule);background:rgba(255,255,255,.035);
  padding:clamp(12px,2vw,24px);box-shadow:var(--shadow);
}
.showcase-media img{width:100%;height:auto}

.split{display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);gap:clamp(30px,6vw,76px);align-items:start}
.split.editorial-split{column-gap:clamp(30px,6vw,76px);row-gap:0}
.editorial-split-head{display:contents}
.editorial-split-head .eyebrow{grid-column:1;grid-row:1}
.editorial-split-head h2{grid-column:1;grid-row:2;margin-bottom:0}
.editorial-split-copy{grid-column:2;grid-row:2;align-self:start}
.editorial-split-copy > :first-child{margin-top:0}
/* who-we-help "Two kinds of operator" only: short heading column centers
   against the tall cards column so the leftover space splits top+bottom
   instead of pooling at one corner. Scoped via modifier class, not global. */
.split.split-center{align-items:center}
.split h2{max-width:15ch}
.sub-label{margin-top:28px;margin-bottom:12px}
.mt-xs{margin-top:14px}.mt-s{margin-top:clamp(22px,3vw,36px)}.mt-m{margin-top:clamp(40px,5vw,68px)}.mt-l{margin-top:clamp(56px,7vw,96px)}
.center{text-align:center}.narrow{max-width:820px}.book-narrow{max-width:880px}

.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card-grid.two{grid-template-columns:repeat(2,1fr)}
/* .card-grid.four is used only on the pricing coverage grid (7 cards).
   Flex + centered wrap so the trailing row centers instead of leaving an
   empty slot (desktop) or orphan (tablet). Cards keep a fixed per-row width
   so they never stretch. Later grid-template-columns rules for .four are
   inert under display:flex. */
.card-grid.four{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.card-grid.four > *{flex:0 1 calc((100% - 3 * 24px) / 4)}
@media(max-width:1023px){.card-grid.four > *{flex-basis:calc((100% - 24px) / 2)}}
@media(max-width:639px){.card-grid.four > *{flex-basis:100%}}
.white-card,.dark-card{
  padding:clamp(24px,3vw,34px);border:1px solid var(--rule);background:transparent;color:var(--fg);
}
.white-card{border-top-color:var(--rule)}
.white-card h3,.dark-card h3{font-size:clamp(24px,1.8vw,26px)}

/* Blue bullet on card headings, matching .page-hero-list li::before so the
   pricing list and the cards below it read as one system. Decorative only —
   the heading text already carries the meaning, so nothing is announced. */
.white-card > h3,
.dark-card > h3{
  display:flex;
  align-items:baseline;
  gap:12px;
}

.white-card > h3::before,
.dark-card > h3::before{
  content:"";
  width:9px;
  height:9px;
  flex:0 0 9px;
  /* Baseline-aligned rather than centred: heading text wraps to two lines in
     the narrower cards and a centred dot would drift with it. */
  transform:translateY(-.18em);
  border-radius:999px;
  background:var(--feature-accent);
}
.white-card,.dark-card,.feature-item,.pricing-card,.compare-col,.step-card,.detail-card,.faq-shell,.hero-panel{
  transition:transform 180ms cubic-bezier(.2,.8,.2,1),border-color 180ms ease,box-shadow 180ms ease,background 180ms ease;
}
.white-card:hover,.pricing-card:hover,.step-card:hover,.detail-card:hover,.faq-shell:hover{
  transform:translateY(-3px);box-shadow:0 24px 60px rgba(0,0,0,.12);
}
.dark-card:hover,.compare-col:hover,.hero-panel:hover{
  transform:translateY(-3px);border-color:var(--rule-h);background:rgba(255,255,255,.025);
}
.dark-card{border-color:var(--rule);background:transparent;color:var(--fg)}
.white-card p,.dark-card p{margin-top:12px;font-size:19px;line-height:1.62}
.white-card p{color:var(--fg-soft)}.dark-card p{color:var(--fg-soft)}
.card-kicker{display:block;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute);font-weight:800;margin-bottom:18px}
.dark-card .card-kicker{color:var(--fg-mute)}
.icon-box{
  width:42px;height:42px;border:1px solid currentColor;display:grid;place-items:center;
  font-size:17px;font-weight:800;margin-bottom:18px;
}
.icon-box.round{border-radius:50%}
.icon-box .icon{width:52%;height:52%}

.feature-panel{border:1px solid var(--rule);background:rgba(255,255,255,.035);color:var(--fg);box-shadow:var(--shadow)}
.feature-panel-head{display:flex;justify-content:space-between;gap:20px;padding:24px clamp(24px,4vw,44px);border-bottom:1px solid var(--ink-rule)}
.feature-panel-body{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink-rule)}
.feature-item{background:rgba(255,255,255,.045);padding:clamp(22px,3vw,32px)}
.feature-item:hover{background:var(--surface-3)}
.feature-item p{font-size:18px;color:var(--fg-soft);margin-top:8px;line-height:1.58}

.pricing-card{
  width:100%;max-width:440px;margin:0 auto;padding:clamp(28px,4vw,44px);
  background:rgba(255,255,255,.055);color:var(--fg);border:1px solid var(--rule-h);box-shadow:var(--shadow);text-align:center;
}
.pricing-card .amount{font-size:clamp(72px,10vw,126px);font-weight:800;letter-spacing:-.06em;line-height:1}
.pricing-card .amount sup{font-size:.28em;vertical-align:super}
.pricing-card .amount small{font-size:clamp(15px,1.1vw,16px);letter-spacing:0;color:var(--fg-soft)}
.price-lines{display:grid;gap:0;margin:28px 0;border-top:1px solid var(--ink-rule)}
.price-lines li{padding:16px 0;border-bottom:1px solid var(--ink-rule);font-size:18px;font-weight:800;line-height:1.45}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.compare-col{padding:clamp(26px,4vw,42px);border:1px solid var(--rule);background:rgba(255,255,255,.055)}
.compare-col .big{font-size:clamp(38px,4.8vw,64px);font-weight:800;line-height:1.06;letter-spacing:-.045em;margin:16px 0 8px}
.check-list{display:grid;gap:12px;margin-top:24px;padding-top:22px;border-top:1px solid var(--rule)}
.check-list li{display:flex;gap:10px;color:var(--fg-soft);font-size:18px;line-height:1.58}
.check-list li::before{content:"";width:6px;height:6px;margin-top:8px;background:currentColor;flex:0 0 auto}

.process-line{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.step-card{position:relative;padding:clamp(22px,3vw,30px);border:1px solid var(--rule);background:transparent;color:var(--fg)}
.step-card .n{width:40px;height:40px;background:var(--surface-3);color:var(--fg);border:1px solid var(--fg);display:grid;place-items:center;font-weight:800;margin-bottom:18px}
.step-card p{color:var(--fg-soft);font-size:18px;line-height:1.58;margin-top:10px}
.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.detail-card{border:1px solid var(--rule);background:rgba(255,255,255,.045);color:var(--fg);padding:clamp(24px,3vw,34px)}
.detail-card ul{display:grid;gap:12px;margin-top:18px}
.detail-card li{color:var(--fg-soft);font-size:18px;line-height:1.58;border-top:1px solid var(--rule);padding-top:12px}

.faq-shell{width:100%;max-width:1120px;margin-inline:auto;margin-block:0;border:1px solid var(--rule);background:rgba(255,255,255,.045);color:var(--fg);box-shadow:var(--shadow)}
.faq-list details{border-bottom:1px solid var(--ink-rule);padding:0}
.faq-list details:last-of-type{border-bottom:0}
.faq-list summary{
  list-style:none;cursor:pointer;font-weight:800;font-size:clamp(19px,1.55vw,23px);
  display:flex;justify-content:space-between;align-items:center;gap:22px;padding:24px clamp(22px,3vw,34px);
  transition:background 160ms ease;
}
.faq-list summary:hover{background:var(--surface-3)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list .toggle{width:28px;height:28px;border:1px solid var(--ink-rule);display:grid;place-items:center;flex:0 0 auto}
.faq-list .toggle svg{width:12px;height:12px;transition:transform 180ms}
.faq-list details[open] .toggle svg{transform:rotate(45deg)}
.faq-list .answer{padding:0 clamp(22px,3vw,34px) 28px;color:var(--fg-soft);max-width:72ch;font-size:19px;line-height:1.72}
.faq-list .faq-growth-list{display:grid;gap:10px;padding-inline-start:1.35em}
.faq-list .faq-growth-list li{padding-inline-start:.2em}

.founder-section{padding-top:clamp(96px,10vw,136px);padding-bottom:clamp(110px,12vw,168px)}
.founder-head{max-width:680px;margin:0 auto clamp(56px,6vw,76px)}
.founder-head h2{font-size:clamp(42px,5vw,68px);line-height:.98}
.founder{
  width:min(100%,980px);margin:0 auto;display:grid;
  grid-template-columns:minmax(280px,392px) minmax(300px,390px);
  gap:clamp(48px,6.5vw,78px);align-items:center;justify-content:center;
}
.founder-img{
  position:relative;aspect-ratio:4 / 5;overflow:hidden;border:1px solid var(--rule);
  width:100%;max-width:392px;justify-self:end;
  background:rgba(255,255,255,.035);box-shadow:var(--shadow);
  transform:none;
  transition:border-color 180ms ease,box-shadow 180ms ease;
}
.founder-img img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  transform-origin:center top;
  transform:scale(1);
  transition:transform .45s ease;
  will-change:transform;
}
.founder-img:hover,.founder-img:focus-visible,.founder-img.is-active{border-color:var(--rule-h)}
@media (hover:hover) and (pointer:fine){
  .founder-img:hover img{
    transform:scale(1.04);
  }
}
.founder-copy{align-self:center;justify-self:start;max-width:390px;padding-top:2px}
.founder-name{font-size:clamp(31px,2.8vw,38px);line-height:1.02;font-weight:800;letter-spacing:-.035em;color:var(--fg);margin-bottom:10px}
.founder-role{font-size:15px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute);margin-bottom:24px}
.founder-role::after{content:"";display:block;width:58px;height:1px;background:var(--rule-h);margin-top:22px}
.founder blockquote{font-size:clamp(20px,1.45vw,22px);line-height:1.58;max-width:32ch;margin-bottom:34px;color:var(--fg);font-weight:600}
.founder-socials{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
@media(min-width:841px){
  .ft-note{
    padding-left:0;
  }
}
@media(max-width:840px){
  .site-footer .ft-cta{margin-top:18px}
}

.cta-close{background:var(--bg);color:var(--fg);text-align:center}
.cta-box{border:1px solid var(--rule-h);padding:clamp(36px,6vw,70px);background:rgba(255,255,255,.045)}
.cta-close h2{max-width:18ch;margin:0 auto 20px}
.cta-close .lead{margin:0 auto 32px;color:var(--fg-soft);text-align:center}
.capacity{font-size:18px;color:var(--fg-mute);margin-top:24px;line-height:1.6}

.section.section-book-top.dark-band{padding-block-start:clamp(40px,5vw,64px)}
.book-shell{scroll-margin-top:var(--header-h)}
.book-head{margin-bottom:clamp(20px,2.4vw,28px)}
.book-layout{display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,32px);align-items:start}
.book-side{display:contents}
.book-call,.book-next,.book-review{
  border:1px solid var(--rule);border-radius:20px;background:rgba(255,255,255,.045);color:var(--fg);
  padding-block:clamp(24px,5vw,34px);padding-inline:var(--book-inset);
}
.book-call{order:1}
.book-embed{order:2}
.book-next{order:3}
.book-review{order:4}
/* The embed column is deliberately un-carded: the Calendly box below is the
   only frame, so the widget doesn't sit inside a second padded border. */
.book-embed{min-width:0}
.book-title{font-size:clamp(30px,2.6vw,40px);line-height:1.1;letter-spacing:-.03em;margin-bottom:6px}
.book-path{display:grid;gap:14px;margin:14px 0 0;padding:0;list-style:none;counter-reset:bp}
.book-path li{position:relative;padding-left:34px;color:var(--fg-soft);font-size:17px;line-height:1.5;counter-increment:bp}
.book-path li::before{content:counter(bp);position:absolute;left:0;top:2px;width:22px;height:22px;border:1px solid var(--rule-h);border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--fg-mute)}
.book-path strong{color:var(--fg)}
.book-embed p,.book-side p{color:var(--fg-soft)}
.book-placeholder{border:1px dashed var(--rule);padding:54px 24px;text-align:center;color:var(--fg-mute);font-size:18px;line-height:1.7;margin-top:24px}
.book-calendly{position:relative;min-height:720px;border:1px solid var(--rule);border-radius:20px;overflow:hidden;background:var(--surface-2)}
.book-calendly iframe{display:block;width:100%;height:100%;min-height:720px;border:0}
/* The loading layer stays in place until Calendly emits an embed-ready event;
   iframe injection and its early load event are not proof that the calendar
   controls have painted yet. */
.book-calendly::before{
  content:attr(data-loading-label);position:absolute;inset:0;display:grid;place-items:center;
  z-index:2;padding-bottom:30px;font-size:17px;font-weight:700;letter-spacing:.01em;color:var(--fg-mute);pointer-events:none;
}
.book-calendly::after{
  content:"";position:absolute;z-index:3;left:50%;top:calc(50% + 20px);width:7px;height:7px;
  border-radius:999px;background:currentColor;color:var(--fg-mute);box-shadow:-15px 0 currentColor,15px 0 currentColor;
  transform:translateX(-50%);animation:book-loading-pulse 900ms ease-in-out infinite alternate;pointer-events:none;
}
.book-calendly.is-loaded::before,
.book-calendly.is-unavailable::before,
.book-calendly.is-loaded::after,
.book-calendly.is-unavailable::after{content:none}
@keyframes book-loading-pulse{to{opacity:.35;transform:translateX(-50%) scale(.82)}}
/* Fallback link stays hidden unless script.js flags the widget as unavailable. */
.book-fallback{display:none;margin-top:14px;font-size:16px;color:var(--fg-mute)}
.book-fallback.is-visible{display:block}
.book-fallback a{display:inline;padding:0;color:var(--fg-soft);text-decoration:underline}
@media(max-width:980px){
  .book-calendly,.book-calendly iframe{min-height:760px}
  .book-call{padding-block:20px}
  .book-call .eyebrow{font-size:16px;line-height:1.4;margin-bottom:8px}
  .book-call .book-phone-num{margin-top:6px}
  .book-call .book-phone-who{font-size:16px;line-height:1.5;margin-top:8px}
}
.book-phone-num{font-weight:800;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.03em;display:block;margin-top:10px}
.book-phone-who{font-size:18px;margin-top:12px}
@media(min-width:981px){
  .book-layout{
    grid-template-columns:minmax(0,1.25fr) minmax(360px,.9fr);
    gap:clamp(32px,3vw,48px);
  }
  .book-calendly{max-width:760px}
  .book-embed{order:0}
  .book-side{
    display:block;order:0;position:sticky;top:calc(var(--header-h) + 24px);
  }
  .book-call,.book-next,.book-review{border:0;border-radius:0;background:transparent;padding:0}
  .book-call{margin-top:clamp(28px,3vw,38px);padding-top:clamp(28px,3vw,38px);border-top:1px solid var(--rule)}
  .book-review{margin-top:clamp(28px,3vw,38px);padding-top:clamp(28px,3vw,38px);border-top:1px solid var(--rule)}
}
/* Booking page: uninterrupted black surface below the stats row. */
.book-page .site-footer{border-top:0}
/* Owner request: no divider line at the end of the home page. */
.home-page .site-footer{border-top:0}

.site-footer{background:var(--bg);color:var(--fg);border-top:1px solid var(--rule);padding:clamp(54px,7vw,84px) 0 28px}
.ft-grid{display:grid;grid-template-columns:1.25fr .72fr 1fr 1fr 1fr;gap:28px;padding-bottom:42px;border-bottom:1px solid var(--rule)}
.ft-brand{margin-bottom:18px;display:inline-flex}
.ft-brand img{width:64px;height:56px;object-fit:contain;object-position:left center;image-rendering:auto}
.ft-note{color:var(--fg-soft);font-size:18px;max-width:32ch}
.ft-title{font-size:16px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute);margin-bottom:14px}
.site-footer a{display:block;padding:6px 0;color:var(--fg-soft);font-size:18px;transition:color 140ms}
.site-footer a:hover{color:var(--fg)}
.ft-cta{display:inline-flex!important;margin-top:14px;color:var(--bg)!important;background:var(--fg);border:1px solid var(--fg);padding:12px 18px!important;font-weight:800}
.ft-bottom{padding-top:20px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:17px;color:var(--fg-mute)}
.mobile-sticky-cta{display:none;color:#fff}

.social-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.social-button{
  display:inline-flex;align-items:center;justify-content:space-between;gap:14px;
  min-width:0;min-height:var(--button-h);padding:0 16px;border:1px solid transparent;border-radius:var(--button-radius);
  font-family:var(--sans);font-size:var(--button-font);font-weight:var(--button-weight);line-height:var(--button-line);letter-spacing:0;text-transform:none;
  transition:background 160ms ease,border-color 160ms ease,transform 160ms ease;
}
.social-button img{display:block;flex:0 0 24px;width:24px;height:24px}
.social-button:hover{transform:translateY(-1px)}
.social-button:active{transform:scale(.98)}
.social-button:focus-visible{outline:3px solid var(--fg);outline-offset:4px}
.social-facebook{background:#166fe5;border-color:#166fe5;color:#fff}
.social-facebook:hover{background:#105fc9;border-color:#105fc9;color:#fff}
.social-whatsapp{background:#25d366;border-color:#25d366;color:#071a0f}
.social-whatsapp:hover{background:#20bd5a;border-color:#20bd5a;color:#071a0f}
.founder-socials .social-button{width:100%}
.contact-card-socials{display:grid;margin-top:var(--space-s)}
.contact-card-socials .social-button{width:100%}
.contact-direct-socials{display:grid}
.contact-direct-socials .social-button{width:100%}
.site-footer .footer-actions{display:grid;gap:10px;margin-top:14px}
.site-footer .footer-actions .social-button,
.site-footer .footer-actions .ft-cta{
  display:flex!important;width:100%;max-width:none;height:var(--button-h);min-height:var(--button-h);
  margin:0;padding:0 16px!important;gap:12px;border-radius:var(--button-radius);
  font-family:var(--sans);font-size:var(--button-font);font-weight:var(--button-weight);line-height:var(--button-line);
  white-space:nowrap;
}
.site-footer .social-facebook,.site-footer .social-facebook:hover{color:#fff}
.site-footer .social-whatsapp,.site-footer .social-whatsapp:hover{color:#071a0f}

@media(max-width:640px){
  .founder-socials{grid-template-columns:1fr}
  .social-button{width:100%}
}

/* Monochrome direction: black canvas, dark surface levels, and readable white type. */
.light-band,.soft-band{background:var(--bg);color:var(--fg)}
.cta-close{background:var(--bg);color:var(--fg)}
.light-band.section-rule,.soft-band.section-rule{border-top-color:var(--rule)}
.light-band .eyebrow,.soft-band .eyebrow,.white-card .eyebrow,.pricing-card .eyebrow{color:var(--fg-mute)}
.light-band .lead,.soft-band .lead,.white-card .lead,.pricing-card .lead{color:var(--fg-soft)}
.cta-close .lead{color:var(--fg-soft)}
.light-band .stat-strip,.soft-band .stat-strip{background:var(--surface);border-color:var(--rule)}
.light-band .stat,.soft-band .stat{border-color:var(--rule)}
.light-band .stat span,.soft-band .stat span{color:var(--fg-soft)}
.feature-panel,.pricing-card,.faq-shell,.cta-box,.white-card,.step-card,.detail-card,.book-side{
  border-color:var(--rule);
}
.light-band .white-card,.soft-band .white-card,.light-band .step-card,.soft-band .step-card,.light-band .detail-card,.soft-band .detail-card,.light-band .faq-shell,.soft-band .faq-shell,.light-band .book-side,.soft-band .book-side{
  background:var(--surface-2);color:var(--fg);border-color:var(--rule);
}
.dark-band .white-card,.dark-band .dark-card,.dark-band .step-card,.dark-band .detail-card,.dark-band .feature-panel,.dark-band .book-side{
  background:var(--surface-2);color:var(--fg);border-color:var(--rule);
}
.white-card p,.light-band .feature-item p,.soft-band .feature-item p,.light-band .step-card p,.soft-band .step-card p,.light-band .detail-card li,.soft-band .detail-card li,.faq-list .answer,.light-band .book-embed p,.soft-band .book-embed p,.light-band .book-side p,.soft-band .book-side p{color:var(--fg-soft)}
.dark-band .white-card p,.dark-band .feature-item p,.dark-band .step-card p,.dark-band .detail-card li,.dark-band .book-embed p,.dark-band .book-side p{color:var(--fg-soft)}
.dark-band .capacity,.cta-close .capacity{color:var(--fg-mute)}
.light-band .capacity,.soft-band .capacity{color:var(--fg-mute)}
.feature-panel-head,.price-lines,.price-lines li,.faq-list details,.detail-card li{border-color:var(--rule)}
.light-band .feature-panel-head,.soft-band .feature-panel-head,.light-band .price-lines,.soft-band .price-lines,.light-band .price-lines li,.soft-band .price-lines li,.light-band .faq-list details,.soft-band .faq-list details,.light-band .detail-card li,.soft-band .detail-card li{border-color:var(--rule)}
.feature-panel-body{background:var(--rule)}
.light-band .feature-panel-body,.soft-band .feature-panel-body{background:var(--rule)}
.feature-item{background:var(--surface-2);color:var(--fg)}
.light-band .feature-item,.soft-band .feature-item{background:var(--surface-2);color:var(--fg)}
.feature-item:hover{background:var(--surface-3)}
.light-band .feature-item:hover,.soft-band .feature-item:hover,.faq-list summary:hover{background:var(--surface-3)}
.icon-box,.book-placeholder{border-color:var(--rule);color:var(--fg)}
.light-band .icon-box,.soft-band .icon-box,.faq-list .toggle,.light-band .book-placeholder,.soft-band .book-placeholder{border-color:var(--rule);color:var(--fg)}
.card-kicker{color:var(--fg-mute)}
.light-band .card-kicker,.soft-band .card-kicker{color:var(--fg-mute)}
.step-card .n{background:var(--surface-3);color:var(--fg)}
.light-band .step-card .n,.soft-band .step-card .n{background:var(--surface-3);color:var(--fg)}
.book-placeholder{color:var(--fg-mute)}
.light-band .book-placeholder,.soft-band .book-placeholder{color:var(--fg-mute)}
.white-card:hover,.pricing-card:hover,.step-card:hover,.detail-card:hover{
  box-shadow:var(--shadow);border-color:var(--rule-h);
}
.light-band .white-card:hover,.soft-band .white-card:hover,.light-band .pricing-card:hover,.soft-band .pricing-card:hover,.light-band .step-card:hover,.soft-band .step-card:hover,.light-band .detail-card:hover,.soft-band .detail-card:hover{
  border-color:var(--rule-h);
}
.dark-band,.light-band,.soft-band,.cta-close,.site-footer{
  background:transparent;
}
.site-footer{
  position:relative;
  z-index:1;
}

/* Existing component polish: sizing, alignment, and responsive rhythm only. */
.wrap{max-width:min(var(--maxw),100%)}

.hero{padding-block:clamp(52px,6vw,82px) clamp(42px,5vw,60px)}
.hero-grid{
  grid-template-columns:minmax(0,.98fr) minmax(420px,.82fr);
  gap:clamp(34px,5vw,68px);
}
.hero-copy h1{max-width:12.5ch;margin-bottom:22px}
.hero-copy .lead{max-width:53ch;margin-bottom:32px}
.hero-panel{justify-self:end;max-width:440px}
.hero-actions .btn{min-width:190px}
/* The work images are already self-contained device-mockup composites on
   their own dark background. Wrapping them in a gradient-glass frame produced
   a "trapped screenshot" look (double background, nested radius, cyan glow).
   .hero-showcase is now a transparent wrapper; the carousel itself is the
   clean single-border product shot. */
.hero-showcase{
  position:relative;
  isolation:isolate;
  width:100%;
  max-width:640px;
  justify-self:end;
  align-self:start;
  margin-top:clamp(22px,4vw,56px);
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
}
.showcase-carousel{
  position:relative;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:12px;
  border:0;
  background:transparent;
  /* box-shadow/radius authoritative copy lives at ~L3729 (wins the cascade). */
  box-shadow:0 22px 54px -26px rgba(0,0,0,.62);
}
.showcase-carousel::before{
  content:none;
}
.showcase-carousel::after{
  content:none;
}
.showcase-track{
  position:absolute;
  inset:0;
  z-index:1;
  -webkit-mask-image:none;
  mask-image:none;
}
.showcase-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transform:none;
  transition:opacity 320ms ease;
}
.showcase-slide.is-active{
  opacity:1;
  transform:none;
}
.showcase-arrow{
  position:absolute;
  top:50%;
  z-index:4;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(10,10,10,.42);
  backdrop-filter:none;
  color:var(--fg);
  font-size:22px;
  line-height:1;
  opacity:.48;
  transform:translateY(-50%);
  transition:opacity 180ms ease,transform 180ms ease,border-color 180ms ease,background 180ms ease;
}
.showcase-arrow:hover,.showcase-arrow:focus-visible{
  opacity:1;
  border-color:rgba(255,255,255,.46);
  background:rgba(10,10,10,.72);
  transform:translateY(-50%) scale(1.04);
}
.showcase-arrow-prev{left:12px}
.showcase-arrow-next{right:12px}
.showcase-dots{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  transform:translateX(-50%);
}
.showcase-dots button{
  width:6px;
  height:6px;
  border:0;
  border-radius:999px;
  background:rgba(245,245,240,.38);
  opacity:1;
  transition:width 180ms ease,background 180ms ease;
}
.showcase-dots button.is-active{
  width:18px;
  background:rgba(245,245,240,.9);
}
.showcase-note{
  margin-top:18px;
  color:rgba(245,245,240,.88);
  font-size:clamp(19px,1.15vw,22px);
  line-height:1.5;
  font-weight:750;
  max-width:58ch;
}

.page-head{padding-block:clamp(54px,7vw,86px) clamp(36px,5vw,56px)}
.page-head h1{margin-bottom:24px}
.subpage-head .lead{font-size:clamp(18px,1.3vw,21px)}

.card-grid{gap:20px}
.white-card,.dark-card,.feature-item,.step-card,.detail-card,.book-side{
  padding-block:clamp(26px,3vw,36px);
  padding-inline:clamp(24px,3vw,36px);
}
.white-card,.dark-card,.step-card,.detail-card,.feature-item{
  display:flex;
  flex-direction:column;
}
.white-card p,.dark-card p,.feature-item p,.step-card p,.detail-card li{
  font-size:19px;
  line-height:1.66;
}
.feature-panel-head{
  align-items:center;
  padding-block:28px;
}
.feature-panel-body{gap:1px}
.feature-item{min-height:188px}
.pricing-card{max-width:460px}
.price-lines li{min-height:58px}
.process-line{gap:18px}
.step-card{min-height:250px}
.step-card .n{margin-bottom:20px}
.faq-shell{max-width:1120px}
.faq-list summary{min-height:76px}
.faq-list .answer{font-size:20px}

.founder-section{padding-block:clamp(88px,9vw,128px) clamp(104px,11vw,152px)}
.founder-head{margin-bottom:clamp(48px,5vw,68px)}
.founder{
  width:min(100%,1020px);
  grid-template-columns:minmax(280px,408px) minmax(300px,410px);
  gap:clamp(50px,6vw,84px);
}
.founder-img{max-width:408px}
.founder-copy{max-width:410px}
.founder-role{font-size:16px}
.founder blockquote{max-width:34ch}

.cta-box{
  width:100%;
  max-width:1120px;
  margin-inline:auto;
}
.actions{justify-content:center}
/* .service-split shares .split's left-aligned copy column, so its CTA has to
   sit on the same content edge as the heading, paragraph and bullets above it
   rather than inheriting the centered default. */
.split .actions,.service-split .actions,.hero-actions{justify-content:flex-start}

.ft-grid{
  grid-template-columns:minmax(220px,1.25fr) minmax(120px,.7fr) minmax(170px,1fr) minmax(170px,1fr) minmax(150px,.9fr);
  gap:clamp(24px,3vw,40px);
}
.ft-bottom{font-size:18px}
.site-footer a{line-height:1.35}

@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .showcase-grid{grid-template-columns:1fr}
  .showcase-grid h2{max-width:14ch}
  .card-grid,.card-grid.four,.feature-panel-body{grid-template-columns:1fr 1fr}
  .process-line{grid-template-columns:1fr 1fr}
  .ft-grid{grid-template-columns:1fr 1fr}
  .subpage-cards{grid-template-columns:1fr}
}

@media(max-width:900px){
  .hamburger{display:flex}
  .site-nav a.mobile-home{display:block}
  /* Fully opaque header on mobile: scrolled headings must not ghost through. */
  .site-header{background:#000}
  .site-nav{
    position:fixed;inset:72px 0 0;flex-direction:column;align-items:stretch;
    padding:18px var(--pad) 40px;gap:0;background:var(--bg);
    border-top:1px solid var(--rule);transform:translateY(-6px);
    overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;
    opacity:0;pointer-events:none;transition:transform 240ms ease-out,opacity 240ms ease-out;
  }
  .site-nav > *{flex:0 0 auto}
  .site-nav.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .site-nav a,.site-nav .nav-cta,.nav-trigger{
    font-size:20px;font-weight:800;padding:16px 2px;border-bottom:1px solid var(--rule);
    display:block;width:100%;background:transparent;color:var(--fg);text-align:left;
  }
  .site-nav a:not(.nav-cta)::after,.nav-trigger::after{display:none}
  .site-nav .nav-cta{
    margin-top:22px;border:1px solid var(--fg);border-radius:var(--radius);
    background:var(--fg);color:var(--bg);text-align:center;
    padding:17px 22px;min-height:58px;
  }
  .nav-trigger{display:flex;justify-content:space-between;align-items:center}
  .nav-dropdown{width:100%}
  .nav-dropdown::after{display:none}
  .dropdown-panel{
    position:static;width:100%;padding:0;border:0;box-shadow:none;background:transparent;
    display:grid;grid-template-rows:0fr;
    transform:none;overflow:hidden;opacity:1;visibility:visible;pointer-events:auto;
    transition:grid-template-rows var(--dur-expand) var(--ease-expand);
    /* The row track resizes every frame, so confine that reflow to the panel
       instead of letting it walk the whole open drawer. */
    contain:layout paint;
  }
  .nav-dropdown.is-open .dropdown-panel{
    transform:none;grid-template-rows:1fr;
  }
  .dropdown-panel > .dropdown-heading{display:none}
  .dropdown-panel > .dropdown-grid{min-height:0;overflow:hidden}
  .dropdown-panel a{padding:14px 0 14px 18px;border-bottom:1px solid var(--rule)}
  .dropdown-panel a:hover,.dropdown-panel a:focus-visible,.dropdown-panel a[aria-current="page"]{background:transparent;border-color:var(--rule)}
  .dropdown-panel a,.dropdown-panel strong{color:var(--fg)}
  .dropdown-panel span{color:var(--fg-mute)}
}

@media(max-width:900px){
  .hamburger{
    width:52px;
    height:52px;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    position:relative;
    z-index:2;
  }
  .hamburger span{width:24px;height:3px}
  .site-nav a,.site-nav .nav-cta,.nav-trigger{
    min-height:58px;
    font-size:20px;
    padding-block:16px;
  }
  .site-nav .nav-cta{min-height:58px;padding-block:17px}
  .dropdown-panel a{min-height:66px;padding-block:16px}
  .dropdown-panel span{font-size:17px}
  .editorial-split{display:grid;grid-template-columns:1fr;row-gap:0}
  .editorial-split-head{display:block}
  .editorial-split-copy{grid-column:1;grid-row:auto;margin-top:var(--space-l)}
  .hero-panel{justify-self:stretch;max-width:none}
  .hero-showcase{justify-self:stretch;max-width:none}
  .feature-panel-head{gap:18px}
  .process-line{grid-template-columns:1fr 1fr}
  .step-card{min-height:220px}
}

@media(max-width:720px){
  /* One persistent conversion action: reserve only the demo bar's footprint. */
  body{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  body.nav-open .mobile-sticky-cta{display:none}
  .mobile-sticky-cta{
    position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:90;
    min-height:56px;display:flex;align-items:center;justify-content:center;
    background:var(--fg);color:var(--bg);border:1px solid var(--fg);
    font-weight:800;font-size:18px;box-shadow:0 18px 60px rgba(0,0,0,.55);
  }
  .split,.compare,.detail-grid,.founder{grid-template-columns:1fr}
  .stat-strip{grid-template-columns:1fr 1fr}
  .stat:nth-child(even){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--rule)}
  .light-band .stat:nth-child(1),.light-band .stat:nth-child(2),.soft-band .stat:nth-child(1),.soft-band .stat:nth-child(2){border-bottom-color:var(--ink-rule)}
  .card-grid,.card-grid.two,.card-grid.four,.feature-panel-body,.process-line{grid-template-columns:1fr}
  .feature-panel-head{display:block}
  .founder{width:min(100%,520px);gap:34px;justify-content:start}
  .founder-img{width:min(100%,372px);max-width:none;justify-self:start}
}

@media(max-width:520px){
  .site-header .wrap{padding-left:20px;padding-right:20px}
  .hero,.page-head{padding-top:54px}
  body{font-size:var(--t-body)}
  h1{font-size:38px;line-height:1.08;letter-spacing:-.025em}
  h2{font-size:35px;line-height:1.08;letter-spacing:-.025em}
  h1,h2{text-wrap:wrap}
  h3{font-size:22px}
  .lead{font-size:18px;line-height:1.55}
  .center-head{text-align:left}
  .center-head h1,.center-head h2,.center-head .lead{margin-left:0;margin-right:0}
  .page-head h1{max-width:100%}
  .page-head.center-head h1{width:100%;max-width:100%;font-size:38px}
  .page-head.center-head .lead{max-width:100%}
  .subpage-head h1{font-size:34px;line-height:1.08;max-width:10ch}
  .subpage-head .lead{max-width:100%}
  .hero-copy h1{max-width:14ch;font-size:37px;line-height:1.1;letter-spacing:-.025em;margin-bottom:18px}
  .hero-copy .lead{max-width:38ch}
  .hero-panel{padding:26px 18px}
  .hero-panel .mini-list{max-width:28ch}
  .showcase-media{padding:8px}
  .founder-section{padding-top:84px;padding-bottom:104px}
  .founder-head{margin-bottom:42px}
  .founder-head h2{font-size:38px;line-height:1.08}
  .founder-name{font-size:32px}
  .founder blockquote{font-size:20px;line-height:1.58}
  .pricing-card{width:100%;max-width:100%;padding:30px 18px;text-align:left}
  .pricing-card .lead{max-width:100%;margin-left:0;margin-right:0;font-size:20px}
  .price-lines li{font-size:18px;line-height:1.5;padding-left:0;padding-right:0;white-space:normal;text-align:left}
  h1,h2,h3,.lead,p,li{overflow-wrap:break-word}
  .stat-strip{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--rule)}
  .stat span{width:min(100%,24ch)}
  .stat:last-child{border-bottom:0}
  .ft-grid{grid-template-columns:1fr}
  .btn{width:100%}
  .actions,.hero-actions{align-items:stretch}
}

@media(max-width:520px){
  h1,h2,h3,.lead,p,li,blockquote,summary{overflow-wrap:anywhere}
  .hero{padding-block:44px 40px}
  .hero-grid{gap:30px}
  .hero-copy h1{max-width:9.8ch;margin-bottom:20px;font-size:42px}
  .hero-copy .lead{max-width:100%;margin-bottom:28px}
  .hero-actions .btn{min-width:0}
  .hero-panel .mini-list{max-width:100%}
  .hero-showcase{margin-top:2px}
  .showcase-arrow{
    width:44px;
    height:44px;
    font-size:30px;
  }
  .showcase-arrow-prev{left:10px}
  .showcase-arrow-next{right:10px}
  .showcase-dots{bottom:12px;gap:6px}
  .showcase-dots button{width:10px;height:10px}
  .showcase-note{font-size:17px}
  .section{padding-block:56px}
  .section-tight{padding-block:44px}
  .white-card,.dark-card,.feature-item,.step-card,.detail-card,.book-side{
    padding-block:24px;
    padding-inline:20px;
  }
  .feature-panel-head{padding:22px 20px}
  .feature-item,.step-card{min-height:auto}
  .faq-list summary{min-height:70px;padding-block:22px}
  .faq-list .answer{font-size:19px}
  .cta-box{padding-block:34px}
  .actions{gap:10px}
  .ft-note{max-width:28ch}
}

@media(min-width:1280px){
  .showcase-grid{grid-template-columns:minmax(360px,.46fr) minmax(0,1fr)}
  .hero-copy h1{font-size:clamp(56px,5.8vw,92px)}
}

/* Global layout scale correction: real desktop grid, stronger header, larger visual proof. */
@media(min-width:841px){
  .wrap{
    max-width:var(--maxw);
  }

  .hero{
    padding-block:clamp(72px,7vw,104px) clamp(56px,6vw,78px);
  }

  .hero-grid{
    grid-template-columns:minmax(0,.98fr) minmax(520px,1.02fr);
    gap:clamp(48px,5.5vw,72px);
    align-items:start;
  }

  .hero-copy h1{
    max-width:14.2ch;
    font-size:clamp(58px,5.2vw,82px);
    line-height:.96;
  }

  .hero-copy .lead{
    max-width:50ch;
    font-size:clamp(22px,1.6vw,25px);
  }

  .hero-showcase{
    max-width:680px;
    width:100%;
    margin-top:clamp(38px,4.6vw,66px);
  }

  .showcase-note{
    font-size:18px;
    max-width:60ch;
  }

  .showcase-arrow{
    width:56px;
    height:56px;
    font-size:38px;
  }

  .stat{
    padding:clamp(36px,3.4vw,46px);
  }

  .stat strong{
    font-size:clamp(36px,3.2vw,46px);
  }

  .stat span{
    font-size:19px;
  }

  .split{
    grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
    gap:clamp(56px,6vw,88px);
  }

  .showcase-grid{
    grid-template-columns:minmax(360px,.42fr) minmax(0,1fr);
    gap:clamp(56px,6vw,88px);
  }

  .showcase-media{
    padding:clamp(18px,2vw,28px);
  }

  .card-grid{
    gap:24px;
  }

  .white-card,.dark-card,.feature-item,.step-card,.detail-card,.book-side{
    padding-block:clamp(30px,3vw,42px);
    padding-inline:clamp(28px,3vw,42px);
  }

  .white-card h3,.dark-card h3{
    font-size:clamp(26px,2vw,32px);
  }

  .white-card p,.dark-card p,.feature-item p,.step-card p,.detail-card li{
    font-size:20px;
    line-height:1.62;
  }

  .feature-panel-head{
    padding:34px clamp(34px,4vw,52px);
  }

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

  .feature-item{
    min-height:210px;
  }

  .process-line{
    gap:22px;
  }

  .step-card{
    min-height:270px;
  }

  .faq-shell{
    max-width:1020px;
  }

  .faq-list summary{
    font-size:clamp(21px,1.6vw,24px);
    min-height:84px;
  }

  .faq-list .answer{
    font-size:20px;
  }

  .founder{
    width:min(100%,1080px);
    grid-template-columns:minmax(340px,450px) minmax(340px,450px);
  }

  .founder-img{
    max-width:450px;
  }

  .founder-copy{
    max-width:450px;
  }

  .cta-box{
    max-width:1080px;
    padding:clamp(56px,6vw,84px);
  }

  .ft-grid{
    grid-template-columns:minmax(260px,1.35fr) repeat(3,minmax(140px,1fr)) minmax(240px,1.15fr);
    gap:clamp(28px,3.2vw,46px);
  }

  .ft-note,.site-footer a:not(.social-button){
    font-size:19px;
  }
}

@media(min-width:841px) and (max-width:1120px){
  .nav-bar{
    grid-template-columns:154px minmax(0,1fr) auto;
    gap:18px;
  }

  .brand,.brand img{
    width:154px;
    height:88px;
  }

  .site-nav{
    gap:18px;
  }

  .site-nav a,.nav-trigger{
    font-size:16px;
  }

  .site-nav .nav-cta{
    min-width:144px;
    padding-inline:20px;
    font-size:16px;
  }

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

  .hero-copy h1{
    font-size:clamp(52px,5.2vw,64px);
  }

  .hero-showcase{
    margin-top:clamp(22px,3.4vw,38px);
  }
}

@media(min-width:841px){
  .subpage-cards{
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:24px;
  }

  .subpage-cards .white-card{
    min-height:auto;
  }
}

@media(max-width:720px){

  .hero-showcase .showcase-note{
    display:none;
  }
}

@media(max-width:520px){
  .hero-copy h1{
    font-size:40px;
    max-width:10.2ch;
  }
}

/* Conversion polish: softer geometry and clearer service accents. */
.hero{
  padding-block:max(4rem,5vh) max(3.5rem,5vh);
}

.btn,
.site-nav .nav-cta,
.ft-cta,
.mobile-sticky-cta,
.white-card,
.dark-card,
.feature-item,
.pricing-card,
.compare-col,
.step-card,
.detail-card,
.faq-shell,
.founder-img,
.book-side,
.hero-panel,
.feature-panel,
.showcase-carousel,
.showcase-media,
.cta-box{
  border-radius:12px;
}

.card-grid{
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}

/* Fixed 3-col so the 6 ownership items always fill complete rows —
   auto-fit at wide widths made 4 columns and left empty hairline cells. */
.feature-panel-body{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
}

@media(max-width:900px){
  .feature-panel-body{grid-template-columns:1fr 1fr}
}

.showcase-carousel{
  aspect-ratio:16 / 9;
}

.showcase-track{
  -webkit-mask-image:none;
  mask-image:none;
}

.showcase-slide{
  object-fit:contain;
}

.feature-panel .feature-item h4,
.feature-panel .feature-item::marker,
.card-kicker,
.icon-box,
.step-card .n{
  color:var(--feature-accent);
}
/* Owner request: numbered step squares use the brand accent border too, not
   white — matches .home-step .n, which was already accent-bordered. */
.step-card .n{
  border-color:var(--feature-accent);
}

/* .feature-item cells live inside .feature-panel-body's 1px-gap grid, where the
   body's own background IS the divider showing through. That only reads as a
   clean hairline if the cells sit flush: the blanket card-radius rule above
   (written for standalone cards) rounds them, and at each intersection the four
   corners curve away and expose the background as a 4-pointed notch. So cells
   stay square here and the panel clips instead, keeping its outer corners
   rounded. No per-cell accent border either — that stacked a second, tinted
   line against the gap, making horizontal seams read 2px and colored while the
   verticals stayed 1px and grey. The accent still shows on each h3's marker. */
.feature-panel{
  overflow:hidden;
}

.feature-panel .feature-item{
  border-radius:0;
}

.pricing-note{
  margin-top:2rem;
  padding-top:2rem;
  border-top:1px solid var(--rule-h);
  text-align:left;
}

.pricing-note h4{
  margin-bottom:.5rem;
  color:var(--fg);
  font-weight:800;
}

.pricing-note p{
  color:var(--fg-mute);
  font-size:17px;
  line-height:1.6;
}

.plan-small{
  color:var(--fg-mute);
  font-size:17px;
  line-height:1.55;
  margin-top:18px;
}

.pricing-compare-head .lead{
  margin-top:18px;
}

.compare-badge{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:8px 13px;
  border:1px solid currentColor;
  border-radius:999px;
  font-size:15px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:.1em;
}

.compare-agency{
  border-color:#E45D5D;
}

.compare-agency .compare-badge,
.compare-agency .big{
  color:#E45D5D;
}

.compare-revnew{
  border-color:#58C783;
}

.compare-revnew .compare-badge,
.compare-revnew .big{
  color:#58C783;
}

.compare-line{
  margin-top:28px;
  text-align:center;
  color:var(--fg);
  font-size:clamp(21px,1.8vw,26px);
  line-height:1.35;
  font-weight:800;
}

.text-highlight{
  color:var(--feature-accent);
}

/* Inline highlight that is also a link: colour alone is not an affordance
   inside a paragraph, so reveal an underline on hover/focus. */
.text-highlight-link:hover,
.text-highlight-link:focus-visible{
  text-decoration:underline;
  text-underline-offset:3px;
}

.feature-panel .feature-item h4{
  display:flex;
  align-items:center;
  gap:.65rem;
}

.feature-panel .feature-item h4::before{
  content:"";
  width:.68em;
  height:.68em;
  flex:0 0 auto;
  border-radius:4px;
  background:var(--feature-accent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--feature-accent) 34%,transparent);
}

@media(max-width:767px){
  .card-grid,
  .card-grid.two,
  .card-grid.three,
  .card-grid.four,
  .feature-panel-body{
    grid-template-columns:1fr;
  }
}

@media(min-width:1121px){
  .hero-grid{
    grid-template-columns:minmax(0,.88fr) minmax(600px,1.12fr);
    gap:clamp(42px,4.5vw,64px);
  }

  .hero-showcase{
    max-width:780px;
  }
}

/* Responsive desktop layout correction: full website feel without hurting mobile. */
@media(max-width:639px){
  .wrap{
    max-width:100%;
  }

  .section,
  .section-tight,
  .hero{
    padding-block:64px;
  }

  .hero-grid,
  .split,
  .showcase-grid,
  .compare,
  .detail-grid,
  .founder{
    grid-template-columns:1fr;
  }

  .hero-copy h1{
    font-size:clamp(36px,10.5vw,44px);
    line-height:1.04;
    max-width:11ch;
  }

  .hero-copy .lead,
  .lead{
    font-size:clamp(18px,5vw,20px);
  }

  .hero-showcase{
    margin-top:8px;
    max-width:none;
  }

  .showcase-carousel{
    aspect-ratio:16 / 9;
  }

  .hero-actions,
  .actions{
    align-items:stretch;
  }

  .hero-actions{
    flex-direction:row;
    gap:10px;
  }

  .hero-actions .btn{
    width:auto;
    flex:1 1 0;
    min-width:0;
    padding-inline:10px;
    font-size:15px;
    line-height:1.2;
  }

  .actions .btn,
  .btn{
    width:100%;
  }

  .stat-strip,
  .card-grid,
  .card-grid.two,
  .card-grid.three,
  .card-grid.four,
  .feature-panel-body,
  .process-line,
  .ft-grid{
    grid-template-columns:1fr;
  }
}

@media(min-width:640px) and (max-width:1023px){
  .wrap{
    max-width:var(--maxw);
  }

  .section,
  .section-tight,
  .hero{
    padding-block:clamp(72px,8vw,92px);
  }

  .hero-grid,
  .split,
  .showcase-grid{
    grid-template-columns:1fr;
  }

  .hero-copy h1{
    font-size:clamp(48px,7vw,64px);
    max-width:13ch;
  }

  .hero-showcase{
    justify-self:stretch;
    max-width:860px;
    margin-top:18px;
  }

  .showcase-carousel{
    aspect-ratio:16 / 9;
  }

  .stat-strip,
  .card-grid,
  .card-grid.two,
  .card-grid.three,
  .card-grid.four,
  .feature-panel-body,
  .process-line,
  .ft-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(min-width:1024px){
  .wrap{
    max-width:var(--maxw);
  }

  .hero{
    padding-block:clamp(86px,7vw,112px) clamp(72px,6vw,96px);
  }

  .hero-grid{
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    align-items:center;
    gap:clamp(44px,4vw,64px);
  }

  .hero-copy{
    max-width:680px;
  }

  .hero-copy h1{
    font-size:clamp(56px,4.7vw,70px);
    line-height:.98;
    max-width:15.8ch;
  }

  .hero-copy .lead{
    font-size:clamp(20px,1.55vw,23px);
    max-width:42ch;
  }

  .hero-showcase{
    max-width:900px;
    margin-top:0;
  }

  .showcase-carousel{
    aspect-ratio:16 / 9;
  }

  .split{
    grid-template-columns:minmax(260px,.58fr) minmax(0,1.42fr);
  }

  .showcase-grid{
    grid-template-columns:minmax(360px,.45fr) minmax(0,1fr);
  }

  .card-grid,
  .card-grid.three{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .card-grid.two,
  .compare,
  .detail-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  /* .feature-panel-body stays 3-col: its 6 ownership items fill 3+3;
     4-col left two empty hairline cells in the last row. */
  .card-grid.four,
  .stat-strip{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .process-line{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }

  .white-card,
  .dark-card,
  .feature-item,
  .step-card,
  .detail-card{
    min-height:auto;
  }

  /* Cards flow in a row inside .split so the column height matches the heading
     (R1 void fix). auto-fit adapts to 3- or 4-card sections without orphaning. */
  .split .subpage-cards{
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  }
}

@media(min-width:1280px){
  .hero-grid{
    grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  }

  .hero-showcase{
    max-width:960px;
  }

  .showcase-arrow{
    width:60px;
    height:60px;
  }
}

/* Homepage replacement sections */
.home-service-section{
  overflow:hidden;
}

.service-split{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;
  gap:clamp(30px,4vw,56px);
}

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

.service-solo .service-copy{
  max-width:920px;
}

.service-solo .service-copy h2{
  max-width:16ch;
}

.service-solo .service-card{
  max-width:760px;
}

.service-split-reverse .service-copy{
  order:2;
}

.service-split-reverse .service-proof-panel{
  order:1;
}

.service-copy{
  max-width:660px;
}

.service-copy h2{
  max-width:14ch;
}

.service-card,
.service-proof-panel{
  border:1px solid var(--rule);
  background:rgba(255,255,255,.045);
  border-radius:12px;
}
.septic-service-card,
.home-step,
.foundation-card{
  border:1px solid var(--rule);
  background:transparent;
  border-radius:12px;
}

.service-card{
  padding:clamp(26px,3vw,38px);
}

.service-card h3,
.service-proof-panel h3,
.home-step h3,
.foundation-card h3{
  color:var(--fg);
}

.service-card p,
.service-proof-panel p,
.home-step p,
.foundation-card p,
.founder-support,
.cta-support{
  color:var(--fg-soft);
  font-size:19px;
  line-height:1.66;
}

.service-visual{
  margin:0;
  border:1px solid var(--rule);
  border-radius:12px;
  padding:clamp(12px,2vw,22px);
  background:rgba(255,255,255,.035);
  box-shadow:var(--shadow);
}

.service-visual img{
  width:100%;
  height:auto;
  border-radius:10px;
}

.service-list{
  display:grid;
  gap:10px;
}

.service-list li{
  position:relative;
  padding-left:28px;
  color:var(--fg-soft);
  font-size:19px;
  line-height:1.62;
}

.service-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:9px;
  height:9px;
  border-radius:3px;
  background:var(--feature-accent);
}

.service-proof-panel{
  padding:clamp(26px,3vw,40px);
  min-height:260px;
  display:flex;
  flex-direction:column;
  /* Content reads as one centered group; flex-end + a huge h3 top margin
     used to strand the icon at the top with a dead void in the middle. */
  justify-content:center;
}

.service-icon{
  width:70px;
  height:70px;
  display:grid;
  place-items:center;
  border:1px solid var(--rule-h);
  border-radius:16px;
  color:var(--feature-accent);
  font-size:34px;
  line-height:1;
  font-weight:800;
  margin-bottom:auto;
  /* Force monochrome text glyphs so the brand-accent color applies on every
     platform. Without this, emoji-capable symbols (★ ⚛) render as multicolor
     emoji on iOS/Android and ignore the CSS color, looking different from desktop. */
  font-variant-emoji:text;
}

.service-proof-panel h3{
  max-width:15ch;
  margin-top:24px;
}

.service-proof-panel p{
  margin-top:16px;
  max-width:32ch;
}

.septic-service-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
}

.septic-service-card{
  min-height:76px;
  display:flex;
  align-items:center;
  padding:18px 20px;
  color:var(--fg);
  font-size:clamp(17px,1.2vw,20px);
  line-height:1.25;
  font-weight:800;
}

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

.home-step{
  padding:clamp(26px,3vw,38px);
  min-height:300px;
}

.home-step .n{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid var(--feature-accent);
  border-radius:12px;
  color:var(--feature-accent);
  font-weight:800;
  margin-bottom:22px;
}

.home-step .step-time{
  margin:10px 0 18px;
  color:var(--feature-accent);
  font-weight:800;
}

.foundation-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px;
}

.foundation-card{
  padding:clamp(24px,3vw,34px);
  min-height:220px;
}

.foundation-card h3{
  font-size:clamp(22px,1.7vw,27px);
}

.foundation-card p{
  margin-top:14px;
}

.stack-marquee{
  position:relative;
  border:1px solid var(--rule);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  padding:18px;
}

.stack-track{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
}

.stack-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:58px;
  padding:0 24px;
  border:1px solid var(--rule);
  border-radius:12px;
  color:var(--fg);
  background:var(--surface-2);
  font-size:18px;
  line-height:1.2;
  font-weight:800;
  white-space:nowrap;
}

.founder-support{
  margin:-14px 0 30px;
  max-width:36ch;
}

.home-faq{
  max-width:1040px;
}

.cta-support{
  max-width:58ch;
  margin:18px auto 30px;
}

@media(max-width:1023px){
  .service-split,
  .home-process-grid{
    grid-template-columns:1fr;
  }

  .service-split-reverse .service-copy,
  .service-split-reverse .service-proof-panel{
    order:initial;
  }

  .service-copy{
    max-width:760px;
  }

  .service-proof-panel{
    min-height:260px;
  }
}

@media(max-width:767px){
  .service-split,
  .septic-service-grid,
  .home-process-grid,
  .foundation-grid{
    grid-template-columns:1fr;
  }

  .service-proof-panel,
  .home-step,
  .foundation-card{
    min-height:auto;
  }

  .service-icon{
    width:58px;
    height:58px;
    font-size:28px;
    margin-bottom:34px;
  }

  .service-proof-panel h3{
    margin-top:0;
  }
}

/* Sitewide readability and desktop harmonization */
.hero-narrative{
  font-size:clamp(18px,1.35vw,21px);
  line-height:1.62;
  max-width:54ch;
}

.lead{
  font-size:clamp(18px,1.3vw,21px);
}

.white-card p,
.dark-card p,
.feature-item p,
.step-card p,
.detail-card li,
.service-card p,
.service-proof-panel p,
.home-step p,
.foundation-card p,
.faq-list .answer,
.book-embed p,
.book-side p,
.cta-support,
.founder-support{
  font-size:clamp(19px,1.18vw,21px);
  line-height:1.62;
}

.dropdown-panel span,
.dropdown-panel-icons .nav-copy span{
  font-size:16px;
}

.text-highlight,
.service-icon,
.home-step .n,
.home-step .step-time,
.feature-panel .feature-item h4,
.dropdown-panel-icons .nav-icon{
  color:var(--feature-accent);
}

.feature-panel .feature-item h4::before,
.service-list li::before{
  background:var(--feature-accent);
}

.stack-badge{
  border-color:color-mix(in srgb,var(--feature-accent) 35%,var(--rule));
}

@media(min-width:1024px){
  .site-header .wrap{
    max-width:1480px;
  }

  .hero-grid{
    grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
    gap:clamp(56px,5vw,84px);
  }

  .hero-showcase{
    max-width:980px;
  }

  .pricing-card{
    max-width:520px;
  }

  .faq-shell{
    width:100%;
    max-width:var(--maxw);
    margin-inline:auto;
  }

  .cta-box{
    width:100%;
    max-width:var(--maxw);
    margin-inline:auto;
  }
}

@media(min-width:1440px){
  .hero-copy h1{
    font-size:clamp(64px,5vw,88px);
  }
}

@media(max-width:767px){
  .hero-narrative,
  .lead{
    font-size:19px;
  }

  .white-card p,
  .dark-card p,
  .feature-item p,
  .step-card p,
  .detail-card li,
  .service-card p,
  .service-proof-panel p,
  .home-step p,
  .foundation-card p,
  .faq-list .answer,
  .book-embed p,
  .book-side p{
    font-size:18px;
  }
}

/* ================================
   Final Revnew design system
   ================================ */
h1,
h2,
h3,
h4,
.lead,
p,
li,
summary,
blockquote,
strong,
span{
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;
}

h1,
h2,
h3{
  white-space:normal;
}

.text-highlight,
.text-accent,
.accent{
  color:var(--feature-accent);
}

.section-header{
  max-width:960px;
  margin-inline:auto;
  margin-bottom:clamp(42px,6vw,82px);
  text-align:center;
}

.section-header h2,
section h2{
  font-size:clamp(38px,3.6vw,58px);
  line-height:1.08;
  letter-spacing:-.045em;
}

.section-header p,
section .section-lead{
  font-size:clamp(18px,1.2vw,21px);
  line-height:1.6;
  color:var(--muted);
}

.nav-bar{
  min-height:clamp(82px,7vw,104px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(24px,4vw,56px);
}

.brand{
  width:clamp(154px,12vw,210px);
  height:clamp(72px,6vw,100px);
  overflow:visible;
}

.brand img{
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  object-position:center;
}

.site-header{
  min-height:clamp(82px,7vw,104px);
}

/* Desktop-only: the mobile menu (max-width:840px block) relies on gap:0 with
   per-item dividers, so this spacing must not leak below 841px. */
@media(min-width:841px){
  .site-nav{
    gap:clamp(22px,3vw,34px);
  }

  .site-nav a,
  .nav-trigger{
    font-size:clamp(15px,1vw,18px);
    font-weight:800;
  }
}

.nav-cta,
.site-header .btn,
.site-header .button{
  min-height:52px;
  padding:14px 28px;
}

/* Sizing lives solely in the authoritative .page-hero rule further down —
   no shadowed vh/padding values left here to resurface via cascade shifts. */
.page-hero{
  display:flex;
}

.page-hero-inner{
  width:min(calc(100% - (var(--pad) * 2)),var(--maxw));
  max-width:var(--maxw);
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(340px,.85fr);
  gap:clamp(48px,7vw,110px);
  align-items:center;
}

.page-hero-copy{
  max-width:760px;
}

.page-hero h1{
  max-width:15ch;
  font-size:clamp(54px,5.2vw,86px);
  line-height:1.06;
  letter-spacing:-.06em;
  margin:0 0 clamp(22px,2.6vw,30px);
}

.page-hero .lead{
  max-width:680px;
  font-size:clamp(19px,1.45vw,24px);
  line-height:1.55;
  color:var(--muted);
}

.page-hero-visual{
  width:100%;
  max-width:620px;
  justify-self:end;
}

.page-hero-card{
  background:linear-gradient(180deg,var(--surface-strong),var(--surface));
  border:1px solid var(--line);
  border-radius:24px;
  padding:clamp(26px,3vw,44px);
  box-shadow:0 30px 90px rgba(0,0,0,.28);
}

.contact-page .page-hero-card a:not(.social-button){color:inherit}
.contact-card-list{display:grid;gap:var(--space-s)}
.contact-card-row{
  display:flex;align-items:center;gap:var(--space-m);min-width:0;
  padding-block:var(--space-s);border-bottom:1px solid var(--rule);
}
.contact-card-row > span:last-child{display:grid;min-width:0;gap:2px}
.contact-card-row strong{font-size:var(--t-label);color:var(--fg-mute)}
.contact-card-row > span:last-child > span{font-size:var(--t-body);overflow-wrap:anywhere}
.contact-card-row .nav-icon{
  display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;
  border:1px solid var(--rule);border-radius:var(--radius);color:var(--feature-accent);
}
.contact-card-meta{display:grid;gap:2px;padding-top:var(--space-s);color:var(--fg-soft);font-size:var(--t-body)}
.contact-card-meta strong{color:var(--fg)}
.contact-reach{display:grid;gap:clamp(30px,4vw,48px)}
.contact-reach-head{max-width:720px}
.contact-split{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,48px);align-items:start}
.contact-form-card,
.contact-direct{
  min-width:0;
  border:1px solid var(--rule);border-radius:20px;background:var(--surface-2);
  padding:clamp(26px,3vw,40px);
}
.contact-form{display:grid;gap:var(--space-m)}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-m)}
.form-field{display:grid;min-width:0}
.form-field label{margin-bottom:8px;color:var(--fg-soft);font-size:var(--t-label);font-weight:700}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:14px 16px;color:var(--fg);font:inherit;font-size:var(--t-body);
}
.form-field select{height:calc(30px + 1.6em);color-scheme:dark}
.form-field textarea{resize:vertical;min-height:148px}
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.hidden-field{position:absolute;left:-9999px}
.form-optional{color:var(--fg-mute);font-weight:400}
.contact-form .btn{justify-self:start}
.contact-phone-link{
  display:inline-block;margin-top:10px;color:var(--fg);font-size:clamp(28px,3.2vw,44px);
  font-weight:800;line-height:1.05;letter-spacing:-.035em;
}
.contact-direct-actions{display:grid;gap:var(--space-s);margin-top:var(--space-l)}
.contact-direct-actions .btn{width:100%;max-width:100%;white-space:normal;text-align:center}
.contact-expect-label{margin-top:var(--space-xl)}
.contact-direct .check-list{margin-top:0}
@media(min-width:981px){
  .contact-split{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:clamp(32px,4vw,56px)}
  .contact-direct{
    position:sticky;top:calc(var(--header-h) + 24px);
    border:0;border-radius:0;background:transparent;padding:0;
  }
}
@media(max-width:640px){
  .form-row{grid-template-columns:1fr}
  .contact-page .page-hero-copy .hero-actions .btn,
  .contact-form .btn{width:100%;white-space:normal;text-align:center}
}

.billing-toggle{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin:18px 0 26px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.06);
}

.billing-option{
  min-height:44px;
  padding:10px 18px;
  border-radius:999px;
  color:var(--text);
  font-size:18px;
  line-height:1;
  font-weight:800;
  transition:background 160ms ease,color 160ms ease,transform 160ms ease;
}

.billing-option:hover,
.billing-option:focus-visible{
  background:rgba(255,255,255,.12);
}

.billing-option.is-active{
  background:var(--text);
  color:var(--bg);
}

.billing-price[hidden]{
  display:none;
}

.pricing-hero-card{
  max-width:min(560px,100%);
  padding:clamp(28px,3vw,46px);
}

.billing-price-stack{
  display:grid;
  align-items:start;
  min-height:clamp(126px,12vw,154px);
}

.billing-price-stack .billing-price{
  grid-area:1 / 1;
  opacity:0;
  transform:translate3d(0,8px,0);
  transition:opacity 360ms cubic-bezier(.2,.7,.2,1),transform 360ms cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}

.billing-price-stack .billing-price.is-active{
  opacity:1;
  transform:translate3d(0,0,0);
  pointer-events:auto;
}

.price-free{
  display:inline-block;
  padding:1px 9px;
  border-radius:999px;
  background:rgba(88,199,131,.14);
  color:#63d471;
  font-weight:800;
  white-space:nowrap;
}

.page-hero-card .amount{
  font-size:clamp(64px,6vw,112px);
  font-weight:800;
  line-height:.9;
  letter-spacing:-.06em;
}

.pricing-hero-card .amount{
  font-size:clamp(58px,5vw,92px);
  letter-spacing:-.052em;
}

.page-hero-card .amount sup{
  font-size:.28em;
  vertical-align:super;
}

.page-hero-card .amount small{
  font-size:clamp(15px,1.1vw,16px);
  letter-spacing:0;
  color:var(--muted);
}

.page-hero-list{
  display:grid;
  gap:14px;
  margin-top:24px;
}

.page-hero-list li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  color:var(--muted);
  font-size:18px;
  line-height:1.45;
}

.page-hero-list li::before{
  content:"";
  width:9px;
  height:9px;
  flex:0 0 9px;
  margin-top:.55em;
  border-radius:999px;
  background:var(--feature-accent);
}

.page-hero-center{
  text-align:center;
}

.page-hero-center .page-hero-inner{
  display:block;
  max-width:var(--maxw);
  width:min(calc(100% - (var(--pad) * 2)),var(--maxw));
}

.page-hero-center h1,
.page-hero-center .lead{
  margin-inline:auto;
}

.page-hero-center h1{
  max-width:min(100%,13.5ch);
  font-size:clamp(48px,5vw,80px);
}

.home-faq{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
}

.home-faq h2{
  max-width:13.5ch;
  margin-inline:auto;
  font-size:clamp(42px,4.8vw,76px);
  line-height:.94;
  text-align:center;
}

/* Desktop hero correction */
@media(min-width:1024px){
  .service-solo .service-copy{
    max-width:1080px;
  }

  .service-solo .service-copy h2{
    max-width:18ch;
  }

  .hero{
    padding-block:clamp(46px,4.5vw,74px) clamp(72px,7vw,112px);
  }

  .hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(28px,4vw,56px);
    align-items:start;
  }

  .hero-copy{
    max-width:680px;
    min-width:0;
  }

  .hero-copy h1{
    max-width:min(100%,16.5ch);
    width:100%;
    font-size:clamp(48px,4.6vw,74px);
    line-height:.95;
    text-wrap:balance;
  }

  .hero-showcase{
    min-width:0;
    max-width:100%;
    justify-self:end;
    align-self:start;
    margin-top:0;
  }
}

/* Wider desktop refinement */
@media(min-width:1440px){
  .hero-grid{
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    gap:clamp(36px,4vw,64px);
  }

  .hero-copy h1{
    max-width:min(100%,18ch);
  }
}

/* Mobile/tablet should remain intentionally compact */
@media(max-width:900px){
  .page-hero,
  .page-head{
    min-height:auto;
    padding-block:var(--hero-y);
    align-items:flex-start;
  }

  .page-hero-inner{
    grid-template-columns:1fr;
    gap:36px;
  }

  .page-hero h1,
  .page-head h1{
    font-size:clamp(44px,13vw,64px);
    max-width:12.5ch;
  }

  .page-hero .lead,
  .page-head .lead{
    font-size:18px;
  }

  .page-hero-visual{
    max-width:100%;
    justify-self:stretch;
  }

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

  .hero-copy{
    max-width:100%;
  }

  .hero-copy h1{
    max-width:12.5ch;
  }
}

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

  body.reveal-ready .reveal,
  .reveal{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}

/* ================================
   RevNew Layout Lock
   Purpose: stabilize cross-page layout
   ================================ */
.site-container,
.wrap,
.site-header .wrap,
.site-footer .wrap,
.hero-grid,
.page-hero-inner{
  width:min(calc(100% - (var(--pad) * 2)),var(--maxw));
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:0;
}

section{
  scroll-margin-top:120px;
}

.section,
.section.dark-band,
.section.light-band,
.section.soft-band{
  padding-block:var(--section-y);
}

.faq-accordion-section{
  padding-block-start:var(--section-y);
}

.pricing-logic-section,
.process-detail-section{
  padding-block-start:var(--section-y);
}

.section-tight{
  padding-block:var(--section-y-tight);
}

.site-header{
  min-height:var(--header-h);
}

.nav-bar{
  min-height:var(--header-h);
}

.brand{
  width:var(--logo-w);
  height:92px;
  justify-self:start;
  align-self:center;
  overflow:hidden;
}

.brand img,
.brand svg{
  width:100%;
  height:100%;
  display:block;
  max-width:none;
  object-fit:contain;
  object-position:left center;
}

.site-nav a:not(.nav-cta)::after,
.nav-trigger::after{
  position:absolute;
  left:0;
  right:0;
  bottom:-18px;
  height:1px;
  transform-origin:left center;
}

.site-nav > a,
.nav-trigger,
.nav-cta{
  white-space:nowrap;
}

.dropdown-panel a,
.dropdown-panel strong,
.dropdown-panel span,
.dropdown-panel .nav-copy{
  white-space:normal;
}

@media(min-width:901px){
  .nav-bar{
    display:grid;
    grid-template-columns:var(--header-logo-col) minmax(0,1fr);
    align-items:center;
    gap:24px;
  }

  .hamburger{
    display:none;
  }

  .site-nav{
    justify-self:stretch;
    display:grid;
    grid-template-columns:repeat(6,max-content) var(--header-cta-col);
    align-items:center;
    justify-content:end;
    gap:clamp(22px,2.4vw,34px);
    min-width:0;
  }

  .site-nav a.mobile-home{
    display:block;
  }

  .site-nav a,
  .nav-trigger{
    font-size:17px;
    font-weight:800;
    line-height:1;
  }

  .site-nav > a:not(.nav-cta),
  .site-nav .nav-dropdown{
    min-height:52px;
    display:flex;
    align-items:center;
  }

  .site-nav > a:not(.nav-cta),
  .nav-trigger{
    height:52px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding-block:0;
    font-family:inherit;
  }

  .nav-trigger{
    appearance:none;
    border:0;
    background:transparent;
    cursor:pointer;
  }

  .site-nav .nav-cta,
  .nav-cta,
  .site-header .btn,
  .site-header .button{
    justify-self:end;
    min-height:52px;
    padding:14px 28px;
  }
}

.hero,
/* AUTHORITATIVE hero box. Padding is the single owner of hero top/bottom
   space: no vh-based min-height and no vertical centering, so every interior
   page starts at exactly header + --hero-y regardless of window height or
   how tall the hero content is (owner symmetry requirement). */
.page-hero{
  padding-block:var(--hero-y);
  min-height:auto;
  display:flex;
  align-items:flex-start;
}

.hero{
  padding-block:clamp(64px,7vw,104px) clamp(52px,5vw,78px);
  min-height:clamp(500px,58vh,620px);
}

.hero-grid,
.page-hero-inner{
  display:grid;
  align-items:start;
}

.page-hero-center .page-hero-inner{
  display:block;
  width:min(calc(100% - (var(--pad) * 2)),var(--maxw));
  max-width:var(--maxw);
}

@media(min-width:1024px){
  .hero-grid{
    grid-template-columns:minmax(0,.9fr) minmax(460px,1.1fr);
    gap:clamp(44px,4.5vw,72px);
    align-items:center;
  }

  .page-hero-inner{
    grid-template-columns:minmax(0,.95fr) minmax(420px,1.05fr);
    gap:clamp(48px,6vw,96px);
  }

  .hero-copy,
  .page-hero-copy{
    max-width:720px;
  }

  .page-hero h1,
  .page-head h1{
    max-width:16ch;
    font-size:clamp(56px,5.4vw,92px);
    line-height:1.02;
    letter-spacing:-.06em;
  }

  .hero-copy h1{
    max-width:12ch;
    font-size:clamp(54px,5vw,86px);
    line-height:1.02;
    letter-spacing:-.06em;
  }

  .hero-copy p,
  .page-hero .lead,
  .page-head .lead{
    max-width:660px;
    font-size:clamp(22px,1.35vw,24px);
    line-height:1.55;
  }

  .hero-showcase{
    width:100%;
    min-width:0;
    max-width:760px;
    justify-self:end;
    align-self:start;
  }

  .page-hero-visual{
    width:100%;
    min-width:0;
    max-width:760px;
    justify-self:end;
  }

  .service-copy{
    max-width:760px;
  }

  .service-copy h2{
    max-width:16ch;
  }

  .pricing-card{
    max-width:620px;
  }

  .compare{
    gap:clamp(28px,4vw,56px);
  }

  .compare-col{
    min-height:520px;
    padding:clamp(38px,4vw,64px);
  }

}

.page-head{
  padding-block:var(--hero-y);
  min-height:clamp(500px,62vh,700px);
  display:flex;
  align-items:center;
}

.center-head{
  text-align:center;
}

.center-head h1,
.center-head .lead{
  margin-inline:auto;
}

.card-grid,
.features-grid,
.process-grid,
.detail-grid{
  display:grid;
  gap:clamp(22px,3vw,40px);
}

.white-card,
.dark-card,
.service-card,
.step-card,
.detail-card,
.foundation-card,
.pricing-card,
.faq-shell,
.book-side,
.home-step,
.page-hero-card{
  background:linear-gradient(180deg,var(--surface-strong),var(--surface));
  border:1px solid var(--line);
  border-radius:20px;
  padding:clamp(32px,3vw,44px);
  color:var(--text);
}
.book-side{padding:var(--book-inset)}

@media(min-width:1024px){
  .service-card,
  .service-proof-panel,
  .home-step,
  .foundation-card{
    padding:clamp(34px,3.4vw,56px);
  }

  .pricing-card{
    padding:clamp(42px,4vw,64px);
  }

  .page-hero-card{
    padding:clamp(38px,4vw,64px);
  }
}

.site-footer{
  padding-block:clamp(72px,8vw,112px) 28px;
}

.site-footer .wrap,
.ft-grid{
  width:min(calc(100% - (var(--pad) * 2)),var(--maxw));
  max-width:var(--maxw);
  margin-inline:auto;
}

.ft-grid{
  display:grid;
  grid-template-columns:var(--header-logo-col) minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr) minmax(240px,1.15fr);
  gap:clamp(24px,3vw,44px);
  align-items:start;
}

.ft-brand{
  width:var(--logo-w);
  height:92px;
  overflow:hidden;
}

.ft-brand img,
.ft-brand svg{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:left center;
}

@media(max-width:900px){
  :root{
    --pad:20px;
    --section-y:72px;
    --hero-y:84px;
  }

  .site-header{
    min-height:78px;
  }

  .nav-bar{
    min-height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  .brand{
    width:var(--logo-mobile-w);
    height:70px;
  }

  .brand img,
  .brand svg{
    width:100%;
    height:100%;
    display:block;
  }

  .site-nav{
    inset:78px 0 0;
  }

  .site-nav:not(.open) .dropdown-panel{
    display:none;
  }

  .site-nav.open .dropdown-panel{
    display:grid;
  }

  .hero,
  .page-hero,
  .page-head{
    min-height:auto;
    padding-block:var(--hero-y);
    align-items:flex-start;
  }

  .hero{
    padding-block:clamp(32px,8vw,64px) clamp(58px,10vw,76px);
  }

  .hero-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  /* .page-hero-inner needs its own (larger) gap: on every subpage hero this
     grid's second row is the visual card sitting directly under the CTA
     buttons, so 16px read as almost no breathing room between them. .hero-grid
     doesn't have this problem — the homepage hero's only CTAs live inside the
     showcase card itself, not stacked above it — so it keeps the tighter gap. */
  .page-hero-inner{
    grid-template-columns:1fr;
    gap:clamp(28px,6vw,36px);
  }

  .hero-copy h1,
  .page-hero h1,
  .page-head h1{
    max-width:13ch;
    font-size:clamp(42px,12vw,64px);
  }

  .hero-showcase,
  .page-hero-visual{
    max-width:100%;
    justify-self:stretch;
    margin-top:0;
  }

  .showcase-carousel{
    aspect-ratio:2 / 1;
  }

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

/* High-visibility readability pass */
.lead,
.page-hero .lead,
.page-head .lead{
  color:var(--text);
  font-size:clamp(18px,1.3vw,21px);
}

.white-card p,
.dark-card p,
.feature-item p,
.step-card p,
.detail-card li,
.service-card p,
.service-proof-panel p,
.home-step p,
.foundation-card p,
.faq-list .answer,
.book-embed p,
.book-side p,
.pricing-card p,
.page-hero-card p,
.page-hero-list li,
.check-list li,
.ft-note,
.site-footer a{
  color:var(--text);
  font-size:clamp(20px,1.16vw,22px);
  line-height:1.62;
}

.dropdown-panel span,
.dropdown-panel-icons .nav-copy span{
  color:var(--fg-mute);
  font-size:var(--t-label);
  line-height:1.4;
}

.eyebrow,
.card-kicker,
.ft-title,
.plan-small,
.pricing-note p,
.showcase-note,
.sample-note,
.capacity{
  color:var(--text);
  font-size:17px;
}

.dropdown-panel-icons a{
  grid-template-columns:64px minmax(0,1fr);
  gap:18px;
  padding:18px;
}

.dropdown-panel-icons .nav-icon{
  width:64px;
  min-width:64px;
  height:64px;
  min-height:64px;
  font-size:32px;
}

.service-icon{
  width:78px;
  height:78px;
  font-size:42px;
}

.page-hero-list li::before,
.check-list li::before{
  width:10px;
  height:10px;
  flex-basis:10px;
}

.home-step .n{
  width:58px;
  height:58px;
  font-size:22px;
}

@media(max-width:900px){
  .lead,
  .page-hero .lead,
  .page-head .lead{
    font-size:18px;
  }

  .dropdown-panel-icons a{
    grid-template-columns:58px minmax(0,1fr);
  }

  .dropdown-panel-icons .nav-icon{
    width:58px;
    min-width:58px;
    height:58px;
    min-height:58px;
    font-size:30px;
  }
}

/* ================================
   Visual cleanliness pass
   Phase 1: De-box secondary homepage cards
   Phase 2: Homepage section breathing room
   Phase 3: Hero carousel polish
   CSS-only. No layout, no wrap, no header,
   no footer, no colors, no copy touched.
   ================================ */

/* Phase 1a: Soften foundation cards by removing heavy border and thinning the background */
.foundation-card{
  background:rgba(255,255,255,.025);
  border-color:rgba(255,255,255,.07);
  box-shadow:none;
  border-radius:16px;
}

/* Phase 1b: Soften home-step cards since they are secondary to the numbered steps */
.home-step{
  background:rgba(255,255,255,.025);
  border-color:rgba(255,255,255,.07);
  box-shadow:none;
  border-radius:12px;
}

/* Phase 1c: Soften service-proof-panel so it supports the copy instead of competing */
.service-proof-panel{
  background:rgba(255,255,255,.025);
  border-color:rgba(255,255,255,.07);
  box-shadow:none;
}

/* Phase 1d: Soften septic-service-card badges because they are a label list and not feature cards */
.septic-service-card{
  background:rgba(255,255,255,.02);
  border-color:rgba(255,255,255,.06);
  box-shadow:none;
  border-radius:12px;
  min-height:72px;
}

/* Phase 1e: Remove box-shadow from white-card on feature/subpage sections
   so they read as structured text blocks, not "widgets" */
.subpage-cards .white-card{
  box-shadow:none;
  border-color:rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
}

/* Phase 1f: Remove hover lift from the softer card types like secondary cards
   should not animate like primary interactive elements */
.foundation-card:hover,
.service-proof-panel:hover,
.septic-service-card:hover{
  transform:none;
  box-shadow:none;
  border-color:rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
}

/* Phase 2: Homepage section breathing room
   Give each home-service-section noticeably more vertical air
   so each service block reads as a distinct chapter */
.home-service-section.section{
  padding-block:clamp(72px,7vw,112px);
}

/* Increase gap between the two halves of the service split
   so the icon panel breathes away from the copy */
.service-split{
  gap:clamp(30px,4vw,56px);
}

/* Increase the minimum height of the proof panel so
   it doesn't feel cramped next to a full copy block */
.service-proof-panel{
  min-height:220px;
}

.service-proof-panel.service-demo-panel{
  aspect-ratio:16 / 9;
  min-height:0;
  padding:0;
  overflow:hidden;
  background:#050505;
  contain:layout paint;
  isolation:isolate;
}

.service-demo-video{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  object-position:center;
  background:#050505;
  pointer-events:none;
}

/* Phase 2b: Foundation grid: give cards more internal breathing room */
.foundation-grid{
  gap:clamp(18px,2.5vw,28px);
}

.foundation-card{
  padding:clamp(28px,3.5vw,46px);
  min-height:200px;
}

/* Phase 2c: Septic service grid: let the label grid breathe */
.septic-service-grid{
  gap:clamp(8px,1vw,12px);
}

/* Phase 2d: Home process grid with more horizontal separation between steps */
.home-process-grid{
  gap:clamp(14px,2vw,24px);
}


.showcase-arrow:hover,
.showcase-arrow:focus-visible{
  border-color:rgba(255,255,255,.46);
  background:rgba(10,10,10,.72);
}

/* ================================
   Visual cleanliness pass: Phase 1
   De-emphasis, hierarchy, confidence
   CSS-only. No layout, no wrap, no header,
   no footer, no colors, no copy touched.
   ================================ */

/* --- 1A. Card de-emphasis (deepen existing softening) --- */

/* Foundation cards: thinner background, softer border */
.foundation-card{
  background:rgba(255,255,255,.018);
  border-color:rgba(255,255,255,.05);
}

/* Septic-service badges: make them read as a tag list */
.septic-service-card{
  background:transparent;
  border-color:rgba(255,255,255,.06);
  min-height:64px;
  font-size:clamp(17px,1.2vw,20px);
}

/* Stack marquee container: remove the bounding box feel */
.stack-marquee{
  border-color:transparent;
  background:transparent;
  padding:12px 0;
}

/* Stack badges: shrink to footnote-level prominence */
.stack-badge{
  min-height:44px;
  font-size:15px;
  background:transparent;
  border-color:rgba(255,255,255,.08);
  padding:0 18px;
}

/* Tools marquee section */
.partner-head{
  max-width:980px;
  margin:0 auto;
  text-align:center;
}

.partner-head h2{
  /* Two balanced lines at section-heading scale; the previous 82px/14ch
     combo blew the sentence up into a 3-line billboard. */
  max-width:24ch;
  margin-inline:auto;
  font-size:clamp(36px,3.6vw,54px);
  line-height:1.1;
  letter-spacing:-.03em;
}

.partner-head .lead{
  max-width:760px;
  margin:18px auto 0;
}

.tools-showcase{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(26px,3.4vw,40px);
  margin-top:var(--partner-rhythm);
}

.logo-item{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:clamp(166px,13vw,230px);
  height:clamp(58px,5vw,78px);
}

.partner-note{
  color:var(--muted);
  font-size:clamp(16px,1vw,18px);
  font-weight:700;
  text-align:center;
}

.logo-item img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:clamp(34px,3.7vw,52px);
  object-fit:contain;
}

/* Per-logo box widths are set to each asset's own aspect ratio at the shared
   max-height above, so every mark fills its slot at the same visual size
   instead of one width fitting all and shrinking narrower marks. */
.logo-openai{
  width:clamp(150px,12vw,210px);
}

.logo-google{
  width:clamp(115px,10vw,165px);
}

.logo-localfalcon{
  width:clamp(160px,13vw,220px);
}

.logo-anthropic{
  width:clamp(48px,4vw,64px);
}

.logo-vscode{
  width:clamp(48px,4vw,64px);
}

.logo-meta{
  width:clamp(150px,12vw,210px);
}

/* Meta's mark has almost no built-in padding, so at the shared height it
   reads larger/bolder than the rest of the row. Scale it down to match. */
.logo-meta img{
  transform:scale(0.76);
}

.logo-godaddy{
  width:clamp(150px,12vw,205px);
}

/* GoDaddy's mark is 2:1 with generous internal padding, so at the shared
   max-height it reads smaller than the wide wordmarks. Scale up to match. */
.logo-godaddy img{
  transform:scale(1.18);
}

@media(max-width:900px){
  .partner-head h2{
    max-width:16ch;
    font-size:clamp(34px,8vw,52px);
  }

  .logo-item{
    width:clamp(142px,44vw,188px);
    height:56px;
  }

  .logo-openai{
    width:clamp(130px,40vw,170px);
  }

  .logo-google{
    width:clamp(100px,32vw,132px);
  }

  /* Sized so GoDaddy + LocalFalcon share the last row instead of
     wrapping into two lonely single-logo rows. */
  .logo-localfalcon{
    width:clamp(120px,38vw,150px);
  }

  .logo-anthropic{
    width:clamp(44px,14vw,56px);
  }

  .logo-vscode{
    width:clamp(44px,14vw,56px);
  }

  .logo-meta{
    width:clamp(130px,40vw,170px);
  }

  .logo-godaddy{
    width:clamp(110px,34vw,140px);
  }

  .logo-item img{
    max-height:36px;
  }

  .logo-meta img{
    transform:scale(0.76);
  }
}

/* Showcase note: footnote-level importance */
.showcase-note{
  color:rgba(245,245,240,.88);
  font-size:clamp(19px,1.15vw,22px);
  line-height:1.5;
  font-weight:750;
}

/* --- 1C. CTA confidence boost --- */

/* Make cta-box visually distinct from content cards */
.cta-box{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border-color:rgba(255,255,255,.15);
}

/* CTA headline: noticeably larger than section headings */
.cta-close h2{
  max-width:16ch;
  font-size:clamp(42px,4.5vw,68px);
}
/* On narrow phones the 42px floor lets a long word ("conversations?") paint
   wider than the cta-box content area; scale with viewport instead. */
@media(max-width:480px){
  .cta-close h2{font-size:clamp(32px,9.5vw,40px)}
}

/* --- 1D. FAQ shell simplification --- */

/* FAQ shell: structured content, not a widget */
.faq-shell{
  background:rgba(255,255,255,.02);
  box-shadow:none;
}

/* .faq-shell sets margin-block:0 (it is usually the only block in its section),
   which lands after .mt-m in the cascade and cancels it — so a utility class in
   the markup silently does nothing here. When the shell follows a section
   heading it needs the same separation every other section body gets, so match
   .mt-m's value off the heading instead of fighting the utility. */
.center-head + .faq-shell{
  margin-top:clamp(40px,5vw,68px);
}

/* Quieter toggle icons */
.faq-list .toggle{
  width:24px;
  height:24px;
  border-color:rgba(255,255,255,.1);
}

/* --- 1E. Card kicker de-emphasis --- */

/* When kicker duplicates the h3, it should be nearly invisible */
.white-card .card-kicker,
.dark-card .card-kicker{
  font-size:var(--t-label);
  letter-spacing:.12em;
  opacity:.78;
}

/* --- 1F. Hero narrative de-emphasis (Phase 3 from plan) --- */

/* Soften narrative text so the H1 reads first */
.hero-narrative{
  opacity:.94;
  font-size:clamp(18px,1.24vw,20px);
  line-height:1.66;
}

@media(max-width:767px){
  .btn,
  .hero-actions .btn,
  .actions .btn{
    font-size:16px;
    line-height:1.22;
  }
}

/* Controlled whole-site polish: semantics, hit areas, and stable controls */
.heading-card-title{
  font-size:clamp(22px,2.1vw,30px);
  line-height:1.2;
  letter-spacing:-.014em;
  font-weight:800;
}

.feature-panel .feature-item h3{
  display:flex;
  align-items:center;
  gap:.65rem;
  font-size:21px;
  line-height:1.35;
  letter-spacing:0;
}

.feature-panel .feature-item h3::before{
  content:"";
  width:.68em;
  height:.68em;
  flex:0 0 auto;
  border-radius:4px;
  background:var(--feature-accent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--feature-accent) 34%,transparent);
}

.site-nav a:not(.nav-cta),
.nav-trigger{
  min-height:44px;
  align-items:center;
  padding-inline:4px;
}

.dropdown-panel a{
  min-height:80px;
}

.site-footer a{
  min-height:40px;
  display:flex;
  align-items:center;
}

.ft-cta{
  min-height:var(--button-h);
  align-items:center;
}

.showcase-arrow{
  width:44px;
  height:44px;
}

.showcase-dots{
  gap:4px;
}

.showcase-dots button{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  background:transparent;
}

.showcase-dots button::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:999px;
  background:rgba(245,245,240,.38);
}

.showcase-dots button.is-active{
  width:44px;
  height:44px;
  background:transparent;
}

.showcase-dots button.is-active::before{
  width:18px;
  background:rgba(245,245,240,.9);
}

/* Homepage showcase: present the device mockup directly — no nested panel,
   no double borders, no glossy inner ring. The mockup image (which carries its
   own designed background) becomes a single clean card that floats on the page
   with one soft ambient shadow for depth. */
.hero-showcase{
  max-width:min(1180px,100%);
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

/* Live carousel treatment (wins the cascade over L738). Frameless product
   shot: the work image is its own composite, so one restrained grounding
   shadow at the site's 12px card radius reads clean — no frame, no glow. */
.showcase-carousel{
  border-radius:12px;
  border:0;
  background:transparent;
  box-shadow:0 22px 54px -26px rgba(0,0,0,.62);
}

.showcase-note{
  margin-top:18px;
  padding-inline:clamp(4px,.6vw,8px);
}

@media(min-width:1080px){
  .hero{
    --t-display:clamp(44px,min(5vw,9vh),84px);
    padding-block:clamp(48px,8vh,104px) clamp(36px,6vh,78px);
  }

  .hero-grid{
    width:min(calc(100% - 40px),1380px);
    max-width:1380px;
    padding-left:20px;
    padding-right:20px;
    grid-template-columns:minmax(400px,520px) minmax(0,880px);
    gap:clamp(32px,3vw,52px);
    justify-content:center;
    align-items:center;
  }

  .hero-copy{
    max-width:520px;
  }

  .hero-showcase{
    justify-self:stretch;
    width:100%;
    max-width:940px;
    margin-top:clamp(8px,1.4vw,22px);
  }

  .hero-showcase .showcase-note{
    max-width:100%;
  }
}

/* Keep the complete homepage hero inside short desktop viewports without
   changing browser zoom. The media remains 16:9 and scales only when the
   available screen height, rather than width, becomes the limiting axis. */
@media(min-width:1080px) and (max-height:760px){
  .hero{
    padding-block:clamp(24px,4svh,32px);
  }

  .hero-showcase{
    max-width:min(100%,clamp(560px,105svh,760px));
    margin-top:0;
  }
}

@media(max-width:840px){
  .hero-showcase{
    padding:0;
    margin-top:clamp(14px,3.5vw,22px);
  }

  .showcase-carousel{
    border-radius:12px;
    box-shadow:0 18px 44px -22px rgba(0,0,0,.75);
  }
}

/* --- 1G. Section hierarchy for homepage secondaries (Phase 2 from plan) --- */

/* Keep secondary sections distinct without collapsing the page rhythm. */
.section-secondary{
  padding-block:calc(var(--section-y, clamp(64px,7vw,88px)) * .72);
}


@media(max-width:900px){
  #included-menu .dropdown-footer{display:none}

  #included-menu.dropdown-panel-systems{
    position:static;
    width:100%;
    padding:0;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:transparent;
    transform:none;
    overflow:hidden;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .nav-dropdown.is-open #included-menu.dropdown-panel-systems{
    transform:none;
  }

  #included-menu.dropdown-panel-systems .dropdown-heading{
    padding:14px 0 12px 18px;
    margin:0;
    font-size:13px;
    border-bottom:1px solid var(--rule);
  }

  #included-menu.dropdown-panel-systems .dropdown-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
  }

  #included-menu.dropdown-panel-systems .dropdown-grid > a{
    display:grid;
    grid-template-columns:52px minmax(0,1fr);
    min-height:76px;
    gap:14px;
    padding:12px 8px 12px 16px;
  }

  #included-menu.dropdown-panel-systems .nav-copy span{font-size:15px}

  #included-menu.dropdown-panel-systems .nav-icon{
    width:52px;
    min-width:52px;
    height:52px;
    min-height:52px;
    font-size:25px;
  }
}

/* Short About menu (desktop geometry lives in the authoritative block near EOF).
   display:grid restored here because the mobile .site-nav a rule sets display:block. */
@media(max-width:900px){
  #about-menu.dropdown-panel-short a{
    display:grid;
    grid-template-columns:52px minmax(0,1fr);
    align-items:center;
    gap:14px;
    min-height:62px;
    padding:12px 8px 12px 16px;
  }
  #about-menu.dropdown-panel-short .nav-icon{
    width:52px;
    min-width:52px;
    height:52px;
    min-height:52px;
  }
}

/* Pricing hero card fit — sized to clear the fold on short desktop
   viewports (verified down to ~650px tall at 1440 wide), not just the
   1536x740 case checked earlier. */
.pricing-hero-card{
  max-width:min(520px,100%);
  padding:clamp(16px,1.8vw,22px);
}

.pricing-hero-card .eyebrow{
  margin-bottom:10px;
}

.pricing-hero-card .billing-toggle{
  margin:8px 0 10px;
}

.pricing-hero-card .billing-option{
  min-height:38px;
  padding:6px 14px;
  font-size:15px;
}

/* Floor equals the taller (annual) state's content height so the monthly and
   annual toggle render the exact same card height — no jump on switch. */
.pricing-hero-card .billing-price-stack{
  min-height:104px;
}

.pricing-hero-card .amount{
  font-size:clamp(42px,3.6vw,60px);
  font-variant-numeric:tabular-nums;
}

.pricing-hero-card .amount small{font-size:14px}

.pricing-hero-card p{
  font-size:clamp(15px,0.95vw,17px);
  line-height:1.4;
}

.pricing-hero-card .page-hero-list{
  gap:6px;
  margin-top:12px;
}

.pricing-hero-card .page-hero-list li{
  font-size:14px;
  line-height:1.3;
}

.pricing-hero-card .page-hero-list li::before{
  width:8px;
  height:8px;
  flex-basis:8px;
}

/* Pricing comparison fit */
#compare{
  scroll-margin-top:110px;
  padding-block:clamp(38px,4vw,58px);
}

#compare .pricing-compare-head{
  max-width:820px;
  margin-inline:auto;
}

#compare .pricing-compare-head h2{
  font-size:clamp(28px,2.7vw,40px);
  line-height:1.06;
  max-width:22ch;
  margin-inline:auto;
}

#compare .pricing-compare-head .lead{
  max-width:660px;
  margin-inline:auto;
  font-size:var(--t-body);
  line-height:1.58;
}

/* Full wrap width on desktop (owner request) — no inner cap, the two columns
   share the section's content edges. */
#compare .compare{
  margin-top:clamp(26px,3vw,38px);
  gap:clamp(16px,2.4vw,28px);
}

#compare .compare-col{
  min-height:auto;
  padding:clamp(22px,2vw,30px);
}

#compare .compare-col .big{
  font-size:clamp(34px,3.4vw,50px);
  margin:12px 0 8px;
}

#compare .compare-col .lead{
  font-size:var(--t-body);
  line-height:1.58;
}

#compare .check-list{
  margin-top:16px;
}

#compare .check-list li{
  font-size:var(--t-body);
  line-height:1.52;
  padding-block:3px;
}

/* Same rhythm below the table as above it — the closing line was sitting
   too tight under the cards. */
#compare .compare-line{
  margin-top:clamp(26px,3vw,38px);
}

@media(max-width:900px){
  #compare{
    padding-block:48px;
  }

  #compare .pricing-compare-head{
    text-align:left;
  }

  #compare .pricing-compare-head h2,
  #compare .pricing-compare-head .lead{
    margin-inline:0;
  }

  #compare .compare{
    grid-template-columns:1fr;
    gap:16px;
  }

  #compare .compare-col{
    padding:22px;
  }

  #compare .compare-line{
    text-align:left;
  }
}

/* Process page cleanup */
.process-overview-section .process-intro{
  max-width:880px;
  margin:0 auto clamp(28px,4vw,52px);
}

.process-overview-section .process-intro h2{
  max-width:16ch;
  margin-inline:auto;
  font-size:clamp(38px,4.2vw,64px);
  line-height:1.08;
}

.process-overview-section .process-line{
  gap:clamp(14px,1.4vw,22px);
}

.process-overview-section .step-card{
  min-height:0;
  padding:clamp(24px,2.6vw,36px);
}

.process-overview-section .step-card .heading-card-title{
  font-size:clamp(22px,1.7vw,28px);
}

.process-detail-section .detail-card{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.process-detail-section .detail-card h2{
  font-size:clamp(30px,2.6vw,42px);
  line-height:1.08;
}

.process-detail-section .detail-card .lead{
  margin-top:0;
  font-size:clamp(18px,1.12vw,21px);
  line-height:1.5;
}

.process-detail-section .detail-card ul,
.process-live-list{
  display:grid;
  gap:10px;
  margin-top:4px;
}

.process-detail-section .detail-card li,
.process-live-list li{
  position:relative;
  padding-left:18px;
  color:var(--fg-soft);
  font-size:clamp(17px,1vw,19px);
  line-height:1.45;
}

.process-detail-section .detail-card li::before,
.process-live-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.68em;
  width:7px;
  height:7px;
  background:var(--feature-accent);
}

.process-launch{
  align-items:start;
}

.process-launch h2{
  max-width:12ch;
}

@media(max-width:840px){
  .process-overview-section .process-line{
    grid-template-columns:1fr;
  }

  .process-overview-section .step-card{
    min-height:0;
  }
}

/* ===========================================================================
   AUTHORITATIVE VISUAL CLEANUP PASS (appended last to win the tangled cascade)
   Controls header/logo, hero type, the What-You-Get menu, footer, band rhythm.
   The header/dropdown systems above are redefined many times; these are the
   final, intentional values. See TECH_DEBT.md re: consolidating the duplicates.
   =========================================================================== */

/* --- Band rhythm: subtle elevation so sections stop reading as one black sheet --- */
.light-band,.soft-band,.cta-close{background:#0b0b0b}

/* --- Header + logo: give the bar real breathing room (logo was filling it) --- */
.site-header,.nav-bar{min-height:var(--header-h)}
.brand{width:var(--logo-w);height:60px;overflow:visible}
.brand img,.brand svg{width:100%;height:100%;object-fit:contain;object-position:left center}
.ft-brand{width:var(--logo-w);height:60px;overflow:visible}
.ft-brand img,.ft-brand svg{width:100%;height:100%;object-fit:contain;object-position:left center}
section{scroll-margin-top:var(--header-h)}

/* --- Desktop navigation panels: shared geometry with a wide systems menu --- */
@media(min-width:901px){
  #included-menu.dropdown-panel-systems{
    position:fixed;top:calc(var(--header-h) + 2px);left:50vw;
    --dd-pad-x:18px;--dd-pad-bottom:16px;
    width:min(920px,calc(100vw - 56px));
    padding:18px 18px 16px;border-radius:12px;
    transform:translateX(-50%) translateY(10px);
    box-shadow:0 16px 40px rgba(0,0,0,.45);
  }
  .nav-dropdown.is-open #included-menu.dropdown-panel-systems{
    transform:translateX(-50%) translateY(0);
  }
  #included-menu.dropdown-panel-systems .dropdown-heading{padding:0 4px 12px;margin:0 0 12px}
  #included-menu.dropdown-panel-systems .dropdown-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:4px 8px}
  #included-menu.dropdown-panel-systems .dropdown-grid > a{min-height:72px;height:100%;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:14px;padding:12px 16px 12px 12px}
  #included-menu.dropdown-panel-systems .nav-icon{width:52px;min-width:52px;height:52px;min-height:52px;border-radius:11px}
  #included-menu.dropdown-panel-systems strong{font-size:16px;line-height:1.3}
  #included-menu.dropdown-panel-systems .nav-copy span{font-size:14px;line-height:1.4}

  #about-menu.dropdown-panel-short{width:min(320px,calc(100vw - 44px));padding:12px;border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.45)}
  #about-menu.dropdown-panel-short .dropdown-grid{grid-template-columns:1fr;gap:2px}
  #about-menu.dropdown-panel-short a{min-height:56px;padding:10px 12px;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:12px}
  /* Pin the tile to its grid column: the generic .dropdown-panel-icons bump (64px) is wider than the column and overlapped the label. */
  #about-menu.dropdown-panel-short .nav-icon{width:52px;min-width:52px;height:52px;min-height:52px}
  #about-menu.dropdown-panel-short .nav-copy{justify-content:center}

  #included-menu .dropdown-footer{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    margin:12px calc(-1 * var(--dd-pad-x)) calc(-1 * var(--dd-pad-bottom));padding:14px 22px;
    background:rgba(255,255,255,.035);border-top:1px solid var(--rule);
    border-radius:0 0 12px 12px;font-size:14px;color:var(--fg-mute);
  }
  #included-menu .dropdown-footer-cta{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:40px;padding:9px 16px;border:0;border-radius:8px;
    color:var(--bg);background:var(--fg);font-size:14px;font-weight:800;white-space:nowrap;
  }
  #included-menu .dropdown-footer-cta:hover,#included-menu .dropdown-footer-cta:focus-visible{background:var(--btn-fill-hover)}
}
@media(min-width:901px) and (max-width:1179px){
  #included-menu.dropdown-panel-systems{width:min(720px,calc(100vw - 44px))}
}
@media(min-width:1180px){
  #included-menu.dropdown-panel-systems{--dd-pad-x:20px;--dd-pad-bottom:18px;width:min(960px,calc(100vw - 64px));padding:20px 20px 18px;transform:translateX(-50%) translateY(10px)}
  #included-menu.dropdown-panel-systems .dropdown-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 10px}
}

/* --- Mobile header + drawer: shorter bar, smaller logo, aligned drawer --- */
@media(max-width:900px){
  :root{--logo-mobile-w:56px}
  .site-header{min-height:66px}
  .nav-bar{min-height:66px}
  .brand{width:var(--logo-mobile-w);height:48px}
  .site-nav{inset:66px 0 0;padding:22px var(--pad) 40px}
  /* hero headline: strong, not overwhelming on a phone */
  .hero-copy h1,.page-hero h1,.page-head h1{font-size:clamp(33px,8.6vw,46px);line-height:1.1;max-width:15ch}
}

/* --- Mobile footer: one full-width brand row, then a balanced two-column map --- */
@media(max-width:600px){
  .site-footer{padding-top:clamp(44px,9vw,60px)}
  .ft-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:30px 24px;padding-bottom:34px}
  .ft-grid > div{min-width:0}
  .ft-grid > div:first-child{grid-column:1 / -1}
  .ft-grid > div:last-child{grid-column:1 / -1}
  .ft-note{max-width:42ch}
  .ft-title{margin-bottom:10px}
  .ft-cta{margin-top:16px}
  .ft-grid > div:last-child a:not(.ft-cta):not(.social-button){font-size:clamp(15px,4.2vw,18px)}
  .site-footer a{overflow-wrap:anywhere}
  .ft-bottom{flex-direction:column;gap:6px;align-items:flex-start;padding-top:22px}
}

/* --- Smallest phones: keep the hero headline in check --- */
@media(max-width:380px){
  .hero-copy h1,.page-hero h1,.page-head h1{font-size:32px;line-height:1.12}
  h1{font-size:33px}
  h2{font-size:29px}
}

/* ===========================================================================
   TYPE + SPACING REFINEMENT (appended last to win the tangled cascade)
   Body/.lead are edited at source (clean winners). Micro-labels (.eyebrow,
   .card-kicker) are sized here because the grouped color rule (~L3239) and the
   in-card kicker rule (~L3613) otherwise win on font-size. Colours/uppercase/
   weight inherited from those earlier rules are intentionally left untouched.
   Goal: crisper, more editorial reading rhythm — no layout/colour/copy change.
   =========================================================================== */

/* Micro eyebrow labels: smaller, wider tracking, tighter label-to-content gap */
.eyebrow{font-size:var(--t-label);letter-spacing:.16em;margin-bottom:var(--space-s)}
.card-kicker{font-size:var(--t-label);margin-bottom:var(--space-s)}

/* Subtle editorial hairlines between major stacked sections.
   Uses the existing --rule token at low opacity via color-mix (pattern already
   used in this stylesheet). Harmonises the pre-existing .section-rule dividers. */
.section-rule,
.section + .section{border-top:1px solid color-mix(in srgb,var(--rule) 70%,transparent)}

/* Shared heading rhythm. Component labels that manage their own spacing are
   reset explicitly so the global rule cannot inflate cards or the footer. */
h2{margin-bottom:clamp(12px,1.4vw,18px)}
.heading-card-title{margin-bottom:0}
/* Owner request: restore breathing room between the bigger title and the
   smaller paragraph in the founder/about page-hero card specifically —
   other .heading-card-title contexts (e.g. process step cards) keep 0. */
.page-hero-card .heading-card-title{margin-bottom:12px}
.ft-title{margin-bottom:14px}
.page-hero-copy .hero-actions{margin-top:clamp(20px,2.4vw,28px)}
.site-nav[tabindex="-1"]:focus{outline:none}

/* =========================================================================
   Lucide SVG icon system (replaces emoji/glyph icons). Stroke-based, inherits
   color via currentColor. Chip contexts (.nav-icon, .service-icon) keep their
   existing responsive box size; 25% padding insets the graphic to ~50% of the
   box, matching the old centered glyph. Inline contexts size explicitly.
   ========================================================================= */
.icon{flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Chip icons nest inside the existing .nav-icon/.service-icon box (which keeps its
   responsive size, background and color); the svg sits at 50% and is centered by
   the chip's place-items:center, matching the old glyph inset and inheriting color. */
.nav-icon .icon,.service-icon .icon{width:50%;height:50%}
.dropdown-panel-icons .nav-icon .icon{width:56%;height:56%}
.showcase-arrow .icon{width:20px;height:20px}

/* Shared feature identity: the same icon language used in the What You Get
   menu now follows each feature into homepage headings, detail-page labels,
   and matching inclusion cards. */
.feature-title-row{
  display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:16px;
  margin-bottom:clamp(16px,2vw,22px);
}
.feature-title-row h2{margin-bottom:0}
.feature-card-heading{display:flex;align-items:center;gap:14px}
.feature-page-label{
  display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:14px;
  min-height:42px;margin-bottom:clamp(16px,1.6vw,22px);
}
.feature-page-label .eyebrow,.feature-card-heading .card-kicker{margin-bottom:0}
.feature-title-icon{
  display:grid;place-items:center;flex:0 0 auto;width:56px;height:56px;border:1px solid var(--rule-h);
  border-radius:12px;background:var(--surface-2);color:var(--feature-accent);
}
.feature-page-label .feature-title-icon{width:42px;height:42px}
.feature-card-heading .feature-title-icon{width:42px;height:42px;border-radius:10px}
.feature-title-icon .icon{width:54%;height:54%}
.feature-card-heading{margin-bottom:14px}
@media(max-width:640px){
  .feature-title-row{grid-template-columns:46px minmax(0,1fr);gap:14px}
  .feature-title-row .feature-title-icon{width:46px;height:46px}
  .feature-page-label .feature-title-icon{width:40px;height:40px}
  .feature-page-label{grid-template-columns:40px minmax(0,1fr);min-height:40px}
}
@media(min-width:1024px){
  .home-service-section .feature-title-row h2{display:flex;align-items:center;min-height:2.24em}
  .home-service-section .service-copy > .lead{min-height:3.1em}
  .home-service-section .service-list{min-height:184px;align-content:start}
}

/* =========================================================================
   R6: minimum 44px touch targets (mobile a11y). Enlarges the tappable area
   only — font sizes, dot visuals and layout proportions are unchanged.
   ========================================================================= */
.site-nav>a{min-width:44px}

/* =========================================================================
   WHITE CTA SYSTEM (owner-approved). Both primary and secondary actions read
   as white buttons; the ghost variant keeps a slightly softer fill and shadow
   so paired actions retain a subtle hierarchy. Cyan remains the site accent.
   ========================================================================= */
.btn:not(.btn-ghost){
  background:var(--btn-fill);
  border-color:var(--btn-fill);
  color:#0a0a0a;
  box-shadow:0 8px 22px -10px rgba(0,0,0,.55);
  transition:background 180ms,border-color 180ms,color 180ms,transform 180ms,box-shadow 180ms;
}
.btn:not(.btn-ghost):hover{
  background:var(--btn-fill-hover);
  border-color:var(--btn-fill-hover);
  color:#000;
  transform:translateY(-2px);
  box-shadow:0 12px 26px -12px rgba(0,0,0,.62);
}

.site-nav .nav-cta{
  background:var(--btn-fill);
  border-color:var(--btn-fill);
  color:#0a0a0a;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.5);
}
.site-nav .nav-cta:hover,
.site-nav .nav-cta[aria-current="page"]{
  background:var(--btn-fill-hover);
  border-color:var(--btn-fill-hover);
  color:#000;
  box-shadow:0 10px 22px -8px rgba(0,0,0,.58);
}

/* Footer CTA: earlier rule sets color with !important, so match it here. */
.site-footer .ft-cta{
  background:var(--btn-fill);
  border-color:var(--btn-fill);
  color:#0a0a0a!important;
}
.site-footer .ft-cta:hover{
  background:var(--btn-fill-hover);
  border-color:var(--btn-fill-hover);
}

@media(max-width:720px){
  .mobile-sticky-cta{
    background:var(--btn-fill);
    border-color:var(--btn-fill);
    color:#0a0a0a;
  }
}

.btn:focus-visible,
.site-nav .nav-cta:focus-visible,
.site-footer .ft-cta:focus-visible,
.mobile-sticky-cta:focus-visible,
#included-menu .dropdown-footer-cta:focus-visible{outline-color:#fff}

/* =========================================================================
   DROPDOWN HOVER ARTIFACT FIX. The top-level nav underline (.site-nav
   a:not(.nav-cta)::after, L173-178, repositioned to bottom:-18px at L2777)
   also matches links *inside* the dropdown panels, painting a floating 1px
   line under panel items on hover and on [aria-current=page]. Panel links
   are not top-level nav and should never carry that underline. Killing the
   pseudo-element here (last in the cascade) leaves top-level link underlines
   and :focus-visible outlines untouched.
   ========================================================================= */
.site-nav .dropdown-panel a::after{content:none}

/* =========================================================================
   RECENT WORK showcase: keep the preview on the canonical content edges.
   The previous negative margins made the hero media wider than its copy on
   phones, which weakened the site's primary symmetry rule.
   ========================================================================= */
.showcase-eyebrow{margin-bottom:14px}

@media(max-width:639px){
  .hero-showcase{width:100%;max-width:none;margin-inline:0}
  .showcase-carousel{aspect-ratio:16 / 9}
  .showcase-arrow-prev{left:10px}
  .showcase-arrow-next{right:10px}
}

/* =========================================================================
   PARTNER LOGO MARQUEE. Two identical tracks make the 36-second translation
   seamless; runtime state classes pause non-visible work. Reduced motion
   restores the centered wrapping trust strip and removes the duplicate.
   ========================================================================= */
:root{
  --logo-gap:clamp(28px,4.5vw,64px);
  --partner-rhythm:clamp(56px,6vw,82px);
}
#tools{padding-bottom:var(--partner-rhythm)}
.logo-marquee{
  width:100%;
  overflow:clip;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.logo-marquee-inner{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:partner-marquee 36s linear infinite;
}
.logo-marquee .logo-row{
  display:flex;
  flex:0 0 auto;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-start;
  width:max-content;
  gap:var(--logo-gap);
  padding:14px var(--logo-gap) 14px 0;
  margin:0;
}
.logo-marquee:hover .logo-marquee-inner,
.logo-marquee:focus-within .logo-marquee-inner,
.logo-marquee.is-offscreen .logo-marquee-inner,
.logo-marquee.is-page-hidden .logo-marquee-inner{animation-play-state:paused}
.logo-marquee:focus-visible{outline:2px solid var(--fg);outline-offset:8px}
@keyframes partner-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){
  .logo-marquee{
    overflow:visible;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .logo-marquee-inner{width:100%;will-change:auto;animation:none}
  .logo-marquee .logo-row{
    width:100%;
    flex-wrap:wrap;
    justify-content:center;
    padding:14px 0;
  }
  .logo-marquee .logo-row[aria-hidden="true"]{display:none}
}

/* =========================================================================
   COMPARE CARDS: solid, stable red/green. The generic .compare-col:hover
   (L398) swapped the coloured border for grey, and the outlined-only static
   state read washed out. Restore full-strength colour: a flat tint wash (no
   weak gradient), a full-colour border, a solid label pill (dark ink for AA:
   red 5.7:1, green 9.3:1), and the accent survives hover instead of graying.
   ========================================================================= */
.compare-agency{border:1.5px solid #E45D5D;background:rgba(228,93,93,.07)}
.compare-revnew{border:1.5px solid #58C783;background:rgba(88,199,131,.08)}
.compare-agency:hover{border-color:#E45D5D;background:rgba(228,93,93,.11)}
.compare-revnew:hover{border-color:#58C783;background:rgba(88,199,131,.12)}
.compare-agency .compare-badge{background:#E45D5D;border-color:#E45D5D;color:#0a0a0a}
.compare-revnew .compare-badge{background:#58C783;border-color:#58C783;color:#08120c}

/* =========================================================================
   MOBILE ALIGNMENT COHERENCE. The service/content sections read left-aligned
   across the whole phone range, but the centered section intros (.center-head,
   .partner-head) only flipped to left at <=520px, so the 521-720px band mixed
   centered heads with left content. Extend the left flip to the full phone
   range so every section shares one reading edge. (Boxed focal panels like
   .cta-box stay centered by intent.)
   ========================================================================= */
@media(max-width:720px){
  .center-head,
  .partner-head{text-align:left}
  .center-head h1,.center-head h2,.center-head .lead,
  .partner-head h2,.partner-head .lead{margin-left:0;margin-right:0}
  body.book-page .mobile-sticky-cta{display:none}
}

/* Card body text is now driven by the --t-body role token in the TYPE &
   RHYTHM SYSTEM block above (superseded the old 16-18px scan-density pass). */

/* --- Legal pages (privacy.html, terms.html): readable single-column prose --- */
/* Legal heroes share the standard .page-hero box now (no special-case). */
.legal-page .page-hero + .section{padding-block-start:var(--section-y)}
.legal-copy{max-width:780px}
.legal-section + .legal-section{margin-top:clamp(36px,3.5vw,48px)}
/* Size, line-height and letter-spacing come from the `section h2` role in the
   type system below: these ARE section headings (each sits in its own
   .legal-section), they were only opting out because this selector outranks
   `section h2`. Owner request — legal pages match the homepage heading scale.
   Only the margin stays here, scaled up for the larger type. */
.legal-copy h2{margin:0 0 clamp(14px,1.2vw,18px)}
.legal-copy p{margin:0 0 16px;color:var(--muted)}
.legal-copy p strong,.legal-copy li strong{color:var(--fg)}
.legal-copy ul{margin:0 0 20px;display:grid;gap:10px}
.legal-copy li{position:relative;padding-left:22px;color:var(--muted)}
.legal-copy li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--feature-accent)}
.legal-copy a{color:var(--feature-accent);text-decoration:underline;text-underline-offset:3px}
.legal-copy code{font-size:.9em;padding:1px 6px;border:1px solid var(--rule);border-radius:6px;background:var(--surface)}
.legal-section > :last-child{margin-bottom:0}
.page-hero-copy .legal-updated{font-size:var(--t-label);color:var(--muted)}
.ft-bottom .ft-legal{display:flex;gap:18px}
.ft-bottom .ft-legal a:hover{color:var(--fg)}

/* =========================================================================
   TYPE & RHYTHM SYSTEM (authoritative — last block wins).
   One role scale drives every text size so headings and body stay in
   proportion across pages and breakpoints. Roles map to the component
   classes that already exist; semantics and copy are untouched. Deliberate
   exceptions keep their own scale: .book-title, #compare compact copy,
   .faq-list .answer (larger reading size), founder blockquote.
   ========================================================================= */

/* Display — home marketing hero (stays the largest heading on the site). */
.hero-copy h1{font-size:var(--t-display);line-height:1.02;letter-spacing:-.045em}

/* Page title — interior heroes; clearly below the display hero. */
.page-hero h1,.page-hero-center h1{font-size:var(--t-title);line-height:1.05;letter-spacing:-.045em}

/* Section heading — beats the `section h2` specificity trap at every width,
   so mobile h2 finally scales down instead of pinning at 38px. The bespoke
   section intros (CTA-close, process, partners, home FAQ, founder, compare)
   are the same visual role and are folded in so no section heading outranks
   the page title. Card-level h2 (.detail-card h2) keeps its own smaller scale. */
.section-header h2,section h2,
.cta-close h2,.showcase-grid h2,.home-faq h2,.partner-head h2,.founder-head h2,
.process-overview-section .process-intro h2,.process-launch h2,
#compare .pricing-compare-head h2{font-size:var(--t-section);line-height:1.12;letter-spacing:-.03em}

/* Card / subsection headings. */
h3,.heading-card-title{font-size:var(--t-card);line-height:1.25;letter-spacing:-.014em}
.white-card h3,.dark-card h3,.feature-panel .feature-item h3{font-size:var(--t-card);line-height:1.25;letter-spacing:-.014em}

/* Intro copy — slightly larger than body. */
.lead,.page-hero .lead,.page-head .lead{font-size:var(--t-lead);line-height:1.55}

/* Body copy — up from the old 16-18px shrink so it reads in proportion. */
.white-card p,.dark-card p,.feature-item p,.step-card p,.detail-card li,
.service-card p,.service-proof-panel p,.home-step p,.foundation-card p,
.check-list li,.service-list li,.page-hero-list li,.faq-list .answer,
.book-embed p,.book-side p,.pricing-card p,.page-hero-card p,
.legal-copy p,.legal-copy li,.contact-card-meta,
.process-live-list li,.process-detail-section .detail-card li{font-size:var(--t-body);line-height:1.62}
.faq-list summary{font-size:clamp(20px,1.4vw,23px)}

/* Labels / eyebrows: one legible scale, with Revnew blue reserved for
   section and card wayfinding rather than body copy. */
.eyebrow,.card-kicker,.ft-title,.book-call .eyebrow{font-size:var(--t-label);margin-bottom:var(--space-s)}
body .eyebrow.eyebrow,
body .card-kicker.card-kicker{color:var(--feature-accent)}
/* Owner request: the "Recent work" label reads white, not accent cyan. */
body .eyebrow.showcase-eyebrow{color:var(--fg)}

/* Supporting text that previously drifted between 14px and 18px now shares
   one clear, slightly heavier role without making primary body copy dense. */
.dropdown-panel span,
.dropdown-panel-icons .nav-copy span,
#included-menu.dropdown-panel-systems .nav-copy span,
.founder-role,
.book-path li,
.book-fallback,
.book-phone-who,
.book-call .book-phone-who,
.page-hero-copy .legal-updated,
.ft-bottom{
  font-size:var(--t-small);
  font-weight:var(--weight-small);
}

/* Pricing — four clearly grouped blocks. */
.pricing-hero-card .amount{font-size:var(--t-price);line-height:.95}
.pricing-hero-card .amount small{font-size:var(--t-small);font-weight:var(--weight-small);letter-spacing:0;margin-left:4px}
.pricing-hero-card .billing-price p{margin-top:var(--space-s)}
.pricing-hero-card .page-hero-list{margin-top:var(--space-m);row-gap:var(--space-s)}

/* Mobile display/title floors — the tokens' desktop floors (44/38px) would
   over-wrap narrow screens, so heroes step down below 640px while staying
   display > title. Section/card/body tokens already scale fine unconditionally. */
@media(max-width:640px){
  /* Home headline is long; let it use the full column and size so it wraps to
     ~4 lines instead of 5 (the 9.8ch desktop cap was forcing narrow wraps). */
  .hero-copy h1{font-size:clamp(30px,7.9vw,42px);line-height:1.06;max-width:100%}
  .page-hero h1,.page-hero-center h1{font-size:clamp(29px,7.4vw,38px);line-height:1.08}
}

/* Owner request: this lead line is visually identical to its h2 above it —
   same size, weight, tracking, line-height. Placed last so it beats the
   authoritative .lead rules earlier in this file (source order decides). */
.lead-match-h2{
  font-size:var(--t-section);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.08;
  color:var(--fg);
}

/* Owner request: check-list bullets use the brand accent everywhere, not a
   muted gray inherited from the surrounding text color. */
.check-list li::before{
  background:var(--feature-accent);
}

/* who-we-help "fit" cards: a small circular badge reusing .icon-box's shape
   language (same as the trust-grid icons), colored with the site's existing
   semantic green/red (already used for the pricing compare columns) instead
   of the neutral accent — a yes/no signal, not a generic feature icon. */
.fit-card-icon{
  width:36px;height:36px;border-radius:50%;border:1px solid currentColor;
  display:grid;place-items:center;margin-bottom:14px;
}
.fit-card-icon .icon{width:60%;height:60%}
.fit-card-icon-yes{color:#58C783}
.fit-card-icon-no{color:#E45D5D}

/* "Not for you if": one circled red X beside the heading (same badge as the
   green fit-card-icon above, just inline with the heading text instead of
   stacked above it) replaces the old per-item red X — the list below goes
   back to the site's standard neutral dot. */
.fit-heading{display:flex;align-items:center;gap:10px}
.fit-heading .fit-card-icon{margin-bottom:0}

/* =========================================================================
   LAUNCH-PATH STEPS REDESIGN (owner-requested): filled accent circles
   connected by a dashed line, centered copy — replaces the bordered-card
   look on both places the launch path is shown (home 3-step, process
   5-step). book.html's .book-path is a deliberately different compact
   sidebar list and is out of scope.
   ========================================================================= */
.home-step,
.process-overview-section .step-card{
  border:0;
  background:transparent;
  padding:0;
  min-height:0;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.home-step .n,
.process-overview-section .step-card .n{
  border-radius:50%;
  background:var(--feature-accent);
  border-color:var(--feature-accent);
  color:#0a0a0a;
  position:relative;
  z-index:1;
}
.home-step h3,
.process-overview-section .step-card .heading-card-title{
  margin-top:2px;
}
.home-step p,
.process-overview-section .step-card p{
  max-width:34ch;
  margin-inline:auto;
}

/* Dashed connector behind the row, spanning circle-center to circle-center.
   Desktop only — hidden once the grid stacks to one column. */
.home-process-grid,
.process-overview-section .process-line{
  position:relative;
}
.home-process-grid::before{
  content:"";
  position:absolute;
  top:29px;
  left:calc(100% / 6);
  right:calc(100% / 6);
  border-top:2px dashed color-mix(in srgb,var(--feature-accent) 45%,transparent);
  z-index:0;
}
.process-overview-section .process-line::before{
  content:"";
  position:absolute;
  top:20px;
  left:10%;
  right:10%;
  border-top:2px dashed color-mix(in srgb,var(--feature-accent) 45%,transparent);
  z-index:0;
}
@media(max-width:900px){
  .home-process-grid::before{display:none}
}
@media(max-width:840px){
  .process-overview-section .process-line::before{display:none}
}

/* =========================================================================
   VIDEO TESTIMONIALS. Three cards side by side (no slider — exactly 3 clips).
   Source clips are native 9:16 phone recordings, so the player box is sized
   to that same ratio with object-fit:cover — the video fills it edge to
   edge, no letterbox bars on any side.
   ========================================================================= */
.testimonial-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.dark-card.testimonial-row{
  padding:0;
}
.testimonial-row{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  overflow:hidden;
}
.testimonial-video{
  flex:0 0 auto;
  width:clamp(160px,40%,220px);
  margin:0 auto;
  aspect-ratio:9 / 16;
  background:#000;
}
.testimonial-video video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.testimonial-content{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  /* Start the text right under the video in every card. Centering it made the
     star rows sit at three different heights, because each quote is a
     different length and the cards are equal-height grid siblings. */
  justify-content:flex-start;
  gap:12px;
  padding:clamp(20px,2.6vw,32px);
}
.testimonial-stars{
  display:flex;
  align-items:center;
  gap:2px;
  color:#FBBF24;
}
.testimonial-stars strong{
  margin-right:6px;
  font-size:23px;
  line-height:1;
}
.testimonial-content p{
  color:var(--fg-soft);
  font-size:var(--t-body);
  line-height:1.62;
}
.testimonial-content cite{
  font-style:normal;
  font-weight:800;
  color:var(--fg);
}
@media(max-width:900px){
  .testimonial-list{
    grid-template-columns:1fr;
  }
  .testimonial-video{
    width:100%;
    max-width:280px;
  }
}

/* =========================================================================
   TESTIMONIALS PAGE REVIEWS. The video cards reuse the home-page component;
   this is the single page-specific component required by the supplied review
   card reference.
   ========================================================================= */
.testimonials-page .testimonial-stars{
  font-size:20px;
  line-height:1;
  letter-spacing:2px;
}
.testimonials-page .section-heading{
  font-size:var(--t-section);
  line-height:1.12;
  letter-spacing:-.03em;
}
.testimonials-page .section-edge-heading{
  text-align:center;
}
.testimonials-page .section-edge-heading h1,
.testimonials-page .section-edge-heading h2{
  margin-inline:auto;
  color:var(--fg);
  font-size:var(--t-section);
  line-height:1.12;
  letter-spacing:-.03em;
}
.testimonials-page .section-edge-heading .text-highlight{
  color:var(--feature-accent);
}
.reviews-section{
  background:var(--bg);
  color:var(--fg);
}
.reviews-heading{
  text-align:left;
}
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.review-card{
  min-width:0;
  min-height:250px;
  display:flex;
  flex-direction:column;
  padding:26px;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  background:var(--surface-2);
  color:var(--fg);
}
.review-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.review-rating{
  display:flex;
  align-items:center;
  gap:8px;
  color:#FBBF24;
  font-size:20px;
  line-height:1;
  white-space:nowrap;
}
.review-rating strong{
  font-size:23px;
}
.review-rating span{
  letter-spacing:2px;
}
.review-star-empty{
  color:color-mix(in srgb,var(--feature-accent) 24%,transparent);
}
.review-card time{
  color:var(--muted);
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
}
.review-card > p{
  flex:1 1 auto;
  margin:24px 0 32px;
  color:var(--fg-soft);
  font-size:16px;
  line-height:1.65;
}
.review-card-footer{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:auto;
  color:var(--fg-soft);
}
.review-avatar{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--feature-accent);
  color:#071018;
  font-size:14px;
  font-weight:800;
}
.review-card-footer strong{
  min-width:0;
  color:var(--fg);
  font-size:16px;
  line-height:1.35;
}
.review-card-footer img{
  width:24px;
  height:24px;
  margin-left:auto;
}
@media(max-width:1100px){
  .reviews-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:680px){
  .reviews-grid{
    grid-template-columns:1fr;
  }
  .review-card{
    min-height:230px;
    padding:24px;
  }
}