/* Salty Paws — shared design system.
   Palette sampled from the client's logo artwork, so the app (lib/theme.dart)
   and every page here stay in step. */

:root{
  --sand:      #FDF6EE;
  --sand-deep: #F4E5D3;
  --sea:       #91CFCE;
  --sea-light: #C2E6E6;
  --sea-deep:  #7DBDBC;
  --coral:     #BD7744;
  --ink:       #6B4117;
  --ink-mid:   #895523;
  --ink-soft:  #7A5B41;
  --white:     #FFFFFF;

  --radius:   22px;
  --radius-l: 34px;
  --shadow:   0 10px 30px rgba(107,65,23,.10);
  --shadow-l: 0 22px 60px rgba(107,65,23,.18);
  --measure:  62ch;

  /* The built-in CSS easings are too weak to read as intentional. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --press:       160ms;

  --font: "Nunito", ui-rounded, "SF Pro Rounded", "Avenir Next", "Segoe UI", system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

/* Reduced motion means fewer and gentler animations, not zero: opacity and
   colour still aid comprehension, movement is what goes. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    /* Reduced motion is gentler, not zero. Colour and opacity still carry
       meaning, so they keep transitioning; movement is what goes. */
    transition-property:opacity,background-color,border-color,color,fill!important;
    transition-duration:150ms!important;
  }
}

body{
  margin:0;
  font-family:var(--font);
  font-size:clamp(1rem,.96rem + .2vw,1.09rem);
  line-height:1.65;
  color:var(--ink);
  background:var(--sand);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}

/* The surfaces we did not draw still belong to the palette: a browser-default
   blue selection or a gray scrollbar is the one place a built page gives
   itself away as an assembled one. */
::selection{background:var(--sea);color:var(--ink)}
html{scrollbar-color:var(--sea-deep) var(--sand-deep);caret-color:var(--ink-mid);accent-color:var(--ink-mid)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--sand-deep)}
::-webkit-scrollbar-thumb{background:var(--sea-deep);border-radius:999px;border:3px solid var(--sand-deep)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-mid)}
a{color:var(--ink-mid);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--sea-deep);outline-offset:3px;border-radius:6px}

h1,h2,h3{line-height:1.1;margin:0 0 .5em;font-weight:900;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,1.45rem + 3.1vw,4rem)}
h2{font-size:clamp(1.72rem,1.3rem + 1.9vw,2.8rem)}
h3{font-size:clamp(1.15rem,1.06rem + .4vw,1.38rem);letter-spacing:-.01em}
p{margin:0 0 1em;max-width:var(--measure)}

.wrap{width:min(1140px,calc(100% - 2.5rem));margin-inline:auto}
.wrap-narrow{width:min(760px,calc(100% - 2.5rem));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--white);padding:.8rem 1.2rem;z-index:99;border-radius:0 0 12px 0}
.skip:focus{left:0}

/* ------------------------------------------------------------------ header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(253,246,238,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(107,65,23,.09)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;border-radius:10px;transition:transform var(--press) var(--ease-out)}
.brand:active{transform:scale(.97)}
.brand img{width:132px}
.header-cta{
  display:inline-block;background:var(--ink-mid);color:var(--white);text-decoration:none;
  font-weight:800;padding:.6rem 1.15rem;border-radius:999px;white-space:nowrap;font-size:.94rem;
  transition:background 180ms var(--ease-out), transform var(--press) var(--ease-out);
}

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:800;text-decoration:none;padding:.92rem 1.6rem;border-radius:999px;
  border:2px solid transparent;font-size:1rem;min-height:52px;
  transition:background 180ms var(--ease-out), border-color 180ms var(--ease-out), transform var(--press) var(--ease-out);
}
.btn-primary{background:var(--ink-mid);color:var(--white)}
.btn-secondary{background:transparent;color:var(--ink-mid);border-color:rgba(137,85,35,.34)}

/* Press feedback belongs on every pressable thing, touch included — it is the
   only confirmation the interface heard you. */
.header-cta:active,.btn:active{transform:scale(.97)}

/* Hover is gated: a touch device fires :hover on tap and then keeps it, so an
   untapped-looking button stays lifted after you leave it. */
@media (hover:hover) and (pointer:fine){
  .header-cta:hover{background:var(--ink);transform:translateY(-1px)}
  .btn-primary:hover{background:var(--ink);transform:translateY(-2px)}
  .btn-secondary:hover{border-color:var(--ink-mid);background:rgba(137,85,35,.06);transform:translateY(-2px)}
  .photo img{transition:transform 240ms var(--ease-out)}
  .photo:hover img{transform:scale(1.03)}
}

/* --------------------------------------------------------------- sections */
.section{padding:clamp(3rem,2rem + 4.5vw,6rem) 0}
.section-head{max-width:52ch;margin-bottom:clamp(1.8rem,1rem + 2.4vw,3rem)}
.section-head p{color:var(--ink-soft);font-size:1.06rem}
.section--sea{background:linear-gradient(180deg,var(--sea-light),#D9EFEF);border-block:1px solid rgba(125,189,188,.4)}
.section--ink{background:var(--ink);color:var(--sand)}
.section--ink h2,.section--ink h3{color:var(--white)}
.section--ink p{color:rgba(253,246,238,.82)}
/* A secondary button inherits brown ink, which on the brown field measured
   1.4:1 -- effectively invisible. On dark sections it takes the light. */
.section--ink .btn-secondary{color:var(--white);border-color:rgba(253,246,238,.46)}
.section--ink .btn-primary{background:var(--sea);color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .section--ink .btn-secondary:hover{background:rgba(253,246,238,.12);border-color:var(--white)}
  .section--ink .btn-primary:hover{background:var(--sea-light)}
}
.section--ink a:not(.btn):not(.close-card){color:var(--sea-light)}

.grid{display:grid;gap:1.15rem}
@media (min-width:700px){.grid-3{grid-template-columns:repeat(3,1fr)}}

.card{background:var(--white);border-radius:var(--radius-l);padding:1.7rem 1.5rem;box-shadow:var(--shadow);border:1px solid rgba(107,65,23,.06)}
.card p{margin-bottom:0;color:var(--ink-soft)}
.card-icon{width:56px;height:56px;border-radius:18px;background:var(--sea-light);display:grid;place-items:center;margin-bottom:1.1rem;border:1px solid var(--sea)}
.card-icon svg{width:28px;height:28px;stroke:var(--ink-mid);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------------------- footer */
.site-footer{background:var(--sand-deep);padding:2.6rem 0;font-size:.94rem}
.footer-grid{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:space-between;align-items:center}
.site-footer img{width:118px}
.site-footer p{margin:0;color:var(--ink-soft)}
.site-footer a{font-weight:700}
.footer-links{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin:0;padding:0;list-style:none}
.credit{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid rgba(107,65,23,.14);font-size:.85rem}

/* ------------------------------------------------------- legal / prose page */
.legal-head{background:linear-gradient(180deg,var(--sea-light),var(--sand));padding:clamp(2.4rem,1.6rem + 3vw,4rem) 0 clamp(1.6rem,1rem + 2vw,2.6rem);border-bottom:1px solid rgba(125,189,188,.35)}
.legal-head p{color:var(--ink-soft);margin-bottom:0}
.updated{display:inline-block;background:var(--white);border:1px solid var(--sea);color:var(--ink);font-weight:800;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;padding:.36rem .85rem;border-radius:999px;margin:0 0 1.1rem}

.prose{padding:clamp(2.2rem,1.4rem + 3vw,3.6rem) 0 clamp(3rem,2rem + 3vw,5rem)}
.prose h2{font-size:clamp(1.3rem,1.16rem + .6vw,1.68rem);margin-top:2.4rem}
.prose h2:first-of-type{margin-top:0}
.prose h3{font-size:1.08rem;margin-top:1.6rem}
.prose p,.prose li{color:var(--ink);max-width:none}
.prose ul{padding-left:1.15rem;margin:0 0 1.2rem}
.prose li{margin-bottom:.5rem}
.prose li::marker{color:var(--sea-deep)}
.prose strong{font-weight:800}

/* A plain-language summary above the legal text — the part people actually read. */
.tldr{background:var(--white);border:2px solid var(--sea);border-radius:var(--radius-l);padding:1.5rem 1.6rem;margin-bottom:2.4rem;box-shadow:var(--shadow)}
.tldr h2{margin-top:0;font-size:1.15rem}
.tldr ul{margin-bottom:0}

.note{background:var(--sand-deep);border:1px solid rgba(189,119,68,.38);border-radius:16px;padding:1.1rem 1.3rem;margin:1.6rem 0}
.note p{margin-bottom:0;font-size:.96rem}

.data-table{width:100%;border-collapse:collapse;margin:1.2rem 0 1.6rem;font-size:.95rem}
.data-table th,.data-table td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--sand-deep);vertical-align:top}
.data-table th{font-weight:800;background:var(--sand);white-space:nowrap}
.table-scroll{overflow-x:auto}

/* ------------------------------------------------------------------- 404 */
.notfound{min-height:72vh;display:grid;place-items:center;text-align:center;padding:3rem 0}
.notfound .paw-404{width:96px;height:96px;fill:var(--sea-deep);margin:0 auto 1.4rem}
.notfound p{margin-inline:auto}

/* ================================================================== home */
/* The hero is one authored moment: the copy lifts away while the iPad lays
   itself flat. `--p` is scroll progress 0->1, written by the inline script in
   index.html; every other value here is derived from it so the CSS stays the
   single source of truth for how the moment looks.
   No JS and reduced-motion both land on the same resting state: p = 1, flat. */
.stage{
  --p:1;
  position:relative;
  /* clip, not hidden: `overflow:hidden` would make this a scroll container and
     kill the sticky pin inside it. */
  overflow:clip;
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(145,207,206,.42), transparent 62%),
    radial-gradient(760px 420px at 4% 108%, rgba(189,119,68,.13), transparent 60%),
    var(--sand);
}
.stage-inner{
  display:grid;justify-items:center;text-align:center;
  gap:clamp(1.6rem,1.1rem + 2vw,2.8rem);
  padding-block:clamp(2.6rem,1.6rem + 4vw,4.4rem) clamp(3rem,2rem + 4vw,5.5rem);
}

/* Progress is measured against the device's own position in the viewport, so
   the section needs no reserved scroll length: the iPad comes level exactly as
   it finishes framing itself, and there is never a screen of nothing to scroll
   past. A pinned version of this cannot work -- the composition is taller than
   the viewport, so a pinned device would never finish revealing. */
html.has-tilt .stage{--p:0}

.stage-copy{max-width:min(100%,760px);will-change:transform}
.stage-copy h1{text-wrap:balance;margin-bottom:.4em}
/* Balancing splits "ice cream" across the break; hold the phrase together once
   there is room for it. */
@media (min-width:720px){.stage-copy h1 .accent{white-space:nowrap}}
.stage h1 .accent{color:var(--ink-mid)}
.lede{font-size:clamp(1.06rem,1rem + .42vw,1.28rem);color:var(--ink-soft);max-width:47ch;margin-inline:auto}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.stage .cta-row{justify-content:center;align-items:center;gap:.9rem 1.3rem;margin-top:1.7rem}

/* ------------------------------------------------------------ store links */
/* Both badges ship their own mandated clear space at different ratios, so the
   row is aligned on the buttons inside the artwork, not on the artwork boxes. */
.store-badge{display:inline-flex;align-items:center;height:72px;line-height:0;border-radius:12px;transition:transform var(--press) var(--ease-out),opacity 200ms var(--ease-out)}
.store-badge--play img{width:186px;height:auto}
.store-badge--ios img{height:52px;width:auto}
a.store-badge:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){a.store-badge:hover{transform:translateY(-2px)}}



/* iOS is still in review, so it gets a status, not a badge Apple has not
   earned yet. Tinted from the surface hue rather than gray. */
.store-soon{
  margin:.9rem 0 0;color:var(--ink-soft);font-weight:700;font-size:.9rem;
  max-width:none;text-align:center;
}
.final .store-soon{color:rgba(255,255,255,.80)}
@media (min-width:700px){.grid-2{grid-template-columns:repeat(2,1fr)}}

/* ------------------------------------------------------------- the device */
.rig{width:100%;perspective:1400px;perspective-origin:50% 32%}
.deck{
  position:relative;width:min(1020px,100%);margin-inline:auto;
  transform-style:preserve-3d;will-change:transform;
}

.ipad{
  position:relative;
  background:linear-gradient(168deg,#2b2621,#17130f 62%,#241f1a);
  border-radius:clamp(20px,2.2vw,34px);
  padding:clamp(9px,1.05vw,16px);
  /* Warm-tinted depth: the shadow belongs to this page's light, not to black. */
  box-shadow:
    0 2px 3px rgba(23,19,15,.34),
    0 18px 34px rgba(107,65,23,.20),
    0 46px 70px rgba(107,65,23,.16),
    0 92px 120px rgba(107,65,23,.11);
}
/* The machined edge, drawn as light rather than as a border. */
.ipad::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13), inset 0 1px 0 rgba(255,255,255,.20);
}
.ipad-cam{
  position:absolute;left:50%;top:calc(clamp(9px,1.05vw,16px) / 2);
  transform:translate(-50%,-50%);width:6px;height:6px;border-radius:50%;
  background:#0a0908;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.ipad-screen{
  position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink);
  border-radius:clamp(12px,1.4vw,22px);
}
.ipad-screen img{width:100%;height:100%;object-fit:cover}

/* A screen is glass, so it catches the room while it is still tilted and
   loses the highlight as it comes level. Tied to --p, not decorative. */
.glare{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(102deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.11) 24%,transparent 48%);
  opacity:calc((1 - var(--p)) * .85);
}

/* The phone sits in the iPad's matte margin, so it never covers the map. */
.iphone{
  position:absolute;left:3%;bottom:-7%;width:20%;
  transform:translateZ(60px) rotate(-3deg);
  background:linear-gradient(168deg,#2b2621,#17130f);
  border-radius:clamp(16px,2vw,30px);
  padding:clamp(5px,.62vw,9px);
  box-shadow:
    0 2px 3px rgba(23,19,15,.34),
    0 22px 40px rgba(107,65,23,.26),
    0 52px 82px rgba(107,65,23,.18);
}
.iphone::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13), inset 0 1px 0 rgba(255,255,255,.20);
}
.iphone-screen{
  aspect-ratio:1320/2868;overflow:hidden;background:var(--sand);
  border-radius:clamp(11px,1.5vw,23px);
}
.iphone-screen img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.iphone{display:none}}

/* steps */
.steps{counter-reset:step;display:grid;gap:1.15rem}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;padding:1.7rem 1.5rem 1.5rem;background:rgba(253,246,238,.07);border:1px solid rgba(253,246,238,.16);border-radius:var(--radius-l)}
.step::before{
  counter-increment:step;content:counter(step);
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--sea);color:var(--ink);font-weight:900;font-size:1.15rem;margin-bottom:1rem;
}
.step h3{margin-bottom:.35rem}
.step p{margin-bottom:0;font-size:.98rem}

/* flavours */
.flavors{display:flex;flex-wrap:wrap;gap:.65rem;padding:0;margin:0;list-style:none}
.flavors li{background:var(--white);border:2px solid var(--sea);color:var(--ink);font-weight:800;padding:.6rem 1.15rem;border-radius:999px;font-size:.97rem}

/* photos */
.photos{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.photo{border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow);background:var(--sand-deep);aspect-ratio:1/1;margin:0}
.photo img{width:100%;height:100%;object-fit:cover}

/* final CTA */
.final{background:linear-gradient(150deg,var(--ink-mid),var(--ink));color:var(--white);border-radius:var(--radius-l);padding:clamp(2rem,1.2rem + 3.6vw,3.8rem);text-align:center;box-shadow:var(--shadow-l)}
.final h2{color:var(--white)}
.final p{color:rgba(255,255,255,.86);margin-inline:auto}
.final .btn-primary{background:var(--sea);color:var(--ink)}
.final .btn-secondary{color:var(--white);border-color:rgba(255,255,255,.42)}
.final .cta-row{justify-content:center}
@media (hover:hover) and (pointer:fine){
  .final .btn-primary:hover{background:var(--sea-light)}
  .final .btn-secondary:hover{background:rgba(255,255,255,.1);border-color:var(--white)}
}

/* =========================================================================
   SITE BUILD-OUT — added 2026-09-07 with the marketing site.
   Everything below extends the system above; no token was redefined.
   ====================================================================== */

/* ------------------------------------------------------------ navigation */
/* The header carries a real route list now, so the brand and the nav share
   the bar and the action stays pinned right at every width. */
.site-header .wrap{gap:.75rem}
.nav{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.nav a{
  text-decoration:none;color:var(--ink);font-weight:800;font-size:.95rem;
  padding:.55rem .72rem;border-radius:999px;white-space:nowrap;
  transition:background 160ms var(--ease-out),color 160ms var(--ease-out);
}
.nav a[aria-current="page"]{background:var(--sea-light);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.nav a:hover{background:rgba(145,207,206,.34)}}
.nav a:active{transform:scale(.97)}

.nav-toggle{
  display:none;align-items:center;justify-content:center;gap:.5rem;
  background:var(--white);border:2px solid rgba(107,65,23,.16);color:var(--ink);
  font:inherit;font-weight:800;font-size:.92rem;
  padding:.5rem .85rem .5rem .7rem;border-radius:999px;cursor:pointer;
  transition:border-color 160ms var(--ease-out),transform var(--press) var(--ease-out);
}
.nav-toggle:active{transform:scale(.96)}
.nav-toggle svg{width:20px;height:20px;stroke:var(--ink-mid);fill:none;stroke-width:2.2;stroke-linecap:round}
.nav-toggle .bar-b{transition:opacity 180ms var(--ease-out)}
.nav-toggle[aria-expanded="true"] .bar-a{transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bar-c{transform:translateY(-5px) rotate(-45deg)}
.nav-toggle[aria-expanded="true"] .bar-b{opacity:0}
.nav-toggle svg line{transform-origin:center;transition:transform 220ms var(--ease-out)}

/* Below the fold-out width the routes become a sheet under the bar. It is a
   disclosure, not a modal: the page stays where it was and stays scrollable. */
@media (max-width:1000px){
  .nav-toggle{display:inline-flex}
  .nav{
    position:absolute;left:0;right:0;top:100%;
    display:grid;gap:.1rem;margin:0;padding:.6rem 1.25rem 1.1rem;
    background:var(--sand);border-bottom:1px solid rgba(107,65,23,.12);
    box-shadow:var(--shadow);
  }
  .nav[hidden]{display:none}
  .nav a{padding:.72rem .8rem;font-size:1.02rem}
  .nav .nav-cta{margin-top:.5rem;text-align:center;background:var(--ink-mid);color:var(--white)}
}
@media (min-width:1001px){ .nav[hidden]{display:flex} }
.site-header{position:sticky}
.header-cta{margin-left:.35rem}
@media (max-width:1000px){ .site-header > .wrap > .header-cta{display:none} }
@media (min-width:1001px){ .nav .nav-cta{display:none} }

/* ------------------------------------------------------------- page heads */
/* Interior pages open on a stated band rather than a second hero, so the home
   page keeps the only full-bleed moment on the site. */
.page-head{
  background:
    radial-gradient(820px 420px at 88% -30%, rgba(145,207,206,.5), transparent 64%),
    var(--sand);
  padding:clamp(2.4rem,1.6rem + 3.4vw,4.4rem) 0 clamp(1.9rem,1.2rem + 2.4vw,3rem);
  border-bottom:1px solid rgba(107,65,23,.09);
}
.page-head h1{max-width:16ch;text-wrap:balance;margin-bottom:.3em}
.page-head .lede{margin-inline:0;text-align:left;max-width:54ch}
.page-head .cta-row{margin-top:1.4rem}

/* ------------------------------------------------------- the truck status */
/* The band is the truck's own livery, full width. The headline no longer sits
   on the photograph: the truck carries its own painted wordmark and two sets
   of heavy brown lettering fought each other, badly on a phone. */
.band{background:var(--sea);border-bottom:1px solid rgba(125,189,188,.55)}
.band img{
  width:100%;height:clamp(250px,32vw,460px);object-fit:cover;object-position:50% 50%;
  display:block;
}

.opener{
  background:
    radial-gradient(760px 380px at 92% -40%, rgba(145,207,206,.34), transparent 66%),
    var(--sand);
  padding:clamp(2rem,1.4rem + 2.6vw,3.2rem) 0 clamp(2.2rem,1.5rem + 2.6vw,3.4rem);
}
.opener-grid{display:grid;gap:clamp(1.6rem,1rem + 2.4vw,2.8rem);align-items:center}
@media (min-width:940px){.opener-grid{grid-template-columns:1.02fr 1fr}}
.opener h1{max-width:15ch;text-wrap:balance;margin-bottom:.32em}
.opener .lede{margin-inline:0;max-width:40ch}

/* The live reading. One plate, one sentence, one action -- no label above the
   sentence: the sentence is the answer. */
.status{
  background:var(--white);border-radius:var(--radius-l);
  box-shadow:var(--shadow-l);border:1px solid rgba(107,65,23,.07);
  padding:clamp(1.3rem,1rem + 1.2vw,1.8rem);
  display:grid;gap:1rem;
}
.status-read{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start}
.status-dot{
  width:15px;height:15px;border-radius:50%;margin-top:.5rem;
  background:var(--ink-soft);box-shadow:0 0 0 4px rgba(122,91,65,.16);
}
.status[data-state="live"] .status-dot{
  background:#15794B;box-shadow:0 0 0 4px rgba(21,121,75,.22);
  animation:pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(21,121,75,.22)}
  50%    {box-shadow:0 0 0 9px rgba(21,121,75,.05)}
}
.status-line{
  font-family:inherit;font-size:clamp(1.2rem,1.05rem + .65vw,1.6rem);font-weight:900;
  line-height:1.18;margin:0 0 .3rem;letter-spacing:-.018em;
}
.status-sub{margin:0;color:var(--ink-soft);font-size:.99rem;max-width:44ch}
.status .cta-row{margin-top:0}
.status[hidden]{display:none}

/* --------------------------------------------------------------- the route */
/* The next stops live inside the status plate now, under a rule, rather than
   as their own section. Three lines answer "and after that?"; the app answers
   the rest. */
.route{
  display:grid;gap:.55rem;padding:1.1rem 0 0;margin:0;list-style:none;
  border-top:1px solid var(--sand-deep);
}
.route li{
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;
  gap:.15rem .9rem;align-items:baseline;
}
.route .when{
  grid-column:1/-1;font-weight:900;font-size:.79rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-mid);font-variant-numeric:tabular-nums;
}
.route .where{grid-column:1;grid-row:2;margin:0;font-weight:800;font-size:1rem;line-height:1.35}
.route .addr{grid-column:1;grid-row:3;margin:0;color:var(--ink-soft);font-size:.9rem}
.route .dir{
  grid-column:2;grid-row:2/4;align-self:center;justify-self:end;white-space:nowrap;
  min-height:40px;padding:.5rem 1rem;font-size:.9rem;
}

/* An empty route is a real state, but it is not worth a screen: one line,
   inside the plate, rather than a dashed box on the second viewport. */
.empty{display:grid;gap:.3rem;padding:1.1rem 0 0;border-top:1px solid var(--sand-deep)}
.empty p{margin:0;color:var(--ink-soft);font-size:.97rem;max-width:52ch}
.empty b{display:block;font-size:1.02rem;color:var(--ink)}

/* ======================================================= the Paw Pack */
/* The earlier version drew a cardboard box in CSS -- gradients for board,
   an inset shadow for interior depth, and a lid on a perspective plane whose
   resting transform was edge-on, so the one thing it was drawing was the one
   thing nobody ever saw. The products are the content; they sit on the field
   directly, with nothing pretending to be an object around them. */
.lineup{display:grid;gap:clamp(.7rem,.5rem + .7vw,1rem)}
@media (min-width:560px){
  .lineup{grid-template-columns:1fr 1fr}
  .lineup .item--wide{grid-column:span 2}
}
.item{margin:0;display:grid;gap:.6rem}
.item img{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:18px;background:var(--sand-deep);
}
.item--wide img{aspect-ratio:4/1}
.item figcaption{display:grid;gap:.06rem;padding-inline:.15rem}
.item .item-name{font-weight:900;font-size:1rem;line-height:1.25;letter-spacing:-.012em}
.item .item-qty{
  color:var(--ink-mid);font-size:.88rem;font-weight:800;
  font-variant-numeric:tabular-nums;
}

/* The offer: one full-bleed seafoam field carrying the headline, the controls
   and the five products at once, so everything the page promises is in the
   first screen and the opener is not the fifth identical page-head. */
.offer{
  background:linear-gradient(168deg,var(--sea-light),#D6EEEE 62%,#CBE9E8);
  border-bottom:1px solid rgba(125,189,188,.5);
  padding:clamp(1.8rem,1.1rem + 2.6vw,3rem) 0 clamp(2.2rem,1.4rem + 3vw,3.6rem);
}
.offer-grid{display:grid;gap:clamp(1.8rem,1.2rem + 2.4vw,3rem);align-items:start}
@media (min-width:960px){
  .offer-grid{grid-template-columns:1fr 1.06fr;row-gap:1.3rem}
  .offer-intro{grid-column:1;grid-row:1}
  .offer-pack{grid-column:2;grid-row:1/3}
  .picker{grid-column:1;grid-row:2}
}
.offer-intro{display:grid;gap:0}
.offer h1{margin-bottom:.3em}
.offer .lede{margin-inline:0;max-width:40ch;color:var(--ink)}
.lineup-label{
  /* Sentence case, not a tracked-out cap line: at thirty-three characters this
     is a sentence, and a sentence in caps is slower to read, not smaller. */
  font-size:1.02rem;font-weight:900;letter-spacing:-.012em;
  color:var(--ink-mid);margin:0 0 .9rem;
}

/* --------------------------------------------------------- the plan picker */
.picker{display:grid;gap:1.5rem;margin-top:.5rem}
.pick-group{border:0;padding:0;margin:0;min-width:0}
.pick-label{
  display:block;padding:0;font-size:.79rem;font-weight:900;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.6rem;
}
.segs{display:flex;flex-wrap:wrap;gap:.5rem;min-width:0}
.seg{position:relative}
.seg input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg span{
  display:block;background:var(--white);border:2px solid rgba(107,65,23,.16);
  border-radius:999px;padding:.62rem 1.1rem;font-weight:800;font-size:.96rem;
  line-height:1.2;text-align:center;
  transition:background 160ms var(--ease-out),border-color 160ms var(--ease-out),color 160ms var(--ease-out),transform var(--press) var(--ease-out);
}
.seg small{display:block;font-weight:700;font-size:.79rem;color:var(--ink-soft);margin-top:.1rem}
.seg input:checked + span{background:var(--ink-mid);border-color:var(--ink-mid);color:var(--white)}
.seg input:checked + span small{color:rgba(255,255,255,.8)}
.seg input:focus-visible + span{outline:3px solid var(--sea-deep);outline-offset:3px}
.seg input:active + span{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .seg input:not(:checked):hover + span{border-color:var(--sea-deep);background:rgba(145,207,206,.16)}
}

.price{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin:0 0 .2rem}
.price .amount{
  font-size:clamp(2.4rem,1.9rem + 2.2vw,3.4rem);font-weight:900;letter-spacing:-.035em;
  line-height:1;font-variant-numeric:tabular-nums;
}
.price .per{color:var(--ink-soft);font-weight:800;font-size:1rem}
.price-note{margin:0;color:var(--ink-soft);font-size:.92rem;max-width:40ch}

/* Sample data must announce itself. Designed, not apologetic. */
.sample{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--sand-deep);border:1px solid rgba(189,119,68,.42);
  color:var(--ink);border-radius:999px;padding:.42rem .9rem .42rem .72rem;
  font-size:.83rem;font-weight:800;line-height:1.3;
}
.sample svg{width:16px;height:16px;flex:none;stroke:var(--coral);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.section--ink .sample{background:rgba(253,246,238,.12);border-color:rgba(253,246,238,.3);color:var(--sand)}

/* --------------------------------------------------------------- the menu */
.menu{display:grid;gap:1.15rem}
@media (min-width:760px){.menu{grid-template-columns:repeat(2,1fr)}}
.menu-card{
  background:var(--white);border:1px solid rgba(107,65,23,.07);border-radius:var(--radius-l);
  box-shadow:var(--shadow);overflow:hidden;display:grid;
}
@media (min-width:520px){.menu-card{grid-template-columns:38% 1fr;align-items:stretch}}
.menu-card img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
@media (min-width:520px){.menu-card img{aspect-ratio:auto;min-height:190px}}
.menu-card .menu-body{padding:1.3rem 1.4rem}
.menu-card h3{margin-bottom:.35rem}
.menu-card p{margin-bottom:0;color:var(--ink-soft);font-size:.98rem}

/* --------------------------------------------------------------- quotes */
.quotes{display:grid;gap:1.15rem}
@media (min-width:820px){.quotes{grid-template-columns:repeat(2,1fr)}}
.quote{
  background:var(--white);border:1px solid rgba(107,65,23,.07);border-radius:var(--radius-l);
  box-shadow:var(--shadow);padding:1.7rem 1.6rem 1.4rem;margin:0;position:relative;
}
.quote blockquote{margin:0 0 .9rem;font-size:1.06rem;line-height:1.55;font-weight:700}
.quote blockquote p{margin:0;max-width:none}
.quote figcaption{color:var(--ink-soft);font-weight:800;font-size:.92rem}
.quote-mark{width:34px;height:34px;fill:var(--sea);margin-bottom:.7rem}

/* ------------------------------------------------------------------ q & a */
.qa{display:grid;gap:.7rem}
.qa details{
  background:var(--white);border:1px solid rgba(107,65,23,.09);
  border-radius:22px;box-shadow:var(--shadow);overflow:hidden;
}
.qa summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.3rem;cursor:pointer;font-weight:900;font-size:1.06rem;
  line-height:1.35;letter-spacing:-.01em;list-style:none;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:focus-visible{outline:3px solid var(--sea-deep);outline-offset:-3px}
.qa .chev{flex:none;width:22px;height:22px;margin-top:.15rem;stroke:var(--ink-mid);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform 220ms var(--ease-out)}
.qa details[open] .chev{transform:rotate(180deg)}
.qa .answer{padding:0 1.3rem 1.25rem}
.qa .answer p:last-child,.qa .answer ul:last-child{margin-bottom:0}
.qa .answer p,.qa .answer li{color:var(--ink-soft)}
@media (hover:hover) and (pointer:fine){.qa summary:hover{background:rgba(145,207,206,.14)}}

/* ------------------------------------------------------------------ forms */
.form{display:grid;gap:1.1rem;max-width:none}
.row2{display:grid;gap:1.1rem}
@media (min-width:620px){.row2{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.4rem}
.field label{font-weight:800;font-size:.95rem}
.field .hint{color:var(--ink-soft);font-size:.86rem;font-weight:700}
.field input,.field select,.field textarea{
  font:inherit;font-size:1rem;color:var(--ink);background:var(--white);
  border:2px solid rgba(107,65,23,.16);border-radius:16px;
  padding:.78rem .95rem;width:100%;min-height:52px;
  transition:border-color 160ms var(--ease-out),box-shadow 160ms var(--ease-out);
}
.field textarea{min-height:132px;resize:vertical;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:#8A6A4F}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--sea-deep);box-shadow:0 0 0 4px rgba(145,207,206,.42);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none}
.field select{
  appearance:none;-webkit-appearance:none;padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23895523' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .95rem center;background-size:20px;
}
.form button[type="submit"]{border:2px solid transparent;font:inherit;cursor:pointer;justify-self:start}
.form .note{margin:0}

/* ------------------------------------------------------------ split blocks */
.split{display:grid;gap:clamp(1.6rem,1rem + 2.6vw,3.2rem);align-items:center}
.split--top{align-items:start}
.split--top h2:first-child{margin-top:0}
@media (min-width:880px){
  .split{grid-template-columns:1fr 1fr}
  .split--wide-left{grid-template-columns:1.15fr 1fr}
}
.split img{border-radius:var(--radius-l);box-shadow:var(--shadow-l)}
.split .device-shot{max-width:290px;margin-inline:auto;border-radius:34px}
.split .split-copy p:last-child{margin-bottom:0}

/* ------------------------------------------------------------- fact strip */
.facts{display:grid;gap:.9rem;padding:0;margin:0;list-style:none}
@media (min-width:660px){.facts{grid-template-columns:repeat(3,1fr)}}
.facts li{
  background:var(--white);border:1px solid rgba(107,65,23,.07);border-radius:22px;
  padding:1.15rem 1.25rem;box-shadow:var(--shadow);
}
.facts b{display:block;font-size:1.02rem;margin-bottom:.2rem}
.facts span{color:var(--ink-soft);font-size:.95rem}
.facts a{font-weight:800}

/* ----------------------------------------------------------- footer routes */
.footer-nav{
  display:grid;gap:1.6rem 2.4rem;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin:0 0 1.8rem;
}
.footer-nav h2{font-size:.79rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .7rem}
.footer-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:.42rem}
.footer-nav a{text-decoration:none;font-weight:700;color:var(--ink)}
.footer-nav a:hover{text-decoration:underline}
.site-footer .footer-grid{align-items:flex-start}

/* ----------------------------------------------------- the dog slideshow */
/* One photographic beat mid-page, so the scroll is not eleven identical
   copy-left / photo-right sections in a row. It used to be a single wide
   band, but every dog photo the client has is Instagram-sized, so a wide
   crop was soft on any Retina screen. Square tiles at ≤340px need ~700px of
   source and every shot clears that. Two identical sets, the track slides
   one set-width, so the loop is seamless with no JS. */
.pups{background:var(--sea-light);border-block:1px solid rgba(107,65,23,.1);padding:clamp(1rem,.6rem + 1.3vw,1.6rem) 0;overflow:hidden}
.pups-track{display:flex;width:max-content;animation:pups-roll 56s linear infinite}
.pups-set{display:flex;gap:clamp(.7rem,.4rem + .9vw,1rem);padding-right:clamp(.7rem,.4rem + .9vw,1rem)}
.pups-set img{
  height:clamp(210px,25vw,340px);width:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:var(--radius-l);box-shadow:var(--shadow);background:var(--sand-deep);display:block;
}
.pups:hover .pups-track,.pups:focus-within .pups-track{animation-play-state:paused}
@keyframes pups-roll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .pups{overflow-x:auto;scrollbar-width:thin}
  .pups-track{animation:none;padding-inline:1.25rem}
  .pups-set[aria-hidden]{display:none}
}

/* The page ends on the three things it wants, not on more reading. */
.close-row{margin-top:1.7rem;text-align:left;border-top:1px solid rgba(253,246,238,.28)}
.close-card{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:.2rem 1rem;
  text-decoration:none;padding:1.1rem .2rem;
  border-bottom:1px solid rgba(253,246,238,.28);
  transition:background 180ms var(--ease-out);
}
.close-card b{
  grid-column:1;color:var(--white);font-weight:900;
  font-size:clamp(1.1rem,1rem + .5vw,1.32rem);letter-spacing:-.018em;
}
.close-card span{grid-column:1;color:var(--sand);font-size:.97rem;line-height:1.5}
.close-card svg{
  grid-column:2;grid-row:1/3;width:24px;height:24px;
  stroke:var(--sea);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  transition:transform 220ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .close-card:hover{background:rgba(253,246,238,.09)}
  .close-card:hover svg{transform:translateX(4px)}
}

/* ---------------------------------------------------------------- portraits */
/* Not the photo-left/text-right card again: the picture is the subject and the
   name sits under it like a caption, because these are two dogs, not features. */
.pair{display:grid;gap:clamp(1.4rem,1rem + 2vw,2.4rem)}
@media (min-width:680px){.pair{grid-template-columns:1fr 1fr}}
.portrait{margin:0;display:grid;gap:1rem}
.portrait img{
  width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 42%;
  border-radius:var(--radius-l);box-shadow:var(--shadow-l);
}
.portrait figcaption{display:grid;gap:.2rem}
.portrait figcaption b{font-size:1.32rem;font-weight:900;letter-spacing:-.02em;line-height:1.1}
.portrait figcaption span{
  font-size:.79rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-mid);
}
.portrait figcaption p{margin:.5rem 0 0;color:var(--ink-soft);max-width:42ch}