/* Gentle Range: guides and free stretch timer, in the site design (matches index.html and privacy.html).
   One standalone stylesheet: fonts, palette, header, footer, reading layout and the tool.
   Nothing here comes from ../../shared/app.css any more. */

@font-face{font-family:'Outfit';font-style:normal;font-weight:200 600;font-display:swap;src:url(../assets/fonts/Outfit-normal-200_600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --paper:#f8f4ee;--ink:#2a211c;--accent:#9c4f1c;--accent-text:#9c4f1c;
  --card:#efe6da;--cta:#efe6da;--surface:#fffdf9;
  --ink-soft:color-mix(in srgb,var(--ink) 84%,var(--paper));
  --muted:color-mix(in srgb,var(--ink) 70%,var(--paper));
  --line:color-mix(in srgb,var(--ink) 14%,transparent);
  --accent-soft:color-mix(in srgb,var(--accent) 12%,var(--paper));
  --accent-deep:var(--accent-text);
  --radius:28px;--radius-sm:16px;
  --max:1080px;
}

/* ---------- base, as privacy.html ---------- */
.skip-link{position:absolute;left:12px;top:-80px;z-index:100;padding:12px 18px;border-radius:10px;background:var(--ink);color:var(--paper);font:600 15px/1.2 system-ui,sans-serif;text-decoration:none}.skip-link:focus{top:12px}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Outfit',system-ui,sans-serif;font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
a{color:#9c4f1c;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--accent) 70%,transparent)}a:hover{color:#2a211c}
img,svg{max-width:100%}
strong{font-weight:600}
.visually-hidden{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.top{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px 24px;padding:16px clamp(20px,4vw,56px);background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:600}
.brand:hover{color:var(--ink);opacity:.8}
.brand img{width:30px;height:30px;border-radius:8px}
.top nav{display:flex;flex-wrap:wrap;gap:8px}
.top nav a{color:var(--ink);text-decoration:none;font-size:14px;padding:7px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
.top nav a:hover{border-color:var(--ink)}
/* On phones the four nav pills wrap to two rows; a sticky header that tall would cover a fifth of the
   screen (and the puzzle board), so below 640px it scrolls away with the page. */
@media (max-width:640px){.top{position:relative}}
[tabindex="-1"]:focus{outline:none}
.top nav a[aria-current]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

main{padding:clamp(40px,6vw,88px) clamp(20px,4vw,40px) clamp(64px,8vw,120px)}
.wrap{max-width:760px;margin:0 auto}

h1{font-family:'Outfit',system-ui,sans-serif;font-weight:400;font-size:clamp(40px,5.2vw,68px);line-height:1.02;letter-spacing:-.02em;margin:10px 0 20px;text-wrap:balance}
h2{font-family:'Outfit',system-ui,sans-serif;font-weight:400;font-size:clamp(26px,3vw,36px);line-height:1.15;margin:48px 0 12px;padding-top:24px;border-top:1px solid var(--line);text-wrap:balance}
h3{font-size:19px;font-weight:600;line-height:1.35;margin:28px 0 8px}
p{margin:0 0 16px}
ul,ol{padding-left:1.2em;margin:0 0 20px}li{margin:6px 0}

.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);font-weight:600;margin:0}
.lede{font-size:20px;line-height:1.55;color:var(--ink-soft);max-width:34em;margin:0 0 14px}
.meta{font-size:15px;color:var(--muted)}

footer{border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);padding:24px clamp(20px,4vw,56px);display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:14px;opacity:.85}
footer a{color:inherit}

/* ---------- page head and breadcrumbs ---------- */
.gd-page-head{margin:0 0 8px}
.gd-page-head .meta{margin:0}
.gd-crumbs{font-size:14px;color:var(--muted);margin:0 0 22px}
.gd-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 8px}
.gd-crumbs li{margin:0}
.gd-crumbs li + li::before{content:"/";margin-right:8px;opacity:.6}
.gd-crumbs a{color:inherit}

/* ---------- article body ---------- */
.gd-article-body{padding-top:8px}
.prose > h2:first-child{margin-top:24px}
.prose figure{margin:24px 0}
.prose figcaption{font-size:15px;color:var(--muted);margin-top:8px}

/* A numbered list of steps or moves: a name, a time, and a plain description. */
.gd-moves{list-style:none;counter-reset:gd-move;padding:0;margin:12px 0 28px}
.gd-moves > li{counter-increment:gd-move;position:relative;padding:2px 0 16px 50px;margin:0}
.gd-moves > li::before{content:counter(gd-move);position:absolute;left:0;top:2px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:15px;line-height:1;color:var(--paper);background:var(--ink)}
.gd-moves strong{color:var(--ink)}
.gd-time{font-size:14px;color:var(--muted);font-weight:600;margin-left:6px;white-space:nowrap}

/* Calm note box: same tint as the highlighted box on privacy.html. */
.gd-note{background:var(--accent-soft);border-radius:var(--radius-sm);padding:18px 22px;margin:24px 0;font-size:16px}
.gd-note p:last-child{margin-bottom:0}

/* Buttons: the pill used by the "Get the app" link on index.html. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:11px 22px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font:600 16px/1.2 'Outfit',system-ui,sans-serif;text-decoration:none;cursor:pointer;box-shadow:none;transition:transform .2s ease,opacity .2s ease}
.btn:hover{color:var(--paper);transform:translateY(-2px);opacity:.92}
.btn:active{transform:none}
.btn.secondary{background:transparent;color:var(--ink);box-shadow:none;border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.btn.secondary:hover{color:var(--ink);border-color:var(--ink)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn[hidden]{display:none}

/* The one calm call to action at the end of each page. */
.gd-cta{margin:48px 0 0;padding:clamp(22px,4vw,32px);background:var(--cta);color:var(--ink);border-radius:var(--radius)}
.gd-cta h2{margin:0 0 10px;padding:0;border:0;font-size:clamp(24px,2.6vw,30px)}
.gd-cta p{color:var(--ink)}
.gd-cta .btn{margin-top:4px}

/* Related links */
.gd-more{margin-top:40px}
.gd-more h2{font-size:clamp(22px,2.4vw,26px);margin:0 0 10px}
.gd-more ul{padding-left:1.2em}

/* Cards (guides index and tool panels) */
.card{background:var(--card);border-radius:var(--radius);padding:clamp(20px,3vw,28px)}

/* ---------- guides index ---------- */
.gd-guide-grid{display:grid;gap:16px;grid-template-columns:1fr;margin:8px 0 0;padding:0;list-style:none}
@media (min-width:44rem){.gd-guide-grid{grid-template-columns:1fr 1fr}}
.gd-guide-grid > li{margin:0}
.gd-guide-grid .card{height:100%;display:flex;flex-direction:column;position:relative;transition:transform .25s ease}
.gd-guide-grid .card:hover{transform:translateY(-4px)}
.gd-guide-grid h2{font-size:clamp(21px,2.2vw,24px);line-height:1.25;margin:8px 0 8px;padding:0;border:0}
.gd-guide-grid h2 a{color:var(--ink);text-decoration:none}
.gd-guide-grid h2 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.gd-guide-grid h2 a:hover{text-decoration:underline}
.gd-guide-grid h2 a:focus-visible{outline:none}
.gd-guide-grid .card:focus-within{outline:2px solid var(--ink);outline-offset:3px}
.gd-guide-grid p{color:var(--ink-soft);font-size:16px;margin:0 0 12px}
.gd-guide-grid .eyebrow{font-size:12px;color:var(--accent-text);margin:0}
.gd-guide-grid .meta{margin-top:auto;margin-bottom:0;font-size:14px;color:var(--muted)}

/* ---------- free stretch timer ---------- */
.gd-timer{max-width:40rem;margin:0 auto;text-align:center;padding:clamp(22px,5vw,40px)}
.gd-step-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--accent-text);margin:0 0 8px}
.gd-move-name{font-size:clamp(32px,6vw,44px);line-height:1.12;margin:0 0 12px;padding:0;border:0;letter-spacing:-.02em}
.gd-move-name:focus{outline:none}
.gd-cue{font-size:clamp(17px,2.6vw,20px);line-height:1.55;color:var(--ink-soft);max-width:32rem;margin:0 auto 18px;min-height:3.2em}
.gd-side{display:inline-block;font-weight:600;font-size:15px;color:var(--paper);background:var(--ink);border-radius:999px;padding:5px 14px;margin:0 0 16px}
.gd-side[hidden]{display:none}
.gd-ring{position:relative;width:min(14rem,56vw);aspect-ratio:1;margin:0 auto 10px}
.gd-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.gd-ring .gd-ring-track{stroke:color-mix(in srgb,var(--ink) 10%,transparent)}
.gd-ring .gd-ring-fill{stroke:var(--accent);transition:stroke-dashoffset .95s linear}
.gd-ring-num{position:absolute;inset:0;display:grid;place-items:center;font-weight:300;font-variant-numeric:tabular-nums;font-size:clamp(48px,12vw,68px);letter-spacing:-.03em;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.gd-ring .gd-ring-fill{transition:none}}
.gd-overall{font-size:15px;color:var(--muted);margin:6px 0 0;font-variant-numeric:tabular-nums}
.gd-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 16px}
.gd-controls .btn{flex:1 1 8rem;max-width:12rem;min-height:54px;font-size:18px}
.gd-linkbtn{background:none;border:none;padding:10px 6px;min-height:44px;cursor:pointer;font:inherit;font-size:16px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.gd-linkbtn:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.gd-linkbtn[hidden]{display:none}
.gd-next{font-size:16px;color:var(--muted);margin:0;min-height:1.6em}
.gd-plan{max-width:40rem;margin:40px auto 0}
.gd-plan h2{margin-top:0}
.gd-plan ol{padding-left:1.4em;margin:0 0 16px}
.gd-plan li{margin:5px 0;color:var(--ink-soft)}
.gd-plan li.is-now{color:var(--ink);font-weight:600}
.gd-plan li.is-done{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ink) 30%,transparent)}

/* ---------- motion and print ---------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}html{scroll-behavior:auto !important}}
@media print{
  body{background:#fff;color:#000;font-size:12pt}
  .top,footer,.skip-link,.gd-cta,.gd-crumbs,.gd-controls,.gd-linkbtn,.gd-actions{display:none !important}
  main{padding:0}
  .wrap{max-width:none !important}
  a{color:#000}
  .card,.gd-note{background:none;border:1px solid #999}
  h2{break-after:avoid}
  .gd-moves > li{break-inside:avoid}
  .gd-moves > li::before{background:none;color:#000;border:1px solid #000}
}

/* ==========================================================================
   Article layout v2 (blog-style rollout, 23 Sep): same pattern as the
   Planted Habits and MoonEase pilot, in this site's own palette.
   Title band with topic chips and byline, featured image, sticky
   "On this page" contents with share buttons, in-body visuals, and related
   cards with images. Only pages with <main class="post"> use these rules,
   plus the image cards on the guides index and the free tool's head image.
   ========================================================================== */
main.post{max-width:none;margin:0;padding:0}
.post-band{padding:clamp(36px,6vw,80px) clamp(20px,4vw,56px) clamp(32px,5vw,60px);border-bottom:1px solid var(--line);
  background:radial-gradient(ellipse 70% 90% at 88% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%),
             linear-gradient(180deg,color-mix(in srgb,var(--accent) 6%,var(--paper)),var(--paper))}
.post-band-inner{max-width:1120px;margin:0 auto}
.post-band-text{max-width:820px}
.post-band .gd-crumbs{margin-bottom:22px}
.post-chips{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.post-chips li{margin:0;font-size:13px;line-height:1.2;padding:6px 12px;border-radius:999px;color:var(--ink);
  background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.post-chips li:first-child{color:var(--paper);background:var(--ink);border-color:var(--ink);font-weight:600}
.post-band h1{margin:18px 0 18px;max-width:20ch;text-wrap:balance}
.post-band .lede{max-width:640px}
.post-byline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:22px 0 0;font-size:14.5px;color:var(--muted)}
.post-byline > span{display:inline-flex;align-items:center;gap:7px}
.post-byline img{width:30px;height:30px;border-radius:50%;background:var(--card)}
.post-byline .post-by{color:var(--ink);font-weight:600}
.post-byline svg{width:16px;height:16px;flex:none;opacity:.8}

.post-layout{max-width:1120px;margin:0 auto;padding:clamp(28px,5vw,56px) clamp(20px,4vw,40px) clamp(64px,8vw,120px);display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.post-content{min-width:0;max-width:760px}
.post-content h2[id]{scroll-margin-top:96px}
.post-hero{margin:0 0 36px !important;border-radius:20px;overflow:hidden;aspect-ratio:16/9;background:var(--card);border:1px solid var(--line)}
.post-hero img{display:block;width:100%;height:100%;object-fit:cover}

/* Contents + share. Phones: a small closed box above the article. Desktop: sticky left column. */
.post-aside{min-width:0}
.post-toc{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:4px 16px}
.post-toc-title{appearance:none;background:none;border:0;width:100%;font:inherit;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);text-align:left}
.post-toc-title::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.post-toc.is-open .post-toc-title::after{transform:rotate(225deg) translateY(-2px)}
.post-toc.is-collapsible:not(.is-open) ol{display:none}
.post-toc ol{list-style:none;margin:0 0 12px;padding:0;border-left:1px solid var(--line)}
.post-toc li{margin:0}
.post-toc a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;font-size:14.5px;line-height:1.4;color:var(--muted);text-decoration:none}
.post-toc a:hover{color:var(--ink)}
.post-toc a.is-current{color:var(--ink);border-left-color:var(--accent)}
.post-share{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.post-share-label{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.post-share a,.post-share button{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;padding:0;cursor:pointer;color:var(--ink);background:transparent;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);font:inherit}
.post-share a:hover,.post-share button:hover{border-color:var(--ink);color:var(--ink)}
.post-share svg{width:17px;height:17px}
.post-share-status{font-size:13px;color:var(--accent-text);min-height:1em}
@media (min-width:1080px){
  .post-band-text{margin-left:calc(220px + 56px)}
  .post-layout{grid-template-columns:220px minmax(0,760px);gap:56px;justify-content:center}
  .post-aside{grid-column:1;grid-row:1}
  .post-content{grid-column:2;grid-row:1}
  .post-aside-inner{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;padding-bottom:12px}
  .post-toc{border:0;background:none;padding:0;border-radius:0}
  .post-toc-title{cursor:default;min-height:0;margin:0 0 12px}
  .post-toc-title::after{display:none}
  .post-toc.is-collapsible:not(.is-open) ol{display:block}
  .post-share{margin-top:28px}
}

/* In-body visuals */
.post-figure{margin:32px 0 !important;padding:clamp(18px,3vw,26px);border-radius:20px;background:var(--surface);border:1px solid var(--line)}
.post-figure-title{font-size:clamp(21px,2.3vw,25px);line-height:1.2;font-weight:600;margin:0 0 4px;color:var(--ink)}
.post-figure-sub{font-size:14.5px;color:var(--muted);margin:0 0 18px}
.post-figure figcaption{font-size:14px;line-height:1.55;color:var(--muted);margin-top:16px}

/* A routine at a glance: one bar split by time, then the moves in order */
.post-time-bar{display:flex;gap:3px;height:44px;border-radius:12px;overflow:hidden;margin:0 0 6px}
.post-time-bar span{display:grid;place-items:center;min-width:0;font-size:12.5px;font-weight:600;color:var(--paper);background:var(--ink)}
.post-time-bar span:nth-child(3n+2){background:var(--accent)}
.post-time-bar span:nth-child(3n){background:color-mix(in srgb,var(--ink) 62%,var(--accent))}
.post-time-scale{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin:0 0 18px}
.post-time-list{list-style:none;margin:0;padding:0;display:grid;gap:8px 20px;grid-template-columns:1fr}
@media (min-width:560px){.post-time-list{grid-template-columns:1fr 1fr}}
.post-time-list li{margin:0;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.35}
.post-time-list b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:12.5px;color:var(--paper);background:var(--ink)}
.post-time-list li:nth-child(3n+2) b{background:var(--accent)}
.post-time-list li:nth-child(3n) b{background:color-mix(in srgb,var(--ink) 62%,var(--accent))}
.post-time-list em{font-style:normal;font-size:13px;color:var(--muted);white-space:nowrap}

/* Two sided cards: what is fine and what means stop, or two ways to do something */
.post-pair{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:600px){.post-pair{grid-template-columns:1fr 1fr}}
.post-pair > div{border-radius:16px;padding:16px 18px;background:color-mix(in srgb,var(--accent) 7%,var(--paper));border:1px solid var(--line)}
.post-pair > div.is-stop{background:color-mix(in srgb,var(--ink) 5%,var(--paper))}
.post-pair-title{font-weight:600;margin:0 0 10px;font-size:16.5px;line-height:1.3;display:flex;align-items:center;gap:10px}
.post-pair ul{list-style:none;margin:0;padding:0}
.post-pair li{margin:0;padding:6px 0 6px 28px;position:relative;font-size:15px;line-height:1.45}
.post-pair li::before{content:"";position:absolute;left:2px;top:9px;width:16px;height:16px;border-radius:50%;background:var(--accent)}
.post-pair li::after{content:"";position:absolute;left:7px;top:12px;width:4px;height:7px;border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg)}
.post-pair .is-stop li::before{background:transparent;border:2px solid color-mix(in srgb,var(--ink) 55%,transparent);width:12px;height:12px}
.post-pair .is-stop li::after{display:none}
.post-icon{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;color:var(--paper);background:var(--accent)}
.post-icon svg{width:16px;height:16px}
.is-stop .post-icon{background:var(--ink)}

/* Checklist card */
.post-checks{list-style:none;margin:0;padding:0;display:grid;gap:10px 22px;grid-template-columns:1fr}
@media (min-width:600px){.post-checks.two{grid-template-columns:1fr 1fr}}
.post-checks li{margin:0;position:relative;padding:2px 0 2px 34px;font-size:15.5px;line-height:1.45}
.post-checks li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:7px;background:var(--accent)}
.post-checks li::after{content:"";position:absolute;left:8px;top:6px;width:5px;height:10px;border:solid var(--paper);border-width:0 2.4px 2.4px 0;transform:rotate(45deg)}
.post-checks strong{display:block}

/* Numbered steps */
.post-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:1fr;counter-reset:ps}
@media (min-width:600px){.post-steps{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}}
.post-steps li{margin:0;counter-increment:ps;position:relative;padding:48px 16px 16px;border-radius:16px;background:color-mix(in srgb,var(--accent) 6%,var(--paper));border:1px solid var(--line);font-size:15px;line-height:1.45}
.post-steps li::before{content:counter(ps);position:absolute;left:16px;top:14px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--paper);background:var(--ink)}
.post-steps strong{display:block;margin-bottom:2px}

/* Callout */
.post-callout{margin:28px 0;padding:18px 22px;border-radius:16px;border-left:3px solid var(--accent);background:var(--accent-soft)}
.post-callout p{margin:0}
.post-callout .post-callout-lead{font-size:clamp(22px,2.4vw,27px);line-height:1.25;color:var(--ink);margin-bottom:6px}

/* Comparison table */
.post-table-wrap{margin:0;overflow-x:auto}
.post-table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;line-height:1.45}
.post-table th,.post-table td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.post-table thead th{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.post-table tbody th{font-weight:600;color:var(--ink)}
.post-table tbody tr:last-child th,.post-table tbody tr:last-child td{border-bottom:0}
.post-table td{color:var(--ink-soft)}
@media (max-width:520px){.post-table{font-size:14px}.post-table th,.post-table td{padding:10px 7px}}

/* Related cards with images */
.post-related{margin-top:48px}
.post-related h2{margin:0 0 16px;padding-top:24px;font-size:clamp(24px,2.8vw,30px)}
.post-cards{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:560px){.post-cards{grid-template-columns:1fr 1fr}}
.post-cards li{margin:0}
.post-card{display:flex;flex-direction:column;height:100%;border-radius:20px;overflow:hidden;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .2s,transform .2s}
.post-card:hover{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 55%,transparent);transform:translateY(-2px)}
.post-card-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--card)}
.post-card-img img{display:block;width:100%;height:100%;object-fit:cover}
.post-card-body{display:block;padding:14px 18px 18px}
.post-card-body .eyebrow{font-size:11.5px;margin-bottom:6px}
.post-card-title{display:block;font-size:19px;line-height:1.3;font-weight:600}
.post-card-meta{display:block;font-size:13px;color:var(--muted);margin-top:8px}

/* Guides index: cards with a picture on top */
.gd-guide-grid .card.has-img{padding:0;overflow:hidden}
.gd-guide-grid .card-img{display:block;aspect-ratio:16/9;margin:0;background:var(--card);overflow:hidden}
.gd-guide-grid .card-img img{display:block;width:100%;height:100%;object-fit:cover}
.gd-guide-grid .card-text{display:flex;flex-direction:column;flex:1;padding:clamp(18px,2.6vw,24px)}

/* Free tool: featured picture beside the heading on wide screens */
.gd-tool-head{display:grid;gap:22px;grid-template-columns:1fr;align-items:center;max-width:var(--max);margin:0 auto}
.gd-tool-head .wrap{margin:0;max-width:640px}
.gd-tool-hero{margin:0;border-radius:20px;overflow:hidden;aspect-ratio:16/9;max-height:220px;background:var(--card);border:1px solid var(--line)}
.gd-tool-hero img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:900px){
  .gd-tool-head{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:40px}
  .gd-tool-hero{max-height:none}
}

@media print{
  .post-aside,.post-share,.post-related,.post-card-img,.gd-tool-hero{display:none!important}
  .post-band{background:none;padding:0}
  .post-band-text{margin-left:0}
  .post-layout{display:block;padding:0}
  .post-hero{border:0}
  .post-figure{break-inside:avoid}
}

/* Gentle Range only: three numbers side by side (the 20-20-20 habit) */
.gr-stats{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.gr-stats div{border-radius:16px;padding:16px 12px;text-align:center;background:color-mix(in srgb,var(--accent) 7%,var(--paper));border:1px solid var(--line)}
.gr-stats b{display:block;font-weight:300;font-size:clamp(40px,7vw,56px);line-height:1;letter-spacing:-.03em;color:var(--accent-text)}
.gr-stats span{display:block;font-size:14px;line-height:1.35;margin-top:6px;color:var(--ink-soft)}

/* ==========================================================================
   Light/dark switch (23 Sep): the same sun/moon button, head script and
   'gr-theme' key as index.html, so a visitor's choice carries between the
   landing page and the guides. Light stays the default. Dark uses the
   landing page's own dark palette (index.html :root[data-theme="dark"]).
   Dark rules are screen only, so print always comes out light on paper.
   ========================================================================== */
:root{color-scheme:light}
.top nav{align-items:center}
.theme-btn{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);background:transparent;color:var(--ink);cursor:pointer;padding:0}
.theme-btn:hover{border-color:var(--accent);color:var(--accent)}
.theme-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:block}:root[data-theme="dark"] .theme-btn .i-moon{display:none}

@media screen{
  :root[data-theme="dark"]{
    color-scheme:dark;
    --paper:#17130f;--ink:#f3ebe1;--accent:#f0a56e;--accent-text:#f0a56e;
    --card:#2a2019;--cta:#2a2019;--surface:#231d18;
    --line:rgba(243,235,225,.16);
    --accent-soft:color-mix(in srgb,var(--accent) 14%,var(--paper));
  }
  /* :where() keeps these at plain-element strength, so every class rule above (nav pills, cards, buttons,
     contents links) still sets its own colour from the palette. */
  :where(:root[data-theme="dark"]) a{color:var(--accent);text-decoration-color:color-mix(in srgb,var(--accent) 60%,transparent)}
  :where(:root[data-theme="dark"]) a:hover{color:#f7c197}
  :root[data-theme="dark"] .post-share a:hover,:root[data-theme="dark"] .post-share button:hover{color:var(--accent);border-color:var(--accent)}
  /* The footer "More apps" list carries an inline light-theme grey from privacy.html (re-synced at deploy),
     so it needs !important to switch to the dark palette's footer colour. */
  :root[data-theme="dark"] footer{opacity:1;color:#b9ada1}
  :root[data-theme="dark"] footer nav[aria-label="More apps from JPott Studios"]{color:#b9ada1 !important;border-bottom-color:rgba(243,235,225,.16) !important}
  /* Pictures sit a touch softer on the dark page, like the landing page's cards */
  :root[data-theme="dark"] .post-hero,:root[data-theme="dark"] .post-card-img,:root[data-theme="dark"] .gd-guide-grid .card-img,:root[data-theme="dark"] .gd-tool-hero{border-color:var(--line)}
  :root[data-theme="dark"] .post-band{background:radial-gradient(ellipse 70% 90% at 88% 0%,rgba(240,165,110,.16),transparent 70%),linear-gradient(180deg,#21180f,var(--paper))}
  :root[data-theme="dark"] .gd-ring .gd-ring-track{stroke:rgba(243,235,225,.14)}
  :root[data-theme="dark"] .post-pair > div.is-stop{background:color-mix(in srgb,var(--ink) 6%,var(--paper))}
}

.post-photo{margin:36px 0;padding:0;border:0;background:none}.post-photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:20px}.post-photo figcaption{text-align:left}

/* article calls to action (article_ctas.py) */
.jp-mid-cta{display:flex;align-items:center;gap:16px;margin:36px 0;padding:18px 20px;border-radius:20px;background:var(--card);border:1px solid var(--line)}
.jp-mid-cta img{flex:none;width:56px;height:56px;border-radius:14px}
.jp-mid-cta .jp-mid-txt{flex:1;min-width:0}
.jp-mid-cta .jp-mid-t{margin:0;font-weight:700;font-size:17px;line-height:1.3}
.jp-mid-cta .jp-mid-s{margin:2px 0 0;font-size:14.5px;line-height:1.45;opacity:.78}
.jp-mid-cta .btn{flex:none;white-space:nowrap}
@media (max-width:560px){.jp-mid-cta{flex-wrap:wrap}.jp-mid-cta .btn{width:100%}}
.jp-cta-more{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:14px}
.jp-cta-more .jp-badge{display:inline-flex;line-height:0;border-radius:8px}
.jp-cta-more .jp-badge img{height:44px;width:auto}
.jp-cta-more .jp-web{font-size:14.5px;font-weight:600;color:inherit;text-underline-offset:3px}
.jp-sticky{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.18);transform:translateY(140%);transition:transform .35s ease}
.jp-sticky.on{transform:none}
.jp-sticky img{width:36px;height:36px;border-radius:9px;flex:none}
.jp-sticky .jp-st-name{flex:1;min-width:0;font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jp-sticky .btn{min-height:40px;padding:8px 16px;white-space:nowrap}
.jp-sticky .jp-st-x{flex:none;width:36px;height:36px;border:0;background:none;color:inherit;font-size:22px;line-height:1;cursor:pointer;opacity:.6}
@media (min-width:761px){.jp-sticky{display:none}}
@media (prefers-reduced-motion:reduce){.jp-sticky{transition:none}}

/* ---------- one matching social video near the top of each article ---------- */
main figure.jp-video,article figure.jp-video{margin:2.2rem auto !important;padding:0 !important;max-width:360px;background:none !important;border:0 !important;text-align:center}
figure.jp-video video{display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:18px;background:#000;border:1px solid var(--line);box-shadow:0 10px 30px rgba(42,33,28,.28)}
figure.jp-video figcaption{margin-top:.8rem;font-size:1rem;line-height:1.4;color:var(--muted)}
@media print{figure.jp-video{display:none !important}}
.jp-top-cta{display:flex;align-items:center;gap:12px;margin:18px 0 0;padding:10px 12px;border-radius:16px;background:var(--card);border:1px solid var(--line);max-width:560px}
.jp-top-cta img{flex:none;width:40px;height:40px;border-radius:10px}
.jp-top-cta .jp-top-txt{flex:1;min-width:0;font-size:14.5px;line-height:1.35}
.jp-top-cta .jp-top-txt b{display:block;font-size:15.5px}
.jp-top-cta .btn{flex:none;white-space:nowrap;min-height:40px;padding:8px 16px}
@media (max-width:420px){.jp-top-cta{flex-wrap:wrap}.jp-top-cta .btn{width:100%}}