:root { color-scheme: light; --ink: #25313b; --muted: #66727a; --cream: #fffaf0; --paper: #fffdf8; --mint: #d9f0df; --green: #47785e; --orange: #ee9562; --pink: #f4c1b6; --line: #d9d8ca; --shadow: 0 18px 40px rgba(58, 68, 57, .12); font-family: Georgia, "Times New Roman", serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-size: 18px; line-height: 1.55; }
a { color: inherit; }
.skip-link { position: absolute; left: 1rem; top: -4rem; background: var(--ink); color: white; padding: .6rem 1rem; z-index: 2; }
.skip-link:focus { top: 1rem; }
.site-header, .site-footer { max-width: 1160px; margin: auto; padding: 1.5rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-header { border-bottom: 1px solid var(--line); }
.brand { font-weight: bold; text-decoration: none; font-size: 1.25rem; letter-spacing: -.03em; }
.brand-pixel { color: var(--orange); margin-right: .3rem; }
nav { display: flex; align-items: center; gap: 1.5rem; font-family: ui-sans-serif, system-ui, sans-serif; font-size: .85rem; }
nav a:not(.button), .text-link { text-decoration: none; }
nav a:not(.button):hover, .text-link:hover { text-decoration: underline; text-underline-offset: .25rem; }
.section-shell { max-width: 1160px; margin: auto; padding: 6rem 1.5rem; }
.hero { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 5rem; min-height: 650px; }
.eyebrow { color: var(--green); text-transform: uppercase; letter-spacing: .12em; font: 700 .7rem/1.3 ui-sans-serif, system-ui, sans-serif; }
.status-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--orange); margin-right: .35rem; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.04em; margin: 0 0 1.1rem; }
h1 { font-size: clamp(3.5rem, 7vw, 6.5rem); max-width: 730px; }
h1 em { color: var(--green); font-style: normal; }
h2 { font-size: clamp(2rem, 4vw, 3.8rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1rem; }
.lede, .section-intro { color: var(--muted); max-width: 580px; font-size: 1.15rem; }
.hero-actions, .download-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: 2rem 0 1rem; }
.button { display: inline-block; border: 2px solid var(--green); border-radius: 999px; padding: .75rem 1.25rem; background: var(--green); color: white; font: 700 .85rem ui-sans-serif, system-ui, sans-serif; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); background: #355f49; }
.button:focus-visible, a:focus-visible { outline: 3px solid #d26b37; outline-offset: 4px; }
.button-quiet { background: transparent; color: var(--green); }
.button-quiet:hover { color: white; }
.button[aria-disabled="true"] { opacity: .7; cursor: not-allowed; }
.button-small { padding: .55rem 1rem; }
.availability, .requirements { color: var(--muted); font: .78rem ui-sans-serif, system-ui, sans-serif; }
.pet-card { position: relative; min-height: 430px; display: grid; place-items: center; background: var(--mint); border: 2px solid var(--ink); box-shadow: var(--shadow); transform: rotate(2deg); }
.pet-card::before { content: ""; position: absolute; inset: 14px; border: 2px dashed rgba(71, 120, 94, .4); }
.pet-image { position: relative; width: 256px; height: 256px; object-fit: contain; image-rendering: pixelated; z-index: 1; }
.pet-ear { position: absolute; top: -35px; width: 55px; height: 60px; border: 6px solid var(--ink); background: var(--orange); z-index: -1; }
.pet-ear-left { left: 5px; transform: rotate(-30deg); border-radius: 70% 10% 0; }.pet-ear-right { right: 5px; transform: rotate(30deg); border-radius: 10% 70% 0; }
.pet-eye { position: absolute; top: 62px; width: 12px; height: 18px; background: var(--ink); }.pet-eye-left { left: 43px; }.pet-eye-right { right: 43px; }
.pet-blush { position: absolute; top: 91px; width: 25px; height: 10px; background: var(--pink); border-radius: 50%; }.pet-blush-left { left: 22px; }.pet-blush-right { right: 22px; }
.pet-mouth { position: absolute; top: 88px; left: 77px; width: 17px; height: 10px; border-bottom: 4px solid var(--ink); border-radius: 0 0 50% 50%; }
.pet-scarf { position: absolute; bottom: -17px; left: -6px; width: 170px; height: 28px; border: 6px solid var(--ink); background: var(--green); z-index: 2; }.pet-scarf::after { content: ""; position: absolute; right: 12px; top: 17px; width: 28px; height: 42px; border: 6px solid var(--ink); background: var(--green); transform: rotate(12deg); }
.pet-shadow { position: absolute; bottom: 107px; width: 190px; height: 22px; background: rgba(37,49,59,.18); border-radius: 50%; }.pet-label { position: absolute; bottom: 38px; margin: 0; font: 700 .75rem ui-sans-serif, system-ui, sans-serif; color: var(--green); }
.spark { position: absolute; color: var(--orange); font-size: 2rem; }.spark-one { top: 55px; left: 65px; }.spark-two { right: 75px; top: 110px; font-size: 3rem; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding-top: 1rem; padding-bottom: 6rem; }.value-grid article { border-top: 2px solid var(--ink); padding-top: 1.4rem; }.icon { color: var(--orange); font-size: 1.4rem; }.value-grid h2 { font-size: 1.5rem; margin-top: 1rem; }.value-grid p, .steps p, .state-list p { color: var(--muted); font-size: .95rem; }
.two-column, .states, .support, .privacy-band { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; border-top: 1px solid var(--line); }.steps, .state-list { list-style: none; margin: 0; padding: 0; }.steps li { display: flex; gap: 1rem; padding: 0 0 2rem; }.steps li > span { color: var(--orange); font: 700 .8rem ui-sans-serif, system-ui, sans-serif; }.steps h3 { margin-bottom: .4rem; }.states { background: var(--paper); max-width: none; padding-left: max(1.5rem, calc((100vw - 1130px) / 2)); padding-right: max(1.5rem, calc((100vw - 1130px) / 2)); }.state-list { display: grid; gap: 1rem; }.state-list > div { display: flex; gap: 1rem; padding: 1rem; border: 1px solid var(--line); background: var(--cream); }.state-icon { color: var(--orange); font-size: 1.7rem; }.state-list p { margin: 0; }.state-list strong { color: var(--ink); }
.privacy-band { background: var(--green); color: white; max-width: none; padding-left: max(1.5rem, calc((100vw - 1130px) / 2)); padding-right: max(1.5rem, calc((100vw - 1130px) / 2)); }.privacy-band .eyebrow, .privacy-band p { color: var(--mint); }.privacy-lock { justify-self: end; color: var(--mint); font-size: 6rem; }.download { text-align: center; }.download .eyebrow, .download .section-intro, .download .requirements { margin-left: auto; margin-right: auto; }.download-actions { justify-content: center; }.support { padding-bottom: 6rem; }.text-link, .support-note { color: var(--green); font: 700 1rem ui-sans-serif, system-ui, sans-serif; }.site-footer { border-top: 1px solid var(--line); color: var(--muted); font: .75rem ui-sans-serif, system-ui, sans-serif; }
@media (max-width: 760px) { body { font-size: 16px; }.site-header { align-items: flex-start; }.site-header nav a:not(.button) { display: none; }.section-shell { padding-top: 4rem; padding-bottom: 4rem; }.hero, .two-column, .states, .privacy-band, .support { grid-template-columns: 1fr; gap: 2.5rem; }.hero { min-height: auto; }.hero h1 { font-size: clamp(3.2rem, 16vw, 5rem); }.pet-card { min-height: 360px; }.value-grid { grid-template-columns: 1fr; padding-bottom: 4rem; }.privacy-lock { justify-self: start; font-size: 4rem; }.site-footer { align-items: flex-start; flex-direction: column; gap: .3rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.button { transition: none; }.button:hover { transform: none; } }