/* HabitFlame site: one stylesheet for the landing, the guides and the policy
   pages. Dark only, like the app, which opens dark and never follows the
   system. One family, one accent, rows and hairlines. The palette is the
   app's own; docs/superpowers/specs/2026-10-16-app-colours-depth-motion.md
   gives the source of every value. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-opsz-wght-latin.woff2") format("woff2");
}

/* Arial resized to Bricolage's text cut, so the swap does not move the page. */
@font-face {
  font-family: "Bricolage Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 106.65%;
  ascent-override: 87.2%;
  descent-override: 25.32%;
  line-gap-override: 0%;
}

:root {
  color-scheme: dark;
  /* iOS dark system colours, as the app draws them. */
  --ground: #000000;
  --surface: #1C1C1E;
  --surface-2: #2C2C2E;
  --ink: #FFFFFF;
  --body: #D3D3DC;
  --muted: #A2A2A9;
  --line: rgba(84, 84, 88, 0.65);
  --line-strong: rgba(235, 235, 245, 0.3);
  /* The app's themeOrange, for marks that carry no text, and the same hue
     lifted until black ink on it reaches APCA Lc 75, for text and buttons. */
  --flame: #E67E00;
  --ember: #FFBD6C;
  --ember-hover: #FFCA8A;
  --on-ember: #000000;

  --font: "Bricolage Grotesque", "Bricolage Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-small: 0.9375rem;
  --fs-body: clamp(1rem, 0.974rem + 0.11vw, 1.0625rem);
  --fs-lede: clamp(1.125rem, 1.073rem + 0.221vw, 1.25rem);
  --fs-h2: clamp(1.75rem, 1.439rem + 1.326vw, 2.5rem);
  --fs-h1: clamp(2.125rem, 1.555rem + 2.431vw, 3.5rem);
  --measure-body: 30em;
  --measure-lede: 28em;
  --measure-h1: 12em;
  --section: clamp(80px, 63.4px + 4.42vw, 120px);
  --hero-top: clamp(32px, 18.7px + 3.54vw, 64px);
  --max-width: 1120px;
  --gutter: clamp(20px, 15px + 1.33vw, 32px);
  --cols: minmax(0, 7fr) minmax(0, 5fr);
  --split: minmax(0, 5fr) minmax(0, 7fr);
  --col-gap: 64px;
  --phone-shot: clamp(240px, 215px + 6.63vw, 300px);
}

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

* {
  margin: 0;
  padding: 0;
}

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

body {
  background: var(--ground);
  color: var(--body);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
dt {
  color: var(--ink);
  font-weight: 700;
  text-wrap: balance;
}

p,
li,
dd {
  text-wrap: pretty;
}

a {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-color: var(--ember);
}

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 10;
  transform: translateY(-100%);
  padding: 12px 16px;
  border-radius: 0 0 8px 8px;
  background: var(--ember);
  color: var(--on-ember);
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
}

.skip:focus {
  transform: translateY(0);
}

.skip:hover {
  background: var(--ember-hover);
  color: var(--on-ember);
}

/* ---- Frame ------------------------------------------------------------ */

.top,
main,
.foot {
  width: 100%;
  max-width: calc(var(--max-width) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.top-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.top-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 12px;
  color: var(--body);
  font-size: var(--fs-small);
  text-decoration: none;
  white-space: nowrap;
}

.top-links a:hover {
  color: var(--ink);
}

.top-links .store-link {
  margin-left: 8px;
  padding-inline: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--ink);
}

.top-links .store-link:hover {
  border-color: var(--ink);
}

/* ---- Buttons ---------------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

.store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 12px;
  background: var(--ember);
  color: var(--on-ember);
  font-weight: 700;
  text-decoration: none;
}

.store:hover {
  background: var(--ember-hover);
  color: var(--on-ember);
}

.share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.share:hover {
  border-color: var(--ink);
}

/* Buttons answer a hover with a 1px lift and a press with a small give.
   Text links do not move. */
.store,
.share,
.top-links .store-link {
  transition: transform 0.16s ease-out, background-color 0.16s ease-out, border-color 0.16s ease-out;
}

.store:hover,
.share:hover,
.top-links .store-link:hover {
  transform: translateY(-1px);
}

.store:active,
.share:active,
.top-links .store-link:active {
  transform: translateY(0) scale(0.98);
}

.store-note {
  margin-top: 16px;
  color: var(--muted);
  font-size: var(--fs-small);
}

/* ---- Type ------------------------------------------------------------- */

h1 {
  max-width: var(--measure-h1);
  font-size: var(--fs-h1);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

h2 {
  max-width: 18em;
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

h3,
dt {
  font-size: var(--fs-lede);
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.lede,
.deck {
  max-width: var(--measure-lede);
  margin-top: 24px;
  font-size: var(--fs-lede);
  line-height: 1.45;
}

.section-intro {
  max-width: var(--measure-body);
  margin-top: 16px;
}

/* ---- Landing: hero ---------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: var(--cols);
  column-gap: var(--col-gap);
  align-items: end;
  padding-top: var(--hero-top);
  border-bottom: 1px solid var(--line);
}

.hero-copy {
  align-self: center;
  padding-block: 24px 72px;
}

/* The hero is one scene in three planes: the app's year grid behind, the
   Partners screen, and Jordan's reaction lifted out of that screen toward
   the reader. All three stand on the hero's bottom hairline: the
   perspective origin and every transform origin sit on it, and the scene is
   clipped there. The script sets --p, the scroll position through the hero
   (0 at the top, 1 at the rest pose), and --tx and --ty, the pointer tilt.
   Sizes inside the screen are shares of the screenshot, so the lifted row
   matches its slot to the pixel. */
.hero-shot {
  --shot: var(--phone-shot);
  --screen: calc(var(--shot) - 16px);
  --card-r: calc(var(--screen) * 0.0578);
  --headroom: 136px;
  --eye-x: calc(100% - var(--shot) / 2);
  --scene-eye-x: calc(100% - 16px - var(--shot) / 2);
  position: relative;
  display: grid;
  align-self: end;
  container-type: inline-size;
}

/* The scene clips on every side: at the hairline below, and 16px out into
   the gutter at the sides and the headroom above, so a tilted edge is never
   cut and nothing in the scene can widen the page. */
.scene {
  --p: 0;
  --tx: 0deg;
  --ty: 0deg;
  margin: calc(-1 * var(--headroom)) -16px 0;
  padding: var(--headroom) 16px 0;
  perspective: 1100px;
  perspective-origin: var(--scene-eye-x) 100%;
  overflow: clip;
}

.stage {
  position: relative;
  display: grid;
  justify-items: end;
  transform-style: preserve-3d;
  transform-origin: var(--eye-x) 100%;
  transform: rotateX(var(--tx)) rotateY(var(--ty));
}

/* Back plane: the app's year grid (YearGridView), one band per habit, a
   column per week and a row per day, cells and gaps in the app's 12 to 3
   ratio. 20 weeks span the column: 20 cells and 19 gaps of a quarter cell
   make 24.75 cells. It sits 180px behind the phone and is scaled back up by
   (1100 + 180) / 1100, so it still spans the column. */
.field {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  row-gap: calc(100cqi / 24.75);
  transform-origin: var(--eye-x) 100%;
  transform: translate3d(0, calc(28px * var(--p)), -180px) scale(1.1636);
  will-change: transform;
}

.habit {
  display: grid;
  grid-template-rows: repeat(7, auto);
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: calc(100cqi / 99);
}

/* As the app draws a day, kept in the app's proportions but at the
   strength of something far behind: a missed day is the empty cell, days
   before the habit existed and the future are fainter, done days are the
   habit colour at four steps, and today carries the app's stroke. */
.field i {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--surface);
  opacity: 0.5;
}

.field .b {
  opacity: 0.25;
}

.field .f {
  opacity: 0.16;
}

.field .l1,
.field .l2,
.field .l3,
.field .l4,
.field .t {
  background: var(--flame);
}

.field .l1 {
  opacity: 0.09;
}

.field .l2 {
  opacity: 0.15;
}

.field .l3 {
  opacity: 0.21;
}

.field .l4,
.field .t {
  opacity: 0.3;
}

.field .t {
  outline: 1px solid var(--ink);
  outline-offset: -1px;
}

/* Subject plane: the phone, turned toward the copy and leaning back; it
   straightens as the hero scrolls away. */
.phone {
  position: relative;
  width: var(--shot);
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  transform: rotateY(calc(18deg - 14deg * var(--p))) rotateX(calc(8deg - 7deg * var(--p)));
  box-shadow: -28px 20px 44px rgba(0, 0, 0, 0.85);
  will-change: transform;
}

.device {
  padding: 7px 7px 0;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: calc(var(--screen) * 0.125 + 8px) calc(var(--screen) * 0.125 + 8px) 0 0;
  background: var(--surface-2);
}

.screen {
  position: relative;
  transform-style: preserve-3d;
}

.screen > img {
  width: 100%;
  border-radius: calc(var(--screen) * 0.125) calc(var(--screen) * 0.125) 0 0;
}

/* "Jordan sent a flame for Morning Run": x 41 to 859 and y 575 to 716 of
   the 900 by 1211 screenshot. The socket is the slot it leaves in the list;
   the lift is the row itself, cut from the same image. */
.socket,
.lift {
  position: absolute;
  top: 47.481%;
  left: 4.556%;
  width: 90.889%;
  height: 11.643%;
}

.socket {
  border-radius: var(--card-r) var(--card-r) 0 0;
  background: var(--ground);
}

/* Foreground plane: the row, lifted toward the reader. */
.lift {
  transform: translateZ(calc(44px + 16px * var(--p)));
  will-change: transform;
}

.lift-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--card-r);
  box-shadow: -8px 16px 24px rgba(0, 0, 0, 0.7);
}

.lift-card > img {
  position: absolute;
  top: -407.8%;
  left: -5.0122%;
  width: 110.0244%;
  max-width: none;
}

.ring {
  position: absolute;
  inset: -5px;
  border: 1.5px solid var(--ember);
  border-radius: calc(var(--card-r) + 5px);
}

.callout {
  justify-self: end;
  width: var(--shot);
  margin-bottom: 16px;
  color: var(--ember);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
  order: -1;
}

/* Wide screens: the label sits left of the phone on a plate of ground, in
   flat page space so it stays crisp. Its leader belongs to the lifted row,
   so it stays on the ring in every pose and runs on under the plate. */
@media (min-width: 75em) {
  .callout {
    position: absolute;
    z-index: 1;
    right: calc(var(--shot) + 16px);
    bottom: calc(var(--screen) * 0.6284);
    width: 10em;
    margin: 0;
    padding: 8px 0 8px 12px;
    background: var(--ground);
    /* A solid edge of ground, so the plate's fractional edge never leaves
       a half covered row of pixels over the grid. */
    box-shadow: 0 0 0 2px var(--ground);
    text-align: right;
    translate: 0 50%;
  }

  .ring::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    width: calc(var(--screen) * 0.0456 + 48px);
    border-top: 1.5px solid var(--ember);
  }
}

/* The load sequence: the grid settles, the phone rises out of the hairline,
   the reaction lifts out of its slot and the ring settles round it; the copy
   appears as the planes land. */
@media (prefers-reduced-motion: no-preference) {
  .field {
    animation: field-in 0.9s cubic-bezier(0.2, 0.7, 0.1, 1) both;
  }

  .phone {
    animation: rise 1s cubic-bezier(0.2, 0.7, 0.1, 1) 0.1s both;
  }

  .lift {
    animation: lift-out 0.6s cubic-bezier(0.2, 0.7, 0.1, 1) 0.85s both;
  }

  .ring {
    animation: ring-in 0.4s ease-out 1.05s both;
  }

  .callout {
    animation: fade-in 0.4s ease-out 1.2s both;
  }

  .hero-copy > * {
    animation: copy-in 0.6s cubic-bezier(0.2, 0.7, 0.1, 1) 0.45s both;
  }

  .hero-copy > :nth-child(2) {
    animation-delay: 0.53s;
  }

  .hero-copy > :nth-child(3) {
    animation-delay: 0.61s;
  }

  .hero-copy > :nth-child(4) {
    animation-delay: 0.69s;
  }
}

@keyframes field-in {
  from {
    opacity: 0;
    translate: 0 0 -90px;
  }
}

@keyframes rise {
  from {
    translate: 0 30%;
  }
}

@keyframes lift-out {
  from {
    translate: 0 0 -44px;
  }
}

@keyframes ring-in {
  from {
    opacity: 0;
    scale: 1.06;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes copy-in {
  from {
    opacity: 0;
    translate: 0 12px;
  }
}

/* Reduced motion: nothing moves, and the scene holds its rest pose with the
   depth intact. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .scene {
    --p: 1 !important;
    --tx: 0deg !important;
    --ty: 0deg !important;
  }
}

/* ---- Landing: sections ------------------------------------------------ */

main > section + section {
  margin-top: var(--section);
}

/* Heading in the left rail, content in the wide column. The rail heading
   stays in view while a long list scrolls past it. */
.rail {
  display: grid;
  grid-template-columns: var(--split);
  column-gap: var(--col-gap);
  align-items: start;
}

.rail-head {
  position: sticky;
  top: 32px;
}

.rail.features {
  grid-template-areas:
    "head rows"
    "shot rows";
  grid-template-rows: auto 1fr;
}

.rail.features .rail-head {
  position: static;
  grid-area: head;
}

.rail.features > .rows {
  grid-area: rows;
}

.rail.features > .features-shot {
  grid-area: shot;
}

.rows,
.guides {
  list-style: none;
}

.rows li,
.guides li {
  padding-block: 24px;
}

.rows li:first-child,
.guides li:first-child {
  padding-top: 8px;
}

.rows li + li,
.guides li + li {
  border-top: 1px solid var(--line);
}

.rows p,
.guides p {
  max-width: var(--measure-body);
  margin-top: 8px;
}

.steps {
  counter-reset: step;
}

.steps li {
  position: relative;
  padding-left: 40px;
  counter-increment: step;
}

.steps h3::before {
  content: counter(step);
  position: absolute;
  left: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.features-shot {
  width: min(280px, 100%);
  margin-top: 40px;
}

.device.whole {
  padding: 7px;
  border-bottom: 1px solid var(--line);
  border-radius: 40px;
}

.device.whole .screen img {
  border-radius: 33px;
}

.price-row {
  max-width: none;
  font-size: var(--fs-h1);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

/* The price can rise from behind its own baseline: the number moves inside
   a box that clips at the line. */
.price {
  display: inline-block;
  font-variant-numeric: lining-nums tabular-nums;
}

.price-num {
  display: inline-block;
}

/* Section reveals. Each plays once, when the script adds .in the first time
   its block is in view, and each answers its content: the pairing steps
   wipe in along their hairlines, the Today screenshot squares up from its
   turned pose, the price arrives. The hidden states need the .motion class
   the script sets, so without the script every section shows as it ends.
   The animations fill backwards only, so nothing stays clipped after. */
@media (prefers-reduced-motion: no-preference) {
  .motion .steps:not(.in) li {
    clip-path: inset(0 100% 0 0);
  }

  .motion .steps.in li {
    animation: wipe 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards;
  }

  .motion .steps.in li:nth-child(2) {
    animation-delay: 0.14s;
  }

  .motion .steps.in li:nth-child(3) {
    animation-delay: 0.28s;
  }

  .motion .features-shot:not(.in) .device {
    transform: perspective(1200px) rotateY(-16deg) rotateX(10deg);
  }

  .motion .features-shot.in .device {
    animation: square-up 1s cubic-bezier(0.2, 0.7, 0.1, 1) backwards;
  }

  /* The row waits whole, so a half shown sentence never sits on screen;
     it comes in, then the number rises into it. */
  .motion .price-row .price {
    clip-path: inset(0);
  }

  .motion .price-row:not(.in) {
    opacity: 0;
  }

  .motion .price-row.in {
    animation: fade-in 0.2s ease-out backwards;
  }

  .motion .price-row.in .price-num {
    animation: price-up 0.7s cubic-bezier(0.2, 0.7, 0.1, 1) 0.1s backwards;
  }

  .motion .price-row.in .terms {
    animation: fade-in 0.4s ease-out 0.55s backwards;
  }
}

@keyframes wipe {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0);
  }
}

@keyframes square-up {
  from {
    transform: perspective(1200px) rotateY(-16deg) rotateX(10deg);
  }
}

@keyframes price-up {
  from {
    translate: 0 110%;
  }
}


.terms {
  display: block;
  color: var(--body);
  font-weight: 400;
}

.tiers {
  display: grid;
  grid-template-columns: var(--split);
  column-gap: var(--col-gap);
  margin-top: 48px;
  border-top: 1px solid var(--line);
  list-style: none;
}

.tiers li {
  padding-top: 24px;
}

.tiers p {
  max-width: var(--measure-body);
  margin-top: 8px;
}

.guides a {
  font-size: var(--fs-lede);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.guides a:hover {
  text-decoration: underline;
  text-decoration-color: var(--ember);
}

.faq dt {
  padding-top: 24px;
}

.faq dt:first-of-type {
  padding-top: 8px;
}

.faq dt:not(:first-of-type) {
  border-top: 1px solid var(--line);
}

.faq dd {
  max-width: var(--measure-body);
  margin-top: 8px;
  padding-bottom: 24px;
}

.cta p {
  max-width: var(--measure-body);
  margin-top: 16px;
}

.cta > .store {
  margin-top: 32px;
}

/* ---- Guides and policy pages ------------------------------------------ */

.guide {
  max-width: 44rem;
}

.article-head {
  padding-top: var(--hero-top);
}

.article-head .store {
  margin-top: 32px;
}

.article-body {
  margin-top: 72px;
}

.article-body h2 {
  margin-top: 56px;
  font-size: clamp(1.5rem, 1.33rem + 0.71vw, 2rem);
}

.article-body > h2:first-child {
  margin-top: 0;
}

.article-body p,
.article-body ul,
.article-body table {
  max-width: var(--measure-body);
  margin-top: 16px;
}

.article-body ul {
  padding-left: 1.25em;
}

.article-body li + li {
  margin-top: 8px;
}

.article-body strong {
  color: var(--ink);
}

.compare {
  width: 100%;
  max-width: none;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.article-body .compare {
  max-width: none;
  margin-top: 24px;
}

.compare th,
.compare td {
  padding: 12px 16px 12px 0;
  text-align: left;
  vertical-align: top;
}

.compare thead th {
  color: var(--muted);
  font-weight: 400;
}

.compare tbody tr {
  border-top: 1px solid var(--line);
}

.compare tbody th {
  color: var(--ink);
  font-weight: 700;
}

.guide .faq,
.guide .related,
.guide .cta {
  margin-top: var(--section);
}

.article-body .faq {
  margin-top: 56px;
}

.guide .faq dl,
.guide .guides {
  margin-top: 24px;
}

/* ---- Footer ----------------------------------------------------------- */

.foot {
  margin-top: var(--section);
  padding-bottom: 48px;
  color: var(--muted);
  font-size: var(--fs-small);
}

.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}

.foot-row:first-child {
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
}

.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--body);
  text-decoration: none;
}

.foot-links a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ember);
}

.badge {
  display: inline-flex;
}

.badge img {
  width: 120px;
  height: 40px;
}

.foot-small {
  margin-top: 16px;
}

.foot-small a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
}

/* ---- Narrow screens --------------------------------------------------- */

@media (max-width: 74.99em) {
  /* The label moves above the phone, so the scene needs no room over it,
     and the grid keeps two habits so it stays below the phone's top. */
  .hero-shot {
    --headroom: 24px;
  }

  .field .habit:first-child {
    display: none;
  }
}

@media (max-width: 63.99em) {
  :root {
    --col-gap: 40px;
  }
}

@media (max-width: 47.99em) {
  .hero,
  .rail,
  .tiers {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-copy {
    padding-block: 8px 48px;
  }

  .hero-shot {
    --shot: min(var(--phone-shot), 60vw);
    --eye-x: 50%;
    --scene-eye-x: 50%;
  }

  .stage {
    justify-items: center;
  }

  .callout {
    justify-self: center;
    text-align: center;
  }

  .rail-head {
    position: static;
  }

  .rail.features {
    grid-template-areas:
      "head"
      "rows"
      "shot";
    grid-template-rows: none;
  }

  .rail > .rows,
  .rail > .guides,
  .rail > dl {
    margin-top: 32px;
  }

  .features-shot {
    width: min(60vw, 280px);
    margin-inline: auto;
  }

  .tiers li + li {
    margin-top: 16px;
    border-top: 1px solid var(--line);
  }

  .compare {
    display: block;
    overflow-x: auto;
  }
}

@media (max-width: 29.99em) {
  .top-links .top-guides {
    display: none;
  }
}

/* Below 400px the brand, Support and the App Store link no longer fit on
   one line; Support stays in the footer. */
@media (max-width: 24.99em) {
  .top-links a:not(.store-link) {
    display: none;
  }
}