:root { --ground:#120d13; --surface:#1c1519; --line:#2e2429; --text:#f3ede8; --muted:#a89a9c; --accent:#ff7a30; --rose:#ffb096; --accent-soft:#2b1a12; }
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin:0; background:var(--ground); color:var(--text); font-family:"Source Sans 3","Helvetica Neue",Arial,sans-serif; font-size:17px; line-height:1.55; }
a { color:var(--rose); }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 24px; }
header { display:flex; align-items:center; justify-content:space-between; padding:22px 0; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); font-weight:600; font-size:.95rem; letter-spacing:.14em; text-transform:uppercase; }
.brand img { width:36px; height:36px; border-radius:50%; animation: ember-breathe 6s ease-in-out infinite; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.brand:hover img { transform: rotate(90deg); }
@keyframes ember-breathe { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255,122,48,0)); } 50% { filter: drop-shadow(0 0 10px rgba(255,122,48,.55)); } }
nav { display:flex; align-items:center; gap:22px; }  /* links and the Telegram button share one centre line */
nav a { color:var(--muted); text-decoration:none; font-size:.95rem; }
nav a:hover { color:var(--text); }
.hero { display:grid; grid-template-columns: 1.1fr .9fr; gap:40px; align-items:center; padding:48px 0 32px; }
h1 { font-family:"Source Sans 3","Helvetica Neue",Arial,sans-serif; font-weight:600; font-size:3rem; line-height:1.08; margin:0 0 16px; text-wrap:balance; letter-spacing:-.02em; font-weight:700; }
h1 em { font-style:normal; color:var(--accent); }
.lede { color:var(--muted); font-size:1.15rem; max-width:34em; margin:0 0 26px; }
.cta { display:inline-flex; align-items:center; gap:10px; background:var(--accent); color:#1a0e08; text-decoration:none; font-weight:600; padding:14px 22px; border-radius:8px; font-size:1.05rem; }
.cta:hover { filter:brightness(1.08); }
.sub { color:var(--muted); font-size:.9rem; margin-top:12px; }
.phone { margin:0; justify-self:end; width:min(300px, 100%); }
.phone img { width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:18px; border:1px solid var(--line); box-shadow:0 30px 60px -30px rgba(255,122,48,.45); }
.phone figcaption { color:var(--muted); font-size:.85rem; text-align:center; margin-top:10px; }
.trust { list-style:none; margin:8px 0 0; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); gap:14px; color:var(--muted); font-size:.92rem; }
.faq details { border-bottom:1px solid var(--line); padding:12px 0; }
.faq summary { cursor:pointer; font-weight:600; font-size:1.05rem; list-style:none; display:flex; justify-content:space-between; }
.faq summary::after { content:"+"; color:var(--accent); }
.faq details[open] summary::after { content:"–"; }
.faq p { color:var(--muted); margin:10px 0 0; max-width:66ch; }
h2 { font-family:"Source Sans 3","Helvetica Neue",Arial,sans-serif; font-weight:700; font-size:1.6rem; margin:56px 0 14px; letter-spacing:-.01em; }
.grid { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:20px; }
.card b { display:block; margin-bottom:6px; font-size:1.05rem; }
.card p { margin:0; color:var(--muted); font-size:.95rem; }
/* Showcase: a slow, continuous strip. Doubled track loops seamlessly; hover/touch pauses it; edges fade out. */
.showcase { overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.showcase .track { display:flex; gap:14px; width:max-content; }
.showcase img { width:190px; aspect-ratio:2/3; object-fit:cover; border-radius:10px; border:1px solid var(--line); flex:none; }
.showcase.rolling .track { animation: showcase-roll var(--dur, 48s) linear infinite; }
@media (hover:hover) { .showcase.rolling:hover .track { animation-play-state:paused; } }
.showcase.rolling.paused .track { animation-play-state:paused; }
@keyframes showcase-roll { from { transform:translateX(0); } to { transform:translateX(calc(-50% - 7px)); } }
@media (prefers-reduced-motion: reduce) { .showcase { overflow-x:auto; -webkit-mask-image:none; mask-image:none; } .showcase.rolling .track { animation:none; } }
@media (max-width:760px) { .showcase img { width:150px; } }
.note { border-left:3px solid var(--accent); padding:10px 16px; color:var(--muted); margin:22px 0; }
footer { border-top:1px solid var(--line); margin-top:64px; padding:26px 0 48px; color:var(--muted); font-size:.9rem; display:flex; flex-direction:column; gap:16px; }
.foot-rows { display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center; }
.foot-brand { font-size:.85rem; letter-spacing:.14em; color:var(--muted); }
.foot-brand img { width:28px; height:28px; }
footer a { color:var(--muted); }
.doc { max-width: 72ch; }
.doc blockquote { margin:14px 0; padding:12px 16px; border-left:3px solid var(--accent); background:var(--surface); border-radius:6px; }
.doc p { margin:12px 0; }
#gate[hidden] { display:none; }
#gate { position:fixed; inset:0; background:rgba(10,6,10,.92); display:flex; align-items:center; justify-content:center; z-index:9; padding:24px; }
#gate .box { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:28px; max-width:440px; text-align:center; }
#gate h3 { font-family:"Source Sans 3","Helvetica Neue",Arial,sans-serif; margin:0 0 10px; font-size:1.5rem; }
#gate p { color:var(--muted); margin:0 0 18px; }
#gate button { background:var(--accent); color:#1a0e08; border:0; font-weight:600; padding:12px 20px; border-radius:8px; font-size:1rem; cursor:pointer; margin:4px; }
#gate a.leave { display:inline-block; margin-top:10px; color:var(--muted); }
@media (max-width:760px) { .hero { grid-template-columns:1fr; } .phone { justify-self:center; } .trust { grid-template-columns:1fr 1fr; } .grid { grid-template-columns:1fr 1fr; } h1 { font-size:2.2rem; } nav { gap:14px; } }
@media (max-width:480px) { .grid { grid-template-columns:1fr; } }

.ic { display:inline-flex; width:22px; height:22px; margin-right:10px; vertical-align:-5px; color:var(--accent); flex:none; }
.ic svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.card .ic { display:flex; width:28px; height:28px; margin:0 0 12px; } .card .ic svg { width:28px; height:28px; }
.trust li { display:flex; align-items:flex-start; gap:2px; }
#gate h3 .ic { vertical-align:-4px; }

.steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; position:relative; }
.steps::before { content:""; position:absolute; left:8%; right:8%; top:18px; height:1px; background:var(--line); }
.steps li { position:relative; display:flex; flex-direction:column; gap:12px; }
@media (min-width:761px) { .steps { grid-template-rows:auto auto auto auto; } .steps li { display:grid; grid-template-rows:subgrid; grid-row:span 4; } }  /* mock cards differ in height: subgrid lines the headings up across the three steps */
.steps .num { width:36px; height:36px; border-radius:50%; background:var(--accent); color:#1a0e08; font-weight:600; display:flex; align-items:center; justify-content:center; font-family:"Source Sans 3","Helvetica Neue",Arial,sans-serif; font-size:1.1rem; position:relative; z-index:1; }
.steps b { font-size:1.1rem; margin-top:4px; }
.steps p { margin:0; color:var(--muted); font-size:.95rem; }
.screen { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:10px; min-height:150px; }
.screen .q { font-size:.82rem; color:var(--muted); letter-spacing:.02em; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chips span { font-size:.82rem; padding:6px 10px; border-radius:8px; background:var(--ground); border:1px solid var(--line); color:var(--text); }
.chips span.on { border-color:var(--accent); color:var(--accent); }
.chips.result span { background:var(--accent-soft, #2b1a12); }
.chips.pack span { width:100%; }
.chips.pack span.alt { border-color:var(--rose); }
.bar { height:8px; border-radius:4px; background:var(--ground); border:1px solid var(--line); overflow:hidden; }
.bar i { display:block; height:100%; background:var(--accent); }
@media (max-width:760px) { .steps { grid-template-columns:1fr; } .steps::before { display:none; } }

.more { margin:14px 0 0; } .more a { color:var(--accent); text-decoration:none; font-weight:600; } .more a:hover { text-decoration:underline; }

/* ---- motion (restrained; off for reduced-motion) ---- */
body { position:relative; }
body::before { content:""; position:fixed; inset:-20% -10% auto -10%; height:70vh; z-index:-1; pointer-events:none;
  background: radial-gradient(60% 60% at 20% 30%, rgba(255,122,48,.22), transparent 70%), radial-gradient(50% 50% at 80% 10%, rgba(150,30,40,.35), transparent 70%);
  animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.06); } }
.hero > div > * { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.hero > div > *:nth-child(2) { animation-delay:.08s } .hero > div > *:nth-child(3) { animation-delay:.16s } .hero > div > *:nth-child(4) { animation-delay:.24s }
@keyframes rise { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }
.phone { animation: rise .8s .2s cubic-bezier(.2,.7,.2,1) both; }
.phone img { animation: float 7s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); box-shadow:0 30px 60px -30px rgba(255,122,48,.45); } 50% { transform: translateY(-8px); box-shadow:0 44px 70px -30px rgba(255,122,48,.6); } }
.cta, .chips span, .card { transition: transform .18s ease, filter .18s ease, border-color .18s ease; }
.cta:hover { transform: translateY(-2px); }
.card:hover { transform: translateY(-3px); border-color: var(--rose); }
.chips span:hover { border-color: var(--accent); }
.bar i { animation: fill 6s ease-in-out infinite; }
@keyframes fill { 0% { width:6%; } 70% { width:78%; } 85% { width:92%; } 100% { width:92%; } }
@media (prefers-reduced-motion: reduce) { body::before, .hero > div > *, .phone, .phone img, .bar i, .brand img { animation:none !important; } .brand img { transition:none; } .cta, .card, .chips span { transition:none; } }
@media (max-width:760px) {
  .hero { text-align:center; padding-top:28px; }
  .hero .lede { margin-left:auto; margin-right:auto; }
  header { flex-direction:row; gap:12px; }  /* one row on phones: logo left, Channel pill right */
  .brand { font-size:.8rem; letter-spacing:.1em; }
  .trust { grid-template-columns:1fr; }
  footer { flex-direction:column; align-items:flex-start; gap:8px; }
}
@media (max-width:760px) { .grid { grid-template-columns:1fr; } }  /* three cards never split 2+1 on a phone */
.cta, .chips, .screen .q, .steps .num, .bar, #gate button, .faq summary::after { user-select:none; -webkit-user-select:none; }
::selection { background: var(--accent); color:#1a0e08; }
@media (max-width:760px) { footer { align-items:center; text-align:center; } .foot-rows { flex-direction:column; align-items:center; } footer > .foot-rows > span { justify-content:center; } }

.navcta { color:#1a0e08 !important; background:var(--accent); padding:8px 14px; border-radius:8px; font-weight:600; }
.sticky { position:fixed; left:16px; right:16px; bottom:16px; z-index:8; display:none; text-align:center; background:var(--accent); color:#1a0e08; text-decoration:none; font-weight:600; padding:14px; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.45); }
.sticky[hidden] { display:none !important; }
@media (max-width:760px) { .sticky { display:block; animation: rise .35s ease both; } .navcta { display:none; } }

.navcta { display:inline-flex; }
@media (max-width:760px) { .navcta { display:none; } }  /* phones: the hero button + sticky bar do the job; this must come after the desktop rule */
.sticky, .navcta { align-items:center; justify-content:center; gap:8px; }  /* .sticky keeps display:none on desktop; the phone rule below shows it */
.sticky svg, .navcta svg { flex:none; }
@media (max-width:760px) { .sticky { display:flex; } .sticky[hidden] { display:none !important; } }
@media (max-width:760px) { footer { padding-bottom: 96px; } }  /* room for the sticky button so it never sits on the footer links */

.doc .assume { color:var(--muted); font-size:.9rem; margin-top:28px; }

footer > span { display:inline-flex; align-items:center; flex-wrap:wrap; gap:0 6px; }  /* icons, links, dots and the email all share one centre line */
footer .tglink { display:inline-flex; align-items:center; gap:5px; }
footer .tglink .tg { flex:none; }
footer .dot { font-style:normal; opacity:.7; }

/* header channel link: small Telegram mark, greyscale at rest so only the bot button is blue; colour returns on hover */
nav .navlink { display:inline-flex; align-items:center; gap:6px; }
nav .navlink .tg { filter:grayscale(1); opacity:.7; transition: filter .25s, opacity .25s; }
nav .navlink:hover .tg { filter:none; opacity:1; }
footer .tglink .mail { color:var(--muted); }

/* Calls to action: a slow ember pulse on the hero and sticky buttons (every 4.5 s, soft), lift + brighten on hover for all three. */
.cta, .sticky { animation: cta-pulse 4.5s ease-out infinite; }
@keyframes cta-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,122,48,.55); } 45% { box-shadow: 0 0 0 12px rgba(255,122,48,0); } 100% { box-shadow: 0 0 0 0 rgba(255,122,48,0); } }
.sticky { animation: rise .35s ease both, cta-pulse 4.5s 1s ease-out infinite; }
.navcta { transition: transform .18s ease, filter .18s ease; }
.navcta:hover, .sticky:hover { transform: translateY(-2px); filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) { .cta, .sticky { animation:none !important; } .navcta, .sticky { transition:none; } }

/* The header sticks to the top on every screen, full-bleed: pull out to the viewport edges, then pad the content back into the centred column.
   Desktop carries the Telegram button in it; phones keep the bottom bar and a slimmer header. */
header { position:sticky; top:0; z-index:9; background:rgba(18,13,19,.82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); margin:0 calc(50% - 50vw); padding-left:calc(50vw - 50%); padding-right:calc(50vw - 50%); }
body { overflow-x:clip; }
@media (max-width:760px) { header { padding-top:12px; padding-bottom:12px; } }

/* Images and icons are not text: no selection highlight, no accidental drag-ghosts. */
img, svg, .phone, .showcase { user-select:none; -webkit-user-select:none; -webkit-user-drag:none; }
img { pointer-events:none; }
.brand img, .foot-brand img { pointer-events:auto; }

/* Phones: title, then today's image, then the pitch and the button. The text block dissolves into the grid so its
   children can be reordered around the picture. */
@media (max-width:760px) {
  .hero > div { display:contents; }
  .hero h1 { order:1; } .hero .phone { order:2; margin:6px auto 4px; } .hero .lede { order:3; } .hero .cta { order:4; justify-self:center; } .hero .sub { order:5; }
  nav .navlink { border:1px solid var(--line); border-radius:999px; padding:6px 12px; font-size:.9rem; }
  nav .navlink .tg { filter:none; opacity:1; }
}

/* Eyebrow above the title: a small ember label that frames the headline. */
.eyebrow { display:inline-flex; align-items:center; gap:8px; margin:0 0 14px; color:var(--accent); font-size:.8rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow svg { width:16px; height:16px; fill:var(--accent); flex:none; animation: ember-breathe 6s ease-in-out infinite; }
@media (max-width:760px) { .hero { padding-top:40px; } .eyebrow { order:0; justify-self:center; margin-bottom:10px; } }

/* Phones: tighter, more deliberate list layouts. */
@media (max-width:760px) {
  /* trust points: icon in a tinted disc, text centred on it */
  .trust { gap:10px; }
  .trust li { align-items:center; gap:12px; }
  .trust .ic { width:34px; height:34px; margin:0; border-radius:50%; background:rgba(255,122,48,.12); align-items:center; justify-content:center; vertical-align:middle; }
  .trust .ic svg { width:18px; height:18px; }
  /* how it works: the number badge sits on the corner of the mock card, no floating row */
  .steps::before { display:none; }
  .steps li { gap:10px; padding-top:14px; }
  .steps .num { position:absolute; top:0; left:12px; z-index:1; width:30px; height:30px; font-size:.9rem; box-shadow:0 0 0 4px var(--bg, #120d13); }
  /* rules: icon and heading share a line */
  .card { display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; padding:16px; }
  .card .ic { margin:0; grid-row:1; }
  .card b { grid-column:2; margin:0; }
  .card p { grid-column:1 / -1; margin-top:8px; }
}

/* Footer socials: round icon buttons, the text lives in the tooltip. Room for Instagram and friends later. */
.social { display:inline-flex; align-items:center; gap:10px; }
.sicon { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--muted); transition: transform .18s ease, border-color .18s ease, color .18s ease; }
.sicon svg { width:20px; height:20px; }
.sicon:hover { transform:translateY(-2px); border-color:var(--rose); color:var(--text); }
/* Brand mark before every section heading, matching the eyebrow spark. */
h2 { display:flex; align-items:center; gap:10px; }
h2::before { content:""; width:18px; height:18px; flex:none; background:url(/img/icon.png) center/contain no-repeat; opacity:.9; }
.steps .num { box-shadow:0 0 0 4px var(--ground); }

/* Labels under the social buttons so the two Telegram badges are distinguishable. */
.social { align-items:flex-start; gap:14px; }
.sicon { flex-direction:column; width:auto; height:auto; border:0; background:none; gap:5px; }
.sicon svg { width:36px; height:36px; padding:8px; border-radius:50%; border:1px solid var(--line); background:var(--surface); box-sizing:border-box; transition: border-color .18s ease; }
.sicon small { font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.sicon:hover svg { border-color:var(--rose); }

/* Hero picture: one image on desktop. On phones a loose strip: native momentum scrolling (fast flick = far), gentle snapping. */
.phone .slides { display:flex; overflow:hidden; border-radius:18px; }
.phone .slides img { flex:none; width:100%; }
.phone .dots { display:none; }
@media (max-width:760px) {
  .phone .slides { overflow-x:auto; gap:10px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior-x:contain; }
  .phone .slides::-webkit-scrollbar { display:none; }
  .phone .slides img { width:88%; scroll-snap-align:center; animation:none; pointer-events:auto; user-select:none; -webkit-user-select:none; -webkit-user-drag:none; }
  .phone .slides img:first-child { margin-left:6%; } .phone .slides img:last-child { margin-right:6%; }
  .phone .dots { display:flex; justify-content:center; gap:6px; margin-top:10px; }
  .phone .dots i { width:6px; height:6px; border-radius:50%; background:var(--line); }
  .phone .dots i.on { background:var(--accent); }
}

/* The strip starts empty (height reserved) and fades in once the live list has loaded: no placeholder flash. */
.showcase { min-height:285px; opacity:0; transition:opacity .4s ease; }
.showcase.ready { opacity:1; }
@media (max-width:760px) { .showcase { min-height:225px; } }

/* Preset gallery (/gallery): a grid of portrait cards, each a deep link into the bot for that preset. */
.gallery-page h1 { font-size:2.4rem; }
.gallery-page .lede { max-width:46em; }
.gallery { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.gcard { position:relative; display:block; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--surface); text-decoration:none; color:var(--text); transition:transform .25s ease, box-shadow .25s ease; }
.gcard img { display:block; width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; }  /* height:auto beats the width/height attributes, which only exist to stop layout shift */
.gcard .glabel { position:absolute; left:0; right:0; bottom:0; padding:28px 12px 12px; font-weight:600; font-size:.86rem; letter-spacing:.1em; text-transform:uppercase; background:linear-gradient(180deg, rgba(18,13,19,0) 0%, rgba(18,13,19,.85) 55%, rgba(18,13,19,.95) 100%); display:flex; flex-direction:column; gap:2px; }
.gcard .glabel small { font-weight:400; color:var(--rose); font-size:.78rem; letter-spacing:0; text-transform:none; opacity:0; transition:opacity .25s ease; }
.gcard .gemoji { margin-right:2px; }
@media (hover:hover) { .gcard:hover { transform:translateY(-3px); box-shadow:0 18px 40px -20px rgba(255,122,48,.5); } .gcard:hover .glabel small { opacity:1; } }
@media (hover:none) { .gcard .glabel small { opacity:1; } }
@media (max-width:760px) { .gallery { grid-template-columns:repeat(2, 1fr); gap:10px; } .gallery-page h1 { font-size:1.9rem; } .gcard .glabel { font-size:.9rem; padding:22px 9px 9px; } }
.gallery-page .more { margin-top:32px; text-align:center; }

.gallery-page .more .cta, .doc .cta { color:#1a0e08; }  /* .doc links are orange; on the orange button the text must stay dark */
.gallery-page { padding-top:36px; }  /* breathing room under the sticky header, same as the hero */
.doc.gallery-page { max-width:none; }  /* the reading-width cap is for terms/privacy; the grid wants the full page width */

.gtabs { display:flex; gap:8px; margin:26px 0 18px; }
.gtab { appearance:none; border:1px solid var(--line); background:var(--surface); color:var(--muted); font:inherit; font-weight:600; font-size:.95rem; padding:9px 22px; border-radius:999px; cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
.gtab:hover { color:var(--text); }
.gtab.on { background:var(--accent); border-color:var(--accent); color:#1a0e08; }
.gtab:focus-visible { outline:2px solid var(--rose); outline-offset:2px; }
.gallery[hidden] { display:none; }  /* the grid display rule would otherwise beat the hidden attribute */
@media (max-width:760px) { .gallery-page h1, .gallery-page .lede, .gallery-page .note { text-align:center; margin-left:auto; margin-right:auto; } .gtabs { justify-content:center; } .gallery-page .lede { max-width:36em; } }  /* phones centre their text like the front page */
.gallery-page .eyebrow { display:flex; margin-bottom:8px; }
@media (max-width:760px) { .gallery-page .eyebrow { justify-content:center; } }
.gcard .glook { position:absolute; top:10px; left:10px; padding:4px 9px; border-radius:999px; background:rgba(18,13,19,.72); color:var(--rose); font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; backdrop-filter:blur(4px); }  /* which look made this card */
.doc { padding-top:36px; }  /* every sub-page: room under the sticky header */
.doc h1 { font-size:2.4rem; }
@media (max-width:760px) { .doc h1 { font-size:1.9rem; } }
.doc blockquote > b:first-child { display:block; font-size:1.05rem; margin-bottom:6px; }
.doc ul { margin:6px 0 4px; padding-left:22px; }
.doc li { margin:4px 0; }
a, button, .gtab, .gcard, nav a, .sicon, .sticky, .navcta, .cta { -webkit-tap-highlight-color:transparent; }  /* no grey flash on tap */
nav a, .navcta, .cta, .sticky, .gtab, .gcard, .sicon, .gtabs, .glabel, .glook { user-select:none; -webkit-user-select:none; }  /* buttons never select their own text */
.gtab.x small { font-size:.7rem; font-weight:700; margin-left:6px; padding:1px 6px; border-radius:999px; border:1px solid currentColor; opacity:.8; }
.xnote { color:var(--muted); margin:0 0 14px; max-width:60em; }
#gal-x .glook { color:#fff; background:rgba(18,13,19,.82); border:1px solid rgba(255,122,48,.7); }  /* dark pill, orange edge: readable on skin tones */
/* Header: one destination (Gallery, outlined pill) and one action (the orange button). The channel lives in the footer. */
nav .navpill { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:999px; padding:8px 14px; color:var(--text); font-weight:600; font-size:.92rem; transition:border-color .2s, background .2s; }
nav .navpill svg { width:16px; height:16px; color:var(--accent); }
nav .navpill:hover { border-color:var(--accent); background:var(--accent-soft); }
.xhint { margin-top:6px; font-size:.92rem; color:var(--muted); }
@media (max-width:760px) { nav .navpill { padding:7px 12px; font-size:.88rem; } }
.gtab.x small { color:var(--accent); border-color:var(--accent); opacity:1; }  /* the 18+ badge is a warning: orange until the tab is selected */
.gtab.x.on small { color:#1a0e08; border-color:#1a0e08; }
.archive-page h2 { margin:34px 0 14px; font-size:1.3rem; }
.archive-page .gcard .glabel small { opacity:1; }
#consent { position:fixed; left:12px; right:12px; bottom:12px; z-index:8; max-width:760px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:0 18px 44px -16px rgba(0,0,0,.75); font-size:.92rem; }
#consent p { margin:0; flex:1 1 300px; color:var(--muted); } #consent a { color:var(--rose); }
#consent .cbtns { display:flex; gap:8px; margin-left:auto; }
#consent button { font:inherit; font-weight:600; min-width:112px; padding:10px 16px; border-radius:999px; border:1px solid var(--accent); background:transparent; color:var(--text); cursor:pointer; }
#consent button:hover { background:var(--accent-soft); }