/* DESIGN.md → Verified middle reference (2026-10-24): source-measured em
   geometry uses --reference-unit. Paint/type/radii/borders retain named tokens.
   This module replaces the earlier approximate DeFi/carousel/download/tab layout. */
.mid-section{position:relative;padding:calc(.375 * var(--reference-unit)) calc(.75 * var(--reference-unit));overflow:hidden;background:var(--color-carbon);font-size:var(--reference-unit)}
.mid-panel{position:relative;background:var(--surface-paper-white);border-radius:var(--radius-cards-elevated);overflow:hidden;color:var(--color-carbon)}
/* DO 3/4/6: 1px Carbon, radius1600, Aeonik700/.030. Measured source body15 scaling. */
.mid-button{font-size:calc(.9375 * var(--reference-unit));font-weight:var(--font-weight-bold);line-height:var(--leading-heading);letter-spacing:var(--tracking-button);padding:1em 2em;border:var(--border-standard);border-radius:var(--radius-buttons)}
.mid-button-row{display:flex;justify-content:center;align-items:center;gap:calc(.75 * var(--reference-unit));flex-wrap:wrap}
.mid-button-row .mid-button{min-height:calc(4.2 * var(--reference-unit))}
.mid-download{gap:.6em;padding-left:.6em}
.mid-download .chrome-icon{width:3em;height:3em}
/* Aeonik heading64/1 scaled from the existing 16px unit, medium500. */
.mid-title{font-family:var(--font-aeonik-pro);font-size:calc(4 * var(--reference-unit));font-weight:var(--font-weight-medium);line-height:var(--leading-heading);letter-spacing:-.01em;text-align:center;margin:0}
/* Source Lateral160 (10 units), medium110 (6.875 units), weight800/.8.
   Source's real variable slnt axis is retained rather than synthetic italics. */
.mid-display{font-family:var(--font-lateral);font-size:calc(10 * var(--reference-unit));font-weight:var(--font-weight-extrabold);line-height:var(--leading-display);letter-spacing:normal;text-transform:uppercase;font-synthesis:none;padding-top:.08em;margin:0 0 -.1em}
.mid-italic{font-variation-settings:"slnt" 100}
/* Source DeFi: panel10.35 × 7.29 units, inner75, row gap10, title gap6. */
.defi-panel{padding:calc(10.35 * var(--reference-unit)) calc(7.29 * var(--reference-unit))}
.defi-inner{width:100%;max-width:calc(75 * var(--reference-unit));margin-inline:auto}
.defi-rows{display:flex;flex-direction:column;gap:calc(10 * var(--reference-unit));margin-top:calc(6 * var(--reference-unit))}
.mid-section .defi-row{display:flex;align-items:flex-start;justify-content:space-between;gap:0;margin:0}
.mid-section .defi-art{width:calc(33.75 * var(--reference-unit));max-width:none;height:auto;border:0;border-radius:0;order:0}
.mid-section .defi-row-reversed .defi-art{order:2}
.mid-section .defi-copy{width:calc(32 * var(--reference-unit));max-width:45%;display:flex;flex-direction:column;align-items:flex-start;gap:calc(3.33 * var(--reference-unit));padding:0;min-width:0}
.mid-section .defi-copy h3{margin:0 0 -.1em} /* Source h-l optical margin survives the legacy h3 reset. */
.mid-section .defi-copy p,.mid-section .defi-copy .mid-button{margin:0}
.mid-section .defi-copy p,.mid-section .platform-copy p{font-size:calc(1.5 * var(--reference-unit));line-height:var(--leading-subheading);letter-spacing:-.01em;font-weight:var(--font-weight-medium)}
/* Feature cards: four26-unit squares, alternating top/bottom titles and artwork.
   DO 2/3/4/5: source palette, 1px outline, existing30px radius, sticker/title pair. */
.features-panel{padding:calc(11.25 * var(--reference-unit)) calc(3 * var(--reference-unit)) calc(6.25 * var(--reference-unit))}
.feature-heading{max-width:calc(60 * var(--reference-unit));margin:0 auto calc(5 * var(--reference-unit));display:flex;flex-direction:column;align-items:center;gap:calc(2 * var(--reference-unit))}
.mid-section .feature-carousel{position:relative}
.mid-section .feature-track{display:flex;position:relative;width:100%;height:calc(26 * var(--reference-unit));overflow:visible;gap:calc(1 * var(--reference-unit));scroll-snap-type:none;touch-action:pan-y;cursor:grab;user-select:none}
.mid-section .feature-track.is-dragging{cursor:grabbing}
.mid-section .feature-card{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex:none;width:calc(26 * var(--reference-unit));height:calc(26 * var(--reference-unit));min-height:0;margin:0;padding:calc(1.875 * var(--reference-unit));border:var(--border-standard);border-radius:var(--radius-body);color:var(--color-carbon);overflow:hidden;scroll-snap-align:none}
.mid-section .feature-card.feature-bottom{justify-content:flex-end}
.mid-section .feature-sunburst{background:var(--color-sunburst)}
.mid-section .feature-blue{background:var(--color-electric-blue)}
.mid-section .feature-lavender{background:var(--color-lavender)}
.mid-section .feature-ember{background:var(--color-ember)}
.mid-section .feature-card h3{position:relative;z-index:1;font-family:var(--font-lateral);font-size:calc(6.875 * var(--reference-unit));font-weight:var(--font-weight-extrabold);line-height:var(--leading-display);font-variation-settings:"slnt" 100;text-transform:uppercase;letter-spacing:normal;font-synthesis:none;margin:0 0 -.1em;padding-top:.08em}
.mid-section .feature-art{position:absolute;inset:auto calc(.5 * var(--reference-unit)) calc(.5 * var(--reference-unit)) auto;width:calc(12 * var(--reference-unit));height:calc(12 * var(--reference-unit));margin:0;transform:none}
.mid-section .feature-bottom .feature-art{inset:0 0 auto auto}
.mid-section .slider-controls{position:relative;display:flex;justify-content:center;align-items:center;gap:calc(.625 * var(--reference-unit));margin-top:calc(5 * var(--reference-unit))}
.mid-section .slider-dots{display:flex;gap:calc(.625 * var(--reference-unit))}
.mid-section .slider-dot{width:max(calc(.5 * var(--reference-unit)),var(--spacing-8));height:max(calc(.5 * var(--reference-unit)),var(--spacing-8));min-height:0;padding:0;border:var(--border-standard);border-radius:var(--radius-buttons);background:var(--color-soft-mist)}
.mid-section .slider-dot[aria-current="true"]{background:var(--color-carbon)}
/* Keyboard users retain previous/next/pause controls without adding source-visible chrome. */
.mid-section .feature-arrow,.mid-section .feature-pause{position:absolute;clip-path:inset(50%);width:var(--border-width);height:var(--border-width);padding:0;overflow:hidden;white-space:nowrap}
.mid-section .feature-arrow:focus-visible,.mid-section .feature-pause:focus-visible{clip-path:none;width:var(--spacing-40);height:var(--spacing-40);overflow:visible;z-index:2;background:var(--color-paper-white)}
.mid-section [data-feature-prev]:focus-visible{left:0}.mid-section [data-feature-next]:focus-visible{right:0}.mid-section .feature-pause:focus-visible{right:var(--spacing-48)}
/* GetSlush is the verified decorative card-link exception: all six palette colors
   on Carbon, not ordinary CTA fills. Existing cards30 / border1; no shadows/gradient. */
.download-band.mid-band{position:relative;display:block;background:var(--color-carbon);padding:calc(18.75 * var(--reference-unit)) 0;color:var(--color-carbon);overflow:hidden;font-size:var(--reference-unit)}
.mid-band .band-composition{position:relative;display:flex;flex-direction:column;align-items:stretch;width:100%;gap:calc(1.25 * var(--reference-unit));transform:none}
.mid-band .band-row{width:100%;overflow:hidden;position:relative}
.mid-band .band-row-portrait{display:none}
.mid-band .band-track{display:flex;width:max-content;position:relative;will-change:transform;gap:0;padding:0;animation:none}
.mid-band .band-group{display:flex;flex:none;min-width:100vw}
.mid-band .band-link{position:relative;flex:none;display:grid;font-size:calc(.9375 * var(--reference-unit));margin-inline:.75em;padding:0;color:var(--color-carbon);perspective:500px;transform-style:preserve-3d;border:0;border-radius:var(--radius-body);line-height:var(--leading-heading);white-space:nowrap}
.mid-band .band-face,.mid-band .band-back{grid-area:1/1;display:flex;align-items:center;justify-content:center;padding:1em 2em;background:var(--band-color,var(--color-paper-white));border:var(--border-standard);border-radius:var(--radius-body);backface-visibility:hidden}
.mid-band .band-face>span,.mid-band .band-back>span{display:block;font-family:var(--font-lateral);font-size:18.75em;font-weight:var(--font-weight-extrabold);line-height:var(--leading-display);letter-spacing:normal;padding-top:.08em;margin-bottom:-.1em;font-synthesis:none}
.mid-band .band-slanted .band-face>span{font-variation-settings:"slnt" 100;padding-right:.05em}
.mid-band .band-back{opacity:0;pointer-events:none;background:var(--color-paper-white)}
.mid-band .band-white{--band-color:var(--color-paper-white)}.mid-band .band-ember{--band-color:var(--color-ember)}.mid-band .band-blue{--band-color:var(--color-electric-blue)}.mid-band .band-sunburst{--band-color:var(--color-sunburst)}.mid-band .band-mint{--band-color:var(--color-mint-pop)}.mid-band .band-lavender{--band-color:var(--color-lavender)}
.mid-band .sticker-art{position:absolute;z-index:2;height:auto;aspect-ratio:1}
.mid-band .band-rocket{width:calc(15 * var(--reference-unit));top:calc(-5 * var(--reference-unit));left:calc(12.5 * var(--reference-unit));transform:none}
.mid-band .band-smiley{width:calc(9 * var(--reference-unit));top:50%;right:calc(2 * var(--reference-unit));transform:translateY(-50%)}
.mid-band .band-wallet{width:calc(17 * var(--reference-unit));bottom:0;right:calc(8 * var(--reference-unit));transform:translateY(50%)}
.mid-band .band-coin{width:calc(16 * var(--reference-unit));bottom:0;left:calc(6 * var(--reference-unit));top:auto;transform:translateY(50%)}
/* Platforms: source75-unit composition, 33.75-unit artwork, 8-unit column gap.
   DO 3/4/6: pill nav1600, Carbon1, bold Aeonik; source large heading + real imagery. */
.platforms-panel{padding:calc(11.25 * var(--reference-unit)) calc(3 * var(--reference-unit))}
.platform-heading{max-width:calc(54.5 * var(--reference-unit));margin:0 auto calc(5 * var(--reference-unit));display:flex;flex-direction:column;align-items:center;gap:calc(2 * var(--reference-unit))}
.mid-section .platform-tabs{display:flex;align-items:center;justify-content:center;gap:calc(3.375 * var(--reference-unit));width:max-content;max-width:100%;padding:calc(.25 * var(--reference-unit));margin:0;border:var(--border-standard);border-radius:var(--radius-nav);background:var(--color-paper-white)}
.mid-section .platform-tab{padding:1em 2em;font-size:calc(.9375 * var(--reference-unit));line-height:var(--leading-subheading);letter-spacing:var(--tracking-button);background:var(--color-paper-white)}
.mid-section .platform-tab[aria-selected="true"]{background:var(--color-carbon);color:var(--color-paper-white)}
.mid-section .platform-panels{max-width:calc(75 * var(--reference-unit));margin:auto}
.mid-section .platform-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(8 * var(--reference-unit));align-items:start;margin:0;padding:0}
.mid-section .platform-media{position:relative;aspect-ratio:1;min-height:0;width:100%;height:auto;overflow:hidden;border:var(--border-standard);border-radius:var(--radius-cards);background:var(--color-lavender);padding:0}
.mid-section .platform-media-web{background:var(--color-sunburst)}.mid-section .platform-media-extension{background:var(--color-mint-pop)}
.mid-section .platform-pattern{position:absolute;width:calc(32 * var(--reference-unit));height:auto;max-width:none;top:50%;left:50%;transform:translate(-50%,-50%);opacity:.7;color:var(--color-paper-white);overflow:visible}
.mid-section .platform-media img{position:absolute;width:100%;height:100%;max-width:none;max-height:none;inset:0;object-fit:cover}
.mid-section .platform-copy{display:flex;flex-direction:column;align-items:flex-start;gap:calc(3 * var(--reference-unit));padding:0;min-width:0}
.mid-section .platform-copy h3{font-family:var(--font-lateral);font-size:calc(10 * var(--reference-unit));font-weight:var(--font-weight-extrabold);line-height:var(--leading-display);font-variation-settings:"slnt" 100;margin:0 0 -.1em}
.mid-section .platform-copy p,.mid-section .platform-copy .mid-button{margin:0}
@media(max-width:991px){
  /* Source tablet composition; 62px panel vertical is normalized to existing60 token. */
  .defi-panel{padding:var(--spacing-60) var(--spacing-24)}
  .mid-section .defi-row{flex-direction:column;gap:var(--spacing-40)}
  .mid-section .defi-art{width:100%;max-width:none;order:0!important}
  .mid-section .defi-copy{width:100%;max-width:none;gap:var(--spacing-20)}
  .mid-section .feature-card h3{font-size:calc(5 * var(--reference-unit))}
  .mid-section .feature-card{padding:calc(1.25 * var(--reference-unit))}
  .mid-section .platform-panels{max-width:none}
}
@media(max-width:767px){
  /* Source mobile landscape: heading30, display128, native vertical platform flow. */
  .mid-panel{border-radius:var(--radius-cards)}
  .mid-title{font-size:calc(1.875 * var(--reference-unit))}
  .mid-display,.mid-section .platform-copy h3{font-size:calc(8 * var(--reference-unit))}
  .defi-rows{margin-top:calc(3 * var(--reference-unit));gap:calc(6 * var(--reference-unit))}
  .features-panel,.platforms-panel{padding-inline:calc(1.25 * var(--reference-unit))}
  .feature-heading,.platform-heading{margin-bottom:calc(3 * var(--reference-unit))}
  .mid-button-row{flex-direction:column;gap:calc(1 * var(--reference-unit))}
  .mid-button-row .mid-button{min-height:calc(3.75 * var(--reference-unit))}
  .mid-download .chrome-icon{width:2.5em;height:2.5em}
  .mid-section .feature-art{width:75%;height:auto;aspect-ratio:1}
  .mid-band .band-face>span,.mid-band .band-back>span{font-size:10em}
  .mid-section .platform-tabs{flex-wrap:wrap;gap:calc(.5 * var(--reference-unit));width:auto;border:0;padding:0}
  .mid-section .platform-panel{grid-template-columns:1fr;gap:calc(2 * var(--reference-unit))}
  .mid-section .platform-copy{gap:calc(2 * var(--reference-unit));min-height:calc(23 * var(--reference-unit))}
}
@media(max-width:479px){
  /* Portrait source geometry: feature slide80vw with half-unit gutter; third band row. */
  .features-panel,.platforms-panel{padding-block:calc(5 * var(--reference-unit))}
  .mid-display,.mid-section .platform-copy h3{font-size:calc(6.2 * var(--reference-unit))}
  .mid-section .defi-copy p,.mid-section .platform-copy p{font-size:calc(1.25 * var(--reference-unit))}
  .mid-section .feature-track{height:calc(80vw - .5 * var(--reference-unit));gap:calc(.5 * var(--reference-unit))}
  .mid-section .feature-card{width:calc(80vw - .5 * var(--reference-unit));height:calc(80vw - .5 * var(--reference-unit))}
  .mid-section .feature-art{width:65%}
  .download-band.mid-band{padding-block:calc(10 * var(--reference-unit))}
  .mid-band .band-composition{gap:calc(.25 * var(--reference-unit))}
  .mid-band .band-row-portrait{display:block}
  .mid-band .band-link{font-size:calc(.75 * var(--reference-unit));margin-inline:.125em}
  .mid-band .band-face>span,.mid-band .band-back>span{font-size:11.5em}
  .mid-band .band-rocket{width:calc(10 * var(--reference-unit))}
  .mid-band .band-smiley{width:calc(7 * var(--reference-unit));top:calc(-3 * var(--reference-unit));left:calc(1 * var(--reference-unit));right:auto;transform:translateY(-110%)}
  .mid-band .band-wallet{width:calc(13 * var(--reference-unit));right:calc(12 * var(--reference-unit))}
  .mid-band .band-coin{width:calc(12 * var(--reference-unit));bottom:calc(-12 * var(--reference-unit));left:auto;right:0;transform:translateY(150%)}
  .mid-section .platform-tab{padding:.75em 1.25em;font-size:calc(.8203125 * var(--reference-unit))}
  .mid-section .platform-panel{gap:calc(3 * var(--reference-unit));padding-bottom:calc(1.5 * var(--reference-unit))}
  .mid-section .platform-media{order:1}
  .mid-section .platform-copy{min-height:0}
  .platform-copy-break{display:none}
}