/* Trovelo Help: shared by every page under /trovelo/help/. */
@font-face {
  font-family: 'Gasoek One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/gasoek-one-normal-400-latin.woff2) format('woff2');
}

:root {
  color-scheme: light;
  --ink: #141414;
  --ink-2: #3A4150;
  --muted: #5A6070;
  --faint: #9AA0AE;
  --line: #E6E8EF;
  --line-2: #F0F1F5;
  --soft: #F6F7FA;
  --seg: #F1F2F6;
  --link: #1F63E0;
  --blue: #2774FD;
  --yellow: #FDC82D;
  --coral: #E23136;
  --coral-ink: #C0242A;
  --mark: #D12A30;
  --stage: #FFF1F1;
  --lavender: #F1EDFF;
  --round: ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Gasoek One', ui-rounded, system-ui, sans-serif;
  --gutter: 32px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 104px; }
body { margin: 0; background: #FFFFFF; color: var(--ink); font-family: var(--round); font-weight: 600; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: #FFFFFF; padding: 10px 16px; border-radius: 999px; }
.skip:focus { left: 16px; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* SF Symbols, one strip used as a mask: --p picks the symbol. */
.sf { display: inline-block; flex-shrink: 0; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: url(/images/trovelo/help/sf.png) no-repeat; mask: url(/images/trovelo/help/sf.png) no-repeat; -webkit-mask-size: 4600% 100%; mask-size: 4600% 100%; -webkit-mask-position: var(--p) 0; mask-position: var(--p) 0; }
.i-search{--p:0%}.i-sparkles{--p:2.2222%}.i-board{--p:4.4444%}.i-map{--p:6.6667%}.i-plane{--p:8.8889%}.i-card{--p:11.1111%}.i-people{--p:13.3333%}.i-weather{--p:15.5556%}.i-compass{--p:17.7778%}.i-globe{--p:20%}.i-watch{--p:22.2222%}.i-mac{--p:24.4444%}.i-cloud{--p:26.6667%}.i-chev{--p:28.8889%}.i-chevdown{--p:31.1111%}.i-iphone{--p:33.3333%}.i-ipad{--p:35.5556%}.i-up{--p:37.7778%}.i-down{--p:40%}.i-bulb{--p:42.2222%}.i-clock{--p:44.4444%}.i-arrow{--p:46.6667%}.i-mail{--p:48.8889%}.i-chat{--p:51.1111%}.i-plus{--p:53.3333%}.i-x{--p:55.5556%}.i-check{--p:57.7778%}.i-tray{--p:60%}.i-cmd{--p:62.2222%}.i-return{--p:64.4444%}.i-updown{--p:66.6667%}.i-bookmark{--p:68.8889%}.i-suitcase{--p:71.1111%}.i-ticket{--p:73.3333%}.i-cal{--p:75.5556%}.i-link{--p:77.7778%}.i-info{--p:80%}.i-tap{--p:82.2222%}.i-photo{--p:84.4444%}.i-star{--p:86.6667%}.i-undo{--p:88.8889%}.i-lock{--p:91.1111%}.i-doc{--p:93.3333%}.i-back{--p:95.5556%}.i-list{--p:97.7778%}.i-play{--p:100%}

/* ── Under the site's menu (/site.css), which floats over the page ── */
body { padding-top: 84px; }
.doc-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mini-search { display: flex; align-items: center; gap: 10px; width: 300px; height: 46px; padding: 0 16px; border-radius: 23px; background: var(--soft); color: var(--muted); }
.mini-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 15px; font-weight: 600; color: var(--ink); }
.mini-search input::placeholder { color: var(--muted); }
.mini-search:focus-within { box-shadow: 0 0 0 3px rgba(39,116,253,0.35); }

/* ── Help home: hero ────────────────────────────────────── */
.home { background: #FFFFFF linear-gradient(180deg, #E9E3FF 0%, #F2EFFF 60%, #FFFFFF 100%) no-repeat 0 0 / 100% 820px; }
.hero { display: flex; align-items: flex-end; gap: 32px; padding-top: 36px; padding-bottom: 8px; }
.hero-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.eyebrow { font-size: 14px; font-weight: 800; letter-spacing: 0.14em; color: #5B3FB0; }
.hero h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(92px, 13vw, 152px); line-height: 0.84; color: var(--blue); }
.hero .lede { margin: 0; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; font-weight: 800; }
.hero-mascot { flex: 0 0 280px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bubble { align-self: flex-start; background: #FFFFFF; border-radius: 26px 26px 26px 8px; padding: 14px 20px; font-size: 19px; font-weight: 800; box-shadow: 0 10px 30px rgba(70,50,160,0.12); }

.search { position: relative; max-width: 640px; margin-top: 8px; }
.search-box { display: flex; align-items: center; gap: 14px; height: 72px; padding: 0 12px 0 26px; background: #FFFFFF; border-radius: 36px; box-shadow: 0 1px 0 rgba(20,20,20,0.04), 0 14px 44px rgba(70,50,160,0.16); }
.search-box:focus-within { box-shadow: 0 0 0 3px rgba(39,116,253,0.45), 0 14px 44px rgba(70,50,160,0.16); }
.search-box .sf { width: 24px; height: 24px; }
.search-box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font-size: 20px; font-weight: 600; }
.search-box input::placeholder { color: var(--muted); }
.search-box input::-webkit-search-cancel-button { display: none; }
.kbd { display: inline-flex; align-items: center; gap: 3px; padding: 8px 12px; border-radius: 14px; background: var(--seg); color: #4A5060; font-size: 15px; font-weight: 800; }
.kbd .sf { width: 14px; height: 14px; }
.results { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 20; background: #FFFFFF; border-radius: 26px; box-shadow: 0 24px 60px rgba(30,20,80,0.18), 0 0 0 1px rgba(20,20,40,0.05); padding: 8px; max-height: min(460px, 60vh); overflow-y: auto; }
.results[hidden] { display: none; }
.res { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 18px; color: var(--ink); }
a.res:hover, a.res:focus-visible, a.res.on { background: var(--soft); text-decoration: none; outline: none; }
.res .tile { width: 40px; height: 40px; border-radius: 12px; }
.res .tile .sf { width: 20px; height: 20px; }
.res-t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.res-t b { font-size: 16.5px; font-weight: 800; }
.res-t small { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.res.soon { opacity: 0.62; }
.res-empty { padding: 18px 16px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.res-empty span { color: var(--muted); font-weight: 600; }

.jump { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jump > span { font-size: 15px; font-weight: 700; color: #4A5060; }
.chip { padding: 9px 15px; border-radius: 999px; background: rgba(255,255,255,0.7); border: 1px solid rgba(91,63,176,0.16); color: var(--ink); font-size: 15px; font-weight: 700; }
.chip:hover { background: #FFFFFF; text-decoration: none; }

/* ── Help home: sections ────────────────────────────────── */
.sec { padding-top: 72px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.sec-head h2 { margin: 0; font-size: 34px; font-weight: 800; }
.sec-head p { margin: 0; font-size: 17px; font-weight: 600; color: #4A5060; }
.starts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 26px; }
.tcard { display: flex; flex-direction: column; border-radius: 30px; overflow: hidden; background: #FFFFFF; border: 1px solid var(--line); color: var(--ink); transition: transform .2s ease, box-shadow .2s ease; }
a.tcard:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 18px 40px rgba(20,20,60,0.10); }
.tcard .shot { height: 300px; padding-top: 32px; display: flex; justify-content: center; overflow: hidden; }
.tcard .body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.kick { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; }
.tcard .title { font-size: 23px; font-weight: 800; line-height: 1.2; }
.meta { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--muted); }
.meta .sf { width: 15px; height: 15px; }
.soon-tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--seg); color: #4A5060; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; }
.tcard.soon .shot { filter: saturate(0.85); }

.topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 26px; }
.topic { background: #FFFFFF; border: 1px solid var(--line); border-radius: 26px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 24px; }
.topic:target { border-color: var(--ac); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 22%, transparent); }
.topic-head { display: flex; align-items: center; gap: 14px; }
.tile { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--tile); color: var(--ac); }
.tile .sf { width: 28px; height: 28px; }
.topic h3 { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.2; }
.topic ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.topic li { display: flex; gap: 9px; align-items: flex-start; font-size: 15.5px; font-weight: 600; line-height: 1.3; color: #333A48; }
.topic li .sf { width: 15px; height: 15px; margin-top: 2px; color: var(--faint); }
.topic li a { color: var(--link); font-weight: 800; }
.topic li.soon { color: #6A7080; }
.topic li .soon-tag { margin-left: auto; padding: 2px 7px; font-size: 11px; }

.news { border-radius: 30px; padding: 28px; background: #FFF8E1; margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.new { display: flex; gap: 16px; align-items: center; }
.new img { width: 92px; height: 120px; border-radius: 18px; object-fit: cover; flex-shrink: 0; }
.new div { display: flex; flex-direction: column; gap: 6px; }
.new .tag { align-self: flex-start; padding: 3px 9px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; }
.new b { font-size: 19px; font-weight: 800; }
.new p { margin: 0; font-size: 15.5px; font-weight: 500; line-height: 1.4; color: #4A5060; }

.ask { margin-top: 72px; margin-bottom: 96px; border-radius: 36px; background: var(--lavender); padding: 36px 44px; display: flex; align-items: center; gap: 36px; scroll-margin-top: 24px; }
.ask .mascot { flex: 0 0 auto; width: 170px; }
.ask-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; }
.ask h2 { margin: 0; font-size: 36px; font-weight: 800; }
.ask p { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--ink-2); max-width: 600px; }
.ask-btns { flex: 0 0 260px; display: flex; flex-direction: column; gap: 12px; }
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 17px 24px; border-radius: 999px; font-size: 17px; font-weight: 800; border: 1px solid transparent; }
.btn:hover { text-decoration: none; }
.btn .sf { width: 20px; height: 20px; }
.btn-blue { background: var(--link); color: #FFFFFF; }
.btn-blue:hover { background: #1550BF; }
.btn-white { background: #FFFFFF; border-color: #D9D3F5; color: var(--ink); }
.btn-white:hover { border-color: #B9AEEB; }

/* ── iPhone with a real screen ──────────────────────────────
   The frame is 450 × 920 pt with the screen at (24, 23), 402 × 874.
   --w sets the drawn width; --c how much of the frame shows (pt).
   Marks are placed in the screenshot's own points (--x, --y, --mw, --mh). */
.ph { --w: 300px; --c: 920; --u: calc(var(--w) / 450); --ac: var(--mark); position: relative; width: var(--w); height: calc(var(--c) * var(--u)); overflow: hidden; flex-shrink: 0; margin: 0; }
.ph .scr { position: absolute; left: calc(24 * var(--u)); top: calc(23 * var(--u)); width: calc(402 * var(--u)); height: calc(874 * var(--u)); border-radius: calc(58 * var(--u)); overflow: hidden; background: #000000; }
.ph .scr img { width: 100%; height: 100%; }
.ph .frame { position: absolute; left: 0; top: 0; width: var(--w); height: calc(920 * var(--u)); max-width: none; pointer-events: none; }
.mk { position: absolute; left: calc((24 + var(--x)) * var(--u) - 5px); top: calc((23 + var(--y)) * var(--u) - 5px); width: max(24px, calc(var(--mw) * var(--u) + 10px)); height: max(24px, calc(var(--mh) * var(--u) + 10px)); border: 3px solid var(--ac); border-radius: 16px; box-shadow: 0 0 0 3px rgba(255,255,255,0.9), 0 8px 22px rgba(20,20,40,0.22); animation: tvh-pulse 2.4s ease-in-out infinite; }
.mk.dot { border-radius: 50%; }
.mk.left b { right: auto; left: -12px; }
/* Two rows right under each other: thinner rings, badges on opposite sides. */
.stage.two .mk { top: calc((23 + var(--y)) * var(--u) - 1px); height: calc(var(--mh) * var(--u) + 2px); }
.mk b { position: absolute; right: -12px; top: -13px; width: 26px; height: 26px; border-radius: 50%; background: var(--ac); color: #FFFFFF; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px #FFFFFF, 0 4px 10px rgba(20,20,40,0.25); }
.mk:nth-of-type(2) { animation-delay: .5s; }
.mk:nth-of-type(3) { animation-delay: 1s; }
@keyframes tvh-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: .85; } }

/* ── Article ────────────────────────────────────────────── */
.doc { display: grid; grid-template-columns: 220px minmax(0, 1fr) 240px; gap: 48px; padding-top: 36px; padding-bottom: 96px; align-items: start; }
.side { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 4px; }
.side-h { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; color: var(--muted); margin: 0 0 8px 10px; }
.side a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; color: #333A48; font-size: 14.5px; font-weight: 600; }
.side a:hover { background: var(--soft); text-decoration: none; }
.side a[aria-current] { background: var(--stage); font-weight: 800; color: var(--ink); }
.side .tile { width: 26px; height: 26px; border-radius: 8px; }
.side .tile .sf { width: 14px; height: 14px; }
.crumbs { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; color: var(--muted); flex-wrap: wrap; }
.crumbs a { color: var(--muted); }
.crumbs .cur { display: inline-flex; align-items: center; gap: 6px; color: var(--coral-ink); }
.crumbs .tile { width: 20px; height: 20px; border-radius: 6px; }
.crumbs .tile .sf { width: 12px; height: 12px; }
.crumbs > .sf { width: 9px; height: 9px; }
.doc h1 { margin: 18px 0 0; font-size: clamp(34px, 4.4vw, 50px); line-height: 1.06; font-weight: 800; letter-spacing: -0.01em; }
.lead { margin: 16px 0 0; font-size: 20px; line-height: 1.5; font-weight: 500; color: var(--ink-2); max-width: 680px; }
.doc-meta { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-top: 18px; font-size: 15px; font-weight: 600; color: var(--muted); }
.doc-meta .sf { width: 15px; height: 15px; }
.doc-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.dev { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--soft); color: #4A5060; font-size: 13.5px; font-weight: 700; }
.dev .sf { width: 13px; height: 13px; }
.tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--seg); margin-top: 28px; }
.tab { display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; padding: 12px 20px; border-radius: 999px; background: transparent; color: #4A5060; font-size: 16px; font-weight: 800; }
.tab .sf { width: 16px; height: 16px; }
.tab[aria-selected="true"] { background: #FFFFFF; color: var(--ink); box-shadow: 0 2px 8px rgba(20,20,40,0.12); }
.steps { display: flex; flex-direction: column; gap: 56px; margin-top: 40px; }
.steps[hidden] { display: none; }
.step { display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 24px; }
.step-h { display: flex; gap: 16px; align-items: flex-start; }
.num { width: 40px; height: 40px; border-radius: 50%; background: var(--mark); color: #FFFFFF; font-size: 19px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.step h2 { margin: 4px 0 0; font-size: 26px; line-height: 1.2; font-weight: 800; }
.step p { margin: 8px 0 0; font-size: 18px; line-height: 1.55; font-weight: 500; color: var(--ink-2); max-width: 640px; }
.stage { border-radius: 30px; background: var(--stage); padding-top: 36px; display: flex; justify-content: center; align-items: flex-start; gap: 28px; overflow: hidden; }
.stage.full { padding-bottom: 28px; }
.stage .ph { --w: 290px; }
.stage .ph.crop { --w: 300px; --c: 606; }
.stage.two .ph { --w: 250px; }
.legend { display: flex; gap: 8px; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--soft); font-size: 14px; font-weight: 700; }
.legend b { width: 22px; height: 22px; border-radius: 50%; background: var(--mark); color: #FFFFFF; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.mac { position: relative; border-radius: 30px; background: var(--stage); padding: 36px 0 0 36px; overflow: hidden; }
.mac-shot { position: relative; width: 640px; max-width: none; border-radius: 12px 0 0 0; overflow: hidden; box-shadow: 0 18px 44px rgba(80,20,20,0.16); }
.mac-shot img { width: 100%; }
.mac-shot .ring { position: absolute; border: 3px solid var(--mark); border-radius: 12px; box-shadow: 0 0 0 3px rgba(255,255,255,0.9); animation: tvh-pulse 2.4s ease-in-out infinite; }
.mac-shot .ring b { position: absolute; right: -12px; top: -13px; width: 26px; height: 26px; border-radius: 50%; background: var(--mark); color: #FFFFFF; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px #FFFFFF; }
.keys { border-radius: 30px; background: var(--stage); padding: 28px; display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
.keys span { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.keys kbd { min-width: 34px; height: 34px; padding: 0 9px; border-radius: 9px; background: #FFFFFF; border: 1px solid #F0D3D4; box-shadow: 0 2px 0 #F0D3D4; display: inline-flex; align-items: center; justify-content: center; font-family: var(--round); font-size: 16px; font-weight: 800; color: var(--ink); }
.tips { border-radius: 28px; background: var(--soft); padding: 28px 30px; display: flex; flex-direction: column; gap: 16px; margin-top: 64px; }
.tips h2 { margin: 0; font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.tips h2 .sf { width: 22px; height: 22px; color: #8A6100; }
.tip { display: flex; gap: 14px; align-items: flex-start; }
.tip .sf { width: 19px; height: 19px; margin-top: 3px; color: var(--link); }
.tip p { margin: 0; font-size: 17px; line-height: 1.55; font-weight: 500; color: var(--ink-2); }
.vote { margin-top: 32px; border: 1px solid var(--line); border-radius: 28px; padding: 22px 28px; display: flex; align-items: center; gap: 22px; }
.vote .mascot { flex: 0 0 110px; }
.vote-q { display: flex; flex-direction: column; gap: 12px; }
.vote h2 { margin: 0; font-size: 22px; font-weight: 800; }
.vote-btns { display: flex; gap: 10px; }
.vote-btns button { display: flex; align-items: center; gap: 7px; border: 1px solid #DADDE6; background: #FFFFFF; cursor: pointer; padding: 11px 18px; border-radius: 999px; font-size: 16px; font-weight: 800; }
.vote-btns button:hover { border-color: #B8BDCA; }
.vote-btns .sf { width: 17px; height: 17px; }
.vote-a { font-size: 19px; font-weight: 800; line-height: 1.4; }
.vote-a[hidden], .vote-q[hidden], .mascot [hidden] { display: none; }
.more { margin-top: 56px; }
.more h2 { margin: 0 0 16px; font-size: 24px; font-weight: 800; }
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.more-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; color: var(--ink); }
.more-card img { width: 100%; height: 130px; object-fit: cover; }
.more-card div { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.more-card b { font-size: 16.5px; font-weight: 800; line-height: 1.25; }
.more-card small { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.all-topics { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px; font-size: 16px; font-weight: 800; }
.all-topics .sf { width: 12px; height: 12px; }
.rail { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 20px; }
.toc { display: flex; flex-direction: column; gap: 2px; }
.toc a { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; border-radius: 12px; color: #333A48; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.toc a:hover { background: var(--soft); text-decoration: none; }
.toc a i { font-style: normal; font-weight: 800; color: var(--faint); }
.toc a.on { background: var(--stage); color: var(--ink); font-weight: 800; }
.toc a.on i { color: var(--mark); }
.stuck { border-radius: 22px; background: var(--lavender); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.stuck b { font-size: 17px; font-weight: 800; }
.stuck p { margin: 0; font-size: 14.5px; line-height: 1.45; font-weight: 500; color: var(--ink-2); }
.stuck a { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 800; }
.stuck .sf { width: 16px; height: 16px; }

/* ── The mascot: one SVG per mood, each with its own animation ── */
.mascot img { width: 100%; height: auto; }
img.mascot { height: auto; }
.mascot img[hidden] { display: none; }

/* ── Smaller screens ────────────────────────────────────── */
@media (max-width: 1180px) {
  .doc { grid-template-columns: minmax(0, 1fr) 240px; }
  .doc .side { display: none; }
}
@media (max-width: 980px) {
  .starts { grid-template-columns: 1fr 1fr; }
  .news { grid-template-columns: 1fr; }
  .doc { grid-template-columns: minmax(0, 1fr); }
  .doc .rail { display: none; }
  .ask { flex-wrap: wrap; }
  .ask-btns { flex: 1 1 100%; flex-direction: row; }
  .ask-btns .btn { flex: 1; }
}
@media (max-width: 760px) {
  :root { --gutter: 20px; }
  body { padding-top: 68px; }
  .hero { flex-direction: column; align-items: stretch; padding-top: 20px; }
  .hero-mascot { display: none; }
  .search-box { height: 60px; padding-left: 20px; }
  .search-box input { font-size: 17px; }
  .kbd { display: none; }
  .starts { grid-template-columns: 1fr; }
  .sec { padding-top: 56px; }
  .sec-head h2 { font-size: 28px; }
  .news { padding: 22px; }
  .ask { padding: 28px 24px; gap: 20px; margin-bottom: 64px; }
  .ask .mascot { width: 110px; }
  .ask h2 { font-size: 28px; }
  .ask-btns { flex-direction: column; }
  .doc-top .mini-search { width: 46px; padding: 0; justify-content: center; }
  .doc-top .mini-search input { display: none; }
  .doc { padding-top: 24px; }
  .tabs { display: flex; }
  .tab { flex: 1; padding: 12px 10px; font-size: 15px; }
  .steps { gap: 44px; }
  .step-h { gap: 12px; }
  .num { width: 36px; height: 36px; font-size: 17px; }
  .step h2 { font-size: 22px; margin-top: 3px; }
  .step p { font-size: 16.5px; }
  .stage { border-radius: 26px; padding-top: 26px; gap: 14px; }
  .stage .ph { --w: 230px; }
  .stage .ph.crop { --w: 230px; --c: 606; }
  .stage.two .ph { --w: 158px; }
  .stage.two .mk { border-width: 2px; }
  .stage.two .mk b { width: 20px; height: 20px; font-size: 12px; right: -9px; top: -10px; }
  .stage.two .mk.left b { right: auto; left: -9px; }
  .mac { padding: 22px 0 0 16px; border-radius: 26px; }
  .mac-shot { width: 340px; }
  .stage.full { padding-bottom: 22px; }
  .keys { padding: 22px; border-radius: 26px; }
  .tips { padding: 22px 20px; margin-top: 48px; }
  .vote { padding: 18px 20px; gap: 14px; }
  .vote .mascot { flex-basis: 84px; }
  .more-grid { grid-template-columns: 1fr; }
  .more-card { flex-direction: row; align-items: center; }
  .more-card img { width: 84px; height: 84px; flex-shrink: 0; }
}
@media (max-width: 380px) {
  .stage.two .ph { --w: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}