.story-hero{display:grid;grid-template-columns:minmax(0,560px) minmax(0,360px);gap:56px;justify-content:center;align-items:center;padding:48px 0 72px}.story-copy h1{font:750 clamp(48px,5.2vw,72px)/1.04 Bricolage,Arial,sans-serif;letter-spacing:-3px;margin:0 0 26px;max-width:580px}.story-intro{font-size:19px;line-height:1.65;color:var(--muted);max-width:525px;margin:0}.story-actions{margin-top:30px}.story-actions p{font-size:14px;color:var(--muted);margin:12px 0 0}.story-secondary{display:inline-flex;gap:12px;font-weight:600;margin-top:24px;text-decoration:underline;text-underline-offset:5px}.story-device{margin:0;min-width:0}.story-device>figcaption{font:650 17px Bricolage,Arial,sans-serif;text-align:center;padding:12px 14px;border:1px dashed #8d9da8;border-radius:12px;transform:rotate(-2deg);margin:0 auto 24px;width:max-content;max-width:100%;background:#f8edb9}.story-device-stage{display:flex;justify-content:center;background:#edf0e8;border-radius:42% 46% 41% 47%;padding:14px 22px}.story-device .iphone-17{width:260px;max-width:90%;flex-shrink:0;transform:rotate(3deg);border-radius:46px;padding:6px;aspect-ratio:1206/2622}.story-device .iphone-17 img{border-radius:38px;height:100%;object-fit:cover}.story-section-heading{max-width:820px;margin-bottom:60px}.story-section-heading .eyebrow{font-size:16px;text-transform:none;letter-spacing:0;color:var(--denim);margin:0 0 18px}.story-section-heading .story-example-title{font-size:clamp(36px,4.6vw,60px);line-height:1.08}.story-section-heading>p:last-child{max-width:730px;font-size:18px;color:var(--muted);line-height:1.7;margin-top:24px}.story-action{padding:70px 0 80px;border-top:1px solid var(--line)}.story-benefit{display:grid;grid-template-columns:minmax(0,380px) minmax(0,510px);gap:80px;justify-content:center;align-items:center;margin:0 0 60px}.story-benefit h3{font-size:34px;line-height:1.12;letter-spacing:-1px;max-width:370px}.story-benefit-copy>p{font-size:18px;color:var(--muted);line-height:1.65;margin:16px 0 0;max-width:350px}.story-number{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px dashed #8e9eae;background:#e4eaf3;border-radius:13px;font:700 19px Bricolage,Arial,sans-serif;margin-bottom:22px;transform:rotate(-5deg)}.story-product-view{margin:0;min-width:0}.screen-window{position:relative;width:100%;aspect-ratio:943/650;overflow:hidden;border:1px solid #dddcd2;border-radius:22px;background:#f8f7f1;box-shadow:0 12px 30px #2023210a}.screen-window img{position:absolute;display:block;width:100%;height:auto;max-width:none;top:0;left:0}.full img{transform:translateY(-6%)}.spend img{transform:translateY(-36%)}.renewals img{transform:translateY(-61%)}.story-product-view figcaption{font-size:13px;color:var(--muted);margin-top:10px;text-align:center}.story-action>.text-link{display:block;width:max-content;max-width:100%;margin:0 auto;font-size:16px}.story-how{background:#eaf0e2;padding:76px 0 80px}.story-how h2{font-size:clamp(36px,4.5vw,56px)}.story-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;padding:0;list-style:none;margin:44px 0 0}.story-steps h3{font-size:25px;line-height:1.2}.story-steps p{font-size:17px;line-height:1.7;color:#58604f;margin:14px 0 0}.story-steps .story-number{background:#fffefa}.story-closing{text-align:center;padding:84px 0 90px;max-width:850px}.story-closing>img{transform:rotate(-7deg);margin-bottom:24px}.story-closing h2{font-size:clamp(36px,4.5vw,56px);max-width:750px;margin:auto}.story-closing p{font-size:18px;color:var(--muted);margin:24px 0}.homepage-story .button{font-size:17px}
@media(max-width:999px){.story-hero{grid-template-columns:1.2fr 1fr;gap:30px}.story-copy h1{font-size:52px;letter-spacing:-2px}.story-benefit{gap:36px;grid-template-columns:1fr 1.3fr}.story-steps{gap:28px}.story-steps h3{font-size:23px}}
@media(max-width:760px){.story-hero{grid-template-columns:1fr;gap:36px;padding:34px 0 48px}.story-copy h1{font-size:clamp(43px,9vw,60px);letter-spacing:-1.8px;max-width:540px}.story-intro{font-size:17px}.story-device{width:min(360px,100%);margin:auto}.story-device .iphone-17{width:240px}.story-device>figcaption{font-size:16px}.story-action{padding:48px 0}.story-section-heading{margin-bottom:36px}.story-section-heading>p:last-child{font-size:17px}.story-benefit{grid-template-columns:1fr;gap:22px;margin-bottom:42px}.story-benefit h3{font-size:29px}.story-benefit-copy>p{max-width:none;font-size:17px}.story-number{margin-bottom:16px}.story-product-view{max-width:510px;width:100%;margin:auto}.story-steps{grid-template-columns:1fr;gap:30px}.story-how{padding:48px 0}.story-closing{padding:58px 0}.story-closing p{font-size:17px}.story-steps p{margin-top:10px}}

.full .screen-window{aspect-ratio:943/620}.spend .screen-window{aspect-ratio:943/520}.renewals .screen-window{aspect-ratio:943/430}

.story-closing .story-friend-cta{font-size:16px;color:var(--ink);margin:22px auto 0;max-width:460px;line-height:1.6}

/* Two quiet input-method rows, rather than action buttons. */
.unified-flow>li>.input-method-label,.manual-inputs .input-method-label{font-size:14px;font-weight:600;line-height:1.4;margin:19px 0 10px;color:var(--ink)}
.unified-flow .flow-connections{align-items:center;gap:16px;margin-top:0;min-height:24px}
.unified-flow .flow-connections img{width:24px;height:24px;object-fit:contain;flex-shrink:0}
.unified-flow .flow-connections img[src="/globe.svg"]{width:19px;height:19px;opacity:.65;margin:0 2px}
.capture-icon-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.capture-icon-row li{display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--denim)}
.capture-icon-row span{font-size:14px;line-height:1.4;color:var(--muted)}
.manual-inputs{margin-top:20px;padding-top:1px;border-top:1px solid #dce1d4}
@media(max-width:760px){.unified-flow .flow-connections{gap:14px}.unified-flow .flow-connections img{width:22px;height:22px}.unified-flow .flow-connections img[src="/globe.svg"]{width:18px;height:18px}}

.unified-flow .flow-connections{justify-content:space-between;width:100%;gap:10px;flex-wrap:nowrap}

/* Keep the hero invitation above the fold; the example wears a paper label. */
.story-hero{align-items:start;padding-top:28px}
.story-copy{padding-top:10px}
.story-copy h1{margin-bottom:20px}
.story-actions{margin-top:22px}
.story-secondary{margin-top:18px}
.story-device>figcaption{position:relative;z-index:3;border:1px solid #e7dca9;border-radius:3px;padding:11px 14px;margin:0 auto -18px;box-shadow:5px 9px 10px -7px #39332166;transform:rotate(-2deg)}
@media(max-width:760px){.story-hero{padding-top:24px}.story-copy{padding-top:0}.story-copy h1{margin-bottom:18px}.story-secondary{margin-top:16px}}

.story-secondary{align-items:center;gap:14px;min-height:44px;padding:5px 6px 5px 16px;border:1px solid #dedfd6;border-radius:999px;background:#f5f5ed;text-decoration:none;font-size:15px;line-height:1.3;box-sizing:border-box;transition:background .18s,border-color .18s}
.story-secondary span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#e5eadf;font-size:21px;line-height:1;transition:transform .18s}
.story-secondary:hover{background:#edf0e5;border-color:#b8c2ae;text-decoration:none}
.story-secondary:hover span{transform:translateY(2px)}
.story-secondary:focus-visible{outline:3px solid var(--denim);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.story-secondary,.story-secondary span{transition:none}.story-secondary:hover span{transform:none}}

/* A renewal notification makes the advance warning visible. */
.renewal-preview{padding:30px 26px 26px;border:1px solid #d8decf;border-radius:26px;background:radial-gradient(ellipse at 90% 0%,#f7edbd80,transparent 60%),#edf0e6}
.renewal-kicker{font-size:12px;letter-spacing:1.2px;font-weight:650;color:#58664c;margin:0 0 22px}
.renewal-notification{display:flex;gap:13px;align-items:flex-start;padding:20px;border:1px solid #fff;border-radius:21px;background:#ffffffcf;box-shadow:0 12px 26px #35452d12;transform:rotate(-1.5deg)}
.renewal-notification>img{width:48px;height:48px;flex-shrink:0;border-radius:12px}
.renewal-notification>div{min-width:0;flex:1}
.renewal-notification-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;margin-bottom:7px}
.renewal-notification-meta>span{color:var(--muted);font-size:12px}
.renewal-notification h4{font:700 21px/1.2 Bricolage,Arial,sans-serif;letter-spacing:-.3px;margin:0 0 8px}
.renewal-notification p{font-size:14px;line-height:1.5;margin:0;color:#535a50}
.renewal-timeline{display:grid;grid-template-columns:1fr auto 1fr;position:relative;margin:32px 4px 0;padding-top:0;gap:8px}
.renewal-timeline:before{content:"";position:absolute;top:7px;left:7px;right:7px;height:2px;background:#bcc7b2}
.renewal-milestone{display:flex;flex-direction:column;align-items:flex-start;gap:5px;position:relative;font-size:12px;color:#58604f}
.renewal-milestone:last-child{align-items:flex-end;text-align:right}
.renewal-dot{width:12px;height:12px;border:2px solid #527142;background:#527142;border-radius:50%;margin-bottom:7px}
.renewal-milestone:last-child .renewal-dot{background:#edf0e6}
.renewal-milestone>strong{font-size:14px;color:var(--ink)}
.renewal-time{position:relative;align-self:start;margin-top:-4px;padding:3px 9px;border-radius:10px;background:#edf0e6;color:#526448;font-size:12px;font-weight:600;white-space:nowrap}
.renewal-payoff{font:650 19px/1.3 Bricolage,Arial,sans-serif;margin:26px 0 0;text-align:center;letter-spacing:-.2px}
@media(max-width:760px){.renewal-preview{padding:24px 18px}.renewal-notification{padding:16px;gap:10px}.renewal-notification>img{width:38px;height:38px;border-radius:9px}.renewal-notification h4{font-size:20px}.renewal-time{font-size:11px;padding-inline:5px}.renewal-timeline{margin-inline:0;gap:4px}.renewal-milestone{font-size:11px}.renewal-payoff{font-size:18px}}