/* =====================================================================
   VET AMICA: shared stylesheet
   Serves two pages: landing.html (practices) and for-pet-owners.html.
   Anything under `body.owners` is the owner page only: same colours and
   faces, larger body text, warmer ground, no dark fields, no mono.

   Colour is taken from the application itself: emerald on white, with
   the pale mint tiles used behind its icons. The warm side of the
   palette (cream, teal, gold) is not decoration; it is the actual ink
   of the printed handouts, so it appears where paper appears, and as
   the ground of the owner page.

   Figtree carries the interface voice. Newsreader is the display face,
   used for the serif line of a heading, section subheads and quotes.
   IBM Plex Mono has one job: laboratory output, which is machine text
   and should read as such (practice page only).

   Newsreader's optical-size axis runs 6..72: high values are the
   display cut, low values hold up at small sizes. The `opsz` numbers
   below are chosen per use, not copied.
   ===================================================================== */

:root{
  /* --- the application ------------------------------------------- */
  --grn:#12A76A;           /* graphic use only: icons, rules, fills */
  --grn-lt:#2FC183;
  --grn-dk:#0A7B4C;        /* the green as text, 5.4:1 on white     */
  /* white text cannot sit on #12A76A (3.1:1), so anything carrying a
     label uses this deeper pair instead, 4.8:1 at its lightest stop */
  --grn-btn:#0A8452;
  --grn-btn-2:#076C42;
  --grn-deep:#08432C;      /* dark field                             */
  --grn-deep-2:#06301F;
  --mint:#E8F7EF;
  --mint-2:#F2FBF6;
  --mint-line:#CBEADA;

  --ink:#0E1B26;
  --ink-2:#394A56;
  --slate:#5D7280;         /* the app's grey, darkened to 4.97:1 on white */
  --white:#fff;
  --page:#F4F8F7;
  --line:#E4EBE8;
  --line-2:#D5E0DB;

  /* --- the paper --------------------------------------------------
     Sampled straight off a current condition sheet, so the sections
     that show the handouts are painted in the handouts' own colours.
     The sheets were cream and gold until the 2026 redraw; they are now
     near-white with a dark teal masthead and a green rule, and these
     values are that. Re-sample from a fresh PDF if the sheets change. */
  --paper:#F7FBFA;         /* the sheet's ground                      */
  --paper-2:#E8F5EE;       /* the pale green panel tint on the sheets */
  --paper-line:#DCEAE3;
  --paper-ink:#18454B;     /* the masthead teal, 10.1:1 on the ground */
  --paper-accent:#2F8056;  /* the green rule and bullets, 4.6:1       */
  --paper-accent-dk:#1B6340; /* that green as small text, 6.9:1       */

  --alert:#A63D2F;
  --alert-tint:#FBEDEA;

  --ff-d:'Newsreader',Georgia,'Times New Roman',serif;
  --ff-b:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ff-m:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --pad:clamp(1.15rem,4vw,2.75rem);
  --gap:clamp(3.75rem,7.5vw,7rem);
  --max:76rem;
  --r:14px;
  --r-lg:24px;

  --shadow-app:0 30px 70px -34px rgba(6,60,40,.45),0 2px 6px rgba(6,60,40,.05);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--ff-b);
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;line-height:1.15;text-wrap:balance}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
ol,ul,dl,dd,figure,blockquote{margin:0;padding:0}
li{list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--grn-dk);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--grn-deep);
  color:#fff;padding:.75rem 1.15rem;font-weight:600;text-decoration:none}
.skip:focus{left:.5rem;top:.5rem}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:var(--gap)}

/* ==================================================== type system == */
.display{font-family:var(--ff-d);font-weight:400;letter-spacing:-.02em}
.display .d-serif,.display .d-sans{display:block}
.display .d-serif{
  font-family:var(--ff-d);font-weight:400;font-variation-settings:'opsz' 72;
  font-size:clamp(2.3rem,1.3rem + 4.4vw,4.4rem);line-height:1.03;
}
.display .d-sans{
  font-family:var(--ff-b);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(2.15rem,1.25rem + 4vw,4.05rem);line-height:1.05;margin-top:.05em;
}
.display-2 .d-serif{font-size:clamp(1.95rem,1.35rem + 2.4vw,3.05rem)}
.display-2 .d-sans{font-size:clamp(1.85rem,1.3rem + 2.2vw,2.85rem)}

/* the one recurring graphic: a green stroke drawn under a phrase */
.mark{
  position:relative;display:inline;background-repeat:no-repeat;
  background-position:0 100%;background-size:100% .32em;padding-bottom:.08em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  background-image:linear-gradient(transparent 0,rgba(47,193,131,.42) 0);
}
.mark-d{background-image:linear-gradient(transparent 0,rgba(47,193,131,.32) 0)}

.eyebrow{
  font-size:.775rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--grn-dk);margin:0 0 1.15rem;
}
.eyebrow-lt{color:var(--grn-lt)}
.eyebrow-pp{color:var(--paper-accent-dk)}

.lead{font-size:clamp(1.06rem,1rem + .35vw,1.24rem);line-height:1.6;color:var(--ink-2);max-width:34em}

/* section heading block: heading left, standfirst right.
   Top-aligned, not bottom: a two-paragraph standfirst against a
   one-line heading drops the heading to the floor of the row and
   opens a hole where the heading ought to be. */
.sec-hd{
  display:grid;gap:clamp(1.1rem,3vw,3rem);align-items:start;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
@media(min-width:60rem){.sec-hd{grid-template-columns:1.05fr .95fr}}
.sec-hd-p{color:var(--ink-2);max-width:36em}
.sec-hd-p p{font-size:1.06rem}

/* ======================================================== buttons == */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:linear-gradient(180deg,var(--grn-btn),var(--grn-btn-2));
  color:#fff;text-decoration:none;font-weight:650;font-size:1rem;
  padding:.85rem 1.4rem;border:0;border-radius:11px;cursor:pointer;
  font-family:inherit;line-height:1.2;
  box-shadow:0 10px 24px -12px rgba(10,132,82,.85);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.btn:hover{transform:translateY(-1px);filter:saturate(1.08);
  box-shadow:0 14px 30px -12px rgba(10,132,82,.9)}
.btn .arw{transition:transform .16s ease}
.btn:hover .arw{transform:translateX(3px)}
.btn-sm{padding:.6rem 1.05rem;font-size:.925rem;border-radius:9px}
.btn-ghost{
  background:none;color:var(--grn-dk);box-shadow:none;
  border:1.5px solid var(--mint-line);
}
.btn-ghost:hover{background:var(--mint-2);border-color:var(--grn-lt);filter:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* ========================================================= header == */
.head{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.head-in{max-width:var(--max);margin-inline:auto;padding:.7rem var(--pad);
  display:flex;align-items:center;gap:1rem}

.wordmark{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  font-weight:700;font-size:1.2rem;letter-spacing:-.025em;color:var(--ink);margin-right:auto;
  padding-block:.35rem}
/* the drawn mark, as it appears on the handouts and in the application.
   No tile behind it: the artwork carries its own pale green disc. */
.brand-mark{width:34px;height:34px;flex:none;object-fit:contain}

.nav{display:flex;align-items:center;gap:.35rem}
.nav a{text-decoration:none;font-size:.94rem;font-weight:550;color:var(--ink-2);
  padding:.5rem .7rem;border-radius:8px}
.nav a:hover{color:var(--ink);background:var(--mint-2)}
.nav a.btn{color:#fff;margin-left:.4rem}
.nav a.btn:hover{background:linear-gradient(180deg,var(--grn-btn),var(--grn-btn-2))}

/* the quiet crossover link, deliberately not a switch at the top of
   the page, so a practice never sees "we talk to your clients" first */
.nav-x{font-size:.86rem;font-weight:600;color:var(--grn-dk);text-decoration:none;
  white-space:nowrap;padding:.5rem .5rem;border-radius:8px;margin-left:.5rem}
.nav-x:hover{background:var(--mint-2);text-decoration:underline;text-underline-offset:3px}
.nav-x .arw{display:inline-block;transition:transform .16s ease}
.nav-x:hover .arw{transform:translateX(3px)}
.nav-x-solo{margin-left:auto}

.nav-btn{display:none}
@media(max-width:60rem){
  .nav-btn{
    display:inline-flex;align-items:center;gap:.5rem;background:#fff;
    border:1px solid var(--line-2);border-radius:9px;padding:.5rem .8rem;min-height:44px;
    font:inherit;font-size:.9rem;font-weight:600;color:var(--ink);cursor:pointer;
  }
  .nav-btn-bars{display:grid;gap:4px}
  .nav-btn-bars i{display:block;width:16px;height:2px;background:var(--grn);border-radius:2px}
  .nav{
    position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;
    align-items:stretch;gap:.15rem;background:#fff;border-bottom:1px solid var(--line);
    padding:.6rem var(--pad) 1.1rem;box-shadow:0 20px 30px -24px rgba(6,60,40,.4);
  }
  .nav.is-open{display:flex}
  .nav a{padding:.7rem .5rem;font-size:1rem}
  .nav a.btn{margin:.4rem 0 0;justify-content:center}
  .nav-x{margin:.35rem 0 0;padding:.7rem .5rem;font-size:1rem}
}

/* =========================================================== hero == */
.hero{position:relative;padding-block:clamp(2.75rem,6vw,5.25rem) clamp(3rem,6vw,5.5rem);
  background:
    radial-gradient(60rem 30rem at 82% -10%,rgba(47,193,131,.13),transparent 60%),
    linear-gradient(180deg,var(--mint-2),var(--white) 55%);
  border-bottom:1px solid var(--line);overflow:hidden}
.hero .wrap{max-width:80rem}
/* top-aligned, not centred: centring drops the app frame well below the
   headline, which reads as the screenshot having slipped down the page */
.hero-grid{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:start}
/* two columns only once the app frame is wide enough to show the whole
   toolbar; below this the hero stacks and the frame gets full width */
@media(min-width:70rem){.hero-grid{grid-template-columns:.78fr 1.22fr;gap:clamp(1.5rem,2.2vw,3rem)}}

.hero h1{margin-bottom:1.5rem}
.hero-meta{margin-top:2rem;padding-top:1.15rem;border-top:1px solid var(--line);
  font-size:.9rem;color:var(--slate);max-width:32em}

/* ---- the application, as it actually looks ------------------------ */
/* min-width:0 all the way down, or the single-row toolbar's min-content
   width drags the grid column wider than its fr share */
.hero-grid>*{min-width:0}
.app-shell{position:relative;min-width:0}
.app{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-app);overflow:hidden;min-width:0;
}
.app-bar{
  display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem;
  border-bottom:1px solid var(--line);background:#fff;min-width:0;
}
.app-mark{display:flex;align-items:center;gap:.45rem;font-weight:700;
  font-size:.86rem;line-height:1.2;letter-spacing:-.02em;margin-right:.18rem;
  flex:none;white-space:nowrap}
.app-mark .brand-mark{width:26px;height:26px}

/* The application's header is a tagline on the left and three plain text
   actions on the right - no tabs and no avatar. Below the width where the
   tagline fits it is dropped rather than wrapped, exactly as the real
   window does. */
.app-tagline{font-size:clamp(.665rem,.43rem + .29vw,.725rem);color:var(--slate);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.app-actions{margin-left:auto;display:flex;align-items:center;gap:.55rem;
  padding-left:.5rem;flex:none}
.app-action{font-size:clamp(.645rem,.43rem + .26vw,.7rem);font-weight:600;
  color:var(--ink-2);text-decoration:underline;text-underline-offset:2px;
  white-space:nowrap}
@media(max-width:46rem){.app-tagline{display:none}}

.app-body{padding:clamp(1.1rem,2.6vw,1.9rem);
  background:linear-gradient(160deg,#F7FCFA,#F3F7FA 55%,#F6F5FB)}
.app-h{font-size:clamp(1.25rem,1rem + 1vw,1.6rem);font-weight:700;letter-spacing:-.03em}
.app-sub{margin:.3rem 0 1.15rem;font-size:.875rem;color:var(--slate)}
.app-grid{display:grid;gap:.7rem;align-items:stretch}
@media(min-width:35rem){.app-grid{grid-template-columns:1fr 1fr}}
.app-card{display:flex;flex-direction:column;gap:.55rem;background:#fff;
  border:1px solid #EAEFEE;border-radius:12px;padding:.95rem 1rem 1.05rem;
  box-shadow:0 1px 2px rgba(6,60,40,.04)}
.app-ico{width:36px;height:36px;flex:none;border-radius:10px;background:var(--mint);
  display:grid;place-items:center}
.app-ico svg{width:18px;height:18px;stroke:var(--grn);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.app-card-t{font-size:.94rem;font-weight:700;letter-spacing:-.02em;margin:0;
  color:var(--ink);line-height:1.25}
.app-card p{margin:0;font-size:.8rem;line-height:1.45;color:var(--slate)}

.app-cap{margin:1rem .25rem 0;font-size:.83rem;color:var(--slate);max-width:36em}

/* ======================================================== problem == */
.prob{border-bottom:1px solid var(--line)}
.prob-hd{margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.prob-open{font-size:clamp(1.06rem,1rem + .35vw,1.2rem);color:var(--ink-2);max-width:44em}
.prob-close{margin-top:clamp(1.75rem,3.5vw,2.5rem);color:var(--ink-2);max-width:44em}

/* a plain list, bulleted, and with no rules between the items: the
   section reads as one continuous observation, and horizontal lines
   chop it into unrelated fragments */
.plain{display:grid;gap:.15rem;margin-top:1.75rem;max-width:56em}
.plain li{position:relative;padding:.4rem 0 .4rem 1.5rem;color:var(--ink-2)}
.plain li::before{content:"";position:absolute;left:.2rem;top:1.02em;
  width:.42rem;height:.42rem;border-radius:50%;background:var(--grn)}
@media(min-width:52rem){.plain{display:block;columns:2;column-gap:2.75rem}
  .plain li{break-inside:avoid}}
.plain-pp li{color:var(--ink-2)}
.plain-pp li::before{background:var(--paper-accent)}

/* ===================================== the two-sentence band ======= */
.band{background:var(--ink);color:#E8EEF2;padding-block:clamp(3rem,6vw,5rem)}
.band-in{display:grid;gap:clamp(1.5rem,3vw,2.25rem)}
@media(min-width:56rem){.band-in{grid-template-columns:1fr auto 1fr;align-items:center}}
.band-k{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 .85rem;color:#7E93A0}
.band-lab p{font-family:var(--ff-m);font-size:.895rem;line-height:1.65;color:#AFC0CB;margin:0}
.band-own p{font-family:var(--ff-d);font-variation-settings:'opsz' 24;
  font-size:clamp(1.15rem,1rem + .7vw,1.5rem);line-height:1.42;color:#fff;margin:0}
.band-own .band-k{color:var(--grn-lt)}
.band-arw{display:grid;place-items:center;color:var(--grn-lt)}
.band-arw svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.6}
@media(max-width:55.99rem){.band-arw svg{transform:rotate(90deg)}}
.band-foot{margin:clamp(1.75rem,3vw,2.5rem) 0 0;padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.13);font-size:.86rem;color:#8FA3AF;max-width:44em}
.band-foot b{color:#fff;font-weight:600}

/* =========================================================== gate == */
.gate{background:
  radial-gradient(50rem 28rem at 88% 0%,rgba(47,193,131,.22),transparent 62%),
  linear-gradient(170deg,var(--grn-deep),var(--grn-deep-2));color:#DCEDE4}
.gate-in{display:grid;gap:clamp(2.5rem,5vw,4.5rem)}
@media(min-width:64rem){.gate-in{grid-template-columns:.95fr 1.05fr}}
.gate h2{color:#fff}
.gate-p{color:#B9D6C7;max-width:33em;margin-top:1.5rem}
.gate-p b{color:#fff;font-weight:650}
.gate-note{margin-top:2rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-left:3px solid var(--grn-lt);border-radius:0 var(--r) var(--r) 0;padding:1.2rem 1.35rem}
.gate-note h3{font-size:1rem;font-weight:700;color:#fff;margin-bottom:.5rem}
.gate-note p{font-size:.92rem;color:#B9D6C7;margin:0}

.steps{display:grid;gap:1rem}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r);padding:1.35rem 1.4rem}
.step-n{font-family:var(--ff-m);font-size:.8rem;font-weight:500;color:var(--grn-lt);
  padding-top:.2rem;letter-spacing:.04em}
.step h3{font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:.4rem;letter-spacing:-.015em}
.step p{font-size:.94rem;color:#B9D6C7;margin:0}
.step-key{background:rgba(47,193,131,.13);border-color:rgba(47,193,131,.45)}

/* ========================================================== paper == */
.paper{background:var(--paper);color:var(--ink);border-block:1px solid var(--paper-line)}
.paper .eyebrow{color:var(--paper-accent-dk)}
.paper .sec-hd-p{color:var(--ink-2)}
.paper .mark{background-image:linear-gradient(transparent 0,rgba(47,128,86,.28) 0)}

.owner-grid{display:grid;gap:clamp(2.25rem,4.5vw,3.5rem);align-items:start}
@media(min-width:62rem){.owner-grid{grid-template-columns:1fr .8fr}}
.qs{display:grid;gap:.15rem}
.q{display:grid;grid-template-columns:auto 1fr;gap:1.15rem;align-items:start;
  padding:1.35rem 0;border-top:1px solid var(--paper-line)}
.q:last-child{border-bottom:1px solid var(--paper-line)}
.q-n{width:1.85rem;height:1.85rem;border-radius:50%;background:var(--paper-ink);color:var(--paper);
  display:grid;place-items:center;font-size:.83rem;font-weight:700;flex:none}
.q h3{font-family:var(--ff-d);font-variation-settings:'opsz' 24;font-weight:600;
  font-size:1.2rem;margin-bottom:.3rem;color:var(--paper-ink)}
.q p{margin:0;color:var(--ink-2);font-size:.98rem}

.goes-lead{margin:clamp(2.5rem,4.5vw,3.5rem) 0 0;font-family:var(--ff-d);
  font-variation-settings:'opsz' 24;font-weight:600;font-size:1.2rem;color:var(--paper-ink)}

.artefact{margin:0}
.artefact img{border-radius:6px;border:1px solid var(--paper-line);
  box-shadow:0 30px 60px -34px rgba(46,82,76,.55)}
.artefact figcaption{margin-top:.9rem;font-size:.85rem;color:var(--slate)}

/* the fanned deck of real sheets */
.deck{position:relative;height:clamp(20rem,42vw,29rem);margin-top:clamp(2.5rem,5vw,4rem)}
.deck .s{position:absolute;top:0;left:50%;width:clamp(11rem,23vw,16rem);height:auto;
  border-radius:5px;border:1px solid var(--paper-line);
  box-shadow:0 26px 46px -30px rgba(46,82,76,.6);transform-origin:50% 100%;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.deck .s1{transform:translateX(-50%) rotate(-21deg) translateY(1.5rem)}
.deck .s2{transform:translateX(-50%) rotate(-15deg) translateY(.9rem)}
.deck .s3{transform:translateX(-50%) rotate(-9deg)  translateY(.45rem)}
.deck .s4{transform:translateX(-50%) rotate(-3deg)}
.deck .s5{transform:translateX(-50%) rotate(3deg)}
.deck .s6{transform:translateX(-50%) rotate(9deg)   translateY(.45rem)}
.deck .s7{transform:translateX(-50%) rotate(15deg)  translateY(.9rem)}
.deck .s8{transform:translateX(-50%) rotate(21deg)  translateY(1.5rem);z-index:2}
.deck:hover .s1{transform:translateX(-50%) rotate(-27deg) translateY(1.5rem)}
.deck:hover .s8{transform:translateX(-50%) rotate(27deg)  translateY(1.5rem)}
.deck-cap{margin:1.25rem 0 0;font-size:.85rem;color:var(--slate);text-align:center}

.two{display:grid;gap:1.15rem;margin-top:clamp(2.5rem,5vw,3.75rem)}
@media(min-width:52rem){.two{grid-template-columns:1fr 1fr}}
.card{border-radius:var(--r);padding:1.6rem 1.7rem;border:1px solid var(--paper-line)}
.card h3{font-family:var(--ff-d);font-variation-settings:'opsz' 24;font-weight:600;
  font-size:1.2rem;margin-bottom:.7rem;color:var(--paper-ink)}
.card p{color:var(--ink-2);font-size:.98rem}
.card-tint{background:var(--paper-2)}
.card-x{font-size:.87rem;color:var(--slate);margin-top:.9rem}
.card-accent{background:var(--paper-ink);border-color:#0F3238;color:#E7EFEC}
.card-accent h3{color:#fff}
.handles-l{display:grid;gap:.1rem}
.handles-l>div{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline;
  padding:.6rem 0;border-top:1px solid rgba(255,255,255,.16)}
.handles-l>div:first-child{border-top:0}
.handles-l dt{font-weight:650;font-size:.95rem;color:#fff;white-space:nowrap}
.handles-l dd{font-size:.87rem;color:#BFD4CD;text-align:right}

/* =========================================================== why === */
.why{background:var(--white)}
/* the two things a practice configures, side by side: its prices and
   its language. Paired rather than stacked so neither reads as an
   afterthought hanging off the CMA argument above. */
.why-notes{display:grid;gap:clamp(1.5rem,3vw,2.5rem);margin-top:clamp(.5rem,2vw,1rem)}
@media(min-width:56rem){.why-notes{grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem)}}
.estimates{border-left:3px solid var(--mint-line);padding-left:clamp(1.15rem,2.5vw,1.75rem);
  max-width:52em}
.estimates h3{font-family:var(--ff-d);font-variation-settings:'opsz' 24;font-weight:600;
  font-size:1.2rem;margin-bottom:.6rem;color:var(--grn-deep)}
.estimates p{color:var(--ink-2)}

/* ===================================================== founding === */
.founding{background:var(--page);border-block:1px solid var(--line);
  padding-block:clamp(2.5rem,5vw,4rem)}
/* constrain the contents, not the wrap, so the block keeps the page's
   left edge instead of centring itself */
.founding h2{font-family:var(--ff-d);font-variation-settings:'opsz' 24;font-weight:600;
  font-size:clamp(1.35rem,1.15rem + .6vw,1.7rem);color:var(--grn-deep);margin-bottom:.5rem;
  max-width:20em}
.founding p{font-size:clamp(1.06rem,1rem + .35vw,1.2rem);color:var(--ink-2);margin:0;max-width:44em}

/* ======================================================= founder == */
/* the sidebar is gone, so the quote is constrained rather than the wrap
   otherwise it centres itself and breaks the page's left edge */
.founder-q{max-width:46rem}
.founder-q blockquote{margin:0}
.founder-q p{font-family:var(--ff-d);font-variation-settings:'opsz' 60;font-weight:400;
  font-size:clamp(1.3rem,1.05rem + 1.05vw,1.85rem);line-height:1.38;letter-spacing:-.015em;
  color:var(--ink);text-indent:-.4em}
.founder-a{margin-top:1.5rem;font-size:.95rem;color:var(--ink-2);
  padding-top:1.25rem;border-top:1px solid var(--line)}
.founder-a span{color:var(--slate);font-size:.9rem}

/* =========================================================== faq === */
.faq{border-top:1px solid var(--line)}
.faq-in{display:grid;gap:clamp(1.5rem,3vw,3rem)}
@media(min-width:62rem){.faq-in{grid-template-columns:.28fr .72fr}}
.faq-h{font-family:var(--ff-d);font-variation-settings:'opsz' 40;font-weight:400;
  font-size:clamp(2rem,1.5rem + 1.6vw,3rem);letter-spacing:-.02em;color:var(--ink)}
/* the label rides alongside a long list rather than scrolling away */
@media(min-width:62rem){.faq-hd{position:sticky;top:6rem}}

.faq-i{border-top:1px solid var(--line)}
.faq-i:last-child{border-bottom:1px solid var(--line)}
.faq-i>summary{
  display:flex;align-items:flex-start;gap:1.25rem;justify-content:space-between;
  padding:1.15rem 0;cursor:pointer;list-style:none;
  font-weight:650;font-size:clamp(1rem,.97rem + .2vw,1.12rem);
  letter-spacing:-.015em;color:var(--ink);
}
.faq-i>summary::-webkit-details-marker{display:none}
.faq-i>summary:hover{color:var(--grn-dk)}
.faq-i>summary:focus-visible{outline:3px solid var(--grn-dk);outline-offset:2px}

/* a plus that becomes a minus */
.faq-x{position:relative;flex:none;width:1.15rem;height:1.15rem;margin-top:.15rem}
.faq-x::before,.faq-x::after{content:"";position:absolute;left:50%;top:50%;
  width:.95rem;height:2px;background:var(--grn);border-radius:2px;
  transform:translate(-50%,-50%);transition:transform .2s ease,opacity .2s ease}
.faq-x::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-i[open] .faq-x::after{transform:translate(-50%,-50%) rotate(0);opacity:0}

.faq-a{padding:0 0 1.4rem;max-width:44em}
.faq-a p{color:var(--ink-2);font-size:.995rem}
.faq-a p+p{margin-top:.85rem}

/* =================================================== get in touch === */
.capture{background:
  radial-gradient(45rem 26rem at 12% 0%,rgba(47,193,131,.2),transparent 62%),
  linear-gradient(160deg,var(--grn-deep),var(--grn-deep-2));color:#DCEDE4}
.capture-in{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media(min-width:62rem){.capture-in{grid-template-columns:1fr .85fr}}
.capture-p{font-size:clamp(1.35rem,1.1rem + 1.1vw,2rem);line-height:1.35;
  letter-spacing:-.02em;font-weight:600;color:#fff;max-width:18em;margin:0}
.capture-sub{margin:.85rem 0 0;font-size:1.02rem;line-height:1.55;max-width:26em}
.capture-r{background:#fff;color:var(--ink);border-radius:var(--r-lg);padding:1.85rem}

/* the address is the whole point of the card, so it is the biggest thing
   in it. It wraps rather than overflowing on a narrow phone. */
.capture-lead{margin:0;font-size:.74rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-2)}
.capture-mail{display:inline-block;margin-top:.55rem;font-weight:700;
  font-size:clamp(1.2rem,1rem + 1vw,1.65rem);letter-spacing:-.02em;
  color:var(--grn-dk);text-decoration:none;overflow-wrap:anywhere;
  border-bottom:2px solid rgba(18,167,106,.28);padding-bottom:.12rem}
.capture-mail:hover{border-bottom-color:var(--grn)}
.capture-mail:focus-visible{outline:3px solid var(--grn);outline-offset:3px;border-radius:4px}
.capture-note{margin:1rem 0 0;font-size:.88rem;color:var(--slate)}

/* an unmissable build placeholder. [NEEDS ISAAC] items are meant to be
   visible, not guessed at, and must not be mistaken for live copy */
.todo{margin:0 0 .35rem;background:repeating-linear-gradient(135deg,
    var(--alert-tint),var(--alert-tint) 9px,#F6E3DE 9px,#F6E3DE 18px);
  border:1.5px dashed var(--alert);border-radius:9px;padding:.7rem .85rem;
  font-size:.83rem;line-height:1.5;color:#6E2418}
.todo b{color:var(--alert)}
.todo a{color:#6E2418;font-weight:650;text-decoration:underline;text-underline-offset:2px}

/* ========================================================= footer == */
.foot{background:var(--ink);color:#9DB0BC;padding-block:clamp(3rem,5vw,4.5rem) 0}
.foot-in{display:grid;gap:2.25rem}
@media(min-width:52rem){.foot-in{grid-template-columns:1.4fr .8fr .8fr}}
.foot-brand p{margin-top:.85rem;font-size:.9rem;max-width:22em}
.wordmark-f{color:#fff;font-size:1.15rem}
/* No disc behind the mark down here either. The artwork carries its own pale
   green circle, so a disc only added a halo and washed out the edge; without
   it the footer wordmark is the logo exactly as the brand lock-up has it. */
.foot-nav{display:grid;gap:.1rem;align-content:start;justify-items:start}
.foot-nav h2{font-size:.74rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:#fff;margin-bottom:.4rem}
.foot-nav a{font-size:.92rem;text-decoration:none;padding-block:.55rem}
.foot-nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot-legal p{font-size:.85rem;margin-bottom:.6rem}
.foot-b{margin-top:clamp(2.5rem,4vw,3.5rem);padding-top:1.35rem;padding-bottom:1.75rem;
  border-top:1px solid rgba(255,255,255,.11);font-size:.8rem}
.foot-b p{margin:0}

/* =====================================================================
   THE PET OWNERS PAGE
   Same faces and colours, warmer ground, larger body text, no dark
   fields and no machine-styled type. Nothing here may look like a
   control an owner could use themselves.
   ===================================================================== */
body.owners{background:var(--paper);color:var(--ink);
  font-size:clamp(1.075rem,1rem + .3vw,1.2rem)}
/* scoped to .head. Unscoped, these repaint the footer wordmark dark
   ink on the dark footer and it disappears */
body.owners .head{background:rgba(247,251,250,.93);border-bottom-color:var(--paper-line)}
body.owners .head .wordmark{color:var(--ink)}
body.owners .sec{padding-block:clamp(3rem,6vw,5rem)}

.o-hero{padding-block:clamp(3rem,7vw,6rem) clamp(2.5rem,5vw,4rem);
  background:linear-gradient(180deg,#EAF4EF,var(--paper) 70%);
  border-bottom:1px solid var(--paper-line)}
.o-h1{max-width:20em}
.o-h1 .d-serif{font-size:clamp(1.95rem,1.35rem + 2.4vw,3.15rem)}
.o-h1 .d-sans{font-size:clamp(1.8rem,1.3rem + 2.1vw,2.8rem)}
.o-lead{margin-top:1.75rem;max-width:36em}
.o-lead p{font-size:clamp(1.1rem,1.02rem + .4vw,1.3rem);line-height:1.6;color:var(--ink-2)}

.o-wrap{max-width:52rem;margin-inline:auto}
.o-sec-tint{background:var(--paper-2);border-block:1px solid var(--paper-line)}
.o-h2{font-family:var(--ff-d);font-variation-settings:'opsz' 40;font-weight:600;
  font-size:clamp(1.55rem,1.25rem + 1.1vw,2.2rem);color:var(--paper-ink);
  margin-bottom:1.15rem;letter-spacing:-.015em}
.o-p{color:#3F3F39;max-width:36em;margin-bottom:1.15rem}

.o-qs{display:grid;gap:.15rem;margin:2rem 0}
.o-qs li{display:grid;grid-template-columns:auto 1fr;gap:1.15rem;align-items:start;
  padding:1.4rem 0;border-top:1px solid var(--paper-line)}
.o-qs li:last-child{border-bottom:1px solid var(--paper-line)}
.o-qs h3{font-family:var(--ff-d);font-variation-settings:'opsz' 24;font-weight:600;
  font-size:1.25rem;margin-bottom:.3rem;color:var(--paper-ink)}
.o-qs p{margin:0;color:var(--ink-2);font-size:1.02rem}
.o-qs .q-n{width:2rem;height:2rem;font-size:.9rem}

.o-nots{display:grid;gap:.15rem;margin-top:1.5rem;max-width:40em}
.o-nots li{padding:1.15rem 0;border-top:1px solid var(--paper-line);color:var(--ink-2)}
.o-nots li:last-child{border-bottom:1px solid var(--paper-line)}
.o-nots b{color:var(--paper-ink);font-weight:700}

.o-close{background:var(--mint-2);border-top:1px solid var(--mint-line)}
.o-close .o-p{color:#3F3F39}

/* ========================================================= scroll == */
/* Every rule in this block sits under `.js-motion`, the class the head
   script sets before first paint. No class, no rules: with JavaScript
   off, on a browser without IntersectionObserver, or for a reader who
   has asked for reduced motion, the page renders finished and at rest.
   That is also why nothing here is hidden by `display` or `visibility` —
   the content is always in the document, always found by search and by
   a screen reader, whatever the paint state.

   `.rv` is marked in the markup rather than assigned from script, so
   the stylesheet and landing.js cannot drift apart over which blocks
   move. */

.js-motion .rv{
  opacity:0;transform:translateY(14px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);
}
.js-motion .rv.is-in{opacity:1;transform:none}

/* the approval steps arrive in order, so 03 — the gate the whole page
   is arguing for — is the one that lands last and holds the eye */
.js-motion .steps .step{
  opacity:0;transform:translateY(16px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1);
}
.js-motion .steps.is-in .step{opacity:1;transform:none}
.js-motion .steps.is-in .step:nth-child(2){transition-delay:.13s}
.js-motion .steps.is-in .step:nth-child(3){transition-delay:.26s}

/* The deck of sheets fans open as it comes into view. It already
   spread on hover, which no one on a phone or a tablet could ever
   see; this is the same gesture, on the one event every visitor
   gets. Collapsed, the eight sheets sit squarely on top of one
   another — a stack — and open outwards from the middle pair. */
.js-motion .deck:not(.is-in) .s{transform:translateX(-50%) rotate(0) translateY(0)}
.js-motion .deck .s{transition-duration:.9s;transition-delay:var(--fan,0s)}
.js-motion .deck .s3,.js-motion .deck .s6{--fan:.05s}
.js-motion .deck .s2,.js-motion .deck .s7{--fan:.11s}
.js-motion .deck .s1,.js-motion .deck .s8{--fan:.17s}
/* the fan delays must not follow through to the hover, or the outer
   two sheets feel stuck to the pointer */
.js-motion .deck:hover .s1,.js-motion .deck:hover .s8{transition-delay:0s;transition-duration:.5s}

/* ---- the header, once you are past the top of the page ------------ */
.head-in{transition:padding .25s ease}
.head{transition:box-shadow .25s ease}
.head.is-scrolled .head-in{padding-block:.45rem}
.head.is-scrolled{box-shadow:0 14px 26px -26px rgba(6,60,40,.55)}

/* ---- which section you are in ------------------------------------- */
/* wayfinding, not decoration: this runs whether or not motion is on */
.nav a.is-here{color:var(--grn-dk);background:var(--mint-2);box-shadow:inset 0 -2px 0 var(--grn-lt)}

/* ========================================================= motion == */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .deck:hover .s1,.deck:hover .s8{transform:none}
  .deck .s1{transform:translateX(-50%) rotate(-21deg) translateY(1.5rem)}
  .deck .s8{transform:translateX(-50%) rotate(21deg) translateY(1.5rem)}
}

/* ============================================ the legal pages ===
   Privacy notice and Terms of use. One narrow column of readable
   prose - no grid, no reveals, nothing that needs JavaScript, so
   they still read correctly if anything else fails. */
body.legal{background:var(--white);color:var(--ink)}
.legal-main{max-width:44rem;margin-inline:auto;padding:clamp(2.5rem,5vw,4rem) var(--pad) clamp(3rem,6vw,5rem)}
.legal-h1{font-family:var(--ff-d);font-weight:600;letter-spacing:-.03em;line-height:1.1;
  font-size:clamp(2rem,1.5rem + 2vw,3rem);margin:0 0 1rem}
.legal-lede{font-size:clamp(1.05rem,1rem + .3vw,1.2rem);line-height:1.6;color:var(--ink-2);
  margin:0 0 1.1rem}
.legal-date{margin:0 0 2rem;font-size:.87rem;color:var(--slate)}
.legal-main h2{font-family:var(--ff-d);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.35rem,1.15rem + .7vw,1.7rem);line-height:1.25;
  margin:2.6rem 0 .8rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.legal-main h3{font-size:1.02rem;font-weight:700;letter-spacing:-.01em;margin:1.7rem 0 .5rem;
  color:var(--paper-ink)}
.legal-main p{margin:0 0 .95rem;line-height:1.65}
.legal-main a{color:var(--grn-dk);text-decoration:underline;text-underline-offset:2px}
.legal-main a:hover{color:var(--grn-btn-2)}
.legal-list{margin:0 0 .95rem;padding:0;list-style:none}
.legal-list li{position:relative;padding-left:1.35rem;margin-bottom:.65rem;line-height:1.65}
.legal-list li::before{content:"";position:absolute;left:0;top:.62em;width:.42rem;height:.42rem;
  border-radius:50%;background:var(--paper-accent)}
.legal-dl{margin:0 0 1.2rem;display:grid;gap:.1rem}
.legal-dl>div{display:grid;grid-template-columns:1fr;gap:.1rem;padding:.6rem 0;
  border-top:1px solid var(--line)}
@media(min-width:34rem){.legal-dl>div{grid-template-columns:11rem 1fr;gap:1rem;align-items:baseline}}
.legal-dl dt{font-weight:650;font-size:.9rem;color:var(--ink-2)}
.legal-dl dd{margin:0;line-height:1.55}
.legal-back{margin-top:2.5rem;padding-top:1.6rem;border-top:1px solid var(--line);font-weight:600}

/* the same unmissable placeholder as .todo, but sized to sit inside a
   sentence. Both are meant to be seen and never mistaken for live copy. */
.todo-inline{background:var(--alert-tint);border:1px dashed var(--alert);border-radius:5px;
  padding:.05em .35em;color:#6E2418;font-weight:600;font-size:.92em}
.legal-main .todo{margin:0 0 2rem}

/* the company details the law requires in the footer */
.foot-co{margin-top:.85rem;font-size:.78rem;line-height:1.6;color:#7C8D99}
.foot-co a{color:#7C8D99}