/* Pearadise shared components — uses ONLY var(--pearadise-*). Never hard-code hex/font. */
* { box-sizing: border-box; }
body { background: var(--pearadise-cream); color: var(--pearadise-ink); font-family: var(--pearadise-font-body); }
h1,h2,h3,h4 { font-family: var(--pearadise-font-display); color: var(--pearadise-primary); margin: 0 0 .5em; }
a { color: var(--pearadise-accent); }

.pearadise-btn { display: inline-block; padding: 12px 22px; border-radius: var(--pearadise-radius-btn);
  font-family: var(--pearadise-font-body); font-weight: 800; text-decoration: none; border: 2px solid transparent; cursor: pointer; }
.pearadise-btn-primary { background: var(--pearadise-primary); color: var(--pearadise-white); }
.pearadise-btn-accent  { background: var(--pearadise-accent); color: var(--pearadise-white); border-radius: var(--pearadise-radius-pill); }
.pearadise-btn-secondary { background: var(--pearadise-white); color: var(--pearadise-primary); border-color: var(--pearadise-primary_light); }

/* Groovy (Playful Storybook) buttons — hard offset shadow + slight tilt. */
.pearadise-btn-groovy { display: inline-block; background: var(--pearadise-primary); color: var(--pearadise-white);
  padding: 16px 30px; border-radius: var(--pearadise-radius-pill); font-family: var(--pearadise-font-body);
  font-weight: 800; font-size: 15px; text-decoration: none; border: none; cursor: pointer;
  box-shadow: 5px 5px 0 var(--pearadise-accent); transform: rotate(-1deg); transition: transform .15s ease; }
.pearadise-btn-outline { display: inline-block; background: var(--pearadise-white); color: var(--pearadise-primary);
  padding: 16px 30px; border-radius: var(--pearadise-radius-pill); font-family: var(--pearadise-font-body);
  font-weight: 800; font-size: 15px; text-decoration: none; border: 3px solid var(--pearadise-primary); cursor: pointer;
  transform: rotate(1deg); transition: transform .15s ease; }
.pearadise-btn-groovy:hover, .pearadise-btn-outline:hover { transform: rotate(0deg) translateY(-2px); }

.pearadise-card { background: var(--pearadise-white); border: 1px solid var(--pearadise-primary_light);
  border-radius: var(--pearadise-radius-lg); box-shadow: var(--pearadise-shadow-card); padding: var(--pearadise-space-md); }

.pearadise-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--pearadise-primary_light);
  color: var(--pearadise-primary); border-radius: var(--pearadise-radius-pill); padding: 6px 14px;
  font-size: var(--pearadise-fs-small); text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.pearadise-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pearadise-mint); }
.pearadise-badge { display: inline-flex; align-items: center; gap: 7px; background: var(--pearadise-ink); color: var(--pearadise-white);
  padding: 9px 20px; border-radius: var(--pearadise-radius-pill); font-weight: 800;
  font-size: var(--pearadise-fs-small); margin-bottom: 6px; transform: rotate(-2deg); }
/* White paw glyph (a native emoji renders low-contrast on the dark pill). Colored via currentColor = the badge's white text. */
.pearadise-badge::before { content: ""; display: inline-block; width: 1.15em; height: 1.15em; flex: none; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='22' cy='41' rx='8.2' ry='12'/%3E%3Cellipse cx='40' cy='26' rx='8.8' ry='13.8'/%3E%3Cellipse cx='60' cy='26' rx='8.8' ry='13.8'/%3E%3Cellipse cx='78' cy='41' rx='8.2' ry='12'/%3E%3Cpath d='M50 61C50 54 43 51 38 54C31 58 26 64 26 72C26 84 37 91 50 91C63 91 74 84 74 72C74 64 69 58 62 54C57 51 50 54 50 61Z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='22' cy='41' rx='8.2' ry='12'/%3E%3Cellipse cx='40' cy='26' rx='8.8' ry='13.8'/%3E%3Cellipse cx='60' cy='26' rx='8.8' ry='13.8'/%3E%3Cellipse cx='78' cy='41' rx='8.2' ry='12'/%3E%3Cpath d='M50 61C50 54 43 51 38 54C31 58 26 64 26 72C26 84 37 91 50 91C63 91 74 84 74 72C74 64 69 58 62 54C57 51 50 54 50 61Z'/%3E%3C/svg%3E") no-repeat center / contain; }

.pearadise-header { position: sticky; top: 0; z-index: 50; background: var(--pearadise-white); border-bottom: 1px solid var(--pearadise-primary_light); }
.pearadise-header__brand { display: inline-flex; align-items: center; }
.pearadise-header__logo { height: 96px; width: auto; display: block; }
.pearadise-header__inner, .pearadise-footer__inner { max-width: var(--pearadise-max-width); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--pearadise-space-md); padding: var(--pearadise-space-sm) var(--pearadise-space-lg); }
/* Taller, more prominent top bar. */
.pearadise-header__inner { padding-top: var(--pearadise-space-md); padding-bottom: var(--pearadise-space-md); }
.pearadise-menu { display: flex; gap: var(--pearadise-space-lg); list-style: none; margin: 0; padding: 0; }
.pearadise-menu a { color: var(--pearadise-ink); text-decoration: none; font-weight: 800; }
.pearadise-header__nav .pearadise-menu a { font-size: 17px; }
/* Groovy header CTA: pink pill with a hard purple offset shadow. */
.pearadise-header__cta { box-shadow: 4px 4px 0 var(--pearadise-primary); font-size: 17px; padding: 15px 30px; }

.pearadise-footer { background: var(--pearadise-ink); color: var(--pearadise-white); margin-top: 0; }
.pearadise-footer a { color: var(--pearadise-white); }
/* Closing CTA band that tops every footer (Playful Storybook). */
.pearadise-footer__cta { text-align: center; padding: var(--pearadise-space-xl) var(--pearadise-space-md) var(--pearadise-space-lg); }
.pearadise-footer__cta h3 { font-family: var(--pearadise-font-display); color: var(--pearadise-white);
  font-size: var(--pearadise-fs-h3); margin: 0 0 var(--pearadise-space-md); }
.pearadise-footer__loc { color: var(--pearadise-primary_light); font-size: var(--pearadise-fs-small); }
.pearadise-footer__logo { display: block; width: 200px; max-width: 100%; height: auto;
  background: var(--pearadise-white); padding: 12px 16px; border-radius: var(--pearadise-radius-md); margin-bottom: 10px; }
.pearadise-badges { display: flex; gap: 8px; list-style: none; padding: 0; }
.pearadise-footer__tagline { text-align: center; color: var(--pearadise-accent_light); padding-bottom: var(--pearadise-space-md); font-family: var(--pearadise-font-display); }

.pearadise-field { display: block; margin-bottom: var(--pearadise-space-sm); }
.pearadise-field span { display: block; font-weight: 700; margin-bottom: 6px; }
.pearadise-field input, .pearadise-field textarea { width: 100%; padding: 12px; border-radius: var(--pearadise-radius-sm);
  border: 1px solid var(--pearadise-primary_light); font-family: var(--pearadise-font-body); }
.pearadise-form-success { background: var(--pearadise-primary_light); color: var(--pearadise-primary_dark); padding: 12px; border-radius: var(--pearadise-radius-sm); }
.pearadise-form-error { background: var(--pearadise-accent_light); color: var(--pearadise-primary_dark); padding: 12px; border-radius: var(--pearadise-radius-sm); }

:focus-visible { outline: 3px solid var(--pearadise-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (max-width: 760px) { .pearadise-header__inner, .pearadise-footer__inner { flex-wrap: wrap; } .pearadise-menu { flex-wrap: wrap; } }