/* Cloudy Tuesdays (cloudytuesdays.com): a quiet studio page under an overcast night sky. Dark theme only.
   System fonts only, nothing from other origins, no inline styles (the CSP allows 'self' only).
   site.js adds scroll reveals (.js .reveal -> .in), the studio clock and a slight cloud parallax.
   All motion is off under prefers-reduced-motion. Tokens and their contrast checks: DESIGN.md in the design run
   (engine/runs/ct-dark-design-20261102). */

/* --- Tokens ---------------------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Surfaces: an overcast night, blue-grey, never pure black. */
  --bg: #0a0c10;
  --bg-2: #0e1217;
  --surface: #12161c;
  --surface-2: #181d24;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-2: rgba(255, 255, 255, 0.14);

  /* Text, measured against --surface-2 (the lightest surface): ink 15.4, ink-soft 10.2 (both AAA), muted 6.1 (AA; meta text only). */
  --ink: #f2f4f7;
  --ink-soft: #c3cad3;
  --muted: #929cab;

  /* Brand: the ct mark's steel (#6f8295 -> #a9b6c2). One accent, used for state and focus, never for decoration. */
  --steel: #a9b6c2;
  --steel-deep: #6f8295;
  --focus: #8cc4f5;
  --live: #7fe0a8;
  --sun: #f0c890; /* the one warm note: a break in the clouds (Tuesday clock, hero glow) */

  --btn-bg: #f2f4f7;
  --btn-ink: #0a0c10;
  --shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.85);

  /* The sky */
  --sky-1: #06080c;
  --sky-2: #0f151d;
  --sky-3: #18212b;
  --glow: rgba(176, 196, 222, 0.22);
  --glow-x: 78%;
  --glow-y: 18%;
  --cloud-a: 0.16;
  --cloud-b: 0.22;
  --mark-1: #3a4a5c;
  --mark-2: #5d7086;
  --mark-veil: rgba(10, 12, 16, 0.55);
  --grain: 0.08;
  --hero-ink: #f4f6f8;
  --hero-soft: #c9d0d8;
  --glass: rgba(18, 22, 28, 0.55);
  --glass-line: rgba(255, 255, 255, 0.1);

  /* Type: system faces. Scale: major third (1.25) on a 17px body, display sizes fluid. */
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
  --serif: ui-serif, "New York", "Iowan Old Style", "Charter", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --step--2: 0.75rem;                                /* 12  labels (mono, caps) */
  --step--1: 0.875rem;                               /* 14  meta */
  --step-0: 1.0625rem;                               /* 17  body */
  --step-1: 1.3125rem;                               /* 21  lede, card titles */
  --step-2: clamp(1.5rem, 1.2rem + 1.2vw, 1.75rem);  /* 24-28  app names */
  --step-3: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);    /* 28-40  deck, taglines */
  --step-4: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem); /* 36-60  section titles */
  --step-5: clamp(3rem, 1.6rem + 6vw, 6.5rem);       /* 48-104 hero */

  /* Space: 4px grid. */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; --s10: 8rem;

  --gutter: max(1.25rem, env(safe-area-inset-left), env(safe-area-inset-right));
  --max: 72rem;
  --r: 1.5rem;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

@media (min-width: 40rem) {
  :root { --gutter: clamp(1.5rem, 4vw, 2.75rem); }
}

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

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-wrap: break-word;
}
@supports (overflow: clip) { body { overflow-x: clip; } }

h1, h2, h3 { margin: 0; font-family: var(--display); color: var(--ink); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote, dl, dd { margin: 0; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }

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

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 20;
  padding: 0.6rem 1rem;
  border-radius: 0.75rem;
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 0.75rem; }

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

.kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--muted);
  font: 500 0.78rem/1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.kicker::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  flex: none;
  background: currentColor;
  opacity: 0.6;
}

/* --- Header ---------------------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  margin-bottom: -3.75rem; /* floats over the hero sky */
  background: color-mix(in srgb, var(--bg) 0%, transparent);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.scrolled .site-header {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  border-bottom-color: var(--hairline);
}

.bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.75rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  color: var(--hero-ink);
  font: 650 1.05rem/1 var(--display);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark svg { width: 1.7rem; height: 1.7rem; flex: none; }
/* The wordmark: "Cloudy" in the display sans, "Tuesdays" in the italic serif, as in the hero. The serif stack falls
   back to Iowan Old Style, Charter, Georgia or the platform serif italic where New York is missing. */
.wordmark em, .lockup em { font-size: 1.06em; letter-spacing: -0.01em; }
.scrolled .wordmark { color: var(--ink); }

.bar nav ul { display: flex; gap: 0.15rem; }
.bar nav a {
  display: block;
  padding: 0.5rem 0.7rem;
  border-radius: 999px;
  color: var(--hero-soft);
  font-size: 0.95rem;
  text-decoration: none;
}
.scrolled .bar nav a { color: var(--ink-soft); }
.bar nav a:hover { color: var(--ink); background: var(--hairline); }


@media (max-width: 26rem) {
  .bar { gap: 0.4rem; }
  .bar nav a { padding-inline: 0.5rem; }
  .wordmark span { font-size: 0.98rem; }
}
@media (max-width: 24.5rem) {
  .nav-optional { display: none; }
}

/* --- The sky (hero, 404) --------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: clamp(40rem, 100svh, 62rem);
  padding-top: 3.75rem;
  overflow: hidden;
  color: var(--hero-ink);
}

.sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 42%, var(--sky-3) 78%, var(--bg) 100%);
  transition: background 1.2s ease;
}
.sky-glow {
  position: absolute;
  left: calc(var(--glow-x) - 35vmax);
  top: calc(var(--glow-y) - 35vmax);
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), transparent 72%);
  translate: calc(var(--mx, 0) * -1.5rem) calc(var(--my, 0) * -1rem);
}
/* Cloud strips (greyscale, made seamless by tools/make_clouds.mjs) tile horizontally; each layer is three tiles wide and drifts left by exactly one tile per loop. */
.sky-layer {
  position: absolute;
  left: 0;
  width: calc(3 * var(--tile));
  background-repeat: repeat-x;
  background-size: var(--tile) 100%;
  mix-blend-mode: screen; /* greyscale cloud maps: black is clear sky, white is cloud */
  translate: calc(var(--mx, 0) * var(--depth)) 0;
  will-change: transform;
}
.sky-layer.far {
  --depth: -1.25rem;
  --tile: 103.85rem; /* 30rem tall at the image's 1800:520 */
  top: -2%;
  height: 30rem;
  background-image: url("clouds-far.b5c8010da2.webp");
  opacity: var(--cloud-a);
}
.sky-layer.near {
  --depth: -3rem;
  --tile: 123.75rem; /* 36rem tall at 2200:640 */
  top: 34%;
  height: 36rem;
  background-image: url("clouds-near.f993199f7e.webp");
  opacity: var(--cloud-b);
}
.sky-grain, .contact-sky .sky-grain {
  position: absolute;
  inset: 0;
  background: url("grain.c0ee5a56db.svg");
  opacity: var(--grain);
  mix-blend-mode: overlay;
}
/* the bottom of the sky settles into the page */
.sky::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 30%;
  background: linear-gradient(180deg, transparent, var(--bg));
}

@media (prefers-reduced-motion: no-preference) {
  .sky-layer { animation: drift linear infinite; }
  .sky-layer.far { animation-duration: 260s; }
  .sky-layer.near { animation-duration: 150s; animation-delay: -40s; }
  .sky-glow { animation: breathe 14s ease-in-out infinite alternate; }
}
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--tile))); } }
@keyframes breathe { from { opacity: 0.8; scale: 0.94; } to { opacity: 1; scale: 1.06; } }

/* Hero: the headline sits low in a full-height frame (copy left, the live apps right on wide screens), with a thin
   meta line along the bottom edge: studio on the left, its local time on the right. */
.hero-inner {
  display: grid;
  align-content: end;
  justify-items: start;
  gap: var(--s5);
  padding-block: clamp(6rem, 16vh, 10rem) var(--s7);
}
.hero-inner.split { justify-items: stretch; gap: var(--s7); }
@media (min-width: 64rem) {
  .hero-inner.split { grid-template-columns: minmax(0, 1.4fr) minmax(19rem, 0.85fr); align-items: end; gap: var(--s8); }
}
.hero-copy { display: grid; justify-items: start; gap: var(--s5); }
.hero .kicker { color: var(--hero-soft); }
.hero h1 {
  max-width: 11ch;
  color: inherit;
  font-size: var(--step-5);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.05em;
}
.hero h1 em { font-weight: 400; letter-spacing: -0.035em; margin-left: 0.04em; padding-right: 0.04em; }
/* The deck continues the headline's sentence in a second, quieter tone. */
.lede {
  max-width: 30rem;
  color: var(--hero-soft);
  font: 450 clamp(1.2rem, 1rem + 0.9vw, 1.6rem)/1.35 var(--display);
  letter-spacing: -0.015em;
}
.cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s2); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  font: 600 1rem/1 var(--text);
  text-decoration: none;
  transition: transform 0.25s var(--ease), background-color 0.25s ease, border-color 0.25s ease;
}
.btn.primary { background: var(--btn-bg); color: var(--btn-ink); }
.btn.ghost {
  border: 1px solid var(--glass-line);
  background: var(--glass);
  color: var(--hero-ink);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn.ghost:hover { border-color: var(--hairline-2); }
.btn:hover { transform: translateY(-2px); }
.hero-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2) var(--s5);
  padding-block: var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
}
.hero-foot p, .clock {
  color: var(--muted);
  font: 500 var(--step--2)/1.4 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.clock.tuesday { color: var(--sun); }

/* "Out now": every released app as a row (icon, name, tagline), linking to its panel. Rendered by build.py. */
.status {
  display: grid;
  gap: var(--s2);
  padding: var(--s4) var(--s2) var(--s2);
  border: 1px solid var(--glass-line);
  border-radius: calc(var(--r) + 0.25rem);
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}
.status-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-inline: var(--s3);
  color: var(--ink-soft);
  font: 500 var(--step--2)/1.3 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.shelf { display: grid; }
.shelf li + li { border-top: 1px solid var(--hairline); }
.shelf a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "icon name go" "icon line go";
  align-items: center;
  column-gap: var(--s3);
  min-height: 3.75rem;
  padding: var(--s3);
  border-radius: 1rem;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.shelf a:hover { background: var(--hairline); }
.shelf img, .shelf .app-glyph {
  grid-area: icon;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.7rem;
  box-shadow: 0 0 0 1px var(--hairline-2), 0 6px 14px -6px rgba(0, 0, 0, 0.6);
}
.shelf-name { grid-area: name; font: 600 var(--step-0)/1.25 var(--display); letter-spacing: -0.01em; }
.shelf-line { grid-area: line; color: var(--muted); font-size: var(--step--1); line-height: 1.35; }
.shelf svg { grid-area: go; width: 1rem; height: 1rem; color: var(--muted); rotate: 45deg; transition: translate 0.25s var(--ease); }
.shelf a:hover svg { color: var(--ink); translate: 0 2px; }
.dot {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-radius: 50%;
  background: var(--live);
}
.dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  opacity: 0.35;
  transform: scale(2.2);
}
@media (prefers-reduced-motion: no-preference) {
  .dot::after { animation: ping 2.4s var(--ease) infinite; }
  .rise { animation: rise 1.1s var(--ease) both; }
  .r2 { animation-delay: 0.08s; }
  .r3 { animation-delay: 0.18s; }
  .r4 { animation-delay: 0.26s; }
  .r5 { animation-delay: 0.4s; }
}
@keyframes ping { 0% { transform: scale(1); opacity: 0.5; } 80%, 100% { transform: scale(2.8); opacity: 0; } }
@keyframes rise { from { opacity: 0; translate: 0 1.5rem; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }

/* --- Sections -------------------------------------------------------------------------------------- */

.section { padding-block: clamp(var(--s7), 7vw, var(--s9)); }

.section-head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }

.section-title {
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.prose { max-width: 40rem; color: var(--ink-soft); font-size: 1.12rem; line-height: 1.65; }

/* Scroll reveals (site.js marks <html class="js"> and adds .in when an element scrolls into view). */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    translate: 0 2rem;
    transition: opacity 0.9s var(--ease), translate 0.9s var(--ease);
  }
  .js .reveal.in { opacity: 1; translate: 0 0; }
  .js .principles .reveal:nth-child(2) { transition-delay: 0.08s; }
  .js .principles .reveal:nth-child(3) { transition-delay: 0.16s; }
}

/* --- Apps (rendered by build.py from content/apps.json, released apps only) ----------------------- */

.apps-section { padding-top: clamp(2rem, 5vw, 4rem); }
.apps { display: grid; gap: 1.25rem; }
@media (min-width: 46rem) {
  .apps { grid-template-columns: repeat(2, 1fr); }
}
.apps .showcase { grid-column: 1 / -1; }
/* The featured apps lead as full panels; the rest follow as a row of compact cards (three across on wide screens,
   two on tablets, where a last odd card takes the full row). */
@media (min-width: 46rem) and (max-width: 63.99rem) {
  .apps .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .apps { grid-template-columns: repeat(6, 1fr); }
  .apps .card { grid-column: span 2; }
}

.app h3 { font-size: 1.6rem; letter-spacing: -0.03em; color: inherit; }
.app-id { display: flex; align-items: center; gap: 1rem; }
.app-icon {
  width: 4.5rem;
  height: 4.5rem;
  flex: none;
  border-radius: 1.1rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 14px 30px -12px rgba(0, 0, 0, 0.55);
}
.app-glyph { background: linear-gradient(180deg, #6f8295, #a9b6c2); }
.platform { color: var(--muted); font-size: 0.92rem; }
.tagline { font: 700 var(--step-4)/1 var(--display); letter-spacing: -0.045em; text-wrap: balance; }
.summary { max-width: 30rem; color: var(--ink-soft); font-size: 1.1rem; }
/* A second line in the app's audience's language (Dilo: Spanish), quieter, in the serif italic. */
.tagline-es {
  margin-top: -0.5rem;
  color: var(--ink-soft);
  font: 400 italic clamp(1.3rem, 1rem + 1.2vw, 1.75rem)/1.2 var(--serif);
  letter-spacing: -0.02em;
}
.features { display: grid; gap: 0.55rem; }
.features li {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  color: var(--ink-soft);
}
.features li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  flex: none;
  translate: 0 -0.1rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
.get { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 0.4rem; }
.price { color: var(--muted); font-size: 0.92rem; }

/* App Store button, drawn to Apple's badge proportions (black, hairline border). */
.store {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3.2rem;
  padding: 0.5rem 1.15rem 0.5rem 0.95rem;
  border: 1px solid #a6a6a6;
  border-radius: 0.8rem;
  background: #000;
  color: #fff;
  font: 600 1.3rem/1 var(--display);
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: transform 0.25s var(--ease);
}
.store svg { width: 1.7rem; height: 1.7rem; translate: 0 -0.08rem; }
.store > span:not(.visually-hidden) { display: grid; gap: 0.15rem; }
.store small { font: 500 0.68rem/1 var(--text); letter-spacing: 0.01em; }
.store:hover { transform: translateY(-2px); }

.app-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: max-content;
  color: var(--ink-soft);
  font: 500 0.9rem/1.3 var(--mono);
  text-decoration: none;
}
.app-link svg { width: 1rem; height: 1rem; }
.app-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.25em; }
/* The app's website and its policies, one quiet line under the store button. */
.app-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
.app-legal { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.app-legal a {
  display: inline-block;
  padding-block: 0.3rem; /* a comfortable touch target without changing the line */
  color: var(--muted);
  font-size: var(--step--1);
  text-decoration: underline;
  text-decoration-color: var(--hairline-2);
  text-underline-offset: 0.25em;
}
.app-legal a:hover { color: var(--ink); text-decoration-color: currentColor; }

.card {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--hairline);
  border-radius: calc(var(--r) + 0.25rem);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.card .tagline { font-size: clamp(1.6rem, 3vw, 2.1rem); }
/* Compact app cards line up: the store button and links sit at the bottom of every card in a row. */
.apps .card { display: flex; flex-direction: column; }
.apps .card .get { margin-top: auto; padding-top: 0.4rem; }
.apps .card .summary { font-size: 1.02rem; }
.apps .card .app-meta { flex-direction: column; align-items: flex-start; gap: 0.2rem; }

/* Showcase: one dark panel per app. A single light source in the app's own colour (top corner), a hairline edge and
   the product itself; nothing else competes. Palette per app: .showcase--<id>. */
.showcase {
  --sc-bg: #0f1218;
  --sc-a: rgba(111, 130, 149, 0.4);
  --sc-b: rgba(169, 182, 194, 0.12);
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--s7);
  overflow: hidden;
  padding: clamp(1.5rem, 5vw, 4rem);
  border: 1px solid var(--hairline);
  border-radius: calc(var(--r) + 0.75rem);
  background:
    radial-gradient(55% 65% at 85% 0%, var(--sc-a), transparent 72%),
    radial-gradient(45% 50% at 0% 100%, var(--sc-b), transparent 72%),
    var(--sc-bg);
  color: var(--ink);
}
.showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("grain.c0ee5a56db.svg");
  opacity: 0.1;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.showcase--slate {
  --sc-bg: #0e0e1a;
  --sc-a: rgba(92, 70, 220, 0.5);
  --sc-b: rgba(240, 112, 88, 0.16);
}
.showcase--groundwork {
  --sc-bg: #111317;
  --sc-a: rgba(184, 35, 107, 0.38);
  --sc-b: rgba(31, 95, 168, 0.22);
}
.showcase--dilo {
  --sc-bg: #0b0e1c;
  --sc-a: rgba(52, 96, 235, 0.48);
  --sc-b: rgba(246, 201, 64, 0.16);
}
.showcase--cloudy-tower {
  --sc-bg: #12110e;
  --sc-a: rgba(201, 160, 82, 0.36);
  --sc-b: rgba(169, 182, 194, 0.12);
}
.showcase-copy { display: grid; align-content: center; justify-items: start; gap: 1.2rem; }

.stage {
  position: relative;
  min-height: 30rem;
  margin-inline: auto;
  width: min(100%, 30rem);
}
.device { position: absolute; }
.device img { width: 100%; height: auto; }
.phone {
  width: 54%;
  padding: 2.4%;
  border-radius: 13% / 6.4%;
  background: linear-gradient(145deg, #3a3d46, #121318 40%, #2a2c33);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 40px 70px -24px rgba(0, 0, 0, 0.75),
    0 10px 24px -10px rgba(0, 0, 0, 0.5);
}
.phone img { border-radius: 10.5% / 5.2%; }
.phone.front { left: 36%; top: 0; z-index: 2; }
.phone.back { left: 2%; top: 9%; z-index: 1; rotate: -7deg; filter: brightness(0.82) saturate(0.9); }
.watch {
  left: 6%;
  bottom: 0;
  z-index: 3;
  width: 30%;
  padding: 3.2%;
  border-radius: 26%;
  background: linear-gradient(145deg, #4a4d56, #15161b 45%, #2c2e35);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 30px 50px -18px rgba(0, 0, 0, 0.8);
}
.watch img { border-radius: 20%; }
.watch::after { /* digital crown */
  content: "";
  position: absolute;
  right: -4.5%;
  top: 24%;
  width: 5%;
  height: 18%;
  border-radius: 0 0.3rem 0.3rem 0;
  background: linear-gradient(90deg, #2b2d33, #5b5f69);
}

@media (min-width: 60rem) {
  .showcase { grid-template-columns: 1fr 1.05fr; align-items: center; min-height: 40rem; }
  .stage { min-height: 36rem; width: 100%; max-width: 34rem; margin-right: -1rem; }
  /* every other panel mirrors, so a page of apps reads as a rhythm, not a list */
  .apps .showcase:nth-child(even) { grid-template-columns: 1.05fr 1fr; }
  .apps .showcase:nth-child(even) .stage { order: -1; margin-right: 0; margin-left: -1rem; }
}
/* A two-phone stage (no watch) sits a little lower so the pair stays centred. */
.stage:not(:has(.watch)) .phone.front { top: 4%; }
.stage:not(:has(.watch)) .phone.back { top: 12%; }
/* A one-phone stage centres the phone. */
.stage:not(:has(.back)) .phone.front { left: 21%; top: 8%; width: 58%; }
@media (max-width: 30rem) {
  .stage { min-height: 0; aspect-ratio: 1 / 1.08; }
}

/* Route card (a featured app without screenshots): the icon large, then the course as a line of stops, like a
   boarding pass. Text, so it reads, scales and translates as it is. */
.stage--route { display: grid; place-items: center; }
.stage.stage--route { min-height: 0; aspect-ratio: auto; }
.pass {
  display: grid;
  justify-items: center;
  gap: 1rem;
  width: min(100%, 24rem);
  padding: clamp(1.75rem, 5vw, 2.75rem) clamp(1.25rem, 4vw, 2.25rem);
  border: 1px solid var(--glass-line);
  border-radius: calc(var(--r) + 0.5rem);
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.8);
  text-align: center;
}
.pass-icon {
  width: 9rem;
  height: 9rem;
  border-radius: 22.5%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 24px 44px -18px rgba(0, 0, 0, 0.75);
}
.pass-label {
  margin-top: 0.5rem;
  color: var(--muted);
  font: 500 var(--step--2)/1.3 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pass-title { margin-top: -0.5rem; font: 400 italic clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem)/1.1 var(--serif); letter-spacing: -0.02em; }
.route { display: grid; width: 100%; margin-top: 0.25rem; text-align: left; }
.route li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 0;
  color: var(--ink-soft);
}
.route li + li { border-top: 1px dashed var(--hairline-2); }
.route li::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  flex: none;
  border: 1.5px solid var(--steel);
  border-radius: 50%;
}
.route li:first-child { color: var(--ink); font-weight: 600; }
.route li:first-child::before { border-color: var(--sun); background: var(--sun); }
/* One-column layouts already show the icon at the top of the panel; the route card stands alone there. */
@media (max-width: 59.99rem) {
  .pass-icon { display: none; }
  .pass-label { margin-top: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .showcase .device { transition: translate 1.4s var(--ease), opacity 1.2s var(--ease); }
  .js .showcase:not(.in) .phone.front { translate: 0 3rem; }
  .js .showcase:not(.in) .phone.back { translate: 2rem 4rem; opacity: 0; }
  .js .showcase:not(.in) .watch { translate: 0 2rem; opacity: 0; }
  .js .showcase .phone.back { transition-delay: 0.12s; }
  .js .showcase .watch { transition-delay: 0.3s; }
  .js .showcase .pass { transition: translate 1.4s var(--ease), opacity 1.2s var(--ease); }
  .js .showcase:not(.in) .pass { translate: 0 3rem; opacity: 0; }
}

.next {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 1.25rem 1.5rem;
  border: 1px dashed color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: calc(var(--r) + 0.25rem);
  color: var(--muted);
}
.next strong { color: var(--ink); font-weight: 600; }
.next-mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 0.9rem;
  background: linear-gradient(180deg, #6f8295, #a9b6c2);
}
.next-mark svg { width: 70%; fill: #fbfaf7; }
@media (prefers-reduced-motion: no-preference) {
  .next-mark svg { animation: bob 6s ease-in-out infinite alternate; }
}
@keyframes bob { from { translate: -6% 0; } to { translate: 6% 0; } }

/* --- Principles ------------------------------------------------------------------------------------ */

.principles { display: grid; border-top: 1px solid var(--hairline); }
.principles li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1.25rem;
  align-items: baseline;
  padding-block: clamp(1.5rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--hairline);
}
.principles .num {
  grid-row: span 2;
  color: var(--muted);
  font: 500 0.85rem/1 var(--mono);
  letter-spacing: 0.1em;
}
.principles h3 {
  font: 400 italic clamp(2.6rem, 7.5vw, 5.5rem)/1 var(--serif);
  letter-spacing: -0.035em;
}
.principles p { max-width: 30rem; color: var(--ink-soft); font-size: 1.08rem; }

@media (min-width: 52rem) {
  .principles li { grid-template-columns: 4rem 1fr minmax(16rem, 26rem); align-items: center; }
  .principles .num { grid-row: auto; }
}

/* --- Studio ---------------------------------------------------------------------------------------- */

.studio {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(4rem, 11vw, 9rem);
  background: linear-gradient(180deg, var(--bg), var(--bg-2) 30%, var(--bg-2) 70%, var(--bg));
}
/* Cloud layers blend (screen) only with the background inside their own stacking context, so each sky box
   repeats its parent's background. */
.studio-sky, .contact-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: inherit; }
.studio-sky .sky-layer.far { top: 10%; opacity: calc(var(--cloud-a) * 0.4); }
.studio-inner { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.quote p {
  max-width: 22ch;
  font: 400 clamp(2.1rem, 5.6vw, 4.6rem)/1.08 var(--serif);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.quote p::before { content: "“"; }
.quote p::after { content: "”"; }
.studio-grid { display: grid; gap: 2rem; }
@media (min-width: 52rem) {
  .studio-grid { grid-template-columns: 1.2fr 1fr; gap: 4rem; align-items: start; }
}
.facts { display: grid; border-top: 1px solid var(--hairline); }
.facts div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--hairline);
}
.facts dt { color: var(--muted); font: 500 0.78rem/1.6 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.facts dd { color: var(--ink); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.facts a { text-underline-offset: 0.2em; text-decoration-color: var(--hairline); }
.facts a:hover { text-decoration-color: currentColor; }

/* --- Privacy --------------------------------------------------------------------------------------- */

.promises { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2rem; }
.promises li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.1rem 0.7rem 0.85rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 600;
}
.promises svg { width: 1.2rem; height: 1.2rem; color: var(--live); }

/* --- Contact --------------------------------------------------------------------------------------- */

.contact {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: start;
  gap: 1.1rem;
  overflow: hidden;
  padding: clamp(2rem, 7vw, 5.5rem);
  border-radius: calc(var(--r) + 0.75rem);
  background: linear-gradient(170deg, #121a24, #253241 60%, #3d4d5e);
  color: #fbfaf7;
}
.contact-sky .sky-layer.near { top: 20%; opacity: 0.55; }
.contact .kicker { color: rgba(251, 250, 247, 0.8); }
.contact h2 {
  color: inherit;
  font-size: clamp(3rem, 11vw, 8rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
}
.contact p { max-width: 32rem; color: rgba(251, 250, 247, 0.9); font-size: 1.15rem; }
.email {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  margin-top: 0.75rem;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  background: #fbfaf7;
  color: #0b0d12;
  font: 650 clamp(1rem, 3.6vw, 1.3rem)/1.2 var(--display);
  text-decoration: none;
  overflow-wrap: anywhere;
  box-shadow: 0 18px 40px -18px rgba(20, 30, 45, 0.6);
  transition: transform 0.25s var(--ease);
}
.email svg { width: 1.1rem; height: 1.1rem; flex: none; }
.email:hover { transform: translateY(-2px); background: #fff; }
.contact :focus-visible { outline-color: #fbfaf7; }
/* Phones: the address stays on one line inside the pill. */
@media (max-width: 26rem) {
  .contact { padding-inline: 1.25rem; }
  .email {
    gap: 0.4rem;
    padding-inline: 1.05rem;
    font-size: clamp(0.88rem, 4.1vw, 1rem);
    overflow-wrap: normal;
    white-space: nowrap;
  }
  .email svg { width: 0.95rem; height: 0.95rem; }
}


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

.site-footer { padding-top: clamp(1rem, 4vw, 3rem); overflow: hidden; }
.bigmark {
  padding-bottom: 0.16em;
  font: 700 clamp(2.6rem, 12.4vw, 10.5rem)/1.05 var(--display);
  letter-spacing: -0.065em;
  white-space: nowrap;
  color: transparent;
  background:
    linear-gradient(var(--mark-veil), var(--mark-veil)),
    url("clouds-far.b5c8010da2.webp") 0 40% / 900px 260px repeat-x,
    linear-gradient(180deg, var(--mark-1), var(--mark-2));
  background-blend-mode: normal, screen, normal;
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
}
@media (prefers-reduced-motion: no-preference) {
  .js .bigmark.in { animation: drift-text 90s linear infinite; }
}
@keyframes drift-text { to { background-position: 0 0, -900px 40%, 0 0; } }
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 1.75rem calc(1.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 0.92rem;
}
.foot-id { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin: 0; }
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink);
  font: 650 1rem/1 var(--display);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.lockup svg { width: 1.45rem; height: 1.45rem; flex: none; }
.bigmark em { font-weight: 400; letter-spacing: -0.035em; padding-right: 0.08em; }
.foot ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.foot a { color: var(--ink-soft); text-underline-offset: 0.2em; }
.foot a:hover { color: var(--ink); }

/* --- Services (/services) -------------------------------------------------------------------------- */

.services-hero { min-height: clamp(30rem, 70svh, 44rem); grid-template-rows: 1fr; }
.services-hero .lede { max-width: 38rem; }
.offers { display: grid; gap: 1.25rem; }
@media (min-width: 52rem) {
  .offers { grid-template-columns: repeat(2, 1fr); }
}
.offer h3 { font-size: 1.6rem; letter-spacing: -0.03em; }
.offer .tagline { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.offer-facts { margin-top: 0.5rem; }
.offer-facts div { gap: 1rem; }
.offer-note { color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
.offer .cta { margin-top: auto; padding-top: 0.5rem; }
.offer-terms { color: var(--muted); font-size: 0.9rem; }
.offer-terms a, .legal-doc .prose a, .legal-list a { color: var(--ink-soft); text-underline-offset: 0.2em; }
.offer-terms a:hover, .legal-doc .prose a:hover, .legal-list a:hover { color: var(--ink); }
.terms { display: grid; gap: 1rem; }
@media (min-width: 52rem) {
  .terms-links { grid-template-columns: repeat(2, 1fr); }
}
.terms-link { height: 100%; color: var(--ink); text-decoration: none; transition: border-color 0.25s ease, transform 0.25s var(--ease); }
.terms-link strong { font: 600 clamp(1.3rem, 2.4vw, 1.6rem)/1.2 var(--display); letter-spacing: -0.03em; }
.terms-more { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.95rem; }
.terms-more svg { width: 1rem; height: 1rem; }
.terms-link:hover { border-color: var(--hairline-2); transform: translateY(-2px); }
.terms-link:hover .terms-more { color: var(--ink); }
.terms-list {
  display: grid;
  gap: 0.75rem;
  max-width: 46rem;
  margin-top: 1.25rem;
  padding-left: 1.25rem;
  list-style: decimal;
  color: var(--ink-soft);
  line-height: 1.6;
}
.terms-list strong { color: var(--ink); font-weight: 600; }

/* --- Hosted terms (/services/terms/<offer>) ------------------------------------------------------ */

.legal-doc { max-width: 48rem; padding-block: clamp(7rem, 14vw, 9rem) var(--s8); }
.legal-head { display: grid; gap: 1rem; margin-bottom: var(--s6); }
.legal-meta { color: var(--muted); font: 500 0.78rem/1.6 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.legal-list { margin-top: 0; font-size: var(--step-0); }
.legal-accept { margin-top: var(--s7); }
.legal-accept p { color: var(--ink-soft); }
.legal-accept .btn.ghost { color: var(--ink); }

/* --- 404 ------------------------------------------------------------------------------------------- */

.lost { min-height: clamp(32rem, 86svh, 50rem); grid-template-rows: 1fr; }

/* --- Preferences ----------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .store, .email, .sky { transition: none; }
  .btn:hover, .store:hover, .email:hover { transform: none; }
}

@media (forced-colors: active) {
  .dot, .app-glyph, .next-mark { forced-color-adjust: none; }
  .contact, .showcase, .card, .status, .pass { border: 1px solid CanvasText; }
  .bigmark { color: CanvasText; background: none; }
}