/* Medyum — medyumapp.com
   Palette is taken from the app itself (near-black surfaces, amber accent) so
   the real screenshots sit in the page instead of being pasted onto it. The
   previous violet/plum scheme made every phone look like a foreign object. */

:root {
  --bg: #0b0b0d;
  --surface: #141417;
  --surface-2: #1b1b20;
  --ink: #f6f4f1;
  --muted: #a7a2ad;
  --gold: #ffc107;
  --gold-soft: #ffe08a;
  --plum: #6b3fa0;
  --rose: #b4636f;
  --line: rgba(255, 255, 255, 0.1);
  --radius: 22px;
  --shell: min(1140px, calc(100% - 40px));
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* The sticky header would otherwise cover whatever an anchor jumps to. */
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font: 16px/1.65 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Two soft colour fields, drawn from the artwork inside the app. Fixed and
   behind everything, so they read as atmosphere rather than as shapes. */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.22;
  pointer-events: none;
}
body::before { width: 46vw; height: 46vw; top: -22vw; left: -14vw; background: var(--plum); }
body::after  { width: 40vw; height: 40vw; right: -18vw; bottom: -20vw; background: var(--rose); }

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

.shell { width: var(--shell); margin-inline: auto; }

h1, h2, .serif {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

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

.topbar-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
}

/* The rule appears once the page has moved, so the hero starts seamless.
   Done with a scroll-driven animation rather than a scroll listener because the
   site's CSP is script-src 'none' — there is no JavaScript on these pages. */
@supports (animation-timeline: scroll()) {
  .topbar-wrap {
    animation: topbar-stick linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 40px;
  }
  @keyframes topbar-stick {
    to { border-bottom-color: var(--line); }
  }
}

.topbar {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* The app's own gold wordmark, so the site and the app read as one product.
   It is transparent artwork — the page background shows through. */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  /* Never let the wordmark push the nav off the row on a narrow screen. */
  flex: 0 1 auto;
  min-width: 0;
}
/* The file is 240px wide for 3x displays but the mark is drawn at 90x30. The
   <img> carries those layout dimensions as its attributes, so the header is
   the right size even before this stylesheet arrives — a stale cached CSS was
   otherwise enough to render the logo at its full 240px intrinsic width. */
.brand img {
  width: auto;
  height: 30px;
  max-width: 100%;
}
.footer .brand img { height: 26px; }

.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
  color: var(--muted);
}
.nav a { text-decoration: none; transition: color 0.15s; }
.nav a:hover { color: var(--ink); }
.lang { color: var(--gold) !important; }

.button,
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: linear-gradient(135deg, var(--gold-soft), #e0a020);
  color: #241a05 !important;
  border: 0;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(224, 160, 32, 0.18);
  transition: transform 0.15s, box-shadow 0.15s;
}
.button:hover,
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(224, 160, 32, 0.26);
}
.nav-cta { padding: 10px 17px; font-size: 14px; }
.button { padding: 15px 24px; }

.button-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.button-ghost:hover { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.04); }

/* ---------- store badges ---------- */

.store-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 20px 11px 17px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.store-badge:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.09);
  transform: translateY(-1px);
}
.store-badge svg { flex: none; width: 26px; height: 26px; fill: currentColor; }
.store-badge span { display: block; line-height: 1.2; }
.store-badge .store-badge-small {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.store-badge .store-badge-name { font-size: 17px; font-weight: 700; }

/* ---------- coming-soon dialog ----------
   Driven by :target, not JavaScript: the badges link to #coming-soon and the
   close control links back to #. The page has no script budget at all under
   its CSP, and this keeps the interaction working with the policy intact. */

.coming-soon {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 4, 6, 0.72);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s, visibility 0.22s;
}
.coming-soon:target { opacity: 1; visibility: visible; }

.coming-soon-panel {
  position: relative;
  width: min(420px, 100%);
  padding: 34px 30px 30px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 80% 0%, rgba(255, 193, 7, 0.14), transparent 60%),
    var(--surface);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  text-align: center;
  transform: translateY(12px) scale(0.97);
  transition: transform 0.22s;
}
.coming-soon:target .coming-soon-panel { transform: none; }

.coming-soon-panel h2 { margin: 0 0 10px; font-size: 27px; }
.coming-soon-panel p { margin: 0 0 22px; color: var(--muted); font-size: 15px; }

/* Sits behind the panel and covers the viewport, so a click anywhere outside
   the panel dismisses the dialog. */
.coming-soon-dismiss {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.coming-soon-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.coming-soon-close:hover { background: rgba(255, 255, 255, 0.06); }

/* ---------- phone frame ----------
   The screenshots are raw 1280x2856 device captures, status bar included. The
   frame only supplies the bezel; the aspect-ratio is declared so the image
   reserves its space before it loads and nothing shifts. */

.phone {
  position: relative;
  width: 100%;
  padding: 3.1%;
  border-radius: 12% / 5.4%;
  background:
    linear-gradient(105deg, rgba(255,255,255,.28), transparent 7% 92%, rgba(255,255,255,.18)),
    linear-gradient(160deg, #4a4a52, #0b0b0e 38%, #28282e 72%, #09090b);
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 0 0 3px rgba(0, 0, 0, 0.72);
  isolation: isolate;
}
/* Dynamic Island. Its geometry is proportional to the frame, so it remains
   convincing at every responsive phone size. */
.phone::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 2.05%;
  left: 35%;
  width: 30%;
  aspect-ratio: 3.25 / 1;
  border-radius: 999px;
  background: #050506;
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.45);
}
/* Recessed mute and volume controls on the left rail. */
.phone::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 15%;
  left: -1.35%;
  width: 1.7%;
  height: 25%;
  border-radius: 999px 0 0 999px;
  background: linear-gradient(
    to bottom,
    #5e5e66 0 12%, transparent 12% 28%,
    #55555d 28% 56%, transparent 56% 67%,
    #55555d 67% 95%, transparent 95%
  );
  filter: drop-shadow(-1px 1px 1px rgba(0,0,0,.45));
}
.phone img {
  width: 100%;
  /* Required. The width/height attributes on the <img> become presentational
     hints, and an explicit height beats aspect-ratio — without this the frames
     render at the capture's full 2856px height. */
  height: auto;
  aspect-ratio: 1280 / 2856;
  border-radius: 10% / 4.8%;
  background: #111;
}

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

.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 48px;
  /* Kept deliberately short. The phone column sets the hero's height, so a
     larger frame or more padding pushes the headline below the fold on a
     laptop — which is exactly what happened at 300px wide. */
  padding: 40px 0 72px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 193, 7, 0.28);
  border-radius: 999px;
  background: rgba(255, 193, 7, 0.07);
  color: var(--gold-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.hero h1 {
  max-width: 620px;
  margin: 20px 0 20px;
  font-size: clamp(42px, 5.2vw, 66px);
  line-height: 1;
}

.hero-copy {
  max-width: 540px;
  margin: 0;
  color: var(--muted);
  font-size: 18px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.store-note {
  max-width: 440px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* Two phones, the back one turned slightly so the hero reads as depth rather
   than as a single flat frame. */
.hero-shot {
  position: relative;
  justify-self: end;
  width: min(254px, 68vw);
  /* Room to the right for the tilted back phone, which sticks out past this
     column and was being clipped by the viewport edge. */
  margin-right: clamp(0px, 9vw, 128px);
}
.hero-shot .phone.front { position: relative; z-index: 2; }
.hero-shot .phone.back {
  position: absolute;
  z-index: 1;
  top: 9%;
  left: 40%;
  width: 84%;
  transform: rotate(6deg);
  opacity: 0.8;
}
/* The glow behind the phones; sized off the frame so it tracks any resize. */
.hero-shot::before {
  content: "";
  position: absolute;
  inset: -18% -30%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, rgba(255, 193, 7, 0.2), transparent 62%);
  filter: blur(20px);
}

/* ---------- statement strip ---------- */

.statement {
  margin: 0;
  padding: 26px 20px;
  text-align: center;
  border-block: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  color: #e2dcea;
  font: 21px/1.35 Georgia, serif;
}

/* ---------- floating reviews ----------
   Two rows drifting in opposite directions. The track holds the same cards
   twice and travels exactly -50%, so the loop closes on itself with no visible
   jump. Cards are duplicated in the markup rather than cloned in script, since
   the page runs no JavaScript. */

.reviews {
  padding: 74px 0 30px;
  /* The rows are wider than the page on purpose; this stops that from
     producing a horizontal scrollbar on the document. */
  overflow: hidden;
}

.reviews-head { text-align: center; margin-bottom: 40px; }
.reviews-head .section-title { margin-inline: auto; }

.review-row {
  display: flex;
  width: max-content;
  gap: 18px;
  margin-bottom: 18px;
  /* Fades the cards out at both edges so they drift in and out of the page
     rather than being chopped off by it. The prefix is for iOS Safari before
     15.4, which is a real share of the phones this page will open on. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.review-card {
  flex: 0 0 auto;
  width: 330px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
}
.review-card p {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.6;
  color: #e6e1ee;
}
.review-author { display: flex; align-items: center; gap: 11px; }
.review-avatar {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--gold-soft), #d99a1f);
  color: #241a05;
  font-weight: 800;
  font-size: 14px;
}
/* Both are spans inside one wrapper, so they need to be told to stack —
   otherwise the name and the stars run together on a single line. */
.review-name { display: block; font-weight: 700; font-size: 14px; }
.review-stars {
  display: block;
  margin-top: 2px;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.1em;
}

@media (prefers-reduced-motion: no-preference) {
  .review-row {
    animation: review-drift 46s linear infinite;
  }
  .review-row.reverse {
    animation-duration: 58s;
    animation-direction: reverse;
  }
  /* Let a visitor stop a card to actually read it. */
  .reviews:hover .review-row { animation-play-state: paused; }
  @keyframes review-drift {
    to { transform: translateX(-50%); }
  }
}

/* Without motion the rows would sit frozen at their start, showing the same
   cards twice; scrolling by hand is the honest fallback. */
@media (prefers-reduced-motion: reduce) {
  .reviews { overflow-x: auto; }
  .review-row { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- alternating feature rows ---------- */

.showcase { padding: 104px 0 40px; }

.kicker {
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.section-title {
  max-width: 720px;
  margin: 12px 0 0;
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.03;
}

.section-lede {
  max-width: 620px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 17px;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
  padding: 74px 0;
}
/* Every other row puts the phone on the left without reordering the markup,
   so the reading order stays copy-then-image for a screen reader. */
.row:nth-child(even) .row-shot { order: -1; }

.row-shot { width: min(290px, 70vw); margin-inline: auto; }

.row h2 { margin: 14px 0 14px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.05; }
.row p { margin: 0; color: var(--muted); font-size: 17px; }

.row-list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
  color: var(--muted);
  font-size: 15px;
}
.row-list li { display: flex; gap: 11px; }
.row-list li::before {
  content: "✦";
  color: var(--gold);
  flex: none;
}

/* ---------- gallery ---------- */

.gallery { padding: 40px 0 96px; }

.gallery-strip {
  display: flex;
  gap: 18px;
  margin-top: 34px;
  padding-bottom: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.gallery-strip figure {
  flex: 0 0 auto;
  width: 208px;
  margin: 0;
  scroll-snap-align: center;
}
.gallery-strip figcaption {
  margin-top: 13px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

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

.cta {
  margin: 0 auto 92px;
  padding: clamp(36px, 6vw, 62px) clamp(24px, 5vw, 56px);
  border: 1px solid var(--line);
  border-radius: 30px;
  background:
    radial-gradient(circle at 78% 12%, rgba(255, 193, 7, 0.12), transparent 58%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  text-align: center;
}
.cta h2 { margin: 0 0 14px; font-size: clamp(30px, 4vw, 46px); }
.cta p { max-width: 520px; margin: 0 auto 26px; color: var(--muted); }

.disclaimer {
  margin: 0 auto 84px;
  max-width: 860px;
  padding: 20px 24px;
  border: 1px solid rgba(255, 193, 7, 0.28);
  border-radius: 18px;
  background: rgba(255, 193, 7, 0.05);
  color: #e6e0ee;
  font-size: 15px;
}
.disclaimer strong { color: var(--gold-soft); }

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

.footer { padding: 46px 0 30px; color: var(--muted); font-size: 14px; }
.footer-grid { display: flex; justify-content: space-between; gap: 30px; padding-bottom: 36px; }
.footer p { max-width: 300px; }
.footer-links { display: flex; gap: 18px; align-content: flex-start; flex-wrap: wrap; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--ink); }
.fine { padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; }

/* ---------- legal pages ---------- */

.legal { max-width: 820px; padding: 40px 0 90px; }
.legal-nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 36px;
  color: var(--gold);
  font-size: 14px;
}
.legal-nav a { text-decoration: none; }
.legal-nav a:hover { text-decoration: underline; }
.legal-note {
  padding: 18px 20px;
  margin: 20px 0;
  border: 1px solid rgba(255, 193, 7, 0.28);
  border-radius: 16px;
  background: rgba(255, 193, 7, 0.05);
}
.legal-note strong { color: var(--gold-soft); }
.legal hr { margin: 64px 0; border: 0; border-top: 1px solid var(--line); }
.legal-footer {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
.legal h1 { font-size: clamp(34px, 5vw, 50px); margin: 0 0 10px; }
.legal h2 { margin: 40px 0 12px; font-size: 23px; }
.legal h3 { margin: 26px 0 8px; font-size: 17px; }
.legal p, .legal li { color: #ded8e6; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal .updated { color: var(--muted); font-size: 14px; }
.legal table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.legal th, .legal td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal th { background: rgba(255, 255, 255, 0.04); }
.legal .table-scroll { overflow-x: auto; }
.text-link { color: var(--gold); }

/* ---------- scroll-driven reveals ----------
   Progressive enhancement: without support the content is simply visible, and
   the whole block is skipped when the visitor has asked for less motion. */

@media (prefers-reduced-motion: no-preference) {

  /* The hero is above the fold, so it has nothing to scroll into — it plays
     once on load instead, each part a beat behind the one before it. */
  .hero > div > * {
    animation: rise-in 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .hero > div > .eyebrow      { animation-delay: 0.05s; }
  .hero > div > h1            { animation-delay: 0.13s; }
  .hero > div > .hero-copy    { animation-delay: 0.21s; }
  .hero > div > .hero-actions,
  .hero > div > .store-buttons { animation-delay: 0.29s; }
  .hero > div > .store-note   { animation-delay: 0.37s; }
  .hero-shot {
    animation: hero-shot-in 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s both;
  }

  @keyframes rise-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes hero-shot-in {
    from { opacity: 0; transform: translateY(34px) scale(0.97); }
    to { opacity: 1; transform: none; }
  }

  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 26%;
    }
    @keyframes reveal-in {
      from { opacity: 0; transform: translateY(26px); }
      to { opacity: 1; transform: none; }
    }

    /* Feature rows slide in from the side each half actually sits on, so the
       motion agrees with the layout instead of fighting it. Both halves are
       driven by the row's own timeline, which keeps them in step. */
    .row > div:not(.row-shot) {
      animation: slide-from-left linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 30%;
    }
    .row > .row-shot {
      animation: slide-from-right linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 32%;
    }
    /* Even rows put the phone on the left, so the directions swap with them. */
    .row:nth-child(even) > div:not(.row-shot) { animation-name: slide-from-right; }
    .row:nth-child(even) > .row-shot { animation-name: slide-from-left; }

    @keyframes slide-from-left {
      from { opacity: 0; transform: translateX(-52px); }
      to { opacity: 1; transform: none; }
    }
    @keyframes slide-from-right {
      from { opacity: 0; transform: translateX(52px); }
      to { opacity: 1; transform: none; }
    }

    /* Gallery frames rise as the strip arrives, each slightly after the last. */
    .gallery-strip figure {
      animation: rise-in-soft linear both;
      animation-timeline: view(block);
      animation-range: entry 10% cover 34%;
    }
    .gallery-strip figure:nth-child(2) { animation-range: entry 13% cover 38%; }
    .gallery-strip figure:nth-child(3) { animation-range: entry 16% cover 42%; }
    .gallery-strip figure:nth-child(4) { animation-range: entry 19% cover 46%; }
    .gallery-strip figure:nth-child(5) { animation-range: entry 22% cover 50%; }

    @keyframes rise-in-soft {
      from { opacity: 0; transform: translateY(30px) scale(0.97); }
      to { opacity: 1; transform: none; }
    }
  }
}

/* On one column the rows stack, so a horizontal slide would send content off
   the side of a phone. They rise instead. */
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  @supports (animation-timeline: view()) {
    .row > div:not(.row-shot),
    .row > .row-shot,
    .row:nth-child(even) > div:not(.row-shot),
    .row:nth-child(even) > .row-shot {
      animation-name: reveal-in;
    }
  }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 8px; padding: 44px 0 72px; text-align: center; }
  .hero h1, .hero-copy, .store-note { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-shot { justify-self: center; margin: 34px auto 0; }
  /* The tilted back phone hangs 16px past the viewport here and adds nothing
     to a single-column hero — one clean frame reads better. */
  .hero-shot .phone.back { display: none; }
  .hero-shot::before { inset: -14% -18%; }
  .row { grid-template-columns: 1fr; gap: 34px; padding: 56px 0; text-align: center; }
  /* On one column the phone always leads — the copy reads better underneath it. */
  .row .row-shot { order: -1; }
  .row-list { justify-items: center; text-align: left; max-width: 380px; margin-inline: auto; }
  .showcase { padding: 72px 0 20px; }
}

@media (max-width: 720px) {
  :root { --shell: min(100% - 32px, 1140px); }
  .topbar { height: 66px; }
  .nav a:not(.nav-cta):not(.lang) { display: none; }
  .statement { font-size: 19px; }
  .footer-grid { display: block; }
  .footer-links { margin-top: 24px; }
}