/* tc.css: the Sentinels site look (2026-10-17 overhaul, modelled on TeleClaw's layout). Light by default, dark via
   the switch or the system setting. Every color is a token here, so both themes stay in step. */
:root {
  --bg: #ffffff; --bg2: #f6f8fb; --card: #f3f6fa; --card-b: #e3e8ef; --ink: #111827; --ink2: #4b5563; --mute: #6b7280;
  --line: #e5e7eb; --blue: #2f8cf1; --blue2: #1a73e8; --blue-soft: #dceeff; --glow: rgba(47,140,241,.35);
  --head: rgba(255,255,255,.92); --shadow: 0 10px 30px rgba(17,24,39,.08); --overlay: rgba(17,24,39,.35);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0b0d12; --bg2: #10131a; --card: #151922; --card-b: #252b37; --ink: #f3f4f6; --ink2: #c3c8d2; --mute: #8b93a1;
  --line: #222834; --blue: #4ea1ff; --blue2: #2f8cf1; --blue-soft: #14283f; --glow: rgba(78,161,255,.35);
  --head: rgba(16,19,26,.9); --shadow: 0 10px 30px rgba(0,0,0,.45); --overlay: rgba(0,0,0,.55);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0d12; --bg2: #10131a; --card: #151922; --card-b: #252b37; --ink: #f3f4f6; --ink2: #c3c8d2; --mute: #8b93a1;
    --line: #222834; --blue: #4ea1ff; --blue2: #2f8cf1; --blue-soft: #14283f; --glow: rgba(78,161,255,.35);
    --head: rgba(16,19,26,.9); --shadow: 0 10px 30px rgba(0,0,0,.45); --overlay: rgba(0,0,0,.55); color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 760px; margin: 0 auto; padding: 0 16px; }

/* header */
.tc-head { position: sticky; top: 10px; z-index: 50; margin: 10px 16px 0; }
.tc-bar { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; gap: 12px; background: var(--head); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 28px; padding: 10px 12px 10px 16px; box-shadow: var(--shadow); }
.tc-logo { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; font-size: 19px; white-space: nowrap; letter-spacing: -.01em; margin-right: auto; }
.tc-logo img { width: 36px; height: 36px; border-radius: 50%; background: #111; padding: 5px; object-fit: contain; }
.tc-links { display: none; gap: 22px; margin-right: 8px; }
.tc-links a { color: var(--ink2); font-size: 15px; font-weight: 500; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; border-radius: 999px; font-family: inherit;
  font-weight: 700; font-size: 17px; line-height: 1; padding: 16px 26px; color: #fff; background: linear-gradient(180deg, #5aaefc, var(--blue2));
  box-shadow: 0 8px 24px var(--glow); transition: transform .15s; }
.btn:hover { transform: translateY(-1px); }
.btn.sm { padding: 11px 18px; font-size: 16px; }
.btn.ghost { background: var(--card); color: var(--ink); box-shadow: none; border: 1px solid var(--line); }
.btn svg { width: 20px; height: 20px; }
.tc-burger { background: none; border: 0; color: var(--ink); width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; }
.tc-burger svg { width: 26px; height: 26px; }
.tc-menu { display: none; max-width: 1080px; margin: 10px auto 0; background: var(--bg); border: 1px solid var(--line); border-radius: 28px;
  padding: 18px 22px 22px; box-shadow: var(--shadow); max-height: calc(100vh - 120px); overflow-y: auto; }
.tc-head.open .tc-menu { display: block; }
.tc-shade { display: none; position: fixed; inset: 0; background: var(--overlay); backdrop-filter: blur(3px); z-index: 40; }
.tc-head.open + .tc-shade { display: block; }
.tc-menu > a, .tc-acc > button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 14px 0; color: var(--ink);
  font-size: 19px; font-weight: 500; background: none; border: 0; font-family: inherit; cursor: pointer; text-align: left; }
.tc-acc > button svg { width: 20px; height: 20px; transition: transform .2s; color: var(--mute); }
.tc-acc.open > button svg { transform: rotate(180deg); }
.tc-acc .tc-sub { display: none; padding: 2px 0 10px; }
.tc-acc.open .tc-sub { display: grid; gap: 4px 20px; grid-template-columns: 1fr; }
.tc-sub a { display: flex; gap: 12px; align-items: flex-start; padding: 9px 4px; color: var(--ink); border-radius: 12px; }
.tc-sub a:hover { background: var(--card); }
.tc-sub .ic { flex: none; }
.tc-sub b { display: block; font-weight: 600; font-size: 16px; color: var(--ink); }
.tc-sub b + span { color: var(--mute); font-size: 14px; line-height: 1.35; }
.tc-hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
.tc-theme { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg2); margin: 12px 0; font-size: 16px; color: var(--ink); }
.seg { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg button { border: 0; background: none; color: var(--mute); font: 600 14px/1 inherit; font-family: inherit; padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.seg button.on { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.tc-menu .btn { width: 100%; margin-top: 10px; }

/* blocks */
.ic { width: 52px; height: 52px; border-radius: 16px; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; }
.ic svg { width: 26px; height: 26px; }
.ic.sm { width: 40px; height: 40px; border-radius: 12px; } .ic.sm svg { width: 20px; height: 20px; }
.label { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.label svg { width: 20px; height: 20px; }
.crumb-pill { display: inline-block; border: 1px solid #bcdcff; background: var(--blue-soft); color: var(--blue); border-radius: 999px; padding: 8px 18px;
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
h1 { font-size: clamp(38px, 9vw, 64px); line-height: 1.06; letter-spacing: -.035em; margin: 18px 0; font-weight: 800; }
h2 { font-size: clamp(28px, 6vw, 42px); line-height: 1.12; letter-spacing: -.025em; margin: 12px 0 14px; font-weight: 800; }
h3 { font-size: 22px; letter-spacing: -.01em; margin: 0 0 8px; }
.lead { font-size: clamp(18px, 2.6vw, 21px); color: var(--ink2); margin: 0 auto; max-width: 640px; }
.center { text-align: center; }
section { padding: 72px 0; }
.hero { padding: 56px 0 40px; }
.hero .ctas { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 30px; }
.guide { position: relative; }
.guide-menu { display: none; position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 8px); background: var(--bg); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--shadow); padding: 8px; min-width: 260px; z-index: 5; text-align: left; }
.guide.open .guide-menu { display: block; }
.guide-menu a { display: block; padding: 10px 14px; color: var(--ink); border-radius: 10px; }
.guide-menu a:hover { background: var(--card); }
.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding: 28px 0; }
.stats > div + div { border-left: 1px solid var(--line); }
.stats b { display: block; font-size: clamp(28px, 6vw, 40px); line-height: 1.05; letter-spacing: -.02em; }
.stats span { color: var(--mute); font-size: 15px; }
.feature { display: grid; gap: 28px; align-items: center; }
.feature p { color: var(--ink2); font-size: 19px; }
.feature .art { border-radius: 28px; overflow: hidden; background: radial-gradient(circle at 50% 40%, var(--blue-soft), var(--bg2) 70%); padding: 28px; display: grid; place-items: center; min-height: 300px; }
.cards { display: grid; gap: 16px; }
.card { background: var(--card); border: 1px solid var(--card-b); border-radius: 26px; padding: 30px; }
.card p { color: var(--ink2); margin: 0; }
.card .ic { margin-bottom: 26px; }
.step { background: var(--bg); border: 1px solid var(--line); border-radius: 26px; padding: 30px; }
.step small { display: block; color: var(--blue); font-weight: 700; letter-spacing: .12em; margin: 22px 0 6px; }
.step p { color: var(--ink2); margin: 0; }
.show { background: linear-gradient(180deg, var(--bg2), var(--bg)); border: 1px solid #cfe5ff; border-radius: 32px; padding: 34px 28px 0; overflow: hidden; }
:root[data-theme="dark"] .show { border-color: #1d3550; }
.show p { color: var(--ink2); font-size: 19px; margin: 0 0 24px; }
.phone { width: min(300px, 80%); margin: 0 auto; border: 10px solid #111; border-bottom: 0; border-radius: 42px 42px 0 0; overflow: hidden; background: #000; box-shadow: 0 20px 40px rgba(0,0,0,.18); }
.phone img { width: 100%; }
.chat { max-width: 420px; margin: 0 auto 30px; background: var(--bg); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); text-align: left; }
.chat .top { display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.chat .top b { display: block; } .chat .top span { color: var(--mute); font-size: 14px; }
.chat .body { background: var(--bg2); padding: 16px; display: grid; gap: 10px; }
.msg { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; max-width: 85%; font-size: 15px; }
.msg i { font-style: normal; color: var(--blue); font-weight: 600; display: block; font-size: 14px; }
.msg.me { justify-self: end; }
.av3 { display: flex; } .av3 span { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -8px; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 700; }
.av3 span:first-child { margin-left: 0; }
.cta-card { border-radius: 32px; padding: 56px 24px; text-align: center; background: radial-gradient(ellipse at 50% 0%, #cfe7ff, var(--blue-soft) 45%, var(--bg2)); border: 1px solid #cfe5ff; }
:root[data-theme="dark"] .cta-card { background: radial-gradient(ellipse at 50% 0%, #1b3a5e, var(--blue-soft) 45%, var(--bg2)); border-color: #1d3550; }
.cta-card p { color: var(--ink2); font-size: 20px; max-width: 520px; margin: 0 auto 30px; }
.packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pack { background: var(--card); border: 1px solid var(--card-b); border-radius: 22px; padding: 22px 6px; text-align: center; }
.pack b { display: block; font-size: clamp(24px, 5vw, 34px); letter-spacing: -.02em; }
.pack span { color: var(--mute); font-size: 14px; }
.list-ic { display: grid; gap: 26px; }
.list-ic > div { display: flex; gap: 20px; align-items: flex-start; }
.list-ic svg { width: 30px; height: 30px; color: var(--blue); flex: none; margin-top: 2px; }
.list-ic b { display: block; font-size: 20px; margin-bottom: 4px; }
.list-ic p { margin: 0; color: var(--ink2); }
.faq details { border-bottom: 1px solid var(--line); padding: 22px 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; font-size: 21px; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 22px; height: 22px; color: var(--mute); flex: none; transition: transform .2s; margin-top: 4px; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { color: var(--ink2); margin: 12px 0 0; }
.crumbs { color: var(--mute); font-size: 15px; } .crumbs a { color: var(--mute); }
.tool { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 18px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); }
.tool .ic { background: var(--bg2); border: 1px solid var(--line); color: var(--blue); }
.tool h3 { margin: 0; font-size: 21px; }
.tool p, .tool small { grid-column: 2 / 4; margin: 0; color: var(--ink2); }
.tool small { color: var(--blue); font-weight: 600; font-size: 15px; } .tool small.soon { color: var(--mute); font-weight: 500; }
.tool .open { border-radius: 12px; padding: 12px 18px; background: var(--blue2); color: #fff; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }
.tool .open.off { background: var(--card); color: var(--mute); border: 1px solid var(--line); pointer-events: none; }
.tool .open svg { width: 16px; height: 16px; }
.toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 4px; background: var(--bg2); margin-bottom: 18px; }
.toggle button { border: 0; background: none; padding: 8px 18px; border-radius: 999px; font: 500 16px/1 inherit; font-family: inherit; color: var(--mute); cursor: pointer; }
.toggle button.on { background: var(--bg); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.12); font-weight: 600; }

/* footer */
.tc-foot { border-top: 1px solid var(--line); padding: 56px 0 30px; background: linear-gradient(180deg, var(--bg), var(--bg2)); }
.tc-foot .brand p { color: var(--ink2); margin: 14px 0; max-width: 420px; }
.tc-foot .social { display: flex; gap: 18px; margin-bottom: 36px; }
.tc-foot .social a { color: var(--ink2); } .tc-foot .social svg { width: 26px; height: 26px; }
.tc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 20px; }
.tc-cols h4 { color: var(--mute); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; }
.tc-cols a { display: flex; gap: 10px; align-items: center; color: var(--ink2); padding: 7px 0; font-size: 17px; }
.tc-cols a img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }
.tc-copy { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 22px; display: flex; justify-content: space-between; color: var(--mute); font-size: 15px; gap: 12px; flex-wrap: wrap; }

@media (min-width: 860px) {
  .tc-links { display: flex; }
  .feature { grid-template-columns: 1fr 1fr; gap: 56px; }
  .feature.flip .art { order: -1; }
  .cards.three { grid-template-columns: repeat(3, 1fr); }
  .cards.two { grid-template-columns: 1fr 1fr; }
  .tc-acc.open .tc-sub { grid-template-columns: 1fr 1fr; }
  .tc-cols { grid-template-columns: repeat(4, 1fr); }
  .tc-menu { max-width: 520px; margin-right: 0; }
}
@media (max-width: 520px) { .packs { grid-template-columns: repeat(2, 1fr); } .stats span { font-size: 13px; } }

/* docs (2026-10-17): sidebar on desktop, swipeable section chips on phones */
.docs2-grid { display: block; }
.docs2-nav { position: sticky; top: 88px; z-index: 5; display: flex; gap: 8px; overflow-x: auto; padding: 14px 0; margin: 0 -16px; padding-left: 16px; background: var(--bg); scrollbar-width: none; }
.docs2-nav p { display: none; }
.docs2-nav a { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--card-b); color: var(--ink2); font-size: 15px; font-weight: 500; }
.docs2-nav a.on { background: var(--blue-soft); color: var(--blue); border-color: transparent; }
.docs2-body { padding-bottom: 60px; }
.docs2-body section { padding: 34px 0 10px; border-bottom: 1px solid var(--line); scroll-margin-top: 150px; }
.docs2-body section:last-child { border-bottom: 0; }
.docs2-body h1 { font-size: clamp(36px, 8vw, 54px); }
.docs2-body h1 em, .docs2-body h2 em { font-style: normal; color: var(--blue); }
.docs2-body h2 { font-size: clamp(26px, 5vw, 34px); }
.docs2-body h3 { font-size: 20px; margin-top: 26px; }
.docs2-body p, .docs2-body li { color: var(--ink2); }
.docs2-body .lead { margin: 0 0 18px; max-width: none; }
.docs2-body .note { background: var(--blue-soft); border-radius: 18px; padding: 16px 20px; color: var(--ink); margin: 18px 0; }
.docs2-body table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 18px 0; border: 1px solid var(--card-b); border-radius: 16px; overflow: hidden; font-size: 15px; display: block; overflow-x: auto; }
.docs2-body th, .docs2-body td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.docs2-body th { background: var(--card); color: var(--ink); font-weight: 700; }
.docs2-body tr:last-child td { border-bottom: 0; }
.docs2-body code, .docs2-body kbd { background: var(--card); border: 1px solid var(--card-b); border-radius: 7px; padding: 1px 6px; font-size: .92em; }
.docs2-body ol, .docs2-body ul { padding-left: 22px; }
@media (min-width: 860px) {
  .docs2-grid { display: grid; grid-template-columns: 220px 1fr; gap: 56px; }
  .docs2-nav { flex-direction: column; overflow: visible; margin: 0; padding: 30px 0 0; align-self: start; top: 100px; gap: 2px; background: none; }
  .docs2-nav p { display: block; color: var(--mute); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; margin: 18px 0 6px; }
  .docs2-nav a { background: none; border: 0; padding: 6px 12px; border-radius: 10px; }
  .docs2-body section { scroll-margin-top: 110px; }
}

/* 2026-10-17 fixes: menu buttons keep their own shape (the plain menu-link rule was overriding them), no dark
   edges, and the burger stays centred even on pages with their own button styles (Pixie). */
.tc-menu > a.btn { display: flex; justify-content: center; padding: 16px 26px; font-size: 17px; font-weight: 700; color: #fff; width: 100%; margin-top: 10px; box-sizing: border-box; }
.tc-menu > a.btn.ghost { color: var(--ink); }
.tc-head .btn, .tc-menu .btn { border: 0; outline: none; -webkit-appearance: none; appearance: none; background-clip: padding-box; text-decoration: none; }
.tc-head .btn.ghost { border: 1px solid var(--line); }
.tc-bar { align-items: center; min-height: 64px; box-sizing: border-box; }
.tc-burger { flex: none; margin: 0; padding: 0; line-height: 0; border: 0; border-radius: 12px; background: transparent; box-shadow: none; -webkit-appearance: none; appearance: none; align-self: center; }
.tc-burger svg { display: block; }
.tc-bar > .btn { flex: none; white-space: nowrap; }

/* 2026-10-17 (2): the menu-link rule's "background: none" beat the button's blue, so Open in Telegram showed white on
   white in light mode. Locked here. Header: title, Open and the close/menu icon sit evenly on small phones. */
.tc-menu > a.btn { background: linear-gradient(180deg, #5aaefc, #1a73e8) !important; color: #fff !important; }
.tc-menu > a.btn.ghost { background: var(--card) !important; color: var(--ink) !important; }
.tc-bar { gap: 10px; padding: 10px 10px 10px 14px; }
.tc-logo { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tc-bar > .btn.sm { margin-left: auto; padding: 10px 16px; }
@media (max-width: 400px) { .tc-logo { font-size: 17px; gap: 8px; } .tc-logo img { width: 32px; height: 32px; } .tc-bar > .btn.sm { padding: 9px 14px; font-size: 15px; } }

.tc-group { grid-column: 1 / -1; margin: 10px 4px 2px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }

/* ── TOP MENU (2026-10-22): Dashboard · Wallet · Pixie · Campaigns · King Spear · Nexis · Jinx. Each button's sub-menu
   sits folded up behind it and slides down when tapped; both rows scroll sideways. ── */
.tc-navbox { max-width: 1080px; margin: 8px auto 0; }
.tc-nav { background: var(--head); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: 6px; position: relative; z-index: 2; }
.tc-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.tc-chips::-webkit-scrollbar, .tc-subrow::-webkit-scrollbar { display: none; }
.tc-chip { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 6px; border-radius: 999px;
  border: 1px solid transparent; background: transparent; color: var(--ink2); font: 600 15px/1 inherit; font-family: inherit; cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s; }
.tc-chip .ci { width: 28px; height: 28px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; }
.tc-chip .ci svg { width: 16px; height: 16px; }
.tc-chip img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg); transition: transform .25s; }
.tc-chip em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); border: 1px solid var(--line); border-radius: 999px; padding: 2px 6px; }
.tc-chip.soon { opacity: .75; }
.tc-chip.here { color: var(--ink); }
.tc-chip.here .ci, .tc-chip.here img { box-shadow: 0 0 0 2px var(--blue); }
.tc-chip.on { background: var(--blue-soft); color: var(--blue); border-color: transparent; }
.tc-chip.on img { transform: scale(1.08); }
.tc-subs { position: relative; z-index: 1; margin-top: -18px; }
.tc-subwrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.2,.8,.2,1); }
.tc-subwrap.open { grid-template-rows: 1fr; }
.tc-subwrap > .tc-subrow { min-height: 0; overflow: hidden; }
.tc-subrow { display: flex; gap: 8px; overflow-x: auto !important; scrollbar-width: none; scroll-snap-type: x proximity; background: var(--bg); border: 1px solid var(--line);
  border-top: 0; border-radius: 0 0 22px 22px; box-shadow: var(--shadow); padding: 0 8px; margin: 0 10px;
  transform: translateY(-16px); opacity: 0; transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .25s, padding .38s; }
.tc-subwrap.open .tc-subrow { transform: none; opacity: 1; padding: 28px 8px 10px; }
.tc-subwrap:not(.open) .tc-subrow { border-width: 0; box-shadow: none; }
.tc-si { flex: none; scroll-snap-align: start; display: flex; gap: 10px; align-items: center; width: 210px; padding: 10px 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--card-b); color: var(--ink); }
.tc-si:hover { border-color: var(--blue); }
.tc-si b { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; }
.tc-si b + span { display: block; color: var(--mute); font-size: 13px; line-height: 1.3; }
.tc-si .ic { flex: none; }
.tc-si.off { opacity: .55; cursor: default; }
.tc-si.off:hover { border-color: var(--card-b); }
@media (min-width: 860px) { .tc-chips { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .tc-subwrap, .tc-subrow { transition: none; } }

/* signed-in header button: icon + one word, icon only on small phones (2026-10-22) */
.tc-tgbtn { padding: 10px 14px !important; }
@media (max-width: 420px) { .tc-tgbtn span { display: none; } .tc-tgbtn { padding: 10px 12px !important; } }

/* Smaller type on every page except the homepage (2026-10-22, Stephen: "the text on this other side is too big") */
body:not(.home) h1 { font-size: clamp(28px, 6vw, 40px); }
body:not(.home) h2 { font-size: clamp(22px, 4.6vw, 30px); }
body:not(.home) .lead { font-size: 17px; }
body:not(.home) section { padding: 48px 0; }
body:not(.home) .hero { padding: 34px 0 24px; }

/* ── MENU, LOCKED (2026-10-22, Stephen: "use the code for the one that is stable… across all pages" and "the sub menu
   needs to be the same size and the same measurements as the main one"). The chip font was an invalid shorthand, so
   the row grew 10px taller than its box and scrolled up and down on phones. Fixed sizes, no vertical scroll, and the
   sub-menu items are the same 40px pills as the main row (icon + name). ── */
.tc-chips { height: 40px; overflow-y: hidden !important; align-items: center; overscroll-behavior: contain; touch-action: pan-x; }
.tc-chip { height: 40px; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; padding: 0 12px 0 6px; text-decoration: none; }
.tc-chip > span:not(.ci) { line-height: 1; }
.tc-subrow { gap: 6px !important; overflow-y: hidden !important; touch-action: pan-x; overscroll-behavior: contain; margin: 0 10px !important; }
.tc-subwrap.open .tc-subrow { padding: 24px 6px 6px !important; }
.tc-si { width: auto !important; height: 40px; padding: 0 12px 0 6px !important; gap: 8px !important; border-radius: 999px !important; flex: none; }
.tc-si .ic, .tc-si .ic.sm { width: 28px !important; height: 28px !important; border-radius: 50% !important; }
.tc-si .ic svg { width: 16px !important; height: 16px !important; }
.tc-si b { font-size: 14px !important; font-weight: 600; white-space: nowrap; line-height: 1; }
.tc-si b + span { display: none !important; }

.tc-chip { display: inline-flex !important; flex-wrap: nowrap !important; align-items: center !important; white-space: nowrap !important; overflow: hidden; }
.tc-chip > * { flex: none; }
.tc-chip em { font-size: 9px; padding: 2px 5px; }

/* ── VERTICAL MENU (2026-10-22, Stephen: "a vertical drop down… it pops down one by one, one under the next… graceful,
   in one single motion"). The panel opens under the chip row and each item drops in a beat after the one above. ── */
.tc-subrow { flex-direction: column !important; overflow: hidden !important; gap: 4px !important; scroll-snap-type: none !important; touch-action: auto !important; }
.tc-subwrap.open .tc-subrow { padding: 26px 8px 8px !important; }
.tc-si { width: 100% !important; height: 44px; border-radius: 14px !important; background: transparent !important; border: 1px solid transparent !important;
  opacity: 0; transform: translateY(-10px); transition: opacity .28s ease, transform .38s cubic-bezier(.2,.8,.2,1), background .15s; transition-delay: 0s; }
.tc-subwrap.open .tc-si { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 70ms + 60ms); }
.tc-si:hover { background: var(--card) !important; }
.tc-si.cur { background: var(--blue-soft) !important; }
.tc-si.cur b { color: var(--blue); }
.tc-si b { font-size: 15px !important; }
.tc-instant .tc-subwrap, .tc-instant .tc-subrow, .tc-instant .tc-si { transition: none !important; }
@media (min-width: 860px) { .tc-subrow { max-width: 420px; margin: 0 auto !important; } }
@media (prefers-reduced-motion: reduce) { .tc-si { transition: none !important; } }

/* swipe hint on the top menu (2026-10-22) */
.tc-nav { position: relative; }
.tc-swipe { position: absolute; top: 50%; right: 18px; width: 30px; height: 30px; margin-top: -10px; color: var(--ink); opacity: 0; pointer-events: none; z-index: 3;
  animation: tcswipe 2.6s ease-in-out 0.8s infinite; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.tc-swipe svg { width: 100%; height: 100%; }
.tc-swipe.gone { animation: none; opacity: 0; transition: opacity .3s; }
@keyframes tcswipe { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: .35; } 70% { transform: translateX(-120px); opacity: .35; } 85%, 100% { transform: translateX(-140px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tc-swipe { display: none; } }

/* compact footer (2026-10-22) */
.tc-foot { padding: 28px 0 18px; }
.tc-foot .brand p { margin: 8px 0; font-size: 15px; }
.tc-foot .social { margin-bottom: 18px; gap: 14px; } .tc-foot .social svg { width: 22px; height: 22px; }
.tc-cols { grid-template-columns: repeat(3, 1fr) !important; gap: 16px 12px; }
.tc-cols h4 { margin: 0 0 6px; font-size: 12px; }
.tc-cols a { padding: 3px 0; font-size: 15px; }
.tc-copy { margin-top: 18px; padding-top: 12px; font-size: 13px; }

/* Docs: the section links sit below the two-row header now (2026-10-22) */
.docs2-nav { top: 146px !important; z-index: 20 !important; }
.docs2-body section { scroll-margin-top: 220px !important; }
@media (min-width: 860px) { .docs2-nav { top: 160px !important; } .docs2-body section { scroll-margin-top: 170px !important; } }