/* =====================================================================
   THEME VARIABLES
   Change a value here and it updates everywhere that variable is used.
   ===================================================================== */
:root {
  --bg: #050505;                 /* page background color (near-black) */
  --surface: #0e0e0e;            /* alternate dark surface color (currently unused directly, kept for future cards/panels) */
  --text: #f5f4f0;               /* main text color (off-white) */
  --text-muted: #8a8a85;         /* secondary/dimmer text color (subheads, captions, footer) */
  --line: rgba(245, 244, 240, 0.12); /* faint divider/border color used for hairlines */
  --accent: #fb4a4a;             /* brand accent color — buttons, highlighted words, eyebrow text, CTA band background */
  --accent-ink: #0a0a0a;         /* text/icon color to use ON TOP of the accent color (dark, for contrast) */
  --radius-sm: 10px;             /* small corner rounding (icons, small chips) */
  --radius-md: 18px;             /* medium corner rounding (cards, QR box) */
  --radius-lg: 24px;             /* large corner rounding (hero visual card) */
  --radius-pill: 999px;          /* fully-rounded corner radius for pill buttons/badges */
  --container: 1160px;           /* max width of the centered page content */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; /* headline/display font (logo, headline, step titles, CTA heading) */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;  /* body/paragraph/button font */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);         /* page background color, see --bg above */
  color: var(--text);            /* default text color, see --text above */
  font-family: var(--font-body); /* default body font, see --font-body above */
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;              /* default line spacing for body text — raise for airier paragraphs */
}

.container {
  max-width: var(--container);   /* page content width cap, see --container above */
  margin: 0 auto;                /* centers the container horizontally */
  padding: 0 16px;               /* left/right breathing room on narrow screens */
}

a {
  color: inherit;
}

/* ---- Nav (top bar: logo + "Get the app" CTA button) ---- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 16px;            /* nav bar spacing: 24px top/bottom, 16px left/right */
  border-bottom: 1px solid var(--line); /* hairline separating nav from hero, color from --line */
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;                     /* spacing between logo icon and logo text */
  font-family: var(--font-display); /* logo text font, see --font-display above */
  font-weight: 800;
  font-size: 20px;                /* logo text size */
  letter-spacing: -0.01em;
}

.nav-logo-icon {
  width: 28px;                    /* logo icon size (width) */
  height: 28px;                   /* logo icon size (height) */
  border-radius: 8px;             /* logo icon corner rounding */
  display: block;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;                       /* spacing between CTA icon (if any) and label */
  background: var(--accent);      /* CTA button background color, see --accent above */
  color: var(--accent-ink);       /* CTA button text color, see --accent-ink above */
  font-size: 14px;                /* CTA button label size */
  font-weight: 700;
  text-decoration: none;
  padding: 10px 18px;             /* CTA button padding: top/bottom, left/right — grow this to make the button bigger */
  border: none;
  border-radius: var(--radius-pill); /* CTA button shape (pill), see --radius-pill above */
  white-space: nowrap;
}

.nav-cta:hover {
  opacity: 0.9;                   /* hover dimming amount — lower = more fade on hover */
}

/* ---- Hero (headline + reveal-card visual) ---- */
.hero {
  padding: 64px 16px 16px;        /* hero section spacing: 64px top, 16px sides, 88px bottom */
}

.hero-inner {
  max-width: var(--container);    /* hero content width cap, see --container above */
  margin: 0 auto;                 /* centers hero content horizontally */
  display: grid;
  grid-template-columns: 1.15fr 0.85fr; /* column split: copy vs. visual — adjust ratio to shift balance */
  gap: 56px;                      /* spacing between hero copy and hero visual */
  align-items: center;
}

.eyebrow {
  font-size: 16px;                /* small label above headline — size */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);           /* eyebrow text color, see --accent above */
  margin: 0 0 20px;                /* space below eyebrow, before headline */
}

.headline {
  font-family: var(--font-display); /* headline font, see --font-display above */
  font-weight: 800;
  font-size: clamp(1.95rem, 4.6vw, 3.4rem); /* headline size: min 2.3rem, scales with viewport, caps at 4rem — tune these three values to resize */
  line-height: 0.98;              /* headline line spacing — tight by design; raise slightly if lines feel cramped */
  letter-spacing: -0.03em;
  margin: 0 0 14px;                 /* space below headline, before sub-copy */
}

.headline .accent {
  color: var(--accent);           /* highlighted word(s) inside headline, see --accent above */
}

.hero-sub {
  font-size: 18px;                /* hero sub-copy text size */
  color: var(--text-muted);       /* hero sub-copy color, see --text-muted above */
  max-width: 440px;                /* wraps sub-copy to this width so lines don't run too long */
  margin: 0 0 20px;                 /* space below sub-copy, before action buttons */
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;                      /* spacing between the primary button and the secondary link */
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;                       /* spacing between icon and label inside the button */
  background: var(--accent);      /* primary button background color, see --accent above */
  color: var(--accent-ink);       /* primary button text color, see --accent-ink above */
  font-weight: 700;
  font-size: 16px;                /* primary button label size */
  border-radius: var(--radius-pill); /* primary button shape (pill), see --radius-pill above */
  padding: 15px 28px;             /* primary button padding: top/bottom, left/right — grow this to make the button bigger */
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn-primary.on-light {
  /* Inverted color variant for use on light/accent-colored backgrounds (e.g. the CTA band) */
  background: var(--accent-ink);  /* button background when placed on a light/accent surface */
  color: var(--accent);           /* button text color when placed on a light/accent surface */
}

.btn-link {
  font-size: 15px;                /* secondary text-link size */
  font-weight: 600;
  color: var(--text-muted);       /* secondary text-link color, see --text-muted above */
  text-decoration: none;
  border-bottom: 1px solid var(--line); /* underline color, see --line above */
  padding-bottom: 2px;            /* gap between link text and its underline */
}

.btn-link:hover {
  color: var(--text);             /* link color on hover, see --text above */
  border-color: var(--text);      /* underline color on hover, see --text above */
}

/* ---- Hero visual: blurred photo / scratch-to-reveal mock ---- */
.reveal-card {
  position: relative;
  width: 100%;
  max-width: min(320px, 82vw);    /* reveal-card size cap — raise 320px to make the card bigger on desktop */
  margin: 0 auto;                  /* centers the card within its column */
  aspect-ratio: 4 / 5;             /* card shape (width:height) — change to reshape the card */
  border-radius: var(--radius-lg); /* card corner rounding, see --radius-lg above */
  overflow: hidden;
  background: #111;                /* fallback background behind the photo while it loads */
  user-select: none;
  -webkit-user-select: none;
}

.reveal-photo {
  position: absolute;
  inset: 0;
  background-image: url("/image/reveal-image.png");
  background-size: cover;
  background-position: center;
}

/* Static no-JS fallback: a plausible "partially scratched" look via CSS
   alone. Hidden by reveal.js once the interactive canvas takes over. */
.reveal-cover {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.55); /* cover tint color/opacity — the dark overlay over the photo */
  backdrop-filter: blur(22px) saturate(1.3); /* blur strength of the "scratch cover" effect — raise/lower 22px to blur more/less */
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 38% 100%, 24% 68%, 0 60%); /* shape of the pre-scratched notch — edit points to change the notch shape */
}

.reveal-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none; /* shown by reveal.js once it initializes */
  touch-action: none;
  cursor: crosshair;
}

.reveal-badge {
  position: absolute;
  top: 20px;                      /* badge distance from top of card */
  right: 20px;                    /* badge distance from right of card */
  width: 40px;                    /* badge circle size (width) */
  height: 40px;                   /* badge circle size (height) */
  border-radius: 50%;             /* keeps the badge circular — leave at 50% */
  border: 1px solid rgba(245, 244, 240, 0.35); /* badge outline color/opacity */
  background: rgba(245, 244, 240, 0.08);       /* badge fill color/opacity */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display); /* badge glyph/text font, see --font-display above */
  font-weight: 800;
  font-size: 18px;                 /* badge glyph/text size */
  pointer-events: none;
  z-index: 2;
}

.reveal-caption {
  position: absolute;
  left: 20px;                      /* caption distance from left of card */
  bottom: 18px;                    /* caption distance from bottom of card */
  font-size: 13px;                 /* caption text size */
  font-weight: 700;
  color: var(--text);              /* caption text color, see --text above */
  background: rgba(5, 5, 5, 0.55); /* caption pill background color/opacity */
  padding: 6px 12px;               /* caption pill padding: top/bottom, left/right */
  border-radius: var(--radius-pill); /* caption pill shape, see --radius-pill above */
  pointer-events: none;
  z-index: 2;
}

/* ---- Steps (3-up "how it works" row) ---- */
.steps {
  padding: 0 16px;                 /* left/right spacing for the steps section */
  border-top: 1px solid var(--line);    /* hairline above the steps row, color from --line */
  border-bottom: 1px solid var(--line); /* hairline below the steps row, color from --line */
}

.steps-grid {
  max-width: var(--container);     /* steps row width cap, see --container above */
  margin: 0 auto;                   /* centers the steps row horizontally */
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns, one per step — change the "3" to add/remove columns */
}

.step {
  padding: 20px 28px;               /* per-step spacing: top/bottom, left/right (also the gutter between steps) */
  border-right: 1px solid var(--line); /* vertical divider between steps, color from --line */
}

/* Keep the outer edges flush with the hero/CTA text above and below,
   instead of adding the column gutter on the outside too. */
.step:first-child {
  padding-left: 0;
}

.step:last-child {
  padding-right: 0;
  border-right: none;
}

.step-number {
  display: block;
  font-family: var(--font-display); /* step number font, see --font-display above */
  font-weight: 800;
  font-size: 32px;                  /* step number size */
  color: var(--accent);             /* step number color, see --accent above */
  letter-spacing: 0.05em;
  margin-bottom: 10px;               /* space below step number, before step title */
}

.step-title {
  font-family: var(--font-display); /* step title font, see --font-display above */
  font-weight: 800;
  font-size: 28px;                  /* step title size */
  margin: 0 0 6px;                    /* space below step title, before step body text */
  letter-spacing: -0.01em;
}

.step-body {
  font-size: 17px;                  /* step description text size */
  line-height: 1.55;                /* step description line spacing */
  color: var(--text-muted);         /* step description color, see --text-muted above */
  margin: 0;
  max-width: 32ch;                   /* wraps step description to this width so lines don't run too long */
}

/* ---- Download / CTA band (bottom accent-colored strip with QR code) ---- */
.cta-band {
  background: var(--accent);        /* CTA band background color, see --accent above */
  color: var(--accent-ink);         /* CTA band default text color, see --accent-ink above */
  padding: 0 16px;                   /* left/right spacing for the CTA band */
}

.cta-inner {
  max-width: var(--container);      /* CTA band content width cap, see --container above */
  margin: 0 auto;                    /* centers CTA content horizontally */
  padding: 48px 0;                   /* CTA band spacing: top/bottom */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;                         /* spacing between the CTA copy and the QR card */
  flex-wrap: wrap;
}

.cta-copy h2 {
  font-family: var(--font-display); /* CTA heading font, see --font-display above */
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem); /* CTA heading size: min 2rem, scales with viewport, caps at 3rem — tune these three values to resize */
  letter-spacing: -0.02em;
  margin: 0 0 12px;                    /* space below CTA heading, before CTA paragraph */
}

.cta-copy p {
  font-size: 17px;                   /* CTA paragraph text size */
  margin: 0 0 28px;                    /* space below CTA paragraph, before the button/scan link */
  color: rgba(10, 10, 10, 0.72);     /* CTA paragraph color/opacity (dark text on the accent band) */
  max-width: 40ch;                    /* wraps CTA paragraph to this width so lines don't run too long */
}

.qr-card {
  background: var(--accent-ink);    /* QR card background color, see --accent-ink above */
  border-radius: var(--radius-md);  /* QR card corner rounding, see --radius-md above */
  padding: 16px;                     /* QR card inner spacing */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;                         /* spacing between QR image and its caption */
  flex-shrink: 0;
}

.qr-card img {
  display: block;
  width: 132px;                      /* QR code image size (width) */
  height: 132px;                     /* QR code image size (height) */
  border-radius: 6px;                /* QR code image corner rounding */
  background: #fff;
}

.qr-card span {
  font-size: 12px;                   /* QR card caption size */
  font-weight: 700;
  color: var(--accent);              /* QR card caption color, see --accent above */
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ---- Footer ---- */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 16px;                 /* footer spacing: top/bottom, left/right */
  font-size: 13px;                    /* footer text size */
  color: var(--text-muted);           /* footer text color, see --text-muted above */
}

/* =====================================================================
   RESPONSIVE OVERRIDES
   These blocks only kick in below the given screen width and just
   override the spacing/size/color values set above for smaller screens.
   ===================================================================== */

/* ---- Tablet/narrow desktop (≤860px): hero and steps stack to 1 column ---- */
@media (max-width: 860px) {
  .hero-inner {
    grid-template-columns: 1fr;       /* hero copy and visual stack instead of sitting side by side */
    gap: 32px;                        /* spacing between stacked hero copy and visual */
  }

  .steps-grid {
    grid-template-columns: 1fr;       /* steps stack into a single column instead of 3-up */
  }

  .step {
    border-right: none;
    border-bottom: 1px solid var(--line); /* horizontal divider between stacked steps, color from --line */
    padding: 16px 0;                       /* per-step spacing when stacked: top/bottom */
  }

  .step:last-child {
    border-bottom: none;
  }

  .cta-inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  /* Copy stays left-aligned when stacked, but the QR card reads better
     centered under it rather than pinned to the same left edge. */
  .qr-card {
    align-self: center;
  }
}

/* Phones: the "scan the code" link only makes sense when the QR is on a
   different screen than the visitor. On a phone you're already holding
   the device you'd download to, so the prompt is pointless — hide it. */
@media (max-width: 640px) {
  .scan-link {
    display: none;
  }

  /* "Scratch. Reveal. Guess." is redundant with the "You know the
     moment..." sub-copy below the headline — drop it on phones to
     reclaim vertical space. */
  .eyebrow {
    display: none;
  }

  .nav {
    padding: 16px 16px;                 /* trim the nav bar on phones to free up height */
  }

  /* Claim the full (small) viewport height for nav + hero *together*
     so nav + headline + card are all visible without scrolling. This
     has to wrap both: giving .hero alone a min-height:100svh would
     leave the nav's own height (it's a sibling, outside .hero) added
     on top, pushing the total past one screen by exactly the nav's
     height — on phones where the card doesn't have much leftover
     slack below it, that overflow lands on the card itself instead of
     empty space, forcing a scroll despite .hero itself fitting. */
  .hero-screen {
    display: flex;
    flex-direction: column;
    min-height: 100vh;                  /* fallback for browsers without svh support */
    min-height: 100svh;                 /* small viewport height: excludes mobile browser chrome */
  }

  /* Fills whatever .hero-screen has left after the nav (nav is a plain
     auto-sized flex item — see .hero-screen above). hero-inner (below)
     then fills *this* box the same way. */
  .hero {
    flex: 1;
    min-height: 0;
    padding: clamp(16px, 3svh, 24px) 16px clamp(16px, 3svh, 24px); /* slightly larger top value adds breathing room below the nav now that the eyebrow is hidden */
    display: flex;
    flex-direction: column;
  }

  /* Stacked layout: hero-copy sits above the scratch card. Grid (not
     flex) on purpose: a flex-grow'd height is only ever a *used* value,
     which CSS percentage-height rules don't treat as definite — so a
     height:100% card inside a flex-grow'd row silently collapses. A
     grid "1fr" track's height, by contrast, is resolved as definite
     before items are laid out, so hero-visual's height (and in turn
     reveal-card's height:100%, below) actually resolves. */
  .hero-inner {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr); /* copy row sized to content, visual row fills the rest */
    align-items: stretch;               /* overrides the base rule's align-items:center (for the desktop grid), which would otherwise shrink-wrap hero-visual to its (empty) content height instead of filling its row */
    gap: 12px;                          /* spacing between hero copy and visual on phones */
  }

  /* Fills its 1fr grid row (see hero-inner above). container-type:size
     exposes this box's own resolved width/height to reveal-card as
     cqw/cqh units, which is how the card (below) picks whichever axis
     — width or height — is actually the tighter fit on a given phone.
     On phones where width is the binding constraint, the card can't
     use the row's full height without breaking its 4:5 shape — top-
     aligning (rather than centering) sends that leftover slack to a
     single spot below the card, reading as normal breathing room
     before the steps section instead of a stray gap around the card. */
  .hero-visual {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    container-type: size;
  }

  .hero-sub {
    display: none;                      /* hide "You know the moment..." sub-copy on phones */
  }

  /* Tighten the step rhythm and scale type down for a single narrow
     column — the desktop spacing/sizing is tuned for a 3-up grid and
     reads as too loose and too large once stacked on a phone. */
  .step {
    padding: 20px 0 24px;               /* per-step spacing on phones: top, sides, bottom */
    border-bottom-color: rgba(255, 255, 255, 0.12); /* step divider color on phones */
  }

  .step:last-child {
    /* Give the last step room to clear the home indicator instead of
       feeling cut off at the bottom of the screen. */
    padding-bottom: calc(56px + env(safe-area-inset-bottom)); /* extra bottom spacing on phones with a home-indicator bar */
  }

  .step-number {
    font-size: 34px;                    /* step number size on phones */
    margin-bottom: 10px;                 /* space below step number on phones */
  }

  .step-title {
    font-size: 32px;                    /* step title size on phones */
    line-height: 1.05;                  /* step title line spacing on phones */
    margin-bottom: 10px;                 /* space below step title on phones */
  }

  .step-body {
    font-size: 19px;                    /* step description size on phones */
    line-height: 1.5;                   /* step description line spacing on phones */
    color: rgba(255, 255, 255, 0.62);   /* step description color on phones */
    max-width: none;
  }

  /* Sized to fill hero-visual (see container-type:size above) like
     object-fit:contain would: 100cqw is "as wide as the row allows",
     100cqh * 4/5 is "as wide as the card can be while its height (at
     the fixed 4:5 ratio) still fits the row's actual height" — taking
     the smaller of the two picks whichever axis is the real limit on a
     given phone, instead of guessing with a fixed vh/vw formula. Height
     then derives from that width via the base rule's aspect-ratio. */
  .reveal-card {
    width: min(100cqw, 100cqh * 4 / 5);
    max-width: 400px; /* absolute ceiling so it doesn't balloon on wider phones/small tablets near the 640px boundary */
    height: auto;
  }

  /* Same reasoning as the scan-link above: scanning a QR code on the
     device you're already viewing it on doesn't work, so drop the card
     and let the copy/CTA take the full width of the band. */
  .qr-card {
    display: none;
  }
}