/* freezedrybreastmilk.net — standalone stylesheet (self-contained folder).
   Same brand tokens as lactovault.com's assets/css/style.css, trimmed to only
   what this single-page site needs. Mobile-first, no build step. */

:root {
  --navy: #0B2545; --teal: #16A6A0; --cream: #FBF6EF; --slate: #5C6670;
  --trust-green: #1E9E7C; --white: #FFFFFF; --border: #E7E2D8; --border-soft: #EEE8DE; --text: #3A4149;
  --font: 'Inter', Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; font-family:var(--font); color:var(--text); background:var(--white); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.container { max-width:640px; margin:0 auto; padding:0 20px; }
@media (min-width:900px) { .container { max-width:760px; } }

/* Keyboard accessibility, matching lactovault.com */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px;
}

.mini-header { display:flex; justify-content:center; padding:16px 0; background:var(--cream); border-bottom:1px solid var(--border-soft); }
.mini-header .brand { display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:1px; color:var(--slate); font-weight:600; }
.mini-header svg { width:22px; height:22px; }

.hero { padding:32px 0 20px; position:relative; overflow:hidden; }
@media (min-width:900px) { .hero { padding:64px 0 48px; text-align:center; } }
.hero .container { position:relative; z-index:1; }
@media (min-width:900px) {
  .hero .container { max-width:600px; }
}
/* Soft decorative droplet watermark behind the hero on wide screens — pure
   CSS, no image asset required. */
@media (min-width:900px) {
  .hero::before {
    content:""; position:absolute; top:-60px; right:-60px; width:340px; height:340px; border-radius:50%;
    background: radial-gradient(circle at 30% 30%, rgba(22,166,160,.10), rgba(22,166,160,0) 70%);
  }
}
.eyebrow { font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--teal); margin-bottom:8px; display:block; }
.h1 { font-size:28px; font-weight:700; color:var(--navy); line-height:1.3; margin:0 0 12px; }
.h2 { font-size:22px; font-weight:700; color:var(--navy); margin:0 0 14px; }
.subhead { font-size:15px; color:var(--slate); }
@media (min-width:640px) { .h1 { font-size:34px; } .subhead { font-size:16px; } }
@media (min-width:1024px) { .h1 { font-size:40px; } .h2 { font-size:26px; } }

.btn {
  display:flex; width:100%; align-items:center; justify-content:center; min-height:48px; padding:14px 22px;
  border-radius:12px; font-size:15.5px; font-weight:700; border:none; transition: opacity .15s ease, transform .15s ease;
}
.btn:hover { opacity:.92; }
.btn:active { transform: scale(.98); }
.btn-primary { background:var(--teal); color:#fff; }
.btn-dark { background:var(--navy); color:#fff; }
@media (min-width:640px) { .btn { width:auto; display:inline-flex; padding:15px 30px; } }

.benefits { background:var(--cream); padding:26px 0; }
@media (min-width:900px) { .benefits { padding:36px 0; } }
.benefits .container { }
@media (min-width:640px) {
  .benefits .container { display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; }
  .benefits .eyebrow { grid-column: 1 / -1; }
}
.benefit-item { font-size:14px; color:var(--text); margin-bottom:10px; }
.benefit-item b { color:var(--navy); }

.steps { display:flex; gap:10px; padding:26px 0; }
@media (min-width:900px) { .steps { padding:40px 0; gap:32px; } }
.step { flex:1; text-align:center; }
.step-num { width:36px; height:36px; margin:0 auto 6px; border-radius:50%; background:#EAF3F2; color:var(--navy); font-weight:700; display:flex; align-items:center; justify-content:center; }
@media (min-width:900px) { .step-num { width:44px; height:44px; font-size:17px; } }
.step-label { font-size:11.5px; color:var(--slate); }
@media (min-width:900px) { .step-label { font-size:13px; } }

.trust-bar { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; background:var(--navy); padding:10px 0; }
.trust-bar a { color:#EAF3F2; font-size:11px; font-weight:600; padding:6px 4px; display:inline-block; }
.trust-bar a:hover { color:#fff; text-decoration:underline; }

.price-card {
  background:var(--cream); border:1px solid var(--border); border-radius:14px; padding:20px; text-align:center;
  margin:26px 0; transition: box-shadow .15s ease;
}
@media (min-width:900px) { .price-card { max-width:420px; margin:36px auto; padding:32px; box-shadow: 0 10px 30px rgba(11,37,69,.06); } }
.price-big { font-size:26px; font-weight:700; color:var(--navy); margin:4px 0 14px; }
@media (min-width:900px) { .price-big { font-size:34px; } }
.price-big span { font-size:14px; font-weight:500; color:var(--slate); }

.faq-item summary {
  padding:12px 0; font-size:13.5px; font-weight:600; color:var(--navy); cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; border-bottom:1px solid var(--border-soft); min-height:44px; align-items:center;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; color:var(--teal); font-size:16px; }
.faq-item[open] summary::after { content:"−"; }
.faq-item p { padding:0 0 12px; font-size:13px; color:var(--slate); line-height:1.6; }
@media (min-width:900px) { .faq-item summary { font-size:14.5px; } .faq-item p { font-size:14px; } }

.bridge-footer { background:var(--navy); padding:26px 0; text-align:center; }
@media (min-width:900px) { .bridge-footer { padding:48px 0; } }
.bridge-footer .h2 { color:#fff; font-size:16px; margin-bottom:4px; }
@media (min-width:900px) { .bridge-footer .h2 { font-size:22px; } }
.bridge-footer p { color:#B7C0C9; font-size:12px; margin-bottom:14px; }
.bridge-footer .btn { width:auto; display:inline-flex; padding:12px 22px; }