/* Wakey blog. Loaded only by pages in /blog/, AFTER ../style.css.
   Reuses the tokens defined in style.css (--bg --surface --alt --text --muted
   --border --brand --brand-soft) and changes nothing on the support/legal pages. */
:root{
  --mono:ui-monospace,"SF Mono",Menlo,Monaco,monospace;
  --ink:#111113; --on-ink:#FFFFFF;          /* black pill buttons, as in the app */
  --cta-a:#F4F0FD; --cta-b:#E6DEF8;         /* store-screenshot lavender */
}
@media (prefers-color-scheme:dark){
  :root{--ink:#F3F3F5;--on-ink:#111113;--cta-a:#231F33;--cta-b:#17161C;}
}

/* ---------- shared ---------- */
.eyebrow{font:600 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin:0 0 10px}
.muted{color:var(--muted)}
.small{font-size:14px}
main.wrap img{max-width:100%;height:auto}

/* breadcrumb: resets the global `nav` rules from style.css */
nav.crumbs{margin:28px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:14px;color:var(--muted)}
nav.crumbs a{color:var(--muted);font-size:14px;text-decoration:none}
nav.crumbs a:hover{color:var(--brand);text-decoration:underline}
nav.crumbs .sep{opacity:.6}
nav.crumbs [aria-current]{color:var(--text)}

/* ---------- blog index ---------- */
.blog-head h1{margin:18px 0 8px}
.blog-head .lede{max-width:600px}
.post-list{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:22px}
.post-list > li{margin:0;min-width:0}
.post-card{display:flex;flex-direction:column;height:100%;background:var(--surface);border:1px solid var(--border);
  border-radius:16px;overflow:hidden;color:inherit;text-decoration:none;transition:border-color .2s,transform .2s}
.post-card:hover{border-color:var(--brand-soft);transform:translateY(-2px)}
.post-card:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.post-card .thumb{aspect-ratio:3/2;background:var(--alt);overflow:hidden}
.post-card .thumb img{display:block;width:100%;height:100%;object-fit:cover}
.post-card .body{flex:1;display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px}
.post-card .eyebrow{margin:0}
.post-card h2{font-size:19px;line-height:1.3;letter-spacing:-.3px;margin:0;padding:0;color:var(--text)}
.post-card .excerpt{margin:0;font-size:15px;color:var(--muted)}
.post-card .card-meta{margin-top:auto;padding-top:6px;font:13px/1.4 var(--mono);color:var(--muted)}
@media (min-width:640px){
  .post-list{grid-template-columns:1fr 1fr}
  .post-list > .featured{grid-column:1 / -1}
  .featured .post-card{flex-direction:row}
  .featured .post-card .thumb{flex:0 0 54%;aspect-ratio:auto;min-height:270px}
  .featured .post-card .body{justify-content:center;padding:26px 28px}
  .featured .post-card h2{font-size:25px;letter-spacing:-.5px}
}
@media (prefers-reduced-motion:reduce){.post-card{transition:none}.post-card:hover{transform:none}}

/* ---------- article ---------- */
article.post{font-size:17px}
article.post h2{scroll-margin-top:90px}
article.post h3{scroll-margin-top:90px}
.post-head{margin-top:26px}
.post-head h1{margin:10px 0 12px}
.post-head .lede{margin:0 0 16px}
.post-head .meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin:0 0 24px}
.post-head .meta .dot{opacity:.6}
@media (max-width:480px){.post-head .meta .by-dot{display:none}.post-head .meta .by{flex-basis:100%}}
h2 .num{font-family:var(--mono);font-weight:600;color:var(--brand);margin-right:10px}

/* figures */
article.post figure{margin:30px 0}
article.post figure img{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--border);background:var(--alt)}
article.post figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--muted)}
article.post figure.post-hero{margin:6px 0 30px}   /* not .hero: style.css uses .hero for the home page */
/* phone: a real store screenshot. The store PNGs already contain a device outline,
   so .phone only sizes and centres them. Add .bezel for a raw, unframed screen capture. */
article.post figure.phone{max-width:280px;margin:34px auto;text-align:center}
article.post figure.phone img{border-radius:22px}
article.post figure.phone.bezel img{border:10px solid #111113;border-radius:38px;background:#111113}

/* key takeaways */
.takeaways{background:var(--alt);border:1px solid var(--border);border-left:4px solid var(--brand);border-radius:16px;padding:18px 24px 16px;margin:28px 0}
.takeaways h2{margin:0 0 6px;padding:0;font:600 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.takeaways ul{margin:0;padding-left:20px}
.takeaways li{margin:6px 0;font-size:16px}

/* callouts */
.callout{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--brand-soft);border-radius:16px;padding:16px 22px;margin:26px 0;font-size:16px}
.callout p{margin:0 0 8px}
.callout p:last-child{margin-bottom:0}
.callout .callout-title{display:block;font-weight:700;margin-bottom:4px}
.callout.disclaimer{background:transparent;border:1px dashed var(--border);font-size:14px}
.callout.disclaimer p{color:var(--muted)}
.tip{background:var(--alt);border-radius:12px;padding:10px 16px;font-size:16px}
.tip b:first-child{font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-right:6px}

/* tables: always wrap in .table-wrap so they scroll sideways on phones */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.table-wrap table{display:table;width:100%;margin:0;border-style:hidden;font-size:15px}
.table-wrap.wide table{min-width:680px}
.table-wrap caption{caption-side:bottom;text-align:left;padding:10px 12px;font-size:13px;color:var(--muted);border-top:1px solid var(--border)}
.table-wrap td,.table-wrap th{line-height:1.5}
.table-note{font-size:14px;color:var(--muted);margin:-14px 0 24px}

/* checklist */
ul.checklist{list-style:none;padding:0;margin:20px 0}
ul.checklist > li{position:relative;padding:10px 0 10px 36px;border-bottom:1px solid var(--border)}
ul.checklist > li:last-child{border-bottom:0}
ul.checklist > li::before{content:"";position:absolute;left:0;top:14px;width:20px;height:20px;border:2px solid var(--brand);border-radius:6px}
ul.checklist > li::after{content:"";position:absolute;left:7px;top:17px;width:6px;height:11px;border:solid var(--brand);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* numbered steps (e.g. a day-by-day plan) */
ol.steps{list-style:none;counter-reset:step;padding:0;margin:20px 0}
ol.steps > li{counter-increment:step;position:relative;padding-left:50px;margin:16px 0;min-height:30px}
ol.steps > li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0;width:36px;
  font:600 14px/28px var(--mono);text-align:center;color:var(--brand);background:var(--alt);border:1px solid var(--border);border-radius:8px}

blockquote{margin:24px 0;padding:4px 0 4px 18px;border-left:3px solid var(--brand-soft);color:var(--muted)}
blockquote p{color:var(--muted)}
hr{border:0;border-top:1px solid var(--border);margin:36px 0}

/* FAQ */
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:0 20px;margin:12px 0}
.faq summary{list-style:none;cursor:pointer;position:relative;padding:15px 30px 15px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font:400 22px/1 var(--mono);color:var(--brand)}
.faq details[open] summary::after{content:"\2212"}
.faq summary h3{display:inline;margin:0;font-size:17px;line-height:1.45}
.faq details > p,.faq details > ul{margin:0 0 16px;font-size:16px}

/* CTA box */
.cta{display:grid;grid-template-columns:auto 1fr;gap:18px 22px;align-items:center;margin:44px 0 24px;padding:26px 28px;
  background:linear-gradient(160deg,var(--cta-a),var(--cta-b));border:1px solid var(--border);border-radius:20px}
.cta .cta-icon{width:72px;height:72px;border-radius:18px;display:block}
.cta h2{margin:8px 0 0;padding:0;font-size:22px;line-height:1.25}
.cta p{margin:6px 0 0;font-size:16px}
.cta .actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.cta .actions .small{color:var(--muted)}
.badge{display:inline-block;font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brand);
  background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 10px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;background:var(--ink);color:var(--on-ink);
  font-weight:600;font-size:15px;text-decoration:none}
.btn:hover{opacity:.88}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
@media (max-width:480px){.cta{grid-template-columns:1fr;padding:22px 20px}.cta .cta-icon{width:60px;height:60px}}

/* related posts */
.related{margin:40px 0 0}
.related > h2{margin-top:0}
.related ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px}
.related li{margin:0;min-width:0}
.related a{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:center;height:100%;padding:10px;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;color:inherit;text-decoration:none}
.related a:hover{border-color:var(--brand-soft)}
.related a img{display:block;width:104px;height:70px;object-fit:cover;border-radius:10px;background:var(--alt)}
.related .eyebrow{margin:0 0 2px;font-size:11px}
.related strong{display:block;font-size:15px;line-height:1.35}
@media (min-width:640px){.related ul{grid-template-columns:1fr 1fr}}