/* Glug's page: the lagoon of its store frame. Sea glass with soft light
   patches, water standing in the lower part of the hero with a wavy surface
   and bubbles, a coral wave under the words, the phone behind a thick clear
   glass rim like the tubes. Fredoka, round like the glass. By night the same
   lagoon after dark. */

@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/fredoka/fredoka-400-700-latin.woff2) format("woff2");
}

.app-glug {
  --body: "Fredoka", ui-rounded, var(--sys);
  --display: "Fredoka", ui-rounded, var(--sys);
  --page: #e6f4f1;
  --surface: #f6fbfa;
  --ink: #12343b;
  --dim: #3f626a;
  --rule: rgba(16, 64, 72, 0.15);
  --link: #b23a1f;
  --focus: #0f8b8d;
  --coral: #ff6a48;
  --glass: rgba(255, 255, 255, 0.5);
  --glass-edge: rgba(36, 98, 108, 0.42);
  --glass-hi: rgba(255, 255, 255, 0.85);
  --cork: #d2a06c;
  --water-top: rgba(15, 139, 141, 0.28);
  --water-deep: rgba(11, 95, 102, 0.55);
  --water-back: rgba(15, 139, 141, 0.16);
  --surface-line: rgba(255, 255, 255, 0.85);
  --caustic: rgba(255, 255, 255, 0.55);

  --stage-bg: linear-gradient(180deg, #eef8f6 0%, #dcefec 55%, #c7e3e2 100%);
  --stage-ink: var(--ink);
  --stage-dim: var(--dim);
  --store-bg: rgba(255, 255, 255, 0.6);
  --store-ink: #12343b;
  --store-border: 1.5px solid var(--glass-edge);
  --store-radius: 999px;
  --device-fill: #e6f4f1;
}

@media (prefers-color-scheme: dark) {
  .app-glug {
    --page: #07151a;
    --surface: #11262d;
    --ink: #e4f3f1;
    --dim: #a3c3c6;
    --rule: rgba(180, 230, 235, 0.14);
    --link: #ff9a80;
    --focus: #54d6cb;
    --coral: #ff7a5a;
    --glass: rgba(190, 235, 245, 0.07);
    --glass-edge: rgba(180, 228, 238, 0.45);
    --glass-hi: rgba(255, 255, 255, 0.35);
    --cork: #c18f5d;
    --water-top: rgba(84, 214, 203, 0.14);
    --water-deep: rgba(11, 95, 102, 0.5);
    --water-back: rgba(84, 214, 203, 0.08);
    --surface-line: rgba(200, 245, 245, 0.4);
    --caustic: rgba(120, 220, 230, 0.08);
    --stage-bg: linear-gradient(180deg, #0f2830 0%, #0d2229 50%, #07151a 100%);
    --store-bg: rgba(255, 255, 255, 0.06);
    --store-ink: #e4f3f1;
    --device-fill: #0d2229;
  }
}

.app-glug h1, .app-glug h2, .app-glug h3 { font-weight: 600; letter-spacing: -0.01em; }
.app-glug h2 { font-size: clamp(30px, 4.4vw, 44px); }

.app-glug .squiggle { display: block; width: 96px; height: 12px; margin-top: 14px; }
.app-glug .squiggle path { fill: none; stroke: var(--coral); stroke-width: 3; stroke-linecap: round; }

/* ---- the stage: light patches and standing water ---- */

.app-glug .caustic {
  position: absolute; inset: 0;
  background:
    radial-gradient(26% 16% at 14% 18%, var(--caustic), transparent 70%),
    radial-gradient(22% 14% at 86% 30%, var(--caustic), transparent 70%),
    radial-gradient(30% 12% at 58% 6%, var(--caustic), transparent 70%);
}
.app-glug .water { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 150px; }
.app-glug .wa-top { stop-color: var(--water-top); }
.app-glug .wa-deep { stop-color: var(--water-deep); }
.app-glug .wave-back { fill: var(--water-back); }
.app-glug .surface { fill: none; stroke: var(--surface-line); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.app-glug .bubble { fill: rgba(255, 255, 255, 0.18); stroke: rgba(255, 255, 255, 0.7); stroke-width: 1; vector-effect: non-scaling-stroke; }

.app-glug .hero { padding-bottom: 170px; }
/* The phone stands in the water, below the words. */
.app-glug .hero-device { align-self: end; margin-bottom: -120px; }
.app-glug .app-icon { width: 80px; height: 80px; box-shadow: 0 0 0 1.5px var(--glass-edge), 0 10px 26px rgba(18, 52, 59, 0.16); }
.app-glug .hero h1 { margin-top: 22px; font-size: clamp(76px, 15vw, 150px); font-weight: 700; line-height: 0.9; letter-spacing: -0.03em; }
.app-glug .kind { margin-top: 12px; font-size: 20px; font-weight: 500; }
.app-glug .promise { margin-top: 26px; font-size: clamp(26px, 3.4vw, 34px); font-weight: 600; line-height: 1.15; }
.app-glug .lede { margin-top: 18px; font-size: 19px; }
.app-glug .store b { font-family: var(--body); font-weight: 600; }
.app-glug .store { padding-left: 24px; padding-right: 24px; }

/* The phone behind a thick clear glass rim. */
.app-glug .device {
  width: min(288px, 72vw); padding: 10px; border-radius: 48px;
  background: var(--glass); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: inset 0 0 0 1.5px var(--glass-edge), inset 0 2px 0 var(--glass-hi), 0 26px 50px rgba(18, 52, 59, 0.22);
}
.app-glug .device video, .app-glug .device .still { border-radius: 38px; }

/* ---- the points, each beside a tube of one colour and one shape ---- */

.app-glug .rack { display: grid; gap: 28px 48px; margin: 44px 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .app-glug .rack { grid-template-columns: 1fr 1fr; } }
.app-glug .rack li { display: grid; grid-template-columns: 40px 1fr; gap: 20px; align-items: start; }
.app-glug .tube { width: 40px; height: auto; }
.app-glug .tube .cork { fill: var(--cork); }
.app-glug .tube .glass { fill: var(--glass); stroke: var(--glass-edge); stroke-width: 1.5; }
.app-glug .tube .shine { stroke: var(--glass-hi); stroke-width: 2.5; stroke-linecap: round; fill: none; }
.app-glug .rack h3 { margin: 4px 0 6px; font-size: 22px; line-height: 1.2; }
.app-glug .rack p { margin: 0; color: var(--dim); }

/* ---- the daily level, in a pane of glass ---- */

.app-glug .daily-glass {
  max-width: 46rem; margin: 0 auto; padding: 44px 28px 44px; text-align: center; border-radius: 36px;
  background: var(--glass); box-shadow: inset 0 0 0 1.5px var(--glass-edge), inset 0 2px 0 var(--glass-hi);
}
@media (min-width: 700px) { .app-glug .daily-glass { padding: 56px 64px; } }
.app-glug .daily-glass .squiggle { margin: 14px auto 0; }
.app-glug .daily-glass p { margin: 18px auto 0; max-width: 52ch; color: var(--dim); }
.app-glug .daily-glass p:first-of-type { color: var(--ink); font-size: 19px; }

.app-glug .shots-row img { border-radius: 18px; box-shadow: 0 10px 24px rgba(18, 52, 59, 0.14); }
.app-glug .faq summary { font-weight: 600; }