:root {
  color-scheme: light;
  --background: #f7f9fc;
  --surface: #ffffff;
  --text: #182c46;
  --muted: #53647a;
  --accent: #315d8a;
  --border: #dce5ee;
  --warning: #fff6dd;
}

* { box-sizing: border-box; }
html { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; }
body { margin: 0; background: var(--background); color: var(--text); line-height: 1.65; }
a { color: var(--accent); }
.shell { width: min(100% - 3rem, 860px); margin: 0 auto; }
header { padding: 2rem 0 1.5rem; }
.brand { color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: .01em; }
.eyebrow { display: flex; align-items: center; gap: .55rem; color: var(--text); font-size: 1.1rem; font-weight: 760; letter-spacing: -.04em; }
.eyebrow::before { width: 42px; height: 40px; background: url("pawfolio.svg") center / contain no-repeat; content: ""; }
h1 { margin: .65rem 0 .75rem; font-size: clamp(2.25rem, 5.5vw, 3.8rem); font-weight: 760; line-height: 1.04; letter-spacing: -.052em; }
h2 { margin-top: 2.25rem; line-height: 1.2; letter-spacing: -.025em; }
h3 { margin-top: 1.5rem; line-height: 1.3; }
.lede { max-width: 680px; color: var(--muted); font-size: 1.1rem; }
nav { display: flex; flex-wrap: wrap; gap: .6rem 1rem; padding: 1rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
nav a { text-decoration: none; font-size: .95rem; }
main { padding-bottom: 3rem; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin: 2rem 0; }
.card { display: block; padding: 1.35rem; background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; text-decoration: none; color: var(--text); }
.card:hover { border-color: var(--accent); }
.card h2 { margin: 0 0 .35rem; font-size: 1.15rem; }
.card p { margin: 0; color: var(--muted); font-size: .95rem; }
.app-link { display: inline-block; padding: .75rem 1rem; border-radius: .7rem; background: var(--text); color: #ffffff; font-weight: 700; text-decoration: none; }
.app-link:hover, .app-link:focus-visible { text-decoration: underline; }
.notice { margin: 1.5rem 0; padding: 1rem 1.2rem; background: var(--warning); border-left: 4px solid #d79b25; border-radius: .4rem; }
li { margin: .45rem 0; }
footer { padding: 2rem 0 3.5rem; color: var(--muted); font-size: .9rem; border-top: 1px solid var(--border); }
.language { float: right; }
@media (max-width: 600px) { .language { float: none; display: block; margin-top: .7rem; } header { padding-top: 2.4rem; } }

.shell > header { padding: 1.6rem 0 1.35rem; }
.shell > header .eyebrow { text-transform: none; }
.shell > nav { align-items: center; gap: .65rem 1.1rem; padding: .85rem 0; }
.shell > nav a { color: var(--accent); font-size: .88rem; font-weight: 620; }
.shell > main { padding: 1.15rem 0 2.5rem; }
.shell > main h2 { margin: 2rem 0 .65rem; font-size: 1.4rem; }
.shell > main p, .shell > main li { color: var(--text); }
.shell > main p { line-height: 1.7; }
.shell > main a:not(.app-link) { text-decoration-thickness: 1px; text-underline-offset: .18em; }
.shell > footer { padding: 1.2rem 0 2rem; border-top: 1px solid var(--border); font-size: .82rem; }
.shell > .eyebrow { color: var(--text); }
.notice { border: 1px solid #f1dfa8; border-left: 4px solid #d79b25; }
.shell a:focus-visible { outline: 3px solid #986ce1; outline-offset: 3px; }

/* PawFolio landing pages */
body.landing-page {
  color-scheme: light;
  --page: #f7f9fc;
  --surface: #ffffff;
  --ink: #182c46;
  --body-ink: #53647a;
  --blue: #e3effa;
  --blue-deep: #315d8a;
  --yellow: #ffc94d;
  --pink: #ffe8e2;
  --lilac: #eeeaff;
  --line: #dce5ee;
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  line-height: 1.6;
}

body.landing-page a { color: inherit; }
.landing-shell { width: min(100% - 3rem, 1120px); margin: 0 auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1rem 0; }
.site-brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); font-size: 1.15rem; font-weight: 760; letter-spacing: -.04em; text-decoration: none; }
.site-brand img { object-fit: contain; }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); padding: 0; border: 0; font-size: .9rem; font-weight: 630; }
.site-nav > a { text-decoration: none; }
.site-nav > a:hover, .site-footer a:hover { color: var(--blue-deep); text-decoration: underline; text-underline-offset: .2em; }
.language-links { display: flex; align-items: center; gap: .1rem; padding: .2rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.language-links a { min-width: 2.15rem; padding: .25rem .4rem; border-radius: 999px; color: var(--body-ink); font-size: .75rem; text-align: center; text-decoration: none; }
.language-links a[aria-current="page"] { background: var(--ink); color: white; }
.landing-page main { padding: 0 0 2rem; }

.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(350px, .92fr); align-items: center; min-height: 510px; margin: 1.2rem 0 6.5rem; padding: clamp(2.5rem, 6vw, 5.2rem); overflow: hidden; border-radius: 2rem 5rem 2rem 2rem; background: var(--blue); }
.hero-copy { position: relative; z-index: 2; max-width: 570px; }
.handwritten-note { margin: 0 0 1rem; color: var(--blue-deep); font-size: .98rem; font-weight: 700; }
.hero h1, .story-section h2, .plans-heading h2, .closing-card h2 { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; font-weight: 760; letter-spacing: -.052em; line-height: 1.04; }
.hero h1 { max-width: 610px; font-size: clamp(3.25rem, 6vw, 5.1rem); }
.hero-lede { max-width: 465px; margin: 1.25rem 0 1.5rem; color: var(--body-ink); font-size: clamp(1.04rem, 1.45vw, 1.18rem); line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; }
.store-badge { display: inline-block; width: min(150px, 100%); line-height: 0; }
.store-badge img { display: block; width: 100%; height: auto; }
.store-badge:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 4px; border-radius: 5px; }
.hero-promise { margin: 1.1rem 0 0; color: var(--body-ink); font-size: .86rem; font-weight: 620; }
.hero-promise span { color: #b77d00; }
.hero-art { position: relative; display: grid; min-height: 390px; place-items: center; isolation: isolate; }
.art-sun { position: absolute; z-index: 0; width: min(100%, 390px); aspect-ratio: 1; border-radius: 50%; background: var(--yellow); }
.hero-mascot { position: relative; z-index: 1; width: min(84%, 330px); height: auto; }
.art-sticker { position: absolute; z-index: 2; padding: .5rem .8rem; border: 1px solid rgba(24, 44, 70, .08); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .78rem; font-weight: 700; }
.sticker-one { top: 11%; left: 0; transform: rotate(-4deg); }
.sticker-one span { color: #df725e; font-size: 1.1rem; vertical-align: -.06em; }
.memory-slip { position: absolute; z-index: 3; left: 50%; bottom: 7%; display: grid; grid-template-areas: "date image" "copy image"; grid-template-columns: 1fr 48px; align-items: center; column-gap: .8rem; width: min(100%, 355px); min-height: 72px; padding: .65rem 1rem; border: 1px solid #eedba6; border-radius: .65rem; background: #fff9e8; transform: translateX(-50%); }
.memory-slip .slip-date { grid-area: date; color: #876815; font-size: .52rem; font-weight: 780; letter-spacing: .04em; }
.memory-slip strong { grid-area: copy; color: #4a3b19; font-size: .87rem; line-height: 1.25; }
.memory-slip img { grid-area: image; width: 47px; height: 45px; object-fit: contain; }
.art-sparkle { position: absolute; color: white; }
.sparkle-one { top: 20%; left: 5%; font-size: 1.3rem; }
.sparkle-two { right: 7%; bottom: 23%; font-size: 1.05rem; }

.story-section { display: grid; grid-template-columns: minmax(0, .95fr) minmax(330px, 1.05fr); align-items: center; gap: clamp(3rem, 8vw, 6rem); margin: 0 0 6rem; }
.section-kicker { margin: 0 0 .7rem; color: var(--blue-deep); font-size: .84rem; font-weight: 720; }
.story-section h2, .plans-heading h2 { max-width: 580px; font-size: clamp(2.5rem, 4.4vw, 3.8rem); }
.story-copy > p:not(.section-kicker) { max-width: 550px; color: var(--body-ink); font-size: 1rem; }
.story-points { display: grid; gap: 1.15rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.story-points li { display: grid; grid-template-columns: 2.35rem 1fr; gap: .75rem; margin: 0; color: var(--body-ink); font-size: .9rem; line-height: 1.5; }
.story-points strong { color: var(--ink); font-size: .96rem; }
.point-icon { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: .75rem; background: var(--pink); color: #994c52; font-size: 1.1rem; }
.story-points li:nth-child(2) .point-icon { background: #fff0c8; color: #87600c; }
.story-points li:nth-child(3) .point-icon { background: var(--lilac); color: #5c4b9a; }
.pet-gallery { width: min(100%, 460px); justify-self: center; margin: 0; padding: 1.4rem 1.5rem 1.2rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--surface); }
.gallery-note { margin: 0 0 1rem; color: var(--ink); font-size: 1.04rem; font-weight: 730; text-align: center; }
.pet-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.pet-tile { display: grid; min-height: 91px; align-content: center; justify-items: center; gap: .1rem; padding: .25rem; border-radius: .8rem; background: #f1f6fb; color: var(--ink); font-size: .7rem; font-weight: 650; text-align: center; }
.pet-tile:nth-child(4n + 2) { background: #fff8e7; }
.pet-tile:nth-child(4n + 3) { background: #fff2ee; }
.pet-tile img { width: 58px; height: 60px; object-fit: contain; }
.pet-gallery figcaption { max-width: 340px; margin: .9rem auto 0; color: var(--body-ink); font-size: .8rem; text-align: center; }

.feature-ribbon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin: 0 0 6rem; padding: 1.5rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feature-note { display: flex; align-items: flex-start; gap: .85rem; padding: .55rem .2rem; }
.feature-note img { flex: 0 0 auto; width: 54px; height: 52px; object-fit: contain; }
.feature-note h3 { margin: .1rem 0 .35rem; font-size: 1rem; letter-spacing: -.02em; }
.feature-note p { margin: 0; color: var(--body-ink); font-size: .83rem; line-height: 1.5; }

.plans-section { padding: clamp(2.2rem, 5vw, 3.6rem); border-radius: 1.7rem; background: #eaf0f6; }
.plans-heading { max-width: 730px; margin: 0 auto 2rem; text-align: center; }
.plans-heading h2 { margin: 0 auto; }
.plans-heading > p:last-child { max-width: 630px; margin: .9rem auto 0; color: var(--body-ink); }
.plan-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 860px; margin: 0 auto; }
.plan-card { padding: 1.5rem clamp(1.25rem, 3vw, 1.9rem); border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.plan-ultra { border: 1px solid var(--line); background: #f8fbff; }
.plan-topline { display: flex; align-items: center; gap: .55rem; }
.plan-doodle { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: .55rem; background: #fff0c8; color: #87600c; }
.plan-ultra .plan-doodle { background: #e6edff; color: #4a63a0; }
.plan-label { margin: 0; color: var(--blue-deep); font-size: .8rem; font-weight: 740; }
.plan-card h3 { margin: .85rem 0 .45rem; font-size: 1.45rem; letter-spacing: -.04em; line-height: 1.15; }
.plan-card > p:not(.plan-label) { min-height: 3.2rem; margin: 0; color: var(--body-ink); font-size: .88rem; }
.plan-card ul { display: grid; gap: .6rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.plan-card li { position: relative; margin: 0; padding-left: 1.3rem; color: var(--body-ink); font-size: .84rem; line-height: 1.45; }
.plan-card li::before { position: absolute; left: 0; color: #327759; content: "✓"; font-weight: 800; }
.sharing-footnote { max-width: 760px; margin: 1rem auto 0; color: var(--body-ink); font-size: .8rem; text-align: center; }
.closing-card { display: grid; grid-template-columns: 78px 1fr auto; align-items: center; gap: 1.2rem; margin: 4.5rem 0; padding: 1.35rem clamp(1.25rem, 4vw, 2.1rem); border-radius: 1.2rem; background: #fff5d8; }
.closing-card > img { width: 70px; height: 66px; object-fit: contain; }
.closing-card .section-kicker { margin-bottom: .25rem; }
.closing-card h2 { font-size: clamp(1.7rem, 3vw, 2.25rem); }
.text-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--blue-deep) !important; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: .2em; white-space: nowrap; }
.site-footer { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: center; gap: 1.2rem; padding: 1.4rem 0 2.2rem; border-top: 1px solid var(--line); }
.footer-brand .site-brand { font-size: 1.02rem; }
.footer-brand p { margin: .2rem 0 0; color: var(--body-ink); font-size: .8rem; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem 1.1rem; padding: 0; border: 0; }
.site-footer nav a { color: var(--body-ink); font-size: .8rem; text-decoration: none; }
.copyright { grid-column: 1 / -1; margin: 0; color: var(--body-ink); font-size: .74rem; }
.landing-page a:focus-visible { outline: 3px solid #986ce1; outline-offset: 3px; }

@media (max-width: 850px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(275px, .8fr); min-height: 470px; padding: 2.6rem; }
  .hero-art { min-height: 360px; }
  .story-section { grid-template-columns: minmax(0, .9fr) minmax(290px, 1.1fr); gap: 2.3rem; }
  .feature-ribbon { gap: .9rem; }
  .feature-note { flex-direction: column; }
  .closing-card { grid-template-columns: 64px 1fr; }
  .closing-card > img { width: 60px; height: 58px; }
  .closing-card .text-link { grid-column: 2; }
}

@media (max-width: 620px) {
  .landing-shell { width: min(100% - 1.4rem, 1120px); }
  .site-header { align-items: flex-start; flex-direction: column; gap: .75rem; padding: .8rem 0 1rem; }
  .site-nav { width: 100%; flex-wrap: wrap; gap: .5rem .75rem; font-size: .78rem; }
  .language-links { margin-left: auto; }
  .language-links a { min-width: 1.8rem; padding-inline: .3rem; }
  .hero { grid-template-columns: 1fr; min-height: auto; margin: .2rem 0 4.3rem; padding: 1.7rem 1.3rem .7rem; border-radius: 1.35rem 2.6rem 1.35rem 1.35rem; }
  .hero h1 { max-width: 500px; font-size: clamp(2.65rem, 11vw, 3.7rem); }
  .handwritten-note { margin-bottom: .75rem; font-size: .9rem; }
  .hero-lede { margin: .9rem 0 1.1rem; font-size: .96rem; }
  .hero-actions { gap: .65rem; }
  .hero-promise { margin-top: .85rem; font-size: .8rem; }
  .hero-art { min-height: 260px; margin: .1rem 0 0; }
  .art-sun { width: min(68vw, 250px); }
  .hero-mascot { width: min(68%, 225px); }
  .sticker-one { top: 5%; left: 1%; }
  .memory-slip { bottom: 5%; width: min(100%, 245px); grid-template-columns: 1fr 43px; column-gap: .45rem; padding: .6rem .75rem; }
  .memory-slip img { width: 42px; height: 42px; }
  .story-section { grid-template-columns: 1fr; gap: 1.4rem; margin-bottom: 4.3rem; }
  .story-section h2, .plans-heading h2 { font-size: clamp(2.35rem, 9.5vw, 3.35rem); }
  .pet-gallery { width: min(100%, 440px); padding: 1rem; }
  .pet-tile { min-height: 82px; }
  .pet-tile img { width: 52px; height: 54px; }
  .feature-ribbon { grid-template-columns: 1fr; gap: .55rem; margin-bottom: 4.3rem; padding: 1rem 0; }
  .feature-note, .feature-note:nth-child(2), .feature-note:nth-child(3) { flex-direction: row; margin: 0; padding: .35rem 0; }
  .feature-note img { width: 48px; height: 46px; }
  .plans-section { padding: 1.65rem .9rem; border-radius: 1.2rem; }
  .plans-heading { padding: 0 .3rem; text-align: left; }
  .plans-heading > p:last-child { margin-left: 0; }
  .plan-pair { grid-template-columns: 1fr; }
  .plan-card > p:not(.plan-label) { min-height: 0; }
  .closing-card { grid-template-columns: 50px 1fr; gap: .55rem .75rem; margin: 3.2rem 0; padding: 1rem; }
  .closing-card > img { width: 48px; height: 46px; }
  .closing-card .text-link { grid-column: 1 / -1; }
  .site-footer { grid-template-columns: 1fr; gap: .85rem; }
  .site-footer nav { justify-content: flex-start; }
  .copyright { grid-column: 1; }
}