:root{
  --bg:#F4F8F2; --surface:#FFFFFF; --surface-2:#EDF4EA; --line:#DCE7D8;
  --ink:#14213D; --ink-2:#4A5A52; --ink-3:#7A8A80;
  --green:#2E9E4F; --green-deep:#1C6B37; --leaf:#6CC04A;
  --orange:#F28C1B; --orange-deep:#D96F00; --yellow:#F5C518; --red:#E5392E;
  --protein:#3B7DDD; --carbs:#F2B418; --fat:#E5533A;
  --on-accent:#FFFFFF; --shadow:0 1px 2px rgba(20,33,61,.06),0 8px 24px rgba(20,33,61,.06);
  --r:18px; --r-sm:12px;
  --display:"Nunito",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;
  --body:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --nav-h:64px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0E1712; --surface:#15221A; --surface-2:#1B2B21; --line:#26382C;
    --ink:#EAF2EC; --ink-2:#B3C4B8; --ink-3:#83968A;
    --green:#4CC06B; --green-deep:#8FDDA2; --leaf:#7FD35A;
    --orange:#FF9A2E; --orange-deep:#FFB566; --protein:#6FA3F0; --carbs:#F5C543; --fat:#F07A62;
    --on-accent:#10160F; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E1712; --surface:#15221A; --surface-2:#1B2B21; --line:#26382C;
  --ink:#EAF2EC; --ink-2:#B3C4B8; --ink-3:#83968A;
  --green:#4CC06B; --green-deep:#8FDDA2; --leaf:#7FD35A;
  --orange:#FF9A2E; --orange-deep:#FFB566; --protein:#6FA3F0; --carbs:#F5C543; --fat:#F07A62;
  --on-accent:#10160F; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 8px)}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:8px}
.num{font-variant-numeric:tabular-nums}

/* Top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{max-width:1080px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);min-width:0}
.brand img{width:36px;height:36px;flex:none}
.word{font-family:var(--display);font-weight:900;font-size:19px;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.word b{color:var(--green);font-weight:900}
.word small{font-family:var(--body);font-weight:500;font-size:12px;color:var(--ink-3);letter-spacing:.02em;margin-left:1px}
.spacer{flex:1}
.units{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px;flex:none}
.units button{border:0;background:transparent;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700;color:var(--ink-2);cursor:pointer}
.units button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.tabs-top{display:none}

/* Bottom nav (mobile app feel) */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.nav-in{display:grid;grid-template-columns:repeat(4,1fr);max-width:560px;margin:0 auto;height:var(--nav-h)}
.nav button{border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11.5px;font-weight:700;color:var(--ink-3);cursor:pointer;letter-spacing:.01em}
.nav svg{width:24px;height:24px}
.nav button[aria-selected="true"]{color:var(--green)}
.nav button[aria-selected="true"] .pill{background:color-mix(in srgb,var(--green) 16%,transparent)}
.pill{display:grid;place-items:center;width:52px;height:30px;border-radius:999px;transition:background .2s}

/* Layout */
main{max-width:1080px;margin:0 auto;padding:16px 16px 0}
.intro{margin:4px 0 16px}
.intro h1{font-family:var(--display);font-weight:900;font-size:clamp(24px,5.6vw,34px);line-height:1.1;letter-spacing:-.02em;margin:0 0 6px;text-wrap:balance}
.intro p{margin:0;color:var(--ink-2);max-width:60ch;font-size:15px}
.grid{display:grid;gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.card h2{font-family:var(--display);font-size:17px;font-weight:800;margin:0 0 12px;letter-spacing:-.01em}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.card-head h2{margin:0}
.label{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}

/* Form controls */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.full{grid-column:1/-1}
.seg{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px;gap:3px}
.seg button{flex:1;border:0;background:transparent;border-radius:9px;padding:10px 6px;font-weight:700;font-size:14px;color:var(--ink-2);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.inp{position:relative;display:flex;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);transition:border-color .15s}
.inp:focus-within{border-color:var(--green)}
.inp input,.inp select{width:100%;border:0;background:transparent;padding:12px 12px;font-size:17px;font-weight:600;outline:none;min-width:0;appearance:none;-webkit-appearance:none}
.inp select{padding-right:34px;font-size:15px;cursor:pointer}
.inp input::-webkit-outer-spin-button,.inp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.inp input[type=number]{-moz-appearance:textfield}
.inp select option{background:var(--surface);color:var(--ink)}
.inp[data-bad="true"]{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.fix[data-kind="note"]{background:color-mix(in srgb,var(--orange) 14%,var(--surface))}
.fix{margin-top:12px;padding:10px 12px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--red) 12%,var(--surface));color:var(--ink);font-size:14px;font-weight:600;text-align:center}
.inp .u{padding-right:12px;color:var(--ink-3);font-size:14px;font-weight:600;flex:none}
.inp .chev{position:absolute;right:12px;pointer-events:none;color:var(--ink-3)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hint{font-size:13px;color:var(--ink-3);margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 12px;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;display:flex;gap:6px;align-items:baseline}
.chip small{font-size:12px;color:var(--ink-3);font-weight:500}
.chip[aria-pressed="true"]{border-color:var(--green);background:color-mix(in srgb,var(--green) 12%,var(--surface));color:var(--ink)}
.chip[aria-pressed="true"] small{color:var(--green-deep)}

/* Result hero */
.result{position:relative;overflow:hidden}
.gauge-wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.gauge{width:100%;max-width:250px;height:auto;display:block}
.big{font-family:var(--display);font-weight:900;font-size:clamp(44px,12vw,58px);line-height:1;letter-spacing:-.03em;margin-top:2px}
.big-u{font-size:14px;color:var(--ink-2);font-weight:600;margin-top:4px}
.goal-tag{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:5px 10px;border-radius:999px;font-size:13px;font-weight:700;background:var(--surface-2);color:var(--ink-2)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.stat{background:var(--surface-2);border-radius:var(--r-sm);padding:10px 8px;text-align:center}
.stat .v{font-family:var(--display);font-weight:800;font-size:20px;line-height:1.1}
.stat .k{font-size:11.5px;color:var(--ink-3);font-weight:600;margin-top:2px}
.warn{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--orange) 14%,var(--surface));color:var(--ink);font-size:14px}
.warn svg{flex:none;margin-top:2px;color:var(--orange-deep)}

/* Goal table */
.rows{display:grid;gap:0}
.row{display:grid;grid-template-columns:1fr auto;align-items:center;padding:11px 2px;border-bottom:1px solid var(--line);gap:10px}
.row:last-child{border-bottom:0}
.row .n{font-weight:600;font-size:15px}
.row .s{font-size:12.5px;color:var(--ink-3)}
.row .kc{font-family:var(--display);font-weight:800;font-size:18px;text-align:right}
.row .kc small{font-family:var(--body);font-size:12px;color:var(--ink-3);font-weight:500}
.row.on .n{color:var(--green)}

/* Macros */
.donut-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center}
.donut{width:150px;height:150px;flex:none}
.macro-list{flex:1;min-width:200px;display:grid;gap:10px}
.macro{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.macro .sw{width:12px;height:12px;border-radius:4px}
.macro .nm{font-weight:700}
.macro .nm small{display:block;font-size:12px;color:var(--ink-3);font-weight:500}
.macro .g{font-family:var(--display);font-weight:900;font-size:24px;text-align:right;line-height:1}
.macro .g small{font-family:var(--body);font-size:12px;font-weight:600;color:var(--ink-3)}
.meal-table{width:100%;border-collapse:collapse;font-size:14px;margin-top:4px}
.meal-table th{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:700;text-align:right;padding:8px 4px;border-bottom:1px solid var(--line)}
.meal-table th:first-child,.meal-table td:first-child{text-align:left}
.meal-table td{padding:10px 4px;border-bottom:1px solid var(--line);text-align:right;font-weight:600}
.meal-table tr:last-child td{border-bottom:0}

/* Deficit timeline */
.timeline{position:relative;height:10px;border-radius:99px;background:var(--surface-2);margin:18px 0 8px;overflow:hidden}
.timeline i{position:absolute;inset:0;width:0;border-radius:99px;background:linear-gradient(90deg,var(--leaf),var(--green));transition:width .5s}
.tl-labels{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-3);font-weight:600}

/* BMI scale */
.bmi-scale{position:relative;margin:26px 0 6px}
.bmi-bar{display:grid;grid-template-columns:3.5fr 6.4fr 5fr 10.1fr;height:12px;border-radius:99px;overflow:hidden}
.bmi-bar span:nth-child(1){background:var(--protein)}
.bmi-bar span:nth-child(2){background:var(--green)}
.bmi-bar span:nth-child(3){background:var(--orange)}
.bmi-bar span:nth-child(4){background:var(--red)}
.bmi-pin{position:absolute;top:-22px;transform:translateX(-50%);transition:left .4s;display:flex;flex-direction:column;align-items:center}
.bmi-pin b{font-size:12px;background:var(--ink);color:var(--bg);padding:1px 6px;border-radius:6px}
.bmi-pin i{width:2px;height:22px;background:var(--ink)}
.bmi-ticks{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3);margin-top:6px;font-weight:600}

/* Ads */
.ad{border:1px dashed var(--line);border-radius:var(--r-sm);min-height:100px;display:grid;place-items:center;color:var(--ink-3);font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:color-mix(in srgb,var(--surface-2) 50%,transparent)}

/* Article */
.article{max-width:720px;margin:28px auto 0;padding-bottom:24px}
.article h2{font-family:var(--display);font-weight:900;font-size:24px;letter-spacing:-.02em;margin:28px 0 8px;text-wrap:balance}
.article h3{font-family:var(--display);font-weight:800;font-size:18px;margin:20px 0 6px}
.article p,.article li{color:var(--ink-2);font-size:16px}
.formula{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;font-weight:600;font-size:15px;overflow-x:auto;white-space:nowrap}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.tbl th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.tbl tr:last-child td{border-bottom:0}
details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:0 14px;margin-bottom:8px}
summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::after{content:"+";color:var(--green);font-weight:900;font-size:20px;line-height:1}
details[open] summary::after{content:"−"}
details p{margin:0 0 14px}
footer{max-width:1080px;margin:0 auto;padding:20px 16px 28px;color:var(--ink-3);font-size:13px;border-top:1px solid var(--line)}
footer p{margin:0 0 6px;max-width:75ch}

.panel[hidden]{display:none!important}
@media (min-width:900px){
  body{padding-bottom:0}
  .nav{display:none}
  .tabs-top{display:flex;gap:4px;margin-left:12px}
  .tabs-top button{border:0;background:transparent;padding:8px 14px;border-radius:999px;font-weight:700;font-size:14px;color:var(--ink-2);cursor:pointer}
  .tabs-top button[aria-selected="true"]{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green-deep)}
  .layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:16px;align-items:start}
  .layout .side{position:sticky;top:76px}
  .word{font-size:21px}
}
.goal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gchip{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:9px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px;font-weight:700;font-size:14px;color:var(--ink-2);line-height:1.25}
.gchip small{font-size:11.5px;font-weight:500;color:var(--ink-3)}
.gchip[aria-pressed="true"]{border-color:var(--green);background:color-mix(in srgb,var(--green) 12%,var(--surface));color:var(--ink);box-shadow:inset 0 0 0 1px var(--green)}
.gchip[aria-pressed="true"] small{color:var(--green-deep)}
.peek{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 10px);z-index:25;display:flex;align-items:center;gap:10px;border:0;cursor:pointer;background:var(--ink);color:var(--bg);padding:10px 16px 10px 18px;border-radius:999px;box-shadow:0 8px 24px rgba(20,33,61,.25);font-weight:700;font-size:14px;white-space:nowrap;transition:opacity .2s,transform .2s}
.peek b{font-family:var(--display);font-size:20px;font-weight:900;color:var(--leaf)}
.peek.off{opacity:0;pointer-events:none;transform:translate(-50%,12px)}
@media (min-width:900px){.peek{display:none}}
@media (max-width:420px){.word{font-size:18px}.brand img{width:32px;height:32px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- Site chrome: header menu, drawer, footer, content pages ---------- */
a{color:var(--green-deep)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:8px 12px;border-radius:8px;z-index:99}
.skip:focus{left:16px}
.menu{display:none;align-items:center;gap:2px;margin-left:16px}
.menu > a,.dd-btn{border:0;background:transparent;padding:8px 12px;border-radius:999px;font-weight:700;font-size:14.5px;color:var(--ink-2);cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:4px}
.menu > a:hover,.dd-btn:hover{color:var(--ink);background:var(--surface-2)}
.menu > a[aria-current="page"],.dd-btn.on{color:var(--green-deep);background:color-mix(in srgb,var(--green) 14%,transparent)}
.dd{position:relative}
.dd-panel{position:absolute;top:calc(100% + 8px);left:-8px;width:min(620px,90vw);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 40px rgba(20,33,61,.14);padding:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px 16px;z-index:40}
.dd-panel h3,.drawer h3{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:4px 0 6px;font-weight:700}
.dd-panel a,.drawer a{display:flex;align-items:center;gap:8px;padding:7px 8px;margin:0 -8px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600;font-size:14.5px}
.dd-panel a:hover,.drawer a:hover{background:var(--surface-2)}
.dd-panel a[aria-current="page"],.drawer a[aria-current="page"]{color:var(--green-deep);background:color-mix(in srgb,var(--green) 10%,transparent)}
.dd-panel .all{grid-column:1/-1;border-top:1px solid var(--line);padding-top:10px;margin-top:4px}
.dd-panel .all a{color:var(--green-deep);font-weight:700}
.burger{border:1px solid var(--line);background:var(--surface);width:42px;height:42px;border-radius:12px;display:grid;place-items:center;cursor:pointer;color:var(--ink);flex:none}
.drawer{position:fixed;inset:0;z-index:60;background:rgba(10,20,14,.45);display:flex;justify-content:flex-end}
.drawer-in{width:min(340px,88vw);height:100%;overflow-y:auto;background:var(--surface);padding:calc(env(safe-area-inset-top,0px) + 14px) 20px calc(env(safe-area-inset-bottom,0px) + 24px);display:flex;flex-direction:column;gap:14px;box-shadow:-12px 0 40px rgba(0,0,0,.2)}
.drawer-top{display:flex;justify-content:space-between;align-items:center}
.drawer-top b{font-family:var(--display);font-size:18px;font-weight:900}
.drawer section{border-top:1px solid var(--line);padding-top:10px}
@media (min-width:900px){.menu{display:flex}.burger{display:none}}

.nav-in{grid-template-columns:repeat(5,1fr)!important;max-width:620px!important}
.nav a,.nav button{border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:700;color:var(--ink-3);cursor:pointer;letter-spacing:.01em;text-decoration:none}
.nav a[aria-current="page"]{color:var(--green)}
.nav a[aria-current="page"] .pill{background:color-mix(in srgb,var(--green) 16%,transparent)}

.crumbs{font-size:13px;color:var(--ink-3);margin:2px 0 8px;display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--green-deep);text-decoration:underline}

.related{max-width:1080px;margin:28px auto 0}
.related h2{font-family:var(--display);font-weight:900;font-size:22px;margin:0 0 12px}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.tool{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.tool:hover{border-color:var(--green);transform:translateY(-1px)}
.tool .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--green) 13%,var(--surface));color:var(--green-deep)}
.tool .ic svg{width:22px;height:22px}
.tool b{display:block;font-size:15.5px;font-weight:700;margin-bottom:2px}
.tool span{font-size:13.5px;color:var(--ink-2);line-height:1.4}

/* Simple tools */
.res-head{text-align:center;padding:6px 0 4px}
.res-head .big{margin-top:0}
.res-rows{margin-top:10px}
.res-note{font-size:13.5px;color:var(--ink-3);margin-top:10px}
.bar{height:10px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-top:10px}
.bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--leaf),var(--green));transition:width .6s}
.toggle{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;cursor:pointer}
.toggle input{width:20px;height:20px;accent-color:var(--green)}

/* Content pages (blog, legal) */
.page{max-width:760px;margin:0 auto;padding-bottom:24px}
.page h1{font-family:var(--display);font-weight:900;font-size:clamp(28px,6vw,40px);line-height:1.1;letter-spacing:-.02em;margin:4px 0 10px;text-wrap:balance}
.page .meta{color:var(--ink-3);font-size:14px;margin-bottom:18px}
.page h2{font-family:var(--display);font-weight:900;font-size:23px;letter-spacing:-.01em;margin:30px 0 8px;text-wrap:balance}
.page h3{font-family:var(--display);font-weight:800;font-size:18px;margin:22px 0 6px}
.page p,.page li{color:var(--ink-2);font-size:16.5px;line-height:1.7}
.page ul,.page ol{padding-left:22px}
.page .lead{font-size:18px;color:var(--ink)}
.callout{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--green);border-radius:var(--r-sm);padding:14px 16px;margin:18px 0}
.callout p{margin:0}
.cta{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#fff;text-decoration:none;font-weight:800;padding:12px 18px;border-radius:999px;margin:6px 0}
.cta:hover{background:var(--orange-deep)}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.post{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;text-decoration:none;color:var(--ink)}
.post:hover{border-color:var(--green)}
.post .tag{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep)}
.post b{font-family:var(--display);font-size:19px;font-weight:800;line-height:1.25}
.post span{color:var(--ink-2);font-size:14.5px}
.post small{color:var(--ink-3);font-size:13px;margin-top:auto}
.email-box{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;margin:14px 0}
.email-box code{font-family:var(--body);font-weight:700;font-size:17px;color:var(--ink);user-select:all;word-break:break-all}
.btn{border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:8px 14px;font-weight:700;cursor:pointer;color:var(--ink);text-decoration:none;font-size:14px}

/* Footer */
.foot{border-top:1px solid var(--line);margin-top:36px;background:var(--surface)}
.foot-in{max-width:1080px;margin:0 auto;padding:28px 16px 24px;display:grid;gap:22px;grid-template-columns:1fr}
.foot h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot a{color:var(--ink-2);text-decoration:none;font-size:14.5px}
.foot a:hover{color:var(--green-deep);text-decoration:underline}
.foot .about p{color:var(--ink-3);font-size:13.5px;margin:8px 0 0;max-width:46ch}
.foot .legal{grid-column:1/-1;border-top:1px solid var(--line);padding-top:14px;color:var(--ink-3);font-size:13px}
.foot .legal p{margin:0 0 6px}
@media (min-width:700px){.foot-in{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.page p,.page li{overflow-wrap:anywhere}

/* ---------- Articles: feature image, quick answer, TOC, figures ---------- */
.post-hero{margin:14px 0 18px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.post-hero img{display:block;width:100%;height:auto;aspect-ratio:1200/630}
.byline{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;color:var(--ink-3);font-size:14px;margin-bottom:6px}
.byline b{color:var(--ink-2);font-weight:700}
.quick-answer{background:color-mix(in srgb,var(--green) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--green) 35%,var(--line));border-radius:var(--r);padding:16px 18px;margin:18px 0}
.quick-answer .qa-label{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep);margin-bottom:6px}
.quick-answer p{margin:0;color:var(--ink);font-size:17px;line-height:1.6}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:6px 18px;margin:18px 0}
.toc summary{padding:12px 0}
.toc ol{margin:0 0 14px;padding-left:20px;columns:2;column-gap:28px}
.toc li{font-size:15px;margin:3px 0;break-inside:avoid}
.toc a{color:var(--ink-2);text-decoration:none}.toc a:hover{color:var(--green-deep);text-decoration:underline}
@media (max-width:640px){.toc ol{columns:1}}
.page h2[id],.article h2[id]{scroll-margin-top:84px}
.fig{margin:22px 0}
.fig img{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line);background:#fff}
.fig figcaption{font-size:13.5px;color:var(--ink-3);margin-top:8px}
.takeaways{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px 14px 36px}
.takeaways li{margin:4px 0}
.sources{font-size:14px}.sources li{font-size:14.5px!important;color:var(--ink-3)!important}
.faq details p{font-size:16px}
.author-box{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:26px 0}
.author-box img{width:52px;height:52px;flex:none}
.author-box b{display:block;font-size:16px;margin-bottom:2px}
.author-box p{margin:0;font-size:14.5px!important;line-height:1.55!important}

/* Share bar */
.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0}
.share .lab{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-right:4px}
.share a,.share button{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-weight:700;font-size:13.5px;text-decoration:none;cursor:pointer}
.share a:hover,.share button:hover{border-color:var(--green);color:var(--green-deep)}
.share svg{width:16px;height:16px}
.share-wrap{max-width:1080px;margin:18px auto 0}

/* Blog cards with images */
.post{padding:0;overflow:hidden}
.post img{display:block;width:100%;height:auto;aspect-ratio:1200/630;background:var(--surface-2)}
.post .pb{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1}
.related-posts{max-width:1080px;margin:28px auto 0}
.related-posts h2{font-family:var(--display);font-weight:900;font-size:22px;margin:0 0 12px}

/* Comments */
.comments{max-width:760px;margin:30px auto 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.comments h2{font-family:var(--display);font-weight:900;font-size:22px;margin:0 0 6px}
.c-intro{color:var(--ink-2);margin:0 0 14px;font-size:15px}
.c-form{display:grid;gap:8px}
.c-form .label{margin:6px 0 0}
.c-form textarea{width:100%;border:0;background:transparent;padding:12px;font-size:16px;resize:vertical;min-height:110px;outline:none;font-family:inherit;color:inherit}
.c-form .inp input{font-size:16px;font-weight:500}
.c-type{max-width:280px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.c-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.c-send{border:0;cursor:pointer;font-size:15px}
.c-send:disabled{opacity:.6}
.c-msg{font-size:14px;color:var(--ink-2)}
.c-list{margin-top:18px;display:grid;gap:10px}
.c-item{border-top:1px solid var(--line);padding-top:12px}
.c-item header{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.c-item time{color:var(--ink-3);font-size:13px}
.c-item p{margin:6px 0 0;color:var(--ink-2);overflow-wrap:anywhere}
.c-badge{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:99px;background:color-mix(in srgb,var(--orange) 16%,var(--surface));color:var(--orange-deep)}
.c-reply{margin:10px 0 0 14px;padding:10px 12px;border-left:3px solid var(--green);background:var(--surface-2);border-radius:0 10px 10px 0}
.c-reply b{font-size:13.5px;color:var(--green-deep)}
.c-empty{color:var(--ink-3);font-size:14.5px}
.sitemap-list{columns:2;column-gap:32px}
@media (max-width:640px){.sitemap-list{columns:1}}
@media (max-width:640px){.share a span{display:none}.share a{width:36px;padding:0;justify-content:center}}