/* rad20 — story restructure (hero pitch, cycle, builder in normal margins,
   alternating drawing bands, suites, journey, desks, first user, FAQ).
   Loaded last. Additive; namespaced r20-*. Preview only. */

:root{
  --r20-shell-pad:clamp(16px,3.2vw,44px);
  --r20-bg:#f7f4ef;
  --r20-card:#fffdf9;
  --r20-ink:#1a1816;
  --r20-muted:#5f5a54;
  --r20-line:rgba(26,24,22,.12);
  --r20-accent:#0f6e5b;
  --r20-accent-soft:rgba(15,110,91,.08);
  /* Same content edge as .wrap (valentine-blend.css) */
  --r20-wrap:min(1240px, calc(100% - 192px));
}
@media (max-width:1100px){ :root{ --r20-wrap:min(1240px, calc(100% - 160px)); } }
@media (max-width:700px){ :root{ --r20-wrap:calc(100% - 48px); } }
html[data-theme="dark"]{
  --r20-bg:#0c0e11;
  --r20-card:#15181e;
  --r20-ink:#f3eee6;
  --r20-muted:#b4ada4;
  --r20-line:rgba(243,238,230,.14);
  --r20-accent:#7fd1b9;
  --r20-accent-soft:rgba(127,209,185,.12);
}

/* ——— Shared section rhythm ——— */
.r20-section-lead{font-size:clamp(1.02rem,1.3vw,1.2rem);line-height:1.6;max-width:46rem;color:var(--r20-muted);margin:.25rem 0 1.75rem}
#main h2{overflow-wrap:break-word}
.r20-alias{position:relative;top:-90px;display:block;height:0;width:0;overflow:hidden}

/* ——— 1. HERO (rad23 — draped copy + dark invert + prominent mobile) ——— */
.r20-hero{padding:clamp(16px,3.5vw,48px) 0 clamp(12px,2vw,28px);overflow-x:clip}
.r20-hero-stage{position:relative;isolation:isolate}
.r20-hero-media{position:relative;margin:0;border-radius:24px;overflow:hidden;background:#e8eef8;aspect-ratio:16 / 9;box-shadow:0 30px 60px -30px rgba(20,30,60,.28)}
.r20-hero-media video,.r20-hero-media img{display:block;width:100%;height:100%;object-fit:contain;object-position:center center;background:#f4f6fa}
/* Soft left scrim on the media (not a copy card) so draped text stays legible. */
.r20-hero--atelier .r20-hero-media::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(247,244,239,.78) 0%,rgba(247,244,239,.42) 38%,rgba(247,244,239,.08) 62%,transparent 78%);
}
/* rad23: Arthur asked for dark-mode inversion (overrides prior handoff). Match concept-loop invert. */
html[data-theme="dark"] .r20-hero-media{
  background:#0c0e11;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.55);
}
html[data-theme="dark"] .r20-hero-media video.fuller-hero-film,
html[data-theme="dark"] .r20-hero-media img{
  filter:invert(1) hue-rotate(180deg) saturate(.28) brightness(1.16) contrast(1.05);
  mix-blend-mode:normal;
  background:#0c0e11;
}
html[data-theme="dark"] .r20-hero--atelier .r20-hero-media::after{
  background:linear-gradient(90deg,rgba(12,14,17,.82) 0%,rgba(12,14,17,.48) 40%,rgba(12,14,17,.1) 64%,transparent 80%);
}
.r20-hero-media figcaption{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:.75rem;font-size:.78rem;color:#24304a;z-index:3}
.r20-hero-media figcaption span{background:rgba(255,255,255,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:.35rem .7rem;border-radius:999px}
.r20-hero-media .r19-motion-toggle{background:rgba(255,255,255,.9);color:#1a1816;min-height:36px}
html[data-theme="dark"] .r20-hero-media figcaption{color:#e8e4dc}
html[data-theme="dark"] .r20-hero-media figcaption span{background:rgba(20,24,30,.78);color:#f3eee6}
html[data-theme="dark"] .r20-hero-media .r19-motion-toggle{background:rgba(20,24,30,.88);color:#f3eee6}
/* Desktop + mobile: copy drapes over the video (no card box). Soft scrim only. */
.r20-hero--atelier .r20-hero-copy{
  position:absolute;left:clamp(16px,3.5vw,48px);top:50%;transform:translateY(-50%);
  z-index:2;width:min(38%,30rem);max-width:30rem;padding:.35rem .25rem .35rem 0;
  border-radius:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  text-align:left;pointer-events:none;
}
.r20-hero--atelier .r20-hero-copy a,
.r20-hero--atelier .r20-hero-copy .r19-actions{pointer-events:auto}
.r20-hero h1{font-size:clamp(2.1rem,4.4vw,3.8rem);line-height:1.02;letter-spacing:-.045em;margin:0 0 .85rem;color:var(--r20-ink)}
.r20-pitch{font-size:clamp(1.05rem,1.35vw,1.22rem);line-height:1.5;max-width:34rem;margin:0 0 .65rem;color:var(--r20-ink)}
.r20-pitch-sub{font-size:clamp(.92rem,1.1vw,1.05rem);line-height:1.55;max-width:34rem;margin:0 0 1.15rem;color:var(--r20-muted)}
.r20-hero .r19-actions{margin-bottom:.85rem;display:flex;flex-wrap:wrap;gap:.65rem .9rem;align-items:center}
.r20-hero .r19-eyebrow{margin:0 0 .7rem}
/* Mobile: full-bleed zoomed video; text draped over it (same as desktop), compact. */
@media (max-width:900px){
  .r20-hero{padding:0 0 clamp(12px,3vw,24px)}
  .r20-hero--atelier .wrap.r20-hero-stage{
    width:100%;max-width:none;padding:0;margin:0;
  }
  .r20-hero--atelier .r20-hero-media{
    width:100vw;max-width:100vw;margin:0;border-radius:0;box-shadow:none;
    aspect-ratio:auto;height:min(82svh,760px);min-height:560px;
    background:#e8eef8;
  }
  .r20-hero--atelier .r20-hero-media video,
  .r20-hero--atelier .r20-hero-media img{
    object-fit:cover;
    /* Bias toward the building (right-of-center) while keeping roof/foundation in frame. */
    object-position:68% 42%;
    transform:scale(1.08);
    transform-origin:68% 42%;
  }
  .r20-hero--atelier .r20-hero-media::after{
    background:linear-gradient(90deg,rgba(247,244,239,.88) 0%,rgba(247,244,239,.55) 42%,rgba(247,244,239,.12) 68%,transparent 86%),
      linear-gradient(180deg,rgba(247,244,239,.2) 0%,transparent 28%,transparent 62%,rgba(247,244,239,.35) 100%);
  }
  html[data-theme="dark"] .r20-hero--atelier .r20-hero-media{background:#0c0e11}
  html[data-theme="dark"] .r20-hero--atelier .r20-hero-media::after{
    background:linear-gradient(90deg,rgba(12,14,17,.9) 0%,rgba(12,14,17,.58) 44%,rgba(12,14,17,.14) 70%,transparent 88%),
      linear-gradient(180deg,rgba(12,14,17,.25) 0%,transparent 30%,transparent 60%,rgba(12,14,17,.4) 100%);
  }
  .r20-hero--atelier .r20-hero-copy{
    left:clamp(16px,5vw,28px);right:clamp(16px,5vw,28px);
    top:42%;transform:translateY(-50%);
    width:auto;max-width:22rem;padding:0;
  }
  .r20-hero h1{font-size:clamp(1.85rem,8.2vw,2.55rem);margin:0 0 .55rem}
  .r20-pitch{font-size:clamp(.98rem,3.6vw,1.12rem);margin:0 0 .85rem}
  /* Compact mobile copy: eyebrow + H1 + one line + CTA */
  .r20-hero--atelier .r20-pitch-sub,
  .r20-hero--atelier .r19-availability,
  .r20-hero--atelier .r19-actions .text-link{display:none}
  .r20-hero .r19-actions{margin-bottom:0}
  .r20-hero .r19-actions .btn{width:auto;min-width:0}
  /* Keep Pause + concept label clear of sticky Private MVP bar */
  .r20-hero-media figcaption{left:10px;right:10px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:3}
}
@media (max-width:420px){
  .r20-hero--atelier .r20-hero-media{height:min(78svh,680px);min-height:500px}
  .r20-hero--atelier .r20-hero-media video,
  .r20-hero--atelier .r20-hero-media img{transform:scale(1.12);transform-origin:70% 40%;object-position:70% 40%}
  .r20-hero-media figcaption{font-size:.68rem;gap:.5rem;bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .r20-hero-media figcaption span{padding:.25rem .55rem}
  .r20-hero--atelier .r20-hero-copy{top:38%;max-width:18.5rem}
  .r20-hero .r19-actions .btn{width:auto}
}
@media (max-width:900px) and (max-height:700px){
  .r20-hero--atelier .r20-hero-media{height:min(88svh,640px);min-height:440px}
}

/* ——— Moving drawing bands (alternate text sides) ——— */
.r20-band{padding:clamp(20px,4vw,56px) 0}
.r20-band-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,4vw,64px);align-items:center}
.r20-band--text-left .r20-band-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.r20-band--text-left .r20-band-copy{order:1}
.r20-band--text-left .r20-band-media{order:2}
.r20-band-media{margin:0;min-width:0}
.r20-band-copy{min-width:0;max-width:30rem}
.r20-band--text-right .r20-band-copy{justify-self:start}
.r20-band--text-left .r20-band-copy{justify-self:start}
.r20-band-fig{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--r20-accent);margin:0 0 .6rem;font-weight:650}
.r20-band-title{font-size:clamp(1.6rem,2.8vw,2.5rem);line-height:1.08;letter-spacing:-.04em;font-weight:650;margin:0 0 .7rem;color:var(--r20-ink)}
.r20-band-text{font-size:1.02rem;line-height:1.6;color:var(--r20-muted);margin:0}
.r20-band-link{margin:.75rem 0 0}
@media (max-width:760px){
  .r20-band-grid,.r20-band--text-left .r20-band-grid{grid-template-columns:1fr;gap:14px}
  .r20-band--text-left .r20-band-copy,.r20-band--text-left .r20-band-media{order:0}
  .r20-band-copy{max-width:none}
}

/* Loops: white drawing field melts into the cream page in light mode.
   Dark mode keeps concept-loops.css invert + screen (higher specificity wins). */
.r20-loop-frame{position:relative}
.r20-band .concept-loop,.r20-cycle .concept-loop{mix-blend-mode:multiply;background:transparent}
html[data-theme="dark"] .r20-band .concept-loop,html[data-theme="dark"] .r20-cycle .concept-loop{mix-blend-mode:screen}
.r20-loop-frame [data-loop-pause]{position:absolute;right:6px;bottom:6px;z-index:3;font-size:.72rem;padding:.3rem .65rem;min-height:32px;opacity:.72;background:var(--r20-card);color:var(--r20-ink);border-color:var(--r20-line)}
.r20-loop-frame [data-loop-pause]:hover,.r20-loop-frame [data-loop-pause]:focus-visible{opacity:1}

/* ——— 2. CYCLE: One property. The whole story. ——— */
.r20-cycle{padding:clamp(28px,5vw,80px) 0;background:var(--r20-bg)}
.r20-cycle .r19-kicker{margin-bottom:.5rem}
.r20-cycle-stage{position:relative;max-width:1240px;margin:0 auto}
.r20-cycle-stage .concept-loop{width:100%;height:auto}
.r20-cycle-title{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:2}
.r20-cycle-title h2{
  margin:0;text-align:center;color:var(--r20-ink);
  font-size:clamp(1.45rem,5.4vw,4.9rem);line-height:1;letter-spacing:-.05em;font-weight:700;
  padding:.55em .9em;
  background:radial-gradient(ellipse closest-side at center, rgba(247,244,239,.97) 0%, rgba(247,244,239,.93) 58%, rgba(247,244,239,.6) 80%, rgba(247,244,239,0) 100%);
}
.r20-cycle-title h2 span{display:block;font-style:italic;color:var(--r20-accent)}
html[data-theme="dark"] .r20-cycle-title h2{background:radial-gradient(ellipse closest-side at center, rgba(12,14,17,.96) 0%, rgba(12,14,17,.92) 58%, rgba(12,14,17,.55) 80%, rgba(12,14,17,0) 100%)}
.r20-cycle-caption{max-width:44rem;margin:1rem auto 0;text-align:center;color:var(--r20-muted);font-size:1rem;line-height:1.6}
@media (max-width:520px){
  .r20-cycle-title h2{padding:.5em .7em;letter-spacing:-.04em}
  .r20-cycle-caption{text-align:left}
}

/* ——— 3. BUILDER: same content width as every other section (undo rad19b 100vw bleed) ——— */
.r20-builder{padding:clamp(24px,4vw,56px) 0}
.r20-builder .r20-archetype-shell{width:100%;max-width:none;margin:0;border-radius:24px;overflow:hidden;border:1px solid var(--r20-line);background:var(--r20-card)}
.r20-builder #fuller-archetype-mount{width:100%}
.r20-builder .fuller-archetype-section.archetype-explorer{width:100%;max-width:none;margin:0;border-radius:0}
.r20-builder .fuller-archetype-section .section-shell,
.r20-builder .archetype-explorer-shell{width:auto !important;max-width:none !important;margin:0 !important;padding-left:var(--r20-shell-pad) !important;padding-right:var(--r20-shell-pad) !important;box-sizing:border-box}
.r20-builder .rad-archetype-honesty{width:auto;margin:0;padding:12px clamp(16px,3.2vw,44px) 16px;box-sizing:border-box;color:var(--r20-muted)}
@media (max-width:700px){
  .r20-builder .r20-archetype-shell{border-radius:16px}
  .r20-builder .archetype-explorer{padding-top:44px}
}

/* ——— 5. EXPLORE THE WORK (suites) ——— */
.r20-explore h2{margin:0 0 .5rem}
.r20-suite-stack{display:grid;gap:18px}
.r20-suite-card{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(18px,3vw,44px);padding:clamp(18px,2.4vw,32px);border-radius:22px;border:1px solid var(--r20-line);background:var(--r20-card);color:var(--r20-ink)}
.r20-suite-card--core{border:2px solid var(--r20-accent);background:linear-gradient(135deg,var(--r20-accent-soft),transparent 60%),var(--r20-card);box-shadow:0 24px 48px -32px rgba(15,110,91,.45)}
.r20-suite-kind{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 .35rem}
.r20-suite-kind .r19-suite-code{font-size:.8rem;font-weight:700;letter-spacing:.1em;color:var(--r20-accent)}
.r20-core-badge{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;background:var(--r20-accent);color:#fff;border-radius:999px;padding:.2rem .55rem;font-weight:650}
html[data-theme="dark"] .r20-core-badge{color:#0c0e11}
.r20-suite-head h3{font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.035em;line-height:1.1;margin:0 0 .6rem}
.r20-suite-head h3 span{display:block;font-size:.55em;letter-spacing:-.01em;color:var(--r20-muted);font-weight:550;margin-top:.25rem}
.r20-suite-what{margin:0 0 .75rem;line-height:1.6;color:var(--r20-ink)}
.r20-suite-count{margin:0 0 .9rem;font-size:.82rem;color:var(--r20-muted)}
.r20-suite-head .btn{border:1px solid var(--r20-line);color:var(--r20-ink);white-space:normal;text-align:left}
.r20-tool-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;align-content:start}
.r20-tool-list li{border-bottom:1px solid var(--r20-line)}
.r20-tool-list li:last-child{border-bottom:0}
.r20-suite-card .r20-tool-list a{display:grid;grid-template-columns:4.6rem minmax(0,1fr);gap:.85rem;align-items:baseline;justify-content:initial;padding:.7rem .4rem;min-height:44px;border-radius:.5rem;text-decoration:none;color:inherit}
.r20-suite-card .r20-tool-list a:hover,.r20-suite-card .r20-tool-list a:focus-visible{background:var(--r20-accent-soft)}
.r20-tool-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;font-weight:700;letter-spacing:.04em;color:var(--r20-accent);background:var(--r20-accent-soft);border-radius:6px;padding:.15rem .4rem;justify-self:start}
.r20-tool-text{line-height:1.45}
.r20-tool-text strong{font-weight:650;margin-right:.35rem}
.r20-tool-text span{color:var(--r20-muted)}
.r20-explore-foot{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;align-items:center;margin:1.25rem 0 0;color:var(--r20-muted);font-size:.9rem}
@media (max-width:860px){
  .r20-suite-card{grid-template-columns:1fr}
}
@media (max-width:420px){
  .r20-suite-card .r20-tool-list a{grid-template-columns:1fr;gap:.25rem}
}

/* ——— 7. FROM FIRST DEAL TO EVERYDAY USE ——— */
.r20-journey h2{margin:0 0 .5rem}
.r20-journey-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:none}
.r20-step{position:relative;border:1px solid var(--r20-line);border-radius:20px;padding:22px 22px 18px;background:var(--r20-card);color:var(--r20-ink);display:flex;flex-direction:column}
.r20-step-num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;color:var(--r20-muted);letter-spacing:.08em}
.r20-step h3{font-size:clamp(1.4rem,2vw,1.8rem);letter-spacing:-.035em;margin:.35rem 0 .2rem}
.r20-step-plain{font-weight:650;margin:0 0 .5rem;color:var(--r20-accent)}
.r20-step p{line-height:1.55;margin:0 0 .75rem}
.r20-step p:not(.r20-step-plain):not(.r20-step-tools){color:var(--r20-muted)}
.r20-step-tools{margin-top:auto !important;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;color:var(--r20-muted);border-top:1px solid var(--r20-line);padding-top:.6rem}
.r20-step-tools span{font-family:inherit;font-weight:700;color:var(--r20-ink);margin-right:.35rem}
.r20-journey-note{margin:1.1rem 0 0;font-size:.88rem;color:var(--r20-muted)}
@media (max-width:980px){ .r20-journey-steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .r20-journey-steps{grid-template-columns:1fr} }

/* ——— 9. EXPLORE THE DESKS: left-aligned, bigger text cards, viewer directly under ——— */
.r20-desks .interfaces-intro,
.interfaces-section.r20-desks .interfaces-intro{width:var(--r20-wrap);max-width:none;margin:0 auto 18px;padding:clamp(36px,5vw,64px) 0 0;text-align:left}
.r20-desks .interfaces-intro h2{margin:0 0 .6rem}
.r20-desks .interfaces-intro p{max-width:44rem}
.r20-desks .interface-grid{padding:18px 0 36px}
.r20-desks .interface-grid .suite-filters{width:var(--r20-wrap);max-width:none;margin:0 auto;padding:0 0 12px}
.r20-desks .interface-grid .stage,
.r20-desks .interface-grid.is-detail .stage{width:var(--r20-wrap) !important;max-width:none !important;margin-left:auto !important;margin-right:auto !important;padding:0 0 20px;gap:6px;min-height:0}
/* radical.css forces .is-detail .stage to 100% with !important; the rule above wins by specificity */
.r20-desks .interface-grid.is-detail .backdrop{pointer-events:none;cursor:default}
.r20-desks .interface-grid .strip-edge,
.r20-desks .interface-grid.is-detail .strip-edge{display:none !important}
.r20-desks .interface-grid.is-detail .strip-wrap{margin:0;padding:0;max-height:none;overflow:visible}
.r20-desks .interface-grid.is-detail .strip-scroller{padding:8px 2px 14px;margin:0;scrollbar-width:thin;scroll-padding-left:2px}
.r20-desks .interface-grid.is-detail .strip-scroller::-webkit-scrollbar{display:block;height:6px}
.r20-desks .interface-grid.is-detail .strip-scroller::-webkit-scrollbar-thumb{background:rgba(32,39,34,.22);border-radius:6px}
.r20-desks .interface-grid.is-detail .tile-rail{gap:16px}
.r20-desks .interface-grid.is-detail .tile-rail::before,
.r20-desks .interface-grid.is-detail .tile-rail::after{display:none;content:none}
/* Bigger cards */
.r20-desks .interface-grid.is-detail:not(.is-strip-fill) .tile-rail > .tile{flex:0 0 clamp(200px,19vw,250px);width:clamp(200px,19vw,250px);min-width:0}
.r20-desks .interface-grid.is-detail .tile-rail > .tile,
.r20-desks .interface-grid.is-detail .tile{min-height:190px;padding:14px 14px 14px;border-radius:18px}
.r20-desks .interface-grid.is-detail .tile .tile-suite{font-size:10px;letter-spacing:.14em;top:0}
.r20-desks .interface-grid.is-detail .tile .tile-ops{font-size:12px;top:16px;left:4px;right:4px}
.r20-desks .interface-grid.is-detail .tile .tile-code{font-size:clamp(42px,4vw,58px);top:47%}
.r20-desks .interface-grid.is-detail .tile .tile-name,
.r20-desks .interface-grid.is-detail .tile .tile-title{font-size:13px;line-height:1.3}
.r20-desks .interface-grid.is-detail .tile:not(.is-selected){opacity:.55}
/* No Back control, no toolbar, no dead gap between the cards and the big viewer */
.r20-desks .interface-grid .detail-toolbar,
.r20-desks .interface-grid .detail-close{display:none !important}
.r20-desks .interface-grid .detail{gap:0}
.r20-desks .interface-grid .features{padding-top:0}
/* Overview PNGs carry ~5.2% transparent padding (129/2500) above and left of the browser frame;
   pull the frame up/left so it sits right under the cards on the common left edge. */
.r20-desks .interface-grid .spotlight-stage{margin-top:-5.16%;margin-left:-5.16%;width:100%}
@media (max-width:900px){
  .r20-desks .interface-grid .features{padding-top:12px}
}
@media (max-width:700px){
  /* Phone: horizontal carousel bleeds to the right screen edge, readable cards */
  .r20-desks .interface-grid.is-detail .strip-scroller{margin-right:-24px;padding-right:24px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .r20-desks .interface-grid.is-detail .tile-rail > .tile{scroll-snap-align:start}
  .r20-desks .interface-grid.is-detail:not(.is-strip-fill) .tile-rail > .tile{flex:0 0 clamp(190px,62vw,250px);width:clamp(190px,62vw,250px)}
  .r20-desks .interface-grid.is-detail .tile-rail > .tile,
  .r20-desks .interface-grid.is-detail .tile{min-height:176px}
  .r20-desks .interface-grid .suite-filters{flex-wrap:nowrap;overflow-x:auto;margin-right:auto;padding-bottom:10px;scrollbar-width:none}
  .r20-desks .interface-grid .suite-filters::-webkit-scrollbar{display:none}
  .r20-desks .interface-grid .suite-filter{flex:0 0 auto}
}
html[data-theme="dark"] .r20-desks .interface-grid.is-detail .strip-scroller::-webkit-scrollbar-thumb{background:rgba(238,244,232,.25)}

/* ——— 11. BECOME A FIRST USER ——— */
.r20-first-user{padding:clamp(40px,6vw,88px) 0}
.r20-first-user h2{font-size:clamp(2.2rem,4.6vw,4rem);letter-spacing:-.05em;line-height:1.02;margin:0 0 1rem}
.r20-first-user .signup-copy > p{line-height:1.6;max-width:32rem}
.r20-honesty-list{list-style:none;margin:1rem 0 1.25rem;padding:0;display:grid;gap:.45rem;max-width:32rem}
.r20-honesty-list li{position:relative;padding-left:1.5rem;line-height:1.5}
.r20-honesty-list li::before{content:"";position:absolute;left:0;top:.5em;width:.6rem;height:.6rem;border-radius:50%;background:var(--r20-accent)}
.r20-first-user .r19-form-panel{min-width:0}
.r20-first-user .form-row{min-width:0}
.r20-first-user input,.r20-first-user select,.r20-first-user textarea{max-width:100%;box-sizing:border-box}
@media (max-width:520px){
  .r20-first-user .r19-form-panel{padding:1rem}
  .r20-first-user .form-row{display:grid;grid-template-columns:1fr;gap:.75rem}
}
/* #founding-confirm stays reachable as an alias note; visible only when targeted */
.r20-alias-note:not(:target){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.r20-alias-note:target{padding:1rem 0 0;font-size:.9rem;color:var(--r20-muted)}

/* ——— 12. FAQ ——— */
.r20-faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,4vw,64px);align-items:start}
.r20-faq-head{position:sticky;top:110px}
.r20-faq-head h2{margin:0 0 .75rem}
.r20-faq-head p{color:var(--r20-muted);line-height:1.6}
.r20-faq-list{border-top:1px solid var(--r20-line)}
.r20-faq-item{border-bottom:1px solid var(--r20-line)}
.r20-faq-item > summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;min-height:56px;padding:.9rem .25rem;font-weight:650;font-size:1.05rem;color:var(--r20-ink)}
.r20-faq-item > summary::-webkit-details-marker{display:none}
.r20-faq-item > summary::after{content:"+";flex:0 0 auto;font-size:1.4rem;line-height:1;color:var(--r20-accent);transition:transform .2s}
.r20-faq-item[open] > summary::after{transform:rotate(45deg)}
.r20-faq-answer{padding:0 .25rem 1.1rem;color:var(--r20-muted);line-height:1.65;max-width:44rem}
.r20-faq-answer p{margin:0 0 .6rem}
.r20-faq-answer ul{margin:.25rem 0 .5rem;padding-left:1.1rem;display:grid;gap:.3rem}
.r20-faq-answer strong{color:var(--r20-ink)}
@media (max-width:860px){
  .r20-faq-grid{grid-template-columns:1fr}
  .r20-faq-head{position:static}
}

/* ——— Go deeper (films + drawing index + museum) ——— */
.r20-depth{padding-top:1rem}
.r20-depth-title{font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.04em;margin:0 0 1rem}
.r20-depth details{background:var(--r20-card);border-color:var(--r20-line);color:var(--r20-ink)}
.r20-film-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:.9rem}
.r20-film{display:block;border:1px solid var(--r20-line);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;background:var(--r20-bg)}
.r20-film img{display:block;width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover}
.r20-film span{display:grid;gap:.15rem;padding:.6rem .75rem}
.r20-film small{color:var(--r20-muted)}
.r20-depth .summary-meta{font-weight:400;color:var(--r20-muted);font-size:.85rem;margin-left:.5rem}
@media (max-width:520px){ .r20-depth .summary-meta{display:block;margin:.2rem 0 0} }

/* ——— Dark mode for rad19 surfaces reused on the main path ——— */
html[data-theme="dark"] .r20-first-user.r19-contact{background:linear-gradient(180deg,#11151a,#0c0e11)}
html[data-theme="dark"] .r20-first-user .r19-form-panel{background:var(--r20-card);border-color:var(--r20-line);color:var(--r20-ink)}
html[data-theme="dark"] .r20-hero .r19-availability,
html[data-theme="dark"] .r19-kicker{color:var(--r20-muted)}

/* ——— Phone safety: no horizontal scroll ——— */
@media (max-width:420px){
  #main h2{letter-spacing:-.035em}
  .r19-kicker{font-size:.68rem}
}

/* Hidden-not-deleted sections (Find your fit persona picker, connected example, 1-2-3 cards) */
.r20-hidden-archive,.r20-hidden-archive [hidden]{display:none !important}

/* Section headline scale (bare h2 falls back to 24px UA size) */
.r20-explore h2,.r20-journey h2,.r20-faq h2,.r20-desks .interfaces-intro h2{
  font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.04;letter-spacing:-.05em;font-weight:600;color:var(--r20-ink);margin:0 0 .6rem
}
.r20-builder .archetype-explorer-heading h2{
  font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.04;letter-spacing:-.05em;font-weight:600;margin:.55rem 0 0;max-width:18ch;color:var(--r20-ink)
}
@media (max-width:420px){
  .r20-explore h2,.r20-journey h2,.r20-faq h2,.r20-desks .interfaces-intro h2{font-size:2rem}
  .r20-builder .archetype-explorer-heading h2{font-size:2.05rem}
}

/* Builder on tablet/phone: the bundle bleeds volume/tabs/stage to 100vw; keep them inside the card edges instead */
@media (max-width:820px){
  .r20-builder .archetype-volume-control,
  .r20-builder .archetype-tabs,
  .r20-builder .archetype-stage{margin-inline:calc(-1 * var(--r20-shell-pad))}
  .r20-builder .archetype-volume-control,
  .r20-builder .archetype-tabs,
  .r20-builder .archetype-visual{padding-inline:var(--r20-shell-pad)}
}
.r20-honesty-list{max-width:34rem;margin-inline:auto;text-align:left}
@media (max-width:760px){.r20-honesty-list{max-width:none}.r20-honesty-list li{text-align:left}}
@media (max-width:560px){
  .r20-film-grid{grid-template-columns:1fr 1fr;gap:10px}
  .r20-film span{padding:.5rem .6rem;font-size:.9rem}
  .r20-film small{font-size:.72rem;line-height:1.35}
}
/* Footer nav wraps instead of running off-screen */
.footer-bottom nav{flex-wrap:wrap;row-gap:.55rem;column-gap:1.1rem}
.footer-bottom nav a{white-space:nowrap}
/* Operator-only note stays in source, not on the page */
.implementation-note{display:none}