/* The only stylesheet for ilma.club.
   One file, linked from all three pages. No @import, no font files, no
   scripts: the privacy page promises the site makes no external requests,
   and the Content-Security-Policy in vercel.json enforces that. The only
   images are the icon files under /img, served from ilma.club itself.

   The site wears Horizon, the app's identity
   (docs/planning/specs/2026-09-24-horizon-design.md, assets/brand/README.md):
   air above, smoke below, and the line between them. The colours are
   HorizonPalette's, light and dark. The type is the system face, heavy and
   expanded for the display lines, which on Apple devices is SF Pro, the
   face the app and its wordmark use. */

:root {
  color-scheme: light dark;

  /* HorizonPalette, light, air at line 1 (its clearest). */
  --air-top: #dcebf8;
  --air-bottom: #c9dff2;
  --smoke: #131417;
  --ink: #0e1116;                          /* inkOnAir */
  --figure-on-smoke: #f1f0ed;              /* the lower half of a split figure */
  --paper: #f1f0ed;                        /* textOnSmoke */
  --muted-air: rgba(14, 17, 22, 0.58);
  --hairline-air: rgba(14, 17, 22, 0.12);
  --muted-smoke: rgba(241, 240, 237, 0.62);
  --hairline-smoke: rgba(241, 240, 237, 0.14);
  --link-air: #0e1116;

  --font: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --wrap: 68rem;
  --measure: 36rem;
  /* The inline padding that lines full-bleed bands up with .wrap. */
  --edge: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark: the air is dusk, the smoke is night, and the lower half of a
       split figure turns sky blue so the split still reads. */
    --air-top: #1b2a3a;
    --air-bottom: #172536;
    --smoke: #070809;
    --ink: #eceff2;
    --figure-on-smoke: #9cc8ee;
    --paper: #ecedee;
    --muted-air: rgba(236, 239, 242, 0.6);
    --hairline-air: rgba(236, 239, 242, 0.14);
    --muted-smoke: rgba(236, 237, 238, 0.62);
    --hairline-smoke: rgba(236, 237, 238, 0.14);
    --link-air: #9cc8ee;
  }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--smoke);
}

body {
  margin: 0;
  background: var(--air-top);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.06em;
}

a:hover {
  text-decoration-thickness: 0.12em;
}

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 3px;
}

h1, h2, h3, p, ul, ol {
  margin: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The two regions. Anything inside the smoke is light on dark in both
   schemes, as the app's smoke is. */
.air {
  background: linear-gradient(to bottom, var(--air-top), var(--air-bottom));
  color: var(--ink);
}

.smoke {
  background: var(--smoke);
  color: var(--paper);
}

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

/* The wordmark: "ilma", lowercase, heavy, expanded, tracked −0.01 em, in
   the air's ink. On the landing page it is the <h1>; elsewhere a bare <a>. */
.wordmark {
  display: inline-block;
  font-size: 1.375rem;
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}

.wordmark a {
  color: inherit;
  text-decoration: none;
}

/* Display: heavy and expanded, tight tracking, like the app's figures. */
.display {
  font-size: clamp(2.5rem, 8.5vw, 5.75rem);
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.display-quiet {
  font-size: clamp(2rem, 5.6vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.title {
  max-width: 22em;
  font-size: clamp(1.625rem, 3.6vw, 2.5rem);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

/* Caps labels: small, bold, expanded, widely tracked. */
.caps,
.note-label,
.line-units,
.phone-cap,
.step-num {
  font-size: 0.75rem;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.caps {
  margin-bottom: 1rem;
  opacity: 0.6;
}

.body {
  max-width: var(--measure);
  margin-top: 1.25rem;
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--muted-air);
}

.fine {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted-smoke);
}

.fine-air {
  color: var(--muted-air);
}

.quote {
  white-space: nowrap;
}

/* Ilma's mark: a ring whose lower half is filled. */
.mark {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.6em;
  border: 0.14em solid currentColor;
  border-radius: 50%;
  background: linear-gradient(to bottom, transparent 50%, currentColor 50%);
  vertical-align: -0.12em;
}

/* ---------- The split figure ----------
   The same text drawn in two colours across its own middle: the half in
   the air is ink, the half in the smoke is paper (sky in dark). Whatever
   holds it puts the line at the figure's middle, so the split always
   lands on the line. With line-height 1 a numeral's optical centre sits
   within a hair of the box's centre in the system faces. */
.split-figure {
  display: inline-block;
  font-weight: 900;
  font-stretch: 125%;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--ink);
  background: linear-gradient(to bottom, var(--ink) 50%, var(--figure-on-smoke) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem var(--edge);
  background: var(--air-top);
}

.topbar-cta {
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--air-top);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.topbar-cta:hover {
  opacity: 0.88;
}

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

.hero-air {
  padding: clamp(2.5rem, 9vh, 6rem) var(--edge) clamp(1.5rem, 4vh, 3rem);
  background: linear-gradient(to bottom, var(--air-top), var(--air-bottom));
}

.hero-air .note-label {
  margin-bottom: 1.5rem;
  color: var(--muted-air);
}

/* The line: air-bottom above, smoke below, the countdown on it. */
.line-band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 var(--edge);
  background: linear-gradient(to bottom, var(--air-bottom) 50%, var(--smoke) 50%);
}

.line-band .split-figure {
  margin-left: -0.04em;
  font-size: clamp(6.5rem, 30vw, 20rem);
}

.line-units {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.1rem;
  text-align: right;
  white-space: nowrap;
}

.line-units .on-air {
  color: var(--ink);
}

.line-units .on-smoke {
  color: var(--paper);
}

.hero-smoke {
  padding: clamp(1.5rem, 4vh, 2.5rem) var(--edge) clamp(3.5rem, 10vh, 6rem);
}

.hero-sub {
  max-width: var(--measure);
  font-size: clamp(1.125rem, 2.2vw, 1.3125rem);
  line-height: 1.55;
  color: var(--paper);
}

.cta-row {
  margin: 2rem 0 1rem;
}

/* The app's primary button on smoke: a solid paper capsule, smoke label. */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.625rem;
  padding: 0 1.75rem;
  border-radius: 999px;
  background: var(--paper);
  color: var(--smoke);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.pill:hover {
  opacity: 0.9;
}

.pill:focus-visible {
  outline-color: var(--paper);
  outline-offset: 4px;
}

/* ---------- Bands ---------- */

.band {
  padding: clamp(4rem, 11vw, 8rem) var(--gutter);
}

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

/* The smoke has its own hairlines and muted text. */
.smoke .caps {
  color: var(--paper);
}

/* Steps */
.step-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.5rem 2rem;
  margin-top: 3.5rem;
  padding: 0;
  list-style: none;
}

.step-list li {
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline-smoke);
}

.step-num {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--muted-smoke);
}

.step-list h3,
.fact-list h3,
.plan h3 {
  margin-bottom: 0.5rem;
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.step-list p,
.fact-list p {
  color: var(--muted-smoke);
}

.fact-list a {
  color: var(--paper);
}

/* The four phones: each one's air is Horizon.fraction(days) of its range. */
.phones {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 2.5vw, 2rem);
  margin-top: 3.5rem;
  padding: 0;
  list-style: none;
}

.phone {
  --air: 25%;
  position: relative;
  aspect-ratio: 390 / 844;
  border-radius: clamp(1rem, 3.2vw, 2.5rem);
  border: 1px solid var(--hairline-air);
  overflow: hidden;
  background: var(--smoke);
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(14, 17, 22, 0.35);
}

.phone-air {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--air);
  background: linear-gradient(to bottom, var(--air-top), var(--air-bottom));
}

.phone-fig {
  position: absolute;
  left: 9%;
  top: var(--air);
  transform: translateY(-50%);
}

.phone .split-figure {
  font-size: clamp(2rem, 7vw, 5.25rem);
}

.phone-cap {
  position: absolute;
  right: 9%;
  bottom: 6%;
  color: var(--muted-smoke);
  font-size: clamp(0.5625rem, 1.2vw, 0.75rem);
}

/* 18 % + fraction × 62 %, fraction = ln(1 + d) / ln(366). */
.phone-d1   { --air: 25.3%; }
.phone-d12  { --air: 44.9%; }
.phone-d84  { --air: 64.7%; }
.phone-d365 { --air: 80%; }

.phone-d365 .split-figure {
  font-size: clamp(1.5rem, 5.4vw, 4rem);
}

/* The belief band follows the phones in the same air, so no seam. */
.clears {
  padding-bottom: clamp(2rem, 6vw, 4rem);
  background: linear-gradient(to bottom, var(--air-top), var(--air-bottom));
}

.belief {
  padding-top: clamp(2rem, 6vw, 4rem);
  background: var(--air-bottom);
}

/* Ilma's note card, set as the home screen sets it: in the air. */
.note-card {
  max-width: 34rem;
  margin-bottom: 3.5rem;
  padding: 1.75rem 1.75rem 1.5rem;
  border-radius: 1.5rem;
  background: linear-gradient(to bottom, var(--air-top), var(--air-bottom));
  color: var(--ink);
}

.note-card .note-label {
  color: var(--muted-air);
}

.note-line {
  margin: 0.9rem 0 0.75rem;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.36;
}

.note-src {
  font-size: 0.8125rem;
  color: var(--muted-air);
}

.fact-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.5rem 2rem;
  padding: 0;
  list-style: none;
}

.fact-list li {
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline-smoke);
}

/* Price */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  max-width: 50rem;
  margin: 3rem 0 1.5rem;
}

.plan {
  padding: 1.75rem;
  border: 1px solid var(--hairline-air);
  border-radius: 1.5rem;
}

.plan p {
  color: var(--muted-air);
}

.plan-price {
  margin: 0.25rem 0 0.75rem;
  color: var(--ink) !important;
  font-size: 2.5rem;
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -0.04em;
  line-height: 1;
}

.plan-price span {
  font-size: 1rem;
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0;
  color: var(--muted-air);
}

.plan-alt {
  margin-bottom: 0.75rem;
  font-weight: 600;
  color: var(--ink) !important;
}

/* Ilma Plus sits in the smoke, the way the app's paywall does. */
.plan-plus {
  border-color: transparent;
  background: var(--smoke);
  color: var(--paper);
}

.plan-plus h3,
.plan-plus .plan-price,
.plan-plus .plan-alt {
  color: var(--paper) !important;
}

.plan-plus p,
.plan-plus .plan-price span {
  color: var(--muted-smoke);
}

.price .fine {
  max-width: var(--measure);
}

/* Closing: one more line, the button under it. */
.closing-air {
  padding: clamp(4rem, 11vw, 8rem) var(--edge) clamp(2.5rem, 6vw, 4rem);
  background: linear-gradient(to bottom, var(--air-bottom), var(--air-top));
}

.closing-smoke {
  padding: clamp(2rem, 5vw, 3rem) var(--edge) clamp(3rem, 8vw, 5rem);
}

.closing-smoke .cta-row {
  margin-top: 0;
}

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

.site-footer {
  padding: 2rem var(--edge) 3rem;
  border-top: 1px solid var(--hairline-smoke);
  background: var(--smoke);
  color: var(--muted-smoke);
  font-size: 0.875rem;
  line-height: 1.6;
}

.site-footer p + p {
  margin-top: 0.375rem;
}

.site-footer a {
  color: var(--paper);
}

.landing .site-footer {
  border-top-color: var(--hairline-smoke);
}

/* ---------- Text pages (privacy, support) ----------
   The same air, a readable measure, the smoke only in the footer. */

.doc .site-header {
  padding: 1.5rem var(--gutter);
}

.doc main {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 1.5rem var(--gutter) 4.5rem;
  line-height: 1.7;
}

.doc h1 {
  margin-bottom: 1.25rem;
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.doc h2 {
  margin: 2.75rem 0 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline-air);
  font-size: 1.3125rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.doc h3 {
  margin: 2rem 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
}

.doc p,
.doc ul {
  margin: 0 0 1.25rem;
}

.doc ul {
  padding-left: 1.25rem;
}

.doc li {
  margin-bottom: 0.75rem;
}

.doc li:last-child {
  margin-bottom: 0;
}

.doc a {
  color: var(--link-air);
}

.doc a.wordmark {
  color: var(--ink);
  text-decoration: none;
}

.doc strong {
  font-weight: 700;
}

.doc .site-footer {
  max-width: none;
}

/* ---------- Small screens ---------- */

@media (max-width: 40rem) {
  .phones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .phone .split-figure {
    font-size: 14vw;
  }

  .phone-d365 .split-figure {
    font-size: 10.5vw;
  }

  .phone-cap {
    font-size: 0.6875rem;
  }

  .line-units {
    gap: 0.8rem;
    font-size: 0.625rem;
  }

  .pill {
    width: 100%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .pill,
  .topbar-cta {
    transition: opacity 0.15s ease;
  }
}