/* ============ Limo Series — il granello ============ */

/* Satoshi — local mirror (assets/fonts/) */
@font-face { font-family:'Satoshi'; src:url('assets/fonts/Satoshi-400.woff2') format('woff2'); font-weight:400; font-display:swap; font-style:normal; }
@font-face { font-family:'Satoshi'; src:url('assets/fonts/Satoshi-500.woff2') format('woff2'); font-weight:500; font-display:swap; font-style:normal; }
@font-face { font-family:'Satoshi'; src:url('assets/fonts/Satoshi-700.woff2') format('woff2'); font-weight:700; font-display:swap; font-style:normal; }
@font-face { font-family:'Satoshi'; src:url('assets/fonts/Satoshi-900.woff2') format('woff2'); font-weight:900; font-display:swap; font-style:normal; }


/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* scroll-padding: the nav is fixed, so an anchor jump used to park the target's
   first line underneath it. */
html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; background: #F4F4EF; }
/* Form controls don't inherit type by default — keep everything on Satoshi. */
button, input, select, textarea { font-family: inherit; }
::selection { background: #c5a28c; color: #252420; }

/* Keyframes */
@keyframes dotBlink { 0%,100% { opacity:1; } 50% { opacity:.25; } }
@keyframes decoStagger { 0% { opacity:0; transform:translateX(-16px) scaleX(.3);} 44% { opacity:.55; transform:translateX(0) scaleX(1);} 100% { opacity:0; transform:translateX(16px) scaleX(.3);} }

/* Intro — hero pinned for the scroll choreography.
   The section is ~1.4 viewports tall: the pin sticks to the top only while
   the title exits upward and the slogan grows dead-centre. The moment growth
   ends the pin lets go and the next section scrolls straight in — the slogan
   stays fixed at the centre of the screen and vaporizes over it
   (particle-logo.js). The 62-frame film keeps scrubbing over the same span —
   its driver measures #intro's height, so no change there. */
#intro { position:relative; z-index:2; background:#a7b4c4; height:140vh; height:140dvh; height:calc(1.4 * var(--hero-h,100dvh)); }
/* --hero-h is frozen by the script on touch devices so the box does not grow
   when the URL bar retracts mid-scroll; dvh is the fallback. */
.hero-pin { position:sticky; top:0; height:100vh; height:100dvh; height:var(--hero-h,100dvh); overflow:hidden; }
#hero-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
/* The line alone, dead centre. It used to sit under an "il granello"
   logotype, but the name is on the nav and in the h1 — the hero says what
   the thing does, and that single line is the whole opening frame. */
.hero-lockup { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; width:max-content; max-width:92vw; pointer-events:none; }
.hero-slogan { display:block; width:min(560px,62vw); height:auto; user-select:none; -webkit-user-select:none; animation:heroLine 1.2s var(--ease) .35s both; }
/* Opacity only — the scroll choreography owns this element's transform, and
   an entrance that also moved it would shift the centre the script measures. */
@keyframes heroLine { from { opacity:0; } to { opacity:1; } }
@media (max-aspect-ratio: 1 / 1) {
  .hero-slogan { width:min(420px,76vw); }
}
@media (prefers-reduced-motion:reduce){
  .hero-slogan { animation:none; }
  /* no choreography → no pin: the tall section would just be dead scroll */
  #intro { height:100vh; height:100dvh; height:var(--hero-h,100dvh); }
}
/* Vapour canvas (particle-logo.js). Fixed, not absolute: once the pin lets
   go the page scrolls on to the next section, but the slogan — and the
   particles it dissolves into — must hold the centre of the screen, riding
   over whatever scrolls underneath. The pin has no transform, so fixed
   children escape its overflow:hidden by design. */
.pl-canvas { position:fixed; inset:0; pointer-events:none; }
/* Visible to screen readers and search engines, not to the layout. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* Artist community: a dark band with one row of story cards, scrolling to
   the right. Native horizontal scroll (wheel, trackpad, swipe) plus mouse
   drag; the row masks out at both edges so cards slide from under a fade
   instead of hitting a hard border. Card: 3:4 portrait, then the name with
   the verified mark, then a one-line bio. The whole card links to the
   artist's Instagram. */
/* hsl(48 7% 14%) is rgb(38,37,33): --crt to within one step per channel, the
   same black as the buy button. One black in this section, as asked. */
.community-band { position:relative; z-index:1; background:var(--crt); }
.stories-row {
  display:flex; gap:12px; align-items:flex-start;
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab; touch-action:pan-x pan-y;
  /* Full-bleed like the feedback rows: the track runs to both screen edges so
     the fades sit there. The inline padding is the PAGE gutter (same as every
     other section heading), so the title and the first card both start hard
     left, before the edge fade zone. */
  --sr-gutter:clamp(1.5rem,5vw,5rem);
  padding:6px var(--sr-gutter) 14px;
  /* Each side fades only while cards are actually hidden behind it — the
     script drives the two vars, so the first card is never dimmed at rest. */
  --sr-l:0px; --sr-r:clamp(2rem,6vw,6rem);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--sr-l),#000 calc(100% - var(--sr-r)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--sr-l),#000 calc(100% - var(--sr-r)),transparent 100%);
}
.stories-row::-webkit-scrollbar { display:none; }
.stories-row.is-drag { cursor:grabbing; }
.stories-row.is-drag .story-card { pointer-events:none; }
.story-card { flex:0 0 200px; min-width:0; display:block; text-decoration:none; color:inherit;
  transition:transform .2s var(--ease); }
  /* min-width:0 matters: a long nowrap bio (e.g. three artist credits) would
     otherwise widen its card past the fixed basis via the flex min-content
     floor - the ellipsis can only kick in once the card stops growing. */
.sc-media { position:relative; display:block; aspect-ratio:3/4; border-radius:16px; overflow:hidden;
  background:var(--crt); box-shadow:inset 0 0 0 1px rgba(244,244,239,.1);
  transition:box-shadow .2s var(--ease); }
/* Photos run untouched: no filter, the artists' own colour. */
.sc-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Premium sheen: a soft light band sweeps every portrait from the top-left
   down to the bottom-right, then rests off-card. The loop point happens while
   the band is fully outside the photo, so the cycle never visibly snaps, and
   each card starts a beat after the previous one so the row shimmers as a
   wave. Transform-only: cheap to composite. */
.sc-media::after {
  content:""; position:absolute; top:-30%; left:0; width:34%; height:160%;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.05) 35%, rgba(255,255,255,.13) 50%, rgba(255,255,255,.05) 65%, rgba(255,255,255,0) 100%);
  transform:translate3d(-190%,-10%,0) rotate(20deg);
  animation:scShine 4.6s cubic-bezier(0.45,0,0.25,1) infinite;
  pointer-events:none;
}
@keyframes scShine {
  0%       { transform:translate3d(-190%,-10%,0) rotate(20deg); }
  55%,100% { transform:translate3d(480%,10%,0) rotate(20deg); }
}
.story-card:nth-child(2) .sc-media::after { animation-delay:.45s; }
.story-card:nth-child(3) .sc-media::after { animation-delay:.9s; }
.story-card:nth-child(4) .sc-media::after { animation-delay:1.35s; }
.story-card:nth-child(5) .sc-media::after { animation-delay:1.8s; }
.story-card:nth-child(6) .sc-media::after { animation-delay:2.25s; }
.story-card:nth-child(7) .sc-media::after { animation-delay:2.7s; }
.story-card:nth-child(8) .sc-media::after { animation-delay:3.15s; }
.story-card:nth-child(9) .sc-media::after { animation-delay:3.6s; }
@media (prefers-reduced-motion: reduce) {
  .sc-media::after { animation:none; opacity:0; }
}
.sc-ig { position:absolute; top:.5rem; right:.5rem; width:26px; height:26px; display:flex; align-items:center; justify-content:center; color:rgb(236,233,226); background:rgba(37,36,32,.4); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.18); border-radius:999px; opacity:.85; transition:opacity .2s var(--ease); }
.sc-ig svg { width:13px; height:13px; }
.sc-name { display:flex; align-items:center; gap:.35rem; margin-top:.7rem; font-size:.92rem; font-weight:700; letter-spacing:-.01em; color:#fff; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vbadge { width:12px; height:12px; flex-shrink:0; }
.sc-bio { display:block; margin-top:.22rem; font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.72rem; font-weight:500; letter-spacing:.01em; color:rgba(244,244,239,.6); line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (hover:hover){
  .story-card:hover { transform:translateY(-4px) scale(1.02); }
  .story-card:hover .sc-media { box-shadow:inset 0 0 0 1px rgba(197,162,140,.55); }
  .story-card:hover .sc-ig { opacity:1; }
}
.story-card:focus-visible { outline:2px solid var(--tan); outline-offset:3px; border-radius:16px; }
@media (max-width:640px){
  .story-card { flex-basis:168px; }
  .stories-row { gap:10px; }
}

/* Fan story clips (#wild) — Instagram's desktop stories viewer, ported.
   The stage is a ring: the active clip stands centred at full size, its
   neighbours sit at the sides smaller, blurred and dimmed, everything past
   two steps hides. The script owns each card's transform; the CSS owns how a
   card travels between the slots. --cw is the centre card's width, set by
   the script, so the arrows can sit just outside it at any size. */
.stories-stage { position:relative; --cw:300px; }
.stories-stage .story { position:absolute; left:50%; top:50%; }
.story { display:block; padding:0; border:0;
  border-radius:16px; overflow:hidden; background:var(--crt); cursor:pointer;
  box-shadow:rgba(19,18,16,.05) 0 2px 4px, rgba(19,18,16,.22) 0 20px 40px -24px;
  transition:transform .55s var(--ease), opacity .55s var(--ease), filter .55s var(--ease); }
@media (prefers-reduced-motion:reduce){ .story { transition:none; } }
.story-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:var(--crt); }
.story::before { content:""; position:absolute; left:0; right:0; top:0; height:38%;
  background:linear-gradient(180deg,rgba(10,10,8,.62),rgba(10,10,8,0)); pointer-events:none; }
.story-user { position:absolute; top:.85rem; left:.9rem; right:.9rem; z-index:2;
  font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.78rem; font-weight:700;
  letter-spacing:-.01em; color:#fff; text-align:left; text-shadow:0 1px 6px rgba(10,10,8,.6);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.story-bar { position:absolute; top:.45rem; left:.5rem; right:.5rem; height:2px; z-index:2;
  border-radius:2px; background:rgba(255,255,255,.28); opacity:0; transition:opacity .2s linear; }
.story-bar i { display:block; height:100%; width:0; border-radius:2px; background:#fff; }
.story.is-playing .story-bar { opacity:1; }
.story-play { position:absolute; left:50%; top:50%; z-index:2; width:54px; height:54px; margin:-27px 0 0 -27px;
  border-radius:999px; background:rgba(244,244,239,.22);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.45); transition:opacity .25s var(--ease), transform .25s var(--ease); }
.story-play::before { content:""; position:absolute; left:50%; top:50%; width:0; height:0; margin:-9px 0 0 -5px;
  border-left:15px solid #fff; border-top:9px solid transparent; border-bottom:9px solid transparent; }
/* Side cards keep their picture clean: no play glyph until they are centre. */
.story:not(.is-center) .story-play { opacity:0; }
.story.is-playing .story-play { opacity:0; transform:scale(.8); }
.story.is-center.is-playing:hover .story-play, .story.is-center.is-playing:focus-visible .story-play { opacity:1; transform:none; }
.story.is-playing .story-play::before { width:5px; height:17px; margin:-8px 0 0 -7px;
  border:0; background:#fff; box-shadow:9px 0 0 #fff; }
.story:focus-visible { outline:2px solid var(--tan); outline-offset:3px; }
/* The walk arrows, just outside the centre card, IG-style ivory rounds.
   max() keeps them on screen when the card nearly fills a phone. */
.st-nav { position:absolute; top:50%; z-index:4; width:44px; height:44px; margin-top:-22px;
  display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:999px;
  background:var(--paper); color:var(--ink); cursor:pointer;
  box-shadow:rgba(19,18,16,.12) 0 2px 6px, rgba(19,18,16,.28) 0 12px 26px -12px;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.st-nav svg { width:20px; height:20px; }
.st-nav:hover { transform:scale(1.07); }
.st-nav:focus-visible { outline:2px solid var(--tan); outline-offset:3px; }
.st-prev { left:max(10px, calc(50% - var(--cw) / 2 - 68px)); }
.st-next { right:max(10px, calc(50% - var(--cw) / 2 - 68px)); }

/* Feedback — two rows drifting right-to-left. A static wall could only ever
   show what fitted on screen; the marquee runs every review through a fixed
   band. Each row is one run of cards cloned until the track outruns the row by
   a full period, then translated: the visible box is always covered, so a row
   can never show a gap or reach an end. Drag still moves it by hand. */
.fb-marquee { display:flex; flex-direction:column; gap:1rem;
  --fb-fade:clamp(2rem,7vw,7rem);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fb-fade),#000 calc(100% - var(--fb-fade)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--fb-fade),#000 calc(100% - var(--fb-fade)),transparent 100%);
}
/* Phones show one belt, not two. */
@media (max-width:720px){
  .fb-marquee .fb-row:nth-of-type(2) { display:none; }
}
/* Not a scroll container any more: the track inside is moved with a
   transform, which cannot be carried past the loop by a stray gesture the
   way scrollLeft could. pan-y leaves vertical page scrolling to the
   browser and gives horizontal movement to the drag handler. */
.fb-row { display:flex; overflow:hidden; cursor:grab; touch-action:pan-y; }
.fb-track { display:flex; width:max-content; will-change:transform; }
.fb-row.is-drag { cursor:grabbing; }
.fb-row.is-drag a { pointer-events:none; }
/* padding-right carries the gap that follows the run, so one run width is the
   exact loop period and the seam is invisible. */
/* Stretch, not flex-start: every card in the belt takes the height of the
   tallest one, so the row is a single clean band with no ragged white gaps
   under the shorter quotes. The tallest card itself is sized by its text. */
.fb-run { display:flex; align-items:stretch; gap:1rem; padding-right:1rem; width:max-content; flex:0 0 auto; }
/* Every card is exactly the same height, so the two rows read as bands rather
   than as a ragged edge. The quotes run from 41 to 298 characters, which no
   single width can level out, so the width steps with the length instead: the
   short ones stay narrow, the long ones get the room to breathe. */
/* 268 rather than 252 so the longest credit line ("Multi-platinum producer")
   still fits on one line in the narrowest card — a second line there would
   push that one quote lower than the other nine. */
.fb-run > .feedback-card { flex:0 0 min(268px,82vw); }
.fb-run > .feedback-card[data-w="2"] { flex-basis:min(322px,82vw); }
.fb-run > .feedback-card[data-w="3"] { flex-basis:min(400px,82vw); }
.fb-run > .feedback-card[data-w="4"] { flex-basis:min(468px,82vw); }

/* Natural height: each card ends where its own text ends, so the belt is a
   row of top-aligned cards of different heights rather than one fixed band. */
.feedback-card { background:var(--paper-deep); border:1px solid rgba(154,149,140,.2); border-radius:16px; padding:1.05rem 1.15rem; display:flex; flex-direction:column; gap:.6rem; }
.fb-top { display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.fb-head { display:flex; align-items:center; gap:.6rem; min-width:0; }
.fb-avatar { flex-shrink:0; width:32px; height:32px; border-radius:50%; overflow:hidden; background:var(--paper); border:1px solid rgba(154,149,140,.35); display:flex; align-items:center; justify-content:center; }
.fb-avatar b { font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.8rem; font-weight:700; color:var(--ink-faint); }
.fb-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.fb-id { display:flex; flex-direction:column; gap:.12rem; min-width:0; }
.fb-user { display:inline-flex; align-items:center; gap:.3rem; font-size:.84rem; font-weight:700; letter-spacing:-.01em; color:var(--ink); line-height:1.2; }
/* Credit line: only on the artist reviews, so a name carries its weight. */
.fb-sub { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.57rem; font-weight:500; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-faint); opacity:.82; line-height:1.3; }
.fb-ig { width:14px; height:14px; flex-shrink:0; color:var(--ink-faint); opacity:.75; }
/* No clamp: the quote always shows whole, and the card takes exactly the
   height the text needs, on desktop and on phones alike. */
.feedback-card blockquote { font-size:.855rem; line-height:1.5; letter-spacing:-.003em; color:var(--ink-soft); }
.fb-likes { margin-top:auto; display:flex; align-items:center; gap:.4rem; font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.68rem; letter-spacing:.04em; color:var(--ink-faint); }
.fb-likes svg { width:13px; height:13px; }

/* Modes section — visual screen (natural aspect, no black filler) on the left,
   Hold/Step/Keys explanation on the right. Both columns vertically centered so
   the two blocks read as one symmetric row. */
/* Mobile: single column, natural flow — visual, Hold, Step, Keys, step screen. */
/* Modes section padding + closing claim: kept here (not inline) so the mobile
   vertical rhythm can be tuned separately from desktop. */
/* Photo band behind the demo — full-bleed, so the section itself carries no
   max-width and the inner wrapper does the containing. The frame is a crop of
   the dune the samples were recorded on (assets/play-bg.webp, 1920x860; phones
   get the 900px cut). A dark scrim over it does the real work: the plugin body
   is a light tan and the sand underneath is nearly the same value, so without
   it the instrument would sink into the photograph. */
.play-stage { position:relative; padding:clamp(2.2rem,5vh,3.4rem) 0 clamp(2.4rem,5vh,3.6rem);
  background:var(--crt) url('assets/play-bg.webp') center/cover no-repeat; }
.play-stage-in { position:relative; max-width:1320px; margin:0 auto; padding:0 clamp(1.5rem,5vw,5rem); }
/* Tahoe liquid glass (the React component the owner supplied, ported):
   white 25% tint, a light-facing radial sheen, the component's exact
   --cos/--sin bevel-shadow stack, and a conic rim gradient - all driven by
   custom properties that tahoe-glass.js computes per element from the convex
   lens map and the band's top-centre light. The lens refraction itself lives
   on the ::before backdrop layer (Chromium); the defaults below keep the
   glass lit sensibly before the script runs or where it cannot. */
.play-stage .gr-chip, .story-play {
  --cos:0; --sin:0.8; --light-angle:90deg; --rim-intensity:0.6;
  --rim-gradient:conic-gradient(from 90deg at 50% 50%, rgba(255,255,255,.55), rgba(255,255,255,.10) 120deg, rgba(255,255,255,.10) 240deg, rgba(255,255,255,.55));
  position:relative; isolation:isolate;
  border:0;
  background-color:rgba(255,255,255,.25);
  background-image:radial-gradient(circle at calc(50% - var(--cos) * 50%) calc(50% - var(--sin) * 50%), rgba(255,255,255,0.2) 0%, transparent 60%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white calc(var(--rim-intensity) * 20%), transparent),
    inset calc(var(--cos) * 1.8px) calc(var(--sin) * 3px) 0px -2px color-mix(in srgb, white calc(var(--rim-intensity) * 90%), transparent),
    inset calc(var(--cos) * -2px) calc(var(--sin) * -2px) 0px -2px color-mix(in srgb, white calc(var(--rim-intensity) * 80%), transparent),
    inset calc(var(--cos) * -3px) calc(var(--sin) * -8px) 1px -6px color-mix(in srgb, white calc(var(--rim-intensity) * 60%), transparent),
    inset calc(var(--cos) * -0.3px) calc(var(--sin) * -1px) 4px 0px color-mix(in srgb, black 12%, transparent),
    inset calc(var(--cos) * -1.5px) calc(var(--sin) * 2.5px) 0px -2px color-mix(in srgb, black 20%, transparent),
    inset calc(var(--cos) * 0px) calc(var(--sin) * 3px) 4px -2px color-mix(in srgb, black 20%, transparent),
    inset calc(var(--cos) * 2px) calc(var(--sin) * -6.5px) 1px -4px color-mix(in srgb, black 10%, transparent),
    calc(var(--cos) * 4px) calc(var(--sin) * 4px) 10px 0px color-mix(in srgb, black 15%, transparent),
    calc(var(--cos) * 9px) calc(var(--sin) * 9px) 18px 0px color-mix(in srgb, black 10%, transparent);
}
.play-stage .gr-chip { border-radius:12px; }
/* Backdrop layer: the convex lens plus the component's blur(2px)
   saturate(180%) brightness(1.05). The fallback keeps the same chain minus
   the lens where url() in backdrop-filter is unsupported. */
.play-stage .gr-chip::before {
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  -webkit-backdrop-filter:var(--tg-bf, blur(2px) saturate(1.8) brightness(1.05));
  backdrop-filter:var(--tg-bf, blur(2px) saturate(1.8) brightness(1.05));
  pointer-events:none;
}
/* The stories play button carries the same material but on the element
   itself: its ::before is the play glyph, so the lens rides directly on the
   button (backdrop-filter never blurs the element's own content) and the
   rim takes ::after. Old flat background/border/blur are overridden here. */
.story-play {
  position:absolute;   /* the shared block above says relative; this one is centred over the video */
  border:0; margin:-27px 0 0 -27px;
  -webkit-backdrop-filter:var(--tg-bf, blur(2px) saturate(1.8) brightness(1.05));
  backdrop-filter:var(--tg-bf, blur(2px) saturate(1.8) brightness(1.05));
}
.story-play::after {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--rim-gradient);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  opacity:calc(0.62 + var(--rim-intensity) * 0.24);
  pointer-events:none;
}
/* Highlight outer rim — the component's masked 1px conic ring. Painted after
   the content but confined to the frame, so it never sits over a label. */
.play-stage .gr-chip::after {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--rim-gradient);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  opacity:calc(0.62 + var(--rim-intensity) * 0.24);
  pointer-events:none;
}
.play-stage .gr-play { transition:transform .4s cubic-bezier(0.4,1.5,0.3,1); }
.play-stage .gr-play:active { transform:scale(0.96); }
/* White type on the glass, with a tight dark shadow under it: with the plate
   this clear the photo carries through, and sand behind a white glyph is the
   one place it would wash out. Tight and low-alpha so it reads as weight,
   not as a drop shadow. */
.play-stage .gr-chip, .play-stage .gr-play {
  color:#fff;
  text-shadow:0 1px 2px rgba(10,10,8,.55), 0 1px 6px rgba(10,10,8,.35);
}
/* Play and the three mode cards wear the SAME plain frosted glass as the
   tutorial button (outline + blur), not the Tahoe lens: one material for
   every control on the photo band. */
.play-stage .gr-play, .gm-card {
  position:relative;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);
  backdrop-filter:blur(10px) saturate(1.4);
  box-shadow:none;
}
.play-stage .gr-chip-name { font-weight:700; }
.play-stage .gr-chip:hover { background-color:rgba(255,255,255,.34); }
.play-stage .gr-chip-load { border-radius:7px; border-color:rgba(255,255,255,.55); color:rgba(255,255,255,.9); }
.play-stage .gr-chip-load:hover { color:#fff; border-color:#fff; }
.play-stage .gr-play { padding:clamp(.58rem,2vw,.8rem) clamp(.7rem,3.4vw,1.7rem); border-radius:12px; }
.play-stage .gr-play:hover { background:rgba(255,255,255,.22); border-color:#fff; }
.play-stage .granello-wrap { border-radius:12px; box-shadow:rgba(10,10,8,.26) 0 2px 6px, rgba(10,10,8,.5) 0 40px 80px -26px; }
@media (max-width:640px){
  .play-stage { background-image:url('assets/play-bg-sm.webp'); }
}
/* il granello in the browser (granello-web.js) — one canvas drawing the
   plugin's 1000x572 front panel, scaled to fit. The wrap gives it the same
   elevation as the other framed shots; the hardware body draws its own
   border and corner radius, so the frame stays shadow-only. */
.granello-wrap { max-width:1000px; margin:0 auto; border-radius:12px; box-shadow:rgba(19,18,16,.06) 0 2px 4px, rgba(19,18,16,.3) 0 34px 70px -22px; line-height:0; }
#granello-unit { position:relative; width:100%; }
/* pan-y: a touch on the panel's dead areas scrolls the page; the engine's
   non-passive touchstart claims just the knobs/timeline/sequencer zones. */
.granello-canvas { display:block; width:100%; touch-action:pan-y; border-radius:12px; }
/* Sample strip above the panel: click a chip to hear it, drag it onto the
   screen to granulate it. Hidden entirely when no sample resolves. */
.gr-samples { display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin:0 auto 1.6rem; }
.gr-samples:empty { display:none; }
.gr-chip { display:inline-flex; align-items:center; gap:.55rem; padding:.5rem .6rem .5rem .55rem; border:1px solid rgba(154,149,140,.4); border-radius:8px; background:var(--paper-deep); color:var(--ink); cursor:grab; user-select:none; transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
/* Hover styling lives in the Tahoe-glass block; a box-shadow here would
   replace the whole bevel stack. */
.gr-chip:active { cursor:grabbing; }
.gr-chip.is-dragging { opacity:.5; }
.gr-chip-play { flex-shrink:0; width:22px; height:22px; display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:50%; background:var(--crt); color:rgb(236,233,226); cursor:pointer; }
.gr-chip-play svg { width:8px; height:10px; margin-left:2px; display:block; }
.gr-chip.is-previewing .gr-chip-play svg { display:none; }
.gr-chip.is-previewing .gr-chip-play::before { content:""; width:7px; height:8px; background:currentColor; border-radius:1px; }
.gr-chip-name { font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.76rem; font-weight:500; letter-spacing:.01em; white-space:nowrap; }
.gr-chip-load { flex-shrink:0; padding:.2rem .5rem; border:1px solid rgba(154,149,140,.45); border-radius:5px; background:transparent; color:var(--ink-faint); font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:color .2s var(--ease), border-color .2s var(--ease); }
.gr-chip-load:hover { color:var(--ink); border-color:var(--ink); }
.gr-chip-play:focus-visible, .gr-chip-load:focus-visible { outline:2px solid var(--tan); outline-offset:2px; }

/* Play and the honesty note sit under the hardware: the panel is a replica of
   the plugin, and the plugin has no play button. */
.gr-below { display:flex; flex-direction:column; align-items:center; gap:1.1rem; margin-top:1.7rem; }
/* play + tutorial always share ONE row, on every width: the pair scales with
   the viewport (font, tracking and padding all clamp) instead of wrapping. */
.gr-actions { display:flex; align-items:center; justify-content:center; gap:clamp(.4rem,1.6vw,.7rem); flex-wrap:nowrap; width:100%; max-width:1000px; }
.gr-tut { display:inline-flex; align-items:center; gap:clamp(.3rem,1.2vw,.5rem);
  padding:clamp(.58rem,2vw,.72rem) clamp(.7rem,3.2vw,1.35rem); border-radius:12px;
  border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(10px) saturate(1.4); backdrop-filter:blur(10px) saturate(1.4);
  color:#fff; text-decoration:none;
  font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:clamp(.58rem,2.6vw,.76rem); font-weight:700;
  letter-spacing:clamp(.02em,.28vw,.1em); text-transform:uppercase; white-space:nowrap;
  text-shadow:0 1px 2px rgba(10,10,8,.45);
  transition:transform .3s var(--ease), background .25s var(--ease), border-color .25s var(--ease); }
.gr-tut svg { width:clamp(13px,3.4vw,17px); height:clamp(13px,3.4vw,17px); flex-shrink:0; }
.gr-tut:hover { transform:translateY(-2px); background:rgba(255,255,255,.22); border-color:#fff; }
.gr-tut:focus-visible { outline:2px solid var(--tan); outline-offset:3px; }

/* The three playback modes, one line each on the photo itself. Same frosted
   glass as the chips and the play button, so the row reads as part of the
   instrument: hold / step / keys is the selector in the panel's top row. */
/* The mode cards, the claim panel and the button row all stop exactly
   where the instrument stops: 1000px is .granello-wrap's own max-width. */
.gr-modes { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; width:100%; max-width:1000px; }
/* One claim panel under the mode cards, same flat glass as the cards and the
   tutorial button. Sized to hold the whole line on one row on desktop and
   tablet; on phones the sentence is far too long for a readable single line,
   so it wraps inside the same panel. */
.gr-claim { width:100%; max-width:1000px; margin:0; box-sizing:border-box;
  padding:.62rem 1rem; border-radius:12px; text-align:center;
  border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(10px) saturate(1.4); backdrop-filter:blur(10px) saturate(1.4);
  font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:clamp(.6rem,1.16vw,.78rem); font-weight:500; line-height:1.5;
  color:rgba(255,255,255,.9); white-space:nowrap; overflow:hidden;
  text-shadow:0 1px 2px rgba(10,10,8,.5), 0 2px 10px rgba(10,10,8,.26); }
.gr-claim b { font-weight:900; color:#fff; }
.gr-claim-alt { color:rgba(255,255,255,.9); }
.gr-claim-alt b { color:#fff; }
@media (max-width:720px) {
  /* a 120-character line cannot be legible on one row at this width */
  .gr-claim { white-space:normal; font-size:.72rem; padding:.6rem .8rem; }
  .gr-claim-alt { display:block; margin-top:.15rem; }
}
/* Surface (tint, bevels, lens, rim) comes from the shared Tahoe-glass block
   above; only the card's own geometry lives here. */
.gm-card {
  border-radius:12px;
  padding:.85rem .95rem .9rem;
  text-align:left;
}
/* Card title: an evocative verb in the site's own heading language, the
   word plus the sand full stop ('Freeze.' like 'Try it.'). The opaque
   plugin-chip treatment before it was the one solid sticker in an otherwise
   translucent system and always read as pasted on; the technical mode name
   (hold / step / keys) moved into the copy instead. */
.gm-name { font-size:1.02rem; font-weight:900; letter-spacing:-.02em; line-height:1.1; color:#fff;
  text-shadow:0 1px 2px rgba(10,10,8,.55), 0 1px 6px rgba(10,10,8,.35); }
.gm-dot { color:var(--tan); }
/* Softer shadow than the big labels: at this size the tight 2px layer alone
   carries the contrast, and a strong 6px halo stamps the small glyphs. */
.gm-copy { margin-top:.5rem; font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.74rem; font-weight:500; line-height:1.5; letter-spacing:.005em; color:rgba(255,255,255,.92); text-shadow:0 1px 2px rgba(10,10,8,.5), 0 2px 10px rgba(10,10,8,.26); }
/* Phones keep the three modes side by side, one row of three columns; the
   type steps down so three narrow cards still read. */
@media (max-width:720px){
  .gr-modes { gap:.45rem; }
  .gm-card { padding:.6rem .55rem .65rem; }
  .gm-name { font-size:.82rem; }
  .gm-copy { font-size:.62rem; line-height:1.45; margin-top:.45rem; }
}
.gr-play { display:inline-flex; align-items:center; gap:clamp(.3rem,1.4vw,.6rem); padding:.72rem 1.5rem; border:0; border-radius:8px; background:var(--crt); color:rgb(236,233,226); font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:clamp(.58rem,2.6vw,.76rem); font-weight:700; letter-spacing:clamp(.02em,.34vw,.14em); text-transform:uppercase; white-space:nowrap; cursor:pointer; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.gr-play:hover { transform:translateY(-2px); }
.gr-play:focus-visible { outline:2px solid var(--tan); outline-offset:3px; }
.gr-play-icon { display:inline-flex; width:clamp(8px,2.2vw,10px); height:clamp(10px,2.6vw,12px); flex-shrink:0; }
.gr-play-icon svg { width:100%; height:100%; display:block; }
.gr-play.is-playing .gr-play-icon { width:10px; height:11px; background:currentColor; border-radius:2px; }
.gr-play.is-playing .gr-play-icon svg { display:none; }

.shot-frame { border-radius:16px; overflow:hidden; border:1px solid rgba(154,149,140,.3); box-shadow:rgba(19,18,16,.05) 0 2px 4px, rgba(19,18,16,.2) 0 24px 50px -28px; background:#cec9bd; line-height:0; }
.shot-frame img { width:100%; height:auto; display:block; }
.shot-frame--dark { background:#252420; border-color:rgba(19,18,16,.4); }

/* Buy — discount badge. */
.off-badge { display:inline-block; background:var(--tan); color:#252420; font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.84rem; font-weight:900; letter-spacing:.02em; line-height:1; padding:.38rem .75rem; border-radius:4px; }
/* Static, not blinking: the countdown's own seconds are the movement here,
   and a pulse under a ticking number just reads as a flicker. */
/* Launch-offer caption beside the 40% OFF badge. A live countdown used to
   sit here; the offer has no published deadline any more, so it reads
   "ends soon" and no clock can contradict the shop. */
.off-ends { font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.72rem;
  font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--crt); white-space:nowrap; }
.buy-panel { position:relative; max-width:560px; margin:0 auto; background:var(--paper-deep); border:1px solid rgba(154,149,140,.24); border-radius:16px; padding:1.8rem 1.9rem 1.6rem; text-align:left; box-shadow:rgba(19,18,16,.05) 0 2px 4px, rgba(19,18,16,.26) 0 30px 60px -28px; }
.bp-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.bp-label { font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); }
/* badge + countdown are ONE unit: never allowed to wrap apart */
.bp-flags { display:flex; align-items:center; gap:.6rem; flex-wrap:nowrap; white-space:nowrap; }
.bp-price { display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.bp-was { font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:1.15rem; font-weight:500; color:var(--ink-faint); text-decoration:line-through; text-decoration-thickness:1.5px; }
.bp-now { font-size:clamp(2.8rem,8vw,3.6rem); font-weight:900; letter-spacing:-.045em; line-height:.9; color:var(--ink); }
/* The cents ride small beside the big figure: '€29' with '.90' at less than
   half size, same weight, so the price reads 29.90 without losing the punch
   of the number. Shared by the buy panel and the closing card. */
.price-cents { font-size:.45em; font-weight:900; letter-spacing:-.02em; vertical-align:baseline; }
.bp-once { font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.66rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; line-height:1.45; color:var(--ink-faint); align-self:flex-end; padding-bottom:.15rem; }
.bp-list { list-style:none; margin:0 0 1.5rem; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.bp-list li { position:relative; padding-left:1.5rem; font-size:.87rem; line-height:1.45; letter-spacing:-.005em; color:var(--ink-soft); }
.bp-list li::before { content:""; position:absolute; left:.15rem; top:.5em; width:9px; height:5px; border-left:1.8px solid var(--tan-text); border-bottom:1.8px solid var(--tan-text); transform:rotate(-45deg); }
.bp-cta { display:block; width:100%; box-sizing:border-box; background:var(--crt); color:rgb(236,233,226); font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:1rem; font-weight:700; letter-spacing:.01em; text-align:center; text-decoration:none; cursor:pointer; padding:1.15rem 2rem; border-radius:100px; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.bp-cta:hover { transform:translateY(-2px); box-shadow:rgba(19,18,16,.3) 0 14px 30px -14px; }
/* A highlight travelling across the letters — the gradient is clipped to the
   glyphs and its position animated, so nothing moves but the light. The band
   is narrow and the pause between passes long: on the page's one paid action
   this should read as a sheen, not as a blinking sign. The idle colour is the
   button's own ivory, so if background-clip:text is unsupported the label
   simply stays that colour. */
/* The resting text is dimmed to ~65% so the full-white band reads as real
   light passing through, not a subtle sheen nobody notices. */
.bp-cta .shine {
  background-image:linear-gradient(100deg,
    rgba(236,233,226,.65) 0 30%, #fff 48% 52%, rgba(236,233,226,.65) 70% 100%);
  background-size:200% 100%;
  background-repeat:repeat;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:btnShine 2.8s linear infinite;
}
/* The gradient is a repeating tile and one animation cycle slides it by
   exactly one tile width: with background-size 200%, position offset is
   -p times the element width, so p from 200% down to 0 moves the image 2
   widths, one full tile — first and last frame are the same pixels, so the
   loop never shows a restart. The tile is small and the ramps wide (30% to
   48% each side of the band), so some light is travelling over the letters
   for most of the cycle: no long dead stretch between passes. */
@keyframes btnShine {
  0%   { background-position:200% 0; }
  100% { background-position:0% 0; }
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)) {
  .bp-cta .shine { -webkit-text-fill-color:currentColor; animation:none; }
}
@media (prefers-reduced-motion:reduce){
  .bp-cta .shine { animation:none; -webkit-text-fill-color:currentColor; }
}
.bp-secure { margin-top:.85rem; font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.68rem; letter-spacing:.04em; color:var(--ink-faint); text-align:center; }

.buy-trust { list-style:none; margin:1.6rem auto 0; padding:0; max-width:900px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.9rem 1.6rem; }
.buy-trust li { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:.7rem; align-items:center; }
.buy-trust svg { grid-row:1 / span 2; width:19px; height:19px; color:var(--tan-text); }
.buy-trust b { font-size:.83rem; font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.buy-trust span { font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.68rem; line-height:1.4; letter-spacing:.01em; color:var(--ink-faint); }

.buy-compat { max-width:900px; margin:1.8rem auto 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.1rem 1.6rem; border-top:1px solid rgba(154,149,140,.28); padding-top:1.4rem; }
.bc-k { display:block; font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.66rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--tan-text); margin-bottom:.35rem; }
.bc-v { font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.78rem; line-height:1.5; letter-spacing:.01em; color:var(--ink-soft); }

.buy-more { max-width:900px; margin:1.1rem auto 0; border-top:1px solid rgba(154,149,140,.28); }
.buy-more > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0 .2rem; font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); transition:color .2s var(--ease); }
.buy-more > summary::-webkit-details-marker { display:none; }
.buy-more > summary:hover { color:var(--ink); }
.buy-more > summary svg { width:16px; height:16px; flex-shrink:0; transition:transform .3s var(--ease); }
.buy-more[open] > summary svg { transform:rotate(180deg); }
/* While the close animation runs the element is still technically [open];
   the chevron turns back immediately so the click feels answered. */
.buy-more.is-closing > summary svg, .faq-item.is-closing > summary svg { transform:rotate(0deg); }
.bm-body { padding:.6rem 0 .2rem; }
.spec-row { padding:.75rem 0; border-top:1px solid rgba(154,149,140,.28); }
.spec-row:first-child { border-top:none; padding-top:0; }
.spec-k { display:block; font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--tan-text); margin-bottom:.4rem; }
.spec-v { font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.84rem; line-height:1.55; letter-spacing:.01em; color:var(--ink-soft); }
.spec-v a { color:var(--ink); border-bottom:1px solid rgba(154,149,140,.5); text-decoration:none; transition:border-color .2s; }
.spec-v a:hover { border-color:var(--ink); }

/* Nav — the price is the one thing that stays reachable from anywhere. */
.nav-buy { display:inline-flex; align-items:center; gap:.4rem; background:var(--crt); color:rgb(236,233,226); font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; text-decoration:none; padding:.6rem 1.05rem; border-radius:100px; white-space:nowrap; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.nav-buy:hover { transform:translateY(-1px); box-shadow:rgba(19,18,16,.3) 0 8px 18px -8px; }

/* Closing CTA — the last chance to act, right after the demos. */
.final-cta { position:relative; z-index:1; padding:1rem clamp(1.5rem,5vw,5rem) 3rem; max-width:1320px; margin:0 auto; }
.fc-inner { position:relative; max-width:900px; margin:0 auto; border-radius:16px; background:var(--crt); padding:3rem clamp(1.4rem,4vw,3rem) 2.8rem; text-align:center; box-shadow:rgba(19,18,16,.08) 0 2px 4px, rgba(19,18,16,.3) 0 30px 60px -30px; }
/* Perimeter shine: one highlight running around the card's border, starting
   at the top-left corner and travelling clockwise through bottom-right.
   A conic gradient is what actually follows a perimeter — the previous
   135deg linear one swept a diagonal band across the whole card, so it lit
   half the top edge at once instead of moving along the frame. The ring
   itself is a masked pseudo: two mask layers XORed leave only the 1.5px
   frame. The angle is animated through a registered custom property so it
   interpolates; where @property is unsupported the ring simply sits still
   at its starting angle, which still reads as a lit border. */
@property --fc-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 315deg;
}
.fc-inner::before {
  content:""; position:absolute; inset:0; border-radius:16px; padding:1.5px;
  background:conic-gradient(from var(--fc-a) at 50% 50%,
    rgba(255,255,255,.95) 0deg,
    rgba(244,244,239,.30) 26deg,
    rgba(244,244,239,.13) 70deg,
    rgba(244,244,239,.13) 290deg,
    rgba(244,244,239,.30) 334deg,
    rgba(255,255,255,.95) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  pointer-events:none;
  animation:fcRing 4.2s linear infinite;
}
/* A full turn per cycle: the last frame is the first frame, so the loop has
   no restart to see. */
@keyframes fcRing {
  from { --fc-a:315deg; }
  to   { --fc-a:675deg; }
}
@media (prefers-reduced-motion:reduce){ .fc-inner::before { animation:none; } }
.fc-star { display:block; height:26px; width:auto; margin:0 auto 1.15rem; }
.fc-title { font-size:clamp(1.7rem,3.6vw,2.5rem); font-weight:900; letter-spacing:-.03em; line-height:1.05; color:rgba(244,244,239,.94); }
.fc-dot { color:var(--tan); }
.fc-row { margin-top:1.8rem; display:flex; align-items:center; justify-content:center; gap:1.4rem; flex-wrap:wrap; }
.fc-price { display:flex; align-items:baseline; gap:.6rem; }
.fc-was { font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:1rem; font-weight:500; color:rgba(244,244,239,.45); text-decoration:line-through; text-decoration-thickness:1.5px; }
.fc-price b { font-size:clamp(2rem,5vw,2.6rem); font-weight:900; letter-spacing:-.04em; line-height:1; color:#fff; }
.fc-btn { display:inline-flex; align-items:center; justify-content:center; background:var(--paper); color:var(--crt); font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:1rem; font-weight:700; letter-spacing:.01em; text-decoration:none; padding:1.1rem 2.4rem; border-radius:100px; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.fc-btn:hover { transform:translateY(-2px); box-shadow:rgba(10,10,8,.5) 0 14px 30px -14px; }
.fc-note { margin-top:1.2rem; font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.72rem; letter-spacing:.04em; line-height:1.6; color:rgba(244,244,239,.55); }

/* FAQ — native disclosures: keyboard and screen-reader behaviour for free,
   and the answers stay in the page for search engines. */
.faq-list { max-width:800px; margin:0 auto; border-top:1px solid rgba(154,149,140,.28); }
.faq-item { border-bottom:1px solid rgba(154,149,140,.28); }
.faq-item > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1.2rem; padding:1.15rem .2rem; font-size:1rem; font-weight:700; letter-spacing:-.015em; line-height:1.35; color:var(--ink); transition:color .2s var(--ease); }
.faq-item > summary::-webkit-details-marker { display:none; }
.faq-item > summary:hover { color:var(--tan-text); }
.faq-item > summary svg { width:18px; height:18px; flex-shrink:0; color:var(--tan-text); transition:transform .3s var(--ease); }
.faq-item[open] > summary svg { transform:rotate(180deg); }
.faq-a { padding:0 .2rem 1.3rem; max-width:64ch; }
.faq-a p { font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.8rem; line-height:1.65; letter-spacing:.005em; color:var(--ink-soft); }
.faq-a a { color:var(--ink); border-bottom:1px solid rgba(154,149,140,.5); text-decoration:none; transition:border-color .2s; }
.faq-a a:hover { border-color:var(--ink); }

/* Hover states */
.scp0:hover { color: var(--tan) !important; }
.scp1:hover { color: var(--ink) !important; }
.scp2:hover { color: var(--ink) !important; border-color: var(--ink) !important; }
.scp3:focus { border-color: var(--tan) !important; }
.scp4:hover { transform: translateY(-2px); }
/* The footer is dark now — its mail link brightens to white on hover. */
.scp5:hover { color: #fff !important; border-color: #fff !important; }
#contact input::placeholder { color: rgba(244,244,239,.4); }

/* Below this the five links plus the pill stop fitting: Listen and Contact
   are both reachable by scrolling, the price is not. */
@media (max-width: 760px) { .nav-drop { display: none; } }

/* Mobile */
@media (max-width: 640px) {
  /* clip, not hidden: hidden turns the body into a scroll container and kills
     the hero pin's position:sticky. clip guards the x axis without that. */
  html, body { overflow-x: hidden; overflow-x: clip; }
  #nav { padding: 12px 1.1rem !important; gap: 10px; }
  #nav nav ul { gap: 14px !important; }
  #nav nav a { font-size: 11px !important; letter-spacing: .04em !important; }
  #nav nav a.nav-buy { font-size: 11.5px !important; letter-spacing: .04em !important; padding: .55rem .9rem; }
  #nav > a img { width: 54px !important; }
  .buy-panel { padding: 1.5rem 1.3rem 1.4rem; }
  /* badge + caption on ONE line, comfortably inside a 360px card row */
  .off-badge { font-size:.74rem; padding:.34rem .6rem; }
  .off-ends { font-size:.64rem; letter-spacing:.1em; }
  .fc-inner { padding: 2rem 1.3rem; }
  .fc-btn { width: 100%; }
  .faq-item > summary { font-size: .93rem; }
}
/* Very narrow phones (iPhone SE 1st gen and similar): at 320px the five nav
   items still run 27px past the right edge and "Contact" gets clipped. */
@media (max-width: 360px) {
  #nav { padding: 12px .75rem !important; }
  #nav nav ul { gap: 9px !important; }
  #nav nav a { font-size: 10px !important; letter-spacing: .02em !important; }
  #nav nav a.nav-buy { font-size: 10.5px !important; padding: .5rem .7rem; }
  #nav > a img { width: 46px !important; }
  #wild, #buy, #feedback, #faq, .final-cta { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  /* #community is full-bleed: its gutter belongs to the header and the row. */
  #community > header { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .stories-row { --sr-gutter: 1.25rem; }
  /* #play itself is full-bleed now (the photo band runs edge to edge), so the
     side gutter belongs to its two inner wrappers, not to the section. */
  #play > header, .play-stage-in { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  #play { padding-top: 3rem !important; }
  #buy { padding-top: 2rem !important; padding-bottom: 3rem !important; }
  /* The dark band needs more air than an ivory section to read as deliberate
     rather than cramped, so it gets a taller floor than its neighbours. */
  #community { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  #feedback { padding-top: 1rem !important; padding-bottom: 3rem !important; }
  #wild { padding-top: 2.5rem !important; padding-bottom: 3rem !important; }
  /* iOS zooms the page in on any input under 16px when it takes focus. */
  input[type=email] { font-size: 16px !important; }
}