/* Nicotine Free — marketing site styles.
   The app's own dawn/light tokens, so site and product read as one thing:
   warm paper + terracotta, deliberately apart from the blue/green recovery
   apps. Dark mode mirrors the app's warm night. Shared across the landing
   page, the privacy page, and the blog. */

:root{
  --bg:hsl(156 14% 96.5%); --bg2:hsl(156 13% 93%); --surface:#fbfdfc;
  --ink:hsl(156 22% 12%); --ink-soft:hsl(156 10% 34%); --ink-faint:hsl(156 8% 50%);
  --line:hsl(156 12% 86%);
  /* Variable names kept from the Hangover Free fork; values are now eucalyptus teal. */
  --terra:hsl(172 40% 32%); --terra-deep:hsl(172 42% 26%); --terra-sf:hsl(168 30% 92%);
  --drank:hsl(156 6% 74%);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Noto Serif",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",system-ui,sans-serif;
  --wrap:1080px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:hsl(156 12% 8.5%); --bg2:hsl(156 12% 11.5%); --surface:hsl(156 10% 13%);
    --ink:hsl(156 12% 92%); --ink-soft:hsl(156 8% 68%); --ink-faint:hsl(156 8% 50%);
    --line:hsl(156 10% 21%);
    --terra:hsl(172 42% 56%); --terra-deep:hsl(172 38% 48%); --terra-sf:hsl(172 28% 18%);
    --drank:hsl(156 6% 34%);
  }
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;line-height:1.1;text-wrap:balance;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.eyebrow{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--terra);font-weight:700;font-family:var(--sans);}
.muted{color:var(--ink-soft);}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:600;
  font-size:16px;padding:14px 22px;border-radius:13px;border:1px solid transparent;cursor:pointer;transition:transform .12s,opacity .2s;}
.btn:active{transform:scale(.98);}
.btn.primary{background:var(--terra);color:#fff;}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);}
/* The header CTA: same button, tighter than a page-level one. Was an inline
   style on every page, which meant the mobile override needed !important.
   flex:none + nowrap are the important part: as a flex item it was shrinking
   below its content width, wrapping "Get the app" onto two lines and making
   the button TALLER than the 64px header — which is what read as "the header
   looks weird". A header button must never wrap, in any language. */
.btn.nav-cta{padding:9px 16px;flex:none;white-space:nowrap;}
.btn .store-sub{font-size:11px;font-weight:500;opacity:.85;letter-spacing:.02em;line-height:1;}
.btn .store-main{font-size:16px;font-weight:700;line-height:1.05;}
.btn-col{display:flex;flex-direction:column;align-items:flex-start;}

/* ---- header ---- */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:20px;font-weight:600;}
.brand .mark{width:34px;height:34px;border-radius:9px;flex:none;}
.nav-links{display:flex;gap:26px;align-items:center;font-size:15px;}
.nav-links a{color:var(--ink-soft);}
.nav-links a:hover{color:var(--ink);}
/* Direct children only. Without the ">" this also matched the language
   dropdown's own links — they live inside .nav-links too — so on mobile the
   menu opened onto four display:none items and looked broken. */
@media (max-width:720px){.nav-links > a:not(.btn){display:none;}}

/* ---- hero ---- */
.hero{padding:76px 0 40px;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;}
.hero h1{font-size:clamp(40px,6vw,64px);}
.hero h1 em{font-style:italic;color:var(--terra);}
.hero .lede{font-size:20px;color:var(--ink-soft);margin:22px 0 32px;max-width:34ch;}
.cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.cta-note{font-size:13.5px;color:var(--ink-faint);margin-top:16px;}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;gap:36px;}.hero{padding:48px 0 24px;}.hero .lede{max-width:none;}}

/* ---- phone mock ---- */
.phone{width:290px;max-width:78vw;aspect-ratio:290/590;margin:0 auto;
  background:var(--bg);border:11px solid var(--ink);border-radius:44px;
  box-shadow:0 30px 70px hsl(30 40% 18% / .3);overflow:hidden;position:relative;}
@media (prefers-color-scheme:dark){.phone{border-color:hsl(30 10% 30%);}}
.scr{position:absolute;inset:0;padding:26px 20px;display:flex;flex-direction:column;}
.sbar{display:flex;justify-content:space-between;font-size:12px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;}
.tnum{font-variant-numeric:tabular-nums lining-nums;}
.m-count{font-family:var(--serif);font-size:104px;line-height:.9;text-align:center;margin-top:26px;letter-spacing:-.05em;}
.m-unit{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ink-soft);text-align:center;margin-top:8px;}
.m-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:26px;}
.m-stat{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:12px 4px;text-align:center;}
.m-stat b{font-family:var(--serif);font-weight:500;font-size:21px;display:block;}
.m-stat span{font-size:10px;color:var(--ink-faint);display:block;margin-top:3px;}
.m-wob{margin-top:16px;border:1.5px solid var(--terra);border-radius:15px;padding:15px;text-align:center;background:var(--surface);}
.m-wob b{font-family:var(--serif);font-size:19px;color:var(--terra);font-weight:500;}
.m-wob span{display:block;font-size:11px;color:var(--ink-faint);margin-top:3px;}

/* ---- trust strip ---- */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2);}
/* padding-BLOCK, not the shorthand: this element is also a .wrap, and a
   "padding:26px 0" here reset .wrap's 0 24px and pushed the icons flush
   against the left edge of the screen on mobile. */
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-block:26px;}
.trust-item{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;}
.trust-item svg{width:22px;height:22px;flex:none;stroke:var(--terra);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-top:1px;}
.trust-item b{font-weight:600;}
@media (max-width:820px){.trust-grid{grid-template-columns:1fr 1fr;gap:20px 18px;}}

/* ---- generic section ---- */
section{padding:76px 0;}
.sec-head{max-width:620px;margin-bottom:44px;}
.sec-head h2{font-size:clamp(28px,4vw,40px);margin:12px 0 14px;}
.sec-head p{color:var(--ink-soft);font-size:18px;}
.tinted{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

/* the frame block */
.frame{background:var(--terra);color:#fff;border-radius:26px;padding:clamp(34px,5vw,60px);}
@media (prefers-color-scheme:dark){.frame{background:var(--terra-deep);}}
.frame .eyebrow{color:hsl(28 60% 88%);}
.frame h2{color:#fff;font-size:clamp(28px,4vw,42px);margin:14px 0 20px;max-width:24ch;}
.frame p{color:hsl(30 40% 94%);font-size:19px;max-width:62ch;}
.frame p+p{margin-top:16px;}

/* features */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:860px){.feat-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.feat-grid{grid-template-columns:1fr;}}
.feat{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px;}
.feat .ic{width:42px;height:42px;border-radius:11px;background:var(--terra-sf);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.feat .ic svg{width:22px;height:22px;stroke:var(--terra);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.feat h3{font-size:19px;margin-bottom:8px;}
.feat p{font-size:15px;color:var(--ink-soft);}

/* showcase */
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.showcase.flip .sc-text{order:2;}
.showcase + .showcase{margin-top:60px;}
.sc-text h3{font-size:clamp(24px,3.4vw,32px);margin:12px 0 14px;}
.sc-text p{color:var(--ink-soft);font-size:17px;}
@media (max-width:820px){.showcase,.showcase.flip{grid-template-columns:1fr;gap:32px;}.showcase.flip .sc-text{order:0;}}
.yeargrid{display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;grid-auto-columns:1fr;gap:5px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;}
.yeargrid i{aspect-ratio:1;border-radius:3px;background:var(--terra);}
.yeargrid i.o{background:var(--line);}
.yeargrid i.d{background:var(--drank);}

/* pricing */
.price-card{max-width:560px;margin:0 auto;background:var(--surface);border:1px solid var(--line);
  border-radius:22px;padding:clamp(28px,4vw,40px);text-align:center;box-shadow:0 10px 40px hsl(30 30% 20% / .06);}
.price-card .free{font-family:var(--serif);font-size:34px;margin-bottom:6px;}
.price-list{list-style:none;text-align:left;max-width:420px;margin:26px auto 0;}
.price-list li{padding:11px 0 11px 30px;position:relative;border-bottom:1px solid var(--line);font-size:15.5px;}
.price-list li:last-child{border-bottom:0;}
.price-list li::before{content:"";position:absolute;left:2px;top:18px;width:8px;height:8px;border-radius:50%;background:var(--terra);}
.price-fine{font-size:14px;color:var(--ink-faint);margin-top:22px;}

/* founder */
.founder{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;max-width:760px;margin:0 auto;
  background:var(--bg2);border:1px solid var(--line);border-radius:22px;padding:32px;}
.founder .fq{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.5;}
.founder .fby{font-size:14px;color:var(--ink-faint);margin-top:14px;}
.founder .fmark{width:64px;height:64px;border-radius:16px;flex:none;}
@media (max-width:560px){.founder{grid-template-columns:1fr;text-align:center;}}

/* faq */
.faq{max-width:760px;margin:0 auto;}
details{border-bottom:1px solid var(--line);padding:20px 0;}
summary{font-family:var(--serif);font-size:19px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+";color:var(--terra);font-size:26px;font-family:var(--sans);line-height:1;transition:transform .2s;}
details[open] summary::after{transform:rotate(45deg);}
details p{color:var(--ink-soft);margin-top:12px;font-size:16px;}

/* final cta */
.final{text-align:center;}
.final h2{font-size:clamp(30px,5vw,48px);margin-bottom:18px;}
.final h2 em{font-style:italic;color:var(--terra);}

/* footer */
footer{border-top:1px solid var(--line);padding:40px 0;font-size:14px;color:var(--ink-faint);}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;}
.foot a{color:var(--ink-soft);}
.foot a:hover{color:var(--ink);}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;}
.foot-fine{margin-top:20px;font-size:12.5px;color:var(--ink-faint);max-width:760px;}

/* ---- article / prose (blog + privacy) ---- */
.page-head{padding:64px 0 20px;}
.page-head .kicker{margin-bottom:14px;}
.page-head h1{font-size:clamp(34px,5.5vw,52px);max-width:20ch;}
.page-head .dek{font-size:20px;color:var(--ink-soft);margin-top:18px;max-width:56ch;}
.page-head .byline{font-size:14px;color:var(--ink-faint);margin-top:18px;}
.prose{max-width:680px;margin:0 auto;padding:20px 24px 80px;font-size:18px;line-height:1.72;}
.prose>*+*{margin-top:1.15em;}
.prose h2{font-size:28px;margin-top:1.8em;}
.prose h3{font-size:21px;font-family:var(--sans);font-weight:700;margin-top:1.6em;}
.prose p{color:var(--ink);}
.prose a{color:var(--terra);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.prose ul,.prose ol{padding-left:1.3em;}
.prose li{margin-top:.5em;color:var(--ink);}
.prose blockquote{border-left:3px solid var(--terra);padding:4px 0 4px 22px;margin:1.4em 0;
  font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink);}
.prose .lead{font-size:21px;color:var(--ink-soft);}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.2em 0;}
.callout{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:22px 24px;font-size:16px;}
.callout strong{color:var(--ink);}
.post-cta{margin-top:2.4em;background:var(--terra);color:#fff;border-radius:20px;padding:30px;text-align:center;}
@media (prefers-color-scheme:dark){.post-cta{background:var(--terra-deep);}}
.post-cta h3{font-family:var(--serif);font-weight:600;font-size:24px;color:#fff;}
.post-cta p{color:hsl(30 40% 94%);margin-top:8px;}
.post-cta .btn{margin-top:18px;background:#fff;color:var(--terra);}

/* blog index list */
.post-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:4px;}
.post-item{display:block;padding:26px 0;border-bottom:1px solid var(--line);}
.post-item:hover h2{color:var(--terra);}
.post-item .tag{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--terra);font-weight:700;}
.post-item h2{font-size:26px;margin:10px 0 8px;transition:color .15s;}
.post-item p{color:var(--ink-soft);font-size:16px;}
.post-item .read{font-size:13.5px;color:var(--ink-faint);margin-top:10px;}

/* ---- health-benefits timeline ---- */
.hb-lead{max-width:680px;margin:0 auto;padding:4px 24px 0;font-size:20px;line-height:1.7;color:var(--ink-soft);}
.hb-timeline{max-width:680px;margin:44px auto 0;padding:0 24px 10px;}
.hb-item{position:relative;padding:0 0 36px 32px;border-left:2px solid var(--line);}
.hb-item:last-child{border-left-color:transparent;padding-bottom:0;}
.hb-item::before{content:"";position:absolute;left:-9px;top:3px;width:16px;height:16px;border-radius:50%;
  background:var(--terra);border:3px solid var(--bg);}
.hb-when{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--terra);font-weight:700;}
.hb-item h2{font-family:var(--serif);font-size:23px;font-weight:600;margin:7px 0 9px;letter-spacing:-.01em;}
.hb-item p{color:var(--ink);font-size:16.5px;line-height:1.65;margin:0 0 9px;}
.hb-src{font-size:13px;color:var(--ink-faint);}
.hb-src a{color:var(--ink-faint);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;}
.hb-src a:hover{color:var(--terra);}

/* ---- store badges ---------------------------------------------------------
   The official Google Play badge. Copied from the Hangover Free sibling so the
   two sites present the download the same way. The .play override is because
   Google's asset ships with built-in padding, so it needs a bigger box and a
   negative margin to optically match a plain badge. */
.badge-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.badge{display:inline-block;line-height:0;transition:transform .12s,opacity .2s;}
.badge:active{transform:scale(.98);}
.badge img,.badge svg{display:block;height:54px;width:auto;}
.badge.play img{height:66px;margin:-6px;}
@media (max-width:420px){.badge img,.badge svg{height:46px;}.badge.play img{height:56px;}}

/* ---- real app screenshots -------------------------------------------------
   Raw app screens (784x1688, captured by nicotinefree/scripts/capture-shots.js)
   inside a device frame. Ported from the Hangover Free sibling. */
.deviceshot{width:290px;max-width:78vw;margin:0 auto;background:var(--ink);
  border:10px solid var(--ink);border-radius:42px;overflow:hidden;
  box-shadow:0 30px 70px hsl(160 30% 14% / .3);}
.deviceshot img{display:block;width:100%;height:auto;border-radius:32px;}
@media (prefers-color-scheme:dark){.deviceshot{border-color:hsl(156 10% 26%);background:hsl(156 10% 26%);}}
/* Gallery of real screens — a few, shown big enough to actually read. */
.shots-head{text-align:center;max-width:640px;margin:0 auto 44px;}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
  max-width:960px;margin:0 auto;}
.gcard{text-align:center;}
.gcard .deviceshot{width:100%;max-width:288px;}
.gcard figcaption{margin-top:20px;font-family:var(--serif);font-size:19px;color:var(--ink);}
.gcard .cap-sub{display:block;font-family:var(--sans);font-size:14.5px;color:var(--ink-faint);margin-top:4px;line-height:1.4;}
@media (max-width:820px){.gallery{grid-template-columns:1fr 1fr;gap:36px 28px;max-width:560px;}}
@media (max-width:520px){.gallery{grid-template-columns:1fr;max-width:320px;gap:44px;}}

/* ---- language switcher ----------------------------------------------------
   Ported from the Hangover Free sibling. Click to open (touch-friendly) with
   aria-expanded for screen readers. */
/* display:flex, not the default block: the trigger is an inline-flex button,
   so in a block parent it sits on the text baseline and the line box's
   descender space pushes it ~2px above the header's optical centre while
   the wordmark and the CTA sit dead centre. */
.nav-menu{position:relative;display:flex;align-items:center;}
.nav-trigger{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;
  font:inherit;font-size:15px;color:var(--ink-soft);cursor:pointer;}
.nav-trigger:hover,.nav-menu.open .nav-trigger{color:var(--ink);}
.nav-trigger .chev{width:11px;height:11px;transition:transform .18s;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;}
.nav-menu.open .nav-trigger .chev{transform:rotate(180deg);}
.nav-trigger .globe{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;}
.nav-pop{position:absolute;top:calc(100% + 12px);right:0;min-width:180px;z-index:60;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:7px;
  box-shadow:0 14px 40px hsl(160 25% 16% / .16),0 2px 6px hsl(160 25% 16% / .07);
  opacity:0;visibility:hidden;transform:translateY(-5px);transition:opacity .16s,transform .16s,visibility .16s;}
.nav-menu.open .nav-pop{opacity:1;visibility:visible;transform:translateY(0);}
.nav-pop a{display:block;padding:10px 13px;border-radius:9px;font-size:15px;color:var(--ink);white-space:nowrap;}
.nav-pop a:hover{background:var(--bg2);}
.nav-pop a[aria-current="true"]{color:var(--terra);font-weight:600;background:var(--terra-sf);}
/* On narrow screens the other nav links drop away, but KEEP the language
   switcher — a Spanish or Portuguese reader landing on the English page needs a
   way across, and most traffic here is mobile. */
@media (max-width:720px){
  .nav-trigger{font-size:14px;}
  .nav-trigger .lang-label{display:none;}
  .nav-lang .nav-pop{min-width:160px;}

  /* With the text links gone, the header is just brand + globe + CTA. At the
     desktop scale the CTA reads as the loudest thing on the page and crowds
     the wordmark, so trim both. Sized for the longest label across languages
     ("Télécharger"), not just "Get the app". */
  .nav{height:58px;gap:12px;}
  .nav-links{gap:14px;}
  .brand{font-size:17px;gap:9px;min-width:0;}
  .brand .mark{width:28px;height:28px;}
  .btn.nav-cta{font-size:14px;padding:8px 14px;border-radius:11px;}
}

/* Small phones. Everything in the header shrinks together so the WORDMARK
   STAYS READABLE — hiding it was the wrong trade: the header stops saying what
   the site is. Two steps rather than one, because 375px (much the most common
   phone width) has room to be comfortable and 320px does not. Both tiers are
   measured against French "Télécharger", the longest CTA label of the four
   languages; at 320px the 16px tier leaves literally 0px of slack. */
@media (max-width:400px){
  .nav-links{gap:12px;}
  .brand{font-size:16px;gap:8px;}
  .brand .mark{width:27px;height:27px;}
  .btn.nav-cta{font-size:14px;padding:8px 13px;}
}
@media (max-width:360px){
  .nav-links{gap:8px;}
  .brand{font-size:14px;gap:6px;}
  .brand .mark{width:24px;height:24px;}
  .nav-trigger .globe{width:15px;height:15px;}
  .btn.nav-cta{font-size:13px;padding:7px 10px;}
}