/* ============================================================
   PoolRoute AI — "Waterline" brand layer
   Loaded after each page's inline <style>, so it wins on equal
   specificity. Owns: type, palette, atmosphere, water motion.
   ============================================================ */

/* ---------- 1. Typefaces (self-hosted, latin subset) -------- */
@font-face{font-family:'Familjen Grotesk';src:url(assets/fonts/familjen-grotesk-var.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url(assets/fonts/hanken-grotesk-var.woff2) format('woff2');font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(assets/fonts/instrument-serif-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(assets/fonts/instrument-serif-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}

/* ---------- 2. Palette -------------------------------------- */
:root{
  /* water column, shallow to deep */
  --surface:#1B9CE4;      /* brand blue, unchanged */
  --pool-blue:#1B9CE4;
  --chlorine:#8FE0F5;     /* sunlit shallow end */
  --tile:#12496E;         /* waterline tile */
  --navy:#0A2342;         /* brand navy, unchanged */
  --navy-el:#0F3252;      /* raised panel */
  --depth:#061A2E;        /* deep end */
  --link-blue:#0B5E9E;

  /* deck: warm neutrals so light sections stop reading as blank */
  --bone:#F5F2EC;
  --sand:#E6DFD2;
  --ink:#141A1F;
  --ink-soft:#4C5661;
  --body-on-navy:rgba(233,242,250,.82);
  --body-on-white:#232C34;

  --rule-light:rgba(10,35,66,.12);
  --rule-dark:rgba(143,224,245,.16);
  --radius:14px;
  --radius-lg:20px;

  --display:'Familjen Grotesk','Archivo',system-ui,sans-serif;
  --body:'Hanken Grotesk','Inter',system-ui,sans-serif;
  --editorial:'Instrument Serif',Georgia,serif;

  --ease:cubic-bezier(.22,1,.36,1);

  /* ---- the three content sizes, site-wide. Everything that carries
     meaning is one of these. Eyebrow and caption are utility, not tiers. */
  --fs-title:clamp(28px,3.4vw,40px);   /* 1. section header title  */
  --fs-deck:clamp(19px,1.9vw,23px);    /* 2. section header text   */
  --fs-body:17.5px;                    /* 3. section text          */
  --fs-eyebrow:14px;                   /* label above a title      */
  --fs-small:15.5px;                   /* caption, note, source    */

  /* one chevron, used as a mask everywhere so it inherits currentColor */
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M1.6 1.9 11 10.1 20.4 1.9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- 3. Typography ----------------------------------- */
body{font-family:var(--body);font-size:17.5px;line-height:1.62;letter-spacing:.002em;background:var(--depth);
  font-variant-numeric:tabular-nums;text-rendering:optimizeLegibility}
h1,h2,h3,h4,.sec-point{font-family:var(--display);letter-spacing:-.022em;text-wrap:balance}
h1{font-weight:700;line-height:1.02;letter-spacing:-.032em}
h2,h3{font-weight:600;line-height:1.08}

/* the one editorial gesture: a serif italic inside display type */
.accent{font-family:var(--editorial);font-style:italic;font-weight:400;
  letter-spacing:-.005em;color:var(--chlorine);padding-right:.06em}
.light .accent{color:var(--link-blue)}

/* numbers carry the argument on this site — give them optical weight */
.sell-num,.cn-big,.dm-pct,.w-metric{font-family:var(--display);font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.038em;font-feature-settings:"ss01"}

/* Section label demoted to an eyebrow; the sentence under it becomes
   the real headline. Kills the wall-of-shouting-caps look. */
.sec-title{font-family:var(--display)!important;font-weight:600!important;
  font-size:var(--fs-eyebrow)!important;letter-spacing:.2em!important;text-transform:uppercase;
  color:var(--chlorine)!important;margin:0 auto 18px!important;
  display:block;text-align:center;max-width:none!important}
.light .sec-title{color:var(--link-blue)!important}
.sec-point{font-size:clamp(27px,3.7vw,45px)!important;font-weight:600!important;
  line-height:1.06!important;margin-bottom:clamp(36px,5vw,56px)!important;max-width:24ch!important}
.digital-mkt .sec-point,.results-section .sec-point,.pillars .sec-point{max-width:27ch!important}

/* ---------- 4. Deck + water surfaces ------------------------ */
.light,.faq.light,.results-section{background:var(--bone)!important;color:var(--body-on-white)}
.light .sec-point,.light h2,.light h3{color:var(--ink)!important}

/* deep-end gradient replaces flat navy fills */
.hero{background:
  radial-gradient(120% 90% at 18% -10%,#154A72 0%,rgba(21,74,114,0) 58%),
  radial-gradient(90% 70% at 92% 8%,rgba(27,156,228,.28) 0%,rgba(27,156,228,0) 60%),
  linear-gradient(178deg,var(--navy) 0%,var(--depth) 100%)!important}
.pillars,.everything-included,.founder{background:
  linear-gradient(180deg,var(--depth) 0%,var(--navy) 46%,var(--depth) 100%)!important}

/* caustics: light refracting off moving water. transform-only. */
.caustics{position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;opacity:.5;
  mix-blend-mode:screen;overflow:hidden}
.caustics span{position:absolute;inset:0;display:block;
  background-repeat:no-repeat;will-change:transform}
.caustics span:nth-child(1){
  background-image:radial-gradient(38% 26% at 22% 30%,rgba(143,224,245,.30),transparent 70%),
                   radial-gradient(30% 20% at 76% 64%,rgba(27,156,228,.26),transparent 72%);
  animation:drift-a 26s var(--ease) infinite alternate}
.caustics span:nth-child(2){
  background-image:radial-gradient(26% 18% at 58% 18%,rgba(143,224,245,.22),transparent 70%),
                   radial-gradient(34% 22% at 12% 76%,rgba(27,156,228,.20),transparent 74%);
  animation:drift-b 34s var(--ease) infinite alternate}
@keyframes drift-a{from{transform:translate3d(-3%,-2%,0) scale(1)}
                   to{transform:translate3d(4%,3%,0) scale(1.14)}}
@keyframes drift-b{from{transform:translate3d(3%,2%,0) scale(1.1)}
                   to{transform:translate3d(-4%,-3%,0) scale(1)}}

/* grain: fixed, never on a scrolling layer */
.grain{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Section rule. Was a repeating tile band, which read as a bar chart
   sitting under every navy section. Now a single centred hairline. */
.waterline{position:relative;height:1px;border:0;margin:0;padding:0;
  background:linear-gradient(90deg,transparent 0%,rgba(143,224,245,.30) 18%,
    rgba(143,224,245,.30) 82%,transparent 100%);
  box-shadow:none;overflow:visible}
.waterline::after{content:none;display:none}

/* ---------- 5. (was the drawn droplet illustration; replaced by the
   real logo, masked and filling, in section 18) ---------------- */

/* ---------- 6. Tactile controls ----------------------------- */
.btn{font-family:var(--display)!important;font-weight:600!important;letter-spacing:-.006em;
  transition:transform .18s var(--ease),box-shadow .25s var(--ease),background-color .25s,color .25s,border-color .25s}
.btn-primary{background:var(--ink);color:#fff;position:relative;isolation:isolate;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 10px 24px -12px rgba(6,26,46,.7)}
/* hover fills the button like a pool filling */
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(180deg,var(--chlorine),var(--pool-blue));
  transform:translateY(101%);transition:transform .42s var(--ease)}
.btn-primary:hover{background:var(--ink);color:var(--depth);transform:translateY(-2px);
  box-shadow:0 16px 30px -14px rgba(27,156,228,.65)}
.btn-primary:hover::after{transform:translateY(0)}
.btn-outline{border-color:rgba(143,224,245,.42);color:var(--chlorine)}
.btn-outline:hover{border-color:var(--chlorine);background:rgba(143,224,245,.09)}
a:focus-visible,button:focus-visible,.btn:focus-visible,summary:focus-visible{
  outline:2.5px solid var(--chlorine);outline-offset:3px;border-radius:6px}
.light a:focus-visible,.light button:focus-visible,.light .btn:focus-visible{outline-color:var(--link-blue)}

/* ---------- 7. Panels get depth, not flat blocks ------------ */
.pillar,.card-navy{background:linear-gradient(168deg,var(--navy-el) 0%,var(--depth) 100%)!important;
  border:1px solid var(--rule-dark)!important;
  box-shadow:0 1px 0 rgba(143,224,245,.14) inset,0 26px 44px -30px rgba(0,0,0,.8)}
.pillar::after,.card-navy::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(143,224,245,.5),transparent)}
.card-navy{position:relative;overflow:hidden}
.pillar:hover{transform:translateY(-4px);box-shadow:0 30px 50px -28px rgba(0,0,0,.85)}
.pillar h3,.card-navy h3{font-family:var(--display);font-weight:600;letter-spacing:-.012em}
.price-card{border-color:var(--rule-light)}
.topbar{background:rgba(245,242,236,.88)!important;border-bottom:1px solid var(--rule-light)}
.founder-photo{filter:saturate(.92) contrast(1.04)}
.cred-logos img,.cred-badge img{opacity:.72;transition:opacity .25s}
.cred-logos img:hover,.cred-badge img:hover{opacity:1}
.route-bg{opacity:.42!important;z-index:1}

/* ---------- 8. Motion off when asked ------------------------ */
@media (prefers-reduced-motion:reduce){
  .caustics span,.waterline::after{animation:none!important}
  .rv{opacity:1!important;transform:none!important}
  *{scroll-behavior:auto!important}
}

/* ---------- 9. Section label: one centered chevron above it.
   Kills the inline-CSS growing underline (::after) outright.
   margin:0 auto on a fixed-width block is dead-centre by construction,
   and the mask picks up currentColor so it never drifts from the label. */
.sec-title::before,.sec-title.in::before{
  content:"";display:block;width:22px;height:12px;margin:0 auto 14px;
  background-color:currentColor;opacity:.9;border-radius:0;transition:none;
  -webkit-mask:var(--chev) center/contain no-repeat;
          mask:var(--chev) center/contain no-repeat}
.sec-title::after,.sec-title.in::after{content:none;display:none}

/* ---------- 10. Hero ---------------------------------------- */
.hero{padding:clamp(72px,9vw,116px) 0 clamp(88px,10vw,124px)}
.hero h1{font-size:clamp(38px,6vw,68px)}
.hero-sub{font-size:clamp(17px,2.1vw,20.5px)!important;color:var(--body-on-navy);max-width:38ch}
.hero-price{font-family:var(--display);letter-spacing:-.015em}

/* ---------- 11. (was the hero -> problem water band; the hero now
   carries the filling logo itself) ----------------------------- */

/* ---------- 12. Interior page headers ----------------------- */
.page-hero{position:relative;overflow:hidden;padding:clamp(84px,10vw,132px) 24px clamp(72px,8vw,104px)!important;
  background:radial-gradient(110% 80% at 24% -20%,#154A72 0%,rgba(21,74,114,0) 60%),
             linear-gradient(178deg,var(--navy) 0%,var(--depth) 100%)!important}
.page-hero>*:not(.caustics):not(.waterline){position:relative;z-index:2}
.page-hero h1{text-transform:none!important;font-weight:700!important;
  font-size:clamp(36px,5.6vw,62px)!important;letter-spacing:-.032em!important;
  line-height:1.02!important;margin-bottom:18px!important}
.page-hero .sec-eyebrow{font-family:var(--display)!important;font-size:14px!important;
  letter-spacing:.2em!important;color:var(--chlorine)!important}
.page-hero p{font-size:clamp(17px,2.1vw,20px)!important;max-width:56ch!important}
.waterline-foot{position:absolute;left:0;right:0;bottom:0;z-index:3}

/* ---------- 13. Legal pages ---------------------------------- */
body>.wrap>h1{text-transform:none!important;font-weight:700!important;
  font-size:clamp(34px,5vw,52px)!important;letter-spacing:-.03em!important}
body>.wrap{max-width:68ch!important}
body>.wrap h2{font-size:19px!important;letter-spacing:-.01em;
  margin-top:38px!important;color:var(--chlorine)!important}
.back{font-family:var(--display);letter-spacing:.01em;color:var(--chlorine)!important}

/* ---------- 14. Small screens ------------------------------- */
@media (max-width:640px){
  body{font-size:16.5px}
  .sec-title{font-size:14px!important;letter-spacing:.14em!important}
  .sec-title::before,.sec-title.in::before{width:19px;height:10px;margin-bottom:11px}
  .sec-point{max-width:100%!important}
  .caustics{opacity:.4}
}

/* ---------- 15. Remaining white surfaces -> deck / deep ----- */
.mobile-menu{background:var(--bone)!important;border-bottom-color:var(--rule-light)}
.mobile-menu a{color:var(--ink)}
.sticky-bar{background:rgba(6,26,46,.96)!important;border-top:1px solid var(--rule-dark)}


/* ============================================================
   16. TYPE FLOOR AND CHEVRON CONSISTENCY
   Nothing on the site renders below 14px, which is the small
   text on the landing page. That includes section dividers,
   their eyebrows, badges, table meta and accordion markers.
   Every chevron on the site is the same masked glyph so the
   set reads as one system instead of three.
   ============================================================ */

/* --- the floor. Page-level rules that sat under it. --------- */
.cred-badge{font-size:14px!important}
.one-flat-price .price-amount .mo,.cn-big .mo{font-size:max(14px,.24em)!important}
.footer-left,.footer-links a,.widget-foot,.pmet,.w-pill{font-size:14px}
.page-hero .sec-eyebrow{font-size:14px!important}

/* Belt and braces: no descendant may be talked down past the
   floor by a stray inline style or a rule added later. */
[style*="font-size:11"],[style*="font-size:12"],[style*="font-size:13"],
[style*="font-size: 11"],[style*="font-size: 12"],[style*="font-size: 13"]{font-size:14px!important}

/* --- accordion markers: same chevron, same weight ----------- */
.faq-q .chev,.w-chev,.chev{
  display:inline-block;width:14px;height:8px;flex-shrink:0;
  font-size:0!important;line-height:0;color:inherit;
  background-color:currentColor;
  -webkit-mask:var(--chev) center/contain no-repeat;
          mask:var(--chev) center/contain no-repeat;
  transition:transform .24s var(--ease)}
.faq-q .chev{color:var(--pool-blue)}
.faq.light .faq-q .chev{color:var(--link-blue)}
.w-chev{color:var(--link-blue)}
.faq-item.open .faq-q .chev,.w-row.open .w-chev{transform:rotate(180deg)}

/* --- eyebrow above an interior page title ------------------- */
.page-hero .sec-eyebrow{display:block;text-align:center}
.page-hero .sec-eyebrow::before{
  content:"";display:block;width:22px;height:12px;margin:0 auto 14px;
  background-color:currentColor;opacity:.9;
  -webkit-mask:var(--chev) center/contain no-repeat;
          mask:var(--chev) center/contain no-repeat}

@media (prefers-reduced-motion:reduce){
  .faq-q .chev,.w-chev,.chev{transition:none}
}


/* ============================================================
   17. ONE NAVIGATION: a pull-down at top right
   The header used to carry three or four page links plus a
   button plus a phone number, and the links changed from page
   to page. Every link now lives in one panel behind the
   hamburger, so the header is brand / phone / CTA / menu and
   nothing else, at every width.
   ============================================================ */
.topnav{display:none!important}

.nav-toggle{display:inline-flex!important;align-items:center;justify-content:center;
  width:46px!important;height:46px!important;border-radius:13px!important;
  padding:0!important;
  border:1px solid var(--rule-light)!important;
  background:rgba(10,35,66,.045)!important;color:var(--navy);
  transition:background .2s var(--ease),border-color .2s var(--ease)}
.nav-toggle:hover{background:rgba(27,156,228,.12)!important;
  border-color:rgba(27,156,228,.45)!important}
.nav-toggle svg{width:20px;height:20px;stroke:var(--navy)!important;
  stroke-width:2.1;fill:none;stroke-linecap:round;
  transition:transform .26s var(--ease)}
.nav-toggle[aria-expanded="true"]{background:rgba(27,156,228,.12)!important;
  border-color:rgba(27,156,228,.45)!important}

/* The panel is a child of .topbar, not of the centred .topbar-in, so it is
   anchored with the same centring arithmetic the container uses:
   1180px max width, 28px gutter -> 50vw - 562px on wide screens. */
.mobile-menu{
  display:block!important;flex-direction:column;
  position:absolute;top:calc(100% + 10px);left:auto;
  right:max(20px,calc(50vw - 562px));
  width:min(348px,calc(100vw - 40px));
  max-height:min(820px,calc(100vh - 100px))!important;
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(10,35,66,.28) transparent;
  padding:12px!important;
  background:var(--bone)!important;
  border:1px solid var(--rule-light)!important;border-bottom:1px solid var(--rule-light)!important;
  border-radius:18px!important;
  box-shadow:0 30px 64px -26px rgba(6,26,46,.5),0 1px 0 rgba(255,255,255,.7) inset;
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.985);
  transform-origin:top right;z-index:60;
  transition:opacity .2s var(--ease),transform .26s var(--ease),visibility .26s}
.mobile-menu.open{opacity:1;visibility:visible;transform:none;max-height:min(820px,calc(100vh - 100px))!important}
/* The panel holds every link on the site, so on a short window it scrolls.
   The bar is left visible on purpose - an invisible overflow reads as a
   truncated menu. */
.mobile-menu::-webkit-scrollbar{width:9px}
.mobile-menu::-webkit-scrollbar-track{background:transparent}
.mobile-menu::-webkit-scrollbar-thumb{background:rgba(10,35,66,.24);
  border-radius:999px;border:3px solid var(--bone)}
.mobile-menu::-webkit-scrollbar-thumb:hover{background:rgba(10,35,66,.4)}

.menu-label{display:block;font-family:var(--display);font-weight:600;
  font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--link-blue);padding:12px 12px 4px}
.menu-label:first-child{padding-top:6px}
.mobile-menu a{display:block;padding:9px 12px!important;border-bottom:0!important;
  font-family:var(--display);font-weight:600;font-size:16px!important;
  color:var(--ink)!important;border-radius:10px;
  transition:background .15s,color .15s}
.mobile-menu a:hover{background:rgba(27,156,228,.10)!important;color:var(--link-blue)!important}
.mobile-menu a[aria-current="page"]{background:rgba(10,35,66,.06)!important;color:var(--navy)!important}
.menu-sep{display:block;height:1px;margin:10px 12px;background:var(--rule-light)}
.mobile-menu .btn{display:flex!important;margin:12px 4px 4px!important;
  text-align:center;color:#fff!important;border-radius:999px}
.mobile-menu .btn:hover{color:var(--depth)!important}
.menu-tel{display:block;padding:10px 12px!important;font-family:var(--body)!important;
  font-weight:600;font-size:15px!important;color:var(--ink-soft)!important}
@media(min-width:900px){
  .mobile-menu{display:block!important}
  .mobile-menu.open{display:block!important}
  .nav-toggle{display:inline-flex!important}
}
@media(max-width:719px){
  .mobile-menu{right:16px;width:calc(100vw - 32px)}
}

/* the brand line that used to sit under the old droplet */
.hero-kicker{display:block;font-family:var(--display);font-weight:600;
  font-size:14px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(143,224,245,.78);margin-bottom:18px}

/* ============================================================
   19. THE PROBLEM: two points up, and a hierarchy that holds
   ============================================================ */
.digital-mkt .dm-sub{font-size:var(--fs-deck)!important;line-height:1.5!important;
  color:#33404F!important;max-width:58ch!important;text-align:center!important;
  margin:0 auto clamp(30px,3.6vw,44px)!important}
.digital-mkt .dm-grid{gap:clamp(28px,4vw,56px)!important;align-items:center!important}
.dm-legend{flex:1 1 340px!important;max-width:520px!important}
.dm-legend-row{font-size:19px!important;padding:13px 0!important;
  color:#33404F!important;gap:13px!important;
  border-bottom:1px solid rgba(10,35,66,.09)!important}
.dm-legend-row .dm-label{font-family:var(--body);font-weight:600}
.dm-legend-row .dm-pct{font-size:21px!important;color:var(--navy)!important;
  min-width:52px!important}
.dm-legend-row .dm-dot{width:14px!important;height:14px!important;border-radius:4px!important}
/* the badge was competing with the labels for first read */
.dm-badge{font-size:14px!important;font-weight:700!important;letter-spacing:.09em!important;
  background:rgba(27,156,228,.14)!important;color:#0B5E9E!important;
  padding:3px 9px!important;border-radius:999px!important;margin-left:10px!important}
.dm-note{font-size:15px;color:var(--ink-soft);text-align:center;
  max-width:64ch;margin:clamp(26px,3vw,36px) auto 0;line-height:1.55}
.dm-note a{color:var(--link-blue);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(11,94,158,.4)}

/* ---- the donut: part-to-whole at a glance, legend does the compare ---- */
.dm-chart{flex:1 1 300px;max-width:380px;margin:0 auto;position:relative}
.dm-chart svg{width:100%;height:auto;display:block;overflow:visible}
.dm-arc{fill:none;stroke-width:15;stroke-linecap:butt;
  transition:stroke-width .2s var(--ease),opacity .2s var(--ease)}
.dm-arc.is-accent{stroke-width:19}
.dm-ring{fill:none;stroke:rgba(10,35,66,.07);stroke-width:15}
.dm-band{fill:none;stroke-width:3;stroke-linecap:round}
.dm-hero-num{font-family:var(--display);font-weight:700;font-size:44px;
  letter-spacing:-.04em;fill:var(--navy)}
.dm-hero-lab{font-family:var(--display);font-weight:600;font-size:11.5px;
  letter-spacing:.18em;fill:var(--ink-soft)}
.dm-band-lead{stroke:rgba(10,35,66,.3);stroke-width:1.2}
.dm-band-lab{font-family:var(--display);font-weight:600;font-size:12px;
  letter-spacing:.14em;fill:var(--ink-soft)}
.dm-chart-cap{font-size:15px;color:var(--ink-soft);text-align:center;margin-top:16px;
  line-height:1.5}
@media(max-width:520px){
  .dm-hero-num{font-size:40px}
}

/* ---- the shift, in four sourced tiles ---- */
.shift{margin:clamp(44px,5vw,64px) auto 0;max-width:1000px}
.shift-head{font-family:var(--display);font-weight:600;font-size:clamp(21px,2.4vw,26px);
  letter-spacing:-.02em;color:var(--navy);text-align:center;margin-bottom:6px}
.shift-sub{font-size:16px;color:var(--ink-soft);text-align:center;margin-bottom:26px}
.shift-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:640px){.shift-grid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.shift-grid{grid-template-columns:repeat(4,1fr)}}
.tile{background:#fff;border:1px solid var(--rule-light);border-radius:var(--radius);
  padding:20px 20px 18px;box-shadow:0 14px 30px -26px rgba(6,26,46,.5)}
.tile-lab{display:block;font-size:15px;color:var(--ink-soft);line-height:1.4;
  margin-bottom:12px;min-height:2.8em}
.tile-val{display:block;font-family:var(--display);font-weight:700;font-size:38px;
  line-height:1;letter-spacing:-.035em;color:var(--navy);
  font-variant-numeric:normal;margin-bottom:8px}
.tile-val.is-text{font-size:26px;letter-spacing:-.02em}
.tile-delta{display:inline-flex;align-items:center;gap:6px;font-size:14px;
  font-weight:600;color:var(--link-blue)}
.tile-delta::before{content:"";width:0;height:0;flex-shrink:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:8px solid currentColor}
.tile-delta.is-down{color:#9A2B1F}
.tile-delta.is-down::before{border-bottom:0;border-top:8px solid currentColor}
.tile-delta.is-flat::before{display:none}
.shift-src{font-size:14px;color:var(--ink-soft);text-align:center;margin-top:20px}
.shift-src a{color:var(--link-blue);text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   20. THE PORTAL FILM, used at the top of the portal page
   ============================================================ */
.portal-film{max-width:760px;margin:0 auto clamp(34px,4vw,52px);text-align:center}
.portal-film-frame{position:relative;margin:0 auto;width:min(320px,78vw);
  border-radius:48px;padding:13px;
  background:linear-gradient(155deg,#4a4a4f 0%,#232326 18%,#1a1a1d 50%,#2c2c30 82%,#454549 100%);
  box-shadow:0 24px 60px rgba(6,26,46,.35),inset 0 0 0 1.5px rgba(255,255,255,.18),
    inset 0 1px 2px rgba(255,255,255,.25),inset 0 -2px 3px rgba(0,0,0,.6)}
.portal-film-frame video{width:100%;display:block;border-radius:36px;background:#0A2342}
.portal-film-cap{display:block;margin:18px auto 0;font-family:var(--display);
  font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--link-blue)}



/* ============================================================
   21. GLOBAL TYPE SCALE. Three sizes carry all meaning on this
   site, and they are the same three on every page:

     1. section header title  --fs-title   (biggest)
     2. section header text   --fs-deck    (medium, under the title)
     3. section text          --fs-body    (below medium)

   An eyebrow (14px, tracked caps) and a caption (15.5px) are
   utility type, not content tiers. Colour, weight and rules do
   the rest of the work so nothing needs a fourth size.

   Loaded last on purpose: this beats chrome.css, prose.css and
   the landing page's inline block on load order alone.
   ============================================================ */

/* --- 1. TITLE ------------------------------------------------ */
.sec-point,
.page-hero h1,
.bottom-cta h2,
.prose h2,
.prose .major h2,
.content>.prose>h2,
body>.wrap>h1{
  font-size:var(--fs-title)!important;
  line-height:1.07!important;letter-spacing:-.028em!important;
  font-weight:700!important;text-wrap:balance}
.sec-point{font-weight:600!important;margin:0 auto clamp(26px,3vw,38px)!important}
.prose h2{margin:clamp(38px,4.4vw,54px) 0 14px!important;color:var(--navy)}
.prose .major h2{margin:0!important}
.bottom-cta h2{text-transform:none!important;margin-bottom:10px!important}

/* --- 2. DECK (section header text) -------------------------- */
.dm-sub,
.page-hero p,
.prose>p:first-of-type:not(.byline):not(.source):not(.closing):not(.pullq),
.prose .major .major-sub,
.sys>p,
.sec-deck{
  font-size:var(--fs-deck)!important;line-height:1.5!important;
  text-wrap:balance}
.dm-sub{margin:0 auto clamp(30px,3.6vw,44px)!important;max-width:60ch!important}
.page-hero p{max-width:56ch!important;margin-left:auto;margin-right:auto}
.prose>p:first-of-type:not(.byline):not(.source):not(.closing):not(.pullq){color:var(--navy)!important;margin-bottom:22px}

/* sub-heads inside a section sit in the medium tier too — weight
   and colour separate them from a deck, not a fourth size. */
.prose h3,
.fig-head h3,
.sys h4,
.prose h4{
  font-size:var(--fs-deck)!important;font-weight:700!important;
  line-height:1.22!important;letter-spacing:-.018em!important}
.prose>h3{margin:clamp(26px,3vw,34px) 0 8px!important;color:var(--tile)!important}
.prose>h4{margin:22px 0 6px!important;color:var(--navy)!important}

/* --- 3. BODY (section text) --------------------------------- */
.prose p,
.prose li,
.zonelist p,
.sys-note,
.faq-a-in,
.dm-legend-row{
  font-size:var(--fs-body)!important;line-height:1.62!important;
  text-wrap:pretty}
.prose p{margin:0 0 16px}
.prose li{margin-bottom:8px}

/* --- utility type ------------------------------------------- */
.prose .source,.prose .byline,.prose .closing,.prose>p.byline:first-of-type,.prose figcaption,
.dm-chart-cap,.dm-note,.fig-head p,.phone-foot{
  font-size:var(--fs-small)!important;line-height:1.55!important}

/* --- no orphans. A single word alone on the last line of a
   deck or a title reads like a mistake, so decks balance and
   body copy uses the orphan-aware algorithm. ---------------- */
h1,h2,h3,h4,.sec-point,.dm-sub,.sec-deck,.major-sub,.page-hero p{text-wrap:balance}
p,li,dd{text-wrap:pretty}

@media (max-width:640px){
  :root{--fs-body:17px}
  .prose h2{margin-top:34px!important}
}

/* --- 22. The skim components own their own type.
   prose.css declares them, but section 21's body rule is a later
   equal-specificity !important, so it would win on load order.
   Re-asserting them here (same selectors, prefixed) settles it
   in the components' favour without weakening the global tiers. */
.prose .keys p{font-size:16px!important;line-height:1.5!important;margin:0!important}
.prose .kb p{font-size:var(--fs-body)!important;line-height:1.55!important}
.prose p.pullq{font-size:clamp(20px,2.2vw,25px)!important;line-height:1.24!important;
  font-family:var(--display);font-weight:700;color:var(--navy)!important;margin:30px 0!important}
.prose .tldr li{font-size:var(--fs-body)!important;line-height:1.55!important}
.prose .statrow b{font-size:clamp(26px,3.2vw,34px)!important}
.prose .statrow span{font-size:13.5px!important;line-height:1.35!important}
.prose .steps>li{font-size:var(--fs-body)!important;line-height:1.55!important}
.prose .steps>li b{font-size:17px!important}
.prose .keys b{font-size:16px!important}


/* ============================================================
   23. THE LANDING PAGE ON THE SAME THREE SIZES.
   index.html carries its own inline block, written before the
   scale existed, so its section decks landed at 16px against a
   40px title and its card titles came in at 19, 20 and 19.
   Sections here use the same title / deck / body as every other
   page; cards use one internal pair (20 / 16) so a card never
   reads as a section.
   ============================================================ */

/* section decks */
.price-desc,
.final-cta .wrap>p:not(.sec-point):not([class*="form"]),
.founder-copy>p:first-of-type{
  font-size:var(--fs-deck)!important;line-height:1.5!important;text-wrap:balance}
.price-desc{margin:0 auto clamp(20px,2.4vw,28px)!important;max-width:44ch!important;text-align:center}
.final-cta .wrap>p:not(.sec-point){max-width:56ch!important;margin:0 auto clamp(24px,3vw,34px)!important;text-align:center}

/* a section-level headline that never had the class */
.founder-copy>h2{font-size:var(--fs-title)!important;line-height:1.07!important;
  letter-spacing:-.028em!important;font-weight:700!important;text-wrap:balance}

/* the two-things callout inside The Problem */
.founder-copy>p:not(:first-of-type){font-size:var(--fs-body)!important;line-height:1.6!important}

/* the two-things callout inside The Problem */
.shift-head{font-size:var(--fs-deck)!important;line-height:1.24!important;font-weight:700!important}
.shift-sub{font-size:var(--fs-body)!important;line-height:1.55!important}

/* one card scale, everywhere */
.pillars .wrap h3,.everything-included h3,.detail-card h3,.cn-title,.results-section .g{
  font-size:20px!important;line-height:1.24!important;letter-spacing:-.012em!important}
.pillars .wrap p:not(.sec-point),.detail-sub,.cn-desc-short,
.detail-list li,.cn-list li{font-size:16px!important;line-height:1.5!important}


/* ============================================================
   24. WHAT TO EXPECT (rampup.html). The page ships an inline
   light theme -- body {background:#fff}, ink-on-white text --
   but brand.css turns the body dark, so every word on the
   timeline was rendering near-black on navy: measured 1.0:1 on
   the step titles and 2.5:1 on the copy. The timeline is now an
   explicitly dark component, and each step is a card so the
   page reads as six bites instead of one column.
   ============================================================ */
.timeline{padding:clamp(26px,3vw,36px) 0 8px!important}
.timeline::before{left:27px!important;top:26px!important;bottom:34px!important;
  background:linear-gradient(180deg,var(--chlorine) 0%,rgba(143,224,245,.12) 100%)!important}
@media(min-width:640px){.timeline::before{left:35px!important}}
.tl-item{gap:18px!important;margin-bottom:14px!important;align-items:stretch}
.tl-dot{width:56px!important;height:56px!important;
  background:linear-gradient(160deg,var(--navy-el) 0%,var(--navy) 100%)!important;
  border:1px solid rgba(143,224,245,.28)!important;align-self:flex-start}
@media(min-width:640px){.tl-dot{width:70px!important;height:70px!important}}
.tl-dot .tl-num{font-size:20px!important;color:var(--chlorine)!important}
.tl-content{flex:1 1 auto;padding:16px 20px 17px!important;
  border-radius:var(--radius);
  background:linear-gradient(172deg,rgba(17,48,90,.62) 0%,rgba(10,35,66,.42) 100%);
  border:1px solid rgba(143,224,245,.14);
  box-shadow:0 1px 0 rgba(143,224,245,.1) inset}
.tl-label{font-family:var(--display);font-size:13px!important;letter-spacing:.16em!important;
  color:var(--chlorine)!important;margin-bottom:4px!important}
.tl-title{font-size:20px!important;line-height:1.24!important;
  color:#fff!important;margin-bottom:5px!important}
.tl-desc{font-size:16px!important;line-height:1.55!important;
  color:var(--body-on-navy)!important}
.intro-text{padding:clamp(30px,4vw,44px) 0 4px!important}
.intro-text p{font-size:var(--fs-deck)!important;line-height:1.5!important;
  color:var(--body-on-navy)!important;margin-bottom:12px!important;text-wrap:balance}
.intro-text strong{color:#fff!important}
.callout-box{margin:clamp(20px,2.6vw,30px) 0 clamp(34px,4vw,48px)!important;
  padding:clamp(26px,3.4vw,36px) clamp(22px,3vw,32px)!important;
  background:linear-gradient(172deg,var(--navy-el) 0%,var(--depth) 100%)!important;
  border:1px solid rgba(143,224,245,.16)}
.callout-box p{font-size:var(--fs-deck)!important;line-height:1.3!important;margin:0!important}
.callout-box .highlight{color:var(--chlorine)!important}

/* the focus-visible skip link was 3.0:1 white-on-pool-blue */
.skip-link{background:var(--link-blue)!important;color:#fff!important}

/* dark cards that sit inside a light section keep light ink: the
   blanket ".light h2,.light h3" rule was turning the AI Concierge
   card title navy-on-navy (measured 1.14:1). */
.light .card-navy h2,.light .card-navy h3,.light .card-navy h4,
.light .card-navy .cn-title,.light .sys h2,.light .sys h3,.light .sys h4,
.light .kb.dark h2,.light .kb.dark h3,.light .kb.dark h4,
.prose .major h2{color:#fff!important}


/* ============================================================
   25. VERTICAL RHYTHM. Measured at 1280 before this block:
   .page-hero ran 128px of padding above a 421px section,
   .content closed on 102px, every landing section carried 90px
   top and bottom (so 180px of nothing between them), and the
   founder row opened a 167px hole because a centred grid was
   aligning a short photo against a tall copy column.

   One scale, used everywhere, roughly two thirds of what was
   there. Sections still breathe; they no longer need a scroll
   to get past the space between them.
   ============================================================ */
:root{
  --pad-band:clamp(52px,5.6vw,76px);   /* a full-width section  */
  --pad-hero:clamp(60px,6.6vw,96px);   /* the top of a page     */
  --pad-tight:clamp(40px,4.4vw,58px);  /* a closing band        */
}

/* interior page headers */
.page-hero{padding:var(--pad-hero) 24px clamp(46px,4.8vw,66px)!important}

/* long-form body */
.content{padding:clamp(38px,4.2vw,56px) 24px clamp(44px,4.8vw,64px)!important}

/* landing page bands */
.hero{padding:clamp(60px,6.6vw,92px) 0 clamp(56px,6vw,84px)!important}
.digital-mkt,.pillars,.everything-included,.results-section,.founder,.final-cta{
  padding-top:var(--pad-band)!important;padding-bottom:var(--pad-band)!important}
.one-flat-price{padding-top:clamp(14px,1.6vw,22px)!important;
  padding-bottom:var(--pad-band)!important}

/* closing bands and chrome */
.bottom-cta{padding:var(--pad-tight) 24px!important}
.faq-section{padding:var(--pad-tight) 24px clamp(48px,5vw,68px)!important}
footer{padding:clamp(26px,3vw,34px) 0!important}
@media(max-width:719px){footer{padding-bottom:92px!important}}
body>.wrap{padding-top:clamp(44px,5vw,62px)!important;
  padding-bottom:clamp(48px,5vw,68px)!important}

/* the founder row: a short photo was being centred against a
   tall column, so the eyebrow sat 167px clear of everything */
.founder .wrap{align-items:start!important;gap:clamp(24px,3vw,44px)!important}
.founder>div:first-child{margin-bottom:0!important}
.founder-commitment{margin:18px 0!important;padding:22px 26px!important}

/* rules and dark bands inside prose stopped stacking their
   margins into a 90px trench */
.prose hr{margin:clamp(30px,3.4vw,44px) 0!important}
.prose .major{margin:clamp(38px,4.4vw,58px) -24px clamp(24px,2.6vw,34px)!important;
  padding:clamp(26px,3.2vw,38px) 24px clamp(24px,3vw,32px)!important}
.prose hr+.major{margin-top:clamp(14px,1.6vw,22px)!important}
.prose .major+hr,.prose .fig+hr{display:none}
.prose>*:first-child{margin-top:0!important}
.prose .fig{margin:clamp(26px,3vw,40px) 0!important}
.subnav{margin-bottom:clamp(26px,3vw,38px)!important}

/* full-width screenshots (/the-search). These are wide infographics, so
   they break out of the text column to the page width on desktop and run
   edge to edge on phones. Never cropped, never stretched; tap for full size. */
.prose .shot{position:relative;left:50%;transform:translateX(-50%);
  width:min(1200px,calc(100vw - 64px));max-width:none;
  margin:0 0 clamp(26px,3vw,40px)}
.prose .shot a{display:block}
.prose .shot img{display:block;width:100%;max-width:100%;height:auto;
  border:1px solid var(--rule-light,rgba(10,35,66,.14));border-radius:10px}
.prose .shot figcaption{margin-top:10px;color:var(--ink-soft);text-align:center}
/* first graphic: one wide image on desktop, the three phone screens
   stacked one per row on phones so each is readable */
.prose .shot-stack{display:none}
.prose .shot-stats{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:8px}
.prose .shot-stats li{margin:0;padding:10px 14px;background:var(--navy,#0A2342);color:#fff;border-radius:8px}
.prose .shot-stats strong{color:#F5B84A;font-size:1.2em;margin-right:6px}
.prose .shot-stats li>strong:first-child{color:#F5B84A}
.prose .shot-stats li::before{content:none}
.prose .shot-stack .shot{width:min(440px,calc(100vw - 32px))}
.prose .shot-stack .shot img{border:0;border-radius:0}
.prose .shot-note{margin:0 0 16px}
@media(max-width:719px){
  .prose .shot-wide{display:none}
  .prose .shot-stack{display:block}
  .prose .shot{width:100vw}
  .prose .shot-stack .shot{width:min(440px,calc(100vw - 32px))}
  .prose .shot img{border-left:0;border-right:0;border-radius:0}
  .prose .shot figcaption{padding:0 24px}
}

/* secondary text link under a closing button */
.bottom-cta .cta-link{display:block;margin-top:18px;color:var(--chlorine);
  font-weight:600;text-decoration:underline;text-underline-offset:3px}
.bottom-cta .cta-link:hover{color:#fff}

/* ---------- The real search callout (home + How Google Decides) ---------- */
.search-proof{max-width:1000px;margin:clamp(40px,4.6vw,56px) auto 0;
  background:#fff;border:1px solid var(--rule-light);border-left:4px solid var(--pool-blue);
  border-radius:var(--radius);padding:clamp(24px,3vw,34px);
  box-shadow:0 14px 30px -26px rgba(6,26,46,.5);text-align:center}
.prose .search-proof{margin:30px 0 34px}
.search-proof .sp-eyebrow{display:block;font-family:var(--display);font-size:13px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--link-blue);margin:0 0 10px}
.search-proof .sp-head{font-family:var(--display);font-size:clamp(21px,2.4vw,26px);font-weight:700;
  line-height:1.22;color:var(--navy);margin:0 auto 20px;max-width:30ch}
.search-proof .sp-stats{list-style:none;display:grid;grid-template-columns:1fr;gap:10px;
  margin:0 0 24px;padding:0}
@media(min-width:640px){.search-proof .sp-stats{grid-template-columns:repeat(3,1fr);gap:14px}}
.search-proof .sp-stats li{margin:0;padding:14px 12px;background:var(--bone);border-radius:10px;
  font-size:15px;line-height:1.35;color:var(--ink-soft)}
.search-proof .sp-stats li::before{content:none}
.search-proof .sp-stats strong{display:block;font-family:var(--display);font-weight:700;
  font-size:34px;line-height:1;letter-spacing:-.03em;color:var(--navy);margin-bottom:6px}
.search-proof .btn{white-space:normal}
.prose a.btn{text-decoration:none}
.prose a.btn-primary{color:#fff}
.prose a.btn-primary:hover{color:var(--depth)}