/* =====================================================================
   GRX10 website: scroll rhythm (Oct 2026).
   Linked by the build as the LAST stylesheet on every page (after
   aurora.css, aurora-light.css and suite-ui.css). Aurora tokens only, so
   the dark and light ("Lilac Mist") themes both work without overrides.

   What it does
   1. Anchors land below the fixed nav (scroll-padding-top = nav height).
   2. Three-step section spacing:
        [data-chapter]  a new chapter: more air on top + one faded hairline
        (no attribute)  a normal section
        [data-join]     continues the chapter above: tight top, no line
      Section bottoms are smaller than tops, so each block visibly "ends".
   3. Bands: the old per-section stripes (inline ink/panel gradients,
      .engine/.runby/.proof, the mobile even-section wash) are retired.
      A chapter may carry ONE soft band of --background-2 that fades in and
      out:  data-band="solo" | "start" ... "mid" ... "end".
   4. Mobile: the 2px pink rule on every join is gone; hairline only where a
      chapter starts.
   5. Footer columns are <details> (build transform): accordions <=760px,
      always open on desktop. Every link stays in the HTML.
   6. Long articles (pages with nav.fx-toc): reading-progress bar and a
      pinned "On this page" rail in the right margin at >=1360px (rhythm.js);
      the small labels above article headings are dropped.
   7. Mobile hero visuals are capped so headline + CTA + proof come first.
   8. Horizontal scrollers: snap + visible swipe hint on comparison tables,
      edge fade on mock-window tables, overflow-x:clip on body.
   Attributes are added to the sources by scripts/rhythm-attrs.mjs.
   ===================================================================== */

/* ---------- 1. Anchors, smooth scroll, clip ---------- */
html{scroll-padding-top:var(--rh-nav,85px)}
@media (max-width:760px){html{scroll-padding-top:var(--rh-nav,73px)}}
/* article headings: was scroll-margin-top:100px on top of nothing; now nav + breathing room */
h2[id],h3[id],.legal-sec{scroll-margin-top:24px!important}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}
/* section targets (#contact, #products ...): land the heading ~40px under the nav,
   not the section's own top padding (which can be 136px) */
:is(body,main)>section[id].section-pad:not([style*="padding-top"]){scroll-margin-top:calc(40px - var(--rh-section))}
:is(body,main)>section[id].section-pad:is([data-chapter],.cta):not([style*="padding-top"]){scroll-margin-top:calc(40px - var(--rh-chapter))}
:is(body,main)>section[id].section-pad[data-join]:not([style*="padding-top"]){scroll-margin-top:calc(40px - var(--rh-join))}
body{overflow-x:hidden}
@supports (overflow:clip){body{overflow-x:clip}}

/* ---------- 2. Rhythm tokens ---------- */
:root{
  --rh-chapter:clamp(96px,9vw,136px);   /* top of a new chapter */
  --rh-section:clamp(72px,7vw,96px);    /* top of a normal section */
  --rh-join:clamp(32px,3.5vw,48px);     /* top of a continuation */
  --rh-tail:clamp(56px,6vw,80px);       /* bottom of every section */
  --rh-fade:clamp(72px,8vw,128px);      /* band fade-in / fade-out length */
  --rh-line:linear-gradient(90deg,transparent,var(--border-strong) 16%,var(--border-strong) 84%,transparent);
}
@media (max-width:760px){
  :root{--rh-chapter:72px;--rh-section:52px;--rh-join:24px;--rh-tail:44px;--rh-fade:56px}
}

/* ---------- 3. Spacing ----------
   :is(body,main)>section.x matches the specificity of the mobile
   "system B" rules in the page CSS, and this file loads after them.
   Inline padding-top:0 (article flow) is kept for normal sections. */
:is(body,main)>section.section-pad{padding-top:var(--rh-section);padding-bottom:var(--rh-tail)}
:is(body,main)>section.section-pad-sm{padding-top:var(--rh-join);padding-bottom:var(--rh-join)}
:is(body,main)>section[data-join]{padding-top:var(--rh-join)!important}
:is(body,main)>section[data-chapter]{padding-top:var(--rh-chapter)!important}
:is(body,main)>section.section-pad.cta{padding-top:var(--rh-chapter);padding-bottom:var(--rh-chapter)}

/* ---------- 4. Hairlines: chapter starts and the closing CTA only ---------- */
:is(body,main)>section{position:relative}
:is(body,main)>section.section-pad+section::before,
:is(body,main)>section.section-pad-sm+section::before{content:none}
:is(body,main)>section[data-chapter]::before,
:is(body,main)>section.section-pad.cta::before{
  content:"";position:absolute;top:0;left:50%;right:auto;transform:translateX(-50%);
  width:min(1240px,calc(100% - 48px));height:1px;background:var(--rh-line);pointer-events:none}
:is(body,main)>section[data-band]:is([data-chapter],.cta)::before{top:calc(var(--rh-fade) * .45)}
/* the first section after the hero never needs a rule */
:is(header.phero,header.hero)+section::before,:is(header.phero,header.hero)+#main+section::before{content:none!important}

/* ---------- 5. Bands: one soft surface per chapter ---------- */
:is(body,main)>section:not([data-band]):is([style*="var(--ink)"],[style*="var(--panel"],.engine,.runby,.proof){background:none!important}
:is(body,main)>section.proof:not([data-band]){border-top:0!important;border-bottom:0!important}
@media (max-width:760px){
  :is(body,main)>section.section-pad:nth-of-type(even):not([style*="background"]):not([data-band]){background:none}
}
:is(body,main)>section[data-band]{border-top:0!important;border-bottom:0!important}
:is(body,main)>section[data-band="solo"]{background:linear-gradient(180deg,transparent,var(--background-2) var(--rh-fade),var(--background-2) calc(100% - var(--rh-fade)),transparent)!important}
:is(body,main)>section[data-band="start"]{background:linear-gradient(180deg,transparent,var(--background-2) var(--rh-fade))!important}
:is(body,main)>section[data-band="mid"]{background:var(--background-2)!important}
:is(body,main)>section[data-band="end"]{background:linear-gradient(180deg,var(--background-2) calc(100% - var(--rh-fade)),transparent)!important}
/* a banded chapter needs room for its fade-out before the next block */
:is(body,main)>section:is([data-band="solo"],[data-band="end"]){padding-bottom:calc(var(--rh-tail) + var(--rh-fade) * .5)}
/* the band fade already separates the next chapter: no extra chapter gap on top of it (Fable review, home) */
:is(body,main)>section:is([data-band="solo"],[data-band="end"])+section[data-chapter]:not(.cta){padding-top:calc(var(--rh-section) * .75)!important}

/* logo wall inside a band: drop the 0.78/0.92 dimming so wordmarks keep 4.5:1 on --background-2 */
:is(body,main)>section[data-band] .cust{opacity:1}

/* ---------- 6. Footer accordions (markup: details.foot-col > summary > h4) ---------- */
details.foot-col>summary{list-style:none;cursor:default}
details.foot-col>summary::-webkit-details-marker{display:none}
details.foot-col>summary>h4,details.foot-col>summary>.foot-h{display:block}
.foot-col .foot-h{font-weight:700;margin:0 0 14px}
@media (min-width:761px){details.foot-col>summary{pointer-events:none}}
@media (max-width:760px){
  .site-footer .foot-top{grid-template-columns:1fr!important;gap:0!important}
  .site-footer .foot-brand{padding-bottom:22px}
  details.foot-col{border-top:1px solid var(--border)}
  details.foot-col:last-of-type{border-bottom:1px solid var(--border)}
  details.foot-col>summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:4px 0;cursor:pointer}
  details.foot-col>summary>h4,details.foot-col>summary>.foot-h{margin:0!important;font-size:12px!important;color:var(--foreground-2)!important}
  details.foot-col>summary::after{content:"";width:9px;height:9px;margin-right:4px;border-right:1.5px solid var(--muted-foreground);border-bottom:1.5px solid var(--muted-foreground);transform:rotate(45deg) translateY(-3px);transition:transform .2s var(--ease-out)}
  details.foot-col[open]>summary::after{transform:rotate(-135deg) translate(-2px,-1px)}
  details.foot-col>summary:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:4px}
  details.foot-col[open]{padding-bottom:12px}
  details.foot-col a{min-height:40px;display:flex!important;align-items:center}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){details.foot-col>summary::after{transition:none}}

/* ---------- 7. Long articles ---------- */
/* small labels above article headings go; the TOC already names each part */
body:has(nav.fx-toc) .eyebrow-row>.kicker:has(+ h2[id]){display:none}
body:has(nav.fx-toc) .eyebrow-row:has(> h2[id]){gap:0}
.rh-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:101;pointer-events:none;
  background:var(--gradient-brand);transform-origin:0 50%;transform:scaleX(var(--rh-p,0))}
@supports (animation-timeline:scroll()){
  .rh-progress{animation:rh-grow linear both;animation-timeline:scroll(root)}
  @keyframes rh-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
@media (prefers-reduced-motion:reduce){.rh-progress{animation:none;transform:scaleX(var(--rh-p,0))}}
.rh-toc{display:none}
@media (min-width:1360px){
  .rh-toc{display:block;position:fixed;top:calc(var(--rh-nav,85px) + 48px);
    left:calc(50% + 410px + clamp(32px,4vw,72px));width:min(250px,calc(50vw - 410px - 56px));
    max-height:calc(100vh - var(--rh-nav,85px) - 96px);overflow:auto;z-index:5;
    opacity:0;visibility:hidden;transform:translateY(6px);
    transition:opacity .25s var(--ease-out),transform .25s var(--ease-out),visibility 0s linear .25s}
  .rh-toc.on{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease-out),transform .25s var(--ease-out),visibility 0s}
  .rh-toc .rh-toc-l{font:500 12px/1.2 var(--font-mono);color:var(--muted-foreground);margin:0 0 12px}
  .rh-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--border)}
  .rh-toc a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;
    font-size:13.5px;line-height:1.4;color:var(--muted-foreground);text-decoration:none}
  .rh-toc a:hover{color:var(--foreground)}
  .rh-toc a[aria-current="true"]{color:var(--foreground);border-left-color:var(--primary)}
  .rh-toc a:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
}
@media (prefers-reduced-motion:reduce){.rh-toc,.rh-toc.on{transition:none}}

/* ---------- 8. Mobile heroes: visual capped, text first ---------- */
@media (max-width:760px){
  header.phero{padding-top:calc(var(--rh-nav,73px) + 36px)!important;padding-bottom:40px!important}
  .phero-inner>.reveal:has(> .suite-window, > .mock-window, > .callcol){
    max-height:400px;overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
}

/* ---------- 9. Horizontal scrollers ---------- */
/* comparison tables: snap to columns, visible hint (inserted by rhythm.js) */
@media (max-width:760px){
  .fx-tbl,table.dtable,main table{scroll-snap-type:x proximity;overscroll-behavior-x:contain}
  .fx-tbl :is(th,td),table.dtable :is(th,td){scroll-snap-align:start}
}
.rh-swipe{display:none}
@media (max-width:760px){
  .rh-swipe{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:500 12px/1.2 var(--font-mono);color:var(--muted-foreground);transition:opacity .3s var(--ease-out)}
  .rh-swipe::after{content:"";width:28px;height:1px;background:currentColor}
  .rh-swipe.done{opacity:0}
}
/* tables inside product mock windows scroll; fade the cut edge so it reads as "more" */
.su-table-wrap[data-rh-more]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
@media (max-width:760px){.su-table-wrap{scroll-snap-type:x proximity;overscroll-behavior-x:contain}}

/* ---------- forced colours ---------- */
@media (forced-colors:active){
  :is(body,main)>section[data-chapter]::before,:is(body,main)>section.section-pad.cta::before{background:CanvasText}
  .rh-progress{background:Highlight}
}