/* RoutineKit — visual language references Samsung.com/support:
   SamsungOne / Samsung Sharp Sans first (native system fonts on Galaxy phones,
   which is the target audience), then Roboto / system fallbacks. No web-font
   request — GDPR-clean and fast. Light only, like Samsung's support pages —
   white background on every page regardless of the visitor's system theme.
   Mobile-first throughout. */

:root{
  color-scheme:light;        /* force light form controls / scrollbars */
  --bg:#ffffff;
  --tint:#f5f6f7;
  --tint-2:#eef0f2;
  --line:#e0e1e3;
  --ink:#161616;
  --ink-2:#5b5f63;
  --ink-3:#8a8f94;
  --blue:#1428a0;          /* Samsung blue — links, accents */
  --blue-press:#0d1c78;
  --blue-wash:#eef1fb;
  --btn:#161616;           /* Samsung.com CTAs are black pills */
  --btn-fg:#ffffff;
  --ok:#0a7c42;
  --r:12px;
  --r-lg:16px;
  --w:760px;               /* reading column */
  --pad:20px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:#ffffff;
  color:var(--ink);
  font-family:"SamsungOne","Samsung Sharp Sans","Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-underline-offset:2px}
a:active{color:var(--blue-press)}

.wrap{width:100%;max-width:var(--w);margin:0 auto;padding:0 var(--pad)}
.wide{max-width:1040px}

/* ---------- header / footer ---------- */
header.site{
  border-bottom:1px solid var(--line);
  background:var(--bg);
  position:sticky;top:0;z-index:20;
}
header.site .wrap{
  display:flex;align-items:center;justify-content:space-between;
  min-height:56px;
}
.brand{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:700;font-size:18px;letter-spacing:-.01em;
  text-decoration:none;color:var(--ink);
}
.brand .mark{width:26px;height:26px;display:block;flex:0 0 auto}
header.site nav{display:flex;gap:14px;white-space:nowrap;flex:0 0 auto}
header.site nav a{
  color:var(--ink-2);text-decoration:none;font-size:14px;
}
header.site nav a:hover{color:var(--ink)}
@media (min-width:720px){
  header.site nav{gap:20px}
  header.site nav a{font-size:15px}
}

footer.site{
  border-top:1px solid var(--line);
  padding:28px 0 40px;
  color:var(--ink-3);font-size:13.5px;
  background:var(--tint);
}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
footer.site a{color:var(--ink-2);text-decoration:none}
footer.site a:hover{color:var(--ink)}
footer.site .fine{flex-basis:100%;margin-top:6px;line-height:1.5}

/* ---------- headings / prose ---------- */
h1,h2,h3{letter-spacing:-.015em;line-height:1.22;margin:0}
h1{font-size:clamp(26px,6.4vw,40px);font-weight:700}
h2{font-size:clamp(20px,4.6vw,26px);font-weight:700}
h3{font-size:17px;font-weight:700}
p{margin:0 0 14px}
.lead{font-size:clamp(16px,3.6vw,19px);color:var(--ink-2)}
.muted{color:var(--ink-2)}
.eyebrow{
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue);margin:0 0 8px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 26px;
  background:var(--btn);color:var(--btn-fg);
  border:1px solid var(--btn);border-radius:999px;
  font:inherit;font-weight:600;font-size:16px;
  text-decoration:none;cursor:pointer;
  transition:opacity .15s ease;
}
.btn:hover{opacity:.88}
.btn:active{opacity:.75}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.block{display:flex;width:100%}
.btn.sm{min-height:40px;padding:8px 18px;font-size:14.5px}

/* ---------- generic sections ---------- */
main section{padding:44px 0;border-top:1px solid var(--line)}
main section:first-child{border-top:0}
.section-head{margin-bottom:22px}
.section-head p{margin:6px 0 0;color:var(--ink-2)}

/* ---------- hero ---------- */
.hero{padding:52px 0 40px;border-top:0}
.hero h1{margin-bottom:14px}
.hero .lead{max-width:560px}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero .note{margin-top:14px;font-size:13.5px;color:var(--ink-3)}

/* ---------- feature / routine cards ---------- */
.cards{display:grid;gap:14px;grid-template-columns:1fr}
.card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:18px;
}
.card.tint{background:var(--tint);border-color:transparent}
.card h3{margin-bottom:6px}
.card p{margin:0;color:var(--ink-2);font-size:14.5px}

/* routine list item — whole card is a link */
a.routine{
  display:flex;align-items:center;gap:14px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;text-decoration:none;color:inherit;
  transition:border-color .15s ease,background .15s ease;
}
a.routine:hover{border-color:var(--blue);background:var(--tint)}
a.routine .ico{
  flex:0 0 44px;width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;background:var(--blue-wash);font-size:22px;
}
a.routine .body{min-width:0;flex:1}
a.routine .body h3{margin:0 0 2px;font-size:16px}
a.routine .body p{margin:0;color:var(--ink-2);font-size:13.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.routine .chev{flex:0 0 auto;color:var(--ink-3)}
.badge{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ok);
  border:1px solid currentColor;border-radius:999px;padding:2px 8px;
}

/* ---------- pricing tiers ----------
   Mobile: one horizontal scroll-snap strip, cards bleed to the screen edge so
   the next one peeks and it reads as swipeable. Desktop: plain 3-up grid. */
.tiers{
  display:flex;
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-left:var(--pad);
  margin:0 calc(var(--pad) * -1);
  padding:16px var(--pad) 14px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tiers::-webkit-scrollbar{display:none}

.tier{
  flex:0 0 80%;
  scroll-snap-align:start;
  display:flex;flex-direction:column;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:20px 18px;
  position:relative;
}
.tier.featured{border:2px solid var(--blue);padding:19px 17px}
.tier .flag{
  position:absolute;top:-10px;left:18px;
  background:var(--blue);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 10px;border-radius:999px;white-space:nowrap;
}
.tier h3{font-size:18px;margin:0}
.tier .blurb{font-size:13px;color:var(--ink-2);margin:3px 0 0;min-height:34px}
.tier .cost{display:flex;align-items:baseline;gap:2px;margin:12px 0 0}
.tier .cost .cur{font-size:18px;font-weight:600;color:var(--ink-2)}
.tier .cost .num{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1}
.tier .once{font-size:12px;color:var(--ink-3);margin:5px 0 16px}
.tier ul{list-style:none;padding:0;margin:0 0 18px;flex:1}
.tier li{
  position:relative;padding:7px 0 7px 22px;font-size:13.5px;line-height:1.5;
  border-bottom:1px solid var(--line);
}
.tier li:last-child{border-bottom:0}
.tier li::before{content:"✓";position:absolute;left:0;top:7px;color:var(--ok);font-weight:700}
.tier li.na{color:var(--ink-3)}
.tier li.na::before{content:"–";color:var(--ink-3)}
.tier .btn{width:100%}

.swipe-hint{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;color:var(--ink-3);margin:-4px 0 0;
}

@media (min-width:720px){
  .tiers{
    display:grid;grid-template-columns:repeat(3,1fr);
    overflow:visible;margin:0;padding:12px 0 0;gap:16px;
  }
  .tier{flex:none;padding:24px 22px}
  .tier.featured{padding:23px 21px}
  .swipe-hint{display:none}
}

/* ---------- Samsung-style numbered steps ---------- */
ol.steps{list-style:none;counter-reset:s;margin:0;padding:0}
ol.steps>li{
  counter-increment:s;
  position:relative;
  padding:14px 0 14px 44px;
  border-bottom:1px solid var(--line);
  font-size:15.5px;line-height:1.6;
}
ol.steps>li:last-child{border-bottom:0}
ol.steps>li::before{
  content:counter(s);
  position:absolute;left:0;top:12px;
  width:28px;height:28px;border-radius:999px;
  background:var(--ink);color:var(--bg);
  font-size:14px;font-weight:700;
  display:grid;place-items:center;
}
ol.steps b,ol.steps strong{font-weight:700}
ol.steps .hint{display:block;color:var(--ink-3);font-size:13px;margin-top:3px}

/* ---------- note / callout ---------- */
.note-box{
  background:var(--blue-wash);
  border-radius:var(--r);
  padding:14px 16px;
  font-size:14px;line-height:1.6;color:var(--ink-2);
  margin:18px 0;
}
.note-box b{color:var(--ink)}

/* ---------- breadcrumb / back ---------- */
.back{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;color:var(--ink-2);text-decoration:none;
  margin:20px 0 6px;
}
.back:hover{color:var(--ink)}

/* ================= routine detail page ================= */
.routine-hero{padding:8px 0 22px}
.routine-hero .ico{
  width:56px;height:56px;border-radius:14px;background:var(--blue-wash);
  display:grid;place-items:center;font-size:28px;margin-bottom:14px;
}
.routine-hero h1{font-size:clamp(24px,6vw,32px);margin-bottom:8px}
.routine-hero .lead{margin-bottom:16px}
.does{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.does li{
  background:var(--tint);border-radius:999px;
  padding:6px 12px;font-size:13px;color:var(--ink-2);
}

/* CSS-only segmented control (no JS) */
.tabs{margin:22px 0 0;position:relative}
.tabs>input{
  position:absolute;width:1px;height:1px;
  opacity:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  pointer-events:none;
}
.tabs>input:focus-visible ~ .tablist label[for]{outline:none}
.tabs>input#v-qr:focus-visible     ~ .tablist label[for="v-qr"],
.tabs>input#v-file:focus-visible   ~ .tablist label[for="v-file"],
.tabs>input#v-manual:focus-visible ~ .tablist label[for="v-manual"]{
  outline:2px solid var(--blue);outline-offset:2px;
}
.tablist{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:4px;padding:4px;
  background:var(--tint);border-radius:999px;
}
.tablist label{
  text-align:center;padding:9px 6px;border-radius:999px;
  font-size:13.5px;font-weight:600;color:var(--ink-2);
  cursor:pointer;user-select:none;white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
.tabpanel{display:none;padding:20px 0 4px}
.tabpanel h2{font-size:18px;margin-bottom:10px}

.tabs>#v-qr:checked     ~ .tablist label[for="v-qr"],
.tabs>#v-file:checked   ~ .tablist label[for="v-file"],
.tabs>#v-manual:checked ~ .tablist label[for="v-manual"]{
  background:var(--bg);color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.14);
}
.tabs>#v-qr:checked     ~ #p-qr,
.tabs>#v-file:checked   ~ #p-file,
.tabs>#v-manual:checked ~ #p-manual{display:block}

/* QR placeholder frame */
.qr{
  width:220px;max-width:72vw;aspect-ratio:1;margin:4px auto 14px;
  border:2px dashed var(--line);border-radius:var(--r);
  display:grid;place-items:center;gap:8px;text-align:center;
  color:var(--ink-3);font-size:12.5px;padding:16px;
  background:var(--tint);
}
.qr svg{width:56px;height:56px;opacity:.5}
.qr.filled{border-style:solid;padding:10px;background:var(--bg)}
.qr img{width:100%;height:100%;object-fit:contain}

/* paid-routine gate on the QR / file tabs */
.locked{
  background:var(--tint);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 18px;text-align:center;
}
.locked .lockicon{font-size:26px;line-height:1;margin-bottom:10px}
.locked p{margin:0 0 16px;font-size:14.5px;color:var(--ink-2)}
.locked p b{color:var(--ink)}
.locked .note{margin:14px 0 0;font-size:13px;color:var(--ink-3)}

.dl{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--line);border-radius:var(--r);padding:14px;
  margin:6px 0 4px;
}
.dl .ficon{
  flex:0 0 40px;width:40px;height:40px;border-radius:10px;
  background:var(--blue-wash);display:grid;place-items:center;font-weight:700;
  font-size:11px;color:var(--blue);letter-spacing:.02em;
}
.dl .meta{flex:1;min-width:0}
.dl .meta b{display:block;font-size:14.5px}
.dl .meta span{font-size:12.5px;color:var(--ink-3)}

/* ---------- placeholder highlight ---------- */
.ph{
  background:#ffe98a;color:#5c4600;padding:1px 7px;border-radius:5px;
  font-weight:600;font-size:.92em;
}

/* ---------- legal pages ---------- */
.legal{padding:32px 0 48px}
.legal h1{margin-bottom:6px}
.legal h2{font-size:18px;margin:28px 0 8px}
.legal p,.legal li{color:var(--ink-2);font-size:15px}
.legal code{background:var(--tint);padding:1px 6px;border-radius:5px;font-size:.9em}

/* ---------- desktop niceties ---------- */
@media (min-width:720px){
  header.site .wrap{min-height:64px}
  .hero{padding:72px 0 52px}
  main section{padding:56px 0}
  .cards{grid-template-columns:repeat(2,1fr);gap:16px}
  .cards.three{grid-template-columns:repeat(3,1fr)}
  a.routine{padding:18px}
  .price{padding:32px;max-width:460px}
  .tablist label{font-size:14.5px}
}
@media (min-width:960px){
  .cards.two-wide{grid-template-columns:1.1fr .9fr;align-items:start}
}