/* Toolkit kit - web.css (DC-2588, DC-2705): the web look of our PDF guides, their opt-in pages and the Toolkit.
   The premiumlife.app dark-gold look, taken from the guides' own :root tokens (SPEC 4.3). Calm by rule (SPEC 4.4,
   checked by lint.mjs): headlines at most 38px and two lines on a phone, body text 16px or more, generous space,
   no sticky or floating bars. Phone first: every grid is one column until there is room for more. */

@font-face { font-family: "Glacial"; src: url("fonts/GlacialIndifference-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Glacial"; src: url("fonts/GlacialIndifference-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Glacial"; src: url("fonts/GlacialIndifference-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  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; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* The owner's brand overrides these from brand/<owner>.json (render.mjs writes them into each page). */
:root {
  --night: #15110b; --ink: #2b2417; --ink2: #3a301f;
  --gold: #cba75f; --gold-l: #edce8a; --gold-d: #a8843f; --gold-t: #e8c57b;
  --cream: #fff5e2; --body: rgba(255,245,226,.82); --muted: #bfae88;
  --line: rgba(237,206,138,.24); --line2: rgba(237,206,138,.13);
  --bg0: #2a2216; --bg1: #1b160e; --bg2: #120e08; --bg3: #0d0a06;
  --fd: "Glacial", "Inter", "Segoe UI", sans-serif;
  --fb: "Inter", "Segoe UI", sans-serif;
  --goldbg: linear-gradient(180deg, #f3dc9f 0%, #dcb86f 55%, #c19750 100%);
  --goldbtn: linear-gradient(180deg, #f1d595, #c9a35a);
  --golddiv: linear-gradient(160deg, #f6e2a8 0%, #e3c07a 35%, #c9a35a 70%, #a8843f 100%);
  --w: 760px; --col: 824px; --g: 20px; --sp: 64px;
}
@media (min-width: 760px) { :root { --g: 32px; --sp: 88px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: linear-gradient(180deg, var(--bg1) 0, var(--bg2) 1100px) var(--bg2) no-repeat; color: var(--body); font: 400 17px/1.7 var(--fb); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
ul { margin: 0; padding: 0; }
b, strong { color: var(--cream); font-weight: 700; }
.gold { color: var(--gold-t); }
.nw { white-space: nowrap; }
.q { color: var(--gold-l); font-weight: 600; }
.center { text-align: center; }
.wrap { max-width: var(--w); margin: 0 auto; }
:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 5; background: var(--night); color: var(--cream); padding: 10px 14px; border-radius: 8px; }

/* ---- once per page: the top line and the footer (SPEC 4.2, last row; Primoz 2026-10-29) ---- */
.topline { position: relative; background: var(--night); }
.topline::after, .sec + .sec::before, .hero::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: min(100%, var(--col)); height: 1px; background: var(--line2); }
.topline::after { bottom: 0; }
.tline { max-width: 1040px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 14px var(--g); }
.tl-logo img { height: 36px; width: auto; }
/* The Ai Coach OS wordmark, as on premiumlife.app (Header.astro; Primoz 2026-10-30: too big, not on one line): "OS" in gold at
   the size of "Ai Coach", on the line of the words beside it and almost their size. */
.tl-r { display: contents; }
.tl-mark { display: inline-flex; align-items: baseline; gap: .3em; font: 700 15px/1.35 var(--fd); white-space: nowrap; color: var(--cream); }
.tl-os { color: var(--gold); }
.tl-say { order: 3; flex-basis: 100%; text-align: center; text-wrap: balance; font: 700 11px/1.35 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-l); }
@media (min-width: 760px) {
  .tline { flex-wrap: nowrap; padding: 16px var(--g); }
  .tl-logo img { height: 44px; }
  .tl-r { display: flex; align-items: baseline; gap: 18px; margin-left: auto; }
  .tl-say { flex-basis: auto; text-align: right; padding-left: 18px; border-left: 1px solid var(--line); letter-spacing: .16em; }
}
.foot { padding: 28px 8px 36px; text-align: center; color: var(--muted); font: 500 13px/1.7 var(--fb); }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; }
@media (min-width: 480px) { .foot { font-size: 14px; } .foot nav { gap: 6px 22px; } }
.foot a { color: var(--gold-l); }

/* ---- the type, calm ---- */
.eyebrow { font: 700 12px/1.45 var(--fb); letter-spacing: .28em; text-transform: uppercase; color: var(--gold-l); }
.h1, .h2 { font-family: var(--fd); font-weight: 700; text-transform: uppercase; color: var(--cream); line-height: 1.08; margin: 0; }
.h1 { font-size: min(var(--fit, 38px), clamp(26px, 6.6vw, 38px)); }
.h2 { font-size: min(var(--fit, 34px), clamp(25px, 6.2vw, 34px)); }
/* On a phone a print headline's forced line break goes and the words flow; render.mjs measures every headline at
   360 px and, where it would still take three lines, sets --fit (in vw) so it takes two. */
@media (max-width: 759px) { .h1 br, .h2 br { display: none; } }
.h3 { font: 700 22px/1.25 var(--fd); color: var(--cream); margin: 0; }
.h4 { font: 700 13px/1.4 var(--fd); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-l); margin: 0; }
.lead { font-size: 17.5px; line-height: 1.75; color: var(--body); }
.small { font-size: 15px; line-height: 1.6; color: var(--muted); }
.cap { font: 600 11.5px/1.5 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }
.quote { border-left: 2px solid var(--gold); padding: 6px 0 6px 18px; font: 500 17.5px/1.7 var(--fb); color: var(--cream); }
.rule { height: 1px; background: var(--line2); }
.link { color: var(--gold-l); font-weight: 700; border-bottom: 1px solid rgba(237,206,138,.45); }

/* the rhythm inside a section: space between blocks, less under an eyebrow or a tag */
.wrap > * + *, .split > div > * + *, .stack > * + * { margin-top: 28px; }
.wrap > .eyebrow + *, .split > div > .eyebrow + *, .wrap > .tag + *, .split > div > .tag + * { margin-top: 14px; }
.wrap > .h1 + .lead, .wrap > .h2 + .lead, .split > div > .h1 + .lead, .split > div > .h2 + .lead, .lead + .lead { margin-top: 18px; }
.wrap > .h4 + *, .split > div > .h4 + * { margin-top: 14px; }
.wrap > .shot + .cap, .split > div > .phone + .cap, .split > div > .shot + .cap { margin-top: 12px; }

/* ---- the sections ---- */
.sec { position: relative; padding: var(--sp) var(--g);
  }
.sec + .sec::before { top: 0; }
.sec > .area { margin: var(--sp) calc(-1 * var(--g)) calc(-1 * var(--sp)); padding: 56px var(--g) var(--sp); background: linear-gradient(180deg, var(--bg2), var(--bg3)); border-top: 1px solid var(--line2); }
.sec > .band { margin: var(--sp) calc(-1 * var(--g)) calc(-1 * var(--sp)); padding: 30px var(--g) 32px; background: var(--goldbg); color: var(--ink); }
.band .h4 { color: var(--ink); font-size: 12.5px; letter-spacing: .16em; }
.band p { color: var(--ink); font: 500 17px/1.65 var(--fb); }
.band .wrap > .h4 + p, .band .hb > .h4 + p { margin-top: 8px; }
.band.help .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.band.help .wrap > * + * { margin-top: 0; }
.band.help p { font-size: 16.5px; }
@media (min-width: 720px) { .band.help .wrap { flex-direction: row; align-items: center; gap: 30px; } .band.help .hb { flex: 1; } }
.sec.cta .wrap { text-align: center; }
.sec.cta .card, .sec.cta .journey { text-align: left; }
.sec.cta .between { flex-direction: column; justify-content: center; align-items: center; }
.sec.cta .card.center, .sec.closing .card { text-align: center; }
.sec.cta .card.hi, .sec.closing .card { max-width: 600px; margin-left: auto; margin-right: auto; }
.sec.closing .card + .card { margin-top: 22px; }
.center .ico, .card.center .ico, .sec.closing .ico { margin-left: auto; margin-right: auto; }
.sec.closing .h3 { margin-top: 14px; }
.sec.closing .lead { margin-top: 8px; }
.sec.closing .card > div:last-child { margin-top: 22px; }

/* A big screen never sees a band across its whole width (Primoz 2026-10-29: "limit it same as everything else"). */
@media (min-width: 880px) {
  .sec > .band, .sec > .area { max-width: var(--col); margin-left: auto; margin-right: auto; border-radius: 16px; }
  .sec > .band { margin-bottom: 0; padding-left: var(--g); padding-right: var(--g); }
  .sec > .area { margin-bottom: 0; border: 1px solid var(--line2); }
  .divider { max-width: var(--col); margin: 0 auto; border-radius: 16px; border-top: 0; }
  .sec:has(> .band:last-child), .sec:has(> .area:last-child) { padding-bottom: 56px; }
  .divider + .sec { padding-top: 72px; }
}

/* gold divider between parts (a print section page) */
.divider { padding: 48px var(--g) 42px; background: var(--golddiv); color: var(--ink); text-align: center; border-top: 1px solid rgba(43,36,23,.35); }
.divider .dv-no { font: 700 12px/1 var(--fb); letter-spacing: .4em; color: rgba(43,36,23,.66); }
.divider .dv-t { font: 700 clamp(21px, 5vw, 27px)/1.12 var(--fd); text-transform: uppercase; color: var(--ink); margin: 14px 0 0; }
.divider .dv-s { font: 700 12px/1.6 var(--fb); letter-spacing: .24em; text-transform: uppercase; color: rgba(43,36,23,.76); margin-top: 12px; }
.divider .dv-ar { display: block; width: 18px; height: 42px; margin: 16px auto 0; color: var(--ink); }
.divider .wrap > * + * { margin-top: 12px; }

/* ---- the hero: the cover, without its title block (it is in the mockup above; Primoz 2026-10-30) ---- */
.hero { padding: 44px var(--g) var(--sp); text-align: center;
  position: relative; background: radial-gradient(620px 300px at 50% 0, rgba(203,167,95,.12), transparent 70%); }
.hero::before { top: 0; }
.hero .wrap > * + * { margin-top: 22px; }
.hero-sub { max-width: 600px; margin-left: auto; margin-right: auto; font: 500 18px/1.65 var(--fb); color: var(--body); }
.hero-sub b { color: var(--cream); }
.hero-by { font: 700 11.5px/1.7 var(--fb); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.hero-by b { color: var(--gold-l); }
.hero .wrap > .hero-sub { margin-top: 34px; }

/* the Ai Coach OS hub: the print drawing on wide screens, its nodes as cards on a phone */
.hub-wrap { display: none; position: relative; width: 100%; max-width: 780px; margin: 30px auto 0; aspect-ratio: 680 / 380; }
.hub { position: absolute; left: 0; top: 0; width: 680px; height: 380px; transform-origin: 0 0; }
.hub svg.rings { position: absolute; inset: 0; width: 680px; height: 380px; max-width: none; }
.hub .core { position: absolute; left: 270px; top: 120px; width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 50% 35%, #3b311f, #1b160e 70%); border: 2px solid var(--gold); box-shadow: 0 0 0 8px rgba(203,167,95,.10), 0 0 50px rgba(203,167,95,.38); }
.hub .core b { display: block; font: 700 19px/1 var(--fd); color: var(--cream); }
.hub .core i { display: block; font: 700 30px/1 var(--fd); font-style: normal; margin-top: 2px; }
.hub .core em { display: block; font: 600 8px/1.2 var(--fb); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-l); margin-top: 6px; }
.node { position: absolute; transform: translate(-50%, -50%); padding: 8px 13px; border-radius: 12px; border: 1px solid var(--line); background: rgba(27,22,14,.92); text-align: center; white-space: nowrap; }
.node b { display: block; font: 700 12px/1.15 var(--fd); color: var(--cream); }
.node s, .hub-chips s { display: block; text-decoration: none; font: 600 8px/1.3 var(--fb); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-l); margin-top: 2px; }
.node.hi { border-color: var(--gold); box-shadow: 0 0 20px -6px rgba(203,167,95,.55); }
.hub-chips { max-width: 440px; margin: 30px auto 0; }
.hub-chips .core { width: 136px; height: 136px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 50% 35%, #3b311f, #1b160e 70%); border: 2px solid var(--gold); box-shadow: 0 0 0 8px rgba(203,167,95,.10), 0 0 50px rgba(203,167,95,.38); }
.hub-chips .core b { display: block; font: 700 18px/1 var(--fd); color: var(--cream); }
.hub-chips .core i { display: block; font: 700 28px/1 var(--fd); font-style: normal; margin-top: 2px; }
.hub-chips .core em { display: block; font: 600 9px/1.25 var(--fb); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-l); margin-top: 6px; padding: 0 12px; }
.hub-chips ul { list-style: none; margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hub-chips li { border: 1px solid var(--line); border-radius: 12px; background: rgba(27,22,14,.92); padding: 11px 8px; }
.hub-chips li.hi { border-color: var(--gold); }
.hub-chips li b { display: block; font: 700 14.5px/1.2 var(--fd); color: var(--cream); }
.hub-chips li s { font-size: 10.5px; letter-spacing: .1em; margin-top: 4px; }
@media (min-width: 600px) { .hub-wrap { display: block; } .hub-chips { display: none; } }

/* ---- the blocks (the same names as the print kit) ---- */
.card { display: block; border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 21px; background: linear-gradient(180deg, rgba(255,245,226,.055), rgba(255,245,226,.015)); }
.card.hi { border-color: rgba(237,206,138,.55); box-shadow: 0 0 0 1px rgba(237,206,138,.08), 0 16px 36px -22px rgba(203,167,95,.40); background: linear-gradient(180deg, rgba(237,206,138,.12), rgba(255,245,226,.02)); }
.card .t { font: 700 18px/1.3 var(--fd); color: var(--cream); margin: 12px 0 6px; }
.card .d, .d { font-size: 16px; line-height: 1.65; color: var(--body); }
.rowcard { display: flex; gap: 16px; align-items: flex-start; }
.rowcard .t { margin-top: 2px; }
.rowcard .h4 + .t { margin-top: 6px; }
a.card { transition: border-color .2s ease; }
a.card:hover { border-color: var(--gold); }
a.card .t { margin-top: 0; }
.ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--goldbtn); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.ico svg { width: 20px; height: 20px; }
.num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--goldbtn); color: var(--ink); font: 700 15px/1 var(--fd); }
.chip { display: inline-block; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); font: 600 13px/1.35 var(--fb); color: var(--cream); background: rgba(255,245,226,.035); margin: 0 6px 8px 0; }
.chip.g { background: var(--goldbtn); color: var(--ink); border-color: transparent; font-weight: 700; }
.tag { display: inline-block; padding: 6px 12px; border-radius: 7px; background: var(--goldbtn); color: var(--ink); font: 700 12px/1.2 var(--fb); letter-spacing: .08em; text-transform: uppercase; }
.grid2, .grid3 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .grid2 { grid-template-columns: 1fr 1fr; gap: 16px 18px; } }
@media (min-width: 760px) { .grid3 { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
.row { display: flex; gap: 14px; align-items: center; }
.between { justify-content: space-between; flex-wrap: wrap; gap: 20px 28px; }
.steps { display: grid; gap: 16px; }
.step { display: flex; gap: 16px; align-items: flex-start; }
.step .t { font: 700 18px/1.3 var(--fd); color: var(--cream); padding-top: 4px; }
.step .d { margin-top: 4px; }

.flow { display: grid; grid-template-columns: 1fr; gap: 6px; }
.flow .st { text-align: center; padding: 16px 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,245,226,.035); }
.flow .st .num { margin: 0 auto 10px; }
.flow .st .t { font: 700 16.5px/1.25 var(--fd); color: var(--cream); }
.flow .ar { display: grid; place-items: center; color: var(--gold); height: 24px; transform: rotate(90deg); }
.flow .ar svg { width: 18px; height: 18px; }
@media (min-width: 700px) { .flow { display: flex; align-items: stretch; gap: 0; } .flow .st { flex: 1 1 0; min-width: 0; } .flow .ar { flex: none; width: 26px; transform: none; height: auto; } }

.split { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
.split-l > div:first-child { max-width: 320px; width: 100%; margin: 0 auto; }
@media (min-width: 780px) {
  .split-l { grid-template-columns: 280px 1fr; gap: 44px; } .split-l > div:first-child { max-width: none; }
  .split-r { grid-template-columns: 1fr 260px; gap: 44px; }
}
.eq { display: grid; grid-template-columns: 1fr; gap: 4px; align-items: stretch; }
.eq .op { display: grid; place-items: center; font: 700 28px/1 var(--fd); color: var(--gold); height: 38px; }
@media (min-width: 760px) { .eq { grid-template-columns: 1fr 30px 1fr 30px 1fr; gap: 0; } .eq .op { height: auto; } }
.eq .card .eyebrow { font-size: 11px; }
.eq .card .t { font-size: 19px; }
.eq .card .t + .t { margin-top: 2px; }

.shot { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #1d170f; box-shadow: 0 24px 50px -26px rgba(0,0,0,.75), 0 0 0 5px rgba(237,206,138,.04); }
.shot img { width: 100%; }
.split-l .shot { border-radius: 22px; border-color: rgba(237,206,138,.55); }
.founder .shot { border-radius: 22px; }
.phone { max-width: 290px; margin-left: auto; margin-right: auto; border-radius: 30px; overflow: hidden; border: 2px solid var(--gold); background: #1d170f;
  box-shadow: 0 26px 60px -26px rgba(0,0,0,.8), 0 0 34px -12px rgba(203,167,95,.30); }
.phone img { width: 100%; }

table.cmp { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
table.cmp th, table.cmp td { padding: 12px 12px; border-bottom: 1px solid var(--line2); font-size: 16px; line-height: 1.45; }
table.cmp tr:last-child td { border-bottom: 0; }
table.cmp th { font: 700 11px/1.35 var(--fb); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-l); text-align: center; background: rgba(255,245,226,.045); }
table.cmp th:first-child { text-align: left; }
table.cmp td { color: var(--cream); }
table.cmp td.c { text-align: center; width: 84px; }
table.cmp td.us { background: rgba(237,206,138,.09); }
table.cmp th.us { background: var(--goldbtn); color: var(--ink); }
@media (min-width: 640px) { table.cmp th, table.cmp td { padding: 12px 20px; } table.cmp td.c { width: 150px; } table.cmp th { font-size: 11.5px; letter-spacing: .14em; } }
.yes, .no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none; vertical-align: middle; }
.yes { background: var(--goldbtn); color: var(--ink); }
.no { border: 1px solid rgba(255,245,226,.25); color: rgba(255,245,226,.45); }
.yes svg, .no svg { width: 14px; height: 14px; }

.plan { border: 1px solid var(--line); border-radius: 18px; padding: 26px 22px 24px; background: rgba(255,245,226,.035); position: relative; }
.plan .nm { font: 700 12px/1 var(--fb); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-l); }
.plan .pr { font: 700 36px/1 var(--fd); color: var(--cream); margin: 14px 0 2px; }
.plan .pr small { font: 600 15px var(--fb); color: var(--muted); }
.plan .ln { font: 700 17px/1.35 var(--fd); color: var(--cream); margin: 14px 0 8px; }
.plan.rec { border: 1.5px solid var(--gold); background: linear-gradient(180deg, rgba(237,206,138,.13), rgba(255,245,226,.03)); box-shadow: 0 18px 44px -24px rgba(203,167,95,.5); }
.plan .badge { position: absolute; top: -12px; right: 16px; }
.grid3:has(.plan) { gap: 24px; }

.steps .card + .card { margin-top: 0; }
.prompt { border: 1px solid var(--gold); border-radius: 16px; padding: 22px 24px; background: linear-gradient(180deg, rgba(237,206,138,.11), rgba(255,245,226,.02)); }
.prompt .lbl { font: 700 11.5px/1 var(--fb); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-l); margin-bottom: 12px; }
.prompt .txt { font: 500 18px/1.6 var(--fb); color: var(--cream); }

.journey { position: relative; }
.journey:before { content: ""; position: absolute; left: 15.5px; top: 24px; bottom: 24px; width: 1px; background: linear-gradient(180deg, var(--gold), rgba(203,167,95,.25)); }
.jl { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 8px 16px; align-items: start; padding: 12px 0; }
.jl .num { grid-row: span 2; }
.jl .t { font: 700 18px/1.3 var(--fd); color: var(--cream); }
.jl .d { margin-top: 4px; }
.jl .where { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 var(--fb); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-l); border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; white-space: nowrap; }
.jl .where svg { width: 12px; height: 12px; }
a.where:hover { border-color: var(--gold); }
.jl.free .num { background: #1d170f; border: 1.5px solid var(--gold); color: var(--gold-l); }
.jl.free .where { color: var(--ink); background: var(--goldbtn); border-color: transparent; }
@media (min-width: 700px) { .jl { grid-template-columns: 32px 1fr auto; align-items: center; } .jl .num { grid-row: auto; } .jl .where { grid-column: auto; } }

.toc { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 700px) { .toc { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--rows, 5), auto); grid-auto-flow: column; column-gap: 44px; } }
.toc .ti { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line2); }
.toc .tn { font: 700 11px/1 var(--fb); letter-spacing: .08em; color: var(--gold-l); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.toc .ti.cta .tn { background: var(--goldbtn); color: var(--ink); border-color: transparent; }
.toc .tt { font: 700 16.5px/1.3 var(--fd); color: var(--cream); }
a.ti:hover .tt { color: var(--gold-l); }
.area .row p { font-size: 17px; color: var(--cream); }

.incl { display: grid; gap: 16px; text-align: left; }
.incl .it { display: flex; gap: 14px; align-items: flex-start; }
.incl .it .t { font: 700 17px/1.3 var(--fd); color: var(--cream); }
.incl .it .d { margin-top: 3px; }
.thumbs { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) { .thumbs { grid-template-columns: repeat(3, 1fr); } }
.card.hi .eyebrow + .incl { margin-top: 18px; }
.card.hi .incl + .center { margin-top: 26px; }
.card.hi .center + .small { margin-top: 14px; }

/* the 4 ways list on the day page */
.grid2 > .row span:not(.num) { font-size: 16px; color: var(--cream); }

/* ---- buttons ---- */
.btn { display: inline-block; min-height: 50px; padding: 17px 28px; border-radius: 999px; font: 800 13px/1.15 var(--fb);
  letter-spacing: .14em; text-transform: uppercase; color: #fff; text-align: center;
  background: linear-gradient(180deg, rgba(43,36,23,.10), rgba(43,36,23,.30)), var(--gold-d); text-shadow: 0 1px 1px rgba(43,36,23,.45);
  box-shadow: inset 0 1px 0 rgba(237,206,138,.45), 0 10px 26px -12px rgba(168,132,63,.85); }
.btn.line { background: transparent; border: 1.5px solid var(--gold-l); color: var(--gold-l); text-shadow: none; box-shadow: none; }
.btn.ink { background: var(--ink); color: var(--gold-l); text-shadow: none; box-shadow: 0 10px 22px -12px rgba(43,36,23,.9); padding: 14px 22px; font-size: 12px; }
.btn:hover { filter: brightness(1.06); }

/* ---- the workbook mockup of a guide (render.mjs mockupOf: transparent, its shadow is in the picture) ---- */
.mockup { display: block; width: min(480px, 92vw); max-width: 100%; height: auto; margin: 0 auto; }

/* ---- the PDF Landing Page's header: the title, the mockup, the guide is here and in the e-mail, the two doors, the PDF; his video later ---- */
.dl { padding-top: 40px; padding-bottom: 56px; }
.dl .wrap { max-width: 640px; }
.dl .mockup { width: min(370px, 80vw); }
.dl .wrap > .h1 + .mockup { margin-top: 24px; }
.dl .wrap > .mockup + .lead { margin-top: 22px; }
.dl .lead { max-width: 560px; margin-left: auto; margin-right: auto; }
.dl-video { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--bg3); }
.dl-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dl-btns { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dl-btns .btn { width: 100%; max-width: 340px; }
@media (min-width: 640px) { .dl-btns { flex-direction: row; justify-content: center; gap: 16px; } .dl-btns .btn { width: auto; } }
.dl .wrap > .dl-more { margin-top: 22px; }
.dl-more { font-size: 16px; color: var(--muted); }
.dl-more .link { font-weight: 600; }
.dl-more span { margin: 0 8px; }

/* ---- the chapter line of a PDF Landing Page (Primoz 2026-10-30; site.js builds it from the guide's contents) ----
   Without room beside the column: a thin line on the left edge that fills as the reader goes; a new chapter shows its name
   and the next one for a moment. With room: the chapters themselves, the line filling from dot to dot, quiet (T48: "mostly
   focus on the part someone is at and the rest is nicely faded"): only the current chapter is lit, the list lights up when
   pointed at, and a chapter scrolls smoothly into view when clicked. */
.rail { position: fixed; z-index: 4; left: 0; top: 0; bottom: 0; width: 3px; opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.rail.on { opacity: 1; }
.rail::before, .rail-fill { content: ""; position: absolute; left: 0; top: 0; width: 100%; }
.rail::before { height: 100%; background: var(--line2); }
.rail-fill { height: var(--fill, 0); background: var(--goldbtn); box-shadow: 0 0 10px rgba(237,206,138,.5); }
.rail ol { display: none; list-style: none; margin: 0; padding: 0; }
.rail-now { position: fixed; z-index: 4; left: 12px; top: 12px; max-width: min(300px, calc(100vw - 24px)); padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(13,10,6,.94);
  font: 500 12.5px/1.4 var(--fb); color: var(--muted); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.rail-now.show { opacity: 1; transform: none; }
.rail-now b { display: block; font: 700 14px/1.3 var(--fd); color: var(--gold-l); }
@media (min-width: 1280px) {
  .rail { left: calc(50% - var(--col) / 2 - 212px); top: 50%; bottom: auto; width: 190px; transform: translateY(-50%); pointer-events: auto; }
  .rail::before, .rail-fill { left: 3px; top: var(--first, 10px); width: 1px; }
  .rail::before { height: var(--span, 0); background: var(--line2); }
  .rail-fill { background: var(--gold); opacity: .6; box-shadow: none; }
  .rail ol { display: grid; gap: 13px; }
  .rail li { position: relative; padding-left: 18px; opacity: .5; transition: opacity .35s ease; }
  .rail li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background .35s ease, box-shadow .35s ease; }
  .rail li.done::before { background: var(--gold); }
  .rail li.now { opacity: 1; }
  .rail li.now::before { background: var(--gold-l); box-shadow: 0 0 0 3px rgba(237,206,138,.16), 0 0 10px rgba(237,206,138,.4); }
  .rail a { display: block; font: 500 13px/1.45 var(--fb); color: var(--muted); transition: color .35s ease; }
  .rail li.now a { color: var(--gold-l); font-weight: 600; }
  .rail:hover li { opacity: .75; }
  .rail:hover li.now, .rail li:hover { opacity: 1; }
  .rail a:hover { color: var(--cream); }
  .rail-now { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rail, .rail *, .rail *::before, .rail-now { transition: none; } }

/* ---- the opt-in page: centred only (Primoz 2026-10-29) ---- */
.optin { padding: 36px var(--g) 16px; background: radial-gradient(620px 300px at 50% 0, rgba(203,167,95,.12), transparent 70%); }
.oi { max-width: 660px; margin: 0 auto; text-align: center; }
.oi > * + * { margin-top: 24px; }
.oi-head > * + * { margin-top: 14px; }
.oi-title { font: 700 clamp(32px, 9vw, 38px)/1.04 var(--fd); text-transform: uppercase; color: var(--cream); margin: 14px 0 0; }
.oi-band { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 6px; background: var(--goldbg); color: var(--ink); font: 700 13.5px/1.2 var(--fd); letter-spacing: .14em; text-transform: uppercase; }
.oi-promise { font: 500 18.5px/1.6 var(--fb); color: var(--body); max-width: 560px; margin-left: auto; margin-right: auto; }
.oi-promise b { color: var(--cream); }
/* The value points (Primoz 2026-10-30): bullet points, one row each, title - subtitle. The words start at one edge inside the
   centred block, with a 15% margin on each side where there is room (T48). */
.oi-vals { list-style: none; display: grid; gap: 14px; text-align: left; }
@media (min-width: 620px) { .oi-vals { margin-left: 15%; margin-right: 15%; } }
.oi-vals li { display: flex; align-items: flex-start; gap: 12px; }
.oi-vals b { font: 700 17px/1.4 var(--fd); color: var(--cream); }
.oi-vals .v { font-size: 16px; line-height: 1.5; color: var(--body); }
.oi-note { font-size: 16px; color: var(--muted); }
/* The frame takes the form's own height (site.js, GHL's embed); the form's own space under its button is the card's bottom edge. */
.oi-form { border: 1px solid var(--line); border-radius: 18px; background: rgba(255,245,226,.04); padding: 14px 12px 0; }
.oi-form iframe { display: block; width: 100%; border: 0; border-radius: 12px; background: transparent; color-scheme: normal; }
.oi-noform { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 16px; }
.oi-alt { padding: 14px 10px; text-align: center; color: var(--muted); font-size: 16px; }

/* ---- the Toolkit: the value statement on top, one card per product, then what it is ---- */
.tk-top { padding-bottom: 44px; }
.tk-top .wrap { max-width: 860px; }
.tk-h { font: 700 clamp(25px, 5.4vw, 38px)/1.2 var(--fd); color: var(--cream); margin: 14px 0 0; }
.wrap > .tk-lead { margin-top: 18px; font-size: 18.5px; line-height: 1.65; max-width: 760px; margin-left: auto; margin-right: auto; }
.tk-what { margin: 40px auto 0; font-size: 16px; color: var(--muted); max-width: 640px; }
.tk-grid { max-width: 1120px; margin: 48px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.tk-card { flex: 1 1 300px; max-width: 360px; display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid var(--line); border-radius: 18px; padding: 26px 22px 24px;
  background: linear-gradient(180deg, rgba(255,245,226,.055), rgba(255,245,226,.015)); transition: border-color .2s ease; }
.tk-card:hover { border-color: var(--gold); }
/* Every card's picture has one height, so the words under the three pictures start on one line. */
.tk-pic { display: grid; place-items: center; align-self: stretch; height: 276px; margin-bottom: 14px; }
.tk-card .mockup { width: min(220px, 62vw); }
.tk-card .tk-shot { width: 100%; }
.tk-card > * + * { margin-top: 8px; }
.tk-t { font: 700 20px/1.2 var(--fd); text-transform: uppercase; color: var(--cream); margin: 0; }
.tk-b { font: 700 12px/1.3 var(--fd); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-l); }
.tk-card .d { font-size: 16px; line-height: 1.6; }
.tk-go { display: inline-block; margin-top: auto !important; font: 800 12px/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-l); border-bottom: 1px solid rgba(237,206,138,.45); padding: 14px 0 4px; }

/* ---- the blocks of the Two-Step guide (its print CSS at web sizes, phone first) ---- */
.cr { color: var(--cream); }
.ph { color: var(--gold-l); font-weight: 600; }
.kw { display: inline-block; padding: 5px 10px; border-radius: 7px; background: var(--goldbtn); color: var(--ink); font: 800 12px/1.1 var(--fb); letter-spacing: .1em; }
.btn.sm { min-height: 44px; padding: 15px 20px; font-size: 12px; }
.saybig { font: 700 20px/1.4 var(--fd); color: var(--cream); }
.saybig .kw { font-size: 14px; }
/* the cover's post */
.cwbadge { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 7px; border-radius: 999px; border: 1px solid rgba(237,206,138,.55); background: rgba(237,206,138,.08); font: 700 11px/1 var(--fb); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-l); }
.cwbadge .ico { width: 24px; height: 24px; border-radius: 8px; }
.cwbadge .ico svg { width: 14px; height: 14px; }
.cwbadge b { color: var(--cream); font-weight: 800; }
.hero-post { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 760px; margin-left: auto; margin-right: auto; text-align: left; }
.hero-post > svg { display: none; }
.hero-post .fbp { order: 1; width: 100%; max-width: 420px; justify-self: center; border-radius: 16px; background: #fff; color: #1c1e21; overflow: hidden; box-shadow: 0 30px 70px -28px rgba(0,0,0,.95), 0 0 60px -24px rgba(203,167,95,.55); }
.hero-post > :nth-child(5) { order: 2; color: var(--cream) !important; }
.hero-post > :nth-child(5) br { display: none; }
.hero-post > :nth-child(3) { order: 3; }
.hero-post .dmc { order: 4; }
.hero-post > :nth-child(6) { order: 5; }
.hero-post .s3c { order: 6; }
.fbh { display: flex; gap: 10px; align-items: center; padding: 12px 14px 10px; }
.fbh b { display: block; font: 700 14px/1.2 var(--fb); color: #1c1e21; }
.fbh s { display: block; text-decoration: none; font: 500 12px/1.3 var(--fb); color: #65676b; margin-top: 2px; }
.fbbg { display: grid; place-items: center; min-height: 170px; padding: 18px 26px; text-align: center; background: linear-gradient(135deg, #f3dc9f 0%, #dcb86f 50%, #b98d46 100%); color: #2b2417; font: 700 19px/1.32 var(--fd); }
.kwi { display: inline-block; padding: 0 7px 1px; border-radius: 6px; background: #2b2417; color: #f3dc9f; }
.fbf { display: flex; justify-content: space-between; padding: 9px 14px; font: 500 12px/1 var(--fb); color: #65676b; border-bottom: 1px solid #e4e6eb; }
.fbc { display: flex; gap: 8px; align-items: center; padding: 7px 14px 2px; }
.fbc:last-child { padding-bottom: 12px; }
.fbc .cb { background: #f0f2f5; border-radius: 14px; padding: 6px 11px 7px; font: 500 13.5px/1.3 var(--fb); color: #1c1e21; }
.fbc .cb b { display: block; font: 700 12px/1.3 var(--fb); color: #1c1e21; }
.fbc .lk { font: 600 11px/1 var(--fb); color: #65676b; margin-left: 4px; }
.avi { width: 34px; height: 34px; border-radius: 50%; flex: none; display: block; }
.stepl { display: flex; align-items: center; gap: 10px; font: 700 14.5px/1.35 var(--fb); color: var(--cream); }
.stepl .num { width: 28px; height: 28px; font-size: 13.5px; }
.dmc { border-radius: 16px; border: 1px solid rgba(237,206,138,.55); padding: 14px 16px; background: linear-gradient(180deg, #2e2619, #1b160e); box-shadow: 0 30px 60px -28px rgba(0,0,0,.95); }
.dmh { display: flex; gap: 10px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line2); }
.dmh b { display: block; font: 700 14px/1.2 var(--fb); color: var(--cream); }
.dmh s { display: block; text-decoration: none; font: 600 10.5px/1.3 var(--fb); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.dmb { margin: 12px 0 0 14px; padding: 10px 13px 11px; border-radius: 14px 14px 4px 14px; background: var(--goldbtn); color: var(--ink); font: 500 15px/1.5 var(--fb); }
.dmf { margin-top: 10px; font: 700 10.5px/1.4 var(--fb); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-l); }
.s3c { border-radius: 14px; border: 1px solid rgba(237,206,138,.45); padding: 12px 16px 13px; background: rgba(34,28,18,.92); }
.s3h { font: 700 10.5px/1.3 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-l); }
.s3i { display: flex; gap: 9px; align-items: center; margin-top: 7px; font: 600 15px/1.35 var(--fb); color: var(--cream); }
.s3i .yes { width: 20px; height: 20px; }
.s3i .yes svg { width: 12px; height: 12px; }
@media (min-width: 760px) {
  .hero-post { grid-template-columns: 420px 1fr; gap: 12px 32px; align-items: start; }
  .hero-post .fbp { grid-column: 1; grid-row: 1 / span 5; }
  .hero-post > :nth-child(5) { grid-column: 1; grid-row: 6; justify-self: center; }
  .hero-post > :nth-child(3) { grid-column: 2; grid-row: 1; }
  .hero-post .dmc { grid-column: 2; grid-row: 2; }
  .hero-post > :nth-child(6) { grid-column: 2; grid-row: 3; margin-top: 8px; }
  .hero-post .s3c { grid-column: 2; grid-row: 4; }
}
/* avatars, comments and DMs */
.av { width: 34px; height: 34px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #8a7650, #3a301f); border: 1px solid var(--line); }
.av.me { display: grid; place-items: center; background: var(--goldbtn); color: var(--ink); border: 0; font: 800 9px/1 var(--fb); letter-spacing: .06em; text-transform: uppercase; }
.thread { display: grid; gap: 12px; }
.msg { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.msg .bub { flex: 1 1 200px; min-width: 0; border-radius: 4px 16px 16px 16px; padding: 12px 16px 13px; background: rgba(255,245,226,.06); border: 1px solid var(--line2); }
.msg:has(.liked) .bub { flex: 0 0 auto; }
.msg .who { font: 700 10.5px/1 var(--fb); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.msg p { font: 500 16.5px/1.6 var(--fb); color: var(--cream); }
.msg.dm .bub { background: linear-gradient(180deg, rgba(237,206,138,.13), rgba(255,245,226,.025)); border-color: rgba(237,206,138,.42); }
.msg.dm .who { color: var(--gold-l); }
@media (min-width: 700px) { .msg.reply { margin-left: 46px; } }
.msg .liked { align-self: center; color: var(--gold-t); display: flex; align-items: center; gap: 6px; font: 700 10.5px/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; }
.msg .liked svg { width: 16px; height: 16px; }
.vlabel { display: flex; align-items: center; gap: 12px; font: 700 17px/1.35 var(--fd); color: var(--cream); }
.vlabel .num { width: 28px; height: 28px; font-size: 13.5px; }
.wrap > .vlabel + .msg, .wrap > .thread + .small { margin-top: 12px; }
/* examples */
.exs { display: grid; gap: 12px; }
.ex2 { padding: 16px 20px 17px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, rgba(255,245,226,.05), rgba(255,245,226,.012)); }
.exh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.exl { font: 700 11px/1.3 var(--fb); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-l); }
.ex2 p { margin-top: 10px; font: 500 16.5px/1.55 var(--fb); color: var(--cream); }
.ex2 p b, .tg li b { color: #fff; font-weight: 700; }
/* Reels and Stories */
.strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
@media (min-width: 700px) { .strip { grid-template-columns: repeat(4, 1fr); } }
.th { text-align: center; }
.ph9 { width: 100%; max-width: 150px; aspect-ratio: 112 / 196; margin: 0 auto; border-radius: 16px; overflow: hidden; border: 1.5px solid rgba(237,206,138,.6); background: #1d170f; box-shadow: 0 18px 40px -20px rgba(0,0,0,.85); }
.ph9 img { width: 100%; height: 100%; object-fit: cover; }
.th .tl { font: 700 11px/1.3 var(--fb); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
.watch { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 12px 8px 10px; border-radius: 999px; border: 1px solid rgba(237,206,138,.5); font: 700 11px/1 var(--fb); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-l); }
.watch svg { width: 11px; height: 11px; }
.fcard, .rcard, .scard { border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: linear-gradient(180deg, rgba(255,245,226,.05), rgba(255,245,226,.012)); }
.fcard .t, .rcard .t { font: 700 17px/1.3 var(--fd); color: var(--cream); margin: 10px 0 0; }
.fcard .d, .scard .d { margin-top: 8px; }
.fimg { aspect-ratio: 16 / 13; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); margin-top: 10px; background: #1d170f; }
.fimg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.car { position: relative; height: 196px; margin-top: 10px; }
.car .sl { position: absolute; width: 170px; height: 118px; border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; gap: 4px; background: linear-gradient(160deg, #f6e2a8 0%, #dcb86f 60%, #b98d46 100%); color: var(--ink); box-shadow: 0 -6px 18px -8px rgba(0,0,0,.7), 0 14px 30px -14px rgba(0,0,0,.9); border: 1px solid rgba(43,36,23,.18); }
.car .sl span { font: 700 9px/1 var(--fb); letter-spacing: .14em; color: rgba(43,36,23,.6); }
.car .sl b { font: 700 14px/1.2 var(--fd); color: var(--ink); }
.car .sl i { margin-top: auto; font: 700 8px/1 var(--fb); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: rgba(43,36,23,.55); }
.car .s1 { left: 6px; top: 0; }
.car .s2 { left: 18px; top: 38px; }
.car .s3 { left: 30px; top: 76px; }
.rcard { display: grid; grid-template-columns: 96px 1fr; gap: 14px; text-align: left; }
.rcard .ph9 { width: 96px; margin: 0; border-radius: 12px; }
.ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.ul li { position: relative; padding-left: 14px; font-size: 16px; line-height: 1.5; color: var(--body); }
.ul li:before { content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.rcard .cta { margin-top: 10px; padding: 8px 11px 9px; border-radius: 10px; border: 1px dashed rgba(237,206,138,.45); font: 600 16px/1.4 var(--fb); color: var(--cream); }
.rcard .cta span { display: block; font: 700 9.5px/1 var(--fb); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-l); margin-bottom: 5px; }
.scard { text-align: center; }
.simg { width: 100%; aspect-ratio: 204 / 258; border-radius: 12px; overflow: hidden; border: 1.5px solid rgba(237,206,138,.6); background: #1d170f; }
.simg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.scard .d { color: var(--cream); text-align: left; }
.pollopt { display: inline-block; padding: 6px 10px; border-radius: 9px; background: rgba(255,245,226,.92); color: var(--ink); font: 800 11px/1 var(--fb); letter-spacing: .08em; }
/* topic groups */
.tgs { display: grid; gap: 14px; }
.tg { border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px 15px; background: linear-gradient(180deg, rgba(255,245,226,.05), rgba(255,245,226,.012)); }
.tgh { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line2); }
.tgh .t { font: 700 17px/1.3 var(--fd); color: var(--cream); }
.tg ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.tg li { position: relative; padding-left: 15px; font-size: 16px; line-height: 1.55; color: var(--body); }
.tg li:before { content: ""; position: absolute; left: 0; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

/* the "page not found" page */
.nf { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: var(--sp) var(--g); }
.nf .wrap > * + * { margin-top: 18px; }

@media print { .topline, .foot, .oi-form, .rail, .rail-now { display: none; } .sec, .hero, .divider { break-inside: avoid-page; } }