/* BeginThings homepage: fill-the-screen + continuous flow (home-flow-r1, 24 Oct 2026).
   Loaded only by index.html and scoped to body.bt-flow, so no other page is affected.
   1) Fluid width: the 1320px column becomes a fluid one with fluid gutters, and on big
      screens the whole page scales up in steps (zoom), like a comfortable browser zoom.
   2) One continuous page: section bands, border lines and hard background changes are
      removed; a single ambient background with soft glows runs the full length.
   3) Slim "Follow on Google" preferred-source row. */

body.bt-flow{--flow-gut:clamp(20px,4.2vw,96px);--flow-max:1880px}

/* ---------- 1. Fill the screen ---------- */
@media (min-width:1100px){
  body.bt-flow .wrap{width:min(calc(100% - 2*var(--flow-gut)),var(--flow-max))!important}
}
@layer bts-shell{
  @media (min-width:1100px){
    body.bt-flow #bts-header .bts-header-inner,
    body.bt-flow #bts-footer .bts-footer-inner{
      max-width:calc(min(calc(100% - 2*var(--flow-gut)),var(--flow-max)) + 2*var(--bts-gutter,24px))!important}
  }
  /* footer joins the page: no top rule, no separate slab */
  body.bt-flow #bts-footer{border-top:0!important;background:transparent!important;
    background-image:linear-gradient(180deg,transparent,color-mix(in srgb,var(--bg) 70%,#000 30%) 140%)!important}
  html[data-bt-theme="light"] body.bt-flow #bts-footer{background-image:linear-gradient(180deg,transparent,color-mix(in srgb,var(--bg) 92%,#7d8fc4 8%))!important}
}
/* Step-scale the whole page on large screens, so type, cards and grids grow with the screen.
   Media queries read the real viewport, so this never feeds back on itself. */
@media (min-width:1640px){body.bt-flow{zoom:1.08}}
@media (min-width:1800px){body.bt-flow{zoom:1.16}}
@media (min-width:2100px){body.bt-flow{zoom:1.3}}
@media (min-width:2400px){body.bt-flow{zoom:1.42}}
@media (min-width:3000px){body.bt-flow{zoom:1.7}}
/* keep running text readable while the layout spreads */
body.bt-flow main p{max-width:min(100%,72ch)}
body.bt-flow .hero-bottom p,body.bt-flow .closing-bottom p{max-width:none}
body.bt-flow .dz-head p{margin-inline:auto}

/* ---------- 2. One continuous flow ---------- */
body.bt-flow{background:var(--bg)}
body.bt-flow #main{overflow-x:clip}
body.bt-flow{position:relative;isolation:isolate;
  --g1:color-mix(in srgb,var(--accent) 15%,transparent);
  --g2:color-mix(in srgb,#ab83f8 12%,transparent);
  --g3:color-mix(in srgb,#3ab8f3 9%,transparent);
  --lift:color-mix(in srgb,var(--bg) 88%,#5b6fb0 12%)}
html[data-bt-theme="light"] body.bt-flow{
  --g1:color-mix(in srgb,var(--accent) 11%,transparent);
  --g2:color-mix(in srgb,#ab83f8 9%,transparent);
  --g3:color-mix(in srgb,#3ab8f3 8%,transparent);
  --lift:color-mix(in srgb,var(--bg) 93%,#9fb2ea 7%)}
/* the ambient field: one tall layer, glows drift across where the old section edges were */
body.bt-flow::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 1100px at 78% 4%,var(--g2),transparent 70%),
    radial-gradient(55% 1300px at 12% 16%,var(--g3),transparent 70%),
    radial-gradient(60% 1400px at 88% 30%,var(--g1),transparent 70%),
    radial-gradient(55% 1300px at 8% 46%,var(--g2),transparent 70%),
    radial-gradient(65% 1400px at 85% 62%,var(--g3),transparent 70%),
    radial-gradient(60% 1300px at 15% 76%,var(--g1),transparent 70%),
    radial-gradient(70% 1100px at 60% 96%,var(--g2),transparent 70%),
    linear-gradient(180deg,var(--bg) 0%,var(--lift) 14%,var(--bg) 30%,var(--lift) 48%,var(--bg) 62%,var(--lift) 78%,var(--bg) 100%)}
/* every band goes transparent, every section rule goes */
body.bt-flow :is(.tools-section,.dz2,#beginnotes.bnx,.bn-home-section,.rooms-section,.products-section,
  .fieldnotes-section,.about-section,.faq-section,.btg-newsletter,.bt-arcade-strip,.bt-ps-home){
  background:transparent!important;border-top:0!important;border-bottom:0!important;border-block:0!important;box-shadow:none!important}
body.bt-flow #beginnotes.bnx{overflow:visible}
/* hero bottom rule: a soft fading hairline instead of a hard line */
body.bt-flow .hero-bottom{border-top:0!important;position:relative}
body.bt-flow .hero-bottom::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink) 16%,transparent) 20%,color-mix(in srgb,var(--ink) 16%,transparent) 80%,transparent)}
/* one vertical rhythm */
body.bt-flow .section-pad{padding-block:clamp(64px,7vw,112px)}
body.bt-flow #beginnotes.bnx{padding-block:clamp(56px,6.5vw,104px)}
body.bt-flow .faq-section{padding-block:clamp(24px,3vw,48px) clamp(64px,7vw,112px)}
body.bt-flow .btg-newsletter.section-pad{padding-block:clamp(48px,5vw,88px)}
body.bt-flow .bt-arcade-strip{padding-block:8px}

/* "Let's begin" stays a colour moment, but melts in: no hard top or bottom edge */
body.bt-flow .closing{background:transparent!important;position:relative;isolation:isolate;overflow:visible;overflow-x:clip}
body.bt-flow .closing::before{content:"";position:absolute;inset:-90px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(112deg,#122d66 0%,#303272 58%,#51377f 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 120px,#000 calc(100% - 120px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 120px,#000 calc(100% - 120px),transparent 100%)}
body.bt-flow .closing::after{content:"";position:absolute;inset:-90px 0;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 70% at 18% 40%,#3ab8f326,transparent 70%),radial-gradient(45% 80% at 85% 60%,#ab83f833,transparent 70%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 120px,#000 calc(100% - 120px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 120px,#000 calc(100% - 120px),transparent 100%)}
body.bt-flow .closing{margin-block:90px}

/* ---------- 3. Slim preferred-source row ---------- */
body.bt-flow .bt-ps-home{padding-block:clamp(12px,1.6vw,24px)}
body.bt-flow .bt-ps-home .bt-ps-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;
  min-height:60px;box-sizing:border-box;padding:8px 10px 8px 20px;border:0;border-radius:999px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 13%,transparent),color-mix(in srgb,var(--ink) 4%,transparent) 55%,color-mix(in srgb,#ab83f8 10%,transparent))}
body.bt-flow .bt-ps-home .bt-ps-copy{flex:1 1 320px;min-width:0;display:block;position:relative;padding-left:40px}
body.bt-flow .bt-ps-home .bt-ps-copy::before{content:"";position:absolute;left:0;top:50%;margin-top:-13px;width:26px;height:26px;border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.5 0 6.6 1.2 9.1 3.6l6.8-6.8C35.8 2.4 30.3 0 24 0 14.6 0 6.6 5.4 2.6 13.2l7.9 6.2C12.4 13.7 17.7 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.1 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.4c-.5 2.9-2.2 5.3-4.6 6.9l7.4 5.7c4.3-4 6.9-9.9 6.9-17.1z'/%3E%3Cpath fill='%23FBBC05' d='M10.5 28.6c-.5-1.4-.8-3-.8-4.6s.3-3.2.8-4.6l-7.9-6.2C.9 16.6 0 20.2 0 24s.9 7.4 2.6 10.8l7.9-6.2z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.4-5.7c-2.1 1.4-4.8 2.3-8.5 2.3-6.3 0-11.6-4.2-13.5-9.9l-7.9 6.2C6.6 42.6 14.6 48 24 48z'/%3E%3C/svg%3E") center/16px no-repeat;
  box-shadow:0 1px 2px #0003}
body.bt-flow .bt-ps-home p.bt-ps-title,body.bt-flow .bt-ps-home p.bt-ps-line{display:inline;margin:0;font-size:15px;line-height:1.45;max-width:none}
body.bt-flow .bt-ps-home p.bt-ps-title{font-weight:650;color:var(--ink);letter-spacing:-.01em}
body.bt-flow .bt-ps-home p.bt-ps-line{color:var(--muted)}
body.bt-flow .bt-ps-home p.bt-ps-line::before{content:"\2014" / "";margin:0 .45em;opacity:.6}
body.bt-flow .bt-ps-home .bt-ps-act{display:flex;align-items:center;flex:0 0 auto;min-height:44px}
body.bt-flow .bt-ps-home a.bt-ps-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:0;
  background:var(--ink);color:var(--bg);font-size:14px;font-weight:650;text-decoration:none;white-space:nowrap;transition:transform .2s,box-shadow .2s}
body.bt-flow .bt-ps-home a.bt-ps-link:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px color-mix(in srgb,var(--accent) 80%,transparent)}
body.bt-flow .bt-ps-home a.bt-ps-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
body.bt-flow .bt-ps-home a.bt-ps-link[hidden]{display:none}
@media (max-width:640px){
  body.bt-flow .bt-ps-home .bt-ps-foot{border-radius:22px;padding:12px 12px 12px 14px;align-items:stretch;gap:10px}
  body.bt-flow .bt-ps-home .bt-ps-copy{flex-basis:100%}
  body.bt-flow .bt-ps-home .bt-ps-copy::before{top:2px;margin-top:0}
  body.bt-flow .bt-ps-home p.bt-ps-title,body.bt-flow .bt-ps-home p.bt-ps-line{font-size:14px}
  body.bt-flow .bt-ps-home p.bt-ps-line{display:block;margin-top:2px}
  body.bt-flow .bt-ps-home p.bt-ps-line::before{content:none}
  body.bt-flow .bt-ps-home .bt-ps-act{width:100%;padding-left:40px;box-sizing:border-box}
}
@media print{body.bt-flow::before,body.bt-flow .closing::before,body.bt-flow .closing::after{display:none}}

/* quiet-tools strip: same width as the page, no slab */
@media (min-width:1100px){body.bt-flow .bt-arcade-disclosure{width:min(calc(100% - 2*var(--flow-gut)),var(--flow-max))!important}}
body.bt-flow .bt-arcade-disclosure,body.bt-flow .bt-arcade-disclosure>summary{background:transparent!important;border:0!important;box-shadow:none!important}

/* ---------- 4. QA polish 1 (24 Oct 2026) ---------- */
/* Free tools eyebrow: the dot stays with "01 /" and the label wraps as one line of text, never leaving the dot alone */
body.bt-flow .dz-head .eyebrow.dz-eyebrow{display:block;text-align:center;text-wrap:balance}
body.bt-flow .dz-eyebrow .dz-eb-lead{white-space:nowrap;display:inline-flex;align-items:center;gap:.7em}
@media (max-width:600px){
  body.bt-flow .dz-head .eyebrow.dz-eyebrow{font-size:11px;letter-spacing:.1em}
  /* Hero 3D card at phone width: label sits under the top row on the left, coordinates below it, above the cube */
  body.bt-flow .hero-scene .scene-preview-label{left:0;right:auto;top:50px;font-size:8px;letter-spacing:.09em;z-index:3}
  body.bt-flow .hero-scene .scene-coordinate{top:72px;left:0;z-index:3;font-size:8px;line-height:1.8;
    padding:2px 6px 2px 0;background:linear-gradient(90deg,color-mix(in srgb,var(--bg,#f6f8fc) 82%,transparent) 70%,transparent);border-radius:4px}
  body.bt-flow .hero-scene .cube-stage{top:52%}
  /* Drop-zone buttons: "Make a QR code" stays on one line */
  body.bt-flow .dz-idle-btns .dz-btn{white-space:nowrap;padding-inline:12px}
}
@media (max-width:360px){body.bt-flow .dz-idle-btns .dz-btn{font-size:14px;padding-inline:8px}}