/* withpoise.app — one stylesheet for every page. Light only, like the app. */
:root {
  --cream: #F9F4EA;
  --cream-mid: #EDF2E7;
  --mint-wash: #D5E7DC;
  --ink: #26302B;
  --ink-mid: #4A6366;
  --ink-faint: #7E9192;
  --evergreen: #3E5C50;
  --evergreen-deep: #345046;
  --moss: #5A8472;
  --mint: #B8D9C5;
  --sage: #7A9E9F;
  --clay: #8E5F49;
  --apricot: #E2A878;
  --shell: #141A17;
  --line: #D8D2C9;
  --line-light: #E4E8E0;
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
/* The page's base colour is cream, so Safari's strip under the clock and the top bounce match the hero;
   the fade keeps the bottom bounce on the mint the page ends in (Randall, Oct 29: a mint bar at the top in Safari). */
html { background-color: var(--cream); background-image: linear-gradient(180deg, var(--cream) 0%, var(--cream) 45%, var(--mint-wash) 100%); color-scheme: light; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-mid) 50%, var(--mint-wash) 100%);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}
/* The arrival glow: the app's soft dome behind the mark, cool with a little warmth. */
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 70vh;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 50% 18%, rgba(122,158,159,0.16), rgba(184,217,197,0.12) 45%, rgba(184,217,197,0) 75%),
    radial-gradient(45% 30% at 50% 10%, rgba(232,190,150,0.14), rgba(232,190,150,0) 70%);
}
body.home::before {
  height: 820px;
  background:
    radial-gradient(60% 45% at 50% 22%, rgba(122,158,159,0.16), rgba(184,217,197,0.12) 45%, rgba(184,217,197,0) 75%),
    radial-gradient(45% 30% at 50% 12%, rgba(232,190,150,0.16), rgba(232,190,150,0) 70%);
}

a { color: var(--evergreen); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--clay); }
a:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; border-radius: 2px; }

/* Lockup: mark and wordmark. The mark keeps the app's proportions (8 : 13 : 17). */
.lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-decoration: none;
  color: inherit;
}
.lockup .mark { width: 60px; height: auto; display: block; }
.lockup .wordmark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin-top: 0.9rem;
  color: var(--ink);
}
.lockup:hover .wordmark { color: var(--ink); }
.lockup.small { flex-direction: row; gap: 0.6rem; align-items: center; }
.lockup.small .mark { width: 34px; }
.lockup.small .wordmark { font-size: 1.375rem; margin: 0; }

/* ---------- Home ---------- */
.wrap {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(20px, 3vw, 32px) 0;
}
.top-get { font-weight: 500; font-size: 15px; color: var(--evergreen); text-decoration: none; padding: 10px 0; }
.top-get:hover { color: var(--clay); }
body[data-cta="soon"] .top-get { display: none; }

.eyebrow {
  margin: 0;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--clay);
}
.eyebrow.center { text-align: center; }

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 48px 40px;
  padding: clamp(24px, 5vw, 72px) 0 clamp(56px, 7vw, 104px);
}
.hero-text { flex: 1 1 340px; max-width: 580px; }
.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 22px + 3.9vw, 76px);
  line-height: 1.06;
  letter-spacing: -0.012em;
  margin: 18px 0 0;
  text-wrap: balance;
}
.hero .lede, .plain .lede {
  font-weight: 300;
  font-size: clamp(18px, 16px + 0.5vw, 21px);
  line-height: 1.55;
  color: var(--ink-mid);
  max-width: 30em;
  margin: 22px 0 0;
  text-wrap: pretty;
}

/* The call to action, in both states. */
.cta { margin-top: 34px; }
.cta-launch { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.soon {
  display: inline-block;
  margin: 0;
  font-weight: 500;
  font-size: 15px;
  color: var(--clay);
}
.soon::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 1px;
  background: var(--clay);
  opacity: 0.55;
  margin: 0 0 0.85rem;
}
.fine { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-mid); max-width: 30em; text-wrap: pretty; }
.cta-soon .fine { margin-top: 12px; }

/* The How it works label as a section title (Randall, Oct 27: a bit bigger), in the serif, still clay and centred. */
/* The group label over the four beats, in the same voice as the hero's Coming soon line: clay, the sans, 15px (Randall, Oct 29). */
.beats .eyebrow.section-title { font-family: var(--sans); font-weight: 500; font-size: 18px; letter-spacing: 0.02em; }

/* The first screen, as Randall chose it Oct 26 (variant B of two shown at his phone's width): no eyebrow,
   no short rule, the sign-up grouped tight, and on a narrow screen the phone comes before the sign-up. */
.hero .soon::before { display: none; }
.hero .cta-soon { margin-top: 30px; }
.hero .soon { margin: 0 0 2px; }
.hero .notify { margin-top: 10px; }
.hero .notify .fine { margin-top: 0; }
@media (max-width: 760px) {
  .hero { display: flex; flex-direction: column; gap: 0; }
  .hero-text { display: contents; }
  .hero h1 { order: 1; }
  .hero .lede { order: 2; }
  .hero .hero-phone { order: 3; margin: 48px auto 36px; }   /* outweighs the .hero-phone margin set further down */
  .hero .cta { order: 4; margin-top: 0; align-self: stretch; }   /* the sign-up spans the width in both states (it centered itself in the thanks state by accident) */
  /* On a phone the field takes the whole row and the button sits under it, full width, like the app's own
     buttons (user-ruled Oct 28: beside the button the field showed about 26 characters and cut longer addresses). */
  .notify { max-width: none; }
  .notify input[type="email"] { flex: 1 1 100%; }
  .notify button { flex: 1 1 100%; }
}
.fine a, .more a, .qa a { color: var(--evergreen); text-decoration: underline; text-underline-offset: 3px; }
.fine a:hover, .more a:hover, .qa a:hover { color: var(--clay); }
/* The notify form, before launch: one field, one pill, the promise under them. */
.notify { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; max-width: 30em; }
.notify input[type="email"] {
  flex: 1 1 220px; min-width: 0; height: 46px; padding: 0 18px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, 0.55); color: var(--ink);
  font: inherit; font-size: 16px;
}
.notify input::placeholder { color: var(--ink-faint); }
.notify input:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; border-color: var(--moss); }
.notify button {
  height: 46px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--evergreen); color: #fff;
  font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
}
.notify button:hover { background: var(--evergreen-deep); }
.notify button:disabled { opacity: 0.7; cursor: default; }
.notify button:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }
.notify .fine { flex-basis: 100%; margin: 2px 0 0; }
/* The thanks takes the field's place: a soft green capsule the width of the field and button it replaces
   (user-ruled Oct 28: the small gray line left the eye nowhere to land). */
.notify .done {
  display: block; width: 100%; box-sizing: border-box; margin: 0;
  padding: 13px 20px; border-radius: 999px;
  background: var(--mint-wash); color: var(--evergreen);
  font-size: 16px; line-height: 1.4; text-align: center; text-wrap: balance;
}
.notify .trouble { color: var(--clay); }
.notify .hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }   /* the honeypot, off screen */
.notify [hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.badge { display: inline-block; line-height: 0; text-decoration: none; }
.badge img { height: 52px; width: auto; display: block; }
.badge:focus-visible { border-radius: 8px; }
body[data-cta="soon"] .cta-launch { display: none; }
body[data-cta="launch"] .cta-soon { display: none; }
body[data-cta="soon"] .closing { display: none; }

/* Phones. One construction everywhere: a dark shell around a screen at the
   iPhone's own proportions. The hero phone is live; the beats hold screenshots. */
.hero-phone { flex: 0 0 auto; width: clamp(240px, 26vw, 300px); margin: 0 auto; position: relative; }
.shell {
  background: var(--shell);
  border-radius: 52px;
  padding: 9px;
  box-shadow: 0 60px 90px -40px rgba(20,26,23,0.5);
}
.screen {
  position: relative;
  aspect-ratio: 940 / 2040;
  border-radius: 44px;
  overflow: hidden;
  background: #F4F1E8;
}
.screen img, .screen video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 250 on a phone, up to 300 on a wide screen, the hero phone's own cap, so the hero is never the smaller phone; the sheet's
   text is about 12.6 px on a one-pixel-per-point monitor, the readable floor (Randall, Oct 30: 340 outgrew the hero). */
.beat-phone { flex: 0 0 auto; width: clamp(250px, 26vw, 300px); margin: 0 auto; }
.beat-phone .shell { border-radius: 44px; padding: 8px; box-shadow: 0 40px 70px -36px rgba(20,26,23,0.45); }
.beat-phone .screen { border-radius: 37px; }

/* The Reflect screen as it opens in the app: only the dots, the halo and ‹ Edit.
   Island, ‹ Edit and the trio are placed from an iPhone 18 Pro capture (Oct 15):
   island 23–24% of the screen width at the top, ‹ Edit at 5.3% / 10.8%, the dots'
   centre at 31.8% of the height, dots 3 / 4.5 / 6% of the width with a 3% gap. */
.screen.reflect { background: linear-gradient(180deg, #F7F0E3 0%, #EFEEE3 45%, #DFE9E1 100%); container-type: inline-size; }
.screen .glow {
  position: absolute;
  inset: 0 0 auto 0;
  height: 55%;
  pointer-events: none;
  background: radial-gradient(70% 60% at 50% 20%, rgba(226,168,120,0.20), rgba(226,168,120,0) 70%);
  animation: poiseAmbient 10s infinite;
}
.screen .island {
  position: absolute;
  top: 1.6%;
  left: 50%;
  transform: translateX(-50%);
  width: 23.5%;
  aspect-ratio: 284 / 110;
  border-radius: 999px;
  background: var(--shell);
}
.screen .back {
  position: absolute;
  top: 10.8%;
  left: 5.3%;
  font-size: 12px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 4px;
}
.screen .back .chev { display: block; width: 7px; height: 11px; flex: none; position: relative; top: -0.5px; }   /* the app's chevron: a stroke, level with the word (Randall, Oct 29) */
.bloom { position: absolute; left: 0; right: 0; top: 15.4%; display: flex; justify-content: center; }
.bloom-inner { position: relative; width: 71%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 110%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(226,168,120,0.32) 0%, rgba(184,217,197,0.24) 45%, rgba(184,217,197,0) 68%);
  animation: poiseHalo 10s infinite;
}
.trio { position: relative; display: flex; align-items: center; gap: 3cqw; }
/* The message card, as the real Reflect screen draws it: left 7%, top 45%, 86% wide, the words read back in italic. */
.screen .card {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 44.8%;
  padding: 4.2cqw 5cqw 4.6cqw;
  border-radius: 4.5cqw;
  background: rgba(227, 229, 220, 0.9);
  border: 1px solid rgba(62, 92, 80, 0.10);
  font-family: var(--serif);
  font-style: italic;
  line-height: 1.4;
}
.screen .card-label { display: block; font-size: 3.3cqw; color: #697D7E; margin-bottom: 1.4cqw; }
.screen .card-text { display: block; font-size: 4.4cqw; color: var(--ink); }
.screen .card-text.placeholder { color: #7A8E8D; }
/* The card shows the start of the message and fades, the way a card does when a message runs on. */
.screen .card-text.fade {
  max-height: 2.9em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, rgba(0,0,0,0));
  mask-image: linear-gradient(180deg, #000 45%, rgba(0,0,0,0));
}
.dot { display: block; border-radius: 50%; flex: none; animation: poiseBreath 10s infinite; }
.dot.d1 { width: 3cqw; height: 3cqw; background: var(--mint); }
.dot.d2 { width: 4.5cqw; height: 4.5cqw; background: var(--moss); animation-delay: 0.35s; }
.dot.d3 { width: 6cqw; height: 6cqw; background: var(--evergreen); animation-delay: 0.7s; }

/* The breath, as the app's Reflect screen breathes (PoiseBreath): one 10-second
   cycle, rise to 40%, a caught breath to 44%, then a release that eases out.
   Dots swell 0.82 → 1.25, the halo 0.46 → 1.24 and 34% → full, each dot a
   little behind the last. */
@keyframes poiseBreath {
  0%   { transform: scale(0.82); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  40%  { transform: scale(1.25); animation-timing-function: linear; }
  44%  { transform: scale(1.25); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
  100% { transform: scale(0.82); }
}
@keyframes poiseHalo {
  0%   { opacity: 0.34; transform: translate(-50%, -50%) scale(0.46); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  40%  { opacity: 1;    transform: translate(-50%, -50%) scale(1.24); animation-timing-function: linear; }
  44%  { opacity: 1;    transform: translate(-50%, -50%) scale(1.24); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
  100% { opacity: 0.34; transform: translate(-50%, -50%) scale(0.46); }
}
@keyframes poiseAmbient {
  0%   { opacity: 0.55; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  40%  { opacity: 1;    animation-timing-function: linear; }
  44%  { opacity: 1;    animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
  100% { opacity: 0.55; }
}

/* Beats */
.beats { max-width: 960px; margin: 0 auto; padding: clamp(8px, 2vw, 24px) 0 0; }
.beats .eyebrow { margin-bottom: clamp(8px, 2vw, 24px); }
.beat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 36px 80px;
  padding: clamp(28px, 4vw, 56px) 0;
}
.beat.flip { flex-direction: row-reverse; }
.beat-text { flex: 1 1 300px; max-width: 440px; }
.beat h2, .faq h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 22px + 1vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0;
}
.beat p { font-size: 18px; line-height: 1.6; color: var(--ink-mid); margin: 14px 0 0; text-wrap: pretty; }
.beat p.how { font-size: 16px; color: var(--ink-mid); margin-top: 12px; }

/* The answers */
.faq { max-width: 640px; margin: 0 auto; padding: clamp(56px, 8vw, 104px) 0 0; }
.faq h2 { margin: 0 0 8px; }
.qa { padding: 24px 0; border-bottom: 1px solid var(--line-light); }
.qa:last-of-type { border-bottom: 0; }
.qa h3 { margin: 0; font-family: var(--sans); font-weight: 500; font-size: 17px; line-height: 1.4; color: var(--ink); }
.qa p { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-mid); text-wrap: pretty; }
.more { margin: 12px 0 0; font-size: 15px; color: var(--ink-mid); }

/* Closing */
.closing {
  text-align: center;
  padding: clamp(56px, 8vw, 112px) 0 clamp(48px, 6vw, 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.closing h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 20px + 2.6vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 14em;
  text-wrap: balance;
}
.closing .cta { margin-top: 32px; }
.closing .cta-launch { flex-direction: column; gap: 16px; }
.closing .soon::before { margin-left: auto; margin-right: auto; }
.closing .fine { margin-left: auto; margin-right: auto; max-width: 28em; }
.home footer { margin-top: 0; padding: 28px 0 44px; }
body[data-cta="soon"] .faq { padding-bottom: clamp(48px, 6vw, 80px); }
/* One rhythm between the sections after the beats (Randall, Oct 27: the gaps around Private by default read uneven).
   A beat's bottom padding plus a section's top padding is the gap between a beat and the next section; the same sum
   is the gap between Private by default and The basics, so the private section carries a beat's bottom padding, not
   the page-end padding the last section has. Its paragraph sits under its title at the same distance as the first
   question sits under The basics. */
body[data-cta="soon"] .faq.private, body[data-cta="launch"] .faq.private { padding-bottom: clamp(28px, 4vw, 56px); }
.faq.private p { margin: 24px 0 0; }   /* 8 under the title plus 24 = 32, the first question's distance under The basics */

/* ---------- Plain pages: privacy, terms, support ----------
   Same shell as the home page: the top row with the lockup (and Get Poise at launch) inside .wrap,
   the footer at the bottom of .wrap. Between them, one centered reading column that keeps the
   home's type: Lora titles at the closing's scale, the hero's light lede, 17px reading text. */
.page {
  position: relative;
  max-width: 42rem;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 56px) 0 clamp(56px, 7vw, 104px);
}
.plain header { margin-bottom: clamp(28px, 4vw, 44px); }
.plain h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 20px + 2.6vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.plain .lede { margin-top: 18px; }
.plain .updated { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-faint); }
.plain h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 20px + 0.6vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: clamp(36px, 4vw, 48px) 0 10px;
}
.plain p, .plain li { font-size: 17px; line-height: 1.6; color: var(--ink); }
.plain p { margin: 0 0 14px; text-wrap: pretty; }
.plain ul, .plain ol { margin: 0 0 14px; padding-left: 1.3rem; }
.plain li { margin: 0 0 8px; }
.plain li::marker { color: var(--ink-faint); }
.plain .qa p { margin: 8px 0 0; font-size: 16px; color: var(--ink-mid); }
.plain .more { margin-top: 28px; }

/* Footer, every page */
footer {
  margin-top: 0;
  padding: 28px 0 44px;
  border-top: 1px solid var(--line-light);
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-mid);
}
footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-bottom: 0.75rem; }
footer nav a { color: var(--evergreen); text-decoration: none; }
footer nav a:hover { text-decoration: underline; color: var(--clay); }
footer p { margin: 0; font-size: 0.85rem; color: var(--ink-faint); }
footer p a { color: inherit; text-decoration: none; }

/* No entrance fade on the hero: a fade that starts at opacity 0 hides the headline wherever
   animations don't run (a frozen tab, a crawler's snapshot). The breath is the page's motion.
   The breath holds still for anyone who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .dot, .halo, .screen .glow { animation: none; }
  .dot { transform: scale(0.9); }
  .halo { transform: translate(-50%, -50%) scale(0.84); opacity: 0.34; }
}

/* Print / PDF: the desktop layout on tall pages, colors kept, sections unbroken,
   the breathing beat as its still (video doesn't print), nothing from the launch state. */
.print-only { display: none; }
@media print {
  @page { size: 1040px 1560px; margin: 0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { background: var(--cream); }
  .hero, .beat, .faq, .closing, footer { break-inside: avoid; }
  .beats .eyebrow { break-after: avoid; }
  video.loop { display: none; }
  .print-only { display: block; }
  .shell, .beat-phone .shell { box-shadow: none; }   /* a blurred shadow prints as a gray slab */
  body::before, body.home::before, .screen .glow { display: none; }
  .top-get, .cta-launch { display: none; }
  .notify input, .notify button { display: none; }   /* paper can't sign up; the promise line stays */
}