/* ==========================================================================
   HikingCare Magazine — article.css
   Visual components for long-form guides (hc-*):
   quick-answer hero + animated stats, gains list, TOC, callouts, key-insight
   quotes, colour tables, step lists, timeline, Amazon product boxes,
   mistake/fix cards, story cards, FAQ, interactive checklist, CTA band.
   Loaded on singular views and inside the editor. Every component is plain
   HTML + classes, so articles stay clean and portable.
   ========================================================================== */

:root{
	--hc-forest:#1b4332; --hc-pine:#2d6a4f; --hc-teal:#0f766e; --hc-sky:#1d6fa5;
	--hc-amber:#c9772b; --hc-sun:#f2b33d; --hc-berry:#b23a48; --hc-violet:#6d4c9f;
	--hc-sand:#f1ecdf; --hc-ink:#14201a; --hc-line:#e3ddcf; --hc-muted:#5c6b61;
	--hc-display:var(--hkc-font-display, 'Fraunces', Georgia, serif);
	--hc-sans:var(--hkc-font-sans, 'Inter', system-ui, sans-serif);
}

@keyframes hc-gradient{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes hc-shine{ 0%{transform:translateX(-160%) skewX(-20deg)} 55%,100%{transform:translateX(320%) skewX(-20deg)} }
@keyframes hc-pulse{ 0%{box-shadow:0 0 0 0 rgba(242,179,61,.55)} 70%{box-shadow:0 0 0 14px rgba(242,179,61,0)} 100%{box-shadow:0 0 0 0 rgba(242,179,61,0)} }
@keyframes hc-float{ 0%,100%{translate:0 0} 50%{translate:0 -4px} }
@keyframes hc-rise{ from{opacity:0; translate:0 22px} to{opacity:1; translate:0 0} }

.hc-article{ position:relative; }
.hc-article strong{ color:inherit; }

/* ---------- Quick-answer hero ---------- */
.hc-hero{
	position:relative; overflow:hidden; isolation:isolate;
	margin:0 0 1.8em; padding:26px clamp(20px,4vw,34px) 24px;
	border-radius:22px; color:#fff;
	background:linear-gradient(120deg,#1b4332 0%,#2d6a4f 28%,#0f766e 56%,#1d6fa5 82%,#2d6a4f 100%);
	background-size:260% 260%;
	animation:hc-gradient 16s ease-in-out infinite;
	box-shadow:0 26px 50px -30px rgba(15,60,45,.7);
}
.hc-hero::before{ content:""; position:absolute; top:-70px; right:-50px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, rgba(242,179,61,.55), rgba(242,179,61,0) 70%); z-index:-1; }
.hc-hero::after{
	content:""; position:absolute; left:0; right:0; bottom:0; height:48%; z-index:-1; opacity:.16;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 200 L0 150 L110 92 L200 138 L320 46 L440 126 L560 72 L690 152 L800 58 L930 132 L1040 88 L1200 150 L1200 200 Z'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
}
.hc-hero p{ color:#fff; }
.hc-hero a{ color:#ffe29a; }
.hc-hero strong{ color:#ffe29a; }
p.hc-hero__kicker{ display:inline-flex; align-items:center; gap:8px; margin:0 0 12px; padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
p.hc-hero__answer{ font-family:var(--hc-display); font-size:clamp(1.3rem,2.6vw,1.72rem); line-height:1.3; margin:0 0 .55em; }
p.hc-hero__sub{ margin:0 0 1.2em; color:rgba(255,255,255,.9); font-size:1rem; line-height:1.6; }
.hc-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0; }
.hc-stat{ padding:14px 10px 12px; border-radius:14px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); text-align:center; }
.hc-stat__num{ display:block; font-family:var(--hc-display); font-size:clamp(1.3rem,3vw,1.85rem); font-weight:700; line-height:1.1; color:#fff; font-variant-numeric:tabular-nums; }
.hc-stat__label{ display:block; margin-top:5px; font-size:.7rem; line-height:1.3; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.85); }

p.hc-hero__foot{ margin:12px 0 0; font-size:.76rem; color:rgba(255,255,255,.78); }

/* ---------- What you'll get ---------- */
ul.hc-gains{ list-style:none; padding:0; margin:0 0 1.8em; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
ul.hc-gains > li{ position:relative; margin:0; padding:12px 14px 12px 46px; border-radius:12px; background:#fff; border:1px solid var(--hc-line); font-size:.96rem; line-height:1.45; }
ul.hc-gains > li::before{ content:"✓"; position:absolute; left:13px; top:12px; width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,var(--hc-pine),var(--hc-teal)); color:#fff; font-size:.78rem; font-weight:800; display:flex; align-items:center; justify-content:center; }

/* ---------- Table of contents ---------- */
.hc-toc{ position:relative; overflow:hidden; margin:0 0 2.2em; padding:22px 22px 16px; border-radius:18px; background:#fff; border:1px solid var(--hc-line); box-shadow:0 14px 34px -26px rgba(20,32,26,.4); }
.hc-toc::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg,var(--hc-pine),var(--hc-teal),var(--hc-sky),var(--hc-amber),var(--hc-berry)); }
p.hc-toc__title{ margin:0 0 12px; font-size:.78rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--hc-pine); }
ol.hc-toc__list{ list-style:none; counter-reset:hc-toc; padding:0; margin:0; columns:2 250px; column-gap:22px; }
ol.hc-toc__list > li{ counter-increment:hc-toc; break-inside:avoid; margin:0 0 4px; }
ol.hc-toc__list a{ display:flex; gap:10px; align-items:flex-start; padding:6px 8px; border-radius:10px; color:var(--hc-ink); text-decoration:none; font-weight:600; font-size:.94rem; line-height:1.35; transition:background .2s, transform .2s, color .2s; }
ol.hc-toc__list a::before{ content:counter(hc-toc); flex:0 0 24px; height:24px; border-radius:50%; background:var(--hc-sand); color:var(--hc-forest); font-size:.74rem; font-weight:800; display:flex; align-items:center; justify-content:center; transition:background .2s, color .2s; }
ol.hc-toc__list a:hover, ol.hc-toc__list a.is-active{ background:#f5f1e6; color:var(--hc-forest); transform:translateX(3px); }
ol.hc-toc__list a:hover::before, ol.hc-toc__list a.is-active::before{ background:linear-gradient(135deg,var(--hc-pine),var(--hc-teal)); color:#fff; }

/* ---------- Callouts ---------- */
.hc-callout{ position:relative; margin:1.8em 0; padding:18px 20px 16px; border-radius:14px; border:1px solid transparent; border-left-width:6px; }
.hc-callout > :last-child{ margin-bottom:0; }
.hc-callout p, .hc-callout li{ font-size:1rem; }
p.hc-callout__title{ margin:0 0 .45em; font-weight:800; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; }
.hc-callout ul{ margin:.4em 0 .2em; }
.hc-callout--tip{ background:linear-gradient(135deg,#ecf8f0,#e0f1e6); border-color:#cfe6d7; border-left-color:var(--hc-pine); }
.hc-callout--tip p.hc-callout__title{ color:var(--hc-forest); }
.hc-callout--warn{ background:linear-gradient(135deg,#fff3ec,#fde2d5); border-color:#f6d2c0; border-left-color:#c2410c; }
.hc-callout--warn p.hc-callout__title{ color:#9a3412; }
.hc-callout--info{ background:linear-gradient(135deg,#eef6fd,#dfecf9); border-color:#cfe0f1; border-left-color:var(--hc-sky); }
.hc-callout--info p.hc-callout__title{ color:#1e4e79; }
.hc-callout--highlight{ background:linear-gradient(135deg,#fff9e8,#fcecc2); border-color:#f3dfae; border-left-color:var(--hc-amber); }
.hc-callout--highlight p.hc-callout__title{ color:#8a4f12; }
.hc-callout--note{ background:linear-gradient(135deg,#f6f2fd,#eae1f9); border-color:#ddd1f3; border-left-color:var(--hc-violet); }
.hc-callout--note p.hc-callout__title{ color:#4c2f7a; }

/* ---------- Key-insight quote ---------- */
blockquote.hc-quote{ position:relative; margin:2em 0; padding:22px 24px 18px 66px; border:none; border-radius:18px; background:linear-gradient(135deg,#14201a,#1b4332 58%,#2d6a4f); color:#eef4ef; font-family:var(--hc-display); font-size:1.2rem; font-style:normal; line-height:1.5; box-shadow:0 22px 44px -30px rgba(20,32,26,.8); }
blockquote.hc-quote::before{ content:"\201C"; position:absolute; left:18px; top:4px; font-family:Georgia,serif; font-size:4.2rem; line-height:1; color:var(--hc-sun); }
blockquote.hc-quote p{ margin:0 0 .45em; color:inherit; }
blockquote.hc-quote p:last-child{ margin-bottom:0; }
blockquote.hc-quote .hc-quote__by{ display:block; font-family:var(--hc-sans); font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#b7d0bd; }

/* ---------- Tables ---------- */
table.hc-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:.94rem; background:#fff; }
table.hc-table thead th{ background:linear-gradient(135deg,var(--hc-forest),var(--hc-teal)); color:#fff; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; padding:.9em .9em; border-bottom:none; text-align:left; }
table.hc-table td, table.hc-table tbody th{ padding:.8em .9em; border-bottom:1px solid var(--hc-line); vertical-align:top; text-align:left; }
table.hc-table tbody th{ font-weight:700; color:var(--hc-ink); background:#fff; font-size:.94rem; letter-spacing:0; text-transform:none; }
table.hc-table tbody tr:nth-child(even) td, table.hc-table tbody tr:nth-child(even) th{ background:#faf8f2; }
table.hc-table tbody tr:last-child td, table.hc-table tbody tr:last-child th{ border-bottom:none; }
table.hc-table tbody tr.is-best td, table.hc-table tbody tr.is-best th{ background:#fff6df; }
.hc-tag{ display:inline-block; padding:.18em .6em; border-radius:999px; font-size:.72rem; font-weight:800; letter-spacing:.02em; background:#e3efe6; color:var(--hc-forest); white-space:nowrap; }
.hc-tag--amber{ background:#fdefd6; color:#8a4f12; }
.hc-tag--blue{ background:#e2eef9; color:#1e4e79; }
.hc-tag--red{ background:#fbe3e3; color:#8a2f22; }
.hc-tag--violet{ background:#ece4fa; color:#4c2f7a; }

/* ---------- Step list ---------- */
ol.hc-steps{ list-style:none; counter-reset:hc-step; padding:0; margin:1.4em 0 1.8em; display:grid; gap:12px; }
ol.hc-steps > li{ counter-increment:hc-step; position:relative; margin:0; padding:14px 16px 14px 62px; border-radius:14px; background:#fff; border:1px solid var(--hc-line); line-height:1.55; }
ol.hc-steps > li::before{ content:counter(hc-step); position:absolute; left:14px; top:13px; width:34px; height:34px; border-radius:11px; background:linear-gradient(135deg,var(--hc-amber),var(--hc-sun)); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 16px -10px rgba(201,119,43,.95); }

/* ---------- Timeline ---------- */
.hc-timeline{ position:relative; margin:1.6em 0 2em; padding-left:36px; }
.hc-timeline::before{ content:""; position:absolute; left:12px; top:8px; bottom:8px; width:4px; border-radius:4px; background:linear-gradient(180deg,var(--hc-pine),var(--hc-teal) 30%,var(--hc-sky) 55%,var(--hc-amber) 80%,var(--hc-berry)); }
.hc-timeline__item{ position:relative; margin:0 0 14px; padding:14px 18px; border-radius:14px; background:#fff; border:1px solid var(--hc-line); }
.hc-timeline__item::before{ content:""; position:absolute; left:-32px; top:18px; width:18px; height:18px; border-radius:50%; background:#fff; border:4px solid var(--hc-pine); box-shadow:0 0 0 4px rgba(45,106,79,.14); }
.hc-timeline__item:nth-child(3n+2)::before{ border-color:var(--hc-sky); box-shadow:0 0 0 4px rgba(29,111,165,.14); }
.hc-timeline__item:nth-child(3n)::before{ border-color:var(--hc-amber); box-shadow:0 0 0 4px rgba(201,119,43,.16); }
p.hc-timeline__when{ margin:0 0 4px; font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--hc-amber); }
.hc-timeline__item h3{ margin:0 0 .35em; font-size:1.14rem; }
.hc-timeline__item p{ margin:0 0 .5em; font-size:.98rem; }
.hc-timeline__item p:last-child{ margin-bottom:0; }

/* ---------- Amazon product box ---------- */
.hc-product{ position:relative; overflow:hidden; margin:2.2em 0; padding:28px clamp(18px,3vw,28px) 22px; border-radius:22px; background:#fff; border:1px solid var(--hc-line); box-shadow:0 24px 48px -32px rgba(20,32,26,.5); transition:transform .25s, box-shadow .25s; }
.hc-product::before{ content:""; position:absolute; top:0; left:0; right:0; height:6px; background:linear-gradient(90deg,var(--hc-sun),var(--hc-amber),var(--hc-berry),var(--hc-violet)); }
.hc-product:hover{ transform:translateY(-3px); box-shadow:0 32px 60px -34px rgba(20,32,26,.6); }
p.hc-product__ribbon{ display:inline-flex; align-items:center; gap:6px; margin:0 0 14px; padding:6px 12px; border-radius:999px; background:linear-gradient(135deg,var(--hc-forest),var(--hc-teal)); color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.hc-product__head{ display:flex; gap:16px; align-items:center; margin:0 0 14px; }
.hc-product__icon{ flex:0 0 70px; height:70px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:2.2rem; line-height:1; background:linear-gradient(135deg,#fff5dc,#f1ecdf); border:1px solid #efe1bd; animation:hc-float 4.5s ease-in-out infinite; }
.hc-product__heading{ min-width:0; }
p.hc-product__brand{ margin:0; font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--hc-amber); }
h3.hc-product__title{ margin:.1em 0 .15em; font-size:clamp(1.22rem,2.4vw,1.5rem); line-height:1.2; }
p.hc-product__tagline{ margin:0; color:var(--hc-muted); font-size:.95rem; line-height:1.45; }
p.hc-product__desc{ margin:0 0 16px; }
.hc-product__grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:18px; margin:0 0 16px; }
ul.hc-product__pros{ list-style:none; padding:0; margin:0; display:grid; gap:9px; align-content:start; }
ul.hc-product__pros > li{ position:relative; margin:0; padding-left:30px; font-size:.95rem; line-height:1.45; }
ul.hc-product__pros > li::before{ content:"✓"; position:absolute; left:0; top:1px; width:21px; height:21px; border-radius:7px; background:#e3efe6; color:var(--hc-forest); font-size:.74rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
table.hc-specs{ width:100%; min-width:0; margin:0; border-collapse:separate; border-spacing:0; font-size:.88rem; border-radius:14px; overflow:hidden; background:#faf8f2; border:1px solid var(--hc-line); }
table.hc-specs th, table.hc-specs td{ padding:.55em .75em; border-bottom:1px solid var(--hc-line); background:transparent; text-align:left; vertical-align:top; }
table.hc-specs th{ width:44%; font-size:.7rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--hc-muted); }
table.hc-specs td{ color:var(--hc-ink); font-weight:600; }
table.hc-specs tr:last-child th, table.hc-specs tr:last-child td{ border-bottom:none; }
p.hc-product__best{ margin:0 0 16px; padding:11px 14px; border-radius:12px; background:linear-gradient(135deg,#f3f8f4,#eef5f0); border:1px dashed #bcd6c4; font-size:.93rem; line-height:1.5; }
p.hc-product__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:0; }
a.hc-btn-amazon{ position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:.85em 1.7em; border-radius:12px; background:linear-gradient(135deg,#ffd35c 0%,#ffb938 45%,#ff9a1f 100%); color:#1f1300; font-weight:800; font-size:1.03rem; letter-spacing:.01em; text-decoration:none; box-shadow:0 12px 24px -12px rgba(201,119,43,.9), inset 0 -2px 0 rgba(0,0,0,.08); transition:transform .18s, filter .18s; animation:hc-pulse 2.8s ease-out infinite; }
a.hc-btn-amazon::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:38%; background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.7),rgba(255,255,255,0)); animation:hc-shine 3.8s ease-in-out infinite; pointer-events:none; }
a.hc-btn-amazon:hover, a.hc-btn-amazon:focus-visible{ transform:translateY(-2px); filter:saturate(1.12) brightness(1.02); color:#1f1300; text-decoration:none; }
.hc-product__note{ font-size:.8rem; color:var(--hc-muted); line-height:1.4; }

/* ---------- Mistake / fix cards ---------- */
.hc-mistakes{ display:grid; gap:14px; margin:1.4em 0 2em; }
.hc-mistake{ display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border-radius:16px; border:1px solid var(--hc-line); background:#fff; }
.hc-mistake h3.hc-mistake__title{ grid-column:1/-1; margin:0; padding:13px 16px 11px; font-size:1.06rem; border-bottom:1px solid var(--hc-line); background:#fff; }
p.hc-mistake__bad, p.hc-mistake__fix{ margin:0; padding:13px 16px 14px; font-size:.95rem; line-height:1.5; }
p.hc-mistake__bad{ background:linear-gradient(135deg,#fff3f2,#fde5e3); }
p.hc-mistake__fix{ background:linear-gradient(135deg,#effaf3,#e0f3e7); }
p.hc-mistake__bad strong{ color:#9b2c2c; }
p.hc-mistake__fix strong{ color:var(--hc-forest); }

/* ---------- Story cards (composite examples) ---------- */
.hc-stories{ display:grid; gap:14px; margin:1.4em 0 2em; }
.hc-story{ display:grid; grid-template-columns:52px minmax(0,1fr); gap:4px 14px; padding:18px; border-radius:16px; background:linear-gradient(160deg,#ffffff,#f8f4ea); border:1px solid var(--hc-line); }
.hc-story__avatar{ grid-row:1 / span 3; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.55rem; background:linear-gradient(135deg,#e3efe6,#fdefd6); }
p.hc-story__who{ margin:0; font-weight:800; font-size:.98rem; color:var(--hc-ink); }
.hc-story p{ margin:0 0 .5em; font-size:.95rem; line-height:1.55; }
p.hc-story__result{ margin:0; font-size:.84rem; font-weight:700; color:var(--hc-pine); }

/* ---------- FAQ ---------- */
.hc-faq{ display:grid; gap:12px; margin:1.2em 0 2em; }
.hc-faq__item{ position:relative; padding:16px 18px 8px 58px; border-radius:14px; background:#fff; border:1px solid var(--hc-line); }
.hc-faq__item::before{ content:"Q"; position:absolute; left:16px; top:16px; width:28px; height:28px; border-radius:9px; background:linear-gradient(135deg,var(--hc-sky),var(--hc-teal)); color:#fff; font-weight:800; font-size:.85rem; display:flex; align-items:center; justify-content:center; }
.hc-faq__item h3{ margin:0 0 .4em; font-family:var(--hc-sans); font-size:1.06rem; font-weight:700; line-height:1.35; }
.hc-faq__item p{ font-size:.98rem; margin:0 0 .7em; }

/* ---------- Interactive checklist ---------- */
p.hc-checklist__hint{ margin:-.4em 0 .9em; font-size:.84rem; color:var(--hc-muted); }
ul.hc-checklist{ list-style:none; padding:0; margin:1em 0 2em; display:grid; gap:8px; }
ul.hc-checklist > li{ position:relative; margin:0; padding:12px 14px 12px 50px; border-radius:12px; background:#fff; border:1px solid var(--hc-line); cursor:pointer; line-height:1.45; transition:background .2s, border-color .2s, color .2s; }
ul.hc-checklist > li::before{ content:""; position:absolute; left:14px; top:12px; width:22px; height:22px; border-radius:7px; border:2px solid #b9c7bd; background:#fff; transition:background .2s, border-color .2s; }
ul.hc-checklist > li::after{ content:"✓"; position:absolute; left:14px; top:12px; width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:900; color:#fff; opacity:0; transform:scale(.4); transition:opacity .2s, transform .2s; }
ul.hc-checklist > li:hover{ border-color:#9fc3ab; background:#f7fbf8; }
ul.hc-checklist > li:focus-visible{ outline:3px solid var(--hc-sun); outline-offset:2px; }
ul.hc-checklist > li.is-done{ background:#eef8f1; border-color:#bcdcc7; color:var(--hc-muted); text-decoration:line-through; text-decoration-color:rgba(20,32,26,.35); }
ul.hc-checklist > li.is-done::before{ background:linear-gradient(135deg,var(--hc-pine),var(--hc-teal)); border-color:var(--hc-pine); }
ul.hc-checklist > li.is-done::after{ opacity:1; transform:scale(1); }
.hc-checklist__progress{ display:block; height:8px; margin:0 0 10px; border-radius:999px; background:#e7e2d5; overflow:hidden; }
.hc-checklist__progress span{ display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--hc-pine),var(--hc-teal),var(--hc-sun)); transition:width .35s ease; }

/* ---------- Conversion band ---------- */
.hc-cta{ position:relative; overflow:hidden; margin:2.2em 0; padding:24px clamp(20px,4vw,32px); border-radius:20px; color:#fff; background:linear-gradient(120deg,#c9772b,#b23a48 50%,#6d4c9f 100%); background-size:240% 240%; animation:hc-gradient 14s ease-in-out infinite; box-shadow:0 24px 46px -30px rgba(120,40,60,.75); }
.hc-cta p{ color:rgba(255,255,255,.94); margin:0 0 1em; }
p.hc-cta__title{ font-family:var(--hc-display); font-size:clamp(1.25rem,2.4vw,1.55rem); font-weight:700; color:#fff; margin:0 0 .3em; line-height:1.25; }
p.hc-cta__links{ display:flex; flex-wrap:wrap; gap:10px; margin:0; }
p.hc-cta__links a{ display:inline-flex; align-items:center; gap:8px; padding:.65em 1.1em; border-radius:10px; background:#fff; color:var(--hc-ink); font-weight:700; font-size:.92rem; text-decoration:none; box-shadow:0 8px 16px -10px rgba(0,0,0,.55); transition:transform .2s, box-shadow .2s; }
p.hc-cta__links a:hover{ transform:translateY(-2px); color:var(--hc-forest); text-decoration:none; }

/* ---------- Figures ---------- */
figure.hc-figure{ margin:2em 0; }
figure.hc-figure img{ width:100%; height:auto; border-radius:18px; box-shadow:0 22px 44px -30px rgba(20,32,26,.6); }
figure.hc-figure figcaption{ margin-top:9px; font-size:.84rem; line-height:1.45; color:var(--hc-muted); }
figure.hc-figure figcaption a{ color:var(--hc-muted); }
.hc-figure__credit{ display:inline-block; margin-left:4px; font-size:.76rem; opacity:.85; }

/* ---------- Sources ---------- */
.hc-sources{ margin:2em 0 0; padding:16px 18px; border-radius:14px; background:#faf8f2; border:1px solid var(--hc-line); font-size:.88rem; }
.hc-sources p{ margin:0 0 .4em; }
.hc-sources ul{ margin:0; padding-left:1.1em; }
.hc-sources li{ margin:0 0 .25em; }

/* ---------- Scroll reveal (progressive enhancement, no JS) ---------- */
@supports (animation-timeline: view()){
	.hc-reveal, .hc-product, .hc-callout, .hc-timeline__item, .hc-mistake, .hc-faq__item, .hc-story, ul.hc-gains > li, ol.hc-steps > li{
		animation:hc-rise linear both;
		animation-timeline:view();
		animation-range:entry 0% entry 60%;
	}
	.hc-product{ animation-name:hc-rise; }
}

/* ---------- Responsive ---------- */
@media (max-width:640px){
	.hc-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
	ul.hc-gains{ grid-template-columns:1fr; }
	ol.hc-toc__list{ columns:1; }
	.hc-product__grid{ grid-template-columns:1fr; }
	.hc-product__head{ align-items:flex-start; }
	.hc-product__icon{ flex-basis:56px; height:56px; font-size:1.75rem; border-radius:15px; }
	a.hc-btn-amazon{ width:100%; }
	.hc-timeline{ padding-left:30px; }
	.hc-timeline__item::before{ left:-27px; }
	.hc-timeline::before{ left:9px; }
	.hc-mistake{ grid-template-columns:1fr; }
	.hc-story{ grid-template-columns:44px minmax(0,1fr); padding:16px; }
	.hc-story__avatar{ width:44px; height:44px; font-size:1.3rem; }
	blockquote.hc-quote{ padding:20px 18px 16px 54px; font-size:1.08rem; }
	blockquote.hc-quote::before{ left:14px; font-size:3.4rem; }
}

@media (prefers-reduced-motion: reduce){
	.hc-hero, .hc-cta, a.hc-btn-amazon, a.hc-btn-amazon::after, .hc-product__icon,
	.hc-reveal, .hc-product, .hc-callout, .hc-timeline__item, .hc-mistake, .hc-faq__item, .hc-story, ul.hc-gains > li, ol.hc-steps > li{ animation:none !important; }
}

@media print{
	.hc-hero, .hc-cta{ background:#1b4332 !important; animation:none; }
	a.hc-btn-amazon{ animation:none; }
}