/* Rootstep site. No web fonts, no third-party requests, no cookies. */

:root {
  --bg: #fbfaf7;
  --bg-raised: #ffffff;
  --bg-sunk: #f2f0ea;
  --ink: #0f1b33;
  --ink-2: #44506a;
  --ink-3: #5d6880;
  --line: #e3e0d7;
  --blue: #1a50ba;
  --blue-deep: #123a86;
  --blue-soft: #e8eefb;
  --amber: #f5a524;
  --amber-ink: #8a5300;
  --green: #1d7a46;
  --red: #b42318;
  --on-blue: #ffffff;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(15, 27, 51, .06), 0 8px 28px rgba(15, 27, 51, .07);
  --measure: 68ch;
  --wrap: 1120px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system-headline, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --font-round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1220;
    --bg-raised: #121b2e;
    --bg-sunk: #0f1728;
    --ink: #eef2f9;
    --ink-2: #b9c3d6;
    --ink-3: #9aa6bd;
    --line: #233049;
    --blue: #88abff;
    --blue-deep: #2e6be0;
    --blue-soft: #16244a;
    --amber-ink: #f5c26b;
    --green: #5fd398;
    --red: #ff8a80;
    --on-blue: #0b1220;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
  }
}
:root[data-theme="dark"] {
    --bg: #0b1220;
    --bg-raised: #121b2e;
    --bg-sunk: #0f1728;
    --ink: #eef2f9;
    --ink-2: #b9c3d6;
    --ink-3: #9aa6bd;
    --line: #233049;
    --blue: #88abff;
    --blue-deep: #2e6be0;
    --blue-soft: #16244a;
    --amber-ink: #f5c26b;
    --green: #5fd398;
    --red: #ff8a80;
    --on-blue: #0b1220;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-weight: 600;
}
.skip:focus { top: 12px; }

.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.narrow { width: min(760px, 100% - 32px); margin-inline: auto; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.125rem; letter-spacing: -.01em; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: .9375rem; padding: 10px 12px; border-radius: 10px; min-height: 44px; display: inline-flex; align-items: center; }
.nav a:hover { color: var(--ink); background: var(--bg-sunk); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
@media (max-width: 560px) {
  .nav .hide-sm { display: none; }
  .nav a { padding: 10px 8px; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: 999px;
  font-weight: 600; font-size: 1rem; text-decoration: none; border: 1px solid transparent;
  transition: transform .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { background: var(--bg-sunk); }
.btn svg { width: 20px; height: 20px; }
.store-badge { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.15; padding: 10px 22px 10px 52px; position: relative; border-radius: 14px; }
.store-badge::before {
  content: ""; position: absolute; left: 18px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v10.2l3.6-3.6 1.4 1.4-6 6-6-6 1.4-1.4 3.6 3.6V3ZM4 19h16v2H4v-2Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v10.2l3.6-3.6 1.4 1.4-6 6-6-6 1.4-1.4 3.6 3.6V3ZM4 19h16v2H4v-2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.store-badge small { font-size: .75rem; font-weight: 500; opacity: .8; }
.store-badge span { font-size: 1.0625rem; }
.store-badge.soon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 5v5.4l4 2.4-1 1.7-5-3V7h2Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 5v5.4l4 2.4-1 1.7-5-3V7h2Z'/%3E%3C/svg%3E");
}

/* Hero */
.hero { position: relative; overflow: hidden; padding: 72px 0 40px; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--blue) 16%, transparent), transparent 70%);
  pointer-events: none;
}

@media (max-width: 900px) {  .hero { padding-top: 48px; } }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; letter-spacing: -.022em; margin: 0; text-wrap: balance; }
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.25rem); font-weight: 800; margin: 20px 0 20px; }

.lede { font-size: clamp(1.125rem, 2vw, 1.3125rem); color: var(--ink-2); max-width: 36em; margin: 0 0 28px; text-wrap: pretty; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Phones */

/* Sections */
section { padding: 72px 0; }
.section-head { max-width: 46rem; margin-bottom: 40px; }
.kicker { font-size: .9375rem; font-weight: 600; color: var(--blue); margin: 0 0 12px; }
h2 { font-size: clamp(1.875rem, 4vw, 2.75rem); font-weight: 800; }
.section-head p:not(.kicker) { color: var(--ink-2); font-size: 1.125rem; margin: 16px 0 0; text-wrap: pretty; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; list-style: none; padding: 0; margin: 0; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.steps li { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; position: relative; }
.steps li::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 18px;
  background: var(--blue-soft); color: var(--blue); font-family: var(--font-round); font-weight: 800; font-size: 1.125rem;
}
.steps h3 { font-size: 1.25rem; margin-bottom: 8px; }
.steps p { margin: 0; color: var(--ink-2); }

/* Feature grid */

/* Split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 32px; } }
.checklist { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.checklist li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; color: var(--ink-2); }
.checklist li strong { color: var(--ink); }
.checklist svg { width: 22px; height: 22px; margin-top: 3px; color: var(--green); }

/* Pricing */

.plan { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 22px; padding: 32px; display: flex; flex-direction: column; }

.plan .tag { align-self: flex-start; font-size: .8125rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--bg-sunk); color: var(--ink-2); margin-bottom: 14px; }

.plan h3 { font-size: 1.5rem; margin-bottom: 6px; }
.plan .sub { color: var(--ink-2); margin: 0 0 18px; }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.plan li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--ink-2); }
.plan li svg { width: 18px; height: 18px; margin-top: 4px; color: var(--green); }

.fineprint { color: var(--ink-3); font-size: .9375rem; margin-top: 20px; }

/* Pills */
.pills { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 24px 0 0; }
.pills li { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: .9375rem; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.pills svg { width: 16px; height: 16px; color: var(--blue); }

/* Closing CTA */

/* Page (legal, support) */
.page-hero { padding: 56px 0 24px; }
.page-hero h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: 800; margin: 8px 0 14px; }
.page-hero p { color: var(--ink-2); font-size: 1.125rem; margin: 0; max-width: 40em; }
.meta-line { color: var(--ink-3); font-size: .9375rem; margin-top: 14px !important; }

.prose { padding: 16px 0 80px; }
.prose h2 { font-size: 1.5rem; margin: 48px 0 12px; scroll-margin-top: 88px; letter-spacing: -.015em; }
.prose h3 { font-size: 1.125rem; margin: 28px 0 8px; letter-spacing: -.01em; }
.prose p, .prose li { color: var(--ink-2); max-width: var(--measure); }
.prose p strong, .prose li strong { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin: 6px 0; }
.prose .summary { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px; box-shadow: var(--shadow); }
.prose .summary h2 { margin-top: 0; font-size: 1.25rem; }
.prose .summary ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.prose .summary li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; margin: 0; }
.prose .summary svg { width: 18px; height: 18px; margin-top: 4px; color: var(--green); }

.toc { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin: 32px 0 8px; background: var(--bg-raised); }
.toc h2 { font-size: 1rem !important; margin: 0 0 10px !important; letter-spacing: 0; }
.toc ol { margin: 0; padding-left: 1.25em; columns: 2; column-gap: 32px; }
.toc li { margin: 4px 0; break-inside: avoid; }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--blue); text-decoration: underline; }
@media (max-width: 620px) { .toc ol { columns: 1; } }

.table-wrap { overflow-x: auto; margin: 16px 0; border: 1px solid var(--line); border-radius: var(--radius-sm); }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .9375rem; background: var(--bg-raised); }
th, td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
th { color: var(--ink); font-weight: 600; background: var(--bg-sunk); }
tr:last-child td { border-bottom: 0; }

.note { border-left: 4px solid var(--amber); background: color-mix(in srgb, var(--amber) 9%, var(--bg-raised)); padding: 16px 20px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 20px 0; }
.note p { margin: 0; color: var(--ink); }

/* Support */
.contact-card { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 22px; padding: 24px 28px; box-shadow: var(--shadow); margin-top: 8px; }
.contact-card .ico { width: 52px; height: 52px; border-radius: 14px; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; }
.contact-card .ico svg { width: 26px; height: 26px; }
.contact-card h2 { font-size: 1.25rem !important; margin: 0 0 4px !important; }
.contact-card p { margin: 0; }
@media (max-width: 680px) { .contact-card { grid-template-columns: 1fr; } }

.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 28px 0 8px; }
@media (max-width: 760px) { .quick { grid-template-columns: 1fr; } }
.quick a { display: block; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; text-decoration: none; color: var(--ink); transition: border-color .15s ease, transform .15s ease; }
.quick a:hover { border-color: var(--blue); transform: translateY(-1px); }
.quick strong { display: block; margin-bottom: 4px; }
.quick span { color: var(--ink-2); font-size: .9375rem; }

.faq { border-top: 1px solid var(--line); margin-top: 8px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font-weight: 600; color: var(--ink); min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq .answer { padding: 0 0 20px; }
.faq .answer p:first-child { margin-top: 0; }
.faq-group { margin-top: 40px; }
.faq-group > h2 { margin-top: 0 !important; margin-bottom: 8px !important; }

kbd { font-family: inherit; font-size: .875em; background: var(--bg-sunk); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; }
.path { font-weight: 600; color: var(--ink); white-space: nowrap; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 40px 0 48px; color: var(--ink-3); font-size: .9375rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }
.site-footer h2 { font-size: .9375rem; font-weight: 600; color: var(--ink-2); margin: 0 0 12px; font-family: var(--font); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.site-footer a { color: var(--ink-2); text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.site-footer .brand { margin-bottom: 10px; }
.site-footer p { margin: 0 0 6px; max-width: 34em; }
.legal-line { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .875rem; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media print {
  .site-header, .site-footer, .skip, .toc { display: none; }
  body { background: #fff; color: #000; }
  .prose p, .prose li { color: #000; }
  a { color: #000; }
}

/* Utilities (no inline styles, so the CSP can forbid them) */
 .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; } .mt-28 { margin-top: 28px; } .mt-48 { margin-top: 48px !important; }
 

.pad-404 { padding: 48px 0 96px; }
.holding { padding: clamp(56px, 12vh, 140px) 0 clamp(72px, 14vh, 160px); text-align: center; }
.holding p { margin-inline: auto; }
.holding .cta-row { justify-content: center; }
.holding-icon { display: block; width: 96px; height: 96px; margin: 0 auto 24px; border-radius: 22px; box-shadow: 0 18px 40px -18px rgba(11, 20, 48, .55); }

/* =====================================================================
   v2: home page with the live planner, motion and theme switch
   ===================================================================== */
:root { --label: #f3e6cf; --label-ink: #3b2a12; --kraft: #c89b62; --ease-out: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --label: #e9dcc3; } }
:root[data-theme="dark"] { --label: #e9dcc3; }

/* Header extras */
.head-right { display: flex; align-items: center; gap: 4px; }
.theme-btn { width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.theme-btn:hover { background: var(--bg-sunk); color: var(--ink); }
.theme-btn svg { width: 20px; height: 20px; display: none; }
.theme-btn[data-mode="auto"] .t-auto, .theme-btn[data-mode="light"] .t-light, .theme-btn[data-mode="dark"] .t-dark { display: block; }
.theme-btn:not([data-mode]) .t-auto { display: block; }
/* Pause animations: pause while the page moves, play once it is held. */
.motion-btn[hidden] { display: none; }
.motion-btn[aria-pressed="false"] .m-pause, .motion-btn[aria-pressed="true"] .m-play { display: block; }
.motion-btn svg { width: 18px; height: 18px; }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--blue), var(--amber)); }
.site-header.scrolled { box-shadow: 0 6px 24px -18px rgba(15, 27, 51, .5); }

/* Hero v2 */
.hero2 { position: relative; padding: 64px 0 190px; overflow: hidden; isolation: isolate; }
.hero2::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(60% 70% at 85% 10%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 70%),
              radial-gradient(40% 50% at 10% 100%, color-mix(in srgb, var(--amber) 10%, transparent), transparent 70%); }

.hero2-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }
@media (max-width: 980px) { .hero2-grid { grid-template-columns: 1fr; gap: 40px; } .hero2 { padding-top: 40px; } }
.pill { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .9375rem; font-weight: 600; color: var(--ink-2); }
.pill .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 22%, transparent); }
.display { font-size: clamp(2.6rem, 6.2vw, 4.75rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; margin: 18px 0 22px; }
.hero2 .lede { max-width: 33em; }
.hero2-copy > * { animation: rise .8s var(--ease-out) both; }
.hero2-copy > :nth-child(2) { animation-delay: .08s; } .hero2-copy > :nth-child(3) { animation-delay: .16s; }
.hero2-copy > :nth-child(4) { animation-delay: .24s; } .hero2-copy > :nth-child(5) { animation-delay: .32s; }
.planner { animation: rise .9s var(--ease-out) .35s both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Planner */
.planner { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 28px; padding: 24px; box-shadow: 0 30px 80px -40px rgba(15, 27, 51, .45), var(--shadow); position: relative; }
.planner-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.planner-title { font-size: 1.25rem; letter-spacing: -.015em; margin-bottom: 10px; }
.date-field input { font: inherit; font-family: var(--font-round); font-size: 1.125rem; font-weight: 700; color: var(--ink); background: var(--bg-sunk); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; min-height: 48px; color-scheme: inherit; }
.date-field input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.ring { position: relative; width: 92px; height: 92px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4.5; }

.chips { border: 0; margin: 16px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font-size: .9375rem; font-weight: 600; color: var(--ink-2); transition: background-color .2s, color .2s, border-color .2s; }
.chips span::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.6px solid currentColor; transition: background-color .2s; }
.chips input:checked + span { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.chips input:checked + span::before { background: currentColor; box-shadow: inset 0 0 0 2.5px var(--blue); }
.chips input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }

.timeline { list-style: none; margin: 14px 0 0; padding: 4px 4px 4px 0; max-height: 380px; overflow-y: auto; position: relative; scrollbar-width: thin; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(#000 86%, transparent); mask-image: linear-gradient(#000 86%, transparent); }
.timeline li { position: relative; display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: start; padding: 10px 0; }
.timeline li::before { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.timeline li:first-child::before { top: 18px; }
.timeline .node { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-raised); border: 2px solid var(--blue); margin-top: -1px; }
.timeline .node::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }

.timeline .legal .node { border-color: var(--amber); }
.timeline .legal .node::after { background: var(--amber); }
.timeline .moveday .node { width: 26px; height: 26px; background: var(--amber); border-color: var(--amber); }
.timeline .moveday .node::after { background: #fff; }
.timeline .past .node { border-color: var(--ink-3); }
.timeline .past .node::after { background: var(--ink-3); }
.tl-title { font-weight: 600; line-height: 1.35; }
.tl-sub { display: block; font-size: .875rem; color: var(--ink-3); margin-top: 2px; }
.tl-date { font-family: var(--font-round); font-weight: 700; font-size: .9375rem; white-space: nowrap; color: var(--ink-2); text-align: right; }
.tl-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .8125rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber-ink); white-space: nowrap; }
.tl-chip svg { width: 13px; height: 13px; }

.timeline li.enter { animation: tl-in .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes tl-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.planner-foot { margin: 10px 0 0; font-size: .875rem; color: var(--ink-3); }
.tl-noscript { color: var(--ink-3); }
.tl-msg { padding: 16px 0 !important; display: block !important; color: var(--ink-2); }
.tl-msg::before { display: none; }

/* In the app */

/* Bento */

.passport { width: 200px; background: linear-gradient(150deg, #1f3c78, #0f2550); color: #e8eefb; border-radius: 14px; padding: 14px; position: relative; overflow: hidden; box-shadow: 0 14px 30px -14px rgba(15, 27, 51, .6); }

.forms { list-style: none; padding: 0; margin: 0 0 0 16px; display: grid; gap: 6px; font-size: .8125rem; font-weight: 600; }
.forms li { display: flex; align-items: center; gap: 6px; color: var(--ink-3); }
.forms li::before { content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.6px solid currentColor; }
.forms li.on { color: var(--green); }
.forms li.on::before { background: currentColor; box-shadow: inset 0 0 0 2.5px var(--bg-sunk); }

.label { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; background: var(--label); color: var(--label-ink); border-radius: 10px; padding: 14px 16px; width: min(100%, 380px); box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 14px 30px -18px rgba(59, 42, 18, .55); transform: rotate(-2deg); position: relative; }
.label::before { content: ""; position: absolute; left: 50%; top: -9px; width: 70px; height: 18px; transform: translateX(-50%) rotate(2deg); background: color-mix(in srgb, var(--kraft) 55%, transparent); border-radius: 2px; }

.letter { background: var(--bg-raised); border-radius: 10px; padding: 14px 16px; font-size: .875rem; box-shadow: var(--shadow); width: 100%; }
.letter p { margin: 0; font-family: Georgia, "Times New Roman", serif; color: var(--ink); }

.letter mark { background: color-mix(in srgb, var(--amber) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }

.av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; border: 3px solid var(--bg-sunk); margin-left: -10px; }
.av:first-child { margin-left: 0; }
.a1 { background: #1a50ba; } .a2 { background: #b85f00; } 

/* Official flow with scroll-linked line */
.official { padding: 104px 0; }

/* Compare */
.pass-sec { padding: 96px 0; background: var(--bg-sunk); border-block: 1px solid var(--line); }

.no { color: var(--ink-3); }

/* Privacy diagram */
.private { padding: 104px 0; }
.sync { margin: 0; }
.sync svg { width: 100%; max-width: 460px; margin: 0 auto; overflow: visible; }

.sync .dev rect, .sync .dev2 rect { fill: var(--bg-raised); stroke: var(--ink-2); stroke-width: 2.5; }
.sync .dev .scr, .sync .dev2 .scr { fill: var(--blue-soft); stroke: none; }
.sync .cloud path { fill: var(--blue-soft); stroke: var(--blue); stroke-width: 2.5; }
.sync .cloud text { font: 600 13px var(--font); fill: var(--blue); }
.sync .server rect { fill: var(--bg-sunk); stroke: var(--ink-3); stroke-width: 2; }
.sync .server path { stroke: var(--ink-3); stroke-width: 2; fill: none; }
.sync .server .x { stroke: var(--red); stroke-width: 4; stroke-linecap: round; }
.sync figcaption { text-align: center; color: var(--ink-3); font-size: .9375rem; margin-top: 8px; }

.a11y-strip { padding: 80px 0; background: var(--bg-sunk); border-block: 1px solid var(--line); }
.a11y-strip h2 { max-width: 22em; }
.faq-sec { padding: 96px 0; }
.faq-sec h2 { margin-bottom: 20px; }
.closing2 { padding: 104px 0; text-align: center; position: relative; overflow: hidden;
  background: radial-gradient(60% 80% at 50% 0%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 70%); }
.closing2 .icon-big { width: 96px; height: 96px; border-radius: 22px; margin: 0 auto 24px; box-shadow: 0 20px 40px -18px rgba(18, 58, 134, .7); }
.closing2 p { color: var(--ink-2); font-size: 1.125rem; margin: 14px auto 28px; }
.closing2 .cta-row { justify-content: center; }

/* Reveal (once, on a few blocks only) */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js .reveal.in-view { opacity: 1; transform: none; }

/* Support search, contact */
.faq-search { position: relative; margin: 36px 0 0; }
.faq-search svg { position: absolute; left: 16px; top: 15px; width: 20px; height: 20px; color: var(--ink-3); pointer-events: none; }
.faq-search input { width: 100%; font: inherit; color: var(--ink); background: var(--bg-raised); border: 1px solid var(--line); border-radius: 14px; padding: 13px 16px 13px 46px; min-height: 50px; box-shadow: var(--shadow); }
.faq-search input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.faq-count { margin: 8px 2px 0 !important; font-size: .875rem; color: var(--ink-3) !important; min-height: 1.4em; }
.faq-empty p { color: var(--ink-2); }
.faq details.hit summary { color: var(--blue); }
.faq details:target summary, .faq details.flash summary { animation: flash 1.6s ease-out; border-radius: 8px; }
@keyframes flash { 0% { background: color-mix(in srgb, var(--amber) 35%, transparent); } 100% { background: transparent; } }
.faq .answer { animation: open .3s var(--ease-out); }
@keyframes open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.contact-actions { display: flex; flex-direction: column; gap: 8px; }
.contact-card .addr { font-weight: 600; margin-bottom: 4px !important; }
.copy-btn { min-height: 44px; padding: 8px 18px; font-size: .9375rem; cursor: pointer; font-family: inherit; }
.copy-btn.done { color: var(--green); border-color: var(--green); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  
}

@media (max-width: 980px) { .hero2 { padding-bottom: 150px; }  }

/* Hero facts as the route's staircase, rising to the house of the app icon */

.hero2 { padding-bottom: 96px; }

 
 

.timeline:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 12px; }

/* =====================================================================
   v3: conversion pass: tickable sample plan, ticker, chaos to order
   ===================================================================== */
.display { font-size: clamp(2.5rem, 5.6vw, 4.4rem); }
.hero2-copy .lede { font-size: clamp(1.125rem, 1.8vw, 1.25rem); }

.timeline button.node { padding: 0; cursor: pointer; font: inherit; color: inherit; width: 28px; height: 28px; margin-top: -2px; transition: background-color .25s, border-color .25s, transform .25s var(--spring); }
.timeline button.node:hover { transform: scale(1.12); }
.timeline button.node:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.timeline button.node svg { width: 15px; height: 15px; position: absolute; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s var(--spring); color: #fff; }
.timeline li { grid-template-columns: 28px 1fr auto; }
.timeline li.done .node { background: var(--green); border-color: var(--green); }
.timeline li.done .node::after { opacity: 0; }
.timeline li.done .node svg { opacity: 1; transform: none; }
.timeline li.done .tl-title { text-decoration: line-through; text-decoration-color: var(--ink-3); color: var(--ink-3); }
.timeline li.done .tl-date, .timeline li.done .tl-chip { opacity: .55; }
.timeline .node::after { transition: opacity .2s; }
.timeline .moveday .tl-title { font-weight: 800; }
.timeline li.burst .node { animation: burst .5s var(--spring); }
@keyframes burst { 40% { transform: scale(1.3); box-shadow: 0 0 0 8px color-mix(in srgb, var(--green) 25%, transparent); } }
.tl-chip.law { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber-ink); }

/* Ticker of real steps */

/* Chaos to order */

/* Scattered start, like sticky notes on a fridge */

  
  
   

@media (max-width: 520px) {
  .timeline li.step { grid-template-columns: 28px 1fr; }
  .timeline li.step > :last-child { grid-column: 2; justify-self: start; text-align: left; }
  .planner { padding: 18px; border-radius: 22px; }
}

/* =====================================================================
   v4: refined motion. One orchestrated hero, quiet reveals elsewhere.
   ===================================================================== */

/* Hero headline: words rise out of a mask, slightly blurred, one after another */

 
 
 

.hero2-copy > .display { animation: none; }
.hero2-copy > :nth-child(1) { animation-delay: 0s; }
.hero2-copy > :nth-child(3) { animation-delay: .55s; } .hero2-copy > :nth-child(4) { animation-delay: .65s; }
.hero2-copy > :nth-child(5) { animation-delay: .75s; }
.planner { animation: card-in 1.1s cubic-bezier(.16, 1, .3, 1) .45s both; }
@keyframes card-in { from { opacity: 0; transform: translateY(28px) scale(.97); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

 
 

/* Section headings: the line slides up from behind its own baseline */
.js .reveal h2, .js .section-head.reveal h2 { clip-path: inset(0 0 100% 0); transform: translateY(.35em); transition: clip-path 1s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1); }
.js .reveal.in-view h2 { clip-path: inset(-.2em -.2em -.3em -.2em); transform: none; }
.js .reveal { transition-duration: 1s; transition-timing-function: cubic-bezier(.16, 1, .3, 1); }

/* Sample plan: category tags and the arrival of new steps */
.tl-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.tl-tag { font-size: .75rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; line-height: 1.5; }
.tag-abroad { background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); }
.tag-children { background: color-mix(in srgb, var(--green) 13%, transparent); color: var(--green); }
.tag-pets { background: color-mix(in srgb, #9a4dd0 13%, transparent); color: #7b36ad; }
.tag-car { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag-pets { color: #d6a8f5; } }
:root[data-theme="dark"] .tag-pets { color: #d6a8f5; }
.timeline li.added { animation: added 1.4s cubic-bezier(.16, 1, .3, 1) both; border-radius: 12px; }
@keyframes added {
  0% { opacity: 0; transform: translateX(-14px); background: color-mix(in srgb, var(--blue) 12%, transparent); }
  30% { opacity: 1; transform: none; background: color-mix(in srgb, var(--blue) 12%, transparent); }
  100% { background: transparent; }
}
.timeline li.enter { animation-duration: .7s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }

/* Buttons: a soft lift and a light sweep on the primary one */
.btn-primary { position: relative; overflow: hidden; box-shadow: 0 10px 24px -12px rgba(15, 27, 51, .55); }
.btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.btn-primary:hover::after { transform: translateX(120%); }

@media (prefers-reduced-motion: reduce) {
  
  .js .reveal h2 { clip-path: none; transform: none; }
}

/* =====================================================================
   v5: sample plan grouped by what applies
   ===================================================================== */
.timeline { max-height: 460px; padding: 2px 4px 24px 0; }
.timeline > li.grp { display: block; padding: 0; margin: 0 0 14px; border-radius: 16px; }
.timeline > li.grp::before { display: none; }
.grp-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 10px 0 4px; position: sticky; top: 0; z-index: 2; background: var(--bg-raised); }
.grp-head .tl-tag { font-size: .8125rem; padding: 3px 10px; }
.tag-every { background: var(--bg-sunk); color: var(--ink-2); }
.grp-count { font-size: .8125rem; color: var(--ink-3); font-weight: 600; }
.grp-note { font-size: .8125rem; color: var(--ink-3); }
.grp-note::before { content: "+ "; }
.grp-steps { list-style: none; margin: 0; padding: 0; }
.grp-steps li { position: relative; display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: start; padding: 9px 0; }
.grp-steps li::before { content: ""; position: absolute; left: 13px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.grp-steps li:first-child::before { top: 20px; }
.grp-steps li:last-child::before { bottom: calc(100% - 20px); }
.grp-steps li:only-child::before { display: none; }
.tl-body { min-width: 0; }
.tl-sub { display: block; }
.grp-new { animation: grp-in 1.3s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes grp-in {
  0% { opacity: 0; transform: translateY(14px); background: color-mix(in srgb, var(--blue) 10%, transparent); }
  35% { opacity: 1; transform: none; background: color-mix(in srgb, var(--blue) 10%, transparent); }
  100% { background: transparent; }
}
.grp-new .grp-steps li { animation: tl-in .6s cubic-bezier(.16, 1, .3, 1) both; }
.grp-new .grp-steps li:nth-child(2) { animation-delay: .07s; } .grp-new .grp-steps li:nth-child(3) { animation-delay: .14s; }
.grp-new .grp-steps li:nth-child(4) { animation-delay: .21s; } .grp-new .grp-steps li:nth-child(5) { animation-delay: .28s; }
.timeline > li.grp.enter { animation: tl-in .7s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
@media (max-width: 520px) {
  .timeline { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .grp-head { position: static; }
  .grp-steps li { grid-template-columns: 28px 1fr; }
  .grp-steps li > :last-child { grid-column: 2; justify-self: start; }
}

/* Two-way motion: reveals reverse when a block leaves the view; groups leave the plan with a collapse */
.js .reveal:not(.in-view) { transition-duration: .6s; }
.grp-leave { overflow: hidden; animation: grp-out .42s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes grp-out {
  0% { opacity: 1; max-height: var(--h, 400px); transform: none; }
  100% { opacity: 0; max-height: 0; transform: translateY(-8px); margin-bottom: 0; }
}
/* Tile illustrations replay each time they come back into view */

/* Sync diagram: two-way lanes between each device and iCloud */

.sync .lane { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 0 11; }
.sync .lane.up { stroke: var(--blue); }
.sync .lane.down { stroke: var(--amber); }
.sync .ar-up path { fill: var(--blue); }
.sync .ar-down path { fill: var(--amber); }
.sync .lane.rev { animation-direction: reverse; }
.sync figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 14px; }
.sync .key { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--ink-2); }
.sync .key::before { content: ""; flex: none; width: 12px; height: 18px; background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Ccircle cx='6' cy='16' r='1.6'/%3E%3Ccircle cx='6' cy='10.6' r='1.6'/%3E%3Cpath d='M1.5 7 6 1l4.5 6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Ccircle cx='6' cy='16' r='1.6'/%3E%3Ccircle cx='6' cy='10.6' r='1.6'/%3E%3Cpath d='M1.5 7 6 1l4.5 6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.sync .k-down::before { background: var(--amber); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Ccircle cx='6' cy='2' r='1.6'/%3E%3Ccircle cx='6' cy='7.4' r='1.6'/%3E%3Cpath d='M1.5 11 6 17l4.5-6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Ccircle cx='6' cy='2' r='1.6'/%3E%3Ccircle cx='6' cy='7.4' r='1.6'/%3E%3Cpath d='M1.5 11 6 17l4.5-6z'/%3E%3C/svg%3E"); }
.sync .k-none::before { -webkit-mask: none; mask: none; width: 14px; height: 14px; border: 0; background: linear-gradient(45deg, transparent 43%, var(--red) 43% 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, var(--red) 43% 57%, transparent 57%); }
.sync figcaption { flex-direction: column; align-items: flex-start; width: max-content; max-width: 100%; margin-inline: auto; gap: 6px; }

/* =====================================================================
   v6: feature coverage and choreographed, reversible motion
   ===================================================================== */
:root { --ease-x: cubic-bezier(.16, 1, .3, 1); }

/* Wherever you look: a full-width tile */

/* Pointer spotlight on tiles (fine pointers only, set by script) */

/* Tile illustrations: each plays in when the tile enters the view and reverses when it leaves */

  

  

  
.letter mark { background: linear-gradient(color-mix(in srgb, var(--amber) 38%, transparent), color-mix(in srgb, var(--amber) 38%, transparent)) no-repeat 0 0 / 100% 100%; transition: background-size 1s var(--ease-x) .35s; }

 

 

  
   

/* Phones: scroll-linked. They fan out as the section reaches the middle of the view and close as it leaves, both ways. */

/* Compare table: rows and ticks draw in, and reverse */

  
  
  
   

/* =====================================================================
   v7: Plan it together, and real QR labels being printed and scanned
   ===================================================================== */

/* ---- Plan it together ---- */
.together { padding: 104px 0; }
.tg-stage { margin: 0; position: relative; display: grid; place-items: center; padding: 28px 0; }
.tg-stage::before { content: ""; position: absolute; inset: 6% 4%; border-radius: 40px; z-index: -1;
  background: radial-gradient(60% 60% at 30% 20%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 70%),
              radial-gradient(50% 50% at 80% 90%, color-mix(in srgb, var(--amber) 12%, transparent), transparent 70%); }
.tg-card { width: min(100%, 440px); background: var(--bg-raised); border: 1px solid var(--line); border-radius: 26px; padding: 20px; box-shadow: 0 40px 80px -40px rgba(15, 27, 51, .45), var(--shadow); }
.tg-head { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.tg-tick { width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid var(--blue); display: grid; place-items: center; color: #fff; margin-top: 2px; transition: background-color .4s, border-color .4s, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.tg-tick svg { width: 16px; height: 16px; stroke-width: 3; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.tg-title { font-weight: 700; font-size: 1.125rem; transition: color .4s; }
.tg-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; font-size: .875rem; color: var(--ink-3); }
.tg-assign { display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; padding: 10px 12px; border-radius: 14px; background: var(--bg-sunk); font-size: .9375rem; }
.tg-label { color: var(--ink-3); }
.tg-who { position: relative; width: 34px; height: 34px; }
.tg-who .av { position: absolute; inset: 0; width: 34px; height: 34px; margin: 0; border-color: var(--bg-sunk); font-size: .875rem; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), opacity .4s; }
.tg-names { position: relative; display: inline-grid; font-weight: 700; }
.tg-names > span { grid-area: 1 / 1; transition: opacity .4s, transform .5s cubic-bezier(.16, 1, .3, 1); }
.w-sarah, .n-sarah { opacity: 0; transform: translateY(12px) scale(.7); }
.tg-thread { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; min-height: 230px; align-content: start; }
.tg-thread > li { opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .5s, transform .6s cubic-bezier(.16, 1, .3, 1); max-height: 0; overflow: hidden; }
.tg-msg { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: end; }
.tg-msg.me { grid-template-columns: 1fr 30px; }
.tg-msg .av, .tg-typing .av { width: 30px; height: 30px; margin: 0; border: 0; font-size: .75rem; }
.tg-bub { background: var(--bg-sunk); border-radius: 16px 16px 16px 4px; padding: 9px 13px; font-size: .9375rem; }
.tg-msg.me .tg-bub { background: var(--blue); color: var(--on-blue); border-radius: 16px 16px 4px 16px; }
.tg-msg.me .tg-bub strong { color: var(--on-blue); opacity: .85; }
.tg-bub strong { display: block; font-size: .75rem; color: var(--ink-3); }
.tg-bub p { margin: 1px 0 0; }
.tg-typing { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-direction: row-reverse; }
.dots { display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--bg-sunk); }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: dot 1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.tg-event { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .8125rem; font-weight: 600; color: var(--green); }
.tg-event svg { width: 16px; height: 16px; }
.tg-sync { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--ink-3); }
.sdot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 50%, transparent); }
.tg-stage.syncing .sdot { animation: ping .9s ease-out; }
@keyframes ping { to { box-shadow: 0 0 0 10px transparent; } }
/* the sequence */
.tg-stage.s1 .w-max { opacity: 0; transform: translateY(-12px) scale(.7); }
.tg-stage.s1 .w-sarah, .tg-stage.s1 .n-sarah { opacity: 1; transform: none; }
.tg-stage.s1 .n-max { opacity: 0; transform: translateY(-10px); }
.tg-stage.s2 .m1, .tg-stage.s3 .tg-typing, .tg-stage.s4 .m2, .tg-stage.s5 .tg-event { opacity: 1; transform: none; max-height: 120px; }
.tg-stage.s4 .tg-typing { opacity: 0; max-height: 0; transform: translateY(-6px); }
.tg-stage.s5 .tg-tick { background: var(--green); border-color: var(--green); transform: scale(1.12); }
.tg-stage.s5 .tg-tick svg { opacity: 1; transform: none; }
.tg-stage.s5 .tg-title { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-3); }

/* ---- Box labels: print, then scan ---- */
.labels-sec { padding: 104px 0; background: var(--bg-sunk); border-block: 1px solid var(--line); overflow: hidden; }
.printer { position: relative; padding-top: 26px; }
.printer-slot { position: absolute; left: 0; right: 0; top: 0; height: 18px; border-radius: 12px; background: linear-gradient(var(--ink), color-mix(in srgb, var(--ink) 75%, transparent)); box-shadow: 0 10px 20px -10px rgba(15, 27, 51, .6); z-index: 3; }
.printer-slot::after { content: ""; position: absolute; left: 16px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--green); opacity: .3; transition: opacity .3s; }
.printer.printing .printer-slot::after { opacity: 1; animation: blink .5s steps(2) infinite; }
@keyframes blink { 50% { opacity: .3; } }
.plabels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative; z-index: 1; }
@media (max-width: 900px) { .plabels { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
.plabel { position: relative; clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.65, 0, .35, 1); }
.plabel .pl-sheet { transform: translateY(-40px); transition: transform 1.1s cubic-bezier(.65, 0, .35, 1); }
.printer.p0 .pl-0, .printer.p1 .pl-1, .printer.p2 .pl-2 { clip-path: inset(-60px -40px -200px -40px); }
.printer.p0 .pl-0 .pl-sheet, .printer.p1 .pl-1 .pl-sheet, .printer.p2 .pl-2 .pl-sheet { transform: none; }
.pl-sheet { display: grid; grid-template-columns: auto 1fr 92px; gap: 14px; align-items: center; background: #fbf7ef; color: #2a1f10; border-radius: 12px; padding: 16px; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 20px 34px -22px rgba(59, 42, 18, .55); border: 1px dashed rgba(59, 42, 18, .25); }
.pl-no { font-family: var(--font-round); font-size: 2.8rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; min-width: 1.4em; }
.pl-rooms { font-weight: 700; }
.pl-rooms span { font-weight: 500; opacity: .65; }
.pl-items { font-size: .8125rem; opacity: .85; margin-top: 2px; line-height: 1.4; }
.pl-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pl-tags span { font-size: .6875rem; font-weight: 800; border: 1.5px solid currentColor; border-radius: 4px; padding: 1px 5px; }
.pl-qr { position: relative; width: 92px; height: 92px; }
.qr-real { width: 100%; height: 100%; border-radius: 4px; display: block; }
/* viewfinder: four corners and a scanning line */
.vf { position: absolute; inset: -9px; opacity: 0; transform: scale(1.35); transition: opacity .35s, transform .55s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.vf i { position: absolute; width: 18px; height: 18px; border: 3.5px solid #f5c400; }
.vf i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 7px; }
.vf i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 7px; }
.vf i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 7px; }
.vf i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 7px; }
.vf b { position: absolute; left: 8px; right: 8px; top: 8px; height: 2px; background: #f5c400; box-shadow: 0 0 10px 2px rgba(245, 196, 0, .6); opacity: 0; }
.plabel.scan .vf { opacity: 1; transform: none; }
.plabel.scan .vf b { opacity: 1; animation: sweep 1s ease-in-out 2 alternate; }
@keyframes sweep { from { top: 8px; } to { top: calc(100% - 10px); } }
.pl-pop { position: absolute; left: 50%; top: calc(100% + 12px); width: min(280px, 92%); transform: translate(-50%, -8px) scale(.95); opacity: 0; transition: opacity .35s, transform .5s cubic-bezier(.34, 1.56, .64, 1);
  background: color-mix(in srgb, var(--bg-raised) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; font-size: .8125rem; line-height: 1.45; color: var(--ink); box-shadow: var(--shadow); z-index: 4; }
.pl-pop-h { display: block; font-size: .6875rem; font-weight: 700; color: var(--ink-3); margin-bottom: 2px; }
.plabel.found .pl-pop { opacity: 1; transform: translate(-50%, 0) scale(1); }
.plabels { padding-bottom: 150px; }
@media (max-width: 900px) { .plabels { padding-bottom: 0; gap: 140px; } .plabels .plabel:last-child { margin-bottom: 140px; } }

@media (prefers-reduced-motion: reduce) {
  .plabel { clip-path: none !important; } .plabel .pl-sheet { transform: none !important; }
  .tg-thread > li { opacity: 1 !important; transform: none !important; max-height: none !important; }
  .tg-stage .tg-typing { display: none; }
}
.plabels { align-items: stretch; }
.plabel { display: flex; } .plabel .pl-sheet { flex: 1; }
@media (min-width: 901px) and (max-width: 1240px) { .pl-sheet { grid-template-columns: auto 1fr; } .pl-qr { grid-column: 1 / -1; justify-self: center; } }

/* =====================================================================
   v8: Made for the moments that hurt (three animated scenes)
   ===================================================================== */

.hstage { margin: 0; height: 340px; border-radius: 18px; background: var(--bg-sunk); position: relative; overflow: hidden; display: grid; place-items: center; padding: 16px; }

/* shared "swap" of an old value for a new one */
.swap { position: relative; display: inline-grid; justify-items: end; font-family: var(--font-round); font-weight: 700; white-space: nowrap; }
.swap s, .swap b { grid-area: 1 / 1; transition: opacity .45s, transform .6s var(--ease-x), color .3s; }
.swap s { text-decoration-color: transparent; color: var(--ink-2); }
.swap b { opacity: 0; transform: translateY(12px); color: var(--blue); }

/* A. Change move dates */

/* B. Letter helper */
.lt-paper { position: relative; width: 100%; max-width: 320px; background: #fffdf8; color: #2a2318; border-radius: 6px; padding: 18px 18px; box-shadow: 0 18px 30px -18px rgba(15, 27, 51, .45); font-family: Georgia, "Times New Roman", serif; font-size: .875rem; line-height: 1.55; transform: rotate(-1.5deg); overflow: hidden; transition: transform .7s var(--ease-x), filter .5s; }
.lt-paper p { margin: 0; }
.lt-date, .lt-bring { border-radius: 3px; padding: 0 2px; transition: background-color .5s, box-shadow .5s; }
.lt-scan { position: absolute; left: 0; right: 0; top: -30%; height: 30%; background: linear-gradient(transparent, rgba(46, 107, 224, .28), transparent); opacity: 0; }
.lt-found, .lt-task { position: absolute; left: 50%; width: min(300px, 86%); background: var(--bg-raised); border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow); font-size: .8125rem; display: flex; flex-direction: column; gap: 2px; opacity: 0; transition: opacity .45s, transform .7s cubic-bezier(.34, 1.56, .64, 1); }
.lt-found { bottom: 18px; transform: translate(-50%, 30px); }
.lt-task { top: 18px; transform: translate(-50%, -30px); border-left: 4px solid var(--blue); }
.lt-k { font-size: .6875rem; font-weight: 700; color: var(--ink-3); }
.lt-found strong, .lt-task strong { font-size: .9375rem; }
.lt-asw { color: var(--ink-3); }
.lt-list { color: var(--ink-2); margin-top: 2px; }
#sc-letter.l1 .lt-scan { opacity: 1; animation: lscan 1.4s ease-in-out forwards; }
@keyframes lscan { to { top: 100%; } }
#sc-letter.l2 .lt-date { background: color-mix(in srgb, var(--amber) 40%, transparent); box-shadow: 0 0 0 2px var(--amber); }
#sc-letter.l2 .lt-found { opacity: 1; transform: translate(-50%, 0); }
#sc-letter.l3 .lt-bring { background: color-mix(in srgb, var(--blue) 18%, transparent); }
#sc-letter.l4 .lt-paper { transform: rotate(-1.5deg) scale(.86) translateY(34px); filter: blur(1px) saturate(.6); }
#sc-letter.l4 .lt-found { opacity: 0; transform: translate(-50%, 30px); }
#sc-letter.l4 .lt-task { opacity: 1; transform: translate(-50%, 0); }

/* C. Lock Screen Live Activity */
.lock { width: 220px; height: 310px; border-radius: 34px; padding: 18px 12px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(120% 80% at 20% 0%, #3d6fd8, transparent 60%), radial-gradient(100% 70% at 100% 100%, #f5a524, transparent 55%), #0f1f45;
  box-shadow: 0 0 0 7px #11151f, 0 24px 40px -18px rgba(15, 27, 51, .6); transform: scale(.94); opacity: .4; transition: transform .8s var(--ease-x), opacity .6s; }
.lk-date { text-align: center; font-size: .75rem; font-weight: 600; opacity: .9; }
.lk-time { text-align: center; font-family: var(--font-round); font-size: 3.4rem; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.lk-live, .lk-notif { position: absolute; left: 10px; right: 10px; border-radius: 18px; background: rgba(20, 24, 34, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 10px 12px; opacity: 0; transition: opacity .5s, transform .7s cubic-bezier(.34, 1.56, .64, 1); }
.lk-live { bottom: 86px; transform: translateY(30px); }
.lk-notif { bottom: 14px; transform: translateY(30px); display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: center; font-size: .6875rem; }
.lk-notif img, .lk-row img { border-radius: 5px; }
.lk-notif strong { display: block; font-size: .75rem; }
.lk-notif span { opacity: .75; }
.lk-row { display: flex; align-items: center; gap: 6px; font-size: .6875rem; opacity: .85; }
.lk-ico { width: 13px; height: 13px; }
.lk-place { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: .75rem; opacity: .9; }
.lk-place svg { width: 12px; height: 12px; }
.lk-leave span { opacity: .7; }
.lk-when { margin-left: auto; }
.lk-title { font-weight: 700; font-size: .9375rem; margin-top: 6px; }
.lk-leave { font-size: .8125rem; margin-top: 2px; }
.lk-leave strong { font-family: var(--font-round); font-variant-numeric: tabular-nums; color: #ffd38a; font-size: 1rem; }
#sc-lock.k1 .lock { transform: none; opacity: 1; }
#sc-lock.k2 .lk-live { opacity: 1; transform: none; }
#sc-lock.k3 .lk-notif { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lt-scan { display: none; }
  #sc-letter .lt-found { display: none; }
}

/* Widgets block */
.wg-block { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 64px; }
@media (max-width: 900px) { .wg-block { grid-template-columns: 1fr; gap: 28px; } }
.wg-h { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; }
.wg-copy > p { color: var(--ink-2); font-size: 1.0625rem; margin: 0; }
.wg-stage { margin: 0; display: grid; place-items: center; }
.hs-phone { width: 300px; border-radius: 42px; padding: 22px 16px 14px; position: relative; overflow: hidden;
  background: radial-gradient(90% 60% at 10% 0%, #6f9cf0, transparent 60%), radial-gradient(90% 70% at 100% 100%, #f5b74a, transparent 60%), linear-gradient(160deg, #2a54b8, #12306e);
  box-shadow: 0 0 0 8px #11151f, 0 40px 70px -30px rgba(15, 27, 51, .6); }
.wg-med, .wg-small { background: rgba(255, 255, 255, .9); color: #0f1b33; border-radius: 22px; padding: 12px; box-shadow: 0 6px 18px -8px rgba(0,0,0,.35); position: relative; }
.wg-top { display: flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; }
.wg-top img { border-radius: 4px; }
.wg-days { margin-left: auto; font-family: var(--font-round); color: #1a50ba; }
.wg-days .swap s, .wg-days .swap b { color: #1a50ba; }
.wg-list { list-style: none; margin: 8px 0 0; padding: 0; }
.wg-list li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; font-size: .78rem; font-weight: 600; max-height: 40px; padding: 5px 0; overflow: hidden; transition: max-height .6s var(--ease-x), opacity .45s, transform .6s var(--ease-x), padding .6s var(--ease-x); }
.wg-d { color: #5d6880; font-family: var(--font-round); font-weight: 700; }
.wg-tick { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #1a50ba; display: grid; place-items: center; color: #fff; transition: background-color .3s, border-color .3s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.wg-tick svg { width: 12px; height: 12px; stroke-width: 3.4; opacity: 0; transform: scale(.4); transition: opacity .25s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.wg-list .r3 { max-height: 0; opacity: 0; padding: 0; transform: translateY(10px); }
.finger { position: absolute; width: 34px; height: 34px; border-radius: 50%; left: 4px; top: 30px; background: rgba(15, 27, 51, .18); border: 2px solid rgba(255,255,255,.9); box-shadow: 0 4px 12px rgba(0,0,0,.25); opacity: 0; transform: translate(60px, 60px) scale(1.2); transition: opacity .4s, transform .8s var(--ease-x); }
.wg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.wg-small { aspect-ratio: 1; display: flex; flex-direction: column; }
.wg-big { font-family: var(--font-round); font-size: 2.2rem; font-weight: 800; line-height: 1; color: #1a50ba; }
.wg-cap { font-size: .6875rem; color: #5d6880; font-weight: 600; }
.wg-next { margin-top: auto; font-size: .72rem; font-weight: 700; display: grid; }
.wg-k { font-size: .625rem; color: #5d6880; font-weight: 700; }
.swap-l { justify-items: start; font-family: var(--font); white-space: normal; line-height: 1.25; }
.swap-l s, .swap-l b { color: #0f1b33 !important; }
.apps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.apps i { aspect-ratio: 1; border-radius: 14px; background: rgba(255,255,255,.28); display: block; overflow: hidden; }
.apps i.app-ic { background: none; }
.apps i.app-ic img { width: 100%; height: 100%; display: block; border-radius: 14px; }
.dock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; padding: 10px; border-radius: 24px; background: rgba(255,255,255,.22); }
.dock i { aspect-ratio: 1; border-radius: 13px; background: rgba(255,255,255,.35); }
/* the sequence */
#sc-widgets.w1 .finger { opacity: 1; transform: none; }
#sc-widgets.w2 .finger { transform: scale(.85); }
#sc-widgets.w2 .r1 .wg-tick { background: #1d7a46; border-color: #1d7a46; transform: scale(1.15); }
#sc-widgets.w2 .r1 .wg-tick svg { opacity: 1; transform: none; }
#sc-widgets.w2 .r1 .wg-t { text-decoration: line-through; color: #5d6880; }
#sc-widgets.w3 .finger { opacity: 0; transform: translate(40px, -20px); }
#sc-widgets.w3 .r1 { max-height: 0; opacity: 0; padding: 0; transform: translateY(-10px); }
#sc-widgets.w3 .r3 { max-height: 40px; opacity: 1; padding: 5px 0; transform: none; }
#sc-widgets.w3 .wg-next .swap s { opacity: 0; transform: translateY(-10px); }
#sc-widgets.w3 .wg-next .swap b { opacity: 1; transform: none; }

#sc-letter.l2 .lt-date { background: #ffd27a; color: #2a2318; box-shadow: 0 0 0 2px #e39a12; }
#sc-letter.l3 .lt-bring { background: #d6e3ff; color: #2a2318; }

/* a long title never widens the card: it takes what the dates leave */

/* =====================================================================
   v9: English-only letter scenes, budget scene
   ===================================================================== */
/* bento letter tile */

.letter .lt-k { display: block; margin-bottom: 2px; }
/* scene letter */
.lt-paper { font-family: var(--font); }
.lt-lines { display: grid; gap: 9px; transition: opacity .6s, filter .6s; }
.lt-lines i { height: 9px; border-radius: 5px; background: rgba(42, 35, 24, .22); }
.lt-lines i.w80 { width: 80%; } .lt-lines i.w60 { width: 60%; } .lt-lines i.w90 { width: 90%; } .lt-lines i.w40 { width: 40%; }
.lt-lines i.hl { width: 72%; transition: background-color .5s; }
.lt-en { position: absolute; inset: 16px 18px; font-size: .875rem; line-height: 1.55; color: #2a2318; opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .7s var(--ease-x); }
.lt-en .lt-k { display: block; margin-bottom: 4px; color: #5d6880; }
#sc-letter.l1 .lt-lines i.hl { background: rgba(245, 165, 36, .7); }
#sc-letter.l2 .lt-lines { opacity: 0; filter: blur(3px); }
#sc-letter.l2 .lt-en { opacity: 1; transform: none; }
.lt-paper { min-height: 150px; }

/* budget */
.bg-block { grid-template-columns: 1fr 1fr; }
.bg-stage { margin: 0; display: grid; place-items: center; padding: 20px 0; }
.bg-card { width: min(100%, 380px); background: var(--bg-raised); border: 1px solid var(--line); border-radius: 24px; padding: 18px; box-shadow: 0 40px 80px -40px rgba(15, 27, 51, .45), var(--shadow); position: relative; }
.bg-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; font-size: 1.125rem; }
.bg-cur { font-size: .8125rem; font-weight: 700; color: var(--ink-3); }
.bg-total { margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: var(--bg-sunk); }
.bg-k { display: block; font-size: .75rem; font-weight: 600; color: var(--ink-3); }
.bg-total strong { font-family: var(--font-round); font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bg-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 10%, transparent); margin-top: 8px; overflow: hidden; }
.bg-fill { display: block; height: 100%; width: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--blue), #6f9cf0); transform-origin: left; transform: scaleX(.44); transition: transform 1.1s var(--ease-x); }
.bg-cats { list-style: none; margin: 12px 0 0; padding: 0; }
.bg-cats li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: .875rem; transition: background-color .6s; border-radius: 8px; }
.bg-cats li:last-child { border-bottom: 0; }
.bg-amt { font-family: var(--font-round); font-weight: 700; color: var(--ink-2); font-size: .8125rem; }
.bg-amt .swap s { color: var(--ink-2); text-decoration: none; }
.bg-mini { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.bg-mini i { display: block; height: 100%; width: 100%; background: var(--blue); transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease-x); }
.bg-mini.full i { transform: scaleX(1); background: var(--green); }
.bg-mini.f87 i { transform: scaleX(.87); }
.bg-mini.f33 i { transform: scaleX(.33); }
.bg-new { position: absolute; left: 50%; top: 46%; width: 88%; display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: var(--bg-raised); border: 1px solid var(--line); box-shadow: 0 24px 50px -20px rgba(15, 27, 51, .5); opacity: 0; transform: translate(-50%, 40px) scale(.94); transition: opacity .45s, transform .8s cubic-bezier(.34, 1.56, .64, 1); overflow: hidden; }
.bg-receipt { height: 72px; border-radius: 6px; background: #fffdf8; border: 1px solid rgba(42, 35, 24, .15); padding: 8px 6px; display: grid; gap: 5px; align-content: start; transform: rotate(-4deg); }
.bg-receipt i { height: 4px; border-radius: 2px; background: rgba(42, 35, 24, .25); }
.bg-receipt i.s { width: 60%; }
.bg-receipt b { font-size: .5625rem; color: #2a2318; font-family: var(--font-round); margin-top: 4px; }
.bg-new-body { display: flex; flex-direction: column; gap: 2px; font-size: .875rem; }
.bg-chf { font-family: var(--font-round); font-weight: 800; font-size: 1.125rem; }
.bg-conv { font-size: .8125rem; color: var(--blue); font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease-x); }
.bg-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
/* sequence */
#sc-budget.b1 .bg-new { opacity: 1; transform: translate(-50%, 0) scale(1); }
#sc-budget.b1 .bg-flash { animation: flash-cam .5s ease-out; }
@keyframes flash-cam { 0% { opacity: .9; } 100% { opacity: 0; } }
#sc-budget.b2 .bg-conv { opacity: 1; transform: none; }
#sc-budget.b3 .bg-new { opacity: 0; transform: translate(-50%, -40px) scale(.6); }
#sc-budget.b3 .c-movers { background: color-mix(in srgb, var(--blue) 9%, transparent); }
#sc-budget.b3 .c-movers .swap s { opacity: 0; transform: translateY(-10px); }
#sc-budget.b3 .c-movers .swap b { opacity: 1; transform: none; }
#sc-budget.b3 .c-movers .bg-mini i { transform: scaleX(.32); }
#sc-budget.b3 .bg-fill { transform: scaleX(.56); }
@media (max-width: 900px) { .bg-block .bg-stage { order: 2; } }
@media (prefers-reduced-motion: reduce) { #sc-budget .bg-new { display: none; } }
/* Hero staircase: never squeeze a step or the house */

/* Letter helper tile: a real-looking letter, then its translation slides over it */

  

/* motion, both ways with the tile */

/* =====================================================================
   v10: audit fixes
   ===================================================================== */
.wrap { width: min(var(--wrap), 100% - clamp(32px, 7vw, 96px)); }
.hero2-grid { align-items: start; }
.hero2-copy { padding-top: 12px; }
@media (max-width: 900px) { .bg-block, .wg-block { grid-template-columns: 1fr; } }

/* How it works */

 

/* Pricing as two cards */

/* Tiles: fixed illustration height so titles line up */

.forms li, .pl-tags span, .tl-tag { white-space: nowrap; }

/* Labels: less empty space under the sheet on wide screens */
.plabels { padding-bottom: 128px; }

/* Date change: the old date leaves before the new one arrives */

/* Budget overlay: solid, above the list */
.bg-new { z-index: 5; background: var(--bg-raised); }
#sc-budget.b3 .bg-new { transition: opacity .3s, transform .5s var(--ease-x); }

/* Family card: start sooner, less empty space */
.tg-thread { min-height: 190px; }

.nav { flex-wrap: nowrap; }
.nav a { white-space: nowrap; }
@media (max-width: 460px) { .nav .hide-xs { display: none; } }

/* =====================================================================
   v11: date field, spreadsheet comparison, Move Pass card
   ===================================================================== */
/* Date: our own readable label, the native picker on top of it (invisible), so the format never depends on the browser */
.date-field { position: relative; display: inline-block; }
.date-show { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 16px; border-radius: 12px; background: var(--bg-sunk); border: 1px solid var(--line); font-family: var(--font-round); font-size: 1.0625rem; font-weight: 700; color: var(--ink); white-space: nowrap; transition: border-color .2s, box-shadow .2s; }
.date-show svg { width: 18px; height: 18px; color: var(--blue); }
.date-field input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; font-size: 16px; }
.date-field:hover .date-show { border-color: var(--blue); }
.date-field input:focus-visible + .date-show, .date-field:focus-within .date-show { outline: 3px solid var(--blue); outline-offset: 2px; }
.date-field input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* Move Pass: the card that sells */

.mp-sheen { position: absolute; inset: -40% -60%; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%); transform: translateX(-60%); pointer-events: none; }
.pass-sec.in-view .mp-sheen { animation: sheen 2.4s var(--ease-x) .6s; }
@keyframes sheen { to { transform: translateX(60%); } }

  
 

@media (prefers-reduced-motion: reduce) { .mp-sheen { display: none; }  }

/* Pricing as one comparison table (v12): Free for good and the Move Pass, feature by feature */
.pt-card { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-raised);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 18px 40px -24px rgba(16, 24, 40, .22); }
.pt { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.pt .pt-col { width: 168px; }
.pt th, .pt td { text-align: left; vertical-align: middle; padding: 15px 26px; border-top: 1px solid var(--line); }
.pt thead th { border-top: 0; padding-top: 22px; padding-bottom: 20px; vertical-align: bottom; }
.pt td { text-align: center; }
.pt .pt-p { border-left: 1px solid color-mix(in srgb, var(--blue) 30%, var(--line)); }
.pt .pt-f { border-left: 1px solid var(--line); }
/* header */
.pt-trial { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; font-size: .875rem; font-weight: 700;
  color: var(--blue); background: var(--blue-soft); }
.pt-trial svg { width: 17px; height: 17px; flex: none; }
.pt-hf, .pt-hp { text-align: center !important; }
.pt-hf strong, .pt-hp strong { display: block; font-size: 1.25rem; line-height: 1.2; }
.pt-hf span, .pt-hp > span:last-child { display: block; font-size: .8125rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-top: 3px; }
.pt-hf { border-left: 1px solid var(--line); color: var(--ink); }
.pt-hf span { color: var(--ink-2); }
.pt-hp { position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 90% at 0% 0%, #2e6be0 0%, transparent 60%), radial-gradient(90% 80% at 100% 100%, rgba(245, 165, 36, .38), transparent 62%), linear-gradient(160deg, #1b4fb8, #0d2a66); }
.pt-hp img { display: block; margin: 0 auto 8px; border-radius: 8px; box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .45); position: relative; }
.pt-hp strong { position: relative; color: #fff; }
.pt-hp > span:last-child { position: relative; color: #ffd38a; }
/* group rows */
.pt-group th { padding-top: 22px; padding-bottom: 10px; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.pt-group td { border-top-color: var(--line); }
/* feature rows */
.pt-row th { font-weight: 400; }
.pt-row th strong { display: block; font-weight: 700; color: var(--ink); }
.pt-row th span { display: block; margin-top: 2px; color: var(--ink-2); font-size: .9375rem; line-height: 1.45; }
.pt-group + .pt-row th, .pt-group + .pt-row td { border-top-color: transparent; }
.pt-yes svg { box-sizing: border-box; width: 26px; height: 26px; padding: 5px; border-radius: 50%; vertical-align: middle; stroke-width: 3; }
.pt-f .pt-yes svg { color: var(--green); background: color-mix(in srgb, var(--green) 13%, transparent); }
.pt-p .pt-yes svg { color: #fff; background: linear-gradient(160deg, #2e6be0, #123a86); box-shadow: 0 4px 10px -4px rgba(26, 80, 186, .6); }
.pt-no { display: inline-block; width: 14px; height: 2px; border-radius: 2px; background: var(--ink-3); opacity: .55; vertical-align: middle; }
/* below the table */
.pt-pills { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pt-pills li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-raised); font-size: .875rem; font-weight: 600; color: var(--ink); }
.pt-pills svg { width: 16px; height: 16px; color: var(--green); flex: none; }
.pt-note { margin: 14px auto 0; text-align: center; color: var(--ink-2); font-size: .875rem; max-width: 60ch; }
/* motion, both ways: rows settle in, ticks draw, the Pass header catches the light */
.pt-row { transition: opacity .55s; }
.pt tbody:nth-of-type(2) .pt-row { transition-delay: .25s; }
.pt-yes svg path { stroke-dasharray: 24; transition: stroke-dashoffset .5s var(--ease-x) .35s; }
.pt tbody:nth-of-type(2) .pt-yes svg path { transition-delay: .6s; }
.js .pass-sec:not(.in-view) .pt-row { opacity: 0; }
.js .pass-sec:not(.in-view) .pt-yes svg path { stroke-dashoffset: 24; }
.pt-card { transition: opacity .6s, transform .8s var(--ease-x); }
.js .pass-sec:not(.in-view) .pt-card { opacity: 0; transform: translateY(18px); }
.pass-sec.in-view .pt-hp .mp-sheen { animation: sheen 2.4s var(--ease-x) .5s; }
@media (prefers-reduced-motion: reduce) { .js .pass-sec .pt-row, .js .pass-sec .pt-card { opacity: 1; transform: none; } .pt-hp .mp-sheen { display: none; } }
@media (max-width: 760px) {
  .pt .pt-col { width: 84px; }
  .pt th, .pt td { padding: 13px 12px; }
  .pt thead th { padding-top: 16px; padding-bottom: 14px; }
  .pt-row th span { font-size: .875rem; }
  .pt-hf strong, .pt-hp strong { font-size: 1rem; }
  .pt-hf span, .pt-hp > span:last-child { font-size: .6875rem; letter-spacing: .03em; }
  .pt-hp img { width: 26px; height: 26px; }
  .pt-trial { padding: 6px 10px; font-size: .8125rem; }
  .pt-yes svg { width: 22px; height: 22px; padding: 4px; }
}
.pt th, .pt td { background: transparent; }
.pt .pt-hp { background: radial-gradient(120% 90% at 0% 0%, #2e6be0 0%, transparent 60%), radial-gradient(90% 80% at 100% 100%, rgba(245, 165, 36, .38), transparent 62%), linear-gradient(160deg, #1b4fb8, #0d2a66); }
.pt { min-width: 0; font-size: 1rem; background: transparent; } .pt th, .pt td { border-bottom: 0; color: inherit; }
@media (max-width: 480px) { .pt .pt-col { width: 68px; } .pt th, .pt td { padding: 12px 10px; } .pt-row th { padding-left: 14px; } .pt-group th { padding-left: 14px; } .pt-h0 { padding-left: 12px !important; } }
.pt-yes { display: flex; justify-content: center; } .pt-yes svg { margin: 0; flex: none; }

/* iPad scene (v14): a full-width landscape iPad, captions that follow the beats */
.ip-block { margin-top: 96px; }
.ip-head { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.ip-head p { color: var(--ink-2); font-size: 1.0625rem; margin: 0; }
.ip-stage { margin: 0; position: relative; padding: 44px 4% 30px; border-radius: 28px; overflow: hidden;
  background: radial-gradient(60% 70% at 50% 45%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 70%), linear-gradient(180deg, var(--bg-sunk), color-mix(in srgb, var(--bg-sunk) 40%, var(--bg))); border: 1px solid var(--line); }
.ip-device { container-type: inline-size; position: relative; width: 100%; max-width: 900px; margin: 0 auto; }
.ip-device::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -3.2cqw; height: 4cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(15, 27, 51, .32), transparent); z-index: -1; }
.ipad { position: relative; aspect-ratio: 1.38; padding: 1.7cqw; border-radius: 4.4cqw; background: linear-gradient(160deg, #3b4252, #171c27 55%, #252b38);
  box-shadow: 0 0 0 .18cqw #5b6374 inset, 0 0 0 .5cqw #0c1018 inset, 0 3cqw 6cqw -3cqw rgba(15, 27, 51, .55); }
.ip-cam { position: absolute; top: .62cqw; left: 50%; width: .5cqw; height: .5cqw; margin-left: -.25cqw; border-radius: 50%; background: #0a0d14; box-shadow: 0 0 0 .1cqw #2b3140; }
.ip-screen { position: relative; display: flex; width: 100%; height: 100%; border-radius: 2.8cqw; overflow: hidden; background: #0b0f18; }
.ip-app { position: relative; flex: none; width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--bg); color: var(--ink);
  font-size: 1.45cqw; line-height: 1.32; transition: width .9s var(--ease-x), border-radius .9s; }
.ip-status { display: flex; justify-content: space-between; align-items: center; padding: .9cqw 2.4cqw .2cqw; font-weight: 700; font-size: 1.2cqw; }
.ip-batt { width: 2.8cqw; height: 1.3cqw; border: .16cqw solid currentColor; border-radius: .45cqw; padding: .16cqw; opacity: .75; }
.ip-batt i { display: block; height: 100%; width: 75%; background: currentColor; border-radius: .15cqw; }
.ip-cols { flex: 1; display: flex; min-height: 0; }
.ip-k { font-size: 1.02cqw; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin: 1.2cqw .7cqw .5cqw; }
/* sidebar */
.ip-side { flex: none; width: 21cqw; padding: .4cqw 1.1cqw; background: var(--bg-sunk); border-right: 1px solid var(--line); overflow: hidden; white-space: nowrap;
  transition: width .9s var(--ease-x), padding .9s var(--ease-x), opacity .5s, box-shadow .5s; }
.ip-move { display: flex; align-items: center; gap: .8cqw; padding: .75cqw .9cqw; border-radius: 1.1cqw; background: var(--bg-raised); font-weight: 700; box-shadow: var(--shadow); }
.ip-move img { width: 2cqw; height: 2cqw; border-radius: .5cqw; }
.ip-nav { list-style: none; margin: .7cqw 0 0; padding: 0; }
.ip-nav li { padding: .48cqw .9cqw; border-radius: .9cqw; color: var(--ink-2); }
.ip-nav li.on { background: var(--blue); color: var(--on-blue); font-weight: 700; }
.ip-scene.i1:not(.i2) .ip-side { box-shadow: inset 0 0 0 .25cqw color-mix(in srgb, var(--blue) 45%, transparent); }
/* list */
.ip-list { flex: none; width: 34cqw; padding: .4cqw 1.6cqw; border-right: 1px solid var(--line); background: var(--bg-raised); overflow: hidden;
  transition: width .9s var(--ease-x), padding .9s var(--ease-x), opacity .5s; }
.ip-title { font-size: 2.6cqw; font-weight: 800; letter-spacing: -.02em; margin: .2cqw 0 .4cqw; white-space: nowrap; }
.ip-phase { display: flex; justify-content: space-between; align-items: baseline; margin: 1.1cqw 0 .4cqw; white-space: nowrap; }
.ip-phase span { font-size: 1.02cqw; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.ip-phase em { font-style: normal; font-size: 1.1cqw; color: var(--ink-3); }
.ip-prog { height: .45cqw; border-radius: 1cqw; background: var(--bg-sunk); overflow: hidden; margin-bottom: .5cqw; }
.ip-prog i { display: block; height: 100%; width: 20%; border-radius: inherit; background: var(--green); }
.ip-rows { list-style: none; margin: 0; padding: 0; }
.ip-rows li { position: relative; display: grid; grid-template-columns: 1.9cqw minmax(0, 1fr) auto; gap: .9cqw; align-items: center; padding: .78cqw .8cqw; margin: 0 -.8cqw; border-radius: 1cqw; transition: background .35s, color .35s; }
.ip-rows li + li { box-shadow: 0 -1px 0 var(--line); }
.ip-rows li i { width: 1.75cqw; height: 1.75cqw; border-radius: 50%; border: .2cqw solid var(--ink-3); opacity: .75; }
.ip-rows li.done i { border-color: var(--green); background: var(--green); opacity: 1; box-shadow: inset 0 0 0 .35cqw var(--bg-raised); }
.ip-rows li.done span { color: var(--ink-3); text-decoration: line-through; }
.ip-rows li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ip-rows li b { font-weight: 600; color: var(--ink-2); font-size: 1.22cqw; white-space: nowrap; }
.ip-rows li b.ip-law { display: inline-flex; align-items: center; gap: .4cqw; color: var(--red); font-size: 1.1cqw; }
.ip-rows li b.ip-law svg { width: 1.2cqw; height: 1.2cqw; }
.ip-tap { position: absolute; left: 55%; top: 50%; width: 3.6cqw; height: 3.6cqw; margin: -1.8cqw; border-radius: 50%; background: rgba(26, 80, 186, .28); box-shadow: 0 0 0 .3cqw rgba(255,255,255,.75); opacity: 0; transform: scale(.4); pointer-events: none; }
.ip-scene.i2 .ip-tap { animation: ip-tap .7s var(--ease-x) forwards; }
@keyframes ip-tap { 0% { opacity: 0; transform: scale(.4); } 35% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
.ip-scene.i2 .ip-rows li.pick { background: var(--blue); color: var(--on-blue); box-shadow: none; }
.ip-scene.i2 .ip-rows li.pick b { color: var(--on-blue); }
.ip-scene.i2 .ip-rows li.pick i { border-color: var(--on-blue); opacity: 1; }
/* detail */
.ip-detail { position: relative; flex: 1; min-width: 0; background: var(--bg); overflow: hidden; }
.ip-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqw; color: var(--ink-3); font-weight: 600; transition: opacity .4s; }
.ip-empty-ico { width: 5cqw; height: 5cqw; border-radius: 1.4cqw; border: .25cqw dashed var(--line); }
.ip-step { padding: 1.2cqw 2.2cqw; opacity: 0; transform: translateX(3cqw); transition: opacity .5s, transform .7s var(--ease-x); }
.ip-scene.i2 .ip-empty { opacity: 0; }
.ip-scene.i2 .ip-step { opacity: 1; transform: none; transition-delay: .25s; }
.ip-back { height: 0; overflow: hidden; color: var(--blue); font-weight: 600; transition: height .6s var(--ease-x), margin .6s; }
.ip-st { font-size: 2.2cqw; font-weight: 800; letter-spacing: -.015em; line-height: 1.18; margin: .3cqw 0 .9cqw; }
.ip-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6cqw 1cqw; color: var(--ink-3); font-size: 1.2cqw; margin-bottom: 1.2cqw; }
.ip-due { padding: .35cqw .9cqw; border-radius: 99px; background: var(--blue-soft); color: var(--blue); font-weight: 700; }
.ip-card { padding: .9cqw 1.3cqw 1.1cqw; border-radius: 1.4cqw; background: var(--bg-raised); border: 1px solid var(--line); margin-bottom: 1cqw; }
.ip-card .ip-k { margin: 0 0 .4cqw; }
.ip-card p { margin: 0; color: var(--ink-2); }
.ip-how { list-style: none; margin: 0; padding: 0; display: grid; gap: .55cqw; color: var(--ink-2); }
.ip-how li { display: grid; grid-template-columns: 1.9cqw 1fr; gap: .7cqw; align-items: center; }
.ip-how i { width: 1.55cqw; height: 1.55cqw; border-radius: .4cqw; border: .18cqw solid var(--ink-3); opacity: .75; }
.ip-done { display: inline-block; margin-top: .4cqw; padding: .75cqw 1.8cqw; border-radius: 99px; background: var(--blue); color: var(--on-blue); font-weight: 700; }
/* compact tab bar, only in the narrow window */
.ip-tabs { position: absolute; left: 0; right: 0; bottom: 1.3cqw; display: flex; justify-content: center; align-items: center; gap: .9cqw; opacity: 0; transform: translateY(3cqw); transition: opacity .4s, transform .6s var(--ease-x); }
.ip-bar { display: flex; gap: .2cqw; padding: .45cqw; border-radius: 99px; background: var(--bg-raised); box-shadow: var(--shadow); border: 1px solid var(--line); font-size: 1.15cqw; font-weight: 600; }
.ip-bar span { padding: .45cqw .9cqw; border-radius: 99px; color: var(--ink-2); }
.ip-bar span.on { background: var(--blue-soft); color: var(--blue); }
.ip-search { position: relative; width: 3.3cqw; height: 3.3cqw; border-radius: 50%; background: var(--bg-raised); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ip-search::before { content: ""; position: absolute; left: .9cqw; top: .8cqw; width: 1.1cqw; height: 1.1cqw; border: .2cqw solid var(--ink-2); border-radius: 50%; }
.ip-search::after { content: ""; position: absolute; left: 1.95cqw; top: 1.95cqw; width: .7cqw; height: .2cqw; background: var(--ink-2); transform: rotate(45deg); }
/* the Go menu while the key is held */
.ip-go { position: absolute; left: 50%; top: 52%; width: 27cqw; padding: 1.3cqw; border-radius: 2cqw; background: color-mix(in srgb, var(--bg-raised) 90%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--line); box-shadow: 0 3cqw 6cqw -2cqw rgba(15, 27, 51, .5);
  opacity: 0; transform: translate(-50%, -46%) scale(.94); transition: opacity .35s, transform .5s var(--ease-x); }
.ip-go-h { font-weight: 800; font-size: 1.6cqw; margin: 0 .6cqw .5cqw; }
.ip-go ul { list-style: none; margin: 0; padding: 0; }
.ip-go li { display: flex; justify-content: space-between; padding: .45cqw .6cqw; border-radius: .8cqw; }
.ip-go li:nth-child(2) { background: var(--blue-soft); color: var(--blue); font-weight: 700; }
.ip-go kbd { font-family: var(--font); font-weight: 600; color: var(--ink-3); }
.ip-scene.i3:not(.i4) .ip-go { opacity: 1; transform: translate(-50%, -50%); }
.ip-key { position: absolute; left: 50%; bottom: -1.6cqw; transform: translate(-50%, 1cqw); opacity: 0; transition: opacity .35s, transform .5s var(--ease-x); }
.ip-key kbd { display: inline-grid; place-items: center; min-width: 5.4cqw; height: 4.6cqw; border-radius: 1cqw; border: 1px solid var(--line); border-bottom-width: .4cqw;
  background: var(--bg-raised); color: var(--ink); font-family: var(--font); font-size: 2.2cqw; box-shadow: 0 1cqw 2cqw -1cqw rgba(15, 27, 51, .4); }
.ip-scene.i3:not(.i4) .ip-key { opacity: 1; transform: translate(-50%, 0); }
/* another app beside it */
.ip-other { flex: none; width: 0; height: 100%; margin-left: 0; padding: 0; background: var(--bg-raised); display: flex; flex-direction: column; gap: 1.2cqw; overflow: hidden;
  transition: width .9s var(--ease-x), margin .9s var(--ease-x), padding .9s var(--ease-x); }
.ip-o-bar { display: flex; gap: .7cqw; margin: 1.4cqw 0 .4cqw; flex: none; }
.ip-o-bar i { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: var(--line); }
.ip-o-hero { flex: none; height: 14cqw; border-radius: 1.6cqw; background: linear-gradient(135deg, color-mix(in srgb, var(--amber) 35%, var(--bg-sunk)), color-mix(in srgb, var(--blue) 25%, var(--bg-sunk))); }
.ip-other > i { display: block; flex: none; height: 1.25cqw; width: 100%; border-radius: .7cqw; background: var(--bg-sunk); }
.ip-other > i.w70 { width: 70%; height: 2.2cqw; } .ip-other > i.w90 { width: 90%; } .ip-other > i.w50 { width: 50%; } .ip-other > i.w80 { width: 80%; }
.ip-scene.i5:not(.i6) .ip-app { width: 44%; border-radius: 0 2cqw 2cqw 0; }
.ip-scene.i5:not(.i6) .ip-other { width: 55.4%; margin-left: .6%; padding: 0 3cqw; }
.ip-scene.i5:not(.i6) .ip-side, .ip-scene.i5:not(.i6) .ip-list { width: 0; padding-left: 0; padding-right: 0; opacity: 0; border: 0; }
.ip-scene.i5:not(.i6) .ip-back { height: 2.2cqw; margin-bottom: .3cqw; }
.ip-scene.i5:not(.i6) .ip-tabs { opacity: 1; transform: none; }
/* captions that follow the beats; each one is a button that shows its moment */
.ip-beats { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: beat; }
.ip-beats li { display: flex; }
.ip-beats button { position: relative; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 16px 18px 18px; border-radius: 18px; border: 1px solid var(--line);
  background: var(--bg-raised); overflow: hidden; counter-increment: beat; -webkit-tap-highlight-color: transparent;
  transition: border-color .4s, box-shadow .4s, transform .5s var(--ease-x), background .4s; }
.ip-beats button::before { content: counter(beat, decimal-leading-zero); display: block; font-size: .75rem; font-weight: 800; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 6px; transition: color .4s; }
.ip-beats strong { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 1rem; color: var(--ink); }
.ip-beats strong::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(-45deg); opacity: 0; transition: opacity .3s, transform .4s var(--ease-x); }
.ip-beats span { display: block; margin-top: 4px; color: var(--ink-2); font-size: .9375rem; line-height: 1.45; }
.ip-beats button::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--blue); }
.ip-beats button:hover { border-color: color-mix(in srgb, var(--blue) 30%, var(--line)); transform: translateY(-2px); }
.ip-beats button:hover strong::after { opacity: .8; transform: rotate(-45deg) translate(2px, 2px); }
.ip-beats button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.ip-scene.i1:not(.i2) .b1, .ip-scene.i2:not(.i3) .b2, .ip-scene.i3:not(.i5) .b3, .ip-scene.i5:not(.i6) .b4, .ip-beats button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--blue) 50%, var(--line)); box-shadow: 0 14px 30px -20px rgba(26, 80, 186, .55); transform: translateY(-3px); }
.ip-scene.i1:not(.i2) .b1::before, .ip-scene.i2:not(.i3) .b2::before, .ip-scene.i3:not(.i5) .b3::before, .ip-scene.i5:not(.i6) .b4::before, .ip-beats button[aria-pressed="true"]::before { color: var(--blue); }
.ip-beats button[aria-pressed="true"] { background: color-mix(in srgb, var(--blue) 6%, var(--bg-raised)); }
.ip-beats button[aria-pressed="true"]::after { width: 100%; }
.ip-scene:not(.manual).i1:not(.i2) .b1::after { animation: ip-beat 1.6s linear forwards; }
.ip-scene:not(.manual).i2:not(.i3) .b2::after { animation: ip-beat 2s linear forwards; }
.ip-scene:not(.manual).i3:not(.i5) .b3::after { animation: ip-beat 2.6s linear forwards; }
.ip-scene:not(.manual).i5:not(.i6) .b4::after { animation: ip-beat 2.8s linear forwards; }
@keyframes ip-beat { to { width: 100%; } }
@media (max-width: 900px) { .ip-beats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ip-stage { padding: 26px 3% 22px; border-radius: 22px; } .ip-beats { gap: 10px; } .ip-beats button { padding: 13px 14px 15px; } .ip-beats span { font-size: .875rem; } }
@media (prefers-reduced-motion: reduce) { .ip-tap { display: none; } }
.ip-beats button { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }

/* Checklists (v15): guide pages built from the app's step library */
.nowrap { white-space: nowrap; }
@media (max-width: 520px) { .nowrap { white-space: normal; } }
.g-hero { padding: 48px 0 34px; background: radial-gradient(70% 120% at 85% 0%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 60%); border-bottom: 1px solid var(--line); }
.g-hero h1 { max-width: 16em; letter-spacing: -.025em; }
.g-hero .lead { max-width: 44em; }
.g-hero .cta-row { margin-top: 26px; }
.crumbs { display: flex; gap: 8px; font-size: .875rem; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); }
.g-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; padding-top: 36px; padding-bottom: 72px; align-items: start; }
@media (max-width: 960px) { .g-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
.g-side { position: sticky; top: 84px; display: grid; gap: 18px; }
@media (max-width: 960px) { .g-side { position: static; } .g-promo { display: none; } }
.g-toc h2 { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.g-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.g-toc a { display: block; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--ink-2); text-decoration: none; font-size: .9375rem; line-height: 1.35; }
.g-toc a:hover { color: var(--blue); border-left-color: var(--blue); }
@media (max-width: 960px) { .g-toc ol { display: flex; flex-wrap: wrap; gap: 8px; border: 0; } .g-toc a { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; margin: 0; background: var(--bg-raised); font-size: .875rem; } }
.g-promo { padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg-raised); box-shadow: var(--shadow); }
.g-promo img { border-radius: 12px; }
.g-promo p { margin: 10px 0 14px; color: var(--ink-2); font-size: .9375rem; }
.g-promo .store-badge { width: 100%; }
.g-note { padding: 14px 18px; border-radius: 16px; border-left: 4px solid var(--amber); background: color-mix(in srgb, var(--amber) 9%, var(--bg-raised)); margin-bottom: 8px; }
.g-note p { margin: 0; color: var(--ink-2); font-size: .9375rem; }
.g-note strong { color: var(--ink); }
.g-window { padding-top: 26px; scroll-margin-top: 84px; }
.g-window h2 { display: flex; align-items: center; gap: 12px; font-size: clamp(1.35rem, 2.6vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; margin: 14px 0 16px; }
.g-window h2::before { content: ""; width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px var(--blue-soft); }
.g-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .g-steps { grid-template-columns: minmax(0, 1fr); } }
.g-step { padding: 18px 20px 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg-raised); display: flex; flex-direction: column; gap: 8px; }
.g-step.is-legal { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); }
.g-top { display: flex; flex-wrap: wrap; gap: 6px; }
.g-top:empty { display: none; }
.g-tag, .g-kind { font-size: .75rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--bg-sunk); color: var(--ink-2); }
.g-kind.g-k-legal { background: color-mix(in srgb, var(--amber) 20%, transparent); color: var(--amber-ink); }
.g-kind.g-k-contract { background: var(--blue-soft); color: var(--blue); }
.g-kind.g-k-appointment { background: color-mix(in srgb, var(--green) 9%, transparent); color: var(--green); }
.g-step h3 { font-size: 1.0625rem; font-weight: 750; line-height: 1.3; margin: 0; }
.g-when { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 600; color: var(--blue); }
.g-when svg { width: 15px; height: 15px; flex: none; }
.g-why { margin: 0; color: var(--ink-2); font-size: .9375rem; }
.g-how { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.g-how li { position: relative; padding-left: 18px; font-size: .9375rem; color: var(--ink); }
.g-how li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 2px; border: 1.5px solid var(--ink-3); }
.g-tip { margin: 0; font-size: .875rem; color: var(--ink-2); }
.g-legal { margin: 4px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); font-size: .8125rem; color: var(--ink-2); }
.g-end { margin-top: 44px; padding: 32px; border-radius: 26px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 0% 0%, #2e6be0 0%, transparent 60%), radial-gradient(90% 80% at 100% 100%, rgba(245, 165, 36, .35), transparent 62%), linear-gradient(160deg, #1b4fb8, #0d2a66); }
.g-end h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; color: #fff; }
.g-end p { margin: 0; color: rgba(255,255,255,.88); max-width: 40em; }
.g-end .cta-row { margin-top: 20px; }
.g-end .btn-secondary { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); }
.g-end .store-badge { background: #fff; color: #0d2a66; }
.g-more { margin-top: 44px; }
.g-more h2 { font-size: 1.375rem; font-weight: 800; margin: 0 0 14px; }
.g-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.g-cards-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 36px 0 22px; }
@media (max-width: 860px) { .g-cards, .g-cards-hub { grid-template-columns: minmax(0, 1fr); } }
.g-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg-raised); color: inherit; text-decoration: none;
  transition: transform .4s var(--ease-x), border-color .3s, box-shadow .3s; }
.g-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--blue) 40%, var(--line)); box-shadow: 0 16px 32px -22px rgba(26, 80, 186, .5); }
.g-card:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.g-card-k { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.g-card strong { font-size: 1.125rem; color: var(--ink); }
.g-card > span:not(.g-card-k):not(.g-card-go) { color: var(--ink-2); font-size: .9375rem; }
.g-card-go { margin-top: auto; padding-top: 8px; color: var(--blue); font-weight: 700; font-size: .9375rem; }
.g-card-go::after { content: " →"; }
.g-hub { padding-bottom: 72px; }
.pt-cta { display: flex; justify-content: center; margin-top: 18px; }
.faq-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > div:first-child { grid-column: 1 / -1; } }

.g-window, .g-end, .g-more { padding-bottom: 0; }
.g-window { padding-top: 22px; }
.g-more { padding-top: 0; }
.g-end { padding: 32px; }
.g-top { align-items: center; }


/* Pricing: what happens to your data after the trial */
.pt-keep { display: flex; align-items: flex-start; gap: 14px; max-width: 760px; margin: 22px auto 0; padding: 16px 20px; border-radius: 18px;
  background: color-mix(in srgb, var(--green) 7%, var(--bg-raised)); border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line)); }
.pt-keep-ico { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.pt-keep-ico svg { width: 19px; height: 19px; }
.pt-keep p { margin: 0; color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }
.pt-keep strong { color: var(--ink); }

/* ===== v17: lessons from the best app sites — floating nav, a dark cinematic middle, a pinned scroll story ===== */

/* Floating pill navigation once the page scrolls */
.site-header { transition: background .35s, border-color .35s, box-shadow .35s; }
.site-header .wrap { transition: max-width .5s var(--ease-x), margin .5s var(--ease-x), padding .5s var(--ease-x), border-radius .5s var(--ease-x), background .35s, box-shadow .35s, border-color .35s; border: 1px solid transparent; }
@media (min-width: 761px) {
  .site-header.scrolled { background: transparent; border-bottom-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header.scrolled .wrap { max-width: 900px; margin-top: 10px; min-height: 56px; padding: 0 10px 0 18px; border-radius: 999px; border-color: var(--line);
    background: color-mix(in srgb, var(--bg-raised) 80%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
    box-shadow: 0 14px 34px -18px rgba(15, 27, 51, .45); }
  .site-header.scrolled .progress { opacity: 0; }
}

/* Dark sections: the same tokens as dark mode, scoped to the section */
.on-dark {
  color-scheme: dark;
  --bg: #070b16; --bg-raised: #10182b; --bg-sunk: #0c1324; --ink: #eef2f9; --ink-2: #b9c3d6; --ink-3: #9aa6bd; --line: #223049;
  --blue: #88abff; --blue-deep: #2e6be0; --blue-soft: #16244a; --amber-ink: #f5c26b; --green: #5fd398; --red: #ff8a80; --on-blue: #0b1220;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
  background: var(--bg); color: var(--ink);
}

/* the floating nav turns dark over the dark sections */
.site-header.over-dark { --ink: #eef2f9; --ink-2: #c9d2e3; --ink-3: #9aa6bd; --line: rgba(255,255,255,.14); --bg: #070b16; --bg-raised: #10182b; --bg-sunk: #0c1324; color: var(--ink); }
.site-header.over-dark:not(.scrolled) { background: color-mix(in srgb, #070b16 82%, transparent); }
@media (min-width: 761px) { .site-header.over-dark.scrolled .wrap { background: rgba(16, 24, 43, .72); box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .8); } }
@media (min-width: 761px) { .site-header.scrolled { padding-top: 10px; } }

/* Hero: an honest trust row */
.planner-wrap { position: relative; }

/* ===== The scroll story (v18): the whole phone always fits, notifications arrive inside it ===== */

/* stage and phone: sized from the viewport height so it always fits */

/* Today, as the app draws it (16 Oct 2026): the Tools button, Show and Add, the large title, the tinted hero group
   (route, the stage, the strip and its legend, the readiness row and Next), then Ready now and the floating tab bar.
   The colours are the app's light ones: the accent at 15% over white for the group, NextStep amber for today. */

/* notifications drop in from the top of the screen, like iOS */

/* the moving-day Live Activity: the line, its time with a clock, N of M done in the accent, and Done */

/* ======================================================================
   16 Oct 2026: the design pass (Today's card, bars and charts), Apple Watch
   ====================================================================== */

/* ---------- Where you stand, at a glance ---------- */
.glance { padding: 96px 0; background: var(--bg-sunk); border-block: 1px solid var(--line); }

/* Weeks ahead, drawn like the app's chart: open steps by week, the busiest marked, moving day as a dashed rule. */
.wk { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 12px; }
.wk-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.wk-top strong { font-size: 1.0625rem; }
.wk-top span { color: var(--ink-3); font-size: .875rem; }
.wk-plot { position: relative; display: flex; align-items: flex-end; gap: 4px; height: 180px; margin: 30px 0 8px; padding: 16px 12px 0 0; border-bottom: 1px solid var(--line); }
.wk-plot i { flex: 1; min-width: 0; background: var(--blue); opacity: .45; border-radius: 4px 4px 0 0; transform-origin: bottom; transition: transform .9s var(--ease-out, ease); }
.wk-plot i.wk-busy { opacity: 1; position: relative; }
.wk-plot i.wk-busy::before { content: ""; position: absolute; left: 50%; top: -12px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--ink); }
  .wk-h3 { height: 30%; } .wk-h4 { height: 40%; } .wk-h5 { height: 50%; }
.wk-h6 { height: 60%; } .wk-h7 { height: 70%; } .wk-h8 { height: 80%; } .wk-h9 { height: 90%; } .wk-h10 { height: 100%; }
.wk-move { position: absolute; right: 4px; top: 0; bottom: 0; border-right: 2px dashed var(--ink-3); }
.wk-move b { position: absolute; right: -2px; top: -22px; font-size: .75rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.wk-axis { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: .8125rem; color: var(--ink-3); }
.wk-axis b { color: var(--ink); font-weight: 600; }

/* ---------- Apple Watch (16 Oct 2026): the real captures in a drawn Series case, on a dark stage ----------
   Every measure of the case follows its width (--w), so the corners stay concentric at every size: screen 0.83w
   wide with a 0.158w corner, the black border 0.05w, the case 0.035w with a 0.243w corner. */

/* the side watches stand centred beside the glance, and the three captions start on one line */

.aw-dev { position: relative; width: var(--w); margin: calc(var(--w) * .36) 0; }

.aw-case { position: relative; z-index: 2; padding: calc(var(--w) * .035); border-radius: calc(var(--w) * .243);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .12) 100%),
    linear-gradient(160deg, #2c313b 0%, #12151b 45%, #07080b 70%, #1b1f27 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .07),
    0 calc(var(--w) * .16) calc(var(--w) * .3) calc(var(--w) * -.1) rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 0, 0, .55); }
.aw-glass { position: relative; padding: calc(var(--w) * .05); border-radius: calc(var(--w) * .208); background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 0 0 1px rgba(0, 0, 0, .9); }
/* the glass's sheen, over the picture */
.aw-glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: linear-gradient(122deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .04) 26%, rgba(255, 255, 255, 0) 40%); }
.aw-screen { position: relative; overflow: hidden; border-radius: calc(var(--w) * .158); background: #000; }
.aw-screen img { display: block; width: 100%; height: auto; }
/* a screen that goes on below: it fades into the black as the watch's own list does under the edge */

/* Digital Crown (knurled) and the side button */
.aw-crown { position: absolute; z-index: 1; right: calc(var(--w) * -.052); top: 24%; width: calc(var(--w) * .075); height: 15%;
  border-radius: calc(var(--w) * .014) calc(var(--w) * .03) calc(var(--w) * .03) calc(var(--w) * .014);
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .16) 0 1px, rgba(0, 0, 0, .35) 1px 3px),
    linear-gradient(90deg, #1a1d24, #3d434f 55%, #22262e);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 2px 6px rgba(0, 0, 0, .5); }
.aw-btn { position: absolute; z-index: 1; right: calc(var(--w) * -.03); top: 48%; width: calc(var(--w) * .04); height: 21%;
  border-radius: 0 calc(var(--w) * .02) calc(var(--w) * .02) 0; background: linear-gradient(90deg, #15181e, #343944 60%, #1c1f26);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }

/* the sport band, above and below, fading into the stage */
.aw-band { position: absolute; z-index: 0; left: 50%; width: 74%; height: calc(var(--w) * .5); transform: translateX(-50%);
  background: linear-gradient(90deg, #161a24 0%, #2b3144 16%, #31384d 50%, #282e40 84%, #141821 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
.aw-band::after { content: ""; position: absolute; inset: 0 8%; border-inline: 1px solid rgba(255, 255, 255, .05); }
.aw-band-top { bottom: 86%; border-radius: calc(var(--w) * .06) calc(var(--w) * .06) 0 0;
  -webkit-mask-image: linear-gradient(to top, #000 45%, transparent); mask-image: linear-gradient(to top, #000 45%, transparent); }
.aw-band-bot { top: 86%; border-radius: 0 0 calc(var(--w) * .06) calc(var(--w) * .06);
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent); mask-image: linear-gradient(to bottom, #000 45%, transparent); }

/* what the watch does */

/* narrow: the glance on top, the other two side by side under it */
@media (max-width: 760px) {
  
  
  
  
  
  
  
  
  .aw-band { height: calc(var(--w) * .36); }
  
  
  
}

/* ---------- The planner's Today card, drawn as the app draws it (16 Oct 2026) ----------
   App/Sources/Today/TodayParts.swift: TodayHero (the days to go), RouteStrip and RouteLegend (today, departure, settled
   in), ReadinessRow with ReadinessRing (the official steps that need attention; a check when none does). The tint is
   the app's: the accent at 15% over the grouped row. */
.planner-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.planner-head .planner-title { margin: 0; }
.ph-hero { --pt: #9a4f00; --tint: color-mix(in srgb, var(--blue) 15%, var(--bg-raised)); margin-top: 16px; padding: 16px 18px 4px; border-radius: 18px; background: var(--tint); }
.ph-stage { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); line-height: 1.2; }
.ph-stage strong { font-family: var(--font-round); font-size: 2.125rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ph-strip { display: flex; align-items: center; gap: 9px; height: 16px; margin: 14px 0 8px; color: var(--ink-3); }
.ph-origin { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ph-line { position: relative; flex: 1; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--ink-3) 30%, transparent); }
.ph-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: var(--blue); }
.ph-st, .ph-pt { position: absolute; top: 50%; left: var(--x, 50%); border-radius: 50%; transition: left .8s var(--ease-out); }
.ph-st { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; box-sizing: border-box; background: var(--tint); border: 1.5px solid var(--ink-3); }
.ph-pt { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--pt); box-shadow: 0 0 0 2px var(--tint); }
.ph-house { flex: none; width: 14px; height: 14px; }
.ph-legend { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; font-size: .8125rem; color: var(--ink-3); }
.ph-legend > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ph-legend > span:nth-child(2) { align-items: center; text-align: center; }
.ph-legend > span:nth-child(3) { align-items: flex-end; text-align: right; }
.ph-legend b { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.ph-legend small { font-size: inherit; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ph-legend svg { width: 11px; height: 11px; }
.mk-today, .mk-st { flex: none; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; }
.mk-today { background: var(--pt); }
.mk-st { border: 1.5px solid var(--ink-3); }
.ph-ready { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 12px; padding: 12px 0 12px; border-top: 1px solid color-mix(in srgb, var(--ink-3) 28%, transparent); }
.ph-ring { position: relative; flex: none; width: 30px; height: 30px; }
.ph-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ph-ring circle { fill: none; stroke-width: 5; }
.pr-track { stroke: color-mix(in srgb, var(--ink-3) 25%, transparent); }
.pr-fill { stroke: var(--blue); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; transition: stroke-dashoffset .8s var(--ease-out); }
.ph-ready.full .pr-fill { stroke-linecap: butt; }
.ph-ring .pr-check { inset: auto; left: 50%; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; fill: none; stroke: var(--green); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .3s var(--spring); }
.ph-ready.clear .pr-check { opacity: 1; transform: none; }
.ph-ready-text strong { display: block; font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.ph-ready-text small { display: block; margin-top: 2px; font-size: .875rem; color: var(--ink-3); }
.tl-start { color: var(--amber-ink); }
.tl-chip.law { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ph-hero { --pt: #ffb454; } }
:root[data-theme="dark"] .ph-hero { --pt: #ffb454; }
@media (prefers-reduced-motion: reduce) { .ph-st, .ph-pt, .pr-fill, .ph-ring .pr-check { transition: none; } }

/* ======================================================================
   16 Oct 2026, evening: the seller pass. The feature index and the steps
   marquee, "All around your iPhone", the assistant, Documents, moving day.
   ====================================================================== */

/* The app's own surfaces in the drawn screens: light or dark with the page, as the app follows the system. */
.app-ui { --a-bg: #f2f2f7; --a-cell: #ffffff; --a-ink: #0f1b33; --a-ink2: #5a6478; --a-line: rgba(60, 60, 67, .16); --a-acc: #1a50ba; --a-on-acc: #ffffff;
  --a-amber: #8f4a00; --a-red: #b42318; --a-green: #1d7a46; --a-fill: rgba(120, 120, 128, .14); color: var(--a-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-ui { --a-bg: #000000; --a-cell: #1c1c1e; --a-ink: #ffffff; --a-ink2: #aeb4c2; --a-line: rgba(120, 120, 128, .36); --a-acc: #88abff;
    --a-on-acc: #0b1220; --a-amber: #ffb454; --a-red: #ff8a80; --a-green: #5fd398; --a-fill: rgba(120, 120, 128, .3); }
}
:root[data-theme="dark"] .app-ui { --a-bg: #000000; --a-cell: #1c1c1e; --a-ink: #ffffff; --a-ink2: #aeb4c2; --a-line: rgba(120, 120, 128, .36); --a-acc: #88abff;
  --a-on-acc: #0b1220; --a-amber: #ffb454; --a-red: #ff8a80; --a-green: #5fd398; --a-fill: rgba(120, 120, 128, .3); }

/* An old value giving way to a new one, in place */
.xs { display: inline-grid; }
.xs > s, .xs > b { grid-area: 1 / 1; text-decoration: none; font-weight: inherit; transition: opacity .4s, transform .55s var(--ease-x); }
.xs > b { opacity: 0; transform: translateY(8px); }
.xs-l { justify-items: start; }

/* A finger: shown on the thing it touches, inside it */
.tap { position: absolute; z-index: 20; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; pointer-events: none;
  background: rgba(15, 27, 51, .2); border: 2px solid rgba(255, 255, 255, .95); box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  opacity: 0; transform: scale(1.35); transition: opacity .3s, transform .4s var(--spring); }
@media (prefers-reduced-motion: reduce) { .tap { display: none; } }

/* Lists that come in one after another */
.js .stagger.reveal { opacity: 1; transform: none; }
.js .stagger.reveal > * { transition: opacity .8s var(--ease-x), transform .9s var(--ease-x); transition-delay: calc(var(--i, 0) * 55ms); }
.js .stagger.reveal:not(.in-view) > * { opacity: 0; transform: translateY(24px) scale(.97); }

/* ---------- Everything a move needs: the feature index ---------- */

/* The steps marquee: real titles from the library, two rows the opposite way; paused out of view and on request */

/* ---------- All around your iPhone ---------- */

.ev { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 18px 18px 26px; border-radius: 26px; background: var(--bg-raised); border: 1px solid var(--line); }
.ev > h3, .ev-cal-copy > h3 { margin: 20px 6px 6px; font-size: 1.25rem; letter-spacing: -.015em; color: var(--ink); }
.ev > p, .ev-cal-copy > p { margin: 0 6px; color: var(--ink-2); }
.ev-island { grid-column: span 2; }
.ev-stage { position: relative; margin: 0; height: 340px; border-radius: 18px; overflow: hidden; background: var(--bg-sunk); isolation: isolate; }
.ev-cal { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 36px; align-items: center; padding: 18px 36px 18px 18px; }
.ev-cal h3 { margin-top: 0; font-size: clamp(1.375rem, 2.4vw, 1.875rem); }
.ev-cal .ev-sub { margin-top: 12px; font-size: .9688rem; }
@media (max-width: 980px) {
  
  .ev-island { grid-column: 1 / -1; }
  .ev-cal { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 18px 18px 26px; }
  .ev-cal h3 { margin-top: 20px; font-size: 1.25rem; }
}

/* The Dynamic Island on moving day (Widgets/MoveLiveActivity.swift): compact, a box and the line's time;
   expanded, Moving day and the time, the line, "N of M done" and Done. */
.isl-stage { background: radial-gradient(70% 90% at 50% 125%, rgba(46, 107, 224, .6), transparent 70%), linear-gradient(180deg, #0b1122, #070b16); }
.isl-phone { position: absolute; left: 50%; top: 28px; width: min(460px, calc(100% - 40px)); height: 360px; transform: translateX(-50%); border-radius: 58px 58px 0 0; overflow: hidden;
  background: radial-gradient(90% 60% at 15% 10%, #4a7fe6, transparent 60%), radial-gradient(80% 70% at 100% 90%, #f5b74a, transparent 60%), linear-gradient(160deg, #2a54b8, #12306e);
  box-shadow: 0 0 0 9px #0f1219, 0 0 0 10px rgba(255, 255, 255, .14); }
.isl-bar { position: absolute; left: 36px; right: 32px; top: 19px; display: flex; justify-content: space-between; align-items: center; color: #fff; font-weight: 700; font-size: 15px; transition: opacity .3s; }
.isl-batt { width: 26px; height: 12px; border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 4px; padding: 1.5px; box-sizing: border-box; }
.isl-batt i { display: block; width: 70%; height: 100%; background: #fff; border-radius: 1.5px; }
.isl { position: absolute; z-index: 3; left: 50%; top: 11px; width: 196px; height: 37px; transform: translateX(-50%); border-radius: 22px; background: #000; color: #fff; overflow: hidden;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6); transition: width .65s var(--spring), height .65s var(--spring), border-radius .6s var(--ease-x); }
.isl-c { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 15px 0 14px; font-weight: 600; font-size: 15px;
  font-variant-numeric: tabular-nums; transition: opacity .25s .3s; }
.isl-g { display: grid; color: #88abff; }
.isl .g-box { width: 17px; height: 17px; }
.isl-x { position: absolute; left: 0; right: 0; top: 0; padding: 20px 24px 18px; opacity: 0; transform: scale(.92); transform-origin: 50% 0; transition: opacity .2s, transform .5s var(--ease-x); }
.isl-top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.isl-kind, .isl-time { display: inline-flex; align-items: center; gap: 6px; }
.isl-kind .g-box { width: 15px; height: 15px; color: #88abff; }
.isl-time { font-variant-numeric: tabular-nums; }
.isl-time .g-clk { width: 15px; height: 15px; }
.isl-title { display: grid; margin-top: 10px; font-size: 17px; font-weight: 600; line-height: 1.3; }
.isl-row { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.isl-pv { flex: 1; min-width: 0; display: grid; gap: 5px; font-size: 12.5px; color: #b9c3d6; }
.isl-prog { height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.isl-prog i { display: block; height: 100%; width: calc(100% / 11); border-radius: inherit; background: #88abff; transition: width .7s var(--ease-x); }
.isl-done { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 99px; background: rgba(255, 255, 255, .17);
  font-size: 14px; font-weight: 600; transition: background-color .2s, transform .3s var(--spring); }
.isl-done .g-ckc { width: 16px; height: 16px; }
.isl-home { position: absolute; left: 32px; right: 32px; top: 218px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 26px; transition: filter .45s, opacity .45s; }
.isl-home i { aspect-ratio: 1; border-radius: 15px; background: rgba(255, 255, 255, .26); overflow: hidden; }
.isl-home i.app-ic { background: none; }
.isl-home img { width: 100%; height: 100%; border-radius: 15px; }
#sc-island.p-i1 .isl { width: calc(100% - 22px); height: 182px; border-radius: 46px; }
#sc-island.p-i1 .isl-c { opacity: 0; transition-delay: 0s; transition-duration: .12s; }
#sc-island.p-i1 .isl-x { opacity: 1; transform: none; transition-delay: .2s, .12s; }
#sc-island.p-i1 .isl-bar { opacity: 0; }
#sc-island.p-i1 .isl-home { filter: blur(6px); opacity: .65; }
#sc-island.p-i2 .isl-done .tap { opacity: 1; transform: none; }
#sc-island.p-i3 .isl-done { background: rgba(255, 255, 255, .34); transform: scale(.94); }
#sc-island.p-i3 .isl-done .tap { transform: scale(.78); }
#sc-island.p-i4 .xs > s { opacity: 0; transform: translateY(-8px); }
#sc-island.p-i4 .xs > b { opacity: 1; transform: none; }
#sc-island.p-i4 .isl-prog i { width: calc(200% / 11); }
@media (max-width: 520px) { .isl-title { font-size: 15.5px; } .isl-x { padding: 18px 18px 16px; } }

/* A reminder on the Lock Screen (Reminders/NotificationRouter.swift): Mark done with Face ID, or Remind me tomorrow;
   the Lock Screen widget (NextStepsWidget, rectangular) moves on. */
.nt-stage { background: radial-gradient(110% 70% at 15% 0%, #5b86e8, transparent 60%), radial-gradient(90% 60% at 100% 100%, #f2a33a, transparent 60%), #10224d; }
.nt { position: absolute; inset: 0; color: #fff; text-align: center; padding-top: 18px; }
.nt-date { font-size: 14px; font-weight: 600; }
.nt-time { font-family: var(--font-round); font-size: 64px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.nt-w { display: inline-grid; justify-items: start; gap: 2px; width: 214px; margin-top: 6px; padding: 8px 12px; border-radius: 16px; text-align: left; font-size: 13px;
  background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nt-w > b { font-size: 14px; }
.nt-wn { display: flex; gap: 6px; align-items: flex-start; line-height: 1.3; }
.nt-o { flex: none; width: 15px; height: 15px; margin-top: 1px; border-radius: 50%; border: 1.8px solid #fff; }
.nt-dim { position: absolute; inset: 0; background: rgba(8, 12, 24, .4); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transition: opacity .4s; }
.nt-card { position: absolute; left: 12px; right: 12px; bottom: 16px; display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 11px 13px;
  border-radius: 20px; background: rgba(246, 247, 251, .92); color: #0f1b33; text-align: left; box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .5);
  opacity: 0; transform: translateY(26px); transition: opacity .4s, transform .6s var(--spring), bottom .55s var(--ease-x); }
.nt-card img { border-radius: 7px; }
.nt-card strong { display: block; font-size: 14px; line-height: 1.25; }
.nt-card span { font-size: 13px; color: #44506a; }
.nt-card em { align-self: start; font-style: normal; font-size: 12px; color: #5a6478; }
.nt-menu { position: absolute; left: 30px; right: 30px; bottom: 24px; list-style: none; margin: 0; padding: 0; border-radius: 16px; background: rgba(246, 247, 251, .94); color: #0f1b33;
  text-align: left; opacity: 0; transform: scale(.9); transform-origin: 50% 0; transition: opacity .3s, transform .45s var(--spring); }
.nt-menu li { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; font-size: 14px; border-radius: 16px; transition: background-color .2s; }
.nt-menu li + li { border-top: 1px solid rgba(60, 60, 67, .18); border-radius: 0 0 16px 16px; }
.nt-menu li:first-child { border-radius: 16px 16px 0 0; }
.nt-menu svg { width: 18px; height: 18px; }
.nt-face { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 22px; display: grid; place-items: center;
  background: rgba(20, 24, 34, .78); color: #fff; opacity: 0; transform: scale(.8); transition: opacity .3s, transform .45s var(--spring), color .3s; }
.g-face { width: 52px; height: 52px; }
.g-face path { transition: opacity .3s, stroke-dashoffset .5s var(--ease-x); }
.g-face .fk { opacity: 0; stroke-dasharray: 30; stroke-dashoffset: 30; }
#sc-notif.p-n1 .nt-card { opacity: 1; transform: none; }
#sc-notif.p-n2 .nt-dim { opacity: 1; }
#sc-notif.p-n2 .nt-card { bottom: 150px; transform: scale(1.03); }
#sc-notif.p-n2 .nt-menu { opacity: 1; transform: none; }
#sc-notif.p-n3 .nt-md .tap { opacity: 1; transform: none; }
#sc-notif.p-n4 .nt-md { background: rgba(60, 60, 67, .14); }
#sc-notif.p-n4 .nt-md .tap { transform: scale(.78); }
#sc-notif.p-n5 .nt-menu, #sc-notif.p-n5 .nt-card { opacity: 0; transform: scale(.94); }
#sc-notif.p-n5 .nt-face { opacity: 1; transform: none; }
#sc-notif.p-n6 .nt-face { color: #5fd398; }
#sc-notif.p-n6 .g-face .ff, #sc-notif.p-n6 .g-face .fc { opacity: 0; }
#sc-notif.p-n6 .g-face .fk { opacity: 1; stroke-dashoffset: 0; }
#sc-notif.p-n7 .nt-face, #sc-notif.p-n7 .nt-dim { opacity: 0; }
#sc-notif.p-n7 .nt-face { transform: scale(.9); }
#sc-notif.p-n7 .xs > s { opacity: 0; transform: translateY(-8px); }
#sc-notif.p-n7 .xs > b { opacity: 1; transform: none; }

/* Siri (Intents/RootstepShortcuts.swift, FindItemIntent): the glow around the screen, then the answer */

@keyframes sr-spin { to { --sr-a: 360deg; } }
.sr-stage { background: #04060c; }
.sr { position: absolute; inset: 12px; border-radius: 34px; overflow: hidden; background: radial-gradient(80% 50% at 50% 0%, #131b35, #05070d 70%); }
.sr-edge, .sr-glow::before { content: ""; position: absolute; inset: 0; border-radius: 34px; padding: 3px;
  background: conic-gradient(from var(--sr-a), #ff6ec7, #ff9f45, #ffd36e, #5fd398, #4cc3ff, #8b7bff, #ff6ec7);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.sr-glow { position: absolute; inset: 0; border-radius: 34px; filter: blur(12px); }
.sr-glow::before { padding: 16px; }
.sr-edge, .sr-glow { opacity: 0; transition: opacity .7s; pointer-events: none; }
.sr-flow { position: absolute; left: 18px; right: 18px; bottom: 22px; display: flex; flex-direction: column; }
.sr-flow > * { max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; transform: translateY(10px);
  transition: max-height .6s var(--ease-x), margin .6s var(--ease-x), opacity .45s, transform .6s var(--ease-x); }
.sr-you { color: #c9d2e3; font-size: 15px; font-weight: 500; text-align: right; }
.sr-card { padding: 12px 14px; border-radius: 20px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .12); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.35; }
.sr-card p { margin: 0; }
.sr-box { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; margin-top: 10px; padding: 8px; border-radius: 14px; background: rgba(255, 255, 255, .1); font-weight: 400; }
.sr-box i { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: #2e6be0; color: #fff; }
.sr-box .g-box { width: 18px; height: 18px; }
.sr-box b { display: block; font-size: 14px; }
.sr-box small { font-size: 12.5px; color: #c9d2e3; }
#sc-siri.p-s1 .sr { animation: sr-spin 5s linear infinite; }
#sc-siri.p-s1 .sr-edge { opacity: 1; }
#sc-siri.p-s1 .sr-glow { opacity: .85; }
#sc-siri.p-s1 .u1, #sc-siri.p-s2 .c1, #sc-siri.p-s3 .u2, #sc-siri.p-s4 .c2 { max-height: 160px; margin-top: 10px; opacity: 1; transform: none; }

/* Spotlight (Intents/BoxEntity.swift: a box by what's packed in it; a step with its date in words) */
.sl-stage { background: radial-gradient(100% 70% at 0% 0%, #6b8fe0, transparent 60%), radial-gradient(90% 60% at 100% 100%, #e7a14a, transparent 60%), #1d3570; }
.sl { position: absolute; inset: 0; padding: 22px 16px; background: rgba(10, 16, 32, .3); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.sl-field { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 22px; background: rgba(255, 255, 255, .9); color: #0f1b33; font-size: 16px; }
.sl-field > svg { width: 18px; height: 18px; color: #5a6478; flex: none; }
.sl-q { white-space: nowrap; }
.sl-q i { display: inline-block; max-width: 0; overflow: hidden; vertical-align: bottom; font-style: normal; transition: max-width .01s; }
.sl-q i:nth-child(2) { transition-delay: .09s; } .sl-q i:nth-child(3) { transition-delay: .18s; } .sl-q i:nth-child(4) { transition-delay: .27s; }
.sl-q i:nth-child(5) { transition-delay: .36s; } .sl-q i:nth-child(6) { transition-delay: .45s; }
.sl-caret { width: 2px; height: 20px; margin-left: 1px; border-radius: 1px; background: #1a50ba; animation: sl-blink 1s steps(1) 6; }
@keyframes sl-blink { 50% { opacity: 0; } }
.sl-res { margin-top: 14px; padding: 6px 12px 12px; border-radius: 20px; background: rgba(255, 255, 255, .9); color: #0f1b33; opacity: 0; transform: translateY(10px);
  transition: opacity .35s, transform .5s var(--ease-x); }
.sl-app { display: flex; align-items: center; gap: 8px; padding: 6px 2px 8px; font-size: 13px; font-weight: 700; color: #44506a; border-bottom: 1px solid rgba(60, 60, 67, .15); }
.sl-app img { border-radius: 4px; }
.sl-row { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; padding: 10px 2px 0; }
.sl-ic { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: #e8eefb; color: #1a50ba; }
.sl-ic svg { width: 19px; height: 19px; }
.sl-row b { display: block; font-size: 15px; line-height: 1.25; }
.sl-row small { display: block; font-size: 12.5px; line-height: 1.35; color: #44506a; }
.sl-row.sr2 { display: none; }
#sc-spot.p-q1 .sl-q1 i, #sc-spot.p-q2 .sl-q2 i { max-width: 1em; }
#sc-spot.p-r1 .sl-res, #sc-spot.p-r2 .sl-res { opacity: 1; transform: none; }
#sc-spot.p-x1 .sl-q1 i { max-width: 0; transition-delay: 0s; }
#sc-spot.p-x1:not(.p-r2) .sl-res { opacity: 0; transform: translateY(10px); }
#sc-spot.p-q2 .sr1 { display: none; }
#sc-spot.p-q2 .sr2 { display: grid; }

.sl-res { position: relative; z-index: 1; }
.ev-siri .ev-stage, .ev-spot .ev-stage, .ev-cc .ev-stage { height: 380px; }
.sl-kb { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 7px; padding: 9px 4px 12px; background: rgba(209, 214, 226, .82);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.kr { display: flex; justify-content: center; gap: 5px; }
.sl-kb { gap: 6px; padding: 8px 4px 10px; }
.k { flex: 0 1 30px; min-width: 0; height: 30px; display: grid; place-items: center; border-radius: 6px; background: #fbfcfe; color: #0f1b33; font-size: 15px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .28); }
.km { flex-basis: 40px; margin-inline: 4px; background: #aeb6c7; }
.kw { flex-basis: 52px; }
.ksp { flex: 0 1 190px; }
@keyframes sl-key { 0%, 100% { background: #fbfcfe; transform: none; } 30%, 60% { background: #c6d3ef; transform: translateY(-3px) scale(1.12); } }
@keyframes sl-keyb { 0%, 100% { background: #fbfcfe; transform: none; } 30%, 60% { background: #c6d3ef; transform: translateY(-3px) scale(1.12); } }
@keyframes sl-key2 { 0%, 45%, 55%, 100% { background: #fbfcfe; transform: none; } 15%, 30%, 70%, 85% { background: #c6d3ef; transform: translateY(-3px) scale(1.12); } }
#sc-spot.p-q1 .k-c { animation: sl-key .2s 0s; } #sc-spot.p-q1 .k-o { animation: sl-key .2s .09s; }
#sc-spot.p-q1 .k-f { animation: sl-key2 .2s .15s; } #sc-spot.p-q1 .k-e { animation: sl-key2 .2s .33s; }
#sc-spot.p-q2 .k-l { animation: sl-keyb .2s 0s; } #sc-spot.p-q2 .k-e { animation: sl-keyb .2s .09s, sl-keyb2 .2s .36s; }
#sc-spot.p-q2 .k-a { animation: sl-keyb .2s .18s; } #sc-spot.p-q2 .k-s { animation: sl-keyb .2s .27s; }
@keyframes sl-keyb2 { 0%, 100% { background: #fbfcfe; transform: none; } 30%, 60% { background: #c6d3ef; transform: translateY(-3px) scale(1.12); } }

/* Control Centre: the Next step control (Widgets/NextStepControl.swift) opens the next step */
.cc-stage { background: radial-gradient(90% 70% at 20% 10%, #3a5aa8, transparent 60%), radial-gradient(80% 60% at 100% 100%, #7a4e2a, transparent 60%), #0d1530; }
.cc { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 20px; background: rgba(6, 10, 22, .45); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.cc-grid { display: grid; grid-template-columns: repeat(4, 56px); grid-auto-rows: 56px; gap: 14px; }
.cc-grid > * { border-radius: 50%; background: rgba(255, 255, 255, .15); }
.cc-t { display: grid; place-items: center; }
.cc-t::after { content: ""; width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, .7); border-radius: 50%; }
.cc-t:nth-child(2)::after { border-radius: 5px; }
.cc-t:nth-child(5)::after { width: 14px; height: 22px; border-radius: 7px; }
.cc-t:nth-child(8)::after { border-radius: 6px 6px 50% 50%; }
.cc-grid > .cc-t:first-child { background: rgba(255, 255, 255, .9); }
.cc-grid > .cc-t:first-child::after { border-color: #2e6be0; }
.cc-tall { grid-row: span 2; border-radius: 24px !important; position: relative; overflow: hidden; }
.cc-tall span { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: rgba(255, 255, 255, .88); }
.cc-tall.cc-v span { height: 38%; }
.cc-wide { position: relative; grid-column: span 2; border-radius: 28px !important; display: flex; align-items: center; gap: 7px; padding: 0 8px 0 7px; color: #fff; text-align: left;
  transition: background-color .25s, transform .35s var(--spring); }
.cc-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #1a50ba; }
.cc-ic svg { width: 20px; height: 20px; }
.cc-grid > .cc-wide { background: #39425a; }
.cc-w { min-width: 0; }
.cc-w b { display: block; font-size: 13px; line-height: 1.2; white-space: nowrap; }
.cc-w small { font-size: 11.5px; color: #d5dcea; }
.cc-sheet { position: absolute; left: 10px; right: 10px; bottom: 0; display: grid; justify-items: start; gap: 6px; padding: 16px 18px 20px; border-radius: 26px 26px 0 0;
  background: var(--a-bg); text-align: left; transform: translateY(105%); transition: transform .65s var(--ease-x); box-shadow: 0 -10px 30px -10px rgba(0, 0, 0, .5); }
.cc-back { display: inline-flex; align-items: center; gap: 3px; color: var(--a-acc); font-size: 14px; font-weight: 600; }
.cc-back::before { content: ""; width: 8px; height: 8px; border-left: 2.2px solid currentColor; border-bottom: 2.2px solid currentColor; transform: rotate(45deg); margin-right: 3px; }
.cc-sheet strong { font-size: 20px; line-height: 1.2; letter-spacing: -.01em; }
.cc-date { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--a-ink2); }
.cc-date svg { width: 15px; height: 15px; }
.cc-md { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 9px 16px; border-radius: 99px; background: var(--a-acc); color: var(--a-on-acc); font-weight: 600; font-size: 14px; }
.cc-md svg { width: 16px; height: 16px; }
#sc-cc.p-c1 .cc-wide .tap { opacity: 1; transform: none; }
#sc-cc.p-c2 .cc-wide { background: #4a5470; transform: scale(.95); }
#sc-cc.p-c2 .cc-wide .tap { transform: scale(.78); }
#sc-cc.p-c3 .cc-wide { transform: none; }
#sc-cc.p-c3 .cc-wide .tap { opacity: 0; }
#sc-cc.p-c4 .cc-sheet { transform: none; }

/* Calendar sync (Calendar/CalendarSyncService.swift): a calendar called Rootstep, an all-day event for an official
   deadline you set, a timed event for an appointment, and the note on the event. */
.cal-stage { height: auto; padding: 16px; background: radial-gradient(80% 80% at 0% 0%, rgba(46, 107, 224, .35), transparent 60%), #0c1324; }
.cal { position: relative; padding: 14px 16px 16px; border-radius: 22px; background: var(--a-cell); color: var(--a-ink); overflow: hidden; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .7); }
.cal-sync { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--a-line); font-size: 15px; }
.cal-ico { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--a-acc); color: var(--a-on-acc); }
.cal-ico svg { width: 17px; height: 17px; }
.cal-sync b { flex: 1; font-weight: 600; }
.cal-tg { position: relative; width: 48px; height: 29px; border-radius: 99px; background: var(--a-fill); transition: background-color .3s; }
.cal-tg i { position: absolute; left: 2px; top: 2px; width: 25px; height: 25px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .25); transition: transform .4s var(--spring); }
.cal-m { margin: 12px 0 4px; font-size: 15px; font-weight: 700; }
.cal-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
.cal-days li { position: relative; padding-bottom: 10px; }
.cal-days small { display: block; font-size: 11px; color: var(--a-ink2); }
.cal-days b { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-top: 2px; border-radius: 50%; font-size: 15px; font-weight: 600;
  transition: background-color .35s, color .35s; }
.cal-days li::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--a-ink2);
  opacity: 0; transform: scale(0); transition: opacity .3s, transform .4s var(--spring); }
.cal-days .cd0 b { background: var(--a-ink); color: var(--a-cell); }
.cal-dt { position: relative; height: 28px; margin-top: 4px; border-top: 1px solid var(--a-line); }
.cal-dt span { position: absolute; left: 0; top: 7px; font-size: 13px; font-weight: 600; transition: opacity .3s, transform .45s var(--ease-x); }
.cal-d3 { opacity: 0; transform: translateX(14px); }
.cal-all { display: flex; align-items: center; gap: 6px; min-height: 32px; border-bottom: 1px solid var(--a-line); }
.cal-al { flex: none; width: 44px; font-size: 10.5px; color: var(--a-ink2); }
.cal-ev { opacity: 0; transform: scale(.7); transition: opacity .3s, transform .5s var(--spring), box-shadow .3s; }
.cal-ev-all { flex: 1; min-width: 0; padding: 4px 8px; border-radius: 6px; border-left: 3px solid var(--a-acc); background: color-mix(in srgb, var(--a-acc) 18%, var(--a-cell));
  font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform-origin: 0 50%; }
.cal-hours { position: relative; height: 190px; }
.cal-hours::after { content: ""; position: absolute; left: 50px; right: 0; top: 0; bottom: 0; pointer-events: none;
  top: 12px; background: repeating-linear-gradient(to bottom, var(--a-line) 0 1px, transparent 1px 34px); }
.cal-hr { position: absolute; left: 0; font-size: 10.5px; color: var(--a-ink2); transform: translateY(-6px); }
.cal-hr:nth-child(1) { top: 12px; } .cal-hr:nth-child(2) { top: 46px; } .cal-hr:nth-child(3) { top: 80px; } .cal-hr:nth-child(4) { top: 114px; } .cal-hr:nth-child(5) { top: 148px; }
.cal-ev-t { position: absolute; left: 54px; right: 4px; top: 64px; height: 33px; padding: 3px 8px; border-radius: 6px; border-left: 3px solid var(--a-acc);
  background: color-mix(in srgb, var(--a-acc) 18%, var(--a-cell)); overflow: hidden; line-height: 1.25; transform-origin: 0 0; }
.cal-ev-t b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev-t small { display: block; font-size: 10.5px; color: var(--a-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-pop { position: absolute; z-index: 2; left: 54px; right: 2px; top: 12px; display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--a-cell);
  border: 1px solid var(--a-line); box-shadow: 0 16px 40px -14px rgba(15, 27, 51, .55); opacity: 0; transform: translateY(14px) scale(.97); transform-origin: 30px 0; transition: opacity .35s, transform .55s var(--spring); }
.cal-pop::before { content: ""; position: absolute; left: 22px; top: -7px; width: 12px; height: 12px; background: inherit; border-left: 1px solid var(--a-line); border-top: 1px solid var(--a-line); transform: rotate(45deg); }
.cal-pop-h { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--a-ink2); }
.cal-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--a-acc); }
.cal-pop strong { font-size: 15px; }
.cal-pop small { font-size: 12.5px; color: var(--a-ink2); }
.cal-pop p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--a-ink); }
/* k1 sync on; k2 Monday's appointment and the dots of both days; k3 Thursday: the official deadline all day; k4 its note */
#sc-cal.p-k1 .cal-tg { background: #248a3d; }
#sc-cal.p-k1 .cal-tg i { transform: translateX(19px); }
#sc-cal.p-k2 .cal-ev-t { opacity: 1; transform: none; }
#sc-cal.p-k2 .cd0::after, #sc-cal.p-k2 .cd3::after { opacity: 1; transform: none; }
#sc-cal.p-k3 .cal-ev-t { opacity: 0; transform: translateX(-24px); }
#sc-cal.p-k3 .cd0 b { background: transparent; color: var(--a-ink); }
#sc-cal.p-k3 .cd3 b { background: var(--a-ink); color: var(--a-cell); }
#sc-cal.p-k3 .cal-d0 { opacity: 0; transform: translateX(-14px); }
#sc-cal.p-k3 .cal-d3 { opacity: 1; transform: none; }
#sc-cal.p-k3 .cal-ev-all { opacity: 1; transform: none; }
#sc-cal.p-k4 .cal-ev-all { box-shadow: 0 0 0 2px var(--a-acc); }
#sc-cal.p-k4 .cal-pop { opacity: 1; transform: none; }

/* ---------- The assistant (Assistant/AssistantView.swift) ---------- */
.as-sec { padding: 112px 0; overflow: hidden; background: var(--bg-sunk); border-block: 1px solid var(--line); }
.as-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 6vw, 88px); align-items: center; }
.as-copy h2, .dv-copy h2 { margin-top: 14px; }
.as-copy .lede, .dv-copy .lede { margin: 16px 0 0; }
.as-points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; }
.as-points li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; color: var(--ink-2); }
.as-points strong { color: var(--ink); }
.as-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.as-ico svg { width: 19px; height: 19px; }
.as-gloss { display: block; margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: var(--bg-raised); border: 1px solid var(--line); font-size: .9375rem; }
.as-gloss b { color: var(--ink); }
.as-note { margin-top: 26px; }
.as-stage, .dv-stage { margin: 0; }
@media (max-width: 900px) {
  .as-grid, .dv-sec .dv-grid { grid-template-columns: minmax(0, 1fr); }
  .as-stage, .dv-stage { justify-self: center; }
  .dv-stage { order: 2; }
}

/* A drawn iPhone around the app's screens */
.mdev { position: relative; width: 300px; height: 612px; padding: 11px; box-sizing: border-box; border-radius: 52px;
  background: linear-gradient(150deg, #4a5264, #14181f 55%, #2c323f);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 50px 90px -40px rgba(15, 27, 51, .6), 0 30px 60px -30px rgba(15, 27, 51, .4); }
.mdev-island { position: absolute; z-index: 9; top: 22px; left: 50%; width: 88px; height: 26px; margin-left: -44px; border-radius: 99px; background: #000; }
.mdev-screen { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: 41px; overflow: hidden; background: var(--a-bg); font-size: 14px; }
.mdev-status { flex: none; height: 50px; display: flex; justify-content: space-between; align-items: center; padding: 6px 28px 0 30px; font-size: 14px; font-weight: 700; }
.mdev-batt { width: 24px; height: 11px; padding: 1.5px; box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 3.5px; opacity: .85; }
.mdev-batt i { display: block; width: 75%; height: 100%; border-radius: 1px; background: currentColor; }
.mdev-btn { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--a-cell); color: var(--a-ink); box-shadow: 0 1px 6px rgba(0, 0, 0, .08); }
.mdev-btn .g-chev { width: 16px; height: 16px; transform: scaleX(-1); }
.mdev-more { display: flex; align-items: center; justify-content: center; gap: 3px; }
.mdev-more i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
@media (max-width: 360px) { .mdev { width: 280px; height: 590px; } }

.as-nav { display: flex; justify-content: space-between; padding: 0 14px; }
.as-title { padding: 6px 18px 4px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.as-conv { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 12px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px); mask-image: linear-gradient(to bottom, transparent 0, #000 28px); }
.as-x { max-height: 0; margin-top: 0; padding: 0 14px; opacity: 0; overflow: hidden; border-radius: 14px; background: var(--a-cell); flex: none;
  transition: max-height .8s var(--ease-x), margin .5s, padding .5s, opacity .4s; }
.as-q { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.as-spin { display: block; width: 18px; height: 18px; margin: 8px 0 2px; border-radius: 50%; border: 2.5px solid var(--a-fill); border-top-color: var(--a-ink2); animation: as-spin .8s linear infinite; }
@keyframes as-spin { to { transform: rotate(360deg); } }
.as-a { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .8s var(--ease-x), opacity .5s .1s; }
.as-a p { margin: 8px 0 0; font-size: 14px; line-height: 1.45; }
.as-a > small { display: block; margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--a-ink2); }
.as-btn { display: inline-block; margin-top: 8px; color: var(--a-acc); font-weight: 600; font-size: 14px; }
.as-cite { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--a-line); }
.as-cite svg { width: 18px; height: 18px; margin-top: 1px; color: var(--a-acc); }
.as-cite b { display: block; font-size: 13.5px; }
.as-cite small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--a-ink2); }
.as-starters { display: flex; gap: 8px; padding: 10px 12px 8px; overflow: hidden; }
.st { position: relative; flex: none; max-width: 200px; padding: 8px 12px; border-radius: 18px; background: var(--a-cell); border: 1px solid var(--a-line); font-size: 12.5px; line-height: 1.3;
  transition: opacity .35s, max-width .55s var(--ease-x), padding .55s var(--ease-x), margin .55s var(--ease-x), border-width .55s; }
.as-comp { display: flex; align-items: center; gap: 8px; padding: 6px 12px 24px; }
.as-field { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 22px; background: var(--a-cell); border: 1px solid var(--a-line); color: var(--a-ink2); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-send { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--a-acc); color: var(--a-on-acc); }
.as-send svg { width: 18px; height: 18px; }
#sc-assist.p-t1 .st1 .tap, #sc-assist.p-t2 .st2 .tap { opacity: 1; transform: none; }
#sc-assist.p-a1 .st1, #sc-assist.p-a2 .st2 { opacity: 0; max-width: 0; padding-inline: 0; margin-right: -8px; border-width: 0; white-space: nowrap; }
#sc-assist.p-a1 .x1, #sc-assist.p-a2 .x2 { max-height: 420px; margin-top: 10px; padding: 12px 14px; opacity: 1; }
#sc-assist.p-n1 .x1 .as-spin, #sc-assist.p-n2 .x2 .as-spin { display: none; }
#sc-assist.p-n1 .x1 .as-a, #sc-assist.p-n2 .x2 .as-a { max-height: 360px; opacity: 1; }

/* ---------- Documents (Documents/DocumentRow.swift, VaultGate.swift, DocumentDetailView.swift) ---------- */
.dv-sec { padding: 112px 0; overflow: hidden; }
.dv-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.dv-lock, .dv-list, .dv-detail { position: absolute; left: 0; right: 0; top: 50px; bottom: 0; padding: 0 14px; transition: opacity .45s, transform .6s var(--ease-x), filter .45s; }
.dv-lock { display: grid; align-content: start; padding-top: 96px; }
.dv-lk-card { display: grid; gap: 6px; padding: 16px; border-radius: 14px; background: var(--a-cell); }
.dv-lk-h { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.dv-lk-h svg { width: 18px; height: 18px; color: var(--a-acc); }
.dv-lk-card small { font-size: 13px; line-height: 1.4; color: var(--a-ink2); }
.dv-unlock { justify-self: start; margin-top: 6px; padding: 9px 18px; border-radius: 99px; background: var(--a-acc); color: var(--a-on-acc); font-size: 14px; font-weight: 600; }
.dv-face { justify-self: center; width: 84px; height: 84px; margin-top: 40px; border-radius: 20px; display: grid; place-items: center; background: var(--a-cell); color: var(--a-acc);
  opacity: 0; transform: scale(.85); transition: opacity .3s, transform .45s var(--spring), color .3s; }
.dv-face .g-face { width: 50px; height: 50px; }
.dv-list { opacity: 0; transform: translateY(14px); }
.dv-big { padding: 4px 4px 8px; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.dv-tally { display: grid; gap: 7px; padding: 12px 14px; border-radius: 14px; background: var(--a-cell); }
.dv-tally > b { font-size: 14px; font-weight: 600; }
.dv-bar { display: flex; gap: 3px; height: 8px; }
.dv-bar i { border-radius: 99px; transition: flex-grow .8s var(--ease-x); }
.dv-bar .br { flex: 5 1 0; background: var(--a-green); }
.dv-bar .bu { flex: 1 1 0; background: var(--a-acc); }
.dv-bar .bg { flex: 2 1 0; background: var(--a-fill); box-shadow: inset 0 0 0 1px var(--a-line); }
.dv-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--a-ink2); }
.dv-leg span { display: inline-flex; align-items: center; gap: 5px; }
.dv-leg i { width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; }
.dv-leg .br { background: var(--a-green); }
.dv-leg .bu { background: var(--a-acc); }
.dv-leg .bg { border: 1.5px solid var(--a-ink2); }
.dv-gh { margin: 12px 4px 4px; font-size: 12px; font-weight: 600; color: var(--a-ink2); }
.dv-row { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 12px; background: var(--a-cell);
  transition: background-color .25s; }
.dv-st { width: 22px; height: 22px; display: grid; place-items: center; }
.dv-st svg { width: 20px; height: 20px; }
.dv-st.ok { color: var(--a-green); }

.dv-st.get { color: var(--a-ink2); }
.dv-bc .dv-st { color: var(--a-acc); }
.dv-bc .dv-st > b { color: var(--a-green); }
.dv-t { display: grid; gap: 2px; min-width: 0; }
.dv-t b { font-size: 14.5px; font-weight: 600; }
.dv-t small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; line-height: 1.35; color: var(--a-ink2); }
.dv-t small.dv-warn, .dv-t small.dv-exp { color: var(--a-red); }
.dv-exp { display: flex; align-items: center; gap: 4px; }
.dv-exp svg { flex: none; width: 13px; height: 13px; }
.dv-pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; background: var(--a-fill); color: var(--a-ink); font-size: 11.5px; font-weight: 600; font-style: normal; }
.dv-pill svg { width: 12px; height: 12px; }
.dv-pill.off { background: color-mix(in srgb, var(--a-red) 13%, var(--a-cell)); color: var(--a-red); }
.dv-row > .g-chev { width: 14px; height: 14px; align-self: center; color: var(--a-ink2); }
.dv-detail { display: grid; align-content: start; gap: 8px; padding-top: 2px; background: var(--a-bg); transform: translateX(104%); }
.dv-dt { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.dv-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.dv-stat { display: grid; padding: 12px 14px; border-radius: 12px; background: var(--a-cell); font-size: 14.5px; font-weight: 600; }
.dv-stat > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; transition: opacity .3s, transform .45s var(--ease-x); }
.dv-stat .s1, .dv-stat .s2 { opacity: 0; transform: translateY(8px); }
.dv-stat .s2 { color: var(--a-green); }
.dv-stat svg { width: 18px; height: 18px; }
.dv-sh { margin: 8px 4px 0; font-size: 12px; font-weight: 600; color: var(--a-ink2); }
.dv-forms { list-style: none; margin: 0; padding: 0 14px; border-radius: 12px; background: var(--a-cell); }
.dv-forms li { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 14px; }
.dv-forms li + li { border-top: 1px solid var(--a-line); }
.dv-forms li > i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.8px solid var(--a-ink2); color: transparent;
  transition: background-color .25s, border-color .25s, color .2s, transform .4s var(--spring); }
.dv-forms li > i svg { width: 12px; height: 12px; stroke-width: 3.4; }
.dv-forms li.on > i, #sc-docs.p-fa .dv-forms .fa > i, #sc-docs.p-ft .dv-forms .ft > i { background: var(--a-acc); border-color: var(--a-acc); color: var(--a-on-acc); }
.dv-forms .tap { left: 11px; }
.dv-foot { display: grid; padding: 0 4px; font-size: 11.5px; line-height: 1.4; color: var(--a-ink2); }
.dv-foot > span { grid-area: 1 / 1; transition: opacity .3s; }
.dv-foot .f1 { opacity: 0; }
.dv-need { display: grid; grid-template-columns: 18px minmax(0, 1fr) 14px; gap: 8px; align-items: center; padding: 11px 14px; border-radius: 12px; background: var(--a-cell); font-size: 14px; }
.dv-need svg { width: 17px; height: 17px; color: var(--a-acc); }
.dv-need .g-chev { width: 13px; height: 13px; color: var(--a-ink2); }
.dv-bc > .tap { left: 40%; }
#sc-docs.p-d1 .dv-face { opacity: 1; transform: none; }
#sc-docs.p-d2 .dv-face { color: var(--a-green); }
#sc-docs.p-d2 .g-face .ff, #sc-docs.p-d2 .g-face .fc { opacity: 0; }
#sc-docs.p-d2 .g-face .fk { opacity: 1; stroke-dashoffset: 0; }
#sc-docs.p-d3 .dv-lock { opacity: 0; transform: scale(.96); }
#sc-docs.p-d3 .dv-list { opacity: 1; transform: none; }
#sc-docs.p-t1 .dv-bc > .tap, #sc-docs.p-t2 .fa > .tap, #sc-docs.p-t3 .ft > .tap, #sc-docs.p-t4 .dv-dnav .tap { opacity: 1; transform: none; }
#sc-docs.p-t1 .dv-bc { background: color-mix(in srgb, var(--a-ink2) 14%, var(--a-cell)); }
#sc-docs.p-op .dv-list { transform: translateX(-28%); filter: brightness(.9); }
#sc-docs.p-op .dv-detail { transform: none; }
#sc-docs.p-fa .dv-stat .s0 { opacity: 0; transform: translateY(-8px); }
#sc-docs.p-fa .dv-stat .s1 { opacity: 1; transform: none; }
#sc-docs.p-ft .dv-stat .s1 { opacity: 0; transform: translateY(-8px); }
#sc-docs.p-ft .dv-stat .s2 { opacity: 1; transform: none; }
#sc-docs.p-ft .dv-foot .f0 { opacity: 0; }
#sc-docs.p-ft .dv-foot .f1 { opacity: 1; }
#sc-docs.p-cl .dv-detail { transform: translateX(104%); }
#sc-docs.p-cl .dv-list { transform: none; filter: none; }
#sc-docs.p-cl .dv-bc { background: var(--a-cell); }
#sc-docs.p-cl .xs > s { opacity: 0; transform: translateY(-8px); }
#sc-docs.p-cl .xs > b { opacity: 1; transform: none; }
#sc-docs.p-cl .dv-bar .br { flex-grow: 6; }
#sc-docs.p-cl .dv-bar .bu { flex-grow: .0001; }

/* ---------- Moving day in the bento (runbook-templates.json) ---------- */

.rb { width: 100%; max-width: 380px; padding: 12px 12px 6px; border-radius: 14px; background: var(--bg-raised); box-shadow: var(--shadow); font-size: .8125rem; }
.rb-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; }
.rb-t { display: inline-flex; align-items: center; gap: 6px; }
.rb-t svg { width: 15px; height: 15px; color: var(--blue); }
.rb-n { font-size: .75rem; font-weight: 600; color: var(--ink-3); }
.rb-prog { height: 4px; margin: 8px 0 4px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--ink-3) 22%, transparent); }
.rb-prog i { display: block; width: calc(200% / 11); height: 100%; border-radius: inherit; background: var(--blue); }
.rb-list { list-style: none; margin: 0; padding: 0; }
.rb-list li { display: grid; grid-template-columns: 38px 18px minmax(0, 1fr); gap: 8px; align-items: start; padding: 7px 0; border-top: 1px solid var(--line); color: var(--ink-2); line-height: 1.35; }
.rb-list li:first-child { border-top: 0; }
.rb-list time { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.rb-list i { width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; border: 1.6px solid var(--blue); }
.rb-list i svg { width: 10px; height: 10px; stroke-width: 3.4; }
.rb-list li.done i { background: var(--green); border-color: var(--green); color: #fff; }
.rb-list li.done span { color: var(--ink-3); text-decoration: line-through; }
.rb-list li.now { color: var(--ink); font-weight: 600; }
.rb-list li.now time { color: var(--amber-ink); }
.rb-list span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

  

/* ---------- Boxes: what else a box keeps ---------- */
.bx-feats { list-style: none; max-width: 920px; margin: 40px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.bx-feats li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: 999px; background: var(--bg-raised); border: 1px solid var(--line);
  font-size: .9375rem; font-weight: 500; }
.bx-feats span { display: grid; color: var(--blue); }
.bx-feats li:first-child span { color: var(--amber-ink); }
.bx-feats svg { width: 18px; height: 18px; }

/* =====================================================================
   v19 (17 Oct 2026): the route. The page follows a move the way the app
   draws it: a line filled to today, two stations, the amber point and the
   house. Four chapters in the move's order, each under its own sky: day,
   the dusk before moving day, the night of the day itself, the dawn of
   arrival. Motion is rare, calm and played once.
   ===================================================================== */

:root {
  --sky-day: #eef3fb;
  --sky-night: #070b16;
  --sky-dusk: #1b2546;
  --dusk-1: #c6d3ee;
  --dusk-2: #5f72a6;
  --sky-dawn: #fbf5ec;
  --dawn-1: #24335f;
  --dawn-2: #a9b7d6;
  --dawn-3: #efdcc6;
  --glow: rgba(245, 165, 36, .26);
  --track: color-mix(in srgb, var(--ink-3) 28%, transparent);
  --pt: #c77700;
  --sunk-day: #e2e9f5;
  --sunk-dawn: #f4ebdf;
  --stop-gap: clamp(88px, 10vw, 136px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sky-day: #0d1629; --sky-night: #04070e; --sky-dusk: #08101f; --sky-dawn: #13111b; --dusk-1: #0b1426; --dusk-2: #09111f;
    --dawn-1: #0a1224; --dawn-2: #161a2c; --dawn-3: #1a1520; --glow: rgba(245, 165, 36, .12); --pt: #ffb454;
    --sunk-day: #0a1222; --sunk-dawn: #0f0d15;
  }
}
:root[data-theme="dark"] {
  --sky-day: #0d1629; --sky-night: #04070e; --sky-dusk: #08101f; --sky-dawn: #13111b; --dusk-1: #0b1426; --dusk-2: #09111f;
  --dawn-1: #0a1224; --dawn-2: #161a2c; --dawn-3: #1a1520; --glow: rgba(245, 165, 36, .12); --pt: #ffb454;
  --sunk-day: #0a1222; --sunk-dawn: #0f0d15;
}
.on-dark { --pt: #ffb454; --track: rgba(154, 166, 189, .3); }

/* Headings speak in the app's rounded voice: titles, numbers and dates */
h1, h2, .display { font-family: var(--font-round); }
.display { font-weight: 750; letter-spacing: -.03em; }
h2 { font-weight: 750; letter-spacing: -.025em; }

/* ---------- Header: one calm bar, its lower edge the route, the amber point where you are ---------- */
@media (min-width: 761px) {
  .site-header.scrolled { padding-top: 0; background: color-mix(in srgb, var(--bg) 84%, transparent); border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); }
  .site-header.scrolled .wrap { max-width: none; margin-top: 0; min-height: 64px; padding: 0; border-radius: 0; border-color: transparent; background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header.scrolled .progress { opacity: 1; }
  .site-header.over-dark.scrolled .wrap { background: none; box-shadow: none; }
}
.site-header.over-dark.scrolled { background: color-mix(in srgb, #070b16 84%, transparent); }
.site-header .progress { bottom: -1px; height: 2px; }
.progress .pg-line { position: absolute; inset: 0; transform: none; background: var(--track); }
.progress #progress-bar { position: absolute; inset: 0; background: var(--blue); }
.progress .pg-pt { position: absolute; top: 50%; left: var(--p, 0%); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--pt); box-shadow: 0 0 0 2px var(--bg); }
.site-header.over-dark .progress .pg-pt { box-shadow: 0 0 0 2px #070b16; }

/* ---------- Hero ---------- */
.hero2::before { background: radial-gradient(60% 70% at 85% 10%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 70%); }
.hero2 { padding-bottom: clamp(64px, 8vw, 104px); }
.hero2-copy > * { animation-duration: .7s; }
.planner { animation: rise .8s var(--ease-x) .2s both; }
.hero-terms { margin: 18px 0 0; font-size: .9375rem; color: var(--ink-3); max-width: 30em; }

/* ---------- Quiet reveals: once, a short rise; the route on each head draws to its point ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-x), transform .9s var(--ease-x); }
.js .reveal.in-view { opacity: 1; transform: none; }
.js .reveal h2, .js .section-head.reveal h2, .js .reveal.in-view h2 { clip-path: none; transform: none; transition: none; }
.js .reveal:not(.in-view) { transition-duration: .7s, .9s; }

/* ---------- The route map: the page's four parts on the app's strip ---------- */
.rmap { padding: 8px 0 clamp(72px, 9vw, 112px); }
.rmap-title { font-size: clamp(1.75rem, 3.4vw, 2.5rem); max-width: 20em; }
.rmap-sub { margin: 12px 0 0; font-size: 1.125rem; color: var(--ink-2); }
.rmap-track { position: relative; margin-top: 44px; padding-right: 40px; }
.rmap-track::before { content: ""; position: absolute; left: 4px; right: 26px; top: 13px; height: 6px; border-radius: 99px; background: var(--track);
  transform-origin: 0 50%; transition: transform 1.4s var(--ease-x) .15s; }
.rmap-track::after { content: ""; position: absolute; left: 0; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); }
.rmap-house { position: absolute; right: 0; top: 4px; width: 24px; height: 24px; color: var(--ink-3); }
.rmap-house svg { width: 24px; height: 24px; }
.rmap-line { position: relative; list-style: none; margin: 0; padding: 0 0 0 30px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.rm { position: relative; min-width: 0; transition: opacity .6s var(--ease-x), transform .8s var(--ease-x); }
.rm a { display: grid; align-content: start; gap: 6px; height: 100%; padding: 46px 10px 14px 0; border-radius: 14px; color: var(--ink); text-decoration: none; }
.rm a:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.rm a:focus-visible { outline-offset: 4px; }
.rm-mk { position: absolute; left: 0; top: 6px; width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box; background: var(--bg); border: 3px solid var(--ink-3); }
.rm-before .rm-mk { top: 10px; width: 12px; height: 12px; border-width: 2.5px; left: 4px; }
.rm-today .rm-mk { background: var(--pt); border-color: var(--pt); box-shadow: 0 0 0 5px color-mix(in srgb, var(--pt) 22%, transparent); }
.rm-today::before { content: ""; position: absolute; left: -26px; width: 36px; top: 13px; height: 6px; border-radius: 99px; background: var(--blue); }
.rm-k { font-family: var(--font-round); font-size: .875rem; font-weight: 700; color: var(--ink-2); }
.rm-date { margin-left: 6px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rm strong { font-family: var(--font-round); font-size: 1.1875rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.rm-d { font-size: .9375rem; line-height: 1.45; color: var(--ink-2); }
.js .rmap.reveal { opacity: 1; transform: none; }
.js .rmap.reveal:not(.in-view) .rmap-track::before { transform: scaleX(0); }
.js .rmap.reveal:not(.in-view) .rm { opacity: 0; transform: translateY(10px); }
.js .rmap.reveal .rm:nth-child(2) { transition-delay: .12s; }
.js .rmap.reveal .rm:nth-child(3) { transition-delay: .24s; }
.js .rmap.reveal .rm:nth-child(4) { transition-delay: .36s; }
@media (max-width: 860px) {
  .rmap-track { padding: 0 0 36px; }
  .rmap-track::before { left: 13px; right: auto; top: 6px; bottom: 30px; width: 6px; height: auto; transform-origin: 50% 0; }
  .rmap-track::after { left: 11px; top: 0; }
  .js .rmap.reveal:not(.in-view) .rmap-track::before { transform: scaleY(0); }
  .rmap-house { left: 4px; right: auto; top: auto; bottom: 0; }
  .rmap-line { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 14px 0 0 44px; }
  .rm a { padding: 10px 0 18px; }
  .rm-mk { left: -38px; top: 12px; }
  .rm-before .rm-mk { left: -34px; top: 16px; }
  .rm-today::before { left: -31px; top: -14px; width: 6px; height: 36px; }
}

/* ---------- Chapters, each under its sky ---------- */
.chapter { --ch-bg: var(--bg); position: relative; overflow-x: clip; padding: clamp(88px, 10vw, 136px) 0; background: var(--ch-bg); }
.ch-today { padding-top: clamp(56px, 6vw, 88px); }
.ch-before { --ch-bg: var(--sky-day); padding-bottom: clamp(200px, 22vw, 300px);
  background: linear-gradient(180deg, var(--bg) 0, var(--sky-day) 200px, var(--sky-day) calc(100% - 300px), var(--dusk-1) calc(100% - 210px), var(--dusk-2) calc(100% - 120px), var(--sky-dusk) calc(100% - 50px), var(--sky-night) 100%); }
.ch-before { --bg-sunk: var(--sunk-day); }
.ch-arrival { --bg-sunk: var(--sunk-dawn); }
.ch-day { --ch-bg: var(--sky-night); padding-bottom: 72px;
  background: radial-gradient(60% 420px at 50% 300px, rgba(46, 107, 224, .14), transparent 70%), var(--sky-night); }
/* the app's own surfaces drawn in the night take the app's dark colours */
.on-dark .app-ui { --a-bg: #000000; --a-cell: #1c1c1e; --a-ink: #ffffff; --a-ink2: #aeb4c2; --a-line: rgba(120, 120, 128, .36); --a-acc: #88abff;
  --a-on-acc: #0b1220; --a-amber: #ffb454; --a-red: #ff8a80; --a-green: #5fd398; --a-fill: rgba(120, 120, 128, .3); }
.ch-arrival { --ch-bg: var(--sky-dawn); padding-top: clamp(240px, 24vw, 320px); padding-bottom: clamp(72px, 8vw, 104px);
  background:
    radial-gradient(46% 140px at 50% calc(clamp(240px, 24vw, 320px) - 80px), var(--glow), transparent 72%),
    linear-gradient(180deg, var(--sky-night) 0, var(--dawn-1) 22%, var(--dawn-2) 46%, var(--dawn-3) 70%, var(--sky-dawn) 100%) top / 100% clamp(240px, 24vw, 320px) no-repeat,
    linear-gradient(180deg, var(--sky-dawn) 0, var(--sky-dawn) calc(100% - 220px), var(--bg) 100%); }

/* The chapter's head: its stretch of the route, the part and its day, the title */
.ch-head { max-width: 52rem; margin-bottom: clamp(48px, 6vw, 72px); }
.ch-route { display: flex; align-items: center; gap: 8px; max-width: 440px; height: 16px; margin-bottom: 26px; color: var(--ink-3); }
.cr-o { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cr-line { position: relative; flex: 1; height: 5px; border-radius: 99px; background: var(--track); }
.cr-span { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--b) * 100%); border-radius: inherit; background: var(--blue);
  transform-origin: 0 50%; transition: transform 1.3s var(--ease-x) .25s; }
.cr-st { position: absolute; top: 50%; left: var(--x); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; box-sizing: border-box;
  background: var(--ch-bg); border: 2px solid currentColor; }
.cr-dep { --x: 62%; } .cr-arr { --x: 70%; }
.cr-pt { position: absolute; top: 50%; left: calc(var(--b) * 100%); width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%;
  background: var(--pt); box-shadow: 0 0 0 3px var(--ch-bg); transition: left 1.3s var(--ease-x) .25s; }
.cr-house { flex: none; width: 17px; height: 17px; }
.cr-house svg { width: 17px; height: 17px; }
.ch-today { --a: 0; --b: .05; }
.ch-before { --a: .05; --b: .36; }
.ch-day { --a: .36; --b: .66; }
.ch-arrival { --a: .66; --b: .88; }
.js .ch-head.reveal:not(.in-view) .cr-span { transform: scaleX(calc(var(--a) / var(--b))); }
.js .ch-head.reveal:not(.in-view) .cr-pt { left: calc(var(--a) * 100%); }
.ch-k { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font-family: var(--font-round); font-size: 1rem; font-weight: 700; }
.ch-n { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 99px; background: var(--blue); color: var(--on-blue); font-size: .9375rem; font-weight: 800; }
.ch-name { color: var(--ink); }
.ch-when { display: inline-flex; align-items: center; gap: 12px; color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.ch-when::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--track); }
.ch-head h2 { margin: 18px 0 18px; font-size: clamp(2.25rem, 5.2vw, 3.75rem); line-height: 1.04; letter-spacing: -.032em; }
.ch-lede { margin: 0; max-width: 36em; font-size: clamp(1.125rem, 1.9vw, 1.3125rem); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

/* A stop on the route: its label carries a station ring */
.chapter .stop { margin-top: var(--stop-gap); }
.chapter .ch-head + .stop { margin-top: 0; }
.stop-k { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-family: var(--font-round); font-size: .9375rem; font-weight: 700; color: var(--blue); }
.stop-k::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; border: 2.5px solid currentColor; }
.stop-h, .wg-h { font-size: clamp(1.625rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -.022em; line-height: 1.12; margin: 0 0 14px; }
.stop .lede { font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); margin-bottom: 0; }
.stop-intro { position: relative; max-width: 26em; margin: var(--stop-gap) auto 0; text-align: center; font-family: var(--font-round); font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  font-weight: 700; line-height: 1.3; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.stop-intro::before { content: ""; display: block; width: 4px; height: 52px; margin: 0 auto 26px; border-radius: 99px; background: linear-gradient(var(--track), var(--blue)); }
.chapter .stop-intro + .stop { margin-top: 56px; }

/* Lists that walk a route: numbers in station rings, joined by the line */
.answers, .flow3 { list-style: none; margin: 0; padding: 0; display: grid; }
.answers li, .flow3 li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 18px; padding-bottom: 30px; }
.answers li:last-child, .flow3 li:last-child { padding-bottom: 0; }
.answers li:not(:last-child)::before, .flow3 li:not(:last-child)::before { content: ""; position: absolute; left: 18px; top: 42px; bottom: 4px; width: 4px; border-radius: 99px; background: var(--track); }
.an-n, .flow3 .n { grid-row: 1 / span 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; box-sizing: border-box;
  border: 3px solid var(--blue); background: var(--ch-bg, var(--bg)); color: var(--blue); font-family: var(--font-round); font-size: 1.0625rem; font-weight: 800; }
.answers h3 { margin: 6px 0 6px; font-size: 1.3125rem; letter-spacing: -.015em; }
.answers p, .flow3 p { margin: 0; color: var(--ink-2); }
.flow3 strong { display: block; margin: 7px 0 4px; font-size: 1.125rem; color: var(--ink); }

.plan-stop { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 80px); align-items: center; }
.wk-card { margin: 0; padding: 18px; border-radius: 26px; background: var(--bg-raised); border: 1px solid var(--line); box-shadow: var(--shadow); }
.wk-card figcaption { margin: 16px 4px 2px; color: var(--ink-2); font-size: .9688rem; line-height: 1.5; }
.wk-card figcaption strong { color: var(--ink); }

.official { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: start; padding: 0; }
.official .note { margin-top: 24px; }

/* Blocks that were sections of their own are stops now */
.chapter .wg-block { margin-top: var(--stop-gap); gap: clamp(40px, 6vw, 80px); }
.chapter .labels-sec, .chapter .together, .chapter .as-sec, .chapter .dv-sec { padding: 0; background: none; border: 0; }
.chapter .labels-sec, .chapter .dv-sec, .chapter .as-sec { overflow: visible; }
.chapter .ip-block { margin-top: var(--stop-gap); }
.stop-head { max-width: 44rem; margin-bottom: 36px; }
.chapter .stop-k { color: var(--blue); }
.chapter .plabels { padding-bottom: 72px; }
.chapter .labels-sec .fineprint { margin-top: 8px; }
.chapter .bx-feats { justify-content: flex-start; max-width: none; margin: 28px 0 0; }
.stop-head p:not(.stop-k) { margin: 0; color: var(--ink-2); font-size: 1.0625rem; }
.ip-head { text-align: left; margin: 0 0 32px; max-width: 44rem; }
.ip-head .stop-k { justify-content: flex-start; }

/* ---------- Cards in a row; the arrival's three read as one flow ---------- */
.ev-row { display: grid; gap: 24px; align-items: stretch; }
.ev-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ev-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ev-row + .ev-row { margin-top: 24px; }
.ev { padding: 16px 16px 28px; border-radius: 28px; box-shadow: 0 1px 2px rgba(15, 27, 51, .04); }
.ev > .stop-k, .ev-cal-copy > .stop-k { margin: 22px 8px 8px; }
.ev > h3, .ev-cal-copy > h3 { margin: 0 8px 8px; font-size: 1.375rem; line-height: 1.2; }
.ev > p, .ev-cal-copy > p { margin: 0 8px; }
.ev-cal-copy > p + p { margin-top: 10px; }
.ev-island { grid-column: auto; }
.ev-cal { grid-column: auto; display: flex; flex-direction: column; gap: 0; padding: 16px 16px 28px; }
.ev-cal h3 { margin-top: 0; font-size: 1.375rem; }
.ev-cal .ev-sub { margin-top: 10px; font-size: inherit; }
.ev-row .ev-stage { height: 360px; }
.ev-row .cal-stage { height: 360px; }
.ev-day .ev-stage { height: 430px; }
.ev-day .isl-phone { height: 440px; }
.ev-rb .rb-stage { display: grid; place-items: center; padding: 18px; }
.ev-rb .rb { max-width: 400px; padding: 14px 14px 8px; font-size: .875rem; }
.ev-rb .rb-list li { padding: 8px 0; }
.ev-rb .rb-list span { -webkit-line-clamp: 2; }
.ev-flow > .ev:not(:last-child)::after { content: ""; position: absolute; z-index: 2; top: 186px; right: -21px; width: 18px; height: 18px; background: var(--ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M6.5 4.5 11 9l-4.5 4.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M6.5 4.5 11 9l-4.5 4.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
@media (max-width: 1080px) {
  .ev-three { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-inline: auto; }
  .ev-flow > .ev:not(:last-child)::after { top: auto; right: auto; left: 50%; bottom: -21px; margin-left: -9px; transform: rotate(90deg); }
}
@media (max-width: 860px) {
  .ev-two { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-inline: auto; }
  .ev-row + .ev-row { max-width: 620px; }
}

/* ---------- Nothing is drawn beside a scene (Alexander, 17 Oct). A click or tap on the picture ([data-replay]) stops it
   while it plays and plays it again after. Its control is for the keyboard alone: out of sight until it has keyboard
   focus, then a round button at the picture's lower right corner, taking no room, so focus never moves the page. Stop while
   the scene plays (a ring fills with the scene's time), Play again after; its name is in aria-label. ---------- */
.sc { position: relative; min-width: 0; }
.js [data-replay] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
html[data-motion="off"] [data-replay] { cursor: auto; }
.sc-ctl { position: absolute; z-index: 5; right: 8px; bottom: 8px; display: grid; place-items: center; width: 44px; height: 44px;
  margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.sc-ctl:not(:focus-visible) { width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sc-ctl::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--bg-raised);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .45), inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); }
.sc-ctl:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.sc-ctl[hidden] { display: none; }
.sc-ctl[data-mode="idle"] { visibility: hidden; }
.sc-ring { position: absolute; inset: 4px; width: 36px; height: 36px; transform: rotate(-90deg); overflow: visible; }
.sc-ring circle { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; }
.sc-ctl[data-mode="stop"] .sc-ring circle { opacity: 1; }
.sc-ctl.run .sc-ring circle { animation: sc-ring var(--dur, 10s) linear forwards; }
@keyframes sc-ring { to { stroke-dashoffset: 0; } }
.sc-ico { position: relative; flex: none; width: 12px; height: 12px; background: currentColor; }
.sc-ctl[data-mode="again"] .sc-ico, .sc-ctl[data-mode="idle"] .sc-ico { width: 15px; height: 15px; }
@media (forced-colors: active) { .sc-ctl::before { border: 1px solid ButtonText; } .sc-ico { background: ButtonText; } .sc-ring circle { stroke: Highlight; } }
.sc-ctl[data-mode="stop"] .sc-ico {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='2' y='2' width='10' height='10' rx='2.2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='2' y='2' width='10' height='10' rx='2.2'/%3E%3C/svg%3E") center / contain no-repeat; }
.sc-ctl[data-mode="again"] .sc-ico, .sc-ctl[data-mode="idle"] .sc-ico {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.4-5.7'/%3E%3Cpath d='M4 4v4.5h4.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.4-5.7'/%3E%3Cpath d='M4 4v4.5h4.5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- Apple Watch: the face, the glance and a step marked done, drawn in watch points ---------- */
.aw-stop { overflow-x: clip; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(40px, 7vw, 104px); align-items: center; }
.aw-stop > .sc { display: grid; justify-items: center; }
.aw-scene { --w: 276px; margin: 0; padding: 0 clamp(16px, 4vw, 48px); display: grid; place-items: center; position: relative; isolation: isolate; }
.aw-scene::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: calc(var(--w) * 1.9); height: calc(var(--w) * 1.9); transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--blue) 14%, transparent), transparent 75%); }
.aw-dev { margin: calc(var(--w) * .34) 0; }
.aw-screen { aspect-ratio: 208 / 248; }
.wui { --u: calc(var(--w) * .83 / 208); --acc: #88abff; --red: #ff8a80; --grn: #5fd398; --g2: #9a9a9f; --cell: #1f1f21; --amb: #ffb454;
  font-family: "SF Compact Text", "SF Compact", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: #fff; line-height: 1.22; -webkit-font-smoothing: antialiased; }
.wui svg { display: block; }
.wui b, .wui strong { font-weight: 600; }
.wui small { font-size: inherit; }

/* the face: date and time, the rectangular complication, the official steps gauge */
.wf { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; padding: calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 14);
  transform-origin: 50% 46%; transition: opacity .35s, transform .6s var(--ease-x); }
.wf-top { display: flex; align-items: baseline; justify-content: space-between; }
.wf-date { color: var(--amb); font-size: calc(var(--u) * 15); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.wf-time { font-family: "SF Compact Rounded", ui-rounded, var(--font-round); font-size: calc(var(--u) * 34); font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1; }
.wf-rect { position: relative; align-self: center; display: grid; gap: calc(var(--u) * 2); padding: calc(var(--u) * 8) calc(var(--u) * 2); }
.wf-cd { color: var(--acc); font-family: "SF Compact Rounded", ui-rounded, var(--font-round); font-size: calc(var(--u) * 19); font-weight: 700; }
.wf-next { display: flex; align-items: center; gap: calc(var(--u) * 5); min-width: 0; font-size: calc(var(--u) * 15); font-weight: 600; }
.wf-next > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wf-next svg { flex: none; width: calc(var(--u) * 15); height: calc(var(--u) * 15); color: var(--red); }
.wf-od { color: var(--red); font-size: calc(var(--u) * 14); }
.wf-rect .tap { left: 30%; width: calc(var(--u) * 40); height: calc(var(--u) * 40); margin: calc(var(--u) * -20) 0 0 calc(var(--u) * -20); }
.wf-bot { display: flex; align-items: center; gap: calc(var(--u) * 10); }
.wf-gauge { position: relative; display: grid; place-items: center; width: calc(var(--u) * 48); height: calc(var(--u) * 48); border-radius: 50%; background: #141416; }
.wf-gauge svg, .wa-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.wf-gauge circle, .wa-ring circle { fill: none; stroke-width: 3.6; stroke-linecap: round; }
.wf-gauge .t, .wa-ring .t { stroke: rgba(255, 255, 255, .2); }
.wf-gauge .f { stroke: var(--acc); stroke-dasharray: 77 100; }
.wf-gauge b { position: relative; font-family: "SF Compact Rounded", ui-rounded, var(--font-round); font-size: calc(var(--u) * 18); font-weight: 700; }

/* the glance */
.wa { position: absolute; inset: 0; opacity: 0; transform: scale(.88); transform-origin: 50% 40%; transition: opacity .4s .05s, transform .6s var(--ease-x); }
.wa-bar { position: absolute; z-index: 2; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: baseline;
  padding: calc(var(--u) * 9) calc(var(--u) * 14) calc(var(--u) * 10) calc(var(--u) * 16); background: linear-gradient(#000 72%, rgba(0, 0, 0, 0)); }
.wa-title { color: var(--acc); font-size: calc(var(--u) * 16); font-weight: 600; }
.wa-time { font-size: calc(var(--u) * 16); font-weight: 600; font-variant-numeric: tabular-nums; }
.wa-view { position: absolute; inset: 0; overflow: hidden; }
.wa-scroll { padding: calc(var(--u) * 36) calc(var(--u) * 8) calc(var(--u) * 16); transition: transform 1.4s var(--ease-x); }
.wa-hero { padding: 0 calc(var(--u) * 6); }
.wa-hero > small { display: block; color: var(--g2); font-size: calc(var(--u) * 14); }
.wa-cd { margin: 0; font-size: calc(var(--u) * 16); font-weight: 600; }
.wa-cd b { font-family: "SF Compact Rounded", ui-rounded, var(--font-round); font-size: calc(var(--u) * 30); font-weight: 700; color: var(--acc); letter-spacing: -.01em; }
.wa-strip { display: flex; align-items: center; gap: calc(var(--u) * 5); height: calc(var(--u) * 12); margin: calc(var(--u) * 5) 0 calc(var(--u) * 8); color: var(--g2); }
.wa-o { flex: none; width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-radius: 50%; background: currentColor; }
.wa-line { position: relative; flex: 1; height: calc(var(--u) * 4); border-radius: 99px; background: rgba(255, 255, 255, .22); }
.wa-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 6%; border-radius: inherit; background: var(--acc); }
.wa-st { position: absolute; top: 50%; left: 62%; width: calc(var(--u) * 8); height: calc(var(--u) * 8); margin: calc(var(--u) * -4) 0 0 calc(var(--u) * -4); border-radius: 50%;
  box-sizing: border-box; background: #000; border: calc(var(--u) * 1.6) solid var(--g2); }
.wa-pt { position: absolute; top: 50%; left: 6%; width: calc(var(--u) * 9); height: calc(var(--u) * 9); margin: calc(var(--u) * -4.5) 0 0 calc(var(--u) * -4.5); border-radius: 50%;
  background: var(--amb); box-shadow: 0 0 0 calc(var(--u) * 2) #000; }
.wui .wa-house { flex: none; width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.wa-ready { display: flex; align-items: center; gap: calc(var(--u) * 9); padding: calc(var(--u) * 9) calc(var(--u) * 10); border-radius: calc(var(--u) * 16); background: var(--cell); }
.wa-ring { position: relative; flex: none; display: grid; place-items: center; width: calc(var(--u) * 36); height: calc(var(--u) * 36); }
.wa-ring .f { stroke: var(--acc); stroke-dasharray: 77 100; transition: stroke-dasharray .9s var(--ease-x); }
.wa-ring .r { stroke: var(--red); stroke-dasharray: 4 100; stroke-dashoffset: -77; transition: stroke-dasharray .6s var(--ease-x), stroke-dashoffset .9s var(--ease-x); }
.wa-ring .xs { position: relative; font-family: "SF Compact Rounded", ui-rounded, var(--font-round); font-size: calc(var(--u) * 15); font-weight: 700; justify-items: center; }
.wa-rt { display: grid; min-width: 0; }
.wa-rt b { font-size: calc(var(--u) * 15); }
.wa-rt small { color: var(--g2); font-size: calc(var(--u) * 13); }
.wa-risk { display: flex; align-items: center; gap: calc(var(--u) * 5); max-height: calc(var(--u) * 40); margin: calc(var(--u) * 8) calc(var(--u) * 4) 0; overflow: hidden;
  color: var(--red); font-size: calc(var(--u) * 13); font-weight: 600; transition: opacity .4s, max-height .7s var(--ease-x), margin .7s var(--ease-x); }
.wa-risk svg { flex: none; width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.wa-h { margin: calc(var(--u) * 16) calc(var(--u) * 6) calc(var(--u) * 7); font-size: calc(var(--u) * 15); font-weight: 600; }
.wa-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 6); }
.wr { display: grid; grid-template-columns: calc(var(--u) * 24) minmax(0, 1fr); gap: calc(var(--u) * 9); align-items: start; max-height: calc(var(--u) * 130);
  padding: calc(var(--u) * 10) calc(var(--u) * 11); border-radius: calc(var(--u) * 16); background: var(--cell); overflow: hidden;
  transition: max-height .6s var(--ease-x), opacity .35s, padding .6s var(--ease-x), margin .6s var(--ease-x); }
.wr-c { position: relative; width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.wr-o { position: absolute; inset: 0; border-radius: 50%; border: calc(var(--u) * 2) solid var(--g2); transition: opacity .2s; }
.wui .w-done { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--grn); opacity: 0; transform: scale(.5); transition: opacity .2s, transform .45s var(--spring); }
.wr-c .tap { width: calc(var(--u) * 38); height: calc(var(--u) * 38); margin: calc(var(--u) * -19) 0 0 calc(var(--u) * -19); }
.wr-t { display: grid; min-width: 0; }
.wr-t > b { font-size: calc(var(--u) * 15); transition: color .3s; }
.wr-d, .wr-u { grid-row: 2; grid-column: 1; margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 13); }
.wr-d { color: var(--g2); transition: opacity .2s; }
.w-od .wr-d { color: var(--red); }
.wr-u { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); justify-self: start; color: var(--acc); font-weight: 600; opacity: 0; transition: opacity .25s .1s; }
.wr-u svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.wa-foot { display: grid; gap: calc(var(--u) * 1); margin: calc(var(--u) * 10) calc(var(--u) * 6) 0; color: var(--g2); font-size: calc(var(--u) * 13); }

/* the scene: the complication tapped, the glance, the Crown down, Mark done with Undo, the step gone, back up */
.aw-crown { transition: background-position 1.4s var(--ease-x); }
#sc-watch.p-w1 .wf-rect .tap, #sc-watch.p-w4 .wr1 .tap { opacity: 1; transform: none; }
#sc-watch.p-w2 .wf { opacity: 0; transform: scale(1.14); }
#sc-watch.p-w2 .wa { opacity: 1; transform: none; }
#sc-watch.p-w3 .wa-scroll { transform: translateY(var(--down-px, calc(var(--u) * -158))); }
#sc-watch.p-w3 .aw-crown { background-position: 0 -15px, 0 0; }
#sc-watch.p-w5 .wr1 .wr-o { opacity: 0; }
#sc-watch.p-w5 .wr1 .w-done { opacity: 1; transform: none; }
#sc-watch.p-w5 .wr1 .wr-t > b { color: var(--g2); text-decoration: line-through; }
#sc-watch.p-w5 .wr1 .wr-d { opacity: 0; }
#sc-watch.p-w5 .wr1 .wr-u { opacity: 1; }
#sc-watch.p-w5 .wa-foot .xs > s, #sc-watch.p-w8 .wa-ring .xs > s { opacity: 0; transform: translateY(-6px); }
#sc-watch.p-w5 .wa-foot .xs > b, #sc-watch.p-w8 .wa-ring .xs > b { opacity: 1; transform: none; }
#sc-watch.p-w6 .wr1 { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin-bottom: calc(var(--u) * -6); }
#sc-watch.p-w7 .wa-scroll { transform: none; }
#sc-watch.p-w7 .aw-crown { background-position: 0 0, 0 0; }
#sc-watch.p-w8 .wa-ring .f { stroke-dasharray: 81 100; }
#sc-watch.p-w8 .wa-ring .r { stroke-dasharray: 0 100; stroke-dashoffset: -81; }
#sc-watch.p-w8 .wa-risk { max-height: 0; opacity: 0; margin-top: 0; }

.aw-copy .lede { margin-bottom: 0; }
.aw-points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
.aw-points li { position: relative; padding-left: 26px; color: var(--ink-2); }
.aw-points li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; border: 2.5px solid var(--blue); }
.aw-points strong { color: var(--ink); }
@media (max-width: 860px) {
  .aw-stop { grid-template-columns: minmax(0, 1fr); }
  .aw-scene { --w: 220px; }
  .aw-band { height: calc(var(--w) * .3); }
  .aw-dev { margin: calc(var(--w) * .28) 0; }
}

/* ---------- The end of the route: settled in ---------- */
.ch-end { margin-top: var(--stop-gap); text-align: center; }
.ch-end::before { content: ""; display: block; width: 4px; height: 64px; margin: 0 auto; border-radius: 99px; background: linear-gradient(var(--track), var(--blue)); }
.ce-house { display: grid; place-items: center; width: 64px; height: 64px; margin: 10px auto 22px; border-radius: 50%; background: var(--blue); color: var(--on-blue);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--blue) 14%, transparent); }
.ce-house svg { width: 30px; height: 30px; }
.ch-end p { max-width: 30em; margin: 0 auto; font-size: clamp(1.125rem, 2vw, 1.3125rem); color: var(--ink-2); text-wrap: balance; }
.ch-end strong { display: block; margin-bottom: 6px; font-family: var(--font-round); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 750; letter-spacing: -.02em; color: var(--ink); }

/* ---------- Narrow windows ---------- */
@media (max-width: 860px) {
  .plan-stop, .official { grid-template-columns: minmax(0, 1fr); }
  .chapter .wg-block { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ch-head h2 { font-size: clamp(2rem, 9vw, 2.5rem); }
  .ev { padding: 12px 12px 24px; border-radius: 24px; }
  .ev-row .ev-stage, .ev-day .ev-stage { height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .ch-head.reveal:not(.in-view) .cr-span { transform: none; }
  .js .ch-head.reveal:not(.in-view) .cr-pt { left: calc(var(--b) * 100%); }
}

/* Nothing moves for ever: the caret and the dots stop */
.dots i { animation-iteration-count: 4; }
.sl-caret { animation-iteration-count: 6; }
#sc-siri.p-s5 .sr { animation: none; }
.private { padding-top: clamp(80px, 9vw, 112px); }
.closing2 { background: radial-gradient(60% 70% at 50% 45%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 70%); }
@media (max-width: 720px) { .nav .hide-sm { display: none; } .nav a { padding: 10px 8px; } }
.ph-ready-text small { color: var(--ink-2); }

/* iCloud both ways (scene sc-sync): a step marked done on the iPhone travels up its blue lane to iCloud and down the
   amber lane to the iPad; one marked done on the iPad goes up and comes back down to the iPhone. Each change is a dot on
   its lane's own path (pathLength 100, dash "0 300"), moved by its dash offset. The last frame, also under Reduce
   Motion: both screens with the same two steps done, no dots. */
.sync .lane { stroke-opacity: .7; }
.sync .pk path { fill: none; stroke-linecap: round; stroke-dasharray: 0 300; stroke-dashoffset: 0; opacity: 0; }
.sync .pk-h { stroke-width: 17; }
.sync .pk-d { stroke-width: 9.5; }
.sync .pk.up path { stroke: var(--blue); }
.sync .pk.down path { stroke: var(--amber); }
#sc-sync.f1 .pk1 .pk-d, #sc-sync.f2 .pk2 .pk-d { animation: pk-on 1s cubic-bezier(.45, 0, .55, 1) both; }
#sc-sync.f1 .pk1 .pk-h, #sc-sync.f2 .pk2 .pk-h { animation: pk-on-h 1s cubic-bezier(.45, 0, .55, 1) both; }
#sc-sync.f3 .pk3 .pk-d, #sc-sync.f4 .pk4 .pk-d { animation: pk-back 1s cubic-bezier(.45, 0, .55, 1) both; }
#sc-sync.f3 .pk3 .pk-h, #sc-sync.f4 .pk4 .pk-h { animation: pk-back-h 1s cubic-bezier(.45, 0, .55, 1) both; }
@keyframes pk-on { 0% { stroke-dashoffset: 0; opacity: 0; } 10%, 88% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes pk-on-h { 0% { stroke-dashoffset: 0; opacity: 0; } 10%, 88% { opacity: .28; } 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes pk-back { 0% { stroke-dashoffset: -100; opacity: 0; } 10%, 88% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes pk-back-h { 0% { stroke-dashoffset: -100; opacity: 0; } 10%, 88% { opacity: .28; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.sync .cloud { transform-box: fill-box; transform-origin: 50% 60%; }
#sc-sync.c1 .cloud { animation: cl-take .7s ease-out; }
#sc-sync.c2 .cloud { animation: cl-take2 .7s ease-out; }
@keyframes cl-take { 40% { transform: scale(1.07); } }
@keyframes cl-take2 { 40% { transform: scale(1.07); } }
.sync .row .ln { stroke: var(--ink-3); stroke-width: 3; stroke-linecap: round; opacity: .55; transition: opacity .3s; }
.sync .row .ck { fill: var(--bg-raised); stroke: var(--ink-3); stroke-width: 1.6; transition: fill .25s, stroke .25s; }
.sync .row .tk { fill: none; stroke: var(--bg-raised); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .25s; }
.sync .row .tap { fill: none; stroke: var(--blue); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
#sc-sync.p1 .dev .r1 .ck, #sc-sync.p2 .dev .r2 .ck, #sc-sync.d1 .dev2 .r1 .ck, #sc-sync.d2 .dev2 .r2 .ck { fill: var(--green); stroke: var(--green); }
#sc-sync.p1 .dev .r1 .tk, #sc-sync.p2 .dev .r2 .tk, #sc-sync.d1 .dev2 .r1 .tk, #sc-sync.d2 .dev2 .r2 .tk { opacity: 1; }
#sc-sync.p1 .dev .r1 .ln, #sc-sync.p2 .dev .r2 .ln, #sc-sync.d1 .dev2 .r1 .ln, #sc-sync.d2 .dev2 .r2 .ln { opacity: .3; }
/* Where the change is made, a tap rings out; where it arrives, the screen lights up for a moment. */
#sc-sync.p1:not(.p2) .dev .r1 .tap, #sc-sync.d2 .dev2 .r2 .tap { animation: sy-tap .6s ease-out; }
@keyframes sy-tap { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.8); } }
.sync .dev .fl, .sync .dev2 .fl { fill: var(--blue); stroke: none; opacity: 0; }
#sc-sync.d1:not(.d2) .dev2 .fl, #sc-sync.p2 .dev .fl { animation: sy-arrive .9s ease-out; }
@keyframes sy-arrive { 30% { opacity: .2; } }
@media (forced-colors: active) {
  .sync .pk path { stroke: CanvasText; }
  #sc-sync .row .ck { forced-color-adjust: none; }
}

/* =====================================================================
   v20 (17 Oct 2026): the stage. The page opens under the night sky the
   move travels through, with dawn at the far end where the house is:
   Today on iPhone, the watch's glance and the small widget, the promise
   set large, and the route along the foot as the page's map. Then five
   numbers, the loose ends sorted into a plan, tiles, a live accessibility
   demo and the pass. Motion plays once and never loops.
   ===================================================================== */

/* ---------- The hero: night sky, dawn on the right horizon ---------- */
.hx { --ink: #f3f6fc; --ink-2: #c6cfe1; --ink-3: #a3aec4; --line: rgba(255, 255, 255, .2); --bg: #08101f; --bg-sunk: rgba(255, 255, 255, .08); --blue: #9bb8ff;
  position: relative; isolation: isolate; overflow: hidden; margin-top: -65px; color: var(--ink);
  padding: calc(65px + clamp(40px, 6vw, 88px)) 0 clamp(36px, 4vw, 56px);
  background:
    radial-gradient(42% 52% at 92% 108%, rgba(255, 176, 84, .34), transparent 72%),
    radial-gradient(34% 40% at 62% 98%, rgba(214, 122, 160, .14), transparent 70%),
    radial-gradient(52% 58% at 70% 38%, rgba(46, 107, 224, .24), transparent 72%),
    linear-gradient(180deg, #04070f 0%, #08101f 46%, #111a33 100%); }
.hx::before { content: ""; position: absolute; inset: 0 0 30% 0; z-index: -1; pointer-events: none; opacity: .7;
  background-image:
    radial-gradient(1.2px 1.2px at 6% 22%, #fff, transparent), radial-gradient(1px 1px at 14% 64%, #fff, transparent),
    radial-gradient(1px 1px at 21% 12%, #fff, transparent), radial-gradient(1.4px 1.4px at 33% 38%, #fff, transparent),
    radial-gradient(1px 1px at 41% 8%, #fff, transparent), radial-gradient(1px 1px at 47% 56%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 55% 18%, #fff, transparent), radial-gradient(1px 1px at 63% 6%, #fff, transparent),
    radial-gradient(1px 1px at 71% 30%, #fff, transparent), radial-gradient(1.4px 1.4px at 79% 12%, #fff, transparent),
    radial-gradient(1px 1px at 86% 44%, #fff, transparent), radial-gradient(1px 1px at 93% 20%, #fff, transparent),
    radial-gradient(1px 1px at 27% 82%, #fff, transparent), radial-gradient(1px 1px at 97% 66%, #fff, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); }
.hx-grid { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.hx-copy { position: relative; z-index: 2; }
.hx-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 6px 14px 6px 6px; border-radius: 99px;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); font-size: .9375rem; color: var(--ink-2); }
.hx-eyebrow img { width: 28px; height: 28px; border-radius: 7px; }
.hx-eyebrow strong { color: var(--ink); font-weight: 600; }
.hx-h { margin: 0; font-family: var(--font-round); font-size: clamp(2.625rem, 5.6vw, 4.5rem); font-weight: 760; line-height: 1; letter-spacing: -.04em; text-wrap: balance; }
.hx-h span { display: block; color: #a9c1ff; padding-bottom: .16em; margin-bottom: -.16em;
  background: linear-gradient(92deg, #9bb8ff 0%, #c2b6ff 46%, #ffc98a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (forced-colors: active) { .hx-h span { -webkit-text-fill-color: currentColor; background: none; } }
.hx-lede { margin: 26px 0 30px; max-width: 34em; font-size: clamp(1.125rem, 1.7vw, 1.25rem); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.hx .cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hx .btn-primary { background: #f3f6fc; color: #08101f; }
.hx .btn-secondary { color: var(--ink); border-color: var(--line); }
.hx .btn-secondary:hover { background: rgba(255, 255, 255, .08); }
.hx-terms { margin: 18px 0 0; font-size: .9375rem; color: var(--ink-3); max-width: 30em; }
.hx :focus-visible { outline-color: #9bb8ff; }

/* The devices: the widget behind, Today in front, the watch at its side */
.hx-stage { position: relative; min-width: 0; }
.hx-devices { position: relative; height: 650px; }
.hx-devices::before { content: ""; position: absolute; left: 50%; top: 46%; width: 560px; height: 560px; transform: translate(-50%, -50%); z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(118, 152, 255, .28), transparent 72%); }
.hx-phone { position: absolute; left: 50%; top: 10px; margin-left: -150px; z-index: 2;
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .06); }
.hx-widget { position: absolute; z-index: 1; left: calc(50% - 312px); top: 420px; width: 168px; height: 168px; padding: 16px; box-sizing: border-box; border-radius: 30px;
  display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: 2px; color: #fff;
  background: linear-gradient(160deg, rgba(42, 56, 96, .92), rgba(22, 30, 54, .92)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px -24px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transform: rotate(-5deg); }
.hw-top { display: flex; align-items: center; justify-content: space-between; }
.hw-top img { width: 18px; height: 18px; border-radius: 5px; }
.hw-big { font-family: var(--font-round); font-size: 2.75rem; font-weight: 750; line-height: 1; letter-spacing: -.02em; color: #9bb8ff; font-variant-numeric: tabular-nums; }
.hw-cap { justify-self: end; font-size: .8125rem; font-weight: 600; color: #c6cfe1; }
.hw-next { align-self: end; display: grid; font-size: .8125rem; font-weight: 600; line-height: 1.25; }
.hw-next small { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #ffb454; }
.hx-watch { --w: 176px; position: absolute; z-index: 3; left: calc(50% + 92px); top: 330px; margin: 0; transform: rotate(3deg); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .7)); }
.hx-watch .wa { opacity: 1; transform: none; transition: none; }
.hx-watch .wa-scroll { transition: none; }
.hx-watch .wa-ring .xs { display: grid; }
.hx-watch .wa-ring .xs s { text-decoration: none; }

/* Today on iPhone, as TodayView draws it */
.hx-phone .mdev-screen { font-size: 13px; }
.td-nav { display: flex; justify-content: space-between; padding: 0 14px; }
.td-nav .mdev-btn { width: 34px; height: 34px; }
.td-nav .mdev-btn svg { width: 17px; height: 17px; }
.td-navr { display: flex; gap: 8px; }
.td-title { padding: 6px 18px 8px; font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--a-ink); }
.td-card { margin: 0 12px; padding: 12px 14px 6px; border-radius: 18px; background: color-mix(in srgb, var(--a-acc) 13%, var(--a-cell)); color: var(--a-ink); }
.td-route { display: block; font-size: 12px; color: var(--a-ink2); }
.td-stage { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.15; }
.td-stage b { font-family: var(--font-round); font-size: 30px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.td-strip { display: flex; align-items: center; gap: 6px; height: 12px; margin: 9px 0 6px; color: var(--a-ink2); }
.td-o { flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.td-line { position: relative; flex: 1; height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--a-ink2) 30%, transparent); }
.td-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 3%; border-radius: inherit; background: var(--a-acc); }
.td-st, .td-pt { position: absolute; top: 50%; border-radius: 50%; }
.td-st { width: 8px; height: 8px; margin: -4px 0 0 -4px; box-sizing: border-box; border: 1.5px solid var(--a-ink2); background: color-mix(in srgb, var(--a-acc) 13%, var(--a-cell)); }
.td-dep { left: 77%; } .td-arr { left: 78.5%; }
.td-pt { left: 3%; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--a-amber, #c77700); box-shadow: 0 0 0 2px color-mix(in srgb, var(--a-acc) 13%, var(--a-cell)); }
.td-house svg { width: 11px; height: 11px; }
.td-legend { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; font-size: 10.5px; color: var(--a-ink2); }
.td-legend span { display: grid; }
.td-legend span:nth-child(2) { text-align: center; }
.td-legend span:nth-child(3) { text-align: right; }
.td-legend b { font-weight: 600; color: var(--a-ink); }
.td-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 0; border-top: 1px solid var(--a-line); }
.td-legend + .td-row { margin-top: 8px; }
.td-row .g-chev { width: 11px; height: 11px; color: var(--a-ink2); }
.td-g { display: grid; place-items: center; width: 26px; height: 26px; }
.td-ring svg { width: 24px; height: 24px; transform: rotate(-90deg); }
.td-ring circle { fill: none; stroke-width: 5; }
.td-ring .rt { stroke: color-mix(in srgb, var(--a-ink2) 28%, transparent); }
.td-ring .rf { stroke: var(--a-acc); stroke-dasharray: 77 100; }
.td-ring .rr { stroke: var(--a-red); stroke-dasharray: 4 100; stroke-dashoffset: -77; }
.td-t { display: grid; gap: 1px; min-width: 0; }
.td-t b { font-size: 13px; font-weight: 600; line-height: 1.25; }
.td-t small { font-size: 11.5px; color: var(--a-ink2); }
.td-t .td-red { display: flex; align-items: center; gap: 4px; color: var(--a-red); }
.td-red svg { width: 11px; height: 11px; flex: none; }
.td-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--a-amber, #c77700); }
.td-sh { display: flex; align-items: center; gap: 6px; margin: 14px 18px 6px; font-size: 13px; font-weight: 600; color: var(--a-ink2); }
.td-sh .td-dot { width: 7px; height: 7px; }
.td-list { margin: 0 12px; border-radius: 14px; background: var(--a-cell); }
.td-step { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 12px; }
.td-step + .td-step { border-top: 1px solid var(--a-line); }
.td-c { width: 20px; height: 20px; margin-top: 1px; box-sizing: border-box; border-radius: 50%; border: 1.8px solid var(--a-ink2); }
.td-step > span { display: grid; gap: 2px; min-width: 0; }
.td-step b { font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--a-ink); }
.td-step small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 11px; color: var(--a-ink2); }
.td-pill { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 99px; font-style: normal; font-weight: 600; color: var(--a-red);
  background: color-mix(in srgb, var(--a-red) 14%, transparent); }
.td-pill svg { width: 10px; height: 10px; }
.td-tabs { position: absolute; left: 10px; right: 10px; bottom: 14px; display: flex; gap: 6px; align-items: center; }
.td-bar { flex: 1; display: flex; justify-content: space-around; padding: 6px 4px; border-radius: 99px; background: color-mix(in srgb, var(--a-cell) 86%, transparent);
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .35), inset 0 0 0 1px var(--a-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.td-bar > span { display: grid; justify-items: center; gap: 1px; color: var(--a-ink2); font-size: 8.5px; font-weight: 600; }
.td-bar > span.on { color: var(--a-acc); }
.td-bar svg { width: 17px; height: 17px; }
.td-search { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--a-ink);
  background: color-mix(in srgb, var(--a-cell) 86%, transparent); box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .35), inset 0 0 0 1px var(--a-line); }
.td-search svg { width: 17px; height: 17px; }
/* The phone draws the app in its dark appearance under the night sky */
.hx .app-ui { --a-bg: #000000; --a-cell: #1c1c1e; --a-ink: #ffffff; --a-ink2: #aeb4c2; --a-line: rgba(120, 120, 128, .36); --a-acc: #88abff;
  --a-on-acc: #0b1220; --a-amber: #ffb454; --a-red: #ff8a80; --a-green: #5fd398; --a-fill: rgba(120, 120, 128, .3); }

/* The route along the foot: the page's four parts, the house at dawn */
.hx-route { position: relative; z-index: 2; margin-top: clamp(28px, 4vw, 48px); }
.hxr-track { display: flex; align-items: center; gap: 10px; height: 26px; color: var(--ink-3); }
.hxr-o { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.hxr-line { position: relative; flex: 1; height: 6px; border-radius: 99px; background: rgba(163, 174, 196, .28); transform-origin: 0 50%; }
.hxr-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 4%; border-radius: inherit; background: #9bb8ff; }
.hxr-house { flex: none; color: #ffc98a; }
.hxr-house svg { width: 26px; height: 26px; }
.hxr-list { list-style: none; margin: -26px 36px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hxr { position: relative; min-width: 0; }
.hxr a { display: grid; align-content: start; gap: 4px; padding: 42px 8px 10px 0; border-radius: 12px; color: var(--ink); text-decoration: none; }
.hxr a:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.hxr-mk { position: absolute; left: 0; top: 4px; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; border: 3px solid var(--ink-3); background: #0d1529; }
.hxr-before .hxr-mk { top: 8px; left: 3px; width: 11px; height: 11px; border-width: 2.5px; }
.hxr-today .hxr-mk { border-color: #ffb454; background: #ffb454; box-shadow: 0 0 0 6px rgba(255, 180, 84, .22); }
.hxr-k { font-family: var(--font-round); font-size: .875rem; font-weight: 700; color: var(--ink-2); }
.hxr-date { margin-left: 6px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hxr strong { font-family: var(--font-round); font-size: 1.0625rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }

/* Once, on arrival: the copy rises, the devices settle, the route draws itself to the house */
@keyframes hx-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes hx-rise-r { from { opacity: 0; transform: translateY(30px) rotate(-4deg); } to { opacity: 1; transform: rotate(-4deg); } }
@keyframes hx-rise-w { from { opacity: 0; transform: translateY(30px) rotate(3deg); } to { opacity: 1; transform: rotate(3deg); } }
@keyframes hx-draw { from { transform: scaleX(0); } to { transform: none; } }
@keyframes hx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hx-pop { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: none; } }
.hx-copy > * { animation: hx-rise .8s var(--ease-x) both; }
.hx-copy > :nth-child(2) { animation-delay: .06s; } .hx-copy > :nth-child(3) { animation-delay: .14s; }
.hx-copy > :nth-child(4) { animation-delay: .22s; } .hx-copy > :nth-child(5) { animation-delay: .3s; }
.hx-phone { animation: hx-rise 1s var(--ease-x) .2s both; }
.hx-widget { animation: hx-rise-r 1s var(--ease-x) .38s both; }
.hx-watch { animation: hx-rise-w 1s var(--ease-x) .5s both; }
.hxr-line { animation: hx-draw 1.5s var(--ease-x) .55s both; }
.hxr-house { animation: hx-fade .6s ease 1.5s both; }
.hxr { animation: hx-fade .7s ease both; }
.hxr:nth-child(1) { animation-delay: .8s; } .hxr:nth-child(2) { animation-delay: 1s; } .hxr:nth-child(3) { animation-delay: 1.2s; } .hxr:nth-child(4) { animation-delay: 1.4s; }
.hxr-today .hxr-mk { animation: hx-pop .7s var(--ease-x) 1.1s both; }

@media (max-width: 1060px) {
  .hx-grid { grid-template-columns: minmax(0, 1fr); }
  .hx-copy { max-width: 40rem; }
  .hx-devices { height: 640px; }
}
@media (max-width: 860px) {
  .hxr-track { position: absolute; left: 0; top: 0; bottom: 0; width: 26px; height: auto; flex-direction: column; }
  .hxr-line { width: 6px; height: auto; transform-origin: 50% 0; }
  .hxr-fill { width: auto; right: 0; height: 5%; }
  .hxr-list { margin: 0; padding: 4px 0 30px 44px; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hxr a { padding: 6px 0 14px; }
  .hxr-mk { left: -38px; top: 6px; }
  .hxr-before .hxr-mk { left: -34px; top: 10px; }
  @keyframes hx-draw { from { transform: scaleY(0); } to { transform: none; } }
}
@media (max-width: 560px) {
  .hx-devices { height: 560px; }
  .hx-phone { transform-origin: 50% 0; scale: .86; margin-left: -150px; }
  .hx-widget { left: 0; top: 40px; width: 132px; height: 132px; padding: 12px; border-radius: 24px; }
  .hw-big { font-size: 2.125rem; }
  .hw-next { display: none; }
  .hx-watch { --w: 132px; left: auto; right: -6px; top: 330px; }
}

/* ---------- Five numbers ---------- */
.proof { padding: clamp(40px, 5vw, 64px) 0; border-bottom: 1px solid var(--line); }
.proof-title { margin: 0 auto clamp(28px, 4vw, 44px); text-align: center; font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--ink-2); text-wrap: balance; }
.proof-title b { font-family: var(--font-round); font-weight: 760; color: var(--blue); }
.proof-list { --wrap: 60rem; --num: clamp(2.5rem, 4.4vw, 3.5rem); --gap: 24px; list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.proof-list li { position: relative; display: grid; align-content: start; justify-items: center; gap: 8px; padding: 0 8px; text-align: center; }
.proof-list b { font-family: var(--font-round); font-size: var(--num); font-weight: 760; line-height: 1; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.proof-list li > span { font-size: .9375rem; line-height: 1.4; color: var(--ink-2); max-width: 13em; text-wrap: balance; }
.proof-list .nw { white-space: nowrap; }
/* 09:41: no lines between the numbers, so they read as one time; between the 9 and the 4 a colon of two dots, level
   with the numbers and in the middle of the gap (decorative, never read). */
.proof-list li:nth-child(3)::before { content: ""; position: absolute; left: calc(var(--gap) / -2); top: calc(var(--num) * .27); width: calc(var(--num) * .13); height: calc(var(--num) * .13); border-radius: 50%; background: var(--ink); box-shadow: 0 calc(var(--num) * .36) 0 var(--ink); transform: translateX(-50%); }
@media (forced-colors: active) { .proof-list li:nth-child(3)::before { forced-color-adjust: none; background: CanvasText; box-shadow: 0 calc(var(--num) * .36) 0 CanvasText; } }
@media (max-width: 640px) { .proof-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; } .proof-list li:nth-child(3)::before { content: none; } }

/* ---------- How it works: the loose ends, sorted into the plan ---------- */
.how { position: relative; padding: clamp(80px, 9vw, 128px) 0; overflow-x: clip; }
.how-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.how-copy { position: sticky; top: 96px; }
.how-copy h2 { margin: 0; font-size: clamp(2rem, 3.7vw, 3rem); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.how-copy h2 span { display: block; color: var(--blue); }
.how-copy .lede { margin: 22px 0 28px; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.how-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); }
.how-steps strong { color: var(--ink); }
.hs-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-family: var(--font-round); font-weight: 700; color: var(--blue);
  background: var(--blue-soft); }
.how-vs { margin: 32px 0 0; padding: 18px 20px; border-radius: 18px; background: var(--bg-sunk); font-size: 1.0625rem; line-height: 1.45; }
.how-vs span { color: var(--ink-2); }
.how-vs strong { color: var(--ink); }
.how .planner { animation: none; }
@media (max-width: 980px) { .how-grid { grid-template-columns: minmax(0, 1fr); } .how-copy { position: static; } }

/* The loose ends: the sample's steps scattered over the card, then sorted into it (site.js, once in view) */
.how-sc { min-width: 0; }
.how-sc .planner-wrap { position: relative; }
.sort-field { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.lend { position: absolute; left: 0; top: 0; max-width: 230px; padding: 7px 12px; border-radius: 12px; font-size: .8125rem; font-weight: 600; line-height: 1.25; color: var(--ink);
  background: var(--bg-raised); box-shadow: 0 1px 2px rgba(15, 27, 51, .08), 0 12px 28px -12px rgba(15, 27, 51, .4), inset 0 0 0 1px var(--line);
  transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; visibility: hidden;
  transition: transform .95s var(--ease-x) calc(var(--k, 0) * 70ms), opacity .5s ease calc(var(--k, 0) * 40ms), filter .6s ease, visibility 0s linear .6s; }
.lend.law::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--red); vertical-align: 1px; }
.p-s1 .lend { opacity: 1; visibility: visible; transition-delay: calc(var(--k, 0) * 40ms), calc(var(--k, 0) * 40ms), 0s, 0s; }
.p-s2 .lend.out { opacity: 0; filter: blur(5px); transform: translate(var(--x), calc(var(--y) + 30px)) rotate(var(--r)) scale(.92); transition-delay: 0s; }
.p-s3 .lend:not(.out) { transform: translate(var(--tx), var(--ty)) rotate(0deg) scale(.94); }
.p-s4 .lend { opacity: 0; transition: opacity .35s ease calc(var(--k, 0) * 70ms); }
.planner > * { transition: opacity .6s ease; }
.p-s1:not(.p-s3) .planner > * { opacity: .16; }
.p-s3:not(.p-s4) .planner > :not(.timeline) { opacity: .6; }
.p-s1:not(.p-s4) .timeline .step { opacity: 0; }
.p-s1:not(.p-s4) .timeline .grp-head { opacity: .25; }
.p-s4 .timeline .step { transition: opacity .45s ease calc(var(--k, 0) * 70ms); }
.p-s1 .timeline { overflow: hidden; }

/* ---------- Made for everyone: Today's card, and the settings to try on it ---------- */
.ax { padding: clamp(88px, 10vw, 136px) 0; background: var(--bg-sunk); }
.ax-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.ax-copy h2 { margin: 0; font-size: clamp(2.25rem, 4.6vw, 3.75rem); line-height: 1; letter-spacing: -.035em; }
.ax-copy .lede { margin: 20px 0 28px; }
.ax-ctl { display: grid; gap: 18px; padding: 20px; border-radius: 22px; background: var(--bg-raised); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); }
.ax-ctl[hidden] { display: none; }
.ax-size { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; }
.ax-size label { font-weight: 600; }
.ax-size output { min-width: 11.5em; text-align: right; font-size: .9375rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ax-size input { width: 100%; min-height: 44px; accent-color: var(--blue); }
.ax-toggles { display: flex; flex-wrap: wrap; gap: 10px; }
.ax-t { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px 8px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font: 600 .9375rem/1.2 var(--font); cursor: pointer; text-align: left; }
.ax-t i { position: relative; flex: none; width: 36px; height: 22px; border-radius: 99px; background: color-mix(in srgb, var(--ink-3) 45%, transparent); transition: background .2s; }
.ax-t i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .25s var(--ease-x); }
.ax-t[aria-pressed="true"] { border-color: var(--blue); }
.ax-t[aria-pressed="true"] i { background: var(--green); }
.ax-t[aria-pressed="true"] i::after { transform: translateX(14px); }
.ax-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.ax-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--ink-2); line-height: 1.45; }
.ax-list svg { width: 22px; height: 22px; color: var(--blue); }
.ax-more { margin: 24px 0 0; }

.ax-stage { margin: 0; position: sticky; top: 96px; display: grid; gap: 18px; }
/* The frame is an iPhone's screen: Today's hero and the first rows of Ready now, in the app's points (15 at the usual
   size, scaled as Larger Text scales). What no longer fits runs off its foot, as on the phone; the frame keeps its height,
   so the page never moves under the controls. Without the script it follows the page's appearance. */
.ax-frame { --s: 1; height: clamp(410px, 37vw, 470px); overflow: hidden; padding: clamp(16px, 2.4vw, 26px) clamp(14px, 2.4vw, 26px) 0; box-sizing: border-box;
  border-radius: 30px; background: var(--a-bg); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); transition: background .3s; }
#ax-card.ax-light { --a-bg: #f2f2f7; --a-cell: #ffffff; --a-ink: #0f1b33; --a-ink2: #5a6478; --a-line: rgba(60, 60, 67, .16); --a-acc: #1a50ba;
  --a-amber: #8f4a00; --a-red: #b42318; }
#ax-card.ax-dark { --a-bg: #000000; --a-cell: #1c1c1e; --a-ink: #ffffff; --a-ink2: #aeb4c2; --a-line: rgba(120, 120, 128, .36); --a-acc: #88abff;
  --a-amber: #ffb454; --a-red: #ff8a80; }
.ax-card { width: 100%; max-width: 440px; margin: 0 auto; font-size: calc(var(--s) * 15px); line-height: 1.25; color: var(--a-ink); }
.ax-hero { padding: calc(var(--s) * 14px) calc(var(--s) * 16px) calc(var(--s) * 6px); border-radius: 22px;
  background: color-mix(in srgb, var(--a-acc) 13%, var(--a-cell)); transition: background .3s; }
.ax-route { display: block; font-size: .87em; color: var(--a-ink2); }
.ax-stage-t { margin: 0; font-size: 1.2em; font-weight: 600; line-height: 1.15; }
.ax-stage-t b { font-family: var(--font-round); font-size: 1.85em; font-weight: 700; letter-spacing: -.02em; }
.ax-strip { display: flex; align-items: center; gap: .45em; height: 1em; margin: .7em 0 .45em; color: var(--a-ink2); }
.ax-o { flex: none; width: .35em; height: .35em; border-radius: 50%; background: currentColor; }
.ax-line { position: relative; flex: 1; height: .3em; border-radius: 99px; background: color-mix(in srgb, var(--a-ink2) 30%, transparent); }
.ax-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 3%; border-radius: inherit; background: var(--a-acc); }
.ax-st, .ax-pt { position: absolute; top: 50%; border-radius: 50%; box-sizing: border-box; }
.ax-st { width: .6em; height: .6em; margin: -.3em 0 0 -.3em; border: .12em solid var(--a-ink2); background: color-mix(in srgb, var(--a-acc) 13%, var(--a-cell)); }
.ax-dep { left: 77%; } .ax-arr { left: 78.6%; }
.ax-pt { left: 3%; width: .75em; height: .75em; margin: -.375em 0 0 -.375em; background: var(--a-amber); box-shadow: 0 0 0 .14em color-mix(in srgb, var(--a-acc) 13%, var(--a-cell)); }
.ax-house svg { width: .8em; height: .8em; }
.ax-legend { display: grid; grid-template-columns: 1fr auto 1fr; gap: .4em; font-size: .78em; color: var(--a-ink2); }
.ax-legend span { display: grid; }
.ax-legend span:nth-child(2) { text-align: center; } .ax-legend span:nth-child(3) { text-align: right; }
.ax-legend b { font-weight: 600; color: var(--a-ink); }
.ax-row { display: grid; grid-template-columns: 1.9em minmax(0, 1fr) auto; gap: .6em; align-items: center; padding: .65em 0; border-top: 1px solid var(--a-line); }
.ax-legend + .ax-row { margin-top: .6em; }
.ax-g { position: relative; display: grid; place-items: center; width: 1.9em; height: 1.9em; }
.ax-ring svg:not(.ax-mark) { width: 1.75em; height: 1.75em; transform: rotate(-90deg); }
.ax-ring circle { fill: none; stroke-width: 5; }
.ax-ring .rt { stroke: color-mix(in srgb, var(--a-ink2) 28%, transparent); }
.ax-ring .rf { stroke: var(--a-acc); stroke-dasharray: 77 100; }
.ax-ring .rr { stroke: var(--a-red); stroke-dasharray: 4 100; stroke-dashoffset: -77; }
.ax-mark { position: absolute; width: .9em; height: .9em; color: var(--a-red); opacity: 0; }
.ax-t2 { display: grid; gap: .1em; min-width: 0; }
.ax-t2 b { font-weight: 600; }
.ax-t2 small { font-size: .87em; color: var(--a-ink2); }
.ax-t2 .ax-red { display: flex; align-items: center; gap: .3em; color: var(--a-red); }
.ax-red svg { flex: none; width: .9em; height: .9em; }
.ax-dot { width: .65em; height: .65em; border-radius: 50%; background: var(--a-amber); }
.ax-chev svg { width: .8em; height: .8em; color: var(--a-ink2); }
.ax-sh { display: flex; align-items: center; gap: .45em; margin: 1.1em .3em .5em; font-size: .87em; font-weight: 600; color: var(--a-ink2); }
.ax-sh .ax-dot { width: .5em; height: .5em; }
.ax-steps { border-radius: 16px; background: var(--a-cell); }
.ax-step { display: grid; grid-template-columns: 1.35em minmax(0, 1fr); gap: .65em; align-items: start; padding: .7em .9em; }
.ax-step + .ax-step { border-top: 1px solid var(--a-line); }
.ax-c { width: 1.3em; height: 1.3em; box-sizing: border-box; border-radius: 50%; border: .12em solid var(--a-ink2); }
.ax-step .ax-t2 small { display: flex; flex-wrap: wrap; align-items: center; gap: .25em .6em; }
.ax-pill { display: inline-flex; align-items: center; gap: .25em; padding: .05em .5em; border-radius: 99px; font-style: normal; font-weight: 600; color: var(--a-red);
  background: color-mix(in srgb, var(--a-red) 14%, transparent); }
.ax-pill svg { width: .85em; height: .85em; }
/* At the accessibility sizes the rows put the symbol above the words, the legend goes one station a line, the step's
   tick stands above its title and its pill and date go one under the other (AdaptiveRow, RouteLegend, StepRow.meta) */
.ax-big .ax-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.ax-big .ax-g { grid-column: 1; grid-row: 1; justify-self: start; }
.ax-big .ax-t2 { grid-column: 1 / -1; grid-row: 2; }
.ax-big .ax-chev { grid-column: 2; grid-row: 1; }
.ax-big .ax-legend { grid-template-columns: minmax(0, 1fr); gap: .15em; }
.ax-big .ax-legend span { display: block; text-align: left !important; }
.ax-big .ax-step { grid-template-columns: minmax(0, 1fr); gap: .45em; }
.ax-big .ax-step .ax-t2 small { flex-direction: column; align-items: flex-start; }
/* Increase Contrast: the strip and the ring thicken, the stations and pills take an outline, secondary words darken */
#ax-card.ax-contrast { --a-ink2: #3a4154; }
#ax-card.ax-dark.ax-contrast { --a-ink2: #d5d9e2; }
.ax-contrast .ax-line { height: .42em; }
.ax-contrast .ax-st { border-color: var(--a-ink); border-width: .16em; }
.ax-contrast .ax-pt { box-shadow: 0 0 0 .14em var(--a-ink); }
.ax-contrast .ax-ring circle { stroke-width: 6.5; }
.ax-contrast .ax-row, .ax-contrast .ax-step + .ax-step { border-top-color: var(--a-ink2); }
.ax-contrast .ax-c { border-color: var(--a-ink); }
.ax-contrast .ax-pill, .ax-shape .ax-pill { box-shadow: inset 0 0 0 .09em currentColor; }
/* Differentiate Without Colour: the ring carries a mark, its overdue share is dashed */
.ax-shape .ax-mark { opacity: 1; }
/* the dashes stay inside the overdue share: dash, gap, dash, then nothing to the end of the circle */
.ax-shape .ax-ring .rr { stroke-dasharray: 1.3 1.2 1.3 100; }
.ax-vo { padding: 18px 20px; border-radius: 20px; background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line); font-size: .9375rem; color: var(--ink-2); }
.ax-vo-h { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.ax-vo-h svg { flex: none; width: 20px; height: 20px; color: var(--blue); }
.ax-vo ol { margin: 10px 0 0; padding-left: 1.4em; display: grid; gap: 6px; }
@media (max-width: 980px) { .ax-grid { grid-template-columns: minmax(0, 1fr); } .ax-stage { position: static; } }
@media (max-width: 560px) { .ax-size { grid-template-columns: minmax(0, 1fr) auto; } .ax-size input { grid-column: 1 / -1; grid-row: 2; } .ax-size output { min-width: 0; } }

/* ---------- Private by design ---------- */
.pv2 { padding: clamp(88px, 10vw, 136px) 0; }
.pv2-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.pv2-copy h2 { margin: 0; font-size: clamp(2.125rem, 4.2vw, 3.5rem); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.pv2-copy h2 span { display: block; }
.pv2-copy h2 .pv2-g { color: var(--green); }
.pv2-copy .lede { margin: 20px 0 26px; }
.pv2-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.pv2-facts li { display: grid; gap: 2px; padding-left: 18px; border-left: 3px solid color-mix(in srgb, var(--green) 55%, transparent); }
.pv2-facts strong { font-size: 1.0625rem; }
.pv2-facts span { color: var(--ink-2); line-height: 1.5; }
@media (max-width: 980px) { .pv2-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- The pass: two cards ---------- */
.pass2 { padding: clamp(88px, 10vw, 136px) 0; background: linear-gradient(180deg, var(--bg), var(--bg-sunk)); }
.pass2-head { max-width: 58rem; margin: 0 auto 44px; text-align: center; }
.pass2-head h2 { margin: 0; font-size: clamp(2.25rem, 4.6vw, 3.75rem); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.pass2-head h2 > span { display: block; color: var(--blue); }
.pass2-head h2 .nw { white-space: nowrap; }
.pass2-head .lede { max-width: 40rem; margin: 20px auto 22px; }
.pass2-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pass2-pills li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line); font-size: .9375rem; font-weight: 600; }
.pass2-pills svg { width: 17px; height: 17px; color: var(--green); }
.pass2-cards { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 22px; align-items: stretch; max-width: 1000px; margin: 0 auto; }
.p2c { position: relative; overflow: hidden; padding: clamp(24px, 3vw, 36px); border-radius: 30px; background: var(--bg-raised); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); }
.p2c-k { margin: 0 0 6px; font-size: .875rem; font-weight: 700; letter-spacing: .02em; color: var(--ink-3); }
.p2c h3 { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--font-round); font-size: clamp(1.75rem, 3vw, 2.25rem); letter-spacing: -.02em; }
.p2c h3 img { width: 34px; height: 34px; border-radius: 9px; }
.p2c-sub { margin: 8px 0 20px; color: var(--ink-2); }
.p2c-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.p2c-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; line-height: 1.45; color: var(--ink-2); }
.p2c-list svg { width: 18px; height: 18px; margin-top: 3px; color: var(--green); }
.p2c-list strong { color: var(--ink); font-weight: 600; }
.p2c-pass { --bg-raised: #0d1833; --ink: #f3f6fc; --ink-2: #c6cfe1; --ink-3: #a3aec4; --line: rgba(255, 255, 255, .14); --green: #6fdca4; color: var(--ink);
  background: radial-gradient(80% 60% at 100% 0%, rgba(46, 107, 224, .45), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(255, 176, 84, .16), transparent 70%), #0b1430;
  box-shadow: 0 40px 80px -40px rgba(11, 20, 48, .8), inset 0 0 0 1px rgba(255, 255, 255, .1); }
.p2c-pass .p2c-k { color: #ffc98a; }
.p2c-pass .btn-primary { background: #f3f6fc; color: #08101f; }
.p2c-cta { margin-top: 26px; }
.p2c-offer { display: inline-block; margin: 24px 0 0; padding: 8px 14px; border-radius: 999px; background: rgba(255, 201, 138, .12); box-shadow: inset 0 0 0 1px rgba(255, 201, 138, .4); color: #ffc98a; font-size: .9375rem; font-weight: 700; line-height: 1.35; }
.p2c-offer + .p2c-cta { margin-top: 16px; }
.p2c-offer[hidden], .close3-offer[hidden] { display: none; }
.p2c-note { margin: 16px 0 0; font-size: .875rem; color: var(--ink-3); line-height: 1.5; }
.pass2.in-view .p2c-pass .mp-sheen { animation: sheen 2.4s var(--ease-x) .5s; }
.p2c-free { display: flex; flex-direction: column; }
.p2c-free .p2c-why { margin: auto 0 0; padding: 16px 18px; background: var(--bg-sunk); box-shadow: none; }
.p2c-free .p2c-list { margin-bottom: 28px; }
@media (max-width: 860px) { .pass2-cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- The close: the night again, the house at dawn ---------- */
.close3 { position: relative; overflow: hidden; isolation: isolate; padding: clamp(96px, 11vw, 144px) 0 40px; text-align: center; color: #f3f6fc;
  --ink: #f3f6fc; --ink-2: #c6cfe1; --ink-3: #a3aec4; --line: rgba(255, 255, 255, .2); --blue: #9bb8ff;
  background: radial-gradient(50% 46% at 50% 108%, rgba(255, 176, 84, .4), transparent 72%), linear-gradient(180deg, #08101f 0%, #0c1530 60%, #1a2140 100%); }
.close3 .icon-big { width: 96px; height: 96px; border-radius: 22px; margin: 0 auto 26px; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .8); }
.close3 h2 { margin: 0; font-size: clamp(2.25rem, 5.2vw, 4.25rem); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.close3 h2 span { display: block; padding-bottom: .16em; margin-bottom: -.16em; background: linear-gradient(92deg, #9bb8ff 0%, #c2b6ff 46%, #ffc98a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (forced-colors: active) { .close3 h2 span { -webkit-text-fill-color: currentColor; background: none; } }
.close3 p { margin: 20px auto 30px; max-width: 34em; font-size: 1.125rem; color: var(--ink-2); }
.close3 .cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.close3 .btn-primary { background: #f3f6fc; color: #08101f; }
.close3 .btn-secondary { color: var(--ink); border-color: var(--line); }
.close3 .close3-terms { margin: 16px auto 0; font-size: .9375rem; color: var(--ink-3); }
.close3 .close3-offer { margin-top: 6px; color: #ffc98a; font-weight: 600; }
.close3 :focus-visible { outline-color: #9bb8ff; }
.close3-route { display: flex; align-items: center; gap: 10px; width: min(760px, 100% - 64px); height: 28px; margin: 64px auto 0; color: var(--ink-3); }
.c3-o { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.c3-line { position: relative; flex: 1; height: 6px; border-radius: 99px; background: rgba(163, 174, 196, .28); }
.c3-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #9bb8ff, #ffc98a); transform-origin: 0 50%; }
.c3-st { position: absolute; top: 50%; left: 76%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; box-sizing: border-box; border: 2.5px solid #ffc98a; background: #18203e; }
.c3-st2 { left: 79%; }
.c3-house { flex: none; color: #ffc98a; filter: drop-shadow(0 0 14px rgba(255, 176, 84, .7)); }
.c3-house svg { width: 30px; height: 30px; }
.js .close3:not(.in-view) .c3-fill { transform: scaleX(0); }
.close3 .c3-fill { transition: transform 1.8s var(--ease-x) .2s; }
.close3-bye { margin: 18px 0 0; font-family: var(--font-round); font-size: 1.25rem; font-weight: 700; color: #ffc98a; }

/* A stop's headline in two beats: the question or the claim, then the answer in the accent */
.stop-h2 { display: block; color: var(--blue); }

/* The narrowest phones: the icon alone names Rootstep in the header (the link keeps its name), so the menu never covers it */
@media (max-width: 359px) { .site-header .brand span { display: none; } }

/* The hero is the first screen (17 Oct, round 3): the words and the three devices fill the window under the header,
   whole, and scale down in a short window. The route map sits at the window's foot when the window holds it too, and
   starts at the fold when it does not, so it is never cut. */
@media (min-width: 1061px) {
  .hx { --k: 1; min-height: 100svh; box-sizing: border-box; display: flex; flex-direction: column; padding: 65px 0 clamp(20px, 3vh, 36px); }
  .hx-grid { flex: 1 0 auto; box-sizing: border-box; padding-block: clamp(12px, 2.5vh, 32px); }
  .hx-route { margin-top: clamp(16px, 2.5vh, 32px); }
  .hx-devices { zoom: var(--k); }
}
@media (min-width: 1061px) and (max-height: 979px) { .hx-grid { min-height: calc(100svh - 65px); } }
@media (min-width: 1061px) and (max-height: 770px) { .hx { --k: .9; } }
@media (min-width: 1061px) and (max-height: 700px) { .hx { --k: .8; } }
@media (min-width: 1061px) and (max-height: 630px) { .hx { --k: .72; } }

/* The phone's list scrolls under the floating tab bar behind iOS 26's scroll edge: the rows fade out before the bar. */
.td-tabs { z-index: 2; }
.td-tabs::before { content: ""; position: absolute; z-index: -1; left: -10px; right: -10px; bottom: -14px; height: 88px; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--a-bg) 58%); }

/* The sample plan's own tasks: the app's "Add a task" (a title and a deadline counted from the move dates) in one row
   under the list; a task joins "Your tasks" in date order and moves with the moving day. */
.own-add { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 12px 0 0; padding: 8px; border-radius: 18px;
  background: var(--bg-sunk); border: 1px dashed color-mix(in srgb, var(--ink-3) 45%, transparent); }
.own-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--blue);
  background: color-mix(in srgb, var(--blue) 14%, transparent); }
.own-ic svg { width: 18px; height: 18px; }
.own-t { grid-column: 2 / -1; min-width: 0; }
.own-w { position: relative; grid-column: 2; min-width: 0; }
.own-w::after { content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; pointer-events: none;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: translateY(-70%) rotate(45deg); }
.own-add input, .own-add select { box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg-raised); color: var(--ink); font: inherit; font-size: .9375rem; }
.own-add select { padding-right: 36px; -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis; }
.own-add input::placeholder { color: var(--ink-3); opacity: 1; }
.own-add input:focus-visible, .own-add select:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.own-btn { grid-column: 3; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; padding: 0 18px 0 14px; border: 0; border-radius: 999px;
  background: var(--blue); color: var(--on-blue); font: inherit; font-size: .9375rem; font-weight: 700; cursor: pointer; transition: filter .2s, transform .2s var(--spring); }
.own-btn:hover { filter: brightness(1.1); }
.own-btn:active { transform: scale(.97); }
.own-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.own-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
@media (max-width: 560px) { .own-add { grid-template-columns: minmax(0, 1fr) auto; } .own-ic { display: none; } .own-t { grid-column: 1 / -1; } .own-w { grid-column: 1; } .own-btn { grid-column: 2; width: 44px; padding: 0; justify-content: center; }
  .own-btn svg { width: 20px; height: 20px; }
  .own-add select { padding: 10px 28px 10px 10px; } .own-w::after { right: 12px; }
  .own-bt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
@media (forced-colors: active) { .own-btn { border: 1px solid ButtonText; } .own-w::after { border-color: ButtonText; } }
.tag-own { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink-2); }
.tl-own, .tl-over { display: inline-flex; align-items: center; gap: 4px; }
.tl-own { font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
.tl-over { color: var(--red); }
.tl-own svg, .tl-over svg { flex: none; }

/* The Pause animations switch: the Reduce Motion rules above, for html[data-motion="off"] (build.py). */
html[data-motion="off"] { scroll-behavior: auto; }
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { transition: none !important; animation: none !important; }
html.js[data-motion="off"] .reveal { opacity: 1; transform: none; }
html.js[data-motion="off"] .reveal h2 { clip-path: none; transform: none; }
html[data-motion="off"] .plabel { clip-path: none !important; }
html[data-motion="off"] .plabel .pl-sheet { transform: none !important; }
html[data-motion="off"] .tg-thread > li { opacity: 1 !important; transform: none !important; max-height: none !important; }
html[data-motion="off"] .tg-stage .tg-typing { display: none; }
html[data-motion="off"] .lt-scan { display: none; }
html[data-motion="off"] #sc-letter .lt-found { display: none; }
html[data-motion="off"] #sc-budget .bg-new { display: none; }
html[data-motion="off"] .mp-sheen { display: none; }
html.js[data-motion="off"] .pass-sec .pt-row, html.js[data-motion="off"] .pass-sec .pt-card { opacity: 1; transform: none; }
html[data-motion="off"] .pt-hp .mp-sheen { display: none; }
html[data-motion="off"] .ip-tap { display: none; }
html[data-motion="off"] .ph-st, html[data-motion="off"] .ph-pt, html[data-motion="off"] .pr-fill, html[data-motion="off"] .ph-ring .pr-check { transition: none; }
html[data-motion="off"] .tap { display: none; }
html.js[data-motion="off"] .ch-head.reveal:not(.in-view) .cr-span { transform: none; }
html.js[data-motion="off"] .ch-head.reveal:not(.in-view) .cr-pt { left: calc(var(--b) * 100%); }