/* Sipbook website. Tokens, type and radii come from BRAND.md; nothing here is invented. */
@font-face{font-family:"Figtree";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/figtree-400.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/figtree-500.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/figtree-600.woff2) format("woff2")}

:root{
  --bg:#F6F7F5; --card:#FFFFFF; --ink:#1C2430; --teal:#0E7C78; --mist:#DCE9E6; --fog:#ECEFED;
  --attn:#38668F; --slate:#6B7681; --line:#D6DDDA; --flame-bg:#DCE9E6; --flame-ink:#0E7C78;
  --cta:#0E7C78; --cta-text:#F6F7F5; --ink-btn:#1C2430; --ink-btn-text:#F6F7F5;
  --ui:"Figtree",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --wrap:1080px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#101820; --card:#1B2631; --ink:#F6F7F5; --teal:#3FB3AD; --mist:#223038; --fog:#27333E;
    --attn:#8AB4E0; --slate:#8C98A4; --line:#2A3641; --flame-bg:#223038; --flame-ink:#3FB3AD;
    --cta:#3FB3AD; --cta-text:#101820; --ink-btn:#F6F7F5; --ink-btn-text:#101820;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#101820; --card:#1B2631; --ink:#F6F7F5; --teal:#3FB3AD; --mist:#223038; --fog:#27333E;
  --attn:#8AB4E0; --slate:#8C98A4; --line:#2A3641; --flame-bg:#223038; --flame-ink:#3FB3AD;
  --cta:#3FB3AD; --cta-text:#101820; --ink-btn:#F6F7F5; --ink-btn-text:#101820;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--ui); font-size:17px; line-height:1.45;
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums}
img{max-width:100%; height:auto; display:block}
a{color:var(--teal); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--teal); outline-offset:2px; border-radius:4px}
h1,h2,h3{margin:0; font-weight:600; text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:20px}
.eyebrow{font-family:var(--ui); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate)}
.skip{position:absolute; left:-999px; top:8px; background:var(--ink-btn); color:var(--ink-btn-text); padding:10px 14px; border-radius:14px; z-index:10}
.skip:focus{left:12px}

/* top bar */
.top{padding-block:18px}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:600; font-size:24px; letter-spacing:-.03em}
.brand svg{width:28px; height:28px; color:var(--teal); flex:none}
.top nav{display:flex; gap:20px; font-size:16px}
.top nav a{color:var(--slate); text-decoration:none; font-weight:500}
.top nav a:hover, .top nav a[aria-current="page"]{color:var(--ink)}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:15px 24px; border-radius:999px;
  font:600 17px/1.2 var(--ui); text-decoration:none; border:0}
.btn.primary{background:var(--cta); color:var(--cta-text)}
.btn.ink{background:var(--ink-btn); color:var(--ink-btn-text)}
.btn.soon{background:var(--fog); color:var(--ink); cursor:default}
.btn.soon svg{width:20px; height:20px}

/* hero */
.hero{padding-block:32px 72px}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:48px; align-items:center}
.hero h1{font-size:clamp(38px,5.6vw,60px); line-height:1.05; letter-spacing:-.03em; max-width:14ch}
.hero .lede{font-size:clamp(18px,2vw,21px); color:var(--slate); max-width:34ch; margin-top:20px}
.hero .actions{display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; margin-top:32px}
.hero .actions .note{font-size:15px; color:var(--slate)}
.hero .text{display:flex; flex-direction:column}
.hero .text .eyebrow{margin-bottom:18px}
.phone{margin:0 auto; width:min(100%, 340px)}

/* features */
.features{padding-block:24px 88px}
.features h2, .section-head h2{font-size:clamp(28px,3.4vw,36px); line-height:1.12; letter-spacing:-.02em}
.section-head{display:flex; flex-direction:column; gap:10px; margin-bottom:36px; max-width:36ch}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.feature{background:var(--card); border-radius:20px; padding:28px 24px 0; display:flex; flex-direction:column; gap:10px; overflow:hidden}
.feature h3{font-size:21px; line-height:1.2; letter-spacing:-.01em}
.feature p{color:var(--slate); font-size:16px}
.feature .shot{margin-top:auto; padding-top:18px; align-self:center; width:min(100%,250px)}
.feature .shot img{margin-bottom:-12%}

/* medication band */
.band{background:var(--mist); padding-block:80px}
.band .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:48px; align-items:center}
.band h2{font-size:clamp(28px,3.4vw,36px); line-height:1.12; letter-spacing:-.02em}
.band .copy{display:flex; flex-direction:column; gap:16px; max-width:52ch}
.band .copy p{font-size:18px}
.band .copy .quiet{color:var(--slate); font-size:16px}
.band ul{margin:4px 0 0; padding:0; list-style:none; display:grid; gap:10px}
.band li{display:flex; gap:12px; align-items:flex-start; font-size:17px}
.band li svg{width:20px; height:20px; color:var(--teal); flex:none; margin-top:2px}

/* privacy */
.privacy{padding-block:88px 40px}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.fact{background:var(--card); border-radius:20px; padding:22px; display:flex; gap:16px; align-items:flex-start}
.fact .ico{width:40px; height:40px; border-radius:10px; background:var(--mist); color:var(--teal); display:grid; place-items:center; flex:none}
.fact .ico svg{width:20px; height:20px}
.fact b{display:block; font-size:18px; font-weight:600; margin-bottom:4px}
.fact span{color:var(--slate); font-size:16px}
.privacy .more{margin-top:20px; font-size:16px}

/* support */
.support{padding-block:48px 88px}
.faq{display:grid; gap:8px; max-width:760px}
.faq details{background:var(--card); border-radius:16px; padding:0 20px}
.faq summary{cursor:pointer; list-style:none; padding:18px 0; font-weight:600; font-size:17px; display:flex; justify-content:space-between; gap:16px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--ui); font-weight:400; color:var(--teal); font-size:20px; line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 18px; color:var(--slate); font-size:16px; max-width:64ch}
.contact{margin-top:28px; background:var(--card); border-radius:20px; padding:22px; display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center; justify-content:space-between; max-width:760px}
.contact b{font-size:18px}
.contact .addr{font-family:var(--ui); font-size:15px}
.care{margin-top:16px; font-size:15px; color:var(--slate); max-width:64ch}

/* footer */
footer.site{border-top:1px solid var(--line); padding-block:28px 40px; font-size:14px; color:var(--slate)}
footer.site .wrap{display:grid; gap:10px}
footer.site nav{display:flex; flex-wrap:wrap; gap:8px 20px}
footer.site nav a{color:var(--ink); font-weight:500}
footer.site .legal{font-size:13px; line-height:1.5; max-width:80ch}

/* policy page */
.doc{padding-block:24px 88px}
.doc .wrap{max-width:760px}
.doc h1{font-size:clamp(34px,5vw,48px); line-height:1.08; letter-spacing:-.03em}
.doc .updated{margin-top:12px}
.doc .short{margin-top:28px; background:var(--card); border-radius:20px; padding:22px 24px; display:grid; gap:8px}
.doc .short p{font-size:18px}
.doc section{margin-top:40px; display:grid; gap:12px}
.doc h2{font-size:24px; letter-spacing:-.01em; line-height:1.2}
.doc h3{font-size:18px; margin-top:6px}
.doc p, .doc li{font-size:17px; max-width:66ch}
.doc ul{margin:0; padding-left:20px; display:grid; gap:6px}
.doc .tag{display:inline-block; font-family:var(--ui); font-size:11px; letter-spacing:.06em; text-transform:uppercase; background:var(--mist); color:var(--teal); padding:3px 8px; border-radius:999px; vertical-align:3px; margin-left:6px}
.fill{background:var(--flame-bg); color:var(--ink); border-radius:6px; padding:0 4px}

@media (max-width:900px){
  .hero .wrap, .band .wrap{grid-template-columns:minmax(0,1fr); gap:40px}
  .grid3{grid-template-columns:minmax(0,1fr); max-width:520px}
  .feature .shot{width:min(100%,240px)}
}
@media (max-width:620px){
  .grid2{grid-template-columns:minmax(0,1fr)}
  .top nav{gap:14px; font-size:15px}
  .hero{padding-block:16px 56px}
  .band{padding-block:56px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* import help page */
.doc .links{display:grid; gap:8px; padding-left:20px}
.doc .cols{border-collapse:collapse; width:100%; max-width:66ch; font-size:16px}
.doc .cols th{text-align:left; font:500 12px/1.4 var(--ui); letter-spacing:.08em; text-transform:uppercase; color:var(--slate); padding:8px 12px 8px 0; border-bottom:1px solid var(--line)}
.doc .cols td{padding:10px 12px 10px 0; border-bottom:1px solid var(--line); vertical-align:baseline}
.doc .cols td:first-child{font-weight:600; white-space:nowrap}

/* v2 home: mode picker, the two modes, section subtitles, company name as an image */
.section-head .sub{color:var(--slate); font-size:18px; max-width:60ch}
.section-head:has(.sub){max-width:62ch}
.modepick{display:grid; gap:10px; margin-top:28px; max-width:460px}
.modepick a{display:flex; align-items:center; gap:14px; background:var(--card); border-radius:18px; padding:14px 18px; color:var(--ink); text-decoration:none; border:1.5px solid transparent}
.modepick a:hover{border-color:var(--teal)}
.modepick a::after{content:"›"; margin-left:auto; color:var(--slate); font-size:22px}
.modepick .ico{width:40px; height:40px; border-radius:10px; background:var(--mist); color:var(--teal); display:grid; place-items:center; flex:none}
.modepick .ico svg{width:20px; height:20px}
.modepick b{display:block; font-size:17px}
.modepick small{display:block; color:var(--slate); font-size:14px; margin-top:2px}
.modes{padding-block:32px 88px}
.modegrid{display:grid; gap:20px}
.mode{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:40px; align-items:center; background:var(--card); border-radius:28px; padding:44px 48px; scroll-margin-top:16px}
.mode#med{background:var(--mist)}
.mode .copy{display:flex; flex-direction:column; gap:14px}
.mode h3{font-size:clamp(24px,2.8vw,30px); line-height:1.15; letter-spacing:-.02em}
.mode .copy>p{font-size:18px}
.mode .copy .quiet{color:var(--slate); font-size:16px}
.mode .phone{width:min(100%,300px)}
.ticks{margin:4px 0 0; padding:0; list-style:none; display:grid; gap:10px}
.ticks li{display:flex; gap:12px; align-items:flex-start; font-size:17px}
.ticks li svg{width:20px; height:20px; color:var(--teal); flex:none; margin-top:2px}
.grid3.small{margin-top:20px}
.grid3.small .fact span a{white-space:nowrap}
.coname{display:inline-block; width:12.648em; height:1.2em; vertical-align:-.25em; background:currentColor;
  -webkit-mask:url(company.svg) no-repeat left center/contain; mask:url(company.svg) no-repeat left center/contain}
@media (max-width:900px){
  .mode{grid-template-columns:minmax(0,1fr); padding:32px 24px; gap:28px}
  .mode .phone{width:min(100%,280px)}
}
@media (max-width:620px){ .top nav a[href="#modes"], .top nav a[href="#features"]{display:none} }
.mode .copy>p.eyebrow{font-size:12px}