@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display&display=swap');

:root { color-scheme: light; --ink:#341328; --muted:#674558; --berry:#9d184f; --paper:#fff9f3; --line:#e9ced8; --display:'DM Serif Display',Georgia,serif; font:16px/1.6 'DM Sans',Arial,sans-serif; }
*, *::before, *::after { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); }
html { scroll-behavior:smooth; }
h1,h2,h3,p,figure { margin:0; }
a { color:inherit; text-underline-offset:.24em; }
a:focus-visible, input:focus-visible, summary:focus-visible { outline:3px solid #c52c71; outline-offset:4px; }
img { display:block; max-width:100%; }
.shell { width:min(1240px,calc(100% - 72px)); margin-inline:auto; }
.skip { position:absolute; top:-60px; left:12px; padding:8px 12px; z-index:2; background:#fff; }
.skip:focus { top:12px; }
.masthead { display:flex; justify-content:space-between; align-items:center; min-height:76px; gap:12px; padding-block:8px; }
.brand { display:block; width:clamp(182px,23vw,254px); flex:none; }
.brand img { height:auto; }
nav { display:flex; flex-wrap:wrap; gap:10px 23px; }
nav a { font-size:.9rem; font-weight:700; text-decoration:none; }
nav a:hover { text-decoration:underline; color:var(--berry); }
.hero { position:relative; margin-top:8px; padding-bottom:26px; }
.hero-frame { overflow:hidden; border-radius:120px 14px 14px 14px; background:#eac1c9; }
.hero-frame img { width:100%; height:clamp(310px,39vw,515px); object-fit:cover; object-position:center 55%; }
.hero-note { position:relative; width:min(650px,92%); margin:-105px 0 0 auto; padding:26px 35px 30px; background:#fff3f6; border:1px solid var(--line); border-radius:14px 14px 55px 14px; box-shadow:0 12px 30px #58143d14; }
h1 { font:400 clamp(2.8rem,6vw,5.35rem)/.94 var(--display); letter-spacing:-.035em; }
.hero-note p { max-width:470px; margin-top:12px; color:var(--muted); }
.button { display:inline-flex; align-items:center; gap:10px; margin-top:14px; padding:10px 17px; color:white; background:var(--berry); border-radius:99px; text-decoration:none; font-size:.88rem; font-weight:700; }
.button:hover { background:var(--ink); }
.jump nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:30px; }
.jump a { display:flex; gap:10px; align-items:center; padding:9px 13px; background:#fffdf9; border:1px solid var(--line); border-radius:10px; }
.jump span { color:var(--berry); font-size:.75rem; }
.step { padding:26px; border-radius:20px; scroll-margin-top:16px; }
.step + .step { margin-top:20px; }
.rose { background:#fae3eb; } .lilac { background:#efe5fa; } .peach { background:#fde8dd; }
.step-heading { display:grid; grid-template-columns:auto minmax(200px,1fr) minmax(200px,.95fr); gap:12px 20px; align-items:center; margin-bottom:17px; }
.step-heading > span { color:var(--berry); font:400 2rem/1 var(--display); }
h2 { font:400 clamp(2.15rem,4.2vw,3.4rem)/.98 var(--display); letter-spacing:-.025em; }
.step-heading p,.planner p,.intro p,.prose p { color:var(--muted); }
.cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
.card { min-width:0; background:#fffdfb; border-radius:10px; overflow:hidden; display:flex; flex-direction:column; }
.card-photo { display:block; padding:12px; border-bottom:1px solid #f4e6eb; }
.card-photo img { width:100%; height:175px; object-fit:contain; }
.card-copy { display:flex; flex:1; flex-direction:column; gap:7px; padding:14px; }
.card h3 { font:400 1.38rem/1.07 var(--display); }
.card h3 a { text-decoration:none; }
.card h3 a:hover { text-decoration:underline; }
.spec { font-size:.82rem; color:var(--muted); }
.buy { color:var(--berry); font-weight:700; font-size:.84rem; margin-top:auto; }
.planner { display:grid; grid-template-columns:.8fr 1.2fr; gap:22px 40px; padding:33px; border:1px solid var(--line); background:#fff4f4; border-radius:22px; margin-top:36px; }
.planner p { margin-top:11px; max-width:440px; }
.planner label { font-weight:700; margin-right:8px; }
.planner input { width:86px; border:1px solid #b67796; border-radius:8px; padding:8px; font:inherit; }
.counts { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:11px; }
.counts div { display:flex; flex-direction:column; padding:8px 12px; border-radius:9px; background:white; }
.counts strong { font:400 2.4rem/1.15 var(--display); color:var(--berry); }
.counts span { font-size:.83rem; line-height:1.35; }
.guide-strip,.questions { padding-block:38px 20px; }
.guide-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px; margin-top:14px; }
.guide-links a { display:grid; grid-template-columns:1fr auto; column-gap:10px; padding:12px 0; border-bottom:1px solid var(--line); text-decoration:none; }
.guide-links a strong { grid-column:1; color:var(--berry); }
.guide-links a span:nth-child(2) { grid-column:1; color:var(--muted); font-size:.88rem; }
.guide-links a span:last-child { grid-column:2; grid-row:1 / 3; }
.guide-links a:hover strong { text-decoration:underline; }
.questions { padding-bottom:46px; }
details { border-bottom:1px solid var(--line); padding:11px 0; }
summary { cursor:pointer; font-weight:700; }
details p { max-width:700px; padding:5px 0 2px 16px; color:var(--muted); }
.foot { background:#f9e4ea; padding:24px 0; }
.foot-inner { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:15px 30px; }
.foot p { font-size:.83rem; color:var(--muted); }
.interior { padding-block:20px 52px; }
.crumb { display:flex; align-items:center; gap:9px; color:var(--muted); margin-bottom:23px; }
.intro p { margin-top:10px; max-width:640px; }
.intro .eyebrow { color:var(--berry); text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; font-weight:700; margin:0 0 10px; }
.product-layout { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:30px; }
.detail-photo { background:#fae3eb; padding:25px; border-radius:18px; }
.detail-photo img { width:100%; height:clamp(240px,33vw,420px); object-fit:contain; mix-blend-mode:multiply; }
.intro .pack { color:var(--ink); font-weight:700; margin:12px 0; }
.intro .small { font-size:.83rem; }
.prose { max-width:755px; margin-top:25px; }
.prose section + section { margin-top:23px; }
.prose h2 { margin-bottom:8px; font-size:clamp(1.65rem,3vw,2.35rem); }
.prose a:not(.button) { color:var(--berry); }

@media(max-width:850px) { .shell { width:calc(100% - 44px); } .cards { grid-template-columns:repeat(2,minmax(0,1fr)); } .step-heading { grid-template-columns:auto 1fr; } .step-heading p { grid-column:2; } }
@media(max-width:580px) {
  .shell { width:calc(100% - 30px); } .masthead { flex-wrap:wrap; padding-bottom:13px; } nav { gap:9px 16px; }
  .hero-frame { border-radius:52px 10px 10px 10px; } .hero-frame img { height:245px; }
  .hero-note { margin-top:-45px; padding:20px; } .jump nav { grid-template-columns:1fr; gap:6px; }
  .step { padding:14px; } .step-heading { gap:8px 10px; } .card-photo { padding:8px; } .card-photo img { height:130px; } .card-copy { padding:10px; }
  .planner,.guide-links,.product-layout { grid-template-columns:1fr; } .planner { padding:17px; } .counts div { padding:7px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
