/* ==========================================================================
   Cairn — marketing site ("Warm v2" design)
   Order: tokens · scene switching · reset/base · shared bits · sections in
   page order · product mockups · legal pages · responsive · motion
   Layout is intrinsic (clamp(), auto-fit grids); the @media block at the end
   only handles the few places that need a hard breakpoint.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root{
  --cream:#f5efe6;        /* page background */
  --ink:#2a211c;          /* primary text on cream, heavy rules */
  --body:#5e5046;         /* body copy on cream */
  --muted:#8a7767;        /* eyebrows / small labels on cream */
  --hair:#d9c9b4;         /* dividers on cream */
  --hair2:#dccdb9;        /* FAQ dividers */
  --terra:#b4602f;        /* accent on cream: links, cairn marks */
  --terra-dk:#8f4a22;

  --amber:#e9b47a;        /* primary button, accents on dark */
  --amber-hi:#f1c48d;     /* button hover, italic accents on dark */
  --amber-eyebrow:#e0a86f;

  --slate:#1f3039;        /* pricing bg, morning sky */
  --slate-deep:#172630;   /* about bg */
  --on-dark:#f3e9dc;
  --on-dark-body:#c4cbc8;
  --on-dark-muted:#93a4a6;
  --on-dark-muted2:#aab5b5;
  --rule-dark:#3a4f58;
  --leader:#4f6670;       /* dotted leaders in the rate card */
  --nav-link:#cdbfb0;
  --on-dark-soft:#bcae9e;  /* small text on dark: 6.3:1 on slate, 6.9:1 on the footer */

  --footer-morning:#1d2a1c;
  --footer-night:#0f1520;
  --err:#e0795a;

  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --marker:'Permanent Marker',cursive;
  /* mockups only */
  --plex:'IBM Plex Sans',system-ui,sans-serif;
  --plex-mono:'IBM Plex Mono',ui-monospace,monospace;
  --lora:'Lora',Georgia,serif;
  --dm:'DM Sans',system-ui,sans-serif;
  --dm-mono:'DM Mono',ui-monospace,monospace;

  --pad-x:clamp(24px,5vw,64px);
  --pad-y:clamp(64px,8vw,112px);
  --ridge-h:clamp(280px,26vw,440px);       /* hero ridge art */
  --footer-ridge-h:clamp(130px,13vw,210px);
  --wp-gap:clamp(48px,6vw,80px);           /* between journey rows */

  --win-shadow:0 30px 60px -28px rgba(70,45,20,.45),0 4px 14px -6px rgba(70,45,20,.15);
  --win-shadow-front:0 34px 70px -24px rgba(50,35,20,.5),0 6px 16px -6px rgba(50,35,20,.2);
}

/* ------------------------------------------------------ scene switching -- */
/* app.js sets data-scene (morning|night) and data-scene-mode (auto|morning|
   night) on <html> before first paint. Both variants of every scene-bound
   element are in the markup; these rules pick one. */
html[data-scene="morning"] .scene-night{display:none!important}
html[data-scene="night"] .scene-morning{display:none!important}

.scene-ico,.scene-label{display:none}
html[data-scene-mode="auto"] .scene-ico.scene-mode-auto,
html[data-scene-mode="morning"] .scene-ico.scene-mode-morning,
html[data-scene-mode="night"] .scene-ico.scene-mode-night{display:block}
/* the visible label is the button's accessible name; it is never drawn */
html[data-scene-mode="auto"] .scene-label.scene-mode-auto,
html[data-scene-mode="morning"] .scene-label.scene-mode-morning,
html[data-scene-mode="night"] .scene-label.scene-mode-night{
  display:block;position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* ----------------------------------------------------------- reset/base -- */
*{box-sizing:border-box}
body{
  margin:0;font-family:var(--sans);background:var(--cream);color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,figure,dl,dd,ul{margin:0}
a{color:var(--terra);text-decoration:none}
a:hover{color:var(--terra-dk)}
button{font-family:inherit}
img{max-width:100%}

@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
.hero :focus-visible,.pricing :focus-visible,.about :focus-visible,.footer :focus-visible{outline-color:var(--amber)}

/* ------------------------------------------------------------ shared bits -- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* honeypot — off-screen, never focusable */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

.eyebrow{
  font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber-eyebrow);margin-bottom:22px;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 26px;border-radius:999px;border:none;
  background:var(--amber);color:#241a15;font-size:15px;font-weight:600;
  cursor:pointer;white-space:nowrap;transition:background .15s;
}
.btn:hover{background:var(--amber-hi)}
.btn:disabled{cursor:default;opacity:.75}

/* demo-request form: hero + pricing. Both sit on dark. */
.signup-form{display:flex;gap:10px;flex-wrap:wrap;width:100%;max-width:480px}
.signup-form[hidden]{display:none}
.signup-form input[type="email"]{
  flex:1 1 240px;min-width:0;padding:14px 18px;border-radius:999px;
  border:1px solid rgba(243,233,220,.22);background:rgba(243,233,220,.07);
  color:var(--on-dark);font-size:15px;font-family:inherit;outline:none;
}
.signup-form input::placeholder{color:#9a8b7e}
.signup-form input:focus{border-color:var(--amber-eyebrow)}
.signup-form input.is-invalid{border-color:var(--err)}
.form-error{flex:1 0 100%;font-size:13px;color:var(--err)}
.form-error[hidden]{display:none}
.form-note{font-size:13px;color:var(--on-dark-soft);margin-top:14px}
.form-note[hidden]{display:none}
.signup-success{
  padding:14px 22px;border-radius:999px;
  background:rgba(233,180,122,.14);border:1px solid rgba(233,180,122,.35);
  font-size:15px;color:var(--on-dark);text-wrap:pretty;
}
.signup-success[hidden]{display:none}
.signup-success b{font-weight:600}

/* ----------------------------------------------------------------- hero -- */
.hero{
  position:relative;color:var(--on-dark);overflow:hidden;
  display:flex;flex-direction:column;background:var(--slate);
}
html[data-scene="night"] .hero{
  background:linear-gradient(180deg,#070a12 0%,#0b1120 40%,#141d33 78%,#1d2842 100%);
}
.sky{position:absolute;inset:0;pointer-events:none}
.sky canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* background-image rather than <img>, so the hidden scene's art never loads */
.ridge{
  position:absolute;left:0;right:0;bottom:0;height:var(--ridge-h);z-index:1;
  background:center bottom/cover no-repeat;
}
.ridge-morning{background-image:url(/assets/img/hero-simple-morning.svg)}
.ridge-night{background-image:url(/assets/img/hero-simple-night.svg)}
/* cream strip over the hero's bottom edge: the ridge art rasterises to whole
   pixels, and at some widths/zooms a 1px row of sky showed beneath it */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--cream);z-index:2;pointer-events:none;
}
.sky-toggle{
  position:absolute;left:0;right:0;bottom:0;width:100%;height:var(--ridge-h);
  z-index:3;pointer-events:none;
}
.sky-hit{fill:transparent;pointer-events:all;cursor:pointer}
.sky-hit:focus-visible{outline:none;stroke:var(--amber-hi);stroke-width:3}

.nav{
  position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;padding:26px var(--pad-x);gap:14px 24px;
}
.logo{display:flex;align-items:center;gap:10px;color:var(--on-dark)}
.logo:hover{color:var(--on-dark)}
.logo svg{fill:var(--amber);flex:none}
.logo span{font-size:19px;font-weight:600;letter-spacing:-.01em}
.nav-links{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px clamp(14px,2.6vw,28px);
  font-size:14px;font-weight:500;white-space:nowrap;
}
.nav-links a{color:var(--nav-link);transition:color .15s}
.nav-links a:hover{color:#fff}

.hero-copy{
  position:relative;z-index:2;padding:clamp(24px,4vw,56px) var(--pad-x) 0;
  max-width:1200px;width:100%;margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.hero h1{
  font-family:var(--serif);font-weight:400;font-size:clamp(44px,6.4vw,84px);
  line-height:1.02;letter-spacing:-.025em;max-width:900px;margin-bottom:24px;
  text-wrap:balance;
}
.hero h1 em{font-style:italic;color:var(--amber-hi)}
.hero-sub{
  font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:#cbbcad;
  max-width:600px;margin-bottom:36px;text-wrap:pretty;
}
.hero .signup-form{justify-content:center}
.hero-spacer{flex:1;min-height:clamp(170px,15vw,260px)}

/* -------------------------------------------------------------- journey -- */
.journey{
  padding:48px var(--pad-x) var(--pad-y);max-width:1180px;margin:0 auto;
  scroll-margin-top:24px;
}
.journey h2{
  font-family:var(--sans);font-weight:600;font-size:clamp(34px,4vw,50px);
  letter-spacing:-.02em;line-height:1.1;text-align:center;margin-bottom:56px;
}
.trail{position:relative;display:flex;flex-direction:column;gap:var(--wp-gap)}
.wp{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:clamp(20px,3vw,40px)}
/* the dotted path runs from this row's mark to the next row's */
.meander{
  position:absolute;left:0;top:40px;width:40px;
  height:calc(100% - 40px + var(--wp-gap));overflow:visible;pointer-events:none;
}
.meander path{
  fill:none;stroke:#cdb9a2;stroke-width:2;stroke-dasharray:1 7;
  stroke-linecap:round;vector-effect:non-scaling-stroke;
}
/* the last row has no next mark to reach, so its path runs the row's
   height and fades out */
.wp:last-child .meander{
  height:calc(100% - 40px);
  -webkit-mask-image:linear-gradient(#000 55%,transparent);
  mask-image:linear-gradient(#000 55%,transparent);
}
.wp-mark{
  width:40px;height:40px;background:var(--cream);position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
}
.wp-mark svg{fill:var(--terra)}
.wp-body{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(24px,4vw,56px);align-items:center;min-width:0;
}
.wp-copy{padding-top:4px}
.wp-copy h3{
  font-family:var(--sans);font-weight:600;font-size:clamp(28px,2.8vw,36px);
  line-height:1.15;letter-spacing:-.025em;margin-bottom:14px;text-wrap:balance;
}
.wp-copy p{font-size:16px;line-height:1.65;color:var(--body);max-width:460px;text-wrap:pretty}

/* --------------------------------------------------------- more features -- */
.more{padding:0 var(--pad-x) clamp(72px,9vw,120px);max-width:1180px;margin:0 auto;scroll-margin-top:24px}
.more-inner{
  display:flex;flex-wrap:wrap;gap:clamp(32px,5vw,72px);align-items:flex-start;
  border-top:2px solid var(--ink);padding-top:clamp(28px,3.5vw,40px);
}
.more h2{
  font-family:var(--sans);font-weight:600;font-size:clamp(30px,3.4vw,42px);
  letter-spacing:-.02em;line-height:1.1;flex:1 1 240px;
}
.more-grid{
  flex:999 1 520px;min-width:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));
  gap:clamp(28px,3.5vw,40px) clamp(28px,4vw,48px);
}
.more-item{display:flex;flex-direction:column;gap:8px}
.more-item h3{font-family:var(--sans);font-weight:600;font-size:24px;line-height:1.2;letter-spacing:-.025em}
.more-item p{font-size:15px;line-height:1.6;color:var(--body);text-wrap:pretty}

/* -------------------------------------------------------------- pricing -- */
.pricing{background:var(--slate);color:var(--on-dark);padding:var(--pad-y) var(--pad-x);scroll-margin-top:24px}
.pricing-inner{
  max-width:1100px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(40px,7vw,104px);align-items:start;
}
.pricing h2{
  font-family:var(--sans);font-weight:600;font-size:clamp(32px,3.6vw,46px);
  letter-spacing:-.02em;line-height:1.1;margin-bottom:20px;text-wrap:balance;
}
.pricing-lede{font-size:17px;line-height:1.65;color:var(--on-dark-body);margin-bottom:32px;max-width:460px;text-wrap:pretty}

.checks{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.checks li{display:flex;gap:12px;align-items:baseline;font-size:16px;color:var(--on-dark)}
.check{color:var(--amber);flex:none}
.checks-sm{gap:10px}
.checks-sm li{font-size:15px;line-height:1.45}

.pricing .signup-form{margin-top:36px;max-width:460px}
.pricing .signup-form input[type="email"]{background:rgba(243,233,220,.06)}
.pricing .signup-form input:focus{border-color:var(--amber)}
.pricing .signup-success{margin-top:32px;max-width:460px;background:rgba(243,233,220,.08);border-color:var(--rule-dark)}

/* rate card: between two cream rules, no box */
.rate-card{border-top:2px solid var(--on-dark);border-bottom:2px solid var(--on-dark)}
.rate-head{display:flex;align-items:baseline;gap:12px;padding:26px 0 18px}
.rate-amount{font-family:var(--serif);font-size:clamp(64px,7vw,88px);line-height:.9;letter-spacing:-.035em}
.rate-unit{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--on-dark-muted2)}
.ledger{padding-bottom:10px}
.ledger-row{display:flex;align-items:baseline;gap:10px;padding:11px 0;font-size:15px}
.ledger dt{color:var(--on-dark-body)}
.ledger-row::after{content:"";order:2;flex:1;border-bottom:1.5px dotted var(--leader);transform:translateY(-4px)}
.ledger dd{order:3;font-weight:600;font-variant-numeric:tabular-nums}
.rate-block{padding:22px 0 24px;border-top:1px solid var(--rule-dark)}
.rate-label{
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-dark-muted);margin-bottom:14px;
}
.dagger{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;margin-left:6px;vertical-align:1px;border-radius:50%;
  border:1px solid rgba(233,180,122,.55);background:transparent;color:var(--amber);
  font-family:var(--serif);font-size:13px;font-weight:600;line-height:1;padding:0;cursor:pointer;
  transition:background .15s,color .15s;
}
.dagger:hover,.dagger[aria-expanded="true"]{background:var(--amber);color:var(--slate);border-color:var(--amber)}
.sms-note{margin-top:16px;padding:14px 16px;background:#2a3f49;border-radius:10px}
.sms-note[hidden]{display:none}
.sms-note p{font-size:12px;line-height:1.55;color:var(--on-dark-body);text-wrap:pretty}
.dagger-mark{color:var(--amber);font-family:var(--serif);font-weight:600}
.rate-free{display:flex;align-items:center;justify-content:space-between;gap:20px}
.rate-free-title{font-family:var(--sans);font-weight:600;font-size:22px;letter-spacing:-.025em;margin-bottom:4px}
.rate-free-sub{font-size:14px;color:var(--on-dark-body);line-height:1.5;max-width:340px;text-wrap:pretty}
.rate-zero{flex:none;font-family:var(--serif);font-size:44px;line-height:1;letter-spacing:-.03em;color:var(--amber)}

/* ---------------------------------------------------------------- about -- */
.about{
  background:var(--slate-deep);color:var(--on-dark);
  padding:clamp(72px,9vw,128px) var(--pad-x);scroll-margin-top:24px;overflow:hidden;
}
.about-inner{
  max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:clamp(48px,7vw,96px);align-items:center;
}
.polaroids{
  display:grid;grid-template-columns:repeat(2,minmax(0,260px));
  justify-content:center;align-items:start;padding:24px 0;width:100%;
}
.polaroid{
  position:relative;
  background:#fbf8f2;padding:clamp(8px,3%,12px) clamp(8px,3%,12px) 0;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.25);
}
/* earlier rows sit on top so a caption is never covered by the photo below it */
.polaroid-weezer{z-index:4;transform:translateX(4%) rotate(-4deg)}
.polaroid-ansel{z-index:3;transform:translate(-4%,-14px) rotate(3deg)}
.polaroid-kodi{z-index:2;margin-top:-7%;transform:translateX(9%) rotate(2.5deg)}
.polaroid-sadie{z-index:1;margin-top:-7%;transform:translate(1%,12px) rotate(-2deg)}
.polaroid>img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:#e8e0d3}
.polaroid figcaption{
  font-family:var(--marker);font-size:clamp(15px,1.6vw,20px);color:#1f2433;
  text-align:center;padding:10px 6% 14px;transform:rotate(-1.5deg);line-height:1.2;
  display:flex;align-items:center;justify-content:center;gap:.3em;
}
.wing{flex:none;width:1.6em;height:auto;margin-top:-.35em}
.wing-l{transform:scaleX(-1)}
.about-copy .eyebrow{color:var(--amber);margin-bottom:12px}
.about-copy>p:not(.eyebrow){font-size:17px;line-height:1.7;color:var(--on-dark-body);max-width:520px;text-wrap:pretty}
.about-copy>p+p{margin-top:18px}

/* ------------------------------------------------------------------ faq -- */
.faq{padding:var(--pad-y) var(--pad-x);max-width:780px;margin:0 auto;scroll-margin-top:24px}
.faq h2{
  font-family:var(--sans);font-weight:600;font-size:clamp(32px,3.6vw,44px);
  letter-spacing:-.02em;margin-bottom:36px;text-align:center;
}
.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--hair2)}
.faq-item{border-bottom:1px solid var(--hair2);padding:22px 4px}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  cursor:pointer;list-style:none;font-size:17px;font-weight:500;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-icon{
  width:28px;height:28px;border-radius:50%;border:1px solid #d3c2ae;flex:none;
  display:flex;align-items:center;justify-content:center;
  color:var(--terra);font-size:16px;line-height:1;
}
.faq-icon::before{content:"+"}
.faq-item[open] .faq-icon::before{content:"–"}
.faq-item p{font-size:16px;line-height:1.65;color:var(--body);margin-top:12px;padding-right:48px}

/* --------------------------------------------------------------- footer -- */
.footer{position:relative;color:var(--on-dark);margin-top:var(--footer-ridge-h);background:var(--footer-morning)}
html[data-scene="night"] .footer{background:var(--footer-night)}
/* .footer-ridge is a clipping window above the footer; ::before is the art.
   The ridge SVGs have a transparent sky, so the art cannot sit inside the
   dark footer box itself. */
.footer-ridge{position:absolute;left:0;right:0;bottom:100%;height:var(--footer-ridge-h);overflow:hidden;pointer-events:none}
.footer-ridge::before{
  content:"";position:absolute;inset:0;
  background:url(/assets/img/footer-ridge-morning.svg) center bottom/cover no-repeat;
}
html[data-scene="night"] .footer-ridge::before{background-image:url(/assets/img/footer-ridge-night.svg)}
.footer-bar{
  position:relative;border-top:1px solid rgba(243,233,220,.1);padding:22px var(--pad-x);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  font-size:13px;color:var(--on-dark-soft);
}
.footer-start{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
/* Better Stack's badge is its own document (and its own link to the status
   page); only the box is ours. color-scheme:normal keeps its canvas clear. */
.status-badge{display:block;border:0;max-width:100%;color-scheme:normal}
.footer-contact{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
.footer-contact a{color:var(--nav-link)}
.footer-contact a:hover{color:var(--on-dark)}
.footer-end{flex:1 1 auto;display:flex;align-items:center;justify-content:flex-end;gap:20px}
.scene-btn{
  position:relative;width:30px;height:30px;flex:none;padding:0;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid rgba(243,233,220,.18);background:transparent;color:var(--nav-link);cursor:pointer;
  transition:color .15s,border-color .15s;
}
.scene-btn:hover{color:var(--amber-hi);border-color:rgba(241,196,141,.5)}
.footer-links{display:flex;gap:20px}
.footer-links a{color:var(--on-dark-soft)}
.footer-links a:hover{color:var(--on-dark)}

/* ==========================================================================
   Product mockups. No outer frame — the app window sits on the page. Sizes
   are in em and the window font-size is in container units, so each mock
   scales with its column. The right-hand columns intentionally run off the
   window's edge. The 9px is a fallback for browsers without cq units.
   ========================================================================== */
.mock{position:relative;aspect-ratio:4/3;container-type:inline-size;font-family:var(--plex);color:#1c2733}
/* cq units resolve against the nearest *ancestor* container, so the size
   goes on the windows, not on .mock itself */
.mock>*{font-size:9px}
.mock-kb>.win,.mock-sched>.win{font-size:2.7cqw}
.mock-clinic>.win,.mock-owner>.win{font-size:2.2cqw}
.mock-hold>.hold-modal{font-size:2.6cqw}
.mock-owner{font-family:var(--dm);color:#27323a}

.win{background:#fff;border-radius:14px;border:1px solid #e2d8ca;box-shadow:var(--win-shadow);overflow:hidden}
.win-front{box-shadow:var(--win-shadow-front)}
.win-title{font-size:1.75em;font-weight:700;letter-spacing:-.01em;line-height:1.1}
.win-sub{color:#6b7785;margin:.25em 0 1.5em}

/* -- kanban board (Chain of Custody, Case Holds) ---------------------------
   Animation state lives in data-* attributes on .mock, set by app.js:
   pressed → left → arrived (both boards), plus typing / released / closed /
   badge-gone for the hold mock. data-fade dims the board between loops and
   data-instant kills transitions for the reset frame. */
.kb{position:absolute;inset:0;padding:1.7em 0 0 1.7em}
.kb-board{transition:opacity .4s ease}
.mock[data-fade] .kb-board{opacity:0}
.kb-cols{display:grid;grid-template-columns:repeat(4,15em);gap:1.1em;align-items:start}
.kb-col{display:flex;flex-direction:column}
.kb-head{
  display:flex;align-items:center;gap:.5em;padding:0 .3em .7em;margin-bottom:.8em;
  border-bottom:1px solid #e6e9ed;font-weight:600;
}
.kb-dot{width:.6em;height:.6em;border-radius:50%;background:var(--dot)}
.kb-received{--dot:#5b5bd6}
.kb-aqua{--dot:#d97706}
.kb-dry{--dot:#b4530c}
.kb-released{--dot:#0f7a4f}
.kb-name{flex:1}
.kb-count{color:#8a94a0;font-weight:400;font-size:.9em}
.n-after{display:none}
.mock[data-left] .kb-received .n-before,
.mock[data-arrived] .kb-aqua .n-before{display:none}
.mock[data-left] .kb-received .n-after,
.mock[data-arrived] .kb-aqua .n-after{display:inline}

.kb-slot{
  overflow:hidden;max-height:13em;margin-bottom:.8em;
  transition:max-height .55s ease,opacity .45s ease,transform .55s cubic-bezier(.2,.7,.2,1),margin .55s ease;
}
.kb-in{max-height:0;opacity:0;margin-bottom:0;transform:translateX(-4em)}
.mock[data-left] .kb-out{max-height:0;opacity:0;margin-bottom:0;transform:translateX(4em)}
.mock[data-arrived] .kb-in{max-height:13em;opacity:1;margin-bottom:.8em;transform:none}
.mock[data-instant] *{transition:none!important}

.kb-card{
  border:1px solid #e3e6ea;border-radius:.6em;padding:.9em .9em .7em;
  display:flex;flex-direction:column;gap:.2em;background:#fff;
}
.kb-row{display:flex;justify-content:space-between;align-items:baseline}
.kb-pet{font-weight:600;font-size:1.05em}
.kb-id{color:#8a94a0;font-size:.85em}
.kb-meta{color:#6b7785;font-size:.88em}
.kb-track{display:flex;justify-content:space-between;margin-top:.5em;font-size:.88em}
.kb-track-name{font-weight:600;color:var(--tr)}
.kb-track-step{color:#6b7785}
.tr-paw{--tr:#a21caf}
.tr-ship{--tr:#7c3aed}
.kb-segs{display:grid;grid-template-columns:repeat(3,1fr);gap:.25em;margin-top:.3em}
.kb-segs span{height:.25em;border-radius:1em;background:#eceef1}
.kb-segs.s-1 span:nth-child(1),
.kb-segs.s-2 span:nth-child(-n+2){background:var(--tr)}
.kb-foot{
  display:flex;justify-content:flex-end;align-items:center;gap:.4em;
  margin-top:.6em;padding-top:.6em;border-top:1px solid #eef0f2;font-size:.88em;
}
.kb-hold{
  color:#b45309;background:#fdf3e1;border-radius:.4em;padding:.25em .55em;font-weight:600;
  max-width:8em;overflow:hidden;white-space:nowrap;
  transition:max-width .45s ease,opacity .45s ease,padding .45s ease;
}
.mock[data-badge-gone] .kb-hold-anim{max-width:0;opacity:0;padding:.25em 0}
.kb-adv{
  background:#f2f4f6;border-radius:.4em;padding:.25em .6em;font-weight:500;white-space:nowrap;
  transition:background .15s,transform .15s;
}
.mock[data-pressed] .kb-out .kb-adv{background:#d9dee4;transform:scale(.93)}

/* hold modal over the board */
.hold-overlay{position:absolute;inset:0;background:rgba(52,60,70,.38);transition:opacity .35s ease}
.mock[data-closed] .hold-overlay{opacity:0}
.hold-modal{
  position:absolute;top:6%;left:8%;right:6%;background:#fff;border-radius:.9em;
  padding:1.3em 1.4em 1.2em;box-shadow:0 24px 50px -16px rgba(30,25,20,.45);
  display:flex;flex-direction:column;gap:.75em;
  transition:opacity .35s ease,transform .35s ease;
}
.mock[data-closed] .hold-modal,.mock[data-fade] .hold-modal{opacity:0}
.mock[data-closed] .hold-modal{transform:translateY(.8em) scale(.97)}
.hold-modal-head{display:flex;justify-content:space-between;align-items:center}
.hold-title{font-size:1.3em;font-weight:600}
.hold-x{
  width:1.9em;height:1.9em;border-radius:50%;border:1px solid #c9ced4;color:#4a5562;
  display:flex;align-items:center;justify-content:center;
}
.hold-lede{color:#4a5562}
.hold-lede b{color:#1c2733;font-weight:600}
.hold-rule{border:1px solid #e3e6ea;border-radius:.6em;padding:.8em .9em;display:flex;flex-direction:column;gap:.4em}
.hold-rule-head{display:flex;align-items:center;gap:.6em}
.hold-exit{background:#fde8e8;color:#c0262d;font-size:.75em;font-weight:600;letter-spacing:.06em;padding:.2em .5em;border-radius:.35em}
.hold-stage{font-weight:600}
.hold-blocks{color:#8a94a0;font-size:.88em}
.hold-field{display:flex;flex-direction:column;gap:.4em}
.hold-label{font-size:.9em;font-weight:500;color:#4a5562}
.hold-note{border:1px solid #dfe3e8;border-radius:.5em;padding:.6em .8em;height:3.4em;color:#1c2733}
/* the placeholder shows only while app.js has emptied the typed text */
.note-ph{display:none;color:#8a94a0}
.note-text:empty+.note-ph{display:inline}
.note-caret{display:none;width:1px;height:1.1em;background:#1c2733;vertical-align:-.2em;margin-left:1px}
.mock[data-typing] .note-caret{display:inline-block}
.hold-hint{font-size:.82em;color:#8a94a0}
.hold-actions{display:flex;justify-content:flex-end;align-items:center;gap:1.2em}
.hold-cancel{color:#4a5562}
.hold-btn{background:#3f6684;color:#fff;font-weight:500;padding:.6em 1em;border-radius:.5em;transition:background .15s,transform .15s}
.mock[data-released] .hold-btn{background:#30526c;transform:scale(.95)}

/* -- clinic portal ------------------------------------------------------ */
.clinic{position:absolute;top:0;left:0;right:12%;bottom:10%;background:#f7f8fa;display:flex}
.clinic-side{flex:none;width:9.5em;background:#1e2a38;color:#c9d2dc;padding:1.2em .7em;display:flex;flex-direction:column;gap:.4em}
.clinic-brand{display:flex;align-items:center;gap:.45em;color:#fff;font-weight:600;padding:0 .3em}
.clinic-brand svg{fill:#8fb3cf}
.clinic-kicker{font-size:.68em;letter-spacing:.1em;color:#8392a3;font-weight:600;padding:0 .45em;margin-bottom:.6em}
.clinic-nav{padding:.5em .6em;font-size:.9em}
.clinic-nav.is-active{background:#2c3c50;color:#9cc1e0;border-radius:.45em}
.clinic-nav-settings{border-top:1px solid #33435a;margin-top:.3em}
.clinic-main{flex:1;min-width:0;padding:1.4em 1.4em 0}
.clinic-main .win-title{font-size:1.6em}
.clinic-main .win-sub{margin:.25em 0 1.1em}
.clinic-th{
  display:grid;grid-template-columns:4em minmax(0,1.3fr) minmax(0,1.2fr) 7em;column-gap:.8em;
  font-size:.72em;font-weight:600;letter-spacing:.06em;color:#6b7785;
  padding-bottom:.7em;border-bottom:1px solid #e3e6ea;
}
.clinic-tr{
  display:grid;grid-template-columns:3.3em minmax(0,1.3fr) minmax(0,1.2fr) 6em;column-gap:.8em;
  align-items:center;padding:.6em 0;border-bottom:1px solid #eceef1;font-size:.86em;
}
.clinic-tag,.clinic-owner{color:#4a5562}
.clinic-owner,.clinic-breed{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clinic-pet{min-width:0}
.clinic-name{font-weight:600;font-size:1.05em}
.clinic-breed{color:#6b7785;font-size:.85em}
.clinic-st{border-radius:1em;padding:.25em .6em;font-size:.85em;font-weight:500;white-space:nowrap}
.st-received{background:#eef0fe;color:#5b5bd6}
.st-progress{background:#eef2f6;color:#4a6a85}
.st-complete{background:#e8f7ee;color:#12805a}

.referral{position:absolute;top:34%;left:36%;right:0;bottom:0;padding:1.3em 1.4em;display:flex;flex-direction:column;gap:.8em}
.ref-title{font-size:1.4em;font-weight:700;letter-spacing:-.01em;line-height:1.1}
.ref-sub{color:#6b7785;font-size:.9em;margin-top:.2em}
.ref-kicker{font-size:.72em;font-weight:600;letter-spacing:.08em;color:#4a5562}
.ref-kicker-2{margin-top:.2em}
.ref-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7em .8em}
.ref-field{display:flex;flex-direction:column;gap:.35em;min-width:0}
.ref-field span{font-size:.8em;font-weight:500;color:#4a5562}
.ref-input{border:1px solid #dfe3e8;border-radius:.45em;padding:.5em .7em;color:#1c2733;white-space:nowrap;overflow:hidden}
.ref-input.is-empty{color:#8a94a0}

/* -- owner portal (facility-branded, hence the different type) ------------ */
.portal{
  position:absolute;top:0;left:0;right:16%;bottom:14%;background:#edf1f4;
  display:flex;flex-direction:column;align-items:center;padding:2.4em 2em 0;text-align:center;
}
.portal-dots{display:flex;gap:.3em;margin-bottom:.9em}
.portal-dots span{width:.3em;height:.3em;border-radius:50%;background:#b5bec6}
.portal-title{font-family:var(--lora);font-weight:600;font-size:1.7em;line-height:1.15}
.portal-sub{color:#5b6670;font-size:.9em;margin:.35em 0 1.2em}
.portal-options{display:flex;flex-direction:column;gap:.7em;width:100%;max-width:24em}
.portal-opt{
  background:#fff;border:1px solid #dde3e8;border-radius:.7em;padding:.9em 1em;
  display:flex;gap:.8em;align-items:flex-start;text-align:left;
}
.portal-ico{
  flex:none;width:2em;height:2em;border-radius:50%;background:#eef1f4;color:#4d6273;
  display:flex;align-items:center;justify-content:center;font-size:.9em;
}
.portal-opt-title{font-family:var(--lora);font-weight:600;font-size:1.05em;margin-bottom:.25em}
.portal-opt-body{font-size:.8em;line-height:1.5;color:#5b6670}

.ship{
  position:absolute;top:31%;left:27%;right:0;bottom:0;border-top:3px solid #4d6273;
  padding:1.2em 1.3em;display:flex;flex-direction:column;gap:.75em;
}
.ship-head{display:flex;justify-content:space-between;align-items:flex-start}
.ship-pet{font-family:var(--lora);font-weight:600;font-size:1.45em;line-height:1.1}
.ship-breed{color:#5b6670;font-size:.82em;margin-top:.2em}
.ship-status{background:#e1e7ec;color:#3d4c58;border-radius:1em;padding:.25em .7em;font-size:.75em;font-weight:500;white-space:nowrap}
.ship-bar{height:.3em;border-radius:1em;background:#e6eaee;overflow:hidden}
.ship-bar-fill{width:88%;height:100%;background:#4d6273;border-radius:1em}
.ship-bar-labels{display:flex;justify-content:space-between;font-size:.62em;letter-spacing:.08em;color:#5b6670;margin-top:.5em}
.ship-card{border:1px solid #dde3e8;border-radius:.7em;padding:.9em 1em;display:flex;flex-direction:column;gap:.8em}
.ship-card-head{display:flex;justify-content:space-between;gap:1em}
.ship-card-copy{min-width:0}
.ship-kicker{display:flex;align-items:center;gap:.6em;font-size:.66em;letter-spacing:.08em;color:#5b6670;font-weight:500}
.ship-chip{background:#eef1f4;border-radius:1em;padding:.2em .7em;letter-spacing:0;font-size:1.1em;white-space:nowrap}
.ship-card-title{font-family:var(--lora);font-weight:600;font-size:1.12em;margin-top:.45em}
.ship-card-sub{font-size:.78em;color:#5b6670;margin-top:.15em}
.ship-expected{text-align:right;flex:none}
.ship-expected-label{font-size:.62em;letter-spacing:.08em;color:#5b6670}
.ship-expected-date{font-family:var(--lora);font-weight:600;font-size:1.2em;white-space:nowrap}
.ship-steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr)}
.ship-line{position:absolute;top:.85em;left:12.5%;right:12.5%;height:2px;background:linear-gradient(90deg,#4f6b5a 0 66.6%,#d5dbe0 66.6%)}
.ship-step{display:flex;flex-direction:column;align-items:center;gap:.35em;position:relative;z-index:1}
.ship-pip{
  width:1.7em;height:1.7em;border-radius:50%;border:1.5px solid #c9d1d8;background:#fff;
  display:flex;align-items:center;justify-content:center;
}
.ship-pip.is-done{font-size:.8em;border:none;background:#4f6b5a;color:#fff}
.ship-pip.is-current{border:2px solid #4f6b5a}
.ship-pip.is-current span{width:.45em;height:.45em;border-radius:50%;background:#4f6b5a}
.ship-step-name{font-size:.85em;font-weight:500;color:#27323a}
.ship-step-name.is-pending{color:#8a949c}
.ship-step-date{font-size:.72em;color:#7b858d;min-height:1.2em}
.ship-carrier{display:flex;align-items:center;gap:.7em;background:#f5f7f9;border-radius:.5em;padding:.6em .7em}
.ship-carrier-logo{flex:none;border:1px solid #d5dbe0;background:#fff;border-radius:.4em;padding:.45em .4em;font-size:.6em;font-weight:600}
.ship-carrier-copy{min-width:0;flex:1}
.ship-carrier-name{font-size:.66em;color:#5b6670}
.ship-tracking{font-family:var(--dm-mono);font-size:.8em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ship-track-btn{flex:none;border:1px solid #d5dbe0;background:#fff;border-radius:.45em;padding:.4em .7em;font-size:.75em;font-weight:500;white-space:nowrap}

/* -- schedule ------------------------------------------------------------ */
.sched{position:absolute;inset:0;padding:1.7em 0 0 1.7em}
.sched .win-sub{margin:.25em 0 1.2em}
.sched-bar{display:flex;align-items:center;gap:1.2em;margin-bottom:1.2em}
.sched-seg{display:flex;border:1px solid #e3e6ea;border-radius:.55em;padding:.2em;gap:.2em;font-size:.92em}
.sched-seg span{padding:.35em .8em}
.sched-seg .is-active{background:#eef0f3;border-radius:.4em;font-weight:500}
.sched-range{color:#4a5562;font-size:.92em}
.sched-days{display:grid;grid-template-columns:repeat(3,16em);border:1px solid #e3e6ea;border-radius:.7em 0 0 0;min-height:16em}
.sched-day{border-right:1px solid #e3e6ea;display:flex;flex-direction:column}
.sched-day-head{display:flex;justify-content:space-between;align-items:baseline;padding:.8em .9em;border-bottom:1px solid #e3e6ea}
.sched-day-name{font-weight:600;color:#1c2733}
.sched-day-name.is-today{color:#3f6684}
.sched-day-date{color:#6b7785;font-size:.88em}
.sched-events{padding:.6em;display:flex;flex-direction:column;gap:.5em}
.sched-ev{border-radius:.5em;padding:.6em .7em;display:flex;flex-direction:column;gap:.2em}
.ev-aq{background:#fcf1e6;color:#a3500b}
.ev-pk{background:#f3edfd;color:#7c3aed}
.sched-ev-title{font-weight:500;font-size:.92em}
.sched-time{font-family:var(--plex-mono);margin-right:.5em}
.sched-ev-sub{font-size:.82em;opacity:.8}

/* ==========================================================================
   Legal pages and 404. Same footer as the home page; a cream header instead
   of the sky.
   ========================================================================== */
.page-head{background:var(--cream);border-bottom:1px solid var(--hair)}
.page-head .logo{color:var(--ink)}
.page-head .logo svg{fill:var(--terra)}
.page-head .nav-links a{color:var(--muted)}
.page-head .nav-links a:hover{color:var(--ink)}

.prose{max-width:760px;margin:0 auto;padding:clamp(48px,6vw,80px) var(--pad-x) var(--pad-y)}
.prose h1{
  font-family:var(--serif);font-weight:400;font-size:clamp(38px,4.6vw,56px);
  letter-spacing:-.02em;line-height:1.05;margin-bottom:10px;text-wrap:balance;
}
.prose .updated{font-size:13px;color:var(--muted);letter-spacing:.04em;margin-bottom:36px}
.prose h2{font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:-.01em;line-height:1.2;margin:40px 0 10px}
.prose h3{font-size:16px;font-weight:600;color:var(--ink);margin:22px 0 6px}
.prose p,.prose li{font-size:16px;line-height:1.7;color:var(--body);text-wrap:pretty}
.prose p{margin-bottom:12px}
.prose ul{padding-left:22px;margin-bottom:14px}
.prose li{margin-bottom:6px}
.prose a{text-decoration:underline;text-underline-offset:2px}  /* colour alone is not a distinction */
.prose strong{color:var(--ink)}

.notfound{text-align:center;padding:clamp(80px,12vw,160px) var(--pad-x)}
.notfound h1{font-family:var(--serif);font-weight:400;font-size:clamp(72px,10vw,120px);line-height:1;letter-spacing:-.03em;color:var(--terra)}
.notfound p{font-size:18px;color:var(--body);margin:12px 0 28px}
.notfound .btn{background:var(--terra);color:#fff}
.notfound .btn:hover{background:var(--terra-dk)}

/* ==========================================================================
   Responsive. The grids above collapse on their own; this is the rest.
   ========================================================================== */
@media(max-width:800px){
  /* the dog and sun/moon sit right of centre in the ridge art; a centre crop
     loses them, so the art runs at natural width, anchored to the right */
  .ridge,.sky-toggle{left:auto;right:calc(-.85 * var(--ridge-h));width:calc(5 * var(--ridge-h))}
  .footer-ridge::before{left:auto;right:calc(-1.4545 * var(--footer-ridge-h));width:calc(7.2727 * var(--footer-ridge-h))}
}

@media(max-width:640px){
  .wp{grid-template-columns:28px minmax(0,1fr);gap:16px}
  .meander,.wp-mark{width:28px}
  .faq-item p{padding-right:0}
  .footer-bar{justify-content:center;text-align:center}
  .footer-start,.footer-end{flex-wrap:wrap;justify-content:center}
}

/* --------------------------------------------------------------- motion -- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}