/* Fonts are self-hosted: the page has no consent banner, so it makes no third-party request. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-800-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* Polish diacritics (ą ć ę ł ń ś ź ż) live in latin-ext, so this subset is not optional here. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-800-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-sans-400-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-sans-400-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Confetti tokens, copied from apps/webapp/src/styles/_colors.scss — this folder stays build-free. */
:root {
  --cream-50: #fffaf3;
  --cream-100: #fbf0e6;
  --ink-900: #33201a;
  --ink-700: #5f463b;
  /* Wine hour: bordo is the primary accent, gold the warm secondary. */
  --bordo-500: #8c1d46;
  --gold-500: #ffaf25;
  --rose-500: #c9355c;

  /* Bordo needs no darkened variant — #8c1d46 is already 8.5:1 on cream, where
     the coral it replaces reached 2.9:1 and had to be darkened to pass AA. */
  --accent-primary: var(--bordo-500);

  --font-display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --focus-ring: 0 0 0 3px var(--cream-50), 0 0 0 6px var(--accent-primary);
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font: 400 16px/1.5 var(--font-body);
  color: var(--ink-700);
  background: var(--cream-50);
  -webkit-font-smoothing: antialiased;
  /* Confetti dots as gradients, not an image: a blocked image can never break the message. */
  background-image:
    radial-gradient(circle at 12% 18%, var(--gold-500) 0 6px, transparent 6px),
    radial-gradient(circle at 88% 12%, var(--rose-500) 0 5px, transparent 5px),
    radial-gradient(circle at 78% 86%, var(--bordo-500) 0 7px, transparent 7px),
    radial-gradient(circle at 18% 82%, var(--rose-500) 0 4px, transparent 4px);
  background-repeat: no-repeat;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(0.75rem, 3vw, 1.25rem);
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3rem) 1.25rem;
  text-align: center;
}

.brand {
  margin: 0;
  font: 800 clamp(2.75rem, 14vw, 4.5rem) / 0.95 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

.brand__logo {
  display: block;
  width: min(456px, 85vw);
  height: auto;
  margin: 0 auto;
}

.mark {
  display: block;
  line-height: 0;
}

.mark__logo {
  display: block;
  width: min(197px, 60vw);
  height: auto;
  margin: 0 auto;
}

.lead {
  margin: 0;
  font: 400 clamp(1.0625rem, 4.5vw, 1.375rem) / 1.35 var(--font-body);
  color: var(--ink-900);
  text-wrap: balance;
}

.detail {
  margin: 0;
  font-size: clamp(0.9375rem, 3.6vw, 1rem);
  color: var(--ink-700);
  text-wrap: pretty;
}

.cta {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.875rem 1.75rem;
  border-radius: 999px;
  background: var(--accent-primary);
  color: #fff;
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
}

.cta:hover,
.cta:focus-visible {
  background: var(--ink-900);
}

.contact {
  margin: 0;
  font-size: 0.9375rem;
}

.contact a {
  color: var(--accent-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.contact a:hover {
  color: var(--ink-900);
}

.note {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-700);
  opacity: 0.85;
}

.footer {
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  font-size: 0.8125rem;
  color: var(--ink-700);
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .cta {
    transition: background-color 150ms ease;
  }
}

.crumbs {
  font-size: 0.875rem;
  color: var(--ink-700);
}

.crumbs a {
  color: var(--accent-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.crumbs a:hover {
  color: var(--ink-900);
}

/* Separator is generated, not typed, so the trail stays one clean string for a screen reader. */
.crumbs > * + *::before {
  content: " › ";
  color: var(--ink-700);
  text-decoration: none;
}

.page--placeholder h1 {
  margin: 0;
  font: 800 clamp(1.875rem, 8vw, 2.75rem) / 1.05 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

/* ==============================================================================================
   Homepage. Everything above this line is shared with the 24 placeholder pages and must keep
   working; everything below is additive and namespaced so the two cannot collide.
   ============================================================================================== */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/instrument-sans-600-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/instrument-sans-600-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --cream-200: #f6e2d4;
  /* Muted ink is a border and icon colour here, never a text one: #8c7264 reaches only 3.98:1 on
     cream-100 and 4.46:1 on white, so every muted label on this page uses --ink-700 instead. */
  --ink-500: #8c7264;
  --bordo-50: #fdf2f6;
  --bordo-600: #701538;
  --gold-100: #ffefcb;
  --gold-600: #e29310;
  /* The app pairs gold-600 on gold-100, which is 2.19:1 — fine for a bar, not for a numeral.
     This is the same hue taken down far enough to carry text on the same tint. */
  --gold-700: #825500;
  --rose-100: #f9dce3;
  --bordo-100: #f7dee7;
  --border-subtle: #f0decb;
  --surface-raised: #fff;

  --shadow-card: 0 2px 6px rgb(139 74 27 / 7%), 0 10px 28px rgb(139 74 27 / 8%);
  --shadow-pop:
    0 4px 12px rgb(139 74 27 / 12%), 0 18px 44px rgb(139 74 27 / 16%);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --gradient-winehour: linear-gradient(
    120deg,
    #ffaf25 0%,
    #c9355c 48%,
    #59102c 100%
  );
  /* The same wine hour with the gold stop dropped. Gold is a beautiful ground and a terrible one
     to put text on: white on #ffaf25 is 1.84:1 and gold on cream is 1.77:1, both under even the
     3:1 large-text floor. Anything carrying words uses this; gold stays for glows and edges. */
  --gradient-winehour-deep: linear-gradient(
    120deg,
    #c9355c 0%,
    #8c1d46 45%,
    #59102c 100%
  );

  --shell: 1200px;
  --gutter: clamp(1.25rem, 5vw, 2rem);
}

/* The shared confetti dots are positioned for a one-screen page; on a long document they smear
   down the whole scroll. A full page carries its own decoration instead. */
.site {
  display: block;
  background-image: none;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
}

.skip-link:focus-visible {
  left: var(--gutter);
  top: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-radius: 14px;
  background: var(--surface-raised);
  color: var(--ink-900);
  font-weight: 600;
}

/* --- header ---------------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(255 250 243 / 88%);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--border-subtle);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  min-height: 72px;
}

.site-header__logo {
  display: block;
  flex: none;
  line-height: 0;
}

.site-header__logo img {
  display: block;
  width: 148px;
  height: auto;
}

.site-nav {
  display: none;
  margin-inline-start: auto;
}

.site-nav__list,
.site-nav__sub {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__list {
  align-items: center;
  gap: 0.25rem;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.85rem;
  border-radius: 999px;
  color: var(--ink-900);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__link:hover {
  background: var(--cream-100);
  color: var(--accent-primary);
}

.site-nav__caret {
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.55;
}

/* No JavaScript drives this menu, so hover and :focus-within are the whole mechanism — and the
   parent stays a real link to the hub, because a keyboard user must be able to reach it. */
.site-nav__item {
  position: relative;
}

.site-nav__sub {
  position: absolute;
  top: 100%;
  left: 0;
  flex-direction: column;
  min-width: 15rem;
  padding: 0.5rem;
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-pop);
  /* Closed with opacity and pointer-events, never with visibility or display. Those two take the
     links out of the tab order, and then :focus-within can never fire — focus cannot get in to
     open the menu that hiding it prevented focus from entering. Nothing but JavaScript escapes
     that, and this menu has none. */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
}

.site-nav__item:hover .site-nav__sub,
.site-nav__item:focus-within .site-nav__sub {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.site-nav__sub a {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: 14px;
  color: var(--ink-700);
  font-size: 0.9375rem;
  text-decoration: none;
}

.site-nav__sub a:hover {
  background: var(--cream-100);
  color: var(--accent-primary);
}

.site-header__cta {
  flex: none;
  margin-inline-start: auto;
}

.site-nav + .site-header__cta {
  margin-inline-start: 0.5rem;
}

/* --- buttons --------------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.75rem;
  border: none;
  border-radius: 999px;
  font: 600 1rem/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
}

.btn--primary {
  background: var(--accent-primary);
  color: #fff;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--bordo-600);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  border: 1.5px solid var(--border-subtle);
  color: var(--ink-900);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.btn--lg {
  min-height: 56px;
  padding: 0 2.25rem;
  font-size: 1.0625rem;
}

.btn--sm {
  min-height: 42px;
  padding: 0 1.25rem;
  font-size: 0.9375rem;
}

/* --- section rhythm -------------------------------------------------------------------------- */

.section {
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
}

.section--tint {
  background: var(--cream-100);
}

.section__eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-primary);
}

.section__title {
  margin: 0;
  font: 800 clamp(1.75rem, 4.5vw, 2.75rem) / 1.05 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink-900);
  text-wrap: balance;
}

.section__lead {
  margin: 0.85rem 0 0;
  max-width: 46ch;
  font-size: clamp(1rem, 2.2vw, 1.125rem);
  color: var(--ink-700);
  text-wrap: pretty;
}

.section__head {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* --- hero ------------------------------------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(3rem, 8vw, 6rem);
}

.hero__inner {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}

.hero__title {
  margin: 0;
  font: 800 clamp(2rem, 5.2vw, 3.375rem) / 1.02 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--ink-900);
  text-wrap: balance;
}

.hero__title em {
  font-style: normal;
  background: var(--gradient-winehour-deep);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Drink cam carries the app's gold rim, taken down far enough to read as text on cream. The
   shorthand would reset background-clip and paint a solid block over the letters. */
.hero__title .em--gold {
  background-image: linear-gradient(120deg, #b07800 0%, #7a5000 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero__lead {
  margin: 1.25rem 0 0;
  max-width: 44ch;
  font-size: clamp(1.0625rem, 2.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-700);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* --- hero backdrop: aurora, grid, grain, orbs. All static without motion preference. --------- */

.hero {
  background: var(--cream-50);
}

.hero__aurora,
.hero__grid,
.hero__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__aurora {
  overflow: hidden;
}

.hero__aurora::before,
.hero__aurora::after {
  content: "";
  position: absolute;
  width: 56rem;
  height: 56rem;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.55;
}

.hero__aurora::before {
  top: -19rem;
  right: -12rem;
  background: radial-gradient(circle, rgb(255 175 37 / 45%), transparent 60%);
}

.hero__aurora::after {
  bottom: -25rem;
  left: -12rem;
  background: radial-gradient(circle, rgb(140 29 70 / 30%), transparent 60%);
}

.hero__grid {
  background-image:
    linear-gradient(rgb(255 175 37 / 9%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 175 37 / 9%) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%);
}

.hero__grain {
  opacity: 0.035;
  background-image: url("../assets/grain.svg");
  background-size: 200px 200px;
  mix-blend-mode: multiply;
}

.hero__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero__orb--1 {
  top: 22%;
  left: 8%;
  width: 14px;
  height: 14px;
  background: var(--bordo-500);
  opacity: 0.5;
}

.hero__orb--2 {
  top: 68%;
  left: 12%;
  width: 10px;
  height: 10px;
  background: var(--gold-500);
  opacity: 0.8;
}

.hero__orb--3 {
  top: 30%;
  right: 14%;
  width: 6px;
  height: 6px;
  background: var(--rose-500);
  opacity: 0.6;
}

.hero__orb--4 {
  top: 75%;
  right: 10%;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--gold-500);
}

.hero__inner,
.hero__cue {
  position: relative;
}

/* --- hero copy: eyebrow, note and trust pills ------------------------------------------------- */

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgb(255 175 37 / 45%);
  background: rgb(255 175 37 / 12%);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bordo-500);
}

.hero__eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-500);
}

.hero__actions {
  align-items: center;
}

.hero__note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--ink-700);
}

.hero__note::before {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--gold-500);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid rgb(255 175 37 / 35%);
  background: rgb(255 250 243 / 70%);
  color: var(--ink-900);
  font-weight: 600;
  font-size: 0.875rem;
}

.hero__trust li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-primary);
}

/* --- hero visual: ring, phone and four snapshots ---------------------------------------------- */

.hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 32rem;
}

.hero__visual::before {
  content: "";
  position: absolute;
  width: 32rem;
  height: 32rem;
  max-width: 100%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgb(255 175 37 / 28%),
    rgb(140 29 70 / 12%) 40%,
    transparent 70%
  );
  filter: blur(20px);
}

.hero__ring {
  position: absolute;
  width: 28rem;
  height: 28rem;
  max-width: 100%;
  aspect-ratio: 1;
  border: 1.5px dashed rgb(255 175 37 / 55%);
  border-radius: 50%;
}

.hero__ring::before,
.hero__ring::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translateX(-50%);
}

.hero__ring::before {
  top: -6px;
  background: var(--gold-500);
  box-shadow: 0 0 20px var(--gold-500);
}

.hero__ring::after {
  bottom: -6px;
  background: var(--bordo-500);
  box-shadow: 0 0 20px var(--rose-500);
}

.phone {
  position: relative;
  z-index: 3;
  width: clamp(15rem, 40vw, 18.75rem);
  aspect-ratio: 1 / 2;
  border: 2px solid rgb(255 175 37 / 45%);
  border-radius: 3.25rem;
  background: var(--surface-raised);
  box-shadow:
    var(--shadow-pop),
    0 0 0 8px rgb(255 250 243 / 95%),
    0 0 0 10px rgb(255 175 37 / 20%),
    0 40px 90px rgb(89 16 44 / 28%);
  overflow: hidden;
}

.phone__notch {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 32%;
  height: 1.75rem;
  border-radius: 0 0 18px 18px;
  background: var(--ink-900);
  transform: translateX(-50%);
}

.phone__screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--ink-900);
  color: var(--cream-50);
}

.phone__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 2.75rem 1rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.phone__back {
  width: 0.55rem;
  height: 0.55rem;
  border-left: 2px solid var(--cream-50);
  border-bottom: 2px solid var(--cream-50);
  transform: rotate(45deg);
}

.phone__title {
  flex: 1;
}

.phone__live {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgb(217 58 76 / 22%);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffb3bb;
}

.phone__live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d93a4c;
  box-shadow: 0 0 8px #d93a4c;
}

.phone__stage {
  flex: 1;
  min-height: 0;
  padding: 0 0.5rem;
}

.phone__stage .cue-frame__stage {
  height: 100%;
  aspect-ratio: auto;
  border-radius: 1.25rem;
}

.phone__hint {
  margin: 0.75rem 1rem 0.5rem;
  font-size: 0.75rem;
  text-align: center;
  color: rgb(255 250 243 / 75%);
}

.phone__controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1rem 1.25rem;
}

.phone__toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid rgb(255 250 243 / 25%);
  border-radius: 999px;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}

.phone__toggle b,
.phone__toggle i {
  padding: 0.45rem 0.5rem;
  font-style: normal;
  font-weight: inherit;
}

.phone__toggle b {
  background: var(--cream-50);
  color: var(--ink-900);
}

.phone__launch {
  padding: 0.6rem;
  border-radius: 999px;
  background: var(--bordo-500);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  color: var(--cream-50);
}

.snap {
  position: absolute;
  z-index: 4;
  width: 8.125rem;
  margin: 0;
  padding: 0.625rem 0.625rem 2.5rem;
  border-radius: 6px;
  background: var(--surface-raised);
  box-shadow:
    0 20px 50px -10px rgb(89 16 44 / 30%),
    0 0 0 1px rgb(255 175 37 / 25%);
  translate: var(--px, 0) var(--py, 0);
}

.snap img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 3px;
}

.snap::after {
  content: attr(data-label);
  position: absolute;
  right: 0;
  bottom: 0.45rem;
  left: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.15;
  text-align: center;
  color: var(--ink-700);
}

.snap--1 {
  top: 2%;
  left: -4%;
  rotate: -10deg;
}

.snap--2 {
  top: 10%;
  right: -8%;
  rotate: 8deg;
}

.snap--3 {
  bottom: 8%;
  left: -10%;
  rotate: -6deg;
}

.snap--4 {
  bottom: 4%;
  right: -6%;
  rotate: 11deg;
}

.hero__cue {
  display: none;
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-700);
  transform: translateX(-50%);
}

.hero__cue i {
  width: 1px;
  height: 2.625rem;
  background: linear-gradient(180deg, transparent, var(--gold-500), transparent);
  background-size: 100% 200%;
}

/* --- marquee ---------------------------------------------------------------------------------- */

.marquee {
  overflow: hidden;
  padding-block: 1rem;
  border-block: 1px solid var(--border-subtle);
  background: var(--cream-100);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marquee__track {
  display: flex;
  gap: 3rem;
  width: max-content;
  padding-inline: 1.5rem;
  white-space: nowrap;
  font: 800 0.9375rem/1 var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bordo-500);
}

.marquee__track span::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 3rem;
  border-radius: 50%;
  background: var(--gold-500);
  vertical-align: middle;
}

@media (max-width: 1100px) {
  .snap {
    width: 6.875rem;
  }
}

@media (max-width: 899px) {
  .hero__content {
    text-align: center;
  }

  .hero__lead {
    margin-inline: auto;
  }

  .hero__actions,
  .hero__trust {
    justify-content: center;
  }

  .hero__visual {
    order: -1;
    min-height: 30rem;
  }

  .hero__ring {
    width: 22rem;
    height: 22rem;
  }

  .snap--1 {
    top: 0;
    left: 2%;
  }
  .snap--2 {
    top: 4%;
    right: 2%;
  }
  .snap--3 {
    bottom: 4%;
    left: 2%;
  }
  .snap--4 {
    bottom: 2%;
    right: 2%;
  }
}

@media (max-width: 599px) {
  .hero__orb {
    display: none;
  }

  .hero__visual {
    min-height: 28rem;
  }

  .phone {
    width: 13.5rem;
  }

  .phone__bar {
    font-size: 0.7rem;
  }

  .hero__ring {
    width: 19rem;
    height: 19rem;
  }

  .snap {
    width: 5.25rem;
    padding: 0.4rem 0.4rem 1.9rem;
  }

  .snap::after {
    font-size: 0.625rem;
  }

  .snap--1 {
    top: 16%;
    left: -3%;
  }
  .snap--2 {
    top: 20%;
    right: -3%;
  }
  .snap--3 {
    bottom: 12%;
    left: -2%;
  }
  .snap--4 {
    bottom: 8%;
    right: -2%;
  }
}

.nowrap {
  white-space: nowrap;
}

/* --- grids ------------------------------------------------------------------------------------ */

.grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
  text-decoration: none;
}

.card h3 {
  margin: 0;
  font: 800 1.1875rem/1.2 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

.card p {
  margin: 0;
  color: var(--ink-700);
  font-size: 0.9375rem;
  text-wrap: pretty;
}

a.card:hover,
a.card:focus-visible {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-pop);
}

a.card:hover h3,
a.card:focus-visible h3 {
  color: var(--accent-primary);
}

.card__more {
  margin-top: auto;
  padding-top: 0.5rem;
  color: var(--accent-primary);
  font-weight: 600;
  font-size: 0.9375rem;
}

/* --- steps: one thread runs through all three, so the section reads as a sequence rather than
   as three unrelated tiles ---------------------------------------------------------------------- */

.steps {
  --step-thread: 2px;
  position: relative;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  /* The wine-hour bar is a second background layer so the card's own radius clips it and the
     connector thread outside the box is never cut off by an overflow rule. */
  background:
    linear-gradient(to bottom, transparent 4px, var(--surface-raised) 4px),
    var(--gradient-winehour);
  box-shadow: var(--shadow-card);
  isolation: isolate;
}

.step__num {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  z-index: -1;
  font: 800 clamp(3.5rem, 8vw, 5rem) / 1 var(--font-display);
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--bordo-100);
  user-select: none;
}

.step__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  color: var(--bordo-600);
  background: var(--bordo-100);
}

.step:nth-child(1) .step__icon {
  color: var(--gold-700);
  background: var(--gold-100);
}
.step:nth-child(3) .step__icon {
  color: var(--rose-600, #a82449);
  background: var(--rose-100);
}

.step__icon svg {
  width: 28px;
  height: 28px;
}

.step h3 {
  margin: 0.25rem 0 0;
  font: 800 1.25rem/1.15 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

.step p {
  margin: 0;
  color: var(--ink-700);
  font-size: 0.9375rem;
  text-wrap: pretty;
}

/* Stacked, the thread runs down the left edge between the icons; side by side it runs behind them. */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(clamp(1.5rem, 3vw, 2rem) + 28px - var(--step-thread) / 2);
  bottom: calc(-1 * clamp(1.25rem, 3vw, 2rem) - 1px);
  width: var(--step-thread);
  height: clamp(1.25rem, 3vw, 2rem);
  background: repeating-linear-gradient(
    to bottom,
    var(--rose-500) 0 5px,
    transparent 5px 10px
  );
}

.steps__more {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  font-size: clamp(1rem, 2.2vw, 1.125rem);
}

.steps__more a {
  color: var(--accent-primary);
  font-weight: 600;
  text-decoration: none;
}

.steps__more a::after {
  content: "→";
  display: inline-block;
  margin-left: 0.5rem;
  transition: transform 240ms var(--ease-out);
}

.steps__more a:hover::after,
.steps__more a:focus-visible::after {
  transform: translateX(4px);
}

.steps__more a:hover,
.steps__more a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --- use cases: the wedding tile is the money page, so it is the big one --------------------- */

.usecases {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.usecase {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
  text-decoration: none;
}

.usecase__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 0.25rem;
  border-radius: 14px;
  color: var(--bordo-600);
  background: var(--bordo-100);
}

.usecase__icon svg {
  width: 24px;
  height: 24px;
}

.usecase h2,
.usecase h3 {
  margin: 0;
  font: 800 1.25rem/1.15 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

.usecase p {
  margin: 0;
  color: var(--ink-700);
  font-size: 0.9375rem;
  text-wrap: pretty;
}

.usecase:hover,
.usecase:focus-visible {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-pop);
}

.usecase__more {
  margin-top: auto;
  padding-top: 0.75rem;
  color: var(--accent-primary);
  font-weight: 600;
  font-size: 0.9375rem;
}

.usecase__more::after {
  content: "→";
  display: inline-block;
  margin-left: 0.4rem;
  transition: transform 240ms var(--ease-out);
}

.usecase:hover .usecase__more::after,
.usecase:focus-visible .usecase__more::after {
  transform: translateX(4px);
}

/* The wedding tile is the money page: a banner with copy on one side and a stack of tilted
   polaroids on the other. Each face layers a photo over a gradient, so a missing file still
   leaves a finished-looking card. */
.usecase--hero {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  overflow: hidden;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-color: transparent;
  background:
    radial-gradient(60% 80% at 100% 0%, rgb(255 175 37 / 22%), transparent 70%),
    var(--gradient-winehour-deep);
  box-shadow: var(--shadow-pop);
}

.usecase__body {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.usecase--hero h2,
.usecase--hero h3 {
  font-size: clamp(1.75rem, 3.5vw, 2.375rem);
  color: #fff;
}

.usecase--hero p {
  color: rgb(255 255 255 / 90%);
  font-size: 1.0625rem;
  max-width: 36ch;
}

.usecase--hero .usecase__more {
  color: #fff;
}

.polaroids {
  position: relative;
  height: 200px;
  margin-inline: auto;
  width: min(100%, 320px);
}

.polaroid {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 128px;
  padding: 8px 8px 24px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 30px rgb(0 0 0 / 28%);
  transform: translate(-50%, -50%) rotate(var(--tilt)) translateX(var(--shift));
}

.polaroid i {
  display: block;
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--photo);
}

.polaroid b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  font: 600 0.75rem/1 var(--font-body);
  text-align: center;
  color: var(--ink-700);
}

.polaroid:nth-child(1) {
  --tilt: -9deg;
  --shift: -84px;
  --photo:
    url("../assets/usecases/table.webp") center / cover,
    linear-gradient(160deg, #ffd98a, #e29310 60%, #8c1d46);
}
.polaroid:nth-child(2) {
  --tilt: 4deg;
  --shift: 0;
  --photo:
    url("../assets/usecases/floor.webp") center / cover,
    linear-gradient(160deg, #f9dce3, #c9355c 55%, #59102c);
  z-index: 1;
}
.polaroid:nth-child(3) {
  --tilt: 11deg;
  --shift: 84px;
  --photo:
    url("../assets/usecases/bar.webp") center / cover,
    linear-gradient(160deg, #fff1d6, #ffaf25 50%, #c9355c);
}

/* --- pricing ---------------------------------------------------------------------------------- */

.tiers {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  /* Stretched, not start-aligned: equal-height cards are what let margin-top:auto line the
     buttons up however uneven the feature lists are. */
  align-items: stretch;
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
}

/* The free tier reads as the quiet one: sunken rather than raised, so the eye starts at the
   paid cards and treats this as the way in rather than the destination. */
.tier--free {
  background: var(--cream-100);
  box-shadow: none;
}

/* The upper tier carries the accent and sits proud of the row. Both stay on white behind their
   text: a price set in white on a gradient is the contrast trap this page already had once.
   The border, the badge, the accent price and the deeper shadow are the whole treatment — an
   accent cap on top of those was a fourth signal, and being absolutely positioned against the
   padding box it also sat proud of the rounded border as a stray strip. */
.tier--full {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-pop);
}

.tier--full {
  padding-top: calc(clamp(1.5rem, 3vw, 2rem) + 2.25rem);
}

.tier__badge {
  position: absolute;
  top: clamp(1.5rem, 3vw, 2rem);
  left: clamp(1.5rem, 3vw, 2rem);
  margin: 0;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--bordo-100);
  color: var(--bordo-600);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tier__name {
  margin: 0;
  font: 800 1.25rem/1.15 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

.tier__price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0.6rem 0 0.2rem;
}

.tier__amount {
  font: 800 clamp(2rem, 4.5vw, 2.75rem) / 1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

.tier--full .tier__amount {
  color: var(--accent-primary);
}

.tier__unit,
.tier__note {
  font-size: 0.875rem;
  color: var(--ink-700);
}

/* The rule under the price is what separates "what it costs" from "what you get" without
   needing a heading for each. */
.tier__note {
  margin: 0 0 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
}

.tier__list {
  display: grid;
  gap: 0.625rem;
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}

.tier__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  color: var(--ink-700);
  font-size: 0.9375rem;
}

.tier__list li::before {
  content: "";
  flex: none;
  width: 1.0625rem;
  height: 1.0625rem;
  margin-top: 0.2rem;
  border-radius: 50%;
  background: var(--bordo-100);
  box-shadow: inset 0 0 0 4px var(--accent-primary);
}

.tier--free .tier__list li::before {
  background: var(--surface-raised);
  box-shadow: inset 0 0 0 4px var(--ink-500);
}

/* Pushed to the bottom so every card's button sits on the same line. */
.tier__cta {
  margin-top: auto;
  align-self: stretch;
}

.tiers__foot {
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
  color: var(--ink-700);
  text-align: center;
}

/* --- FAQ -------------------------------------------------------------------------------------- */

.faq {
  display: grid;
  gap: 0.25rem;
  max-width: 52rem;
}

.faq__item {
  border: 1px solid transparent;
  border-radius: 16px;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.faq__item:hover,
.faq__item[open] {
  border-color: var(--border-subtle);
  background: var(--surface-raised);
}

.faq__question {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1.125rem 1.25rem;
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: 16px;
}

.faq h3 {
  margin: 0;
  font: 600 1.0625rem/1.35 var(--font-body);
  color: var(--ink-900);
}

.faq__chevron {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: -0.2rem;
  border-right: 2px solid var(--ink-900);
  border-bottom: 2px solid var(--ink-900);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.faq__item[open] .faq__chevron {
  margin-top: 0.2rem;
  transform: rotate(225deg);
}

.faq__answer {
  padding: 0 1.25rem 1.25rem calc(1.25rem + 0.55rem + 0.875rem);
}

.faq p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink-700);
  text-wrap: pretty;
}

.faq a {
  color: var(--accent-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* --- closing ---------------------------------------------------------------------------------- */

.closing {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 5vw, 3rem);
  border-radius: 28px;
  background: var(--gradient-winehour-deep);
  box-shadow: var(--shadow-pop);
  text-align: center;
  color: #fff;
}

.closing h2 {
  margin: 0 auto;
  max-width: 20ch;
  font: 800 clamp(1.75rem, 5vw, 3rem) / 1.02 var(--font-display);
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}

.closing .btn {
  margin-top: 2rem;
  background: #fff;
  color: var(--bordo-600);
}

.closing .btn:hover,
.closing .btn:focus-visible {
  background: var(--cream-100);
  color: var(--bordo-600);
}

.closing__contact {
  margin: 1.5rem 0 0;
  color: rgb(255 255 255 / 90%);
}

.closing__contact a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Closing CTA with the app's own kiss-cam heart floating over the wine gradient. */
.closing--kiss::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 42%, rgb(255 120 140 / 35%), transparent 42%),
    radial-gradient(circle 5px at 12% 18%, var(--gold-600) 99%, transparent),
    radial-gradient(circle 3px at 30% 86%, #ffd27a 99%, transparent),
    radial-gradient(circle 4px at 58% 10%, #ffefcb 99%, transparent),
    radial-gradient(circle 3px at 92% 82%, var(--gold-600) 99%, transparent),
    radial-gradient(circle 4px at 66% 92%, #ffd27a 99%, transparent);
}

.closing--kiss .closing__body,
.closing--kiss .closing__art {
  position: relative;
}

.closing--kiss h2 em {
  font-style: normal;
  color: #ffd27a;
}

.closing__art {
  order: -1;
  margin: 0 auto 1.5rem;
  max-width: 24rem;
  transform: scale(1.2);
}

.closing--kiss {
  display: flex;
  flex-direction: column;
}

.closing .closing__art .cue-frame__stage {
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

.closing__art .cue-frame__shot {
  filter: saturate(1.1);
}

.closing__art .cue-frame__rim {
  filter: drop-shadow(0 0 clamp(16px, 5cqmin, 48px) rgb(255 90 120 / 85%));
}

.closing__art .cue-frame__heart {
  background: #ffd27a;
  filter: drop-shadow(0 0 8px rgb(255 210 122 / 80%));
}

@media (min-width: 900px) {
  .closing--kiss {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding-block: clamp(3.5rem, 8vw, 5.5rem);
    text-align: left;
  }

  .closing--kiss h2 {
    margin: 0;
  }

  .closing__art {
    order: 0;
    margin: 0;
    max-width: none;
    transform: rotate(-4deg) scale(1.3);
  }
}

/* Kiss cam section: each cue frame with its own three beats beneath it, then the privacy note. */
.beats {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.beat {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 0.75rem;
  row-gap: 0.35rem;
  padding: clamp(1rem, 2.5vw, 1.25rem) clamp(1.125rem, 3vw, 1.5rem);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
}

.beat__figure {
  font: 800 clamp(2.25rem, 5vw, 3rem) / 1 var(--font-display);
  letter-spacing: -0.03em;
  background: var(--gradient-winehour);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.beat__figure small {
  font-size: 0.5em;
  margin-left: 0.05em;
}

.beat__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-primary);
}

.beat__text {
  grid-column: 1 / -1;
  color: var(--ink-700);
}

.privacy-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem 1rem;
  align-items: center;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1rem, 2.5vw, 1.25rem) clamp(1.125rem, 3vw, 1.5rem);
  border-radius: 20px;
  background: var(--cream-100);
}

.privacy-note__icon {
  width: 1.75rem;
  height: 1.75rem;
  fill: var(--accent-primary);
}

.privacy-note__text {
  margin: 0;
  color: var(--ink-700);
  text-wrap: pretty;
}

.privacy-note__text strong {
  color: var(--ink-900);
}

.privacy-note__cta {
  grid-column: 1 / -1;
  justify-self: start;
}

@media (min-width: 720px) {
  .beats {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .privacy-note {
    grid-template-columns: auto 1fr auto;
  }

  .privacy-note__cta {
    grid-column: auto;
  }
}

/* Two classes, so one column inside the half-width grid column outranks the 3-column .beats above. */
.beats.beats--column {
  grid-template-columns: 1fr;
  margin-bottom: 0;
}

/* Both cue columns hang off one row set, so the frames and every beat line up across the pair. */
@supports (grid-template-rows: subgrid) {
  .cue-pair {
    grid-template-rows: auto repeat(3, auto);
  }

  .cue-pair > .stack {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0.75rem;
  }

  .cue-pair > .stack > * + * {
    margin-top: 0;
  }

  .cue-pair .cue-frame {
    margin-bottom: clamp(0.75rem, 3vw, 1.75rem);
  }

  .cue-pair .beats--column {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}

/* --- footer ----------------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border-subtle);
  background: var(--cream-100);
  padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
}

.site-footer__cols {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.site-footer h2 {
  margin: 0 0 0.75rem;
  font: 600 0.8125rem/1.3 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-700);
}

.site-footer ul {
  display: grid;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer a {
  color: var(--ink-700);
  font-size: 0.9375rem;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--accent-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.8125rem;
  color: var(--ink-700);
}

/* --- desktop ---------------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .site-nav {
    display: block;
  }

  .hero {
    min-height: min(100svh, 56rem);
    display: flex;
    align-items: center;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }

  .hero__cue {
    display: flex;
  }

  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .step:not(:last-child)::after {
    left: auto;
    right: calc(-1 * clamp(1.25rem, 3vw, 2rem) - 1px);
    top: calc(clamp(1.5rem, 3vw, 2rem) + 4px + 28px - var(--step-thread) / 2);
    bottom: auto;
    width: clamp(1.25rem, 3vw, 2rem);
    height: var(--step-thread);
    background: repeating-linear-gradient(
      to right,
      var(--rose-500) 0 5px,
      transparent 5px 10px
    );
  }

  .usecases {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .usecase--hero {
    grid-column: span 3;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .polaroids {
    height: 240px;
    width: min(100%, 380px);
  }

  .polaroid {
    width: 150px;
  }

  .polaroid:nth-child(1) {
    --shift: -100px;
  }
  .polaroid:nth-child(3) {
    --shift: 100px;
  }

  .tiers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Side by side, every card reserves the badge row so the three names sit on one line rather
     than the featured one being pushed down alone. Stacked, there is no row to align to and the
     reservation would just be dead space above each card. */
  .tier {
    padding-top: calc(clamp(1.5rem, 3vw, 2rem) + 2.25rem);
  }
}

/* Three columns and no more: the wedding tile takes the full top row as a banner and the other
   three fill the second exactly. A four-column grid strands the last tile on a row of its own. */

/* --- motion ----------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .btn,
  .card,
  .step,
  .usecase,
  .site-nav__sub {
    transition:
      background-color 150ms ease,
      border-color 150ms ease,
      color 150ms ease,
      box-shadow 240ms var(--ease-out),
      transform 240ms var(--ease-out),
      opacity 700ms var(--ease-out);
  }

  a.card:hover,
  .step:hover,
  .usecase:hover {
    transform: translateY(-3px);
  }

  .step:hover {
    box-shadow: var(--shadow-pop);
  }

  @keyframes confettiRise {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .hero__title {
    animation: confettiRise 0.45s var(--ease-out) 0.08s both;
  }
  .hero__lead {
    animation: confettiRise 0.45s var(--ease-out) 0.16s both;
  }
  .hero__actions {
    animation: confettiRise 0.45s var(--ease-out) 0.24s both;
  }
  .hero__eyebrow {
    animation: confettiRise 0.45s var(--ease-out) both;
  }
  .hero__trust {
    animation: confettiRise 0.45s var(--ease-out) 0.32s both;
  }
  .hero__visual {
    animation: confettiRise 0.6s var(--ease-out) 0.2s both;
  }

  .hero__aurora::before {
    animation: heroBlobA 18s ease-in-out infinite alternate;
  }
  .hero__aurora::after {
    animation: heroBlobB 22s ease-in-out infinite alternate;
  }
  @keyframes heroBlobA {
    to {
      transform: translate(-80px, 60px) scale(1.15);
    }
  }
  @keyframes heroBlobB {
    to {
      transform: translate(60px, -80px) scale(1.1);
    }
  }

  .hero__orb--1 {
    animation: heroOrb 6s ease-in-out infinite alternate;
  }
  .hero__orb--2 {
    animation: heroOrb 8s ease-in-out infinite alternate-reverse;
  }
  .hero__orb--3 {
    animation: heroOrb 5s ease-in-out infinite alternate;
  }
  .hero__orb--4 {
    animation: heroOrb 7s ease-in-out infinite alternate-reverse;
  }
  @keyframes heroOrb {
    from {
      transform: translateY(-16px);
    }
    to {
      transform: translateY(16px);
    }
  }

  .hero__eyebrow-dot {
    animation: heroPing 2s ease-out infinite;
  }
  @keyframes heroPing {
    0% {
      box-shadow: 0 0 0 0 rgb(255 175 37 / 60%);
    }
    80%,
    100% {
      box-shadow: 0 0 0 10px rgb(255 175 37 / 0%);
    }
  }

  .hero__visual::before {
    animation: heroBreathe 6s ease-in-out infinite alternate;
  }
  @keyframes heroBreathe {
    from {
      transform: scale(0.92);
      opacity: 0.7;
    }
    to {
      transform: scale(1.08);
      opacity: 1;
    }
  }

  .hero__ring {
    animation: heroRotate 40s linear infinite;
  }
  @keyframes heroRotate {
    to {
      transform: rotate(360deg);
    }
  }

  .phone {
    animation: heroPhone 6s ease-in-out infinite alternate;
  }
  @keyframes heroPhone {
    from {
      transform: translateY(-8px) rotate(-1deg);
    }
    to {
      transform: translateY(8px) rotate(1deg);
    }
  }

  /* The card's rotation and the parallax offset live on their own properties, so this keyframe
     only nudges translateY and composes with both. */
  .snap {
    transition: translate 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .snap--1 {
    animation: heroSnapA 7s ease-in-out infinite alternate;
  }
  .snap--2 {
    animation: heroSnapB 8s ease-in-out infinite alternate;
  }
  .snap--3 {
    animation: heroSnapA 9s ease-in-out infinite alternate-reverse;
  }
  .snap--4 {
    animation: heroSnapB 7.5s ease-in-out infinite alternate-reverse;
  }
  @keyframes heroSnapA {
    from {
      transform: translateY(-10px);
    }
    to {
      transform: translateY(10px);
    }
  }
  @keyframes heroSnapB {
    from {
      transform: translateY(8px);
    }
    to {
      transform: translateY(-12px);
    }
  }

  .phone__stage .cue-frame__heart {
    animation: heroHeart 1.6s ease-in-out infinite alternate;
  }
  @keyframes heroHeart {
    to {
      opacity: 0.45;
    }
  }

  .hero__cue i {
    animation: heroScroll 2.2s ease-in-out infinite;
  }
  @keyframes heroScroll {
    from {
      background-position: 0 -100%;
    }
    to {
      background-position: 0 100%;
    }
  }

  .marquee__track {
    animation: heroMarquee 45s linear infinite;
  }
  @keyframes heroMarquee {
    to {
      transform: translateX(-50%);
    }
  }

  @keyframes floatA {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-14px) rotate(3deg);
    }
  }

  @keyframes floatB {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(12px) rotate(-4deg);
    }
  }

  .confetti span:nth-child(1) {
    animation: floatA 7s ease-in-out infinite;
  }
  .confetti span:nth-child(2) {
    animation: floatB 9s ease-in-out 1s infinite;
  }
  .confetti span:nth-child(3) {
    animation: floatA 8s ease-in-out 2s infinite;
  }
  .confetti span:nth-child(4) {
    animation: floatB 7.5s ease-in-out 0.5s infinite;
  }
}

/* ==============================================================================================
   Content pages. They reuse the homepage's chrome, sections, cards, tiers and FAQ; below is only
   what long-form text needs and a hero-driven page never had.
   ============================================================================================== */

/* --- page head -------------------------------------------------------------------------------- */

.page-head {
  max-width: 46rem;
}

.page-head__title {
  margin: 0.75rem 0 0;
  font: 800 clamp(2rem, 6vw, 3rem) / 1.05 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink-900);
  text-wrap: balance;
}

.page-head__lead {
  margin: 1rem 0 0;
  font: 400 clamp(1.0625rem, 2.5vw, 1.25rem) / 1.45 var(--font-body);
  color: var(--ink-700);
  text-wrap: pretty;
}

.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* --- long-form text --------------------------------------------------------------------------- */

.prose {
  max-width: 68ch;
}

.prose > * + * {
  margin-top: 1.25rem;
}

.prose h2 {
  margin: 2.5rem 0 0;
  font: 800 clamp(1.5rem, 4vw, 2rem) / 1.15 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

.prose h3 {
  margin: 2rem 0 0;
  font: 600 clamp(1.125rem, 3vw, 1.3125rem) / 1.3 var(--font-body);
  color: var(--ink-900);
}

.prose > :first-child {
  margin-top: 0;
}

.prose p {
  color: var(--ink-700);
  text-wrap: pretty;
}

.prose ul,
.prose ol {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding-left: 1.375rem;
  color: var(--ink-700);
}

/* Polish legal drafting numbers sub-points a), b) — the source text uses those letters, so the
   markup has to render them rather than a second run of digits. */
.prose ol.prose-alpha {
  list-style-type: lower-alpha;
}

.prose li p {
  margin-top: 0.5rem;
}

.prose li::marker {
  color: var(--accent-primary);
}

.prose strong {
  font-weight: 600;
  color: var(--ink-900);
}

.prose a {
  color: var(--accent-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.prose a:hover {
  color: var(--ink-900);
}

/* --- blocks ----------------------------------------------------------------------------------- */

.stack > * + * {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

/* Media first on a wide screen, text first on a narrow one: stacked, a picture above the
   paragraph it illustrates pushes the point off the first screen. */
.split--flip .split__media {
  order: 1;
}

.figure {
  margin: 0;
}

/* width/height on the img plus height:auto is what reserves the box, so swapping a placeholder
   for a real photograph of the same ratio cannot shift the page. */
.figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  background: var(--cream-100);
}

.figure__caption {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--ink-700);
}

/* A portrait shot fills its column to roughly twice the height of the paragraph beside it and
   stops reading as the supporting illustration it is. */
.figure--portrait {
  max-width: 22rem;
  margin-inline: auto;
}

.callout {
  padding: clamp(1rem, 3vw, 1.5rem);
  border-left: 3px solid var(--accent-primary);
  border-radius: 0 16px 16px 0;
  background: var(--cream-100);
}

.callout > * + * {
  margin-top: 0.75rem;
}

.callout h2,
.callout h3 {
  margin: 0;
  font: 600 1.0625rem/1.3 var(--font-body);
  color: var(--ink-900);
}

.callout p {
  margin: 0;
  color: var(--ink-700);
}

.callout a {
  color: var(--accent-primary);
  text-underline-offset: 0.15em;
}

/* --- comparison table ------------------------------------------------------------------------- */

/* The table keeps a min-width and scrolls inside its own box: squeezed to a phone it would wrap
   every cell to three lines and stop being a comparison. */
.compare {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
}

/* Separate borders, not collapsed: a collapsed border does not paint on a sticky cell, and the
   label column below is sticky. */
.compare table {
  width: 100%;
  min-width: 40rem;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.compare th,
.compare td {
  padding: 0.9375rem 1.125rem;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.9375rem;
  text-align: left;
  vertical-align: middle;
}

/* The label column stays in place while the packages scroll under it on a phone, so a value is
   never read against the wrong row. */
.compare thead th:first-child,
.compare tbody th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 34%;
  border-right: 1px solid var(--border-subtle);
}

.compare thead th {
  background: var(--cream-100);
  font: 600 0.8125rem/1.3 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-900);
}

.compare tbody tr {
  background: var(--surface-raised);
}

.compare tbody tr:nth-child(even) {
  background: var(--cream-50);
}

.compare tbody th {
  background: inherit;
  font-weight: 600;
  color: var(--ink-900);
}

.compare td {
  color: var(--ink-700);
}

.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
  border-bottom: 0;
}

/* The package the pricing cards already single out, carried into the table so the eye lands in the
   same column twice. */
.compare [data-featured] {
  background: var(--bordo-50);
}

.compare thead [data-featured] {
  color: var(--bordo-600);
}

.compare td[data-cell="yes"] {
  color: var(--ink-900);
  font-weight: 600;
}

.compare td[data-cell]::before {
  margin-right: 0.45em;
  font-weight: 700;
}

.compare td[data-cell="yes"]::before {
  content: "✓";
  color: var(--accent-primary);
}

.compare td[data-cell="no"]::before {
  content: "✕";
  color: var(--ink-500);
}

/* The price is the row everyone scrolls to, so it reads as the sum of the column above it. */
.compare tr.is-total th,
.compare tr.is-total td {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  border-top: 2px solid var(--border-subtle);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink-900);
}

.compare caption {
  caption-side: bottom;
  padding: 0.8125rem 1.125rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.8125rem;
  color: var(--ink-700);
  text-align: left;
}

/* --- question index --------------------------------------------------------------------------- */

.qa-index {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qa-index a {
  color: var(--accent-primary);
  font-size: 0.9375rem;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.qa-index a:hover {
  color: var(--ink-900);
}

/* A column of the two-audience question index. Both .qa-index and .note zero their margins for
   use inside .prose, so the rhythm has to be restored here rather than inherited. */
.qa-column > h2 {
  margin: 0 0 1rem;
  font: 800 clamp(1.25rem, 3vw, 1.5rem) / 1.2 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

.qa-column > .note {
  margin-top: 1.25rem;
}

/* .note predates any link ever appearing inside it, so an anchor there fell through to the
   browser default blue. */
.note a {
  color: var(--accent-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.note a:hover {
  color: var(--ink-900);
}

/* --- kiss cam / drink cam frame ----------------------------------------------------------------

   The shapes, colours and layout below are lifted from the app's own overlay so the page shows the
   real thing rather than an artist's impression: the paths come from
   apps/webapp/src/app/features/live-cam/util/cue-shapes.ts, the rim colours from --red-600 and
   --gold-600, and the photo is masked with the same path the rim is stroked from, exactly as
   CameraPreview masks the video. Static, because a still page is showing one frozen frame.
   ----------------------------------------------------------------------------------------------- */

.cue-frame {
  margin: 0;
}

.cue-frame__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  container-type: size;
  border-radius: 20px;
  background: #000;
  overflow: hidden;
}

.cue-frame__shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.cue-frame--kiss .cue-frame__shot {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M50%2090%20C50%2090%208%2060%208%2032%20C8%2015%2021%204%2037%204%20C44%204%2050%209%2050%2016%20C50%209%2056%204%2063%204%20C79%204%2092%2015%2092%2032%20C92%2060%2050%2090%2050%2090%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M50%2090%20C50%2090%208%2060%208%2032%20C8%2015%2021%204%2037%204%20C44%204%2050%209%2050%2016%20C50%209%2056%204%2063%204%20C79%204%2092%2015%2092%2032%20C92%2060%2050%2090%2050%2090%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
}

.cue-frame--drink .cue-frame__shot {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20140%20100%22%3E%3Cpath%20d%3D%22M70%206%20C105.35%206%20134%2025.7%20134%2050%20C134%2074.3%20105.35%2094%2070%2094%20C34.65%2094%206%2074.3%206%2050%20C6%2025.7%2034.65%206%2070%206%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20140%20100%22%3E%3Cpath%20d%3D%22M70%206%20C105.35%206%20134%2025.7%20134%2050%20C134%2074.3%20105.35%2094%2070%2094%20C34.65%2094%206%2074.3%206%2050%20C6%2025.7%2034.65%206%2070%206%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
}

.cue-frame__rim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cue-frame__rim path {
  fill: none;
  stroke: var(--cue-accent);
  /* Constant on-screen thickness however the viewBox scales, same as the app's overlay. */
  vector-effect: non-scaling-stroke;
  stroke-width: 3;
}

/* The textPath guide arc is a presentation attribute; the rule above would otherwise paint it. */
.cue-frame__rim path[stroke="none"] {
  stroke: none;
}

.cue-frame--kiss {
  --cue-accent: #d93a4c;
  --cue-glow: rgb(217 58 76 / 60%);
  --cue-wash: rgb(217 58 76 / 32%);
}

.cue-frame--drink {
  --cue-accent: #e29310;
  --cue-glow: rgb(226 147 16 / 55%);
  --cue-wash: rgb(226 147 16 / 32%);
}

/* The app's display window: a translucent wash composited over solid black (display-page.scss). */
.cue-frame .cue-frame__stage {
  background: linear-gradient(var(--cue-wash), var(--cue-wash)) #000;
}

.cue-frame__rim {
  filter: drop-shadow(0 0 clamp(12px, 4cqmin, 40px) var(--cue-glow));
}

.cue-frame__label {
  font: 800 9px/1 var(--font-display);
  letter-spacing: 0.12em;
  fill: #ffefcb;
  paint-order: stroke fill;
  stroke: rgb(51 32 26 / 75%);
  stroke-width: 0.6;
  filter: drop-shadow(0 0 3px rgb(226 147 16 / 85%));
}

/* Scattered in the margin the crop leaves empty, the same eight positions the overlay uses. */
.cue-frame__ambient {
  position: absolute;
  inset: 0;
}

.cue-frame__heart {
  position: absolute;
  width: 4.5cqmin;
  height: 4.5cqmin;
  background: #d93a4c;
  transform: rotate(-45deg);
  filter: drop-shadow(0 0 6px rgb(217 58 76 / 70%));
}

.cue-frame__heart::before,
.cue-frame__heart::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: inherit;
}

.cue-frame__heart::before {
  top: -50%;
  left: 0;
}

.cue-frame__heart::after {
  top: 0;
  left: 50%;
}

.cue-frame__glass {
  position: absolute;
  width: 3.2cqmin;
  height: 5cqmin;
  fill: #e29310;
  filter: drop-shadow(0 0 6px rgb(226 147 16 / 70%));
}

.cue-frame__heart:nth-child(1) {
  top: 6%;
  left: 4%;
  scale: 0.8;
}

.cue-frame__heart:nth-child(2) {
  top: 4%;
  left: 90%;
  scale: 1;
}

.cue-frame__heart:nth-child(3) {
  top: 44%;
  left: 2%;
  scale: 0.6;
}

.cue-frame__heart:nth-child(4) {
  top: 48%;
  left: 95%;
  scale: 0.9;
}

.cue-frame__heart:nth-child(5) {
  top: 86%;
  left: 6%;
  scale: 0.75;
}

.cue-frame__heart:nth-child(6) {
  top: 90%;
  left: 88%;
  scale: 0.85;
}

.cue-frame__heart:nth-child(7) {
  top: 18%;
  left: 96%;
  scale: 0.5;
}

.cue-frame__heart:nth-child(8) {
  top: 72%;
  left: 2%;
  scale: 0.55;
}

.cue-frame__glass:nth-child(1) {
  top: 5%;
  left: 5%;
  scale: 0.8;
}

.cue-frame__glass:nth-child(2) {
  top: 3%;
  left: 88%;
  scale: 1;
}

.cue-frame__glass:nth-child(3) {
  top: 46%;
  left: 3%;
  scale: 0.6;
}

.cue-frame__glass:nth-child(4) {
  top: 50%;
  left: 93%;
  scale: 0.9;
}

.cue-frame__glass:nth-child(5) {
  top: 88%;
  left: 8%;
  scale: 0.75;
}

.cue-frame__glass:nth-child(6) {
  top: 92%;
  left: 86%;
  scale: 0.85;
}

.cue-frame__glass:nth-child(7) {
  top: 20%;
  left: 95%;
  scale: 0.5;
}

.cue-frame__glass:nth-child(8) {
  top: 74%;
  left: 4%;
  scale: 0.55;
}

/* --- content pages: desktop ------------------------------------------------------------------- */

@media (min-width: 640px) {
  .qa-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* A numbered table of contents has to read straight down; the two-column grid fills by row, so
     § 1 and § 2 would land side by side. Same specificity as the rule above, so it has to sit
     after it. */
  .qa-index--stacked {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .split--flip .split__media {
    order: -1;
  }

  /* A use-case page shows the two packages that apply to it, not all three, and the shared
     three-column track would leave the row visibly short on the right. */
  .tiers--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 46rem;
    margin-inline: auto;
  }
}

/* -----------------------------------------------------------------------------------------------
   Cookie consent — built by js/cookie-consent.js, mounted at the bottom-left corner of every page.
   ----------------------------------------------------------------------------------------------- */

.cookie-consent {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 1000;
  width: calc(100% - 2.5rem);
  max-width: 440px;
  background: var(--surface-raised);
  color: var(--ink-900);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.28s var(--ease-out),
    transform 0.28s var(--ease-out);
  pointer-events: none;
}

.cookie-consent--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cookie-consent__inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem;
}

.cookie-consent__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cookie-consent__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  background: var(--bordo-100);
  color: var(--accent-primary);
}

.cookie-consent__icon svg {
  width: 20px;
  height: 20px;
}

.cookie-consent__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.3;
}

.cookie-consent__description {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-700);
}

.cookie-consent__link {
  color: var(--accent-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}

.cookie-consent__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
}

.cookie-consent__btn {
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.7rem 1.15rem;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.cookie-consent__btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.cookie-consent__btn--primary {
  background: var(--accent-primary);
  color: #fff;
}

.cookie-consent__btn--primary:hover {
  background: var(--bordo-600);
}

.cookie-consent__btn--secondary {
  background: var(--surface-raised);
  color: var(--ink-900);
  border-color: var(--border-subtle);
}

.cookie-consent__btn--secondary:hover {
  background: var(--cream-100);
}

@media (max-width: 540px) {
  .cookie-consent {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    width: auto;
    max-width: none;
  }

  .cookie-consent__inner {
    padding: 1.25rem;
    gap: 0.75rem;
  }

  /* Kept smaller than the hero title so the banner never becomes the page's largest paint. */
  .cookie-consent__description {
    font-size: 0.8125rem;
  }

  .cookie-consent__actions {
    flex-direction: column-reverse;
  }

  .cookie-consent__btn {
    width: 100%;
  }
}