/* Smoked — shared site styles */
html{scroll-behavior:smooth}
body{margin:0;background:#0F0F1E;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:#5FE6D4;text-decoration:none}a:hover{color:#14B8A6}
*{box-sizing:border-box}
img{max-width:none}
input::placeholder{color:#7A8294}
::selection{background:rgba(95,230,212,.35)}
button{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid #5FE6D4;outline-offset:3px;border-radius:8px}

@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes floatYs{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulseRing{0%{transform:scale(1);opacity:.6}100%{transform:scale(2);opacity:0}}
@keyframes drift1{0%,100%{transform:translate(-50%,-50%) translate(0,0) scale(1)}50%{transform:translate(-50%,-50%) translate(120px,60px) scale(1.15)}}
@keyframes drift2{0%,100%{transform:translate(-50%,-50%) translate(0,0) scale(1.1)}50%{transform:translate(-50%,-50%) translate(-140px,-40px) scale(.95)}}
@keyframes shine{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes spinSlow{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Responsive show/hide (replaces the design's wide/narrow switches) */
.only-wide{display:contents}
.only-narrow{display:none}
@media (max-width:899.98px){.only-wide{display:none}.only-narrow{display:contents}}
.only-wide-lg{display:contents}
@media (max-width:959.98px){.only-wide-lg{display:none}}

/* Entrance motion: hidden only when JS is running and motion is allowed */
.js [data-intro]{opacity:0;transform:translateY(30px);filter:blur(10px)}
.js [data-intro].in{opacity:1;transform:none;filter:none}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Blog category pills */
.cat{background:transparent;color:#C3CAD5}
.cat.on{background:#FFFFFF;color:#0F0F1E}

/* Article table of contents */
.toc a{border-left:2px solid transparent;color:#7A8294}
.toc a.on{border-left-color:#5FE6D4;color:#FFFFFF}

/* ── Article prose (articles restyled from their original content) ── */
.prose{min-width:0;display:flex;flex-direction:column;gap:28px;--ac:#5FE6D4;--acr:95,230,212}
.prose>p{margin:0;font-size:19px;line-height:1.75;color:#C3CAD5;text-wrap:pretty}
.prose>p.lead{font-size:clamp(20px,2.2vw,24px);line-height:1.55;color:#FFFFFF;font-weight:500;letter-spacing:-0.015em}
.prose strong{color:#FFFFFF;font-weight:600}
.prose em{font-style:italic}
.prose>h2{margin:28px 0 0;font-weight:700;font-size:clamp(30px,3.6vw,42px);line-height:1.08;letter-spacing:-0.04em;scroll-margin-top:40px;text-wrap:balance}
.prose>h3{margin:8px 0 -14px;font-weight:600;font-size:21px;line-height:1.3;letter-spacing:-0.02em;color:#FFFFFF;text-wrap:balance}
.prose>ul,.prose>ol{margin:0;padding-left:26px;display:flex;flex-direction:column;gap:12px;font-size:18px;line-height:1.65;color:#C3CAD5}
.prose>ul>li::marker,.prose>ol>li::marker{color:var(--ac);font-weight:600}

.prose .callout{position:relative;overflow:hidden;border-radius:28px;padding:clamp(26px,4vw,36px);background:linear-gradient(135deg,rgba(var(--acr),.16),rgba(22,22,42,1) 70%);border:1px solid rgba(var(--acr),.28);display:flex;flex-direction:column;gap:12px;margin:8px 0}
.prose .callout-label{margin:0;font:600 11px ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;letter-spacing:.24em;text-transform:uppercase;color:var(--ac)}
.prose .callout p:not(.callout-label){margin:0;font-weight:500;font-size:clamp(18px,2vw,21px);line-height:1.55;letter-spacing:-0.015em;color:#E3E7EE;text-wrap:pretty}

.prose .stat-grid,.prose .stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}
.prose .stat-card,.prose .stat-cell,.prose .big-stat{display:flex;flex-direction:column;gap:6px;padding:22px 24px;border-radius:22px;background:rgba(24,26,46,.7);border:1px solid rgba(255,255,255,.1)}
.prose .stat-card .num,.prose .stat-big{font-weight:700;font-size:36px;line-height:1;letter-spacing:-0.04em;color:var(--ac)}
.prose .stat-card .label,.prose .stat-desc{font-size:14px;line-height:1.45;color:#AEB6C4}
.prose .big-stat{align-items:center;text-align:center;padding:36px 28px;background:linear-gradient(180deg,rgba(var(--acr),.12),rgba(22,22,42,1) 70%);border-color:rgba(var(--acr),.25)}
.prose .big-stat .num{font-weight:700;font-size:clamp(64px,9vw,96px);line-height:.95;letter-spacing:-0.06em;color:var(--ac);text-shadow:0 0 60px rgba(var(--acr),.45)}
.prose .big-stat .desc{font-size:16px;line-height:1.5;color:#AEB6C4;max-width:420px}

/* Timelines: withdrawal timeline, recovery milestones, sleep weeks */
.prose .timeline,.prose .milestones,.prose .sleep-weeks{position:relative;display:flex;flex-direction:column;padding-left:36px}
.prose .timeline::before,.prose .milestones::before,.prose .sleep-weeks::before{content:'';position:absolute;left:9px;top:12px;bottom:12px;width:2px;background:linear-gradient(180deg,#FF6B5A,#FBBF24 50%,#5FE6D4)}
.prose .timeline-item,.prose .milestone,.prose .sleep-week{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 0 18px}
.prose .timeline-item::before,.prose .milestone::before,.prose .sleep-week::before{content:'';position:absolute;left:-34px;top:19px;width:16px;height:16px;border-radius:50%;background:#0F0F1E;border:3px solid var(--dot,#5FE6D4)}
.prose .timeline-time,.prose .milestone-time,.prose .week-label{font:600 12px ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--dot,#5FE6D4)}
.prose .timeline-content,.prose .milestone>div:not(.milestone-time),.prose .sleep-week>div:not(.week-label){display:flex;flex-direction:column;gap:4px}
.prose .timeline h4,.prose .milestone h4,.prose .milestone-title,.prose .sleep-week h4{margin:0;font-weight:600;font-size:19px;line-height:1.35;letter-spacing:-0.02em;color:#FFFFFF}
.prose .timeline p,.prose .milestone p:not(.milestone-title),.prose .sleep-week p{margin:0;font-size:17px;line-height:1.6;color:#AEB6C4}
.prose .timeline-severity{align-self:flex-start;margin-bottom:4px;font:600 10px ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;letter-spacing:.2em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:rgba(var(--sev),.12);border:1px solid rgba(var(--sev),.3);color:rgb(var(--sev))}
.prose .sev-easing,.prose .sev-winning{--sev:95,230,212}
.prose .sev-moderate{--sev:251,191,36}
.prose .sev-hard{--sev:255,138,122}
.prose .sev-peak{--sev:255,107,90;background:rgba(255,107,90,.22)}
.prose .sleep-quality{display:flex;gap:6px;margin:4px 0 6px}
.prose .sq-dot{width:22px;height:8px;border-radius:999px}

/* Card grids: craving techniques, sleep tips, quit methods */
.prose .technique-grid,.prose .tips-grid,.prose .method-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.prose .technique-card,.prose .tip-card,.prose .method-card{display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:22px;background:#16162A;border:1px solid rgba(255,255,255,.07);transition:border-color .3s}
.prose .technique-card:hover,.prose .tip-card:hover,.prose .method-card:hover{border-color:rgba(var(--acr),.35)}
.prose .technique-icon{font-size:26px;line-height:1}
.prose .technique-card h4,.prose .tip-card h4,.prose .method-card h4{margin:0;font-weight:600;font-size:18px;line-height:1.3;letter-spacing:-0.02em;color:#FFFFFF}
.prose .technique-card p,.prose .tip-card p,.prose .method-card p{margin:0;font-size:15px;line-height:1.55;color:#AEB6C4}
.prose .success-rate{font-weight:700;font-size:44px;line-height:1;letter-spacing:-0.045em;color:var(--ac);margin-top:4px}
.prose .rate-label{font:600 10px ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;letter-spacing:.2em;text-transform:uppercase;color:#7A8294}

/* Comparison table */
.prose .table-wrap{overflow-x:auto;border-radius:24px;border:1px solid rgba(255,255,255,.08);background:#16162A}
.prose table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;line-height:1.45}
.prose th{padding:16px 18px;text-align:left;font:600 11px ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;letter-spacing:.18em;text-transform:uppercase;color:#7A8294;background:rgba(255,255,255,.03)}
.prose td{padding:14px 18px;border-top:1px solid rgba(255,255,255,.06);color:#C3CAD5;vertical-align:top}
.prose td:first-child{color:#FFFFFF;font-weight:500}
.prose td.win{color:#5FE6D4;font-weight:600}
.prose td.loss{color:#FF8A7A;font-weight:600}

/* Risk bars */
.prose .risk-bar-group{display:flex;flex-direction:column;gap:20px;padding:clamp(24px,4vw,32px);border-radius:28px;background:#16162A;border:1px solid rgba(255,255,255,.07)}
.prose .risk-bar-item{display:flex;flex-direction:column;gap:10px}
.prose .risk-bar-header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:16px}
.prose .risk-bar-label{color:#E3E7EE}
.prose .risk-bar-value{color:var(--ac);font-weight:600}
.prose .risk-bar-track{height:10px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.prose .risk-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#14B8A6,#5FE6D4);box-shadow:0 0 16px rgba(95,230,212,.5)}

/* Hover states from the design */
.hv1:hover{color:#FFFFFF !important}
.hv2:hover{background:#151515 !important;color:#FFFFFF !important}
.hv3:hover{background:#151515 !important;color:#FFFFFF !important;transform:translateY(-2px) !important}
.hv4:hover{border-color:rgba(255,107,90,.35) !important}
.hv5:hover{border-color:rgba(95,230,212,.35) !important}
.hv6:hover{border-color:rgba(251,191,36,.35) !important}
.hv7:hover{color:#5FE6D4 !important}
.hv8:hover{color:#FFFFFF !important;border-color:rgba(95,230,212,.4) !important;transform:translateY(-4px) !important}
.hv9:hover{color:#FFFFFF !important;transform:translateY(-6px) !important;border-color:rgba(255,255,255,.18) !important;box-shadow:0 30px 80px rgba(0,0,0,.45) !important}
.hv10:hover{background:#FFFFFF !important}
.hv11:hover{color:#FFFFFF !important;border-color:rgba(255,255,255,.25) !important}
.prose>p a,.prose li a,.prose td a{color:#5FE6D4;text-decoration:underline;text-decoration-color:rgba(95,230,212,.45);text-underline-offset:3px;text-decoration-thickness:1px}
.prose>p a:hover,.prose li a:hover{color:#BFFFF5;text-decoration-color:#5FE6D4}

/* Wordmark lockup: name over tagline, in the same typeface as the headlines */
.brand{display:flex;flex-direction:column;justify-content:center;line-height:1;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',system-ui,sans-serif;text-align:left}
.brand-n{font-weight:700;font-size:19px;letter-spacing:-0.035em;color:#FFFFFF}
.brand-t{margin-top:4px;font-weight:500;font-size:12px;letter-spacing:-0.005em;color:#AEB6C4;white-space:nowrap}
.brand-lg .brand-n{font-size:21px}
.brand-lg .brand-t{font-size:13px;margin-top:5px}
@media (max-width:389.98px){nav .brand-t{display:none}}