/* Hallmark · shape: Pinned sequence (draw swap: Stat-Led refused, no real figures) · genre: modern-minimal · theme: Dose (deal 1/3, seed waitlist-calm-ios-self-care-042b·eef4cfa2·2026-11-08·r0) · job: subscribe · draw: bb130a
 * hero: Banner · nav: edge-aligned bar (swap: floating pill fights the paper) · footer: statement · imagery: the product, built · signature: the guided session with its pace control set to slower · dose: white, palette B Linen (sage accent, clay second; teal dropped as too close to Lymphia)
 * axes: light/grotesk-sans/chromatic-sage · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P2 H2 E2 S2 R1 V2 · weakest: R, no photographs or proof exist yet, so the product screens carry every section */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --p-check: var(--p-fri);
  --p-session: var(--p-thu);
  --p-done: var(--p-wed);
  --color-grey-day: #E4DDCF;
  --phone-radius: 30px;
}

body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.28 0 0 0 0 0.2 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(900px 640px at 0% 0%, color-mix(in oklab, var(--glow-sage) 50%, transparent), transparent 70%), radial-gradient(760px 560px at 100% 0%, color-mix(in oklab, var(--glow-clay) 45%, transparent), transparent 70%);
  background-repeat: repeat, no-repeat, no-repeat;
}

/* nav */
.bar { position: relative; z-index: var(--z-raised); }
.bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 72px; }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: var(--tracking-display); text-decoration: none; }
.bar__links { display: flex; align-items: center; gap: var(--space-lg); }
.bar__links a:not(.btn) { text-decoration: none; color: var(--color-ink-2); font-size: var(--text-sm); }
.bar__links a:not(.btn):hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
@media (max-width: 40rem) { .bar__links a:not(.btn) { display: none; } }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-md) var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: inset 0 1px 0 var(--glint), 0 0 0 1px var(--color-rule), 0 3px 0 var(--color-rule); transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper-2); }
.btn:active { transform: translateY(3px); box-shadow: inset 0 1px 0 var(--glint), 0 0 0 1px var(--color-rule), 0 0 0 var(--color-rule); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; transition: none; }
.btn:disabled { cursor: not-allowed; opacity: 0.55; }
.btn--primary { background: var(--color-accent-deep); color: var(--color-accent-ink); box-shadow: 0 0 0 1px var(--color-accent-deep), 0 3px 0 color-mix(in oklab, var(--color-accent-deep) 70%, var(--color-ink)); }
.btn--primary:hover { background: color-mix(in oklab, var(--color-accent-deep) 88%, var(--color-ink)); }
.btn--primary:active { box-shadow: 0 0 0 1px var(--color-accent-deep), 0 0 0 var(--color-accent-deep); }
.btn--small { height: 40px; padding: 0 var(--space-md); font-size: var(--text-sm); }

/* waitlist form */
.signup { display: grid; gap: var(--space-xs); max-width: 30rem; }
.signup label { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); }
.signup__row { display: flex; gap: var(--space-xs); }
.signup input { flex: 1; min-width: 0; min-height: 52px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: -3px; }
.signup input:hover { border-color: var(--color-ink-2); }
.signup input:focus-visible { outline-color: var(--color-focus); }
.signup input[aria-invalid] { border-color: var(--color-error); }
.signup__help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 30rem) { .signup__row { flex-direction: column; } }

/* hero */
.hero { position: relative; padding-block: var(--space-xl) var(--section-gap-s); overflow: clip; }
.hero::before { content: ""; position: absolute; inset: -10% -20% auto auto; width: 70%; height: 120%; background: repeating-linear-gradient(100deg, transparent 0 9%, color-mix(in oklab, var(--light) 80%, transparent) 9% 17%); filter: blur(28px); opacity: 0.7; transform: skewX(-14deg); pointer-events: none; animation: drift 90s var(--ease-in-out) infinite alternate; }
@keyframes drift { from { transform: skewX(-14deg) translateX(0); } to { transform: skewX(-14deg) translateX(-8%); } }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: center; }
.hero__copy { display: grid; gap: var(--space-lg); align-content: center; }
.hero h1 { max-width: 13ch; }
@media (max-width: 60rem) { .hero__grid { grid-template-columns: minmax(0, 1fr); } }

/* phone, built product */
.phone { position: relative; width: min(100%, 340px); aspect-ratio: 9 / 19; margin-inline: auto; padding: var(--space-sm); border-radius: calc(var(--phone-radius) + var(--space-sm)); background: var(--color-ink); box-shadow: var(--shadow-lift); }
.screen { height: 100%; border-radius: var(--phone-radius); background: var(--color-paper); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; padding: var(--space-xl) var(--space-lg) var(--space-lg); gap: var(--space-md); font-size: var(--text-sm); }
.screen__top { display: flex; justify-content: space-between; align-items: baseline; color: var(--color-muted); }
.screen__title { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-display); font-size: var(--text-xl); line-height: 1.1; color: var(--color-ink); }
.mono { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
.figure-legs { position: relative; border-radius: var(--radius-card); background: linear-gradient(color-mix(in oklab, var(--glint) 40%, transparent), transparent 30%), color-mix(in oklab, var(--p-session) 62%, transparent); display: grid; place-items: center; min-height: 0; }
.figure-legs svg { width: 62%; height: auto; }
.stroke-path { stroke: var(--color-accent-deep); }
.limb { fill: color-mix(in oklab, var(--color-paper) 85%, transparent); stroke: var(--color-ink-2); }
.timer { font-family: var(--font-outlier); font-size: var(--text-3xl); color: var(--color-ink); line-height: 1; }
.pace { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); padding: var(--space-2xs); border-radius: var(--radius-input); background: var(--color-paper-3); }
.pace span { display: grid; place-items: center; min-height: 40px; border-radius: 8px; color: var(--color-ink-2); }
.pace span[aria-current] { background: var(--color-paper); color: var(--color-ink); font-weight: 500; box-shadow: var(--shadow-card); }
.screen__step { display: grid; gap: var(--space-2xs); }

/* sequence as plastic bands */
.section { padding-block: var(--section-gap-s); }
.section__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.section__head p { color: var(--color-ink-2); }
@media (max-width: 60rem) { .section__head { grid-template-columns: minmax(0, 1fr); } }
.bands { display: grid; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.plastic { --t: var(--p-thu); position: relative; border-radius: var(--radius-card); background: linear-gradient(color-mix(in oklab, var(--glint) 32%, transparent), transparent 18%), color-mix(in oklab, var(--t) 62%, transparent); box-shadow: inset 0 1.5px 0 var(--glint), inset 0 -24px 36px -28px color-mix(in oklab, var(--t) 45%, var(--color-ink)); }
.band { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: center; padding: var(--space-2xl); }
.band--check { --t: var(--p-check); }
.band--session { --t: var(--p-session); }
.band--done { --t: var(--p-done); }
.band__num { font-family: var(--font-display); font-weight: 700; font-size: var(--text-display-s); line-height: 1; color: color-mix(in oklab, var(--color-ink) 40%, transparent); }
.band__copy { display: grid; gap: var(--space-md); }
.band__copy p { max-width: 36ch; }
.band__time { color: var(--color-ink-2); }
@media (max-width: 60rem) { .band { grid-template-columns: minmax(0, 1fr); padding: var(--space-xl) var(--space-lg); } }

.card { background: var(--color-paper); border-radius: var(--radius-card); box-shadow: var(--shadow-lift); padding: var(--space-lg); display: grid; gap: var(--space-md); max-width: 380px; width: 100%; justify-self: center; }
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
.key { display: grid; place-items: center; min-height: 52px; border-radius: var(--radius-input); background: var(--color-paper); box-shadow: inset 0 1px 0 var(--glint), 0 0 0 1px var(--color-rule), 0 3px 0 var(--color-rule); font-weight: 500; }
.key[aria-checked="true"] { background: var(--color-accent-soft); box-shadow: inset 0 1px 0 var(--glint), 0 0 0 1px var(--color-accent), 0 3px 0 var(--color-accent-deep); }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-xs); }
.day { display: grid; gap: var(--space-xs); justify-items: center; font-size: var(--text-xs); color: var(--color-muted); }
.day i { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--color-grey-day); }
.day--done i { background: var(--color-accent-soft); border-color: var(--color-accent); }
.stamp { justify-self: start; padding: var(--space-xs) var(--space-sm); border: 2px double var(--color-clay); border-radius: 8px; color: var(--color-clay-deep); transform: rotate(-2deg); font-family: var(--font-outlier); font-size: var(--text-sm); }

/* statement on the ink band */

/* first step in a tray */
.tray { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: center; padding: var(--space-2xl); --t: var(--p-tue); }
.tray__group { display: grid; gap: var(--space-xs); }
.tray__group + .tray__group { margin-top: var(--space-lg); }
.tray__label { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); }
.keys { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.keys .key { padding-inline: var(--space-md); }
.plan { display: grid; gap: var(--space-2xs); }
.plan__big { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-display); font-size: var(--text-3xl); line-height: 1; }
@media (max-width: 60rem) { .tray { grid-template-columns: minmax(0, 1fr); padding: var(--space-xl) var(--space-lg); } }

/* honest pricing */
.price { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: start; }
.price__offer { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-display); font-size: var(--text-display); line-height: 0.95; font-variant-numeric: proportional-nums; }
.price__list { display: grid; gap: 0; border-top: 1px solid var(--color-rule); }
.price__list li { display: block; padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); font-size: var(--text-lead); }
.price__list ul, ul.price__list { list-style: none; margin: 0; padding: 0; }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (max-width: 60rem) { .price { grid-template-columns: minmax(0, 1fr); } }

/* questions */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); }
.faq dl { margin: 0; border-top: 1px solid var(--color-rule); }
.faq dt { padding-top: var(--space-lg); font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-display); font-size: var(--text-title); }
.faq dd { margin: var(--space-xs) 0 0; padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-rule); color: var(--color-ink-2); max-width: 60ch; }
@media (max-width: 60rem) { .faq { grid-template-columns: minmax(0, 1fr); } }

/* close and footer */
.close { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; }
@media (max-width: 60rem) { .close { grid-template-columns: minmax(0, 1fr); } }
.foot { padding-block: var(--space-2xl) var(--space-xl); border-top: 1px solid var(--color-rule); margin-top: var(--section-gap-s); }
.foot__statement { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-display); font-size: var(--text-2xl); max-width: 24ch; }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); }
.foot__row a { color: var(--color-ink-2); }
.foot__row a:hover { text-decoration-color: var(--color-accent); }

/* get the app */
.get { display: grid; gap: var(--space-xs); justify-items: start; }
.btn--store { height: 56px; padding: 0 var(--space-xl); font-size: var(--text-lg); }
.btn--store[aria-disabled="true"] { cursor: default; }
.get__note { font-size: var(--text-sm); color: var(--color-muted); }
.faq dd a { color: var(--color-ink); }
.foot__links { display: flex; gap: var(--space-lg); }

/* legal and support pages */
.doc { padding-block: var(--space-2xl) var(--section-gap-s); }
.doc__inner { max-width: 44rem; }
.doc h1 { font-size: var(--text-section); max-width: none; }
.doc .updated { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }
.doc .lead { margin-top: var(--space-lg); }
.doc h2 { margin-top: var(--space-2xl); font-size: var(--text-title); }
.doc h3 { margin-top: var(--space-lg); font-size: var(--text-lg); }
.doc p, .doc li { color: var(--color-ink-2); }
.doc p { margin-top: var(--space-sm); }
.doc ul { margin: var(--space-sm) 0 0; padding-left: 1.25em; display: grid; gap: var(--space-xs); }
.doc a { color: var(--color-ink); }
.doc .contact { margin-top: var(--space-lg); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-card); box-shadow: var(--shadow-card); }
.doc .contact a { font-size: var(--text-lg); font-weight: 500; }
@media (max-width: 30rem) { .get { justify-items: stretch; } .btn--store { width: 100%; padding: 0 var(--space-md); font-size: var(--text-md); } }
.doc .contact p a { font-size: inherit; font-weight: inherit; }

/* landing v2 (2026-11-09): real app screenshots replace the drawn phone and cards */
.hero h1 { max-width: 17ch; font-size: var(--text-display-s); }
.needs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.needs li { padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-card) 70%, transparent); box-shadow: 0 0 0 1px var(--color-rule); font-size: var(--text-sm); color: var(--color-ink-2); }
.shot { margin: 0; display: grid; gap: var(--space-sm); justify-items: center; }
.shot__frame { width: min(100%, 300px); padding: 10px; border-radius: 48px; background: var(--color-ink); box-shadow: var(--shadow-lift); }
.shot__frame img { width: 100%; height: auto; border-radius: 38px; background: var(--color-paper); }
.shot--hero .shot__frame { width: min(100%, 340px); }
.shot figcaption { max-width: 30ch; text-align: center; font-size: var(--text-sm); color: var(--color-ink-2); }
.rows { display: grid; gap: var(--space-lg); }
.row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: center; padding: var(--space-2xl); overflow: clip; }
.row--today { --t: var(--p-fri); }
.row--programs { --t: var(--p-thu); }
.row--programs .shot { order: -1; }
.row--progress { --t: var(--p-wed); }
.row__copy { display: grid; gap: var(--space-md); }
.row__copy p { max-width: 46ch; color: var(--color-ink-2); }
.price h2.price__offer { max-width: 12ch; }
@media (max-width: 60rem) {
  .row { grid-template-columns: minmax(0, 1fr); padding: var(--space-xl) var(--space-lg); }
  .row--programs .shot { order: 0; }
  .shot__frame { width: min(100%, 240px); border-radius: 40px; padding: 8px; }
  .shot__frame img { border-radius: 32px; }
  .shot--hero .shot__frame { width: min(100%, 280px); }
}
.row__copy h3 { font-size: clamp(1.5rem, 1.2vw + 1rem, 2.25rem); max-width: 18ch; }
@media (min-width: 60.01rem) { .shot:not(.shot--hero) .shot__frame { width: min(100%, 270px); } }