@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap");

/* TensaSkin site styles.
   ---------------------------------------------------------------------------
   The app is a fortnightly progress journal, so the site is built like one: a
   check-in track down the left gutter that advances as the page is read, a
   serif for anything editorial, mono for anything that is a reading, and the
   app's crimson used only where something is being measured or claimed.

   The palette is the app's own: #1E1A24 ink on white, #A11818 crimson accent,
   #E55656 for the softer half of it. The app is a light app; the site is a
   light site. Everything else stays quiet.
   --------------------------------------------------------------------------- */

:root {
  --paper: #ffffff; /* page */
  --paper-2: #faf6f4; /* alternate band */
  --paper-3: #f4efec; /* raised element inside a card */
  --edge: #e8e2e4; /* hairline */
  --edge-soft: rgba(30, 26, 36, 0.06);

  --crimson: #a11818;
  --blush: #e55656;
  --wash: #fcf0f0; /* crimson at 4%, for fills */
  --rose: palevioletred; /* hero heading, header tile */

  --ink: #1e1a24; /* headings */
  --body: #4b4553; /* body text */
  --muted: #7a7382; /* secondary */
  --fine: #9a93a2; /* fine print, labels */

  --max: 1140px;
  --r-card: 20px;

  /* One shadow scale: tight, cast downward, low alpha. Nothing glows. */
  --shadow-sm:
    0 1px 2px rgba(30, 26, 36, 0.08),
    0 1px 1px rgba(30, 26, 36, 0.04);
  --shadow-md:
    0 1px 3px rgba(30, 26, 36, 0.06),
    0 6px 16px -4px rgba(30, 26, 36, 0.12);
  --shadow-lg:
    0 2px 4px rgba(30, 26, 36, 0.08),
    0 28px 56px -20px rgba(30, 26, 36, 0.28);

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: var(--crimson);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

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

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

h1,
h2,
h3 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin: 0;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
}

/* Anything that is a reading rather than prose. */
.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fine);
}

.tag .k {
  color: var(--crimson);
}

/* ============================================================ check-in track
   The app's core mechanic is a 14-day countdown to the next progress photo.
   The gutter carries it: fourteen ticks, and a mark that walks down them as
   the page is read. Decorative, and static when motion is reduced. */
.track {
  display: none;
  position: fixed;
  left: 34px;
  top: 50%;
  transform: translateY(-50%);
  height: 60vh;
  width: 74px;
  z-index: 5;
  pointer-events: none;
}

@media (min-width: 1400px) {
  .track {
    display: block;
  }
}

.track-line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--edge);
}

.track-tick {
  position: absolute;
  left: 0;
  width: 7px;
  height: 1px;
  background: var(--edge);
}

.track-tick.major {
  width: 14px;
  background: #d6ced1;
}

.track-cap {
  position: absolute;
  left: 22px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--fine);
  white-space: nowrap;
}

.track-mark {
  position: absolute;
  left: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--crimson);
  transition: top 0.12s linear;
}

.track-mark::after {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid rgba(161, 24, 24, 0.28);
}

.track-num {
  position: absolute;
  left: 25px;
  top: -6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--crimson);
  white-space: nowrap;
}

/* ==================================================================== header */
header.site {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--edge);
}

header.site .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-right: auto;
}

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

.brand img {
  width: 40px;
  height: 40px;
  /* iOS rounds its icons at ~22.4% of their width; 9px of 40. The tile is
     white on a white header, so the hairline is what gives it an edge. */
  border-radius: 9px;
  border: 1px solid #000000;
}

/* The mark is drawn black on a white tile; in the header it is shown as a
   white mark on a rose tile. Inverting gives white on black, and screening
   that over the tile lets the rose through wherever the image is black. */
header.site .brand-tile {
  display: inline-flex;
  border-radius: 9px;
  background: var(--rose);
}

header.site .brand img {
  border: 0;
  filter: invert(1);
  mix-blend-mode: screen;
}

nav.site-nav {
  display: flex;
  gap: 26px;
}

nav.site-nav a {
  position: relative;
  color: var(--muted);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  padding: 4px 0;
}

nav.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--crimson);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

nav.site-nav a:hover {
  color: var(--ink);
}

nav.site-nav a:hover::after {
  transform: scaleX(1);
}

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

/* ================================================================== buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 13px 22px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-store {
  background: var(--ink);
  color: #fff;
  padding: 13px 26px 13px 22px;
  box-shadow: var(--shadow-sm);
}

.btn-store:hover {
  color: #fff;
  box-shadow: var(--shadow-md);
}

.btn-store svg {
  width: 26px;
  height: 26px;
  flex: none;
}

.btn-store .lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

.btn-store .small {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.72;
}

.btn-store .big {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.btn-store-sm {
  background: var(--ink);
  color: #fff;
  padding: 9px 17px;
  font-size: 14px;
  border-radius: 999px;
}

.btn-store-sm:hover {
  color: #fff;
}

.btn-store-sm svg {
  width: 16px;
  height: 16px;
  flex: none;
}

@media (max-width: 620px) {
  .btn-store-sm span {
    display: none;
  }
  .btn-store-sm {
    padding: 10px 12px;
  }
}

/* ===================================================================== hero */
.home-hero {
  position: relative;
  padding: 96px 0 84px;
  overflow: hidden;
}

/* A single soft crimson bloom behind the phone, and nothing else. */
.home-hero::before {
  content: "";
  position: absolute;
  right: -8%;
  top: -12%;
  width: 620px;
  height: 620px;
  background: radial-gradient(
    circle,
    rgba(229, 86, 86, 0.14),
    rgba(229, 86, 86, 0) 68%
  );
  pointer-events: none;
}

.home-hero > .wrap {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 0.92fr;
  gap: 56px;
  align-items: center;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 26px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
  background: var(--wash);
  border: 1px solid rgba(161, 24, 24, 0.14);
  border-radius: 999px;
  padding: 7px 15px;
}

.hero-eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--crimson);
}

/* Same weight and size as heightup's hero headline. */
.home-hero h1 {
  margin: 0 0 24px;
  font-size: clamp(2.9rem, 6.2vw, 4.9rem);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.04em;
}

/* The headline is written as two h1 lines; only the last one carries the gap
   down to the paragraph. */
.home-hero h1 + h1 {
  margin-top: -24px;
}

.home-hero h1 em {
  font-style: italic;
  color: var(--crimson);
}

.hero-sub {
  margin: 0 0 34px;
  font-size: 18.5px;
  max-width: 30em;
  color: var(--body);
}

.hero-sub strong {
  color: var(--ink);
  font-weight: 600;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.cta-note {
  margin: 18px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fine);
}

/* ================================================================== device */
.hero-device {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 34px;
}

/* Corner ticks framing the phone, like a dimensioned drawing. */
.hero-device::before,
.hero-device::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  pointer-events: none;
}

.hero-device::before {
  top: 0;
  left: 0;
  border-top: 1px solid var(--edge);
  border-left: 1px solid var(--edge);
}

.hero-device::after {
  bottom: 0;
  right: 0;
  border-bottom: 1px solid var(--edge);
  border-right: 1px solid var(--edge);
}

/* A flat near-black body with a thin lighter bezel ring. The only shadow is
   the one it casts on the page, downward, so the frame stays crisp. */
.device {
  position: relative;
  width: 268px;
  margin: 0 auto;
  border-radius: 42px;
  border: 1px solid #bcbabe;
  background: #0b090e;
  padding: 7px;
  box-shadow: var(--shadow-lg);
}
.dif-text {
  color: var(--rose);
}

/* Real screenshots, exported with the iPhone frame baked in on a transparent
   ground. Same footprint as the drawn .device so the two kinds of phone line
   up while the last drawn one waits for its screenshot. One soft shadow as a
   filter so it follows the frame, not the bitmap. */
.device-img {
  display: block;
  width: 268px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(20px 10px rgba(30, 26, 36, 0.503));
}
.scr {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 36px;
  background: var(--paper);
  padding: 30px 17px 12px;
  overflow: hidden;
  /* The heightup phone holds a 738x1600 screenshot; the drawn screen takes
     the same aspect so the two phones are the same height. */
  aspect-ratio: 738 / 1600;
}

/* Three phones side by side are three of the same phone, so the screens are
   one height and the tab bar sits on the floor of each. Without this the
   captions under them step up and down with whatever each screen contains. */
.shot .scr {
  min-height: 432px;
}

/* Dynamic Island, sitting over the screen content rather than cut into a
   status-bar strip. */
.scr::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 9px;
  transform: translateX(-50%);
  width: 68px;
  height: 18px;
  border-radius: 999px;
  background: #0b090e;
  z-index: 4;
}

.app-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.app-brand img {
  width: 17px;
  height: 17px;
  border-radius: 5px;
}

.app-brand span {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.app-streak {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--crimson);
  background: var(--wash);
  border-radius: 999px;
  padding: 3px 9px;
}

.app-streak svg {
  width: 10px;
  height: 10px;
}

.app-h {
  margin: 12px 0 0;
  font-size: 23px;
  letter-spacing: -0.02em;
}

.app-pill {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 6px;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--muted);
}

/* Aligned to the cap height of the first line, not to the centre of a block
   that may wrap to two. */
.app-pill svg {
  width: 10px;
  height: 10px;
  flex: none;
  margin-top: 2px;
  color: var(--crimson);
}

.app-sub {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--muted);
}

.ring-wrap {
  position: relative;
  margin: 14px auto 0;
  width: 168px;
  height: 168px;
}

.ring {
  width: 100%;
  height: 100%;
}

.ring-val {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ring-val .n {
  font-family: var(--mono);
  font-size: 25px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.ring-val .l {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fine);
}

.tiles {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.tile {
  flex: 1;
  border: 1px solid var(--edge);
  border-radius: 13px;
  padding: 9px 10px;
}

.tile .k {
  display: block;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--fine);
}

.tile .v {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink);
}

.tile .v.hi {
  color: var(--crimson);
}

.app-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  border: 1px solid var(--edge);
  border-radius: 13px;
  padding: 10px 12px;
  background: var(--paper-2);
}

.app-card .k {
  display: flex;
  flex-direction: column;
  font-size: 11.5px;
  color: var(--ink);
  line-height: 1.3;
}

.app-card .k small {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--fine);
  margin-bottom: 2px;
}

.app-card svg {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--fine);
}

.tabbar {
  display: flex;
  justify-content: center;
  gap: 26px;
  /* Sits on the floor of the screen rather than a fixed step below the last
     card, so three phones of one height have their bars in one line. */
  margin-top: auto;
  padding: 12px 0 4px;
  border-top: 1px solid var(--edge);
}

.tabbar i {
  color: #c8c2cb;
}

.tabbar i.on {
  color: var(--ink);
}

.tabbar svg {
  width: 17px;
  height: 17px;
}

/* Chat bubbles, the coach screen. */
.bub {
  max-width: 84%;
  margin-top: 8px;
  padding: 8px 11px;
  font-size: 11px;
  line-height: 1.45;
  border-radius: 13px;
}

.bub.ai {
  background: var(--paper-2);
  border: 1px solid var(--edge);
  color: var(--body);
  border-bottom-left-radius: 4px;
}

.bub.me {
  margin-left: auto;
  background: var(--ink);
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* A big single reading. */
.readout {
  margin-top: 14px;
  text-align: center;
}

.readout .n {
  font-family: var(--mono);
  font-size: 31px;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.readout .l {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fine);
}

/* Labelled progress lines. */
.line {
  margin-top: 11px;
}

.line .lab {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 5px;
}

.line .lab b {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--ink);
}

.bar {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: var(--paper-3);
  overflow: hidden;
}

.bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--crimson);
}

/* A week of bars. */
.week {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 74px;
  margin-top: 14px;
}

.week i {
  flex: 1;
  border-radius: 4px 4px 2px 2px;
  background: var(--paper-3);
}

.week i.hit {
  background: var(--crimson);
}

.week-days {
  display: flex;
  gap: 7px;
  margin-top: 5px;
}

.week-days span {
  flex: 1;
  text-align: center;
  font-family: var(--mono);
  font-size: 8px;
  color: var(--fine);
}

/* Three ritual steps with their evidence grade. */
.rit {
  margin-top: 12px;
  border: 1px solid var(--edge);
  border-radius: 13px;
  overflow: hidden;
}

.rit-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  font-size: 11.5px;
  color: var(--ink);
}

.rit-row + .rit-row {
  border-top: 1px solid var(--edge);
}

.rit-row .t {
  margin-right: auto;
}

.rit-row .d {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--fine);
}

.grade {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 7px;
  border: 1px solid var(--edge);
  color: var(--muted);
  white-space: nowrap;
}

.grade.mod {
  color: var(--crimson);
  background: var(--wash);
  border-color: rgba(161, 24, 24, 0.2);
}

.grade.lim {
  color: #9a6a20;
  background: #fdf5e8;
  border-color: #f0e0c4;
}

.grade.non {
  color: var(--fine);
}

/* ==================================================================== facts */
.facts {
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  background: var(--paper-2);
}

.facts .wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.fact {
  padding: 40px 34px;
}

.fact + .fact {
  border-left: 1px solid var(--edge);
}

.fact h3 {
  margin: 10px 0 8px;
  font-size: 20px;
}

.fact p {
  margin: 0;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
}

/* ================================================================ sections */
.sec {
  padding: 92px 0;
}

.sec.alt {
  background: var(--paper-2);
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}

.sec-head {
  max-width: 640px;
  margin-bottom: 46px;
}

.sec-head .tag {
  margin-bottom: 14px;
}

.sec-head h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 42px);
  letter-spacing: -0.025em;
}

.sec-head p {
  margin: 16px 0 0;
  font-size: 17px;
  color: var(--muted);
}

/* ================================================================== bento */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.f-card {
  grid-column: span 6;
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  background: var(--paper);
  padding: 26px 26px 24px;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.f-card:hover {
  border-color: #d9d1d5;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

@media (min-width: 900px) {
  .f-1 {
    grid-column: span 3;
  }
  .f-2 {
    grid-column: span 3;
  }
  .f-3 {
    grid-column: span 2;
  }
  .f-4 {
    grid-column: span 2;
  }
  .f-5 {
    grid-column: span 2;
  }
  .f-6 {
    grid-column: span 6;
  }
}

.f-card h3 {
  margin: 12px 0 0;
  font-size: 22px;
}

.f-card p {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
}

.f-card .tag {
  color: var(--fine);
}

.f-vis {
  margin-top: 20px;
}

.f-vis svg {
  width: 100%;
  height: auto;
  display: block;
}

.f-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.f-chat span {
  max-width: 88%;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 14px;
}

.f-chat .q {
  align-self: flex-end;
  background: var(--ink);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.f-chat .a {
  background: var(--paper-2);
  border: 1px solid var(--edge);
  color: var(--body);
  border-bottom-left-radius: 4px;
}

.f-timer .bar {
  margin-top: 10px;
  height: 6px;
}

.f-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.f-steps span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink);
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 5px 12px;
}

.f-steps span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--crimson);
}

.f-steps span.off {
  color: var(--fine);
}

.f-steps span.off::before {
  background: #d8d2d6;
}

/* The evidence note a ritual step opens to, quoted under the list. */
.rit-note {
  margin: 14px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--edge);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

.rit-note strong {
  color: var(--ink);
  font-weight: 600;
}

/* Two photos side by side, the check-in comparison. */
.f-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.f-shot {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  border: 1px solid var(--edge);
  background: linear-gradient(160deg, #f6f1ee, #ece5e6);
  overflow: hidden;
}

.f-shot span {
  position: absolute;
  left: 8px;
  bottom: 8px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  padding: 3px 8px;
}

.f-shot.now {
  border-color: rgba(161, 24, 24, 0.3);
}

.f-shot.now span {
  color: var(--crimson);
}

.f-shot svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* =================================================================== shots */
.shots {
  display: grid;
  gap: 44px;
}

.shot {
  text-align: center;
}

@media (min-width: 980px) {
  .shots {
    grid-template-columns: repeat(3, 1fr);
  }
}

.shot .device {
  margin: 0 auto;
}

.shot h3 {
  margin: 8px 0 0;
  font-size: 20px;
}

.shot p {
  margin: 8px auto 0;
  font-size: 14.5px;
  color: var(--muted);
  max-width: 30ch;
}

.shot .tag {
  margin-top: 22px;
}

/* =================================================================== steps */
.steps {
  list-style: none;
  counter-reset: s;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, 1fr);
}

.steps li {
  position: relative;
  padding: 0 26px 0 0;
}

.steps li + li {
  padding-left: 26px;
  border-left: 1px solid var(--edge);
}

.step-n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--crimson);
}

.steps h3 {
  margin: 12px 0 0;
  font-size: 20px;
}

.steps p {
  margin: 8px 0 0;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
}

/* ================================================================ evidence */
.science {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 48px;
}

.science h2 {
  margin: 12px 0 0;
  font-size: clamp(28px, 3.6vw, 40px);
  letter-spacing: -0.025em;
}

.science p {
  margin: 0 0 18px;
  font-size: 16.5px;
  color: var(--body);
}

.sources {
  list-style: none;
  margin: 22px 0;
  padding: 0;
  border-top: 1px solid var(--edge);
}

.sources li {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--edge);
  font-size: 15px;
  color: var(--body);
}

.sources .grade {
  justify-self: start;
}

.disclaimer {
  margin: 24px 0 0;
  padding: 18px 20px;
  border-left: 2px solid var(--crimson);
  background: var(--wash);
  border-radius: 0 12px 12px 0;
  font-size: 14.5px;
  color: var(--body);
}

/* ================================================================ final cta */
.final {
  position: relative;
  padding: 100px 0;
  text-align: center;
  background: var(--ink);
  overflow: hidden;
}

.final::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -40%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(
    circle,
    rgba(229, 86, 86, 0.22),
    rgba(229, 86, 86, 0) 66%
  );
  pointer-events: none;
}

.final .wrap {
  position: relative;
}

.final .tag {
  color: rgba(255, 255, 255, 0.55);
}

.final h2 {
  margin: 16px 0 0;
  color: #fff;
  font-size: clamp(34px, 5vw, 54px);
  letter-spacing: -0.03em;
}

.final p {
  margin: 16px auto 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.68);
}

.final .cta-row {
  justify-content: center;
}

.final .btn-store {
  background: #fff;
  color: var(--ink);
}

.final .btn-store:hover {
  color: var(--ink);
}

.final p.cta-note {
  color: rgba(255, 255, 255, 0.45);
}

/* =================================================================== footer */
footer.site {
  border-top: 1px solid var(--edge);
  padding: 46px 0 56px;
  background: var(--paper);
}

footer.site .cols {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  justify-content: space-between;
}

footer.site nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

footer.site nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14.5px;
}

footer.site nav a:hover {
  color: var(--ink);
}

footer.site .fine {
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--edge);
  font-size: 13px;
  color: var(--fine);
  line-height: 1.6;
  max-width: 76ch;
}

/* ============================================================ legal + inner */
/* Long-form pages run to one measure, so an inner page's heading sits on the
   same left edge as the text under it. */
.wrap.measure {
  max-width: 780px;
}

/* Padding-top/bottom only: this element is also a .wrap, and the shorthand
   would drop the 24px gutter that keeps it off the edge of a phone. */
.hero {
  padding-top: 68px;
  padding-bottom: 10px;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
}

.hero h1 {
  margin: 14px 0 0;
  font-size: clamp(34px, 5vw, 52px);
  letter-spacing: -0.03em;
}

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

.legal {
  padding: 56px 0 84px;
}

.legal .wrap {
  max-width: 780px;
}

.legal h1 {
  font-size: clamp(34px, 5vw, 48px);
  letter-spacing: -0.03em;
}

.updated {
  margin: 14px 0 34px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--fine);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--edge);
}

/* The plain-English box at the top of a policy. */
.summary {
  margin: 0 0 40px;
  padding: 24px 26px;
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  background: var(--paper-2);
}

.summary h2 {
  margin: 0 0 12px;
  font-size: 19px;
}

.summary ul {
  margin: 0;
  padding-left: 20px;
}

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

.legal h2 {
  margin: 46px 0 14px;
  font-size: 25px;
  letter-spacing: -0.02em;
}

.legal h3 {
  margin: 28px 0 10px;
  font-size: 18px;
}

.legal p {
  margin: 0 0 16px;
}

.legal li {
  margin-bottom: 4px;
}

.legal ul,
.legal ol {
  padding-left: 22px;
  margin: 0 0 16px;
}

.legal li + li {
  margin-top: 10px;
}

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

/* Placeholders you must fill in before publishing. Loud on purpose. */
.todo {
  background: #fff3cd;
  border-bottom: 1px dashed #d7a72a;
  color: #7a5a05;
  font-family: var(--mono);
  font-size: 0.86em;
  padding: 1px 4px;
  border-radius: 3px;
}

.table-scroll {
  overflow-x: auto;
  margin: 0 0 20px;
  border: 1px solid var(--edge);
  border-radius: 14px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 520px;
}

td,
th {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid var(--edge);
  vertical-align: top;
}

th {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--fine);
  font-weight: 500;
  background: var(--paper-2);
}

tr:last-child td {
  border-bottom: 0;
}

/* A call-out inside a legal page. */
.notice {
  margin: 0 0 22px;
  padding: 20px 22px;
  border-left: 2px solid var(--crimson);
  background: var(--wash);
  border-radius: 0 12px 12px 0;
}

.notice h3 {
  margin: 0 0 8px;
  font-size: 17px;
}

.notice p {
  margin: 0 0 10px;
  font-size: 15px;
}

.notice p:last-child {
  margin-bottom: 0;
}

.contact-box {
  margin: 20px 0 0;
  padding: 22px 24px;
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  background: var(--paper-2);
}

.contact-box p {
  margin: 0 0 8px;
  font-size: 15px;
}

.contact-box p:last-child {
  margin-bottom: 0;
}

/* A support question and its answer. */
.faq {
  border-top: 1px solid var(--edge);
  margin-top: 8px;
}

.faq details {
  border-bottom: 1px solid var(--edge);
  padding: 18px 0;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

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

.faq summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 18px;
  color: var(--crimson);
  flex: none;
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq details p {
  margin: 12px 0 0;
  font-size: 15.5px;
  color: var(--body);
}

.faq details p:first-of-type {
  margin-top: 14px;
}

/* ================================================================ responsive */
@media (max-width: 1040px) {
  /* One centred column once the phone drops below the copy, matching
     heightup's stacked hero: text centred, paragraph and CTA centred, and
     the device shrunk to its content so the corner ticks frame the phone
     rather than the column. */
  .home-hero > .wrap {
    grid-template-columns: 1fr;
    gap: 56px;
    text-align: center;
    justify-items: center;
  }
  .hero-sub {
    margin-left: auto;
    margin-right: auto;
  }
  .home-hero .cta-row {
    justify-content: center;
  }
  .hero-device {
    order: 2;
  }
  .science {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 0;
  }
  .steps li:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 860px) {
  .facts .wrap {
    grid-template-columns: 1fr;
  }
  .fact {
    padding: 30px 24px;
  }
  .fact + .fact {
    border-left: 0;
    border-top: 1px solid var(--edge);
  }
}

@media (max-width: 620px) {
  body {
    font-size: 16px;
  }
  .sec {
    padding: 64px 0;
  }
  /* Hero on a phone: one centred column. Left-aligned copy at this width
     leaves a ragged edge and a button too small to be the obvious target,
     so the whole stack centres and the store button goes full width. */
  .home-hero {
    padding: 28px 0 48px;
    text-align: center;
  }

  /* The bloom sits behind the phone rather than off the right edge, where
     at this width it was mostly outside the viewport. */
  .home-hero::before {
    right: auto;
    left: 50%;
    top: -14%;
    width: 440px;
    height: 440px;
    transform: translateX(-50%);
  }

  .home-hero > .wrap {
    gap: 32px;
  }

  .hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Without this, a flex item's default min-width: auto lets the bold
       headline's preferred width push the column wider than the viewport
       instead of wrapping, clipping everything on narrow phones. */
    min-width: 0;
    width: 100%;
  }

  .hero-copy * {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .hero-eyebrow {
    padding: 6px 13px;
    font-size: 10px;
  }

  /* Weight and size stay as on desktop, like heightup. max-width: 100% keeps
     it from overflowing its flex-centered parent, which otherwise sizes
     non-stretched children to their content width. */
  .home-hero h1 {
    max-width: 100%;
  }

  /* heightup's mobile hero paragraph drops to 0.9rem and just fills the
     column instead of being width-capped — that's what keeps it reading as
     a couple of easy lines instead of a dense square block of text. */
  .hero-sub {
    max-width: 100%;
    font-size: 14.5px;
    line-height: 1.5;
    text-wrap: pretty;
  }

  .cta-row {
    width: 100%;
    justify-content: center;
  }

  .cta-row .btn-store {
    width: 100%;
    justify-content: center;
    padding: 15px 22px;
  }

  .btn-store .lines {
    align-items: center;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .steps li,
  .steps li + li {
    padding: 0;
    border-left: 0;
  }
  .f-card {
    padding: 22px 20px;
  }
  .sources li {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .legal h2 {
    font-size: 22px;
  }
  .final {
    padding: 72px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}