/* JJ brand: shared layer for inner pages (blog, post, shop, checklists, thank-you,
   framework, book, privacy). Loaded after /jj-tokens.css. admin.html and crm.html
   keep the old /blog.css untouched: they are internal tools, out of scope here.

   Two grounds, alternating per the guide: header and footer sit on Green
   (night-turquoise); long-form reading content sits on Khaki
   (muted-khaki, night-turquoise ink) via data-theme="khaki" on the wrapper.
   Square corners, flat, 2px rule-strong borders, display face in capitals,
   serif for everything people read. Source: the JJ design system
   (claude.ai/artifact/2WkWDkxphR2MqaLXmRtdvg). */

/* ── legacy variable shim: old page CSS and inline styles keep working ──
   Declared on every themed element, not only :root: a custom property that refers to
   another (--ink2:var(--ink)) resolves where it is declared, so a :root-only shim
   carried the green ground's khaki ink into khaki sections, khaki on khaki. */
:root,[data-theme]{
  --bg:var(--surface); --bg2:var(--surface-raised); --panel:var(--surface-raised); --panel2:var(--surface-raised);
  --ink2:var(--ink); --muted:var(--ink); --faint:var(--ink);
  --line:var(--rule); --line2:var(--rule-strong);
  --accent-soft:rgba(224,184,72,.14); --ok:var(--ink-strong);
  --sans:var(--font-serif); --serif:var(--font-serif); --mono:var(--font-display); --disp:var(--font-display);
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font-serif);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
img{max-width:100%;display:block}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}

.wrap{max-width:920px;margin:0 auto;padding:var(--space-16) var(--space-6) var(--space-24)}
[data-theme="khaki"].wrap,main[data-theme="khaki"]{background:var(--surface);color:var(--ink)}
.kick,.label{font-family:var(--font-display);font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  font-size:13px;color:var(--accent);margin-bottom:var(--space-4)}
h1.page{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.005em;
  font-size:clamp(32px,5vw,56px);line-height:.98;margin:0 0 var(--space-4);color:var(--ink-strong);
  font-kerning:none} /* Archivo Expanded kerns Y against the space: "WHY YOUR" otherwise reads as one word */
.lede{font-family:var(--font-serif);color:var(--ink);font-size:19px;line-height:1.6;max-width:38em;margin:0 0 var(--space-2)}

/* ── post grid: square, bordered cards; the DS Card, boxed variant ── */
.posts{display:grid;gap:2px;margin-top:var(--space-8)}
.post-card{display:block;padding:var(--space-6) var(--space-1);border-top:var(--border-hairline) solid var(--rule)}
.post-card .meta{font-family:var(--font-display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:var(--space-2)}
.post-card h2{font-family:var(--font-serif);font-weight:700;font-size:25px;margin:0 0 var(--space-2);line-height:1.18}
.post-card:hover h2{color:var(--ink-strong)}
.post-card p{color:var(--ink);font-size:15px;line-height:1.6;margin:0;max-width:680px}
.post-card .more{margin-top:var(--space-3);font-family:var(--font-display);font-weight:900;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}

.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8) var(--space-6);margin-top:var(--space-12)}
@media(max-width:900px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.post-grid{grid-template-columns:1fr}}
.pcard{text-decoration:none;display:block;color:var(--ink)}
.pcard .cover{position:relative;aspect-ratio:4/5;overflow:hidden;border:var(--border-rule) solid var(--rule-strong);
  background:var(--surface-raised);transition:border-color .15s}
.pcard:hover .cover{border-color:var(--accent)}
.pcard .cap{padding:var(--space-4) 2px 0}
.pcard .cap h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:17px;line-height:1.22;
  margin:0 0 var(--space-2);color:var(--ink-strong)}
.pcard .cap .cat{font-family:var(--font-serif);font-size:14px;color:var(--ink);display:flex;align-items:center;gap:var(--space-2)}
.pcard .cap .cat .arr{color:var(--accent);opacity:0;transform:translateX(-6px);transition:opacity .15s,transform .15s}
.pcard:hover .cap .cat .arr{opacity:1;transform:none}

/* ── article ── */
article.post .meta{font-family:var(--font-display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:0 0 var(--space-6)}
article.post .body{font-family:var(--font-serif);font-size:18px;line-height:1.75;color:var(--ink);max-width:38em}
article.post .body p{margin:0 0 var(--space-6)}
article.post .body h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:24px;line-height:1.15;margin:var(--space-12) 0 var(--space-3);color:var(--ink-strong)}
article.post .body h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:18px;line-height:1.2;margin:var(--space-8) 0 var(--space-2)}
article.post .body ul,article.post .body ol{margin:0 0 var(--space-6);padding-left:22px}
article.post .body li{margin:0 0 var(--space-2);line-height:1.65}
article.post .body .tablewrap{margin:var(--space-6) 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
article.post .body table{width:100%;border-collapse:collapse;font-size:15px;margin:0;font-family:var(--font-serif);line-height:1.5}
article.post .body thead th{text-align:left;font-family:var(--font-display);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--surface);background:var(--rule-strong);font-weight:900;padding:var(--space-3) var(--space-3);border:var(--border-rule) solid var(--rule-strong)}
article.post .body tbody td{padding:var(--space-3);border:var(--border-rule) solid var(--rule-strong);vertical-align:top;color:var(--ink)}
.backlink{font-family:var(--font-display);font-weight:900;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);display:inline-block;margin-bottom:var(--space-8)}
.backlink:hover{color:var(--ink-strong)}
article.post .posthero{margin:0 0 var(--space-8)}
article.post .posthero img{width:100%;aspect-ratio:21/9;object-fit:cover;border:var(--border-rule) solid var(--rule-strong);display:block}
/* the wide covers are a centred picture between leather panels: on phones a taller crop
   trims the panels and keeps the picture from shrinking to a strip */
@media(max-width:600px){article.post .posthero img{aspect-ratio:4/3}}
article.post .body figure{margin:var(--space-8) 0}
article.post .body figure img{width:100%;border:var(--border-rule) solid var(--rule-strong);display:block}
article.post .body figcaption{font-family:var(--font-display);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-top:var(--space-3);text-align:center}

/* ── forms: the DS field, square, 2px rule ── */
.field{margin-bottom:var(--space-4)}
.field label{display:block;font-family:var(--font-display);font-weight:900;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-strong);margin-bottom:var(--space-2)}
.field input,.field textarea{width:100%;min-height:48px;padding:var(--space-3) var(--space-4);border:var(--border-rule) solid var(--rule-strong);
  border-radius:0;background:transparent;color:var(--ink);font-size:16px;font-family:var(--font-serif);outline:none;transition:box-shadow .15s}
.field input::placeholder,.field textarea::placeholder{color:var(--ink);opacity:.75;font-style:italic}
.field input:focus,.field textarea:focus{box-shadow:var(--focus-ring)}
.field textarea{min-height:120px;resize:vertical;line-height:1.5}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);height:48px;padding:0 var(--space-6);
  border:var(--border-rule) solid var(--rule-strong);border-radius:0;cursor:pointer;background:var(--accent);border-color:var(--accent);
  font-family:var(--font-display);font-weight:900;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-accent)}
.btn:hover{background:transparent;color:var(--accent)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink-strong)}
.btn.ghost:hover{background:var(--rule-strong);color:var(--surface)}
.btn.danger{background:transparent;border-color:var(--rule-strong);color:var(--ink);font-weight:900;padding:0 var(--space-3);height:36px;font-size:11px}
.btn.sm{height:36px;padding:0 var(--space-3);font-size:11px}
.msg{padding:var(--space-3) var(--space-4);border:var(--border-rule) solid var(--rule-strong);font-family:var(--font-serif);font-size:14px;margin-bottom:var(--space-4);display:flex;align-items:center;gap:var(--space-2)}
.msg.ok::before{content:'';display:inline-block;flex:none;width:1em;height:1em;-webkit-mask:var(--jj-check,none) center/contain no-repeat}
.msg.err{border-color:var(--accent)}
.msg.err::before{content:'';display:inline-block;flex:none;width:1.1em;height:1.1em;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M503.5-289.48q9.5-9.48 9.5-23.5t-9.48-23.52q-9.48-9.5-23.5-9.5t-23.52 9.48q-9.5 9.48-9.5 23.5t9.48 23.52q9.48 9.5 23.5 9.5t23.52-9.48Zm1-152.15q8.5-8.62 8.5-21.37v-193q0-12.75-8.68-21.38-8.67-8.62-21.5-8.62-12.82 0-21.32 8.62-8.5 8.63-8.5 21.38v193q0 12.75 8.68 21.37 8.67 8.63 21.5 8.63 12.82 0 21.32-8.63ZM480.27-80q-82.74 0-155.5-31.5Q252-143 197.5-197.5t-86-127.34Q80-397.68 80-480.5t31.5-155.66Q143-709 197.5-763t127.34-85.5Q397.68-880 480.5-880t155.66 31.5Q709-817 763-763t85.5 127Q880-563 880-480.27q0 82.74-31.5 155.5Q817-252 763-197.68q-54 54.31-127 86Q563-80 480.27-80Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M503.5-289.48q9.5-9.48 9.5-23.5t-9.48-23.52q-9.48-9.5-23.5-9.5t-23.52 9.48q-9.5 9.48-9.5 23.5t9.48 23.52q9.48 9.5 23.5 9.5t23.52-9.48Zm1-152.15q8.5-8.62 8.5-21.37v-193q0-12.75-8.68-21.38-8.67-8.62-21.5-8.62-12.82 0-21.32 8.62-8.5 8.63-8.5 21.38v193q0 12.75 8.68 21.37 8.67 8.63 21.5 8.63 12.82 0 21.32-8.63ZM480.27-80q-82.74 0-155.5-31.5Q252-143 197.5-197.5t-86-127.34Q80-397.68 80-480.5t31.5-155.66Q143-709 197.5-763t127.34-85.5Q397.68-880 480.5-880t155.66 31.5Q709-817 763-763t85.5 127Q880-563 880-480.27q0 82.74-31.5 155.5Q817-252 763-197.68q-54 54.31-127 86Q563-80 480.27-80Z'/%3E%3C/svg%3E") center/contain no-repeat}
.msg.ok{--jj-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='%23000' d='M382-240 154-468l57-57 171 171 371-371 57 57-428 428Z'/%3E%3C/svg%3E");background:var(--ink-strong)}
.msg.ok::before{background:var(--on-accent)}
.msg.ok{color:var(--on-accent)}

/* ── checklist items: square box, brand rule ── */
.chk-wrap{max-width:760px;margin:0 auto;padding:var(--space-16) var(--space-6) var(--space-24)}
.chk h1{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(30px,5vw,48px);line-height:.98;margin:var(--space-4) 0 var(--space-3);color:var(--ink-strong)}
.chk .lede{font-family:var(--font-serif);color:var(--ink);font-size:17px;line-height:1.6;margin:0 0 var(--space-2);max-width:36em}
.chk-print{margin:var(--space-6) 0 0;display:inline-flex;align-items:center;gap:var(--space-2);height:44px;padding:0 var(--space-4);
  border:var(--border-rule) solid var(--rule-strong);border-radius:0;background:transparent;color:var(--ink-strong);
  font-family:var(--font-display);font-weight:900;font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.chk-print:hover{background:var(--rule-strong);color:var(--surface)}
.chk-block{margin-top:var(--space-12)}
.chk-block h2{font-family:var(--font-display);font-weight:900;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 var(--space-4)}
.chk-item{display:flex;gap:var(--space-4);padding:var(--space-4) 0;border-top:var(--border-hairline) solid var(--rule)}
.chk-item:first-of-type{border-top:none}
.chk-box{flex-shrink:0;width:20px;height:20px;border:var(--border-rule) solid var(--rule-strong);border-radius:0;margin-top:2px}
.chk-item .t{font-family:var(--font-serif);font-size:16px;line-height:1.55;color:var(--ink)}
.chk-item .t b{color:var(--ink-strong)}
.chk-item .t span{color:var(--ink)}
.chk-foot{margin-top:var(--space-12);border-top:var(--border-hairline) solid var(--rule);padding-top:var(--space-6);color:var(--ink);font-size:15px;line-height:1.6}
.chk-foot a{color:var(--ink-strong)}
.xc-form{margin-top:var(--space-8);border:var(--border-rule) solid var(--rule-strong);padding:var(--space-4) var(--space-6);max-width:560px}
.xc-form .xf-k{font-family:var(--font-display);font-weight:900;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:var(--space-3)}
.xc-form form{display:flex;gap:var(--space-3);flex-wrap:wrap}
.xc-form input{flex:1;min-width:210px;min-height:44px;padding:0 var(--space-4);border:var(--border-rule) solid var(--rule-strong);border-radius:0;background:transparent;
  color:var(--ink);font-size:15px;font-family:var(--font-serif);outline:none}
.xc-form input:focus{box-shadow:var(--focus-ring)}
.xc-form button{height:44px;padding:0 var(--space-4);border:var(--border-rule) solid var(--accent);border-radius:0;cursor:pointer;font-weight:900;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;background:var(--accent);color:var(--on-accent);font-family:var(--font-display)}
.xc-form button:disabled{opacity:.5;cursor:not-allowed}
.xc-msg{font-family:var(--font-serif);font-size:14px;margin-top:var(--space-3);min-height:16px;color:var(--ink)}
.xc-msg.err{color:var(--accent)}
@media print{.jj-bar,.jj-foot,.chk-print,.xc-form{display:none}.chk-wrap{padding:0}body{background:#fff;color:#111}
  .chk-item{border-color:#ddd}.chk-box{border-color:#888}.chk-block h2{color:#004137}.chk-item .t b{color:#000}.chk-item .t span{color:#333}}

/* ── shop: products, calculators ── */
.shop-wrap{max-width:980px;margin:0 auto;padding:var(--space-16) var(--space-6) var(--space-24)}
.shop-wrap h1.page{font-family:var(--font-display)}
.shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-12)}
@media(max-width:760px){.shop-grid{grid-template-columns:minmax(0,1fr)}}
.prod{border:var(--border-rule) solid var(--rule-strong);border-radius:0;padding:clamp(var(--space-6),3.2vw,var(--space-8));
  background:transparent;display:flex;flex-direction:column}
.prod .ptag{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:900;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--space-4)}
.prod .ptag.paid{color:var(--ink)}
.prod .ptag .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.prod h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:0;font-size:clamp(20px,2.4vw,26px);line-height:1.14;margin:0 0 var(--space-3)}
.prod p.pdesc{color:var(--ink);font-size:15px;line-height:1.6;margin:0 0 var(--space-4)}
.prod ul.pfeat{list-style:none;margin:0 0 var(--space-6);padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.prod ul.pfeat li{font-size:14px;color:var(--ink);padding-left:20px;position:relative;line-height:1.5}
.prod ul.pfeat li::before{content:'';position:absolute;left:0;top:8px;width:8px;height:8px;border:1.5px solid var(--accent);border-radius:50%}
.prod .pfoot{margin-top:auto;display:flex;flex-direction:column;gap:var(--space-3)}
.prod .pprice{font-family:var(--font-display);font-weight:900;font-size:20px}
.prod .pprice small{font-family:var(--font-serif);font-weight:400;font-style:italic;font-size:13px;color:var(--ink);margin-left:var(--space-2)}
.prod-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:48px;padding:0 var(--space-6);border-radius:0;
  border:var(--border-rule) solid var(--accent);cursor:pointer;font-weight:900;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  font-family:var(--font-display);text-decoration:none;background:var(--accent);color:var(--on-accent)}
.prod-btn:hover{background:transparent;color:var(--accent)}
.prod-btn:disabled{opacity:.5;cursor:not-allowed}
.prod-btn.ghost{background:transparent;border-color:var(--rule-strong);color:var(--ink-strong)}
.prod-btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.prod form{display:flex;flex-direction:column;gap:var(--space-3)}
.prod input{min-height:44px;padding:0 var(--space-4);border:var(--border-rule) solid var(--rule-strong);border-radius:0;background:transparent;
  color:var(--ink);font-size:15px;font-family:var(--font-serif);outline:none}
.prod input:focus{box-shadow:var(--focus-ring)}
.prod .pmsg{font-family:var(--font-serif);font-size:14px;min-height:18px}
.prod .pmsg.ok{color:var(--ink-strong)}.prod .pmsg.err{color:var(--accent)}
.prod .pmsg.ok a{color:var(--ink-strong)!important;text-decoration:underline}
.prod .pnote{font-size:12px;color:var(--ink);margin:0}
.shop-foot{margin-top:var(--space-12);border-top:var(--border-hairline) solid var(--rule);padding-top:var(--space-6);color:var(--ink);font-size:15px;line-height:1.6}
.shop-foot a{color:var(--ink-strong)}
.prod.bundle{grid-column:1 / -1;border-color:var(--accent)}

.calc-section{margin-top:var(--space-18);border-top:var(--border-hairline) solid var(--rule);padding-top:var(--space-12)}
.calc-gate{max-width:540px;margin:var(--space-6) 0 0}
.calc-gate form{display:flex;gap:var(--space-3);flex-wrap:wrap}
.calc-gate input{flex:1;min-width:230px;min-height:48px;padding:0 var(--space-4);border:var(--border-rule) solid var(--rule-strong);border-radius:0;background:transparent;color:var(--ink);font-size:15px;font-family:var(--font-serif);outline:none}
.calc-gate input:focus{box-shadow:var(--focus-ring)}
.calc-list{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-12)}
@media(max-width:760px){.calc-list{grid-template-columns:minmax(0,1fr)}}
.calc{min-width:0;border:var(--border-rule) solid var(--rule-strong);border-radius:0;padding:var(--space-6) var(--space-8);background:transparent;display:flex;flex-direction:column}
.calc.wide{grid-column:1 / -1}
.calc h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:16px;letter-spacing:0;margin:0;line-height:1.2}
.calc h3 span{display:block;font-family:var(--font-serif);font-style:italic;font-size:13px;color:var(--ink);font-weight:400;text-transform:none;letter-spacing:0;margin-top:var(--space-1)}
.calc .cdesc{font-size:14px;color:var(--ink);line-height:1.55;margin:var(--space-3) 0 var(--space-4)}
.cinputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3) var(--space-4);margin-bottom:var(--space-4)}
.calc.wide .cinputs{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:560px){.calc.wide .cinputs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cinputs label{display:flex;flex-direction:column;gap:var(--space-1);font-size:11px;color:var(--ink);font-family:var(--font-display);font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.cinputs input{width:100%;min-width:0;min-height:40px;padding:0 var(--space-2);border:var(--border-rule) solid var(--rule-strong);border-radius:0;background:transparent;color:var(--ink);font-size:14px;font-family:var(--font-serif);outline:none}
.cinputs input:focus{box-shadow:var(--focus-ring)}
.calc-run{align-self:flex-start}
.cresult{margin-top:var(--space-4)}
.cresult .big-stat{font-family:var(--font-display);font-weight:900;font-size:32px;line-height:1;margin-bottom:var(--space-2);color:var(--ink-strong)}
.cresult p{font-size:14px;color:var(--ink);line-height:1.55;margin:0 0 var(--space-2)}
.cresult .csub{font-size:12px;color:var(--ink);line-height:1.5}
.cresult a{color:var(--ink-strong)}
.calc canvas{width:100%;max-width:100%;margin-top:var(--space-4);display:block}
.calc-note{margin-top:var(--space-8);font-size:14px;color:var(--ink);line-height:1.6;max-width:780px}
.calc-note a{color:var(--ink-strong)}

/* ── thank-you ── */
.ty-wrap{max-width:680px;margin:0 auto;padding:var(--space-16) var(--space-6) var(--space-24)}
.ty-wrap h1.page{font-family:var(--font-display)}
.ty-card{border:var(--border-rule) solid var(--rule-strong);border-radius:0;padding:clamp(var(--space-6),3.2vw,var(--space-8));background:transparent;margin-top:var(--space-8)}
.ty-card h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:0;font-size:clamp(18px,2.4vw,22px);line-height:1.2;margin:0 0 var(--space-3)}
.ty-card p{color:var(--ink);font-size:15px;line-height:1.6;margin:0 0 var(--space-4)}
.ty-downloads{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-2)}
.ty-note{font-size:12px;color:var(--ink);margin-top:var(--space-4);line-height:1.6}
.ty-back{display:inline-block;margin-top:var(--space-8);font-family:var(--font-display);font-weight:900;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.ty-back:hover{color:var(--ink-strong)}

/* ── tools & guides: the sitemap's sub-structure (PEAK framework, calculators, guides, FAQs) ── */
.tg-index{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);margin-top:var(--space-8)}
.tg-index a{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);border:var(--border-rule) solid var(--rule-strong);color:var(--ink);text-decoration:none}
.tg-index a:hover{background:var(--rule-strong);color:var(--surface)}
.tg-k{font-family:var(--font-display);font-weight:900;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-strong)}
.tg-index a:hover .tg-k{color:var(--surface)}
.tg-d{font-size:14px;line-height:1.5}
@media(max-width:900px){.tg-index{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tg-index{grid-template-columns:1fr}}
/* the header is sticky: keep in-page jumps clear of it */
[id]{scroll-margin-top:88px}

/* after-unlock nudge under the calculators (was a rounded, left-border card) */
#calcNext{margin:var(--space-6) 0 0;padding:var(--space-4) var(--space-6);border:var(--border-rule) solid var(--rule-strong);font-size:15px;line-height:1.55;color:var(--ink);max-width:540px}
#calcNext a{color:var(--ink-strong);text-decoration:underline}

/* form helpers: visually hidden labels, notice links */
.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}
.pnote a{color:inherit;text-decoration:underline;text-underline-offset:2px}