:root{
  --bg:#ffffff; --ink:#0b1221; --muted:#5b677a; --brand:#0b5fff; --card:#f4f7fb; --line:#e6ecf5;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;color:var(--ink);background:var(--bg);}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:999}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:800;font-size:20px;color:var(--ink)}
.logo span{color:var(--brand)}
.desktop-nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.desktop-nav a{font-weight:600}
.hamburger{display:none;gap:4px;flex-direction:column;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);border-radius:10px}
.hamburger span{display:block;width:22px;height:2px;background:var(--ink);}
@media (max-width:900px){
  .desktop-nav{display:none}
  .hamburger{display:flex}
}
.drawer{position:fixed;top:0;right:-340px;width:320px;height:100dvh;background:#fff;border-left:1px solid var(--line);box-shadow:-10px 0 30px rgba(0,0,0,.08);transition:right .35s ease;z-index:1000;display:flex;flex-direction:column}
.drawer.open{right:0}
.drawer-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--line)}
.drawer-scroll{overflow:auto;flex:1}
.drawer-list{list-style:none;margin:0;padding:10px 0}
.drawer-list li a{display:block;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--ink)}
.drawer-close{background:transparent;border:none;font-size:28px;line-height:1}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.2);backdrop-filter:saturate(140%) blur(2px);z-index:900}

.site-main{min-height:60vh}
.hero{padding:36px 0;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff, #f9fbff)}
h1{font-size:40px;margin:0 0 10px}
.lead{color:var(--muted);font-size:18px;max-width:60ch}
.hero-cards{margin:24px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:900px){.hero-cards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.hero-cards{grid-template-columns:1fr}}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}

.card{display:block;background:var(--card);padding:16px;border:1px solid var(--line);border-radius:14px;box-shadow:0 3px 10px rgba(0,0,0,.04);transition:transform .12s ease, box-shadow .12s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 5px 16px rgba(0,0,0,.08)}
.card h3{margin:0 0 6px}
.card p{margin:0 0 10px;color:var(--muted)}
.pill{display:inline-block;font-size:12px;padding:4px 8px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--muted)}

.filter{width:100%;padding:12px 14px;margin:8px 0 18px;border:1px solid var(--line);border-radius:12px}

.site-footer{border-top:1px solid var(--line);margin-top:36px;padding:20px 0;background:#fff}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr}}
.logo.small{font-weight:800}
.subfooter{padding-top:8px;color:var(--muted)}

.mascot-toggle{display:flex;align-items:center;gap:8px;font-size:14px;margin-top:10px}
.mascot-note{display:flex;align-items:center;gap:10px;margin:8px 0 0}
.mascot-avatar{font-size:22px}
.mascot-bubble{background:#fff;border:1px dashed var(--brand);padding:10px 12px;border-radius:12px;max-width:54ch}

[data-mascot]{display:none}
html.mascot-on [data-mascot]{display:flex}

/* --- Fun homepage & Jenny styling --- */
.hero.fun {
  position: relative;
  padding: 60px 0 40px;
  background: radial-gradient(1200px 500px at 70% -10%, #eaf2ff 0, transparent 70%), linear-gradient(180deg,#fff,#f7faff);
}
.hero .kicker { text-transform: uppercase; letter-spacing:.12em; font-weight:700; font-size:12px; color:var(--brand); }
.hero .title-xl { font-size:46px; line-height:1.08; margin:.35rem 0 .6rem; }
.hero .sub { color:var(--muted); font-size:18px; max-width:65ch; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
.btn {
  display:inline-block; padding:12px 16px; border-radius:12px; border:1px solid var(--line);
  background:#fff; font-weight:700; text-decoration:none;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.btn.primary { background:var(--brand); color:#fff; border-color:transparent; }
.btn:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.1); text-decoration:none; }

.jenny-bar {
  display:flex; align-items:center; gap:12px; margin-top:18px;
  background:#fff; border:1px dashed var(--brand); padding:12px 14px; border-radius:14px;
}
.jenny-avatar { font-size:22px; }
.jenny-voice { font-style:italic; color:#1a243a; opacity:.9; }
.fadein { animation: fadein .6s ease; }
@keyframes fadein { from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }

/* Spotlight card */
.spotlight {
  margin:28px 0; display:grid; grid-template-columns:2fr 1fr; gap:18px;
}
@media (max-width:900px){ .spotlight{ grid-template-columns:1fr; } }
.card.emph {
  background:linear-gradient(180deg,#fff,#f1f6ff);
  border:1px solid var(--line);
}
.card .small { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.card .title { font-weight:800; margin:.2rem 0 .4rem; }
.card .muted { color:var(--muted); }

/* Pawprint confetti (brief, subtle) */
.paw-confetti{
  position:fixed; pointer-events:none; inset:0;
  background:
    radial-gradient(6px 6px at 20% 30%, rgba(0,0,0,.08) 40%, transparent 41%),
    radial-gradient(6px 6px at 40% 20%, rgba(0,0,0,.08) 40%, transparent 41%),
    radial-gradient(6px 6px at 60% 35%, rgba(0,0,0,.08) 40%, transparent 41%),
    radial-gradient(6px 6px at 80% 25%, rgba(0,0,0,.08) 40%, transparent 41%);
  animation: pawfade 2.2s ease forwards;
  z-index: 9999;
}
@keyframes pawfade { from{opacity:.9} to{opacity:0} }

/* “All Pages” heading spice */
.h2-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.h2-row .hint { color:var(--muted); font-size:14px; }

/* Jenny tips anywhere */
[data-mascot]{ display:none }
html.mascot-on [data-mascot]{ display:flex }

.badge-paw{
  display:inline-flex; align-items:center; gap:6px; font-size:12px;
  background:#fff; border:1px solid var(--line); padding:6px 8px; border-radius:999px;
}

/* === Jenny bio & theme === */
.jenny-bio{
  display:grid; grid-template-columns:1.2fr 1.8fr; gap:24px; align-items:start; margin:28px 0;
}
@media (max-width:980px){ .jenny-bio{ grid-template-columns:1fr; } }

.jenny-portrait figure{
  margin:0; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.jenny-portrait img{ display:block; width:100%; height:auto; }
.jenny-portrait figcaption{
  font-size:13px; color:var(--muted); padding:8px 12px; border-top:1px solid var(--line); background:#fafcff;
}

.photo-strip{
  display:flex; gap:10px; margin-top:10px; flex-wrap:wrap;
}
.photo-strip .thumb{
  padding:0; border:1px solid var(--line); background:#fff; border-radius:10px; overflow:hidden; cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.05);
}
.photo-strip .thumb img{ display:block; width:80px; height:60px; object-fit:cover; }

.paw-ribbon{
  display:inline-block; background:linear-gradient(90deg,#f1f6ff,#fff);
  border:1px dashed var(--brand); color:#0a1b3a; padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px; letter-spacing:.02em;
}
.jenny-title{ margin:.5rem 0 .6rem; font-size:28px; }

.jenny-list{
  margin:12px 0 16px; padding-left:18px;
}
.jenny-list li{ margin:.35rem 0; }

.jenny-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }

/* Divider with paws */
.paw-divider{
  height:14px; border:0; margin:22px auto; width:160px;
  background:
    radial-gradient(6px 6px at 10% 50%, rgba(0,0,0,.12) 45%, transparent 46%) 0 0/50% 100% repeat-x,
    linear-gradient(var(--line),var(--line));
}

/* Light paw background accents for the page */
body{
  background:
    radial-gradient(800px 300px at 120% -10%, rgba(11,95,255,0.06), transparent 70%),
    radial-gradient(600px 260px at -20% 110%, rgba(11,95,255,0.05), transparent 70%),
    var(--bg);
}

/* Make hero title feel a touch more “brand” without being cartoony */
.title-xl .badge-paw{ margin-left:8px; }