:root {
  --ink: #143f38;
  --ink-2: #23594e;
  --forest: #0e3932;
  --cream: #f7f2ea;
  --paper: #fffcf6;
  --sand: #eee3d0;
  --mint: #cae7d8;
  --leaf: #a6d7b3;
  --coral: #fa926e;
  --line: rgba(20, 63, 56, 0.14);
  --serif: "Fraunces", Georgia, serif;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.section { padding: 128px 0; }
.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; }
.skip-link { position: fixed; z-index: 100; top: -60px; left: 20px; padding: 10px 16px; background: var(--paper); border: 1px solid var(--ink); border-radius: 8px; }
.skip-link:focus { top: 20px; }

.site-header { position: absolute; z-index: 10; top: 0; left: 0; width: 100%; padding: 24px 0; transition: background .25s, box-shadow .25s, padding .25s; }
.site-header.is-scrolled { position: fixed; padding: 13px 0; background: rgba(255, 252, 246, .9); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(14px); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; letter-spacing: -.6px; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; overflow: hidden; border-radius: 10px 10px 10px 3px; background: var(--ink); }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; }
.nav-links > a:not(.nav-cta) { opacity: .78; transition: opacity .2s; }
.nav-links > a:not(.nav-cta):hover { opacity: 1; }
.nav-cta { padding: 11px 16px; border: 1px solid var(--ink); border-radius: 9px; transition: background .2s, color .2s; }
.nav-cta:hover { color: var(--paper); background: var(--ink); }
.menu-toggle { display: none; border: 0; padding: 8px; background: transparent; }

.hero { position: relative; overflow: hidden; padding: 148px 0 80px; background: var(--cream); isolation: isolate; }
.hero::before { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(rgba(20,63,56,.1) .7px, transparent .7px); background-size: 14px 14px; opacity: .45; content: ""; mask-image: linear-gradient(to bottom, #000 40%, transparent 95%); }
.hero-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(1px); }
.hero-orb-one { width: 380px; height: 380px; top: -150px; left: -180px; background: #f5cf8b; opacity: .55; }
.hero-orb-two { width: 440px; height: 440px; right: -220px; bottom: -260px; background: var(--leaf); opacity: .5; }
.hero-grid { display: grid; grid-template-columns: .96fr 1.04fr; align-items: center; min-height: 610px; gap: 30px; }
.hero-copy { max-width: 620px; padding: 34px 0 60px; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; color: var(--ink); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; }
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(250,146,110,.17); }
.eyebrow-dark { color: var(--ink-2); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 650px; margin-bottom: 25px; font-family: var(--serif); font-size: clamp(48px, 5vw, 76px); font-weight: 600; letter-spacing: -.065em; line-height: .99; }
h1 em { position: relative; display: inline-block; color: #dc6f50; font-style: italic; }
h1 em::after { position: absolute; right: 0; bottom: -5px; left: 5px; height: 7px; border-radius: 50%; background: #f2bd81; content: ""; transform: rotate(-1deg); z-index: -1; }
.hero-text { max-width: 530px; margin-bottom: 29px; color: rgba(20,63,56,.78); font-size: 18px; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-qr { display: grid; place-items: center; width: 110px; height: 110px; padding: 8px; border: 1px solid rgba(20,63,56,.18); border-radius: 14px; background: #fff; box-shadow: 0 8px 18px rgba(20,63,56,.1); transition: transform .2s, box-shadow .2s; }
.hero-qr:hover { box-shadow: 0 11px 23px rgba(20,63,56,.16); transform: translateY(-2px); }
.hero-qr img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 54px; padding: 13px 20px; border-radius: 10px; font-size: 15px; font-weight: 700; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--paper); background: var(--ink); box-shadow: 0 8px 0 rgba(20,63,56,.15); }
.button-primary:hover { background: #0b2e28; box-shadow: 0 10px 0 rgba(20,63,56,.13); }
.apple-mark { position: relative; width: 13px; height: 15px; overflow: hidden; border-radius: 48% 48% 48% 48%; font-size: 0; background: currentColor; }
.apple-mark::before { position: absolute; top: -5px; right: 0; width: 7px; height: 7px; border-top: 2px solid currentColor; content: ""; transform: rotate(-28deg); }
.apple-mark::after { position: absolute; top: -2px; left: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); content: ""; }
.text-link { display: inline-flex; gap: 8px; align-items: center; border-bottom: 1px solid var(--ink); padding-bottom: 3px; font-size: 14px; font-weight: 700; }
.microcopy { display: flex; align-items: center; gap: 7px; margin: 27px 0 0; color: rgba(20,63,56,.64); font-size: 12px; }
.microcopy span { color: var(--coral); }

.hero-visual { position: relative; display: grid; min-height: 610px; place-items: center; }
.sunburst { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(250,146,110,.17) 0deg 5deg, transparent 5deg 16deg); opacity: .6; }
.phone { position: relative; z-index: 2; width: 300px; height: 650px; overflow: hidden; padding: 0; border: 6px solid #183e38; border-radius: 42px; background: #183e38; box-shadow: 17px 22px 0 rgba(20,63,56,.15), 0 24px 40px rgba(20,63,56,.18); transform: rotate(4deg); }
.phone::before { display: none; }
.phone-screenshot { display: block; width: 100%; height: 100%; object-fit: cover; }
.phone-speaker { display: none; }
.phone-screen { height: 100%; overflow: hidden; padding: 14px 14px 9px; border-radius: 29px; background: #faf6ef; }
.app-status { display: flex; justify-content: space-between; padding: 0 5px; color: #24483f; font-size: 8px; font-weight: 700; }
.app-heading { display: flex; justify-content: space-between; align-items: center; margin: 24px 2px 17px; }
.app-heading p { margin-bottom: 3px; color: #789187; font-family: var(--mono); font-size: 7px; font-weight: 500; letter-spacing: .1em; }
.app-heading h2 { margin: 0; font-size: 20px; letter-spacing: -.8px; }.app-heading h2 span { color: #e1785a; }.pet-avatar { display: grid; place-items: center; width: 43px; height: 43px; overflow: hidden; border: 2px solid #e9c078; border-radius: 14px; background: #f9dd98; font-size: 26px; }
.health-card { padding: 14px; border-radius: 13px; color: #fdfaf2; background: #1c5a4e; box-shadow: 0 8px 14px rgba(14,57,50,.14); }.card-topline { display: flex; justify-content: space-between; margin-bottom: 14px; font-family: var(--mono); font-size: 6px; letter-spacing: .08em; }.safe-dot { color: #d9eea6; letter-spacing: 0; }.safe-dot::first-letter { color: #a7d774; }.progress-line { height: 5px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.18); }.progress-line span { display: block; width: 88%; height: 100%; border-radius: inherit; background: #d4e996; }.health-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 14px; }.health-stats div { display: grid; gap: 1px; }.health-stats b { font-size: 15px; line-height: 1; }.health-stats span { color: rgba(255,255,255,.67); font-size: 7px; }
.section-label { margin: 19px 3px 8px; color: #789187; font-family: var(--mono); font-size: 7px; letter-spacing: .11em; }.reminder-card, .record-row { display: flex; align-items: center; gap: 9px; padding: 10px 7px; border-bottom: 1px solid #e7e4dc; }.reminder-card div, .record-row div { flex: 1; }.reminder-card b, .record-row b { display: block; font-size: 10px; letter-spacing: -.3px; }.reminder-card small, .record-row small { display: block; margin-top: 2px; color: #779087; font-size: 7px; }.calendar-icon { display: grid; place-items: center; width: 25px; height: 27px; border-radius: 6px; color: #b5553c; background: #f9e3d7; font-family: var(--mono); font-size: 9px; font-weight: 700; }.chevron { color: #a4afa9; font-size: 20px; }.record-icon { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; color: #1d6858; background: #d8efe3; font-size: 16px; }.record-check { color: #57a572; font-weight: 700; }.app-tabs { display: flex; justify-content: space-around; margin: 18px -7px 0; color: #93a09a; font-size: 14px; }.app-tabs span { display: grid; place-items: center; gap: 1px; }.app-tabs span:first-child { color: #1d6858; }.app-tabs small { font-size: 6px; }
.floating-note { position: absolute; z-index: 4; display: flex; align-items: center; gap: 8px; width: max-content; padding: 10px 13px 10px 10px; border: 1px solid rgba(20,63,56,.07); border-radius: 12px; background: rgba(255,252,246,.93); box-shadow: 0 12px 25px rgba(20,63,56,.13); backdrop-filter: blur(6px); }.floating-note b { display: block; font-size: 10px; line-height: 1.2; }.floating-note small { display: block; margin-top: 2px; color: #6b8179; font-size: 8px; }.note-icon { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; font-size: 15px; font-weight: 700; }.note-record { top: 118px; left: 20px; transform: rotate(-3deg); }.note-record .note-icon { color: #bd583d; background: #f8dacb; }.note-scan { right: 4px; bottom: 117px; transform: rotate(3deg); }.note-scan .note-icon { color: #1a725b; background: #d5eddb; }.paw { position: absolute; z-index: 1; color: #e1785a; font-size: 24px; opacity: .8; }.paw-one { top: 74px; right: 55px; transform: rotate(17deg); }.paw-two { bottom: 80px; left: 45px; color: #78b48b; transform: rotate(-19deg); }

.trust-strip { padding: 20px 0; color: var(--paper); background: var(--ink); }.trust-items { display: flex; align-items: center; justify-content: center; gap: 26px; }.trust-items p { margin: 0; font-size: 13px; font-weight: 500; }.trust-items span { width: 5px; height: 5px; border-radius: 50%; background: var(--coral); }
.section-intro { display: grid; grid-template-columns: 1.14fr .75fr; gap: 35px 90px; max-width: 950px; margin-bottom: 64px; }.section-intro .eyebrow { grid-column: 1 / -1; margin-bottom: -7px; }.section-intro h2, .story-copy h2, .moments-heading h2, .cta-content h2 { margin: 0; font-family: var(--serif); font-size: clamp(35px, 4vw, 55px); font-weight: 600; letter-spacing: -.058em; line-height: 1.05; }.section-intro > p:last-child { align-self: end; margin: 0; color: rgba(20,63,56,.75); font-size: 16px; line-height: 1.65; }
.feature-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; align-items: stretch; }.feature-card { position: relative; display: flex; flex-direction: column; min-height: 486px; overflow: hidden; padding: 29px; border: 1px solid var(--line); border-radius: 14px; background: #f5ead7; }.feature-card-mint { background: var(--mint); }.feature-card-sand { background: #f2dbc5; }.feature-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 38px; border-radius: 13px; color: var(--paper); background: var(--ink); font-size: 22px; }.icon-bell { background: #317b65; }.icon-chart { background: #c96748; }.card-kicker { margin-bottom: 10px; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .11em; }.feature-card h3 { max-width: 340px; margin-bottom: 11px; font-family: var(--serif); font-size: 28px; font-weight: 600; letter-spacing: -.04em; line-height: 1.08; }.feature-card > p:not(.card-kicker) { max-width: 355px; margin: 0; color: rgba(20,63,56,.75); font-size: 14px; line-height: 1.58; }.mini-document { position: absolute; right: 23px; bottom: -14px; left: 23px; height: 178px; padding: 17px; border: 1px solid rgba(20,63,56,.18); border-radius: 12px 12px 0 0; background: #fffcf5; box-shadow: 0 -5px 0 rgba(255,255,255,.28); transform: rotate(-2deg); }.document-top { display: flex; align-items: center; justify-content: space-between; color: #607a70; font-family: var(--mono); font-size: 7px; letter-spacing: .06em; }.mini-paw { color: var(--coral); font-size: 15px; }.document-lines { display: grid; gap: 10px; margin: 24px 8px; }.document-lines i { display: block; height: 5px; border-radius: 3px; background: #e5e6de; }.document-lines i:nth-child(2) { width: 75%; }.document-lines i:nth-child(3) { width: 88%; }.document-stamp { width: max-content; margin: 11px auto; padding: 6px 8px; border: 1px solid #5f9572; border-radius: 4px; color: #40805b; font-family: var(--mono); font-size: 8px; font-weight: 500; letter-spacing: .08em; transform: rotate(-7deg); }.reminder-preview { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 13px; border: 1px solid rgba(20,63,56,.1); border-radius: 12px; background: rgba(255,252,246,.73); }.tiny-calendar { display: grid; place-items: center; width: 29px; height: 31px; border-radius: 7px; color: #a84f3d; background: #f8d6c9; font-family: var(--mono); font-size: 10px; font-weight: 700; }.reminder-preview div { flex: 1; }.reminder-preview b, .reminder-preview small { display: block; }.reminder-preview b { font-size: 11px; }.reminder-preview small { color: #5a766c; font-size: 9px; }.tiny-check { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #fff; background: #55a269; font-size: 10px; }.cost-preview { margin-top: auto; padding: 17px; border-radius: 12px; color: #fdfaf2; background: #315d53; }.cost-total { display: flex; align-items: flex-end; justify-content: space-between; }.cost-total span { font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }.cost-total b { font-size: 22px; letter-spacing: -.8px; }.bars { display: flex; gap: 7px; align-items: flex-end; height: 38px; margin-top: 12px; }.bars i { flex: 1; height: 35%; border-radius: 3px 3px 0 0; background: #cce4a1; }.bars i:nth-child(2) { height: 54%; }.bars i:nth-child(3) { height: 43%; }.bars i:nth-child(4) { height: 72%; }.bars i:nth-child(5) { height: 60%; }.bars i:nth-child(6) { height: 100%; background: #f3ba7a; }
.feature-screenshot { position: absolute; right: 23px; bottom: 0; left: 23px; height: 176px; overflow: hidden; border: 1px solid rgba(20,63,56,.16); border-bottom: 0; border-radius: 13px 13px 0 0; background: #fffdfa; box-shadow: 0 -5px 0 rgba(255,255,255,.26); }
.feature-screenshot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feature-screenshot-records { transform: rotate(-2deg); transform-origin: bottom center; }
.feature-screenshot-reminders { transform: rotate(1deg); transform-origin: bottom center; }
.feature-screenshot-costs { transform: rotate(-1deg); transform-origin: bottom center; }

.story { overflow: hidden; color: #fdfaf2; background: var(--forest); }.story-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 10%; }.story-visual { position: relative; min-height: 496px; display: grid; place-items: center; }.story-shape { position: absolute; width: 395px; height: 395px; border: 1px solid rgba(255,255,255,.14); border-radius: 50% 50% 39% 50%; background: #205348; transform: rotate(11deg); }.passport-card { position: relative; z-index: 1; width: min(374px, 100%); padding: 17px; border: 1px solid rgba(251,230,196,.5); border-radius: 9px; color: #143f38; background: #f8e3bd; box-shadow: 13px 14px 0 rgba(0,0,0,.13); transform: rotate(-7deg); }.passport-header, .passport-footer { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 8px; letter-spacing: .11em; }.passport-main { display: flex; align-items: center; gap: 15px; margin: 27px 4px; }.passport-pet { display: grid; place-items: center; width: 78px; height: 78px; border: 1px solid rgba(20,63,56,.25); border-radius: 8px; background: #edcb8f; font-size: 47px; }.passport-main p { margin-bottom: 2px; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; }.passport-main strong, .passport-main small { display: block; }.passport-main strong { font-family: var(--serif); font-size: 18px; letter-spacing: -.6px; }.passport-main small { margin-top: 4px; font-size: 9px; }.passport-rule { height: 1px; background: rgba(20,63,56,.33); }.passport-details { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 3px 29px; }.passport-details div { display: grid; gap: 3px; }.passport-details span { color: #557168; font-family: var(--mono); font-size: 7px; letter-spacing: .09em; }.passport-details b { font-size: 11px; }.story-label { position: absolute; z-index: 2; right: -14px; bottom: 35px; padding: 11px 15px; border-radius: 8px; color: #123c35; background: #d4eba3; font-size: 11px; font-weight: 600; transform: rotate(3deg); }.story-label span { margin-right: 10px; color: #62875a; font-family: var(--mono); font-size: 9px; }.story-copy .eyebrow { color: #d8e1b8; }.story-copy .eyebrow-dot { background: #f2bc79; }.story-copy h2 { max-width: 520px; }.story-copy > p:not(.eyebrow) { max-width: 510px; margin: 23px 0 33px; color: rgba(255,255,255,.7); font-size: 16px; line-height: 1.7; }.steps { display: grid; gap: 0; max-width: 520px; padding: 0; margin: 0; list-style: none; }.steps li { display: grid; grid-template-columns: 43px 1fr; gap: 13px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.14); }.steps li > span { padding-top: 3px; color: #c7df91; font-family: var(--mono); font-size: 10px; }.steps h3 { margin-bottom: 3px; font-size: 15px; }.steps p { margin: 0; color: rgba(255,255,255,.61); font-size: 13px; }
.profile-screenshot { position: relative; z-index: 1; width: min(230px, 67%); overflow: hidden; border: 6px solid #f8e3bd; border-radius: 29px; background: #f8e3bd; box-shadow: 13px 14px 0 rgba(0,0,0,.13); transform: rotate(-7deg); }
.profile-screenshot img { display: block; width: 100%; height: auto; }

.moments { background: #f4ede3; }.moments-heading { max-width: 700px; margin-bottom: 56px; }.moments-heading h2 { max-width: 680px; }.moments-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.moment-card { position: relative; min-height: 310px; overflow: hidden; padding: 27px; border: 1px solid var(--line); border-radius: 13px; }.moment-boarding { background: #d9edda; }.moment-vet { color: #fff9ef; background: #225a4e; }.moment-claim { background: #f5d9c6; }.moment-number { margin-bottom: 45px; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .1em; opacity: .65; }.moment-card p { margin-bottom: 7px; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }.moment-card h3 { position: relative; z-index: 1; max-width: 260px; margin-bottom: 8px; font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: -.04em; line-height: 1.08; }.moment-card > div:not(.moment-art):last-of-type span, .moment-card > div > span:not(.pulse-dot) { position: relative; z-index: 1; font-size: 13px; font-weight: 500; }.moment-art { position: absolute; right: -15px; bottom: -28px; }.art-boarding { display: grid; place-items: center; width: 172px; height: 172px; border-radius: 50%; background: #bfdd9b; transform: rotate(-12deg); }.boarding-tag { padding: 13px; border: 1px solid #456d50; color: #295840; background: #f7f0d3; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; line-height: 1.5; transform: rotate(13deg); }.boarding-tag b { font-size: 18px; }.art-boarding > span { position: absolute; top: 18px; right: 28px; color: #dd7255; font-size: 21px; }.art-vet { right: 15px; bottom: 19px; left: 20px; height: 79px; opacity: .75; }.pulse-dot { position: absolute; bottom: 0; left: 0; width: 9px; height: 9px; border-radius: 50%; background: #d6ed9b; box-shadow: 271px -53px 0 #d6ed9b; }.pulse-line { position: absolute; right: 0; bottom: 4px; left: 4px; height: 35px; background: linear-gradient(135deg, transparent 0 20%, #d6ed9b 20.5% 23%, transparent 23.5% 38%, #d6ed9b 38.5% 41%, transparent 41.5% 57%, #d6ed9b 57.5% 60%, transparent 60.5%); clip-path: polygon(0 53%, 35% 53%, 40% 8%, 46% 90%, 51% 50%, 100% 50%, 100% 55%, 47% 55%, 45% 100%, 39% 16%, 36% 55%, 0 55%); background: #d6ed9b; }.art-claim { display: flex; align-items: center; justify-content: center; gap: 13px; right: 15px; bottom: 13px; }.receipt { padding: 19px 15px; color: #3d604e; background: #fff9ef; box-shadow: 7px 8px 0 rgba(178,101,73,.17); font-family: var(--mono); font-size: 12px; text-align: center; transform: rotate(-7deg); }.receipt b { font-size: 23px; }.art-claim > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fdf9ed; background: #3c8d66; font-size: 21px; transform: translateY(18px); }

.quote-section { padding-top: 113px; padding-bottom: 113px; }.quote-wrap { max-width: 880px; text-align: center; }.quote-mark { display: block; height: 58px; color: var(--coral); font-family: var(--serif); font-size: 84px; line-height: 1; }.quote-wrap blockquote { margin: 6px 0 19px; font-family: var(--serif); font-size: clamp(31px, 4vw, 51px); font-weight: 600; letter-spacing: -.055em; line-height: 1.08; }.quote-wrap p { color: rgba(20,63,56,.68); font-size: 15px; }

.cta-section { position: relative; overflow: hidden; padding: 111px 0 116px; color: #fff9ef; background: var(--ink); text-align: center; isolation: isolate; }.cta-content { position: relative; z-index: 1; max-width: 780px; }.cta-mark { display: grid; place-items: center; width: 50px; height: 50px; margin: 0 auto 26px; overflow: hidden; border-radius: 15px 15px 15px 5px; background: #143f38; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }.cta-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }.cta-content .eyebrow { justify-content: center; color: #dde2c1; }.cta-content .eyebrow-dot { background: #f0bb77; }.cta-content h2 { max-width: 740px; margin: 0 auto 20px; }.cta-content > p:not(.eyebrow) { max-width: 570px; margin: 0 auto 29px; color: rgba(255,255,255,.74); font-size: 16px; line-height: 1.65; }.button-light { color: var(--ink); background: #f6e2b7; box-shadow: 0 8px 0 rgba(0,0,0,.16); }.button-light:hover { background: #ffedc6; }.button-light .apple-mark::after { background: #f6e2b7; }.cta-content small { display: block; margin-top: 20px; color: rgba(255,255,255,.52); font-size: 12px; }.qr-download { display: inline-flex; align-items: center; gap: 20px; margin-top: 24px; padding: 12px 22px 12px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 17px; color: #fff9ef; background: rgba(255,255,255,.07); text-align: left; transition: transform .2s, background .2s; }.qr-download:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); }.qr-download img { display: block; width: 180px; height: 180px; border-radius: 9px; background: #fff; image-rendering: pixelated; }.qr-download span { display: grid; gap: 4px; }.qr-download strong { font-size: 17px; }.qr-download em { color: rgba(255,255,255,.67); font-size: 13px; font-style: normal; }.cta-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); }.cta-glow-one { width: 380px; height: 380px; top: -210px; left: -120px; border: 60px solid rgba(224,176,104,.14); }.cta-glow-two { width: 500px; height: 500px; right: -190px; bottom: -330px; border: 75px solid rgba(121,180,139,.13); }
.site-footer { padding: 42px 0 32px; background: #f1ebe0; }.footer-wrap { display: grid; grid-template-columns: 1fr 1.35fr auto; gap: 20px; align-items: start; }.footer-brand { font-size: 17px; }.footer-brand .brand-mark { width: 27px; height: 27px; font-size: 13px; }.footer-wrap > p { max-width: 380px; margin: 4px 0 0; color: rgba(20,63,56,.67); font-size: 13px; }.footer-links { display: flex; justify-content: flex-end; gap: 20px; font-size: 13px; font-weight: 700; }.footer-links a { border-bottom: 1px solid transparent; }.footer-links a:hover { border-color: currentColor; }.footer-wrap .copyright { grid-column: 1 / -1; margin-top: 27px; padding-top: 18px; border-top: 1px solid var(--line); color: rgba(20,63,56,.52); font-size: 11px; }

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } .hero [data-reveal] { transition-delay: .1s; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } [data-reveal] { opacity: 1; transform: none; } }
@media (max-width: 900px) { .hero { padding-top: 120px; }.hero-grid, .story-grid { grid-template-columns: 1fr; }.hero-copy { padding-bottom: 0; }.hero-visual { min-height: 570px; }.hero h1 { max-width: 680px; }.section-intro { grid-template-columns: 1fr; gap: 17px; }.section-intro .eyebrow { grid-column: auto; }.feature-grid { grid-template-columns: 1fr 1fr; }.feature-card-tall { grid-row: span 1; grid-column: span 2; min-height: 420px; }.story-grid { gap: 45px; }.story-visual { order: 2; }.moments-grid { grid-template-columns: 1fr; }.moment-card { min-height: 260px; }.footer-wrap { grid-template-columns: 1fr 1fr; }.footer-links { justify-content: flex-start; }.footer-wrap .copyright { grid-column: 1 / -1; } }
@media (max-width: 650px) { .container { width: min(100% - 34px, 1160px); }.section { padding: 80px 0; }.site-header { padding: 17px 0; }.brand { font-size: 17px; }.nav-links { position: absolute; top: calc(100% + 8px); right: 17px; left: 17px; display: grid; gap: 2px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,252,246,.97); box-shadow: 0 15px 30px rgba(20,63,56,.12); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .2s, transform .2s; }.nav-links.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }.nav-links > a { padding: 12px; }.nav-cta { margin-top: 5px; text-align: center; }.menu-toggle { display: grid; gap: 5px; }.menu-toggle span:not(.sr-only) { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform .2s; }.menu-toggle.is-open span:nth-child(2) { transform: translateY(3.5px) rotate(45deg); }.menu-toggle.is-open span:nth-child(3) { transform: translateY(-3.5px) rotate(-45deg); }.hero { padding: 112px 0 50px; }.hero-grid { gap: 0; }.hero-copy { padding-top: 25px; }.eyebrow { font-size: 9px; }.hero h1 { font-size: clamp(45px, 13vw, 59px); }.hero-text { font-size: 16px; }.hero-actions { align-items: stretch; gap: 18px; }.button { width: 100%; }.text-link { margin: 0 auto; }.hero-visual { min-height: 504px; transform: scale(.88); transform-origin: center top; margin-bottom: -65px; }.phone { width: 270px; height: 538px; }.note-record { left: -14px; }.note-scan { right: -14px; }.trust-items { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; justify-content: start; }.trust-items span { grid-column: 1; }.trust-items p { grid-column: 2; font-size: 12px; }.trust-items p:first-child { grid-column: 1 / -1; margin-bottom: 5px; }.section-intro { margin-bottom: 40px; }.section-intro h2, .story-copy h2, .moments-heading h2, .cta-content h2 { font-size: 37px; }.feature-grid { grid-template-columns: 1fr; }.feature-card, .feature-card-tall { grid-column: auto; min-height: 412px; padding: 24px; }.feature-card h3 { font-size: 27px; }.feature-icon { margin-bottom: 30px; }.story-visual { min-height: 373px; transform: scale(.8); transform-origin: center; margin: -39px -45px; }.story-label { right: 0; }.story-copy > p:not(.eyebrow) { font-size: 15px; }.steps li { grid-template-columns: 32px 1fr; }.moments-heading { margin-bottom: 36px; }.moment-card h3 { font-size: 28px; }.quote-section { padding-top: 80px; padding-bottom: 80px; }.quote-mark { height: 46px; font-size: 68px; }.quote-wrap blockquote { font-size: 34px; }.cta-section { padding: 78px 0 82px; }.footer-wrap { grid-template-columns: 1fr; gap: 15px; }.footer-links { justify-content: flex-start; }.footer-wrap .copyright { margin-top: 12px; }.cta-content .button { width: auto; }.cta-content .button-light { width: 100%; } }

/* Tablet and compact-phone refinements: these prevent a desktop composition from simply shrinking. */
@media (min-width: 901px) and (max-width: 1100px) {
  .container { width: min(100% - 64px, 1160px); }
  .nav-links { gap: 18px; font-size: 13px; }
  .nav-cta { padding: 10px 13px; }
  .hero-grid { gap: 8px; }
  .hero-copy { padding-bottom: 32px; }
  .hero h1 { font-size: clamp(52px, 5.8vw, 66px); }
  .hero-visual { min-height: 550px; transform: scale(.89); transform-origin: right center; margin: -25px -24px -25px 0; }
  .feature-card { min-height: 450px; padding: 25px; }
  .feature-card h3 { font-size: 25px; }
  .story-grid { gap: 6%; }
}

@media (min-width: 651px) and (max-width: 760px) {
  .site-header { padding: 17px 0; }
  .nav-links { position: absolute; top: calc(100% + 8px); right: 24px; left: 24px; display: grid; gap: 2px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,252,246,.97); box-shadow: 0 15px 30px rgba(20,63,56,.12); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .2s, transform .2s; }
  .nav-links.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .nav-links > a { padding: 12px; }
  .nav-cta { margin-top: 5px; text-align: center; }
  .menu-toggle { display: grid; gap: 5px; }
  .menu-toggle span:not(.sr-only) { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform .2s; }
  .menu-toggle.is-open span:nth-child(2) { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle.is-open span:nth-child(3) { transform: translateY(-3.5px) rotate(-45deg); }
}

@media (min-width: 651px) and (max-width: 900px) {
  .container { width: min(100% - 56px, 720px); }
  .hero { padding-bottom: 58px; }
  .hero-copy { max-width: 650px; padding-top: 16px; }
  .hero-visual { min-height: 520px; transform: scale(.94); transform-origin: center top; margin: -4px 0 -30px; }
  .feature-card-tall { min-height: 395px; }
  .feature-card:not(.feature-card-tall) { min-height: 405px; }
  .story-visual { min-height: 445px; }
  .moment-card { min-height: 245px; }
}

@media (max-width: 390px) {
  .container { width: min(100% - 30px, 1160px); }
  .hero h1 { font-size: 43px; }
  .hero-visual { min-height: 444px; transform: scale(.78); margin-bottom: -101px; }
  .floating-note { padding-right: 9px; }
  .note-record { left: -23px; }
  .note-scan { right: -23px; }
  .story-visual { transform: scale(.7); margin: -58px -70px; }
  .moment-card { padding: 22px; }
  .moment-card h3 { font-size: 25px; }
}

/* Legal and support pages */
.legal-page { background: #f8f3eb; }
.legal-header { padding: 21px 0; border-bottom: 1px solid var(--line); background: rgba(255,252,246,.9); }.back-link { padding-bottom: 2px; border-bottom: 1px solid var(--ink); font-size: 13px; font-weight: 700; }
.legal-hero { padding: 105px 0 76px; background: var(--cream); }.legal-hero-content { max-width: 850px; }.legal-hero h1, .help-hero h1 { margin-bottom: 16px; font-size: clamp(52px, 7vw, 80px); }.legal-hero-content > p:last-child { margin: 0; color: rgba(20,63,56,.65); font-size: 14px; }
.legal-content-section { padding: 70px 0 112px; }.legal-layout { display: grid; grid-template-columns: 205px minmax(0, 690px); align-items: start; justify-content: space-between; gap: 55px; }.legal-aside { position: sticky; top: 28px; display: grid; gap: 9px; padding: 17px 0; }.legal-aside p { margin: 0 0 4px; color: rgba(20,63,56,.55); font-family: var(--mono); font-size: 9px; letter-spacing: .11em; }.legal-aside a { width: max-content; max-width: 100%; color: rgba(20,63,56,.74); font-size: 13px; }.legal-aside a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }.legal-content { font-size: 15px; line-height: 1.75; }.legal-lead { margin: 0 0 56px; color: var(--ink); font-family: var(--serif); font-size: 28px; letter-spacing: -.035em; line-height: 1.25; }.legal-content section { padding: 32px 0; border-top: 1px solid var(--line); }.legal-content h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 28px; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }.legal-content p { margin-bottom: 15px; color: rgba(20,63,56,.78); }.legal-content p:last-child { margin-bottom: 0; }.legal-content ul { display: grid; gap: 9px; margin: 0; padding-left: 21px; color: rgba(20,63,56,.78); }.legal-content li::marker { color: var(--coral); }.legal-contact { margin-top: 14px; padding: 32px !important; border: 0 !important; border-radius: 13px; background: #dbeedb; }.legal-contact .button { width: max-content; margin-top: 8px; }.contact-address { margin: 18px 0 0 !important; color: rgba(20,63,56,.66) !important; font-family: var(--mono); font-size: 12px; }
.help-hero { padding: 105px 0 98px; text-align: center; background: var(--cream); }.help-hero-content { max-width: 735px; }.help-hero .eyebrow { justify-content: center; }.help-hero h1 { max-width: 720px; margin-right: auto; margin-left: auto; }.help-hero p:not(.eyebrow) { max-width: 510px; margin: 0 auto 27px; color: rgba(20,63,56,.75); font-size: 18px; }.help-hero small { display: block; max-width: 500px; margin: 22px auto 0; color: rgba(20,63,56,.57); font-size: 11px; line-height: 1.5; }.help-content-section { padding: 90px 0 112px; }.help-intro { max-width: 610px; margin-bottom: 43px; }.help-intro h2 { margin: 0; font-family: var(--serif); font-size: clamp(35px, 4vw, 52px); font-weight: 600; letter-spacing: -.055em; line-height: 1.05; }.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.faq-grid article { min-height: 214px; padding: 27px; border: 1px solid var(--line); border-radius: 13px; background: #fffaf2; }.faq-grid article > span { display: block; margin-bottom: 38px; color: #c76a4f; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; }.faq-grid h3 { margin-bottom: 7px; font-family: var(--serif); font-size: 23px; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }.faq-grid p { margin: 0; color: rgba(20,63,56,.72); font-size: 13px; line-height: 1.65; }.support-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 57px; }.support-cards article { display: grid; grid-template-columns: 46px 1fr; gap: 15px; align-items: start; padding: 27px; border-radius: 13px; color: #fdfaf2; background: var(--ink); }.support-cards article:nth-child(2) { color: var(--ink); background: #efd5bd; }.support-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.3); border-radius: 12px; color: #f0ce84; font-size: 18px; }.support-cards article:nth-child(2) .support-icon { border-color: rgba(20,63,56,.2); color: #b95c44; }.support-cards p { margin-bottom: 8px; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }.support-cards h3 { margin-bottom: 4px; font-family: var(--serif); font-size: 25px; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }.support-cards span { color: rgba(255,255,255,.68); font-size: 12px; }.support-cards article:nth-child(2) span { color: rgba(20,63,56,.68); }.support-cards a { grid-column: 2; width: max-content; margin-top: 6px; padding-bottom: 2px; border-bottom: 1px solid currentColor; font-size: 12px; font-weight: 700; }
@media (max-width: 760px) { .legal-hero, .help-hero { padding: 74px 0 63px; }.legal-hero h1, .help-hero h1 { font-size: 51px; }.legal-layout { grid-template-columns: 1fr; gap: 20px; }.legal-aside { position: static; display: flex; flex-wrap: wrap; gap: 9px 16px; padding: 0 0 16px; }.legal-aside p { width: 100%; }.legal-content-section, .help-content-section { padding: 55px 0 76px; }.legal-lead { margin-bottom: 38px; font-size: 25px; }.legal-content section { padding: 25px 0; }.legal-content h2 { font-size: 25px; }.faq-grid, .support-cards { grid-template-columns: 1fr; }.faq-grid article { min-height: 0; }.support-cards { margin-top: 40px; } }
@media (max-width: 450px) { .legal-header { padding: 16px 0; }.back-link { font-size: 12px; }.legal-hero h1, .help-hero h1 { font-size: 44px; }.legal-content { font-size: 14px; }.legal-lead { font-size: 23px; }.legal-contact { padding: 24px !important; }.legal-contact .button { width: 100%; }.help-hero p:not(.eyebrow) { font-size: 16px; }.faq-grid article, .support-cards article { padding: 23px; } }

/* High-contrast sans-serif titles are easier to scan at display sizes. */
h1,
.section-intro h2,
.story-copy h2,
.moments-heading h2,
.cta-content h2,
.feature-card h3,
.moment-card h3,
.quote-wrap blockquote,
.legal-hero h1,
.help-hero h1,
.legal-lead,
.legal-content h2,
.help-intro h2,
.faq-grid h3,
.support-cards h3 {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.1;
}

h1 { letter-spacing: -.055em; line-height: 1.04; }
.quote-wrap blockquote { letter-spacing: -.04em; line-height: 1.14; }

.legal-nav { display: flex; align-items: center; gap: 20px; font-size: 13px; font-weight: 700; }
.legal-nav a { padding: 5px 0; color: rgba(20,63,56,.72); border-bottom: 1px solid transparent; }
.legal-nav a:hover, .legal-nav a[aria-current="page"] { color: var(--ink); border-color: var(--ink); }

@media (min-width: 761px) and (max-width: 1000px) {
  .site-header { padding: 17px 0; }
  .nav-links { position: absolute; top: calc(100% + 8px); right: 28px; left: 28px; display: grid; gap: 2px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,252,246,.97); box-shadow: 0 15px 30px rgba(20,63,56,.12); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .2s, transform .2s; }
  .nav-links.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .nav-links > a { padding: 12px; }
  .nav-cta { margin-top: 5px; text-align: center; }
  .menu-toggle { display: grid; gap: 5px; }
  .menu-toggle span:not(.sr-only) { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform .2s; }
  .menu-toggle.is-open span:nth-child(2) { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle.is-open span:nth-child(3) { transform: translateY(-3.5px) rotate(-45deg); }
}

@media (max-width: 450px) {
  .legal-header .nav-wrap { flex-wrap: wrap; gap: 12px; }
  .legal-nav { width: 100%; gap: 15px; font-size: 12px; }
}