/* About Tenner: a full-height splash (this hour's top shows and films as a poster, dissolving into the page), four illustrated cards,
   then the FAQ. Static at rest: each card performs once as it arrives and nothing loops. */

:root {
  --a-bezel: #1c1c1e; --a-screen: #0b0d18;
  --a-ink: #0b0b0f; --a-ink2: rgba(60, 60, 67, .72);
  --a-paper: #ffffff; --a-line: rgba(60, 60, 67, .16); --a-shadow: rgba(30, 30, 90, .18);
  --a-tile1: #eef0ff; --a-tile2: #dde2fb;
  --a-card: #ffffff; --a-card-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 30px rgba(0, 0, 0, .06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --a-bezel: #26262c; --a-screen: #05060c;
    --a-ink: #ffffff; --a-ink2: rgba(235, 235, 245, .6);
    --a-paper: #2c2c30; --a-line: rgba(235, 235, 245, .14); --a-shadow: rgba(0, 0, 0, .55);
    --a-tile1: #1a1638; --a-tile2: #0e0c22;
    --a-card: rgba(44, 44, 48, .62); --a-card-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .1);
  }
}
:root[data-theme="dark"] {
  --a-bezel: #26262c; --a-screen: #05060c;
  --a-ink: #ffffff; --a-ink2: rgba(235, 235, 245, .6);
  --a-paper: #2c2c30; --a-line: rgba(235, 235, 245, .14); --a-shadow: rgba(0, 0, 0, .55);
  --a-tile1: #1a1638; --a-tile2: #0e0c22;
  --a-card: rgba(44, 44, 48, .62); --a-card-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .1);
}

/* one column shared with Top 10 and Browse, left-aligned like Apple Music */
.awrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.about svg { display: block; }
.eyebrow { font: 600 14px/1.2 var(--font); letter-spacing: -.01em; color: var(--accent); margin: 0 0 10px; }
.neon01s { font: 800 26px var(--font-display); letter-spacing: -.05em; }

/* ============================================================ the splash
   This hour's top shows and films, each a full poster for a few seconds, washed with Tenner's colours and dissolving
   into the page: black at night, white by day. */
.splash { --fade: var(--bg); position: relative; isolation: isolate; min-height: 100svh; display: flex; align-items: flex-end; margin-bottom: -6vh; }
/* everything behind the words lives in one layer that fades to nothing at the bottom, so the page's own background
   (and its soft tint) carries straight on: no line where the splash ends */
.sp-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 50%, rgba(0,0,0,.6) 70%, rgba(0,0,0,.2) 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 50%, rgba(0,0,0,.6) 70%, rgba(0,0,0,.2) 86%, transparent 100%); }
/* the artwork itself fades out at its edges (a mask), so there's no hard line anywhere: it melts into the page */
.sp-art { position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); }
.sp-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; opacity: 0; transition: opacity 1.6s ease, scale 9s linear; scale: 1.06; }
.sp-art img.on { opacity: 1; scale: 1; }
/* Tenner's colours washed through it, softly */
.sp-wash { position: absolute; inset: 0; mix-blend-mode: soft-light; opacity: .8; pointer-events: none;
  background: linear-gradient(125deg, #ff375f 0%, #ff9f0a 22%, transparent 45%, #0a84ff 75%, #bf5af2 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 95%); mask-image: linear-gradient(180deg, #000 40%, transparent 95%); }
/* the page colour rising up from the bottom and in from the left, where the words sit: black at night, white by day */
.sp-shade { position: absolute; inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--fade) 78%, transparent) 0%, color-mix(in srgb, var(--fade) 40%, transparent) 38%, transparent 68%),
    linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--fade) 45%, transparent) 62%, color-mix(in srgb, var(--fade) 70%, transparent) 90%); }
.sp-copy { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter-r) 16vh calc(var(--gutter) + 12px); color: var(--label); }
.sp-logo { width: 72px; height: 72px; border-radius: 17px; display: block; margin-bottom: 22px; box-shadow: 0 0 0 .5px rgba(127,127,127,.3), 0 18px 50px rgba(0,0,0,.35); }
.sp-eye { margin: 0 0 12px; font: 600 14px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--label2); }
.splash h1 { margin: 0; max-width: 11ch; font: 800 clamp(52px, 7.6vw, 116px)/.95 var(--font-display); letter-spacing: -.035em; }
.sp-lead { margin: 22px 0 0; max-width: 560px; font: 400 clamp(17px, 1.5vw, 20px)/1.45 var(--font); letter-spacing: -.015em; color: var(--label2); }
.sp-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.sp-cta { display: inline-flex; align-items: center; height: 48px; padding: 0 24px; border-radius: 14px; font: 600 17px/1 var(--font); letter-spacing: -.02em; color: var(--label); text-decoration: none;
  background: var(--frost); box-shadow: var(--frost-line); -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur); }
.sp-cta:hover { text-decoration: none; }
.sp-cta.primary { background: var(--label); color: var(--bg); box-shadow: 0 12px 40px rgba(0,0,0,.25); }
/* what's on the poster: a small frosted caption, bottom right */
.sp-now { position: absolute; right: calc(var(--gutter-r) + 8px); bottom: 16vh; display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 14px; color: var(--label); text-decoration: none;
  background: var(--frost); box-shadow: var(--frost-line); -webkit-backdrop-filter: var(--frost-blur); backdrop-filter: var(--frost-blur); }
.sp-now:hover { text-decoration: none; }
.sp-now img { width: 40px; height: 60px; border-radius: 6px; object-fit: cover; }
.sp-now small { display: block; font: 600 11px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--label2); }
.sp-now b { display: block; font: 600 15px/1.3 var(--font); letter-spacing: -.016em; }
.sp-dots { display: flex; gap: 6px; margin-top: 8px; } .sp-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--label3); transition: width .4s, background .4s; } .sp-dots i.on { width: 18px; background: var(--label); }
@media (max-width: 999px) { .sp-art { -webkit-mask-image: none; mask-image: none; }
  .sp-bg { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 34%, rgba(0,0,0,.5) 58%, rgba(0,0,0,.12) 80%, transparent 96%); mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 34%, rgba(0,0,0,.5) 58%, rgba(0,0,0,.12) 80%, transparent 96%); } }
@media (max-width: 720px) {
  .splash { min-height: 94svh; }
  .sp-art img { object-position: 60% 20%; }
  .sp-copy { padding-bottom: 18vh; }
  .sp-logo { display: none; }   /* the bar above already shows it */
  .sp-now { left: var(--gutter); right: auto; bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 84px); }
  .sp-shade { background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--fade) 30%, transparent) 30%, color-mix(in srgb, var(--fade) 75%, transparent) 55%, color-mix(in srgb, var(--fade) 85%, transparent) 80%); }
}

/* ============================================================ sections */
.sec { margin: 80px 0 0; }
.sec-h { margin: 0 0 26px; }
.sec-h h2 { font: 700 clamp(30px, 4.2vw, 48px)/1.08 var(--font-display); letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.sec-h p { color: var(--label2); margin: 12px 0 0; max-width: 40ch; font-size: 18px; text-wrap: balance; }

/* the four cards: artwork on top, flush with the card's edges, then the words */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.step { background: var(--a-card); border-radius: 28px; overflow: hidden; box-shadow: var(--a-card-shadow); display: flex; flex-direction: column; }
.step .art { position: relative; aspect-ratio: 320 / 190; background: linear-gradient(180deg, var(--a-tile1), var(--a-tile2)); overflow: hidden; }
.step .art > svg { width: 100%; height: 100%; }
.step .txt { padding: 20px 24px 24px; }
.step h3 { font: 700 21px/1.19 var(--font-display); letter-spacing: .004em; margin: 0 0 8px; }
.step p { margin: 0; color: var(--label2); font-size: 16px; line-height: 1.5; letter-spacing: -.016em; }
.step p strong { color: var(--label); font-weight: 600; }
@media (min-width: 1000px) { .awrap { padding-top: 22px; } }
@media (min-width: 1240px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .step .txt { padding: 18px 20px 22px; }
  .step h3 { font-size: 19px; }
  .step p { font-size: 15px; }
}
/* frosted cards at night */
:root[data-theme="dark"] .step { -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .step { -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); } }

/* ============================================================ FAQ, the apple.com way: big questions, hairlines, a chevron */
.faq-list { border-top: .5px solid var(--sep); }
.faq-list details { border-bottom: .5px solid var(--sep); }
.faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 4px; cursor: pointer; list-style: none;
  font: 500 clamp(19px, 2vw, 24px)/1.25 var(--font-display); letter-spacing: .009em; color: var(--label);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-right: 6px; border-right: 2.5px solid var(--label2); border-bottom: 2.5px solid var(--label2);
  transform: translateY(-3px) rotate(45deg); transition: transform .35s var(--ease-spring);
}
.faq-list details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.faq-list summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
@media (hover: hover) { .faq-list summary:hover { color: var(--accent); } }
.faq-list .a { padding: 0 48px 26px 4px; }
.faq-list .a p { margin: 0; max-width: 68ch; color: var(--label2); font-size: 17px; line-height: 1.5; }
.faq-list details[open] .a { animation: faqIn .35s var(--ease-out) both; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }

/* ============================================================ motion: each card performs once as it arrives; nothing loops */
@keyframes turn { to { transform: rotate(360deg); } }
.hand { transform-box: view-box; transform-origin: 160px 96px; }
.js-reveal .reveal.in .hand { animation: turn 3s cubic-bezier(.45, 0, .2, 1) .3s 1; }   /* one sweep round the clock */
/* reveal on arrival (only once the script has marked the page, so nothing is hidden without it) */
.js-reveal .reveal { opacity: 0; transform: translateY(28px) scale(.98); }
.js-reveal .reveal.in { opacity: 1; transform: none; transition: opacity .8s var(--ease-out), transform 1s var(--ease-spring); }
.js-reveal .steps .reveal:nth-child(2).in { transition-delay: .08s; }
.draw { stroke-dasharray: 260; stroke-dashoffset: 0; }
.js-reveal .reveal .draw { stroke-dashoffset: 260; }
.js-reveal .reveal.in .draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.6, 0, .2, 1) .25s; }
.js-reveal .reveal .pop { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.js-reveal .reveal.in .pop { transform: scale(1); transition: transform .6s var(--ease-spring) 1.5s; }
/* card 2: the feature cards fan out */
.fan > g { transform-box: view-box; transform-origin: 160px 150px; }
.f2 { transform: rotate(-5deg) translate(-4px, -6px); } .f3 { transform: rotate(-10deg) translate(-8px, -12px); }
.js-reveal .reveal .f2, .js-reveal .reveal .f3 { transform: rotate(0deg) translate(6px, -4px); }
.js-reveal .reveal.in .f2 { transform: rotate(-5deg) translate(-4px, -6px); transition: transform .9s var(--ease-spring) .3s; }
.js-reveal .reveal.in .f3 { transform: rotate(-10deg) translate(-8px, -12px); transition: transform .9s var(--ease-spring) .4s; }
.spark path { transform-box: fill-box; transform-origin: center; }
.js-reveal .reveal .spark path { transform: scale(0); }
.js-reveal .reveal.in .spark path { transform: scale(1); transition: transform .6s var(--ease-spring) .8s; }
@media (hover: hover) { .step { transition: transform .6s var(--ease-spring), box-shadow .4s ease; } .step:hover { transform: translateY(-4px); } }


/* ============================================================ phones */
@media (max-width: 719px) {
  .sec { margin-top: 56px; }
  .sec-h p { font-size: 16px; }
  .steps { grid-template-columns: 1fr; gap: 12px; }
  .step { border-radius: 24px; }
  .step .txt { padding: 18px 20px 20px; }
  .step p { font-size: 15px; }

  .faq-list summary { padding: 20px 2px; }
  .faq-list .a { padding: 0 8px 22px 2px; }
}

/* the little labels on the cards: frosted, like a macOS material, with monochrome symbols and text */
.tag {
  position: absolute; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: 8px;
  font: 600 12.5px/1 var(--font); letter-spacing: -.01em; color: var(--a-ink); white-space: nowrap; pointer-events: none;
  background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.tag svg { width: 14px; height: 14px; flex: none; color: var(--a-ink2); }
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: #30d158; margin: 0 1px 0 2px; }
:root[data-theme="dark"] .tag { background: rgba(40, 40, 46, .42); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag { background: rgba(40, 40, 46, .42); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .08); } }
@media (prefers-reduced-transparency: reduce) { .tag { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--a-paper); } }

/* with a mouse or trackpad: a push button shades when pressed (the macOS way) */
@media (hover: hover) and (pointer: fine) { .sp-cta:active { filter: var(--press); } }

/* phones and tablets (no sidebar): the small print, as a tidy list at the end of About */
.more-links { display: none; }
@media (max-width: 999px) {
  .more-links { display: grid; margin: 40px 0 8px; border-radius: 12px; background: var(--bg2); overflow: hidden; }
  .more-links a { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; color: var(--label); font-size: 16px; text-decoration: none; }
  .more-links a + a { border-top: .5px solid var(--sep); }
  .more-links a::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--label3); border-bottom: 2px solid var(--label3); transform: rotate(-45deg); }
}
.more-ver { display: none; }
@media (max-width: 999px) { .more-ver { display: block; margin: 12px 4px 0; color: var(--label3); font-size: 13px; } }