/* Woofly editorial landing — purple/white sibling of Softpaw cat landing.
 * Structure mirrors apps/softpaw/app/globals.css; palette is vibrant purple/white.
 * Fonts load from index.html <link> — avoid Google Fonts @import here (Vite can hang).
 */

:root {
  --cream: #FFF8EE;
  --paper: #FFFFFF;
  --ink: #1A1230;
  --soft-ink: #5C5270;
  --pumpkin: #2A6B7C;
  --pumpkin-deep: #1F5361;
  --mint: #2A6B7C;
  --mint-pale: #FAEDD8;
  --moss: #3D2A6D;
  --sun: #E8D4B8;
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --shadow: rgba(61, 42, 109, .18);
  --serif: Lora, Iowan Old Style, Georgia, serif;
  --sans: "DM Sans", Avenir Next, Avenir, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.woofly-landing-body {
  background: var(--cream);
  color: var(--ink);
  margin: 0;
  min-width: 320px;
}

a { color: inherit; }

.landing-shell {
  background-color: var(--cream);
  font-family: var(--sans);
  overflow: clip;
}

.skip-link {
  background: var(--ink);
  color: var(--paper);
  left: 1rem;
  padding: .8rem 1rem;
  position: fixed;
  top: -4rem;
  z-index: 30;
}

.skip-link:focus { top: 1rem; }

.site-header,
.hero,
.manifesto,
.chapters,
.closing,
footer {
  margin-inline: auto;
  max-width: 1440px;
}

.site-header {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 94px;
  padding: 1rem clamp(1.25rem, 4vw, 4.75rem);
  position: relative;
  z-index: 10;
}

.brand {
  align-items: center;
  display: inline-flex;
  font-family: var(--serif);
  font-size: 1.38rem;
  font-weight: 700;
  gap: .56rem;
  letter-spacing: -.055em;
  text-decoration: none;
}

.brand img { border-radius: 28%; }

.site-header nav { display: flex; gap: clamp(1.5rem, 3vw, 3rem); }

.site-header nav a,
.header-download,
footer a {
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-header nav a {
  border-bottom: 1px solid transparent;
  padding: .42rem 0;
  transition: border-color 150ms var(--ease-out), transform 150ms var(--ease-out);
}

.site-header nav a:hover { border-color: var(--ink); transform: translateY(-1px); }

.header-download {
  align-items: center;
  background: var(--ink);
  border-radius: 999px;
  box-shadow: 0 4px 0 #3D2A6D;
  color: var(--paper);
  display: inline-flex;
  gap: .7rem;
  justify-self: end;
  min-height: 2.9rem;
  padding: .73rem 1.25rem .88rem;
  transition: box-shadow 130ms var(--ease-out), transform 130ms var(--ease-out);
}

.header-download:hover { transform: translateY(-2px); }
.header-download:active { box-shadow: 0 1px 0 #3D2A6D; transform: translateY(3px); }

.hero {
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(0, .91fr) minmax(480px, 1.09fr);
  min-height: min(870px, calc(100svh - 94px));
  padding-inline: clamp(.7rem, 2vw, 1.5rem);
}

.hero-copy {
  align-self: center;
  padding: clamp(4.6rem, 8vw, 8.5rem) clamp(1.5rem, 7vw, 8rem) clamp(4rem, 8vw, 7rem) clamp(.75rem, 3vw, 4.5rem);
  position: relative;
  z-index: 3;
}

.kicker {
  color: var(--pumpkin-deep);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .16em;
  line-height: 1.3;
  margin: 0 0 1.25rem;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.06em; text-wrap: balance; }

h1 {
  font-size: clamp(4rem, 7.3vw, 7.8rem);
  line-height: .88;
  margin-bottom: 1.8rem;
  max-width: 9ch;
}

h1 em,
h2 em { color: var(--pumpkin-deep); font-style: italic; font-weight: 500; }

.hero-lede {
  color: var(--soft-ink);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.58;
  max-width: 35rem;
}

.hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.6rem;
  margin-top: 2.25rem;
}

.hero-actions--waitlist,
.closing-actions--waitlist {
  align-items: stretch;
  flex-direction: column;
  max-width: 34rem;
}

.woofly-coming-soon {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0.75rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pumpkin-deep) 28%, transparent);
  background: color-mix(in srgb, var(--pumpkin) 22%, #fff);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.woofly-waitlist {
  display: grid;
  gap: 0.55rem;
  width: 100%;
  padding: 1rem 1.05rem 1.05rem;
  border-radius: 1.15rem;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 28px rgba(26, 18, 40, 0.08);
}

.woofly-waitlist-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}

.woofly-waitlist-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.woofly-waitlist-input {
  flex: 1 1 12rem;
  min-height: 48px;
  padding: 0.7rem 0.95rem;
  border-radius: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: #fff;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
}

.woofly-waitlist-input:focus {
  outline: 2px solid var(--pumpkin);
  outline-offset: 2px;
}

.woofly-waitlist-submit {
  min-height: 48px;
  padding: 0.7rem 1.15rem;
  border: 0;
  border-radius: 0.85rem;
  background: var(--pumpkin);
  box-shadow: 0 4px 0 var(--pumpkin-deep);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
}

.woofly-waitlist-submit:hover:not(:disabled) {
  transform: translateY(-1px);
}

.woofly-waitlist-submit:disabled {
  opacity: 0.55;
  cursor: default;
}

.woofly-waitlist-fine {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
}

.woofly-waitlist-status {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
}

.woofly-waitlist-status.is-ok {
  color: #1f7a4d;
}

.woofly-waitlist-status.is-error {
  color: #a11f3a;
}

.closing-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 1.4rem;
  margin-top: 1.75rem;
}

.app-store-badge-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
  transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out);
}

.app-store-badge-link:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.app-store-badge-link:focus-visible {
  outline: 2px solid var(--pumpkin);
  outline-offset: 4px;
  border-radius: 8px;
}

.app-store-badge {
  display: block;
  height: 3.25rem;
  width: auto;
}

.app-store-badge--footer {
  height: 2.5rem;
}

.button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 700;
  gap: 1rem;
  justify-content: center;
  line-height: 1;
  min-height: 3.65rem;
  padding: .9rem 1.75rem 1.1rem;
  text-decoration: none;
  transition: box-shadow 140ms var(--ease-out), transform 140ms var(--ease-out), background-color 140ms var(--ease-out);
}

.button b,
.tour-link b {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: inline-flex;
  font-family: var(--sans);
  font-size: .82rem;
  height: 1.7rem;
  justify-content: center;
  width: 1.7rem;
}

.button-primary { background: var(--pumpkin); box-shadow: 0 6px 0 var(--pumpkin-deep); color: var(--ink); }
.button-ink { background: var(--ink); box-shadow: 0 6px 0 #3D2A6D; color: var(--paper); }
.button:hover { transform: translateY(-2px) rotate(-.4deg); }
.button:active { box-shadow: 0 2px 0 transparent; transform: translateY(4px); }

.tour-link {
  align-items: center;
  display: inline-flex;
  font-size: .87rem;
  font-weight: 800;
  gap: .75rem;
  line-height: 1.2;
  text-decoration: none;
}

.tour-link > span { border-bottom: 1px solid var(--ink); padding-bottom: .25rem; }
.tour-link b { font-size: .75rem; transition: transform 160ms var(--ease-out); }
.tour-link:hover b { transform: translateY(3px); }

.hero-fine { color: color-mix(in srgb, var(--ink) 56%, transparent); font-size: .76rem; line-height: 1.5; margin: 1.9rem 0 0; max-width: 31rem; }

.hero-caption {
  align-items: flex-start;
  border-top: 1px solid var(--line);
  display: flex;
  gap: .8rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  max-width: 31rem;
  padding-top: 1.15rem;
}

.hero-caption p { color: var(--soft-ink); font-size: .8rem; line-height: 1.45; margin: 0; max-width: 26rem; }
.hero-caption strong { color: var(--ink); }
.caption-mark { color: var(--pumpkin-deep); font-size: 1.2rem; line-height: 1; }

.hero-art {
  background: linear-gradient(160deg, #FAEDD8 0%, #5A9AAB 55%, #2A6B7C 100%);
  clip-path: polygon(4% 2%, 100% 0, 96% 98%, 0 100%);
  isolation: isolate;
  min-height: 710px;
  overflow: hidden;
  position: relative;
}

.hero-art::before,
.hero-art::after {
  border: 1px solid color-mix(in srgb, var(--moss) 42%, transparent);
  border-radius: 50%;
  content: '';
  height: min(39vw, 35rem);
  position: absolute;
  right: -13%;
  top: -5%;
  width: min(39vw, 35rem);
  z-index: 0;
}

.hero-art::after { height: min(30vw, 27rem); right: -4%; top: 4%; width: min(30vw, 27rem); }

.hero-orbit { border: 1px dashed color-mix(in srgb, var(--pumpkin-deep) 50%, transparent); border-radius: 50%; position: absolute; z-index: 2; }
.orbit-one { height: 14rem; left: -3rem; top: 11%; width: 14rem; }
.orbit-two { height: 5rem; left: 18%; top: 19%; width: 5rem; }
.hero-spark { color: var(--pumpkin-deep); font-size: 1.8rem; position: absolute; z-index: 5; }
.spark-one { left: 12%; top: 18%; transform: rotate(12deg); }
.spark-two { right: 16%; top: 13%; transform: rotate(-12deg); }

.hero-meadow { bottom: -10%; height: auto; left: -7%; max-width: none; opacity: .92; position: absolute; width: 114%; z-index: 1; }

.hero-dog, .hero-dog-love, .hero-cat, .hero-dog-love, .hero-cat-love { bottom: 3%; height: auto; max-width: none; position: absolute; z-index: 3; }
.hero-dog, .hero-cat { right: 2%; width: min(84%, 38rem); }
.hero-dog-love, .hero-cat-love { bottom: 8%; right: -5%; width: min(76%, 34rem); z-index: 2; }

.note {
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  box-shadow: 6px 7px 0 color-mix(in srgb, var(--ink) 15%, transparent);
  font-family: var(--serif);
  font-size: clamp(.88rem, 1.2vw, 1.12rem);
  font-style: italic;
  padding: .68rem .88rem;
  position: absolute;
  z-index: 5;
}

.note-top { left: 6%; top: 37%; transform: rotate(-7deg); }
.note-right { right: 4%; top: 31%; transform: rotate(7deg); }
.note-bottom { bottom: 8%; left: 7%; transform: rotate(4deg); }
.note-side { right: 9%; top: 51%; transform: rotate(-5deg); }

.hero-stamp {
  align-items: center;
  background: var(--pumpkin);
  border: 1px solid var(--ink);
  border-radius: 50%;
  box-shadow: 8px 9px 0 var(--ink);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  height: clamp(8rem, 13vw, 12rem);
  justify-content: center;
  left: 5%;
  line-height: .82;
  position: absolute;
  text-align: center;
  top: 9%;
  transform: rotate(-14deg);
  width: clamp(8rem, 13vw, 12rem);
  z-index: 6;
}

.hero-stamp em { font-family: var(--serif); font-size: clamp(.8rem, 1.1vw, 1rem); font-weight: 600; margin-bottom: .25rem; }
.hero-stamp strong { font-family: var(--serif); font-size: clamp(1.2rem, 2.2vw, 2rem); letter-spacing: -.07em; }
.hero-stamp i { border-top: 1px solid currentColor; font-family: var(--sans); font-size: .56rem; font-style: normal; font-weight: 900; letter-spacing: .16em; margin-top: .45rem; padding-top: .3rem; width: 52%; }

.hero-tally {
  background: var(--ink);
  bottom: 0;
  color: var(--paper);
  display: grid;
  gap: .4rem;
  left: 0;
  max-width: 18rem;
  padding: 1.05rem 1.25rem 1.15rem;
  position: absolute;
  transform: rotate(-2deg) translate(-.4rem, .35rem);
  z-index: 6;
}

.hero-tally span { color: var(--sun); font-size: .58rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.hero-tally strong { font-family: var(--serif); font-size: 1.05rem; letter-spacing: -.03em; line-height: 1.02; }

.manifesto {
  background: var(--pumpkin);
  color: var(--ink);
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 1.12fr) minmax(17rem, .68fr);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  padding: clamp(6rem, 12vw, 11rem) clamp(1.25rem, 5vw, 5rem) clamp(5rem, 10vw, 9rem);
  position: relative;
  width: 100vw;
}

.manifesto::before {
  background: var(--mint);
  border: 1px solid var(--ink);
  border-radius: 50%;
  content: '';
  height: clamp(15rem, 28vw, 30rem);
  position: absolute;
  right: -8%;
  top: -18%;
  transform: rotate(8deg);
  width: clamp(15rem, 28vw, 30rem);
  z-index: 0;
}

.manifesto::after { border: 1px solid color-mix(in srgb, var(--ink) 44%, transparent); border-radius: 50%; content: ''; height: clamp(12rem, 22vw, 24rem); position: absolute; right: -3%; top: -10%; width: clamp(12rem, 22vw, 24rem); }

.manifesto-heading,
.manifesto-body,
.promise-list { position: relative; z-index: 1; }

.manifesto-heading h2 { font-size: clamp(3.8rem, 7.3vw, 8.4rem); line-height: .84; margin: 0; max-width: 10ch; }
.manifesto-heading h2 em { color: #7d280e; }
.manifesto-body { align-self: end; padding-bottom: .8rem; }
.manifesto-body > p { color: color-mix(in srgb, var(--ink) 78%, transparent); font-size: clamp(1.05rem, 1.45vw, 1.28rem); line-height: 1.55; margin-bottom: 1.7rem; max-width: 28rem; }

.manifesto-rail { font-size: .62rem; font-weight: 900; left: 1.4rem; letter-spacing: .16em; position: absolute; text-transform: uppercase; top: 50%; transform: rotate(-90deg) translateX(-50%); transform-origin: left top; z-index: 3; }
.manifesto-burst { bottom: 11%; color: var(--paper); font-size: clamp(6rem, 13vw, 13rem); line-height: .6; position: absolute; right: 5%; transform: rotate(14deg); z-index: 1; }

.persona-tags { display: flex; flex-wrap: wrap; gap: .55rem; }
.persona-tags span { background: var(--paper); border: 1px solid var(--ink); border-radius: 999px; box-shadow: 0 4px 0 color-mix(in srgb, var(--ink) 38%, transparent); font-family: var(--serif); font-size: .87rem; padding: .65rem 1.05rem .75rem; transform: rotate(-2deg); }
.persona-tags span:nth-child(2) { background: var(--mint-pale); transform: rotate(2deg); }
.persona-tags span:nth-child(3) { background: var(--sun); transform: rotate(-1deg); }

.promise-list {
  align-items: stretch;
  display: grid;
  gap: 0;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  margin: clamp(1.5rem, 5vw, 4rem) 0 0;
  padding: 0;
}

.promise-list li { background: var(--paper); border: 1px solid var(--ink); display: flex; flex-direction: column; min-height: 16rem; padding: clamp(1.4rem, 3vw, 2.6rem); }
.promise-list li + li { border-left: 0; }
.promise-list li:nth-child(1) { background: var(--ink); color: var(--paper); transform: translateY(-1.3rem) rotate(-1.5deg); }
.promise-list li:nth-child(2) { background: var(--mint); transform: translateY(1.8rem); }
.promise-list li:nth-child(3) { background: var(--sun); transform: rotate(1.5deg); }
.promise-list li span { color: var(--pumpkin-deep); font-size: .7rem; font-weight: 900; letter-spacing: .12em; margin-bottom: auto; }
.promise-list li:nth-child(1) span { color: var(--sun); }
.promise-list li strong { font-family: var(--serif); font-size: clamp(1.35rem, 2.1vw, 2rem); letter-spacing: -.045em; line-height: 1.02; margin-bottom: .7rem; }
.promise-list li p { color: var(--soft-ink); font-size: .9rem; line-height: 1.45; margin: 0; max-width: 18rem; }
.promise-list li:nth-child(1) p { color: color-mix(in srgb, var(--paper) 76%, transparent); }

.chapters { padding: clamp(7rem, 14vw, 13rem) clamp(1.25rem, 4vw, 4rem) clamp(6rem, 12vw, 11rem); }

.chapters-heading { margin-left: auto; max-width: min(100%, 50rem); padding-right: clamp(0rem, 8vw, 7rem); position: relative; }
.chapters-heading h2 { font-size: clamp(3.65rem, 7vw, 7.7rem); line-height: .83; margin-bottom: 1.4rem; max-width: 10ch; }
.chapters-heading > p:last-of-type { color: var(--soft-ink); font-size: 1.06rem; line-height: 1.55; max-width: 33rem; }
.heading-spark { color: var(--pumpkin-deep); font-size: clamp(4rem, 8vw, 8rem); position: absolute; right: 2%; top: 1.5rem; transform: rotate(13deg); }

.chapter-list { display: grid; gap: clamp(2.4rem, 6vw, 6rem); list-style: none; margin: clamp(3.5rem, 8vw, 7rem) 0 0; padding: 0; }

.chapter {
  align-items: center;
  display: grid;
  grid-template-columns: 4.2rem minmax(0, .72fr) minmax(21rem, 1.28fr);
  min-height: clamp(37rem, 53vw, 51rem);
  overflow: hidden;
  padding: clamp(1.75rem, 5vw, 5rem);
  position: relative;
}

.chapter::after { bottom: -9%; color: color-mix(in srgb, var(--ink) 7%, transparent); content: attr(data-number); font-family: var(--serif); font-size: clamp(16rem, 33vw, 32rem); font-weight: 700; line-height: .7; pointer-events: none; position: absolute; right: -2%; }
.chapter-lilac { background: var(--sun); clip-path: polygon(0 2%, 100% 0, 98% 97%, 2% 100%); }
.chapter-violet { background: #B9A0F5; clip-path: polygon(2% 0, 100% 3%, 98% 100%, 0 97%); }
.chapter-grape { background: #7C5CCF; color: var(--paper); clip-path: polygon(0 1%, 98% 0, 100% 98%, 2% 100%); }
.chapter-grape .chapter-copy > p:not(.chapter-eyebrow, .chapter-signal) { color: color-mix(in srgb, var(--paper) 82%, transparent); }
.chapter-grape .chapter-note { color: var(--ink); }

.chapter-rail { align-self: stretch; display: flex; flex-direction: column; gap: .8rem; position: relative; z-index: 1; }
.chapter-rail span { align-items: center; border: 1px solid currentColor; border-radius: 50%; display: inline-flex; font-size: .75rem; font-weight: 900; height: 2.7rem; justify-content: center; letter-spacing: .08em; width: 2.7rem; }
.chapter-rail i { background: currentColor; height: 100%; margin-left: 1.32rem; opacity: .28; width: 1px; }

.chapter-copy { align-self: center; position: relative; z-index: 1; }
.chapter-eyebrow { font-size: .7rem; font-weight: 900; letter-spacing: .16em; margin-bottom: 1rem; text-transform: uppercase; }
.chapter-signal { color: var(--pumpkin-deep); font-family: var(--serif); font-size: clamp(3rem, 6vw, 6rem); font-style: italic; font-weight: 500; letter-spacing: -.08em; line-height: .8; margin-bottom: .5rem; }
.chapter h3 { font-size: clamp(2.55rem, 4.6vw, 5.2rem); line-height: .9; margin-bottom: 1.25rem; max-width: 9ch; }
.chapter-copy > p:not(.chapter-eyebrow, .chapter-signal) { color: color-mix(in srgb, var(--ink) 72%, transparent); font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.55; max-width: 27rem; }
.chapter-note { background: var(--paper); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); box-shadow: 5px 6px 0 color-mix(in srgb, var(--ink) 16%, transparent); display: inline-block; font-family: var(--serif); font-size: clamp(.88rem, 1.15vw, 1.05rem); font-style: italic; line-height: 1.25; margin-top: 1.3rem; max-width: 17rem; padding: .7rem .85rem; transform: rotate(-3deg); }

.chapter figure { justify-self: center; margin: 0; max-width: 36rem; position: relative; transform: rotate(3deg); transition: transform 400ms var(--ease-out); width: min(98%, 34rem); z-index: 2; }
.chapter figure::before { background: var(--paper); box-shadow: 19px 20px 0 color-mix(in srgb, var(--ink) 28%, transparent); content: ''; inset: -1.5rem -1.3rem -1.8rem 2rem; position: absolute; transform: rotate(-5deg); z-index: -1; }
.chapter figure::after { border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent); content: ''; inset: 4%; pointer-events: none; position: absolute; }
.chapter figure img { display: block; height: auto; width: 100%; }
.screen-sticker { background: var(--ink); color: var(--paper); font-size: .58rem; font-weight: 900; letter-spacing: .12em; padding: .55rem .72rem; position: absolute; right: -1rem; text-transform: uppercase; top: 1.2rem; transform: rotate(8deg); z-index: 2; }
.chapter-flash { color: var(--ink); font-size: clamp(3rem, 6vw, 6.5rem); left: -1.8rem; line-height: 1; position: absolute; top: -3rem; transform: rotate(-16deg); z-index: 3; }
.chapter-violet figure { transform: rotate(-3deg); }
.chapter-violet figure::before { background: var(--sun); transform: rotate(5deg); }
.chapter-grape figure::before { background: var(--mint-pale); transform: rotate(-6deg); }
.chapter-grape .chapter-signal { color: var(--sun); }
.chapter-grape .chapter-eyebrow,
.chapter-grape .chapter-rail span { color: var(--paper); }

.closing {
  align-items: center;
  background: var(--moss);
  color: var(--paper);
  display: grid;
  gap: clamp(1.5rem, 4vw, 5rem);
  grid-template-columns: minmax(0, .92fr) minmax(18rem, 1.08fr);
  margin-bottom: clamp(2rem, 4vw, 4rem);
  min-height: 42rem;
  overflow: hidden;
  padding: clamp(3.5rem, 8vw, 8rem) clamp(1.5rem, 8vw, 8rem);
  position: relative;
}

.closing::before { border: 1px solid color-mix(in srgb, var(--paper) 32%, transparent); border-radius: 50%; content: ''; height: min(42vw, 40rem); left: -11%; position: absolute; top: -13%; width: min(42vw, 40rem); }
.closing .kicker { color: var(--sun); }
.closing-copy { position: relative; z-index: 2; }
.closing h2 { font-size: clamp(3.4rem, 6vw, 6.7rem); line-height: .9; margin-bottom: 1.35rem; max-width: 8ch; }
.closing h2 em { color: var(--sun); }
.closing p { color: color-mix(in srgb, var(--paper) 73%, transparent); font-size: 1.06rem; line-height: 1.57; max-width: 31rem; }
.closing .button { margin-top: 1rem; }
.closing-art { align-self: stretch; min-height: 26rem; position: relative; z-index: 1; }
.closing-sun { background: var(--sun); border-radius: 50%; height: clamp(17rem, 28vw, 27rem); position: absolute; right: 5%; top: 2%; width: clamp(17rem, 28vw, 27rem); }
.closing-word { color: color-mix(in srgb, var(--paper) 16%, transparent); font-family: var(--serif); font-size: clamp(7rem, 15vw, 15rem); font-style: italic; left: -10%; line-height: .8; position: absolute; top: 35%; transform: rotate(-10deg); }
.closing-stamp { align-items: center; background: var(--pumpkin); border: 1px solid var(--ink); border-radius: 50%; box-shadow: 7px 8px 0 color-mix(in srgb, var(--ink) 62%, transparent); color: var(--ink); display: flex; font-family: var(--serif); font-size: clamp(.95rem, 1.5vw, 1.35rem); font-style: italic; font-weight: 700; height: clamp(8rem, 12vw, 11rem); justify-content: center; line-height: .92; position: absolute; right: 2%; text-align: center; top: 4%; transform: rotate(12deg); width: clamp(8rem, 12vw, 11rem); z-index: 3; }
.closing-art img,
.closing-dog {
  bottom: -9%;
  height: auto;
  max-width: none;
  position: absolute;
  right: 1%;
  transform: rotate(2deg);
  width: min(100%, 31rem);
  z-index: 2;
}
.closing-dog {
  /* Solid white cutout stroke (0-blur drop-shadows in 8 directions × 2px) */
  filter:
    drop-shadow(2px 0 0 #fff)
    drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff)
    drop-shadow(1.5px 1.5px 0 #fff)
    drop-shadow(-1.5px 1.5px 0 #fff)
    drop-shadow(1.5px -1.5px 0 #fff)
    drop-shadow(-1.5px -1.5px 0 #fff);
}

footer { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 1rem; justify-content: space-between; padding: 1.75rem clamp(1.25rem, 4vw, 4rem) 2.7rem; }
footer p { color: var(--soft-ink); font-size: .78rem; margin: 0; }
footer a:not(.app-store-badge-link) { border-bottom: 1px solid var(--ink); padding-bottom: .2rem; }

.not-found { align-items: center; display: grid; min-height: 100svh; padding: 2rem; place-content: center; text-align: center; }
.not-found h1 { font-size: clamp(3rem, 7vw, 6rem); max-width: 9ch; }
.not-found p { color: var(--soft-ink); }
.not-found .button { justify-self: center; }

:focus-visible { outline: 3px solid var(--mint); outline-offset: 4px; }

@media (hover: hover) and (pointer: fine) {
  .hero-art:hover .note-top { transform: rotate(-10deg) translate(-.3rem, -.4rem); }
  .hero-art:hover .note-right { transform: rotate(10deg) translate(.2rem, -.4rem); }
  .hero-art:hover .hero-dog, .hero-art:hover .hero-cat { transform: translateY(-.45rem) rotate(-1deg); }
  .chapter:hover figure { transform: translateY(-.8rem) rotate(1deg); }
  .chapter-mint:hover figure { transform: translateY(-.8rem) rotate(-1deg); }
  .chapter:hover .chapter-signal { transform: translateX(.18rem); }
}

@keyframes hero-copy-in { from { opacity: 0; transform: translateY(1.4rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-art-in { from { opacity: 0; transform: translateX(2rem) rotate(1deg); } to { opacity: 1; transform: translateX(0) rotate(0); } }
@keyframes gentle-drift { 0%, 100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(-.5rem) rotate(-9deg); } }
@keyframes tiny-orbit { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.hero-copy > * { animation: hero-copy-in 650ms var(--ease-out) both; }
.hero-copy > :nth-child(1) { animation-delay: 30ms; }
.hero-copy > :nth-child(2) { animation-delay: 100ms; }
.hero-copy > :nth-child(3) { animation-delay: 170ms; }
.hero-copy > :nth-child(4) { animation-delay: 240ms; }
.hero-copy > :nth-child(5) { animation-delay: 300ms; }
.hero-copy > :nth-child(6) { animation-delay: 360ms; }
.hero-art { animation: hero-art-in 850ms 110ms var(--ease-out) both; }
.note-top { animation: gentle-drift 5s 900ms ease-in-out infinite; }
.orbit-two { animation: tiny-orbit 18s linear infinite; transform-origin: center; }

@supports (animation-timeline: view()) {
  .chapter { animation: chapter-rise linear both; animation-range: entry 12% cover 32%; animation-timeline: view(); }
  @keyframes chapter-rise { from { opacity: .35; transform: translateY(2rem) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
}

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; min-height: 78px; padding-inline: 1.25rem; }
  .site-header nav { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(350px, .9fr); }
  .hero-copy { padding-left: 1.25rem; padding-right: 3rem; }
  .hero-art { min-height: 580px; }
  .manifesto { grid-template-columns: 1fr; }
  .manifesto-body { max-width: 36rem; }
  .manifesto::before { right: 8%; top: 32%; }
  .chapters-heading { margin-left: 0; }
  .chapter { grid-template-columns: 3.3rem minmax(0, .95fr) minmax(13rem, .9fr); }
}

@media (max-width: 760px) {
  .hero { display: block; padding-inline: 0; }
  .hero-copy { padding: 4.8rem 1.25rem 3.7rem; }
  .hero-caption { margin-top: 2.7rem; }
  .hero-art { clip-path: polygon(0 2%, 100% 0, 100% 100%, 0 98%); min-height: min(150vw, 650px); }
  .hero-art::before { height: 20rem; width: 20rem; }
  .hero-art::after { height: 15rem; width: 15rem; }
  .hero-meadow { bottom: -4%; left: -18%; width: 135%; }
  .hero-cat { bottom: 3%; right: -4%; width: 88%; }
  .hero-dog-love, .hero-cat-love { bottom: 8%; right: -14%; width: 88%; }
  .orbit-one { height: 11rem; width: 11rem; }
  .orbit-two { left: 24%; top: 19%; }
  .note { font-size: .77rem; padding: .5rem .62rem; }
  .note-top { left: 5%; top: 27%; }
  .note-right { right: 2%; top: 17%; }
  .note-bottom { bottom: 5%; left: 5%; }
  .note-side { right: 4%; top: 52%; }
  .hero-stamp { left: 8%; top: 8%; }
  .hero-tally { max-width: 14rem; padding: .8rem 1rem .9rem; }
  .hero-tally strong { font-size: .85rem; }
  .manifesto { padding-block: 5.5rem; }
  .manifesto::before { height: 12rem; right: -8%; top: -3%; width: 12rem; }
  .manifesto::after { height: 9rem; right: -2%; top: 1%; width: 9rem; }
  .manifesto-rail { display: none; }
  .manifesto-burst { bottom: auto; right: 4%; top: 7%; }
  .manifesto-heading h2 { max-width: 10ch; }
  .promise-list { display: grid; grid-template-columns: 1fr; margin-top: 1.5rem; }
  .promise-list li { min-height: 0; }
  .promise-list li + li { border-left: 1px solid var(--line); border-top: 0; }
  .promise-list li:nth-child(1) { transform: rotate(-1deg); }
  .promise-list li:nth-child(2) { transform: translateX(1rem); }
  .chapters { padding-block: 6rem; }
  .chapters-heading { padding-right: 0; }
  .heading-spark { right: 0; top: -2.7rem; }
  .chapter-list { gap: 2rem; }
  .chapter { display: grid; grid-template-columns: 1fr; min-height: 0; padding: 3rem 1.25rem 3.4rem; }
  .chapter-rail { align-items: center; flex-direction: row; gap: .75rem; margin-bottom: 2.1rem; }
  .chapter-rail i { height: 1px; margin-left: 0; width: 4rem; }
  .chapter h3 { max-width: 10ch; }
  .chapter figure { justify-self: end; margin-top: 2.7rem; width: min(86vw, 27rem); }
  .chapter-violet figure { justify-self: start; }
  .chapter::after { font-size: 15rem; }
  .closing { display: block; min-height: 0; padding: 4.8rem 1.25rem 0; }
  .closing-art { min-height: 25rem; margin-top: 1rem; }
  .closing-art img { right: 1%; width: min(85%, 27rem); }
  .closing-stamp { right: 6%; top: 0; }
  footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 440px) {
  .brand { font-size: 1.15rem; }
  .brand img { height: 34px; width: 34px; }
  .header-download { font-size: .57rem; gap: .4rem; min-height: 2.5rem; padding: .55rem .82rem .65rem; }
  .header-download b { font-size: .76rem; }
  h1 { font-size: clamp(3.7rem, 16vw, 5rem); }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 1.25rem; }
  .button { font-size: 1rem; min-height: 3.5rem; padding-inline: 1.4rem; }
  .manifesto-heading h2, .chapters-heading h2 { font-size: clamp(3rem, 14vw, 4rem); }
  .persona-tags span { font-size: .78rem; }
  .promise-list li:nth-child(2) { transform: translateX(.55rem); }
  .chapter-signal { font-size: 4rem; }
  .chapter h3 { font-size: 2.85rem; }
  .closing h2 { font-size: clamp(3.2rem, 15vw, 4.5rem); }
}

/* —— Legal pages (Terms / Privacy) —— */
.legal-shell {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  min-height: 100vh;
  padding-bottom: 3rem;
}

.legal-header {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-inline: auto;
  max-width: 52rem;
  min-height: 4.5rem;
  padding: 1rem 1.25rem;
}

.legal-nav {
  display: flex;
  gap: 1rem;
}

.legal-nav a {
  font-size: .92rem;
  font-weight: 600;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.legal-nav a[aria-current='page'] {
  color: var(--pumpkin-deep);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.legal-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2rem;
  box-shadow: 0 18px 50px var(--shadow);
  margin: 0 auto;
  max-width: 46rem;
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

.legal-back {
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  font-size: .88rem;
  font-weight: 700;
  min-height: 44px;
  align-items: center;
  padding: 0 1rem;
  text-decoration: none;
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out);
}

.legal-back:hover {
  border-color: var(--mint);
  background: color-mix(in srgb, var(--mint) 12%, transparent);
}

.legal-updated {
  color: var(--pumpkin);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  margin: 2rem 0 0;
  text-transform: uppercase;
}

.legal-card h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin: .65rem 0 0;
}

.legal-intro {
  color: var(--soft-ink);
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 1rem 0 0;
}

.legal-sections {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

.legal-sections h2 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
}

.legal-sections p {
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  font-size: .95rem;
  line-height: 1.7;
  margin: .55rem 0 0;
}

.legal-foot {
  border-top: 1px solid var(--line);
  color: var(--soft-ink);
  font-size: .92rem;
  margin: 2rem 0 0;
  padding-top: 1.25rem;
}

.legal-mail {
  color: var(--pumpkin-deep);
  font-weight: 700;
}

.legal-footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  justify-content: center;
  margin: 2rem auto 0;
  max-width: 46rem;
  padding: 0 1.25rem;
}

.legal-footer a {
  font-size: .88rem;
  font-weight: 600;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: underline;
  text-underline-offset: .15em;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem 1.1rem;
  align-items: center;
}

.footer-legal a:not(.app-store-badge-link) {
  font-size: .88rem;
  font-weight: 600;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: .15rem;
}

.footer-legal .app-store-badge-link {
  border-bottom: none;
  min-height: auto;
  padding-bottom: 0;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* ── Woofly-only differentiation (not a Softpaw twin) ── */

.landing-shell--woofly .site-header {
  border-bottom: 1px solid color-mix(in srgb, var(--pumpkin-deep) 18%, transparent);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
}

.landing-shell--woofly .woofly-hero {
  grid-template-columns: minmax(420px, 1.05fr) minmax(0, .95fr);
  gap: 0;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.landing-shell--woofly .woofly-hero-copy {
  padding: clamp(3.5rem, 7vw, 7rem) clamp(1.25rem, 4vw, 4rem) clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 4vw, 3.5rem);
}

.landing-shell--woofly .woofly-hero-copy h1 {
  max-width: 11ch;
  font-size: clamp(3.4rem, 6.4vw, 6.6rem);
}

.landing-shell--woofly .woofly-hero-art {
  clip-path: none;
  border-radius: 2.4rem;
  margin: clamp(1rem, 2vw, 1.75rem) 0;
  min-height: 640px;
  background:
    radial-gradient(circle at 50% 42%, #FFFFFF 0%, #FFF8EE 38%, transparent 58%),
    linear-gradient(145deg, #1F5361 0%, #2A6B7C 42%, #5A9AAB 100%);
  box-shadow: 0 24px 50px rgba(61, 42, 109, .22);
}

.landing-shell--woofly .hero-dog--solo {
  bottom: 11%;
  left: 50%;
  right: auto;
  width: min(78%, 28rem);
  transform: translateX(-50%);
  z-index: 4;
  /* Hard solid white outline (0-blur drop-shadows on 8 axes). */
  filter:
    drop-shadow(2px 0 0 #fff)
    drop-shadow(-2px 0 0 #fff)
    drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff)
    drop-shadow(2px 2px 0 #fff)
    drop-shadow(-2px 2px 0 #fff)
    drop-shadow(2px -2px 0 #fff)
    drop-shadow(-2px -2px 0 #fff)
    drop-shadow(0 18px 28px rgba(26, 18, 48, .22));
}

.landing-shell--woofly .woofly-hero-art:hover .hero-dog--solo {
  transform: translateX(-50%) translateY(-0.45rem);
}

.landing-shell--woofly .woofly-grid {
  background-image:
    linear-gradient(color-mix(in srgb, #fff 14%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #fff 14%, transparent) 1px, transparent 1px);
  background-size: 42px 42px;
  inset: 0;
  opacity: .35;
  position: absolute;
  z-index: 1;
}

.landing-shell--woofly .woofly-chip {
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(26, 18, 48, .14);
  color: var(--pumpkin-deep);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  padding: .55rem .9rem;
  position: absolute;
  text-transform: uppercase;
  z-index: 6;
}

.landing-shell--woofly .woofly-chip-a { left: 8%; top: 18%; transform: rotate(-4deg); }
.landing-shell--woofly .woofly-chip-b { right: 8%; top: 28%; transform: rotate(5deg); }

.landing-shell--woofly .woofly-stamp {
  background: var(--paper);
  border-radius: 1.25rem;
  box-shadow: 10px 12px 0 var(--ink);
  left: auto;
  right: 8%;
  top: 10%;
  transform: rotate(8deg);
}

.landing-shell--woofly .woofly-tally {
  background: var(--paper);
  color: var(--ink);
  border-radius: 1.1rem 1.1rem 0 0;
  left: 50%;
  right: auto;
  bottom: 0;
  max-width: 22rem;
  transform: translateX(-50%);
  text-align: center;
}

.landing-shell--woofly .woofly-tally span {
  color: var(--pumpkin-deep);
}

.landing-shell--woofly .woofly-band {
  background: var(--paper);
  border-block: 1px solid var(--line);
  margin-inline: auto;
  max-width: 1440px;
  padding: clamp(4.5rem, 9vw, 7.5rem) clamp(1.25rem, 4vw, 4rem);
}

.landing-shell--woofly .woofly-band-inner {
  display: grid;
  gap: 2rem;
  max-width: 58rem;
}

.landing-shell--woofly .woofly-band h2 {
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  line-height: .95;
  margin: 0;
  max-width: 16ch;
}

.landing-shell--woofly .woofly-pillars {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.landing-shell--woofly .woofly-pillars li {
  background: linear-gradient(180deg, #FAEDD8, #E8D4B8);
  border: 1px solid color-mix(in srgb, var(--pumpkin-deep) 18%, transparent);
  border-radius: 1.4rem;
  padding: 1.35rem 1.25rem 1.5rem;
}

.landing-shell--woofly .woofly-pillars strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: -.03em;
  margin-bottom: .55rem;
}

.landing-shell--woofly .woofly-pillars p {
  color: var(--soft-ink);
  font-size: .92rem;
  line-height: 1.5;
  margin: 0;
}

.landing-shell--woofly .woofly-toolkit {
  margin-inline: auto;
  max-width: 1440px;
  padding: clamp(4.5rem, 10vw, 8rem) clamp(1.25rem, 4vw, 4rem);
}

.landing-shell--woofly .woofly-toolkit-heading {
  max-width: 40rem;
  margin-bottom: 2.5rem;
}

.landing-shell--woofly .woofly-toolkit-heading h2 {
  font-size: clamp(2.8rem, 5.4vw, 5.2rem);
  line-height: .92;
  margin-bottom: .9rem;
}

.landing-shell--woofly .woofly-toolkit-heading > p:last-of-type {
  color: var(--soft-ink);
  font-size: 1.05rem;
  margin: 0;
}

.landing-shell--woofly .woofly-cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-shell--woofly .woofly-card {
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--pumpkin-deep) 16%, transparent);
  border-radius: 1.75rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, .85fr);
  overflow: hidden;
  padding: 1.35rem;
}

.landing-shell--woofly .woofly-card-1,
.landing-shell--woofly .woofly-card-2,
.landing-shell--woofly .woofly-card-3,
.landing-shell--woofly .woofly-card-4 {
  background: #F3EDFF;
  color: var(--ink);
  border-color: color-mix(in srgb, var(--pumpkin-deep) 16%, transparent);
}

.landing-shell--woofly .woofly-card-label {
  color: var(--pumpkin-deep);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .14em;
  margin: 0 0 .7rem;
  text-transform: uppercase;
}

.landing-shell--woofly .woofly-card h3 {
  font-size: clamp(1.55rem, 2.4vw, 2.1rem);
  line-height: 1.05;
  margin: 0 0 .7rem;
}

.landing-shell--woofly .woofly-card-copy > p:last-child {
  color: var(--soft-ink);
  font-size: .95rem;
  line-height: 1.5;
  margin: 0;
}

.landing-shell--woofly .woofly-card figure {
  margin: 0;
  border-radius: 1.15rem;
  overflow: hidden;
  align-self: stretch;
  min-height: 10rem;
  background: #ddd5f5;
}

.landing-shell--woofly .woofly-card figure img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.landing-shell--woofly .woofly-notes {
  background: var(--ink);
  color: var(--paper);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 5vw, 5rem);
  width: 100vw;
}

.landing-shell--woofly .woofly-notes .kicker { color: var(--sun); }
.landing-shell--woofly .woofly-notes h2 {
  font-size: clamp(2.4rem, 4.8vw, 4.4rem);
  line-height: .95;
  margin: 0 0 2rem;
  max-width: 14ch;
}

.landing-shell--woofly .woofly-faq {
  display: grid;
  gap: 1rem;
  margin: 0;
  max-width: 52rem;
}

.landing-shell--woofly .woofly-faq-item {
  background: color-mix(in srgb, #FFFFFF 8%, transparent);
  border: 1px solid color-mix(in srgb, #FFFFFF 18%, transparent);
  border-radius: 1.2rem;
  padding: 1.15rem 1.25rem 1.25rem;
}

.landing-shell--woofly .woofly-faq-item dt {
  font-family: var(--serif);
  font-size: 1.2rem;
  letter-spacing: -.03em;
  margin-bottom: .45rem;
}

.landing-shell--woofly .woofly-faq-item dd {
  color: color-mix(in srgb, var(--paper) 76%, transparent);
  font-size: .95rem;
  line-height: 1.55;
  margin: 0;
}

.landing-shell--woofly .woofly-closing {
  border-radius: 2rem;
  clip-path: none;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.landing-shell--woofly .woofly-footer {
  border-top: 1px solid var(--line);
}

@media (max-width: 980px) {
  .landing-shell--woofly .woofly-hero {
    grid-template-columns: 1fr;
  }

  .landing-shell--woofly .woofly-hero-art {
    min-height: 420px;
    order: -1;
  }

  .landing-shell--woofly .woofly-pillars,
  .landing-shell--woofly .woofly-cards {
    grid-template-columns: 1fr;
  }

  .landing-shell--woofly .woofly-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .landing-shell--woofly .woofly-hero {
    display: grid;
  }

  .landing-shell--woofly .woofly-hero-copy {
    padding: 2.5rem 1.25rem 3rem;
  }

}