@property --baob-card-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
/* ==========================================================================
   New home page (ported from the BAOB dev home). Everything is scoped under
   .home-new so none of it touches the rest of the site. Generated from the
   BAOB stylesheet by extractcss.js; edit this file directly from here on.
   ========================================================================== */
.home-new {
  /* Brand */;
  --baob-red:            #E8112D;
  /* Same red, split into channels so it can take an alpha: rgba(var(--baob-red-rgb), .4).
     Keep in lockstep with --baob-red above. */;
  --baob-red-rgb:        232, 17, 45;
  --baob-red-dark:       #9A1A2F;
  --baob-black:          #101010;
  --baob-charcoal:       #222222;
  --baob-near-black:     #101010;
  --baob-white:          #FFFFFF;
  /* Accents */;
  --baob-gold:           #FFC000;
  --baob-yellow:         #FFDD00;
  /* Status green — the third light in the red/yellow/green comparison markers.
     Not a red→yellow ramp colour; chosen to read clearly as "good" at 17px. */;
  --baob-green:          #15A34A;
  --baob-blue-action:    #00378C;
  --baob-blue-bright:    #2B6CF5;
  --baob-blue-light:     #BEEBFC;
  /* Neutrals */;
  /* The site's grey surface — hero, panel bands, cards. Warm, not neutral: a
     touch of yellow in it (#F4F4ED) so it sits with the brand's red/yellow ramp
     instead of reading as cold screen-grey. */;
  --baob-gray-100:       #F4F4ED;
  --baob-gray-200:       #EFEFEF;
  /* Sand edge — the secondary button's outline and its pressed fill. Dark enough
     to hold a shape against gray-100 with no border at all (the press goes
     borderless), warm enough to belong to the same family. */;
  --baob-gray-300:       #D0D0C0;
  --baob-gray-500:       #999999;
  --baob-gray-550:       #545454;
  --baob-gray-600:       #626262;
  /* Type */;
  /* TWO FACES ONLY: Inter (body + UI) and Source Serif 4 (headings + pull quotes).
     Inter replaced DM Sans on 2026-07-18 — DM Sans came across in the original
     Betheme token extraction, but the mark is Inter, so the UI matches it now. */;
  --baob-font:           "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --baob-serif:          "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* headings */;
  --baob-h1:             62px;
  --baob-h2:             46px;
  --baob-h3:             32px;
  --baob-h4:             26px;
  --baob-h5:             22px;
  --baob-h6:             14px;
  --baob-body:           16px;
  /* Button signature */;
  --baob-button-bg:         var(--baob-red);
  --baob-button-bg-hover:   var(--baob-charcoal);
  --baob-button-color:      var(--baob-white);
  /* UNIFORM 1px on all four sides — this is the outline .btn--ghost always
     had, and Jef's reference for how every button should look. It used to be
     `2px 2px 0 2px`: heavier strokes AND no bottom border at all, which read
     as inconsistent line weight against the ghost sitting next to it.
     The bottom edge is still the box-shadow slab (--baob-button-press), so
     it can collapse on press without touching layout; the 1px bottom border
     just sits between the face and that slab, exactly as on the ghost. */;
  --baob-button-border:     1px;
  /* Depth of that bottom edge, and how far the button sinks on press. The two
     are the same number by definition: the button drops until the edge is gone
     and it sits flush. */;
  --baob-button-press:      4px;
  --baob-button-radius:     5px;
  --baob-button-padding:    16px 28px;
  --baob-button-size:       18px;
  --baob-button-weight:     600;
  /* Layout */;
  /* --baob-max is the CHROME width: the header bar and the footer bands only.
     Body content is capped narrower (below) — Jef's call. Keep them separate;
     do not collapse one into the other. */;
  --baob-max:            1400px;
  --baob-max-body:       1280px;
  --baob-gutter:         28px;
  /* Footer link band sits inset from the page container. 1180px keeps the
     4 columns at a comfortable ~265px measure instead of stretching to ~330px
     across the full 1344px content width. ≈8% inset each side. */;
  --baob-footer-links-max: 1180px;
  /* Header */;
  --baob-header-h:        76px;
  /* top-of-page (black) */;
  --baob-header-h-sticky: 60px;
  /* revealed sticky (white) */;
  --baob-header-bg:       var(--baob-near-black);
  /* near-black at top */;
  --baob-header-bg-solid: rgba(255, 255, 255, 0.80);
  /* sticky white + blur */;
  --baob-header-blur:     8px;
  --baob-nav-size:        16px;
  --baob-nav-weight:      500;
  /* Logo is sized by HEIGHT, width:auto — deliberately, not by width.
     The lockup's aspect has already moved three times (2.913 → 3.227 → 2.761 →
     2.421 → 2.986) and Jef says the face may change again. Every width-based
     number had to be re-derived on each swap, in three places, and getting it
     wrong silently resized the mark. Pinning the height makes the width follow
     the artwork automatically: new export, no maths, nothing to forget. */;
  --baob-logo-h:           55px;
  /* non-sticky bar */;
  --baob-logo-h-sticky:    46px;
  /* sticky bar */;
  --baob-cta-size:        16px;
  /* red button */;
  --baob-cta2-size:       13px;
  /* secondary "I Need Advice" */;
  --promo-h: 0px;
  --baob-header-h: 0px;
  font-family: var(--baob-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--baob-charcoal);
  background: var(--baob-white);
}
.home-new *, .home-new *::before, .home-new *::after { box-sizing: border-box; }
.home-new h1, .home-new h2, .home-new h3, .home-new h4 { font-family: var(--baob-serif); }

.home-new img { display: block; max-width: 100%; }
.home-new a { color: inherit; text-decoration: none; }
.home-new ul { list-style: none; }
.home-new h1, .home-new h2, .home-new h3 {
  font-family: var(--baob-serif);
  font-weight: 560;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.home-new h1, .home-new h2, .home-new h3 { color: var(--baob-black); }
.home-new h1 { line-height: 1.1; }
.home-new h2 { font-size: clamp(30px, 4vw, var(--baob-h2)); line-height: 1.15; }
.home-new .like-h1 { font-size: clamp(38px, 5vw, var(--baob-h1)); }
.home-new .dim { color: var(--baob-gray-500); }
.home-new .dim i {
  /* NOT font-style: normal — .firetruck's parent italic must carry through
     "iretr" too, or the word visibly breaks upright mid-italic exactly like
     the bug this comment replaces. animation-only override here. */
  animation: dotWave 2.4s ease-in-out infinite;
}
.home-new .dim i:nth-child(1) { animation-delay: 0s; }
.home-new .dim i:nth-child(2) { animation-delay: .16s; }
.home-new .dim i:nth-child(3) { animation-delay: .32s; }
.home-new .dim i:nth-child(4) { animation-delay: .48s; }
.home-new .dim i:nth-child(5) { animation-delay: .64s; }
@media (prefers-reduced-motion: reduce) {
  .home-new .dim i { animation: none; color: inherit; }
}
.home-new .firetruck {
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: var(--baob-red);
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
  white-space: nowrap; /* the joke needs f-iretr-uck to stay one word — never split across a line wrap */
}
.home-new .iu {
  font-style: italic;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--baob-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.home-new .dots i {
  font-style: normal;
  color: rgba(0, 0, 0, .26);          /* resting light grey */
  animation: dotWave 2.4s ease-in-out infinite;
}
.home-new .dots i:nth-child(2) { animation-delay: .26s; }
.home-new .dots i:nth-child(3) { animation-delay: .52s; }
@media (prefers-reduced-motion: reduce) {
  .home-new .dots i { animation: none; color: inherit; }
}
.home-new .on-dark .btn {
  --baob-button-edge: var(--baob-white);
  --baob-button-bg-hover: var(--baob-charcoal);
}
.home-new .wrap { max-width: var(--baob-max-body); margin: 0 auto; padding: 0 var(--baob-gutter); }
.home-new .sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.home-new .btn:hover .arrow--back { transform: scaleX(-1) translateX(4px); }
.home-new .btn {
  --baob-button-edge: var(--baob-black);
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--baob-font);
  font-size: var(--baob-cta-size);
  font-weight: var(--baob-button-weight);
  color: var(--baob-button-color);
  background: var(--baob-button-bg);
  border-style: solid;
  border-color: var(--baob-button-edge);
  border-width: var(--baob-button-border);
  border-radius: var(--baob-button-radius);
  box-shadow: 0 var(--baob-button-press) 0 var(--baob-button-edge);
  margin-bottom: var(--baob-button-press);
  padding: 11px 22px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease,
              transform .12s ease-out,
              box-shadow .12s ease-out;
}
.home-new .btn:hover {
  background: var(--baob-button-bg-hover);
  transform: translateY(var(--baob-button-press));
  box-shadow: 0 0 0 var(--baob-button-edge);
  /* Pressed = a clean flush slab, NO borders. The resting frame + bottom edge
     both vanish together: the box-shadow collapses (above) and the top/side
     border-color goes transparent here. border-COLOR only, never border-width —
     the box keeps its size, so nothing on the page shifts. */
  border-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .home-new .btn, .home-new .btn .arrow { transition: background-color .2s ease; }
  .home-new .btn:hover { transform: none; box-shadow: 0 var(--baob-button-press) 0 var(--baob-button-edge); }
}
.home-new .btn .arrow { width: 16px; height: 16px; flex: none; transition: transform .2s ease; }
.home-new .btn:hover .arrow { transform: translateX(4px); }
@media (max-width: 480px) {
  .home-new .btn { font-size: 14px; padding: 10px 16px; }
}
.home-new .hero { padding: calc(var(--baob-header-h) + 60px) 0 80px; background: var(--baob-gray-100); }
.home-new .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 640px) auto;
  gap: 72px;
  align-items: center;
  justify-content: center;
}
.home-new .hero-eyebrow,
.home-new .hero-copy .hero-eyebrow {
  font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--baob-charcoal);   /* #222 */
  max-width: none; margin: 0 0 24px;   /* sits higher above the H1 */
}
.home-new .hero-copy h1 { font-size: clamp(36px, 4.2vw, var(--baob-h1)); margin-bottom: 20px; }
.home-new .hero-copy h1 em { font-style: normal; color: var(--baob-red); }
.home-new .hero-copy p { font-size: 18px; color: var(--baob-charcoal); max-width: 46ch; margin-bottom: 32px; }
.home-new .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.home-new .btn--sm {
  font-size: 14px;
  padding: 5px 15px;
  gap: 8px;
  --baob-button-press: 3px;
}
.home-new .btn--sm .arrow { width: 14px; height: 14px; }
.home-new .btn--dark {
  --baob-button-bg: var(--baob-charcoal);
  --baob-button-bg-hover: var(--baob-black);
  --baob-button-edge: var(--baob-black);
}
.home-new .btn--ghost {
  /* White fill so it reads as a clean pill on the warm grey hero (was
     transparent, which just showed the grey through). */
  background: var(--baob-white);
  color: var(--baob-charcoal);
  /* Sand, not a black tint. --baob-button-edge drives BOTH the outline and the
     slab edge beneath it, so this one value colours the whole rest state. */
  --baob-button-edge: var(--baob-gray-300);
  /* On press every button goes borderless (.btn:hover sets
     border-color:transparent), so the FILL alone has to keep the pressed shape
     visible — hence a SOLID sand rather than a translucent tint: it holds
     against the #F4F4ED hero with no outline, so it never looks "deleted".
     Same value as the edge, so pressing reads as the outline flooding inwards. */
  --baob-button-bg-hover: var(--baob-gray-300);
  /* No border-width here any more. This variant's full 1px outline used to be
     a local override of the base's bottomless 2px; the base token IS that 1px
     now, so the ghost inherits it and there is a single source of truth. */
}
.home-new .hero-media { position: relative; display: flex; justify-content: center; }
.home-new .hero-slider {
  position: relative;
  height: clamp(420px, 66svh, 620px);
  aspect-ratio: 5 / 6;                 /* width follows the height */
}
.home-new .hero-slide {
  position: absolute; inset: 0; margin: 0;
  border-radius: 20px; overflow: hidden;
  opacity: 0; transition: opacity .8s ease; pointer-events: none;
}
.home-new .hero-slide.is-active { opacity: 1; pointer-events: auto; }
.home-new .hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-new .hero-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  font: 600 18px var(--baob-font); letter-spacing: .05em; color: rgba(255, 255, 255, .85); }
.home-new .hero-slide:nth-child(1) .hero-ph { background: linear-gradient(135deg, #3b4052, #23262f); }
.home-new .hero-slide:nth-child(2) .hero-ph { background: linear-gradient(135deg, #4d2f34, #24181b); }
.home-new .hero-slide:nth-child(3) .hero-ph { background: linear-gradient(135deg, #2f4a3b, #172621); }
.home-new .hero-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: content-box;   /* padding is the button's size — let it grow the box */
  font-size: clamp(24px, 3vw, 32px); line-height: 0;
  /* Kinsta's exact play-button behavior: it doesn't scale on hover, the padding
     WIDENS so the pill gets longer.
     Set directly rather than through a custom property: an em inside a custom
     property resolves against an ambiguous font-size (measured resolving to
     the clamp's 24px floor while the element itself computed 32px), so the
     button came out narrower than intended. Declaring it on `padding` pins it
     to THIS element's font-size. */
  padding: .632em 1.263em;
  border: 2px solid var(--baob-red); border-radius: .368em; cursor: pointer; z-index: 3;
  color: var(--baob-white);
  background: rgba(var(--baob-red-rgb), .82);   /* translucent red at rest */
  overflow: hidden;                              /* clip the fill to the radius */
  box-shadow: 0 .26em .68em rgba(0, 0, 0, .4);
  transition: padding .3s cubic-bezier(0, 1.16, 1, 1);
}
.home-new .hero-play::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--baob-red); opacity: 0;
  transition: opacity .3s cubic-bezier(0, 1.16, 1, 1);
}
.home-new .hero-play-tri { position: relative; z-index: 1; width: .62em; height: .62em; display: block; }
.home-new .hero-play:hover, .home-new .hero-play:focus-visible { padding: .632em 1.642em; }
.home-new .hero-play:hover::after, .home-new .hero-play:focus-visible::after { opacity: 1; }
.home-new .hero-pop {
  position: absolute; z-index: 4; pointer-events: none;
  opacity: 0; transform: translateY(12px) scale(.85);
  transition: opacity .45s ease, transform .5s cubic-bezier(.2, .9, .25, 1.35);
}
.home-new .hero-pop.is-in { opacity: 1; transform: translateY(0) scale(1); }
.home-new .hero-pop--speed {
  top: 12%; right: -22px; width: 66px; height: 66px;
  display: grid; place-items: center;
  background: var(--baob-white); border-radius: 50%; box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}
.home-new .hero-pop--speed svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-new .hero-pop--speed span { font: 700 20px var(--baob-font); color: var(--baob-charcoal); }
.home-new .hero-score-ring { stroke: #15A34A; stroke-dashoffset: 12; }
@media (prefers-reduced-motion: reduce) {
  .home-new .hero-score-ring { stroke: #15A34A; stroke-dashoffset: 12; }
}
.home-new .hero-pop--lock {
  top: 34%; right: -22px; width: 52px; height: 52px;
  display: grid; place-items: center;
  background: #d9f6e3; border-radius: 16px; box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
}
.home-new .hero-pop--lock svg { width: 28px; height: 28px; }
.home-new .hero-lock-shackle { stroke: var(--baob-red); transform-origin: 8px 10px; transform: rotate(-35deg) translate(1px, -1px); }
.home-new .hero-lock-body { fill: var(--baob-red); }
.home-new .hero-pop--lock.is-in .hero-lock-shackle {
  animation: heroLockShackleSwing 2.2s cubic-bezier(.3, .7, .3, 1.05) .55s forwards;
}
.home-new .hero-pop--lock.is-in .hero-lock-body {
  animation: heroLockBodyColor 2.2s ease .55s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .home-new .hero-pop--lock.is-in .hero-lock-shackle,
  .home-new .hero-pop--lock.is-in .hero-lock-body { animation: none; }
  .home-new .hero-lock-shackle { stroke: #15A34A; transform: none; }
  .home-new .hero-lock-body { fill: #15A34A; }
}
.home-new .hero-pop--card {
  left: -26px; bottom: 8%; width: 200px;
  background: var(--baob-white); border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}
.home-new .hero-pop--card b { display: block; font: 700 13px var(--baob-font); color: var(--baob-charcoal); margin-bottom: 8px; }
.home-new .hero-pop--card svg { display: block; width: 100%; height: 34px; }
.home-new .hero-trend-line { stroke-dasharray: 122; stroke-dashoffset: 0; }
.home-new .hero-pop--card.is-in .hero-trend-line {
  animation: heroTrendDraw 1.4s cubic-bezier(.3, .7, .3, 1) .3s;
}
.home-new .hero-trend-fill { opacity: 1; }
.home-new .hero-pop--card.is-in .hero-trend-fill {
  animation: heroTrendFillIn .6s ease 1.5s;
}
.home-new .hero-trend-dot { fill: var(--baob-red); opacity: 1; transform-origin: 118px 1px; }
.home-new .hero-pop--card.is-in .hero-trend-dot {
  animation: heroTrendDotIn .5s cubic-bezier(.3, .7, .3, 1.4) 1.55s;
}
@media (prefers-reduced-motion: reduce) {
  .home-new .hero-pop--card.is-in .hero-trend-line,
  .home-new .hero-pop--card.is-in .hero-trend-fill,
  .home-new .hero-pop--card.is-in .hero-trend-dot { animation: none; }
}

@media (max-width: 900px) {
  .home-new .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .home-new .hero-copy, .home-new .hero-media { min-width: 0; }
  .home-new .hero-media { max-width: 460px; margin: 0 auto; width: 100%; }
  .home-new .hero-slider { height: auto; width: 100%; max-width: 100%; }
}

.home-new .filler-section { padding: 110px 0; }
.home-new .filler-section--panel { background: var(--baob-gray-100); }
.home-new .filler-section h2 { font-size: clamp(30px, 4vw, var(--baob-h2)); margin-bottom: 16px; max-width: 25ch; }
.home-new .filler-section--compare h2 { max-width: 26ch; margin-inline: auto; text-align: center; }
.home-new .filler-section > .wrap > p { font-size: 17px; color: var(--baob-charcoal); max-width: 60ch; margin-bottom: 48px; }
.home-new .filler-section h2 + .card-grid { margin-top: 40px; }
.home-new .filler-section--firetruck { position: relative; overflow: hidden; }
.home-new .firetruck-photo {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: clamp(320px, 36%, 760px);
  height: 100%;
  /* Right-aligned, not centred: the panel is far taller than the photo is
     wide, so cover only shows ~65% of the frame. Centring that slice cuts his
     right hand off; anchoring it right keeps the slice at 35-100% instead. */
  object-fit: cover; object-position: 100% 50%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #101010 26%);
          mask-image: linear-gradient(to right, transparent 0, #101010 26%);
  z-index: 0; pointer-events: none;
}
.home-new .filler-section--firetruck > .wrap { position: relative; z-index: 1; }
.home-new .firetruck-copy { max-width: 700px; margin-bottom: 44px; }   /* Jef, 2026-10-01 */
.home-new .firetruck-copy h2 { max-width: none; }
@media (max-width: 720px) { .home-new .firetruck-break { display: none; } }
@media (max-width: 720px) { .home-new .hero-h1-break { display: none; } }

.home-new .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.home-new .filler-section--firetruck .card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: calc((100% - 100px) / 3 * 2 + 20px);
}
.home-new .card {
  position: relative;   /* anchors the ::after glow ring */
  display: flex; flex-direction: column;
  background: var(--baob-white);
  border: 1px solid rgba(0, 0, 0, .07);
  border-radius: 12px;
  padding: 24px 28px;   /* Jef, 2026-08-04 */
}
.home-new .card .btn { align-self: flex-start; margin-top: auto; }
.home-new .filler-section--firetruck .card p { margin-bottom: 22px; }
.home-new .filler-section .card { background: var(--baob-gray-100); }
.home-new .filler-section--panel .card { background: var(--baob-white); }
.home-new .card h3 { font-size: 24px; margin-bottom: 10px; }
.home-new .card p { font-size: 15px; color: var(--baob-charcoal); }
.home-new .filler-section--compare .card--hostage {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ctext x='16' y='24' font-size='26' text-anchor='middle'%3E%F0%9F%A4%AC%3C/text%3E%3C/svg%3E") 16 16, auto;
}
.home-new .filler-section--compare .card--works {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ctext x='16' y='24' font-size='26' text-anchor='middle'%3E%F0%9F%A4%A2%3C/text%3E%3C/svg%3E") 16 16, auto;
}
.home-new .filler-section--compare .card--winwin {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ctext x='16' y='24' font-size='26' text-anchor='middle'%3E%F0%9F%91%8D%3C/text%3E%3C/svg%3E") 16 16, auto;
}
.home-new .filler-section--compare .compare-404 {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  border-radius: 12px; background: #101010; padding: 0 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.home-new .filler-section--compare .card--hostage:hover .compare-404 { opacity: 1; }
.home-new .filler-section--compare .card--hostage:hover > *:not(.compare-404) { visibility: hidden; }
.home-new .card p.compare-404-code { font-family: var(--baob-serif); font-size: 30px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.75); margin: 0; line-height: 1; }
.home-new .card p.compare-404-msg { font-size: 14px; line-height: 1.5; color: #9A9A9A; margin: 10px 0 0; }
.home-new .filler-section--compare .compare-upsell {
  position: absolute; inset: 0; border-radius: 12px; overflow: hidden;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.home-new .filler-section--compare .card--works:hover .compare-upsell { opacity: 1; }
.home-new .filler-section--compare .card--works:hover > *:not(.compare-upsell) { opacity: .08; transition: opacity .2s ease; }
.home-new .compare-upsell-track {
  display: flex; flex-direction: column;
  animation: compareUpsellScroll 40s linear infinite;
}
.home-new .compare-upsell-half { display: flex; flex-direction: column; gap: 28px; }
.home-new .compare-upsell-half::after { content: ""; display: block; height: 28px; }
.home-new .compare-upsell-pair { display: flex; flex-direction: column; gap: 8px; }
.home-new .compare-upsell-bubble {
  align-self: center; max-width: 85%;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(0,0,0,.78); border: 1px solid rgba(255,255,255,.12);
  font-size: 13px; font-style: italic; color: rgba(255,255,255,.85);
  text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.2);
  backdrop-filter: blur(2px);
}
.home-new .compare-upsell-bubble--others { background: var(--baob-red); border-color: var(--baob-red-dark); color: var(--baob-white); }
.home-new .compare-upsell-bubble--me { background: #101010; border-color: rgba(255, 221, 0, .55); color: var(--baob-yellow); font-style: normal; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .home-new .compare-upsell-track { animation: none; }
}
.home-new .filler-section--compare .compare-hover-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 12px;
  opacity: 0; transform: scale(.97);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.home-new .filler-section--compare .card--winwin:hover .compare-hover-img {
  opacity: 1; transform: scale(1);
}
.home-new .filler-section--compare .compare-fireworks {
  position: absolute; top: 50%; left: 50%; width: 0; height: 0;
  pointer-events: none; z-index: 5;
}
.home-new .filler-section--compare .compare-fireworks .fw-flash {
  position: absolute; top: -14px; left: -14px; width: 28px; height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--baob-yellow) 32%, rgba(232, 17, 45, .55) 58%, rgba(232, 17, 45, 0) 72%);
  opacity: 0; transform: translate(var(--ox, 0px), var(--oy, 0px)) scale(0);
}
.home-new .filler-section--compare .compare-fireworks i {
  position: absolute; top: -8px; left: -2px; width: 4px; height: 16px;
  border-radius: 999px; background: #fff;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, .35);
  opacity: 0;
  transform: translate(var(--ox, 0px), var(--oy, 0px)) rotate(var(--a, 0deg)) scale(0);
}
.home-new .filler-section--compare .compare-fireworks i:nth-of-type(2n) { background: var(--baob-yellow); }
.home-new .filler-section--compare .compare-fireworks i:nth-of-type(3n) { background: #15A34A; }
.home-new .filler-section--compare .compare-fireworks b {
  position: absolute; top: -6px; left: -6px; width: 12px; height: 12px;
  background: #fff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 3px rgba(255, 221, 0, .9));
  opacity: 0; transform: translate(var(--x), var(--y)) scale(0) rotate(0deg);
}
.home-new .filler-section--compare .compare-fireworks b:nth-of-type(2n) { background: var(--baob-yellow); }
.home-new .filler-section--compare .card--winwin:hover .compare-fireworks .fw-flash {
  animation: compareFlash .55s cubic-bezier(.1, .8, .3, 1) both;
  animation-delay: var(--d, 0s);
}
.home-new .filler-section--compare .card--winwin:hover .compare-fireworks i {
  animation: compareFirework 1.15s cubic-bezier(.15, .85, .3, 1) both;
  animation-delay: var(--d, 0s);
}
.home-new .filler-section--compare .card--winwin:hover .compare-fireworks b {
  animation: compareTwinkle .7s ease-out both;
  animation-delay: var(--d, .6s);
}
@media (prefers-reduced-motion: reduce) {
  .home-new .filler-section--compare .card--winwin:hover .compare-fireworks .fw-flash,
  .home-new .filler-section--compare .card--winwin:hover .compare-fireworks i,
  .home-new .filler-section--compare .card--winwin:hover .compare-fireworks b { animation: none; opacity: 0; }
}
.home-new .card::after,
.home-new .howto-demo::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--baob-card-angle),
    var(--baob-red), var(--baob-yellow), var(--baob-red));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter: drop-shadow(0 0 5px rgba(232, 17, 45, .55))
          drop-shadow(0 0 9px rgba(255, 221, 0, .35));
  /* Eased ease-in so the glow SWELLS up rather than snapping on — Jef found the
     old .35s pop too aggressive. Same curve on leave, so it fades out gently. */
  opacity: 0; transition: opacity .6s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}
.home-new .card:hover::after,
.home-new .howto-demo:hover::after { opacity: 1; animation: baob-card-spin 3s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .home-new .card:hover::after,
  .home-new .howto-demo:hover::after { animation: none; }
}
.home-new .card .compare-lead, .home-new .compare-lead { font-weight: 500; color: var(--baob-black); margin: 18px 0 10px; }
.home-new .mark-list { list-style: none; }
.home-new .mark-list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  color: var(--baob-charcoal);
}
.home-new .mark-list li + li { margin-top: 7px; }
.home-new .mark-list li::before {
  content: "";
  /* top:3, not 1 — the 17px icon is taller than the 15px text, so at top:1 its
     centre sat ~2.5px above the text's optical middle. Measured. */
  position: absolute; left: 0; top: 3px;
  width: 17px; height: 17px;
  background: var(--mark) center / contain no-repeat;
}
.home-new .mark-list--x    { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23E8112D'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.home-new .mark-list--warn { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.27 2.5a2 2 0 0 1 3.46 0l9.5 16.5A2 2 0 0 1 21.5 22h-19a2 2 0 0 1-1.73-3z' fill='%23FFDD00'/%3E%3Cpath d='M12 8.6v5.6' stroke='%23101010' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.9' r='1.45' fill='%23101010'/%3E%3C/svg%3E"); }
.home-new .mark-list--ok   { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='1' width='22' height='22' rx='4.5' fill='%2315A34A'/%3E%3Cpath d='M6.8 12.4l3.2 3.3L17.2 9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (max-width: 1040px) {
  .home-new .card-grid { grid-template-columns: repeat(2, 1fr); }
  .home-new .filler-section--firetruck .card-grid { max-width: none; }
  .home-new .firetruck-photo { display: none; }
}
@media (max-width: 620px) {
  .home-new .card-grid { grid-template-columns: 1fr; }
  .home-new .filler-section--firetruck .card-grid { grid-template-columns: 1fr; }
  .home-new .card { padding: 24px 20px; }
}
.home-new .faq h2 { max-width: 26ch; margin-inline: auto; text-align: center; }
.home-new .faq-list { max-width: 820px; margin: 44px auto 0; }
.home-new .faq-item { border-bottom: 1px solid rgba(0, 0, 0, .12); }
.home-new .faq-item:first-child { border-top: 1px solid rgba(0, 0, 0, .12); }
.home-new .faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 2px;
  font-size: 18px; font-weight: 600; color: var(--baob-black);
  cursor: pointer;
  list-style: none;            /* kill the default disclosure triangle */
}
.home-new .faq-item summary::-webkit-details-marker { display: none; }
.home-new .faq-item summary:hover { color: var(--baob-red); }
.home-new .faq-item summary:focus-visible { outline: 2px solid var(--baob-red); outline-offset: 3px; }
.home-new .faq-item summary::after {
  content: ""; flex: none; width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5v13M1.5 8h13' stroke='%23222' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s ease;
}
.home-new .faq-item[open] summary::after { transform: rotate(45deg); }
.home-new .faq-item:not([open]) .faq-answer { display: none; }
.home-new .faq-answer { padding: 0 2px 24px; }
.home-new .faq-answer p,
.home-new .faq-answer li { font-size: 16px; line-height: 1.65; color: var(--baob-charcoal); max-width: 68ch; }
.home-new .faq-answer p { margin: 0 0 14px; }
.home-new .faq-answer p:last-child { margin-bottom: 0; }
.home-new .faq-answer ul { margin: 0; padding-left: 20px; list-style: disc; }
.home-new .faq-answer li { margin-bottom: 12px; }
.home-new .faq-answer li:last-child { margin-bottom: 0; }
.home-new .faq-answer li::marker { color: var(--baob-red); }
.home-new .faq-answer a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--baob-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.home-new .faq-answer a:hover { color: var(--baob-red); }
@media (prefers-reduced-motion: reduce) { .home-new .faq-item summary::after { transition: none; } }
.home-new .howto h2 { text-align: center; margin-inline: auto; }
.home-new .howto-steps {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 32px; row-gap: 0; margin: 56px 0 0; padding: 0; list-style: none;
  /* Four shared row tracks — pip, heading, copy, demo — so every column lines
     up on the same baselines and, crucially, all three demo windows land in
     ONE row. The row then sizes to the tallest (the chat), which is what makes
     the cards fit the thread exactly at any column width instead of being
     pinned to a number that clips the moment the messages wrap differently. */
  grid-template-rows: auto auto auto auto;
}
.home-new .howto-steps::before {
  content: ""; position: absolute; top: 23px; left: 16.66%; right: 16.66%;
  height: 2px; background: var(--baob-gray-300); z-index: 0;
}
.home-new .howto-step {
  position: relative; z-index: 1; text-align: center;
  display: grid; grid-row: span 4; grid-template-rows: subgrid;
}
.home-new .howto-num {
  display: grid; place-items: center; width: 46px; height: 46px;
  margin: 0 auto 16px; border-radius: 50%;
  background: var(--baob-red); color: var(--baob-white);
  font-weight: 700; font-size: 18px;
}
.home-new .howto-step h3 { margin: 0 0 6px; font-size: 24px; }
.home-new .howto-step > p {
  margin: 0 auto; max-width: 34ch;
  font-size: 15px; line-height: 1.5; color: var(--baob-gray-550);
}
.home-new .howto-demo { position: relative; margin-top: 18px; border-radius: 10px; text-align: left; }
.home-new .demo-window {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid var(--baob-gray-300); border-radius: 10px;
  background: var(--baob-white);
  /* Fills the shared row, so all three are exactly as tall as the chat needs.
     min-height is the no-subgrid fallback, not the usual case. */
  height: 100%; min-height: 300px;
}
.home-new .demo-chrome {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: 10px 12px; background: var(--baob-gray-200);
  border-bottom: 1px solid var(--baob-gray-300);
}
.home-new .demo-chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--baob-gray-300); }
.home-new .demo-chrome i:first-child { background: var(--baob-red); }
.home-new .demo-chrome i:nth-child(2) { background: var(--baob-yellow); }
.home-new .demo-url {
  flex: 1; margin-left: 8px; padding: 3px 10px; border-radius: 20px;
  background: var(--baob-white); font-size: 11px; color: var(--baob-gray-550);
}
.home-new .demo-body { position: relative; flex: 1; }
.home-new .demo-stage {
  position: absolute; inset: 0; padding: 20px 18px;
  display: flex; flex-direction: column; justify-content: center;
  text-align: center;
  opacity: 0; visibility: hidden; transition: opacity .3s ease;
}
.home-new .demo-stage.is-shown { opacity: 1; visibility: visible; }
.home-new .demo-label { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
.home-new .demo-field {
  display: flex; align-items: flex-start; justify-content: flex-start; min-height: 42px;
  text-align: left;
  padding: 11px 13px; border: 1px solid var(--baob-gray-300);
  border-radius: 6px; background: var(--baob-gray-100);
  font-size: 14px; color: var(--baob-charcoal);
}
.home-new .demo-field { line-height: 1.4; }
.home-new .demo-pre { color: var(--baob-gray-500); }
.home-new .demo-typed { min-height: 1.4em; }
.home-new .demo-caret {
  display: inline-block; width: 1.5px; height: 16px; margin-left: 1px;
  background: var(--baob-charcoal); animation: demoBlink 1s steps(1) infinite;
}
.home-new .demo-btn {
  width: 100%; margin-top: 16px; padding: 12px 20px; border: 0;
  border-radius: var(--baob-button-radius);
  background: var(--baob-red); color: var(--baob-white);
  font: 600 14px/1 var(--baob-font); cursor: default;
  transition: background-color .25s ease, transform .12s ease;
}
.home-new .demo-btn.is-pressed { transform: translateY(2px); }
.home-new .demo-btn.is-done { background: var(--baob-green); }
.home-new .demo-done.is-shown { opacity: 1; }
.home-new .demo-cursor {
  position: absolute; top: 0; left: 0; width: 22px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='5,2 5,19 9.5,14.8 12.3,20.9 15.2,19.5 12.5,13.6 18.5,13.2' fill='%23111' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat top left / contain;
  /* Drawn from the top-left so the arrow TIP is the hotspot, the way a real
     pointer is. The old glyph was hand-drawn and its outline read as broken. */
  opacity: 0; transform: translate(var(--cx, 0px), var(--cy, 0px));
  transition: transform .9s cubic-bezier(.3,.7,.3,1), opacity .3s ease;
  pointer-events: none;
}
.home-new .demo-cursor.is-shown { opacity: 1; }
.home-new .demo-cursor.is-clicking { transform: translate(var(--cx, 0px), var(--cy, 0px)) scale(.8); }
.home-new .chat-window { display: flex; flex-direction: column; border-color: #0b141a; background: #0b141a; }
.home-new .chat-top {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: #202c33;
}
.home-new .chat-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.home-new .chat-who { display: flex; flex-direction: column; line-height: 1.25; }
.home-new .chat-who b { color: #e9edef; font-size: 13px; }
.home-new .chat-who em {
  display: flex; align-items: center; gap: 5px;
  color: #8696a0; font-size: 11px; font-style: normal;
}
.home-new .chat-who em::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #25d366;
}
.home-new .chat-body {
  display: flex; flex-direction: column; gap: 7px;
  flex: 1; padding: 14px 12px; overflow: hidden;
  /* Bottom-anchored, so a thread that outgrows the window pushes its oldest
     message off the top the way a real one does. */
  justify-content: flex-end;
}
.home-new .chat-msg {
  max-width: 82%; margin: 0; padding: 7px 10px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.4; color: #e9edef;
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.home-new .chat-msg.is-shown { opacity: 1; transform: none; }
.home-new .chat-in  { align-self: flex-start; background: #202c33; border-top-left-radius: 2px; }
.home-new .chat-out { align-self: flex-end;   background: var(--baob-red); border-top-right-radius: 2px; }
.home-new .chat-compose {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 9px 12px 11px; background: #0b141a;
}
.home-new .chat-input {
  flex: 1; padding: 9px 14px; border-radius: 20px;
  background: #202c33; color: #8696a0; font-size: 12.5px;
}
.home-new .chat-send { width: 19px; height: 19px; color: #8696a0; }
.home-new .chat-in  + .chat-in  { border-top-left-radius: 8px; }
.home-new .chat-out + .chat-out { border-top-right-radius: 8px; }
.home-new .mail-top {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid var(--baob-gray-300);
  font-size: 12px; font-weight: 600; color: var(--baob-gray-550);
}
.home-new .mail-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--baob-red); }
.home-new .mail-open { flex: 1; padding: 13px 15px; }
.home-new .mail-subject { margin: 0 0 2px; font-size: 13.5px; font-weight: 700; }
.home-new .mail-meta {
  display: flex; justify-content: space-between; gap: 10px;
  margin: 0 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--baob-gray-300);
  font-size: 11px; color: var(--baob-gray-500);
}
.home-new .mail-copy { margin: 0 0 7px; font-size: 12px; line-height: 1.45; color: var(--baob-gray-550); }
.home-new .mail-link {
  position: relative; cursor: help;
  color: var(--baob-blue-action); text-decoration: underline; text-underline-offset: 2px;
}
.home-new .mail-link::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 9px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 10px; border-radius: 6px; white-space: nowrap;
  background: var(--baob-charcoal); color: var(--baob-white);
  font: 600 11px/1.3 var(--baob-font); text-decoration: none;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.home-new .mail-link::before {
  content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%;
  border: 5px solid transparent; border-top-color: var(--baob-charcoal);
  transform: translateX(-50%) translateY(4px);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.home-new .mail-link:hover::after,
.home-new .mail-link:hover::before { opacity: 1; transform: translateX(-50%); }
.home-new .mail-sign { margin-top: 11px; }
.home-new .mail-reply {
  margin-top: 12px; padding: 10px 0 0 11px;
  border-top: 1px solid var(--baob-gray-300);
  border-left: 2px solid var(--baob-gray-300);
}
.home-new .mail-replyhead {
  margin: 0 0 7px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--baob-gray-500);
}
.home-new .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 14px; }
.home-new .cal-d {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 0; border-radius: 6px;
  font-size: 10px; color: var(--baob-gray-500);
}
.home-new .cal-d b { font-size: 13px; font-weight: 600; color: var(--baob-charcoal); }
.home-new .cal-d--free { background: var(--baob-gray-100); }
.home-new .cal-d--off { opacity: .38; }
.home-new .cal-d--off b { text-decoration: line-through; }
.home-new .cal-d--picked { background: var(--baob-red); }
.home-new .cal-d--picked, .home-new .cal-d--picked b { color: var(--baob-white); }
.home-new .cal-price { margin: 0 0 14px; font-size: 12px; color: var(--baob-gray-550); }

@media (prefers-reduced-motion: reduce) {
  .home-new .demo-caret { animation: none; opacity: 0; }
  .home-new .demo-cursor, .home-new .chat-msg, .home-new .demo-stage { transition: none; }
}
@media (max-width: 900px) {
  .home-new .howto-steps { grid-template-columns: 1fr; gap: 44px; }
  .home-new .howto-steps::before { display: none; }
  .home-new .howto-demo { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 620px) {
  .home-new .howto-steps { gap: 30px; }
  .home-new .howto-demo { max-width: none; margin-inline: 0; }
  .home-new .demo-window { min-height: 0; }
  .home-new .demo-stage { padding: 16px 14px; }
  .home-new .howto-step { padding-bottom: 0; }
}
.home-new .testimonials { background: var(--baob-red); padding: 76px 0 96px; }
.home-new .testimonials-grid {
  display: grid;
  grid-template-columns: minmax(220px, 330px) minmax(0, 1fr);
  gap: 56px; align-items: start;
}
.home-new .testimonials-intro h2 {
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1.06;
  color: var(--baob-white); margin-bottom: 14px;
}
.home-new .testimonials-intro > p { color: #fff; font-size: 17px; max-width: 32ch; margin-bottom: 30px; }
.home-new .t-controls { display: flex; align-items: center; gap: 12px; }
.home-new .t-arrow {
  width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--baob-white); color: var(--baob-black);
  display: inline-flex; align-items: center; justify-content: center;
  transition: opacity .2s ease, background-color .2s ease;
}
.home-new .t-arrow svg { width: 18px; height: 18px; display: block; }
.home-new .t-arrow:disabled { opacity: .42; cursor: default; }
.home-new .t-dots { display: flex; align-items: center; gap: 0; margin-left: 8px; }
.home-new .t-dot {
  width: 24px; height: 24px; flex: none; padding: 9px; border: 0; border-radius: 999px; background-clip: content-box; /* 6px dot inside a 24px touch target */
  background-color: rgba(255, 255, 255, .4); cursor: pointer;
  transition: width .3s ease, background-color .3s ease;
}
.home-new .t-dot.is-active { width: 42px; background-color: var(--baob-white); }
.home-new .t-scroller {
  display: flex; gap: 24px;
  overflow-x: auto; overscroll-behavior-x: contain;
  /* PROXIMITY, not mandatory (this is what Fyxer uses too). Mandatory re-snaps on
     every programmatic scroll and fights the arrow/dot jumps — measured landing on
     708 when asked for 354. Proximity only snaps when you finish near a card. */
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  /* No vertical padding needed now the cards are flat — it only ever existed to
     give the box-shadow somewhere to render inside this clipping box. Card tops
     therefore align with the H2 on their own, with no compensating margin. */
  padding: 0;
  scrollbar-width: none; -ms-overflow-style: none;
}
.home-new .t-scroller::-webkit-scrollbar { display: none; }
.home-new .t-scroller:focus-visible { outline: 2px solid var(--baob-white); outline-offset: 4px; }
.home-new .tcard {
  flex: 0 0 auto; width: 330px; scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--baob-white); border-radius: 10px; overflow: hidden;
  /* No box-shadow. The scroll container clips on every side (overflow-x:auto
     forces overflow-y too), so a shadow always got sliced flat somewhere — most
     visibly at the track's left/right edges, which padding can't fix without
     throwing the scroll-snap offsets out. Flat cards on the red read fine. */
}
.home-new .tcard-chrome {
  display: flex; align-items: center; gap: 6px; flex: none;
  height: 30px; padding: 0 12px;
  background: #ECECEC; border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.home-new .tcard-chrome i { width: 9px; height: 9px; border-radius: 50%; background: #C7C7C7; flex: none; }
.home-new .tcard-chrome i:nth-child(1) { background: var(--baob-red); }
.home-new .tcard-chrome i:nth-child(2) { background: var(--baob-yellow); }
.home-new .tcard-chrome i:nth-child(2) { background: var(--baob-yellow); }
.home-new .tcard-url {
  flex: 1; min-width: 0; height: 16px; margin-left: 8px;
  border-radius: 999px; background: #DCDCDC;
  display: flex; align-items: center; padding: 0 9px;
  font-size: 10px; line-height: 1; color: var(--baob-black);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.home-new .tcard-body { display: flex; flex-direction: column; gap: 16px; padding: 22px 22px 24px; flex: 1; }
.home-new .tcard-avatar { width: 100px; height: 100px; border-radius: 8px; background: #E2E2E2; flex: none; object-fit: cover; display: block; margin-bottom: 40px; }
.home-new .tcard blockquote { margin: auto 0 0; font-family: var(--baob-font); font-size: 24px; line-height: 1.15; font-weight: 700; color: var(--baob-black); }
.home-new .tcard-meta { margin: 0; font-size: 14px; line-height: 1.4; color: var(--baob-gray-550); }
.home-new .tcard-meta b { color: var(--baob-black); font-weight: 600; }
.home-new .tcard-meta b + span::before { content: "|"; margin: 0 8px; color: rgba(0, 0, 0, .22); }

@media (max-width: 860px) {
  .home-new .testimonials { padding: 72px 0 80px; }
  .home-new .testimonials-grid { grid-template-columns: 1fr; gap: 30px; }
  .home-new .tcard { width: 280px; }
}
.home-new .localseo-body .hero-copy p { max-width: 56ch; }
.home-new .lsr-navlink.is-active { color: var(--baob-white); border-bottom-color: var(--baob-red); font-weight: 600; }
.home-new .lsr-key:hover .lsr-deeper:not(.btn--ghost),
.home-new .lsr-key:focus-visible .lsr-deeper:not(.btn--ghost) { background: var(--baob-button-bg-hover); }
.home-new .lsr-key:hover .lsr-deeper.btn--ghost,
.home-new .lsr-key:focus-visible .lsr-deeper.btn--ghost { background: var(--baob-gray-100); }
.home-new .lsr-feature-cta .arrow { width: 15px; height: 15px; }
.home-new .gbpm-state.is-shown { opacity: 1; pointer-events: auto; }
.home-new .work-list-head .hero-eyebrow { margin-bottom: 16px; }
.home-new .work-showcase-head .hero-eyebrow { color: var(--baob-white); }
.home-new .work-showcase-head .hero-eyebrow { margin-bottom: 16px; }
.home-new .work-guide > .wrap { position: relative; z-index: 1; }
.home-new .guide-copy .hero-eyebrow { margin-bottom: 14px; }
.home-new .guide-card--dark .hero-eyebrow { color: var(--baob-white); }
.home-new .guide-card--dark .compare-lead { color: rgba(255, 255, 255, .88); }
.home-new .guide-card--dark .mark-list li { color: rgba(255, 255, 255, .92); }
.home-new .cs-quote .wrap { text-align: center; }
.home-new .ws-hero .hero-copy p { max-width: 54ch; }
.home-new .ws-video[data-inline-video].is-playing .hero-play { display: none; }
.home-new .ws-video .hero-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.home-new .ws-panel-body .mark-list { margin-bottom: 26px; }
.home-new .ws-panel-body .mark-list li { line-height: 1.55; }
.home-new .art-toc a.is-active { color: var(--baob-red); border-left-color: var(--baob-red); }
.home-new [data-region="ca"] .re-io { display: none; }
.home-new [data-region="io"] .re-ca { display: none; }
.home-new .pods .hero-eyebrow { color: rgba(255, 255, 255, .55); }
.home-new .wr-all .arrow { width: 18px; height: 18px; }
.home-new .bl-hero .hero-eyebrow { color: rgba(255, 255, 255, .55); }
.home-new .bl-feat-cta .arrow { width: 18px; height: 18px; }
.home-new .bl-all .arrow { width: 17px; height: 17px; }
.home-new .price-foot .btn { width: 100%; justify-content: center; }
.home-new .pricing-addons .hero-eyebrow { color: rgba(255, 255, 255, .55); }
.home-new .addon-card a .arrow { width: 15px; height: 15px; }
.home-new .pricing-faq .hero-eyebrow { text-align: center; }
.home-new .aiw .hero-copy p { max-width: 48ch; }
.home-new .approach-item.card { padding: 26px 30px 30px; }
.home-new .ai-demo .demo-body { min-height: 0; }
.home-new .ai-demo .demo-field { min-height: 76px; align-items: flex-start; }
.home-new .ai-wire .is-in { opacity: 1; transform: none; }
.home-new .ai-done.is-in { opacity: 1; }
.home-new .wf-hero > .wrap > p {
  font-size: 17px; color: var(--baob-charcoal);
  max-width: 48ch; margin: 0 auto;
}
.home-new .wf-list .arrow { width: 15px; height: 15px; flex: none; color: var(--baob-gray-500); transition: transform .2s ease, color .2s ease; }
.home-new .wf-list a:hover .arrow { color: var(--baob-red); transform: translateX(3px); }
.home-new .cscard-link .arrow { width: 14px; height: 14px; flex: none; transition: transform .2s ease; }
.home-new .cscard-link:hover .arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .home-new .cscard-link .arrow { transition: none; }
}
.home-new .like-h3 { font-size: 24px; margin: 0 0 16px; color: var(--baob-black); }
.home-new .wd-stagebtn.is-active { background: var(--baob-near-black); color: var(--baob-white); border-color: var(--baob-near-black); }
.home-new .wd-cap.is-shown { display: block; animation: wd-cap-in .35s ease; }
.home-new .wd-upgrade .arrow { width: 15px; height: 15px; flex: none; color: var(--baob-red); }
.home-new .bw-body .hero-copy p { max-width: 56ch; }
.home-new .bw-select-cta .arrow { width: 16px; height: 16px; }
.home-new .bw-body .testimonials { background: var(--baob-near-black); }

@media (max-width: 700px) {
  .home-new .hiw-actions .btn { width: 100%; justify-content: center; }
}
.home-new .offer-cat.is-active { background: var(--baob-white); border-color: var(--baob-gray-300); }
@keyframes dotWave {
  0%, 48%, 100% { color: rgba(0, 0, 0, .26); }   /* grey at rest */
  12%           { color: var(--baob-yellow); }    /* sweep through the brand ramp: */
  26%           { color: var(--baob-red); }       /* yellow → red, then back to grey */
}
@keyframes heroLockShackleSwing {
  0%   { transform: rotate(-35deg) translate(1px, -1px); stroke: var(--baob-red); }
  25%  { transform: rotate(-35deg) translate(1px, -1px); stroke: var(--baob-red); }
  55%  { transform: rotate(0deg) translate(0, 0); stroke: var(--baob-red); }
  70%  { transform: rotate(0deg) translate(0, 0); stroke: var(--baob-red); }
  100% { transform: rotate(0deg) translate(0, 0); stroke: #15A34A; }
}
@keyframes heroLockBodyColor {
  0%, 70% { fill: var(--baob-red); }
  100%    { fill: #15A34A; }
}
@keyframes heroTrendDraw {
  from { stroke-dashoffset: 122; }
  to   { stroke-dashoffset: 0; }
}
@keyframes heroTrendFillIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes heroTrendDotIn {
  0%   { opacity: 0; transform: scale(0); }
  70%  { opacity: 1; transform: scale(1.4); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes compareUpsellScroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
@keyframes compareFlash {
  0%   { opacity: 1; transform: translate(var(--ox, 0px), var(--oy, 0px)) scale(.2); }
  40%  { opacity: .95; transform: translate(var(--ox, 0px), var(--oy, 0px)) scale(3.2); }
  100% { opacity: 0; transform: translate(var(--ox, 0px), var(--oy, 0px)) scale(4.2); }
}
@keyframes compareFirework {
  0%   { opacity: 1; transform: translate(var(--ox, 0px), var(--oy, 0px)) rotate(var(--a, 0deg)) scale(calc(.6 * var(--s, 1)), .2); }
  18%  { opacity: 1; transform: translate(calc(var(--ox, 0px) + var(--x) * .35), calc(var(--oy, 0px) + var(--y) * .35)) rotate(var(--a, 0deg)) scale(var(--s, 1), calc(2.2 * var(--s, 1))); }
  65%  { opacity: 1; transform: translate(calc(var(--ox, 0px) + var(--x)), calc(var(--oy, 0px) + var(--y))) rotate(var(--a, 0deg)) scale(var(--s, 1), calc(1.3 * var(--s, 1))); }
  100% { opacity: 0; transform: translate(calc(var(--ox, 0px) + var(--x)), calc(var(--oy, 0px) + var(--y) + 22px)) rotate(var(--a, 0deg)) scale(calc(.35 * var(--s, 1))); }
}
@keyframes compareTwinkle {
  0%   { opacity: 0; transform: translate(var(--x), var(--y)) scale(0) rotate(0deg); }
  35%  { opacity: 1; transform: translate(var(--x), var(--y)) scale(1.15) rotate(45deg); }
  60%  { opacity: 1; transform: translate(var(--x), var(--y)) scale(.7) rotate(70deg); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0) rotate(90deg); }
}
@keyframes baob-card-spin { to { --baob-card-angle: 360deg; } }
@keyframes demoBlink { 50% { opacity: 0; } }
@keyframes wd-cap-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Overrides for living inside this site (hand-edited from here on)
   ========================================================================== */

/* SPACING RULE (Jef): the gap above a heading must equal the gap below the last element of the
   section before it. Every section therefore uses ONE value for top and bottom padding, and the
   first heading of a section carries no margin of its own. */
.home-new { --home-gap: clamp(56px, 6vw, 96px); }
.home-new > section[class] { padding-top: var(--home-gap); padding-bottom: var(--home-gap); }
.home-new section h2 { margin-top: 0; }
.home-new > section > .wrap > :last-child { margin-bottom: 0; }

/* the site-wide list / quote styles must not leak into the ported sections */
.home-new ul, .home-new ol { margin: 0; padding: 0; }
.home-new .mark-list { margin: 16px 0; padding: 0; list-style: none; }
.home-new .mark-list li { padding-left: 28px; margin-left: 0; }
.home-new blockquote { margin: 0; padding: 0; border: 0; font-style: normal; background: none; }
.home-new .tcard blockquote { font-weight: 700; color: var(--baob-black); }  /* 24px / 1.15 / 700, as on the BAOB site; the 500 here was a leftover from the quote-reset block */
.home-new a { text-underline-offset: 3px; }
.home-new p a, .home-new li a { border-bottom: 0; }

/* headings inside the ported blocks carry no top margin of their own (the site-wide
   h2/h3 { margin-top: 1.5em } leaked in and pushed every card/step heading down) */
.home-new h1, .home-new h2, .home-new h3, .home-new h4 { margin-top: 0; }
.home-new .card > :first-child, .home-new .howto-step > :first-child, .home-new .tcard-body > :first-child { margin-top: 0; }
.home-new .card .mark-list { margin-bottom: 0; }

/* ---- Home hero: the BAOB footer CTA band (colony field) ---- */
.home-new > section.cta-hero { position: relative; overflow: hidden; background: var(--baob-near-black); color: #fff; text-align: center; padding: 120px 0 104px; }
.home-new .cta-hero .colony-field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.home-new .cta-hero > .wrap { position: relative; z-index: 1; }
.home-new .cta-hero h1 { max-width: 760px; margin: 0 auto 18px; font-size: clamp(40px, 5vw, 64px); font-weight: 500; line-height: 1.1; color: #fff; text-wrap: balance; }
.home-new .cta-hero p { font-size: 22px; color: rgba(255, 255, 255, 0.82); max-width: 48ch; margin: 0 auto 40px; }
.home-new .cta-hero .btn { --baob-button-edge: var(--baob-white); --baob-button-bg-hover: var(--baob-charcoal); margin-bottom: 4px; }
/* hero buttons: Get Website Help (orbit) + Hire a Fractional CMO (outline on dark: border turns white on hover) */
.home-new .cta-hero .cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 16px; }
.home-new .cta-hero .cta-actions .btn { margin: 0; }
.home-new .cta-hero .cta-actions .btn.btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .28); font-weight: 600; transition: border-color .45s cubic-bezier(.45, 0, .55, 1); }
.home-new .cta-hero .cta-actions .btn.btn--ghost:is(:hover, :focus-visible) { background: transparent; color: #fff; border-color: #fff; }
@media (max-width: 520px) { .home-new .cta-hero .cta-actions { flex-direction: column; align-items: center; } .home-new .cta-hero .cta-actions .btn { width: 100%; max-width: 300px; } }
@media (max-width: 760px) { .home-new > section.cta-hero { padding: 132px 0 72px; } .home-new .cta-hero p { font-size: 16px; } }
.home-new > section.cta-hero { padding: 112px 0; }  /* the Underglow Orbit button has no 4px edge, so top and bottom are simply equal */
@media (max-width: 760px) { .home-new > section.cta-hero { padding: 120px 0 68px; } }

/* footnote under the three "easy as" steps */
.home-new .fn-mark { color: var(--baob-red); font-weight: 700; }
.home-new .howto .howto-footnote { margin: 40px auto 0; text-align: center; font-size: 15px; color: var(--baob-gray-550); }

/* EDGES: one corner radius for every card on the page, the same 6px as the photo cards
   on /contact/ (Jef: keep the edges consistent). */
.home-new { --edge: 6px; }
.home-new .card, .home-new .tcard, .home-new .howto-demo, .home-new .howto-demo .demo-window,
.home-new .compare-hover-img { border-radius: var(--edge); }
.home-new .howto .howto-footnote { font-size: 12px; line-height: 1.5; color: var(--baob-gray-550); margin-top: 32px; }   /* micro text, same as the link-hub micro line */
/* must out-rank ".home-new .filler-section > .wrap > p" (17px), which beat the rule above */
.home-new .filler-section.howto > .wrap > p.howto-footnote { font-size: 12px; line-height: 1.5; color: var(--baob-gray-550); margin: 32px auto 0; }   /* was #999 (about 2.6:1 on the panel), now about 7:1 */

/* ---- mobile review fixes (2026-10-01) ---- */
/* line breaks that only exist on phones */
.home-new .m-br { display: none; }
@media (max-width: 620px) { .home-new .m-br { display: inline; } }

/* "fire truck": the red underline sits under the dimmed "iretr" only, and hovering the
   word shows the same dark tooltip as "Steve's not real" */
.home-new .firetruck { position: relative; text-decoration: none; cursor: help; }
.home-new .firetruck .dim { text-decoration: underline; text-decoration-color: var(--baob-red); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.home-new .firetruck::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 9px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 10px; border-radius: 6px; white-space: nowrap;
  background: var(--baob-charcoal); color: var(--baob-white);
  font: 600 13px/1.3 var(--baob-font); font-style: normal; text-decoration: none; letter-spacing: 0;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.home-new .firetruck::before {
  content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%;
  border: 5px solid transparent; border-top-color: var(--baob-charcoal);
  transform: translateX(-50%) translateY(4px);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.home-new .firetruck:hover::after, .home-new .firetruck:hover::before { opacity: 1; transform: translateX(-50%); }

/* "easy as" steps on tablet/phone: one column, so drop the 4-row subgrid (its row gap was
   being added between the number, heading, copy and demo inside every step) and space
   the STEPS apart instead */
@media (max-width: 900px) {
  .home-new .howto-steps { grid-template-rows: none; row-gap: 64px; }
  .home-new .howto-step { display: block; grid-row: auto; }
  .home-new .howto-num { margin: 0 auto 14px; }
  .home-new .howto-step h3 { margin: 0 0 6px; }
  .home-new .howto-demo { margin-top: 20px; }
}
/* the form demo's three stages are stacked absolutely, so on phones the window had no
   height left at all (collapsed to its title bar). Give all three demo windows one height. */
@media (max-width: 620px) {
  .home-new .howto-demo .demo-window { min-height: 440px; }
}
/* compare cards: the lead line introduces its list, so it sits close to it (12px) and
   further from the heading (20px); before, the list was 26px away and read as detached */
.home-new .card .compare-lead { margin: 10px 0 0; }   /* + the heading's 10px = 20px */
.home-new .card .mark-list { margin: 12px 0 0; }

/* Optical spacing (Jef, 2026-10-01): a serif heading carries ~0.25em of empty
   font space above its capitals, so a section whose box gaps were equal still
   LOOKED taller on top. Trim it: the heading's top edge is now the cap top. */
.home-new > section h2 { text-box: trim-start cap alphabetic; }

/* hero: a quiet second route for the copywriting side of the tagline */
.home-new .cta-hero p.cta-lede { max-width: 52ch; line-height: 1.55; text-wrap: pretty; }
/* phones: Jef's exact line breaks for the hero H1 and lede (br.br-m only shows here). The longest lede line,
   "personality and — God willing — more sales.", is ~21.2em wide, so the lede shrinks just enough on narrow
   phones to keep it on one line (16px wherever it already fits; 56px = the hero's side padding on phones). */
/* "God willing" cycles through languages (theme.js initGodWilling). The slot keeps the English width so the lede never
   reflows; longer phrases are scaled down to fit. .gw-sr keeps "God willing" for screen readers. */
.home-new .cta-hero .gw { display: inline-block; white-space: nowrap; text-align: center; line-height: 1.2; color: #fff; font-style: italic; }
/* italic only where the script has a real italic; Arabic, Hebrew, Chinese and Japanese would only be fake-slanted */
.home-new .cta-hero .gw-t:is(:lang(ar), :lang(he), :lang(zh), :lang(ja)) { font-style: normal; }
.home-new .cta-hero .gw-t { display: inline-block; white-space: nowrap; }
.home-new .cta-hero .gw-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.home-new .cta-hero .br-m { display: none; }
/* desktop/tablet H1 breaks (br.br-d): "I help humans like you / build websites with AI / that sell like hell" */
@media (max-width: 520px) { .home-new .cta-hero .br-d { display: none; } }
@media (max-width: 520px) {
  .home-new .cta-hero .br-m { display: inline; }
  .home-new .cta-hero h1, .home-new .cta-hero p.cta-lede { text-wrap: wrap; }
  .home-new .cta-hero p.cta-lede { font-size: min(16px, calc((100vw - 56px) / 21.2)); }
  /* H1 longest phone line "with AI that’ll help" is ~8.25em: shrink just enough on phones under ~390px to keep it whole */
  .home-new .cta-hero h1 { font-size: min(40px, calc((100vw - 56px) / 8.3)); }
}
.home-new .cta-hero p.cta-lede a { color: #fff; text-decoration: underline; text-decoration-color: var(--baob-yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.home-new .cta-hero p.cta-lede a:hover { text-decoration-color: #fff; }
/* (:where keeps these at 0,1,2: enough to beat the global p a:hover, never enough to beat a card rule like .home-new .card)
   the site-wide "p a / li a" hover (yellow fill + yellow 2px border) never belongs on the ported home sections:
   on the dark hero it painted a solid block behind "hire me as a freelance copywriter" */
.home-new p a, .home-new li a,
.home-new p a:where(:hover, :focus-visible), .home-new li a:where(:hover, :focus-visible) { padding-bottom: 0; border-bottom: 0; background-image: none; background-size: 0 0; }
.home-new .cta-hero p.cta-lede a { transition: color .2s ease, text-decoration-color .2s ease; }
.home-new .cta-hero p.cta-lede a:hover, .home-new .cta-hero p.cta-lede a:focus-visible { color: var(--baob-yellow); text-decoration-color: var(--baob-yellow); }