@import url('prototype/style-guide.css');
:root{--paper:#f5f3eb;--ink:#344c40;--muted:#747e71;--line:#d8ddce;--accent:#849978}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:76px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}header{height:76px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;background:#f5f3ebed;backdrop-filter:blur(20px);position:fixed;inset:0 0 auto;z-index:50;border-bottom:1px solid #d8ddce80}.brand{font-family:Georgia,serif;font-size:34px;letter-spacing:-2px;display:flex;align-items:center;gap:7px}.brand-dot{width:7px;height:7px;background:#c9a88d;border-radius:100%;margin-top:12px}.byline,.toplink{font-size:11px;letter-spacing:.04em}.byline{color:var(--muted)}main{padding-top:76px}.slide{min-height:calc(100svh - 76px);position:relative;padding:55px 8% 130px;display:grid;align-items:center;gap:6%;overflow:hidden;border-bottom:1px solid var(--line)}.hero,.latest{grid-template-columns:1.1fr 1fr}.eyebrow{font-size:10px;letter-spacing:.18em;margin:0 0 28px;font-weight:600;color:var(--muted)}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;line-height:1.04;letter-spacing:-.055em;margin:0 0 27px}h1{font-size:clamp(46px,5.3vw,79px)}h2{font-size:clamp(44px,4.6vw,67px)}em{font-weight:400;color:#7b8b68}.lead{font-size:18px;line-height:1.65;max-width:450px;margin:0 0 18px}.support{font-size:14px;line-height:1.75;max-width:355px;color:var(--muted)}.text-link{display:inline-flex;gap:30px;align-items:center;font-size:12px;padding:14px 0;border-bottom:1px solid #a5b09d;margin-top:13px}.text-link span{font-size:19px}.role{font-size:9px;letter-spacing:.12em;margin-top:50px;color:#687361}.role span{display:block;letter-spacing:0;font-size:11px;margin-top:10px}.hero-art{position:relative;display:flex;align-items:center;flex-direction:column}.halo{position:absolute;width:600px;height:600px;max-width:65vw;top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,#dfe5d1a8 0%,#edd8c562 35%,transparent 69%);z-index:-0;pointer-events:none}.phone{position:relative;width:clamp(230px,21vw,302px);height:auto;aspect-ratio:390/844;border-radius:32px;overflow:hidden;background:#fffdf5;box-shadow:0 28px 60px -25px #4853415e,0 0 0 1px #59634c20;flex-shrink:0}.phone.current{box-shadow:0 35px 75px -30px #6a66474a,0 0 0 1px #a3a59335}.phone iframe,.phone video{display:block;width:100%;height:100%;border:0;object-fit:fill}.phone iframe{width:390px;height:844px;transform-origin:top left}.demo{pointer-events:none}.media-caption{position:relative;text-align:center;font-size:9px;letter-spacing:.14em;margin-top:23px;color:#6d7868}.media-caption span{display:block;font-size:11px;letter-spacing:0;color:#929989;margin-top:8px}.page-number{position:absolute;bottom:114px;right:5%;font-size:9px;letter-spacing:.12em;color:#929989}.overview{display:block;padding-top:40px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;position:relative;max-width:1050px;margin:0 auto 28px;gap:30px}.section-heading .eyebrow{position:absolute;top:0;left:0}.section-heading h2{padding-top:26px;font-size:44px;margin:0}.section-heading>p:last-child{font-size:12px;line-height:1.7;color:var(--muted);margin:0 0 5px}.versions{display:flex;justify-content:center;gap:9%;text-align:center}.version{display:flex;flex-direction:column;align-items:center}.phone.small{width:clamp(160px,15vw,215px);border-radius:24px}.version-index{font-size:9px;letter-spacing:.12em;color:var(--muted);margin-top:24px}.version h3{font-family:Georgia,serif;font-size:21px;font-weight:400;margin:10px 0 0;letter-spacing:-.02em}.version>p{font-size:11px;color:var(--muted)}.detail{grid-template-columns:1fr 1.2fr;gap:10%}.feature-media{display:flex;flex-direction:column;align-items:center}.note{margin:24px 0;max-width:420px}.note>span,.next-thought>span{font-size:9px;letter-spacing:.12em;color:#7d886f}.note p{font-size:14px;line-height:1.7;margin:10px 0}.beta{grid-template-columns:1fr .9fr 1fr;gap:5%;padding-left:6%;padding-right:6%}.beta h2{font-size:48px}.beta .lead{font-size:15px}.beta .phone{width:clamp(220px,20vw,280px)}.beta-right{padding-top:50px}.build-note{font-size:11px;line-height:1.9;color:var(--muted);padding-top:20px;border-top:1px solid var(--line)}.next-thought{border-top:1px solid var(--line);padding-top:24px;margin-top:30px}.next-thought>p{font-family:Georgia,serif;font-size:22px;line-height:1.35}.latest h2{font-size:64px}.latest .lead{font-size:16px}.design-points{margin:25px 0}.design-points p{display:flex;gap:16px;font-size:12px;line-height:1.6;max-width:395px}.design-points span{color:#9ba28e;font-size:10px;padding-top:2px}.try-prompt{font-size:12px;line-height:1.8}.prototype-actions{display:flex;flex-wrap:wrap;gap:15px;font-size:10px}.prototype-actions button,.prototype-actions a{background:transparent;border:0;border-bottom:1px solid var(--line);padding:8px 0}.status{font-size:9px;letter-spacing:.08em;color:var(--muted);margin-top:25px}footer{position:fixed;bottom:0;left:0;width:100%;height:88px;padding:0 5%;background:#f5f3ebf2;backdrop-filter:blur(16px);z-index:40;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line)}.footer-mark{font-family:Georgia,serif;font-size:18px;color:#7d886f}nav{display:flex;gap:0;position:relative}nav:before{content:'';position:absolute;left:12px;right:125px;top:8px;height:1px;background:#cbd3bf}nav a{width:170px;position:relative;display:flex;flex-direction:column;gap:11px;font-size:9px;color:#969d8f;letter-spacing:.03em}nav i{width:9px;height:9px;border-radius:50%;background:#c8cfbc;outline:6px solid var(--paper);margin:4px 0 0 4px;transition:transform .4s,background .4s}nav b{font-weight:400;margin-left:8px;color:#75806d}nav a.active i{background:var(--ink);transform:scale(1.5)}nav a.active b{color:var(--ink)}.arrows{display:flex;gap:9px}.arrows button{border:1px solid #d4d9ca;border-radius:50%;width:34px;height:34px;background:transparent}.arrows button:hover{background:#e6eadc}a:focus-visible,button:focus-visible{outline:2px solid #567b64;outline-offset:5px}@media(min-width:1500px){.slide{padding-left:13%;padding-right:13%}}@media(max-height:850px) and (min-width:900px){.slide{padding-top:30px;padding-bottom:120px}.phone{width:230px}.phone.small{width:160px}.beta .phone{width:230px}.latest h2{font-size:52px}.latest .design-points{margin:14px 0}.role{margin-top:24px}.section-heading h2{font-size:36px}}@media(max-width:800px){header{padding:0 6%;height:65px}.byline{display:none}.toplink{font-size:10px}main{padding-top:65px}html{scroll-padding-top:65px}.slide{padding:45px 7% 115px;min-height:auto;grid-template-columns:1fr;gap:35px}.hero{min-height:calc(100svh - 65px)}h1{font-size:51px}.lead{font-size:16px}.role{margin-top:25px}.hero-art{margin-top:15px}.phone,.beta .phone{width:250px}.halo{max-width:100vw}.overview .section-heading{display:block}.section-heading>p:last-child{margin-top:16px}.versions{gap:25px;overflow-x:auto;justify-content:flex-start;padding:5px 10px 20px;scroll-snap-type:x mandatory}.version{flex:0 0 210px;scroll-snap-align:center}.phone.small{width:190px}.detail .feature-media{order:2}.beta{grid-template-columns:1fr}.beta-right{padding-top:0}.beta .feature-media{order:3}.beta h2{font-size:52px}.latest h2{font-size:58px}.page-number{bottom:95px}footer{height:76px;padding:0 6%}.footer-mark{display:none}nav{flex:1;max-width:330px}nav a{width:33.33%}nav:before{right:30%}nav b{margin-left:3px;font-size:9px}.arrows{gap:5px}.arrows button{width:30px;height:30px}.media-caption{margin-top:17px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Refined original Attune identity */
header .brand{gap:12px;letter-spacing:-1.5px;line-height:1;color:var(--ink)}.brand-symbol{display:block;width:48px;height:38px;flex-shrink:0}.brand-wordmark{font-family:Georgia,serif;font-size:32px;font-weight:400;transform:translateY(-1px)}@media(max-width:800px){header .brand{gap:9px}.brand-symbol{width:41px;height:33px}.brand-wordmark{font-size:29px}}

.hero-recording{aspect-ratio:518/1080}.hero-recording video{object-fit:contain}.hero-playback{position:absolute;right:12px;bottom:12px;width:32px;height:32px;border:1px solid #ffffff90;border-radius:50%;background:#f5f3ebbd;color:#344c40;font-size:13px;backdrop-filter:blur(8px)}

.hero .hero-recording{aspect-ratio:514/1076;border-radius:22px;isolation:isolate;box-shadow:0 20px 50px -25px #48534145;outline:1px solid #8a927719}.hero .hero-recording video{object-fit:cover;border-radius:inherit;cursor:pointer;display:block;backface-visibility:hidden}.hero .hero-recording video:focus-visible{outline:2px solid #567b64;outline-offset:-3px}

.hero .hero-recording{aspect-ratio:952/1998}

.hero-sound{position:absolute;left:calc(50% + 160px);bottom:12px;white-space:nowrap;padding:8px 0;border:0;border-bottom:1px solid var(--line);background:transparent;font-size:11px;color:var(--muted)}@media(max-width:800px){.hero-sound{position:static;align-self:center;margin-top:18px}}

.hero-sound{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:78px;min-height:44px;padding:8px 4px;border:0;border-radius:20px;color:#7d8575;cursor:pointer;-webkit-tap-highlight-color:transparent}.sound-icon{width:21px;height:21px;flex-shrink:0}.sound-track{display:block;position:relative;width:30px;height:18px;border-radius:20px;background:#c7cbbf;box-shadow:inset 0 0 0 1px #344c4010;transition:background .2s}.sound-thumb{position:absolute;width:14px;height:14px;top:2px;left:2px;border-radius:50%;background:#fffdf7;box-shadow:0 1px 3px #344c4025;transition:transform .2s}.sound-waves{display:none}.hero-sound[aria-checked="true"]{color:var(--ink)}.hero-sound[aria-checked="true"] .sound-track{background:#608479}.hero-sound[aria-checked="true"] .sound-thumb{transform:translateX(12px)}.hero-sound[aria-checked="true"] .sound-slash{display:none}.hero-sound[aria-checked="true"] .sound-waves{display:block}.hero-sound:hover{background:#e9ecdf80}

.hero-replay{position:absolute;left:calc(50% + 160px);bottom:62px;width:44px;height:44px;display:grid;place-items:center;background:transparent;border:1px solid var(--line);border-radius:50%;color:var(--ink);cursor:pointer}.hero-replay[hidden]{display:none}.hero-replay svg{width:20px;height:20px}.hero-replay:hover{background:#e9ecdf80}@media(max-width:800px){.hero-replay{position:static;align-self:center;margin-top:10px}}

.hero-media-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px;min-height:44px}.hero-media-controls .hero-sound,.hero-media-controls .hero-replay{position:static;margin:0;align-self:auto}

/* Shared quiet circular media controls */
.hero-media-controls{gap:10px;margin-top:18px}.media-round{width:44px;height:44px;display:grid;place-items:center;background:transparent;border:1px solid #cbd2c2;border-radius:50%;color:var(--ink);padding:0;cursor:pointer;transition:background .2s,border-color .2s}.media-round svg{width:21px;height:21px}.media-round:hover{background:#e5e9db}.sound-round{color:#7b8573}.sound-round[aria-pressed="true"]{background:#e4eadc;border-color:#a9b99d;color:var(--ink)}.sound-round .sound-waves{display:none}.sound-round[aria-pressed="true"] .sound-waves{display:block}.sound-round[aria-pressed="true"] .sound-slash{display:none}footer{transition:transform .35s ease,opacity .35s ease}body.hero-active footer{opacity:0;transform:translateY(100%);pointer-events:none}@media(prefers-reduced-motion:reduce){footer,.media-round{transition:none}}

.hero h1{text-transform:none;font-variant-caps:normal}
/* A shared three-column stage connects overview, detail, and navigation. */
:root{--stage-width:1200px;--stage-pad:max(6vw,calc((100vw - var(--stage-width))/2))}
.overview{padding:42px var(--stage-pad) 140px}.section-heading{max-width:none;align-items:center;margin-bottom:32px;gap:7%}.section-heading h2{padding:0;font-size:clamp(40px,4vw,60px);flex:1}.section-heading>p:last-child{max-width:440px;font-size:15px;line-height:1.7;flex:1;margin:0}
.versions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;overflow:visible;padding:0;border:1px solid #d8ddce;border-radius:24px;background:#ffffff16}.version{position:relative;padding:26px 12px 22px;min-width:0;border-radius:22px;transition:background .45s ease,box-shadow .45s ease}.version+.version{border-left:1px solid var(--line)}.version:hover,.version:focus-visible{background:#e7ebdf80;box-shadow:inset 0 0 0 1px #a4b39670}.version .phone{transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s}.version:hover .phone{transform:translateY(-5px);box-shadow:0 30px 45px -25px #48534170}.version h3{font-family:Arial,sans-serif;font-size:13px;margin:22px 0 0;font-weight:400;letter-spacing:0}.version h3 span{display:inline-block;margin-left:7px;color:#75866b;transition:transform .35s}.version:hover h3 span{transform:translate(2px,-2px)}
.first,.beta,.latest{padding-left:var(--stage-pad);padding-right:var(--stage-pad);grid-template-columns:repeat(3,minmax(0,1fr));gap:0}.first .feature-media{grid-column:1}.first .detail-copy{grid-column:2/4;padding-left:12%;max-width:650px}.beta .beta-left{padding-right:14%}.beta .beta-right{padding-left:14%}.latest .detail-copy{grid-column:1/3;padding-right:12%}.latest .hero-art{grid-column:3}.first .phone,.beta .phone,.latest .phone,.phone.small{width:clamp(180px,18vw,260px)}
footer{height:104px;padding:0 var(--stage-pad);display:block}footer nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:100%;width:100%;max-width:none;align-items:center}footer nav:before{left:16.666%;right:16.666%;top:35px}footer nav a{width:auto;align-items:center;gap:15px;padding:14px 4px;font-size:12px;letter-spacing:0;color:#7b8674;transition:color .35s}footer nav i{width:12px;height:12px;margin:0;outline:8px solid var(--paper);transition:transform .4s ease,background .4s ease}footer nav a:hover i{transform:scale(1.45);background:#849978}footer nav a.active i{transform:scale(1.65);background:var(--ink)}footer nav a.active{color:var(--ink);font-weight:600}footer nav a:hover{color:var(--ink)}
@media(max-width:800px){
 :root{--stage-pad:7%}.slide:not(.hero){padding:40px 7% 65px 100px;display:flex;flex-direction:column;align-items:stretch;gap:28px}.overview .section-heading{display:block;margin-bottom:0}.section-heading h2{font-size:43px;margin-bottom:20px}.section-heading>p:last-child{font-size:14px}.versions{grid-template-columns:1fr;border-radius:20px;overflow:visible;gap:0}.version{padding:26px 12px}.version+.version{border-left:0;border-top:1px solid var(--line)}.version .phone,.first .phone,.beta .phone,.latest .phone{width:min(100%,250px)}.version h3{font-size:13px}.first .detail-copy,.latest .detail-copy,.beta .beta-left,.beta .beta-right{padding:0;max-width:none}.first .feature-media,.beta .feature-media{order:0}.first .detail-copy{order:1}.beta .beta-left{order:1}.beta .beta-right{order:2}.latest .hero-art{order:0}.latest .detail-copy{order:1}.latest h2,.beta h2{font-size:46px}.slide:not(.hero) .lead{font-size:15px}.slide:not(.hero) .halo{max-width:75vw}.latest .hero-art{margin-top:0}
 footer{inset:65px auto 0 0;width:82px;height:auto;padding:0 5px;border-top:0;border-right:1px solid var(--line);background:#f5f3ebf5}footer nav{display:flex;flex-direction:column;justify-content:center;gap:42px;height:100%;max-height:650px}footer nav:before{left:50%;right:auto;top:25%;bottom:25%;height:auto;width:1px}footer nav a{width:100%;min-height:76px;gap:14px;font-size:10px;line-height:1.4;text-align:center;position:relative}footer nav a span{background:var(--paper);padding:3px 0;max-width:72px}footer nav i{width:11px;height:11px}body.hero-active footer{transform:translateX(-100%)}.hero{padding-bottom:60px}
}

/* Open, unoutlined prototype cards. */
.versions,.version,.version+.version{border:0;background:transparent;box-shadow:none}
.version:hover,.version:focus-visible{box-shadow:none;background:#e7ebdf60}
@media(max-width:800px){
 footer{border-right:0}
 footer nav{max-height:none;justify-content:space-around;gap:0}
 footer nav:before{top:16.666%;bottom:16.666%}
 footer.overview-timeline{position:absolute;bottom:auto;inset-inline-start:0;background:transparent;backdrop-filter:none;transition:opacity .35s ease}
 footer.overview-timeline nav{position:relative;display:block}
 footer.overview-timeline nav:before{top:0;bottom:0}
 footer.overview-timeline nav a{position:absolute;top:var(--marker-y);left:0;transform:translateY(-6px);padding-top:0;min-height:0}
}
/* Clearer navigation and card interaction contrast. */
footer nav:before{background:#939f87}
footer nav i{background:#9aa68e}
footer nav a{color:#65745d}
footer nav a.active i{transform:scale(1.95);background:var(--ink)}
footer nav a:hover i{background:#657d59}
footer nav a.active:hover i{transform:scale(1.95);background:var(--ink)}
.version:hover,.version:focus-visible{background:#d6dfcbcc;box-shadow:none}
/* Stack the overview introduction above its three prototypes. */
.overview .section-heading{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:36px}
.overview .section-heading h2{flex:none;margin:0}
.overview .section-heading>p:last-child{flex:none;max-width:640px;margin:0}
/* Distinguish editorial screen titles from navigation labels. */
.version h3{font-family:Georgia,'Times New Roman',serif;font-size:13px;font-weight:400;letter-spacing:-.02em;line-height:1.4;color:var(--ink)}
footer nav a{font-size:14px;line-height:1.4;font-weight:500}
footer nav a.active{font-weight:600}
@media(max-width:800px){footer nav a{font-size:12px}footer nav a span{max-width:76px}.version h3{font-size:13px}}

footer nav a.previewing{color:var(--ink)}
footer nav a.previewing i{transform:scale(1.75);background:#657d59}
footer nav a.active.previewing i{transform:scale(1.95);background:var(--ink)}

.early-flows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:clamp(180px,18vw,260px);margin-top:22px}
.early-flows button{border:0;border-radius:18px;padding:9px 7px;background:transparent;color:#66775e;font-size:11px;transition:background .25s,color .25s}
.early-flows button:hover{background:#e1e7d7}
.early-flows button[aria-pressed="true"]{background:#d6dfcb;color:var(--ink)}
.first .detail-copy .lead{font-size:17px}.first .note{margin:20px 0;max-width:510px}
@media(max-width:800px){.early-flows{width:min(100%,250px)}}

.versions .phone.small video{object-fit:contain;background:#f5f3eb}

.first .phone{aspect-ratio:432/940}.first .phone video{object-fit:contain;background:#fff}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.early-flow-select{position:relative;display:inline-flex;align-items:center;margin-top:14px;color:var(--ink)}
.early-flow-select select{appearance:none;-webkit-appearance:none;border:0;background:#e2e8d9;border-radius:20px;padding:9px 34px 9px 15px;color:inherit;font:12px Arial,sans-serif;cursor:pointer;min-height:36px}
.early-flow-select svg{position:absolute;right:12px;width:14px;height:14px;pointer-events:none}
.early-flow-select select:hover{background:#d6dfcb}.early-flow-select select:focus-visible{outline:2px solid #567b64;outline-offset:4px}

.early-flows{display:flex;justify-content:center;gap:4px;width:auto;max-width:100%;margin-top:14px}
.early-flows button{width:76px;flex:0 0 76px;padding:9px 0;font-size:10px;min-height:34px}
@media(max-width:360px){.early-flows{gap:2px}.early-flows button{width:64px;flex-basis:64px;font-size:9px}}
/* Keep recording choices above the first prototype. */
.first .early-flows{order:-1;margin-top:0;margin-bottom:14px}
/* Fill the current overview frame without letterboxing or distortion. */
.versions .phone.small.current video{object-fit:cover}
footer{border:0}
@media(max-width:800px){
 footer{position:fixed;top:65px;bottom:0;left:0;height:auto;border:0}
 footer nav{max-height:650px;justify-content:center;gap:42px}
 footer nav:before{top:25%;bottom:25%}
}
/* Align phase screens and recording controls with mobile text. */
@media(max-width:800px){
 .first .feature-media,.beta .feature-media,.latest .hero-art{align-items:flex-start}
 .first .early-flows{align-self:flex-start}
 .latest .halo{left:min(125px,50%)}
}
/* Restore centered screens with a little more breathing room on mobile. */
@media(max-width:800px){
 .first .feature-media,.beta .feature-media,.latest .hero-art{align-items:center}
 .first .early-flows{align-self:center}
 .latest .halo{left:50%}
 .slide.first,.slide.beta,.slide.latest{gap:40px}
}

.beta .phone video{object-fit:contain}

.resting-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.resting-poster[hidden]{display:none}

.beta-next>p{font-family:Arial,sans-serif;font-size:14px;line-height:1.7}

.beta-next{border-top:0;padding-top:0}
/* Preserve the desktop story order when the TestFlight columns stack. */
@media(max-width:800px){
 .beta .beta-left{order:0}
 .beta .feature-media{order:1}
 .beta .beta-right{order:2}
}

/* One clear invitation, with development status separate from the action. */
.prototype-invitation{margin-top:24px;display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.prototype-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 24px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:500;line-height:1.3;transition:background .25s ease,box-shadow .25s ease}
.prototype-cta:hover{background:#49624e;box-shadow:0 5px 16px #344c4018}
.prototype-tab-note{margin:0 0 0 24px;font-size:11px;line-height:1.5;color:var(--muted)}
.prototype-next-step{margin:30px 0 0;font-size:12px;line-height:1.6;color:var(--muted)}
.prototype-next-step span{font-weight:600;color:var(--ink)}

.latest .current-recording{aspect-ratio:952/1998}.detail-recording{object-fit:contain!important;cursor:pointer}.detail-recording:focus-visible{outline:2px solid #567b64;outline-offset:-4px}

.versions .phase-number{font-family:Arial,sans-serif;font-size:10px;font-weight:400;letter-spacing:.06em;color:#747e71;margin-right:5px;white-space:nowrap}

/* Phase numbers sit above the labels, leaving the original dots intact. */
footer nav .timeline-title{position:relative}
footer nav .timeline-number{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font:400 9px/1 Arial,sans-serif;letter-spacing:.07em;color:var(--muted);padding-bottom:0}

/* Give the phase number breathing room below the enlarged active dot. */
footer nav a{gap:32px}
footer nav .timeline-number{font-size:11px;font-weight:500;color:#53634b}
footer nav a.active .timeline-number{color:var(--ink);font-weight:600}
@media(min-width:801px){footer nav:before{top:26px}}

/* Keep video intrinsic dimensions out of page layout, especially on mobile. */
.phone video{position:absolute;inset:0;width:100%;height:100%}
.slide>*{min-width:0}
@media(max-width:800px){
 html,body{max-width:100%;overflow-x:clip}
 .hero{grid-template-columns:minmax(0,1fr)}
 .slide:not(.hero)>*{max-width:100%;min-width:0}
 .phone,.beta .phone{max-width:100%}
 .early-flows{width:100%;max-width:250px}
 .early-flows button{flex:1 1 0;min-width:0;max-width:76px}
 footer nav{gap:clamp(18px,5vh,42px)}
 footer nav a{flex-shrink:0}
}

/* Playback uses the dedicated circular buttons, including on iOS. */
.phone video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.phone video::-webkit-media-controls-overlay-play-button{display:none!important}

/* Keep the initial frame above Safari's native start overlay until playback begins. */
.hero-start-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;z-index:2;pointer-events:none}
.hero-start-poster[hidden]{display:none}
.hero .hero-recording video{pointer-events:none;cursor:default}
.hero-recording video::-webkit-media-controls{display:none!important}
.hero-recording video::-webkit-media-controls-enclosure{display:none!important}