.page-care{
  --plum:#54394E;
  --sketch:#B0899B;
}

.faq-hero{
  position:relative; overflow:hidden; background:var(--cream);
  padding:clamp(40px,5vw,70px) var(--pad) clamp(8px,1.2vw,16px);
}
.faq-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 22% 24%, rgba(255,252,246,.85) 0%, rgba(255,252,246,0) 58%);
}
.faq-hero-in{
  position:relative; z-index:2; max-width:1400px; margin:0 auto; display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(18px,2.4vw,36px); align-items:center;
}
.faq-hero h1{
  margin:0; font-family:var(--headline); font-weight:700;
  font-size:clamp(24px,8.2cqw,54px); line-height:1.08; letter-spacing:.012em;
  white-space:nowrap; text-transform:uppercase; color:var(--ink);
}

.faq-cats{
  padding:clamp(30px,4.6vw,54px) var(--pad) clamp(20px,3vw,34px);
  position:relative;
}
.faq-list-wrap{max-width:760px; margin:0 auto; position:relative}

.ship-updated{margin:0 0 16px; font-size:12px; color:var(--muted)}
.ship-rows{border-top:1px solid var(--line)}
.ship-rows details{border-bottom:1px solid var(--line)}
.ship-rows summary{
  list-style:none; cursor:pointer; position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 4px; font-family:var(--sans); font-weight:500; font-size:13px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink); transition:color .3s;
}
.ship-rows summary::-webkit-details-marker{display:none}
.ship-rows summary:hover{color:var(--plum)}
.ship-rows summary .toggle{
  flex:none; width:16px; height:16px; position:relative; color:var(--muted);
  transition:transform .35s ease;
}
.ship-rows summary .toggle::before,
.ship-rows summary .toggle::after{content:""; position:absolute; background:currentColor}
.ship-rows summary .toggle::before{left:0; top:7px; width:16px; height:1.4px}
.ship-rows summary .toggle::after{left:7px; top:0; width:1.4px; height:16px}
.ship-rows details[open] summary .toggle{transform:rotate(45deg)}
.ship-rows details > p{
  margin:0 0 22px; padding:0 24px 0 4px; font-size:14px; line-height:1.75;
  color:var(--muted); max-width:560px;
}

.faq-cat{margin-bottom:clamp(26px,3.4vw,38px); position:relative}
.faq-cat h2{
  margin:0; font-family:var(--sans); font-weight:500; font-size:13px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink);
}
.faq-cat-rule{margin:10px 0 0; border:0; border-top:1px solid var(--line)}
.faq-rows details{border-bottom:1px solid var(--line)}
.faq-rows summary{
  list-style:none; cursor:pointer; position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 4px; font-family:var(--headline); font-size:15.5px; color:var(--ink);
  transition:color .3s;
}
.faq-rows summary::-webkit-details-marker{display:none}
.faq-rows summary:hover{color:var(--plum)}
.faq-rows summary .toggle{
  flex:none; width:16px; height:16px; position:relative; color:var(--muted);
  transition:transform .35s ease;
}
.faq-rows summary .toggle::before,
.faq-rows summary .toggle::after{content:""; position:absolute; background:currentColor}
.faq-rows summary .toggle::before{left:0; top:7px; width:16px; height:1.4px}
.faq-rows summary .toggle::after{left:7px; top:0; width:1.4px; height:16px}
.faq-rows details[open] summary .toggle{transform:rotate(45deg)}
.faq-rows details > p{
  margin:0 0 20px; padding:0 24px 0 4px; font-size:13px; line-height:1.9; color:var(--muted);
}

.faq-blob{
  position:absolute; left:-64px; top:6px; width:34px; height:26px; border-radius:50%;
  background:radial-gradient(ellipse, #C98F94 0%, rgba(201,143,148,0) 72%); opacity:.75;
}
.faq-script{
  position:absolute; right:-116px; top:52%; text-align:left;
  font-family:var(--hand); font-weight:700; color:var(--sketch); line-height:1.08;
}
.faq-script span{display:block; font-size:17px}
.faq-script span:nth-child(1){transform:rotate(-5deg)}
.faq-script span:nth-child(2){transform:rotate(-2deg); margin-left:10px}
.faq-script span:nth-child(3){transform:rotate(-6deg); margin-left:4px}
.faq-script span:nth-child(4){transform:rotate(-1deg); margin-left:16px}
.faq-script .heart{display:block; margin-top:4px; margin-left:44px; font-size:14px; transform:rotate(-4deg)}

.faq-cta{
  position:relative; overflow:hidden;
  background:linear-gradient(100deg,#F6EEF1 0%, #F8F0F2 55%, #F3E9EC 100%);
  padding-block:clamp(40px,5.4vw,64px);
}
.cta-blob{
  position:absolute; left:2%; bottom:-6%; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,143,148,.32), rgba(201,143,148,0) 70%);
}
.cta-flower{position:absolute; left:-20px; bottom:-40px; width:clamp(210px,22vw,320px); opacity:.92}
.cta-flower img{width:100%; height:auto; display:block}
.cta-in{position:relative; max-width:640px; margin:0 auto; text-align:center; padding-inline:var(--pad)}
.cta-rule{display:flex; align-items:center; justify-content:center; gap:14px; max-width:340px; margin:0 auto 24px}
.cta-rule::before,
.cta-rule::after{content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--gold) 50%, transparent)}
.cta-rule svg{flex:none; color:var(--gold)}
.cta-eyebrow{margin:0 0 16px; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted)}
.cta-in h2{margin:0 0 10px; font-family:var(--headline); font-weight:700; font-size:clamp(24px,3vw,32px); color:var(--ink)}
.cta-in p{margin:0 0 26px; font-size:14.5px; color:var(--muted)}
.cta-btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:16px 32px; border-radius:999px; background:var(--espresso-deep); color:#fff;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; transition:background .3s;
}
.cta-btn:hover{background:var(--plum)}
.cta-dot-a{position:absolute; right:9%; top:16%; width:20px; height:20px; border-radius:50%; background:#C98F94; opacity:.85}
.cta-dot-b{position:absolute; right:6.5%; top:28%; width:11px; height:11px; border-radius:50%; background:#C98F94; opacity:.5}

@media (max-width:1160px){
  .faq-blob, .faq-script{display:none}
}
@media (max-width:1000px){
  .faq-hero-in{grid-template-columns:1fr; gap:clamp(24px,4.4vw,36px)}
  .faq-hero h1{white-space:normal; font-size:clamp(25px,6.6vw,38px)}
}
@media (max-width:900px){
  .faq-hero > .petal{display:none}
  .cta-dot-a, .cta-dot-b{display:none}
}
@media (max-width:700px){
  .cta-flower{width:180px}
}