/* BeginThings site-wide layout consistency (layout-fix2, 25 Oct 2026; based on layout-fix1). Loaded last on every public page.
   1) One header: same fluid width, padding, logo and nav position on every page (matches the homepage).
   2) Same big-screen step scale as the homepage: whole page on content pages, header and footer on tool pages.
   3) Page containers fill the screen with the same fluid gutter as the homepage (1100px and up only;
      phones and tablets keep their current layout). Long reading columns keep their line length.
   4) Language panel: placement lives in bt-i18n (phones get a full-width sheet). Copy, prices and tracking untouched.
   5) Policy pages and blog articles: the page uses the same full width as the header (no narrow centred
      column); the text itself starts on the logo line and keeps a readable line length. */

:root{--btl-z:1}
body{--btl-gut:calc(clamp(20px,4.2vw,96px)*var(--btl-z));--btl-max:calc(1880px*var(--btl-z));--btl-w:min(calc(100% - 2*var(--btl-gut)),var(--btl-max))}
/* header and footer measure in their own (possibly zoomed) space */
#bts-header,#bts-footer{--btl-gut:clamp(20px,4.2vw,96px);--btl-max:1880px;--btl-w:min(calc(100% - 2*var(--btl-gut)),var(--btl-max))}

/* ---------- 1. header and footer: one width everywhere ---------- */
/* 24 tool/landing pages (w1 template) kept the browser's default 8px body margin, which shifted the
   header 8px right of every other page. Zero specificity: only replaces the browser default. */
:where(body){margin:0}
@layer bts-shell{
  @media (min-width:1100px){
    #bts-header .bts-header-inner,
    #bts-header .bts-mobile-nav,
    #bts-footer .bts-footer-inner{
      max-width:calc(min(calc(100% - 2*var(--btl-gut)),var(--btl-max)) + 2*var(--bts-gutter,24px))!important}
  }
}

/* ---------- 2. big-screen step scale (same steps as the homepage) ---------- */
/* content pages: the whole page scales, like the homepage and BeginRooms */
@media (min-width:1640px){
  body:not(:has(script[src*="/assets/bt-dock"])),body.fth,body.w2-hubpage{zoom:1.08}}
@media (min-width:1800px){
  body:not(:has(script[src*="/assets/bt-dock"])),body.fth,body.w2-hubpage{zoom:1.16}}
@media (min-width:2100px){
  body:not(:has(script[src*="/assets/bt-dock"])),body.fth,body.w2-hubpage{zoom:1.3}}
@media (min-width:2400px){
  body:not(:has(script[src*="/assets/bt-dock"])),body.fth,body.w2-hubpage{zoom:1.42}}
@media (min-width:3000px){
  body:not(:has(script[src*="/assets/bt-dock"])),body.fth,body.w2-hubpage{zoom:1.7}}
/* tool pages (interactive canvases and editors): only the header and footer scale, so pointer maths stay exact */
@layer bts-shell{
  @media (min-width:1640px){body:has(script[src*="/assets/bt-dock"]):not(.fth,.w2-hubpage){--btl-z:1.08}body:has(script[src*="/assets/bt-dock"]):not(.fth,.w2-hubpage) :is(#bts-header,#bts-footer){zoom:1.08!important}}
  @media (min-width:1800px){body:has(script[src*="/assets/bt-dock"]):not(.fth,.w2-hubpage){--btl-z:1.16}body:has(script[src*="/assets/bt-dock"]):not(.fth,.w2-hubpage) :is(#bts-header,#bts-footer){zoom:1.16!important}}
  @media (min-width:2100px){body:has(script[src*="/assets/bt-dock"]):not(.fth,.w2-hubpage){--btl-z:1.3}body:has(script[src*="/assets/bt-dock"]):not(.fth,.w2-hubpage) :is(#bts-header,#bts-footer){zoom:1.3!important}}
  @media (min-width:2400px){body:has(script[src*="/assets/bt-dock"]):not(.fth,.w2-hubpage){--btl-z:1.42}body:has(script[src*="/assets/bt-dock"]):not(.fth,.w2-hubpage) :is(#bts-header,#bts-footer){zoom:1.42!important}}
  @media (min-width:3000px){body:has(script[src*="/assets/bt-dock"]):not(.fth,.w2-hubpage){--btl-z:1.7}body:has(script[src*="/assets/bt-dock"]):not(.fth,.w2-hubpage) :is(#bts-header,#bts-footer){zoom:1.7!important}}
}

/* ---------- 3. page containers: same fluid width as the header ---------- */
@media (min-width:1100px){
  body :is(
    .ft-wrap,.bt22b,.bt22b-bc,
    main.page-content-section.container,main.container,
    .w1-wrap,.w2-hub,.w2-hub-hero,.ab-wrap,.fq-wrap,
    .bn-container,.cl-container,.cl-header-in,.nf-main,#bt-main.rh-main,.mess-in,
    section.bt-quickwin-20261019,section.bt-related,section.bt-w1-links,section.bt-editorial-silo,section.bt-pairs,
    main.wrap:not(.integration-guide)
  ),
  body:not(.bt-flow):not(.bt-flow-br) :is(.shell:not(.guide-main),.wrap:not(.privacy,.guide,.faq-wrap)){
    box-sizing:border-box!important;width:var(--btl-w)!important;max-width:none!important;
    margin-inline:auto!important;padding-inline:0!important}
  /* a wrapper inside a wrapper just fills its parent */
  body :is(.ft-wrap,.bt22b,.shell,.wrap,.bn-container,.w1-wrap,.container) :is(.ft-wrap,.bt22b,.shell,.wrap,.bn-container,.w1-wrap,.container){
    width:100%!important;max-width:100%!important}
  /* BeginNotes product bar sits on the same line as the global header */
  body .bn-container{width:var(--btl-w)!important}
}

/* ---------- 4. readable line length inside the wider containers ---------- */
@media (min-width:1100px){
  body:not(.bt-flow):not(.bt-flow-br) :is(
    .ft-wrap,.bt22b,main.page-content-section.container,main.container,.w1-wrap,.w2-hub,.ab-wrap,.fq-wrap,
    .bn-container,.nf-main,#bt-main.rh-main,section.bt-quickwin-20261019,section.bt-related,section.bt-w1-links,
    section.bt-editorial-silo,section.bt-pairs,section.bt-seo,section.bt-embed,.wrap,.shell
  ) :is(p,li):not(header *,[class*="hero"] *,[class*="card"] *,td *,th *,nav *){max-width:min(100%,80ch)}
}

/* ---------- 5. policy pages and blog articles: full-width page, readable text ---------- */
@media (min-width:900px){
  /* policy pages (privacy, terms, refund, shipping, disclaimer, data and account, cookie, accessibility) */
  body > main[tabindex="-1"]:not([class]):has(> h1:first-child, > .meta-row:first-child),
  main.shell.guide-main:has(article.rh-reader),
  body > div.container,
  body:not(.bt-flow):not(.bt-flow-br) :is(body > div.wrap, body > main.wrap, body > main:not([class]) > div.wrap):not(.privacy,.guide,.faq-wrap,.integration-guide){
    box-sizing:border-box!important;width:var(--btl-w)!important;max-width:none!important;
    margin-inline:auto!important;padding-inline:0!important}
  body > main[tabindex="-1"]:not([class]):has(> h1:first-child, > .meta-row:first-child) > :is(p,ul,ol,h2,h3,h4,.meta-row,blockquote,dl,address,details){max-width:min(100%,104ch)}
  body > main[tabindex="-1"]:not([class]):has(> h1:first-child, > .meta-row:first-child) > :is(table,.table-wrap,div:has(> table)){max-width:100%}
  /* blog articles: the reader column fills the page width, text keeps its line length */
  main.guide-main article.rh-reader{width:100%!important}
  :is(body > div.container, body > div.wrap, body > main.wrap, body > main > div.wrap) :is(p,li):not([class*="card"] *,td *,th *){max-width:min(100%,104ch)}
  article.rh-reader{box-sizing:border-box!important;max-width:none!important;width:var(--btl-w)!important;margin-inline:auto!important;padding-inline:0!important}
  article.rh-reader :is(p,li,blockquote,h2,h3,h4,dl,.rh-toc,details):not([class*="card"] *,td *,th *){max-width:min(100%,104ch)}
  article.rh-reader > :is(figure,img,.rh-figure,[class*="visual"],[class*="hero"]){max-width:min(100%,1180px)}
}
/* 900-1099px: the header keeps its own gutter there, so reading pages line up with that instead */
@media (min-width:900px) and (max-width:1099px){
  body > main[tabindex="-1"]:not([class]):has(> h1:first-child, > .meta-row:first-child),
  main.shell.guide-main:has(article.rh-reader),
  body > div.container,
  body:not(.bt-flow):not(.bt-flow-br) :is(body > div.wrap, body > main.wrap, body > main:not([class]) > div.wrap):not(.privacy,.guide,.faq-wrap,.integration-guide),
  article.rh-reader:not(main.guide-main article){width:calc(100% - 2*clamp(16px,3.5vw,48px))!important}
}