/* Brimful landing site — palette derived from app icon:
   deep royal blue bottle #1443C8, bright wave blue #1E8EF7, white field */
:root{
  --blue:#1443C8;
  --blue-deep:#0F35A0;
  --wave:#1E8EF7;
  --ink:#101D3F;
  --muted:#4A5675;
  --bg:#FFFFFF;
  --bg-soft:#F2F6FE;
  --card:#FFFFFF;
  --line:#DCE4F5;
  --link:#1240B8;
  --badge-bg:#101D3F;
  --badge-ink:#FFFFFF;
  --shadow:0 10px 30px rgba(16,29,63,.10);
  --radius:16px;
}
@media (prefers-color-scheme:dark){
  :root{
    --blue:#5B8DEF;
    --blue-deep:#3E6FE0;
    --wave:#4EA5FF;
    --ink:#E8EEFC;
    --muted:#A9B6D6;
    --bg:#0A1020;
    --bg-soft:#0F1830;
    --card:#141F3C;
    --line:#26335A;
    --link:#8AB4FF;
    --badge-bg:#E8EEFC;
    --badge-ink:#0A1020;
    --shadow:0 10px 30px rgba(0,0,0,.45);
  }
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--link)}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--wave);outline-offset:3px;border-radius:6px;
}
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;
  padding:.6rem 1rem;border-radius:0 0 8px 0;z-index:100;font-weight:600;
}
.skip-link:focus{left:0}
.wrap{max-width:1080px;margin:0 auto;padding:0 1.25rem}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;background:var(--bg);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;gap:1rem;min-height:64px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);font-weight:700;font-size:1.1rem}
.brand img{width:36px;height:36px;border-radius:9px}
.nav-toggle{
  display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:8px;padding:.45rem .7rem;color:var(--ink);font-size:1rem;cursor:pointer;
}
.site-nav{margin-left:auto}
.site-nav ul{display:flex;gap:1.4rem;list-style:none}
.site-nav a{text-decoration:none;color:var(--muted);font-weight:600;font-size:.95rem}
.site-nav a:hover{color:var(--blue)}
.site-nav .nav-cta{
  color:#fff;background:var(--blue);padding:.45rem .95rem;border-radius:999px;
}
@media (prefers-color-scheme:dark){.site-nav .nav-cta{color:#0A1020}}
.site-nav .nav-cta:hover{color:#fff;background:var(--blue-deep)}
@media (prefers-color-scheme:dark){.site-nav .nav-cta:hover{color:#0A1020}}
@media (max-width:760px){
  .nav-toggle{display:block}
  .site-nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;gap:0;padding:.5rem 1.25rem 1rem}
  .site-nav li{border-top:1px solid var(--line)}
  .site-nav li:first-child{border-top:0}
  .site-nav a{display:block;padding:.85rem 0}
  .site-nav .nav-cta{display:inline-block;margin:.6rem 0;padding:.55rem 1.1rem}
}

/* Hero */
.hero{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-soft) 100%);overflow:hidden}
.hero .wrap{
  display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center;
  padding-top:4rem;padding-bottom:4.5rem;
}
.eyebrow{
  display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--blue);background:color-mix(in srgb,var(--wave) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--wave) 35%,transparent);
  padding:.3rem .8rem;border-radius:999px;margin-bottom:1.1rem;
}
h1{font-size:clamp(2rem,5vw,3.1rem);line-height:1.12;letter-spacing:-.02em;margin-bottom:1rem}
h1 .accent{color:var(--blue)}
.hero p.lead{font-size:1.15rem;color:var(--muted);max-width:34rem;margin-bottom:1.6rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.store-badge{
  display:inline-flex;align-items:center;gap:.7rem;background:var(--badge-bg);color:var(--badge-ink);
  text-decoration:none;border-radius:12px;padding:.6rem 1.15rem;line-height:1.15;
  border:1px solid transparent;transition:transform .15s ease;
}
.store-badge:hover{transform:translateY(-2px)}
.store-badge svg{width:26px;height:26px;flex:none}
.store-badge .small{display:block;font-size:.66rem;opacity:.8}
.store-badge .big{display:block;font-size:1.05rem;font-weight:700}
.btn-ghost{
  display:inline-block;text-decoration:none;font-weight:600;color:var(--blue);
  padding:.75rem 1.2rem;border:1.5px solid var(--blue);border-radius:12px;
}
.btn-ghost:hover{background:color-mix(in srgb,var(--blue) 8%,transparent)}
.hero-note{margin-top:1rem;font-size:.85rem;color:var(--muted)}

/* Bottle mock (brand illustration — app ships no public screenshots) */
.bottle-scene{display:flex;justify-content:center}
.bottle{
  position:relative;width:min(240px,60vw);aspect-ratio:24/31;
  border:10px solid var(--blue);border-radius:48px 48px 56px 56px;
  background:var(--bg);box-shadow:var(--shadow);margin-top:34px;
}
.bottle::before{
  content:"";position:absolute;top:-40px;left:50%;transform:translateX(-50%);
  width:38%;height:34px;border:10px solid var(--blue);border-bottom:none;
  border-radius:14px 14px 0 0;background:var(--bg);
}
.bottle .glass{
  position:absolute;inset:0;border-radius:38px 38px 46px 46px;overflow:hidden;
}
.bottle .fill{
  position:absolute;left:0;right:0;bottom:0;height:62%;background:var(--blue);
  animation:fill 3.2s ease-out both;
}
.bottle .fill::before{
  content:"";position:absolute;top:-14px;left:-30%;width:160%;height:22px;
  background:var(--wave);border-radius:50%;
  animation:bob 4s ease-in-out infinite;
}
.bottle .pct{
  position:absolute;left:0;right:0;bottom:24%;text-align:center;
  color:#fff;font-weight:800;font-size:2rem;letter-spacing:-.02em;
}
@media (prefers-color-scheme:dark){.bottle .pct{color:#0A1020}}
@keyframes fill{from{height:8%}to{height:62%}}
@keyframes bob{0%,100%{transform:translateX(0)}50%{transform:translateX(6%)}}
.bottle-caption{margin-top:1rem;text-align:center;font-size:.85rem;color:var(--muted)}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;gap:2.2rem;padding-top:2.6rem;padding-bottom:3rem}
  .bottle-scene{order:-1}
  .bottle{width:min(190px,52vw)}
}

/* Sections */
section{padding:4rem 0}
section.alt{background:var(--bg-soft)}
h2{font-size:clamp(1.5rem,3.4vw,2.15rem);letter-spacing:-.015em;margin-bottom:.6rem}
.section-intro{color:var(--muted);max-width:44rem;margin-bottom:2.2rem;font-size:1.05rem}

/* Problem/solution */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.pain{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;box-shadow:var(--shadow);
}
.pain h3{font-size:1.05rem;margin-bottom:.45rem}
.pain p{font-size:.95rem;color:var(--muted)}
.pain .no{color:var(--blue);font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;display:block;margin-bottom:.5rem}
@media (max-width:820px){.pain-grid{grid-template-columns:1fr}}

/* Features */
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.feature{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;
}
.feature .ico{
  width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--wave) 14%,transparent);margin-bottom:.9rem;
}
.feature .ico svg{width:24px;height:24px;stroke:var(--blue);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feature h3{font-size:1rem;margin-bottom:.35rem}
.feature p{font-size:.9rem;color:var(--muted)}
@media (max-width:980px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.feature-grid{grid-template-columns:1fr}}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;counter-reset:step}
.step{position:relative;padding:1.6rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.step::before{
  counter-increment:step;content:counter(step);
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:50%;background:var(--blue);color:#fff;font-weight:800;margin-bottom:1rem;
}
@media (prefers-color-scheme:dark){.step::before{color:#0A1020}}
.step h3{font-size:1.05rem;margin-bottom:.4rem}
.step p{font-size:.95rem;color:var(--muted)}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

/* Pricing band */
.price-band{
  background:var(--blue);color:#fff;border-radius:calc(var(--radius) + 6px);
  padding:2.6rem 2rem;text-align:center;
}
.price-band h2{color:#fff}
.price-band p{max-width:38rem;margin:.6rem auto 1.4rem;color:rgba(255,255,255,.88)}
.price-band .store-badge{background:#fff;color:var(--ink)}
@media (prefers-color-scheme:dark){
  .price-band{background:var(--blue-deep)}
  .price-band .store-badge{color:#101D3F}
}
.price-points{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:center;list-style:none;margin:0 0 1.6rem;padding:0}
.price-points li{font-weight:600;font-size:.95rem}
.price-points li::before{content:"✓ ";font-weight:800}

/* FAQ */
.faq details{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  margin-bottom:.8rem;overflow:hidden;
}
.faq summary{
  cursor:pointer;font-weight:600;padding:1.05rem 1.25rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;font-weight:400;color:var(--blue);flex:none;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .answer{padding:0 1.25rem 1.15rem;color:var(--muted);font-size:.97rem}
.faq .answer a{color:var(--link)}

/* Guides teaser */
.guide-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.guide-card{
  display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.5rem;color:var(--ink);transition:transform .15s ease;
}
.guide-card:hover{transform:translateY(-3px);border-color:var(--wave)}
.guide-card .tag{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--blue)}
.guide-card h3{margin:.4rem 0 .4rem;font-size:1.1rem}
.guide-card p{font-size:.92rem;color:var(--muted)}
@media (max-width:700px){.guide-cards{grid-template-columns:1fr}}

/* Footer */
.site-footer{border-top:1px solid var(--line);background:var(--bg-soft);padding:3rem 0 2.2rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
.site-footer h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:.7rem}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:.45rem}
.site-footer a{color:var(--ink);text-decoration:none;font-size:.95rem}
.site-footer a:hover{color:var(--blue);text-decoration:underline}
.site-footer .about p{color:var(--muted);font-size:.92rem;max-width:26rem}
.site-footer .legal{font-size:.82rem;color:var(--muted);border-top:1px solid var(--line);padding-top:1.4rem}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr}}

/* Guide pages */
.breadcrumb{font-size:.85rem;color:var(--muted);padding:1.2rem 0 0}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem}
.breadcrumb li+li::before{content:"›";margin-right:.35rem;color:var(--muted)}
.breadcrumb a{color:var(--link);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.guide-article{max-width:46rem;margin:0 auto;padding:1.5rem 1.25rem 4rem}
.guide-article header{margin-bottom:2rem}
.guide-article .meta{font-size:.85rem;color:var(--muted);margin-top:.6rem}
.guide-article h2{margin-top:2.4rem;font-size:1.5rem}
.guide-article h3{margin-top:1.6rem;margin-bottom:.4rem;font-size:1.15rem}
.guide-article p{margin:.9rem 0;color:var(--ink)}
.guide-article ul,.guide-article ol{margin:.9rem 0 .9rem 1.4rem}
.guide-article li{margin-bottom:.45rem}
.guide-article table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.95rem}
.guide-article th,.guide-article td{border:1px solid var(--line);padding:.6rem .8rem;text-align:left}
.guide-article th{background:var(--bg-soft)}
.callout{
  background:var(--bg-soft);border-left:4px solid var(--blue);border-radius:0 12px 12px 0;
  padding:1.1rem 1.3rem;margin:1.6rem 0;font-size:.97rem;
}
.app-cta{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1.8rem;margin:2.6rem 0 0;
}
.app-cta .app-cta-head{display:flex;align-items:center;gap:.9rem;margin-bottom:.8rem}
.app-cta img{width:52px;height:52px;border-radius:12px}
.app-cta h2{margin:0;font-size:1.25rem}
.app-cta p{color:var(--muted)}
.app-cta .cta-row{margin-top:1.1rem}
.sibling-guides{margin-top:2.8rem;border-top:1px solid var(--line);padding-top:1.6rem}
.sibling-guides h2{font-size:1.15rem;margin-bottom:.9rem}
.sibling-guides ul{list-style:none;margin:0}
.sibling-guides li{margin-bottom:.55rem}