@layer base, frame, blocks, pages;

@layer base {
  :root {
    --lp-plum: #62348d; --lp-plum-deep: #3a1a5c; --lp-pink: #e6195a; --lp-sun: #ffd000; --lp-sun-deep: #ffb400;
    --lp-cream: #fff3bf; --lp-teal: #00c7b1; --lp-sky: #7fd6f2; --lp-lilac: #c9b3e6; --lp-mint: #bfeede; --lp-rose: #ffc7da;
    --lp-ink: #2b1a3f; --lp-soft: #6a5a7c; --lp-paper: #fff; --lp-wide: 1240px; --lp-pad: clamp(16px, 4vw, 40px);
    --lp-head: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif; --lp-text: "Nunito", system-ui, sans-serif;
  }
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body { margin: 0; font: 400 17px/1.6 var(--lp-text); color: var(--lp-ink); background: var(--lp-paper); overflow-x: clip; }
  img { max-inline-size: 100%; block-size: auto; display: block; }
  picture { display: block; }
  a { color: var(--lp-plum); }
  h1, h2, h3 { font-family: var(--lp-head); font-weight: 400; line-height: 1.08; color: var(--lp-plum); margin: 0 0 .5em; letter-spacing: .01em; }
  h1 { font-size: clamp(2.1rem, 5.4vw, 3.9rem); }
  h2 { font-size: clamp(1.7rem, 3.8vw, 2.8rem); }
  h3 { font-size: 1.3rem; }
  p { margin: 0 0 1em; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  button { font: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
  [hidden] { display: none !important; }
  .lp-skip { position: absolute; inset-inline-start: -999px; }
  .lp-skip:focus { inset-inline-start: 12px; inset-block-start: 12px; background: #fff; padding: 8px 14px; z-index: 99; border-radius: 12px; }
  :focus-visible { outline: 3px solid var(--lp-pink); outline-offset: 3px; }
}

@layer frame {
  .lp-top { position: sticky; inset-block-start: 0; z-index: 40; padding: 14px var(--lp-pad); background: linear-gradient(var(--lp-sun) 62%, transparent); }
  .lp-top__pill { max-inline-size: var(--lp-wide); margin-inline: auto; background: #fff; border-radius: 999px; padding: 8px 14px 8px 26px;
    display: flex; align-items: center; gap: 18px; box-shadow: 0 6px 0 rgba(98, 52, 141, .14); position: relative; }
  .lp-top__logo img { inline-size: 74px; }
  .lp-top__nav { margin-inline-start: auto; }
  .lp-top__nav ul { display: flex; gap: 2px; }
  .lp-top__nav a { display: block; padding: 9px 12px; border-radius: 999px; font-weight: 800; font-size: .95rem; text-decoration: none; color: var(--lp-ink); white-space: nowrap; }
  .lp-top__nav a:hover { background: var(--lp-cream); color: var(--lp-plum); }
  .lp-top__check { position: absolute; opacity: 0; pointer-events: none; }
  .lp-top__burger { display: none; }
  .lp-buy { display: block; transition: transform .15s; }
  .lp-buy:hover { transform: translateY(-2px) scale(1.015); }
  .lp-buy:active { transform: translateY(2px); }
  .lp-buy img { inline-size: 100%; }
  .lp-buy--head { inline-size: 196px; flex: none; }
  @media (max-width: 1120px) {
    .lp-top__pill { padding-inline-start: 18px; gap: 10px; }
    .lp-top__burger { display: grid; gap: 5px; padding: 12px 10px; margin-inline-start: auto; order: 3; cursor: pointer; }
    .lp-top__burger span { display: block; inline-size: 26px; block-size: 4px; border-radius: 4px; background: var(--lp-plum); }
    .lp-buy--head { order: 2; margin-inline-start: auto; inline-size: 176px; }
    .lp-top__burger { margin-inline-start: 0; }
    .lp-top__nav { display: none; position: absolute; inset-inline: 0; inset-block-start: calc(100% + 10px); background: #fff; border-radius: 28px; padding: 14px; box-shadow: 0 10px 30px rgba(43, 26, 63, .25); }
    .lp-top__check:checked ~ .lp-top__nav { display: block; }
    .lp-top__nav ul { flex-direction: column; }
    .lp-top__nav a { font-size: 1.05rem; padding: 12px 16px; }
    .lp-top__logo img { inline-size: 60px; }
  }

  .lp-foot { background: var(--lp-teal); color: #fff; position: relative; margin-block-start: 110px; }
  .lp-foot__slant { position: absolute; inset-inline: 0; inset-block-end: calc(100% - 1px); inline-size: 100%; block-size: 70px; fill: var(--lp-teal); }
  .lp-foot__in { max-inline-size: var(--lp-wide); margin-inline: auto; padding: 30px var(--lp-pad) 44px; display: grid; gap: 34px; grid-template-columns: 1.4fr 1fr 1.2fr .8fr; }
  .lp-foot__brand img { inline-size: 170px; margin-block-end: 14px; }
  .lp-foot__brand p { font-weight: 700; max-inline-size: 30ch; }
  .lp-foot address { font-style: normal; font-size: .95rem; line-height: 1.55; }
  .lp-foot a { color: #fff; text-decoration: none; font-weight: 700; }
  .lp-foot a:hover { text-decoration: underline; }
  .lp-foot__col h2 { color: #fff; font: 800 1.15rem var(--lp-text); margin-block-end: 12px; }
  .lp-foot__col li { margin-block-end: 9px; font-size: .97rem; line-height: 1.35; }
  .lp-foot__rainbow { display: grid; grid-template-columns: repeat(6, 1fr); block-size: 12px; }
  .lp-foot__rainbow i:nth-child(1) { background: #0096d6; } .lp-foot__rainbow i:nth-child(2) { background: var(--lp-plum); }
  .lp-foot__rainbow i:nth-child(3) { background: #ff9a1f; } .lp-foot__rainbow i:nth-child(4) { background: var(--lp-pink); }
  .lp-foot__rainbow i:nth-child(5) { background: #c4dc27; } .lp-foot__rainbow i:nth-child(6) { background: var(--lp-sun); }
  .lp-foot__legal { margin: 0; padding: 16px var(--lp-pad); text-align: center; font-size: .85rem; background: #fff; color: var(--lp-soft); }
  @media (max-width: 860px) { .lp-foot__in { grid-template-columns: 1fr 1fr; } .lp-foot__brand { grid-column: 1 / -1; } }
  @media (max-width: 480px) { .lp-foot__in { grid-template-columns: 1fr; } }
}

@layer blocks {
  .lp-hd { text-align: center; max-inline-size: 760px; margin: 0 auto 34px; }
  .lp-hd p { color: var(--lp-soft); font-size: 1.08rem; }
  .lp-center { text-align: center; margin-block-start: 34px; }
  .lp-kick { font-weight: 800; text-transform: uppercase; letter-spacing: .09em; font-size: .82rem; color: var(--lp-pink); margin-block-end: .6em; }
  .lp-kick a { color: inherit; text-decoration: none; }
  .lp-pill { display: inline-block; background: var(--lp-pink); color: #fff; font-weight: 800; text-decoration: none; padding: 13px 28px; border-radius: 999px; box-shadow: 0 5px 0 #a80f41; transition: transform .15s; }
  .lp-pill:hover { transform: translateY(-2px); }
  .lp-pill--alt { background: #fff; color: var(--lp-pink); box-shadow: 0 5px 0 rgba(0, 0, 0, .18); }
  .lp-chip { display: inline-block; padding: 9px 20px; border-radius: 999px; background: #fff; border: 3px solid var(--lp-plum); color: var(--lp-plum); font-weight: 800; text-decoration: none; font-size: .98rem; }
  .lp-chip:hover, .lp-chip.is-on { background: var(--lp-plum); color: #fff; }
  .lp-stars { display: inline-block; inline-size: 5.4em; block-size: 1.02em; background: #e3dcea; vertical-align: -.14em;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath d='M10 0l3.1 6.3 6.9 1-5 4.9 1.2 6.8L10 15.8 3.8 19l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E") 0 0 / 1.08em 100% repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath d='M10 0l3.1 6.3 6.9 1-5 4.9 1.2 6.8L10 15.8 3.8 19l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E") 0 0 / 1.08em 100% repeat-x; }
  .lp-stars i { display: block; block-size: 100%; background: #ff9a1f; }
  .lp-wave { display: block; inline-size: 100%; block-size: 46px; fill: var(--lp-sun); margin-block-end: -1px; }
  .lp-wave--flip { transform: scaleY(-1); margin-block: -1px 0; }

  .lp-crumbs { max-inline-size: var(--lp-wide); margin: 8px auto 0; padding: 0 var(--lp-pad); font-size: .9rem; font-weight: 700; }
  .lp-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; }
  .lp-crumbs li + li::before { content: "\203A"; margin-inline-end: 8px; color: var(--lp-soft); }
  .lp-crumbs a { text-decoration: none; }
  .lp-crumbs [aria-current] { color: var(--lp-soft); }

  .lp-grid { max-inline-size: var(--lp-wide); margin-inline: auto; display: grid; gap: 22px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @media (max-width: 1060px) { .lp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 760px) { .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
  .lp-pet { background: #fff; border: 4px solid var(--lp-sun); border-radius: 30px; padding: 14px 14px 12px; display: flex; flex-direction: column; text-align: center; transition: transform .18s, box-shadow .18s; }
  .lp-pet:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--lp-cream); }
  .lp-pet__shot { position: relative; display: block; border-radius: 20px; overflow: hidden; aspect-ratio: 1; background: #fff; }
  .lp-pet__shot img { inline-size: 100%; block-size: 100%; object-fit: contain; }
  .lp-pet__tag { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; background: var(--lp-pink); color: #fff; font-weight: 800; font-size: .74rem; padding: 4px 10px; border-radius: 999px; }
  .lp-pet__fam { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-soft); margin: 12px 0 4px; }
  .lp-pet__name { font-size: 1.12rem; margin: 0 0 8px; flex: 1; }
  .lp-pet__name a { color: var(--lp-ink); text-decoration: none; }
  .lp-pet__rate { margin: 0 0 4px; font-size: .86rem; color: var(--lp-soft); display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; }
  .lp-pet__price { font: 400 1.5rem var(--lp-head); color: var(--lp-plum); margin: 0 0 8px; }
  .lp-buy--card { inline-size: 100%; }
  @media (max-width: 760px) { .lp-pet { padding: 8px 8px 8px; border-radius: 22px; border-width: 3px; } .lp-pet__name { font-size: .98rem; } .lp-pet__tag { font-size: .66rem; } }

  .lp-range { padding: 56px var(--lp-pad) 20px; }
  .lp-animals { text-align: center; padding: 30px var(--lp-pad) 0; max-inline-size: 980px; margin-inline: auto; }
  .lp-animals ul { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
  .lp-animals h3 { margin-block-end: 16px; }
  .lp-animals--foot { padding-block: 40px 0; }

  .lp-ask { max-inline-size: 860px; margin: 0 auto 12px; background: var(--lp-cream); border-radius: 22px; padding: 0 24px; }
  .lp-ask summary { cursor: pointer; font: 400 1.18rem var(--lp-head); color: var(--lp-plum); padding: 18px 34px 18px 0; list-style: none; position: relative; }
  .lp-ask summary::-webkit-details-marker { display: none; }
  .lp-ask summary::after { content: "+"; position: absolute; inset-inline-end: 0; inset-block-start: 10px; inline-size: 34px; block-size: 34px; border-radius: 50%; background: #fff; color: var(--lp-pink); display: grid; place-items: center; font: 800 1.4rem var(--lp-text); }
  .lp-ask[open] summary::after { content: "\2212"; }
  .lp-ask p { padding-block-end: 20px; margin: 0; }

  .lp-hub { padding: 70px var(--lp-pad) 0; }
  .lp-hub__in { max-inline-size: var(--lp-wide); margin-inline: auto; background: var(--lp-sun); border-radius: clamp(40px, 9vw, 120px); padding: clamp(36px, 6vw, 70px) 24px; text-align: center; display: grid; justify-items: center; }
  .lp-hub__in > img { inline-size: 130px; }
  .lp-hub__in p { font-size: 1.12rem; font-weight: 700; }
  .lp-buy--hub { inline-size: min(100%, 400px); }

  .lp-tbl { inline-size: 100%; border-collapse: separate; border-spacing: 0 8px; margin-block: 8px 24px; }
  .lp-tbl th, .lp-tbl td { text-align: start; padding: 14px 18px; background: var(--lp-cream); vertical-align: top; }
  .lp-tbl th { border-radius: 18px 0 0 18px; color: var(--lp-plum); font-weight: 800; inline-size: 30%; }
  .lp-tbl td { border-radius: 0 18px 18px 0; }
  @media (max-width: 560px) { .lp-tbl th, .lp-tbl td { display: block; inline-size: 100%; border-radius: 18px 18px 0 0; } .lp-tbl td { border-radius: 0 0 18px 18px; padding-block-start: 0; } }
}

@layer pages {
  /* home */
  .lp-hero { background: var(--lp-sun-deep) url(/img/brand/little-live-pets-awning.webp) center top / cover no-repeat; margin-block-start: -92px; padding: 150px var(--lp-pad) 60px; }
  .lp-hero__in { max-inline-size: var(--lp-wide); margin-inline: auto; display: grid; grid-template-columns: 1fr 1.05fr; gap: 30px; align-items: center; }
  .lp-hero__logo { inline-size: min(340px, 62vw); margin-block-end: 14px; }
  .lp-hero h1 { color: var(--lp-plum); font-size: clamp(2rem, 4.6vw, 3.5rem); }
  .lp-hero__say p { font-size: 1.16rem; font-weight: 700; max-inline-size: 34ch; }
  .lp-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 22px; }
  .lp-buy--hero, .lp-see { inline-size: min(100%, 300px); display: block; }
  .lp-see img { inline-size: 100%; }
  .lp-hero__art img { inline-size: 100%; filter: drop-shadow(0 18px 18px rgba(120, 70, 0, .28)); }
  @media (max-width: 820px) { .lp-hero { padding-block-start: 130px; } .lp-hero__in { grid-template-columns: 1fr; text-align: center; } .lp-hero__logo { margin-inline: auto; } .lp-hero__say p { margin-inline: auto; } .lp-hero__cta { justify-content: center; } .lp-hero__art { max-inline-size: 440px; margin-inline: auto; order: -1; } .lp-hero__logo { inline-size: 210px; } }

  .lp-facts { background: var(--lp-plum); color: #fff; padding: 20px var(--lp-pad); }
  .lp-facts ul { max-inline-size: var(--lp-wide); margin-inline: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; }
  .lp-facts b { display: block; font: 400 1.4rem var(--lp-head); color: var(--lp-sun); }
  .lp-facts span { font-size: .92rem; font-weight: 600; }
  @media (max-width: 720px) { .lp-facts ul { grid-template-columns: 1fr 1fr; } }

  .lp-intro { text-align: center; max-inline-size: 820px; margin-inline: auto; padding: 64px var(--lp-pad) 40px; }
  .lp-intro p { font-size: 1.12rem; }
  .lp-intro--page { padding-block: 30px 6px; }

  .lp-tri { background: var(--lp-sun) url(/img/brand/little-live-pets-doodle-pattern.webp) center / 900px auto; padding: 20px var(--lp-pad) 40px; }
  .lp-tri__grid { max-inline-size: var(--lp-wide); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .lp-tri__card { background: var(--lp-cream); border-radius: 44px; overflow: hidden; display: flex; flex-direction: column; }
  .lp-tri__txt { padding: 30px 30px 20px; text-align: center; }
  .lp-tri__txt p { margin: 0; font-weight: 600; }
  .lp-tri__card picture { flex: 1; }
  .lp-tri__card img { inline-size: 100%; block-size: 100%; object-fit: cover; aspect-ratio: 16 / 10; object-position: center 85%; }
  .lp-tri__card--wide { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
  .lp-tri__card--wide .lp-tri__txt { flex: 0 0 46%; align-self: center; padding: 40px; }
  .lp-tri__card--wide h3 { font-size: clamp(1.5rem, 3vw, 2.3rem); }
  @media (max-width: 760px) { .lp-tri__grid { grid-template-columns: 1fr; } .lp-tri__card--wide { flex-direction: column; } .lp-tri__card--wide .lp-tri__txt { padding: 28px 24px 18px; } .lp-tri__card { border-radius: 32px; } }

  .lp-doors { padding: 64px var(--lp-pad) 10px; }
  .lp-doors__grid { max-inline-size: var(--lp-wide); margin-inline: auto; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
  .lp-door { position: relative; display: block; border-radius: 34px; overflow: hidden; text-decoration: none; background: var(--lp-sun); padding: 12px 12px 0; transition: transform .18s; }
  .lp-door:hover { transform: translateY(-4px) rotate(-.6deg); }
  .lp-door img { inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 24px; }
  .lp-door__txt { display: block; padding: 14px 64px 18px 10px; }
  .lp-door__txt b { display: block; font: 400 1.35rem/1.1 var(--lp-head); color: var(--lp-plum); }
  .lp-door__txt small { font-weight: 800; color: var(--lp-ink); opacity: .75; }
  .lp-door__go { position: absolute; inset-inline-end: 16px; inset-block-end: 16px; inline-size: 44px; block-size: 44px; border-radius: 50%; background: #fff; color: var(--lp-pink); display: grid; place-items: center; font-weight: 800; font-size: 1.3rem; }
  .lp-door--mint { background: var(--lp-mint); } .lp-door--pink { background: var(--lp-rose); } .lp-door--aqua { background: #9fe6df; }
  .lp-door--sky { background: var(--lp-sky); } .lp-door--lilac { background: var(--lp-lilac); }

  .lp-spot { padding: 60px var(--lp-pad) 0; }
  .lp-spot__in { max-inline-size: var(--lp-wide); margin-inline: auto; border-radius: 44px; background: linear-gradient(175deg, #b79ad6 10%, #48cfc8 78%); padding: clamp(24px, 4vw, 48px); display: grid; grid-template-columns: .8fr 1.6fr; gap: 28px; align-items: center; border-block-end: 14px solid var(--lp-sun); }
  .lp-spot h2 { color: #fff; text-shadow: 0 3px 0 var(--lp-plum); }
  .lp-spot__say p { color: #fff; font-weight: 700; }
  .lp-spot__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .lp-spot__card { background: #fff; border: 4px solid var(--lp-teal); border-radius: 24px; padding: 12px; text-align: center; text-decoration: none; color: var(--lp-ink); display: grid; gap: 2px; transition: transform .18s; }
  .lp-spot__card:hover { transform: translateY(-4px); }
  .lp-spot__card img { aspect-ratio: 1; object-fit: contain; inline-size: 100%; }
  .lp-spot__card small { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--lp-soft); }
  .lp-spot__card b { font: 400 1.02rem/1.15 var(--lp-head); }
  .lp-spot__card span { font-weight: 800; color: var(--lp-plum); }
  @media (max-width: 900px) { .lp-spot__in { grid-template-columns: 1fr; text-align: center; } }
  @media (max-width: 560px) { .lp-spot__cards { grid-template-columns: 1fr 1fr; } .lp-spot__card:last-child { grid-column: 1 / -1; max-inline-size: 60%; margin-inline: auto; } }

  .lp-steps { background: var(--lp-pink); color: #fff; margin-block-start: 70px; padding: 0 var(--lp-pad) 60px; }
  .lp-steps__in { max-inline-size: var(--lp-wide); margin-inline: auto; text-align: center; }
  .lp-steps__in > picture img { inline-size: 100%; border-radius: 0 0 40px 40px; margin-block-end: 44px; }
  .lp-steps h2 { color: #fff; }
  .lp-steps ol { display: grid; grid-template-columns: repeat(3, 1fr); margin-block: 30px 34px; text-align: start; }
  .lp-steps li { padding: 6px 28px; border-inline-start: 2px solid rgba(255, 255, 255, .45); }
  .lp-steps li:first-child { border: 0; }
  .lp-steps__n { display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 50%; background: #fff; color: var(--lp-pink); font: 400 1.5rem var(--lp-head); margin-block-end: 12px; }
  .lp-steps h3 { color: var(--lp-sun); font-size: 1.5rem; }
  .lp-steps li p { margin: 0; font-weight: 600; }
  .lp-steps__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
  .lp-steps .lp-pill { background: var(--lp-plum); box-shadow: 0 5px 0 var(--lp-plum-deep); }
  .lp-steps .lp-pill--alt { background: #fff; color: var(--lp-pink); box-shadow: 0 5px 0 rgba(0, 0, 0, .2); }
  @media (max-width: 760px) { .lp-steps ol { grid-template-columns: 1fr; gap: 22px; } .lp-steps li { border: 0; padding-inline: 6px; } .lp-steps__in > picture img { border-radius: 0 0 20px 20px; } }

  .lp-saids { padding: 64px var(--lp-pad) 0; }
  .lp-saids__grid { max-inline-size: var(--lp-wide); margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .lp-said { margin: 0; background: var(--lp-cream); border-radius: 30px; padding: 24px; display: flex; flex-direction: column; }
  .lp-said__stars { margin: 0 0 8px; font-size: 1.15rem; }
  .lp-said blockquote { margin: 0; flex: 1; }
  .lp-said blockquote strong { font: 400 1.2rem var(--lp-head); color: var(--lp-plum); display: block; margin-block-end: 6px; }
  .lp-said figcaption { font-size: .88rem; color: var(--lp-soft); }
  .lp-said figcaption b { color: var(--lp-ink); }
  @media (max-width: 900px) { .lp-saids__grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .lp-saids__grid { grid-template-columns: 1fr; } }

  .lp-notes { padding: 64px var(--lp-pad) 0; }
  .lp-notes__grid { max-inline-size: var(--lp-wide); margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .lp-note { display: grid; gap: 4px; text-decoration: none; color: var(--lp-ink); border: 4px solid var(--lp-lilac); border-radius: 30px; padding: 12px 12px 18px; align-content: start; }
  .lp-note img { border-radius: 20px; aspect-ratio: 16 / 10; object-fit: cover; inline-size: 100%; margin-block-end: 8px; }
  .lp-note small { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; color: var(--lp-pink); padding-inline: 8px; }
  .lp-note b { font: 400 1.3rem/1.15 var(--lp-head); color: var(--lp-plum); padding-inline: 8px; }
  .lp-note span { font-weight: 800; padding-inline: 8px; color: var(--lp-pink); }
  @media (max-width: 800px) { .lp-notes__grid { grid-template-columns: 1fr; } }

  .lp-seo { max-inline-size: var(--lp-wide); margin: 70px auto 0; padding: 0 var(--lp-pad); }
  .lp-seo h2 { text-align: center; margin-block-end: 26px; }
  .lp-seo__cols { columns: 2; column-gap: 44px; }
  .lp-seo__cols p { break-inside: avoid; }
  @media (max-width: 760px) { .lp-seo__cols { columns: 1; } }
  .lp-asks { padding: 64px var(--lp-pad) 0; }

  /* family (category) */
  .lp-fam { margin: 14px var(--lp-pad) 0; }
  .lp-fam__in { max-inline-size: var(--lp-wide); margin-inline: auto; background: var(--lp-sun); border-radius: 44px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; align-items: center; }
  .lp-fam__say { padding: clamp(24px, 4vw, 54px); }
  .lp-fam__say h1 { font-size: clamp(1.9rem, 3.8vw, 3rem); }
  .lp-fam__say > p:last-child { margin: 0; font-weight: 600; font-size: 1.06rem; }
  .lp-fam__in picture, .lp-fam__in img { block-size: 100%; inline-size: 100%; object-fit: cover; min-block-size: 260px; }
  .lp-fam--mint .lp-fam__in { background: var(--lp-mint); } .lp-fam--pink .lp-fam__in { background: var(--lp-rose); } .lp-fam--aqua .lp-fam__in { background: #9fe6df; }
  .lp-fam--sky .lp-fam__in { background: var(--lp-sky); } .lp-fam--lilac .lp-fam__in { background: var(--lp-lilac); }
  @media (max-width: 800px) { .lp-fam__in { grid-template-columns: 1fr; border-radius: 30px; } .lp-fam__in picture { order: -1; } }
  .lp-advice { max-inline-size: 860px; margin: 50px auto 0; padding: 30px clamp(20px, 4vw, 44px); background: var(--lp-cream); border-radius: 36px; inline-size: calc(100% - 2 * var(--lp-pad)); }
  .lp-advice p { margin: 0; }

  /* pet page */
  .lp-show { max-inline-size: var(--lp-wide); margin: 18px auto 0; padding: 0 var(--lp-pad); display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(22px, 4vw, 54px); align-items: start; }
  .lp-show__r { position: absolute; opacity: 0; pointer-events: none; }
  .lp-show__stage { border: 5px solid var(--lp-sun); border-radius: 40px; overflow: hidden; background: #fff; }
  .lp-show__f { display: none; aspect-ratio: 1; }
  .lp-show__f img { inline-size: 100%; block-size: 100%; object-fit: contain; }
  .lp-show__r:nth-of-type(1):checked ~ .lp-show__stage .lp-show__f:nth-child(1),
  .lp-show__r:nth-of-type(2):checked ~ .lp-show__stage .lp-show__f:nth-child(2),
  .lp-show__r:nth-of-type(3):checked ~ .lp-show__stage .lp-show__f:nth-child(3),
  .lp-show__r:nth-of-type(4):checked ~ .lp-show__stage .lp-show__f:nth-child(4) { display: block; }
  .lp-show__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-block-start: 12px; }
  .lp-show__thumbs label { border: 3px solid var(--lp-cream); border-radius: 18px; overflow: hidden; cursor: pointer; aspect-ratio: 1; background: #fff; }
  .lp-show__thumbs img { inline-size: 100%; block-size: 100%; object-fit: contain; }
  .lp-show__r:nth-of-type(1):checked ~ .lp-show__thumbs label:nth-child(1), .lp-show__r:nth-of-type(2):checked ~ .lp-show__thumbs label:nth-child(2),
  .lp-show__r:nth-of-type(3):checked ~ .lp-show__thumbs label:nth-child(3), .lp-show__r:nth-of-type(4):checked ~ .lp-show__thumbs label:nth-child(4) { border-color: var(--lp-pink); }
  .lp-show__media { position: relative; }
  .lp-show h1 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
  .lp-show__rate { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--lp-soft); font-weight: 700; font-size: .95rem; margin-block-end: 12px; }
  .lp-show__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 16px; }
  .lp-show__tags li { background: var(--lp-cream); color: var(--lp-plum); font-weight: 800; font-size: .86rem; padding: 6px 14px; border-radius: 999px; }
  .lp-show__price { font: 400 2.6rem/1 var(--lp-head); color: var(--lp-pink); margin: 0 0 4px; }
  .lp-show__when { font-size: .84rem; color: var(--lp-soft); margin-block-end: 14px; }
  .lp-buy--pdp { inline-size: min(100%, 440px); margin-block-end: 22px; }
  .lp-show__lede { font-size: 1.1rem; }
  .lp-show h2 { font-size: 1.5rem; margin-block-start: 1em; }
  .lp-show__does li { position: relative; padding: 0 0 10px 34px; }
  .lp-show__does li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 3px; inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--lp-teal); box-shadow: inset 0 0 0 5px #fff, 0 0 0 2px var(--lp-teal); }
  @media (max-width: 860px) { .lp-show { grid-template-columns: 1fr; } .lp-show__stage { border-radius: 28px; } }
  .lp-sheet { max-inline-size: var(--lp-wide); margin: 50px auto 0; padding: 0 var(--lp-pad); }
  .lp-sheet dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 18px; }
  .lp-sheet dl div { background: var(--lp-cream); border-radius: 22px; padding: 14px 18px; }
  .lp-sheet dt { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--lp-soft); }
  .lp-sheet dd { margin: 2px 0 0; font: 400 1.2rem var(--lp-head); color: var(--lp-plum); }
  .lp-sheet p { color: var(--lp-soft); font-size: .95rem; }

  /* reading pages */
  .lp-read { max-inline-size: 860px; margin: 22px auto 0; padding: 0 var(--lp-pad); }
  .lp-read > picture img { border-radius: 36px; margin-block: 10px 30px; inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
  .lp-read h2 { font-size: 1.6rem; margin-block-start: 1.3em; }
  .lp-read__lead { font-size: 1.22rem; font-weight: 700; color: var(--lp-plum); }
  .lp-box { background: var(--lp-cream); border-radius: 30px; padding: 24px 28px; margin-block-start: 18px; }
  .lp-box h2 { margin-block-start: 0; }
  .lp-box p:last-child { margin: 0; }
  .lp-box--addr address { font-style: normal; font-weight: 700; margin-block-end: 12px; }
  .lp-road { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-block-start: 26px; }
  .lp-road section { border: 4px solid var(--lp-sky); border-radius: 30px; padding: 22px; }
  .lp-road span { display: grid; place-items: center; inline-size: 42px; block-size: 42px; border-radius: 50%; background: var(--lp-sky); font: 400 1.3rem var(--lp-head); color: var(--lp-plum-deep); }
  .lp-road h2 { margin-block-start: .5em; font-size: 1.35rem; }
  .lp-road p { margin: 0; }
  .lp-back { counter-reset: b; margin-block: 26px; border-inline-start: 5px dotted var(--lp-pink); padding-inline-start: 26px; }
  .lp-back li { counter-increment: b; position: relative; padding-block-end: 16px; }
  .lp-back li::before { content: counter(b); position: absolute; inset-inline-start: -46px; inset-block-start: 0; inline-size: 34px; block-size: 34px; border-radius: 50%; background: var(--lp-pink); color: #fff; display: grid; place-items: center; font: 400 1.1rem var(--lp-head); }
  .lp-back h2 { margin: 0 0 .2em; font-size: 1.35rem; }
  .lp-rules { counter-reset: r; margin-block-start: 26px; }
  .lp-rules li { counter-increment: r; display: grid; grid-template-columns: 64px 1fr; column-gap: 12px; padding-block: 16px; border-block-end: 3px solid var(--lp-cream); }
  .lp-rules li::before { content: counter(r, decimal-leading-zero); font: 400 2rem var(--lp-head); color: var(--lp-sun-deep); grid-row: span 2; }
  .lp-rules h2 { margin: 0 0 .2em; font-size: 1.3rem; }
  .lp-rules p { margin: 0; }
  .lp-rev { color: var(--lp-soft); font-size: .9rem; margin-block-start: 18px; }
  .lp-desk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-block: 26px 6px; }
  .lp-desk section { background: var(--lp-mint); border-radius: 28px; padding: 20px; }
  .lp-desk section:nth-child(2) { background: var(--lp-rose); } .lp-desk section:nth-child(3) { background: var(--lp-lilac); }
  .lp-desk h2 { margin: 0 0 .3em; font-size: 1.25rem; }
  .lp-desk p { margin: 0; }
  .lp-read--faq .lp-ask { margin-inline: 0; }
  @media (max-width: 700px) { .lp-road, .lp-desk { grid-template-columns: 1fr; } }
  .lp-lost { padding-block: 60px 20px; }
}