/* September 2026: shared reading and navigation improvements.
   Existing image files and device frames remain unchanged. */
:root { --muted:#465e6c; --reading-accent:#106a76; }
html { scroll-padding-top:24px; }
h1,h2,h3 { text-wrap:balance; overflow-wrap:break-word; }
.word-keep { display:inline-block; }
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid #147680; outline-offset:5px;
}
.guide-band :focus-visible,.start-steps :focus-visible,.reflect-hero :focus-visible {
  outline-color:#a7efff;
}

/* Body copy should be readable without zooming. */
.introduction-body,.flow-heading p,.flow-card p,.principle-list p,
.site-discover-heading p,.closing-description,.watch-flow-header>p,
.watch-step p,.watch-note p,.watch-cta p,.plan-flow-header>p,.plan-step p,.plan-note p,
.reflect-intro-grid p,.reflect-screen-copy>p,.reflect-point-grid p,
.reflect-closing>div>p:not(.eyebrow),.capability-hero-copy>p,.capability-heading>p,
.capability-grid p,.plan-band-heading>p,.plan-card ul,.complimentary-note p,
.prepare-grid p,.start-section-heading>p,.start-steps-heading>p,
.start-step-copy>p:not(.start-step-kicker),.start-step-copy ul,.start-step-note p,
.start-help-grid details p,.start-support-cta>div>p:not(.section-kicker),
.vision-principle-grid>p,.vision-grid ul,.vision-safety-grid>div:last-child p,
.verification-list p,.guide-section p,.guide-band p,.guide-scope p,
.guide-prose li,.guide-setting-grid dd,.data-location p,.use-health-grid dd,
.policy-content p,.support-content ul {
  font-size:16px; line-height:1.9;
}
.plan-card li,.start-step-copy li,.vision-grid li,.support-content li { margin-block:8px; }
.support-content .support-english { color:var(--reading-accent); font-size:14px; line-height:1.8; }
.support-english-title { color:var(--reading-accent)!important; }
.support-content .use-health-grid dd { font-size:16px; }
.section-kicker { color:var(--reading-accent)!important; font-size:12px!important; }
.eyebrow,.section-label,.card-top,.card-top span:last-child,
.site-discover-links span,.capability-meta>span:first-child,
.capability-grid a,.watch-step span,.plan-step span { color:var(--reading-accent); }
.section-label.light,.section-label.light span,.release-card .section-kicker,
.closing .eyebrow,.reflect-hero .eyebrow,.reflect-closing .eyebrow,.vision-hero .eyebrow {
  color:#a7efff!important;
}
.eyebrow,.section-label,.card-top { font-size:12px; letter-spacing:.1em; }
.site-discover-links small,.use-topic-links small,.guide-image-note,
.watch-device-caption,.plan-device-caption,.share-example figcaption,
.share-demo-note,.waitlist-note,.social-links small { font-size:14px; line-height:1.8; }
.guide-footnote { font-size:14px!important; }
.updates-entry>p,.updates-section>p,.updates-offer p,.updates-feature-grid span,
.development-priorities p,.development-teaser p { font-size:16px; line-height:1.9; }
.policy-content h3 { margin:28px 0 12px; font-size:18px; line-height:1.6; }
.policy-content p + p { margin-top:14px; }
.reflect-hero-figure { margin:0; width:min(100%,350px); justify-self:center; }
.reflect-hero-figure .guide-image-note { margin-top:24px; }
.policy-content [id],.guide-page [id] { scroll-margin-top:24px; }
.guide-image-note { text-align:left; letter-spacing:0; }
.start-steps .guide-image-note { color:#173e4b; }
.guide-band .guide-text-link,.guide-band .guide-inline-link,
.guide-band .guide-steps li::before { color:#a7efff; }
.guide-band .guide-access-note { color:#173e4b; }
.guide-text-link { min-height:44px; padding-block:10px; margin-block:12px; font-size:16px; }
.guide-text-link + .guide-text-link { margin-left:24px; }
.use-light-link { text-decoration:underline; min-height:44px; padding-block:10px; margin-top:24px; line-height:1.8; }
.guide-band .use-light-link { color:#a7efff; }
.capability-grid a,.start-step-copy>a,.text-link { font-size:14px; min-height:44px; }
.reflect-period-tabs button { min-height:44px; font-size:14px; }
.button,.waitlist-button { min-height:44px; font-size:14px; }
.status-chip,.guide-tag { font-size:12px; }
.plan-card-head,.plan-card-head strong { font-size:14px; }
.plan-release-note { font-size:14px; }
.start-help-grid summary,.faq-section summary { font-size:16px; line-height:1.7; }
.reflect-period-tabs button[aria-pressed="true"] { color:var(--ink); background:#fff; box-shadow:0 3px 12px rgba(4,24,43,.08); }

/* Every page keeps the same small set of routes, including on phones. */
.nav-center,.site-nav-links { display:flex; align-items:center; flex-wrap:wrap; gap:4px 20px; margin-left:0; }
.nav-center a,.site-nav-links a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; color:#284657; }
.site-nav-links a[aria-current="page"] { color:#0a2639; text-decoration:underline; text-underline-offset:6px; font-weight:700; }
.site-nav-links { margin-left:auto; }
.watch-nav .site-nav-links a,.policy-header .site-nav-links a { font-size:14px; color:#284657; }
.watch-nav,.policy-header { gap:20px; }
.watch-nav>a:last-child,.policy-header>a:last-child { font-size:14px; min-height:44px; display:flex; align-items:center; }
.footer-links { gap:0 20px; }
.footer-links a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; }
footer { font-size:12px; }
.page-jump-nav { display:flex; flex-wrap:wrap; gap:10px; margin-block:28px; }
.page-jump-nav a { display:inline-flex; align-items:center; min-height:44px; padding:10px 16px; border:1px solid #9cb8bd; border-radius:4px; background:#fbfdfd; color:#103d4a; font-size:14px; font-weight:700; line-height:1.6; text-decoration:none; }
.page-jump-nav a:hover { background:#e0eeed; }
main p a { text-decoration:underline; text-underline-offset:4px; }
.prepare-grid p a { display:inline-flex; align-items:center; min-height:44px; }
.prepare-grid p a + a { margin-left:12px; }
.development-status a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; line-height:1.8; }
.skip-link { position:absolute; top:8px; left:16px; z-index:200; transform:translateY(-200%); padding:12px 18px; background:#fff; color:#0a2639; }
.skip-link:focus { transform:translateY(0); }
.hero-description { max-width:35em; }
.hero-requirements { margin:18px 0 0; color:var(--muted); font-size:14px; line-height:1.8; }
.release-notice { font-size:14px; line-height:1.7; }
.release-notice-label { flex-shrink:0; }
.release-notice-action { flex-shrink:0; }
.flow-card .image-context { min-height:0; margin:16px 0 0; padding-top:12px; border-top:1px solid var(--line); color:#465e6c; font-size:14px; line-height:1.8; }
.flow-card .card-content { margin-top:0; }
.start-hero-copy .hero-actions .button { margin-top:0; }
.closing::before { background-image:linear-gradient(180deg,rgba(0,19,43,.13),rgba(0,9,22,.48)),url('../public/pool-hero.png'); }

@media (max-width:800px) {
  .nav,.watch-nav,.policy-header { height:auto; min-height:84px; flex-wrap:wrap; gap:0 16px; padding-block:8px; }
  .nav-center,.site-nav-links { order:3; flex-basis:100%; margin:0; gap:0 20px; padding-top:6px; border-top:1px solid var(--line); }
  .nav-status,.watch-nav>a:last-child,.policy-header>a:last-child { margin-left:auto; }
  .release-notice { display:grid; grid-template-columns:1fr auto; gap:8px 12px; padding:14px; }
  .release-notice-label { display:none; }
  .release-notice-action { max-width:7em; padding-left:12px; }
  .hero-content { padding-top:44px; }
  .plan-hero,.watch-hero,.start-hero,.capability-hero,.reflect-hero { padding-top:48px; }
  .plan-hero h1,.watch-hero h1 { font-size:clamp(34px,9.5vw,46px); line-height:1.3; }
  .capability-hero h1 { font-size:clamp(32px,10vw,52px); }
  .watch-cta h2,.reflect-closing h2,.closing h2 { font-size:clamp(28px,8vw,38px); }
  .guide-text-link { display:table; }
  .guide-text-link + .guide-text-link { margin-left:0; }
  .page-jump-nav { gap:8px; }
  .page-jump-nav a { flex:1 1 156px; }
  .start-step { grid-template-columns:1fr; gap:20px; }
  .start-step-number { display:flex; align-items:center; gap:10px; }
  .start-step-number strong { margin:0; font-size:24px; }
  .start-step-copy h3 { font-size:28px; }
  .start-step-note,.start-screen { grid-column:auto; }
  .introduction h2,.flow-heading h2,.site-discover-heading h2 { font-size:clamp(30px,8.8vw,38px); }
  .start-section-heading h2,.start-steps-heading h2,.plan-band-heading h2,
  .capability-heading h2,.vision-principle h2,.vision-roadmap h2 { font-size:clamp(30px,8.8vw,40px); }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; }
}
@media (min-width:761px) and (max-width:800px) {
  .capability-hero-grid { grid-template-columns:1fr; gap:36px; }
}

/* SUIRO 1.1 captures: original 1206 × 2622 screenshots, with no image compositing. */
.capture-phone-frame {
  overflow:hidden;
  border:6px solid #0b2335;
  border-radius:36px;
  background:#f2f2f7;
  box-shadow:0 12px 28px rgba(4,24,43,.16);
}
.capture-phone-frame img { display:block; width:100%; height:auto; }
.flow-card-01 .card-art img,.flow-card-03 .card-art img {
  position:absolute;
  inset:0;
  object-fit:contain;
  object-position:center;
}
/* Focus the unchanged screenshots on their period selector and basic summary.
   The separate, always-weekly review above the selector would confuse comparison. */
.reflect-screen-art { aspect-ratio:1206 / 930; }
.reflect-screen-art img { object-fit:cover; object-position:center 84.5%; }


/* An explanatory diagram, deliberately distinct from an app screenshot. */
.auto-progress-diagram {
  width:100%;
  max-width:300px;
  min-width:0;
  padding:20px 18px;
  border:1px solid #527c8b;
  border-radius:20px;
  color:#fff;
  background:#082b40;
  text-align:center;
  box-shadow:0 12px 28px rgba(4,24,43,.13);
}
.auto-progress-label {
  display:inline-block;
  padding:5px 10px;
  border-radius:4px;
  color:#082b40;
  background:#a7efff;
  font-size:13px;
  font-weight:700;
  line-height:1.5;
}
.auto-progress-menu { margin-top:14px; font-size:22px; font-weight:700; line-height:1.3; }
.auto-progress-circle { margin-top:4px; color:#d6e8ed; font-size:14px; line-height:1.5; }
.auto-progress-current { margin-top:16px; color:#fff; font-size:14px; font-weight:700; line-height:1.5; }
.auto-progress-countdown { margin-top:16px; color:#d6e8ed; font-size:13px; line-height:1.5; }
.auto-progress-timer {
  display:block;
  margin-top:4px;
  color:#a7efff;
  font-size:64px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.04em;
  line-height:1.1;
}
.auto-progress-rule { margin-top:18px; padding-top:14px; border-top:1px solid #527c8b; color:#fff; font-size:14px; line-height:1.5; }
.flow-card-02 .auto-progress-art { min-height:430px; padding:20px 12px 46px; overflow:hidden; }
.flow-card-02 .auto-progress-art::after { display:none; }
.auto-progress-figure { width:min(100%,300px); min-width:0; margin:0; justify-self:center; }
.auto-progress-figure .watch-device-caption { letter-spacing:0; text-align:left; }
.start-screen .auto-progress-caption {
  position:static;
  width:auto;
  margin:16px 0 0;
  padding:0;
  border-radius:0;
  color:#b9d5df;
  background:transparent;
  font-size:14px;
  font-weight:400;
  line-height:1.8;
  text-align:left;
}
@media (min-width:761px) and (max-width:1050px) {
  .flow-cards { grid-template-columns:1fr; gap:24px; }
  .flow-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px 28px; align-items:center; }
  .flow-card .card-top { grid-column:1 / -1; }
  .flow-card .card-art { min-width:0; margin:0; }
  .flow-card .card-content { align-self:center; }
  .flow-card p { min-height:0; }
}
@media (min-width:1051px) {
  .flow-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .flow-card .card-art { min-height:430px; }
}