/* Apron-inspired palette: peach linen, raspberry, indigo and woven accents. */
:root {
  --paper: #fff9f3;
  --ink: #302e45;
  --red: #a32e60;
  --line: #d9beb9;
  --muted: #665466;
  --blush: #efd0c5;
  --pink: #f7e4dc;
  --indigo: #333c70;
  --turquoise: #267d85;
  --mustard: #e5b940;
  --patchwork: repeating-linear-gradient(90deg,
    #a32e60 0 29px, #eea6b6 29px 49px, #333c70 49px 76px,
    #e5b940 76px 100px, #78bcc3 100px 136px, #55774a 136px 159px,
    #efd0c5 159px 180px, #cb4275 180px 211px, #46599a 211px 235px);
}
body { background: var(--paper); }
::selection { background: #edc0d1; color: var(--ink); }
h1, h2, h3, .brand strong { color: var(--indigo); }
.prototype-note { background: var(--indigo); }
.prototype-note span { color: #f5e7e1; }
.header { border-bottom: 1px dashed var(--line); }
.seal {
  border-radius: 50% 48% 45% 49%; background: #f6dfd7;
  border-color: var(--red); outline: 1px dashed var(--red); outline-offset: -6px;
}
nav .nav-cta, .button { border-radius: 9px 9px 19px 9px; }
nav .nav-cta:hover, .button:hover { background: #82234c; color: white; }
.button { box-shadow: 3px 4px 0 #d9b9bd; }
.hero {
  background: var(--pink);
  background-image: repeating-linear-gradient(0deg, transparent 0 4px, #a86f5d05 4px 5px);
  border-bottom: 1px solid var(--line);
}
.hero-copy { padding: 55px 28px 44px 11%; }
.hero-description, .product p { color: var(--muted); }
h1 { font-size: clamp(39px, 3.9vw, 62px); }
h1 em {
  color: var(--red);
  text-decoration: underline; text-decoration-color: #d6a530;
  text-decoration-thickness: 3px; text-underline-offset: 12px;
}
.hero-foot { color: var(--indigo); }
.intro-strip {
  position: relative; background: var(--indigo);
  border-top: 0; padding-top: 32px; padding-bottom: 28px;
}
.intro-strip:before, .closing:before, .site-footer:before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 10px; background: var(--patchwork);
}
.story { background: var(--paper); }
.strengths { gap: 28px; }
.strengths article {
  padding: 27px; border: 1px dashed #c896a4;
  border-radius: 8px 8px 38px 8px; background: #f8e5e3;
}
.strengths article:nth-child(2) { background: #f8edcc; border-color: #bca355; }
.strengths article:nth-child(3) { background: #e3efec; border-color: #8baea7; }
.index { color: var(--red); }
.strengths article:nth-child(2) .index { color: #7a5e19; }
.strengths article:nth-child(3) .index { color: #226b72; }
.products { background: var(--blush); }
.product-list { display: grid; gap: 17px; }
.product {
  background: var(--paper); border: 1px solid #d7b5b0;
  border-left: 8px solid var(--red);
  border-radius: 7px 18px 18px 7px;
  padding: 30px; grid-template-columns: 110px 1fr 190px; gap: 28px;
}
.product:nth-child(2) { border-left-color: var(--mustard); }
.product:nth-child(3) { border-left-color: var(--turquoise); }
.product:last-child { border-bottom: 1px solid #d7b5b0; }
.product-number { color: var(--indigo); }
.product-number span { color: var(--muted); }
.product-use { border-left: 1px dashed var(--line); padding-left: 24px; }
.tag { padding: 2px 10px; border-radius: 5px; background: #f6dce5; }
.product:nth-child(2) .tag { background: #f8edcc; color: #745918; }
.product:nth-child(3) .tag { background: #dcecea; color: #226b72; }
.voices { background: #fffaf4; }
.voice {
  position: relative; border: 1px solid var(--line);
  border-radius: 6px 6px 30px 6px; background: #fffdfa;
  box-shadow: 4px 5px 0 #edddd7;
}
.voice:before {
  content: ''; position: absolute; top: -7px; left: 27px;
  width: 54px; height: 14px; background: #a32e60;
  transform: rotate(-4deg);
}
.voice:nth-child(2):before { background: var(--mustard); transform: rotate(3deg); }
.voice:nth-child(3):before { background: #78bcc3; }
.voice footer { border-top-style: dashed; }
.voice-theme { color: var(--indigo); }
.first-visit { background: #f6e4dd; border-top: 1px dashed var(--line); }
.faq { border-top: none; }
details {
  margin-bottom: 12px; padding: 0 22px; background: var(--paper);
  border: 1px solid #d9beba; border-radius: 10px;
}
details[open] { border-color: #b5899b; }
summary { color: var(--indigo); }
details p { padding-right: 0; }
.closing { background: var(--indigo); padding-top: 87px; }
.closing h2 { color: #fff4ea; }
.closing .eyebrow { color: #f2d174; }
.closing-mark { opacity: .12; color: #f5e5e0; }
.button-light { background: #f9e4d8; color: var(--indigo); box-shadow: 3px 4px 0 #222a54; border-color: #f9e4d8; }
.button-light:hover { background: white; color: var(--indigo); }
.access { background: var(--paper); align-items: start; gap: 55px; }
.shop-info {
  background: #f7e4dc; padding: 32px;
  border: 1px dashed #b38787; border-radius: 12px 12px 38px 12px;
}
.shop-info dl > div { border-top-style: dashed; }
.site-footer { background: #efcfc4; position: relative; border-top: 0; padding-top: 44px; }
.menu-toggle { background: #f7e4dc; border-radius: 8px; }
.mobile-action { background: var(--paper); border-top: 3px solid var(--mustard); }
.mobile-action a:first-child { color: var(--indigo); }
.mobile-action a:last-child { background: var(--red); }
@media (max-width: 1100px) {
  .hero-copy { padding-left: 8%; }
  .product { grid-template-columns: 75px 1fr 150px; gap: 22px; padding: 26px; }
  .strengths { gap: 18px; }
  .strengths article { padding: 22px; }
  .access { gap: 35px; }
  .shop-info { padding: 25px; }
}
@media (max-width: 760px) {
  .hero-copy { padding: 34px 7% 25px; }
  h1 { font-size: clamp(35px, 8.6vw, 58px); }
  .intro-strip { padding: 29px 7% 23px; }
  .intro-strip:before, .closing:before, .site-footer:before { height: 8px; }
  .strengths { gap: 17px; }
  .strengths article { padding: 22px; gap: 8px 12px; }
  .product { grid-template-columns: 38px minmax(0, 1fr); padding: 24px 18px; gap: 16px; border-left-width: 5px; }
  .product-use { border-left: 0; padding: 8px 0 0; }
  .product-number { font-size: 32px; }
  .products-bottom { margin-top: 24px; }
  .voice { padding: 27px; }
  details { padding: 0 18px; }
  .closing { padding-top: 68px; }
  .access { gap: 34px; }
  .shop-info { padding: 25px 20px; }
  .shop-info dl > div { grid-template-columns: 66px minmax(0, 1fr); }
  .phone { font-size: 20px; }
  .site-footer { padding-top: 38px; }
}