/* b.css: version B of the landing, second pass. Every chapter after the hero is an "Apple chapter": a centred
   eyebrow + headline + sub above a big live stage (a reused or new section module, fitted by css/b-modules.css).
   Motion in js/b.js; everything reads without it. Per-module internals (grid collapse, hidden copy columns,
   accent colours inside a stage) are owned by css/b-modules.css, not here. */
/* overflow-x:clip, not hidden: still stops sideways scroll but does not force the body into its own scrolling
   box the way hidden does (that would break the phone sticky Start bar below, which sticks to the real viewport) */
body.b{background:#fff;color:var(--ink);overflow-x:clip}
.b-h2{font-size:clamp(40px,6.4vw,104px);font-weight:600;letter-spacing:-.05em;line-height:1;margin:0;text-align:center}
/* js/b.js reveals each headline line through its own mask (overflow:clip). At line-height 1 the line box is
   shorter than the glyphs, so a mask the size of the line cut the descenders of y, p and g flat, at rest, on
   every chapter (3 px at 40 px, 7 px at 104 px). The mask's clip box is grown below the line and the growth is
   taken back with a negative margin, so the lines keep their exact spacing. A line parked at yPercent 110 still
   sits wholly below the grown box, so nothing peeks before the reveal. */
.b-h2 .b-line-mask{padding-bottom:.14em;margin-bottom:-.14em}
.b-soft{color:var(--line-control)}
.b-sub{font-size:clamp(19px,1.9vw,28px);font-weight:500;letter-spacing:-.02em;line-height:1.3;color:var(--text-2);text-align:center;max-width:30ch;margin:clamp(18px,2vw,28px) auto 0}
/* One vertical rhythm for the whole page: every section in main takes --b-rhythm above and below, so two
   chapters always sit 2 x --b-rhythm apart and a chapter's closing Start pill is never closer than that to the
   next chapter's eyebrow. The chapters live one level down, inside .b-sticky-scope (the phone Start bar's
   bounding box), which is why .b-chapter is named here: this rule used to read ".b main > section" alone, which
   since that wrapper arrived matched only the hero and the start wrap, so every chapter from #difference to
   #work had no padding at all, sat flush on the next one, and ran to the screen edge with no gutter. */
.b{--b-rhythm:clamp(72px,8vw,120px)}
.b main > section,.b .b-chapter{padding:var(--b-rhythm) var(--gutter)}
/* B8: nav anchors land a jump target flush with the viewport top, under the 56px fixed header. Desktop
   (pointer:fine) already compensates in js/b.js's Lenis click handler (offset:-56), but touch scrolling
   uses the browser's native, unanimated anchor jump, which only reads scroll-margin. #main is the
   skip-link's own target. */
#main,.b-chapter{scroll-margin-top:56px}

/* nav: thin, frosted, the bell on the left. The background is opaque enough (.94, not .78) that a chapter
   heading scrolling past underneath does not stay legible through the blur (FC-18: headings were readable
   through the fixed header while the page scrolled) */
.b-nav{position:fixed;inset:0 0 auto;z-index:50;height:56px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px);border-bottom:1px solid rgba(0,0,0,.06)}
.b-nav-in{max-width:1080px;margin:0 auto;height:100%;padding:0 var(--gutter);display:flex;align-items:center;gap:28px}
.b-links{display:flex;gap:26px;margin:0 auto;font-size:14px}
/* a link's own text box is well under the 24x24px minimum target size (a11y-09): an invisible hit area
   grown from the text's edges, not a layout change, covers the shortfall without disturbing the row's
   spacing. Same treatment on the footer links below. */
.b-links a,.b-foot a{position:relative}
.b-links a::after,.b-foot a::after{content:'';position:absolute;inset:-6px -4px}
.b-links a,.b-login{color:var(--text-2);text-decoration:none;transition:color .2s var(--ease)}
.b-links a:hover,.b-login:hover{color:var(--ink)}
.b-actions{display:flex;align-items:center;gap:18px;font-size:14px}
.b-actions .pill{height:34px;padding:0 16px;font-size:14px}
.nb{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-size:20px;letter-spacing:-.035em;line-height:1;font-weight:500}
.nb-svg{height:.98em;width:auto;overflow:visible;flex:none}
.nb:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:6px}
/* CEO-11: below 760px the nav used to disappear outright with nothing standing in for it. There is no
   menu-toggle script owned by this round (nav-bell.js only animates the bell), so rather than ship a
   half-wired button this keeps the same three links on screen, shrunk and horizontally scrollable, which
   is still real navigation and not the previous "no nav at all". */
@media (max-width:760px){
  /* .b-links is the only side allowed to give up width. Without this, the logo (a flex item with no
     flex-shrink of its own) was compressed narrower than "twelvebell"'s own text, which does not wrap or
     truncate, so it painted straight through into the links that follow. */
  .nb{flex:none}
  /* the strip is cut by its own edge, so it fades out there instead of slicing a word in half ("What it",
     or a lone "W" at 360 px), and its end padding lets the last link scroll clear of the fade. The row's
     gaps are tighter on a phone so the strip keeps a readable width. */
  .b-nav-in{gap:14px}
  .b-actions{gap:12px}
  .b-links{gap:16px;font-size:12.5px;margin:0;flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-right:24px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .b-links::-webkit-scrollbar{display:none}
  .b-links a{white-space:nowrap}
  /* the link to /media is a desktop extra: on a phone the strip already scrolls, and a fourth link would only
     push more of it out of sight. Phones reach /media from its chapter's closing link and from the footer. */
  .b-links .b-links-wide{display:none}
  /* same reasoning for the other side: the login link and Start pill keep their content size instead of
     being squeezed into a two-line "Log in" */
  .b-actions{flex:none}
  .b-login{white-space:nowrap}
  /* the strip scrolls, so it clips the hit areas above to its own height (about 19px). Stretched to the bar's
     full height, each link, "Log in" and the Start pill get a target of about 44px without moving a pixel. */
  .b-links{align-self:stretch;align-items:center}
  .b-links a::after{inset:-12px -6px}
  .b-login,.b-actions .pill{position:relative}
  .b-login::after{content:'';position:absolute;inset:-12px -6px}
  .b-actions .pill::after{content:'';position:absolute;inset:-5px 0}
}

/* 0. hero */
.b-hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-top:calc(56px + 40px)!important}
.b-h1{margin:0;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1vw,14px)}
.b-h1-kick{font-size:clamp(22px,2.6vw,40px);font-weight:500;letter-spacing:-.03em;color:#6E6E76}
.b-h1-main{font-size:clamp(56px,11.4vw,240px);font-weight:600;letter-spacing:-.06em;line-height:.9;white-space:nowrap}
/* "AES are taking over." is three words after the mark, so the old -.12em pull-in would glue "AES" to
   "are"; .04em is the spacing Luis approved on /headlines. 11.4vw keeps the line inside the viewport from
   601px up; on phones the line breaks as "AES are / taking over." at a size that still reads as the hero. */
.b-h1-main .aes{margin-left:0;margin-right:.04em}
@media (max-width:600px){.b-h1-main{font-size:clamp(44px,16vw,84px);line-height:.95;white-space:normal;text-wrap:balance}.b-h1-main .aes{margin-right:0}}
.b-cta{display:flex;align-items:center;gap:28px;margin-top:clamp(28px,3vw,44px)}
.b-more{font-size:18px;color:var(--accent);text-decoration:none;font-weight:500}
.b-more:hover{text-decoration:underline;text-underline-offset:4px}
.b-hero-line{margin:clamp(20px,2.4vw,32px) auto 0;max-width:46ch;font-size:18px;font-weight:400;line-height:1.75;letter-spacing:-.01em;color:var(--text-2);text-align:center}
.b-hero-line .aes-word{text-decoration:none;border-bottom:1px dotted currentColor;cursor:help}
.b-hero-fact{margin:clamp(10px,1.2vw,16px) auto 0;max-width:46ch;font-size:13px;letter-spacing:.02em;color:var(--text-3);text-align:center}

/* chapters: centred eyebrow, headline, sub, then the stage */
.b-chapter-head{max-width:1100px;margin:0 auto;text-align:center}
.b-eyebrow{margin:0 0 clamp(10px,1.2vw,16px);font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.b-stage{max-width:1100px;margin:clamp(40px,4.5vw,64px) auto 0}
/* a plain line under a chapter's sub, for what the visitor must know before the stage (the photos and film
   chapter says there that its pictures are generated, not shot with a camera: read first, never a footnote) */
.b-note{max-width:70ch;margin:clamp(14px,1.4vw,20px) auto 0;font-size:clamp(15px,1.1vw,16px);line-height:1.5;color:var(--text-3);text-align:center;text-wrap:balance}

/* a closing Start action at the end of a chapter: one short context line, then the same pill as everywhere else */
.b-chapter-cta{max-width:1100px;margin:clamp(40px,4.5vw,64px) auto 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.b-chapter-cta p{margin:0;font-size:17px;color:var(--text-2)}

/* 1. difference: verdict strip under the stage */
.b-verdict{max-width:900px;margin:clamp(28px,3.5vw,44px) auto 0;display:grid;grid-template-columns:1fr 1fr;border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.b-verdict-side{padding:22px 26px}
.b-verdict-side p:last-child{margin:6px 0 0;font-size:16px;line-height:1.4}
.b-verdict-old{background:#F5F5F7;color:var(--text-3)}
.b-verdict-old .b-eyebrow{color:var(--text-3)}
.b-verdict-new{background:#fff;color:var(--ink)}
.b-verdict-new .b-eyebrow{display:flex;align-items:center;gap:8px}
.b-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
@media (max-width:760px){.b-verdict{grid-template-columns:1fr}}

/* owners: quote cards */
.b-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.b-quote{margin:0;padding:28px;border-radius:24px;background:#F5F5F7;display:flex;flex-direction:column;gap:16px;text-align:left}
.b-quote-logo{display:flex;align-items:center;height:28px}
.b-quote-logo img{height:28px;width:auto;display:block}
.b-quote-logo-text{font-size:16px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.b-quote p{margin:0;font-size:17px;line-height:1.45;color:var(--ink)}
.b-quote cite{font-style:normal;font-size:14px;color:var(--text-2)}
.b-draft{text-align:center;margin:clamp(20px,2.4vw,32px) 0 0;font-size:12px;color:var(--text-3)}
@media (max-width:860px){.b-quotes{grid-template-columns:minmax(0,1fr)}}

/* work rail swipe hint (phone only) */
.b-swipe{display:none}
@media (max-width:760px){.b-swipe{display:block;text-align:right;margin:0 var(--gutter);font-size:12px;color:var(--text-3)}}

/* the "answer questions" step visual: a short checklist */
.b-qa{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;width:min(220px,100%)}
.b-qa li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:#fff;font-size:14px;font-weight:500}
/* a11y-07: js/b.js's checklist reveal sets `opacity:.35` on these as an inline style
   (`gsap.timeline().set(qa,{opacity:.35})`, the timeline's rest state between loops and before its
   trigger fires) -- ink-on-white at .35 measured 2.32:1 against the 4.5:1 floor a sighted low-vision
   visitor still needs, aria-hidden or not. An inline style out-cascades anything short of
   `!important` (tokens.css already reaches for the same tool for `[hidden]`), and the number itself
   lives in a file outside this round's ownership, so this holds the floor from here instead. The
   reveal still reads: each checkmark (`.b-qa i`, a separate rule, untouched) keeps scaling in on its
   own beat regardless of this. */
.b-qa li{opacity:1!important}
.b-qa i{position:relative;width:18px;height:18px;border-radius:50%;background:#1DBF73;flex:none}
.b-qa i::after{content:"";position:absolute;left:6px;top:3.5px;width:4.5px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* 9. how */
.b-how .b-stage,.b-how .b-steps{margin-top:clamp(40px,4.5vw,64px)}
.b-steps{list-style:none;max-width:1080px;margin:clamp(40px,4.5vw,64px) auto 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.b-steps > li{position:relative;border-radius:28px;background:#F5F5F7;padding:28px 26px 32px;display:flex;flex-direction:column}
.b-step-n{font-size:15px;font-weight:600;color:var(--accent)}
.b-step-vis{display:grid;place-items:center;height:170px;margin:14px 0 22px;border-radius:18px;background:#fff}
.b-steps h3{margin:0;font-size:clamp(22px,2vw,28px);font-weight:600;letter-spacing:-.035em;line-height:1.1}
.b-steps p{margin:8px 0 0;font-size:17px;color:var(--text-2)}
.b-url{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--line);font-size:16px;background:#F5F5F7;min-width:200px}
.b-caret{display:inline-block;width:1.5px;height:18px;margin-left:2px;background:var(--ink);animation:b-blink 1s steps(1) infinite}
@keyframes b-blink{50%{opacity:0}}
.b-mini{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 30px;gap:6px;width:190px;padding:10px;border-radius:12px;background:#171311}
.b-mini-a{grid-column:1/-1;height:44px;border-radius:6px;background:url('../assets/img/brands/booking/hero-room-lit-800.webp') center/cover}
.b-mini-b,.b-mini-c{height:30px;border-radius:6px;background:#2B221D}
.b-mini-c{background:#C8703A}
.b-ok{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);white-space:nowrap;padding:6px 12px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;font-weight:500}
.b-none{text-align:center;margin:clamp(40px,4vw,60px) 0 0;font-size:clamp(20px,2vw,28px);font-weight:600;letter-spacing:-.03em}
@media (max-width:860px){.b-steps{grid-template-columns:minmax(0,1fr)}}

/* 10. work */
.b-work{padding-left:0!important;padding-right:0!important}
.b-work .b-chapter-head{padding:0 var(--gutter)}
.b-rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:clamp(40px,5vw,72px) var(--gutter) 12px;scrollbar-width:none}
.b-rail::-webkit-scrollbar{display:none}
.b-rail:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.b-card{flex:0 0 min(680px,82vw);scroll-snap-align:center;text-decoration:none;color:var(--ink)}
.b-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:24px;background:#F5F5F7;transition:transform .6s var(--ease)}
.b-card:hover img{transform:scale(1.015)}
.b-card span{display:block;margin-top:14px;font-size:19px;font-weight:600;letter-spacing:-.02em}
@media (max-width:760px){.b-card{flex-basis:min(680px,78vw)}}

/* 11. start: the-bell module, then the three plans */
.b-start-wrap{padding:0!important}
/* the bell inside brings only about 18px of its own room above, so the wrapper adds the rest of the page rhythm:
   the seam from #work to the bell measured 135px against 231px everywhere else at 1440 (spacing-audit, 2026-10-11).
   Phones already sit on the rhythm. */
@media (min-width:600px){.b-start-wrap{padding-top:calc(var(--b-rhythm) - 18px)!important}}
.b-start{text-align:center;display:flex;flex-direction:column;align-items:center;padding:0 var(--gutter) clamp(72px,8vw,120px)}
.b-plans{list-style:none;margin:0 auto;padding:0;max-width:760px;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch}
.b-plans li{position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:10px;padding:28px;border-radius:24px;background:#F5F5F7;text-align:left}
.b-plans b{font-size:22px;font-weight:600;letter-spacing:-.03em}
.b-plans span{font-size:16px;color:var(--text-2)}
.b-plans .pill{justify-self:start;margin-top:8px}
.b-price-line{display:flex;align-items:baseline;gap:8px;color:var(--ink)!important}
.b-plans .b-price{font-size:34px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.b-plans .b-price-unit{font-size:15px;color:var(--text-2)}
.b-plans .b-plan-private{background:#0B0B0C;color:#fff;border:1px solid rgba(255,255,255,.12)}
.b-plans .b-plan-private b{color:#fff}
.b-plans .b-plan-private span{color:rgba(255,255,255,.72)}
.b-lock{position:absolute;top:22px;right:24px;font-size:16px;opacity:.8}
.b-private-tag{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.72)}
.b-private-link{justify-self:start;color:#fff;text-decoration:underline;text-underline-offset:3px;font-size:15px;font-weight:500}
.b-private-link:hover{color:rgba(255,255,255,.85)}
@media (max-width:760px){.b-plans{grid-template-columns:minmax(0,1fr)}}

/* phone sticky Start bar: pinned to the bottom of the viewport from the end of the hero (b-sticky-scope starts
   right after #top) through the end of #work; it is the last child of that scope, so position:sticky naturally
   releases it into normal flow at the scope's own bottom edge, before #start's own buttons ever reach view. */
.b-sticky-cta{display:none}
@media (max-width:760px){
  .b-sticky-cta{
    display:flex;justify-content:center;position:sticky;bottom:0;z-index:40;
    padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px);
    border-top:1px solid rgba(0,0,0,.06)
  }
  .b-sticky-cta .pill{width:100%;max-width:320px}
}

.b-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;padding:40px var(--gutter) 56px;border-top:1px solid var(--line);font-size:13px;color:var(--text-3)}
.b-foot p{margin:0}.b-foot a{color:var(--text-2)}
@media (prefers-reduced-motion:reduce){.b-typing i,.b-caret,.b-ping i{animation:none}}
.b-step-vis{height:auto;min-height:170px;padding:16px}

/* 3b. the brain film: a Kling 3.0 transition from a textured brain to a blue energy outline pulled into one point,
   whitened at encode time outside the action column. The twelvebell mark sits over that point in its own proportions
   (dot r 28 at 1600x900, so arc r 120, stroke 36): black until the energy arrives, then the dot turns blue. */
.b-brainfilm{max-width:1100px;margin:clamp(32px,4vw,56px) auto 0;text-align:center}
.b-brainfilm-box{position:relative;aspect-ratio:16/9;width:100%}
.b-brainfilm-video{display:block;width:100%;height:100%;object-fit:cover;background:#fff}
.b-brainfilm-mark{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.b-brainfilm-arc{fill:none;stroke:var(--ink);stroke-width:36;stroke-linecap:round}
.b-brainfilm-dot{fill:var(--ink);transition:fill .45s ease}
.b-brainfilm-halo{fill:#2457FF;opacity:0;transform-box:fill-box;transform-origin:center}
.b-brainfilm.is-lit .b-brainfilm-dot{fill:#2457FF}
.b-brainfilm.is-lit .b-brainfilm-halo{animation:b-halo 1.4s cubic-bezier(.16,1,.3,1) both}
@keyframes b-halo{0%{opacity:.45;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
.b-brainfilm-cap{margin:clamp(4px,1vw,12px) 0 0;font-size:clamp(17px,1.6vw,22px);font-weight:500;letter-spacing:-.02em;color:var(--text-2);opacity:0;transform:translateY(8px);transition:opacity .7s ease .6s,transform .7s cubic-bezier(.16,1,.3,1) .6s;margin-top:14px}
.b-brainfilm.is-lit .b-brainfilm-cap{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.b-brainfilm-dot,.b-brainfilm-cap{transition:none}.b-brainfilm.is-lit .b-brainfilm-halo{animation:none}}
.b-h2,.b-sub,.b-none,.b-draft,.b-chapter-cta p{text-wrap:balance}

/* Legal links in the B and C footers */
.b-foot-legal{display:flex;flex-wrap:wrap;gap:8px 20px;flex-basis:100%}
.b-foot-legal a{color:var(--text-3)}

/* the two assessments, above the plans */
.b-choose{width:100%;max-width:880px;margin:0 auto clamp(40px,5vw,64px);text-align:center;scroll-margin-top:84px}
/* the free-draft block opens a new step: one rhythm of room above it, not the 49px it had under the bell's agent
   row at 1440 (spacing-audit heading-room, 2026-10-11). Phones already have it. */
@media (min-width:600px){.b-choose{margin-top:var(--b-rhythm)}}
.b-choose-h{font-size:clamp(30px,3.6vw,46px);font-weight:600;letter-spacing:-.04em;line-height:1.05;margin:0}
.b-choose-s{margin:10px auto 0;font-size:18px;color:var(--text-2);max-width:32em;text-wrap:balance}
.b-doors{display:grid;gap:16px;margin-top:26px;text-align:left}
@media (min-width:760px){.b-doors{grid-template-columns:1fr 1fr}}
.b-door{display:grid;grid-template-rows:auto auto 1fr;gap:4px;text-decoration:none;color:var(--ink);background:#F5F5F7;border-radius:24px;overflow:hidden;padding-bottom:20px;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.b-door:hover{transform:translateY(-4px)}
.b-door img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin-bottom:14px}
.b-door:first-child img{object-position:50% 14%}
.b-door:last-child img{object-position:50% 30%}
.b-door-t{padding:0 20px;font-size:clamp(21px,2vw,26px);font-weight:600;letter-spacing:-.025em}
.b-door-t::after{content:" \2192";color:var(--accent,#2457FF)}
.b-door-s{padding:0 20px;font-size:16px;color:var(--text-2)}

/* the hand-off stage (#team-live) builds its conversation only as it nears the screen, which grew it from
   about 260px to its finished 631-667px while the page was moving. Anything below it shifted, and a Start
   button clicked from above it landed 300px off the choice block. The finished height is held from the start. */
#team-live{min-height:633px}
@media (max-width:379px){#team-live{min-height:667px}}
@media (min-width:600px){#team-live{min-height:631px}}
@media (min-width:1024px){#team-live{min-height:643px}}