/* Showcase page — layered on top of styles.css, which supplies the palette
   tokens (--bg, --surface, --peri…), the font and the .cta button.

   Everything here is scoped under .showcase-body. styles.css is shared with
   index.html (the live claim portal) and app.js, so nothing in this file may
   redefine a token globally — new tokens are declared on .showcase-body.

   The two phone mockups deliberately reuse the APP's proportions and copy, not
   a marketing abstraction of them: the argument is "here is your listing", and
   it only lands if what's drawn matches what a venue will actually see. The
   device chassis around them is new; the screen content is not.

   Card rule inherited from styles.css: things that sit IN the page are opaque
   cards; glass is only for things that FLOAT OVER content. So the sticky
   header and the photo captions are glass, and section cards are not. */

.showcase-body {
  /* A floor darker than --bg, so the existing var(--bg) cards actually lift.
     Previously page and card were the same navy and read as one flat plane. */
  --ink: #16233B;
  --ink-deep: #101B30;
  --gold: #E8B765;          /* the premium tier's accent (Tunda East) */
  --peri-glow: rgba(199, 212, 238, 0.16);
  --shadow-lift: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
  --shadow-deep: 0 30px 70px -24px rgba(0, 0, 0, 0.7);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --gutter: clamp(20px, 5vw, 48px);
  --maxw: 1160px;

  background: var(--ink);
  color: #fff;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 500;
  margin: 0;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Depth field ───────────────────────────────────────────────────────────
   A fixed, non-scrolling layer of two very large blurred glows plus a faint
   grain. This is what stops the page reading as a flat slab of navy; it costs
   one element and never repaints on scroll. */
.sc-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58vw 46vw at 12% -6%,  rgba(199, 212, 238, 0.16), transparent 62%),
    radial-gradient(52vw 44vw at 92% 8%,   rgba(138, 160, 204, 0.11), transparent 66%),
    radial-gradient(64vw 52vw at 78% 96%,  rgba(232, 183, 101, 0.075), transparent 68%),
    radial-gradient(46vw 40vw at 4% 88%,   rgba(199, 212, 238, 0.05),  transparent 70%);
}
/* Grain, as an inline SVG turbulence — no network request, no image file. */
.sc-field::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.32;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Everything above the field. */
.showcase-body > *:not(.sc-field) { position: relative; z-index: 1; }

/* ── Shared rhythm ─────────────────────────────────────────────────────── */
.sc-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.sc-section { padding-block: clamp(64px, 9vw, 118px); }

/* The eyebrow does most of the work of making a page read as designed:
   a numbered, letter-spaced label that gives each section an identity. */
.sc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--peri-dim);
  margin-bottom: 18px;
}
.sc-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, var(--peri), transparent);
}
.sc-eyebrow-gold { color: var(--gold); }
.sc-eyebrow-gold::before { background: linear-gradient(90deg, var(--gold), transparent); }

.sc-h2 {
  font-size: clamp(27px, 3.6vw, 40px);
  font-weight: 800;
  letter-spacing: -1.1px;
  line-height: 1.14;
  margin: 0 0 14px;
  text-wrap: balance;
}
.sc-sub {
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 500;
  color: var(--peri-dim);
  max-width: 58ch;
  margin: 0;
}
.sc-head { max-width: 720px; margin-bottom: clamp(34px, 4.5vw, 54px); }
.sc-head-center { margin-inline: auto; text-align: center; }
.sc-head-center .sc-sub { margin-inline: auto; }

/* The gradient-clipped phrase, reusing the .wordmark technique from
   styles.css so the hero headline and the logo share one treatment. */
.sc-grad {
  background: linear-gradient(120deg, #FFFFFF 0%, #C7D4EE 42%, #8AA0CC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Sticky glass header ───────────────────────────────────────────────────
   Floats over content, so per the card rule in styles.css it is glass. It
   starts transparent over the hero photo and gains its fill once scrolled. */
.sc-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background 260ms var(--ease), border-color 260ms var(--ease),
              backdrop-filter 260ms var(--ease);
}
.sc-nav.is-stuck {
  background: rgba(22, 35, 59, 0.72);
  border-bottom-color: var(--hairline-strong);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}
.sc-nav .wordmark { font-size: 19px; }
.sc-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hairline-strong);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 180ms var(--ease), border-color 180ms var(--ease),
              transform 180ms var(--ease);
}
.sc-nav-cta:hover {
  background: rgba(199, 212, 238, 0.14);
  border-color: rgba(199, 212, 238, 0.45);
  transform: translateY(-1px);
}

/* ── Hero ──────────────────────────────────────────────────────────────────
   Full-bleed photograph behind a heavy gradient that lands on --ink, so the
   image dissolves into the page rather than ending on a hard edge. */
.sc-hero {
  position: relative;
  padding-block: clamp(70px, 11vw, 132px) clamp(56px, 8vw, 96px);
  margin-top: -70px;          /* pull the photo up behind the sticky header */
  padding-top: clamp(140px, 18vw, 210px);
  overflow: hidden;
  isolation: isolate;
}
.sc-hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.sc-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.06) contrast(1.02);
}
/* Two scrims: a navy multiply that tints any photo into the palette, and a
   vertical ramp that guarantees text contrast regardless of the image. */
.sc-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Tuned by eye against the photograph: dark enough that white text clears
     contrast over the busiest part of the image, light enough that the room is
     still legible as a room. An over-heavy scrim was making the hero read as
     flat navy and wasting the photograph entirely. */
  background:
    linear-gradient(180deg,
      rgba(16, 27, 48, 0.42) 0%,
      rgba(22, 35, 59, 0.58) 46%,
      rgba(22, 35, 59, 0.88) 78%,
      var(--ink) 100%),
    linear-gradient(90deg, rgba(22, 35, 59, 0.86) 0%, rgba(30, 46, 75, 0.34) 62%, transparent 100%);
}

.sc-hero-inner { max-width: 940px; }
.sc-hero h1 {
  font-size: clamp(38px, 6.4vw, 72px);
  font-weight: 800;
  letter-spacing: -2.2px;
  line-height: 1.03;
  margin: 0 0 22px;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.sc-lede {
  color: var(--peri-dim);
  font-size: clamp(15.5px, 1.7vw, 18.5px);
  font-weight: 500;
  line-height: 1.6;
  max-width: 60ch;
  margin: 0 0 34px;
}

.sc-cta-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
/* .cta from styles.css is width:100% (built for a form). Reset it to an
   inline pill here without touching the shared sheet. */
.sc-cta {
  width: auto;
  height: auto;
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 34px;
  font-size: 15.5px;
  text-decoration: none;
  box-shadow: 0 10px 30px -8px rgba(199, 212, 238, 0.4);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.sc-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -10px rgba(199, 212, 238, 0.55);
}
.sc-cta svg { width: 17px; height: 17px; }
.sc-cta-sub {
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  margin: 0;
}

/* Trust strip — the page's own promises, set as a row of facts. */
.sc-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin-top: 42px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline-strong);
  max-width: 760px;
}
.sc-trust-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--peri-dim);
}
.sc-trust-item svg { width: 16px; height: 16px; color: var(--ok); flex: none; }

/* ── Before / after ────────────────────────────────────────────────────── */
/* Top-aligned, not centred: the claimed phone is far taller than the empty
   one, and centring pushed the unclaimed screen halfway down the section,
   breaking the side-by-side comparison the whole section exists to make. */
.sc-compare {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(16px, 3vw, 44px);
  flex-wrap: wrap;
}
/* The connector sits against the phone screens, below their labels. */
.sc-compare .sc-arrow { margin-top: 120px; }
/* Contains the claimed phone's glow, which is intentionally larger than the
   chassis and would otherwise widen the page on narrow viewports. Vertical
   overflow stays visible so the glow still bleeds above and below. */
.sc-compare { overflow-x: clip; }
/* Fluid rather than fixed: two 328px phones plus the connector and gaps
   overflow well before the 720px stacking breakpoint, so the width tracks the
   viewport and only settles at 328px once there is genuinely room. */
.sc-phone {
  width: min(328px, 100%);
  flex: 0 1 328px;
  min-width: 0;
}
/* The unclaimed side is dimmed and pushed back so the eye lands on the
   claimed one — the whole page is an argument for the right-hand column. */
.sc-phone-dim { opacity: 0.62; filter: saturate(0.75); }
.sc-phone-hero { transform: translateY(-10px); }

.sc-phone-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 14px;
  text-align: center;
}
.sc-phone-label-on {
  color: var(--ok);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.sc-phone-label-on::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.22);
}

/* Device chassis. The bezel is a darker navy than anything else on the page
   so the screen inside reads as lit. The ::before is the specular edge, the
   ::after a diagonal glass reflection. */
.sc-device {
  position: relative;
  border-radius: 46px;
  padding: 11px;
  background: linear-gradient(160deg, #2A3B5C 0%, #0E1729 38%, #0B1322 100%);
  box-shadow:
    var(--shadow-deep),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
/* The glow deliberately extends past the chassis. It must not widen the page,
   so the phone column clips it horizontally (see .sc-phone overflow) — at
   320px an un-clipped -14% inset was pushing scrollWidth past the viewport. */
.sc-device-lit::before {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--peri-glow), transparent 72%);
  filter: blur(14px);
  pointer-events: none;
}
.sc-device::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 46px;
  pointer-events: none;
  background: linear-gradient(128deg,
    rgba(255, 255, 255, 0.11) 0%,
    rgba(255, 255, 255, 0.03) 22%,
    transparent 44%);
}
.sc-notch {
  position: absolute;
  top: 17px; left: 50%;
  transform: translateX(-50%);
  width: 86px; height: 22px;
  border-radius: var(--r-pill);
  background: #080D18;
  z-index: 3;
}

.sc-screen {
  position: relative;
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 36px;
  overflow: hidden;
}
/* Status bar — sells the device more than the bezel does. */
.sc-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 20px 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.9);
  position: relative;
  z-index: 2;
}
.sc-status-icons { display: flex; align-items: center; gap: 5px; }
.sc-status-icons svg { width: 15px; height: 11px; opacity: 0.9; }

.sc-cover { height: 148px; position: relative; }
/* Mirrors SpotCoverPlaceholder in the app: accent wash + glyph, never a stock
   photo standing in for a real venue. */
.sc-cover-empty {
  background: linear-gradient(135deg,
    rgba(239, 71, 111, 0.2), rgba(239, 71, 111, 0.05));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.sc-cover-glyph {
  width: 40px; height: 40px;
  color: rgba(239, 71, 111, 0.72);   /* the Spot's accent, as in the app */
}
.sc-cover-hint {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.55);
}
/* A real photo, not a gradient: the whole argument of the right-hand column
   is "this is what a finished listing looks like", and a flat colour block
   undersells it next to the empty state on the left. The scrim keeps the name
   and Verified chip legible over whatever the image does; the final gradient
   is the fallback if the image never loads. */
.sc-cover-photo {
  background:
    linear-gradient(180deg, rgba(30, 46, 75, 0.06) 30%, var(--bg) 100%),
    url('assets/img/spot-cover.jpg')
      center / cover no-repeat,
    linear-gradient(135deg, #3d5a80, #98c1d9);
}
.sc-verified {
  position: absolute;
  top: 12px; right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(14, 23, 41, 0.78);
  border: 1px solid rgba(199, 212, 238, 0.34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--r-pill);
  padding: 5px 11px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--peri);
}

.sc-body { padding: 15px 16px 20px; }
.sc-name { font-size: 19.5px; font-weight: 800; letter-spacing: -0.4px; }
.sc-meta { font-size: 12.5px; font-weight: 500; color: var(--muted); margin-top: 3px; }
.sc-tagline { font-size: 13.5px; font-weight: 500; margin-top: 9px; }

.sc-notice {
  margin-top: 14px;
  padding: 12px 13px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.035);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}

.sc-perk {
  margin-top: 10px;
  padding: 12px 13px;
  border-radius: 14px;
}
.sc-perk-green {
  background: linear-gradient(135deg, rgba(6, 214, 160, 0.14), rgba(6, 214, 160, 0.05));
  border: 1px solid rgba(6, 214, 160, 0.3);
}
.sc-perk-blue {
  background: linear-gradient(135deg, rgba(159, 177, 214, 0.13), rgba(159, 177, 214, 0.04));
  border: 1px solid rgba(159, 177, 214, 0.28);
}
.sc-perk-t {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--peri);
}
.sc-perk-green .sc-perk-t { color: #06D6A0; }
.sc-perk-d { font-size: 12.5px; font-weight: 500; margin-top: 4px; }

.sc-card {
  margin-top: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--card-shadow);
}
.sc-card-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 5px;
}
.sc-kicker {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px;
  color: var(--muted); text-transform: uppercase;
}
.sc-card-title { font-size: 15px; font-weight: 700; margin-bottom: 9px; }
.sc-card-title-inline { font-size: 15px; font-weight: 700; }
.sc-cutlery { opacity: 0.55; font-size: 14px; }
.sc-chip {
  background: rgba(255, 209, 102, 0.14);
  border: 1px solid rgba(255, 209, 102, 0.36);
  color: #FFD166;
  border-radius: var(--r-pill);
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* Track rows — the markup for these is generated by showcase.js. The class
   names below are a contract with that file; do not rename them. */
.sc-tracks { list-style: none; margin: 0; padding: 0; }
.sc-track {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
}
.sc-track-loading {
  font-size: 12.5px; font-weight: 500; color: var(--muted);
}
.sc-track-n {
  width: 15px; text-align: center;
  font-size: 11px; font-weight: 700; color: var(--muted);
}
/* Album art, matching the app's track rows. Falls back to a tinted square (see
   the onerror in showcase.js) so a dead artwork URL leaves the row aligned
   rather than collapsing it. */
.sc-art {
  width: 34px; height: 34px; flex: none;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(199, 212, 238, 0.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.sc-art-blank {
  display: inline-block;
  background: rgba(199, 212, 238, 0.12);
}
.sc-track-b { flex: 1; min-width: 0; }
.sc-track-t {
  display: block; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-track-a {
  display: block; font-size: 11.5px; font-weight: 500; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-play {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  background: rgba(199, 212, 238, 0.14);
  color: var(--peri);
  font-size: 9px;
  display: flex; align-items: center; justify-content: center;
}
.sc-tracks-note {
  margin-top: 10px;
  font-size: 11.5px; font-weight: 500; font-style: italic;
  color: var(--muted);
}

.sc-menu-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0;
}
.sc-menu-row + .sc-menu-row { border-top: 1px solid var(--hairline); }
.sc-menu-n { font-size: 13px; font-weight: 600; }
.sc-menu-d { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 3px; }
.sc-price { font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--peri); }
.sc-sig {
  background: rgba(6, 214, 160, 0.16);
  color: #06D6A0;
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  vertical-align: middle;
}
.sc-event { display: flex; gap: 12px; align-items: flex-start; }
.sc-event-icon {
  width: 38px; height: 38px; flex: none;
  border-radius: var(--r-md);
  background: rgba(199, 212, 238, 0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}

/* Connector between the two states. */
.sc-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--peri);
  box-shadow: var(--shadow-lift);
}
.sc-arrow svg { width: 20px; height: 20px; }

/* ── Feature grid ──────────────────────────────────────────────────────────
   Deliberately two densities: three large photo cards carry the headline
   features, three compact icon cards carry the rest. Six identical boxes is
   what made the original read as a spec sheet. */
.sc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.sc-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-card);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: transform 260ms var(--ease), border-color 260ms var(--ease),
              box-shadow 260ms var(--ease);
}
.sc-feature:hover {
  transform: translateY(-5px);
  border-color: rgba(199, 212, 238, 0.34);
  box-shadow: var(--shadow-lift);
}
.sc-feature-media {
  position: relative;
  aspect-ratio: 16 / 10;   /* reserves height so nothing jumps while loading */
  overflow: hidden;
  background: linear-gradient(135deg, #2C426A, #1E2E4B);
}
.sc-feature-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.05);
  transition: transform 600ms var(--ease);
}
.sc-feature:hover .sc-feature-media img { transform: scale(1.045); }
.sc-feature-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(30, 46, 75, 0.34) 0%,
    rgba(22, 35, 59, 0.55) 62%,
    rgba(22, 35, 59, 0.9) 100%);
}
.sc-feature-txt { padding: 20px 22px 24px; }
.sc-feature h3 {
  font-size: 17px; font-weight: 700; letter-spacing: -0.3px;
  margin: 0 0 8px;
}
.sc-feature p {
  font-size: 13.5px; font-weight: 500; color: var(--peri-dim);
  margin: 0; line-height: 1.62;
}
.sc-feature strong { color: #fff; font-weight: 700; }

/* Icon tile — replaces the emoji. */
.sc-feature-i {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 13px;
  background: rgba(199, 212, 238, 0.1);
  border: 1px solid rgba(199, 212, 238, 0.2);
  color: var(--peri);
  margin-bottom: 15px;
}
.sc-feature-i svg { width: 21px; height: 21px; }
/* On a photo card the tile sits inside the image's lower-left corner, over the
   scrim. It stays fully within the media box on purpose — both the card and
   the media clip their overflow to keep the photo inside the radius, so a tile
   hung off either bottom edge gets sliced in half. */
.sc-feature-photo .sc-feature-i {
  position: absolute;
  left: 18px; bottom: 16px;
  z-index: 2;
  background: rgba(14, 23, 41, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(199, 212, 238, 0.3);
  margin: 0;
}
.sc-feature-photo .sc-feature-txt { padding-top: 20px; }

/* ── Tunda East ────────────────────────────────────────────────────────────
   The visual peak of the page, and the only place the gold accent appears —
   it marks the paid tier, so it should not be spent anywhere else. */
.sc-east {
  position: relative;
  border-radius: clamp(22px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(232, 183, 101, 0.26);
  box-shadow: var(--shadow-deep);
  isolation: isolate;
}
.sc-east-media { position: absolute; inset: 0; z-index: -1; }
.sc-east-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.05);
}
.sc-east-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg,
      rgba(16, 27, 48, 0.96) 0%,
      rgba(16, 27, 48, 0.9) 46%,
      rgba(22, 35, 59, 0.66) 100%),
    radial-gradient(70% 90% at 96% 6%, rgba(232, 183, 101, 0.2), transparent 68%);
}
.sc-east-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(26px, 4vw, 52px);
  padding: clamp(30px, 4.6vw, 60px);
  align-items: start;
}
.sc-east p {
  font-size: clamp(14.5px, 1.5vw, 16px);
  font-weight: 500;
  color: var(--peri-dim);
  line-height: 1.68;
  margin: 0 0 15px;
}
.sc-east p:last-child { margin-bottom: 0; }
.sc-east strong { color: #fff; font-weight: 700; }
.sc-east em { color: var(--gold); font-style: italic; }
/* The "never billed" promise, pulled out of a footnote — it is the single
   most reassuring sentence on the page for a venue owner. */
.sc-east-note {
  border-left: 2px solid var(--gold);
  padding: 4px 0 4px 18px;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #fff !important;
  line-height: 1.6;
}
.sc-east-aside {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(232, 183, 101, 0.24);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.sc-east-aside-t {
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 14px;
}
.sc-east-list { list-style: none; margin: 0; padding: 0; }
.sc-east-list li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 13.5px; font-weight: 500; color: var(--peri-dim);
  padding: 9px 0;
  line-height: 1.55;
}
.sc-east-list li + li { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.sc-east-list svg {
  width: 16px; height: 16px; flex: none; margin-top: 2px;
  color: var(--gold);
}

/* ── Close ─────────────────────────────────────────────────────────────── */
.sc-final {
  position: relative;
  text-align: center;
  padding-block: clamp(72px, 10vw, 130px);
}
.sc-final::before {
  content: "";
  position: absolute;
  left: 50%; top: 12%;
  width: min(780px, 92vw); height: 400px;
  transform: translateX(-50%);
  z-index: -1;
  background: radial-gradient(closest-side, rgba(199, 212, 238, 0.14), transparent 76%);
  filter: blur(6px);
}
.sc-final h2 {
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.08;
  margin: 0 0 16px;
  text-wrap: balance;
}
.sc-final p {
  color: var(--peri-dim);
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 500;
  max-width: 54ch;
  margin: 0 auto 30px;
}
.sc-final .sc-cta-row { justify-content: center; }

.sc-foot {
  border-top: 1px solid var(--hairline);
  padding: 30px var(--gutter) 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: var(--maxw);
  margin: 0 auto;
}
.sc-foot-l { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.sc-foot a { color: var(--peri-dim); text-decoration: none; }
.sc-foot a:hover { color: var(--peri); text-decoration: underline; }

/* ── Motion ────────────────────────────────────────────────────────────────
   Default state is VISIBLE. The observer in showcase.js adds .sc-reveal-on to
   arm the animation only once it is running, so a JS failure or a blocked
   script leaves the page fully readable rather than blank — the same
   principle as the silent playlist fallback. */
/* Scoped to the scrolling sections only — the hero is never armed, so its
   headline paints on the first frame. Must stay in step with the selector in
   showcase.js. */
.sc-reveal-on :is(.sc-section, .sc-final) [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  transition-delay: var(--d, 0ms);
}
/* !important so nothing — a later rule, a stale delay, a renderer that never
   advances the transition — can leave a prospect looking at an invisible
   page. Being shown is not negotiable; only the fade to get there is. */
.sc-reveal-on [data-reveal].is-in {
  opacity: 1 !important;
  transform: none !important;
}
/* Hard release: JS drops the arming class outright once every target has been
   revealed, so the hidden state stops existing rather than merely being
   overridden. */
.showcase-body:not(.sc-reveal-on) [data-reveal] {
  opacity: 1;
  transform: none;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .sc-grid { grid-template-columns: repeat(2, 1fr); }
  .sc-east-inner { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  /* Stack the comparison and turn the connector downward — side-by-side
     phones don't fit, and this page will mostly be opened from a WhatsApp
     link. */
  .sc-arrow { transform: rotate(90deg); }
  .sc-phone-hero { transform: none; }
  .sc-phone-dim { opacity: 0.75; }
  .sc-hero { margin-top: -64px; }
}

@media (max-width: 640px) {
  .sc-grid { grid-template-columns: 1fr; }
  .sc-cta { width: 100%; justify-content: center; }
  .sc-cta-row { gap: 14px; }
  .sc-final .sc-cta-row, .sc-hero .sc-cta-row { flex-direction: column; align-items: stretch; }
  .sc-cta-sub { text-align: center; }
  .sc-foot { justify-content: center; text-align: center; }
}

@media (max-width: 480px) {
  .sc-nav-cta span { display: none; }         /* icon-only pill */
  .sc-nav-cta { padding: 0 13px; }
  .sc-device { border-radius: 38px; padding: 9px; }
  .sc-device::after { border-radius: 38px; }
  .sc-screen { border-radius: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-reveal-on [data-reveal] { opacity: 1 !important; transform: none !important; }
  .showcase-body *,
  .showcase-body *::before,
  .showcase-body *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}