/* ganja. bundle — site.css (base + 25 components). Shell is frozen; themes touch tokens only.
   Spec: .agents/artifact/DESIGN-BRIEF.md §5 layout, §6 components, §7 navigation. */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-text); font-size: var(--t-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; padding-bottom: 56px; /* room for the mobile tab bar */
}
@media (min-width: 900px) { body { padding-bottom: 0; } }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-heading); font-weight: 600; letter-spacing: -0.02em; }
h1, h2, .display { font-family: var(--font-display); font-variation-settings: "SOFT" 50, "WONK" 0; font-weight: 600; }
h1 { font-size: var(--t-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--t-h2); }
h3 { font-family: var(--font-text); font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.01em; }
h4 { font-family: var(--font-text); font-size: 1rem; font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.lede { font-size: var(--t-lede); color: var(--ink-2); max-width: 68ch; }
.measure { max-width: 68ch; }
.small { font-size: var(--t-small); }
.caption, .credit { font-size: var(--t-caption); color: var(--ink-2); }
.mono, .eyebrow, .chip, .stamp, .data {
  font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400;
}
.eyebrow { color: var(--accent-strong); display: block; margin-bottom: var(--s-3); }
.on-dark .eyebrow { color: var(--accent-dark); }
.data { text-transform: none; letter-spacing: 0.02em; }
ul.plain { list-style: none; margin: 0; padding: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
hr.rule { border: 0; border-top: 1px solid var(--line); margin: var(--s-8) 0; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grid > * { grid-column: 1 / -1; min-width: 0; }
.col-12 { grid-column: span 12; }
@media (min-width: 900px) {
  .col-7 { grid-column: span 7; } .col-5 { grid-column: span 5; }
  .col-8 { grid-column: span 8; } .col-4 { grid-column: span 4; }
  .col-6 { grid-column: span 6; } .col-3 { grid-column: span 3; }
}
.cards { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cards.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cards.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.section { padding-block: var(--rhythm); }
.band { background: var(--paper-2); padding-block: var(--band-pad); }
.band.on-dark, .on-dark { background: var(--ink); color: var(--on-dark); }
.on-dark .caption, .on-dark .lede, .on-dark .credit { color: var(--on-dark-2); }
.on-dark a { color: var(--on-dark); }
.on-dark hr.rule, .on-dark .card { border-color: var(--line-dark); }
.section-head { max-width: 68ch; margin-bottom: var(--s-8); }
.section-head p { color: var(--ink-2); margin-top: var(--s-3); }
.on-dark .section-head p { color: var(--on-dark-2); }
.stack > * + * { margin-top: var(--s-4); }
.row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.between { justify-content: space-between; }
.tight { gap: var(--s-2); }

/* ---------- 1. network bar ---------- */
.netbar { background: var(--paper-2); border-bottom: 1px solid var(--line); height: 40px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; }
.netbar .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.netbar ul { display: flex; gap: var(--s-6); list-style: none; margin: 0; padding: 0; }
.netbar a { color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.netbar a:hover, .netbar a[aria-current] { color: var(--ink); }
.dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--ink-2); flex: none; background: transparent; }
.dot.g { --d: var(--g-bright); } .dot.c { --d: var(--c-bright); } .dot.r { --d: var(--r-bright); } .dot.s { --d: var(--s-bright); }
.dot.fill, [aria-current] .dot { background: var(--d, var(--ink)); border-color: var(--d, var(--ink)); }
.netbar .pill { font-size: 11px; }
@media (max-width: 899px) { .netbar ul { display: none; } .netbar .container { justify-content: center; } }

/* ---------- 2. header ---------- */
.header { position: sticky; top: 0; z-index: 40; background: var(--paper); height: 64px; border-bottom: 1px solid transparent; transition: box-shadow var(--ease), border-color var(--ease); }
.header.scrolled { box-shadow: var(--shadow-sticky); border-color: var(--line); }
.header .container { height: 100%; display: flex; align-items: center; gap: var(--s-6); }
.lockup { display: inline-flex; align-items: baseline; gap: 1px; text-decoration: none; color: var(--ink); }
.lockup .word { font-family: var(--font-text); font-weight: 600; font-size: 14px; color: var(--ink); }
.lockup .tld { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--accent-strong); font-variation-settings: "SOFT" 50, "WONK" 0; letter-spacing: -0.02em; }
.lockup.home .word { font-size: 22px; font-family: var(--font-display); }
.nav { display: none; gap: var(--s-6); margin-left: var(--s-4); }
.nav a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 15px; }
.nav a:hover { color: var(--ink); }
@media (min-width: 900px) { .nav { display: flex; } }
.header .spacer { flex: 1; }
.ctx { display: none; align-items: center; gap: 8px; }
@media (min-width: 640px) { .ctx { display: inline-flex; } }
.ctx select { height: 36px; border-radius: var(--r-control); border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 14px; padding: 0 8px; color: var(--ink); }
.ctx .hint { font-size: 12px; color: var(--ink-2); white-space: nowrap; }

/* ---------- buttons, chips, inputs ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--control-h); padding: 0 22px; border-radius: var(--r-pill); font: inherit; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background var(--ease), color var(--ease), opacity var(--ease); white-space: nowrap; }
.btn:hover { opacity: 0.92; }
.btn.primary { background: var(--accent-cta); color: var(--on-accent); }
.btn.action { background: var(--action-bg); color: var(--action-fg); }
.on-dark .btn.action, .btn.action.inverse { background: var(--action-fg); color: var(--action-bg); }
.btn.secondary { background: transparent; color: var(--accent-strong); border-color: var(--accent-strong); }
.on-dark .btn.secondary { color: var(--on-dark); border-color: var(--line-dark); }
.btn.lg { height: 48px; font-size: 16px; font-weight: 700; padding: 0 26px; }
.btn.sm { height: 36px; font-size: 14px; padding: 0 16px; }
.textlink { font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--accent-tint); color: var(--accent-strong); white-space: nowrap; }
.chip.example { background: var(--example-bg); color: var(--example); border: 1px dashed var(--line); }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.err { background: var(--err-bg); color: var(--err); }
.chip.ink { background: var(--ink); color: var(--on-dark); }
.chip.g { background: var(--g-tint); color: var(--g-strong); } .chip.c { background: var(--c-tint); color: var(--c-strong); }
.chip.r { background: var(--r-tint); color: var(--r-strong); } .chip.s { background: var(--s-tint); color: var(--s-strong); }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 14px; border-radius: var(--r-pill); background: var(--action-bg); color: var(--action-fg); text-decoration: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.pill:hover { color: var(--action-fg); opacity: 0.9; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-control); height: var(--control-h); padding: 0 14px; width: 100%; }
textarea { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; }
input:focus, select:focus, textarea:focus, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.field { display: flex; flex-direction: column; }
.input-row { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.input-row input { flex: 1 1 220px; }
.check { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; font-size: 15px; margin: 0; }
.check input { width: 18px; height: 18px; padding: 0; accent-color: var(--accent-cta); }

/* ---------- 3. hero ---------- */
.hero { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem); }
.hero .grid { align-items: center; }
.hero h1 { margin-bottom: var(--s-6); max-width: 18ch; }
.hero .display { font-size: var(--t-display); }
.hero .lede { margin-bottom: var(--s-8); }
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.hero.dark-band { background: var(--ink); color: var(--on-dark); }
.hero.dark-band .lede { color: var(--on-dark-2); }
.hero.dark-band h1 { max-width: 16ch; }

/* art fields: illustrative placeholders with the exact field colour and crop of the real master */
.art { position: relative; border-radius: var(--r-media); overflow: hidden; background: var(--photo-field); border: 1px solid var(--line); isolation: isolate; }
.art.r2x1 { aspect-ratio: 2 / 1; } .art.r1x1 { aspect-ratio: 1 / 1; } .art.r5x3 { aspect-ratio: 5 / 3; } .art.r3x2 { aspect-ratio: 3 / 2; } .art.r4x5 { aspect-ratio: 4 / 5; } .art.r16x10 { aspect-ratio: 16 / 10; }
.art .engraving { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.14; mix-blend-mode: multiply; }
.art .beam { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 45%, rgba(15,42,34,0.10) 100%); }
.art .object { position: absolute; left: 12%; top: 22%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--surface); box-shadow: 18px 26px 40px rgba(15,42,34,0.18); border: 1px solid rgba(15,42,34,0.08); }
.art .object.square { border-radius: var(--r-card); aspect-ratio: 4/5; width: 28%; }
.art .object.bar { border-radius: var(--r-pill); aspect-ratio: 7/1; width: 46%; top: 66%; left: 14%; }
.art figcaption, .art .label { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px; align-items: center; }
.art.dark { background: #163a30; border-color: var(--line-dark); }
.art.dark .object { background: #C8DCCA; }
.art.white { background: var(--surface); }

/* ---------- 4. pillar strip ---------- */
.pillars { display: grid; gap: var(--gap); grid-template-columns: 1fr; margin-top: calc(-1 * var(--s-4)); }
@media (min-width: 640px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pillars { grid-template-columns: repeat(4, 1fr); } .pillars.has-active { grid-template-columns: 6fr 2fr 2fr 2fr; } }
.tile { position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); text-decoration: none; color: var(--ink); transition: border-color var(--ease); }
.tile:hover { border-color: var(--ink-2); color: var(--ink); }
.tile .art { border-radius: var(--r-control); }
.tile .tld { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 10px; }
.tile .tld .word { font-family: var(--font-text); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.tile p { color: var(--ink-2); font-size: var(--t-small); margin: 0; }
.tile .go { font-weight: 600; font-size: 14px; margin-top: auto; }
.tile.g .tld, .tile.g .go { color: var(--g-strong); } .tile.g .art { --photo-field: var(--g-tint); }
.tile.c .tld, .tile.c .go { color: var(--c-strong); } .tile.c .art { --photo-field: var(--c-tint); }
.tile.r .tld, .tile.r .go { color: var(--r-strong); } .tile.r .art { --photo-field: var(--r-tint); }
.tile.s .tld, .tile.s .go { color: var(--s-strong); } .tile.s .art { --photo-field: var(--s-tint); }
.tile.active { border-color: var(--ink); order: -1; }
.tile.active .here { position: absolute; top: var(--s-4); right: var(--s-4); }
@media (max-width: 1023px) { .pillars.has-active .tile.active { grid-column: 1 / -1; } }
@media (max-width: 639px) { .pillars.has-active { grid-template-columns: repeat(3, 1fr); } .pillars.has-active .tile:not(.active) .art { display: none; } .pillars.has-active .tile:not(.active) p { display: none; } .pillars.has-active .tile:not(.active) .tld { font-size: 1.1rem; } }

/* ---------- 6. entity card / generic card ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.card.flush { padding: 0; overflow: hidden; }
.card.flush .body { padding: var(--s-4) var(--s-6) var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.card .meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; color: var(--ink-2); font-size: var(--t-small); }
.card .price { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; }
.card .action { margin-top: auto; }
.card .num { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--accent-strong); line-height: 1; }
.card.outline { background: transparent; }
.card h3 { margin-top: 2px; }

/* ---------- 7. category tiles ---------- */
.cats { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .cats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .cats { grid-template-columns: repeat(6, 1fr); } }
.cat { display: flex; align-items: center; justify-content: center; min-height: 72px; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-control); background: #fff; color: var(--ink); font-weight: 600; text-decoration: none; text-align: center; font-size: 15px; transition: border-color var(--ease); }
.cat:hover { border-color: var(--accent-strong); }
.cat svg { width: 22px; height: 22px; margin-right: 8px; stroke: var(--accent-strong); fill: none; stroke-width: 2; }

/* ---------- 8. stat band ---------- */
.stats { display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat .n { font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.on-dark .stat .n { color: var(--accent-dark); }
.stat .l { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--t-small); }
.on-dark .stat .l { color: var(--on-dark-2); }
.stat .src { display: block; margin-top: 6px; }
.footnote { margin-top: var(--s-8); font-size: var(--t-caption); color: var(--ink-2); max-width: 80ch; }
.on-dark .footnote { color: var(--on-dark-2); }

/* ---------- 9. trust strip ---------- */
.trust { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); padding: var(--s-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: var(--t-small); color: var(--ink-2); }
.trust li { display: inline-flex; gap: 8px; align-items: flex-start; }
.trust li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-top: 0.5em; flex: none; }
.trust.tint { background: var(--accent-tint); border: 0; padding: var(--s-4) var(--s-6); border-radius: var(--r-card); color: var(--ink); }

/* ---------- 10. pricing ---------- */
.pricing { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 900px) { .pricing { grid-template-columns: repeat(3, 1fr); } }
.price-card .tier { font-weight: 700; }
.price-card .amount { font-family: var(--font-display); font-size: 2rem; font-weight: 600; }
.price-card ul { margin: 0; padding-left: 1.1em; color: var(--ink-2); font-size: var(--t-small); }
.price-card li + li { margin-top: 6px; }
details { border: 1px solid var(--line); border-radius: var(--r-control); padding: var(--s-3) var(--s-4); background: var(--surface); }
details summary { cursor: pointer; font-weight: 600; }
details p { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--t-small); }

/* ---------- 11/12. tables & matrix ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--t-small); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.tbl th, .tbl td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); font-weight: 400; background: var(--paper-2); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .data { font-family: var(--font-mono); font-size: 13px; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mark { font-family: var(--font-mono); }
.mark.pp { color: var(--ok); } .mark.p { color: var(--ink); } .mark.m { color: var(--err); }

/* ---------- 13. funnel fork ---------- */
.fork { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .fork { grid-template-columns: 1fr 1fr; } }
.fork a { display: flex; flex-direction: column; gap: 6px; padding: var(--s-4) var(--s-6); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); text-decoration: none; color: var(--ink); }
.fork a:hover { border-color: var(--accent-strong); }
.fork a span { color: var(--ink-2); font-size: var(--t-small); }

/* ---------- 14. gate (client-side modal over SSR content) ---------- */
.gate { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: var(--gutter); background: rgba(15,42,34,0.55); }
.gate[open] { display: flex; }
.gate .panel { width: 100%; max-width: 480px; background: var(--paper); border-radius: var(--r-media); padding: var(--s-8); border: 1px solid var(--line); }
.gate .panel h2 { font-size: var(--t-h3); font-family: var(--font-text); font-weight: 700; letter-spacing: -0.01em; }

/* ---------- 15. notices & disclaimer blocks ---------- */
.notice { padding: var(--s-4) var(--s-6); border-radius: var(--r-control); font-size: var(--t-small); }
.notice.warn { background: var(--warn-bg); color: var(--warn); }
.notice.ok { background: var(--ok-bg); color: var(--ok); }
.notice.err { background: var(--err-bg); color: var(--err); }
.notice.info { background: var(--accent-tint); color: var(--ink); }
.disclaimer { font-size: var(--t-caption); color: var(--ink-2); border-left: 2px solid var(--line); padding-left: var(--s-4); }

/* ---------- 17. calculators / result card ---------- */
.calc { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .calc { grid-template-columns: repeat(4, 1fr); } .calc .result { grid-column: 1 / -1; } }
.result { padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); display: flex; flex-wrap: wrap; gap: var(--s-6); align-items: center; }
.result .big { font-family: var(--font-display); font-size: 2.25rem; font-weight: 600; }

/* ---------- 18. dosing card graphic ---------- */
.dose-card { background: var(--paper); border: 1px solid var(--ink); border-radius: var(--r-card); padding: var(--s-4) var(--s-6); display: inline-flex; flex-direction: column; gap: 10px; min-width: 240px; }
.dose-scale { position: relative; height: 24px; }
.dose-scale .track { position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--ink); }
.dose-scale .tick { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; }
.dose-scale .tick::after { content: ""; display: block; width: 1px; height: 8px; background: var(--ink); margin: 2px auto 0; }
.dose-scale .marker { position: absolute; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); transform: translateX(-50%); }

/* ---------- 19. code card ---------- */
.code { background: var(--ink); color: var(--on-dark); border-radius: var(--r-card); padding: var(--s-6); overflow: auto; font-family: var(--font-mono); font-size: 13px; line-height: 1.5; position: relative; }
.code .copy { position: absolute; top: 12px; right: 12px; }

/* ---------- 20. cross-domain modules ---------- */
.modules { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 640px) { .modules { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .modules { grid-template-columns: repeat(4, 1fr); } }
.module { display: flex; flex-direction: column; gap: 8px; padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-card); text-decoration: none; color: var(--ink); background: var(--surface); }
.module:hover { border-color: var(--ink-2); color: var(--ink); }
.module .k { display: inline-flex; gap: 8px; align-items: center; }
.module p { color: var(--ink-2); font-size: var(--t-small); margin: 0; }
.module.back { background: var(--paper-2); }

/* ---------- 21. footer hub ---------- */
.footer { background: var(--ink); color: var(--on-dark); padding-block: var(--band-pad) var(--s-10); margin-top: 0; }
.footer a { color: var(--on-dark); }
.footer .tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.footer .tabs button { font: inherit; font-size: 14px; font-weight: 600; height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-dark); background: transparent; color: var(--on-dark-2); cursor: pointer; }
.footer .tabs button[aria-selected="true"] { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.footer .tabpanel { display: none; } .footer .tabpanel.show { display: block; }
.footer .tabpanel ul { display: grid; gap: 8px var(--gap); grid-template-columns: repeat(2, 1fr); list-style: none; margin: 0; padding: 0; font-size: var(--t-small); }
@media (min-width: 900px) { .footer .tabpanel ul { grid-template-columns: repeat(4, 1fr); } }
.footer .tabpanel li { color: var(--on-dark-2); }
.footer .cols { display: grid; gap: var(--gap); grid-template-columns: 1fr; margin-top: var(--s-10); padding-top: var(--s-8); border-top: 1px solid var(--line-dark); }
@media (min-width: 900px) { .footer .cols { grid-template-columns: repeat(4, 1fr); } }
.footer .cols h4 { color: var(--on-dark-2); font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--s-3); }
.footer .cols ul { list-style: none; margin: 0; padding: 0; font-size: var(--t-small); display: grid; gap: 6px; }
.footer .legal { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line-dark); font-size: var(--t-caption); color: var(--on-dark-2); }
.footer .dots { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.footer .dots a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; }
.footer .dot { border-color: var(--on-dark-2); }

/* ---------- 22. mobile bottom tab bar ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: 56px; background: var(--paper); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; color: var(--ink-2); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.tabbar a[aria-current] { color: var(--ink); }
.tabbar a.inq { color: var(--ink); font-weight: 600; }
@media (min-width: 900px) { .tabbar { display: none; } }

/* ---------- 24. inquiry form ---------- */
.form { display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .form { grid-template-columns: 1fr 1fr; } .form .full { grid-column: 1 / -1; } }
.form .consent { font-size: var(--t-caption); color: var(--ink-2); }
.form .status { grid-column: 1 / -1; display: none; }
.form .status.show { display: block; }

/* ---------- misc ---------- */
.numbered { counter-reset: n; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.numbered li { display: grid; grid-template-columns: 72px 1fr; gap: var(--s-6); padding: var(--s-6) 0; border-top: 1px solid var(--line); }
.numbered li:last-child { border-bottom: 1px solid var(--line); }
.numbered .idx { font-family: var(--font-display); font-size: 2.25rem; font-weight: 600; color: var(--accent-strong); line-height: 1; }
.numbered .idx.g { color: var(--g-strong); } .numbered .idx.c { color: var(--c-strong); } .numbered .idx.r { color: var(--r-strong); } .numbered .idx.s { color: var(--s-strong); }
.swatches { display: grid; gap: var(--s-3); grid-template-columns: repeat(4, 1fr); }
.swatch { height: 56px; border-radius: var(--r-control); border: 1px solid var(--line); display: flex; align-items: flex-end; padding: 6px 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; }
.specimen .d { font-family: var(--font-display); font-size: 2.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.specimen .t { font-size: 1.125rem; }
.specimen .m { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.devices { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .devices { grid-template-columns: repeat(4, 1fr); } }
.device { border: 1px solid var(--line); border-radius: var(--r-mock); background: var(--surface); padding: 10px; }
.device .screen { border-radius: var(--r-media); padding: 14px; display: flex; flex-direction: column; gap: 8px; min-height: 180px; }
.device .bar { height: 6px; border-radius: 3px; background: var(--ink); opacity: 0.85; }
.device .bar.s { width: 40%; opacity: 0.35; } .device .bar.m { width: 70%; opacity: 0.55; }
.device .cta { height: 20px; border-radius: 10px; width: 48%; margin-top: auto; }
.mock { background: var(--accent-tint); border-radius: var(--r-mock); padding: var(--s-6); display: grid; gap: 10px; min-height: 220px; position: relative; }
.mock .line { height: 10px; border-radius: 5px; background: var(--surface); border: 1px solid var(--line); }
.mock .line.w60 { width: 60%; } .mock .line.w40 { width: 40%; } .mock .line.w80 { width: 80%; }
.mock .block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-control); height: 64px; }
.mock .chip.example { position: absolute; top: 12px; left: 12px; }
.badge-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.faq h3 { font-size: 1.0625rem; margin-top: var(--s-6); }
.faq p { color: var(--ink-2); font-size: var(--t-small); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: var(--t-small); }
.kv dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); padding-top: 3px; }
.kv dd { margin: 0; }
.map { position: relative; border-radius: var(--r-media); background: var(--surface); border: 1px solid var(--line); padding: var(--s-6); min-height: 280px; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-4); overflow: hidden; }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.9; }
.legend { display: flex; flex-wrap: wrap; gap: var(--s-2); position: relative; }
.legend .chip { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.legend .chip i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.steps { display: grid; gap: var(--s-3); grid-template-columns: repeat(3, 1fr); }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(6, 1fr); } }
.feed li { display: grid; grid-template-columns: 110px 1fr; gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--line); font-size: var(--t-small); }
.feed li:last-child { border-bottom: 1px solid var(--line); }
.ladder { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }

/* ---------- ganja.recipes content-site additions ---------- */
.r-nav { display: flex; overflow-x: auto; gap: var(--s-4); margin-left: var(--s-2); scrollbar-width: none; }
.r-nav::-webkit-scrollbar { display: none; }
.r-nav a { white-space: nowrap; font-size: 14px; }
@media (max-width: 899px) { .header .container { gap: var(--s-3); } .header .btn.sm { padding: 0 12px; } }
@media (max-width: 639px) { .r-nav { display: none; } }
.slot { display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--s-4); background: var(--paper-2); border: 1px dashed var(--ink-2); border-radius: var(--r-media); color: var(--ink-2); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.slot.r2x1 { aspect-ratio: 2 / 1; } .slot.r1x1 { aspect-ratio: 1 / 1; } .slot.r3x2 { aspect-ratio: 3 / 2; }
.crumbs a { color: var(--ink-2); }
.recipe-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4) var(--s-6); margin: var(--s-6) 0 0; padding: var(--s-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .recipe-meta { grid-template-columns: repeat(6, 1fr); } }
.recipe-meta dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.recipe-meta dd { margin: 4px 0 0; font-size: var(--t-small); font-weight: 600; }
.math { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0; text-transform: none; line-height: 1.6; background: var(--paper-2); padding: var(--s-4); border-radius: var(--r-control); }
.ingredients { margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.ingredients li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--t-small); display: flex; gap: 10px; }
.ingredients li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 0.55em; }
.steps-list { counter-reset: step; list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-6); }
.steps-list li { counter-increment: step; display: grid; grid-template-columns: 48px 1fr; gap: var(--s-4); align-items: start; }
.steps-list li::before { content: counter(step); font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; color: var(--accent-strong); line-height: 1; }
.steps-list .slot { margin-top: var(--s-3); aspect-ratio: 3 / 2; max-width: 520px; }
.notes { margin: var(--s-3) 0 0; padding-left: 1.1em; color: var(--ink-2); font-size: var(--t-small); }
.notes li + li { margin-top: 8px; }
.linklist li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--t-small); }
.linklist li:last-child { border-bottom: 0; }
.prose h2 { font-size: var(--t-h3); margin-top: var(--s-10); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.0625rem; margin-top: var(--s-6); }
.prose p, .prose li { max-width: 68ch; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose table { max-width: 100%; }
.prose .sources { font-size: var(--t-caption); color: var(--ink-2); border-top: 1px solid var(--line); padding-top: var(--s-4); margin-top: var(--s-10); }
.prose .sources li { margin-bottom: 6px; max-width: none; }
.signup { border-top: 1px solid var(--line); }
.signup .input-row { align-items: stretch; }
.footer .network { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-8); padding-bottom: var(--s-6); border-bottom: 1px solid var(--line-dark); }
.footer .cols { margin-top: var(--s-6); border-top: 0; padding-top: 0; }
.calc-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .calc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .calc-grid { grid-template-columns: repeat(4, 1fr); } }
.calc-out { display: grid; gap: var(--s-3); }
.calc-out .big { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 600; letter-spacing: -0.02em; }
.presets { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.recipe-card .meta { font-size: var(--t-caption); }

/* mobile hardening */
.dose-card .chip { white-space: normal; height: auto; padding: 6px 12px; line-height: 1.3; }
.math, .code, .tbl td, .tbl th { overflow-wrap: anywhere; }
.btn { max-width: 100%; white-space: normal; text-align: center; }
.header .btn { white-space: nowrap; }
img, figure { max-width: 100%; }

.dose-scale .tick { white-space: nowrap; }

/* faq: align with container edge */
.container.faq { max-width: var(--container); }
.container.faq > * { max-width: 68ch; }

/* home browse block: tile + dose chip polish */
.cat { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--ink); transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, color 150ms ease; }
@media (min-width: 640px) { .cat { font-size: 1.75rem; } }
.cat:hover, .cat:focus-visible { transform: translateY(calc(var(--pop-lift-card) * -1)); box-shadow: var(--pop-shadow-card); border-color: var(--accent); color: var(--accent-strong); }
.cats + .row .chip { height: auto; padding: 8px 16px; font-size: 1rem; color: var(--ink); transition: transform 150ms ease, box-shadow 150ms ease; }
.cats + .row .chip:hover { transform: translateY(calc(var(--pop-lift-card) * -1)); box-shadow: 0 6px 14px rgba(15, 42, 34, 0.12); }
@media (prefers-reduced-motion: reduce) { .cat, .cats + .row .chip { transition: none; } .cat:hover, .cat:focus-visible, .cats + .row .chip:hover { transform: none; } }

/* "Grown by" + Insaan LLC logo band: last element on every page */
.logo-band { background: #fff; padding: 20px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.logo-band .grown { font-family: var(--font-display); font-variation-settings: "SOFT" 50, "WONK" 0; font-size: 0.9375rem; line-height: 1; color: var(--ink); }
.logo-band img { display: block; width: auto; max-width: 200px; height: auto; }
@media (max-width: 639px) { .logo-band img { max-width: 125px; } .logo-band .grown { font-size: 0.8125rem; } }

/* Header logo: wordmark image + text suffix read as one word. Values were tuned from headless-screenshot pixel measurements (see build notes). */
.logo { display: inline-flex; align-items: flex-end; gap: 0; text-decoration: none; color: var(--ink); --wm-h: 1.86em; --wm-y: 0.125em; --wm-gap: 0.165em; }
.logo .tld { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--accent-strong); font-variation-settings: "SOFT" 50, "WONK" 0; letter-spacing: -0.02em; }
.logo .wordmark { font-size: 22px; height: var(--wm-h); width: auto; margin-right: var(--wm-gap); transform: translateY(var(--wm-y)); mix-blend-mode: multiply; }
@media (max-width: 639px) { .logo .tld, .logo .wordmark { font-size: 17px; } }

/* Typography pass: every heading is the serif display face in dark ink; card titles are 1.5rem / 600 / 1.2. Eyebrows, "Read →" links and footer column heads keep their own styles. */
h1, h2, h3, h4 { font-family: var(--font-display); font-variation-settings: "SOFT" 50, "WONK" 0; font-weight: 600; color: var(--ink); }
.gate .panel h2 { font-family: var(--font-display); font-weight: 600; }
.on-dark :is(h1, h2, h3, h4), .band.on-dark :is(h1, h2, h3, h4), .hero.dark-band :is(h1, h2, h3, h4) { color: var(--on-dark); }
h1 a, h2 a, h3 a, h4 a { color: var(--ink); text-decoration: none; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, a.card:hover h3 { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.card h3, .recipe-card h3, a.card h3 { font-size: 1.5rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; }
.footer .cols h4 { font-family: var(--font-mono); font-variation-settings: normal; font-weight: 400; color: var(--on-dark-2); }
/* Grid hardening: three equal columns that can never push past the container; long titles wrap instead of overflowing. */
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.cards.c3 > *, .cards > * { min-width: 0; }
.card h3, .card p { overflow-wrap: break-word; }
a.card .textlink, a.card .action { color: var(--accent-strong); }

/* Overflow fixes (found by measurement at 320 px): long source URLs in prose and sources lists were wider than the column. */
.prose a, .prose li, .prose p, .sources a, .sources li { overflow-wrap: anywhere; }
.section, .band, .hero, .footer, .header, .logo-band { width: 100%; }
/* Safety net, only after the causes above were fixed */
html, body { overflow-x: clip; }

/* Fully clickable cards: stretched link on the title, no nested links, arrow fades in on hover/focus */
.card.linked { position: relative; cursor: pointer; padding-bottom: calc(var(--s-6) + 10px); transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease; }
.card.linked h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.card.linked::after { content: "→"; position: absolute; right: 18px; bottom: 12px; font-size: 1.25rem; line-height: 1; color: var(--accent-strong); opacity: 0; transition: opacity 150ms ease; pointer-events: none; }
.card.linked:hover, .card.linked:focus-within { transform: translateY(calc(var(--pop-lift-card) * -1)); box-shadow: var(--pop-shadow-card); border-color: var(--accent); }
.card.linked:hover::after, .card.linked:focus-within::after { opacity: 1; }
.card.linked:hover h3 a, .card.linked:focus-within h3 a { color: var(--accent-strong); }
.card.linked h3 a:focus-visible { outline: none; }
.card.linked h3 a:focus-visible::after { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .card.linked, .card.linked::after { transition: none; } .card.linked:hover, .card.linked:focus-within { transform: none; } }

/* ===== Global hover "pop": one shared rule set for everything clickable ===== */
:root { --pop: 150ms ease; --pop-lift: 2.4px; --pop-lift-card: 3.6px; --pop-scale: 1.036; --pop-scale-logo: 1.048; --pop-shadow: 0 7.2px 16.8px rgba(15, 42, 34, 0.216); --pop-shadow-card: 0 9.6px 24px rgba(15, 42, 34, 0.144); --pop-shadow-chip: 0 4.8px 12px rgba(15, 42, 34, 0.168); --pop-glow: 0 0 10px color-mix(in srgb, currentColor 29%, transparent); --pop-shade: linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)); }
a[href], button:not(:disabled), input[type=submit], [role=button] { cursor: pointer; }
button:focus-visible, input[type=submit]:focus-visible, [role=button]:focus-visible, .logo:focus-visible, .nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 1. buttons: lift, soft shadow, background 8% darker */
.btn, button, input[type=submit], [role=button] { transition: transform var(--pop), box-shadow var(--pop), background-color var(--pop), border-color var(--pop), color var(--pop); }
:is(.btn, button, input[type=submit], [role=button]):is(:hover, :focus-visible):not(:disabled) { transform: translateY(calc(var(--pop-lift) * -1)); box-shadow: var(--pop-shadow); background-image: var(--pop-shade); opacity: 1; }
:is(.btn, button, input[type=submit], [role=button]):active:not(:disabled) { transform: translateY(0); box-shadow: 0 1px 3px rgba(15, 42, 34, 0.18); }
.footer .tabs button[aria-selected="true"]:hover { background-image: none; }

/* 3. dose chips: lift 2px, slightly darker background */
.chip, .cats + .row .chip { transition: transform var(--pop), box-shadow var(--pop), background-color var(--pop); }
a.chip:is(:hover, :focus-visible), button.chip:is(:hover, :focus-visible), .cats + .row .chip:hover { transform: translateY(calc(var(--pop-lift) * -1)); box-shadow: var(--pop-shadow-chip); background-image: var(--pop-shade); }
a.chip:active, button.chip:active, .cats + .row .chip:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(15, 42, 34, 0.14); }

/* 2. cards and tiles: existing lift + accent border; pressed state and tiles share it */
.tile, .cat { transition: transform var(--pop), box-shadow var(--pop), border-color var(--pop), color var(--pop); }
.tile:is(:hover, :focus-visible) { transform: translateY(calc(var(--pop-lift-card) * -1)); box-shadow: var(--pop-shadow-card); border-color: var(--accent); }
.card.linked:active, .cat:active, .tile:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(15, 42, 34, 0.12); }

/* 4. text links (nav, footer, breadcrumbs, link lists, text links): accent colour, underline slides in from the left, scale(1.03) */
:is(.nav a, .footer li a, .netbar a, .crumbs a, .linklist a, a.textlink) { display: inline-block; text-decoration: none; transform-origin: left center; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--pop), color var(--pop), transform var(--pop), text-shadow var(--pop); }
:is(.nav a, .footer li a, .netbar a, .crumbs a, .linklist a, a.textlink):is(:hover, :focus-visible) { background-size: 100% 1px; transform: scale(var(--pop-scale)); text-shadow: var(--pop-glow); }
:is(.footer li a, .netbar a):is(:hover, :focus-visible) { color: var(--accent-dark); }
:is(.nav a, .footer li a, .netbar a, .crumbs a, .linklist a, a.textlink):active { transform: scale(1); }
/* inline links in running text stay inline (so wrapping is safe): accent colour and a heavier underline */
:is(p, li, dd, figcaption) a:not(.btn, .textlink, .chip, .card *):is(:hover, :focus-visible) { text-decoration-thickness: 2px; text-shadow: var(--pop-glow); }
.footer p a:is(:hover, :focus-visible) { color: var(--accent-dark); }

/* 5. logo: wordmark + TLD scale together */
.logo { transform-origin: left center; transition: transform var(--pop); }
.logo:is(:hover, :focus-visible) { transform: scale(var(--pop-scale-logo)); color: inherit; }
.logo:active { transform: scale(1); }

/* 7. reduced motion: no movement, colour change only */
@media (prefers-reduced-motion: reduce) {
  :is(.btn, button, input[type=submit], [role=button], .chip, .tile, .cat, .card.linked, .logo, .nav a, .footer li a, .netbar a, .crumbs a, .linklist a, a.textlink):is(:hover, :focus-visible, :active, :focus-within) { transform: none !important; box-shadow: none; text-shadow: none; }
}

/* Footer network bar: 1.5x bigger, per-domain pop on hover/focus */
.footer .network { gap: calc(var(--s-4) * 1.5) calc(var(--s-8) * 1.5); }
.footer .network > .mono { font-size: 18px; }
.footer .dots { gap: calc(var(--s-4) * 1.5); }
.footer .dots a { gap: 12px; font-size: 18px; transform-origin: center; transition: transform 150ms ease, color 150ms ease; }
.footer .dots .dot { width: 15px; height: 15px; transition: transform 150ms ease, box-shadow 150ms ease; }
.footer .dots a:is(:hover, :focus-visible) { transform: translateY(-3px) scale(1.12); color: #B8F2D0; }
.footer .dots a:is(:hover, :focus-visible) .dot { transform: scale(1.3); box-shadow: 0 0 12px var(--d, #B8F2D0); }
.footer .dots a:active { transform: translateY(0) scale(1); }
.footer .dots a:active .dot { transform: scale(1); box-shadow: none; }
@media (max-width: 639px) { .footer .network { gap: 12px 24px; } .footer .network > .mono { flex-basis: 100%; } .footer .dots { gap: 12px 24px; } }
@media (prefers-reduced-motion: reduce) { .footer .dots a:is(:hover, :focus-visible, :active), .footer .dots a:is(:hover, :focus-visible, :active) .dot { transform: none; box-shadow: none; } }

/* ganja.care footer only: hover stays white; pop = scale 1.3 from the left, lift 2px, white glow, white underline slides in */
html[data-theme="care"] .footer :is(li a, .dots a, p a) { transform-origin: left center; background: linear-gradient(#fff, #fff) 0 100% / 0 1px no-repeat; transition: transform 150ms ease, color 150ms ease, text-shadow 150ms ease, background-size 150ms ease; }
html[data-theme="care"] .footer :is(li a, .dots a, p a):is(:hover, :focus-visible) { color: #fff; transform: translateY(-2px) scale(1.3); text-shadow: 0 0 10px rgba(255, 255, 255, 0.35); background-size: 100% 1px; text-decoration: none; }
html[data-theme="care"] .footer :is(li a, .dots a, p a):active { transform: translateY(0) scale(1); text-shadow: none; }
@media (prefers-reduced-motion: reduce) { html[data-theme="care"] .footer :is(li a, .dots a, p a):is(:hover, :focus-visible, :active) { transform: none !important; text-shadow: none; } }

/* contact link in the footer + about pages */
a[hidden] { display: none !important; }
.footer li a.addr { display: block; margin-top: 2px; font-size: 0.875rem; overflow-wrap: anywhere; }
.footer li:has(> a[data-u]) { display: flex; flex-direction: column; align-items: flex-start; }