/* ============================================================
   PIXELPET — retro pixel PC club
   Layout scheme: D — split-rail (left rail 72–88px, inner container 1120px)
   Spacing scale: compact (64/40, 24 mobile)
   ============================================================ */

:root{
  /* palette */
  --c-bg:#f6f5e6;
  --c-bg-dark:#211f2e;
  --c-ink:#211f2e;
  --c-ink-inv:#f6f5ef;
  --c-a1:#2fa84f;            /* pet green */
  --c-a2:#ff7b29;            /* carrot */
  --c-line:#211f2e;
  --c-muted:#5c5a68;
  --c-card:#ffffff;

  /* fonts */
  --f-display:"Jersey 15", system-ui, sans-serif;
  --f-body:"Mada", system-ui, sans-serif;

  /* radius / border / shadow */
  --r-card:4px;
  --border:2px solid currentColor;
  --shadow:3px 3px 0 var(--c-ink);
  --shadow-dark:3px 3px 0 rgba(0,0,0,.55);

  /* spacing — compact */
  --sec-y:64px;
  --blk-y:40px;
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:40px; --s-6:64px;

  /* layout */
  --w-container:1120px;
  --rail:80px;
}

@media (max-width:768px){
  :root{ --sec-y:40px; --blk-y:24px; --rail:0px; }
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--f-body);
  font-size:16.5px;
  line-height:1.7;
  color:var(--c-ink);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:400; line-height:1.02; margin:0; letter-spacing:.5px; }
h1{ font-size:clamp(30px,5vw,58px); }
h2{ font-size:clamp(24px,4vw,42px); }
h3{ font-size:clamp(20px,2.4vw,26px); }
p{ margin:0 0 var(--s-2); }
em{ font-style:normal; color:var(--c-a1); }
:focus-visible{ outline:3px solid var(--c-a2); outline-offset:3px; }

.u-visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ============================================================
   PIXEL PET SPRITE — 24x24, drawn with box-shadow pixels
   (motif: appears as emblem + resident in many places)
   ============================================================ */
.pet-sprite{
  display:inline-block;
  width:2px; height:2px;
  /* base scale 1px per cell; per-size wrappers scale up */
  transform-origin:top left;
  vertical-align:middle;
  flex:0 0 auto;
  /* the pet, green body / carrot ears — a 12x12 grid of 2px cells */
  --g:var(--c-a1);   /* green */
  --o:var(--c-a2);   /* carrot */
  --k:var(--c-ink);  /* ink outline */
  --w:#ffffff;       /* eye */
  box-shadow:
    /* row0 ears */
     8px 0 0 var(--o), 16px 0 0 var(--o),
    /* row1 */
     6px 2px 0 var(--o), 8px 2px 0 var(--o), 16px 2px 0 var(--o), 18px 2px 0 var(--o),
    /* row2 head top */
     8px 4px 0 var(--k),10px 4px 0 var(--k),12px 4px 0 var(--k),14px 4px 0 var(--k),16px 4px 0 var(--k),
    /* row3 */
     6px 6px 0 var(--k), 8px 6px 0 var(--g),10px 6px 0 var(--g),12px 6px 0 var(--g),14px 6px 0 var(--g),16px 6px 0 var(--g),18px 6px 0 var(--k),
    /* row4 eyes */
     6px 8px 0 var(--k), 8px 8px 0 var(--w),10px 8px 0 var(--k),12px 8px 0 var(--g),14px 8px 0 var(--w),16px 8px 0 var(--k),18px 8px 0 var(--k),
    /* row5 cheeks */
     6px 10px 0 var(--k), 8px 10px 0 var(--g),10px 10px 0 var(--g),12px 10px 0 var(--o),14px 10px 0 var(--g),16px 10px 0 var(--g),18px 10px 0 var(--k),
    /* row6 body */
     8px 12px 0 var(--k),10px 12px 0 var(--g),12px 12px 0 var(--g),14px 12px 0 var(--g),16px 12px 0 var(--k),
    /* row7 feet */
     8px 14px 0 var(--k),10px 14px 0 var(--k),14px 14px 0 var(--k),16px 14px 0 var(--k);
}
.pet-sprite--sm{ transform:scale(1); width:22px; height:18px; }
.pet-sprite--lg{ transform:scale(2.4); width:52px; height:44px; }
.pet-sprite--xl{ transform:scale(4); width:88px; height:72px; }
.pet-sprite--perch{
  position:absolute; top:-14px; right:14px; transform:scale(2);
  z-index:3;
}
.pet-sprite--sleep{
  position:absolute; right:24px; bottom:20px; transform:scale(2.6);
  opacity:.9;
}
.pet-sprite--lg,.pet-sprite--xl{ margin:8px; }

/* pixel heart motif */
.heart{
  display:inline-block; width:14px; height:14px; vertical-align:-2px;
  --r:var(--c-a2);
  box-shadow:
    2px 0 0 var(--r), 4px 0 0 var(--r), 8px 0 0 var(--r),10px 0 0 var(--r),
    0 2px 0 var(--r), 2px 2px 0 var(--r), 4px 2px 0 var(--r), 6px 2px 0 var(--r), 8px 2px 0 var(--r),10px 2px 0 var(--r),12px 2px 0 var(--r),
    2px 4px 0 var(--r), 4px 4px 0 var(--r), 6px 4px 0 var(--r), 8px 4px 0 var(--r),10px 4px 0 var(--r),
    4px 6px 0 var(--r), 6px 6px 0 var(--r), 8px 6px 0 var(--r),
    6px 8px 0 var(--r);
  width:2px; height:2px; margin-left:4px; margin-right:8px;
}

/* ============================================================
   LAYOUT — split-rail
   ============================================================ */
.shell{
  max-width:var(--w-container);
  margin-inline:auto;
  padding-inline:var(--s-4);
  padding-left:calc(var(--rail) + var(--s-4));
}
@media (max-width:768px){
  .shell{ padding-inline:var(--s-3); }
}

.rail{
  position:fixed; left:0; top:0; bottom:0; width:var(--rail);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s-3);
  border-right:var(--border);
  background:var(--c-bg);
  z-index:40;
}
.rail__leash{
  position:absolute; top:12%; bottom:12%; left:50%;
  width:2px; transform:translateX(-1px);
  background:repeating-linear-gradient(var(--c-ink) 0 4px, transparent 4px 8px);
  opacity:.5;
}
.rail__dot{
  position:relative; width:14px; height:14px; border-radius:50%;
  border:2px solid var(--c-ink); background:var(--c-bg); z-index:1;
  transition:background .2s, transform .2s;
}
.rail__dot:hover,.rail__dot.is-active{ background:var(--c-a1); transform:scale(1.25); }
.rail__dot::after{
  content:attr(data-label);
  position:absolute; left:22px; top:50%; transform:translateY(-50%);
  font-family:var(--f-display); font-size:13px; white-space:nowrap;
  background:var(--c-ink); color:var(--c-ink-inv); padding:2px 8px; border-radius:3px;
  opacity:0; pointer-events:none; transition:opacity .18s;
}
.rail__dot:hover::after{ opacity:1; }
@media (max-width:768px){ .rail{ display:none; } }

/* ============================================================
   NAV — nav-underline-bar
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--c-bg);
  border-bottom:var(--border);
}
.nav__inner{
  max-width:var(--w-container);
  margin-inline:auto;
  padding:12px var(--s-4);
  padding-left:calc(var(--rail) + var(--s-4));
  display:flex; align-items:center; gap:var(--s-3);
}
@media (max-width:768px){ .nav__inner{ padding-inline:var(--s-3); flex-wrap:wrap; } }
.nav__logo{ display:flex; align-items:center; gap:10px; }
.nav__name{ font-family:var(--f-display); font-size:26px; letter-spacing:1px; }
.nav__badge{
  font-family:var(--f-display); font-size:11px; letter-spacing:.5px;
  border:2px solid var(--c-ink); border-radius:3px;
  padding:2px 6px; background:var(--c-a1); color:var(--c-ink);
}
@media (max-width:520px){ .nav__badge{ display:none; } }
.nav__links{ display:flex; gap:var(--s-3); margin-left:auto; }
.nav__links a{ position:relative; font-weight:600; padding:4px 0; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:2px;
  background:var(--c-a2); transform:scaleX(0); transform-origin:left; transition:transform .25s;
}
.nav__links a:hover::after,.nav__links a.is-active::after{ transform:scaleX(1); }
.nav__cta{ margin-left:var(--s-2); }
@media (max-width:768px){
  .nav__links{ order:3; width:100%; margin-left:0; justify-content:space-between; gap:var(--s-2); }
  .nav__cta{ margin-left:auto; }
}
@media (max-width:400px){ .nav__links{ font-size:14px; flex-wrap:wrap; } }

/* ============================================================
   BUTTONS — pixel-stair corners + hard shadow
   ============================================================ */
.btn{
  --stair:4px;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-display); font-size:18px; letter-spacing:.5px;
  padding:10px 20px; cursor:pointer;
  border:var(--border); color:var(--c-ink); background:var(--c-bg);
  box-shadow:var(--shadow);
  clip-path:polygon(var(--stair) 0,calc(100% - var(--stair)) 0,100% var(--stair),100% calc(100% - var(--stair)),calc(100% - var(--stair)) 100%,var(--stair) 100%,0 calc(100% - var(--stair)),0 var(--stair));
  transition:transform .12s, box-shadow .12s, background .12s;
}
.btn:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--c-ink); }
.btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--c-ink); }
.btn--primary{ background:var(--c-a1); }
.btn--primary::before{
  content:""; width:14px; height:12px; margin-right:2px;
  /* mini pet ear-blink icon (2 frames via hover) */
  background:
    radial-gradient(circle at 3px 3px, var(--c-ink) 1.5px, transparent 1.6px),
    radial-gradient(circle at 11px 3px, var(--c-ink) 1.5px, transparent 1.6px);
  background-repeat:no-repeat;
}
.btn--primary:hover::before{ animation:earblink .5s steps(2) 1; }
@keyframes earblink{ 50%{ transform:translateY(-2px) scaleY(.6); } }
.btn--ghost{ background:var(--c-bg); }

/* ============================================================
   SECTIONS
   ============================================================ */
.s-hero{ padding-block:var(--sec-y) var(--s-4); }
.s-block{ padding-block:var(--sec-y); border-top:var(--border); }
.s-head{ max-width:60ch; margin-bottom:var(--blk-y); }
.s-kicker{
  display:inline-block; font-family:var(--f-display); font-size:14px;
  letter-spacing:1px; color:var(--c-a2); text-transform:uppercase; margin-bottom:8px;
}
.s-intro{ color:var(--c-muted); max-width:62ch; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-display); font-size:15px; letter-spacing:.5px;
  border:var(--border); border-radius:3px; padding:4px 10px;
  background:#fff; box-shadow:var(--shadow); margin-bottom:var(--s-3);
}

/* dark section */
.s-dark{
  background:var(--c-bg-dark); color:var(--c-ink-inv);
  position:relative; border-top:var(--border);
}
.s-dark .s-intro{ color:#bdbccb; }
.s-dark .s-kicker{ color:var(--c-a1); }
.s-dark .tama{ background:#2b2940; color:var(--c-ink-inv); box-shadow:var(--shadow-dark); }

/* ---------- tamagotchi frame ---------- */
.tama{
  position:relative;
  background:var(--c-card);
  border:var(--border); border-radius:10px;
  box-shadow:var(--shadow);
}
.tama__btns{
  display:flex; gap:8px; justify-content:center;
  padding:8px 0 12px;
}
.tama__btns i{ width:12px; height:12px; border-radius:50%; border:2px solid var(--c-ink); background:var(--c-bg); }
.tama__btns i:nth-child(2){ background:var(--c-a2); }

/* ---------- grids ---------- */
.grid{ display:grid; gap:var(--s-3); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .grid--3{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .grid--3{ grid-template-columns:1fr; } }

/* Stations: one card per row, photo beside the copy */
.grid--3.stations__grid{ grid-template-columns:1fr; gap:var(--s-4); }
@media (min-width:760px){
  .stations__grid .tama{
    display:grid;
    grid-template-columns:minmax(0,0.85fr) 1.15fr;
    align-items:stretch;
    column-gap:var(--s-4);
  }
  .stations__grid .tama__screen{ margin:8px; height:100%; }
  .stations__grid .tama__screen img{ height:100%; min-height:230px; aspect-ratio:auto; object-fit:cover; }
  .stations__grid .card__body{ align-self:center; }
  .stations__grid .tama__btns{ grid-column:1 / -1; }
}

/* ---------- paw bullets ---------- */
.paws{ list-style:none; margin:0 0 var(--s-2); padding:0; display:grid; gap:8px; }
.paws li{ position:relative; padding-left:26px; }
.paws li::before{
  content:""; position:absolute; left:0; top:8px; width:12px; height:10px;
  --p:var(--c-a1);
  box-shadow:
    3px 0 0 var(--p), 9px 0 0 var(--p),
    0 3px 0 var(--p), 12px 3px 0 var(--p),
    4px 4px 0 var(--p), 8px 4px 0 var(--p),
    4px 6px 0 var(--p), 6px 6px 0 var(--p), 8px 6px 0 var(--p);
  width:2px; height:2px;
}
.paws--split{ grid-template-columns:1fr 1fr; gap:8px 24px; max-width:none; }
@media (max-width:600px){ .paws--split{ grid-template-columns:1fr; } }

/* ============================================================
   HERO
   ============================================================ */
.hero--split{ display:grid; grid-template-columns:1.05fr 1fr; gap:var(--s-5); align-items:center; }
@media (max-width:860px){ .hero--split{ grid-template-columns:1fr; }
  .hero__media{ order:-1; } }
.hero__lead{ font-size:1.08rem; max-width:52ch; }
.hero__actions{ display:flex; gap:var(--s-2); flex-wrap:wrap; margin-bottom:var(--s-3); }
.hero__facts{ list-style:none; display:flex; gap:var(--s-4); padding:0; margin:0; flex-wrap:wrap; }
.hero__facts strong{ font-family:var(--f-display); font-size:22px; color:var(--c-a1); display:block; }
.hero__facts li{ font-size:14px; color:var(--c-muted); }

.tama--photo{ margin:0; overflow:visible; padding:8px; border-radius:12px; }
.tama--photo img{ border-radius:6px; width:100%; filter:saturate(1.02); }

/* pet stage — hero bottom edge walk area */
.pet-stage{
  position:relative;
  height:56px;
  margin:0 auto;
  max-width:var(--w-container);
}
#petCanvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* ============================================================
   STATIONS
   ============================================================ */
.card{ display:flex; flex-direction:column; overflow:hidden; }
.tama__screen{ margin:8px 8px 0; border:var(--border); border-radius:6px; overflow:hidden; background:var(--c-bg-dark); }
.tama__screen img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.tama__screen--plain{
  aspect-ratio:16/9; display:grid; place-items:center;
  background:repeating-linear-gradient(45deg,#eef3ee 0 8px,#e6ede6 8px 16px);
}
.card__body{ padding:var(--s-3); flex:1; }
.card__body h3{ margin-bottom:8px; }
.card--feature{ border-color:var(--c-a2); }
.card--feature .tama__screen{ border-color:var(--c-a2); }

/* ============================================================
   GAMES
   ============================================================ */
.games__grid{ margin-bottom:var(--s-3); }
.games__grid .card__body{ padding:var(--s-3); }
.games__grid--free{ grid-template-columns:1fr; margin-bottom:0; }
.games__grid--free .card__body{ padding:var(--s-4); }
.games__grid--free .plan__flag{ display:inline-block; margin-bottom:var(--s-2); }
.games__nb{ color:var(--c-ink); }
.games__nb strong{ color:var(--c-a2); }

/* ============================================================
   RATES
   ============================================================ */
.plan{ padding:var(--s-3); display:flex; flex-direction:column; }
.plan--pick{ border-color:var(--c-a1); box-shadow:4px 4px 0 var(--c-a1); }
.plan__flag{
  align-self:flex-start; font-family:var(--f-display); font-size:12px;
  background:var(--c-a1); color:var(--c-ink); padding:2px 8px; border:2px solid var(--c-ink);
  border-radius:3px; margin-bottom:8px;
}
.plan__name{ margin-bottom:4px; }
.plan__price{ font-family:var(--f-display); display:flex; align-items:baseline; gap:6px; margin-bottom:var(--s-2); }
.plan__price .num{ font-size:44px; color:var(--c-a2); }
.plan__price .num::before{ content:"$"; font-size:22px; vertical-align:top; }
.plan__price .per{ font-size:14px; color:var(--c-muted); }
.plan__cta{ margin-top:auto; align-self:flex-start; }

/* feed bar */
.feed-bar{ margin-top:var(--s-4); text-align:center; }
.feed-bar__label{ display:block; font-family:var(--f-display); font-size:16px; margin-bottom:10px; }
.feed-bar__track{
  display:inline-flex; gap:6px; padding:8px; border:var(--border); border-radius:8px;
  background:#fff; box-shadow:var(--shadow);
}
.feed-bar__track i{ width:22px; height:26px; border:2px solid var(--c-ink); border-radius:2px; background:var(--c-bg); }
.feed-bar__track i.is-full{ background:var(--c-a1); }
.feed-bar__note{ display:block; margin-top:10px; color:var(--c-muted); font-size:14px; }
@media (max-width:560px){ .feed-bar__track i{ width:15px; height:20px; } }

/* ============================================================
   HARDWARE (dark)
   ============================================================ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-2); margin-bottom:var(--blk-y); }
@media (max-width:700px){ .stats{ grid-template-columns:1fr 1fr; } }
.stat{
  border:2px solid var(--c-a1); border-radius:8px; padding:var(--s-3);
  background:#2b2940; box-shadow:3px 3px 0 rgba(0,0,0,.4);
}
.stat__num{ display:block; font-family:var(--f-display); font-size:38px; color:var(--c-a1); }
.stat__cap{ font-size:14px; color:#bdbccb; }
.s-hardware .paws li{ color:var(--c-ink-inv); }
.s-hardware .paws li::before{ --p:var(--c-a2); }

/* comfortable breathing room inside the dark band */
.s-hardware{
  padding-block:calc(var(--s-6) + var(--s-3));
  padding-inline:var(--s-5);
}
.s-hardware .pet-sprite--sleep{ right:var(--s-5); bottom:var(--s-4); }
@media (max-width:768px){
  .s-hardware{ padding-block:var(--s-5); padding-inline:var(--s-4); }
  .s-hardware .pet-sprite--sleep{ right:var(--s-4); bottom:var(--s-3); }
}
@media (max-width:560px){
  .s-hardware{ padding-block:var(--s-4); padding-inline:var(--s-3); }
  .s-hardware .pet-sprite--sleep{ right:var(--s-3); bottom:var(--s-3); }
}

/* ============================================================
   THE PET / zigzag
   ============================================================ */
.zig{ display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--s-5); align-items:center; }
@media (max-width:820px){ .zig{ grid-template-columns:1fr; } }
.zig__text h2{ margin:6px 0 var(--s-2); }

/* ---------- pet photo slider / carousel ---------- */
.tama--slider{ overflow:hidden; }
.slider{ position:relative; }
.slider__viewport{
  position:relative; overflow:hidden;
  margin:8px 8px 0; border:var(--border); border-radius:6px;
  background:var(--c-bg-dark);
}
.slider__track{ list-style:none; margin:0; padding:0; }
.slider__slide{ margin:0; }
.slider__slide[hidden]{ display:none; }
.slider__slide img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  filter:saturate(1.02);
}
/* soft cross-fade in for the active slide (motion is minimal) */
.slider__slide.is-active{ animation:sliderFade .32s ease both; }
@keyframes sliderFade{ from{ opacity:.35; } to{ opacity:1; } }

/* prev / next controls — retro pixel buttons */
.slider__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; display:grid; place-items:center;
  font-size:14px; line-height:1; cursor:pointer;
  color:var(--c-ink); background:var(--c-bg);
  border:var(--border); border-radius:4px;
  box-shadow:var(--shadow); z-index:2;
}
.slider__btn--prev{ left:16px; }
.slider__btn--next{ right:16px; }
.slider__btn:hover{ transform:translateY(-50%) translate(-1px,-1px); background:var(--c-a1); }
.slider__btn:active{ transform:translateY(-50%) translate(1px,1px); box-shadow:1px 1px 0 var(--c-ink); }

/* dots */
.slider__dots{
  display:flex; gap:8px; justify-content:center;
  padding:12px 0 4px;
}
.slider__dot{
  width:14px; height:14px; padding:0; cursor:pointer;
  border:2px solid var(--c-ink); border-radius:50%;
  background:var(--c-bg); box-shadow:1px 1px 0 var(--c-ink);
}
.slider__dot[aria-selected="true"]{ background:var(--c-a2); }
.slider__dot:hover{ background:var(--c-a1); }

@media (max-width:560px){
  .slider__btn{ width:32px; height:32px; }
  .slider__slide img{ aspect-ratio:4/3; }
}

/* ============================================================
   DIARY
   ============================================================ */
.diary__card{ padding:var(--s-3); margin:0; }
.diary__card p{ font-size:1rem; }
.diary__card cite{
  display:flex; align-items:center; gap:8px; font-style:normal;
  font-family:var(--f-display); font-size:14px; color:var(--c-a2);
}

/* ============================================================
   GALLERY
   ============================================================ */
.shot{ margin:0; overflow:hidden; padding:8px; }
.shot img{ border:var(--border); border-radius:6px; width:100%; aspect-ratio:1/1; object-fit:cover; }
.shot figcaption{
  display:flex; align-items:center; gap:8px; padding:10px 4px 4px;
  font-size:14px; color:var(--c-muted);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{ display:grid; gap:var(--s-2); max-width:820px; }
.faq__item{ padding:0; overflow:hidden; }
.faq__item summary{
  list-style:none; cursor:pointer; padding:var(--s-2) var(--s-3);
  font-family:var(--f-display); font-size:20px; display:flex; justify-content:space-between; gap:12px;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; color:var(--c-a1); font-size:26px; line-height:1; }
.faq__item[open] summary::after{ content:"–"; }
.faq__a{ padding:0 var(--s-3) var(--s-2); }
.faq__a p{ margin:0; color:var(--c-muted); }

/* ============================================================
   BOOK FORM
   ============================================================ */
.book__card{ padding:var(--s-5); display:grid; grid-template-columns:1fr 1.2fr; gap:var(--s-5); align-items:start; }
@media (max-width:820px){ .book__card{ grid-template-columns:1fr; padding:var(--s-4); } }
.book__intro h2{ margin:6px 0 var(--s-2); }
.book__form{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2) var(--s-3); }
@media (max-width:480px){ .book__form{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:4px; position:relative; }
.field--wide{ grid-column:1/-1; }
.field label{ font-family:var(--f-display); font-size:15px; }
.field input,.field select{
  font-family:var(--f-body); font-size:16px; padding:9px 10px;
  border:var(--border); border-radius:4px; background:#fff; color:var(--c-ink);
}
.field input:focus,.field select:focus{ outline:none; border-color:var(--c-a1); }
/* paw print appears by label on focus */
.field label::after{
  content:""; position:absolute; left:-16px; top:2px; width:10px; height:8px;
  --p:var(--c-a2); opacity:0; transition:opacity .2s;
  box-shadow:
    3px 0 0 var(--p), 7px 0 0 var(--p),
    0 3px 0 var(--p),10px 3px 0 var(--p),
    3px 5px 0 var(--p), 5px 5px 0 var(--p), 7px 5px 0 var(--p);
  width:2px; height:2px;
}
.field:focus-within label::after{ opacity:1; }

.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.book__actions{ display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; }
.book__status{ margin:0; font-weight:600; }
.book__status.success{ color:var(--c-a1); }
.book__status.error{ color:var(--c-a2); }
.book__submit.is-happy{ animation:happyjump .5s ease 1; }
@keyframes happyjump{ 30%{ transform:translateY(-8px); } 60%{ transform:translateY(0); } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer--minimal{
  border-top:var(--border); text-align:center;
  padding:var(--sec-y) var(--s-4);
  display:flex; flex-direction:column; align-items:center; gap:var(--s-2);
}
.footer__logo{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-display); font-size:28px; }
.footer__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s-3); }
.footer__links a{ font-weight:600; }
.footer__links a:hover{ color:var(--c-a1); }
.footer__hours{ color:var(--c-muted); font-size:14px; margin:0; }
.footer__disclaimer{
  font-family:var(--f-display); font-size:18px; color:var(--c-ink);
  border:var(--border); border-radius:4px; padding:8px 16px; margin:8px 0;
  background:var(--c-a1);
}
.footer__contact{ display:flex; flex-direction:column; align-items:center; gap:4px; margin:0; }
.footer__addr{ display:inline-flex; align-items:center; gap:8px; color:var(--c-muted); font-size:14px; margin:0; max-width:52ch; }
.footer__phone{ font-family:var(--f-display); font-size:20px; margin:0; }
.footer__phone a:hover{ color:var(--c-a1); }
.footer__copy{ color:var(--c-muted); font-size:13px; margin:0; }

/* ============================================================
   LEGAL PAGES — narrow column
   ============================================================ */
.legal .nav__inner{ padding-left:var(--s-4); }
.legal__nav{ justify-content:space-between; }
.legal__main{
  max-width:760px; margin:0 auto; padding:var(--sec-y) var(--s-4);
}
.legal__main h1{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
.legal__main h2{ margin:var(--s-4) 0 var(--s-1); font-size:clamp(22px,3vw,30px); }
.legal__main p{ color:var(--c-ink); }
.legal__main .paws{ margin:var(--s-1) 0 var(--s-2); }
.legal__meta{ color:var(--c-muted); font-size:14px; margin-bottom:var(--s-3); }
.legal__cross{ margin-top:var(--s-4); padding-top:var(--s-3); border-top:var(--border); }
.legal__cross a{ color:var(--c-a1); font-weight:700; }

/* ============================================================
   REVEAL (scroll animation, transform/opacity only)
   ============================================================ */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease; will-change:transform,opacity; }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   REDUCED MOTION — kill all animation, static pet
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .btn:hover{ transform:none; }
}