/* ============================================================
   Songle Gift — mobile landing (Georgian)
   Palette and type scale lifted from the ForeverSongs mobile page.
   ============================================================ */

:root {
  --navy:        #1e3a5f;   /* section headings */
  --navy-deep:   #0a1d33;   /* eyebrow band */
  --ink:         #1f1f1f;   /* hero headline */
  --slate:       #0f172a;   /* FAQ headings */
  --body:        #5a5a5a;   /* body copy */
  --body-soft:   #475569;
  --muted:       #64748b;
  --blue:        #027ab8;   /* primary */
  --blue-dark:   #01669a;
  --sky:         #f0f9ff;   /* tinted section background */
  --line:        #e6eaef;
  --card-dark:   #111726;
  --white:       #ffffff;

  --wrap: 430px;
  --pad: 22px;

  --serif: 'Noto Serif Georgian', Georgia, serif;
  --sans: 'Noto Sans Georgian', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --shadow-btn: 0 8px 22px rgba(2, 122, 184, 0.30);
  --shadow-card: 0 2px 10px rgba(15, 23, 42, 0.05);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* overflow-x belongs on html, not body: on body it makes Chrome silently
   drop fragment navigation, so the menu links would change the hash and
   never scroll. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--sans);
  color: var(--body);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 84px; /* room for the sticky CTA */
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

/* ── Header ───────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: #fff; border-bottom: 1px solid var(--line);
}
.header-inner {
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
}

.wordmark {
  font-family: var(--serif); font-size: 1.06rem; font-weight: 400;
  color: var(--navy); text-decoration: none; letter-spacing: -0.01em;
  margin-right: auto; white-space: nowrap;
}
.wordmark b { font-weight: 700; color: var(--blue); }

.btn-header {
  background: var(--blue); color: #fff;
  padding: 11px 16px; font-size: 0.85rem;
  box-shadow: 0 4px 12px rgba(2, 122, 184, 0.25);
  white-space: nowrap; gap: 7px;
}

.menu-btn {
  flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 10px;
  border: 2px solid var(--blue); background: #fff; color: var(--blue);
  display: grid; place-items: center; cursor: pointer;
}
.menu-btn svg { grid-area: 1 / 1; }
.menu-btn .ico-close,
.menu-btn[aria-expanded="true"] .ico-open { display: none; }
.menu-btn[aria-expanded="true"] .ico-close { display: block; }

/* The panel hangs off the header rather than covering it, so the logo and
   the CTA stay reachable while the menu is open. */
.site-menu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 8px 0 18px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}
.site-menu a {
  display: block; text-decoration: none;
  max-width: var(--wrap); margin: 0 auto;
  padding: 14px 22px; font-size: 1.02rem; color: var(--slate);
}
.site-menu a:active { background: var(--sky); }

.menu-scrim {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(15, 23, 42, 0.35);
}

/* Anchor targets must clear the sticky header. */
:target, .section { scroll-margin-top: 72px; }

/* ── Hero ─────────────────────────────────────────────────── */
.hero-media { position: relative; }

.hero-eyebrow {
  background: var(--navy-deep);
  color: #fff;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 13px 16px;
}

.hero { text-align: center; padding: 34px 0 30px; }

.hero h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.hero h1 em { color: var(--blue); font-style: italic; }

.hero-sub {
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--body);
  margin-bottom: 22px;
}

.hero-meta {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-top: 14px;
  font-size: 0.83rem; color: var(--navy);
}
/* Both claims sit on one line — wrapping them reads as four separate
   fragments rather than two guarantees. */
.hero-meta span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hero-meta .divider { width: 1px; height: 14px; background: var(--line); }

/* Trust strip (replaces the US broadcast-logo row) */
.trust-strip {
  /* auto-fit, so the strip stays balanced whatever number of stats it holds */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 10px; margin-top: 30px;
}
.trust-item {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 6px; text-align: center; background: #fff;
}
.trust-item b { display: block; font-size: 1.02rem; color: var(--navy); font-weight: 700; }
.trust-item span { font-size: 0.7rem; color: var(--muted); line-height: 1.35; display: block; margin-top: 2px; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--sans); font-weight: 700; text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--blue); color: #fff;
  padding: 18px 26px; font-size: 1rem;
  box-shadow: var(--shadow-btn);
}
.btn-primary.wide { width: 100%; }
.btn-primary.caps { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.95rem; }

.btn-note { font-size: 0.85rem; color: var(--body); margin-top: 12px; }

/* ── Section furniture ────────────────────────────────────── */
.section { padding: 46px 0; }
.section.tinted { background: var(--sky); }

.badge {
  display: inline-block;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 20px; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; color: #6b7280; background: #fff;
  margin-bottom: 16px;
}

.section-head { text-align: center; margin-bottom: 28px; }
.section-head h2 {
  font-family: var(--sans);
  font-weight: 700; font-size: 1.62rem; line-height: 1.28;
  color: var(--navy); letter-spacing: -0.02em; margin-bottom: 12px;
}
.section-head p { font-size: 0.98rem; color: var(--body); line-height: 1.55; }

.hint {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  color: var(--blue); font-size: 0.88rem; font-weight: 500; margin-bottom: 18px;
}

/* ── Video tiles ──────────────────────────────────────────── */
.reactions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.vtile {
  position: relative; border-radius: 16px; overflow: hidden;
  background: #0b1220; aspect-ratio: 3 / 4; cursor: pointer;
}
.vtile video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.vtile-badge {
  position: absolute; right: 10px; bottom: 10px;
  pointer-events: none;                 /* the shield underneath takes the tap */
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55); color: #fff;
  display: grid; place-items: center;
  backdrop-filter: blur(4px);
}
.vtile-badge svg { grid-area: 1 / 1; }
.vtile-badge .ico-loud,
.vtile.sound-on .vtile-badge .ico-muted { display: none; }
.vtile.sound-on .vtile-badge .ico-loud { display: block; }

.hero-video { position: relative; aspect-ratio: 5 / 4; background: #0b1220; overflow: hidden; }
.hero-video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Covers the iframe so no player UI is ever reachable. Tapping anywhere on
   the video toggles sound — nothing else. */
.video-shield {
  position: absolute; inset: 0;
  background: transparent; border: 0; padding: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}

.sound-pill {
  position: absolute; right: 14px; bottom: 22px;
  pointer-events: none;                 /* the shield underneath takes the tap */
  display: inline-flex; align-items: center; gap: 11px;
  background: #fff; border: 2px solid var(--blue); border-radius: 999px;
  padding: 6px 20px 6px 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.sound-pill .ico {
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 2px solid var(--blue); color: var(--blue);
  display: grid; place-items: center;
}
.sound-pill .ico svg { grid-area: 1 / 1; }
.sound-pill .ico-pause,
.hero-video.sound-on .sound-pill .ico-play { display: none; }
.hero-video.sound-on .sound-pill .ico-pause { display: block; }
.sound-pill .label {
  font-size: 0.98rem; font-weight: 500; color: var(--slate); white-space: nowrap;
}

/* ── How it works ─────────────────────────────────────────── */
.steps { display: grid; gap: 16px; }
.step-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 16px;
  background: #fff; padding: 30px 22px 24px; text-align: center;
}
.step-card .corner {
  position: absolute; top: 0; left: 0;
  width: 0; height: 0;
  border-top: 54px solid var(--blue);
  border-right: 54px solid transparent;
}
.step-card .corner b {
  position: absolute; top: -46px; left: 8px;
  color: #fff; font-size: 0.82rem; font-weight: 700;
}
.step-card .icon { color: var(--navy); margin: 0 auto 12px; display: block; }
.step-card h3 {
  font-family: var(--serif); font-size: 1.14rem; font-weight: 700;
  color: var(--navy); margin-bottom: 6px; line-height: 1.35;
}
.step-card .tag { color: var(--blue); font-size: 0.88rem; font-weight: 500; margin-bottom: 12px; }
.step-card p { font-size: 0.95rem; line-height: 1.65; color: var(--body); }

.center { text-align: center; }
.mt-28 { margin-top: 28px; }

/* ── Reviews ──────────────────────────────────────────────── */
/* ── Featured review, drawn as a Facebook comment ─────────── *
 * Same visual language as the real screenshots in the carousel below, so
 * the two read as one piece of social proof rather than two.            */
.fb-comment {
  display: flex; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 16px 16px 14px;
  margin-bottom: 18px;
  font-family: 'Noto Sans Georgian', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.fb-avatar {
  flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; background: #e4e6eb;
}

.fb-body { min-width: 0; flex: 1; }

.fb-bubble {
  background: #f0f2f5; border-radius: 18px;
  padding: 9px 14px 11px;
}
.fb-name {
  display: block;
  font-size: 0.9rem; font-weight: 600; color: #050505;
  margin-bottom: 4px;
}
.fb-bubble p {
  font-size: 0.94rem; line-height: 1.45; color: #050505;
}

/* Reaction chip — the small overlapping circles Facebook puts under a
   comment, with the total beside them. */
.fb-meta { margin-top: -8px; padding-left: 8px; }
.fb-reacts {
  display: inline-flex; align-items: center;
  background: #fff; border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  padding: 2px 8px 2px 3px;
}
.fb-react {
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.6rem; font-style: normal;
  border: 2px solid #fff;
}
.fb-react + .fb-react { margin-left: -6px; }
.fb-like { background: #1877f2; }
.fb-love { background: #f3425f; }
.fb-count { font-size: 0.78rem; color: #65676b; margin-left: 5px; }

.fb-actions {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 0 0 14px;
  font-size: 0.8rem; font-weight: 600; color: #65676b;
}
.fb-actions .dot { font-weight: 400; }
.fb-actions .fb-time { font-weight: 400; }

.fb-actions button {
  background: none; border: 0; padding: 2px 0;
  font-family: inherit; font-size: inherit; font-weight: 600;
  color: #65676b; cursor: pointer;
}
.fb-actions button:hover { text-decoration: underline; }
.fb-actions button:active { opacity: 0.7; }
/* Facebook turns the Like label blue once you have liked it. */
.fb-actions button[aria-pressed="true"] { color: #1877f2; }

/* The reaction chip only makes sense while someone has reacted. */
.fb-meta { transition: opacity 0.15s; }
.fb-meta.empty { opacity: 0; pointer-events: none; }

.shots {
  display: flex; gap: 12px; overflow-x: auto; padding: 4px 0 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin: 0 calc(var(--pad) * -1); padding-left: var(--pad); padding-right: var(--pad);
}
.shots::-webkit-scrollbar { display: none; }
.shots img {
  /* The screenshots come in every aspect ratio from 0.45 to 1.6, so the
     card size is fixed and the image is fitted inside it. An explicit
     width also keeps lazy loading working — auto-width images measure
     zero before they load and never enter the viewport. */
  flex: 0 0 auto; width: 264px; height: 420px;
  object-fit: contain; background: #fff; padding: 8px;
  border-radius: 16px; border: 1px solid var(--line);
  scroll-snap-align: center; box-shadow: var(--shadow-card);
}
.shots-note { text-align: center; font-size: 0.82rem; color: var(--muted); margin-top: 6px; }

/* ── Samples ──────────────────────────────────────────────── */
.tabs {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px;
  margin: 0 calc(var(--pad) * -1); padding-left: var(--pad); padding-right: var(--pad);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 11px 20px; font-family: var(--sans); font-size: 0.9rem;
  color: var(--navy); cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.tab.active { background: #eef2f6; border-color: #cfd8e3; font-weight: 600; }

.sample-card {
  position: relative; border-radius: 18px; overflow: hidden;
  aspect-ratio: 16 / 11; margin: 18px 0 16px; background: #0b1220;
}
.sample-card img { width: 100%; height: 100%; object-fit: cover; }
.sample-card .meta {
  position: absolute; inset: 0; padding: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.05) 45%, rgba(0,0,0,0.65) 100%);
  color: #fff; display: flex; flex-direction: column;
}
.sample-card .kicker {
  font-size: 0.68rem; letter-spacing: 0.14em; font-weight: 600;
  display: flex; gap: 14px; opacity: 0.9;
}
.sample-card h3 { font-size: 1.2rem; font-weight: 700; margin-top: 6px; }
.sample-card .desc { font-size: 0.85rem; opacity: 0.85; }
.sample-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%; border: 0;
  background: var(--blue); color: #fff; font-size: 1.2rem; cursor: pointer;
  display: grid; place-items: center; padding-left: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.sample-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; color: #fff; font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
/* Seekable scrubber. The visible bar stays thin, but the hit area is padded
   out to a comfortable finger target — 3px is unhittable on a phone. */
.sample-bar .track {
  flex: 1; position: relative;
  height: 3px; background: rgba(255,255,255,0.3); border-radius: 2px;
  cursor: pointer; touch-action: none;
}
.sample-bar .track::before {
  content: ''; position: absolute; left: 0; right: 0;
  top: -14px; bottom: -14px;          /* 31px tall tap target */
}
.sample-bar .track i {
  display: block; height: 100%; width: 0;
  background: #fff; border-radius: 2px;
  position: relative;
}
/* Knob, so it reads as draggable rather than decorative. */
.sample-bar .track i::after {
  content: ''; position: absolute; right: -6px; top: 50%;
  width: 12px; height: 12px; margin-top: -6px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
  opacity: 0; transition: opacity 0.15s;
}
.sample-card:hover .track i::after,
.sample-bar .track.scrubbing i::after { opacity: 1; }
@media (hover: none) { .sample-bar .track i::after { opacity: 1; } }

.genres { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.genre {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 9px 18px; font-family: var(--sans); font-size: 0.86rem;
  color: var(--navy); cursor: pointer;
}
.genre.active { background: #eef2f6; border-color: #cfd8e3; font-weight: 600; }

.sample-copy h3 {
  font-family: var(--sans); font-size: 1.5rem; font-weight: 700;
  color: var(--navy); margin-bottom: 12px; letter-spacing: -0.02em;
}
.sample-copy > p { font-size: 0.98rem; line-height: 1.6; margin-bottom: 16px; }
.sample-copy ul { list-style: none; display: grid; gap: 10px; margin-bottom: 24px; }
.sample-copy li { position: relative; padding-left: 18px; font-size: 0.95rem; color: var(--body); }
.sample-copy li::before {
  content: ''; position: absolute; left: 0; top: 0.6em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--blue);
}

.rating-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 16px; font-weight: 700; color: var(--navy);
}
.rating-row .stars { display: flex; gap: 2px; }
.rating-row .stars i {
  width: 18px; height: 18px; background: #00b67a; border-radius: 2px;
  display: grid; place-items: center; color: #fff; font-style: normal; font-size: 0.62rem;
}
.rating-sub { text-align: center; font-size: 0.86rem; color: var(--body); margin-top: 6px; }

/* ── Occasions ────────────────────────────────────────────── */
.occasions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.occ {
  position: relative; border-radius: 12px; overflow: hidden;
  aspect-ratio: 1 / 1; display: block; text-decoration: none;
}
.occ img { width: 100%; height: 100%; object-fit: cover; }
.occ span {
  position: absolute; left: 7px; right: 7px; bottom: 7px;
  color: #fff; font-size: clamp(0.58rem, 2.6vw, 0.72rem);
  font-weight: 700; line-height: 1.22;
  /* Georgian occasion names are long single words — let them wrap rather
     than run off the tile. */
  overflow-wrap: anywhere;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.occ::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,0.65) 100%);
}

/* ── FAQ ──────────────────────────────────────────────────── */
.faq { display: grid; gap: 12px; }
.faq details {
  border: 1px solid var(--line); border-radius: 14px;
  background: #fff; overflow: hidden;
}
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 18px; font-size: 1rem; font-weight: 500;
  color: var(--slate); line-height: 1.45;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  /* The Georgian faces have no +/− glyphs, so name a Latin stack here. */
  font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
  content: '+'; flex: 0 0 auto; font-size: 1.5rem; font-weight: 400;
  color: var(--slate); line-height: 1; transition: transform 0.2s;
}
.faq details[open] summary::after { content: '−'; }
.faq .answer { padding: 0 18px 18px; font-size: 0.94rem; line-height: 1.7; color: var(--body-soft); }

.faq-more { text-align: center; margin-top: 34px; }
.faq-more h3 { font-size: 1.4rem; font-weight: 700; color: var(--slate); margin-bottom: 10px; }
.faq-more p { font-size: 0.95rem; color: var(--body-soft); line-height: 1.6; }

/* ── Final CTA ────────────────────────────────────────────── */
.final { text-align: center; padding: 50px 0 56px; }
.final .gift { color: var(--navy); margin: 0 auto 18px; display: block; }
.final h2 {
  font-size: 1.62rem; font-weight: 700; color: var(--navy);
  letter-spacing: -0.02em; line-height: 1.3; margin-bottom: 12px;
}
.final p { font-size: 0.98rem; color: var(--body); line-height: 1.55; margin-bottom: 24px; }
.final .fine { font-size: 0.86rem; color: var(--blue); margin-top: 14px; line-height: 1.5; }

/* ── Sticky CTA ───────────────────────────────────────────── */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: rgba(255,255,255,0.94); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  transform: translateY(120%); transition: transform 0.25s ease;
}
.sticky.show { transform: translateY(0); }
.sticky .btn { width: 100%; padding: 15px 20px; font-size: 0.97rem; }
.sticky .wrap { padding: 0; }


/* ── Desktop ──────────────────────────────────────────────────
   This is a mobile build: full-bleed blocks like the hero video have no
   max-width of their own, so on a wide viewport the video grew to fill the
   whole screen. Hold the page to a phone-width column and give it a
   backdrop, rather than letting each block stretch on its own. */
@media (min-width: 520px) {
  html { background: #e8edf2; }

  body {
    width: var(--wrap);
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 0 48px rgba(15, 23, 42, 0.13);
    min-height: 100vh;
  }

  /* Fixed elements anchor to the viewport, not to the column, so they need
     centring of their own. */
  .sticky {
    left: 50%; right: auto;
    width: var(--wrap);
    transform: translateX(-50%) translateY(120%);
  }
  .sticky.show { transform: translateX(-50%) translateY(0); }
}