/* ============================================================================
   components.css — nav, buttons, cards, pills, the device mock, footer chrome.
   ========================================================================= */

.ico-lg { width: 22px; height: 22px; flex: 0 0 auto }

/* ------------------------------------------------------------------ nav --- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .3s linear, background-color .3s linear;
}
.nav[data-stuck] { border-bottom-color: var(--line) }
.nav-in { width: var(--shell); margin-inline: auto; height: var(--nav-h); display: flex; align-items: center; gap: 10px }

.brand { display: flex; align-items: center; gap: 10px; min-width: 0 }
.brand img { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 4px 14px -4px rgba(0,0,0,.5) }
.brand b { display: block; font: 700 15px/1.15 var(--font); letter-spacing: -.02em; white-space: nowrap }
.brand span span { display: block; font: 500 10.5px/1.2 var(--font); color: var(--tx-3); letter-spacing: .02em }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px }

/* Ghost, never filled — the nav must not spend the page's only lime. */
.nav-cta {
  border: 1px solid var(--line); background: var(--surface-soft); color: var(--tx);
  border-radius: 12px; padding: 10px 16px; font: 700 13.5px/1 var(--font); white-space: nowrap;
  transition: transform .22s var(--ease-out), border-color .22s linear, background-color .22s linear;
}
.nav-cta:hover { border-color: var(--accent); background: var(--accent-tint); transform: translateY(-1px) }

.theme-btn {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-soft); color: var(--tx-2);
  display: grid; place-items: center;
  transition: border-color .22s linear, color .22s linear, background-color .22s linear;
}
.theme-btn:hover { border-color: var(--accent); color: var(--tx); background: var(--accent-tint) }
.theme-btn svg { width: 18px; height: 18px }
/* Show the icon for the theme you would switch TO. */
.theme-btn .i-to-light { display: none }
.theme-btn .i-to-dark  { display: block }
:root[data-theme="light"] .theme-btn .i-to-light,
:root:not([data-theme="dark"]) .theme-btn .i-to-light { display: block }
:root[data-theme="light"] .theme-btn .i-to-dark,
:root:not([data-theme="dark"]) .theme-btn .i-to-dark { display: none }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .i-to-light { display: none }
  :root:not([data-theme="light"]) .theme-btn .i-to-dark  { display: block }
}
@media (max-width: 560px) { .nav-cta { padding: 9px 13px; font-size: 12.5px } }

/* -------------------------------------------------------------- buttons --- */
/* Solid, never a gradient: gradient CTAs measure worse than solid high-contrast. */
.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 58px; border-radius: 15px;
  background: var(--cta); color: var(--cta-ink);
  font: 800 16.5px/1 var(--font); letter-spacing: -.012em;
  box-shadow: 0 14px 34px -14px var(--cta-glow);
  transition: transform .2s var(--ease-out), background-color .2s linear, box-shadow .2s linear;
}
.btn-primary:hover { background: var(--cta-hover); transform: translateY(-2px); box-shadow: 0 20px 40px -14px var(--cta-glow) }
.btn-primary:active { transform: translateY(0) }

/* Official "Get it on Google Play" badge, used unmodified. The asset bakes in
   Google's mandated clear space as transparent margin, so it must not be
   cropped, recoloured, or given padding of its own. */
.play-row { display: flex; align-items: center; gap: 14px; margin-top: 6px; flex-wrap: wrap }
.play-badge { display: inline-block; line-height: 0; transition: transform .2s var(--ease-out), opacity .2s linear }
.play-badge img { width: 200px; height: auto }
.play-badge:hover { transform: translateY(-1px); opacity: .9 }
.play-badge:focus-visible { border-radius: 10px }

.cta-micro { margin-top: 13px; font-size: 13px; color: var(--tx-3) }
.cta-micro b { color: var(--tx-2); font-weight: 600 }

.cta-inline { text-align: center; padding: clamp(32px, 4vw, 52px) 0 }
.cta-inline .btn-primary { max-width: 440px; margin-inline: auto }
.cta-inline .play-row { justify-content: center }

/* ---------------------------------------------------------------- cards --- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(20px, 2.2vw, 28px);
}
:root[data-theme="dark"] .card,
:root:not([data-theme="light"]) .card { background: linear-gradient(168deg, var(--surface) 0%, var(--bg-alt) 100%) }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .card { background: var(--surface) }
}
:root[data-theme="light"] .card { background: var(--surface) }

.card-h { display: flex; align-items: center; gap: 11px; margin-bottom: 13px }
.card p { color: var(--tx-2) }

.ico {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--accent-tint); border: 1px solid var(--accent-edge);
  color: var(--accent);
}
.ico svg { width: 20px; height: 20px }
.ico[data-tone="water"] { color: var(--water); background: color-mix(in srgb, var(--water) 10%, transparent); border-color: color-mix(in srgb, var(--water) 24%, transparent) }
.ico[data-tone="sun"]   { color: var(--sun);   background: color-mix(in srgb, var(--sun) 10%, transparent);   border-color: color-mix(in srgb, var(--sun) 24%, transparent) }
.ico[data-tone="ai"]    { color: var(--ai);    background: color-mix(in srgb, var(--ai) 10%, transparent);    border-color: color-mix(in srgb, var(--ai) 24%, transparent) }
.ico[data-tone="amber"] { color: var(--amber); background: color-mix(in srgb, var(--amber) 10%, transparent); border-color: color-mix(in srgb, var(--amber) 24%, transparent) }
.ico[data-tone="toxic"] { color: var(--toxic); background: var(--toxic-wash); border-color: var(--toxic-edge) }

/* Tilt is a pointer-device flourish only. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tilt { transition: transform .3s var(--ease), border-color .3s linear }
  .tilt:hover {
    transform: perspective(900px) rotateX(calc(var(--ty, 0) * -3.4deg)) rotateY(calc(var(--tx, 0) * 3.4deg)) translateY(-4px);
    border-color: var(--accent-edge);
  }
}

/* ---------------------------------------------------------------- chips --- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px }
.chips span {
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-soft);
  font: 600 11.5px/1 var(--font); color: var(--tx-2);
}

.trust { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; list-style: none }
.trust li {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 9px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-soft);
  font: 600 11.5px/1.3 var(--font); color: var(--tx-2);
}
.trust svg { width: 13px; height: 13px; color: var(--accent); flex: 0 0 auto }

/* -------------------------------------------------------------- verdicts --- */
.vpill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; border-radius: 999px;
  font: 800 8.5px/1 var(--font); letter-spacing: .04em;
}
.vpill svg { width: 9px; height: 9px }
.vpill[data-v="safe"] { background: var(--pill-safe-bg); color: var(--pill-safe-tx) }
.vpill[data-v="mild"] { background: var(--pill-mild-bg); color: var(--pill-mild-tx) }
.vpill[data-v="tox"]  { background: var(--pill-tox-bg);  color: var(--pill-tox-tx) }

/* ============================================================================
   DEVICE MOCK
   These are product screenshots, so they keep the app's own colours and do NOT
   follow the site theme. A screenshot that recolours with the page would be a
   lie about what the app looks like.
   ========================================================================= */
.dev-wrap { display: flex; justify-content: center; position: relative }
.dev {
  position: relative; flex: 0 0 auto;
  width: min(320px, 84vw); aspect-ratio: 9 / 19.2;
  border-radius: 46px; padding: 9px;
  background: linear-gradient(158deg, #3a4a41, #0d1712 38%, #2b3a32);
  box-shadow: var(--shadow-device), 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 1.5px rgba(255,255,255,.17);
}
.dev-notch { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 78px; height: 21px; border-radius: 12px; background: #050908; z-index: 12 }
.dev-scr { position: relative; width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: #F4F8F0; display: flex; flex-direction: column }
.dev-glare {
  position: absolute; inset: 0; z-index: 11; pointer-events: none; border-radius: 38px;
  background: linear-gradient(128deg, rgba(255,255,255,.12) 0%, transparent 26%, transparent 74%, rgba(255,255,255,.05) 100%);
}
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden }
.scr[data-on] { opacity: 1; visibility: visible }
@media (prefers-reduced-motion: no-preference) {
  .scr { transition: opacity .5s linear, transform .62s var(--ease), visibility .5s linear; transform: scale(1.025) }
  .scr[data-on] { transform: none }
}
.scr-dark { background: #080F0B; color: #EAF3EE }
.scr-lite { background: #F4F8F0; color: #132A20 }

.dev-dots { display: flex; gap: 6px; justify-content: center; margin-top: 20px }
.dev-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background-color .3s linear, transform .3s var(--ease) }
.dev-dots i[data-on] { background: var(--accent); transform: scale(1.35) }

/* status bar */
.sb { display: flex; justify-content: space-between; align-items: center; padding: 12px 19px 5px; font: 600 10.5px/1 var(--font); flex-shrink: 0; z-index: 10 }
.sb-i { display: flex; gap: 3px; align-items: center }
.sb-i b { width: 3px; border-radius: 1px; background: currentColor; display: block }
.sb-i b:nth-child(1) { height: 4px } .sb-i b:nth-child(2) { height: 6px }
.sb-i b:nth-child(3) { height: 8px } .sb-i b:nth-child(4) { height: 10px }
.sb-bat { width: 17px; height: 9px; border: 1.3px solid currentColor; border-radius: 2.5px; position: relative; margin-left: 3px }
.sb-bat::before { content: ''; position: absolute; inset: 1.4px; right: 5px; background: currentColor; border-radius: 1px }
.sb-bat::after  { content: ''; position: absolute; right: -3px; top: 2.4px; width: 1.6px; height: 4px; background: currentColor; border-radius: 0 1px 1px 0 }

/* camera screen */
.vf { flex: 1; position: relative; overflow: hidden; background: #0a1710 }
.vf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.vf::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5,11,7,.42), rgba(5,11,7,.12) 40%, rgba(5,11,7,.66)) }
/* Lift the overlays above the scrim WITHOUT touching their positioning — an
   earlier `position: relative` here collapsed the reticle onto one corner. */
.vf > *:not(img) { z-index: 2 }
.retic { position: absolute; left: 11%; right: 11%; top: 17%; bottom: 37% }
.retic i { position: absolute; width: 26px; height: 26px; border: 2.5px solid #D6F25B; filter: drop-shadow(0 0 7px rgba(214,242,91,.55)) }
.retic i:nth-child(1) { left: 0;  top: 0;    border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0 }
.retic i:nth-child(2) { right: 0; top: 0;    border-left: 0;  border-bottom: 0; border-radius: 0 10px 0 0 }
.retic i:nth-child(3) { left: 0;  bottom: 0; border-right: 0; border-top: 0;    border-radius: 0 0 0 10px }
.retic i:nth-child(4) { right: 0; bottom: 0; border-left: 0;  border-top: 0;    border-radius: 0 0 10px 0 }
.scanband {
  position: absolute; left: 11%; right: 11%; top: 17%; height: 34%;
  background: linear-gradient(180deg, transparent, rgba(52,211,153,.40) 60%, rgba(19,224,0,.85) 94%, transparent);
  mix-blend-mode: screen; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) { .scanband { animation: bandKF 2.5s cubic-bezier(.4,0,.2,1) infinite } }
@media (prefers-reduced-motion: reduce) { .scanband { display: none } }
@keyframes bandKF {
  0%   { transform: translateY(-115%); opacity: 0 }
  12%  { opacity: 1 }
  88%  { opacity: 1 }
  100% { transform: translateY(150%); opacity: 0 }
}
.cam-top { position: absolute; top: 0; left: 0; right: 0; padding: 9px 13px; display: flex; justify-content: space-between; align-items: center; z-index: 3 }
.gpill { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; background: rgba(5,11,7,.55); backdrop-filter: blur(9px); border: 1px solid rgba(255,255,255,.14); font: 600 9.5px/1 var(--font); color: #fff }
.gpill svg { width: 10px; height: 10px }
.cam-hint { position: absolute; left: 0; right: 0; bottom: 17%; text-align: center; font: 600 10px/1 var(--font); color: rgba(255,255,255,.88); z-index: 3; text-shadow: 0 1px 6px rgba(0,0,0,.6) }
.zooms { position: absolute; left: 0; right: 0; bottom: 25%; display: flex; justify-content: center; gap: 6px; z-index: 3 }
.zooms span { width: 27px; height: 27px; border-radius: 50%; background: rgba(5,11,7,.5); backdrop-filter: blur(6px); font: 700 9px/27px var(--font); text-align: center; color: #fff }
.zooms span[data-on] { background: #fff; color: #080F0B }
.cam-bar { height: 106px; flex-shrink: 0; background: #070d09; display: flex; align-items: center; justify-content: space-between; padding: 0 24px }
.shutter { width: 58px; height: 58px; border-radius: 50%; border: 3px solid #fff; display: grid; place-items: center }
.shutter i { width: 45px; height: 45px; border-radius: 50%; background: #D6F25B }
.cam-thumb { width: 35px; height: 35px; border-radius: 10px; overflow: hidden; border: 1.5px solid rgba(255,255,255,.45) }
.cam-thumb img { width: 100%; height: 100%; object-fit: cover }

/* analysing screen */
.ana { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 0 22px; background: radial-gradient(112% 68% at 50% 30%, #123021, #060d09 76%) }
.ana-ring { position: relative; width: 126px; height: 126px; flex: 0 0 auto }
.ana-ring svg { position: absolute; inset: 0; transform: rotate(-90deg) }
.ana-ring circle { fill: none; stroke-width: 5 }
.ana-ring .t { stroke: #1b2f23 }
.ana-ring .f { stroke: url(#gradRing); stroke-linecap: round; stroke-dasharray: 270; stroke-dashoffset: 262 }
@media (prefers-reduced-motion: no-preference) { .ana-ring .f { animation: ringKF 2.6s cubic-bezier(.35,0,.2,1) infinite } }
@keyframes ringKF { 0% { stroke-dashoffset: 262 } 66%, 100% { stroke-dashoffset: 34 } }
.ana-thumb { position: absolute; inset: 17px; border-radius: 15px; overflow: hidden }
.ana-thumb img { width: 100%; height: 100%; object-fit: cover }
.ana-t { font: 800 19px/1.2 var(--font); letter-spacing: -.02em }
.ana-steps { width: 100%; display: flex; flex-direction: column; gap: 8px }
.ana-step { display: flex; align-items: center; gap: 9px; font: 600 10.5px/1.3 var(--font); color: #6f8a7b }
.ana-step .k { width: 15px; height: 15px; border-radius: 50%; border: 1.7px solid #2a3d33; display: grid; place-items: center; flex: 0 0 auto }
.ana-step[data-done] { color: #c2dcce }
.ana-step[data-done] .k { background: #D6F25B; border-color: #D6F25B }
.ana-step[data-done] .k::after { content: ''; width: 4px; height: 7px; border: 2px solid #0B1F17; border-top: 0; border-left: 0; transform: rotate(43deg) translate(-.5px,-1px) }
.ana-step[data-act] .k { border-color: #D6F25B }
@media (prefers-reduced-motion: no-preference) { .ana-step[data-act] .k { animation: pulseKF 1.25s ease-in-out infinite } }
@keyframes pulseKF { 50% { box-shadow: 0 0 0 5px rgba(214,242,91,.16) } }

/* result screen */
.res-hero { height: 132px; flex-shrink: 0; position: relative; overflow: hidden; background: #1d4a2c }
.res-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.res-fade { position: absolute; inset: auto 0 0 0; height: 62px; background: linear-gradient(to top, #F4F8F0, transparent) }
.gback { position: absolute; top: 11px; left: 12px; width: 29px; height: 29px; border-radius: 50%; background: rgba(5,11,7,.5); backdrop-filter: blur(8px); display: grid; place-items: center; color: #fff; z-index: 3 }
.gback svg { width: 14px; height: 14px; transform: rotate(180deg) }
.conf { position: absolute; right: 12px; bottom: 13px; width: 54px; height: 54px; z-index: 3 }
.conf svg { position: absolute; inset: 0; transform: rotate(-90deg) }
.conf circle { fill: none; stroke-width: 4.6 }
.conf .t { stroke: rgba(255,255,255,.24) }
.conf .f { stroke: #D6F25B; stroke-linecap: round; stroke-dasharray: 144; stroke-dashoffset: 3 }
.conf b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 12.5px/1 var(--font); color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5) }
.res-body {
  flex: 1; overflow: hidden; padding-bottom: 6px; position: relative;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
}
.pd { padding: 0 14px }
.res-name { font: 800 18px/1.15 var(--font); letter-spacing: -.024em; margin-top: 2px }
.res-sci { font: 400 11px/1.35 var(--font-serif); font-style: italic; color: #65786C; margin-top: 2px }
.dev-safety { margin: 11px 14px 0; border-radius: 16px; padding: 11px 12px; background: #FBEBE7; border: 1px solid #F0D2C9 }
.dev-safety-h { display: flex; align-items: center; gap: 6px; font: 700 11px/1 var(--font); color: #9E1B14 }
.dev-safety-h svg { width: 12px; height: 12px }
.dev-safety-r { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-top: 1px solid rgba(11,31,23,.06) }
.dev-safety-r:nth-of-type(1) { border-top: 0; margin-top: 5px }
.dev-safety-n { font: 600 10.5px/1 var(--font); color: #2A3B31; display: flex; align-items: center; gap: 6px }
.dev-safety-n svg { width: 13px; height: 13px }
/* the mock's own pills, fixed to the app's light UI */
.dev-safety .vpill[data-v="mild"] { background: #FCF0D8; color: #6B4100 }
.dev-safety .vpill[data-v="tox"]  { background: #F8D9D2; color: #992F1A }
.care-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 14px 0 }
.care-c { background: #fff; border: 1px solid #E4EBDF; border-radius: 13px; padding: 8px 6px; text-align: center }
.care-c .care-l { display: flex; align-items: center; justify-content: center; gap: 3px; font: 600 8px/1.2 var(--font); color: #75887B; margin-bottom: 3px }
.care-c .care-l svg { width: 9px; height: 9px }
.care-c b { font: 700 9.5px/1.25 var(--font); color: #132A20 }
.care-more {
  margin: 7px 14px 0; padding: 9px 11px; border-radius: 13px;
  background: #EAF3E4; border: 1px solid #CFE2C6;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font: 600 9.5px/1.3 var(--font); color: #3B5343;
}
.care-more em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.care-more span { font: 800 9.5px/1 var(--font); color: #14432B; white-space: nowrap }
.res-act { display: flex; gap: 8px; padding: 10px 14px 13px; background: #fff; border-top: 1px solid #E4EBDF; flex-shrink: 0 }
.mini-o { flex: 1;    height: 39px; border-radius: 20px; border: 1.5px solid #C9DCCB; color: #14432B; display: grid; place-items: center; font: 700 11px/1 var(--font); background: #fff }
.mini-p { flex: 1.25; height: 39px; border-radius: 20px; background: #14713C; color: #fff; display: grid; place-items: center; font: 700 11px/1 var(--font) }
.dev-sec-t { font: 700 11px/1 var(--font); color: #132A20; margin: 12px 14px 7px }

/* callout labels beside the device */
.annot { position: relative }
.annot-lab {
  position: absolute; z-index: 14; display: flex; align-items: center; gap: 7px;
  padding: 7px 11px; border-radius: 11px;
  background: var(--surface); border: 1px solid var(--line);
  font: 700 11.5px/1.25 var(--font); white-space: nowrap; color: var(--tx);
  box-shadow: var(--shadow-lift);
}
.annot-lab i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: 0 0 auto }
.annot-lab::after { content: ''; position: absolute; top: 50%; width: 10px; height: 1px; background: var(--line) }
.annot-lab[data-side="l"] { right: calc(100% + 10px) }
.annot-lab[data-side="r"] { left:  calc(100% + 10px) }
.annot-lab[data-side="l"]::after { right: -10px }
.annot-lab[data-side="r"]::after { left:  -10px }
@media (max-width: 1279px) { .annot-lab { display: none } }

/* --------------------------------------------------------------- footer --- */
footer { border-top: 1px solid var(--line); padding: 40px 0 46px; background: var(--bg-deep) }
.foot { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap }
.foot nav a { font-size: 13.5px; color: var(--tx-3); transition: color .2s linear }
.foot nav a:hover { color: var(--tx) }
.legal { margin-top: 26px; font-size: 11.5px; line-height: 1.7; color: var(--tx-3); max-width: 74ch }
.legal a { text-decoration: underline; text-underline-offset: 2px }

/* Social. Icons are flat SVGs with a light fill baked in, because <img> cannot
   inherit currentColor and an external-SVG CSS mask is blocked under file://.
   In the light theme they are inverted with a filter instead. */
.social { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line) }
.social-lab { font: 700 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3) }
.social ul { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; list-style: none }
.social a {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface-soft); opacity: .68;
  transition: opacity .2s linear, border-color .2s linear, transform .2s var(--ease-out), background-color .2s linear;
}
.social a:hover { opacity: 1; border-color: var(--accent); background: var(--accent-tint); transform: translateY(-2px) }
.social .social-all { width: auto; padding: 0 14px; gap: 8px; grid-auto-flow: column; font: 700 12.5px/1 var(--font); color: var(--tx-2) }
.social .social-all:hover { color: var(--tx) }
:root[data-theme="light"] .social img,
:root:not([data-theme="dark"]) .social img { filter: invert(1) brightness(.24) }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .social img { filter: none }
}
@media (max-width: 520px) { .social { gap: 11px } .social-lab { width: 100% } }

/* ------------------------------------------------------- sticky CTA bar --- */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg-deep) 94%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 11px;
  transform: translateY(110%);
}
@media (prefers-reduced-motion: no-preference) { .sticky { transition: transform .24s var(--ease-out) } }
.sticky[data-show] { transform: none }
.sticky img { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto }
.sticky-tx { flex: 1; min-width: 0 }
.sticky-tx b, .sticky-tx span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sticky-tx b { font: 700 12.5px/1.2 var(--font) }
.sticky-tx span { font: 600 10.5px/1.3 var(--font); color: var(--tx-3); margin-top: 2px }
.sticky a.go { flex: 0 0 auto; background: var(--cta); color: var(--cta-ink); border-radius: 11px; padding: 12px 17px; font: 800 13.5px/1 var(--font) }
@media (min-width: 900px) { .sticky { display: none } }