/* Q&A V6 = V3's avatar app bar + a search box + five shortcut cards, on top of V4's five journey stops
   (dotted trail, STEP pills, <details> cards). Everything is scoped to .qa-v6 (the page's <main>). Mobile first. */
.qa-v6 {
  --qa6-ink: #17375a; --qa6-text: #3a5167; --qa6-en: #43647c; --qa6-cyan: #4edce9; --qa6-teal: #335558; --qa6-blue: #0ea5e9;
  --qa6-line: #d2e4ee; --qa6-ice: #eef8fc; --qa6-ice-2: #f5fbfe; --qa6-trail: #9fdbe6;
  --qa6-nav: 100px; --qa6-sec: 64px; --qa6-hd: 24px; --qa6-gut: 30px;
  --qa6-w: calc(100% - 32px);
  --qa6-ease: cubic-bezier(.22, 1, .36, 1);
  display: block; background: #fff; color: var(--qa6-text); font-size: 16px; line-height: 1.8;
  overflow-x: clip; interpolate-size: allow-keywords;
}
.qa-v6 *, .qa-v6 *::before, .qa-v6 *::after { box-sizing: border-box; }
.qa-v6:focus, .qa-v6:focus-visible { outline: none !important; }
.qa-v6 h1, .qa-v6 h2, .qa-v6 h3, .qa-v6 h4, .qa-v6 p, .qa-v6 ol, .qa-v6 ul { margin: 0; }
.qa-v6 ol, .qa-v6 ul { padding: 0; list-style: none; }
.qa-v6 a { color: var(--qa6-ink); }
.qa-v6 svg { display: block; }
.qa-v6 .qa6-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qa-v6 .qa6-wrap { width: var(--qa6-w); margin-inline: auto; }
.qa-v6 [data-qa-item], .qa-v6 #qa6-top { scroll-margin-top: calc(var(--qa6-nav) + 12px); }
/* a stop link lands with its heading just under the navbar (the section starts with its top spacing) */
.qa-v6 [data-qa-section] { scroll-margin-top: calc(var(--qa6-nav) + 16px - var(--qa6-sec)); }
.qa-v6 [data-qa-section]:focus, .qa-v6 #qa6-top:focus { outline: none; }
.qa-v6 a:focus-visible, .qa-v6 summary:focus-visible { outline: 3px solid var(--qa6-ink) !important; outline-offset: 3px; }


/* ---------- hero (from V3): avatar app bar + search + five shortcut cards on pale snow ---------- */
.qa-v6 [hidden] { display: none !important; }
.qa-v6 .qa6-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.qa-v6 .qa6-hero {
  position: relative; padding: 128px 0 64px; background-color: #eef8fc;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23cfe8f2' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M30 20v16M23 24l14 8M23 32l14-8'/%3E%3Cpath d='M118 70v12M112.8 73l10.4 6M112.8 79l10.4-6'/%3E%3Cpath d='M62 118v10M57.7 120.5l8.6 5M57.7 125.5l8.6-5'/%3E%3C/g%3E%3Cg fill='%23d9eef6'%3E%3Ccircle cx='86' cy='26' r='2'/%3E%3Ccircle cx='14' cy='88' r='1.6'/%3E%3Ccircle cx='140' cy='136' r='2'/%3E%3Ccircle cx='104' cy='148' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 160px 160px;
}
/* the pale snow ends in a soft white snow bank, so the white journey below grows out of it */
.qa-v6 .qa6-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 34px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V22C110 8 230 6 360 18s250 14 370 2 240-14 360-2 240 16 350 4V34Z' fill='%23fff'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
.qa-v6 .qa6-hero__in { position: relative; z-index: 1; max-width: 920px; }
.qa-v6 .qa6-deco { position: absolute; left: 0; right: 0; top: -128px; height: 128px; pointer-events: none; }
.qa-v6 .qa6-flake { position: absolute; width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 1px #9fd4e6); }
.qa-v6 .qa6-flake--a { width: 26px; height: 26px; right: -6px; bottom: 2px; stroke: var(--qa6-cyan); filter: none; }
.qa-v6 .qa6-flake--b { right: 28px; bottom: 0; }
.qa-v6 .qa6-flake--c { width: 16px; height: 16px; left: 58px; bottom: 2px; stroke: var(--qa6-cyan); filter: none; }
.qa-v6 .qa6-flake--d { display: none; }
@keyframes qa6-twinkle { from { opacity: 0; transform: scale(.4) rotate(-60deg); } to { opacity: 1; transform: none; } }
.qa-v6.qa6-js .qa6-deco.is-in .qa6-flake { animation: qa6-twinkle 1.6s var(--qa6-ease) both; }
.qa-v6.qa6-js .qa6-deco.is-in .qa6-flake--b { animation-delay: .14s; }
.qa-v6.qa6-js .qa6-deco.is-in .qa6-flake--c { animation-delay: .28s; }
.qa-v6.qa6-js .qa6-deco.is-in .qa6-flake--d { animation-delay: .42s; }

.qa-v6 .qa6-appbar {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: #fff; border: 2px solid var(--qa6-ink); border-radius: 24px; box-shadow: 0 6px 0 #c3e7f2;
}
.qa-v6 .qa6-av { display: block; width: 60px; height: 60px; flex: none; border-radius: 50%; overflow: hidden; background: #e1f7fb; border: 2px solid var(--qa6-ink); }
.qa-v6 .qa6-av svg { width: 100%; height: 100%; }
.qa-v6 .qa6-appbar__t { min-width: 0; }
.qa-v6 .qa6-appbar h1 { color: var(--qa6-ink); font-size: 33px; line-height: 1.2; font-weight: 700; letter-spacing: .06em; }
.qa-v6 .qa6-appbar__en { margin-top: 2px; color: var(--qa6-en); font: 700 22px/1 Kalam, Arial, sans-serif; }
.qa-v6 .qa6-appbar__n { margin-left: auto; flex: none; padding: 3px 12px; border-radius: 999px; background: #e1f7fb; color: var(--qa6-teal); font-size: 15px; line-height: 1.6; font-weight: 700; white-space: nowrap; }

/* search: a white card like the app bar; JS reveals it (no JS = no box). The slot keeps its room so nothing jumps. */
.qa-v6 .qa6-search-slot { min-height: 132px; margin-top: 18px; }
.qa-v6 .qa6-search { padding: 8px 14px 14px; background: #fff; border: 2px solid var(--qa6-ink); border-radius: 22px; box-shadow: 0 6px 0 #c3e7f2; }
.qa-v6 .qa6-search__top { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.qa-v6 .qa6-search__top label { font-size: 16px; line-height: 1.4; font-weight: 700; color: var(--qa6-ink); }
.qa-v6 .qa6-search__count { margin-left: auto; font-size: 15px; line-height: 1.4; font-weight: 700; color: var(--qa6-teal); font-variant-numeric: tabular-nums; }
.qa-v6 .qa6-search__clear {
  min-width: 64px; min-height: 44px; padding: 6px 14px; border: 2px solid var(--qa6-ink); border-radius: 999px; background: #fff;
  color: var(--qa6-ink); font: inherit; font-size: 16px; line-height: 1.2; font-weight: 700; cursor: pointer; transition: background-color .3s;
}
.qa-v6 .qa6-search__count:empty + .qa6-search__clear { margin-left: auto; }
.qa-v6 .qa6-search__clear:hover { background: #dff8fb; }
.qa-v6 .qa6-search__clear:focus-visible { outline: 3px solid var(--qa6-ink); outline-offset: 3px; }
.qa-v6 .qa6-field { position: relative; margin-top: 4px; }
.qa-v6 .qa6-sico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.qa-v6 .qa6-field .qa6-sico { position: absolute; left: 16px; top: 50%; margin-top: -10px; color: var(--qa6-ink); pointer-events: none; }
.qa-v6 .qa6-field input {
  display: block; width: 100%; min-height: 52px; margin: 0; padding: 10px 16px 10px 46px; border: 2px solid var(--qa6-ink); border-radius: 999px;
  background: #f5fbfe; color: var(--qa6-ink); font: inherit; font-size: 16px; line-height: 1.4; -webkit-appearance: none; appearance: none; transition: background-color .3s;
}
.qa-v6 .qa6-field input::placeholder { color: #557083; opacity: 1; }
.qa-v6 .qa6-field input { text-overflow: ellipsis; }
.qa-v6 .qa6-field input::-webkit-search-cancel-button { display: none; }
.qa-v6 .qa6-field input:focus { background: #fff; }
.qa-v6 .qa6-field input:focus-visible { outline: 3px solid var(--qa6-ink); outline-offset: 3px; }
.qa-v6 mark { padding: 0 1px; border-radius: 3px; background: #ffe8a1; color: inherit; }

/* five shortcut cards (V3's look): 2 per row on phones (the fifth spans), 3 + 2 on tablets, 5 in a row on desktops */
.qa-v6 .qa6-rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.qa-v6 .qa6-rooms > li:last-child { grid-column: 1 / -1; }
.qa-v6 .qa6-room-link {
  display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; align-content: center;
  height: 100%; min-height: 64px; padding: 8px 12px; background: #fff; border: 2px solid var(--qa6-ink); border-radius: 18px;
  color: var(--qa6-ink); text-decoration: none; transition: transform .3s var(--qa6-ease), background-color .3s;
}
.qa-v6 .qa6-room-link:hover { background: #f4fdfe; transform: translateY(-2px); }
.qa-v6 .qa6-room-link__ico { grid-row: 1 / 3; width: 36px; height: 36px; }
.qa-v6 .qa6-room-link__ico svg { width: 100%; height: 100%; }
.qa-v6 .qa6-room-link__t { font-size: 16px; line-height: 1.4; font-weight: 700; word-break: keep-all; overflow-wrap: anywhere; }
.qa-v6 .qa6-room-link__n { font-size: 15px; line-height: 1.4; color: var(--qa6-teal); }

/* nothing found */
.qa-v6 .qa6-empty { margin-top: 12px; padding: 14px 16px 16px; text-align: center; border: 2px dashed #9fdbe6; border-radius: 22px; background: #f5fbfe; }
.qa-v6 .qa6-empty > .qa6-sico { width: 30px; height: 30px; margin: 0 auto 4px; color: var(--qa6-en); }
.qa-v6 .qa6-empty__t { font-size: 22px; line-height: 1.5; font-weight: 700; color: var(--qa6-ink); }
.qa-v6 .qa6-empty p + p { margin-top: 6px; }
.qa-v6 .qa6-empty .qa6-empty__line { display: inline-flex; min-width: 160px; margin-top: 10px; }
/* the first group showing has a shorter top spacing: its heading still lands just under the navbar */
.qa-v6 .qa6-stop--first { scroll-margin-top: calc(var(--qa6-nav) + 16px - 40px); }
/* while searching, the trail stops at the last group still showing */
.qa-v6 .qa6-stop--end .qa6-trail { display: none; }

/* ---------- the journey: five stops on a dotted trail ---------- */
.qa-v6 .qa6-journey { width: var(--qa6-w); max-width: 920px; margin-inline: auto; padding-bottom: var(--qa6-sec); }
.qa-v6 .qa6-stop { position: relative; padding-top: var(--qa6-sec); padding-left: var(--qa6-gut); }
.qa-v6 .qa6-stop--first { padding-top: 40px; }
.qa-v6 .qa6-node {
  position: absolute; left: 0; top: calc(var(--qa6-sec) + 2px); width: 22px; height: 22px; border-radius: 50%;
  background: var(--qa6-c); border: 3px solid var(--qa6-ink); box-shadow: 0 0 0 4px #fff; z-index: 1;
}
.qa-v6 .qa6-stop--first .qa6-node { top: 42px; }
.qa-v6 .qa6-trail {
  position: absolute; left: 9px; width: 4px; top: calc(var(--qa6-sec) + 12px); bottom: calc(-1 * (var(--qa6-sec) + 12px));
  background: radial-gradient(circle, var(--qa6-trail) 2px, transparent 2.5px) center top / 4px 12px repeat-y;
}
.qa-v6 .qa6-stop--first .qa6-trail { top: 52px; }
.qa-v6 .qa6-stop--last .qa6-trail { display: none; }
.qa-v6 .qa6-head { margin-bottom: var(--qa6-hd); }
.qa-v6 .qa6-head__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.qa-v6 .qa6-step {
  display: inline-block; padding: 1px 12px; border-radius: 999px; background: var(--qa6-c); color: var(--qa6-ink);
  font-weight: 700; font-size: 15px; line-height: 1.6; letter-spacing: .08em;
}
.qa-v6 .qa6-count { font-size: 15px; line-height: 1.5; color: var(--qa6-en); }
.qa-v6 .qa6-head h2 { font-size: 26px; line-height: 1.5; font-weight: 700; letter-spacing: .04em; color: #4edce9; }
.qa-v6 .qa6-en { margin-top: 20px; font-family: Kalam, Arial, sans-serif; font-weight: 700; font-size: clamp(32px, 3.5vw, 44px); line-height: 1; color: #43647c; }

/* questions: one card each, native <details> */
.qa-v6 .qa6-list { display: grid; gap: 12px; }
.qa-v6 .qa6-item { background: #fff; border: 2px solid var(--qa6-line); border-radius: 16px; transition: border-color .3s, box-shadow .3s; }
.qa-v6 .qa6-item[open] { border-color: var(--qa6-c); box-shadow: 0 10px 22px -18px rgba(23, 55, 90, .55); }
.qa-v6 .qa6-q {
  display: flex; align-items: flex-start; gap: 10px; min-height: 56px; padding: 14px 14px 14px 12px; cursor: pointer;
  list-style: none; border-radius: 14px; transition: background-color .3s;
}
.qa-v6 .qa6-q::-webkit-details-marker { display: none; }
.qa-v6 .qa6-q::marker { content: ""; }
.qa-v6 .qa6-q:hover { background: var(--qa6-ice-2); }
.qa-v6 .qa6-qm, .qa-v6 .qa6-am {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-weight: 800; font-size: 17px; line-height: 1;
}
.qa-v6 .qa6-qm { background: var(--qa6-c); color: var(--qa6-ink); border: 2px solid var(--qa6-ink); }
.qa-v6 .qa6-am { background: #fff; color: var(--qa6-teal); border: 2px dashed var(--qa6-teal); }
.qa-v6 .qa6-q h3 { flex: 1; min-width: 0; padding-top: 1px; font-size: 20px; line-height: 1.45; font-weight: 700; color: var(--qa6-ink); letter-spacing: .02em; }
.qa-v6 .qa6-tog { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--qa6-ice); transition: background-color .3s, transform .4s var(--qa6-ease); }
.qa-v6 .qa6-tog::before, .qa-v6 .qa6-tog::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; margin: -1.25px 0 0 -7px; border-radius: 2px; background: var(--qa6-ink); transition: transform .4s var(--qa6-ease); }
.qa-v6 .qa6-tog::after { transform: rotate(90deg); }
.qa-v6 .qa6-item[open] .qa6-tog { background: var(--qa6-c); transform: rotate(180deg); }
.qa-v6 .qa6-item[open] .qa6-tog::after { transform: rotate(0deg); }
.qa-v6 .qa6-a { display: flex; gap: 10px; padding: 2px 16px 18px 12px; }
.qa-v6 .qa6-item[open] > .qa6-a { animation: qa6-open .4s var(--qa6-ease); }
@keyframes qa6-open { from { opacity: 0; transform: translateY(-6px); } }
.qa-v6 .qa6-a__in { flex: 1; min-width: 0; padding-top: 1px; }
.qa-v6 .qa6-a__body { font-size: 16px; line-height: 1.85; color: var(--qa6-text); overflow-wrap: anywhere; }
.qa-v6 .qa6-a__body > * + * { margin-top: 12px; }
.qa-v6 .qa6-a__body p { text-wrap: pretty; }
.qa-v6 .qa6-sub { font-size: 18px; line-height: 1.75; font-weight: 700; color: var(--qa6-teal); }
.qa-v6 .qa6-sub + * { margin-top: 4px; }
.qa-v6 .qa6-ol li + li { margin-top: 6px; }
.qa-v6 .qa6-ol li { padding-left: 1.9em; text-indent: -1.9em; }
.qa-v6 .qa6-ol li > * { text-indent: 0; }
.qa-v6 .qa6-n { display: inline-block; min-width: 1.9em; text-indent: 0; color: var(--qa6-teal); }
.qa-v6 .qa6-ol--sub { margin-top: 6px; }

/* related links: chips under the answer */
.qa-v6 .qa6-rel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px; padding-top: 14px; border-top: 2px dotted var(--qa6-line); }
.qa-v6 .qa6-rel__label { font-size: 15px; line-height: 1.5; color: var(--qa6-en); }
.qa-v6 .qa6-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border-radius: 999px;
  border: 2px solid var(--qa6-ink); background: #fff; color: var(--qa6-ink); font-size: 16px; line-height: 1.3; font-weight: 700; text-decoration: none;
  transition: background-color .3s, transform .3s var(--qa6-ease);
}
.qa-v6 .qa6-chip:hover { background: #dff8fb; transform: translateY(-2px); }
.qa-v6 .qa6-rel--social { display: block; }
.qa-v6 .qa6-rel--social .qa6-rel__label { margin-bottom: 10px; }
.qa-v6 .qa6-social-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qa-v6 .qa6-social {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 8px 12px; border-radius: 14px;
  border: 2px solid var(--qa6-ink); background: #fff; color: var(--qa6-ink); font-size: 16px; font-weight: 700; line-height: 1.3; text-decoration: none;
  box-shadow: 3px 3px 0 #cdeef4; transition: background-color .3s, transform .3s var(--qa6-ease), box-shadow .3s;
}
.qa-v6 .qa6-social img { width: 28px; height: 28px; flex: none; }
.qa-v6 .qa6-social:hover { background: #f0fbfd; transform: translateY(-2px); box-shadow: 3px 5px 0 #cdeef4; }

.qa-v6 .qa6-back { margin-top: 16px; }
.qa-v6 .qa6-back a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px 8px 10px; border-radius: 999px;
  font-size: 16px; line-height: 1.3; color: var(--qa6-en); text-decoration: none; transition: background-color .3s;
}
.qa-v6 .qa6-back a:hover { background: var(--qa6-ice); }


/* ---------- motion (only after JS; replayed each time it scrolls into view) ---------- */
.qa-v6.qa6-js .qa6-head[data-qa6-anim] > * { transition: opacity 1.4s var(--qa6-ease), transform 1.4s var(--qa6-ease); }
.qa-v6.qa6-js .qa6-head[data-qa6-anim] > :nth-child(2) { transition-delay: .14s; }
.qa-v6.qa6-js .qa6-head[data-qa6-anim] > :nth-child(3) { transition-delay: .28s; }
.qa-v6.qa6-js .qa6-head[data-qa6-anim]:not(.is-in) > * { opacity: 0; transform: translateY(14px); }
.qa-v6.qa6-js .qa6-stop[data-qa6-anim] .qa6-trail { transition: clip-path 1.6s var(--qa6-ease); clip-path: inset(0 0 0 0); }
.qa-v6.qa6-js .qa6-stop[data-qa6-anim]:not(.is-in) .qa6-trail { clip-path: inset(0 0 100% 0); transition: none; }

@media (min-width: 480px) {
  .qa-v6 { --qa6-nav: 120px; }
  .qa-v6 .qa6-hero { padding-top: 156px; }
  .qa-v6 .qa6-deco { top: -156px; height: 156px; }
}
@media (max-width: 479px) {
  /* phones: smaller Q / A marks so the answer column stays wide */
  .qa-v6 .qa6-q, .qa-v6 .qa6-a { gap: 8px; }
  .qa-v6 .qa6-a { padding: 0 14px 16px 12px; }
  .qa-v6 .qa6-qm, .qa-v6 .qa6-am { width: 26px; height: 26px; font-size: 15px; margin-top: 2px; }
  .qa-v6 .qa6-social { gap: 6px; padding: 8px 6px; }
  .qa-v6 .qa6-social img { width: 24px; height: 24px; }
  .qa-v6 .qa6-search__top label { letter-spacing: 0; }
  .qa-v6 .qa6-search-slot { min-height: 118px; }
  .qa-v6 .qa6-search { padding: 6px 8px 8px; }
  .qa-v6 .qa6-search__top { padding-left: 4px; }
  .qa-v6 .qa6-field .qa6-sico { left: 11px; }
  .qa-v6 .qa6-field input { padding: 10px 6px 10px 36px; }
  .qa-v6 .qa6-field input::placeholder { font-size: 15px; }
}
@media (max-width: 359px) {
  .qa-v6 { --qa6-w: calc(100% - 24px); }
  .qa-v6 .qa6-q { padding-right: 10px; gap: 8px; }
  .qa-v6 .qa6-a { padding-right: 12px; gap: 8px; }
  .qa-v6 .qa6-room-link { padding-inline: 10px; column-gap: 8px; }
}
@media (max-width: 389px) {
  /* narrow phones: the title keeps one line next to the avatar and the count */
  .qa-v6 .qa6-appbar { gap: 10px; padding: 10px 12px; }
  .qa-v6 .qa6-av { width: 52px; height: 52px; }
  .qa-v6 .qa6-appbar h1 { letter-spacing: .02em; }
  .qa-v6 .qa6-appbar__n { padding: 3px 10px; }
}
@media (min-width: 768px) {
  .qa-v6 { --qa6-sec: 112px; --qa6-hd: 40px; --qa6-gut: 84px; --qa6-w: calc(100% - 64px); font-size: 17px; }
  .qa-v6 .qa6-hero { padding: 176px 0 88px; }
  .qa-v6 .qa6-hero::after { height: 44px; }
  .qa-v6 .qa6-deco { top: -176px; height: 176px; }
  .qa-v6 .qa6-flake--a { width: 34px; height: 34px; right: 24px; bottom: 6px; }
  .qa-v6 .qa6-flake--b { width: 22px; height: 22px; right: 72px; bottom: 4px; }
  .qa-v6 .qa6-flake--c { width: 20px; height: 20px; left: 110px; bottom: 2px; }
  .qa-v6 .qa6-flake--d { display: block; width: 14px; height: 14px; left: 150px; bottom: 14px; stroke: var(--qa6-cyan); filter: none; }
  .qa-v6 .qa6-appbar { gap: 18px; padding: 16px 24px; border-radius: 28px; }
  .qa-v6 .qa6-av { width: 76px; height: 76px; }
  .qa-v6 .qa6-appbar h1 { font-size: 44px; }
  .qa-v6 .qa6-appbar__en { font-size: 26px; }
  .qa-v6 .qa6-appbar__n { padding: 4px 16px; font-size: 16px; }
  .qa-v6 .qa6-search-slot { min-height: 132px; margin-top: 22px; }
  .qa-v6 .qa6-search { padding: 10px 24px 18px; border-radius: 28px; }
  .qa-v6 .qa6-rooms { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
  .qa-v6 .qa6-rooms > li { grid-column: span 2; }
  .qa-v6 .qa6-rooms > li:nth-child(4) { grid-column: 2 / 4; }
  .qa-v6 .qa6-rooms > li:last-child { grid-column: 4 / 6; }
  .qa-v6 .qa6-room-link { grid-template-columns: 40px 1fr; padding: 10px 14px; }
  .qa-v6 .qa6-room-link__ico { width: 40px; height: 40px; }
  .qa-v6 .qa6-stop--first { padding-top: 64px; scroll-margin-top: calc(var(--qa6-nav) + 16px - 64px); }
  .qa-v6 .qa6-stop--first .qa6-node { top: 64px; }
  .qa-v6 .qa6-stop--first .qa6-trail { top: 84px; }
  .qa-v6 .qa6-node { left: 22px; width: 40px; height: 40px; top: var(--qa6-sec); }
  .qa-v6 .qa6-trail { left: 40px; top: calc(var(--qa6-sec) + 20px); bottom: calc(-1 * (var(--qa6-sec) + 20px)); }
  .qa-v6 .qa6-head h2 { font-size: 30px; }
  .qa-v6 .qa6-list { gap: 14px; }
  .qa-v6 .qa6-q { gap: 14px; padding: 16px 20px 16px 18px; min-height: 64px; }
  .qa-v6 .qa6-q h3 { font-size: 22px; }
  .qa-v6 .qa6-qm, .qa-v6 .qa6-am, .qa-v6 .qa6-tog { width: 34px; height: 34px; }
  .qa-v6 .qa6-a { gap: 14px; padding: 2px 24px 22px 18px; }
  .qa-v6 .qa6-a__body { font-size: 17px; }
  .qa-v6 .qa6-social-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .qa-v6 .qa6-empty { margin-top: 22px; padding: 24px 24px 26px; }
  .qa-v6 .qa6-empty__t { font-size: 24px; }
}
@media (min-width: 1024px) {
  .qa-v6 .qa6-rooms { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .qa-v6 .qa6-rooms > li, .qa-v6 .qa6-rooms > li:nth-child(4), .qa-v6 .qa6-rooms > li:last-child { grid-column: auto; }
}

/* ---------- English page (/en/qa): longer words; scoped to html[lang="en"] so the Chinese page renders exactly as before ---------- */
html[lang="en"] .qa-v6 .qa6-appbar h1 > span { display: block; }
html[lang="en"] .qa-v6 .qa6-appbar h1 > .qa6-appbar__en { margin-top: 2px; letter-spacing: 0; }
html[lang="en"] .qa-v6 .qa6-room-link__t { word-break: normal; overflow-wrap: break-word; }
html[lang="en"] .qa-v6 .qa6-q h3 { letter-spacing: 0; }
@media (max-width: 479px) {
  /* the count chip goes under the title, so 常見問題 keeps one line next to the avatar */
  html[lang="en"] .qa-v6 .qa6-appbar { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-items: center; }
  html[lang="en"] .qa-v6 .qa6-av { grid-row: 1 / 3; }
  html[lang="en"] .qa-v6 .qa6-appbar__n { grid-column: 2; justify-self: start; margin-left: 0; }
  /* shortcut cards: the icon sits above the words, so each label keeps one line */
  html[lang="en"] .qa-v6 .qa6-room-link { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; row-gap: 2px; align-content: start; padding: 10px 12px; }
  html[lang="en"] .qa-v6 .qa6-room-link__ico { grid-row: auto; width: 32px; height: 32px; margin-bottom: 2px; }
  /* contact buttons: icon above the name, so "Instagram" / "Facebook" fit a half-width button */
  html[lang="en"] .qa-v6 .qa6-social-row .qa6-social { flex-direction: column; gap: 2px; min-height: 64px; padding: 8px 4px; }
}
@media (min-width: 1024px) {
  /* five English labels do not fit one row: keep the tablet's three + two */
  html[lang="en"] .qa-v6 .qa6-rooms { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  html[lang="en"] .qa-v6 .qa6-rooms > li { grid-column: span 2; }
  html[lang="en"] .qa-v6 .qa6-rooms > li:nth-child(4) { grid-column: 2 / 4; }
  html[lang="en"] .qa-v6 .qa6-rooms > li:last-child { grid-column: 4 / 6; }
}

/* ---------- G7 fixes (10/27) ---------- */
/* F6: whatever has keyboard focus scrolls clear of the fixed navbar (top) and, on phones, the bottom contact bar */
.qa-v6 summary, .qa-v6 a, .qa-v6 button, .qa-v6 input { scroll-margin-top: calc(var(--qa6-nav) + 12px); scroll-margin-bottom: 16px; }
@media (max-width: 600px) {
  .qa-v6 summary, .qa-v6 a, .qa-v6 button, .qa-v6 input { scroll-margin-bottom: 76px; }
}
/* F4: from 601px the floating buttons stand on the right (left edge = viewport - 74px): keep every block's right edge at
   viewport - 82px or less; centred again once there is room */
@media (min-width: 601px) {
  .qa-v6 { --qa6-l: 16px; }
  .qa-v6 .qa6-wrap, .qa-v6 .qa6-journey {
    width: auto; max-width: none;
    margin-left: max(var(--qa6-l), calc((100% - 920px) / 2)); margin-right: max(82px, calc((100% - 920px) / 2));
  }
}
@media (min-width: 601px) and (max-width: 767px) {
  .qa-v6 .qa6-flake--a { right: 0; }
}
@media (min-width: 768px) {
  .qa-v6 { --qa6-l: 32px; }
}
/* F5: phones follow the site type tokens (site-type.css, phones only); from 768px nothing changes */
@media (max-width: 767px) {
  .qa-v6 .qa6-head { margin-bottom: var(--sp-head, 44px); }
  .qa-v6 .qa6-head h2 { font-size: var(--fs-h2, 26px); }
  .qa-v6 .qa6-en { margin-top: var(--sp-pair, 28px); font-size: var(--fs-h2-en, 32px); }
}
/* F7: very narrow phones: the count chip goes under the title so 常見問題 keeps one line at full size; one contact button per row */
@media (max-width: 359px) {
  .qa-v6 .qa6-appbar { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 6px; align-items: center; }
  .qa-v6 .qa6-av { grid-row: 1 / 3; }
  .qa-v6 .qa6-appbar__n { grid-column: 2; justify-self: start; margin-left: 0; }
  .qa-v6 .qa6-appbar h1 { white-space: nowrap; }
  .qa-v6 .qa6-social-row { grid-template-columns: minmax(0, 1fr); }
  html[lang="en"] .qa-v6 .qa6-social-row .qa6-social { flex-direction: row; gap: 8px; min-height: 52px; padding: 8px 12px; }
}
/* 768-1023: four contact buttons in a row are too narrow for "Instagram" (Codex gate 10/28): two per row */
@media (min-width: 768px) and (max-width: 1023px) {
  .qa-v6 .qa6-social-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the Chinese page's side-by-side contact buttons are still too narrow for "Instagram" up to 374px */
@media (max-width: 374px) {
  html:not([lang="en"]) .qa-v6 .qa6-social-row { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .qa-v6 *, .qa-v6 *::before, .qa-v6 *::after { animation: none !important; transition: none !important; }
  .qa-v6.qa6-js .qa6-head[data-qa6-anim]:not(.is-in) > * { opacity: 1; transform: none; }
  .qa-v6.qa6-js .qa6-stop[data-qa6-anim]:not(.is-in) .qa6-trail { clip-path: none; }
  .qa-v6 .qa6-chip:hover, .qa-v6 .qa6-social:hover, .qa-v6 .qa6-room-link:hover { transform: none; }
}