:root {
  --paper: #f7f2e8;
  --surface: #fffdf8;
  --forest: #2f5244;
  --brass: #976c29;
  --shadow: 0 2px 6px #1b1a170d,0 14px 32px #1b1a1712;
  --ink: #1b1a17;
  --secondary: #625c52;
  --line: #dcd5c7;
  --white: #fff;
  --ease: cubic-bezier(.23,1,.32,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; scroll-padding-top: 100px; }
body { margin: 0; font-family: ui-rounded,"SF Pro Rounded","SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; color: var(--ink); background: var(--paper); font-size: 16px; line-height: 1.6; letter-spacing: -.02em; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button,input { font: inherit; }
button,a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; height: auto; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
h1,h2,h3,p,figure { margin: 0; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline: 3px solid var(--brass); outline-offset: 6px; }
.skip-link { position: fixed; top: 12px; left: 12px; padding: 10px 18px; color: white; background: var(--ink); z-index: 100; transform: translateY(-170%); }
.skip-link:focus { transform: none; }
.wrap { width: min(1232px,calc(100% - 112px)); margin-inline: auto; }
/* The owner's original floating navigation. */
.nav { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; justify-content: space-between; width: max-content; max-width: calc(100% - 32px); gap: 16px; padding: 7px 7px 7px 14px; border-radius: 999px; background: #14110d; box-shadow: 0 2px 6px #0a100c20,0 12px 32px #0a100c26; font-family: ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,sans-serif; }
.nav .brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: #fff; font-weight: 700; font-size: .98rem; letter-spacing: -.022em; padding-right: 6px; white-space: nowrap; flex: none; }
.nav .brand img { width: 28px; height: 28px; border-radius: 8px; }
.nav-right { display: flex; align-items: center; gap: 3px; flex: none; }
.nav-links { display: flex; align-items: center; gap: 3px; list-style: none; margin: 0; padding: 0; }
.nav-links a,.nav-cta { display: flex; align-items: center; min-height: 44px; padding: 9px 15px; border-radius: 999px; background: #fff; text-decoration: none; font-size: .91rem; font-weight: 600; letter-spacing: -.015em; color: #14110d; transition: background-color .18s ease,transform .18s ease; }
.nav-cta { gap: 7px; padding-inline: 13px 16px; font-weight: 800; }
.nav-cta svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.nav-links a:hover,.nav-cta:hover { background: #efe8da; }
.nav-cta:active { transform: scale(.97); }
.nav a:focus-visible { outline-color: #96b8ff; }
/* A quiet introduction beside the app, grounded in the published forest palette. */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--paper); }
.desk-background { position: absolute; inset: 0 0 0 auto; z-index: -3; width: 49%; height: 100%; object-fit: cover; object-position: 72% center; }
.hero-wash { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg,var(--paper) 0 51%,#2f5244df 51%,#2f5244c4 100%); }
.hero-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; min-height: 730px; padding-block: 110px 32px; }
.hero-copy { padding-block: 30px; max-width: 550px; }
.hero-context { color: var(--forest); font-size: 14px; font-weight: 500; margin-bottom: 24px; }
.hero h1 { font-size: clamp(48px,5.3vw,76px); line-height: 1.04; letter-spacing: -.038em; font-weight: 550; }
h1 { font-size: clamp(70px,7.2vw,104px); line-height: .99; letter-spacing: -.045em; font-weight: 600; }
h1>span { color: var(--forest); white-space: nowrap; }
.hero-description { color: var(--secondary); font-size: 17px; line-height: 1.75; margin: 26px 0 30px; max-width: 365px; letter-spacing: -.015em; }
.button { display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: white; border: 1px solid var(--ink); text-decoration: none; transition: background .2s,transform .2s var(--ease); }
.button:hover { background: #343a35; transform: translateY(-2px); }
.button:active { transform: scale(.97); }
.download-button { border-radius: 14px; gap: 10px; padding: 11px 22px 12px 16px; line-height: 1.15; min-height: 65px; }
.download-button svg { width: 32px; height: 36px; stroke: none; }
.download-button span { font-size: 25px; font-weight: 550; letter-spacing: -.028em; text-align: left; }
.download-button small { display: block; font-size: 11px; line-height: 1.45; font-weight: 400; letter-spacing: .01em; }
.download-note { font-size: 12px; color: var(--secondary); margin-top: 13px; }
.hero-device-scene { position: relative; display: flex; justify-content: center; align-items: center; padding-block: 24px; }
.phone { width: 274px; padding: 5px; background: #141615; border: 2px solid #767b75; border-radius: 43px; box-shadow: 1px 4px 6px #11181230,12px 28px 32px #11181224; overflow: hidden; }
.phone img { width: 100%; border-radius: 35px; aspect-ratio: 1206/2622; object-fit: cover; }
.hero-phone { width: 260px; transform: none; box-shadow: 0 3px 6px #0c211c33,0 24px 55px #0c211c52; }
.hero-baseline-strip { background: var(--paper); border-top: 1px solid var(--line); }
.hero-baseline { display: flex; gap: 24px; justify-content: space-between; align-items: center; padding-block: 23px; font-size: 14px; color: var(--ink); }
.hero-baseline a { display: flex; align-items: center; gap: 24px; min-height: 44px; text-decoration: none; font-weight: 550; }
.hero-baseline a>span { font-size: 22px; }
.section-space { padding-block: 112px; }
.eyebrow { color: var(--brass); font-size: 13px; font-weight: 500; margin-bottom: 23px; letter-spacing: -.01em; }
h2 { font-size: clamp(36px,4.3vw,60px); line-height: 1.08; font-weight: 550; letter-spacing: -.045em; }
.section-heading h2 { font-size: clamp(34px,3.8vw,54px); }
.section-heading h2>span { color: #6e7769; }
.product-tour { display: grid; grid-template-columns: .84fr 1.16fr; gap: 72px; align-items: center; margin-top: 64px; }
.tour-navigation button { display: flex; align-items: flex-start; width: 100%; text-align: left; gap: 18px; border: 0; border-top: 1px solid var(--line); background: transparent; padding: 29px 0; cursor: pointer; color: #667067; transition: color .2s; }
.tour-navigation button:last-child { border-bottom: 1px solid var(--line); }
.tour-index { font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 3px; }
.tour-option { flex: 1; min-width: 0; }
.tour-option>strong { display: block; font-size: 22px; line-height: 1.25; font-weight: 500; letter-spacing: -.03em; }
.tour-option>.tour-description { display: grid; grid-template-rows: 0fr; opacity: 0; font-size: 14px; line-height: 1.7; margin-top: 0; max-width: 300px; color: #555f57; }
.tour-description>span { min-height: 0; overflow: hidden; }
.tour-navigation button[aria-pressed=true] .tour-description { grid-template-rows: 1fr; opacity: 1; margin-top: 16px; }
.tour-navigation button[aria-pressed=true] { color: var(--ink); }
.tour-navigation button:hover { color: var(--ink); }
.tour-arrow { font-size: 21px; line-height: 1.2; opacity: 0; }
.tour-navigation button[aria-pressed=true] .tour-arrow { opacity: 1; }
.pro-tag { font-size: 12px; line-height: 1.5; font-weight: 600; display: inline-block; vertical-align: middle; letter-spacing: 0; padding: 2px 6px; border: 1px solid currentColor; border-radius: 5px; margin-left: 7px; }
.tour-visual { background: #e4e9dd; box-shadow: var(--shadow); border-radius: 24px; padding: 26px 28px 24px; transition: background-color 320ms ease; overflow: hidden; }
.tour-visual[data-active=focus] { background: #eee5d5; }
.tour-visual[data-active=grades] { background: #e9e4ed; }
.tour-visual-top { display: flex; gap: 16px; justify-content: space-between; font-size: 12px; margin-bottom: 24px; color: #465448; }
.visual-platform { color: #616d63; }
.tour-device { display: flex; justify-content: center; padding: 0 16px 24px; }
.tour-device .phone { width: 254px; transform: rotate(-3deg); }
.tour-visual figcaption { font-size: 13px; color: #465448; text-align: center; }
.tour-screens { display: grid; overflow: hidden; border-radius: 35px; background: #f4f4f4; isolation: isolate; }
.tour-device .tour-screens img { grid-area: 1 / 1; border-radius: 0; opacity: 0; transform: translate3d(16%,0,0) scale(.985); pointer-events: none; }
.tour-device .tour-screens img[data-position=before] { transform: translate3d(-16%,0,0) scale(.985); }
.tour-device .tour-screens img[data-position=active] { opacity: 1; transform: translate3d(0,0,0) scale(1); z-index: 1; }
#screen-name,#feature-caption { display: grid; }
#screen-name>span,#feature-caption>span { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); pointer-events: none; }
#screen-name>span[data-position=before],#feature-caption>span[data-position=before] { transform: translateY(-6px); }
#screen-name>span[data-position=active],#feature-caption>span[data-position=active] { opacity: 1; transform: translateY(0); }
.tour-status { margin-top: 12px; text-align: center; color: #465448; font-size: 13px; }
.tour-instant .tour-navigation button,.tour-instant .tour-option,.tour-instant .tour-arrow,.tour-instant .tour-screens img,.tour-instant .tour-description,.tour-instant #screen-name>span,.tour-instant #feature-caption>span,.tour-instant .tour-visual { transition: none!important; }
.included-strip { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-top: 34px; margin-top: 48px; border-top: 1px solid var(--line); font-size: 13px; color: var(--secondary); }
.included-strip strong { font-weight: 550; color: var(--ink); display: block; }
.included-strip a { display: flex; align-items: center; gap: 12px; flex-shrink: 0; min-height: 44px; text-decoration: none; color: var(--ink); }
.included-strip svg { width: 18px; height: 18px; }
.sync-section { background: #1d352b; color: #fffdf8; overflow: hidden; }
.sync-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 112px; }
.sync-product { padding: 78px 0 0; height: 580px; overflow: hidden; display: flex; justify-content: center; }
.sync-product .phone { align-self: flex-start; width: 300px; transform: rotate(-8deg); box-shadow: 0 30px 60px #0006; }
.sync-copy { padding-block: 70px; }
.sync-copy .eyebrow { color: #e5c78c; }
.sync-copy h2 { font-size: clamp(50px,5vw,72px); margin-bottom: 28px; }
.sync-copy>p:not(.eyebrow) { font-size: 16px; line-height: 1.75; color: #d4ded4; max-width: 390px; }
.platforms { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 26px; padding: 0; margin: 28px 0 24px; font-size: 14px; max-width: 380px; }
.platforms li::before { content: ''; width: 5px; height: 5px; display: inline-block; border-radius: 50%; background: #a4b7a4; margin-right: 9px; vertical-align: 3px; }
.sync-copy>.sync-note { font-size: 12px!important; margin-bottom: 24px; }
.text-link { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; font-size: 14px; font-weight: 500; text-decoration: none; }
.text-link svg { width: 18px; height: 18px; transition: transform .2s; }
.text-link:hover svg { transform: translateX(5px); }
.about-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 112px; align-items: start; }
.about-layout h2 { font-size: clamp(38px,3.8vw,54px); }
.about-copy { padding-top: 37px; }
.about-copy p { font-size: 17px; line-height: 1.75; color: var(--secondary); margin-bottom: 22px; max-width: 440px; }
.questions-section { padding-block: 80px 100px; border-top: 1px solid var(--line); }
.questions-layout { display: grid; grid-template-columns: 1fr 1.25fr; gap: 112px; }
.questions-layout h2 { margin-bottom: 28px; }
.questions-layout>.text-link { color: var(--secondary); }
.questions-list details { border-bottom: 1px solid var(--line); }
.questions-list details:first-child { border-top: 1px solid var(--line); }
.questions-list summary { padding: 24px 0; display: flex; justify-content: space-between; gap: 24px; list-style: none; cursor: pointer; font-size: 16px; font-weight: 500; line-height: 1.5; }
.questions-list summary::-webkit-details-marker { display: none; }
.questions-list summary>span { font-size: 23px; font-weight: 300; line-height: 24px; transition: transform .25s; }
.questions-list details[open] summary>span { transform: rotate(45deg); }
.questions-list details p { font-size: 14px; line-height: 1.8; color: var(--secondary); padding-bottom: 24px; padding-right: 24px; }
.questions-list a { text-underline-offset: 4px; }
.closing { background: #e5e7d7; padding-block: 76px 80px; }
.closing-layout { display: flex; justify-content: space-between; align-items: center; gap: 44px; }
.closing h2 { font-size: clamp(50px,5.5vw,80px); }
.site-footer { background: var(--paper); padding-block: 32px 28px; }
.footer-main { display: flex; gap: 40px; align-items: center; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.footer-brand { display: flex; gap: 12px; align-items: center; text-decoration: none; font-size: 20px; font-weight: 650; letter-spacing: -.035em; }
.footer-brand img { border-radius: 11px; }
.footer-main nav { display: flex; gap: 28px; align-items: center; }
.footer-main nav a { min-height: 44px; display: flex; align-items: center; text-decoration: none; font-size: 13px; }
.footer-main nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.back-top { justify-content: center; width: 44px; border: 1px solid var(--line); border-radius: 50%; font-size: 22px!important; }
.footer-bottom { display: flex; gap: 20px; justify-content: space-between; font-size: 12px; color: var(--secondary); padding-top: 24px; }
.affiliation-note { font-size: 12px; color: var(--secondary); margin-top: 18px; max-width: 760px; }
@keyframes enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media(min-width:1700px) {
  .hero-layout { min-height: 780px; }
  .hero-phone { width: 280px; }
}
@media(max-width:1150px) {
  .wrap { width: calc(100% - 80px); }
  h1 { font-size: 80px; }
  .hero-layout { gap: 56px; }
  .hero-phone { width: 260px; }
  .hero-layout { min-height: 700px; }
  .product-tour { gap: 44px; }
  .sync-layout,.about-layout,.questions-layout { gap: 64px; }
  .tour-option>strong { font-size: 20px; }
}
@media(max-width:900px) {
  .nav-links a { padding-inline: 11px; font-size: 13px; }
  .nav { gap: 10px; }
  .wrap { width: calc(100% - 56px); }
  .hero-layout { min-height: 640px; gap: 48px; }
  h1 { font-size: 64px; }
  .hero-description { font-size: 15px; }
  .hero-description br { display: none; }
  .hero-phone { width: 235px; }
  .hero-copy { padding-block: 28px; }
  .hero-device-scene { padding-block: 28px; }
  .hero-baseline { gap: 20px; }
  .section-space { padding-block: 80px; }
  .product-tour { gap: 32px; grid-template-columns: 1fr 1fr; margin-top: 48px; }
  .tour-visual { padding: 22px 18px; }
  .tour-visual-top { font-size: 12px; }
  .visual-platform { display: none; }
  .tour-device .phone { width: 220px; border-radius: 36px; }
  .tour-device .phone img,.tour-screens { border-radius: 29px; }
  .tour-navigation button { gap: 12px; padding-block: 24px; }
  .tour-option>strong { font-size: 19px; }
  .tour-option>span { font-size: 13px; }
  .tour-arrow { font-size: 18px; }
  .tour-index { font-size: 12px; }
  .sync-layout { gap: 48px; }
  .sync-product .phone { width: 260px; }
  .sync-product { height: 640px; padding-top: 90px; }
  .sync-copy { padding-block: 64px; }
  .sync-copy h2 { font-size: 52px; }
  .sync-copy>p:not(.eyebrow) { font-size: 14px; }
  .platforms { gap: 10px 16px; font-size: 12px; }
  .platforms li::before { margin-right: 6px; }
  .about-layout,.questions-layout { gap: 48px; }
  .about-copy p { font-size: 15px; }
  .about-copy { padding-top: 34px; }
  .questions-list summary { font-size: 14px; }
  .closing-layout { gap: 28px; }
  .closing h2 { font-size: 58px; }
}
@media(max-width:760px) {
  .nav { width: calc(100% - 20px); justify-content: space-between; }
  .nav-links { display: none; }
  .nav .brand { font-size: 15px; }
  .wrap { width: calc(100% - 44px); }
  .hero-layout { grid-template-columns: 1fr 1fr; }
  h1 { font-size: 58px; }
  .hero-phone { width: 220px; }
  .hero-description { font-size: 14px; }
  .product-tour { grid-template-columns: 1fr; gap: 32px; }
  .tour-navigation { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; }
  .tour-navigation button { display: block; border-bottom: 0!important; border-top: 2px solid var(--line); padding-block: 16px; }
  .tour-navigation button[aria-pressed=true] { border-color: var(--ink); }
  .tour-index { display: block; padding: 0; margin-bottom: 12px; }
  .tour-arrow { display: none; }
  .tour-option>strong { font-size: 16px; }
  .tour-option>span { display: none!important; }
  .tour-visual { padding: 24px 28px; }
  .tour-device .phone { width: 250px; border-radius: 41px; }
  .tour-device .phone img,.tour-screens { border-radius: 33px; }
  .visual-platform { display: block; }
  .sync-layout { gap: 30px; }
  .sync-product { height: 620px; }
  .sync-product .phone { width: 230px; }
  .sync-copy h2 { font-size: 44px; }
  .sync-copy .eyebrow { color: var(--brass); font-size: 12px; }
  .platforms { display: flex; flex-wrap: wrap; gap: 10px 16px; }
  .about-layout { grid-template-columns: 1fr; gap: 28px; }
  .about-copy { padding: 0; }
  .about-copy p { max-width: 540px; }
  .questions-layout { grid-template-columns: 1fr; gap: 36px; }
  .questions-section { padding-block: 64px 76px; }
  .closing-layout { display: block; }
  .closing-layout>div:last-child { margin-top: 32px; }
  .closing { padding-block: 64px; }
  .included-strip { gap: 24px; font-size: 12px; }
  .footer-main nav { gap: 20px; }
}
@media(max-width:600px) {
  html { scroll-padding-top: 90px; }
  .nav { top: 10px; padding: 7px 7px 7px 13px; }
  .nav-cta { font-size: 14px; padding: 8px 15px; }
  .wrap { width: calc(100% - 40px); }
  .hero { min-height: 0; }
  .hero-layout { display: block; padding-block: 120px 0; min-height: 0; }
  .hero-copy { padding: 0; position: relative; z-index: 2; }
  .hero-context { font-size: 13px; margin-bottom: 20px; }
  .hero .hero-description { font-size: 16px; margin: 22px 0 26px; }
  .hero .download-note { max-width: 280px; line-height: 1.6; }
  h1 { font-size: clamp(58px,13.4vw,78px); line-height: 1; letter-spacing: -.055em; }
  .hero-description { font-size: 15px; line-height: 1.65; margin: 22px 0 24px; max-width: 330px; }
  .download-button { min-height: 60px; padding: 10px 20px 11px 14px; border-radius: 13px; }
  .download-button svg { width: 28px; height: 32px; }
  .download-button span { font-size: 23px; }
  .download-note { font-size: 12px; margin-top: 12px; }
  .hero-wash { background: linear-gradient(180deg,var(--paper) 0 48%,#2f5244df 48%,#2f5244c4 100%); }
  .desk-background { width: 100%; height: 52%; top: auto; object-position: 72% center; }
  .hero-device-scene { padding: 50px 0; min-height: 0; margin-top: 40px; }
  .hero-phone { width: 230px; transform: none; border-radius: 37px; }
  .hero-phone img { border-radius: 29px; }
  .hero-baseline { flex-wrap: wrap; gap: 0; padding: 16px 0; }
  .hero-baseline>a { font-size: 14px; gap: 16px; }
  .section-space { padding-block: 64px; }
  .eyebrow { color: var(--brass); font-size: 12px; margin-bottom: 20px; }
  h2,.section-heading h2 { font-size: 36px; letter-spacing: -.038em; line-height: 1.15; }
  .section-heading h2 br { display: none; }
  .section-heading h2>span { display: block; margin-top: 10px; }
  .product-tour { margin-top: 32px; }
  .tour-navigation { gap: 16px; }
  .tour-option>strong { font-size: 15px; line-height: 1.4; letter-spacing: -.025em; }
  .tour-option .pro-tag { display: block; width: max-content; margin: 7px 0 0; font-size: 10px; }
  .tour-visual { border-radius: 18px; padding: 20px 20px 23px; }
  .tour-visual-top { font-size: 12px; gap: 8px; margin-bottom: 24px; }
  .visual-platform { display: none; }
  .tour-device { padding-inline: 0; }
  .tour-device .phone { width: 230px; border-radius: 37px; }
  .tour-device .phone img,.tour-screens { border-radius: 29px; }
  .tour-visual figcaption { font-size: 12px; }
  .included-strip { margin-top: 28px; padding-top: 24px; display: block; font-size: 13px; }
  .included-strip a { margin-top: 14px; font-size: 13px; }
  .sync-layout { display: flex; flex-direction: column-reverse; gap: 0; }
  .sync-copy { padding: 60px 0 12px; width: 100%; }
  .sync-copy h2 { font-size: 56px; }
  .sync-copy>p:not(.eyebrow) { font-size: 15px; }
  .platforms { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 20px; font-size: 13px; margin-block: 26px; }
  .sync-product { padding-top: 36px; width: 100%; height: 440px; }
  .sync-product .phone { width: 250px; }
  .sync-note { margin-bottom: 16px!important; }
  .about-layout h2 { font-size: 38px; }
  .about-copy p { font-size: 16px; }
  .questions-list summary { padding-block: 22px; font-size: 15px; }
  .questions-list details p { font-size: 14px; padding-right: 8px; }
  .closing h2 { font-size: 58px; }
  .closing .eyebrow { color: var(--brass); font-size: 12px; }
  .footer-main { flex-wrap: wrap; gap: 20px; }
  .footer-main nav { width: 100%; gap: 24px; }
  .footer-main nav .back-top { margin-left: auto; }
  .footer-brand { font-size: 21px; }
  .footer-bottom { flex-wrap: wrap; font-size: 12px; gap: 8px; }
  .affiliation-note { font-size: 12px; line-height: 1.6; }
}
@media(max-width:359px) {
  .wrap { width: calc(100% - 32px); }
  .nav .brand { font-size: 13px; gap: 6px; }
  .nav .brand img { width: 24px; height: 24px; }
  .nav-cta { padding-inline: 12px; font-size: 13px; }
  h1 { font-size: 53px; }
  .hero-description { font-size: 14px; }
  .hero-device-scene { padding-top: 46px; }
  .hero-phone { width: 220px; }
  .tour-navigation { gap: 12px; }
  .tour-option>strong { font-size: 14px; }
  .tour-visual { padding-inline: 16px; }
  .tour-device .phone { width: 214px; }
  .section-heading h2 { font-size: 32px; }
  .sync-copy h2 { font-size: 50px; }
  .about-layout h2 { font-size: 34px; }
  .closing h2 { font-size: 52px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none!important; transition: none!important; }
  .tour-visual:hover .phone { transform: rotate(-3deg); }
}

/* Desktop motion: progressive reveals, responsive controls, and FAQ continuity. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: enter 850ms var(--ease) both; }
  .hero-copy > :nth-child(2) { animation-delay: 80ms; }
  .hero-copy > :nth-child(3) { animation-delay: 160ms; }
  .hero-copy > :nth-child(4) { animation-delay: 220ms; }
  .hero-copy > :nth-child(5) { animation-delay: 240ms; }
  .hero-device-scene { animation: enter 850ms 100ms var(--ease) both; }
  .motion-reveal {
    transition: opacity 850ms var(--ease) var(--reveal-delay,0ms),
      transform 850ms var(--ease) var(--reveal-delay,0ms);
  }
  .motion-reveal.is-awaiting { opacity: 0; transform: translate3d(0,26px,0); }
  .motion-reveal:focus-within { opacity: 1; transform: none; transition-delay: 0ms; }
  .button { transition: background 180ms ease, transform 180ms var(--ease), box-shadow 180ms ease; }
  .button:hover { transform: translateY(-3px); box-shadow: 0 8px 18px #191c1a18; }
  .button:active { transform: translateY(0) scale(.975); box-shadow: none; }
  .nav-links a:hover,.nav-cta:hover { transform: translateY(-1px); }
  .nav-links a:active,.nav-cta:active { transform: scale(.97); }
  .tour-visual.motion-reveal { transition: opacity 850ms var(--ease) var(--reveal-delay,0ms),transform 850ms var(--ease) var(--reveal-delay,0ms),background-color 320ms ease; }
  .tour-device .tour-screens img { transition: transform 300ms cubic-bezier(.32,.72,0,1),opacity 240ms ease; }
  .tour-option>.tour-description { transition: grid-template-rows 280ms cubic-bezier(.32,.72,0,1),margin-top 280ms cubic-bezier(.32,.72,0,1),opacity 180ms ease; }
  #screen-name>span,#feature-caption>span { transition: transform 240ms var(--ease),opacity 180ms ease; }
  .tour-option { transition: translate 200ms var(--ease); }
  .tour-navigation button:hover .tour-option { translate: 4px 0; }
  .tour-navigation button:active .tour-option { translate: 2px 0; }
  .tour-arrow { transition: opacity 180ms ease, translate 200ms var(--ease); }
  .tour-navigation button:hover .tour-arrow { opacity: 1; translate: 2px -2px; }
  .text-link { position: relative; }
  .text-link::after {
    content: ''; position: absolute; bottom: 8px; left: 0; right: 34px; height: 1px;
    background: currentColor; scale: 0 1; transform-origin: left;
    transition: scale 220ms var(--ease);
  }
  .text-link:hover::after { scale: 1 1; }
  .hero-baseline a>span { transition: translate 200ms var(--ease); }
  .hero-baseline a:hover>span { translate: 0 3px; }
  .questions-list summary>span {
    display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0;
    border-radius: 50%; transition: transform 220ms var(--ease), background 160ms ease;
  }
  .questions-list summary:hover>span { background: #e8e3d7; }
  .questions-list summary:focus-visible>span { transition: none; }
  .questions-list details[data-expanded=false] summary>span { transform: rotate(0); }
  .questions-list details[data-expanded=true] summary>span { transform: rotate(45deg); }
  .back-top { transition: background 180ms ease, translate 180ms var(--ease); }
  .back-top:hover { background: #e8e3d7; translate: 0 -2px; }
}
@media (max-width: 900px), (hover: none), (pointer: coarse) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none!important; transition: none!important; }
  .motion-reveal { opacity: 1; transform: none; }
  .button:hover,.text-link:hover svg { transform: none; }
  .tour-visual:hover .phone { transform: rotate(-3deg); }
}

.tour-navigation button[aria-pressed=true] .tour-index { color: var(--brass); }
.sync-walkthrough { padding-block: 52px 72px; border-top: 1px solid #ffffff26; }
.sync-walkthrough-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.sync-walkthrough h3 { font-size: 27px; line-height: 1.25; font-weight: 550; letter-spacing: -.025em; }
.sync-walkthrough-heading p { color: #d4ded4; font-size: 14px; }
.sync-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 38px; list-style: none; margin: 0; padding: 0; }
.sync-steps li { min-width: 0; }
.sync-step-image { width: 100%; max-width: 300px; margin-inline: auto; border-radius: 20px; background: #fff; overflow: hidden; box-shadow: 0 10px 25px #09190f26; }
.sync-step-image img { width: 100%; height: auto; }
.sync-step-copy { display: flex; align-items: flex-start; gap: 13px; margin-top: 24px; }
.step-number { padding-top: 3px; color: #e5c78c; font-size: 13px; font-variant-numeric: tabular-nums; }
.sync-step-copy h4 { margin: 0; font-size: 20px; font-weight: 550; line-height: 1.3; letter-spacing: -.025em; }
.sync-step-copy p { margin-top: 10px; color: #d4ded4; font-size: 15px; line-height: 1.65; max-width: 29em; }
.sync-demo-note { margin-top: 30px; color: #c4d0c5; font-size: 12px; }
@media (max-width: 1150px) {
  .sync-steps { gap: 24px; }
}
@media (max-width: 900px) {
  .sync-walkthrough-heading { display: block; }
  .sync-walkthrough-heading p { margin-top: 10px; }
  .sync-step-copy { gap: 9px; }
  .sync-step-copy h4 { font-size: 18px; }
  .sync-step-copy p { font-size: 14px; }
}
@media (max-width: 600px) {
  .sync-walkthrough { padding-block: 38px 52px; }
  .sync-walkthrough h3 { font-size: 25px; }
  .sync-steps { grid-template-columns: 1fr; gap: 40px; }
  .sync-step-image { max-width: 280px; }
  .sync-step-copy { max-width: 320px; margin: 20px auto 0; gap: 14px; }
  .sync-step-copy h4 { font-size: 21px; }
  .sync-step-copy p { font-size: 16px; }
  .sync-demo-note { max-width: 320px; margin-inline: auto; }
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .sync-steps .motion-reveal { transition: opacity 850ms var(--ease) var(--reveal-delay,0ms),transform 850ms var(--ease) var(--reveal-delay,0ms),filter 850ms var(--ease) var(--reveal-delay,0ms); }
  .sync-step-image.motion-reveal.is-awaiting { filter: blur(4px); }
  .sync-step-image.motion-reveal:focus-within { filter: none; }
}