/* ==========================================================================
   PawGuard case study — project-specific art direction
   Loaded only by /work/pawguard/ (inside the akhilj.ca V3 frame).
   Uses PawGuard's own brand from its Figma file:
   Light blue #92CED9 · Pale blue #D4EAEE · Sunset yellow #F0CA5F ·
   Pale yellow #FFE59C · Dark blue #1F3E5B · Salmon pink #F7A087
   Typeface: Poppins. Voice: "Harmony" + "Lively".
   The AkhilJ wine accent is deliberately not used inside this project.
   Product mockups live in pawguard-ui.css (native HTML/CSS, refined 2026).
   ========================================================================== */

.project-paw {
  --paw-navy: #1F3E5B;
  --paw-navy-2: #2A5073;
  --paw-sky: #92CED9;
  --paw-sky-pale: #D4EAEE;
  --paw-sky-50: #EAF5F7;
  --paw-yellow: #F0CA5F;
  --paw-yellow-pale: #FFE59C;
  --paw-yellow-50: #FFF6DC;
  --paw-salmon: #F7A087;
  --paw-salmon-50: #FDE9E2;
  --paw-cream: #FBF8F2;
  --paw-ink: #1C2B38;
  --paw-ink-2: #3F5061;
  --paw-muted: #5E6D7A;
  --paw-line: rgba(31, 62, 91, 0.13);
  --paw-font: "Poppins", "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --paw-radius: 20px;
  --paw-radius-sm: 12px;
}
.project-paw main {
  font-family: var(--paw-font);
  background: var(--paw-cream);
  color: var(--paw-ink-2);
  --focus: var(--paw-navy);
}
.project-paw main h1,
.project-paw main h2,
.project-paw main h3,
.project-paw main h4 {
  font-family: var(--paw-font);
  color: var(--paw-navy);
  letter-spacing: -0.02em;
}

/* ---------- Shared ---------- */
.paw-wrap { width: min(100% - (var(--gutter) * 2), 1200px); margin-inline: auto; }
.paw-section { padding-block: clamp(80px, 9vw, 128px); }
.paw-section--white { background: #fff; }
.paw-section--facts { padding-block: 0; }
.paw-section--sky { background: var(--paw-sky-50); }
.paw-section--navy { background: var(--paw-navy); color: rgba(255, 255, 255, 0.82); --focus: var(--paw-yellow); }
.project-paw main .paw-section--navy h2, .project-paw main .paw-section--navy h3 { color: #fff; }

.paw-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--paw-navy-2);
}
.paw-label::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--paw-yellow); }
.paw-section--navy .paw-label { color: var(--paw-sky); }

.paw-head { max-width: 760px; margin-bottom: clamp(36px, 4vw, 56px); }
.paw-head h2 { margin-top: 16px; font-size: clamp(1.9rem, 1.2rem + 2vw, 3rem); font-weight: 600; line-height: 1.12; }
.paw-head p { margin-top: 18px; font-size: 1.0625rem; line-height: 1.7; max-width: 62ch; }
.paw-lead { font-size: 1.125rem; line-height: 1.7; }
.paw-caption { margin-top: 14px; font-size: 0.875rem; color: var(--paw-muted); }
.paw-section--navy .paw-caption { color: rgba(255, 255, 255, 0.62); }

/* Image plates: real process artefacts (flows, wireframes) on an even white mat */
.paw-plate {
  padding: clamp(16px, 3vw, 40px);
  border-radius: var(--paw-radius);
  background: #fff;
  box-shadow: 0 0 0 1px var(--paw-line), 0 24px 48px -36px rgba(31, 62, 91, 0.35);
}
.paw-plate img { display: block; width: 100%; height: auto; margin-inline: auto; }
.paw-plate--narrow img { max-width: 760px; }

/* ---------- Hero ---------- */
.paw-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 3vw, 40px) 0 clamp(64px, 7vw, 104px);
  background:
    radial-gradient(ellipse 54% 78% at 100% 4%, rgba(146, 206, 217, 0.95) 0 60%, transparent 60.2%),
    var(--paw-navy);
  color: rgba(255, 255, 255, 0.86);
  --focus: var(--paw-yellow);
}
.paw-hero .back-link { color: #fff; }
.paw-hero__grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(32px, 4vw, 64px); align-items: center; margin-top: clamp(28px, 4vw, 56px); }
.paw-hero__logo { width: min(240px, 60%); height: auto; }
.paw-hero__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 28px; font-size: 0.8125rem; color: var(--paw-sky); }
.paw-hero h1 { margin-top: 18px; font-size: clamp(2.2rem, 1.2rem + 2.8vw, 3.6rem); font-weight: 600; line-height: 1.08; color: #fff !important; }
.paw-hero h1 .sky { color: var(--paw-sky); }
.paw-hero h1 .sun { color: var(--paw-yellow); }
.paw-hero__intro { margin-top: 22px; font-size: 1.0625rem; line-height: 1.7; max-width: 44ch; }
.paw-paws {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 50% 50%, rgba(31, 62, 91, 0.14) 0 6px, transparent 6.5px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 42% 62% at 100% 6%, #000 30%, transparent 70%);
  mask-image: radial-gradient(ellipse 42% 62% at 100% 6%, #000 30%, transparent 70%);
}
.paw-comp { position: relative; padding: 0 0 7% 0; }
.paw-comp > .pgx-browser { width: 88%; }
.paw-comp__phone { position: absolute; right: 0; bottom: 0; width: 25%; }

/* ---------- Facts ---------- */
.paw-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #fff;
  border-radius: var(--paw-radius);
  box-shadow: 0 0 0 1px var(--paw-line);
  margin-top: clamp(40px, 5vw, 64px);
}
.paw-facts > div { padding: 22px 24px; }
.paw-facts > div + div { border-left: 1px solid var(--paw-line); }
.paw-facts dt { font-size: 0.8125rem; font-weight: 500; color: var(--paw-muted); }
.paw-facts dd { margin-top: 6px; font-size: 0.9375rem; line-height: 1.5; color: var(--paw-ink); font-weight: 500; }

/* ---------- Cards / grids ---------- */
.paw-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.paw-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.paw-card {
  padding: 26px 24px;
  border-radius: var(--paw-radius);
  background: #fff;
  box-shadow: 0 0 0 1px var(--paw-line);
  transition: translate 500ms var(--ease-out), box-shadow 500ms var(--ease);
}
.paw-card:hover { translate: 0 -3px; box-shadow: 0 0 0 1px var(--paw-line), 0 18px 36px -24px rgba(31, 62, 91, 0.35); }
.paw-card--sky { background: var(--paw-sky-pale); box-shadow: none; }
.paw-card--sun { background: var(--paw-yellow-pale); box-shadow: none; }
.paw-card--salmon { background: var(--paw-salmon-50); box-shadow: none; }
.paw-card__num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--paw-navy); color: #fff; font-size: 0.875rem; font-weight: 600; }
.paw-card h3 { margin-top: 18px; font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.paw-card p { margin-top: 8px; font-size: 0.9375rem; line-height: 1.65; }

.paw-goal {
  margin-top: 24px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--paw-radius);
  background: var(--paw-navy);
  color: #fff;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}
.paw-goal__tag { font-size: 0.8125rem; font-weight: 600; color: var(--paw-yellow); }
.paw-goal p { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); line-height: 1.45; font-weight: 500; }

/* ---------- The idea: three features, each with a live UI fragment ---------- */
.paw-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.paw-feature { display: grid; grid-template-rows: 1fr auto; gap: 22px; }
.paw-feature__plate {
  display: grid;
  align-items: center;
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: var(--paw-radius);
  background: var(--paw-sky-pale);
}
.paw-feature:nth-child(2) .paw-feature__plate { background: var(--paw-yellow-50); }
.paw-feature:nth-child(3) .paw-feature__plate { background: var(--paw-salmon-50); }
.paw-feature h3 { font-size: 1.1875rem; font-weight: 600; }
.paw-feature p { margin-top: 8px; font-size: 0.9375rem; line-height: 1.65; }

/* Role list */
.paw-role { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--paw-line); }
.paw-role li { padding: 22px 24px 22px 0; border-bottom: 1px solid var(--paw-line); }
.paw-role li:not(:nth-child(3n + 1)) { padding-left: 24px; border-left: 1px solid var(--paw-line); }
.paw-role h3 { font-size: 1rem; font-weight: 600; }
.paw-role p { margin-top: 6px; font-size: 0.9375rem; line-height: 1.6; }

/* Process steps */
.paw-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; position: relative; }
.paw-steps::before { content: ""; position: absolute; left: 28px; right: 28px; top: 27px; height: 2px; background: repeating-linear-gradient(90deg, var(--paw-sky) 0 8px, transparent 8px 14px); }
.paw-step { position: relative; }
.paw-step__dot { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--paw-sky); color: var(--paw-navy); font-weight: 600; }
.paw-step:nth-child(even) .paw-step__dot { box-shadow: inset 0 0 0 2px var(--paw-yellow); }
.paw-step h3 { margin-top: 18px; font-size: 1.0625rem; font-weight: 600; }
.paw-step p { margin-top: 6px; font-size: 0.875rem; line-height: 1.6; }

/* Research */
.paw-methods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.paw-methods li { padding: 7px 14px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--paw-line); font-size: 0.8125rem; font-weight: 500; color: var(--paw-navy); }
.paw-findings { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.paw-findings > * { grid-column: span 2; }
.paw-findings > :nth-child(4), .paw-findings > :nth-child(5) { grid-column: span 3; }

/* Competitive table */
.paw-landscape { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 2fr); gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: clamp(56px, 7vw, 96px); }
.paw-landscape h3 { margin-top: 14px; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 600; line-height: 1.2; }
.paw-landscape p { margin-top: 14px; }
.paw-table-wrap { overflow-x: auto; border-radius: var(--paw-radius); background: #fff; box-shadow: 0 0 0 1px var(--paw-line); scrollbar-width: thin; }
.paw-compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.875rem; }
.paw-compare th, .paw-compare td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--paw-line); }
.paw-compare tr:last-child > * { border-bottom: 0; }
.paw-compare thead th { font-weight: 600; color: var(--paw-navy); font-size: 0.875rem; vertical-align: bottom; padding-top: 20px; line-height: 1.3; }
.paw-compare tbody th { text-align: left; font-weight: 500; color: var(--paw-ink); width: 24%; }
.paw-compare .is-us { background: var(--paw-sky-50); }
.paw-compare thead .is-us { background: var(--paw-navy); color: #fff; }
.paw-compare .focus td { font-size: 0.78rem; line-height: 1.45; color: var(--paw-muted); text-align: left; vertical-align: top; }
.paw-yes, .paw-no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.paw-yes { background: var(--paw-sky-pale); color: var(--paw-navy); }
.paw-no { background: var(--paw-salmon-50); color: #B4513A; }
.paw-yes svg, .paw-no svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Tabs ---------- */
.paw-tabs__list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--paw-line);
  margin-bottom: 28px;
}
.paw-section--sky .paw-tabs__list { background: rgba(255, 255, 255, 0.8); }
.paw-tabs__list button {
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--paw-font);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--paw-navy);
  transition: background-color 300ms var(--ease), color 300ms var(--ease);
}
.paw-tabs__list button:hover { background: var(--paw-sky-pale); }
.paw-tabs__list button[aria-selected="true"] { background: var(--paw-navy); color: #fff; }
.paw-tabs__panel[hidden] { display: none; }
.paw-tabs__panel { animation: paw-fade 500ms var(--ease-out); }
@keyframes paw-fade { from { opacity: 0; transform: translateY(8px); } }
.paw-section--navy .paw-tabs__list { background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.paw-section--navy .paw-tabs__list button { color: #fff; }
.paw-section--navy .paw-tabs__list button:hover { background: rgba(255, 255, 255, 0.1); }
.paw-section--navy .paw-tabs__list button[aria-selected="true"] { background: var(--paw-yellow); color: var(--paw-navy); }

/* ---------- Persona cards ---------- */
.paw-pcard {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  border-radius: var(--paw-radius);
  background: #fff;
  box-shadow: 0 0 0 1px var(--paw-line), 0 24px 48px -36px rgba(31, 62, 91, 0.35);
  overflow: hidden;
}
.paw-pcard__side { padding: 20px; background: var(--paw-yellow-50); display: grid; gap: 20px; align-content: start; }
.paw-pcard__photo { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 25%; border-radius: 14px; }
.paw-pcard__attrs { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 0.875rem; }
.paw-pcard__attrs dt { color: var(--paw-muted); }
.paw-pcard__attrs dd { color: var(--paw-ink); font-weight: 500; }
.paw-pcard__meter { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--paw-line); }
.paw-pcard__meter p { font-size: 0.8125rem; font-weight: 600; color: var(--paw-navy); }
.paw-meter { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; font-size: 0.8125rem; color: var(--paw-ink-2); }
.paw-meter span { display: flex; gap: 5px; }
.paw-meter i { width: 10px; height: 10px; border-radius: 50%; background: rgba(31, 62, 91, 0.14); }
.paw-meter i.on { background: var(--paw-navy); }
.paw-pcard__main { padding: clamp(24px, 3.4vw, 44px); display: grid; gap: 22px; align-content: start; }
.paw-pcard__main h3 { font-size: 1.75rem; font-weight: 600; line-height: 1.15; }
.paw-pcard__who { margin-top: 4px; font-size: 0.9375rem; color: var(--paw-muted); }
.paw-pcard__block h4 { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; }
.paw-pcard__block h4::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--paw-yellow); }
.paw-pcard__block p { margin-top: 6px; line-height: 1.7; }
.paw-pcard__need { padding: 18px 20px; border-radius: 14px; background: var(--paw-sky-50); }
.paw-pcard__need p { color: var(--paw-ink); }
.paw-pcard__main { align-content: space-between; }
.paw-pcard__block p { font-size: 1rem; }
.paw-pcard__helps { padding-top: 20px; border-top: 1px solid var(--paw-line); }
.paw-pcard__helps p { font-size: 0.8125rem; font-weight: 600; color: var(--paw-muted); }
.paw-pcard__helps ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.paw-pcard__helps li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--paw-navy); color: #fff; font-size: 0.8125rem; font-weight: 500; }
.paw-pcard__helps .x-i { width: 18px; height: 18px; fill: none; stroke: var(--paw-yellow); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Site map (native) ---------- */
.paw-sitemap { padding: clamp(24px, 4vw, 48px); border-radius: var(--paw-radius); background: #fff; box-shadow: 0 0 0 1px var(--paw-line); }
.paw-sm__root { display: grid; justify-items: center; }
.paw-node { display: inline-block; padding: 12px 18px; border-radius: 12px; background: var(--paw-sky-pale); color: var(--paw-navy); font-size: 0.875rem; font-weight: 600; text-align: center; line-height: 1.35; }
.paw-node--home { background: var(--paw-navy); color: #fff; }
.paw-node--sub { display: block; background: #fff; box-shadow: inset 0 0 0 1.5px var(--paw-sky); font-weight: 500; color: var(--paw-ink); text-align: left; }
.paw-node--sub small { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--paw-muted); font-weight: 400; }
.paw-vline { width: 2px; height: 28px; background: var(--paw-sky); }
.paw-sm__cols { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; padding-top: 28px; }
.paw-sm__cols::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 2px; background: var(--paw-sky); }
.paw-sm__col { position: relative; display: grid; align-content: start; }
.paw-sm__col::before { content: ""; position: absolute; top: -28px; left: 50%; width: 2px; height: 28px; background: var(--paw-sky); }
.paw-sm__col > .paw-node:first-child { display: block; }
.paw-sm__col .paw-vline { justify-self: center; height: 20px; }

/* ---------- Onboarding (native) ---------- */
.paw-onb { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; counter-reset: onb; }
.paw-onb li { counter-increment: onb; padding: 18px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--paw-line); }
.paw-onb li::before { content: counter(onb, decimal-leading-zero); display: block; font-size: 0.75rem; font-weight: 600; color: var(--paw-navy-2); }
.paw-onb li:nth-child(n + 6) { background: var(--paw-sky-50); box-shadow: none; }
.paw-onb h4 { margin-top: 10px; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.paw-onb p { margin-top: 6px; font-size: 0.8125rem; line-height: 1.55; color: var(--paw-muted); }


/* ---------- User flows (native) ---------- */
.paw-flow { padding: clamp(22px, 3.5vw, 44px); border-radius: var(--paw-radius); background: #fff; box-shadow: 0 0 0 1px var(--paw-line); }
.paw-flow__legend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--paw-line); }
.paw-flow__legend .paw-fn { font-size: 0.75rem; padding: 6px 12px; }
.paw-fn {
  display: inline-block;
  max-width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--paw-sky);
  color: var(--paw-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
}
.paw-fn small { display: block; margin-top: 3px; font-size: 0.75rem; font-weight: 400; color: var(--paw-muted); }
.paw-fn--page { background: var(--paw-sky-pale); box-shadow: none; color: var(--paw-navy); }
.paw-fn--entry { background: var(--paw-salmon-50); box-shadow: inset 0 0 0 1.5px var(--paw-salmon); border-radius: 999px; }
.paw-fn--act { background: var(--paw-yellow-50); box-shadow: inset 0 0 0 1.5px var(--paw-yellow); border-radius: 999px; }
.paw-flow__root { position: relative; padding-bottom: 24px; }
.paw-flow__root::after { content: ""; position: absolute; left: 15px; bottom: 0; width: 2px; height: 24px; background: var(--paw-sky); }
.paw-flow__lanes { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 24px; }
.paw-lane { position: relative; padding-top: 22px; }
.paw-lane::before { content: ""; position: absolute; top: 0; left: 15px; width: calc(100% + 24px); height: 2px; background: var(--paw-sky); }
.paw-lane:last-child::before { display: none; }
.paw-lane::after { content: ""; position: absolute; top: 0; left: 15px; width: 2px; height: 22px; background: var(--paw-sky); }
.paw-lane li { position: relative; }
.paw-lane li + li { padding-top: 16px; }
.paw-lane li + li::before { content: ""; position: absolute; top: 0; left: 15px; width: 2px; height: 16px; background: var(--paw-sky); }
.paw-lane__note { display: inline-block; margin-left: 10px; font-style: normal; font-size: 0.75rem; color: var(--paw-muted); }

/* Wireframes: recreated lo-fi screens on a quiet plate */
.paw-wires { padding: clamp(18px, 3vw, 40px); border-radius: var(--paw-radius); background: #EDEDED; }

/* ---------- Brand ---------- */
.paw-brand { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.paw-brand__card { padding: 28px; border-radius: var(--paw-radius); background: #fff; box-shadow: 0 0 0 1px var(--paw-line); }
.paw-brand__card h3 { font-size: 0.875rem; font-weight: 600; color: var(--paw-muted); letter-spacing: 0; }
.paw-brand__logo { margin-top: 22px; width: min(320px, 90%); height: auto; }
.paw-voice { display: grid; gap: 10px; margin-top: 22px; }
.paw-voice span { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-radius: var(--paw-radius-sm); font-size: 1.5rem; font-weight: 600; }
.paw-voice span small { font-size: 0.8125rem; font-weight: 500; opacity: 0.8; }
.paw-voice .harmony { background: var(--paw-sky); color: var(--paw-navy); }
.paw-voice .lively { background: var(--paw-yellow); color: var(--paw-navy); }
.paw-palette { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.paw-swatch { display: grid; gap: 8px; }
.paw-swatch i { display: block; aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(31, 62, 91, 0.1); }
.paw-swatch b { font-size: 0.8125rem; font-weight: 600; color: var(--paw-ink); line-height: 1.3; }
.paw-swatch span { font-family: var(--font-mono); font-size: 0.72rem; color: var(--paw-muted); }
.paw-type { margin-top: 22px; display: grid; gap: 4px; color: var(--paw-ink); }
.paw-type span { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.2; }
.paw-brand__wide { grid-column: 1 / -1; }
.paw-kit { border-radius: var(--paw-radius); overflow: hidden; box-shadow: 0 0 0 1px var(--paw-line); background: #F6F4EF; }

/* ---------- Final design ---------- */
.paw-note {
  display: flex;
  gap: 14px;
  align-items: baseline;
  max-width: 780px;
  margin-bottom: 32px;
  padding: 16px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.paw-note b { color: var(--paw-yellow); font-weight: 600; white-space: nowrap; }
.paw-shot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 236px); gap: clamp(20px, 3vw, 40px); align-items: center; }
.paw-shot__desc { margin-bottom: 26px; max-width: 64ch; font-size: 1.0625rem; line-height: 1.7; color: rgba(255, 255, 255, 0.86); }

/* ---------- Data + business ---------- */
.paw-data { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.paw-data__list { display: grid; gap: 16px; }
.paw-data__art { padding: clamp(16px, 2.5vw, 32px); border-radius: var(--paw-radius); background: var(--paw-sky-pale); }

.paw-tools { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 20px; font-weight: 500; color: var(--paw-navy); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .paw-features { grid-template-columns: 1fr; max-width: 760px; }
  .paw-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; align-items: center; gap: 28px; }
}
@media (max-width: 980px) {
  .paw-hero__grid { grid-template-columns: 1fr; }
  .paw-hero { background: radial-gradient(ellipse 130% 36% at 50% 100%, rgba(146, 206, 217, 0.95) 0 60%, transparent 60.2%), var(--paw-navy); }
  .paw-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paw-facts > div:nth-child(3) { border-left: 0; }
  .paw-facts > div:nth-child(n + 3) { border-top: 1px solid var(--paw-line); }
  .paw-grid-3, .paw-role { grid-template-columns: 1fr 1fr; }
  .paw-role li:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .paw-role li:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--paw-line); }
  .paw-steps { grid-template-columns: 1fr; gap: 22px; }
  .paw-steps::before { left: 27px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--paw-sky) 0 8px, transparent 8px 14px); }
  .paw-step { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; }
  .paw-step h3 { margin-top: 4px; }
  .paw-step p { grid-column: 2; }
  .paw-findings { grid-template-columns: 1fr 1fr; }
  .paw-findings > * { grid-column: auto !important; }
  .paw-landscape, .paw-data, .paw-brand { grid-template-columns: minmax(0, 1fr); }
  .paw-palette { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .paw-onb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paw-onb li:nth-child(n + 6) { background: #fff; box-shadow: 0 0 0 1px var(--paw-line); }
  .paw-pcard { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
  .paw-sm__root { justify-items: start; }
  .paw-sm__root .paw-vline { margin-left: 24px; }
  .paw-sm__cols { grid-template-columns: 1fr; gap: 12px; padding-top: 0; margin-left: 25px; padding-left: 24px; }
  .paw-sm__cols::before { top: 0; bottom: 22px; left: 0; right: auto; width: 2px; height: auto; }
  .paw-sm__col { justify-items: start; }
  .paw-sm__col::before { top: 21px; left: -24px; width: 24px; height: 2px; }
  .paw-sm__col > .paw-node { max-width: 360px; width: 100%; text-align: left; }
  .paw-sm__col .paw-vline { justify-self: start; margin-left: 24px; }
}
@media (max-width: 900px) {
  .paw-flow__lanes { grid-template-columns: 1fr; gap: 28px; }
  .paw-flow__lanes::before { content: ""; position: absolute; left: 15px; top: 0; bottom: 24px; width: 2px; background: var(--paw-sky); }
  .paw-lane::before { display: none; }
}
@media (max-width: 720px) {
  .paw-pcard { grid-template-columns: 1fr; }
  .paw-pcard__side { grid-template-columns: 120px 1fr; align-items: start; }
  .paw-pcard__meter { grid-column: 1 / -1; }
  .paw-shot { grid-template-columns: 1fr; }
  .paw-shot > :last-child { width: min(260px, 72%); margin-inline: auto; }
}
@media (max-width: 640px) {
  .paw-grid-3, .paw-grid-2, .paw-role, .paw-findings, .paw-facts, .paw-onb { grid-template-columns: 1fr; }
  .paw-facts > div + div { border-left: 0; border-top: 1px solid var(--paw-line); }
  .paw-role li:nth-child(even) { padding-left: 0; border-left: 0; }
  .paw-goal { grid-template-columns: 1fr; }
  .paw-feature { grid-template-columns: 1fr; }
  .paw-tabs__list { border-radius: 18px; }
  .paw-comp > .pgx-browser { width: 92%; }
  .paw-comp__phone { width: 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .paw-tabs__panel { animation: none; }
  .paw-card { transition: none; }
}