/* ui-pass.css — the 2026-09-24 mobile + design pass. Loaded last on every static page so it wins the cascade.
   Scope: one button system, the calmer type scale, 8-scale spacing, the kit footer, phone stacking, tap targets,
   text floors, the banned tells (kickers, halo, chips, tints). Per-page rules stay where they are; this file
   overrides them. Documented in docs/styling-conventions.md and docs/untitled-ui-mobile-patterns.md. */

/* 1. One button: radius 8, 48 tall, 16/24 600, 12px 18px, shadow-xs. Nav CTA is the small variant. */
.btn,.v2-btn,.pmflow .btn,.plan .btn,.m-more.m-tosheet-btn{border-radius:8px!important;min-height:48px!important;height:auto!important;padding:12px 18px!important;font-size:16px!important;line-height:24px!important;font-weight:600!important;letter-spacing:-.01em!important;box-shadow:0 1px 2px rgba(10,10,10,.05)!important;box-sizing:border-box!important;justify-content:center!important}
.btn.ghost,.v2-btn.ghost,.btn.line,.btn.onplate{box-shadow:none!important;padding:11px 17px!important}
.btn.sm{min-height:44px!important;padding:10px 16px!important;font-size:15px!important;line-height:22px!important}
.btn.sm.ghost,.btn.sm.line{padding:9px 15px!important}
h1,h2{font-weight:600!important}
.lede,.v2-lede,p.lede{font-weight:400!important;letter-spacing:0!important}
@media (max-width:1023px){.lede,html .v2-hero .v2-lede,html #heroLeft .v2-lede,p.lede{font-size:18px!important;line-height:28px!important}}
.knav-cta{min-height:44px!important;padding:10px 16px!important;font-size:15px!important;font-weight:600!important;border-radius:8px!important;box-shadow:0 1px 2px rgba(10,10,10,.05)!important}
.knav-links{font-weight:600!important;font-size:15px!important;letter-spacing:-.01em!important}

/* 2. Type scale (desktop): h1 44–60 at 600, h2 30–44 at 600, lede 20/30 at 400, support 18/28. Phones keep the kit's 36/44 and 30/38. */
@media (min-width:1024px){
  h1,.h1,.swall h1{font-size:clamp(44px,4.2vw,60px)!important;line-height:1.1!important;letter-spacing:-.02em!important;font-weight:600!important}
  h2:not(.plan h2):not(.dlg h2):not(.slideover h2):not(.card h2):not(.c2 h2):not(.pm h2),.v2-h2,.h2,.kpl-h2,.flow-count{font-size:clamp(30px,3vw,44px)!important;line-height:1.12!important;letter-spacing:-.02em!important;font-weight:600!important}
  html .v2-hero .v2-lede,html #heroLeft .v2-lede,html #heroLeft #heroWelcome,.v2-lede,.lede,p.lede,.swall .lede{font-size:20px!important;line-height:30px!important;font-weight:400!important;letter-spacing:0!important;color:#525252!important;max-width:46ch!important}
  .plate .lede,.v2-hero .v2-lede,.swall .lede,.hero.plate .lede{color:#D4D4D4!important}
  .v2-sub,p.sub{font-size:18px!important;line-height:28px!important}
  h1+.lede,h1+.v2-lede,h1+p.lede{margin-top:16px!important}
  .v2-h2+.v2-sub,.h2+.sub,.h2+p.sub{margin-top:16px!important}
}

/* 3. Spacing on the 4/8 scale and one footer. */
.sfoot{padding-top:48px!important}
.sfoot-col a{min-height:44px!important;font-size:16px!important;font-weight:500!important}
.sfoot-legal,.sfoot-legal a{font-size:14px!important}
@media (max-width:1023px){
  .sfoot{padding-left:16px!important;padding-right:16px!important}
  .sfoot-in{gap:32px!important}
  .sec.logostrip{padding-top:32px!important;padding-bottom:32px!important}
  #hero.sec.plate{padding-bottom:48px!important}
}

/* 4. Phones: CTA pairs sit side by side as pills sized to their text, the ElevenLabs phone hero (Emmet 2026-09-24:
   "I hate the long CTA"); they were two stacked full-width bars before. 44px tap targets; text floors. */
/* the pill rule runs to 1199 because the pages' own phone rules (.v2-acts .v2-btn{width:100%}) run to 1199; at 1024 an iPad got one bar across the page (Emmet: "the ipad size is terrible") */
@media (max-width:1199px){
  .ctas,.acts,.hero-acts,.v2-acts,.pmflow-left .ctas,div:has(> a.btn + button.btn.ghost){display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important}
  .ctas>.btn,.acts>.btn,.acts>.v2-btn,.v2-acts>.v2-btn,.hero-acts>.btn,.pmflow-left .ctas>.btn,.mid>.btn,#hero .btn,div:has(> a.btn + button.btn.ghost)>.btn{width:auto!important;max-width:none!important;min-height:48px!important;padding:13px 22px!important;border-radius:999px!important;justify-content:center}
}
@media (max-width:1023px){
  .swipe-next{width:44px!important;height:44px!important}
  #consent-pill{font-size:14px!important}
  .bbrank li,.bbreports li{font-size:16px!important}
  .v2-trusted .lab,.press>span{font-family:"InterVariable",-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important;font-size:16px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important}
}
/* The journey scene on phones: the page set 8–10.5px, which is under the reading floor. These hold 14/15px
   and the box below is sized to fit them. */
@media (max-width:640px){
  .c2-jour .c2-sig .c2-sigt{font-size:14px!important;line-height:1.3!important}
  .c2-jour .c2-sig .c2-sigd{font-size:15px!important;line-height:1.35!important}
  .c2-jour .c2-sig i{width:22px!important;height:22px!important;font-size:11px!important}
  .c2-jour .c2-jourlab{font-size:14px!important;letter-spacing:.04em!important;bottom:8px!important}
  .c2-prog b,.c2-aud b{font-size:14px!important}
  /* The scene keeps its 3:4 box on phones: every chip is positioned absolutely, so height:auto collapsed
     the card to its padding and clipped all eight. The floor gives the four rows room to clear each other
     once they read at 14/15px, and the bottom pair is inset 7% so it needs 42% to stay off the centre. */
  html .c2-jour{aspect-ratio:3/4!important;height:auto!important;min-height:520px!important;padding-bottom:0!important}
  /* both spellings: the pull animation writes to .style, and the DOM reserializes it with spaces */
  .c2-jour .c2-sig[style*="left:7%"],.c2-jour .c2-sig[style*="right:7%"],
  .c2-jour .c2-sig[style*="left: 7%"],.c2-jour .c2-sig[style*="right: 7%"]{max-width:42%!important}
  /* the /enterprise/ product thumbnail is a fixed 960x600 replica scaled by --js, so it keeps its own
     box: the 3:4 above is for the full-width card and would stretch the thumbnail to 960x1280. */
  html .jourm .c2-jour{aspect-ratio:8/5!important;min-height:0!important}
}

/* 5. Banned tells: kickers, the plate halo, the pricing chip, warm tints. (Caveat "Try it yourself" stays: Emmet's one hand-written note, 2026-09-23.) */
.eyebrow,.v2-label,.v2-kicker,.v2-eyebrow,.pmflow-inc{display:none!important}
.v2-book::before{display:none!important}
.access{background:transparent!important;border:0!important;padding:0!important;color:#525252!important;border-radius:0!important}
.access-tag{display:none!important}

/* 6. Pricing on the kit's pricing tier card: separate cards, radius 16, 40/24 padding. */
.plans{border:0!important;box-shadow:none!important;background:transparent!important;border-radius:0!important;overflow:visible!important;gap:24px!important}
.plan{background:#FFFFFF!important;border:1px solid #E5E5E5!important;border-radius:16px!important;box-shadow:0 1px 2px rgba(10,10,10,.05)!important;padding:40px 24px!important}
.plan+.plan{border-top:1px solid #E5E5E5!important}
.plan h2{font-size:30px!important;line-height:38px!important;letter-spacing:-.02em!important}
.plan .price b{font-size:36px!important;line-height:44px!important;letter-spacing:-.02em!important;font-weight:600!important}
@media (max-width:880px){#pricing.sec{padding-top:64px!important;padding-bottom:64px!important}.plans{gap:16px!important}}

/* the consent banner, one look on every page (2026-09-28, Emmet: "fix cookies on every page its messed up"). Each page styles it
   from its own tokens, and on the mock.css pages (html.foundation) --sheet is near-black and --plate-2 / --gutter are unset, so the
   bar went see-through with dark text and no side padding. Pin the colours and spacing here, after every page sheet. */
#consent-banner{background:#171717!important;color:#FAFAFA!important;border-top:1px solid rgba(255,255,255,.12)!important;padding:16px max(24px,calc((100vw - 1240px) / 2 + 24px))!important;gap:16px 24px!important;font-size:16px!important;line-height:24px!important;box-shadow:0 -12px 32px -16px rgba(0,0,0,.5)}
#consent-banner>span{flex:1 1 360px;min-width:0;color:#D4D4D4}
#consent-banner .acts{flex:none}
#consent-banner .btn{min-height:44px;padding:0 18px;border-radius:8px;font-size:15px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:#F04A3C;color:#fff;border:1px solid #F04A3C}
#consent-banner .btn.ghost{background:transparent;color:#FAFAFA;border:1px solid rgba(255,255,255,.28)}
@media (max-width:600px){#consent-banner{padding:16px!important}#consent-banner .acts{width:100%}#consent-banner .btn{flex:1}}

/* the dark (html.foundation) page heroes: the lede read at near-black on /brand-brain/ (Emmet 2026-09-28: "impossible to read") */
html.foundation .hero .lede{color:#D4D4D4!important;opacity:1!important}