/* Liquid glass on white, in the language of recent Apple OS releases.
 *
 * ICP: a cat owner arriving from a DM on a phone, mid-scroll, who wants an
 * answer in seconds. So: big tap targets, short lines, and nothing that has to
 * be read twice. The glass is there to make a white page feel like a surface
 * rather than a document - not to decorate.
 *
 * Glass only reads if there is something behind it, which is why the soft
 * colour washes exist. On a flat white ground a translucent panel is invisible.
 */
:root{
  --bg:#FFFFFF;
  --ink:#1D1D1F;          /* Apple's near-black, not pure #000 */
  --ink-2:#56565A;
  --ink-3:#8A8A8E;
  --accent:#C2506A;
  --accent-2:#6E8BD6;
  --hair:rgba(0,0,0,.08);
  --glass:rgba(255,255,255,.62);
  --glass-line:rgba(255,255,255,.85);
  --shadow:0 1px 1px rgba(0,0,0,.03), 0 8px 24px -12px rgba(0,0,0,.18);
  --r:22px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:17px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  letter-spacing:-.011em;-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden;
}
/* the wash that gives the glass something to refract */
body::before{
  content:"";position:fixed;inset:-20vh -10vw;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46vw 40vw at 12% 4%, rgba(194,80,106,.16), transparent 62%),
    radial-gradient(42vw 38vw at 88% 18%, rgba(110,139,214,.15), transparent 60%),
    radial-gradient(50vw 44vw at 50% 92%, rgba(120,190,175,.13), transparent 64%);
}
a{color:inherit;text-decoration:none}

.glass{
  background:var(--glass);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border:1px solid var(--glass-line);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.7);
  border-radius:var(--r);
}

.top{
  position:sticky;top:0;z-index:9;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:12px 18px;margin:10px;border-radius:18px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
  border:1px solid var(--glass-line);box-shadow:var(--shadow);
}
.mark{font-size:18px;font-weight:600;letter-spacing:-.02em}
nav{display:flex;align-items:center;gap:16px}
nav a{font-size:15px;color:var(--ink-2)}
nav a.chan{color:var(--accent);font-weight:500}

main{max-width:720px;margin:0 auto;padding:0 18px}
.hero{padding:38px 4px 6px}
h1{font-size:clamp(32px,8vw,46px);line-height:1.06;letter-spacing:-.035em;font-weight:650;margin:0 0 12px;text-wrap:balance}
.lede{font-size:18px;line-height:1.45;color:var(--ink-2);margin:0 0 10px;max-width:34ch}

.cats{display:grid;gap:14px;padding:26px 0 8px}
.cat{display:block;padding:22px}
.cat h2{font-size:21px;font-weight:600;letter-spacing:-.02em;margin:0 0 6px}
.cat p{margin:0 0 12px;color:var(--ink-2);font-size:16px;line-height:1.42;max-width:32ch}
.go{color:var(--accent);font-size:16px;font-weight:500}

.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0 6px;padding:2px}
.cmp{border-collapse:separate;border-spacing:0;width:100%;min-width:500px;font-size:15px;
  background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
  border:1px solid var(--glass-line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.cmp th,.cmp td{text-align:left;padding:13px 15px;border-bottom:1px solid var(--hair)}
.cmp thead th{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp td b{display:block;margin-top:4px;font-weight:600}
.cmp .price{color:var(--ink-3);white-space:nowrap}

.grid{display:grid;gap:14px;padding:22px 0 6px}
.p{padding:22px}
.band{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.pill{background:rgba(194,80,106,.12);color:var(--accent);font-size:11.5px;font-weight:650;
  letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:99px}
.price{color:var(--ink-3);font-size:14px}
.p h3{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0 0 8px}
.p p{margin:0 0 10px;color:var(--ink-2);font-size:16px;line-height:1.42}
.bestfor,.verdict{color:var(--ink)!important}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;
  font-size:16px;font-weight:550;padding:14px 24px;border-radius:99px;min-height:48px;
  box-shadow:0 6px 16px -8px rgba(194,80,106,.9);transition:transform .12s ease,filter .12s ease}
.btn:active{transform:scale(.98);filter:brightness(.95)}
.back{padding:6px 4px 0;font-size:16px;color:var(--accent)}

footer{max-width:720px;margin:36px auto 20px;padding:20px 22px;border-radius:var(--r);
  background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--glass-line)}
.disc{font-size:14px;line-height:1.45;color:var(--ink-2);margin:0 0 10px}
.small{font-size:13px;color:var(--ink-3);margin:0}
@media (max-width:520px){ main{padding:0 14px} footer{margin:28px 14px 16px} }

/* Provenance labels. Shown on every product because the household behind the
   site is its only real advantage, and that is worth nothing if a reader
   cannot tell which entries are first-hand. */
.tag{font-size:11.5px;font-weight:650;letter-spacing:.04em;padding:4px 10px;border-radius:99px;white-space:nowrap}
.s-own{background:rgba(52,140,100,.14);color:#2C7A56}
.s-ret{background:rgba(200,120,30,.15);color:#96601A}
.s-res{background:rgba(0,0,0,.06);color:var(--ink-2)}
.cmp td .tag{display:inline-block;margin-bottom:2px}

/* ---------------------------------------------------------------- portraits
 *
 * A sales page, not a document, so it earns its own rules. The order is the
 * argument: headline, then PROOF, then how it works, then the rest. A visitor
 * who does not believe the likeness will not read anything else, so the
 * before/after sits above everything except the promise itself.
 *
 * Same ICP as the rest of the site - a phone, mid-scroll, arriving from a
 * Short - so the CTA is thumb-sized and repeated at both ends.
 */
.por-hero{text-align:center}
.por-hero .lede{max-width:34ch;margin-left:auto;margin-right:auto}
.btn-lg{font-size:17px;padding:16px 30px;min-height:54px;margin-top:6px}
.micro{font-size:13.5px;color:var(--ink-3);margin:12px 0 0;line-height:1.45}
.micro a{color:var(--accent)}

/* The proof. Two images, same height, side by side even on a phone - the
   comparison IS the content, and stacking them breaks it. */
.proof{margin:26px 0 6px}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.ba figure{margin:0}
.ba img{width:100%;height:auto;border-radius:16px;display:block;
  box-shadow:0 1px 1px rgba(0,0,0,.04), 0 14px 30px -18px rgba(0,0,0,.4)}
.ba figcaption{font-size:13px;color:var(--ink-3);margin-top:8px;text-align:center}
.ba-line{text-align:center;font-size:17px;font-weight:550;color:var(--ink);margin:16px 0 0}

.steps{display:grid;gap:12px;margin:30px 0 6px}
.step{padding:18px 20px;border-radius:var(--r);background:var(--glass);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--glass-line);box-shadow:var(--shadow)}
.step .n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:99px;
  background:var(--accent);color:#fff;font-size:14px;font-weight:650;margin-bottom:8px}
.step h3{font-size:17px;font-weight:600;letter-spacing:-.01em;margin:0 0 4px}
.step p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.45}

.gal{margin:34px 0 6px}
.gal h2{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:0 0 14px}
.gal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gc{margin:0}
.gc img{width:100%;height:auto;border-radius:16px;display:block;
  box-shadow:0 1px 1px rgba(0,0,0,.04), 0 14px 30px -18px rgba(0,0,0,.4)}
.gc figcaption{font-size:14px;color:var(--ink-2);margin-top:8px;line-height:1.4}
.gc b{color:var(--ink);font-weight:600}

/* Objections, closed by default. Someone who already believes should not have
   to scroll past four answers to reach the button. */
.faq{margin:32px 0 6px;display:grid;gap:8px}
.faq details{padding:14px 18px;border-radius:16px;background:var(--glass);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--glass-line)}
.faq summary{cursor:pointer;font-size:16px;font-weight:550;color:var(--ink);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--ink-3);font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:10px 0 0;color:var(--ink-2);font-size:15.5px;line-height:1.5}

.por-close{text-align:center;margin-top:34px}
.por-close h2{font-size:23px;font-weight:600;letter-spacing:-.02em;margin:0 0 14px}

@media (min-width:640px){
  .steps{grid-template-columns:repeat(3,1fr)}
  .gal-grid{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion:reduce){ .btn{transition:none} }

/* The wordmark wrapped to two lines at 375px, which pushed the nav down and
   made the header look broken on the exact device most of this traffic uses. */
.mark{white-space:nowrap}
/* Nav links never wrap mid-label. Adding a fourth item (Reels) pushed "Watch
   the cats" onto THREE lines at 375px and made the header look broken again,
   which is the same failure the note above records - one item wider and it
   came straight back. */
.top nav a{white-space:nowrap}
@media (max-width:400px){
  .mark{font-size:17px}
  .top nav{gap:12px}
  .top nav a{font-size:15px}
  /* The channel link is the one that can go: every page already carries
     "Watch the cats on YouTube" in its body copy, so nothing is lost, and
     four items simply do not fit beside the wordmark on a phone. */
  .top nav a.chan{display:none}
}

/* The reel is portrait 9:16, so at full width it is 640px tall on a phone and
   pushes the price and the steps entirely below the fold. Capped by HEIGHT
   rather than width so it behaves the same on any screen. */
.reel-proof{max-height:56vh;width:auto;max-width:100%;border-radius:14px;display:block;margin:0 auto}

/* Photographs of our own cats, because they are the only images on this site
   we are allowed to use and the only ones nobody else has. Amazon product
   imagery is licensed through the Product Advertising API, which needs
   qualifying sales first - a stock shot would be the one thing here that is
   not ours. */
.hero-img{width:100%;height:auto;display:block;border-radius:var(--r);margin:0 0 18px;
  box-shadow:0 1px 1px rgba(0,0,0,.04), 0 18px 40px -24px rgba(0,0,0,.45)}
.home-hero{padding-top:8px}
.home-hero h1{margin-top:2px}
@media (min-width:700px){
  .hero-img{max-height:420px;object-fit:cover;object-position:center 42%}
}

/* The gear now sits under the video offer rather than beside it, so it needs a
   heading of its own: without one the category cards read as a continuation of
   the pitch rather than a separate, browsable thing. */
.gear-intro { max-width: 62ch; margin: 3.5rem auto 1.25rem; padding: 0 1.25rem; text-align: center; }
.gear-intro h2 { font-size: 1.35rem; margin: 0 0 .4rem; }
.gear-intro p { margin: 0; color: #5b5651; line-height: 1.55; }
.home-hero .reel-proof { margin: 0 auto 1.25rem; display: block; border-radius: 14px; }
@media (prefers-color-scheme: dark) { .gear-intro p { color: #b6b1aa; } }

/* The other categories, at the foot of each category page.
   Chips rather than a list: it is a lane to somewhere else, not part of the
   article, and it has to stay scannable at 375px without becoming five
   full-width rows. */

/* display:block is not decoration. A bare `nav{display:flex}` at the top of
   this file was catching this element too, laying the heading and the chips
   out as two columns. */
.cross { display: block; max-width: 68ch; margin: 3rem auto 1rem; padding: 0 1.25rem; }
.cross h2 { font-size: 1rem; margin: 0 0 .75rem; color: var(--ink-2); font-weight: 600; }
.cross ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }

/* --glass and --glass-line are white on white: correct over a photograph,
   invisible here. These need an edge that can actually be seen. */
.cross a, .cross span {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .5rem .95rem; border-radius: 999px;
  font-size: .92rem; line-height: 1.2; text-decoration: none;
  border: 1px solid rgba(23,36,26,.14); background: rgba(23,36,26,.035);
}
.cross a { color: var(--ink); font-size: .92rem; }
.cross a:hover { border-color: rgba(23,36,26,.34); background: rgba(23,36,26,.07); }
.cross span { color: var(--ink-3); background: none; border-style: dashed; }