/* ==========================================================================
   BurnCal AI — public website
   The app's own instrument panel, carried onto the web: deep navy surfaces,
   one green accent, white for what matters and a muted blue-grey for the rest.
   Sora carries the headings, Familjen Grotesk the prose, Martian Mono every
   figure. The accent is rationed so the member counter stays the single
   loudest thing on the page.
   ========================================================================== */

:root {
  /* Surfaces, deepest to highest. */
  --navy: #0b1220;
  --navy-deep: #070c16;
  --navy-raised: #121c2e;
  --navy-high: #1a2740;
  /* Reading stretches invert onto a lighter panel, still navy-family. */
  --panel: #16203354;
  --panel-deep: #1d2a4033;

  --white: #f7fafc;
  --mist: #9fb3cd;
  --mist-dim: #7488a4;
  --mist-deep: #46587a;

  --green: #2fd07a;
  --green-bright: #57e89a;
  --green-deep: #1a8f52;
  --green-wash: rgba(47, 208, 122, 0.12);
  --signal: #38bdf8;
  --caution: #f0b429;

  --rule: rgba(159, 179, 205, 0.16);
  --rule-bright: rgba(159, 179, 205, 0.3);
  --rule-panel: rgba(159, 179, 205, 0.14);
  --rule-panel-bright: rgba(159, 179, 205, 0.26);

  --font-display: 'Sora', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Familjen Grotesk', 'Helvetica Neue', Helvetica, sans-serif;
  --font-data: 'Martian Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Rounded cards, one step apart, so nesting reads as depth. */
  --radius: 18px;
  --radius-lg: 26px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  /* Soft shadow for lift, green glow for anything the accent owns. */
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 40px -24px rgba(3, 7, 14, 0.9);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.05), 0 40px 80px -40px rgba(3, 7, 14, 0.95);
  --glow: 0 0 0 1px rgba(47, 208, 122, 0.3), 0 18px 44px -20px rgba(47, 208, 122, 0.42);

  --shell: 1200px;
  --gutter: clamp(1.1rem, 4vw, 2.75rem);
  --ease: cubic-bezier(0.2, 0.7, 0.25, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Several components below set an explicit `display`, and are shown or hidden
   with the `hidden` attribute. Without this the attribute would lose. */
[hidden] {
  display: none !important;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.024em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
}

img,
iframe,
video {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--green);
  color: var(--navy-deep);
}

:focus-visible {
  outline: 2px solid var(--green-bright);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Atmosphere: fixed grain and a low green bloom. Both non-interactive and
   never inside a scrolling container, so they cost nothing to composite.
   -------------------------------------------------------------------------- */

.grain,
.bloom {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.grain {
  opacity: 0.2;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.bloom {
  background:
    radial-gradient(58rem 34rem at 78% -8%, rgba(47, 208, 122, 0.22), transparent 62%),
    radial-gradient(40rem 30rem at 4% 12%, rgba(56, 189, 248, 0.14), transparent 68%);
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

.etch {
  font-family: var(--font-data);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mist-dim);
  margin: 0;
}

.datum {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.section {
  position: relative;
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

.section__head {
  display: grid;
  gap: 0.9rem;
  max-width: 46rem;
  margin-bottom: clamp(2.2rem, 4vw, 3.4rem);
}

.section__index {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.section__index::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.18;
}

.section__title {
  font-size: clamp(1.85rem, 4.4vw, 3rem);
}

.lede {
  font-size: clamp(1.02rem, 1.6vw, 1.16rem);
  color: var(--mist);
  max-width: 44ch;
}

/* Panel sections lift a stretch of reading off the page without inverting it —
   the app is dark everywhere, so the website stays dark too. */
.on-panel {
  background: var(--panel);
  color: var(--white);
}

.on-panel .etch {
  color: var(--mist);
  opacity: 0.75;
}

.on-panel .lede,
.on-panel .prose {
  color: var(--mist);
}

.on-panel--deep {
  background: var(--panel-deep);
}

/* --------------------------------------------------------------------------
   Buttons and links
   -------------------------------------------------------------------------- */

.stoke,
.ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.22s var(--ease),
    background-color 0.22s var(--ease),
    border-color 0.22s var(--ease),
    box-shadow 0.22s var(--ease);
}

.stoke {
  background: var(--green);
  color: var(--navy-deep);
  box-shadow: var(--glow);
}

.stoke:hover {
  background: var(--green-bright);
  transform: translateY(-1px);
}

.stoke:active {
  transform: translateY(1px);
}

.ghost {
  border-color: var(--rule-bright);
  color: var(--white);
  background: transparent;
}

.ghost:hover {
  border-color: var(--green);
  background: var(--green-wash);
  transform: translateY(-1px);
}

.on-panel .ghost {
  color: var(--white);
  border-color: var(--rule-panel-bright);
}

.on-panel .ghost:hover {
  border-color: var(--green);
}

.textlink {
  color: var(--green-bright);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.on-panel .textlink {
  color: var(--green-bright);
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--navy-deep) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--rule);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--white);
}

.brand__mark {
  width: 1.7rem;
  height: 1.7rem;
  flex: none;
}

.brand__word {
  font-family: var(--font-data);
  font-size: 0.72rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  font-weight: 600;
}

.masthead__nav {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.9rem);
}

.masthead__link {
  font-size: 0.9rem;
  color: var(--mist);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.masthead__link:hover {
  color: var(--white);
}

.masthead__app {
  font-size: 0.86rem;
  color: var(--mist);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  white-space: nowrap;
  transition:
    border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.masthead__app strong {
  color: var(--white);
  font-weight: 600;
}

.masthead__app:hover {
  border-color: var(--green);
  color: var(--white);
}

@media (max-width: 860px) {
  .masthead__nav .masthead__link {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: clamp(2.6rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
}

.hero__grid {
  display: grid;
  gap: clamp(2.2rem, 5vw, 3.6rem);
  align-items: start;
}

@media (min-width: 1000px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(2.5rem, 4vw, 4.5rem);
  }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--rule-bright);
  border-radius: 999px;
  background: rgba(47, 208, 122, 0.08);
}

.hero__pip {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 0 3px rgba(242, 118, 47, 0.22);
}

.hero__title {
  margin-top: 1.5rem;
  font-size: clamp(2.55rem, 7vw, 4.9rem);
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 100;
}

.hero__brand {
  display: block;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.hero__claim {
  display: block;
  color: var(--green-bright);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 120;
}

.hero__dash {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.hero__sub {
  margin-top: 1.65rem;
  font-size: clamp(1.04rem, 1.7vw, 1.22rem);
  color: var(--mist);
  max-width: 46ch;
}

.hero__actions {
  margin-top: 2.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.hero__facts {
  margin: 2.6rem 0 0;
  padding: 1.35rem 0 0;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 1.15rem 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

.hero__facts div {
  display: grid;
  gap: 0.3rem;
}

.hero__facts dd {
  margin: 0;
  font-family: var(--font-data);
  font-size: 0.94rem;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   The counter instrument
   -------------------------------------------------------------------------- */

.plate {
  position: relative;
  background: linear-gradient(180deg, var(--navy-raised), var(--navy-deep));
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.plate::after {
  content: '';
  position: absolute;
  inset-inline: 12%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  opacity: 0.55;
}

.counter {
  padding: clamp(1.35rem, 2.6vw, 1.9rem);
}

@media (min-width: 1000px) {
  .counter {
    margin-top: 2.4rem;
  }
}

.counter__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.counter__figure {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.counter__value {
  font-family: var(--font-data);
  font-size: clamp(3rem, 8vw, 4.4rem);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.05em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

.counter__of {
  font-size: 0.95rem;
  color: var(--mist-dim);
  font-family: var(--font-data);
}

.counter__meter {
  margin-top: 1.15rem;
  height: 6px;
  border-radius: 999px;
  background: rgba(230, 240, 255, 0.09);
  overflow: hidden;
}

.counter__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green-deep), var(--green-bright));
  transition: width 1.1s var(--ease);
}

.counter__note {
  margin-top: 0.85rem;
  font-size: 0.88rem;
  color: var(--mist);
}

.counter__tiers {
  margin-top: 1.4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 0.75rem;
}

.tierline {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.88rem;
  color: var(--mist);
}

.tierline__badge {
  font-family: var(--font-data);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  padding: 0.22rem 0.45rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule-bright);
  color: var(--white);
}

.tierline--live .tierline__badge {
  border-color: var(--green);
  background: var(--green-wash);
  color: var(--green-bright);
}

.tierline__state {
  font-family: var(--font-data);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist-dim);
}

.tierline--live .tierline__state {
  color: var(--green-bright);
}

.countdown {
  margin-top: 1.4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  text-align: center;
}

.countdown__cell span {
  display: block;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  color: var(--white);
}

.countdown__cell small {
  font-family: var(--font-data);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist-dim);
}

/* Skeleton, held while the live figures land. */
.skeleton {
  color: transparent !important;
  background: linear-gradient(
    90deg,
    rgba(230, 240, 255, 0.07),
    rgba(230, 240, 255, 0.14),
    rgba(230, 240, 255, 0.07)
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: sweep 1.5s linear infinite;
}

@keyframes sweep {
  to {
    background-position: -200% 0;
  }
}

.is-stale {
  opacity: 0.55;
  transition: opacity 0.3s var(--ease);
}

/* --------------------------------------------------------------------------
   Offer tiers
   -------------------------------------------------------------------------- */

.tiers {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 900px) {
  .tiers {
    grid-template-columns: 1.08fr 0.92fr;
    align-items: start;
  }
  .tiers > :last-child {
    margin-top: 2.6rem;
  }
}

.tier {
  padding: clamp(1.4rem, 3vw, 2.1rem);
  border: 1px solid var(--rule-panel);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.42);
  display: grid;
  gap: 0.9rem;
}

.tier--headline {
  background: var(--navy);
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 24px 50px -28px rgba(3, 7, 14, 0.75);
}

.tier--headline .tier__body {
  color: var(--mist);
}

.tier__rate {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 9vw, 4.8rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 110;
}

.tier--headline .tier__rate {
  color: var(--green-bright);
}

.tier__rate sup {
  font-size: 0.36em;
  top: -1.3em;
  margin-left: 0.1em;
}

.tier__body {
  color: var(--mist);
  font-size: 0.98rem;
}

.tier__meta {
  margin: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.86rem;
}

.tier__meta div {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
}

.tier__meta dt {
  font-family: var(--font-data);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
  min-width: 7.5rem;
}

.tier__meta dd {
  margin: 0;
  font-family: var(--font-data);
  font-size: 0.82rem;
}

/* --------------------------------------------------------------------------
   Editorial prose
   -------------------------------------------------------------------------- */

.editorial {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 960px) {
  .editorial {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    align-items: start;
  }
}

.prose {
  display: grid;
  gap: 1.15rem;
  font-size: 1.04rem;
  max-width: 62ch;
}

.prose h3 {
  font-size: 1.35rem;
  margin-top: 0.9rem;
}

.pullquote {
  margin: 0;
  padding-left: 1.3rem;
  border-left: 2px solid var(--green);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-style: italic;
  line-height: 1.28;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
}

.pullquote footer {
  margin-top: 0.7rem;
  font-family: var(--font-data);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-style: normal;
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   Ledger: how this differs from other trackers
   -------------------------------------------------------------------------- */

.ledger {
  border-top: 1px solid var(--rule-panel-bright);
}

.ledger__row {
  display: grid;
  gap: 0.35rem 2rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--rule-panel);
  align-items: baseline;
}

@media (min-width: 820px) {
  .ledger__row {
    grid-template-columns: 13rem 1fr 1fr;
  }
}

.ledger__aspect {
  font-family: var(--font-data);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mist-deep);
}

.ledger__them,
.ledger__us {
  font-size: 0.99rem;
}

.ledger__them {
  color: var(--mist-dim);
}

.ledger__them::before,
.ledger__us::before {
  font-family: var(--font-data);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.3rem;
  opacity: 0.65;
}

.ledger__them::before {
  content: 'Most trackers';
}

.ledger__us::before {
  content: 'BurnCal AI';
  color: var(--green-deep);
  opacity: 1;
}

.ledger__us {
  color: var(--navy);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Feature bento — deliberately uneven
   -------------------------------------------------------------------------- */

.bento {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

@media (min-width: 760px) {
  .bento {
    grid-template-columns: repeat(6, 1fr);
  }
  .bento__cell:nth-child(1) {
    grid-column: span 4;
  }
  .bento__cell:nth-child(2) {
    grid-column: span 2;
  }
  .bento__cell:nth-child(3) {
    grid-column: span 2;
  }
  .bento__cell:nth-child(4) {
    grid-column: span 2;
  }
  .bento__cell:nth-child(5) {
    grid-column: span 2;
  }
  .bento__cell:nth-child(6) {
    grid-column: span 3;
  }
  .bento__cell:nth-child(7) {
    grid-column: span 3;
  }
  .bento__cell:nth-child(8) {
    grid-column: span 6;
  }
}

.bento__cell {
  background: var(--navy);
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  display: grid;
  gap: 0.6rem;
  align-content: start;
  transition: background-color 0.3s var(--ease);
}

.bento__cell:hover {
  background: var(--navy-raised);
}

.bento__icon {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--green-bright);
}

.bento__title {
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0;
}

.bento__body {
  font-size: 0.92rem;
  color: var(--mist);
  max-width: 44ch;
}

.bento__cell:nth-child(8) {
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1.2rem;
  align-items: center;
}

.bento__cell:nth-child(8) .bento__icon {
  grid-row: span 2;
}

/* --------------------------------------------------------------------------
   Phone frame
   The screenshots are the app's own screens, so they are never stretched,
   cropped or recoloured: the frame takes a phone's aspect ratio and the image
   is contained inside it. A screenshot from a differently shaped device letters
   itself against the frame's own surface rather than distorting.
   -------------------------------------------------------------------------- */

.phone {
  position: relative;
  width: 100%;
  max-width: 20rem;
  margin-inline: auto;
  padding: 0.55rem;
  border-radius: 2.4rem;
  background: linear-gradient(170deg, var(--navy-high), var(--navy-deep));
  border: 1px solid var(--rule-bright);
  box-shadow: var(--shadow-lg);
}

.phone::before {
  /* Speaker slot. Purely decorative, so it is hidden from assistive tech. */
  content: '';
  position: absolute;
  top: 1.05rem;
  left: 50%;
  translate: -50% 0;
  width: 3.4rem;
  height: 0.28rem;
  border-radius: var(--radius-pill);
  background: rgba(7, 12, 22, 0.85);
  z-index: 2;
}

.phone__screen {
  position: relative;
  aspect-ratio: 9 / 19.5;
  border-radius: 1.95rem;
  overflow: hidden;
  background: var(--navy-deep);
  display: grid;
  place-items: center;
}

.phone__screen img,
.phone__screen video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.phone--glow {
  box-shadow: var(--shadow-lg), 0 30px 90px -50px rgba(47, 208, 122, 0.55);
}

/* Composed empty state, used wherever the owner has not uploaded yet. */
.emptyframe {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.6rem;
  padding: 1.4rem;
  text-align: center;
  background:
    radial-gradient(18rem 14rem at 50% 38%, rgba(47, 208, 122, 0.12), transparent 70%),
    repeating-linear-gradient(-45deg, rgba(230, 240, 255, 0.03) 0 8px, transparent 8px 16px);
}

.emptyframe svg {
  width: 1.9rem;
  height: 1.9rem;
  margin-inline: auto;
  color: var(--mist-dim);
}

.emptyframe p {
  font-size: 0.85rem;
  color: var(--mist-dim);
  max-width: 24ch;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Vertical reels
   9:16 throughout. The frame adapts to the viewport but never crops the video:
   `object-fit: contain` inside a 9/16 box shows the whole frame, and a clip that
   is not exactly 9:16 sits letterboxed against the frame rather than stretched.
   -------------------------------------------------------------------------- */

.reels {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}

.reel {
  display: grid;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: center;
}

@media (min-width: 860px) {
  .reel {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  }

  .reel:nth-child(even) .reel__stage {
    order: 2;
  }
}

.reel__stage {
  position: relative;
  width: 100%;
  max-width: 20rem;
  margin-inline: auto;
  padding: 0.5rem;
  border-radius: 2.2rem;
  background: linear-gradient(170deg, var(--navy-high), var(--navy-deep));
  border: 1px solid var(--rule-bright);
  box-shadow: var(--shadow-lg);
}

.reel__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 1.8rem;
  overflow: hidden;
  background: var(--navy-deep);
}

.reel__frame video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--navy-deep);
}

.reel__body {
  display: grid;
  gap: 0.75rem;
}

.reel__title {
  font-size: clamp(1.4rem, 3vw, 2rem);
}

.reel__caption {
  font-size: 0.98rem;
  color: var(--mist);
  max-width: 46ch;
}

/* Says out loud what the autoplay rule is, rather than leaving people to
   wonder why a video is silent. */
.reel__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-data);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist-dim);
}

.reel__hint::before {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--green);
}

/* --------------------------------------------------------------------------
   Screenshot gallery
   A scroll-snap rail on every viewport, with real buttons that move it. The
   rail is focusable and arrow-key scrollable, so nothing here depends on a
   pointer or on hover.
   -------------------------------------------------------------------------- */

.gallery {
  display: grid;
  gap: 1.4rem;
}

.gallery__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 17rem);
  gap: clamp(1rem, 2.5vw, 1.8rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.25rem 0.25rem 1.2rem;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-bright) transparent;
}

.gallery__card {
  scroll-snap-align: center;
  display: grid;
  gap: 0.85rem;
  align-content: start;
}

.gallery__card .phone {
  max-width: 100%;
}

.gallery__label {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
}

.gallery__caption {
  font-size: 0.88rem;
  color: var(--mist);
}

.gallery__nav {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
}

.gallery__button {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule-bright);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.gallery__button:hover:not(:disabled) {
  border-color: var(--green);
  background: var(--green-wash);
}

.gallery__button:disabled {
  opacity: 0.35;
  cursor: default;
}

.gallery__button svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* --------------------------------------------------------------------------
   Feature rows
   -------------------------------------------------------------------------- */

.showcase {
  display: grid;
  gap: clamp(2.6rem, 6vw, 5rem);
}

.showrow {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: center;
}

@media (min-width: 860px) {
  .showrow {
    grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
  }

  .showrow--flip .showrow__art {
    order: -1;
  }
}

.showrow__body {
  display: grid;
  gap: 0.8rem;
}

.showrow__title {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
}

.showrow__caption {
  color: var(--mist);
  max-width: 48ch;
}

.showrow__points {
  display: grid;
  gap: 0.5rem;
  margin: 0.3rem 0 0;
  padding: 0;
  list-style: none;
}

.showrow__points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  font-size: 0.94rem;
  color: var(--mist);
}

.showrow__points li::before {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  margin-top: 0.55rem;
  border-radius: 50%;
  background: var(--green);
}

/* --------------------------------------------------------------------------
   Join form
   -------------------------------------------------------------------------- */

.join {
  display: grid;
  gap: clamp(2rem, 4vw, 3.2rem);
}

@media (min-width: 960px) {
  .join {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    align-items: start;
  }
}

.joinform {
  padding: clamp(1.4rem, 3vw, 2.1rem);
  display: grid;
  gap: 1rem;
}

.field {
  display: grid;
  gap: 0.45rem;
}

.field > label {
  font-family: var(--font-data);
  font-size: 0.63rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist-dim);
}

.slot {
  width: 100%;
  min-height: 2.95rem;
  padding: 0.7rem 0.9rem;
  background: rgba(13, 10, 8, 0.72);
  border: 1px solid var(--rule-bright);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  transition:
    border-color 0.2s var(--ease),
    background-color 0.2s var(--ease);
}

.slot::placeholder {
  color: var(--mist-dim);
}

.slot:hover {
  border-color: rgba(230, 240, 255, 0.3);
}

.slot:focus {
  outline: none;
  border-color: var(--green);
  background: rgba(13, 10, 8, 0.9);
}

.slot[aria-invalid='true'] {
  border-color: var(--caution);
}

.field__hint {
  font-size: 0.8rem;
  color: var(--mist-dim);
}

.formnote {
  font-size: 0.82rem;
  color: var(--mist-dim);
}

.formstatus {
  display: none;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule-bright);
  font-size: 0.92rem;
  align-items: start;
}

.formstatus[data-tone] {
  display: flex;
}

.formstatus[data-tone='ok'] {
  border-color: rgba(67, 112, 90, 0.6);
  background: rgba(67, 112, 90, 0.14);
}

.formstatus[data-tone='warn'] {
  border-color: rgba(169, 118, 42, 0.6);
  background: rgba(169, 118, 42, 0.13);
}

.formstatus[data-tone='bad'] {
  border-color: rgba(47, 208, 122, 0.6);
  background: var(--green-wash);
}

.formstatus svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  margin-top: 0.12rem;
}

button[data-busy='true'] {
  pointer-events: none;
  opacity: 0.72;
}

.checkline {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checkline li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  font-size: 0.96rem;
  color: var(--mist);
}

.checkline svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--green-bright);
  margin-top: 0.28rem;
  flex: none;
}

/* --------------------------------------------------------------------------
   Referral
   -------------------------------------------------------------------------- */

.referral {
  display: grid;
  gap: 1.1rem;
  padding: clamp(1.4rem, 3vw, 2rem);
}

.referral__code {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.referral__code output {
  font-family: var(--font-data);
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  letter-spacing: 0.08em;
  padding: 0.55rem 0.9rem;
  border: 1px dashed var(--rule-bright);
  border-radius: var(--radius-sm);
  color: var(--white);
}

.sharerow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.sharerow a,
.sharerow button {
  font-size: 0.86rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.9rem;
}

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

.faq {
  border-top: 1px solid var(--rule-panel-bright);
  max-width: 60rem;
}

.faq details {
  border-bottom: 1px solid var(--rule-panel);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding-block: 1.15rem;
  padding-right: 2.5rem;
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 500;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '';
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 0.72rem;
  height: 0.72rem;
  margin-top: -0.36rem;
  border-right: 1.5px solid var(--green-deep);
  border-bottom: 1.5px solid var(--green-deep);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(-135deg);
}

.faq__answer {
  padding-bottom: 1.3rem;
  max-width: 68ch;
  color: var(--mist);
  display: grid;
  gap: 0.8rem;
}

/* --------------------------------------------------------------------------
   Colophon
   -------------------------------------------------------------------------- */

.colophon {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 5vw, 3.8rem);
  background: var(--navy-deep);
}

.colophon__grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 820px) {
  .colophon__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.colophon h2 {
  font-size: 1.2rem;
}

.colophon ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.colophon a {
  font-size: 0.92rem;
  color: var(--mist);
  text-decoration: none;
}

.colophon a:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.colophon__fine {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--mist-dim);
}

/* --------------------------------------------------------------------------
   Legal / long-read pages
   -------------------------------------------------------------------------- */

.doc {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.doc__body {
  max-width: 64ch;
  display: grid;
  gap: 1.15rem;
  font-size: 1.02rem;
  color: var(--mist);
}

.doc__body h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  margin-top: 1.6rem;
  color: var(--white);
}

.doc__body h3 {
  font-size: 1.1rem;
  margin-top: 1rem;
  color: var(--white);
}

.doc__body ul,
.doc__body ol {
  margin: 0;
  padding-left: 1.3rem;
  display: grid;
  gap: 0.6rem;
}

.doc__body strong {
  color: var(--white);
}

.doc__toc {
  margin: 0 0 2rem;
  padding: 1.1rem 1.3rem;
  border-left: 2px solid var(--green);
  background: rgba(230, 240, 255, 0.03);
  font-size: 0.92rem;
}

/* --------------------------------------------------------------------------
   Owner dashboard
   -------------------------------------------------------------------------- */

.gate {
  max-width: 26rem;
  margin: clamp(3rem, 10vh, 7rem) auto;
  padding: clamp(1.5rem, 4vw, 2.2rem);
  display: grid;
  gap: 1rem;
}

.kpis {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.kpi {
  background: var(--navy-raised);
  padding: 1.1rem 1.2rem;
  display: grid;
  gap: 0.35rem;
}

.kpi strong {
  font-family: var(--font-data);
  font-size: 1.7rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.panel {
  margin-top: 1.6rem;
  padding: clamp(1.2rem, 2.6vw, 1.8rem);
  display: grid;
  gap: 1rem;
}

.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

table.data th,
table.data td {
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

table.data th {
  font-family: var(--font-data);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist-dim);
  background: var(--navy-deep);
  position: sticky;
  top: 0;
}

table.data td.mono {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}

.pill {
  font-family: var(--font-data);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-sm);
  border: 1px solid currentColor;
}

.pill--verified {
  color: var(--green-bright);
}

.pill--pending {
  color: var(--caution);
}

.slotform {
  display: grid;
  gap: 0.85rem;
  padding: 1.1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}

.slotform__row {
  display: grid;
  gap: 0.85rem;
}

@media (min-width: 720px) {
  .slotform__row {
    grid-template-columns: 1fr 1fr;
  }
}

.switch {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--mist);
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

.rise {
  animation: rise 0.75s var(--ease) both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

.stagger > * {
  animation: rise 0.7s var(--ease) both;
}

.stagger > *:nth-child(2) {
  animation-delay: 0.07s;
}
.stagger > *:nth-child(3) {
  animation-delay: 0.14s;
}
.stagger > *:nth-child(4) {
  animation-delay: 0.21s;
}
.stagger > *:nth-child(5) {
  animation-delay: 0.28s;
}
.stagger > *:nth-child(6) {
  animation-delay: 0.35s;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--green);
  color: var(--navy-deep);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
}

.skiplink:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* --------------------------------------------------------------------------
   Sticky mobile call to action
   Phone only, and only once the hero form has scrolled away — a bar that
   duplicates a control already on screen is just clutter.
   -------------------------------------------------------------------------- */

.stickycta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 45;
  display: none;
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--navy-deep) 92%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--rule);
  transform: translateY(110%);
  transition: transform 0.3s var(--ease);
}

.stickycta.is-shown {
  transform: none;
}

.stickycta .stoke {
  width: 100%;
}

@media (max-width: 720px) {
  .stickycta {
    display: block;
  }

  /* Keep the last of the page clear of the bar. */
  body.has-stickycta .colophon__fine {
    padding-bottom: 4.5rem;
  }
}

/* --------------------------------------------------------------------------
   Success screen
   Shown in place of the form after a registration. Deliberately does not say
   the place is confirmed — it says what to do next.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Confirmation card
   Shown in place of the signup form once a registration is recorded. It is
   deliberately small: a heading, one sentence, two controls and a reminder.
   No illustration — a confirmation is read, not looked at, and a large graphic
   here only pushes the instructions off a phone screen.
   -------------------------------------------------------------------------- */

.confirmcard {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  padding: clamp(1.4rem, 4vw, 2rem);
  text-align: center;
}

.confirmcard__title {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
}

.confirmcard__title:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
}

.confirmcard__body {
  margin: 0;
  max-width: 38ch;
  color: var(--mist);
  font-size: 0.98rem;
  line-height: 1.55;
}

.confirmcard__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
}

.confirmcard__note {
  margin: 0;
  font-size: 0.82rem;
  color: var(--mist-dim);
}

/* While the confirmation is up, the supporting column has stood down, so the
   grid stops reserving a second track and the card sits centred. */
.join[data-confirming='true'] {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

/* --------------------------------------------------------------------------
   Status page
   -------------------------------------------------------------------------- */

.statusgrid {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
}

.statusgrid div {
  background: var(--navy-raised);
  padding: 1.1rem 1.2rem;
  display: grid;
  gap: 0.4rem;
}

.statusgrid dd {
  margin: 0;
  display: grid;
  gap: 0.25rem;
}

.statusgrid strong {
  font-family: var(--font-data);
  font-size: 1.55rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.statusgrid small {
  font-size: 0.8rem;
  color: var(--mist);
}

.codebox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  border: 1px dashed var(--rule-bright);
  border-radius: var(--radius-sm);
  background: var(--navy-deep);
}

.codebox code {
  font-family: var(--font-data);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: var(--green-bright);
  word-break: break-all;
}

.milestones {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.milestone {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  color: var(--mist);
}

.milestone[data-reached='true'] {
  border-color: var(--green);
  background: var(--green-wash);
  color: var(--white);
}

.milestone__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  border: 1px solid var(--rule-bright);
}

.milestone[data-reached='true'] .milestone__dot {
  background: var(--green);
  border-color: var(--green);
}

.milestone__at {
  font-family: var(--font-data);
  font-size: 0.7rem;
  color: var(--mist-dim);
}

/* --------------------------------------------------------------------------
   Owner media manager
   -------------------------------------------------------------------------- */

.mediagrid {
  display: grid;
  gap: 1.1rem;
}

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

.mediacard {
  display: grid;
  gap: 0.85rem;
  padding: 1.1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--navy-raised);
}

.mediacard__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
}

.assetline {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.assetline small {
  display: block;
  color: var(--mist-dim);
  font-family: var(--font-data);
  font-size: 0.65rem;
}

.assetline__actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.tinybutton {
  min-height: 2rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule-bright);
  background: transparent;
  color: var(--white);
  cursor: pointer;
}

.tinybutton:hover {
  border-color: var(--green);
  background: var(--green-wash);
}

.filepick {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--mist);
}

.filepick input[type='file'] {
  font: inherit;
  font-size: 0.78rem;
  color: var(--mist);
  max-width: 100%;
}

.meter {
  height: 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--navy-deep);
  border: 1px solid var(--rule);
  overflow: hidden;
}

.meter span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--green);
  transition: width 0.25s var(--ease);
}

.eventlog {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 22rem;
  overflow-y: auto;
  font-family: var(--font-data);
  font-size: 0.7rem;
}

.eventlog li {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 0.6rem;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--rule);
  color: var(--mist);
}

.eventlog li b {
  color: var(--white);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   App gate
   Until the application opens, every control that would link across renders as
   a "Coming Soon" stand-in. Both states are authored in the markup; only one is
   ever showing. A stand-in is a <button>, so it needs the button defaults
   flattened to match the link it replaces.
   -------------------------------------------------------------------------- */

/* A span wrapper must not become a layout box of its own, or it would break the
   flex gaps of the nav and hero rows it sits in. The footer variant is a real
   paragraph and keeps its own flow. */
span[data-app-gate] {
  display: contents;
}

button[data-app-soon] {
  font: inherit;
  background: none;
  cursor: pointer;
}

button.masthead__app[data-app-soon] {
  font-size: 0.86rem;
  color: var(--mist);
}

/* A gated mention inside a sentence: the address still reads as the address,
   it simply is not a link yet. */
.appsoon-text {
  color: var(--white);
  font-weight: 500;
}

.appmodal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(4, 8, 16, 0.72);
  backdrop-filter: blur(3px);
  animation: appmodal-in 0.18s var(--ease) both;
}

.appmodal__box {
  width: 100%;
  max-width: 26rem;
  display: grid;
  gap: 0.85rem;
  padding: clamp(1.3rem, 4vw, 1.8rem);
  border: 1px solid var(--rule-bright);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--navy-raised), var(--navy-deep));
  box-shadow: var(--shadow-lg);
  text-align: center;
  justify-items: center;
}

.appmodal__title {
  font-size: clamp(1.1rem, 3vw, 1.35rem);
}

.appmodal__body {
  margin: 0;
  max-width: 34ch;
  color: var(--mist);
  font-size: 0.95rem;
  line-height: 1.55;
}

.appmodal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
}

@keyframes appmodal-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Stops the page scrolling behind the dialog. */
.is-dialogged body {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .gallery__track {
    scroll-behavior: auto;
  }
}