/* ═══════════════════════════════════════════════════════════════
   Rasa Paws — area stylesheet (extracted verbatim from the
   dog-recipes.html inline <style>, 2026-07-22 page split).
   Shared by: rasa-paws.html · paws-ingredients.html ·
   paws-safety.html · dog-recipes.html
   ═══════════════════════════════════════════════════════════════ */
/* Paws pages use their OWN .paws-nav (a fixed 64px bar, see below), not the
   shared .nav — so the site-wide --nav-h token is re-pointed here to the real
   height for these four pages. Everything that offsets below the nav reads
   var(--nav-offset) and stays correct automatically. */
:root { --area-rgb: 212, 121, 26; --nav-h: 64px; }

/* Page split (2026-07-22): Science + Safety open directly with their first
   section (no hero to absorb the fixed nav). Push whichever section
   leads the page clear of the nav so its top isn't sliced. The hub opens
   with a full-height hero, so the adjacent-sibling selector leaves it alone. */
.paws-nav + span + .paws-science,
.paws-nav + span + .paws-safety { padding-top: calc(var(--nav-offset) + var(--space-md)); }

      /* ══════════════════════════════════════════════════
           RASA PAWS — DESIGN TOKENS
        ══════════════════════════════════════════════════ */
      :root {
        --paws-amber: #d4791a;
        --paws-gold: #e8a84c;
        --paws-copper: #b85c20;
        --paws-warm: #f2c97e;
        --paws-earth: #8b6340;
        --paws-sand: #edd9b8;
      }

      /* ══════════════════════════════════════════════════
           RASA PAWS — DEDICATED NAV
        ══════════════════════════════════════════════════ */
      .paws-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 200;
        /* 3-zone grid: brand | section links (true center) | actions —
           mirrors the Little Rasas nav fix. */
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        padding: 0 clamp(1.25rem, 4vw, 3.5rem);
        height: 64px;
        /* Glass lives on ::before, NEVER on the nav itself — backdrop-filter
           here makes the nav the containing block for its fixed drawer,
           caging the full-screen overlay inside the 64px bar. */
        border-bottom: 1px solid rgba(212, 121, 26, 0.1);
        transition:
          background 0.4s,
          border-color 0.4s;
        /* Sub-brand theme for the shared auth widget (login pill /
           account menu read the science-rgb token family). */
        --color-science-rgb: 212, 121, 26;
        --color-science: #d4791a;
        --color-accent: #d4791a;
        --color-accent-light: #e8a84a;
      }
      .paws-nav::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: rgba(8, 12, 20, 0.65);
        -webkit-backdrop-filter: blur(28px);
        backdrop-filter: blur(28px);
      }
      /* Explicit column pins — the links panel leaves the flow on mobile
         (fixed overlay) and auto-placement would slide the right cluster
         into the empty middle column. */
      .paws-nav__brand { grid-column: 1; justify-self: start; }
      .paws-nav__links { grid-column: 2; }
      .paws-nav__right {
        grid-column: 3;
        justify-self: end;
        display: flex;
        align-items: center;
        gap: 0.8rem;
      }
      .paws-nav__brand-sub { white-space: nowrap; }
      /* Size the injected login pill to sit flush with the rasa pill */
      .paws-nav .nav__login-pill {
        padding: 7px 15px;
        font-size: 0.55rem;
      }
      .paws-nav.scrolled {
        background: rgba(8, 12, 20, 0.92);
        border-color: rgba(212, 121, 26, 0.18);
      }

      /* Left: brand */
      .paws-nav__brand {
        display: flex;
        flex-direction: column;
        gap: 1px;
        text-decoration: none;
        flex-shrink: 0;
      }
      .paws-nav__brand-name {
        font-family: "Cormorant Garamond", serif;
        font-size: 1.45rem;
        font-weight: 500;
        font-style: normal;
        line-height: 1;
        background: linear-gradient(
          135deg,
          var(--paws-amber) 0%,
          var(--paws-warm) 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      .paws-nav__brand-sub {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.42rem;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: rgba(212, 121, 26, 0.45);
      }

      /* Center: section links */
      .paws-nav__links {
        display: flex;
        align-items: center;
        gap: clamp(1.2rem, 3vw, 2.5rem);
      }
      .paws-nav__link {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.55rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.38);
        text-decoration: none;
        transition: color 0.3s;
        position: relative;
        padding-bottom: 2px;
      }
      .paws-nav__link::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        right: 0;
        height: 1px;
        background: var(--paws-amber);
        transform: scaleX(0);
        transition: transform 0.3s ease;
      }
      .paws-nav__link:hover {
        color: rgba(255, 255, 255, 0.75);
      }
      .paws-nav__link:hover::after,
      .paws-nav__link.active::after {
        transform: scaleX(1);
      }
      .paws-nav__link.active {
        color: var(--paws-gold);
      }

      /* Right: parent back-link */
      .paws-nav__back {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 6px 14px 6px 10px;
        border-radius: 100px;
        border: 1px solid rgba(212, 121, 26, 0.28);
        background: rgba(212, 121, 26, 0.07);
        font-family: "JetBrains Mono", monospace;
        font-size: 0.5rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(212, 121, 26, 0.65);
        text-decoration: none;
        transition:
          color 0.3s,
          background 0.3s,
          border-color 0.3s,
          box-shadow 0.3s;
        flex-shrink: 0;
      }
      .paws-nav__back:hover {
        color: var(--paws-gold);
        background: rgba(212, 121, 26, 0.13);
        border-color: rgba(212, 121, 26, 0.55);
        box-shadow: 0 0 16px rgba(212, 121, 26, 0.12);
      }
      /* The word "rasa" inside uses the serif italic brand font */
      .paws-nav__back .paws-nav__back-brand {
        font-family: "Cormorant Garamond", serif;
        font-size: 0.85rem;
        font-weight: 500;
        font-style: normal;
        letter-spacing: 0.18em;
        text-transform: none;
        line-height: 1;
        /* Locked wordmark: white-cream letters, first "a" saffron (via .ac) */
        color: var(--color-blush, #F2DDD0);
      }
      .paws-nav__back svg {
        flex-shrink: 0;
        opacity: 0.7;
      }

      /* Hamburger (mobile) */
      .paws-nav__hamburger {
        display: none;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
        z-index: 201;
      }
      .paws-nav__hamburger span {
        display: block;
        width: 22px;
        height: 1.5px;
        background: rgba(212, 121, 26, 0.7);
        transition: all 0.3s;
      }
      .paws-nav__hamburger.open span:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg);
      }
      .paws-nav__hamburger.open span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
      }
      .paws-nav__hamburger.open span:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg);
      }

      @media (max-width: 768px) {
        /* 44px = Apple HIG comfortable-tap minimum. This measured 23px — the
           menu button for the whole Rasa Paws area (2026-08-06). Only the hit
           box grows; the bars inside are unchanged. */
        .paws-nav__hamburger {
          display: flex;
          align-items: center;
          justify-content: center;
          min-width: 44px;
          min-height: 44px;
        }
        .paws-nav__brand,
        .paws-nav__right .nav__login-pill {
          min-height: 44px;
          display: inline-flex;
          align-items: center;
        }
        /* .nav__user carries a 137px min-width reservation (a desktop
           anti-layout-shift measure) that ate the right column and pushed
           the hamburger off-screen on Little Rasas — same 3-zone grid here,
           so the same guard applies. The auth pill can shrink; the menu
           button cannot. */
        .paws-nav__right { min-width: 0; }
        .paws-nav__right .nav__user {
          min-width: 0;
          flex-shrink: 1;
          /* NO overflow:hidden here — the account popup is an absolutely-
             positioned child anchored inside this box; clipping it beheads
             the open menu (DOM says open, nothing paints). The column-eating
             this guarded against is already handled by min-width:0. */
        }
        .paws-nav__hamburger {
          flex-shrink: 0;
          /* Stays tappable ABOVE the open drawer — it IS the close control. */
          position: relative;
          z-index: 230;
        }
        .paws-nav__back {
          display: none;
        }

        /* ── Full-screen mobile menu overlay ── */
        .paws-nav__links {
          /* Hidden by default */
          display: flex;
          flex-direction: column;
          position: fixed;
          inset: 0;
          /* Above everything including nav bar */
          z-index: 210;
          /* Dark amber-tinted sanctuary */
          background: #0a0a09;
          background-image:
            radial-gradient(
              ellipse 70% 45% at 5% 15%,
              rgba(212, 121, 26, 0.11) 0%,
              transparent 65%
            ),
            radial-gradient(
              ellipse 50% 60% at 95% 85%,
              rgba(184, 92, 32, 0.07) 0%,
              transparent 65%
            );
          /* Slide in from right when closed */
          transform: translateX(100%);
          transition: transform 0.45s cubic-bezier(0.77, 0, 0.175, 1);
          /* Start from top — let content flow naturally */
          padding: 80px 2.5rem 3rem;
          align-items: flex-start;
          justify-content: flex-start;
          gap: 0;
          overflow-y: auto;
        }
        .paws-nav__links.open {
          transform: translateX(0);
        }

        /* Brand header inside menu */
        .paws-nav__links::before {
          content: "Rasa Paws";
          display: block;
          font-family: "Cormorant Garamond", serif;
          font-size: 1.2rem;
          font-weight: 500;
          font-style: italic;
          background: linear-gradient(135deg, #d4791a 0%, #f2c97e 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          position: absolute;
          top: 1.5rem;
          left: 2.5rem;
        }

        /* Each nav link — large editorial style */
        .paws-nav__link {
          display: block;
          width: 100%;
          font-family: "Cormorant Garamond", serif !important;
          font-size: clamp(2rem, 8vw, 2.8rem) !important;
          font-weight: 400;
          font-style: italic;
          letter-spacing: 0.01em !important;
          text-transform: none !important;
          color: rgba(255, 255, 255, 0.7) !important;
          text-decoration: none;
          padding: 0.75rem 0;
          border-bottom: 1px solid rgba(212, 121, 26, 0.08);
          transition:
            color 0.3s,
            transform 0.3s;
          position: relative;
        }
        .paws-nav__link:first-child {
          border-top: 1px solid rgba(212, 121, 26, 0.08);
        }
        .paws-nav__link::after {
          /* Amber accent dot on the left */
          content: "";
          position: absolute;
          left: -1.2rem;
          top: 50%;
          transform: translateY(-50%) scaleY(0);
          width: 3px;
          height: 60%;
          background: linear-gradient(
            to bottom,
            var(--paws-amber),
            var(--paws-warm)
          );
          border-radius: 2px;
          transition: transform 0.3s ease;
        }
        .paws-nav__link:hover,
        .paws-nav__link.active {
          color: var(--paws-gold) !important;
          transform: translateX(6px);
        }
        .paws-nav__link:hover::after,
        .paws-nav__link.active::after {
          transform: translateY(-50%) scaleY(1);
        }

        /* Deep Dives — monospace style to stand out */
        .paws-nav__links a[href*="turmeric"] {
          font-family: "JetBrains Mono", monospace !important;
          font-size: 0.72rem !important;
          font-style: normal !important;
          letter-spacing: 0.2em !important;
          text-transform: uppercase !important;
          color: rgba(212, 121, 26, 0.55) !important;
          padding: 1.2rem 0 0.5rem;
          border-bottom: none !important;
        }
      }

      /* ══════════════════════════════════════════════════
           PAWS FOOTER
        ══════════════════════════════════════════════════ */
      .paws-footer {
        padding: 5rem clamp(1.5rem, 5vw, 6rem) 3rem;
        background: var(--color-bg);
        border-top: 1px solid rgba(212, 121, 26, 0.1);
        position: relative;
        overflow: hidden;
      }
      .paws-footer::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 400px;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(212, 121, 26, 0.3),
          transparent
        );
      }
      .paws-footer__inner {
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 3rem;
        margin-bottom: 4rem;
      }
      .paws-footer__brand-col .paws-footer__brand {
        font-family: "Cormorant Garamond", serif;
        font-size: 2rem;
        font-weight: 500;
        font-style: normal;
        background: linear-gradient(
          135deg,
          var(--paws-amber) 0%,
          var(--paws-warm) 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: block;
        margin-bottom: 0.4rem;
      }
      .paws-footer__brand-tagline {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.52rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(212, 121, 26, 0.38);
        line-height: 1.8;
      }
      .paws-footer__brand-desc {
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.28);
        line-height: 1.75;
        margin-top: 1rem;
      }
      .paws-footer__col-title {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.5rem;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        color: rgba(212, 121, 26, 0.5);
        margin-bottom: 1.2rem;
      }
      /* Contained nav panel (2026-08-07). Was bare stacked links floating on
         the page background with no container, beside a fully-bordered Vet
         Guidance note — the two columns read as different quality tiers.
         Reuses the EXACT .paws-footer__vet-note treatment (same border colour,
         same 5% amber wash, same 10px radius) so the footer row is one system.
         Padding is trimmed to 0.5rem vertically because rows carry their own. */
      .paws-footer__links {
        display: grid;
        /* Two columns on desktop: nine links in one column made a 324px tower
           against the 148px Vet Guidance note beside it — mismatched weight,
           and the tall thin shape read as a dropdown stuck open. Collapses to
           one column on phones (media query below). */
        grid-template-columns: 1fr 1fr;
        column-gap: 0.25rem;
        background: rgba(212, 121, 26, 0.05);
        border: 1px solid rgba(212, 121, 26, 0.12);
        border-radius: 10px;
        padding: 0.5rem;
      }
      .paws-footer__link {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.55rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.28);
        text-decoration: none;
        /* 44px min target: these are real tap targets on phones. */
        display: flex;
        align-items: center;
        min-height: 34px;
        padding: 0 0.75rem;
        border-radius: 6px;
        transition: color 0.3s, background 0.3s;
      }
      /* Hairline between rows, not around them — the panel already has the
         border, so rows only need separating. nth-child(n+3) skips BOTH items
         on the first grid row (a 2-col grid puts items 1 and 2 side by side,
         so a plain "+ sibling" rule would draw a line above item 2, which is
         at the top of its own column). */
      .paws-footer__link:nth-child(n + 3) {
        box-shadow: inset 0 1px 0 rgba(212, 121, 26, 0.08);
      }
      .paws-footer__link:hover,
      .paws-footer__link:focus-visible {
        color: var(--paws-gold);
        background: rgba(212, 121, 26, 0.08);
      }
      .paws-footer__link:focus-visible {
        outline: 1px solid rgba(212, 121, 26, 0.55);
        outline-offset: -1px;
      }
      .paws-footer__vet-note {
        background: rgba(212, 121, 26, 0.05);
        border: 1px solid rgba(212, 121, 26, 0.12);
        border-radius: 10px;
        padding: 1rem 1.25rem;
        font-size: 0.7rem;
        color: rgba(212, 121, 26, 0.5);
        line-height: 1.7;
      }
      .paws-footer__bottom {
        max-width: 1100px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 2rem;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        flex-wrap: wrap;
        gap: 1rem;
      }
      .paws-footer__copy {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.48rem;
        letter-spacing: 0.12em;
        color: rgba(255, 255, 255, 0.14);
      }
      .paws-footer__parent {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.48rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.18);
        transition: color 0.3s;
      }
      .paws-footer__parent:hover {
        color: rgba(255, 255, 255, 0.45);
      }
      .paws-footer__parent-brand {
        font-family: "Cormorant Garamond", serif;
        font-style: normal;
        /* FOUNDER-LOCKED wordmark (2026-07-14): lowercase "r a s a", upright,
           weight 500, first "a" saffron via .ac. The parent link sets
           text-transform:uppercase for its own mono label ("PART OF THE …
           FAMILY") and that INHERITED into the wordmark, rendering it as a
           bold serif "RASA" — a direct violation. Both the transform and the
           weight must be re-stated here; inheriting either is the bug. */
        text-transform: none;
        font-weight: 500;
        font-size: 1rem;
        letter-spacing: 0.18em;
        color: var(--color-blush, #F2DDD0);
      }
      @media (max-width: 768px) {
        .paws-footer__inner {
          grid-template-columns: 1fr;
          gap: 2rem;
        }
        .paws-footer__bottom {
          flex-direction: column;
          align-items: flex-start;
        }
        /* One column on phones — two columns of mono caps don't fit at 320px. */
        .paws-footer__links {
          grid-template-columns: 1fr;
        }
        /* Footer links are real tap targets on a phone — 44px floor. */
        .paws-footer__link {
          min-height: 44px;
        }
        /* Single column: every row after the first gets the hairline. */
        .paws-footer__link:nth-child(n + 2) {
          box-shadow: inset 0 1px 0 rgba(212, 121, 26, 0.08);
        }
      }

      /* ══════════════════════════════════════════════════
           HERO
        ══════════════════════════════════════════════════ */
      .paws-hero {
        position: relative;
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        /* Bottom padding keeps the content stack clear of the absolutely-positioned
           scroll indicator (bottom:2.5rem + a 50px line), now that the scope line
           closes the stack. */
        padding: 6rem 1.5rem 8rem;
      }

      .paws-hero__bg {
        position: absolute;
        inset: 0;
        background-image: url("../Images/dog-recipes-hero.png");
        background-size: cover;
        background-position: center 35%;
        filter: brightness(0.46) saturate(0.9);
        transform: scale(1.04);
        transition: transform 20s ease-out;
      }
      .paws-hero__bg.loaded {
        transform: scale(1);
      }
      /* Readability scrim: darkens center + bottom so hero copy stays crisp
         while the golden-retriever photo reads clearly around it. */
      .paws-hero__bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            ellipse 70% 55% at 50% 45%,
            rgba(8, 12, 20, 0.55) 0%,
            rgba(8, 12, 20, 0.2) 55%,
            transparent 80%
          ),
          linear-gradient(
            to bottom,
            rgba(8, 12, 20, 0.35) 0%,
            transparent 30%,
            transparent 65%,
            rgba(8, 12, 20, 0.75) 100%
          );
      }

      .paws-hero__ambient {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        filter: blur(90px);
      }
      .paws-hero__ambient--top {
        top: -60px;
        left: 50%;
        transform: translateX(-50%);
        width: 700px;
        height: 320px;
        background: radial-gradient(
          ellipse,
          rgba(212, 121, 26, 0.16) 0%,
          transparent 70%
        );
      }
      .paws-hero__ambient--btm {
        bottom: -80px;
        right: -60px;
        width: 600px;
        height: 350px;
        background: radial-gradient(
          ellipse,
          rgba(184, 92, 32, 0.1) 0%,
          transparent 70%
        );
      }

      .paws-hero__inner {
        position: relative;
        z-index: 2;
        text-align: center;
        max-width: 780px;
        /* Vertical position is DERIVED, not eyeballed. The background is a
           square 1024px photo drawn `cover` at `50% 35%`; projecting the dog's
           eye row (yFrac 0.299 of the source) through that transform puts the
           eyes at y≈242px on a 900px-tall desktop hero.

           The previous 3.5rem still left the title's PAINTED ink starting at
           y≈204 — i.e. the "R" of Rasa was drawn straight across the eyes, so
           the clearance this offset exists to create was never actually being
           achieved.

           This is a clamp, not a fixed value, because the eye row MOVES with
           the viewport: `cover` on a square photo means a shorter/wider hero
           scales the image up and pushes the eyes further down the box. A
           single rem offset that clears the eyes at 1440 still crosses them at
           1280. The inverse-vw term (larger offset on narrower desktops, where
           the deficit peaks at ~43px) holds ≥26px of clear air from 900px to
           1920px wide. Measured with Range bounds — the painted ink, not the
           line box: Cormorant's cap overshoot puts real ink ~8px above the
           element's top edge.

           Net effect: stack centre lands ~56–59% of the hero — a deliberate
           below-centre bias, since the subject of the photograph owns the
           upper third. */
        margin-top: clamp(7.5rem, 24rem - 12vw, 12.25rem);
      }

      /* Scope line — the old amber pill, relocated below the stats so the hero
         art (the dog's eyes) stays unobstructed. No pill chrome here: at the
         BOTTOM of the stack a bordered badge would out-shout the stats it
         follows. It is deliberately SMALLER and dimmer than .paws-hero__stat-lbl
         (0.5rem vs 0.52rem, 0.62 vs 0.28 alpha) so the two mono-caps rows read as
         label-then-caption, not as two competing rows of the same rank. */
      .paws-hero__scope {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        margin: 2.75rem auto 0;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.5rem;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        /* 5.6:1 on the hero scrim — dimmer than the stat numbers but well clear
           of the AA floor for this size. */
        color: rgba(242, 221, 208, 0.62);
      }
      .paws-hero__scope-dot {
        display: block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--paws-gold);
        flex: 0 0 auto;
        animation: pulse-amber 2.5s infinite;
      }
      @keyframes pulse-amber {
        0%,
        100% {
          opacity: 0.45;
          transform: scale(1);
        }
        50% {
          opacity: 1;
          transform: scale(1.35);
        }
      }

      /* Creed — the hero's thesis line, sitting on the rule above the stats.
         Deliberately NOT mono/uppercase: the badge above owns the eyebrow rank,
         the stat labels below own the mono-label rank. This is the only serif
         voice between them, so it reads as a third distinct role, not a repeat. */
      .paws-hero__creed {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(0.85rem, 3vw, 1.5rem);
        margin: 0 auto 1.75rem;
        max-width: 620px;
      }
      .paws-hero__creed-rule {
        flex: 1 1 0;
        height: 1px;
        min-width: 24px;
        background: linear-gradient(
          to right,
          transparent,
          rgba(212, 121, 26, 0.42)
        );
      }
      .paws-hero__creed-rule:last-child {
        background: linear-gradient(
          to left,
          transparent,
          rgba(212, 121, 26, 0.42)
        );
      }
      .paws-hero__creed-text {
        flex: 0 0 auto;
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(0.95rem, 2.2vw, 1.15rem);
        font-style: italic;
        font-weight: 400;
        letter-spacing: 0.01em;
        /* 6.4:1 on the hero scrim — the old 0.5-alpha amber measured ~2.2:1 */
        color: rgba(242, 221, 208, 0.86);
        line-height: 1.3;
        white-space: nowrap;
      }

      .paws-hero__title {
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(2.8rem, 8vw, 5.8rem);
        font-weight: 300;
        line-height: 1.05;
        letter-spacing: -0.01em;
        color: var(--color-text-primary);
        margin: 0 0 1.5rem;
      }
      .paws-hero__title em {
        font-style: italic;
        font-weight: 500;
        background: linear-gradient(
          135deg,
          var(--paws-amber) 0%,
          var(--paws-warm) 60%,
          var(--paws-gold) 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .paws-hero__subtitle {
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(1rem, 2.5vw, 1.25rem);
        font-weight: 300;
        font-style: italic;
        color: rgba(242, 221, 208, 0.52);
        line-height: 1.8;
        margin-bottom: 3rem;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
      }

      .paws-hero__stats {
        display: flex;
        justify-content: center;
        gap: clamp(2rem, 6vw, 5rem);
        flex-wrap: wrap;
      }
      .paws-hero__stat {
        text-align: center;
      }
      .paws-hero__stat-num {
        font-family: "Cormorant Garamond", serif;
        font-size: 2.2rem;
        font-weight: 500;
        color: var(--paws-gold);
        line-height: 1;
        display: block;
        /* Cormorant defaults to OLD-STYLE figures: "1" renders as a short I and
           "0" drops below the baseline like an o (visible mid-count as "2 / I / oK").
           Same fix already used in css/recipe.css. */
        font-variant-numeric: tabular-nums lining-nums;
      }
      .paws-hero__stat-lbl {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.52rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.28);
        margin-top: 4px;
        display: block;
      }

      .paws-hero__scroll {
        position: absolute;
        bottom: 2.5rem;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        z-index: 3;
      }
      .paws-hero__scroll-line {
        width: 1px;
        height: 50px;
        background: linear-gradient(
          to bottom,
          rgba(212, 121, 26, 0.55),
          transparent
        );
        animation: scroll-line-amber 2.5s ease-in-out infinite;
      }
      @keyframes scroll-line-amber {
        0% {
          transform: scaleY(0);
          transform-origin: top;
          opacity: 0;
        }
        50% {
          transform: scaleY(1);
          transform-origin: top;
          opacity: 1;
        }
        51% {
          transform: scaleY(1);
          transform-origin: bottom;
          opacity: 1;
        }
        100% {
          transform: scaleY(0);
          transform-origin: bottom;
          opacity: 0;
        }
      }

      /* ══════════════════════════════════════════════════
           MANIFESTO BAND — "Why Your Dog Deserves Rasa"
        ══════════════════════════════════════════════════ */
      .paws-manifesto {
        padding: 8rem clamp(1.5rem, 7vw, 8rem);
        background: var(--color-bg);
        position: relative;
        overflow: hidden;
      }
      .paws-manifesto::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
          ellipse at 25% 50%,
          rgba(212, 121, 26, 0.05) 0%,
          transparent 65%
        );
        pointer-events: none;
      }

      .paws-manifesto__inner {
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5rem;
        align-items: center;
      }

      .paws-manifesto__image-wrap {
        position: relative;
        border-radius: 18px;
        overflow: hidden;
      }
      .paws-manifesto__image-wrap img {
        width: 100%;
        aspect-ratio: 4/3;
        object-fit: cover;
        display: block;
        transition: transform 8s ease-out;
      }
      .paws-manifesto__image-wrap:hover img {
        transform: scale(1.04);
      }
      .paws-manifesto__img-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          135deg,
          rgba(8, 12, 20, 0.25) 0%,
          transparent 60%
        );
      }
      .paws-manifesto__img-badge {
        position: absolute;
        bottom: 20px;
        left: 20px;
        background: rgba(0, 0, 0, 0.72);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(212, 121, 26, 0.32);
        border-radius: 8px;
        padding: 10px 16px;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.58rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--paws-gold);
      }

      .paws-manifesto__eyebrow {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 2rem;
      }
      .paws-manifesto__eyebrow-line {
        width: 40px;
        height: 1px;
        background: linear-gradient(
          90deg,
          rgba(212, 121, 26, 0.4),
          transparent
        );
      }
      .paws-manifesto__eyebrow-label {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.58rem;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: rgba(212, 121, 26, 0.5);
      }

      .paws-manifesto__heading {
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(1.8rem, 3.5vw, 2.7rem);
        font-weight: 400;
        line-height: 1.3;
        color: var(--color-text-primary);
        margin: 0 0 1.5rem;
      }
      .paws-manifesto__heading span {
        font-style: italic;
        color: rgba(212, 121, 26, 0.85);
      }

      .paws-manifesto__body {
        font-size: 0.9rem;
        line-height: 1.9;
        color: rgba(255, 255, 255, 0.42);
        margin-bottom: 2rem;
      }
      .paws-manifesto__body strong {
        color: rgba(242, 221, 208, 0.72);
        font-weight: 500;
      }

      .paws-pillars {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
      }
      .paws-pillar {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 0.85rem 1rem;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(212, 121, 26, 0.08);
        border-radius: 8px;
        transition:
          border-color 0.3s,
          background 0.3s;
      }
      .paws-pillar:hover {
        border-color: rgba(212, 121, 26, 0.22);
        background: rgba(212, 121, 26, 0.04);
      }
      .paws-pillar__icon {
        font-size: 1rem;
        line-height: 1;
        margin-top: 1px;
        flex-shrink: 0;
      }
      .paws-pillar__title {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.6rem;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--paws-gold);
        margin-bottom: 2px;
      }
      .paws-pillar__desc {
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.38);
        line-height: 1.6;
      }

      @media (max-width: 768px) {
        .paws-manifesto__inner {
          grid-template-columns: 1fr;
          gap: 2.5rem;
        }
      }

      /* ══════════════════════════════════════════════════
           SAFE INGREDIENTS SCIENCE BAND
        ══════════════════════════════════════════════════ */
      .paws-science {
        padding: 7rem clamp(1.5rem, 5vw, 6rem);
        background: rgba(212, 121, 26, 0.025);
        position: relative;
        overflow: hidden;
      }
      .paws-science::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
          ellipse at 75% 20%,
          rgba(184, 92, 32, 0.06) 0%,
          transparent 60%
        );
        pointer-events: none;
      }

      .paws-science__header {
        text-align: center;
        margin-bottom: 4rem;
      }
      .paws-science__eyebrow {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.6rem;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: rgba(212, 121, 26, 0.5);
        margin-bottom: 1rem;
      }
      .paws-science__title {
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(2rem, 5vw, 3rem);
        font-weight: 300;
        color: var(--color-text-primary);
        margin: 0 0 1rem;
      }
      .paws-science__subtitle {
        font-size: 0.88rem;
        color: rgba(255, 255, 255, 0.35);
        max-width: 540px;
        margin: 0 auto;
        line-height: 1.8;
      }

      /* Ingredient science cards */
      .paws-ingredients-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1rem;
        max-width: 1150px;
        margin: 0 auto;
      }

      .paws-ingredient-card {
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid rgba(212, 121, 26, 0.1);
        border-radius: 14px;
        padding: 1.5rem;
        transition:
          border-color 0.3s,
          transform 0.4s;
        position: relative;
        overflow: hidden;
      }
      .paws-ingredient-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
          ellipse at top left,
          rgba(212, 121, 26, 0.05) 0%,
          transparent 60%
        );
        pointer-events: none;
      }
      .paws-ingredient-card:hover {
        border-color: rgba(212, 121, 26, 0.3);
        transform: translateY(-3px);
      }
      .paws-ingredient-card__status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.5rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        padding: 3px 10px;
        border-radius: 100px;
        margin-bottom: 0.75rem;
      }
      .paws-ingredient-card__status--safe {
        background: rgba(76, 175, 80, 0.08);
        border: 1px solid rgba(76, 175, 80, 0.2);
        color: rgba(76, 175, 80, 0.75);
      }
      .paws-ingredient-card__status--safe::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(76, 175, 80, 0.7);
      }
      .paws-ingredient-card__status--caution {
        background: rgba(245, 166, 35, 0.08);
        border: 1px solid rgba(245, 166, 35, 0.2);
        color: rgba(245, 166, 35, 0.75);
      }
      .paws-ingredient-card__status--caution::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(245, 166, 35, 0.7);
      }
      .paws-ingredient-card__name {
        font-family: "Cormorant Garamond", serif;
        font-size: 1.3rem;
        font-weight: 500;
        color: rgba(242, 221, 208, 0.9);
        margin-bottom: 0.3rem;
      }
      .paws-ingredient-card__sanskrit {
        font-family: "Cormorant Garamond", serif;
        font-style: italic;
        font-size: 0.78rem;
        color: rgba(212, 121, 26, 0.5);
        margin-bottom: 0.75rem;
      }
      .paws-ingredient-card__benefit {
        font-size: 0.76rem;
        line-height: 1.75;
        color: rgba(255, 255, 255, 0.38);
        margin-bottom: 0.75rem;
      }
      .paws-ingredient-card__science {
        padding: 0.55rem 0.85rem;
        background: rgba(212, 121, 26, 0.06);
        border-left: 2px solid rgba(212, 121, 26, 0.35);
        border-radius: 0 6px 6px 0;
        font-size: 0.68rem;
        color: rgba(212, 121, 26, 0.65);
        line-height: 1.55;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.58rem;
        letter-spacing: 0.04em;
      }

      /* ══════════════════════════════════════════════════
           SAFETY GUIDE SECTION
        ══════════════════════════════════════════════════ */
      .paws-safety {
        padding: 6rem clamp(1.5rem, 6vw, 8rem);
        background: var(--color-bg);
        position: relative;
        overflow: hidden;
      }
      .paws-safety::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 600px;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(220, 38, 38, 0.25),
          transparent
        );
      }
      /* Ambient red glow */
      .paws-safety__glow {
        position: absolute;
        top: -100px;
        right: -100px;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: radial-gradient(
          ellipse,
          rgba(220, 38, 38, 0.06) 0%,
          transparent 70%
        );
        pointer-events: none;
      }
      .paws-safety__inner {
        max-width: 1100px;
        margin: 0 auto;
      }
      .paws-safety__header {
        text-align: center;
        margin-bottom: 3.5rem;
      }
      .paws-safety__badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(220, 38, 38, 0.08);
        border: 1px solid rgba(220, 38, 38, 0.25);
        border-radius: 40px;
        padding: 5px 16px;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.5rem;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: rgba(220, 38, 38, 0.7);
        margin-bottom: 1.5rem;
      }
      .paws-safety__badge-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(220, 38, 38, 0.8);
        animation: pulse-red 2s infinite;
      }
      @keyframes pulse-red {
        0%,
        100% {
          opacity: 0.4;
          transform: scale(1);
        }
        50% {
          opacity: 1;
          transform: scale(1.4);
        }
      }
      .paws-safety__title {
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(1.8rem, 4vw, 2.8rem);
        font-weight: 300;
        color: rgba(242, 221, 208, 0.9);
        line-height: 1.2;
        margin-bottom: 0.75rem;
      }
      .paws-safety__title em {
        font-style: italic;
        color: rgba(220, 38, 38, 0.75);
      }
      .paws-safety__subtitle {
        font-size: 0.82rem;
        color: rgba(255, 255, 255, 0.32);
        line-height: 1.7;
        max-width: 560px;
        margin: 0 auto;
      }

      /* Grid of danger cards */
      .paws-safety__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1rem;
        /* Grid rows stretch every item to the row's tallest by default, so
           opening one card visually pushed its still-closed neighbors' borders
           taller too — read as "they opened", though their content stayed at
           0 height. align-items: start makes each card size to its own
           content only. */
        align-items: start;
      }

      /* Individual danger card */
      .paws-danger-card {
        background: rgba(220, 38, 38, 0.04);
        border: 1px solid rgba(220, 38, 38, 0.14);
        border-radius: 14px;
        overflow: hidden;
        cursor: pointer;
        transition:
          background 0.3s,
          border-color 0.3s,
          transform 0.3s,
          box-shadow 0.3s;
        position: relative;
      }
      .paws-danger-card:hover {
        background: rgba(220, 38, 38, 0.08);
        border-color: rgba(220, 38, 38, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(220, 38, 38, 0.08);
      }
      .paws-danger-card.open {
        border-color: rgba(220, 38, 38, 0.35);
        background: rgba(220, 38, 38, 0.07);
      }
      /* Top accent line on hover */
      .paws-danger-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(
          90deg,
          rgba(220, 38, 38, 0.6),
          rgba(239, 68, 68, 0.3),
          transparent
        );
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
      }
      .paws-danger-card:hover::before,
      .paws-danger-card.open::before {
        transform: scaleX(1);
      }

      .paws-danger-card__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.1rem 1.25rem;
        gap: 1rem;
      }
      .paws-danger-card__left {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .paws-danger-card__name {
        font-family: "Cormorant Garamond", serif;
        font-size: 1.15rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85);
        line-height: 1;
      }
      .paws-danger-card__alias {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.48rem;
        letter-spacing: 0.15em;
        color: rgba(220, 38, 38, 0.5);
        text-transform: uppercase;
      }
      .paws-danger-card__right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 5px;
        flex-shrink: 0;
      }
      /* Severity pill */
      .paws-danger-card__severity {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.4rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        padding: 3px 10px;
        border-radius: 20px;
        font-weight: 600;
      }
      .paws-danger-card__severity--critical {
        background: rgba(220, 38, 38, 0.15);
        color: rgba(239, 68, 68, 0.9);
        border: 1px solid rgba(220, 38, 38, 0.3);
      }
      .paws-danger-card__severity--high {
        background: rgba(234, 88, 12, 0.12);
        color: rgba(251, 146, 60, 0.9);
        border: 1px solid rgba(234, 88, 12, 0.25);
      }
      .paws-danger-card__severity--moderate {
        background: rgba(202, 138, 4, 0.1);
        color: rgba(234, 179, 8, 0.8);
        border: 1px solid rgba(202, 138, 4, 0.2);
      }
      /* Chevron toggle */
      .paws-danger-card__chevron {
        width: 16px;
        height: 16px;
        color: rgba(220, 38, 38, 0.4);
        transition:
          transform 0.3s ease,
          color 0.3s;
        flex-shrink: 0;
      }
      .paws-danger-card.open .paws-danger-card__chevron {
        transform: rotate(180deg);
        color: rgba(220, 38, 38, 0.7);
      }

      /* Expandable body */
      .paws-danger-card__body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .paws-danger-card.open .paws-danger-card__body {
        max-height: 260px;
      }
      .paws-danger-card__body-inner {
        padding: 0 1.25rem 1.25rem;
        border-top: 1px solid rgba(220, 38, 38, 0.1);
        padding-top: 1rem;
        margin: 0 0.5rem;
      }
      .paws-danger-card__why {
        font-size: 0.77rem;
        color: rgba(255, 255, 255, 0.48);
        line-height: 1.7;
        margin-bottom: 0.85rem;
      }
      .paws-danger-card__why strong {
        color: rgba(239, 68, 68, 0.75);
        font-weight: 600;
      }
      /* Severity bar */
      .paws-danger-card__bar-label {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.42rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.2);
        margin-bottom: 5px;
      }
      .paws-danger-card__bar-track {
        height: 3px;
        background: rgba(255, 255, 255, 0.07);
        border-radius: 2px;
        overflow: hidden;
      }
      .paws-danger-card__bar-fill {
        height: 100%;
        border-radius: 2px;
        transition: width 0.6s ease 0.1s;
        width: 0;
      }
      .paws-danger-card.open .paws-danger-card__bar-fill {
        width: var(--danger-level);
      }
      .paws-danger-card__bar-fill--critical {
        background: linear-gradient(90deg, #dc2626, #ef4444);
      }
      .paws-danger-card__bar-fill--high {
        background: linear-gradient(90deg, #ea580c, #fb923c);
      }
      .paws-danger-card__bar-fill--moderate {
        background: linear-gradient(90deg, #ca8a04, #eab308);
      }

      /* ASPCA note */
      .paws-safety__note {
        margin-top: 2rem;
        text-align: center;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.5rem;
        letter-spacing: 0.12em;
        color: rgba(255, 255, 255, 0.18);
      }
      .paws-safety__note a {
        color: rgba(220, 38, 38, 0.45);
        text-decoration: none;
      }
      .paws-safety__note a:hover {
        color: rgba(220, 38, 38, 0.7);
      }

      @media (max-width: 768px) {
        .paws-safety {
          padding: 4rem 1.25rem;
        }
        .paws-safety__grid {
          grid-template-columns: 1fr;
        }
      }

      /* ══════════════════════════════════════════════════
           DOG RECIPES SECTION
        ══════════════════════════════════════════════════ */
      .paws-recipes-section {
        padding: 7rem clamp(1.5rem, 5vw, 6rem);
        background: var(--color-bg);
      }

      .paws-recipes-section__header {
        text-align: center;
        margin-bottom: 4rem;
      }
      .paws-recipes-eyebrow {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.6rem;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: rgba(212, 121, 26, 0.5);
        margin-bottom: 1rem;
      }
      .paws-recipes-title {
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(2rem, 5vw, 3rem);
        font-weight: 300;
        color: var(--color-text-primary);
        margin: 0 0 1rem;
      }
      .paws-recipes-subtitle {
        font-size: 0.88rem;
        color: rgba(255, 255, 255, 0.35);
        line-height: 1.8;
        max-width: 540px;
        margin: 0 auto;
      }

      /* Filter tabs */
      .paws-filter-row {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        flex-wrap: wrap;
        margin-bottom: 3rem;
      }
      .paws-filter-btn {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 40px;
        padding: 0.5rem 1.2rem;
        cursor: pointer;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.58rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.4);
        transition: all 0.3s;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .paws-filter-btn:hover {
        border-color: rgba(212, 121, 26, 0.3);
        color: rgba(255, 255, 255, 0.7);
      }

      .paws-filter-btn.active {
        background: rgba(212, 121, 26, 0.12);
        border-color: rgba(212, 121, 26, 0.45);
        color: var(--paws-gold);
      }

      /* Recipe Cards */
      .paws-recipes-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: 1.5rem;
        max-width: 1200px;
        margin: 0 auto;
      }

      .paws-recipe-card {
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid rgba(212, 121, 26, 0.1);
        border-radius: 16px;
        overflow: hidden;
        cursor: pointer;
        transition:
          border-color 0.4s,
          transform 0.4s;
        position: relative;
      }
      .paws-recipe-card:hover {
        border-color: rgba(212, 121, 26, 0.38);
        transform: translateY(-5px);
      }

      .paws-recipe-card__header {
        padding: 1.5rem 1.5rem 0;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
      }

      .paws-recipe-card__size-badge {
        background: rgba(212, 121, 26, 0.12);
        border: 1px solid rgba(212, 121, 26, 0.28);
        border-radius: 20px;
        padding: 4px 12px;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.52rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--paws-gold);
        white-space: nowrap;
        flex-shrink: 0;
      }

      .paws-recipe-card__category {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.52rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.28);
      }

      .paws-recipe-card__body {
        padding: 1rem 1.5rem 0;
      }
      .paws-recipe-card__title {
        font-family: "Cormorant Garamond", serif;
        font-size: 1.55rem;
        font-weight: 500;
        color: var(--color-text-primary);
        margin-bottom: 0.4rem;
        line-height: 1.2;
      }
      .paws-recipe-card__telugu {
        font-family: "Cormorant Garamond", serif;
        font-style: italic;
        font-size: 0.8rem;
        color: rgba(212, 121, 26, 0.52);
        margin-bottom: 0.7rem;
      }
      .paws-recipe-card__desc {
        font-size: 0.78rem;
        line-height: 1.75;
        color: rgba(255, 255, 255, 0.36);
        margin-bottom: 1rem;
      }

      .paws-recipe-card__science {
        margin: 0 1.5rem;
        padding: 0.7rem 1rem;
        background: rgba(212, 121, 26, 0.05);
        border: 1px solid rgba(212, 121, 26, 0.12);
        border-radius: 8px;
        font-size: 0.7rem;
        color: rgba(212, 121, 26, 0.65);
        line-height: 1.5;
        display: flex;
        align-items: flex-start;
        gap: 8px;
      }
      .paws-recipe-card__science svg {
        flex-shrink: 0;
        margin-top: 1px;
        width: 14px;
        height: 14px;
        stroke: rgba(212, 121, 26, 0.55);
      }

      .paws-recipe-card__footer {
        padding: 1rem 1.5rem 1.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
      }
      .paws-recipe-card__meta {
        display: flex;
        align-items: center;
        gap: 5px;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.58rem;
        letter-spacing: 0.08em;
        color: rgba(255, 255, 255, 0.32);
      }
      .paws-recipe-card__meta svg {
        width: 13px;
        height: 13px;
        stroke: rgba(255, 255, 255, 0.22);
      }

      .paws-recipe-card__expand-btn {
        margin-left: auto;
        background: rgba(212, 121, 26, 0.1);
        border: 1px solid rgba(212, 121, 26, 0.22);
        border-radius: 20px;
        padding: 5px 14px;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.55rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--paws-gold);
        cursor: pointer;
        transition:
          background 0.3s,
          border-color 0.3s;
      }
      .paws-recipe-card__expand-btn:hover {
        background: rgba(212, 121, 26, 0.2);
        border-color: rgba(212, 121, 26, 0.4);
      }

      /* Expanded recipe panel */
      .paws-recipe-card__expanded {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .paws-recipe-card.expanded .paws-recipe-card__expanded {
        max-height: 900px;
      }

      /* Locked recipe card state */
      .paws-recipe-card--locked {
        position: relative;
        cursor: default;
        pointer-events: none;
      }
      .paws-recipe-card--locked > *:not(.kids-card-paywall) {
        filter: blur(5px);
        opacity: 0.35;
        user-select: none;
        pointer-events: none;
      }
      .kids-card-paywall {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: rgba(8, 12, 20, 0.75);
        backdrop-filter: blur(8px);
        border-radius: 16px;
        border-top: 1px solid rgba(212, 121, 26, 0.1);
        pointer-events: all;
        z-index: 5;
      }
      .kids-card-paywall__icon {
        width: 40px;
        height: 40px;
        background: rgba(212, 121, 26, 0.1);
        border: 1px solid rgba(212, 121, 26, 0.25);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .kids-card-paywall__msg {
        font-family: "Cormorant Garamond", serif;
        font-size: 0.85rem;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.9);
        text-align: center;
        line-height: 1.4;
      }
      .kids-card-paywall__btn {
        padding: 8px 20px;
        border-radius: 100px;
        background: rgba(212, 121, 26, 0.1);
        border: 1px solid rgba(212, 121, 26, 0.3);
        color: #d4791a;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        text-decoration: none;
        transition: all 0.3s;
        pointer-events: all;
      }
      .kids-card-paywall__btn:hover {
        background: rgba(212, 121, 26, 0.2);
        transform: translateY(-1px);
      }
      .paws-recipe-card__expanded-inner {
        padding: 0 1.5rem 1.5rem;
        border-top: 1px solid rgba(212, 121, 26, 0.1);
        margin-top: 1rem;
        padding-top: 1.5rem;
      }

      .paws-two-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
      }
      @media (max-width: 520px) {
        .paws-two-col {
          grid-template-columns: 1fr;
        }
      }

      .paws-section-label {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.55rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(212, 121, 26, 0.5);
        margin-bottom: 0.75rem;
      }
      .paws-ingredient-list {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .paws-ingredient-list li {
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.48);
        padding: 0.35rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        display: flex;
        align-items: center;
        gap: 8px;
        line-height: 1.5;
      }
      .paws-ingredient-list li::before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: rgba(212, 121, 26, 0.4);
        flex-shrink: 0;
      }

      .paws-step-list {
        list-style: none;
        padding: 0;
        margin: 0;
        counter-reset: steps;
      }
      .paws-step-list li {
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.45);
        padding: 0.5rem 0 0.5rem 2rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        position: relative;
        counter-increment: steps;
        line-height: 1.6;
      }
      .paws-step-list li::before {
        content: counter(steps);
        position: absolute;
        left: 0;
        top: 0.5rem;
        width: 18px;
        height: 18px;
        background: rgba(212, 121, 26, 0.12);
        border: 1px solid rgba(212, 121, 26, 0.22);
        border-radius: 50%;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.52rem;
        color: rgba(212, 121, 26, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
      }

      .paws-vet-note {
        margin-top: 1.25rem;
        padding: 0.75rem 1rem;
        background: rgba(212, 121, 26, 0.05);
        border: 1px solid rgba(212, 121, 26, 0.15);
        border-radius: 8px;
        display: flex;
        gap: 10px;
      }
      .paws-vet-note__label {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.52rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(212, 121, 26, 0.65);
        flex-shrink: 0;
        padding-top: 1px;
      }
      .paws-vet-note__text {
        font-size: 0.72rem;
        color: rgba(255, 255, 255, 0.38);
        line-height: 1.6;
      }

      /* ══════════════════════════════════════════════════
           WISDOM CALLOUT
        ══════════════════════════════════════════════════ */
      .paws-wisdom {
        padding: 5rem clamp(1.5rem, 7vw, 8rem);
        background: var(--color-bg);
      }
      .paws-wisdom__card {
        max-width: 920px;
        margin: 0 auto;
        background: rgba(212, 121, 26, 0.04);
        border: 1px solid rgba(212, 121, 26, 0.16);
        border-radius: 20px;
        padding: 3.5rem;
        text-align: center;
        position: relative;
        overflow: hidden;
      }
      .paws-wisdom__card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(212, 121, 26, 0.4),
          transparent
        );
      }
      .paws-wisdom__symbol {
        font-family: "Cormorant Garamond", serif;
        font-size: 2.5rem;
        color: rgba(212, 121, 26, 0.22);
        margin-bottom: 1.5rem;
        display: block;
      }
      .paws-wisdom__quote {
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(1.2rem, 3vw, 1.8rem);
        font-weight: 400;
        font-style: italic;
        line-height: 1.7;
        color: rgba(242, 221, 208, 0.65);
        margin: 0 0 1.5rem;
      }
      .paws-wisdom__quote em {
        color: rgba(212, 121, 26, 0.85);
        font-style: normal;
      }
      .paws-wisdom__source {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.6rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.22);
      }

      /* ══════════════════════════════════════════════════
           VET DISCLAIMER BANNER
        ══════════════════════════════════════════════════ */
      .paws-disclaimer {
        padding: 2rem clamp(1.5rem, 5vw, 6rem);
        background: rgba(230, 57, 70, 0.04);
        border-top: 1px solid rgba(230, 57, 70, 0.1);
        border-bottom: 1px solid rgba(230, 57, 70, 0.1);
      }
      .paws-disclaimer__inner {
        max-width: 920px;
        margin: 0 auto;
        display: flex;
        gap: 1rem;
        align-items: flex-start;
      }
      .paws-disclaimer__icon {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        margin-top: 1px;
        color: rgba(230, 57, 70, 0.6);
      }
      .paws-disclaimer__text {
        font-size: 0.74rem;
        color: rgba(230, 57, 70, 0.55);
        line-height: 1.7;
      }
      .paws-disclaimer__text strong {
        color: rgba(230, 57, 70, 0.78);
      }

      /* ══════════════════════════════════════════════════
           RESPONSIVE
        ══════════════════════════════════════════════════ */
      @media (max-width: 768px) {
        .paws-hero {
          min-height: 90svh;
          height: auto;
          /* Same scroll-indicator clearance as the 420px block below. */
          padding: 4rem 1.25rem 7rem;
        }
        /* Tablets / large phones (421–768px). Sits between the desktop 9.5rem
           and the 4rem used on narrow phones: there is more vertical room here
           than at 390, but the square photo still crops tall, so the full
           desktop offset would push the stack low. The ≤420px block below
           overrides this for narrow phones. */
        .paws-hero__inner {
          margin-top: 5.5rem;
        }
        .paws-hero__creed {
          gap: 0.75rem;
          margin-bottom: 1.5rem;
        }
        .paws-hero__scope {
          margin-top: 2rem;
        }
        .paws-hero__stats {
          gap: 1.5rem;
        }
        .paws-hero__stat-num {
          font-size: 1.8rem;
        }
        .paws-manifesto {
          padding: 4rem 1.25rem;
        }
        .paws-science {
          padding: 4rem 0;
        }
        .paws-science__header {
          padding: 0 1.25rem;
          margin-bottom: 2.5rem;
        }
        .paws-ingredients-grid {
          grid-template-columns: 1fr;
          gap: 0.85rem;
        }
        .paws-recipes-section {
          padding: 4rem 1rem;
        }
        .paws-recipes-grid {
          grid-template-columns: 1fr;
          gap: 1.25rem;
        }
        .paws-filter-row {
          justify-content: flex-start;
          flex-wrap: nowrap;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
          padding: 0 0 0.75rem;
          margin-bottom: 2rem;
          gap: 0.5rem;
        }
        .paws-filter-row::-webkit-scrollbar {
          display: none;
        }
        .paws-filter-btn {
          flex-shrink: 0;
          padding: 0.6rem 1.2rem;
          min-height: 44px;
        }
        .paws-recipe-card__expand-btn {
          margin-left: 0;
          width: 100%;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0.7rem 1rem;
          min-height: 44px;
        }
        .paws-wisdom {
          padding: 3rem 1.25rem;
        }
        .paws-wisdom__card {
          padding: 2rem 1.25rem;
          border-radius: 14px;
        }
        .paws-safety {
          padding: 3rem 1.25rem;
        }
        .paws-safety__grid {
          grid-template-columns: 1fr;
        }
        .paws-disclaimer {
          padding: 1.5rem 1.25rem;
        }
      }

      /* The hero runs three infinite loops (scope dot, scroll line, 20s bg
         zoom). motion.css only guards its own mx-* engine, so gate these here. */
      @media (prefers-reduced-motion: reduce) {
        .paws-hero__scope-dot,
        .paws-hero__scroll-line {
          animation: none;
        }
        .paws-hero__scope-dot {
          opacity: 1;
        }
        .paws-hero__scroll-line {
          opacity: 0.55;
        }
        .paws-hero__bg,
        .paws-hero__bg.loaded {
          transition: none;
          transform: scale(1);
        }
      }

      @media (max-width: 420px) {
        .paws-hero {
          /* min-height is a FLOOR, not a cap — the stack must be allowed to grow
             past it on short screens, or the headline gets clipped out of view. */
          min-height: 85svh;
          height: auto;
          /* justify-content:center (inherited) centres the block over the WHOLE
             hero box, which slides the headline up behind the fixed nav on short
             screens. Anchoring to the top makes the padding authoritative. */
          justify-content: flex-start;
          /* Top padding clears the fixed nav (--nav-h); bottom padding reserves
             the absolutely-positioned scroll indicator's lane (bottom:2.5rem +
             50px line = 90px) so the scope line can't land on top of it.
             8rem rather than 6.5rem: the old value left the caption only 14px
             clear of the indicator — technically not a collision, but read as
             crowded, and it is the gap the stack now moves toward. 8rem lifts
             that clearance to ~38px. */
          padding: calc(var(--nav-h) + 1.75rem) 1rem 8rem;
        }
        .paws-hero__title {
          font-size: 2.5rem;
        }
        .paws-hero__subtitle {
          font-size: 0.92rem;
        }
        /* Narrow phones: let the creed wrap rather than overflow, and drop the
           flanking rules so a two-line phrase doesn't sit on a broken hairline. */
        .paws-hero__creed-text {
          white-space: normal;
        }
        .paws-hero__creed-rule {
          display: none;
        }
        /* 320px: the scope string is long for a narrow column — ease the tracking
           so it stays on one line instead of wrapping under its own dot. */
        .paws-hero__scope {
          margin-top: 1.75rem;
          letter-spacing: 0.16em;
          gap: 7px;
        }
        /* Narrow phones previously took NO downward nudge, because an earlier
           attempt pushed the first title line off-screen. That risk is gone:
           this hero is `height:auto` with min-height as a FLOOR, so the box
           grows with the stack instead of clipping it — measured across 0–3rem,
           the painted title top only ever moves DOWN and the scope→scroll gap
           holds constant.

           CAPPED DELIBERATELY at 4rem. On phones the square photo is scaled to
           fill the hero's HEIGHT exactly, so background-position's Y component
           is inert — the crop cannot be re-aimed, and the eye row sits low in
           the frame. Buying FULL eye clearance here would need ~150px of push,
           which makes the first screen needlessly tall and squeezes the scroll
           indicator. 4rem takes the stack out of the top-pinned look Rakesh
           flagged (~38% → ~47% at 390) while keeping the caption well clear of
           the indicator. Below true centre on purpose. Short screens claw this
           back in the height query below. */
        .paws-hero__inner {
          margin-top: 4rem;
        }
        .paws-hero__stat-num {
          font-size: 1.6rem;
        }
        /* Keep the three stats on ONE row at 320px — wrapping to two rows breaks
           the "three numbers, one line of proof" reading and eats vertical space
           the headline needs. */
        .paws-hero__stats {
          gap: 0.85rem;
        }
        .paws-hero__stat-lbl {
          letter-spacing: 0.12em;
          font-size: 0.46rem;
        }
      }

      /* SHORT phones (e.g. 320×568, iPhone SE 1st gen). The downward nudge is
         capped by HEIGHT, not width: on a 568px screen the bottom tab bar sits
         at y≈504, and 4rem pushed the scope caption's bottom to y≈544 — i.e.
         the caption disappeared behind the tab bar. Measured ceiling is 1.5rem
         (caption bottom 503.8 vs tab top 504.0 — 0.2px, no margin for error);
         1rem keeps a real ~8px of clearance.

         So this is a DELIBERATE cap below the shift used on taller phones, and
         below true centre: on a screen this short the stack already fills ~two
         thirds of the hero, and there is genuinely nowhere to move it without
         hiding the last line of the block. Layout integrity beats centring. */
      @media (max-width: 420px) and (max-height: 620px) {
        .paws-hero__inner {
          margin-top: 1rem;
        }
      }

      /* ── Auth Nav Widget ── */
      .nav__user {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: 16px;
      }
      .nav__user-name {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.6rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.82);
      }
      .nav__plan-badge {
        padding: 1px 9px;
        border-radius: 100px;
        font-family: var(--font-editorial, "Cormorant Garamond", serif);
        font-size: 0.72rem;
        line-height: 1.25;
        letter-spacing: 0.1em;
        text-transform: lowercase;
        font-weight: 600;
      }
      .nav__plan-badge--free {
        background: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.08);
      }
      .nav__plan-badge--pro {
        background: rgba(245, 166, 35, 0.12);
        color: #f5a623;
        border: 1px solid rgba(245, 166, 35, 0.25);
      }
      .nav__signin-link {
        font-family: "JetBrains Mono", monospace;
        font-size: 0.58rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(212, 121, 26, 0.7);
        text-decoration: none;
        transition: color 0.3s;
      }
      .nav__signin-link:hover {
        color: var(--paws-gold);
      }
    
      /* rasa-two-tone-logo */
      [class*="logo"] .ac, [class*="brand"] .ac { color: var(--saffron, #F5A623) !important; }

/* ═══ Mobile nav decongestion (2026-08-07) — same as Little Rasas: the
   subtitle collided with the injected account pill on phones. ═══ */
@media (max-width: 768px) {
    .paws-nav__brand-sub { display: none; }
}