/* Alternative content, composed with the current TAO design system. */
[hidden] { display: none !important; }
button { cursor: pointer; }
.page-surface { width: min(var(--page-width), 100%); min-width: 0; }
.reference-hero { padding-top: 40px; align-items: start; }
.hero-copy h1 { max-width: 13ch; }
.hero-copy .eyebrow { margin-bottom: 18px; line-height: 1.5; }
.hero-actions .reference-button { padding-inline: 28px; font-size: 18px; }
.hero-text-link { padding-block: 14px; color: var(--tao-body); font-size: 14px; font-weight: 600; }
.hero-text-link:hover { color: var(--accent); }
.launch-note { margin: 16px 0 0; color: var(--text-muted); font-size: 12.5px; }
.hero-demo { min-width: 0; padding-top: calc(var(--text-eyebrow) * 1.5 + 18px); }
.demo-tabs { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; border-bottom: 1px solid var(--border-hairline); }
.demo-tabs button { min-height: 48px; padding: 10px 4px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--tao-body); font-size: 13px; font-weight: 600; transition: border-color 160ms, color 160ms; }
.demo-tabs button:hover { color: var(--accent); }
.demo-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--accent); }
.hero-demo .hero-visual { height: 730px; }
.hero-demo .phone { --preview-width: 320px; --deck-offset: 100px; top: 38px; width: var(--preview-width); margin-left: calc(var(--preview-width) / -2); animation: none; transition: transform 550ms var(--ease-deck), opacity 400ms ease, visibility 550ms; }
.hero-demo .phone-frame { animation: none; }
.hero-demo .phone-screen { aspect-ratio: 9 / 19; display: flex; flex-direction: column; }
.phone[data-position="front"] { z-index: 4; transform: translate(0, 0) scale(1); opacity: 1; }
.phone[data-position="left"] { z-index: 2; transform: translate(calc(-1 * var(--deck-offset)), 23px) scale(.8) rotate(-5deg); opacity: .96; pointer-events: none; }
.phone[data-position="right"] { z-index: 2; transform: translate(var(--deck-offset), 23px) scale(.8) rotate(5deg); opacity: .96; pointer-events: none; }
.phone[data-position="back"] { z-index: 1; transform: translate(0, 44px) scale(.7); opacity: 0; visibility: hidden; pointer-events: none; }
.demo-note { position: relative; z-index: 3; margin: 0; text-align: center; color: var(--tao-body); font-size: 12px; line-height: 1.6; }
.demo-note span { color: var(--text-muted); font-size: 11px; }
/* Live app previews use the same cream screen, type, and paper device frame. */
.app-status { height: 34px; flex: none; padding: 10px 18px 0; display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; color: var(--text-title); }
.app-island { width: 92px; height: 24px; border-radius: 20px; background: #171511; }
.app-content { min-height: 0; flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-hairline) transparent; padding: 14px 20px 28px; }
.app-brand { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 18px; }
.app-brand strong { font-size: 28px; font-weight: 800; letter-spacing: -.055em; }
.app-brand > span { max-width: 14ch; text-align: right; color: var(--text-muted); font-size: 10px; line-height: 1.3; }
.app-kicker { margin: 0 0 8px; color: var(--tao-body); font-size: 11px; font-weight: 600; }
.app-content h2 { margin: 0 0 16px; font-size: 30px; line-height: 1.04; letter-spacing: -.045em; font-weight: 800; }
.app-question { margin: 0 0 14px; padding: 13px 14px; border-radius: 14px 14px 3px 14px; background: var(--tao-apricot-tint); color: var(--tao-apricot-ink); font-size: 14px; line-height: 1.4; font-weight: 600; }
.app-reply { margin: 0 0 14px; color: var(--tao-body); font-size: 13px; line-height: 1.5; }
.app-signals { margin: 0; padding: 0; list-style: none; }
.app-signal { display: flex; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-hairline); }
.app-signal:last-child { border-bottom: 0; }
.app-signal .source-dot { width: 7px; height: 7px; flex: none; }
.app-signal.lilac .source-dot { background: var(--tao-lilac); }
.app-signal.mint .source-dot { background: var(--tao-mint); }
.app-signal.apricot .source-dot { background: var(--tao-orange); }
.app-signal strong { display: block; font-size: 13px; line-height: 1.35; font-weight: 600; }
.app-signal small { display: block; margin-top: 4px; font-size: 11px; color: var(--text-muted); }
.app-note { margin: 14px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.app-feature { margin: 0 0 18px; padding: 0; }
.app-feature > small { font-size: 11px; color: var(--text-muted); }
.app-feature h3 { margin: 8px 0; font-size: 25px; line-height: 1.1; letter-spacing: -.035em; font-weight: 700; }
.app-feature p { margin: 0; color: var(--tao-body); font-size: 13px; line-height: 1.5; }
.app-plan { margin: 22px 0; }
.app-plan > div { display: grid; grid-template-columns: 55px minmax(0, 1fr); gap: 12px; padding: 17px 0; border-bottom: 1px solid var(--border-hairline); }
.app-plan > div:first-child { border-top: 1px solid var(--border-hairline); }
.app-plan dt { padding-top: 3px; font-size: 11px; font-weight: 600; color: var(--tao-mint-deep); }
.app-plan dd { margin: 0; }
.app-plan strong { display: block; font-size: 14px; line-height: 1.35; font-weight: 600; }
.app-plan small { display: block; margin-top: 6px; color: var(--tao-body); font-size: 12px; line-height: 1.5; }
.app-appointment { padding-top: 16px; border-top: 1px solid var(--border-hairline); }
.app-brief-summary { padding-top: 16px; border-top: 1px solid var(--border-hairline); }
.app-action { display: block; margin-top: 16px; padding: 13px 8px; border-radius: 10px; background: var(--surface-invert); color: var(--text-on-invert); text-align: center; font-size: 13px; font-weight: 600; }
.app-action:hover { filter: brightness(1.2); }
.app-task { display: flex; align-items: flex-start; gap: 11px; min-height: 44px; padding-block: 15px; border-bottom: 1px solid var(--border-hairline); cursor: pointer; }
.app-task input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--tao-mint-deep); flex: none; }
.app-task > span { font-size: 14px; font-weight: 500; line-height: 1.35; }
.app-task small { display: block; margin-top: 5px; font-size: 12px; color: var(--text-muted); font-weight: 400; line-height: 1.5; }
.app-task:has(input:checked) > span { text-decoration: line-through; color: var(--text-muted); }
.app-home { position: absolute; bottom: 7px; left: calc(50% - 48px); width: 96px; height: 4px; border-radius: 3px; background: var(--text-title); }
/* Printed illustrations stay inside these three source cards. */
.views-section .view-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.views-section .view-card::before {
  content: '';
  position: absolute;
  z-index: -1;
  right: -26px;
  bottom: -22px;
  width: 88%;
  height: 95%;
  background: var(--card-illustration) right bottom / contain no-repeat;
  opacity: .65;
  mix-blend-mode: multiply;
  mask-image: linear-gradient(135deg, transparent 10%, rgba(0, 0, 0, .25) 42%, black 85%);
  pointer-events: none;
}
.views-section .view-lilac { --card-illustration: url('assets/wearable-halftone.webp'); }
.views-section .view-mint { --card-illustration: url('assets/lab-halftone.webp'); }
.views-section .view-apricot { --card-illustration: url('assets/life-halftone.webp'); }
.experience-section, .care-section { padding-top: 0; padding-bottom: var(--section-gap); }
.goal-experience { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: start; }
.goal-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-bottom: 28px; border-bottom: 1px solid var(--border-hairline); }
.goal-picker button { min-height: 48px; padding: 10px 4px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--tao-body); font-size: 13px; font-weight: 600; transition: border-color 160ms, color 160ms; }
.goal-picker button:hover { color: var(--accent); }
.goal-picker button[aria-pressed="true"] { border-bottom-color: var(--accent); color: var(--accent); }
.goal-question { margin: 0 0 16px; font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -.035em; }
.goal-left > p { margin: 0; color: var(--tao-body); font-size: 15px; line-height: 1.55; }
.plan-preview {
  --plan-tint: var(--tao-mint-tint);
  --plan-ink: var(--tao-mint-ink);
  --plan-body: var(--tao-mint-body);
  --plan-label: var(--tao-mint-deep);
  padding: 32px;
  border-radius: var(--radius-2xl);
  background: var(--plan-tint);
  color: var(--plan-ink);
  transition: background-color 180ms ease, color 180ms ease;
}
.plan-preview[data-goal="sleep"] {
  --plan-tint: var(--tao-lilac-tint);
  --plan-ink: var(--tao-lilac-ink);
  --plan-body: var(--tao-lilac-body);
  --plan-label: var(--tao-lilac-deep);
}
.plan-preview[data-goal="fitness"] {
  --plan-tint: var(--tao-apricot-tint);
  --plan-ink: var(--tao-apricot-ink);
  --plan-body: var(--tao-apricot-body);
  --plan-label: var(--tao-orange-deep);
}
.plan-heading { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.plan-heading h3 { margin: 0; font-size: var(--text-heading-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-heading-lg); line-height: 1.1; }
.badge { font-size: var(--text-eyebrow-xs); color: var(--plan-body); }
.plan-preview dl { margin: 0; }
.plan-line { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; padding-block: 22px; border-top: 1px solid color-mix(in srgb, var(--plan-ink) 15%, transparent); }
.plan-line:last-child { padding-bottom: 0; }
.plan-line dt { padding-top: 3px; color: var(--plan-label); font-size: var(--text-eyebrow-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow-xs); }
.plan-line dd { margin: 0; font-size: 15px; line-height: 1.4; }
.plan-line dd strong { font-weight: 600; }
.plan-line small { display: block; margin-top: 6px; color: var(--plan-body); font-size: var(--text-meta); line-height: var(--leading-body-sm); }
.care-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 80px; align-items: center; padding-block: 30px; }
.care-copy h2 { margin: 0 0 24px; font-size: var(--text-display-md); letter-spacing: var(--tracking-display-md); line-height: 1.04; }
.care-copy > p:not(.eyebrow) { margin: 0; color: var(--tao-body); font-size: 17px; line-height: 1.65; }
.care-points { display: grid; gap: 24px; margin: 30px 0 0; padding: 0; list-style: none; }
.care-points li { position: relative; padding-left: 25px; }
.care-points li::before { content: '✓'; position: absolute; left: 0; top: 1px; color: var(--tao-mint-deep); font-size: 15px; }
.care-points strong { display: block; color: var(--text-title); font-size: 16px; font-weight: 600; }
.care-points span { display: block; margin-top: 6px; color: var(--tao-body); font-size: 14px; line-height: 1.5; }
.brief { padding: 32px; background: var(--surface-card); border-radius: 6px; transform: rotate(-1.2deg); box-shadow: var(--shadow-soft); }
.brief-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border-hairline); }
.brief-top strong { font-size: 28px; font-weight: 800; letter-spacing: -.05em; }
.brief-top span { font-size: 11px; color: var(--text-muted); }
.brief h3 { margin: 0 0 24px; font-size: 30px; line-height: 1.1; letter-spacing: -.03em; }
.brief dl { margin: 0; }
.brief dt { margin: 22px 0 6px; color: var(--tao-body); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.brief dd { margin: 0; color: var(--tao-body); font-size: 14px; line-height: 1.6; }
.brief > p { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--border-hairline); color: var(--tao-mint-deep); font-size: 12px; line-height: 1.5; }
.plans-grid .reference-button { padding-inline: 20px; font-size: 18px; }
.signup-form .reference-button { width: 100%; padding: 15px 12px; font-size: 17px; }
@media (max-width: 900px) {
  .reference-hero { gap: 34px; }
  .hero-demo { width: 100%; max-width: 560px; margin-inline: auto; padding-top: 0; }
  .demo-tabs { max-width: 470px; margin-inline: auto; }
  .goal-experience { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .hero-demo .hero-visual { height: 730px; }
  .care-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .care-copy { grid-row: 1; }
}
@media (max-width: 560px) {
  .reference-hero { padding-top: 36px; }
  .hero-copy h1 { max-width: 13ch; }
  .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
  .hero-actions .reference-button { width: auto; flex: 1; font-size: 16px; padding-inline: 20px; }
  .hero-text-link { font-size: 13px; }
  .demo-tabs { gap: 0; }
  .demo-tabs button { font-size: 12px; }
  .hero-demo .hero-visual { height: calc(min(320px, 100vw - 48px) * 19 / 9 + 42px); margin-top: 0; }
  .hero-demo .phone { --preview-width: min(320px, calc(100vw - 48px)); --deck-offset: 55px; top: 28px; }
  .hero-demo .phone-screen { border-radius: 29px; }
  .app-content h2 { font-size: 28px; }
  .app-content { padding-inline: 18px; }
  .demo-note { font-size: 11px; }
  .experience-section, .care-section { padding-bottom: 64px; }
  .plan-preview { padding: 24px; }
  .plan-line { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
  .plan-line dd { font-size: 14px; }
  .goal-question { font-size: 28px; }
  .care-copy h2 { font-size: 36px; }
  .brief { padding: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-demo .phone, .demo-tabs button { transition: none; }
}