/* Shared introduction and responsive tool presentation. */
[data-page="home"] .hero{padding-bottom:100px;scroll-margin-top:0}
[data-page="home"] .hero-atmosphere{height:100%;mask-image:none}
/* Visible from the first paint, the dissolve broadens with scroll and finishes
   in the exact color of the next section. */
[data-page="home"] .hero-atmosphere::before{content:'';position:absolute;inset:auto 0 0;height:clamp(320px,80svh,1000px);max-height:100%;z-index:4;pointer-events:none;background:linear-gradient(to bottom,transparent 0%,color-mix(in srgb,var(--page-bg) 2%,transparent) 40%,color-mix(in srgb,var(--page-bg) 8%,transparent) 65%,color-mix(in srgb,var(--page-bg) 28%,transparent) 82%,color-mix(in srgb,var(--page-bg) 76%,transparent) 94%,var(--page-bg) 99%,var(--page-bg) 100%);transform:scaleY(var(--hero-section-progress,.75));transform-origin:center bottom;will-change:transform}
[data-page="home"][data-section-shadow="disabled"] .hero-atmosphere::before{display:none}
[data-page="home"] .hero-atmosphere::after{opacity:var(--hero-scroll-shade,0)}
[data-page="home"][data-main-landing="full"] .hero{padding-bottom:0}
[data-page="home"][data-main-landing="full"] .hero-intro{padding-bottom:max(100px,var(--hero-intro-bottom))}
[data-page="home"] .features{--tools-space:clamp(56px,7vw,100px);padding-top:var(--tools-space);scroll-margin-top:calc(8px - var(--tools-space))}
.section-title--tools{display:flex;align-items:center;justify-content:center;gap:.3em}
.section-title--tools>svg{width:.85em;height:.85em}
.tool-panels{min-width:0}
.tool-panels .feature-row{grid-template-columns:minmax(260px,.9fr) minmax(0,1.85fr);gap:clamp(32px,5vw,76px);margin-top:100px;scroll-margin-top:96px}
.tool-panels .feature-row:first-child{margin-top:0}
.tool-panels .feature-visual{width:100%;min-height:0;padding:clamp(22px,3vw,42px);border-radius:18px;aspect-ratio:auto}
/* Removing the decorative frame gives its space back to the recording. */
[data-tool-artwork="disabled"] .tool-panels .feature-visual{background:none;padding:0;border-radius:12px}
.tool-panels .feature-copy{max-width:375px}
.tool-panels .feature-copy h3{font-size:clamp(26px,2.5vw,34px);line-height:1.2}
.tool-panels .feature-copy p{line-height:1.7}
[data-tool-presentation="alternating"] .tool-panels .feature-row:nth-child(even){grid-template-columns:minmax(0,1.85fr) minmax(260px,.9fr)}
[data-tool-presentation="alternating"] .tool-panels .feature-row:nth-child(even) .feature-copy{grid-column:2;grid-row:1;justify-self:end}
[data-tool-presentation="alternating"] .tool-panels .feature-row:nth-child(even) .feature-visual{grid-column:1;grid-row:1}
.tool-selector{display:flex;flex-direction:column;gap:8px;min-width:0}
.tool-tab{display:flex;align-items:center;gap:12px;width:100%;min-height:55px;padding:14px 20px;border-radius:99px;background:var(--page-soft);color:var(--page-ink);font-size:14px;line-height:1.45;text-align:left;transition:background .18s,color .18s}
.tool-tab svg{width:19px;height:19px;flex-shrink:0}
.tool-tab:hover{background:var(--page-line)}
.tool-tab[aria-selected="true"]{background:var(--page-control);color:var(--page-control-ink)}
.tool-tab:focus-visible{outline:2px solid var(--page-ink);outline-offset:3px}
/* Replacing a panel must not let its newly revealed content become the browser's
   scroll anchor. Keep this local: links and the rest of the page scroll normally. */
[data-tool-presentation="list"] .tool-presentation{display:grid;grid-template-columns:minmax(240px,.75fr) minmax(0,2.05fr);gap:clamp(28px,4vw,64px);align-items:start;overflow-anchor:none}
[data-tool-presentation="list"] .tool-selector{position:sticky;top:96px}
[data-tool-presentation="list"] .tool-panels .feature-row{display:flex;flex-direction:column;align-items:stretch;gap:28px;margin:0;scroll-margin-top:96px}
[data-tool-presentation="list"] .tool-panels .feature-visual{order:-1}
[data-tool-presentation="list"] .tool-panels .feature-copy{max-width:none;padding:28px 32px;border-radius:18px;background:var(--page-soft)}
[data-tool-presentation="list"] .tool-panels .feature-copy p{max-width:70ch;margin-top:18px}
[data-tool-presentation="list"] .tool-panels .feature-copy .text-link{margin-top:20px}
.tool-panel-active{animation:tool-panel-in .22s ease-out}
@keyframes tool-panel-in{from{opacity:.6;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:1000px) and (min-width:761px){
  .tool-panels .feature-row{grid-template-columns:minmax(200px,.9fr) minmax(0,1.65fr);gap:28px}
  [data-tool-presentation="alternating"] .tool-panels .feature-row:nth-child(even){grid-template-columns:minmax(0,1.65fr) minmax(200px,.9fr)}
  [data-tool-presentation="list"] .tool-presentation{grid-template-columns:220px minmax(0,1fr);gap:28px}
  .tool-tab{font-size:13px;padding:13px 16px;gap:9px}
}
@media(max-width:760px){
  [data-page="home"] .hero{padding-bottom:90px}
  [data-page="home"][data-main-landing="full"] .hero-intro{padding-bottom:90px}
  [data-page="home"] .features{--tools-space:40px}
  .tool-panels .feature-row,[data-tool-presentation="alternating"] .tool-panels .feature-row:nth-child(even){display:flex;flex-direction:column;align-items:stretch;gap:28px;margin-top:72px}
  .tool-panels .feature-copy{max-width:580px}
  .tool-panels .feature-visual{padding:20px 14px;border-radius:14px}
  [data-tool-presentation="list"] .tool-presentation{display:block}
  [data-tool-presentation="list"] .tool-selector{position:static;display:flex;flex-direction:row;overflow-x:auto;overscroll-behavior-x:contain;gap:8px;margin:0 -3px 24px;padding:4px 3px 12px;scrollbar-width:thin;scrollbar-color:var(--page-line-strong) transparent}
  .tool-tab{flex:0 0 auto;width:auto;min-height:48px;padding:12px 17px;font-size:13px;white-space:nowrap}
  [data-tool-presentation="list"] .tool-panels .feature-row{gap:18px}
  [data-tool-presentation="list"] .tool-panels .feature-copy{padding:24px 20px;border-radius:14px}
}
@media(prefers-reduced-motion:reduce){.tool-panel-active{animation:none}.tool-tab{transition:none}}

/* Home composition preferences are applied before paint, independently of art. */
[data-page="home"][data-title-alignment="left"] .hero-copy{width:min(1376px,calc(100% - 80px));margin-inline:auto;padding-inline:0;text-align:left}
[data-page="home"][data-title-alignment="left"] .hero-brand{justify-content:flex-start;margin-inline:0}
[data-page="home"][data-title-alignment="left"] .hero-copy :is(.hero-icon,.hero-statement,.hero-description,.hero-cta){margin-inline:0}
[data-page="home"][data-tools-placement="below"] .hero{--tools-lower-offset:0px}
[data-page="home"][data-tools-placement="below"] .hero-intro{min-height:100svh}
[data-page="home"][data-tools-placement="below"] .hero-third-layer{display:none}
[data-page="home"][data-tools-placement="below"] .tool-presentation{display:flex;flex-direction:column;gap:clamp(28px,4vw,48px)}
[data-page="home"][data-tools-placement="below"] .tool-selector{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 24px;width:min(1100px,100%);margin:0 auto;padding:0;overflow:visible}
[data-page="home"][data-tools-placement="below"] .tool-tab{justify-content:center;width:100%;min-height:44px;padding:10px 14px;background:transparent;color:var(--page-ink);font-size:clamp(20px,2.2vw,27px);font-weight:500;line-height:1.25;letter-spacing:-.035em;white-space:normal}
[data-page="home"][data-tools-placement="below"] .tool-tab:is(:hover,[aria-selected="true"]){background:var(--page-soft)}
[data-page="home"][data-tools-placement="below"] .tool-tab[aria-selected="true"]{box-shadow:inset 0 0 0 1px var(--page-line-strong)}
[data-page="home"][data-tools-placement="below"] .tool-tab svg{width:25px;height:25px}
[data-page="home"][data-tools-placement="below"] .tool-panels{width:100%}
@media(max-width:760px){
  [data-page="home"][data-title-alignment="left"] .hero-copy{width:calc(100% - 40px)}
  [data-page="home"][data-tools-placement="below"] .tool-selector{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px}
  [data-page="home"][data-tools-placement="below"] .tool-tab{font-size:19px;padding:10px 8px;gap:8px}
  [data-page="home"][data-tools-placement="below"] .tool-tab svg{width:21px;height:21px}
}

/* The original seven-item menu controls a single recording directly below it. */
[data-tool-presentation="menu"] .tool-presentation{display:flex;flex-direction:column;gap:clamp(28px,4vw,48px);overflow-anchor:none}
[data-tool-presentation="menu"] .tool-panels{width:100%;max-width:1100px;margin-inline:auto}
[data-tool-presentation="menu"] .tool-panels .feature-row{display:block;margin:0;scroll-margin-top:96px}
[data-tool-presentation="menu"] .tool-panels .feature-copy{display:none}
[data-tool-presentation="menu"][data-tools-placement="normal"] .features{padding-top:0}
[data-tool-presentation="menu"][data-tools-placement="normal"] .features>.section-title{display:none}
[data-tool-presentation="menu"] .hero-third-layer__tools{scroll-margin-top:96px}
[data-tool-presentation="menu"] .hero-third-layer__tools a[aria-selected="true"]::after{transform:scaleX(1)}
[data-tool-presentation="menu"] .tool-presentation>.hero-third-layer__tools{position:relative;inset:auto;width:min(1170px,100%);margin-inline:auto;color:var(--page-ink)}
