/* unrotten.app (2026-09-29). The app's own language on the web: the Welcome
   screen's dawn over Home's Sage Veil, New York titles, white cards on warm
   paper, thin green bars. Colours are HomeDesign's and LevelAscentPalette's. */
:root {
  --paper: #f5f3ee;
  --paper-deep: #eeebe4;
  --card: #ffffff;
  --ink: #192d28;
  --ink-soft: rgba(25, 45, 40, 0.74);
  --muted: #6f7a75;
  --hair: rgba(25, 45, 40, 0.1);
  --green: #254f43;
  --sage: #aac6a3;
  --deep: #0b231c;
  --dawn: #f4d6a0;
  --cream: #fffef7;
  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: min(1160px, 100% - 48px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.wrap { width: var(--wrap); margin-inline: auto; }
.serif, h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; }
.eyebrow { margin: 0; font: 600 12.5px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- The dawn: WebGL veil, sunrise, motes (OnboardingActivatedScreen) */
.dawn { position: relative; isolation: isolate; overflow: hidden; color: var(--cream); background: #173d33 url(/img/veil.jpg) center / cover no-repeat; }
.dawn .veil, .dawn .motes, .dawn .sun, .dawn .night, .dawn::before, .dawn::after { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dawn .veil { z-index: -5; opacity: 0; transition: opacity 0.8s ease; }
.dawn.is-live .veil { opacity: 1; }
.dawn::before { content: ""; z-index: -4; background: linear-gradient(180deg, rgba(11, 35, 28, 0.6) 0%, rgba(11, 35, 28, 0) 38%); }
.dawn .sun { z-index: -3; mix-blend-mode: plus-lighter; background: radial-gradient(520px circle at 50% 30%, rgba(255, 254, 247, 0.22), rgba(244, 214, 160, 0.08) 55%, rgba(244, 214, 160, 0) 100%); }
.dawn::after { content: ""; z-index: -2; background: linear-gradient(180deg, rgba(37, 79, 67, 0) 50%, rgba(37, 79, 67, 0.65) 100%); }
.dawn .motes { z-index: -1; mix-blend-mode: plus-lighter; filter: blur(1.4px); }
.dawn .night { z-index: 1; background: #000; opacity: 0; }
.dawn.opening .night { animation: morning 1.8s cubic-bezier(0.3, 0, 0.2, 1) both; }
@keyframes morning { from { opacity: 0.55; } to { opacity: 0; } }

.nav { position: absolute; z-index: 3; inset: 0 0 auto; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.brand { font: 400 24px/1 var(--serif); letter-spacing: -0.01em; text-decoration: none; color: var(--cream); }
.nav nav { display: flex; gap: 28px; font-size: 15px; }
.nav nav a { color: rgba(255, 254, 247, 0.78); text-decoration: none; }
.nav nav a:hover { color: var(--cream); }

.hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.hero .content { position: relative; z-index: 2; width: var(--wrap); margin: 0 auto; padding: 110px 0 88px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero .coach { width: clamp(210px, 25vw, 318px); filter: drop-shadow(0 28px 36px rgba(4, 20, 15, 0.35)); animation: float 5s ease-in-out infinite alternate; }
@keyframes float { from { transform: translateY(4px); } to { transform: translateY(-8px); } }
.hero h1 { margin: 26px 0 14px; max-width: 13.5ch; font-size: clamp(42px, 5.6vw, 74px); line-height: 1.04; text-wrap: balance; }
.hero .lead { margin: 0; font-size: clamp(19px, 1.7vw, 23px); color: rgba(255, 254, 247, 0.8); }
.cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 40px; padding: 17px 30px; border-radius: 999px; background: var(--cream); color: var(--ink); font: 600 17px/1 var(--sans); text-decoration: none; box-shadow: 0 16px 40px -12px rgba(4, 20, 15, 0.55); }
.cta small { font: inherit; color: var(--muted); font-weight: 500; }
.fine { margin: 16px 0 0; font-size: 14px; color: rgba(255, 254, 247, 0.62); }

/* ---------- Sections */
.section { padding: clamp(84px, 9vw, 128px) 0; }
.section.deep-paper { background: var(--paper-deep); }
.split { display: grid; gap: 56px; align-items: center; }
@media (min-width: 920px) {
  .split { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 72px; }
  .split.flip > :first-child { order: 2; }
}
.copy h2, .center h2 { margin: 18px 0 18px; font-size: clamp(36px, 4.3vw, 56px); line-height: 1.06; text-wrap: balance; }
.copy p.body, .center p.body { margin: 0 0 14px; max-width: 36ch; font-size: 19px; line-height: 1.55; color: var(--ink-soft); }
.center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.center p.body { max-width: 44ch; }
.band .copy h2 { color: var(--cream); }
.band .copy p.body { color: rgba(255, 254, 247, 0.76); }
.band .eyebrow { color: var(--sage); }

/* ---------- MindBattery widget (the Home Screen widget's After design) */
.battery { margin: 0; position: relative; display: grid; grid-template-columns: 42% 1fr; gap: clamp(14px, 2.4vw, 28px); align-items: center; padding: clamp(20px, 3vw, 34px); border-radius: clamp(28px, 3vw, 38px); background: #fbfaf6 url(/img/veil-light.webp) center / cover; box-shadow: 0 1px 1px rgba(25, 45, 40, 0.05), 0 30px 70px -28px rgba(25, 45, 40, 0.35); aspect-ratio: 2.14; }
.ring { position: relative; aspect-ratio: 1; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring img { position: absolute; left: 50%; top: 50%; width: 58%; transform: translate(-50%, -50%); }
.battery .wordmark { width: min(170px, 72%); aspect-ratio: 512 / 90; margin-bottom: clamp(6px, 1.2vw, 14px); background: var(--ink); -webkit-mask: url(/img/mindbattery.webp) left center / contain no-repeat; mask: url(/img/mindbattery.webp) left center / contain no-repeat; }
.score { margin: 0; display: flex; align-items: baseline; gap: 12px; }
.score b { font: 300 clamp(40px, 5.2vw, 62px)/1 var(--sans); letter-spacing: -0.03em; }
.score span { font: 600 clamp(16px, 1.8vw, 22px)/1.1 var(--sans); }
.limit { margin-top: clamp(12px, 2vw, 22px); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.label { font: 600 11px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.pill { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--hair); background: rgba(255, 255, 255, 0.72); font: 700 10.5px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
.usage { margin: 8px 0 10px; font: 300 clamp(24px, 2.6vw, 32px)/1 var(--sans); }
.usage span { font-size: 0.56em; color: var(--muted); }
.bar { height: 6px; border-radius: 3px; background: rgba(25, 45, 40, 0.1); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.island-row { margin-top: 28px; display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: 15px; }
.island { flex: none; display: inline-flex; align-items: center; justify-content: space-between; gap: 34px; padding: 7px 8px 7px 9px; border-radius: 999px; background: #000; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5); }
.island .mini { display: flex; align-items: center; gap: 7px; color: #fff; font: 600 15px/1 var(--sans); }
.island .mini svg { width: 26px; height: 26px; }
.island img { width: 30px; height: auto; }

/* ---------- Goals (Home's Your goals, white tiles, build 114) */
.home-crop { padding: clamp(18px, 2.6vw, 30px); border-radius: clamp(28px, 3vw, 40px); background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); }
.deep-paper .home-crop { background: var(--paper); }
.home-crop h3 { margin: 4px 4px 2px; display: flex; align-items: baseline; justify-content: space-between; font-size: 24px; }
.home-crop h3 span { font: 500 14px/1 var(--sans); color: var(--muted); }
.home-crop .answer { margin: 0 4px 16px; color: var(--muted); font-size: 15.5px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { padding: 16px 16px 14px; border-radius: 22px; background: var(--card); box-shadow: 0 1px 2px rgba(25, 45, 40, 0.05), 0 8px 24px -14px rgba(25, 45, 40, 0.18); }
.tile.wide { grid-column: 1 / -1; }
.tile header { display: flex; align-items: center; gap: 8px; font: 600 15px/1.25 var(--sans); }
.tile header svg { flex: none; width: 18px; height: 18px; }
.fig { margin: 14px 0 12px; font-family: var(--serif); font-size: 34px; line-height: 1; }
.fig span { font-size: 16px; color: var(--muted); }
.tile.wide .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tile.wide .fig { margin: 0 0 12px; }
.tile .bar { height: 4px; }
.tile .note { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); }
.sessions { display: flex; align-items: flex-end; gap: 4px; height: 12px; border-bottom: 1px dashed rgba(25, 45, 40, 0.22); padding-bottom: 3px; }
.sessions i { width: 5px; border-radius: 1.5px; background: #2d6a74; }
.pace { position: relative; }
.pace::after { content: ""; position: absolute; left: 3%; top: -4px; width: 2px; height: 12px; border-radius: 1px; background: var(--ink); opacity: 0.55; }

/* ---------- Shield */
.band { position: relative; }
.band.dawn { padding: clamp(84px, 9vw, 128px) 0; }
.shield-scene { margin: 0; position: relative; display: flex; flex-direction: column; align-items: center; }
.shield-scene img { width: min(380px, 78%); filter: drop-shadow(0 26px 34px rgba(4, 20, 15, 0.4)); }
.glass { border-radius: 22px; border: 1px solid rgba(255, 254, 247, 0.2); background: rgba(255, 254, 247, 0.1); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); }
.shield-banner { margin-top: -18px; width: min(430px, 100%); display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.shield-banner .badge { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 254, 247, 0.14); }
.shield-banner .badge svg { width: 18px; height: 18px; }
.shield-banner div { flex: 1; min-width: 0; }
.shield-banner b { display: block; font: 600 16px/1.2 var(--sans); }
.shield-banner span { display: block; font-size: 14px; color: rgba(255, 254, 247, 0.72); }
.shield-banner .until { flex: none; font: 600 13px/1 var(--sans); color: var(--cream); padding: 7px 10px; border-radius: 999px; background: rgba(255, 254, 247, 0.12); }

/* ---------- Coaches */
.coaches { margin-top: clamp(36px, 5vw, 64px); width: min(920px, 100%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: clamp(8px, 3vw, 48px); }
.coaches figure { margin: 0; text-align: center; }
.coaches img { width: 100%; filter: drop-shadow(0 18px 22px rgba(25, 45, 40, 0.18)); }
.coaches figure:nth-child(2) img { transform: scale(1.12); transform-origin: 50% 100%; }
.coaches figcaption { margin-top: 16px; font: 400 clamp(17px, 2vw, 24px)/1.2 var(--serif); }

/* ---------- Paper of the week */
.paper { margin-top: 44px; width: min(720px, 100%); padding: clamp(26px, 4vw, 44px); border-radius: 30px; background: var(--card); text-align: left; box-shadow: 0 1px 2px rgba(25, 45, 40, 0.05), 0 30px 60px -32px rgba(25, 45, 40, 0.3); }
.paper h3 { margin: 16px 0 10px; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; }
.paper .meta { margin: 0 0 18px; color: var(--muted); font-size: 14.5px; }
.paper p { margin: 0; color: var(--ink-soft); }
.paper a { display: inline-block; margin-top: 20px; color: var(--green); font-weight: 600; text-decoration: none; }
.paper a:hover { text-decoration: underline; }

/* ---------- Privacy */
.promises { margin-top: 56px; display: grid; gap: 36px; text-align: left; width: 100%; }
@media (min-width: 820px) { .promises { grid-template-columns: repeat(3, 1fr); } }
.promises div { padding-top: 22px; border-top: 1px solid rgba(25, 45, 40, 0.16); }
.promises h3 { margin: 0 0 10px; font-size: 24px; }
.promises p { margin: 0; color: var(--ink-soft); }
.more { margin-top: 44px; color: var(--green); font-weight: 600; text-decoration: none; }
.more:hover { text-decoration: underline; }

/* ---------- Closing */
.closing .content { position: relative; z-index: 2; padding: clamp(96px, 12vw, 170px) 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.closing img { width: clamp(150px, 16vw, 210px); filter: drop-shadow(0 24px 30px rgba(4, 20, 15, 0.4)); }
.closing h2 { margin: 22px 0 0; font-size: clamp(40px, 5vw, 66px); line-height: 1.05; }

/* ---------- Footer */
footer.site { background: var(--deep); color: rgba(255, 254, 247, 0.62); font-size: 14.5px; }
footer.site .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; padding: 44px 0 48px; }
footer.site .brand { font-size: 22px; }
footer.site nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
footer.site a { text-decoration: none; }
footer.site nav a:hover { color: var(--cream); }
footer.site .legal { width: 100%; padding-top: 22px; border-top: 1px solid rgba(255, 254, 247, 0.1); }

/* ---------- Documents (Privacy, Terms, Health & AI, Support) */
.page-head .content { position: relative; z-index: 2; width: var(--wrap); margin: 0 auto; padding: 150px 0 64px; }
.page-head h1 { margin: 16px 0 12px; font-size: clamp(42px, 5.4vw, 68px); line-height: 1.04; }
.page-head .eyebrow { color: var(--sage); }
.page-head p.sub { margin: 0; color: rgba(255, 254, 247, 0.72); font-size: 17px; max-width: 46ch; }
.doc { display: grid; gap: 48px; padding: 64px 0 120px; }
@media (min-width: 980px) { .doc { grid-template-columns: 240px minmax(0, 680px); gap: 80px; } }
.toc { display: none; }
@media (min-width: 980px) {
  .toc { display: block; position: sticky; top: 32px; align-self: start; font-size: 14.5px; }
  .toc p { margin: 0 0 14px; font: 600 12px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
  .toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
  .toc a { color: var(--ink-soft); text-decoration: none; }
  .toc a:hover { color: var(--green); }
}
.doc article section { padding-top: 8px; scroll-margin-top: 24px; }
.doc article section + section { margin-top: 36px; }
.doc article h2 { margin: 0 0 14px; font-size: clamp(26px, 2.4vw, 31px); line-height: 1.18; }
.doc article p { margin: 0 0 16px; color: var(--ink-soft); line-height: 1.68; }
.doc article a, .support a { color: var(--green); }

.support { padding: 64px 0 120px; display: grid; gap: 16px; }
@media (min-width: 820px) { .support { grid-template-columns: 1fr 1fr; } }
.support .card { padding: 30px 30px 26px; border-radius: 26px; background: var(--card); box-shadow: 0 1px 2px rgba(25, 45, 40, 0.05), 0 18px 40px -26px rgba(25, 45, 40, 0.3); }
.support .card.lead-card { grid-column: 1 / -1; }
.support .card h2 { margin: 0 0 10px; font-size: 26px; }
.support .card p { margin: 0 0 10px; color: var(--ink-soft); }
.support .mail { display: inline-block; margin-top: 6px; font: 400 clamp(24px, 3vw, 34px)/1.2 var(--serif); text-decoration: none; }

@media (max-width: 640px) {
  .nav .wrap { height: 72px; }
  .nav nav { gap: 18px; }
  .battery { grid-template-columns: 1fr; aspect-ratio: auto; }
  .ring { width: 62%; margin: 0 auto; }
  .island-row { flex-direction: column; align-items: flex-start; }
  .tiles { gap: 10px; }
  .home-crop { padding: 14px; }
  .tile { padding: 14px 12px 12px; }
  .tile header { font-size: 14px; }
  .fig { font-size: 28px; }
  .coaches { width: calc(100vw - 12px); gap: 0; }
  .coaches figcaption { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .coach { animation: none; }
  .dawn.opening .night { animation: none; }
  html { scroll-behavior: auto; }
}