/* Pawperwork design system. Loaded last on every page, so these rules win over each page's own styles.
   One serif for headings (Fraunces), one sans for everything else (Inter), warm neutrals with deep teal as the only
   strong colour, hairline borders, soft layered shadows, one button style, one field style, and quiet motion. */

:root {
  --bg: #F6F4EF;
  --surface: #FFFFFF;
  --soft: #F3F1EB;
  --ink: #1C1B1F;
  --muted: #66636B;
  --line: #E6E2D9;
  --line-strong: #D5D0C5;
  --hero: #0C4E48;
  --hero-ink: #FFFFFF;
  --hero-soft: #B9D3CE;
  --teal: #0D5C55;
  --teal-ink: #FFFFFF;
  --teal-soft: #E7F0EE;
  --accent-hover: #0A4C46;
  --coral: #D9533D;
  --coral-ink: #FFFFFF;
  --sun: #F2C14E;
  --lav: #EFECF6;
  --lav-ink: #4A4170;
  --focus: #0D5C55;
  --radius: 20px;
  --r-control: 12px;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow-xs: 0 1px 2px rgba(28, 27, 31, .05);
  --shadow-sm: 0 1px 2px rgba(28, 27, 31, .04), 0 2px 8px -2px rgba(28, 27, 31, .06);
  --shadow-md: 0 1px 2px rgba(28, 27, 31, .04), 0 12px 32px -12px rgba(28, 27, 31, .14);
  --ring: 0 0 0 4px rgba(13, 92, 85, .16);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --glow: rgba(13, 92, 85, .10);
  --glow-2: rgba(242, 193, 78, .10);
}
@media (prefers-color-scheme: dark) {
  :root, :root:not([data-theme="light"]) {
    --bg: #111213; --surface: #1A1B1D; --soft: #222326; --ink: #F2F0EC; --muted: #A3A0A8; --line: #2C2D31; --line-strong: #3B3C41;
    --hero: #0B3A36; --hero-ink: #F2F0EC; --hero-soft: #A6C7C1; --teal: #5BC2B3; --teal-ink: #0B1F1D; --teal-soft: #16302D; --accent-hover: #74D0C2;
    --coral: #F08A78; --coral-ink: #1C1B1F; --sun: #F2C14E; --lav: #25223A; --lav-ink: #CFC8F2; --focus: #5BC2B3;
    --shadow-xs: none; --shadow-sm: 0 0 0 1px rgba(255, 255, 255, .02); --shadow-md: 0 16px 40px -16px rgba(0, 0, 0, .6); --ring: 0 0 0 4px rgba(91, 194, 179, .22); --glow: rgba(91, 194, 179, .10); --glow-2: rgba(242, 193, 78, .05);
  }
}
:root[data-theme="dark"] {
  --bg: #111213; --surface: #1A1B1D; --soft: #222326; --ink: #F2F0EC; --muted: #A3A0A8; --line: #2C2D31; --line-strong: #3B3C41;
  --hero: #0B3A36; --hero-ink: #F2F0EC; --hero-soft: #A6C7C1; --teal: #5BC2B3; --teal-ink: #0B1F1D; --teal-soft: #16302D; --accent-hover: #74D0C2;
  --coral: #F08A78; --coral-ink: #1C1B1F; --sun: #F2C14E; --lav: #25223A; --lav-ink: #CFC8F2; --focus: #5BC2B3;
  --shadow-xs: none; --shadow-sm: 0 0 0 1px rgba(255, 255, 255, .02); --shadow-md: 0 16px 40px -16px rgba(0, 0, 0, .6); --ring: 0 0 0 4px rgba(91, 194, 179, .22); --glow: rgba(91, 194, 179, .10); --glow-2: rgba(242, 193, 78, .05);
}

/* ---------- Type: two families, three weights, no faux bold */
html { font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; letter-spacing: -0.006em; background: var(--bg); color: var(--ink); font-feature-settings: "cv11", "ss03"; }
b, strong, th, summary { font-weight: 600; }
h1, h2, .panel-h h2, .card h2, .done h2, .pw-email h3, .expert h3, .modal h2, .modal h3, body .cl h2, .guide h2 {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.008em; font-variation-settings: "opsz" 60; color: inherit;
}
h1 { line-height: 1.04; }
h2 { line-height: 1.15; }
h3 { font-weight: 600; letter-spacing: -0.012em; }
.eyebrow, .answer .k { font-weight: 600; font-size: 12px; letter-spacing: 0.08em; }
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
::selection { background: rgba(13, 92, 85, .18); }

/* ---------- Wordmark: the same serif as the headings, "Paw" in teal */
header .sitebar .brand, .top .brand, .home-brand { font-family: var(--font-display) !important; font-weight: 600 !important; font-size: 22px !important; letter-spacing: -0.02em; font-variation-settings: "opsz" 48; gap: 10px !important; color: var(--ink) !important; }
header .sitebar .brand svg, .top .brand svg, .home-brand svg { width: 28px; height: 28px; }
header .sitebar .brand .wm, .top .brand .wm, .home-brand .wm { color: var(--ink) !important; }
header .sitebar .brand .wm span, .top .brand .wm span, .home-brand .wm .paw { color: var(--teal) !important; }

/* ---------- Header (every page): calm and light, a faint teal glow, a hairline under the top bar */
body > header, .board, .top, .top + .hero { background: var(--bg) !important; color: var(--ink) !important; }
body > header, .board { background: radial-gradient(900px 420px at 88% 0%, var(--glow), transparent 70%), var(--bg) !important; }
.board { border-radius: 0 !important; }
body > header p, .hero p, .byline, .crumbs, .crumbs a { color: var(--muted) !important; }
body > header p a, header a.mail { color: var(--teal) !important; }
body > header .sitebar, .top .in { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.board .topnav.wrap { border-bottom: 0; }

/* Header links: quiet text links, a soft pill for the current page, one solid button for "My plan" */
.sitenav, .board .topnav.wrap { gap: 2px !important; }
.sitenav a, .topnav .navlink {
  color: var(--muted) !important; font: 500 14.5px/1 var(--font-body) !important; letter-spacing: -0.005em;
  padding: 9px 12px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.sitenav a:hover, .sitenav a:focus-visible, .topnav .navlink:hover, .topnav .navlink:focus-visible { background: var(--soft) !important; color: var(--ink) !important; }
.sitenav a[aria-current="page"] { background: var(--soft) !important; color: var(--ink) !important; }
.sitenav a.plan { background: var(--teal) !important; color: var(--teal-ink) !important; font-weight: 600 !important; margin-left: 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(12, 46, 43, .22) !important; }
.sitenav a.plan:hover, .sitenav a.plan:focus-visible { background: var(--accent-hover) !important; filter: none; }
header .lang-switch, .board .lang-switch, .top .lang-switch {
  font: 600 12px/1 var(--font-body) !important; letter-spacing: 0.06em; color: var(--muted) !important; background: transparent !important;
  border: 1px solid var(--line-strong) !important; border-radius: 999px !important; padding: 7px 10px !important; margin-left: 6px; cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
header .lang-switch:hover, .board .lang-switch:hover, .top .lang-switch:hover { background: var(--soft) !important; color: var(--ink) !important; border-color: var(--muted) !important; }
@media (max-width: 560px) {
  .sitenav a, .topnav .navlink { padding: 8px 6px !important; font-size: 13.5px !important; }
  .sitenav a.plan { margin-left: 0; }
}
/* The smallest phones: five links and the language switch still fit on one row */
@media (max-width: 380px) {
  .sitenav a, .topnav .navlink { padding: 8px 4px !important; font-size: 13px !important; letter-spacing: -0.01em; }
  header .lang-switch, .board .lang-switch, .top .lang-switch { margin-left: 2px; padding: 7px 7px !important; }
}
@media (max-width: 340px) { .sitenav a[href="/faq"]:not([aria-current]) { display: none; } }

/* Page titles */
body > header h1, .hero h1 { font-size: clamp(34px, 5.6vw, 54px) !important; line-height: 1.04; margin-top: 32px; color: var(--ink) !important; }
body > header { padding-bottom: 64px !important; }
.top .cta { background: var(--teal) !important; color: var(--teal-ink) !important; }

/* ---------- Home hero: brand top left, one big headline, a real plan as the picture, the crew sitting on it */
.board .topnav.wrap { justify-content: flex-start !important; align-items: center; padding-block: 18px 0 !important; }
.home-brand { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; padding: 4px 0; }
.home-brand .logo { width: 28px; height: 28px; flex: none; }
.board > .wrap:not(.topnav) { grid-template-columns: minmax(0, 1fr) minmax(0, 470px) !important; padding-block: clamp(32px, 6vw, 72px) clamp(36px, 5vw, 64px) !important; gap: 56px !important; }
.board .tag { display: inline-block; background: var(--surface) !important; color: var(--muted) !important; border: 1px solid var(--line); box-shadow: var(--shadow-xs); font: 500 12.5px/1 var(--font-body) !important; letter-spacing: .01em; padding: 8px 12px !important; border-radius: 999px; }
.board h1 { font-size: clamp(42px, 6vw, 70px); line-height: 1.04; letter-spacing: -0.012em; margin: 22px 0 0; max-width: 13ch; font-variation-settings: "opsz" 96; color: var(--ink); }
.board h1 em { font-style: italic; color: var(--teal); font-weight: 500; }
.board p.lede { font-size: clamp(17px, 1.6vw, 19.5px); line-height: 1.55; color: var(--muted) !important; max-width: 46ch; margin: 20px 0 0; }
.board .hero-cta { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
body.onboarding .board .hero-cta { display: flex !important; }
.cta-note { color: var(--muted); font-size: 14px; }
.board .trust { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 22px 0 0; margin: 26px 0 0; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 500 !important; color: var(--muted) !important; max-width: 560px; }
.board .trust li { display: inline-flex; align-items: center; gap: 8px; font-weight: 500 !important; }
.board .trust li::before { width: 16px !important; height: 16px !important; font-size: 10px !important; background: var(--teal-soft) !important; color: var(--teal) !important; }
.board .route { display: none !important; }

.hero-visual { position: relative; display: grid; justify-items: center; }
.hero-visual .mascot { position: relative !important; z-index: 2; width: min(100%, 330px) !important; margin-bottom: -30px; right: auto !important; bottom: auto !important; filter: none; }
.pv-card { position: relative; z-index: 1; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 22px 22px 18px; box-shadow: 0 1px 2px rgba(28, 27, 31, .04), 0 24px 60px -24px rgba(12, 46, 43, .28), 0 0 0 6px color-mix(in srgb, var(--surface) 55%, transparent); display: grid; gap: 14px; font-size: 14px; }
.pv-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.pv-ava { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--sun); color: #1C1B1F; font: 600 16px/1 var(--font-display); }
.pv-who { display: grid; line-height: 1.3; min-width: 0; }
.pv-who b { font-size: 15.5px; }
.pv-who span { color: var(--muted); font-size: 13px; }
.pv-days { text-align: right; color: var(--muted); font-size: 12.5px; line-height: 1.2; }
.pv-days b { display: block; font: 500 26px/1 var(--font-display); color: var(--teal); }
.pv-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; color: var(--muted); font-size: 12.5px; }
.pv-bar { height: 6px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.pv-bar i { display: block; height: 100%; width: 67%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), color-mix(in srgb, var(--teal) 70%, #F2C14E)); }
.pv-list { list-style: none; margin: 0; padding: 0; display: grid; }
.pv-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.pv-list li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box; }
.pv-list li.ok::before { background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.pv-list li.due::before { border: 1.5px dashed var(--warn, #9A5300); }
.pv-list em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); background: var(--soft); padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.pv-list li.due em { color: var(--warn, #9A5300); background: var(--warn-bg, #FFEBCC); }
.pv-foot { color: var(--muted); font-size: 12.5px; display: flex; align-items: center; gap: 8px; }
.pv-foot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok, #217A52); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok, #217A52) 20%, transparent); }

/* How it works: three plain steps under the hero */
.proof { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.proof .wrap { padding-block: 28px !important; display: block !important; }
.steps3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: s; }
.steps3 li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; counter-increment: s; }
.steps3 li::before { content: counter(s); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line-strong); color: var(--teal); font: 500 15px/1 var(--font-display); }
.steps3 b { font-size: 15px; }
.steps3 span { color: var(--muted); font-size: 14px; line-height: 1.5; }
body:not(.onboarding) .proof { display: none; }

@media (max-width: 900px) {
  .board > .wrap:not(.topnav) { grid-template-columns: minmax(0, 1fr) !important; gap: 36px !important; }
  .hero-visual { max-width: 470px; width: 100%; justify-self: center; }
  .steps3 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
  .board .topnav.wrap { flex-wrap: wrap !important; row-gap: 10px !important; }
  .home-brand { flex: 1 0 100%; }
  .board > .wrap:not(.topnav) { padding-block: 28px 36px !important; }
  .board h1 { font-size: 42px; }
  .board .hero-cta { margin-top: 24px; min-height: 0 !important; }
  .board .hero-cta .go { width: 100%; }
  .cta-note { width: 100%; text-align: center; }
  .hero-visual .mascot { position: relative !important; width: min(58%, 220px) !important; display: block !important; margin-bottom: -22px; }
  body:not(.onboarding) .hero-visual { display: none; }
  .pv-card { padding: 18px 16px 14px; }
}

/* ---------- Buttons: one primary, one secondary, one quiet link. Pill shape, 44px tall, medium weight. */
.btn, button:not([class]), .btns .alt, .share button, .hero-cta .go, .cta a.btn, .planbox a, .top .cta, a.btn {
  font-family: var(--font-body) !important; font-weight: 600 !important; font-size: 15px; letter-spacing: -0.01em; line-height: 1.2;
  min-height: 44px; padding: 11px 20px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: var(--shadow-xs);
  cursor: pointer; transition: background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease), color .18s var(--ease);
}
.btn:hover, .btns .alt:hover, .share button:hover { border-color: var(--muted) !important; background: var(--soft) !important; }
/* Primary: deep teal with a soft inner highlight. Unstyled buttons on the small pages are their main action. */
.btn.primary, button:not([class]):not([aria-pressed]), .cta a.btn {
  background: var(--teal) !important; color: var(--teal-ink) !important; border: 1px solid transparent !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(12, 46, 43, .22), 0 6px 16px -6px rgba(12, 46, 43, .38) !important;
}
.btn.primary:hover, button:not([class]):not([aria-pressed]):hover, .cta a.btn:hover { background: var(--accent-hover) !important; transform: translateY(-1px); filter: none; }
.btns .alt, .share button { background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important; }
.btn:active, button:not([class]):active, .hero-cta .go:active, a.btn:active, .planbox a:active { transform: translateY(0) scale(.985); }
/* Toggles (units, survey answers): white until chosen, then ink */
button[aria-pressed], .cr .cr-units button {
  font-family: var(--font-body) !important; font-weight: 500 !important; min-height: 38px; padding: 7px 14px !important; border-radius: 999px !important;
  background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important; box-shadow: var(--shadow-xs); cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
button[aria-pressed]:hover { border-color: var(--muted) !important; }
button[aria-pressed="true"], .cr .cr-units button[aria-pressed=true] { background: var(--ink) !important; color: var(--surface) !important; border-color: var(--ink) !important; font-weight: 600 !important; }
/* On the dark band the primary turns white */
.hero-cta .go { background: var(--teal) !important; color: var(--teal-ink) !important; border: 0 !important; min-height: 50px; padding: 14px 26px; font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(12, 46, 43, .25), 0 10px 24px -10px rgba(12, 46, 43, .55) !important; }
.hero-cta .go:hover { background: var(--accent-hover) !important; transform: translateY(-1px); }
.planbox a {
  background: #FFFFFF !important; color: #0C4E48 !important; border: 0 !important; min-height: 48px; padding: 13px 24px; font-size: 15.5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 8px 24px -8px rgba(0, 0, 0, .4) !important;
}
.planbox a:hover { background: #F3F1EB !important; transform: translateY(-1px); }
.top .cta { min-height: 40px; padding: 9px 18px; font-size: 14.5px; border: 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(12, 46, 43, .22) !important; }
.btn.link { min-height: 0 !important; padding: 2px 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--muted) !important; font-weight: 500 !important; font-size: 14px !important; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-color: var(--line-strong) !important; }
.btn.link:hover { color: var(--ink) !important; text-decoration-color: currentColor !important; transform: none; }
.btn.danger { color: var(--bad) !important; }
.btn.primary.danger { background: var(--bad) !important; color: #FFFFFF !important; }
button:disabled, .btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
.btn:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Small chip buttons (quick questions, crew actions) */
.chipbtn { font: 500 13.5px/1.3 var(--font-body) !important; background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 999px; padding: 7px 12px; box-shadow: var(--shadow-xs); transition: border-color .18s var(--ease), background-color .18s var(--ease); }
.chipbtn:hover { border-color: var(--line-strong) !important; background: var(--soft) !important; filter: none; }
.dino-acts .chipbtn { font-size: 12px !important; padding: 5px 10px; }

/* ---------- Fields: hairline border, soft focus ring, custom select arrow */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea {
  font-family: var(--font-body); font-size: 16px; color: var(--ink); background-color: var(--surface) !important;
  border: 1px solid var(--line-strong) !important; border-radius: var(--r-control) !important; min-height: 46px; padding: 10px 14px !important;
  box-shadow: var(--shadow-xs); transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
textarea { min-height: 96px; }
input:not([type="checkbox"]):not([type="radio"]):hover, select:hover, textarea:hover { border-color: var(--muted) !important; }
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus,
input:not([type="checkbox"]):not([type="radio"]):focus-visible, select:focus-visible, textarea:focus-visible { outline: none !important; border-color: var(--teal) !important; box-shadow: var(--ring) !important; }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
select {
  -webkit-appearance: none; appearance: none; padding-right: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2366636B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 14px center !important;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--teal); }
.field label, .field .lbl, .about label, .field > span:first-child { font-weight: 500 !important; font-size: 14px !important; color: var(--ink); letter-spacing: -0.005em; }
.field { gap: 6px !important; }
.field small, .hint, .small { color: var(--muted); }

/* Segmented choices: a quiet track, the chosen one lifts out in white */
.seg { background: var(--soft) !important; border: 1px solid var(--line); border-radius: 14px !important; padding: 4px !important; gap: 2px !important; }
.seg label { font-weight: 500 !important; font-size: 14.5px !important; color: var(--muted); border-radius: 10px !important; padding: 9px 8px !important; transition: background-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease); }
.seg label:hover { color: var(--ink); }
.seg label:has(input:checked) { background: var(--surface) !important; color: var(--ink) !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(28, 27, 31, .08), 0 2px 8px -2px rgba(28, 27, 31, .12), 0 0 0 1px rgba(28, 27, 31, .04); }
:root[data-theme="dark"] .seg label:has(input:checked) { background: #2C2D31 !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seg label:has(input:checked) { background: #2C2D31 !important; } }

/* ---------- Cards: white, hairline, soft shadow, generous padding */
.panel, .card, main > form, .done {
  background: var(--surface); border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-md) !important;
}
.panel-h { padding: 24px 28px 8px !important; }
.panel-b { padding: 16px 28px 28px !important; gap: 20px !important; }
.panel-h h2 { font-size: 28px !important; }
.card h2 { font-size: 26px !important; }
.pet, .doclist, .plan, .lockcard, .remind-card, .incl, .pw-email, .planb .pick, .checks li, .scroll, .drop, .filled, .human, .expert, .story {
  border-radius: 16px !important;
}
.pet, .doclist, .pw-email, .remind-card, .lockcard, .plan { background: var(--soft) !important; border: 1px solid var(--line) !important; }
.checks li, .planb .pick { background: var(--soft) !important; border: 1px solid transparent; }
.dl li { border: 1px solid var(--line); box-shadow: none; }
.answer { border: 1px solid var(--teal) !important; box-shadow: var(--shadow-md), 0 0 0 3px var(--teal-soft) !important; }
.planbox { background: radial-gradient(800px 300px at 90% 0%, rgba(255, 255, 255, .08), transparent 60%), var(--hero) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-md); }

/* Small labels and tags: lighter, smaller, calmer */
.pill, .example, .passbadge, .tag, .dl .tag, .checked, .steps span { font-weight: 600 !important; letter-spacing: 0; }
.steps span { background: transparent !important; border: 1px solid var(--line); color: var(--muted); font-weight: 500 !important; }
.steps span[aria-current], .steps .on, .steps span.cur { color: var(--ink); border-color: var(--line-strong); background: var(--surface) !important; }
.checked { background: rgba(255, 255, 255, .12) !important; color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, .22); }

/* Sticky "jump to" row */
.jump { background: color-mix(in srgb, var(--bg) 82%, transparent) !important; backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line) !important; }
.jump a { font-weight: 500 !important; border: 1px solid var(--line) !important; background: var(--surface) !important; box-shadow: var(--shadow-xs); transition: border-color .18s var(--ease), color .18s var(--ease); }
.jump a:hover, .jump a:focus-visible { border-color: var(--teal) !important; color: var(--teal) !important; }

/* Chat */
.msg { font-size: 15px; border-radius: 18px; }
.msg.me { background: var(--teal) !important; color: var(--teal-ink) !important; }
.crew-fab:not([hidden]) { background: var(--ink) !important; font-weight: 600 !important; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 12px 32px -8px rgba(0, 0, 0, .35) !important; }
.dino-say { border: 1px solid var(--line-strong) !important; box-shadow: var(--shadow-sm) !important; font-weight: 500 !important; }
.toast { font-weight: 500 !important; box-shadow: var(--shadow-md); }
.modal { border-radius: 24px !important; box-shadow: 0 24px 64px -16px rgba(0, 0, 0, .35); }

/* Tables and details */
th { background: var(--soft) !important; font-weight: 600 !important; font-size: 14px; color: var(--muted); }
details > summary { font-weight: 600 !important; }

/* ---------- Footer */
footer, .sitefoot { color: var(--muted); font-size: 14px !important; }
footer a, .sitefoot a { color: var(--muted); text-decoration: none; }
footer a:hover, .sitefoot a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Motion: gentle, and none at all for people who ask for less */
@media (prefers-reduced-motion: reduce) {
  .btn, button, .hero-cta .go, a.btn, input, select, textarea, .seg label, .sitenav a, .topnav .navlink { transition: none !important; }
  .btn:hover, button:hover, .hero-cta .go:hover, .planbox a:hover, .top .cta:hover { transform: none !important; }
}
.doc-pets .dp { border-width: 1px !important; font-weight: 500 !important; }
.doc-pets .dp.on { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--surface) !important; }
/* Plan summary counts: white tiles, the number carries the colour */
.stat { background: var(--surface) !important; border: 1px solid var(--line); box-shadow: var(--shadow-xs); padding: 16px 18px !important; }
.stat b { font-weight: 500 !important; font-size: 40px !important; }
.stat span { color: var(--muted); font-weight: 500 !important; display: inline-flex; align-items: center; gap: 6px; }
.stat span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stat.bad span::before { background: var(--bad); } .stat.warn span::before { background: var(--warn); } .stat.ok span::before { background: var(--ok); }
@media (max-width: 560px) {
  .panel-h { padding: 20px 20px 6px !important; }
  .panel-b { padding: 12px 20px 22px !important; }
  .panel-h h2 { font-size: 26px !important; }
}

/* ---------- Home footer: brand and three link columns, the small print below */
.site-foot { border-top: 1px solid var(--line); margin-top: 32px; background: color-mix(in srgb, var(--surface) 50%, transparent); }
.site-foot .wrap { padding-block: 48px 40px !important; gap: 28px !important; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 40px; }
.foot-brand { display: grid; gap: 12px; align-content: start; }
.foot-brand p { margin: 0; max-width: 36ch; font-size: 13.5px; line-height: 1.55; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.foot-cols div { display: grid; gap: 10px; align-content: start; font-size: 14px; }
.foot-cols b { color: var(--ink); font-size: 13px; font-weight: 600; }
.foot-cols a { color: var(--muted) !important; text-decoration: none; }
.foot-cols a:hover { color: var(--ink) !important; }
.foot-legal { border-top: 1px solid var(--line); padding-top: 20px; display: grid; gap: 8px; font-size: 12.5px; line-height: 1.6; max-width: 90ch; }
.foot-legal p { margin: 0; }
.foot-legal a { color: var(--ink) !important; text-decoration: underline; text-decoration-color: var(--line-strong); }
@media (max-width: 760px) { .foot-top { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 480px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.board { background: radial-gradient(900px 420px at 88% 0%, var(--glow), transparent 70%), var(--bg) !important; padding-bottom: 0 !important; }
.proof { margin-bottom: 0; border-bottom: 1px solid var(--line); }
@media (max-width: 560px) {
  .stat { padding: 12px !important; }
  .stat b { font-size: 32px !important; }
  .stat span { white-space: nowrap; font-size: 12.5px; }
}

/* Beta tag by the wordmark on every page, and the homepage feedback line. Kept away from the paywall on purpose. */
header .sitebar .brand::after, .top .brand::after, .topnav .home-brand::after { content: "Beta"; margin-left: 2px; padding: 2px 7px; border: 1px solid var(--line-strong, rgba(28,27,31,.18)); border-radius: 999px; font: 500 11px/1.4 Inter, system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #6B6670); background: transparent; align-self: center; }
.beta-note { margin: 8px auto 28px; text-align: center; font-size: 14px; color: var(--muted, #6B6670); }
.beta-note a { color: var(--teal, #0D5C55); font-weight: 500; text-underline-offset: 3px; }