@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-ff2310f5.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-875ccdd4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-52306abf.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-001175b1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-98bbbccb.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-mono-f6b33328.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-mono-44e03052.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-mono-0638449e.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-mono-971fb274.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-mono-44745446.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-mono-013b2f2f.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Browser defaults matched to the original design; no CSS framework required. */
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; -webkit-tap-highlight-color: transparent; }
body { font-weight: 400; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; background: transparent; border-radius: 0; }
button { appearance: button; }
img, svg, video, canvas { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
summary { display: list-item; }
[hidden] { display: none !important; }
:root { --font-geist-sans: Geist; --font-geist-mono: "Geist Mono"; }


:root {
  --ink: #f0ead8;
  --muted: #aaa99e;
  --body: #101310;
  --green: #82a37b;
  --brass: #c4a66b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--body); }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--body);
  background-image:
    linear-gradient(#101310d9, #101310d9),
    url('/assets/materials/field-deck-seamless-v2.png');
  background-repeat: repeat;
  background-size: 768px 768px;
  font-family: var(--font-geist-sans), Arial, sans-serif;
}
a { color: inherit; }
img, video { display: block; max-width: 100%; }
.shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.nav {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #55584a88;
}
.brand { font-size: 1.7rem; font-weight: 780; letter-spacing: -0.07em; text-decoration: none; }
.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #d9d7ca;
  font: 600 .72rem/1 var(--font-geist-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.status i { width: 7px; height: 7px; border-radius: 50%; background: #70a674; box-shadow: 0 0 10px #70a674aa; }

.hero {
  min-height: 730px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, .82fr);
  align-items: center;
  gap: clamp(46px, 7vw, 100px);
  padding-block: 76px 92px;
}
.eyebrow {
  margin: 0 0 18px;
  color: var(--brass);
  font: 650 .76rem/1.2 var(--font-geist-mono), monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { max-width: 720px; font-size: clamp(3.35rem, 7vw, 6.0rem); line-height: .9; letter-spacing: -.05em; }
.lede { max-width: 630px; margin: 30px 0 0; color: #c2c0b5; font-size: clamp(1.05rem, 2vw, 1.28rem); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 34px; }
.platform {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 18px;
  border: 1px solid #676b5c;
  border-radius: 5px;
  background: linear-gradient(#30332c, #20231e);
  box-shadow: inset 0 1px #777a6b66, 0 4px 10px #0007;
  font-weight: 650;
}
.text-link { display: inline-flex; align-items: center; gap: 8px; color: #c6c2af; text-underline-offset: 5px; }

.hero-visual { position: relative; min-height: 580px; display: grid; place-items: center; }
.phone {
  position: relative;
  z-index: 2;
  width: min(335px, 82vw);
  aspect-ratio: 1125 / 2436;
  overflow: hidden;
  border: 8px solid #090b09;
  border-radius: 48px;
  background: #090b09;
  box-shadow: 0 34px 80px #000c, inset 0 0 0 1px #7a7d7266;
  transform: rotate(2.2deg);
}
.phone img { width: 100%; height: 100%; object-fit: cover; }
.app-icon {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 22px;
  width: 138px;
  border-radius: 28px;
  box-shadow: 0 24px 52px #000d;
  transform: rotate(-5deg);
}
.signal { position: absolute; border: 1px solid #6f806733; border-radius: 50%; }
.signal-one { width: 520px; height: 520px; }
.signal-two { width: 420px; height: 420px; border-color: #b89c6130; }

.formats { padding-block: 112px; border-top: 1px solid #4c504588; }
.section-heading { max-width: 810px; }
.section-heading h2, .tape-copy h2 { font-size: clamp(2.5rem, 5vw, 4.7rem); line-height: .98; letter-spacing: -.05em; margin-bottom: 20px; }
.section-heading > p:last-child, .tape-copy > p:not(.eyebrow) { max-width: 670px; color: var(--muted); font-size: 1.08rem; line-height: 1.7; }
.era-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 52px; }
.era-card {
  min-height: 188px;
  padding: 22px;
  border: 1px solid #4b5044;
  border-radius: 9px;
  background: linear-gradient(145deg, #292c26e8, #171a17e8);
  box-shadow: inset 0 1px #73786945, 0 12px 24px #0005;
}
.era-year { color: var(--brass); font: 650 .76rem/1 var(--font-geist-mono), monospace; letter-spacing: .14em; }
.era-card h3 { margin-top: 28px; font-size: 1.45rem; letter-spacing: -.035em; }
.era-card p { margin: 10px 0 0; color: #9fa095; line-height: 1.55; }

.tape-story {
  padding-block: 116px;
  background: #24150f url('/assets/library-walnut.png') center / cover;
  box-shadow: inset 0 1px #a071473d, inset 0 50px 90px #0006, inset 0 -50px 90px #0006;
}
.tape-layout { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: clamp(45px, 8vw, 110px); }
.tape-copy > p:not(.eyebrow) { color: #d0bda8; }
.detail-list { display: grid; gap: 12px; margin-top: 28px; }
.detail-list span { display: flex; align-items: center; gap: 11px; color: #eee2cc; font-weight: 570; }
.detail-list svg { color: #a5b995; }
.media-console { min-width: 0; }
.crt { position: relative; width: min(600px, 100%); margin-inline: auto; aspect-ratio: 1; }
.crt video {
  position: absolute;
  z-index: 0;
  left: 8.8%;
  top: 8.1%;
  width: 82.5%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12%;
  background: #000;
}
.crt > img { position: relative; z-index: 1; width: 100%; pointer-events: none; }
.cassette-row { display: flex; justify-content: center; gap: 14px; margin-top: -72px; position: relative; z-index: 2; }
.cassette { width: min(260px, 46%); overflow: hidden; aspect-ratio: 1.78; }
.cassette img { width: 106%; max-width: none; height: 125%; object-fit: cover; transform: translate(-3%, -13%); }
.second { opacity: .72; transform: rotate(1.5deg); }

.footer { min-height: 120px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; color: #929489; border-top: 1px solid #42463d; }
.footer .brand { color: var(--ink); }
.footer p { margin: 0; font-family: var(--font-geist-mono), monospace; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.footer > span:last-child { justify-self: end; font-size: .85rem; }

@media (max-width: 850px) {
  .hero { grid-template-columns: 1fr; padding-top: 65px; }
  .hero-copy { text-align: center; }
  .hero-copy .lede { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-visual { min-height: 590px; }
  .era-grid { grid-template-columns: repeat(2, 1fr); }
  .tape-layout { grid-template-columns: 1fr; }
  .tape-copy { max-width: 700px; }
}

@media (max-width: 560px) {
  .shell { width: min(1180px, calc(100% - 26px)); }
  .nav { height: 72px; }
  .status { font-size: .64rem; }
  .hero { min-height: 0; padding-block: 64px 75px; gap: 34px; }
  h1 { font-size: clamp(3rem, 16vw, 4.7rem); }
  .lede { margin-top: 24px; }
  .hero-visual { min-height: 520px; }
  .phone { width: min(290px, 78vw); border-radius: 42px; }
  .app-icon { width: 104px; left: 2px; }
  .signal-one { width: 360px; height: 360px; }
  .signal-two { width: 300px; height: 300px; }
  .formats, .tape-story { padding-block: 82px; }
  .era-grid { grid-template-columns: 1fr; margin-top: 36px; }
  .era-card { min-height: 160px; }
  .cassette-row { margin-top: -45px; }
  .footer { grid-template-columns: 1fr auto; }
  .footer p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.nav-links, .footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; font-size: .88rem; }
.nav-links a, .footer-links a { text-decoration: none; }
.nav-links a:hover, .footer-links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.footer-links { justify-self: end; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 6px; border-radius: 3px; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 20; padding: 12px; background: var(--ink); color: var(--body); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.release-section { padding-block: 88px; max-width: 850px; }
.release-section h2 { font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -.05em; }
.release-section p:not(.eyebrow) { color: #c2c0b5; line-height: 1.8; margin-block: 24px; }
.info-page { max-width: 850px; padding-block: 80px 100px; }
.info-page h1 { font-size: clamp(3rem, 7vw, 5rem); }
.info-page section { margin-top: 44px; }
.info-page h2 { font-size: 1.7rem; letter-spacing: -.03em; margin-bottom: 16px; }
.info-page p { color: #c2c0b5; line-height: 1.8; }
.info-page a { text-underline-offset: 4px; }
.contact-card { padding: 28px; border: 1px solid #4b5044; background: #242820; border-radius: 9px; }
.contact-card .platform { font-size: clamp(.85rem, 3.6vw, 1rem); overflow-wrap: anywhere; }
.help-section details { border-bottom: 1px solid #4b5044; padding-block: 22px; }
.help-section summary { cursor: pointer; font-weight: 650; line-height: 1.5; }
.help-section details p { margin-bottom: 0; }
@media (max-width: 560px) {
  .nav-links { gap: 14px; }
  .nav-links > a:first-child { display: none; }
  .signal-one { width: min(360px, 100%); height: auto; aspect-ratio: 1; }
  .signal-two { width: min(300px, 90%); height: auto; aspect-ratio: 1; }
  .info-page { padding-block: 56px 72px; }
  .contact-card { padding: 20px; }
  .footer-links { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.crt-video { position: absolute; inset: 0; }
.video-toggle { position: absolute; z-index: 4; bottom: 25%; right: 12%; border: 1px solid #c4a66b88; border-radius: 4px; padding: 8px 12px; background: #101310dd; color: var(--ink); font: 600 .72rem var(--font-geist-mono), monospace; cursor: pointer; }
.video-toggle:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
.phone-video { position: absolute; z-index: 3; top: 22.7%; left: 5.9%; width: 88.3%; height: 30.3%; overflow: hidden; border-radius: 5%; background: #000; }
.phone-video video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.12); }
.phone-video::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, #0002 0px, #0002 1px, transparent 1px, transparent 3px); }
.phone-video::before { content: 'STBY'; position: absolute; z-index: 2; left: 5%; top: 6%; color: #f0ead8; text-shadow: 1px 1px #000; font: 700 .8rem var(--font-geist-mono), monospace; }
.phone-video .video-toggle { bottom: 5%; right: 5%; padding: 5px 8px; font-size: .6rem; }
.hero:has(.hero-television) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(30px, 4vw, 64px); min-height: 760px; }
.hero-television { min-height: 0; isolation: isolate; }
.hero-tv { position: relative; z-index: 2; width: 100%; height: auto; filter: drop-shadow(0 32px 32px #0009); }
@media (max-width: 850px) {
  .hero:has(.hero-television) { grid-template-columns: 1fr; }
  .hero-television { width: min(600px, 100%); margin-inline: auto; }
}
@media (max-width: 560px) {
  .hero:has(.hero-television) { min-height: 0; gap: 46px; }
}
.format-explorer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr); align-items: center; gap: clamp(30px, 7vw, 90px); margin-top: 48px; }
.format-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.format-choice { position: relative; display: grid; gap: 12px; text-align: left; padding: 20px; color: var(--ink); border: 1px solid #4b5044; border-radius: 8px; background: linear-gradient(145deg, #292c26e8, #171a17e8); cursor: pointer; font: inherit; min-height: 155px; }
.format-choice:hover { border-color: #82947a; background: #30392b; }
.format-choice[aria-pressed='true'] { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass), 0 10px 28px #0005; background: #34382b; }
.format-choice:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.format-name { font-weight: 700; font-size: 1.22rem; letter-spacing: -.025em; }
.format-note { color: #b5b7aa; font-size: .87rem; line-height: 1.5; }
.format-indicator { position: absolute; right: 18px; top: 16px; color: var(--brass); }
.format-demo { display: grid; justify-items: center; }
.format-phone { width: min(285px, 100%); transform: rotate(0); }
.format-device-label { position: absolute; top: 14.9%; left: 22%; width: 53%; height: 4.1%; display: flex; align-items: center; padding-left: 5%; background: #252523; color: #e4dfce; font: 600 .7rem var(--font-geist-mono), monospace; z-index: 4; }
.format-date { position: absolute; z-index: 5; top: 49%; left: 10%; color: #eee9cd; font: 700 .65rem var(--font-geist-mono), monospace; text-shadow: 1px 1px #000; pointer-events: none; }
.preview-caption { color: #aaa99e; font-size: .75rem; line-height: 1.6; max-width: 260px; text-align: center; margin-top: 22px; }
.film-bw .format-video video { filter: grayscale(1) contrast(1.55) brightness(.85); }
.super8 .format-video video { filter: sepia(.48) saturate(1.35) contrast(1.12) brightness(1.08); }
.beta .format-video video { filter: saturate(.85) contrast(.92) blur(.6px); }
.vhs .format-video video { filter: saturate(1.4) contrast(1.1) blur(1px); }
.minidv .format-video video { filter: saturate(1.05) contrast(1.2); }
.hi8 .format-video video { filter: saturate(1.2) contrast(1.05) blur(.3px); }
.film-bw .format-video::after, .super8 .format-video::after { background: url('/assets/materials/field-deck-seamless-v2.png') center / 180px; opacity: .13; mix-blend-mode: screen; }
.vhs .format-video::after { background: repeating-linear-gradient(0deg, #0004 0, #0004 1px, transparent 1px, transparent 3px); }
.minidv .format-video::after { opacity: .08; }
@media (max-width: 850px) { .format-explorer { grid-template-columns: 1fr 1fr; gap: 28px; } .format-choices { grid-template-columns: 1fr; } .format-choice { min-height: 0; padding: 16px; gap: 6px; } }
@media (max-width: 560px) { .format-explorer { grid-template-columns: 1fr; } .format-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } .format-choice { padding: 14px; } .format-name { font-size: 1rem; } .format-note { font-size: .78rem; } .format-demo { margin-top: 16px; } }

/* Current app screenshots supplied October 12, 2026. */
.current-camera { aspect-ratio: 282 / 612; border: 4px solid #090b09; border-radius: 30px; }
.current-camera > img { width: 100%; height: auto; object-fit: contain; }
.current-camera .phone-video { top: 18.4%; left: 8%; width: 83.5%; height: 28.8%; border-radius: 4%; }
.current-camera .format-device-label { top: 11.9%; left: 18%; width: 55%; height: 2.8%; padding-left: 5%; font-size: .6rem; }
.current-camera .format-date { top: 41.5%; left: 10%; font-size: .56rem; }
.current-tape-shelf { display: grid; justify-items: center; }
.shelf-app-screen { position: relative; width: min(320px, 100%); overflow: hidden; border: 4px solid #090b09; border-radius: 30px; box-shadow: 0 30px 60px #0009; }
.shelf-app-screen > img { width: 100%; height: auto; }
.shelf-screen-video { position: absolute; top: 16.5%; left: 10.3%; width: 79.4%; height: 27.7%; border-radius: 10%; overflow: hidden; background: #000; }
.shelf-screen-video video { width: 100%; height: 100%; object-fit: cover; }
.shelf-screen-video .video-toggle { bottom: 5%; right: 5%; padding: 5px 8px; font-size: .6rem; }
.shelf-vhs video { filter: saturate(1.4) contrast(1.1) blur(.6px); }
.shelf-vhs::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, #0003 0, #0003 1px, transparent 1px, transparent 3px); box-shadow: inset 0 0 18px #0007; }
.shelf-vhs::before { content: 'SPRING BREAK 1988'; position: absolute; z-index: 2; bottom: 9%; left: 6%; max-width: 65%; color: #eee9cd; text-shadow: 1px 1px #000; font: 700 .62rem var(--font-geist-mono), monospace; }
.shelf-tape-label { position: absolute; top: 47.8%; left: 24%; width: 49%; height: 2.55%; display: flex; justify-content: center; align-items: center; background: #e7dfc6; color: #29251b; font: italic 700 .58rem/1 Georgia, serif; white-space: nowrap; transform: rotate(-1deg); }
.wide-tape-shelf .crt { max-width: 580px; }
.wide-tape-label { position: absolute; z-index: 3; top: 71.1%; left: 31%; width: 39%; height: 5.2%; display: flex; align-items: center; justify-content: center; color: #29251b; font: italic 700 clamp(.65rem, 1.3vw, .9rem) Georgia, serif; }
.crt-action-labels { position: absolute; z-index: 3; top: 81%; left: 5%; width: 90%; height: 10.6%; display: grid; grid-template-columns: repeat(3,1fr); align-items: center; text-align: center; color: #e4dfce; font: 600 clamp(.5rem, 1vw, .7rem)/1.3 var(--font-geist-mono), monospace; letter-spacing: .08em; }
.crt-action-labels > span { display: flex; align-items: center; justify-content: center; height: 100%; }
.tape-box-row { display: flex; justify-content: center; gap: 24px; margin-top: 20px; padding-bottom: 16px; border-bottom: 8px solid #705037; box-shadow: 0 8px 12px #0006; }
.tape-box { position: relative; width: min(165px, 35%); }
.tape-box img { width: 100%; height: auto; }
.tape-box > span { position: absolute; top: 16.5%; left: 13%; width: 61%; height: 11%; background: #e5d9b9; color: #25231b; display: grid; align-content: center; font: 800 clamp(.5rem, 1.2vw, .8rem)/1.1 Arial, sans-serif; }
/* Keep the demo visible over the cabinet's opaque CRT glass. */
.wide-tape-shelf .crt-video { z-index: 2; inset: 8.1% 8.7% auto 8.8%; aspect-ratio: 4 / 3; border-radius: 10%; overflow: hidden; }
.wide-tape-shelf .crt-video video { inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; filter: saturate(1.15) contrast(1.02) brightness(1.12); }
.wide-tape-shelf .shelf-vhs::before { content: none; }
.wide-tape-shelf .shelf-vhs::after { background: repeating-linear-gradient(0deg, #0001 0, #0001 1px, transparent 1px, transparent 3px); box-shadow: inset 0 0 10px #0003; }
.wide-tape-shelf .video-toggle { bottom: 5%; right: 5%; }
@font-face { font-family: TapeMarker; src: url('/assets/fonts/PermanentMarker-Regular.ttf') format('truetype'); font-display: swap; }
.wide-tape-shelf .crt-video { inset: auto; top: 9%; left: 9%; width: 82%; height: 54.5%; aspect-ratio: auto; border-radius: 9% / 10%; }
.wide-tape-shelf .crt-video video { width: 100%; height: 100%; object-fit: cover; }
.wide-tape-label { font-family: TapeMarker, cursive; font-style: normal; font-weight: 400; font-size: clamp(.65rem, 1.25vw, .95rem); transform: rotate(-2deg); }
.tape-box-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.tape-box { width: 100%; filter: drop-shadow(0 8px 7px #0006); }
.tape-box .tape-case-art { clip-path: polygon(11% 8%, 76.5% 6.5%, 89.8% 8.2%, 90.3% 91.7%, 76% 94%, 11.4% 90%); }
.tape-box > .tape-box-title { left: 15.5%; top: 16.5%; width: 57.3%; height: 12.5%; font-size: clamp(.43rem, .9vw, .7rem); background: #ded0af; }
.tape-box .tape-thumbnail { position: absolute; left: 15.5%; top: 30.5%; width: 57.3%; height: 27.7%; object-fit: cover; border-radius: 2px; filter: saturate(.85) contrast(1.05); }
.tape-box > .tape-spine { top: 23%; left: 81%; width: 3.5%; height: 54%; background: transparent; writing-mode: vertical-rl; font: 400 clamp(.35rem, .7vw, .55rem) TapeMarker, cursive; color: #29251b; }
@media (max-width: 560px) { .tape-box-row { gap: 0; } .tape-box > .tape-box-title { font-size: clamp(.35rem, 1.8vw, .55rem); } }

.tape-box .tape-case-art { clip-path: none; }
/* Let the page texture continue behind the TV and tapes. */
.tape-story { background: transparent; box-shadow: none; border-top: 1px solid #42463d; }
.tape-copy > p:not(.eyebrow) { color: var(--muted); }
.tape-box-row { background: transparent; border-bottom: 0; box-shadow: none; }
.tape-box { filter: none; }
.tape-box { cursor: pointer; text-align: left; border-radius: 3px; }
.tape-box:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
.tape-box[aria-pressed='true'] { filter: drop-shadow(0 0 5px #c4a66b55); }
.format-more { grid-column: 1; grid-row: 2; color: var(--muted); font-size: .95rem; line-height: 1.7; margin-top: -24px; }
.format-explorer > .format-demo { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 560px) { .format-more { margin-top: 0; } .format-explorer > .format-demo { grid-column: 1; grid-row: 3; } }
.store-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; scroll-margin-top: 24px; }
.store-badge { display: inline-flex; align-items: center; height: 48px; }
.store-badge img { height: 48px; width: auto; }
.store-badge.google-play { width: 162px; overflow: visible; }
.store-badge.google-play img { height: 70px; max-width: none; margin-left: -10px; }
.copyright { padding-block: 0 28px; color: var(--muted); font-size: .78rem; line-height: 1.6; text-align: center; }
.copyright a { text-decoration: underline; text-underline-offset: 3px; }
/* Spring Break already contains the app's recorded treatment. */
.wide-tape-shelf .crt-video:has(video[src*="spring-break-1988.mp4"]) video { filter: none; }
.wide-tape-shelf .crt-video:has(video[src*="spring-break-1988.mp4"])::after { content: none; }