/* The product story: visual proof, generous rhythm, one job per section. */
:root{--story-ink:#202521;--story-muted:#707772;--story-line:#e7eae7;--story-green:#08734e}
.story-wrap{width:min(1180px,calc(100% - 96px));margin-inline:auto;color:var(--story-ink)}
.story-kicker{font-size:.75rem;line-height:1.6;font-weight:600;letter-spacing:.14em;margin:0 0 21px;color:#6d746f}
.story-heading{text-align:center;margin-bottom:54px}.story-heading h2{font-size:clamp(3.8rem,7.8vw,7.2rem);line-height:1.08;letter-spacing:-.075em;font-weight:500;margin:0 0 23px}.story-heading h2 em,.lab-content h2 em,.principles-intro h2 em,.browser-heading h2 em,.questions-layout h2 em{font-family:inherit;font-style:normal;font-weight:400;letter-spacing:-.055em}.story-heading h2>span{color:#10b981}.story-heading>p:last-child{font-size:1.125rem;color:#6d746e;margin:0;line-height:1.7}
.discovery-story{padding-block:94px 120px}.discovery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.discovery-step{min-width:0}.step-visual{height:256px;border-radius:18px;overflow:hidden;position:relative;background:#f3f5f3}.step-visual>svg{width:100%;height:100%;display:block}.paused-moment>svg{filter:brightness(.76)}.moment-pause{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:58px;height:58px;border:1px solid #ffffff8c;background:#ffffff14;backdrop-filter:blur(5px);border-radius:50%;display:flex;justify-content:center;align-items:center;gap:6px}.moment-pause i{height:17px;width:5px;border-radius:1px;background:white}.moment-caption{position:absolute;bottom:20px;left:20px;right:20px;color:white;font-size:.75rem;text-align:center;letter-spacing:.015em}.selected-moment{background:#f4eee5}.selected-moment>svg{width:76%;height:76%;position:absolute;left:12%;top:4%}.selection-outline{position:absolute;inset:14%;pointer-events:none}.selection-outline i{position:absolute;width:17px;height:17px;border:2px solid #10b981}.selection-outline i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}.selection-outline i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}.selection-outline i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}.selection-outline i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}.selected-moment .selection-outline{inset:17% 24% 29%}.selection-pill{position:absolute;bottom:23px;left:50%;transform:translateX(-50%);white-space:nowrap;display:flex;align-items:center;gap:9px;background:white;box-shadow:0 5px 20px #59381e0c;padding:10px 15px;border-radius:30px;font-size:.75rem}.selection-pill b{width:7px;height:7px;border-radius:50%;background:#10b981}.search-moment{background:#f0f3f7;display:flex;align-items:center;justify-content:center;padding:22px}.mini-search{width:100%;max-width:277px;background:#fff;border:1px solid #e3e7e9;border-radius:13px;padding:19px;box-shadow:0 10px 22px #24385709}.mini-search-label{display:block;font-size:.625rem;letter-spacing:.12em;color:#6d746f;margin-bottom:7px}.mini-search>strong{display:block;font-size:.875rem;font-weight:600;margin-bottom:17px}.mini-search>div{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #edf0ed;padding:11px 0;font-size:.75rem}.mini-search small{font-size:.6875rem;color:#08734e}.mini-search>p{font-size:.625rem;color:#6e746e;margin:6px 0 0}.step-copy{display:flex;gap:16px;padding:25px 5px 0}.step-copy>span{color:#6f746f;font-size:.75rem;padding-top:10px}.step-copy h3{font-size:2rem;letter-spacing:-.055em;font-weight:500;margin:0 0 10px}.step-copy p{font-size:.9375rem;line-height:1.7;color:#717872;margin:0}.story-text-link{display:block;width:max-content;max-width:100%;font-size:.875rem;color:#263c31;border-bottom:1px solid #97a39a;margin:44px auto 0;padding:8px 0}.story-text-link:hover{color:#08734e;border-color:#08734e}
.image-lab{display:grid;grid-template-columns:1.05fr 1fr;border-radius:23px;overflow:hidden;background:#f7f8f7;min-height:665px}.lab-visual{position:relative;min-height:100%;overflow:hidden}.lab-visual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 37%}.lab-visual-label{position:absolute;left:27px;top:27px;font-size:.6875rem;letter-spacing:.12em;font-weight:600;color:white;text-shadow:0 2px 12px #0006}.lab-focus{position:absolute;left:44%;top:30%;width:43%;height:39%;background:none;border:0;padding:0;border-radius:0}.lab-focus .selection-outline{inset:0}.lab-focus .selection-outline i{width:24px;height:24px;border-color:white;border-width:2px}.lab-focus-label{position:absolute;left:0;bottom:-21px;display:flex;align-items:center;justify-content:space-between;gap:16px;white-space:nowrap;background:#fff;color:#27392b;border-radius:7px;font-size:.75rem;padding:12px 13px;box-shadow:0 5px 20px #0001}.lab-focus-label>span{display:grid;place-items:center;width:18px;height:18px;font-size:1.1rem;color:#08734e}.lab-focus:hover .lab-focus-label{background:#e8fff2}.lab-example-note{position:absolute;left:27px;bottom:23px;color:white;font-size:.6875rem;text-shadow:0 1px 10px #0008}.lab-content{padding:53px 42px 40px;min-width:0}.lab-content h2{font-size:clamp(2.8rem,4.1vw,4.3rem);line-height:1.1;font-weight:500;letter-spacing:-.065em;margin:0 0 20px}.lab-description{color:#717872;font-size:1rem;line-height:1.7;max-width:350px;margin:0 0 29px}.lab-preview{display:flex;align-items:center;gap:18px;margin-bottom:26px}.lab-preview-image{width:79px;height:87px;border-radius:9px;overflow:hidden;flex-shrink:0;background:#e9e9e5;position:relative}.lab-preview-image img{position:absolute;width:200%;height:200%;object-fit:cover;left:-80%;top:-49%}.lab-preview>div:last-child>span{display:block;font-size:.625rem;letter-spacing:.11em;color:#818982;margin-bottom:7px}.lab-preview strong{font-size:.875rem;line-height:1.5;font-weight:600;display:block}.lab-preview small{display:block;font-size:.75rem;color:#7a817a;margin-top:6px}.lab-content .upload-card{max-width:none;background:white;padding:19px 20px;border:1px solid #e0e5de;border-radius:11px}.lab-content .upload-heading{gap:12px}.lab-content .upload-heading svg{width:23px;height:23px;color:#6b7d70}.lab-content .upload-heading strong{font-size:.875rem}.lab-content .upload-heading span{font-size:.75rem;color:#6d796f}.lab-content .upload-actions{margin-top:18px;gap:18px;flex-wrap:wrap}.lab-content .upload-actions .button{font-size:.8125rem;padding:12px 15px;border-radius:6px;min-height:45px}.lab-content .text-button{font-size:.8125rem}.lab-content .fine-print{font-size:.6875rem;margin-top:14px}.lab-content .preview-note{font-size:.75rem;line-height:1.65;margin:13px 2px 0;color:#7b847b}.lab-content .upload-card.dragging{border-color:#10b981;background:#f0fff7}
.lens-principles{padding-block:87px 108px;display:grid;grid-template-columns:.9fr 1.2fr;gap:65px;align-items:start}.principles-intro h2{font-size:2.65rem;line-height:1.18;font-weight:500;letter-spacing:-.06em;margin:0}.principle-columns{display:grid;grid-template-columns:1fr 1fr;gap:34px;padding-top:3px}.principle-symbol{display:grid;place-items:center;width:29px;height:29px;border:1px solid #bfe2ce;border-radius:50%;color:#08734e;font-size:1.3rem;margin-bottom:19px}.principle-symbol.neutral{border-color:#e0e4df;color:#6d756d}.principle-columns h3{font-size:1rem;font-weight:600;letter-spacing:-.015em;margin:0 0 12px}.principle-columns p{font-size:.875rem;line-height:1.85;color:#6d756e;margin:0}
.browser-destination{padding-block:95px 96px;border-top:1px solid #ebeeea;border-bottom:1px solid #ebeeea;background:#fff}.browser-heading{text-align:center;max-width:780px;margin:0 auto 46px}.browser-heading h2{font-size:clamp(2.8rem,4.6vw,4.5rem);line-height:1.13;font-weight:500;letter-spacing:-.062em;margin:0 0 24px}.browser-heading>p:last-child{max-width:450px;margin:0 auto;color:#6d756e;font-size:1rem;line-height:1.8}.browser-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px;max-width:930px;margin:auto}.browser-choice{border:1px solid #e5e9e3;border-radius:18px;overflow:hidden;display:grid;grid-template-columns:.88fr 1.2fr;background:white;min-width:0}.browser-choice-art{position:relative;min-height:310px;background:#f7f3fc;display:flex;justify-content:center;align-items:center;overflow:hidden}.chrome-choice .browser-choice-art{background:#f1f5fa}.browser-choice-art>img{width:94px;height:94px;filter:drop-shadow(0 13px 11px #4b25441a);transform:translateY(-9px)}.browser-mini-window{position:absolute;top:25px;left:16px;right:-20px;height:28px;background:#ffffffb8;border:1px solid #dfdbea;border-radius:7px 7px 0 0;display:flex;align-items:center;gap:4px;padding:0 9px;transform:rotate(-5deg);box-shadow:0 5px 16px #8978970a}.browser-mini-window i{width:4px;height:4px;border-radius:50%;background:#d5d5de}.browser-mini-window>span{font-size:.5625rem;color:#736f7a;margin-left:5px}.chrome-choice .browser-mini-window{transform:rotate(5deg);border-color:#dce3ea}.browser-brand-chip{position:absolute;bottom:43px;left:13px;right:13px;display:flex;align-items:center;gap:5px;justify-content:center;font-size:.625rem;background:#fffffff5;box-shadow:0 9px 20px #37445b0d;border:1px solid #e6e6ec;border-radius:9px;padding:6px}.browser-brand-chip img{width:39px;height:30px;object-fit:contain}.browser-choice-body{padding:38px 24px;min-width:0;display:flex;flex-direction:column;align-items:flex-start}.browser-choice-label{font-size:.5625rem;letter-spacing:.13em;color:#6d746d;display:block;margin-bottom:6px}.browser-choice-body h3{font-size:1.8rem;letter-spacing:-.045em;font-weight:600;margin:0}.browser-choice-body>p{font-size:.8125rem;line-height:1.7;color:#6e746d;margin:19px 0 24px}.browser-release{background:#233c2c;color:white;border:0;white-space:normal;text-align:center;width:100%;padding:12px 10px;font-size:.75rem;min-height:43px;border-radius:6px;margin-top:auto}.browser-release:hover{background:#33513c}.browser-pending{font-size:.625rem;line-height:1.6;color:#6d756b;display:block;margin-top:11px;text-align:center;width:100%}.browser-bottom-note{font-size:.8125rem;line-height:1.7;color:#6e756a;text-align:center;margin:29px 0 0}
.questions-layout{display:grid;grid-template-columns:.8fr 1.25fr;gap:80px;padding-block:88px 31px}.questions-layout h2{font-size:2.7rem;line-height:1.16;font-weight:500;letter-spacing:-.06em;margin:0}.questions-layout .faq-list{border-top:1px solid #e8ece6}.questions-layout .faq-list details{border-bottom:1px solid #e8ece6}.questions-layout .faq-list summary{font-size:.875rem;line-height:1.6;padding:21px 0;gap:18px;font-weight:500}.questions-layout .faq-list p{font-size:.8125rem;line-height:1.8;color:#6c756a;max-width:560px;padding-right:22px}.questions-layout .faq-list summary span{color:#6d756a}.walkthrough-extra{padding:0 0 72px}.walkthrough-extra .full-walkthrough{margin-left:auto;width:calc(61% - 12px);border:0;border-bottom:1px solid #e8ece6;border-radius:0;background:#fff}.walkthrough-extra .full-walkthrough>summary{font-size:.875rem;padding:20px 0}.walkthrough-extra .full-walkthrough>div{padding:5px 0 20px}.walkthrough-extra video{display:block;width:100%;height:auto;border-radius:10px}.walkthrough-extra .walkthrough-transcript summary,.walkthrough-extra .walkthrough-transcript p{font-size:.8125rem;line-height:1.7}.footer{border-top:1px solid #e9ede6;padding-block:30px;font-size:.75rem}.footer .brand{font-size:1.4rem}.footer>p{font-size:.875rem}.footer>div{font-size:.75rem}.browser-attribution{font-size:.625rem;color:#6e756a;line-height:1.6;margin-bottom:24px}.story-wrap :is(button,a):focus-visible{outline-color:#2166d6}
@media(min-width:1440px){.step-visual{height:275px}.image-lab{min-height:700px}.lab-content{padding:60px 48px}}
@media(max-width:1050px){.story-wrap{width:calc(100% - 56px)}.step-visual{height:220px}.step-copy{gap:12px}.lab-content{padding:38px 28px}.image-lab{grid-template-columns:1fr 1fr}.lab-content h2{font-size:3.1rem}.lens-principles{gap:35px;grid-template-columns:.85fr 1.2fr}.principles-intro h2{font-size:2.35rem}.principle-columns{gap:25px}.browser-choice-body{padding:28px 18px}.browser-choice-art>img{width:80px;height:80px}.browser-choice{grid-template-columns:.8fr 1.2fr}.browser-choice-body>p{font-size:.75rem}.questions-layout{gap:45px}.walkthrough-extra .full-walkthrough{width:calc(61% - 5px)}}
@media(max-width:760px){.story-wrap{width:calc(100% - 40px)}.discovery-story{padding-block:64px 72px}.story-heading{margin-bottom:33px}.story-heading h2{font-size:clamp(3.5rem,10vw,5.5rem)}.story-heading>p:last-child{font-size:1rem}.discovery-grid{gap:13px}.step-visual{height:180px;border-radius:12px}.moment-caption{font-size:.625rem;bottom:13px;left:10px;right:10px}.moment-pause{width:46px;height:46px}.selection-pill{font-size:.625rem;padding:9px 11px;bottom:17px}.search-moment{padding:12px}.mini-search{padding:12px}.mini-search>strong{font-size:.6875rem;margin-bottom:10px}.mini-search-label{font-size:.5rem}.mini-search>div{font-size:.625rem;padding:8px 0}.mini-search small{font-size:.5625rem}.mini-search>p{font-size:.5rem}.step-copy{gap:8px;padding-top:19px}.step-copy h3{font-size:1.55rem}.step-copy p{font-size:.8125rem}.step-copy>span{font-size:.625rem;padding-top:7px}.image-lab{grid-template-columns:1fr;max-width:570px}.lab-visual{height:460px;min-height:0}.lab-visual>img{object-position:center 40%}.lab-focus{top:31%;height:43%}.lab-content{padding:38px 30px}.lab-content h2{font-size:3.5rem}.lab-description{max-width:380px}.lens-principles{grid-template-columns:1fr;gap:36px;padding-block:66px 73px;max-width:570px}.principles-intro h2{font-size:2.7rem}.principle-columns{gap:30px}.browser-destination{padding-block:66px}.browser-heading h2{font-size:3.2rem}.browser-choice-grid{max-width:570px;gap:16px}.browser-choice{display:block}.browser-choice-art{min-height:185px}.browser-choice-art>img{width:75px;height:75px;transform:translateY(-6px)}.browser-mini-window{top:18px}.browser-brand-chip{bottom:14px;left:25px;right:25px}.browser-choice-body{padding:25px 21px;min-height:255px}.browser-choice-body>p{font-size:.8125rem}.browser-release{font-size:.75rem}.questions-layout{grid-template-columns:1fr;gap:31px;padding-top:66px;max-width:570px}.questions-layout h2{font-size:2.6rem}.questions-layout h2 br{display:none}.questions-layout h2 em:before{content:' '}.walkthrough-extra{max-width:570px;padding-bottom:50px}.walkthrough-extra .full-walkthrough{width:100%}.footer{gap:20px}.footer>p{display:none}.footer>div{gap:15px}}
@media(max-width:520px){.story-wrap{width:calc(100% - 36px)}.story-kicker{font-size:.625rem;letter-spacing:.12em;margin-bottom:18px}.story-heading h2{font-size:clamp(3.1rem,12vw,4.1rem);letter-spacing:-.07em}.discovery-grid{grid-template-columns:1fr;gap:19px}.discovery-step{display:grid;grid-template-columns:46% 1fr;gap:21px;align-items:center}.step-visual{height:165px;border-radius:11px}.step-copy{padding:0;gap:10px}.step-copy h3{font-size:1.8rem;margin-bottom:8px}.step-copy p{font-size:.8125rem}.step-copy>span{font-size:.625rem;padding-top:9px}.step-copy p br{display:none}.moment-caption{font-size:.625rem;line-height:1.4}.selected-moment>svg{height:82%;width:90%;left:5%;top:0}.selected-moment .selection-outline{inset:12% 17% 28%}.selection-pill{font-size:.625rem;padding:8px 10px;gap:6px;bottom:12px}.search-moment{padding:10px}.mini-search{padding:10px;border-radius:8px}.mini-search>strong{font-size:.625rem;margin-bottom:8px;line-height:1.5}.mini-search>div{padding:7px 0}.mini-search>p{font-size:.5rem;line-height:1.4}.mini-search-label{font-size:.45rem;letter-spacing:.07em}.story-text-link{margin-top:29px}.lab-visual{height:390px}.lab-visual-label{left:22px;top:24px;font-size:.625rem}.lab-focus{left:44%;top:31%;height:43%}.lab-focus-label{font-size:.625rem;gap:10px;padding:10px}.lab-content{padding:31px 23px}.lab-content h2{font-size:3.1rem}.lab-description{font-size:.9375rem}.lab-preview{margin-bottom:23px}.lab-content .upload-card{padding:17px 16px}.lab-content .upload-heading span{font-size:.6875rem}.lab-content .upload-actions{gap:15px}.lab-content .upload-actions .button,.lab-content .text-button{font-size:.75rem}.lab-content .preview-note{font-size:.6875rem}.principles-intro h2{font-size:2.4rem}.principle-columns{gap:22px}.principle-columns p{font-size:.8125rem}.principle-columns h3{font-size:.875rem}.browser-heading h2{font-size:clamp(2.4rem,9vw,3rem)}.browser-heading>p:last-child{font-size:.9375rem;max-width:330px}.browser-choice-grid{grid-template-columns:1fr;max-width:400px}.browser-choice{display:grid;grid-template-columns:.8fr 1.2fr}.browser-choice-art{min-height:270px}.browser-brand-chip{left:10px;right:10px;bottom:42px;font-size:.5625rem}.browser-mini-window{top:28px}.browser-choice-art>img{width:80px;height:80px}.browser-choice-body{padding:29px 19px;min-height:0}.browser-choice-body h3{font-size:1.7rem}.browser-choice-body>p{font-size:.75rem;line-height:1.8}.browser-pending{font-size:.5625rem}.browser-release{font-size:.6875rem;padding:12px 7px}.browser-bottom-note{max-width:290px;margin-inline:auto;font-size:.75rem}.questions-layout h2{font-size:2.3rem}.questions-layout .faq-list summary{font-size:.8125rem}.footer{padding-block:25px;flex-wrap:wrap}.footer>div{width:100%;justify-content:space-between}.browser-attribution{font-size:.625rem}}
@media(max-width:350px){.story-wrap{width:calc(100% - 28px)}.discovery-step{gap:14px;grid-template-columns:43% 1fr}.step-copy{gap:7px}.step-copy h3{font-size:1.6rem}.step-visual{height:158px}.step-copy p{font-size:.75rem}.lab-content{padding:29px 19px}.lab-content .upload-actions{gap:13px}.browser-choice-body{padding:26px 15px}.browser-choice-body h3{font-size:1.5rem}.browser-choice-art>img{width:67px;height:67px}.browser-brand-chip{gap:0;font-size:.5rem}.browser-brand-chip img{width:31px}.browser-release{font-size:.625rem}.principle-columns{grid-template-columns:1fr;gap:26px}}
@media(prefers-reduced-motion:reduce){.story-wrap *{scroll-behavior:auto;transition:none!important}.lab-focus:hover .lab-focus-label{transform:none}}
/* Keep useful copy and actions legible at every breakpoint. */
.story-kicker{font-size:.75rem}.step-copy p,.principle-columns p{font-size:1rem}.principle-columns h3{font-size:1rem}.lab-content .upload-heading strong{font-size:1rem}.lab-content .upload-heading span,.lab-content .upload-actions .button,.lab-content .text-button{font-size:.875rem}.lab-content .fine-print{font-size:.75rem}.lab-content .preview-note{font-size:.8125rem}.lab-focus-label{font-size:.75rem}.browser-choice-label{font-size:.75rem;letter-spacing:.1em}.browser-choice-body>p{font-size:.875rem}.browser-release{font-size:.875rem;min-height:46px}.browser-pending{font-size:.75rem;line-height:1.6}.browser-bottom-note{font-size:.875rem}.questions-layout .faq-list summary,.walkthrough-extra .full-walkthrough>summary{font-size:1rem}.questions-layout .faq-list p,.walkthrough-extra .walkthrough-transcript p{font-size:.9375rem}.walkthrough-extra .walkthrough-transcript summary{font-size:.875rem}.footer>div{font-size:.875rem}.browser-attribution{font-size:.75rem}.browser-choice-body{min-height:326px}.browser-choice-art{min-height:326px}.step-copy p{line-height:1.6}.mini-search-label,.mini-search>p{font-size:.75rem}.mini-search>strong{font-size:.875rem}.mini-search>div,.mini-search small{font-size:.75rem}.mini-search{padding:16px}.lab-preview>div:last-child>span{font-size:.75rem}.browser-choice-body>p br{display:none}
@media(max-width:760px){.browser-choice-body{min-height:326px}.browser-choice-art{min-height:185px}.step-copy p{font-size:.9375rem}.lab-content .upload-card{padding:18px}.search-moment{padding:12px}.mini-search{padding:12px}.mini-search-label,.mini-search>p{font-size:.625rem}.mini-search>strong{font-size:.75rem}.mini-search>div,.mini-search small{font-size:.6875rem}}
@media(max-width:520px){.browser-choice-body{padding:29px 19px;min-height:300px}.browser-choice-art{min-height:300px}.browser-release{font-size:.8125rem}.browser-choice-body>p{font-size:.875rem}.browser-pending{font-size:.75rem}.step-copy p{font-size:.875rem}.story-heading>p:last-child{font-size:1rem}.lab-content .upload-actions .button,.lab-content .text-button{font-size:.8125rem}.lab-description{font-size:1rem}.principle-columns p{font-size:.9375rem}.questions-layout .faq-list p{font-size:.9375rem}.mini-search{padding:9px}.mini-search-label,.mini-search>p{font-size:.5625rem}.mini-search>strong{font-size:.6875rem}.mini-search>div,.mini-search small{font-size:.625rem}.lab-focus-label{font-size:.6875rem}.lab-content .upload-actions{gap:14px}.browser-choice-label{font-size:.625rem}.browser-release{padding:12px 9px}}
@media(max-width:350px){.browser-choice{grid-template-columns:1fr}.browser-choice-art{min-height:180px}.browser-choice-body{min-height:280px}.browser-brand-chip{bottom:16px;left:35px;right:35px}.browser-brand-chip img{width:39px}.browser-brand-chip{font-size:.625rem}.browser-mini-window{top:16px}.browser-choice-body{padding:26px}.browser-release{font-size:.875rem}.browser-choice-label{font-size:.75rem}.step-copy p{font-size:.8125rem}}
