:root{--ink:#193d34;--muted:#54665e;--green:#226951;--deep:#123e32;--cream:#f7f8f2;--lime:#e0edab;--line:#dfe4da;--white:#fff;--radius:28px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--cream);color:var(--ink);font-family:TillSans,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:16px;line-height:1.65}button,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #a06019;outline-offset:5px}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}button{color:inherit}.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}.wrap{width:min(1280px,calc(100% - 96px));margin-inline:auto}.section{padding-block:100px}.site-header{max-width:1440px;margin:auto;min-height:98px;padding:22px 48px;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:25px;letter-spacing:-1px;white-space:nowrap}.brand img{border-radius:24%;object-fit:contain}.brand-dot{color:var(--green)}nav{display:flex;gap:32px;font-size:14px;font-weight:600}nav a:hover,.text-link:hover{text-decoration:underline;text-underline-offset:5px}.header-actions{display:flex;gap:18px;align-items:center}.button{display:inline-flex;gap:25px;align-items:center;justify-content:center;border-radius:100px;background:var(--green);color:white;font-weight:650;padding:17px 26px;min-height:56px;border:1px solid transparent;transition:background .2s,transform .2s}.button:hover{background:var(--deep);transform:translateY(-2px)}.button.small{padding:10px 20px;min-height:44px;font-size:14px}.button span:last-child{font-size:23px;line-height:1}.hero{padding-top:46px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;min-height:710px}.eyebrow{font-size:12px;font-weight:750;letter-spacing:2px;text-transform:uppercase;display:flex;align-items:center;gap:10px;margin:0 0 20px}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px #e4ecdc}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(52px,5.2vw,78px);line-height:1.05;letter-spacing:-4px;font-weight:700;margin-bottom:29px}em{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-3px;color:var(--green)}.hero-description{font-size:19px;line-height:1.65;max-width:460px;color:var(--muted);margin-bottom:30px}.hero-buttons{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.text-link{display:inline-flex;gap:10px;align-items:center;font-size:14px;font-weight:700}.play-icon{display:grid;place-items:center;border:1px solid #a0b1a4;width:30px;height:30px;border-radius:50%;font-size:10px;padding-inline-start:1px}.availability-note{font-size:12px;color:var(--muted);margin:24px 0 0;max-width:440px}.hero-stage{height:622px;border-radius:36px;background:radial-gradient(ellipse at 90% 5%,#789c78 0,transparent 49%),linear-gradient(130deg,#335f4b,#163f32 67%);position:relative;display:flex;align-items:center;justify-content:center;padding:30px 50px;overflow:visible}.platform-strip{padding:48px 0 38px;border-bottom:1px solid var(--line);text-align:center}.platform-strip>p{font-size:13px;color:var(--muted);margin-bottom:24px}.platform-strip>div{display:flex;justify-content:center;gap:42px;flex-wrap:wrap}.platform-strip span{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:650}.platform-strip svg{width:19px;height:19px;color:#6d8073}h2{font-size:clamp(36px,4vw,54px);line-height:1.15;letter-spacing:-2.2px;font-weight:650;margin-bottom:24px}.section-heading{text-align:center;max-width:740px;margin:0 auto 48px}.section-heading .eyebrow{justify-content:center}.section-heading>p:last-child{color:var(--muted);max-width:490px;margin:0 auto}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.feature{padding:30px;border-radius:var(--radius);background:#e9edde;overflow:hidden;min-width:0}.feature-reminders{background:#e9eddf}.feature-shopping{background:#f0ebdf}.feature-location{background:#e4eee8}.feature-icon{width:46px;height:46px;border-radius:15px;background:#ffffff85;display:grid;place-items:center;margin-bottom:29px}.feature h3{font-size:25px;line-height:1.23;letter-spacing:-.9px;max-width:300px;margin-bottom:16px}.feature>p{font-size:14px;line-height:1.7;color:#56655a;margin-bottom:27px}.reminder-mini,.location-mini{display:flex;align-items:center;gap:12px;background:#fff9;border-radius:16px;padding:20px 14px;margin-top:32px}.reminder-mini>span:first-child{font-size:27px}.reminder-mini strong,.location-mini strong{font-size:12px;display:block}.reminder-mini small,.location-mini small{font-size:10px;display:block;color:var(--muted);margin-top:4px}.pill{border-radius:20px;padding:0 10px;background:#d5e7cf;color:var(--green);margin-inline-start:auto}.shopping-mini{background:#fff9;border-radius:16px;padding:9px 15px;margin-top:24px}.shopping-mini>span{display:flex;gap:10px;align-items:center;font-size:12px;min-height:42px}.shopping-mini>span+span{border-top:1px solid #e8e5db}.shopping-mini small{margin-inline-start:auto;color:#6b766f}.shopping-mini b{font-weight:550}.tiny-check,.tiny-ring{width:15px;height:15px;border:1px solid #64967a;border-radius:50%;display:grid;place-items:center;line-height:1;font-size:10px;font-style:normal}.tiny-check{background:#56866a;color:white}.shopping-mini s{color:#7b877d}.feature .feature-footnote{font-size:11px;margin:16px 0 0;line-height:1.6}.location-mini{margin-top:27px}.demo-section{background:var(--deep);color:#f5f8e9;position:relative}.demo-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px;align-items:center}.demo-copy .eyebrow{color:#baceaf}.demo-copy h2{font-size:48px}.demo-copy>p:not(.eyebrow){color:#c4d4c9;max-width:350px}.demo-tabs{display:inline-flex;border:1px solid #547b67;border-radius:30px;padding:4px;margin:12px 0 20px}.demo-tabs button{border:0;border-radius:25px;padding:11px 19px;background:none;color:#d7e8d7;font-size:14px}.demo-tabs button[aria-selected=true]{background:var(--lime);color:#173d30;font-weight:650}.demo-copy .demo-disclaimer{font-size:12px;line-height:1.6}.demo-window{background:#f6f7f2;border-radius:23px;color:#284739;box-shadow:0 25px 60px #001b1b3b;min-height:340px;overflow:hidden}.demo-window-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#ecf0e6;padding:15px 22px;border-bottom:1px solid #dce3d9;font-size:13px}.window-circles{font-size:10px;letter-spacing:4px;color:#9caf99}.demo-window-bar button{padding:5px;border:0;background:none;font-size:12px;color:#4f6b55;text-decoration:underline;text-underline-offset:4px}#demo-panel{padding:26px}.demo-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px}.demo-title-row h3{font-size:23px;margin:0;letter-spacing:-.6px}.demo-title-row small{font-size:12px;color:var(--muted)}.demo-item{border-radius:16px;background:white;box-shadow:0 5px 15px #35503b07;padding:20px;display:flex;gap:14px;align-items:center;margin-bottom:8px}.demo-item div{flex:1}.demo-item strong{display:block;font-size:17px;font-weight:650}.demo-item small{font-size:13px;color:#527963;display:block;margin-bottom:3px}.complete-control{border:1.5px solid #5d9471;background:white;min-width:29px;min-height:29px;border-radius:50%;padding:4px;display:grid;place-items:center;color:transparent}.complete-control[aria-pressed=true]{background:#307252;color:white}.demo-item.is-done strong{text-decoration:line-through;color:#7a877a}.demo-shortcuts{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:16px}.demo-shortcuts button{border:1px solid #d3decf;background:#e8efdf;color:#244e37;padding:9px 16px;border-radius:30px;font-size:13px;min-height:42px}.demo-shortcuts button:disabled{opacity:.55}.demo-feedback{margin:0;min-height:47px;padding:0 26px 20px;font-size:13px;color:#397351}.demo-quantity{border:1px solid #dbe4d3;border-radius:25px;display:flex;align-items:center;gap:8px}.demo-quantity button{min-width:35px;min-height:38px;border:0;background:none;font-size:19px}.demo-quantity span{font-size:13px;min-width:15px;text-align:center}.together-heading{text-align:center;max-width:690px;margin:0 auto 50px}.together-heading .eyebrow{justify-content:center}.together-heading p:last-child{max-width:560px;margin:auto;color:var(--muted)}.device-stories{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);padding-top:34px}.device-stories>div{position:relative;padding:20px 44px}.device-stories>div+div{border-inline-start:1px solid var(--line)}.device-number{position:absolute;inset-inline-end:30px;top:20px;font-family:Georgia,serif;font-style:italic;font-size:30px;color:#a5b39f}.device-stories svg{width:36px;height:36px;margin-bottom:24px}.device-stories h3{font-size:23px;letter-spacing:-.7px;margin-bottom:12px}.device-stories p{font-size:14px;color:var(--muted);max-width:260px}.device-stories small{font-size:12px;color:var(--green);font-weight:650}.download-section{background:#e5ecd8}.download-heading{text-align:center;max-width:650px;margin:auto auto 40px}.download-heading>img{border-radius:24%;box-shadow:0 7px 18px #2b5b3422;margin-bottom:25px}.download-heading .eyebrow{justify-content:center}.download-heading h2{font-size:clamp(42px,4.6vw,65px)}.download-heading p:last-child{max-width:470px;margin:auto;color:#536b50}.download-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.download-card{background:#f9fbf2;border:1px solid #d4dfc9;padding:25px 20px;display:flex;flex-direction:column;border-radius:22px;min-width:0}.download-card>svg{width:28px;height:28px;margin-bottom:20px}.download-card h3{font-size:21px;margin-bottom:8px;letter-spacing:-.5px}.release-label{font-size:11px;color:#4c664a;background:#e8eedc;padding:4px 8px;border-radius:7px;align-self:flex-start;margin-bottom:17px}.download-card p{font-size:13px;color:#66725f;line-height:1.6;margin-bottom:22px}.download-card a{margin-top:auto;font-size:12px;line-height:1.6;font-weight:700;border-top:1px solid #dfe6d4;padding-top:17px;color:#295d43;min-height:44px}.download-card a:hover{text-decoration:underline}.download-footnote{text-align:center;max-width:660px;margin:25px auto 0;font-size:12px;color:#5e7159}.faq{display:grid;grid-template-columns:1fr 1.45fr;gap:60px}.faq h2{font-size:44px}.faq-list details{border-bottom:1px solid var(--line);padding:20px 0}.faq-list details:first-child{padding-top:0}.faq-list summary{cursor:pointer;font-size:17px;font-weight:600;list-style:none;padding-inline-end:38px;position:relative}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:'+';position:absolute;inset-inline-end:5px;top:-2px;font-size:24px;font-weight:400;color:#528367}.faq-list details[open] summary:after{content:'−'}.faq-list p{font-size:14px;margin:18px 32px 0 0;color:var(--muted);line-height:1.8}.final-cta{display:flex;align-items:center;justify-content:space-between;padding:46px 50px;background:#f0efe3;border-radius:26px;margin-bottom:64px;gap:20px}.final-cta p{font-size:36px;line-height:1.2;letter-spacing:-1.4px;margin:0;font-weight:600}footer{display:flex;gap:26px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-block:28px 40px;font-size:12px;color:var(--muted)}footer .brand{font-size:21px;color:var(--ink)}.footer-link{border:0;background:transparent;font-size:12px;padding:10px 0;color:var(--muted)}.footer-link:hover{text-decoration:underline}.skip{position:fixed;top:-100px;left:20px;z-index:50;background:white;padding:12px;color:var(--ink)}.skip:focus{top:12px}dialog{border:0;border-radius:24px;padding:40px;max-width:610px;width:calc(100% - 32px);color:var(--ink);background:var(--cream);box-shadow:0 20px 90px #001b2777;max-height:85vh;overflow:auto}dialog::backdrop{background:#082d2466;backdrop-filter:blur(5px)}dialog h2{font-size:30px;margin-inline-end:30px}dialog p{font-size:15px;line-height:1.8;color:var(--muted)}dialog a{text-decoration:underline;text-underline-offset:4px}.dialog-close{position:absolute;top:10px;inset-inline-end:15px;border:0;background:none;font-size:30px;min-width:44px;min-height:44px}dialog small{font-size:12px;color:var(--muted)}

@media(min-width:1600px){.hero{gap:85px}.hero-stage{height:660px}}
@media(max-width:1100px){.wrap{width:calc(100% - 56px)}.site-header{padding-inline:28px}nav{gap:19px}.hero{gap:28px;min-height:650px}.hero-stage{height:570px;padding-inline:30px}h1{font-size:56px}.hero-description{font-size:17px}.hero-buttons{gap:18px}.hero-buttons .button{padding:14px 21px}.demo-layout{gap:45px}.feature{padding:25px}.feature h3{font-size:23px}.download-grid{grid-template-columns:repeat(3,1fr)}.download-card:nth-child(4),.download-card:nth-child(5){grid-column:auto}.section{padding-block:76px}.device-stories>div{padding-inline:25px}footer{flex-wrap:wrap}.platform-strip>div{gap:25px}}
@media(max-width:760px){html{scroll-padding-top:20px}.wrap{width:calc(100% - 40px)}.site-header{min-height:82px;padding:20px;gap:12px}.brand{font-size:24px}.brand img{width:34px;height:34px}.site-header nav{display:none}.header-actions{gap:12px}.button.small{font-size:12px;padding:9px 14px;gap:10px}.hero{grid-template-columns:1fr;padding-top:32px;gap:40px;min-height:0}.hero-copy{text-align:center}.eyebrow{justify-content:center;font-size:11px;margin-bottom:18px}h1{font-size:clamp(44px,9vw,64px);letter-spacing:-2.5px;margin-bottom:24px}.hero-description{font-size:17px;max-width:420px;margin-inline:auto}.hero-buttons{justify-content:center;gap:20px}.hero-buttons .button{min-height:52px}.availability-note{margin-inline:auto;max-width:330px;font-size:11px}.hero-stage{width:min(480px,100%);margin:auto;height:560px;border-radius:28px;padding:36px}.platform-strip{padding-block:38px 32px}.platform-strip>div{gap:19px 24px}.platform-strip span{font-size:12px}.platform-strip>p{font-size:12px}.section{padding-block:64px}h2{font-size:37px;letter-spacing:-1.7px}.section-heading{margin-bottom:32px}.section-heading>p:last-child{font-size:15px}.feature-grid{grid-template-columns:1fr;gap:16px}.feature{padding:28px}.feature-icon{margin-bottom:20px}.feature h3{font-size:27px;max-width:340px}.feature>p{font-size:15px;max-width:440px}.reminder-mini,.shopping-mini,.location-mini{margin-top:20px;max-width:440px}.reminder-mini strong,.location-mini strong,.shopping-mini>span{font-size:14px}.reminder-mini small,.location-mini small{font-size:12px}.feature .feature-footnote{font-size:12px}.demo-layout{grid-template-columns:1fr;gap:22px}.demo-copy{text-align:center}.demo-copy h2{font-size:38px}.demo-copy>p:not(.eyebrow){margin-inline:auto;max-width:400px}.demo-window{min-height:330px}.demo-window-bar{padding:14px 18px;gap:8px}.demo-window-bar button{font-size:11px}.window-circles{letter-spacing:2px}.demo-title-row h3{font-size:21px}#demo-panel{padding:22px 16px}.demo-item{padding:16px 12px}.demo-item strong{font-size:15px}.demo-item small{font-size:12px}.demo-shortcuts{gap:7px;justify-content:center}.demo-shortcuts button{padding:9px 15px}.demo-feedback{padding-inline:18px;font-size:12px}.together-heading p:last-child{font-size:15px}.device-stories{grid-template-columns:1fr;padding-top:5px}.device-stories>div{padding:30px 0}.device-stories>div+div{border-inline-start:0;border-top:1px solid var(--line)}.device-stories p{max-width:100%;margin-bottom:8px}.device-stories svg{margin-bottom:12px}.device-number{top:27px;inset-inline-end:6px}.download-grid{grid-template-columns:repeat(2,1fr)}.download-card{padding:22px 17px}.download-card:last-child{grid-column:1/-1}.download-card h3{font-size:20px}.download-card p{font-size:13px}.download-heading>img{width:66px;height:66px}.download-heading h2{font-size:42px}.download-heading p:last-child{font-size:15px}.release-label{font-size:10px}.download-footnote{font-size:11px}.faq{grid-template-columns:1fr;gap:32px}.faq>div:first-child{text-align:center}.faq h2{font-size:37px}.faq-list summary{font-size:16px}.faq-list p{font-size:14px}.final-cta{padding:30px 24px;flex-direction:column;text-align:center;margin-bottom:40px}.final-cta p{font-size:30px}.final-cta .button{min-height:50px;padding:13px 24px}footer{justify-content:center;gap:18px 24px;padding-bottom:30px;font-size:11px}footer .brand{width:100%;justify-content:center}footer .footer-link{font-size:11px}dialog{padding:35px 24px}}
@media(max-width:380px){.site-header .button.small{display:none}.hero-stage{height:520px;padding:30px 23px}.hero-buttons{gap:15px}.download-grid{grid-template-columns:1fr}.download-card:last-child{grid-column:auto}.download-card p{font-size:14px}.release-label{font-size:12px}.download-card a{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Real, unmodified Apple bezel. Only the illustrated app UI moves. */
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; }
svg { display: block; aspect-ratio: 1; flex: 0 0 auto; }
svg use { pointer-events: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero { grid-template-columns: 1fr 1.12fr; padding-top: 20px; gap: 46px; }
.hero h1 { font-size: clamp(60px, 5.4vw, 82px); letter-spacing: -4px; line-height: 1.02; }
.hero h1 em { color: #226951; }
.hero-description { font-size: 18px; max-width: 450px; margin-bottom: 22px; }
.hero-proof { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 9px; color: #335c4b; font-size: 14px; }
.hero-proof li { display: flex; align-items: center; gap: 10px; }
.hero-proof svg { width: 18px; height: 18px; color: #34755c; }
.hero-stage.product-reel { display: block; height: auto; width: 100%; padding: 0; background: transparent; border: 0; border-radius: 0; min-width: 0; }
.reel-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 0 4px; }
.reel-topline > span { font-size: 12px; letter-spacing: 1.8px; font-weight: 700; color: #59776a; }
.reel-topline button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 13px; border: 1px solid #c5d6c8; background: #eef2e8; border-radius: 30px; font-size: 14px; font-weight: 600; }
.reel-topline button svg { width: 17px; height: 17px; }
.reel-stage { display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: center; gap: 16px; background: radial-gradient(ellipse at 36% 48%, #d6e9d9 0, #e8f0df80 45%, transparent 69%); }
.phone-device { width: 100%; max-width: 330px; aspect-ratio: 1350 / 2760; position: relative; justify-self: center; container-type: inline-size; }
.phone-bezel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.phone-display { position: absolute; inset: 2.5% 5.333333%; background: #f2f2f7; border-radius: 14% / 6.5%; overflow: hidden; display: flex; flex-direction: column; color: #131714; line-height: 1.35; }
.phone-status { display: flex; align-items: center; justify-content: space-between; flex: 0 0 8%; padding: 0 7%; font-size: 13px; }
.phone-status strong { font-size: 13px; }
.phone-status > span { display: flex; gap: 3px; }
.phone-status svg { width: 14px; height: 14px; }
.phone-status svg:last-child { width: 19px; }
.phone-pages { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.phone-page { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; }
.phone-page[hidden] { display: none; }
.phone-page.page-enter { animation: page-arrive .38s cubic-bezier(.22,.8,.25,1) both; }
.phone-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 45px; padding: 0 14px; color: #327860; }
.phone-toolbar > svg { width: 20px; height: 20px; }
.phone-toolbar strong { display: flex; gap: 6px; align-items: center; font-size: 18px; letter-spacing: -.4px; color: #111613; white-space: nowrap; }
.phone-toolbar strong svg { width: 18px; height: 18px; color: #387d64; }
.phone-toolbar strong svg:last-child { width: 12px; height: 12px; }
.phone-filter { display: flex; gap: 3px; margin: 3px 12px 10px; padding: 3px; border-radius: 12px; background: #e3e3e9; flex: 0 0 auto; font-size: 14px; text-align: center; color: #74767a; }
.phone-filter span { flex: 1; padding: 7px 3px; border-radius: 9px; transition: background .2s, color .2s; }
.phone-filter .active { background: white; color: #111; font-weight: 600; box-shadow: 0 1px 3px #0000000a; }
.phone-scroll { padding: 0 12px 16px; overflow: hidden; flex: 1; min-height: 0; }
.phone-section-label { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; color: #79867c; margin: 8px 2px 12px; }
.phone-section-label > span:first-child { display: flex; align-items: center; gap: 6px; }
.phone-section-label svg { width: 14px; height: 14px; color: #34745c; }
.phone-section-label > span:last-child { border-radius: 14px; padding: 1px 7px; background: #e6e8e9; }
.phone-list { background: #fff; border-radius: 18px; overflow: hidden; }
.phone-row { display: grid; grid-template-rows: 1fr; overflow: hidden; position: relative; max-height: 100px; transition: max-height .38s cubic-bezier(.2,.8,.3,1), opacity .28s; }
.row-inner { display: flex; align-items: center; gap: 8px; padding: 10px 10px; min-height: 70px; background: #fff; position: relative; z-index: 1; transition: background .22s, transform .35s cubic-bezier(.2,.8,.3,1); }
.phone-row + .phone-row .row-inner::before { content: ''; position: absolute; top: 0; left: 44px; right: 10px; height: 1px; background: #e9e9ed; }
.row-power { color: #357d64; width: 25px; height: 25px; }
.row-text { flex: 1; min-width: 0; }
.row-time { display: block; color: #cc474e; font-size: 12px; line-height: 1.5; white-space: nowrap; font-variant-numeric: tabular-nums; }
.row-text h3 { margin: 1px 0 4px; font-size: 14px; font-weight: 650; letter-spacing: -.25px; line-height: 1.3; }
.row-text h3 .contact-cue { display: inline-block; width: 15px; height: 15px; color: #4b89a1; vertical-align: -2px; margin-left: 3px; }
.row-meta { display: flex; align-items: center; gap: 5px; color: #60766c; font-size: 12px; line-height: 1.35; }
.row-meta svg { width: 12px; height: 12px; }
.row-check { width: 17px; height: 17px; border: 1.5px solid #98a099; border-radius: 4px; display: grid; place-items: center; flex-shrink: 0; color: transparent; transition: color .2s, background .2s, border-color .2s; }
.row-check svg { width: 14px; height: 14px; stroke-width: 2.5; }
.phone-row.completed .row-check { background: #337a5f; border-color: #337a5f; color: white; }
.phone-row.completed .row-inner { background: #e9f2e9; }
.phone-row.completed h3 { color: #63816d; text-decoration: line-through; }
.phone-row.removed { max-height: 0; opacity: 0; }
#reel-booking::after { content: 'Delete'; display: grid; place-items: center; position: absolute; right: 0; top: 0; height: 100%; width: 76px; background: #cc4a4c; color: white; font-size: 14px; font-weight: 600; }
#reel-booking.deleting .row-inner { transform: translateX(-76px); }
.phone-expand { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s ease, opacity .2s; background: #f7faf5; }
#reel-call.expanded { max-height: 235px; }
#reel-call.expanded .row-inner { background: #edf5ec; }
#reel-call.expanded .phone-expand { max-height: 140px; opacity: 1; }
.phone-shortcuts { display: flex; border-top: 1px solid #e1e9df; padding: 9px 8px; gap: 6px; font-size: 12px; color: #34765c; }
.phone-shortcuts > span { flex: 1; display: flex; gap: 2px; justify-content: center; align-items: center; padding: 6px 0; border-radius: 7px; transition: background .2s; }
.phone-shortcuts svg { width: 12px; height: 12px; }
#reel-shift.highlight { background: #d3e8a9; color: #24593e; font-weight: 700; }
.inline-note { padding: 0 12px 9px; font-size: 12px; color: #315b49; }
.inline-note > span { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.inline-note svg { width: 15px; height: 15px; }
.inline-note svg:last-child { margin-left: auto; width: 12px; height: 12px; }
.inline-note p { max-height: 0; overflow: hidden; margin: 0; line-height: 1.6; color: #58675d; transition: max-height .3s, margin .3s; }
#reel-call.notes-open .inline-note p { max-height: 60px; margin-top: 7px; }
#reel-call.shifted .row-time { color: #34755d; }
#reel-break.alert-focus .row-inner { background: #e1eecd; }
#reel-break.alert-focus .row-meta { color: #276848; font-weight: 650; }
.repeat-popover { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 17px 14px; border: 1px solid #cbdfc8; border-radius: 18px; background: #f8fcf5; box-shadow: 0 9px 24px #1e3b2626; z-index: 3; animation: detail-arrive .3s ease both; font-size: 12px; }
.repeat-popover[hidden] { display: none; }
.repeat-popover > div { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 9px 0; }
.repeat-popover > div:first-child { justify-content: flex-start; padding-top: 0; font-size: 14px; }
.repeat-popover > div:first-child svg { width: 19px; height: 19px; color: #337b5f; }
.repeat-popover > div:first-child span { margin-left: auto; background: #367a5f; color: white; padding: 3px 9px; border-radius: 12px; font-size: 12px; }
.repeat-popover p { margin: 0 0 8px; color: #5c7764; font-size: 12px; }
.repeat-popover > div + div { border-top: 1px solid #dfe8dc; }
.grocery-label { font-size: 12px; color: #6c8073; margin: 12px 3px 8px; }
.phone-grocery { display: flex; align-items: center; gap: 10px; padding: 12px; min-height: 61px; max-height: 76px; overflow: hidden; transition: max-height .35s, min-height .35s, padding .35s, opacity .25s, background .25s; }
.phone-grocery + .phone-grocery { border-top: 1px solid #e7e9e6; }
.phone-grocery > div { flex: 1; min-width: 0; }
.phone-grocery strong { display: block; font-size: 14px; font-weight: 600; }
.phone-grocery small { font-size: 12px; color: #748379; }
.grocery-check { border: 1.5px solid #6d9f83; border-radius: 50%; width: 21px; height: 21px; display: grid; place-items: center; color: transparent; flex: 0 0 21px; transition: color .2s, background .2s; }
.grocery-check svg { width: 16px; height: 16px; }
.grocery-qty { border-radius: 6px; background: #edf2e9; color: #536f5b; padding: 3px 6px; font-size: 12px; }
.phone-grocery.bought { background: #e7f2e3; }
.phone-grocery.bought .grocery-check { background: #33795e; color: white; border-color: #33795e; }
.phone-grocery.bought strong { text-decoration: line-through; color: #708571; }
.phone-grocery.removed { min-height: 0; max-height: 0; padding-block: 0; opacity: 0; border: 0; }
.purchased-item { display: flex; align-items: center; gap: 10px; padding: 16px 12px; font-size: 14px; min-height: 73px; transition: opacity .25s, background .2s; }
.purchased-item + .purchased-item { border-top: 1px solid #e7e9e5; }
.purchased-item > span { color: #357d5e; }
.purchased-item > span svg { width: 18px; height: 18px; }
.purchased-item > div { flex: 1; }
.purchased-item strong { display: block; font-size: 14px; font-weight: 600; }
.purchased-item small { color: #728176; font-size: 12px; }
.purchased-item > svg { color: #34795d; width: 19px; height: 19px; }
.purchased-item.returning { background: #ddecce; }
.phone-help { font-size: 12px; text-align: center; color: #698170; line-height: 1.6; margin: 18px 8px; }
.place-list { display: grid; gap: 9px; }
.phone-place { display: flex; align-items: center; gap: 10px; background: white; border-radius: 15px; padding: 13px 12px; }
.phone-place > svg:first-child { width: 27px; height: 27px; color: #357e60; padding: 3px; }
.phone-place > svg:last-child { width: 14px; height: 14px; color: #718579; }
.phone-place > div { flex: 1; min-width: 0; }
.phone-place h3 { font-size: 15px; font-weight: 600; letter-spacing: -.2px; margin: 0 0 3px; }
.phone-place span { font-size: 12px; color: #718078; }
.phone-place.selected { border: 1px solid #afc9ad; background: #fbfff9; }
.arrival-card { margin-top: 16px; border-radius: 17px; background: #e8f2e3; padding: 15px 12px; }
.arrival-card > div:first-child { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.arrival-card svg { width: 20px; height: 20px; color: #35765b; }
.arrival-choice { display: flex; margin: 14px 0 12px; background: #dce7d5; padding: 3px; border-radius: 9px; font-size: 12px; text-align: center; }
.arrival-choice span { padding: 7px 2px; flex: 1; border-radius: 7px; }
.arrival-choice .selected { background: white; color: #2b7351; font-weight: 600; }
.arrival-card p { font-size: 13px; margin: 0 0 8px; }
.arrival-card small { font-size: 12px; color: #6a7f6c; }
.phone-toast { position: absolute; z-index: 4; left: 8%; right: 8%; bottom: 13%; border: 1px solid #d7e5cc; border-radius: 12px; padding: 10px 9px; display: flex; align-items: center; gap: 7px; background: #f4faed; box-shadow: 0 5px 15px #1935211a; font-size: 12px; color: #335d40; animation: detail-arrive .25s ease both; }
.phone-toast[hidden] { display: none; }
.phone-toast > svg { width: 15px; height: 15px; }
#reel-feedback-text { flex: 1; }
#reel-undo { font-weight: 650; }
.phone-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin: 5px 5px 0; padding: 9px 3px 7px; border: 1px solid #e2e6e0; border-radius: 30px; background: #f8faf6; flex: 0 0 auto; }
.phone-tabs > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #253d30; border-radius: 24px; padding: 4px 1px; }
.phone-tabs > span.selected { color: #267052; background: #e2ebe2; }
.phone-tabs svg { width: 22px; height: 22px; }
.phone-tabs small { font-size: 12px; line-height: 1.2; letter-spacing: -.3px; }
.phone-home { width: 32%; height: 4px; border-radius: 4px; background: #111; margin: 9px auto 7px; flex: 0 0 4px; }
.reel-caption { min-width: 0; align-self: center; }
.reel-caption > span { display: block; color: #568066; font-size: 12px; font-weight: 700; letter-spacing: 1.3px; line-height: 1.6; margin-bottom: 14px; }
.reel-caption h3 { font-size: 25px; letter-spacing: -.8px; line-height: 1.16; font-weight: 650; margin: 0 0 13px; min-height: 88px; }
.reel-caption p { color: #587363; font-size: 14px; line-height: 1.55; margin: 0; min-height: 110px; }
.reel-chapters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; gap: 6px; }
.reel-chapters button { min-height: 44px; border: 0; border-bottom: 2px solid #d6e0d0; border-radius: 0; padding: 8px 2px; font-size: 13px; color: #718571; background: transparent; line-height: 1.4; transition: color .2s, border-color .2s; }
.reel-chapters button[aria-pressed=true] { border-color: #286e50; color: #214f38; font-weight: 650; }
.reel-bottom { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.reel-bottom button { display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; }
.reel-bottom svg { width: 17px; height: 17px; }
.reel-bottom > span { font-size: 12px; color: #72826f; white-space: nowrap; font-variant-numeric: tabular-nums; }
#tour-progress { flex: 1; min-width: 0; width: 100%; height: 3px; appearance: none; border: 0; background: #dde5d6; color: #478166; border-radius: 4px; }
#tour-progress::-webkit-progress-bar { background: #dde5d6; border-radius: 4px; }
#tour-progress::-webkit-progress-value { background: #478166; border-radius: 4px; }
#tour-progress::-moz-progress-bar { background: #478166; border-radius: 4px; }
.reel-disclaimer { font-size: 12px; color: #7a8775; text-align: center; margin: 0; line-height: 1.5; }
.product-reel[data-playing=false] * { animation: none; }
.feature > p { font-size: 16px; }
.reminder-mini strong, .location-mini strong { font-size: 14px; }
.reminder-mini small, .location-mini small { font-size: 12px; }
.feature .feature-footnote { font-size: 12px; }
.demo-title-row { align-items: flex-start; flex-wrap: wrap; }
.demo-item > div:not(.demo-quantity) { flex: 1; min-width: 0; }
.demo-item > .demo-quantity { flex: 0 0 auto; }
.demo-item .complete-control { width: 36px; height: 36px; flex: 0 0 36px; padding: 7px; }
.complete-control svg { width: 20px; height: 20px; stroke-width: 2; }
.demo-quantity button { min-width: 38px; min-height: 40px; }
.demo-shortcuts button { min-height: 44px; font-size: 14px; }
.demo-window-bar button { min-height: 44px; font-size: 13px; }
.demo-item strong { overflow-wrap: anywhere; }
@keyframes page-arrive { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes detail-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1180px) { .hero { gap: 30px; grid-template-columns: .92fr 1.08fr; } .reel-stage { grid-template-columns: minmax(0, 1fr) 115px; gap: 10px; } .reel-caption h3 { font-size: 22px; } .reel-caption p { font-size: 13px; } .hero h1 { font-size: 61px; } }
@media (max-width: 950px) { .hero { grid-template-columns: 1fr 1fr; gap: 24px; } .reel-stage { display: block; } .phone-device { max-width: 305px; margin: auto; } .reel-caption { text-align: center; min-height: 98px; margin: 12px 0 0; } .reel-caption > span { display: none; } .reel-caption h3 { font-size: 23px; min-height: 0; margin-bottom: 6px; } .reel-caption h3 br { display: none; } .reel-caption p { min-height: 0; font-size: 14px; max-width: 300px; margin: auto; } .hero h1 { font-size: 54px; letter-spacing: -3px; } .hero-proof { font-size: 13px; } .reel-topline > span { font-size: 11px; letter-spacing: 1px; } }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; gap: 28px; padding-top: 24px; } .hero h1 { font-size: clamp(48px, 11vw, 68px); } .hero-proof { display: none; } .hero-description { font-size: 17px; max-width: 410px; } .hero-stage.product-reel { width: 100%; max-width: 440px; } .phone-device { max-width: 330px; } .reel-stage { background: radial-gradient(ellipse at center, #d7e8d2, transparent 70%); } .reel-topline { max-width: 340px; margin-inline: auto; } .reel-chapters { gap: 5px; } .reel-chapters button { font-size: 13px; } .demo-item:has(.demo-quantity) { flex-wrap: wrap; } .demo-item > .demo-quantity { margin-left: auto; } }
@media (max-width: 380px) { .hero h1 { font-size: 48px; } .hero-description { font-size: 16px; } .phone-device { max-width: 305px; } .reel-chapters button { font-size: 12px; } .phone-tabs small { font-size: 11px; } .row-inner { gap: 7px; padding-inline: 8px; } .row-power { width: 23px; height: 23px; } }
@media (prefers-reduced-motion: reduce) { .product-reel *, .product-reel *::before { animation: none !important; transition: none !important; } }

/* Product film: an editorial stage, a faithful app surface, a readable close-up. */
body { background: #fafbf8; color: #172e27; }
.site-header { max-width: 1328px; }
.hero { display: block; padding-top: 44px; padding-bottom: 44px; }
.hero-copy { display: grid; grid-template-columns: 1.25fr 1fr; column-gap: 70px; align-items: center; margin-bottom: 42px; text-align: left; }
.hero-copy > .eyebrow { grid-column: 1 / -1; margin-bottom: 20px; font-size: 12px; letter-spacing: 2px; }
.hero h1 { margin: 0; font-size: clamp(48px, 5.1vw, 72px); line-height: 1.03; letter-spacing: -3.5px; font-weight: 700; }
.hero h1 em { font-family: inherit; font-style: normal; font-weight: inherit; color: #2a8065; }
.hero-description { font-size: 19px; line-height: 1.55; margin: 0 0 22px; max-width: 430px; color: #53665d; }
.hero-description strong { color: #223e30; font-weight: 600; }
.hero-buttons { gap: 22px; margin: 0; }
.hero-buttons .button { padding: 16px 24px; }
.hero-buttons .text-link { font-size: 14px; gap: 9px; }
.availability-note { margin: 16px 0 0; line-height: 1.6; font-size: 12px; }
.hero-stage.product-reel { max-width: none; padding: 22px 30px 15px; border-radius: 32px; background: #102b25; background-image: linear-gradient(125deg,#142c27 0%,#12382c 55%,#0d261f 100%); color: #f6faf5; overflow: hidden; isolation: isolate; }
.reel-topline { padding: 0 3px 19px; margin: 0; border-bottom: 1px solid #ffffff1a; }
.reel-topline > span { display: flex; gap: 9px; align-items: center; font-size: 14px; font-weight: 650; color: #e9f3e9; letter-spacing: -.2px; }
.reel-topline img { border-radius: 7px; width: 28px; height: 28px; }
.film-duration { font-size: 12px; font-weight: 400; color: #a0b8a8; margin-left: 9px; }
.reel-topline button { background: #ffffff0c; border: 1px solid #ffffff29; color: #eef8ed; padding-inline: 16px; font-size: 13px; }
.reel-topline button:hover { background: #ffffff17; }
.reel-topline button svg { fill: currentColor; stroke-width: 1.5; }
.reel-stage { display: grid; grid-template-columns: minmax(0,1fr) 330px minmax(0,.9fr); gap: 32px; align-items: center; background: none; padding: 25px 10px 20px; min-height: 720px; }
.phone-device { grid-column: 2; grid-row: 1; width: 330px; max-width: 100%; margin: 0; }
.reel-caption { grid-column: 1; grid-row: 1; align-self: center; text-align: left; margin: 0; min-height: 0; }
.reel-caption > .film-chapter-number { display: block; font-size: 14px; font-weight: 500; letter-spacing: 2px; color: #c9ecaa; margin-bottom: 38px; font-variant-numeric: tabular-nums; }
.reel-caption > #tour-caption-kicker { display: block; font-size: 11px; line-height: 1.6; letter-spacing: 1.5px; color: #afc8b7; min-height: 34px; margin-bottom: 12px; }
.reel-caption h3 { font-size: clamp(32px,3.5vw,47px); white-space: pre-line; line-height: 1.06; letter-spacing: -1.7px; min-height: 151px; margin: 0 0 24px; color: #f3f8eb; font-weight: 650; }
.reel-caption p { font-size: 16px; min-height: 108px; max-width: 265px; line-height: 1.6; color: #aac1b2; margin: 0; }
.film-benefit { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #cbe7b7; line-height: 1.5; margin-top: 30px; }
.film-benefit svg { width: 15px; height: 15px; stroke-width: 2.5; }
.film-detail { grid-column: 3; grid-row: 1; min-width: 0; }
.detail-eyebrow { display: block; margin-bottom: 16px; font-size: 11px; letter-spacing: 2px; color: #92af9c; }
.focus-card { min-height: 288px; padding: 26px 23px; color: #1a3326; background: #f7faee; border: 1px solid #ecf7de; border-radius: 22px; box-shadow: 0 16px 44px #06140b30; }
.focus-label { display: block; font-size: 11px; font-weight: 650; letter-spacing: 1.3px; color: #55745c; margin-bottom: 20px; }
.focus-card h4 { font-size: 25px; letter-spacing: -.7px; line-height: 1.15; margin: 0 0 25px; font-weight: 650; }
.focus-check { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 14px; line-height: 1.45; padding: 12px 0; border-top: 1px solid #dce6d4; }
.focus-check svg { width: 19px; height: 19px; color: #307959; stroke-width: 2.2; }
.focus-card p { color: #66806a; font-size: 14px; line-height: 1.5; margin: 10px 0 0; }
.focus-contact { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.focus-contact strong { display: block; font-size: 20px; }
.focus-contact small { display: block; color: #68816d; font-size: 13px; margin-top: 5px; }
.focus-number { font-size: 42px; letter-spacing: -2px; font-weight: 650; color: #286a48; line-height: 1.1; margin-bottom: 20px; }
.focus-number small { font-size: 18px; letter-spacing: -.3px; font-weight: 500; }
.focus-pills { display: flex; gap: 6px; margin: 16px 0; }
.focus-pills span { flex: 1; font-size: 12px; text-align: center; padding: 10px 4px; border-radius: 8px; background: #e6eddc; color: #62805f; }
.focus-pills .chosen { background: #327b57; color: white; }
.focus-date { font-size: 26px; line-height: 1.3; letter-spacing: -.7px; margin: 0 0 15px; font-weight: 600; }
.focus-date small { display: block; color: #70866b; font-size: 14px; letter-spacing: 0; margin-bottom: 5px; }
.focus-tag { font-size: 12px; display: inline-flex; gap: 6px; align-items: center; background: #e2eecf; color: #426437; border-radius: 6px; padding: 6px 10px; }
.focus-tag svg { width: 13px; height: 13px; }
.focus-done { text-decoration: line-through; color: #82957d; }
.reel-chapters { grid-template-columns: repeat(6,minmax(0,1fr)); margin-top: 8px; gap: 12px; }
.reel-chapters button { display: flex; flex-direction: column; gap: 7px; text-align: left; color: #93ae9c; padding: 13px 0; min-height: 64px; border-color: #3c5845; font-size: 13px; }
.reel-chapters button > span { font-size: 11px; letter-spacing: 1px; color: #65846f; }
.reel-chapters button[aria-pressed=true] { color: #ebf7df; border-color: #c5e897; }
.reel-chapters button[aria-pressed=true] > span { color: #c5e897; }
.reel-chapters button:hover { color: #fff; }
.reel-bottom { margin-top: 4px; }
.reel-bottom button { color: #d8eac8; }
.reel-bottom > span { color: #a3bb9c; }
#tour-progress, #tour-progress::-webkit-progress-bar { background: #35533d; }
#tour-progress::-webkit-progress-value { background: #c8e79f; }
#tour-progress::-moz-progress-bar { background: #c8e79f; }
.reel-disclaimer { color: #93aa96; font-size: 11px; margin-bottom: 0; }
.phone-display { text-align: left; }
.phone-display svg { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.phone-toolbar > svg { width: 21px; height: 21px; }
.row-inner { padding-block: 10px; min-height: 74px; gap: 8px; }
.row-power { width: 27px; height: 27px; }
.row-text h3 { font-weight: 650; font-size: 14px; }
.row-check { border-width: 1.6px; }
.phone-tabs { background: #f9faf8f0; border-radius: 40px; border: 1px solid #e0e4df; padding: 7px 3px; margin: 3px 3px 0; }
.phone-tabs > span { color: #131b17; padding: 8px 1px; gap: 5px; }
.phone-tabs svg { width: 25px; height: 25px; }
.phone-tabs small { font-size: 10px; font-weight: 500; }
.phone-tabs > span.selected { background: #e3ece7; color: #27795e; }
.phone-page.page-enter { animation-duration: .28s; }
.phone-row { transition-duration: .28s,.2s; }
.phone-row.pre-created { max-height: 0; opacity: 0; }
.phone-row.newly-created .row-inner { background: #e2f1df; }
.phone-expand .inline-checklist { display: none; padding: 0 12px 13px; font-size: 12px; line-height: 1.5; }
.inline-checklist > span { display: flex; gap: 7px; align-items: center; margin-top: 7px; }
.inline-checklist svg { width: 15px; height: 15px; color: #b7c5b7; }
.inline-checklist .checked { color: #66826e; text-decoration: line-through; }
.inline-checklist .checked svg { color: #307b59; }
#reel-call.show-checklist { max-height: 315px; }
#reel-call.show-checklist .phone-expand { max-height: 235px; }
#reel-call.show-checklist .inline-checklist { display: block; }
.film-composer, .film-sharing { position: absolute; z-index: 4; inset: 0; background: #f2f2f7; overflow: hidden; padding: 0 12px 20px; border-radius: 18px 18px 0 0; animation: composer-arrive .35s cubic-bezier(.22,.8,.25,1) both; }
.film-composer[hidden], .film-sharing[hidden] { display: none; }
.composer-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 17px 0 22px; color: #357b60; font-size: 12px; }
.composer-nav strong { color: #181c19; font-size: 15px; }
.composer-card { border-radius: 18px; padding: 16px 13px; background: #fff; }
#reel-typed-title { display: block; color: #22312a; font-size: 16px; min-height: 24px; }
.composer-placeholder { display: block; color: #a5aaa6; font-size: 14px; padding: 14px 0 8px; margin-top: 12px; border-top: 1px solid #edefed; }
#reel-contact-prompt { display: flex; align-items: center; gap: 8px; border-radius: 11px; background: #e6f0e9; padding: 11px 8px; margin-top: 12px; color: #357158; }
#reel-contact-prompt[hidden] { display: none; }
#reel-contact-prompt strong { display: block; font-size: 13px; }
#reel-contact-prompt small { display: block; font-size: 11px; margin-top: 4px; }
#reel-contact-prompt > svg { width: 12px; height: 12px; margin-left: auto; }
.contact-icon svg { width: 22px; height: 22px; fill: currentColor; }
.composer-label { font-size: 12px; color: #858a85; margin: 20px 10px 10px; }
.composer-setting { display: flex; align-items: center; gap: 7px; padding: 8px 0 14px; font-size: 13px; }
.composer-setting + .composer-setting { border-top: 1px solid #ebeeeb; padding-top: 14px; }
.composer-setting svg { width: 19px; height: 19px; color: #357b60; }
.composer-setting strong { margin-left: auto; font-size: 13px; text-align: right; }
.composer-setting small { display: block; margin-top: 5px; font-size: 12px; color: #808780; font-weight: 400; }
.demo-toggle { display: block; width: 32px; height: 20px; background: #388362; border-radius: 20px; margin-left: auto; flex-shrink: 0; }
.demo-toggle::after { content: ''; display: block; height: 16px; width: 16px; border-radius: 50%; background: white; margin: 2px 2px 2px auto; }
.composer-presets { display: flex; gap: 4px; }
.composer-presets span { flex: 1; padding: 8px 2px; border-radius: 10px; font-size: 10px; background: #f1f3f1; text-align: center; }
.composer-details { display: flex; gap: 8px; }
.composer-details > span { display: flex; flex: 1; align-items: center; gap: 6px; flex-direction: column; padding: 12px 4px; border-radius: 11px; background: white; font-size: 11px; }
.composer-details svg { width: 21px; height: 21px; color: #357b60; }
.sharing-emblem { display: grid; place-items: center; width: 65px; height: 65px; border-radius: 20px; color: #387d61; background: #e0ede4; margin: 10px auto 16px; }
.sharing-emblem svg { width: 35px; height: 35px; stroke-width: 2; }
.film-sharing > h3 { font-size: 23px; text-align: center; margin: 0; letter-spacing: -.8px; }
.film-sharing > p { font-size: 12px; text-align: center; color: #738175; margin-bottom: 22px; }
.share-member { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.share-member + .share-member { border-top: 1px solid #ecf0eb; margin-top: 7px; padding-top: 14px; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: #dae8ce; color: #3b6444; font-size: 14px; font-weight: 650; }
.avatar.coral { background: #f6e0d4; color: #9a6041; }
.share-member strong, .share-member small { display: block; font-size: 13px; }
.share-member small { color: #839181; font-size: 11px; margin-top: 3px; }
.share-member svg { width: 18px; height: 18px; color: #337c58; margin-left: auto; }
.share-explainer { display: flex; align-items: center; gap: 9px; padding: 20px 4px; font-size: 12px; color: #758677; line-height: 1.5; }
.share-explainer svg { width: 22px; height: 22px; flex-shrink: 0; }
.share-action { padding: 13px; background: #367f5d; color: white; border-radius: 22px; font-size: 14px; font-weight: 600; text-align: center; }
.grocery-entry { display: flex; align-items: center; gap: 6px; padding: 11px 8px; background: #fff; border: 1px solid #e1e9e0; border-radius: 11px; font-size: 13px; margin: 5px 0 12px; }
.grocery-entry[hidden] { display: none; }
.grocery-entry svg { width: 17px; height: 17px; color: #3d8162; }
.grocery-entry strong { margin-left: auto; font-size: 10px; padding: 4px 5px; border-radius: 5px; color: #3b7952; background: #e5f0d9; }
#reel-berries[hidden] { display: none; }
#reel-berries.just-added { background: #e3f1d6; }
#reel-berries.moving { background: #ecf5e1; }
.alert-intervals { display: flex; gap: 5px; }
.alert-intervals span { padding: 8px 5px; text-align: center; flex: 1; background: #e8efe5; color: #577052; border-radius: 7px; }
.alert-intervals .selected { background: #367a59; color: white; }
.repeat-popover { padding: 17px 13px; background: #f7faf3; border-color: #d3e3cb; box-shadow: 0 15px 30px #0e26163b; }
.repeat-popover > div { padding: 11px 0; }
.film-final-card { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 17px; background: #f2f4ed; color: #21503b; text-align: center; padding: 25px; }
.film-final-card[hidden] { display: none; }
.film-final-card img { width: 88px; height: 88px; border-radius: 23px; }
.film-final-card strong { font-size: 35px; letter-spacing: -1.5px; }
.film-final-card p { font-size: 17px; line-height: 1.5; margin: 0; }
.film-final-card > span { font-size: 12px; color: #7a8f78; }
.product-reel.scene-change .focus-card, .product-reel.scene-change .reel-caption h3 { animation: film-enter .32s cubic-bezier(.22,.8,.25,1) both; }
@keyframes composer-arrive { from { transform: translateY(70px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes film-enter { from { transform: translateY(12px); opacity: .3; } to { transform: translateY(0); opacity: 1; } }
.product-reel[data-playing=false] * { animation: none; }
@media (max-width:1150px) { .hero-copy { column-gap: 40px; } .hero h1 { font-size: 56px; } .reel-stage { grid-template-columns: minmax(0,1fr) 320px; gap: 36px; padding: 25px 22px 20px; min-height: 700px; } .film-detail { display: none; } .reel-caption h3 { font-size: 47px; } .phone-device { width: 320px; } }
@media (max-width:950px) { .hero-copy { grid-template-columns: 1fr 1fr; column-gap: 30px; } .hero h1 { font-size: 47px; letter-spacing: -2.5px; } .hero-description { font-size: 17px; } .hero-buttons { flex-wrap: wrap; gap: 15px; } .film-duration { display: none; } .reel-stage { padding: 25px 0 10px; gap: 24px; } .reel-caption h3 { font-size: 38px; } .reel-caption h3 br { display: initial; } .reel-chapters { gap: 10px; } .reel-chapters button { font-size: 12px; } }
@media (max-width:760px) { .hero { padding-top: 24px; } .hero-copy { display: block; margin-bottom: 30px; text-align: center; } .hero-copy > .eyebrow { justify-content: center; font-size: 10px; letter-spacing: 1.4px; margin-bottom: 16px; } .hero h1 { font-size: clamp(38px,8.9vw,60px); letter-spacing: -2px; margin-bottom: 20px; } .hero-description { font-size: 16px; max-width: 390px; margin: 0 auto 20px; } .hero-buttons { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 18px; } .hero-buttons .button { padding: 14px 20px; font-size: 14px; } .hero-buttons .text-link { font-size: 13px; } .hero-buttons .play-icon { width: 30px; height: 30px; } .availability-note { margin-top: 17px; font-size: 11px; } .hero-stage.product-reel { width: calc(100% + 16px); max-width: none; margin-left: -8px; padding: 15px 14px 12px; border-radius: 25px; } .reel-topline { padding: 0 0 13px; } .reel-topline > span { font-size: 13px; gap: 7px; } .reel-topline img { width: 23px; height: 23px; border-radius: 6px; } .reel-topline button { min-height: 40px; font-size: 12px; padding: 8px 10px; } .reel-topline button svg { width: 13px; height: 13px; } .reel-stage { display: flex; flex-direction: column; gap: 18px; padding: 24px 0 10px; min-height: 0; } .reel-caption { order: 0; width: 100%; text-align: center; } .reel-caption > .film-chapter-number { display: none; } .reel-caption > #tour-caption-kicker { font-size: 9px; letter-spacing: 1px; min-height: 0; margin: 0 0 8px; } .reel-caption h3 { font-size: 33px; white-space: normal; line-height: 1.08; min-height: 72px; max-width: 300px; margin: 0 auto; letter-spacing: -1.3px; } .reel-caption h3 br { display: none; } .reel-caption p { font-size: 14px; min-height: 65px; max-width: 310px; margin: 10px auto 0; line-height: 1.5; } .film-benefit { display: none; } .phone-device { order: 1; width: 330px; max-width: 100%; margin: 0; } .film-detail { display: none; } .reel-chapters { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3px 12px; margin-top: 7px; } .reel-chapters button { min-height: 45px; padding: 9px 0; flex-direction: row; gap: 5px; align-items: center; font-size: 11px; } .reel-chapters button > span { font-size: 9px; } .reel-disclaimer { font-size: 10px; } }
@media (max-width:380px) { .hero h1 { font-size: 37px; } .hero-buttons { gap: 12px; } .hero-buttons .text-link { font-size: 12px; } .reel-caption h3 { font-size: 30px; } .reel-topline > span { font-size: 11px; } .phone-tabs small { font-size: 9px; } .phone-tabs svg { width: 23px; height: 23px; } .phone-tabs > span { padding-inline: 0; } .row-inner { gap: 6px; padding-inline: 7px; } .row-power { width: 24px; height: 24px; } .row-text h3 { font-size: 13px; } }
@media (prefers-reduced-motion:reduce) { .product-reel *, .product-reel *::before { animation: none !important; transition: none !important; } }

/* Readable labels, full-height sheets and playback within easy reach. */
.product-reel[data-modal=true] .phone-tabs { display: none; }
.phone-tabs small { font-size: 12px; letter-spacing: -.4px; }
.reel-caption > #tour-caption-kicker, .detail-eyebrow, .focus-label, .reel-chapters button > span,
.reel-disclaimer, .availability-note, .hero-copy > .eyebrow, #reel-contact-prompt small,
.composer-presets span, .composer-details > span, .share-member small, .grocery-entry strong { font-size: 12px; }
#tour-play-bottom { display: flex; gap: 7px; width: auto; min-width: 84px; padding-inline: 4px; font-size: 12px; }
.product-reel[data-step=shift-hour] .phone-shortcuts > span:first-child { background: #d3e8a9; color: #24593e; font-weight: 700; }
@container (max-width:300px) {
 .composer-nav { padding: 10px 0 16px; }
 .composer-card { padding: 12px 10px; }
 .composer-placeholder { padding: 10px 0 4px; margin-top: 8px; }
 .composer-label { margin: 16px 10px 9px; }
 .composer-setting { font-size: 12px; gap: 6px; }
 .composer-setting svg { width: 17px; height: 17px; }
 .composer-presets span { letter-spacing: -.4px; white-space: nowrap; }
 .film-sharing .sharing-emblem { width: 48px; height: 48px; margin: 0 auto 10px; }
 .film-sharing > h3 { font-size: 21px; }
 .film-sharing > p { margin-bottom: 14px; }
 .share-explainer { padding-block: 14px; }
}
@media (max-width:760px) {
 .reel-chapters button { font-size: 12px; min-height: 50px; }
 .reel-chapters button > span { display: none; }
 .reel-caption > #tour-caption-kicker { letter-spacing: .8px; }
 .reel-topline button { min-height: 44px; }
 .reel-topline > span { font-size: 12px; }
 .reel-disclaimer { font-size: 12px; max-width: 270px; margin: 0 auto; }
}