:root { --ink:#14223b; --ink-muted:#576276; --line:#dbe2e9; --paper:#fff; --blue:#4676d8; --teal:#65bcb6; --apricot:#f2a776; --mist:#edf9f8; --serif:Iowan Old Style,Palatino Linotype,Book Antiqua,Palatino,Georgia,serif; --sans:Avenir Next,Avenir,ui-rounded,Helvetica Neue,Arial,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; } a { color:inherit; }
.site-header { align-items:center; display:flex; justify-content:space-between; margin:0 auto; max-width:1260px; padding:26px 42px; }.brand { align-items:center; display:inline-flex; font-size:1.18rem; font-weight:700; gap:8px; letter-spacing:-.055em; text-decoration:none; }.brand-mark { height:30px; overflow:visible; width:30px; }.orbit { fill:none; stroke-linecap:round; stroke-width:3; }.orbit-blue { stroke:var(--blue); stroke-dasharray:72 35; transform:rotate(-28deg); transform-origin:center; }.orbit-teal { stroke:var(--teal); stroke-dasharray:42 65; transform:rotate(127deg); transform-origin:center; }.core { fill:var(--ink); }.node-blue { fill:var(--blue); }.node-teal { fill:var(--teal); }.node-apricot { fill:var(--apricot); } nav { display:flex; gap:26px; } nav a,.text-link { font-size:.82rem; font-weight:600; letter-spacing:.01em; text-decoration:none; } nav a:hover,.text-link:hover,footer a:hover { color:var(--blue); }
.section-shell { margin:0 auto; max-width:1260px; padding-left:42px; padding-right:42px; }.hero { align-items:center; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.9fr); min-height:690px; padding-bottom:58px; padding-top:54px; }.hero-copy { max-width:625px; padding-bottom:32px; }.intro { color:var(--blue); font-size:.72rem; font-weight:700; letter-spacing:.11em; margin:0 0 20px; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:var(--serif); font-weight:400; letter-spacing:-.045em; } h1 { font-size:clamp(3.1rem,5.4vw,5.65rem); line-height:.96; margin-bottom:28px; } h2 { font-size:clamp(2.35rem,4vw,4.5rem); line-height:1; margin-bottom:0; }.lead { color:var(--ink-muted); font-size:1.1rem; line-height:1.65; margin-bottom:29px; max-width:455px; }.text-link { border-bottom:1px solid var(--ink); display:inline-flex; gap:14px; padding-bottom:7px; }.text-link span { color:var(--apricot); font-size:1.1rem; line-height:.8; }
.hero-device { justify-self:center; max-width:485px; position:relative; width:100%; }.hero-device img { display:block; height:auto; position:relative; width:100%; z-index:2; }.soft-disc { border-radius:999px; position:absolute; }.soft-disc-blue { background:#e9f5ff; height:230px; left:4%; top:17%; width:230px; }.soft-disc-peach { background:#fff1e8; bottom:10%; height:150px; right:2%; width:150px; }.quiet-statement { background:var(--mist); padding:52px 42px 57px; text-align:center; }.quiet-statement p { font-family:var(--serif); font-size:clamp(1.55rem,2.7vw,2.55rem); letter-spacing:-.035em; line-height:1.15; margin:0 auto; max-width:760px; }
.everyday { padding-bottom:145px; padding-top:145px; }.section-heading { max-width:760px; }.everyday-grid { display:grid; gap:72px; grid-template-columns:minmax(240px,.65fr) minmax(400px,1fr); margin-top:74px; }.body-copy,.journey-copy > p:not(.intro),.privacy-section > p { color:var(--ink-muted); font-size:1.06rem; line-height:1.7; }.body-copy { max-width:330px; }.steps { border-top:1px solid var(--line); }.steps article { align-items:baseline; border-bottom:1px solid var(--line); display:grid; gap:14px; grid-template-columns:44px 148px 1fr; padding:19px 0 21px; }.steps span { color:var(--apricot); font-size:.72rem; font-weight:700; }.steps h3 { font-family:var(--serif); font-size:1.38rem; font-weight:400; letter-spacing:-.025em; margin:0; }.steps p { color:var(--ink-muted); font-size:.9rem; line-height:1.5; margin:0; }
.journey-section { background:var(--ink); color:#fff; min-height:690px; overflow:hidden; position:relative; }.journey-image-wrap { height:100%; left:0; overflow:hidden; position:absolute; top:0; width:57%; }.journey-image-wrap::after { background:linear-gradient(90deg,transparent 40%,var(--ink) 96%); content:""; inset:0; position:absolute; }.journey-image-wrap img { height:100%; min-height:690px; object-fit:cover; width:100%; }.journey-copy { margin-left:58%; max-width:510px; padding:180px 54px 100px 70px; position:relative; }.journey-copy .intro { color:var(--teal); }.journey-copy > p:not(.intro) { color:#c9d2de; margin-top:28px; }.privacy-section { align-items:end; display:grid; gap:100px; grid-template-columns:1.3fr .7fr; margin:0 auto; max-width:1260px; padding:142px 42px; }.privacy-section h2 { font-size:clamp(2.3rem,3.9vw,4.3rem); }.privacy-section > p { margin-bottom:7px; max-width:370px; }
footer { align-items:center; background:#f8f5f2; display:grid; grid-template-columns:1fr 1fr auto; margin:0; padding:33px max(42px,calc((100vw - 1176px)/2)); } footer p { color:var(--ink-muted); font-size:.8rem; margin:0; } footer p a { color:var(--ink); font-weight:700; text-decoration-thickness:1px; text-underline-offset:3px; }.copyright { text-align:right; }
@media (max-width:820px) { .site-header { padding:22px; } nav { gap:15px; } nav a { font-size:.71rem; }.section-shell { padding-left:24px; padding-right:24px; }.hero { grid-template-columns:1fr; min-height:unset; padding-top:77px; }.hero-copy { padding-bottom:32px; }.hero-device { max-width:430px; }.quiet-statement { padding:48px 24px; }.everyday { padding-bottom:92px; padding-top:92px; }.everyday-grid { gap:35px; grid-template-columns:1fr; margin-top:48px; }.journey-section { display:flex; flex-direction:column; min-height:0; }.journey-image-wrap { height:auto; position:relative; width:100%; }.journey-image-wrap::after { background:linear-gradient(180deg,transparent 55%,var(--ink)); }.journey-image-wrap img { display:block; height:auto; min-height:0; width:100%; }.journey-copy { margin:-30px 0 0; max-width:600px; padding:0 24px 80px; }.privacy-section { gap:38px; grid-template-columns:1fr; padding:90px 24px; } footer { gap:17px; grid-template-columns:1fr; padding:32px 24px; }.copyright { text-align:left; } }
@media (max-width:520px) { .site-header { align-items:flex-start; } nav { flex-direction:column; gap:7px; text-align:right; }.hero { padding-top:55px; } h1 { font-size:clamp(3.05rem,15vw,4.7rem); }.lead { font-size:1rem; }.steps article { gap:4px 10px; grid-template-columns:38px 1fr; }.steps p { grid-column:2; } }