/* Machine-generated by build/split-css.mjs from extracted.css — do not hand-edit. */
.x0.x0{min-height: 100dvh; background: rgb(253, 253, 251); color: rgb(16, 21, 18); font-family: "Albert Sans", system-ui, sans-serif; position: relative; overflow-x: clip; box-sizing: border-box; display: flex; flex-direction: column;}
.x3.x3{position: absolute; inset: 0px;}
.x12.x12{position: relative; margin: clamp(12px, 2vw, 18px) 0px 0px; font-size: clamp(32px, 6.4vw, 64px); font-weight: 650; letter-spacing: -0.04em; line-height: 1.06; text-wrap: balance; animation: 600ms cubic-bezier(0.22, 1, 0.36, 1) 80ms 1 normal both running nfRise;}
.x30.x30{position: fixed; left: 0px; right: 0px; bottom: 0px; z-index: 0; height: 46vh; background: linear-gradient(rgb(243, 239, 249) 0%, rgb(227, 217, 241) 52%, rgb(201, 182, 228) 100%); display: flex; align-items: center; justify-content: center; overflow: hidden;}
.x31.x31{position: absolute; inset: 0px; opacity: 0.5; transform: scaleY(-1); pointer-events: none;}
.x32.x32{position: relative; font-family: Outfit, sans-serif; font-weight: 700; font-size: min(30vw, 40vh); line-height: 0.8; letter-spacing: -0.04em; white-space: nowrap; color: rgb(251, 250, 243); user-select: none;}
.x33.x33{position: relative; z-index: 1; margin-bottom: 46vh; min-height: 100vh; background: rgb(253, 253, 251); color: rgb(16, 21, 18); font-family: "Albert Sans", system-ui, sans-serif; overflow-x: clip; box-shadow: rgba(16, 21, 18, 0.25) 0px 30px 60px -20px; border-radius: 0px 0px 24px 24px;}
.x34.x34{display: flex; align-items: center; justify-content: space-between; max-width: 1220px; margin: 0px auto; padding: 18px clamp(18px, 5vw, 32px); box-sizing: border-box;}
.x35.x35{display: inline-flex; align-items: center; gap: 4px; min-height: 44px;}
.x36.x36{height: clamp(30px, 8vw, 38px); width: auto; display: block; margin-top: -3px;}
.x37.x37{font-family: Outfit, sans-serif; font-weight: 700; font-size: clamp(24px, 6.4vw, 30px); letter-spacing: -0.04em; color: rgb(20, 18, 26); line-height: 1;}
.x40.x40{font-size: clamp(14px, 3.8vw, 15px); font-weight: 600; color: rgb(253, 253, 251); background: rgb(16, 21, 18); padding: 13px clamp(18px, 5vw, 26px); border-radius: 999px; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center;}
.x41.x41{max-width: 720px; margin: 0px auto; padding: 48px clamp(18px, 5vw, 32px) 0px; box-sizing: border-box;}
.x42.x42{font-size: clamp(34px, 4.4vw, 52px); font-weight: 650; letter-spacing: -0.04em; line-height: 1.06; margin: 18px 0px 0px; text-wrap: balance;}
.x43.x43{font-size: 18px; line-height: 1.7; color: rgb(90, 101, 96); margin: 24px 0px 0px; text-wrap: pretty;}
.x44.x44{font-size: 26px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.15; margin: 52px 0px 0px;}
.x45.x45{font-size: 16.5px; line-height: 1.7; color: rgb(58, 66, 61); margin: 16px 0px 0px; text-wrap: pretty;}
.x54.x54{margin: 64px 0px 0px; background: rgb(245, 245, 242); border: 1px solid rgb(228, 228, 224); border-radius: 16px; padding: 36px 36px 40px; text-align: center;}
.x55.x55{font-size: clamp(24px, 2.6vw, 32px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.12; margin: 0px; text-wrap: balance;}
.x56.x56{font-size: 16.5px; line-height: 1.7; color: rgb(90, 101, 96); margin: 14px auto 0px; max-width: 52ch; text-wrap: pretty;}
.x57.x57{display: inline-block; margin-top: 24px; background: rgb(72, 48, 106); color: rgb(253, 253, 251); border-radius: 10px; padding: 15px 30px; font-size: 15.5px; font-weight: 700;}
.x59.x59{max-width: 1120px; margin: 0px auto; padding: clamp(90px, 11vh, 120px) clamp(18px, 5vw, 32px) 0px; display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 90px); align-items: flex-start; justify-content: center;}
.x60.x60{display: flex; gap: clamp(36px, 4vw, 64px); flex-wrap: wrap; justify-content: center;}
.x61.x61{display: flex; flex-direction: column; gap: 2px;}
.x62.x62{font-size: 13.5px; color: rgb(105, 114, 109); margin-bottom: 3px;}
.x63.x63{font-size: clamp(13px, 3.4vw, 15px); color: rgb(16, 21, 18); align-self: flex-start; padding: 12px 0px; min-height: 44px; display: flex; align-items: center; line-height: 1.3;}
.x64.x64{display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: clamp(26px, 4.5vh, 44px); padding: 0px 36px;}
.x65.x65{height: 26px; width: auto;}
.x66.x66{font-family: "JetBrains Mono", monospace; font-size: 12.5px; line-height: 1.7; color: rgb(90, 101, 96); text-align: center;}
.x82.x82{font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(105, 114, 109); display: flex; gap: 14px; align-items: center; flex-wrap: wrap;}
.x83.x83{color: rgb(105, 114, 109);}
.x84.x84{color: rgb(72, 48, 106); font-weight: 600; text-decoration: underline rgba(72, 48, 106, 0.35); text-underline-offset: 3px;}
.x85.x85{margin: 20px 0px 0px; border: 1px solid rgb(230, 230, 228); border-radius: 12px; overflow-x: auto;}
.x86.x86{margin: 22px 0px 0px; overflow-x: auto;}
.x87.x87{width: 100%; min-width: 540px; border-collapse: collapse;}
.x88.x88{text-align: left; padding: 12px 16px; background: rgb(245, 245, 242); border-bottom: 1px solid rgb(230, 230, 228); font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(105, 114, 109);}
.x89.x89{padding: 13px 16px; font-size: 14.5px; line-height: 1.5; color: rgb(58, 66, 61); border-bottom: 1px solid rgb(240, 240, 238);}
.x90.x90{padding: 13px 16px; font-size: 14.5px; line-height: 1.5; color: rgb(58, 66, 61);}
.x91.x91{margin: 14px 0px 0px; padding-left: 22px; display: flex; flex-direction: column; gap: 10px;}
.x92.x92{font-size: 16.5px; line-height: 1.7; color: rgb(58, 66, 61);}
.x103.x103{position: relative; border-top: 1px solid rgb(236, 237, 233); z-index: 1; padding-bottom: clamp(30px, 4.5vh, 48px); background: rgb(253, 253, 251);}
.x150.x150{position: relative; flex: 1.35 1 300px; min-width: 0px; height: 330px; border-radius: 10px; overflow: hidden; background: rgb(243, 243, 237); border: 1px solid rgb(230, 231, 223);}
.x696.x696{position: absolute; left: 33.5%; top: 48.8%; width: 24px; height: 24px; margin: -11.25px 0px 0px -11.25px; border-radius: 999px; border: 2px solid rgb(16, 21, 18); box-shadow: rgba(16, 21, 18, 0.08) 0px 0px 0px 4px; transition: left 1200ms cubic-bezier(0.4, 0, 0.2, 1), top 1200ms cubic-bezier(0.4, 0, 0.2, 1);}
.x721.x721{flex: 1 1 420px; min-width: 300px; font-size: clamp(27px, 6.4vw, 52px); font-weight: 650; letter-spacing: -0.04em; line-height: 1.06; margin: 0px; text-wrap: balance; opacity: 0; transform: translateY(28px); filter: blur(8px); transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1), filter 900ms cubic-bezier(0.22, 1, 0.36, 1);}
.x723.x723{flex: 1 1 380px; min-width: 300px; font-size: 17px; line-height: 1.6; color: rgb(90, 101, 96); margin: 6px 0px 0px; text-wrap: pretty; opacity: 0; transform: translateY(28px); filter: blur(8px); transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) 220ms, transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 220ms, filter 900ms cubic-bezier(0.22, 1, 0.36, 1) 220ms;}
.x725.x725{flex: 1 1 380px; min-width: 300px; border-top: 1px solid rgb(216, 218, 211); padding-top: 32px; opacity: 0; transform: translateY(36px); filter: blur(8px); transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) 460ms, transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 460ms, filter 900ms cubic-bezier(0.22, 1, 0.36, 1) 460ms;}
.x729.x729{flex: 1 1 380px; min-width: 300px; border-top: 1px solid rgb(216, 218, 211); padding-top: 32px; opacity: 0; transform: translateY(36px); filter: blur(8px); transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) 680ms, transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 680ms, filter 900ms cubic-bezier(0.22, 1, 0.36, 1) 680ms;}
.x731.x731{font-size: clamp(21px, 5.2vw, 34px); font-weight: 650; letter-spacing: -0.035em; line-height: 1.1; margin: 0px 0px clamp(36px, 7vw, 56px); text-align: center; opacity: 0; transform: translateY(28px); filter: blur(8px); transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1), filter 900ms cubic-bezier(0.22, 1, 0.36, 1);}
.x733.x733{display: flex; flex-direction: column; gap: 14px; border-left: 1px solid rgb(216, 218, 211); padding-left: 24px; opacity: 0; transform: translateY(36px); filter: blur(8px); transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) 240ms, transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 240ms, filter 900ms cubic-bezier(0.22, 1, 0.36, 1) 240ms, border-color 250ms, background 250ms, box-shadow 250ms, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);}
.x737.x737{display: flex; flex-direction: column; gap: 14px; border-left: 1px solid rgb(216, 218, 211); padding-left: 24px; opacity: 0; transform: translateY(36px); filter: blur(8px); transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) 440ms, transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 440ms, filter 900ms cubic-bezier(0.22, 1, 0.36, 1) 440ms, border-color 250ms, background 250ms, box-shadow 250ms, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);}
.x738.x738{display: flex; flex-direction: column; gap: 14px; border-left: 1px solid rgb(216, 218, 211); padding-left: 24px; opacity: 0; transform: translateY(36px); filter: blur(8px); transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) 640ms, transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 640ms, filter 900ms cubic-bezier(0.22, 1, 0.36, 1) 640ms, border-color 250ms, background 250ms, box-shadow 250ms, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);}
.x741.x741{font-size: clamp(26px, 6.2vw, 48px); font-weight: 650; letter-spacing: -0.04em; line-height: 1.08; margin: 18px 0px 0px; text-wrap: balance; opacity: 0; transform: translateY(26px); transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) 150ms, transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 150ms;}
.x742.x742{font-size: 17px; line-height: 1.6; color: rgb(90, 101, 96); margin: 22px auto 0px; max-width: 58ch; text-wrap: pretty; opacity: 0; transform: translateY(26px); transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) 300ms, transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 300ms;}
.x744.x744{flex: 0 1 auto; scroll-snap-align: start; min-width: 0px; box-sizing: border-box; margin-top: clamp(44px, 9vw, 88px); position: relative; opacity: 0; transform: translateY(36px); transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1);}
.x792.x792{flex: 0 1 auto; scroll-snap-align: start; min-width: 0px; box-sizing: border-box; margin-top: clamp(76px, 13vw, 136px); position: relative; opacity: 0; transform: translateY(36px); transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1);}
.x872.x872{display: flex; justify-content: center; margin-top: 44px; opacity: 0; transform: translateY(18px); transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1), transform 500ms cubic-bezier(0.22, 1, 0.36, 1);}
.x887.x887{max-width: 880px; margin: clamp(26px, 6vw, 44px) auto 0px; border-top: 1px solid rgb(226, 227, 221);}
.x888.x888{border-bottom: 1px solid rgb(226, 227, 221);}
.x889.x889{width: 100%; display: flex; align-items: center; gap: clamp(12px, 3vw, 20px); padding: clamp(16px, 4vw, 26px) 4px; background: transparent; border: 0px; cursor: pointer; text-align: left; font-family: "Albert Sans", sans-serif; font-size: clamp(15.5px, 4vw, 19px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.35; color: rgb(16, 21, 18); transition: color 220ms;}
.x890.x890{flex: 1 1 0%;}
.x891.x891{width: clamp(26px, 7vw, 34px); height: clamp(26px, 7vw, 34px); flex: 0 0 auto; border-radius: 999px; background: rgb(240, 241, 239); color: rgb(16, 21, 18); display: flex; align-items: center; justify-content: center; transform: rotate(0deg); transition: transform 460ms cubic-bezier(0.34, 1.4, 0.4, 1), background 300ms, color 300ms;}
.x892.x892{overflow: hidden;}
.x893.x893{padding: 0px clamp(4px, 8vw, 60px) clamp(20px, 5vw, 30px) 4px; opacity: 0; filter: blur(3px); transform: translateY(6px); transition: opacity 380ms 130ms, filter 380ms 130ms, transform 380ms 130ms;}
.x894.x894{font-size: clamp(14.5px, 3.8vw, 16px); line-height: 1.65; color: rgb(90, 101, 96); margin: 0px; text-align: left;}
.x992.x992{position: relative; flex: 1.35 1 0px; min-width: 0px; height: 158px; border-radius: 8px; background: rgb(243, 243, 237); border: 1px solid rgb(230, 231, 223); overflow: hidden;}
.x1019.x1019{position: absolute; left: 33.5%; top: 48.8%; width: 22px; height: 22px; margin: -10.75px 0px 0px -10.75px; border-radius: 999px; border: 2px solid rgb(16, 21, 18); box-shadow: rgba(16, 21, 18, 0.08) 0px 0px 0px 4px; transition: left 1200ms cubic-bezier(0.4, 0, 0.2, 1), top 1200ms cubic-bezier(0.4, 0, 0.2, 1);}
.x1108.x1108{width: 26px; height: 26px; flex: 0 0 auto; border-radius: 999px; border: 1px solid rgb(201, 207, 200); display: flex; align-items: center; justify-content: center; font-size: 13px; color: rgb(90, 101, 96); transform: rotate(0deg); transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);}
/* ---- Phase 4: responsive merge ------------------------------------------- */
/* Layout gating for merged twin documents: the desktop tree renders >=760px,
   the mobile tree below it. Never edit the .xN rules above — override instead. */
@media (max-width: 759.98px) { .only-desktop { display: none !important; } }
/* Exact complement of (min-width: 760px): closes the 0.02px band the max-width
   fallback above leaves open at fractional zoom widths. Browsers without range
   syntax ignore this rule and keep the fallback. */
@media (width < 760px) { .only-desktop { display: none !important; } }
@media (min-width: 760px) { .only-mobile { display: none !important; } }

/* /about/ is a single unified tree (the twins shared markup and classes).
   These scoped overrides reproduce the mobile twin's seven divergent classes
   below the breakpoint; declarations copied from the .x95x mobile rules. */
@media (max-width: 759.98px) {
  /* About's own mobile logo/wordmark sizes were dropped 2026-08-21 so its nav matches
     the home page like every other sub-page; its content overrides below stay. */
  [data-sc-name="About"] .x41.x41 { padding: 36px 20px 0px; }
  [data-sc-name="About"] .x42.x42 { font-size: clamp(30px, 8.4vw, 37px); }
  [data-sc-name="About"] .x43.x43 { font-size: 17px; margin: 20px 0px 0px; }
  [data-sc-name="About"] .x44.x44 { font-size: 23px; line-height: 1.18; margin: 44px 0px 0px; }
  [data-sc-name="About"] .x54.x54 { padding: 30px 22px 34px; }
}

/* Reduced motion: resolve every CSS keyframe animation instantly to its settled
   end state, site-wide (this sheet is linked by all 18 pages). Every keyframe
   family in src (fadeUp, mRise, mPop, dotPop, fnRise, tyRise, tyPop, nfRise,
   mPulse, pinPulse) ends at the element's base values, so completing instantly
   is the settled layout — not animation:none, which would strand nothing here
   but is brittle against future forwards-fill keyframes.
   - animation-delay 0: a both-fill entry otherwise holds its invisible
     from-state through up to 1.4s of stagger delay (tyRise).
   - iteration-count 1: the two infinite decorative pulses (mPulse, pinPulse)
     finish and leave their static base ring instead of strobing at 1ms.
   Interaction transitions are untouched; the JS interactions (enhance.js,
   aurora-bg.js) carry their own reduced-motion guards. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
}

/* Phase 8: skip below-fold mobile-tree layout/paint until approached.
   Mobile-only by media gate; desktop tree untouched (scroll-scrub safe).
   --cis values are the real content-box heights measured at 390px; with
   contain-intrinsic-size:auto the browser replaces them with the exact
   remembered size after first render. */
@media (max-width: 759.98px) {
  .cvm { content-visibility: auto; contain-intrinsic-size: auto var(--cis); }
}

/* Sequential checklists use <ol> for semantics (HowTo schema mirrors them);
   the design's marker stays the bullet, so the rendering is unchanged. */
ol.taro-seq { list-style: disc; }

/* Desktop homepage hero: copy left, catchment diagram right.
   .only-desktop prefix beats the generated .xN.xN rules in the
   media-gated desktop stylesheet (same doubled class, later file). */
@media (min-width: 760px) {
  .only-desktop .x127.x127 {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    gap: clamp(28px, 4vw, 56px);
    max-width: 1220px;
    /* Hero owns the whole first screen. */
    min-height: calc(100svh - 81px);
    padding-top: 24px;
    padding-bottom: 48px;
  }
  .only-desktop .x128.x128 {
    align-items: flex-start;
    text-align: left;
    flex: 1 1 320px;
    max-width: 520px;
  }
  .only-desktop .x129.x129 {
    font-size: clamp(36px, 4.6vw, 64px);
    margin-bottom: 18px;
    text-wrap: pretty;
  }
  .only-desktop .x130.x130 {
    align-self: stretch;
    font-size: 17.5px;
    max-width: 44ch;
  }
  .only-desktop .x131.x131 {
    justify-content: flex-start;
  }
  .only-desktop .x136.x136 {
    flex: 1 1 420px;
    width: auto;
    min-width: 0;
    max-width: 680px;
    justify-content: flex-end;
  }
  .only-desktop .x137.x137 {
    width: 100%;
    min-height: 0;
  }
  .only-desktop .x142.x142 {
    width: 100%;
  }
  .only-desktop .x127 .x709.x709 {
    left: 12px;
  }
  .only-desktop .x127 .x715.x715 {
    left: auto;
    right: 16px;
  }
}

@media (min-width: 1080px) {
  .only-desktop .x127.x127 {
    flex-wrap: nowrap;
  }
}

/* Scanner ring: short travel so a 480ms walk can actually arrive. */
.only-desktop .x696.x696,
.only-desktop .taro-scan,
.only-mobile .x1019.x1019 {
  z-index: 6;
  box-shadow: 0 0 0 5px rgba(16, 21, 18, 0.14), 0 0 0 10px rgba(16, 21, 18, 0.06);
  transition: left 360ms cubic-bezier(0.4, 0, 0.2, 1), top 360ms cubic-bezier(0.4, 0, 0.2, 1);
  animation: pinPulse 1.8s ease-out infinite;
}

/* Founder: vertically centre copy with the photo. */
.only-desktop .x876.x876 { align-items: center; }

/* Last method step: heading sits with the copy, not floating above the mock. */
.only-desktop #how4 .x794.x794 {
  text-align: left;
  margin: 0 0 16px;
  max-width: none;
}
.only-desktop #how4 .x787.x787 { max-width: 420px; }

/* Full-bleed scrolling bar (desktop under hero, mobile under the map).
   Borderless — floats on the page background. --tgap drives the item gap,
   the seq gap and the fallback keyframe together. */
/* Static pinned label; solid block fading right so items dissolve under it.
   padding-left mirrors the hero gutter: centred 1220px column + clamp inset. */




/* “Is this legal?” — original Taro copy, three-card layout. */
.taro-legal {
  padding: clamp(64px, 10vw, 96px) clamp(18px, 5vw, 32px);
  position: relative;
  z-index: 1;
}
.taro-legal__grid { max-width: 1120px; margin-left: auto; margin-right: auto; }
.taro-legal__intro { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.taro-legal__h {
  font-size: clamp(26px, 5.4vw, 40px);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.12;
  margin: 0;
  color: rgb(16, 21, 18);
  text-wrap: balance;
}
.taro-legal__lead {
  font-size: 17px;
  line-height: 1.6;
  color: rgb(90, 101, 96);
  margin: 16px 0 0;
  text-wrap: pretty;
}
.taro-legal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.taro-legal__card {
  background: rgb(253, 253, 251);
  border: 1px solid rgb(231, 231, 227);
  border-radius: 16px;
  padding: 22px 22px 24px;
  box-shadow: 0 1px 2px rgba(16, 21, 18, 0.04);
}
.taro-legal__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(72, 48, 106, 0.08);
  color: rgb(72, 48, 106);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.taro-legal__title {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 0;
  color: rgb(16, 21, 18);
}
.taro-legal__body {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgb(90, 101, 96);
  margin: 10px 0 0;
  text-wrap: pretty;
}
.taro-legal__foot {
  text-align: center;
  font-size: 13px;
  color: rgb(139, 149, 140);
  margin: 28px 0 0;
}
@media (max-width: 759.98px) {
  .taro-legal__grid { grid-template-columns: 1fr; }
  .taro-legal { padding: 48px 20px 56px; }
}

/* Map dots start hidden; enhance.js pops them as catchment ramps.
   Animation:none beats the prerendered fill-mode:both (which would
   otherwise hold opacity 1 after the one-shot dotPop). */
.only-desktop .x150 :is(.x662.x662,.x663.x663,.x664.x664,.x665.x665,.x666.x666,.x667.x667,.x668.x668,.x669.x669,.x670.x670,.x671.x671,.x672.x672,.x673.x673,.x674.x674,.x675.x675,.x676.x676,.x677.x677,.x678.x678,.x679.x679,.x680.x680,.x681.x681,.x682.x682,.x683.x683,.x684.x684,.x685.x685,.x686.x686,.x687.x687,.x688.x688,.x689.x689,.x690.x690,.x691.x691,.x692.x692,.x693.x693,.x694.x694),
.only-mobile .x992 :is(.x994.x994,.x995.x995,.x996.x996,.x997.x997,.x998.x998,.x999.x999,.x1000.x1000,.x1001.x1001,.x1002.x1002,.x1003.x1003,.x1004.x1004,.x1005.x1005,.x1006.x1006,.x1007.x1007,.x1008.x1008,.x1009.x1009,.x1010.x1010,.x1011.x1011,.x1012.x1012,.x1013.x1013,.x1014.x1014,.x1015.x1015,.x1016.x1016,.x1017.x1017) {
  animation: none;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .only-desktop .x150 :is(.x662.x662,.x663.x663,.x664.x664,.x665.x665,.x666.x666,.x667.x667,.x668.x668,.x669.x669,.x670.x670,.x671.x671,.x672.x672,.x673.x673,.x674.x674,.x675.x675,.x676.x676,.x677.x677,.x678.x678,.x679.x679,.x680.x680,.x681.x681,.x682.x682,.x683.x683,.x684.x684,.x685.x685,.x686.x686,.x687.x687,.x688.x688,.x689.x689,.x690.x690,.x691.x691,.x692.x692,.x693.x693,.x694.x694),
  .only-mobile .x992 :is(.x994.x994,.x995.x995,.x996.x996,.x997.x997,.x998.x998,.x999.x999,.x1000.x1000,.x1001.x1001,.x1002.x1002,.x1003.x1003,.x1004.x1004,.x1005.x1005,.x1006.x1006,.x1007.x1007,.x1008.x1008,.x1009.x1009,.x1010.x1010,.x1011.x1011,.x1012.x1012,.x1013.x1013,.x1014.x1014,.x1015.x1015,.x1016.x1016,.x1017.x1017) {
    opacity: 1;
  }
}

/* First-section scroll reveals: less travel, less blur, longer ease.
   Stagger delays dropped so boxes don't sit hidden then snap. */
.only-desktop .x721.x721,
.only-desktop .x723.x723,
.only-desktop .x725.x725,
.only-desktop .x729.x729,
.only-desktop .x731.x731,
.only-desktop .x733.x733,
.only-desktop .x737.x737,
.only-desktop .x738.x738 {
  transform: translateY(14px);
  filter: blur(2px);
  transition: opacity 1.35s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.35s cubic-bezier(0.22, 1, 0.36, 1),
              filter 1.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 250ms, background 250ms, box-shadow 250ms;
}

/* The comparison heading's "once" now matches the rest of the heading; the
   span stays in the markup as a styling hook. */
.taro-hgrey { color: inherit; }

/* Polish pass: the closing book-a-call section goes dark, kin to the funnel's
   #0B0A0F 'lights-off' close but warmed with the site's #48306A purple — a
   deep aubergine. Scoped to the homepage sections (#book / #book-m) so the
   /book/ page and the shared .xN rules are untouched. Text flips to the
   site's paper tone; muted copy uses a lavender-grey (#B9AECB, ~8.7:1 on
   #1A1026). The scheduler placeholder becomes a translucent panel and the
   purple underline accent lightens so it survives the dark ground. */
#book, #book-m { background: #1A1026; border-top-color: #2A1A3E; }
#book .x898, #book-m .x1113 { color: #FDFDFB; }
#book .x899, #book-m .x1074 { color: #B9AECB; }
#book .x78, #book-m .x965 { color: #B9AECB; }
/* Was a translucent panel + drop shadow, so the placeholder read as a card on the
   dark ground. The real scheduler paints its own white card and centres it at
   ~810px inside whatever width we give, so the panel framed it with a band of dead
   space on every side and a shadow scaled to the container rather than the widget
   — the "shading is for a much bigger embed" report (2026-08-22). Neutralised here
   rather than deleted: these ID selectors outrank the class rules in the tail, so
   leaving them would silently re-apply the panel on the home page only. */
#book .x901, #book-m .x1115 {
  background: none;
  border-color: transparent;
  box-shadow: none;
}
#book .x72 { background: radial-gradient(rgba(120, 90, 170, 0.28), rgba(120, 90, 170, 0) 68%); }
#book-m .x1112 { background: radial-gradient(rgba(120, 90, 170, 0.28), rgba(120, 90, 170, 0) 70%); }
/* While the dark book section sits under the sticky header (body.taro-nav-dark,
   toggled by enhance.js), the black leaf/wordmark flips to the paper tone and
   the dark CTA pill gets a hairline so it separates from the dark ground. */
body.taro-nav-dark .x124, body.taro-nav-dark .x973 { color: #FDFDFB; }
body.taro-nav-dark .x123, body.taro-nav-dark .x972 { filter: invert(1); }
body.taro-nav-dark .x126, body.taro-nav-dark .x974 { box-shadow: 0 0 0 1px rgba(253, 253, 251, 0.3); }

/* Sub-page nav parity with the home page (Sam, 2026-08-21).
   The home page ships a dedicated mobile nav tree (.x970–.x974); sub-pages use one
   nav at every width, so below the breakpoint they rendered a larger logo, wordmark
   and pill than the home page did. These mirror the home mobile values exactly.
   Selectors are doubled to match the specificity of the generated rules above. */
@media (max-width: 759.98px) {
  .x34.x34 { padding: 9px 20px; }
  .x35.x35 { min-height: 40px; }
  .x36.x36 { height: 28px; margin-top: -2px; }
  .x37.x37 { font-size: 23px; }
  .x40.x40 { min-height: 52px; padding: 8px 15px; font-size: 13px; }
}

/* iClosed embed containers (2026-08-22).
   Two defects, one root: these classes were written for the placeholder mock.

   1. Chrome. The white card, dashed border, radius, purple glow and flex-centring
      were sized for a mock that filled the box. The real scheduler draws its OWN
      white card (~810px) and centres it, so ours framed it with a band of dead
      space on every side and a shadow scaled to something bigger than the widget.
      Removed — the widget is the card now.
   2. Reserved height. widget.js resizes the div after it initialises. The old
      min-heights (620/460/400) only matched the wide side-by-side layout; below
      ~900px the scheduler stacks and needs ~1011-1064px, so the page GREW by
      391-601px mid-scroll as the embed woke up. That jump is the "scroll goes
      funny" report, not smooth-scroll. Heights below are the settled values
      measured 2026-08-22 at 1440/768/390, so the resize is now a no-op.

   These are approximations tied to iClosed's current layout: if the embed is
   restyled, re-measure or the dead space comes back.

   Selectors are TRIPLED, not doubled: x901/x77 sit in the .only-desktop subtree, so
   split-css emits their generated .xN.xN rules into <page>.desktop.css, which is
   linked after the shared sheet this tail rides in. At equal specificity that file
   wins on order, so a doubled selector here silently lost above 760px. */
.x901.x901.x901, .x77.x77.x77, .x1115.x1115.x1115, .x964.x964.x964 {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  display: block; overflow: hidden; min-height: 591px;
}
@media (max-width: 899.98px) {
  .x901.x901.x901, .x77.x77.x77, .x1115.x1115.x1115, .x964.x964.x964 { min-height: 1011px; }
}
@media (max-width: 759.98px) {
  .x901.x901.x901, .x77.x77.x77, .x1115.x1115.x1115, .x964.x964.x964 { min-height: 1064px; }
}

/* Catchment map radar sweep (element injected by enhance.js). Sized to the
   dashed radius circle (.x695 56% / .x1018 58%); rotation is driven by
   enhance.js rAF so the dot pulses stay angle-synced. */
.taro-sweep {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: conic-gradient(from 290deg,
    rgba(16, 21, 18, 0) 0deg,
    rgba(16, 21, 18, 0.05) 50deg,
    rgba(16, 21, 18, 0.11) 68deg,
    rgba(16, 21, 18, 0) 70deg);
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
}
.x992 .taro-sweep { width: 58%; }
.taro-mapdot { transition: transform 200ms ease, box-shadow 200ms ease; }
.taro-mapdot.taro-hit {
  transform: scale(1.45);
  box-shadow: rgba(255, 255, 255, 0.9) 0px 0px 0px 1.5px,
    rgba(16, 21, 18, 0.22) 0px 0px 0px 3.5px;
}
@media (prefers-reduced-motion: reduce) {
  .taro-sweep { display: none; }
}

.taro-social {
  flex: 1 1 100%;
  display: flex;
  justify-content: center;
  gap: 14px;
}
.x1126 .taro-social { padding: 6px 20px 26px; }
.taro-social__box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(231, 231, 227);
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  color: rgb(16, 21, 18);
  box-shadow: 0 1px 2px rgba(16, 21, 18, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
@media (hover: hover) {
  .taro-social__box:hover {
    border-color: rgb(139, 149, 140);
    box-shadow: 0 2px 4px rgba(16, 21, 18, 0.08), 0 16px 30px -8px rgba(16, 21, 18, 0.24);
    transform: translateY(-2px);
    color: rgb(16, 21, 18);
  }
}

/* Centered primary nav (desktop) */
.x121.x121 { position: relative; }
.taro-nav-links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: clamp(20px, 2.5vw, 34px);
  z-index: 1;
}
.taro-nav-links a {
  font-size: 15px;
  font-weight: 600;
  color: rgb(90, 101, 96);
  transition: color 0.18s ease;
}
@media (hover: hover) { .taro-nav-links a:hover { color: rgb(16, 21, 18); } }
body.taro-nav-dark .taro-nav-links a { color: rgba(253, 253, 251, 0.75); }
@media (hover: hover) { body.taro-nav-dark .taro-nav-links a:hover { color: rgb(253, 253, 251); } }
@media (max-width: 1059.98px) { .taro-nav-links { display: none; } }

/* Mobile menu pill (two dashes) */
.taro-menu-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 18px;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(231, 231, 227);
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  z-index: 1001;
}
.taro-menu-btn span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: rgb(16, 21, 18);
  transition: transform 0.22s ease;
}
body.taro-nav-dark .taro-menu-btn { background: transparent; border-color: rgba(253, 253, 251, 0.3); }
body.taro-nav-dark .taro-menu-btn span { background: rgb(253, 253, 251); }
body.taro-menu-open .taro-menu-btn { background: rgb(255, 255, 255); border-color: rgb(231, 231, 227); }
body.taro-menu-open .taro-menu-btn span { background: rgb(16, 21, 18); }
body.taro-menu-open .taro-menu-btn span:first-child { transform: translateY(4px) rotate(45deg); }
body.taro-menu-open .taro-menu-btn span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Fullscreen mobile menu */
.taro-menu {
  font-family: "Albert Sans", system-ui, sans-serif;
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  background: rgb(253, 253, 251);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 28px 40px;
}
.taro-menu__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.taro-menu__links a {
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.03em;
  color: rgb(16, 21, 18);
  padding: 10px 0;
}
.taro-menu__links .taro-menu__cta {
  margin-top: 26px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  color: rgb(253, 253, 251);
  background: rgb(16, 21, 18);
  border-radius: 999px;
  padding: 16px 34px;
}
body.taro-menu-open { overflow: hidden; }

@media (min-width: 760px) { .taro-menu { display: none !important; } }

/* ---- /how-it-works/ (hand-authored operational walkthrough, one responsive
   tree). Numbered-timeline chrome only; text, tables and FAQ reuse the guide
   classes (x4x/x8x) unchanged. */
[data-sc-name="how-it-works"] .hiw-step { border-top: 1px solid rgb(231, 231, 227); margin-top: 56px; padding-top: 44px; }
[data-sc-name="how-it-works"] .hiw-num { display: block; font-family: "JetBrains Mono", monospace; font-size: clamp(30px, 7vw, 44px); line-height: 1; letter-spacing: 0.08em; color: rgb(174, 182, 175); }
[data-sc-name="how-it-works"] .hiw-num + .x44 { margin-top: 12px; }
[data-sc-name="how-it-works"] .hiw-spend { display: block; margin: 22px 0 0; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(105, 114, 109); }
[data-sc-name="how-it-works"] .x41 { padding-bottom: clamp(56px, 9vw, 88px); }

/* ---- Nav "Guides" dropdown (desktop) + expandable Guides group (mobile menu).
   Markup in src/index.html; behaviour in the NAV_JS block of build/enhance.mjs. */
.taro-dd { position: relative; }
.taro-dd__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: rgb(90, 101, 96);
  transition: color 0.18s ease;
}
.taro-dd.open .taro-dd__btn { color: rgb(16, 21, 18); }
@media (hover: hover) { .taro-dd__btn:hover { color: rgb(16, 21, 18); } }
body.taro-nav-dark .taro-dd__btn { color: rgba(253, 253, 251, 0.75); }
body.taro-nav-dark .taro-dd.open .taro-dd__btn { color: rgb(253, 253, 251); }
@media (hover: hover) { body.taro-nav-dark .taro-dd__btn:hover { color: rgb(253, 253, 251); } }
.taro-dd__chev { flex: none; transition: transform 0.18s ease; }
.taro-dd.open > .taro-dd__btn .taro-dd__chev { transform: rotate(180deg); }
.taro-dd__panel {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  padding: 8px;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(231, 231, 227);
  border-radius: 14px;
  box-shadow: 0 2px 4px rgba(16, 21, 18, 0.06), 0 16px 36px -8px rgba(16, 21, 18, 0.18);
  z-index: 40;
  text-align: left;
}
.taro-dd.open .taro-dd__panel { display: block; }
/* invisible bridge so the pointer can travel from trigger to panel without closing */
.taro-dd__panel::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.taro-dd__panel a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: rgb(90, 101, 96);
  transition: color 0.15s ease, background 0.15s ease;
}
.taro-dd__panel a:first-child { font-weight: 600; color: rgb(16, 21, 18); }
@media (hover: hover) { .taro-dd__panel a:hover { color: rgb(16, 21, 18); background: rgb(247, 247, 244); } }
/* The panel card stays white under the dark-nav state, so its links keep the
   light-surface palette even though .taro-nav-links' dark rules outrank them. */
body.taro-nav-dark .taro-dd__panel a { color: rgb(90, 101, 96); }
body.taro-nav-dark .taro-dd__panel a:first-child { color: rgb(16, 21, 18); }
@media (hover: hover) { body.taro-nav-dark .taro-dd__panel a:hover { color: rgb(16, 21, 18); } }

/* Mobile menu: scroll when the expanded Guides sublist overflows the viewport.
   margin:auto on the links keeps them centred when short but reachable from the
   top when tall (align/justify centring alone clips overflowing flex content). */
.taro-menu { overflow-y: auto; box-sizing: border-box; } /* border-box: 100vh + 120px padding otherwise overflows the viewport and clips instead of scrolling */
.taro-menu__links { margin: auto; }
.taro-menu__grp { display: flex; flex-direction: column; align-items: center; width: 100%; }
.taro-menu__grp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 10px 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.03em;
  color: rgb(16, 21, 18);
}
.taro-menu__grp-btn .taro-dd__chev { transition: transform 0.22s ease; }
.taro-menu__grp.open .taro-dd__chev { transform: rotate(180deg); }
.taro-menu__sub { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 2px 16px 10px; }
.taro-menu__sub a { font-size: 17px; font-weight: 500; letter-spacing: 0; color: rgb(90, 101, 96); padding: 7px 0; text-align: center; }
.taro-menu__sub a:first-child { font-weight: 600; color: rgb(16, 21, 18); }

/* ---- /guides/ index: label above the comparisons/data card row */
.guides-sub {
  margin: 56px 0 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(90, 101, 96);
}
.guides-sub + .x108 { margin-top: 20px; }