/* FAQ — page-only rules on top of ../assets/v3.css (task #8537, 12 Oct 2026).
   A help page, not a run of beats: a short hero with the eight topics, a map of
   what HyperionOS does (each tile opens its answer), then the questions with a
   topic rail and a search bar that stays in reach. Every answer is a native
   <details>, so the page reads without the script. Colour lives on tinted
   surfaces, never on a border. Each group carries its tint as --o / --o-light. */

body.faq { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { body.faq { scroll-behavior: auto; } }

body.v3 .fq-group.t-teal, body.v3 .fq-tiles .t-teal { --o: rgba(110, 215, 205, 0.08); --o-light: rgba(110, 215, 205, 0.15); --dot: #7fd6cc; }
body.v3 .fq-group.t-blue, body.v3 .fq-tiles .t-blue { --o: rgba(120, 146, 222, 0.1);  --o-light: rgba(140, 168, 240, 0.17); --dot: #9db2ee; }
body.v3 .fq-group.t-gold, body.v3 .fq-tiles .t-gold { --o: rgba(230, 180, 100, 0.09); --o-light: rgba(238, 190, 110, 0.17); --dot: #e6c48e; }

body.v3 .b .fq-lede {
  max-width: 34em;
  margin: 30px auto 0;
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 300;
  line-height: 1.5;
  color: #d4d1cc;
}

/* ------------------------------------------------------------ hero */

body.v3 main > section.fq-hero[id] {
  --b-top: calc(var(--header-h) + clamp(64px, 8vw, 120px));
  --b-end: clamp(64px, 7vw, 104px);
  --b-bg:
    radial-gradient(50% 50% at 50% 10%, rgba(227, 184, 122, 0.12), transparent 80%),
    var(--ground);
}
body.v3 .fq-hero .fq-hero-pic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0.42;
  -webkit-mask-image: linear-gradient(to bottom, #000 15%, transparent 86%);
          mask-image: linear-gradient(to bottom, #000 15%, transparent 86%);
  pointer-events: none;
}
body.v3 .fq-hero .fq-hero-copy { position: relative; }
body.v3 .fq-hero .kicker { font-size: 14px; filter: drop-shadow(0 0 3px rgba(2, 6, 13, 0.95)) drop-shadow(0 2px 14px rgba(0, 0, 0, 0.9)); }
body.v3 .fq-hero .display {
  --d: clamp(50px, 7vw, 108px);
  filter: drop-shadow(0 4px 30px rgba(0, 0, 0, 0.7));
}
body.v3 .b.fq-hero .fq-lede { text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9); }

body.v3 .fq-topics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 860px;
  margin: 40px auto 0;
}
body.v3 .fq-topics a {
  padding: 10px 18px;
  border-radius: var(--radius-full);
  background: rgba(22, 27, 40, 0.78);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  font-size: 15px;
  line-height: 1.2;
  color: #ece7df;
  text-decoration: none;
  transition: background .15s;
}
body.v3 .fq-topics a:hover { background: rgba(60, 66, 82, 0.85); }

/* ------------------------------------------------------------ at a glance */

body.v3 main > section.fq-glance[id] {
  --b-top: clamp(64px, 7vw, 104px);
  --b-end: clamp(56px, 6vw, 88px);
  --b-bg: linear-gradient(to bottom, var(--ground), var(--ground-up) 70%, var(--ground-up));
}
body.v3 .fq-glance .display { --d: clamp(40px, 5.4vw, 80px); }

body.v3 .b .fq-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 1180px;
  margin: clamp(48px, 5vw, 72px) auto 0;
  text-align: left;
}
body.v3 .fq-tiles a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 28px 26px;
  border-radius: 20px;
  background:
    radial-gradient(110% 70% at 0% 0%, var(--o-light), transparent 70%),
    linear-gradient(to bottom, var(--o), var(--o)),
    rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 40px 80px -44px rgba(0, 0, 0, 0.95);
  text-decoration: none;
  transition: transform .2s, background-color .2s;
}
body.v3 .fq-tiles a:hover { transform: translateY(-3px); background-color: rgba(255, 255, 255, 0.03); }
body.v3 .fq-tiles a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
body.v3 .fq-tile-k {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dot);
}
body.v3 .fq-tile-h {
  margin: 12px 0 18px;
  font-size: clamp(22px, 1.9vw, 26px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--ivory-mid);
  text-wrap: balance;
}
body.v3 .fq-tile-l {
  position: relative;
  padding-left: 18px;
  font-size: 16px;
  font-weight: 350;
  line-height: 1.45;
  color: #cfccc6;
}
body.v3 .fq-tile-l + .fq-tile-l { margin-top: 8px; }
body.v3 .fq-tile-l::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dot);
  opacity: 0.8;
}
body.v3 .fq-tiles a::after {
  content: 'Read the answer \2192';
  margin-top: auto;
  padding-top: 22px;
  font-size: 15px;
  font-weight: 450;
  color: var(--dot);
  transition: color .15s;
}
body.v3 .fq-tiles a:hover::after { color: #fff; }

body.v3 .b .fq-glance-more {
  max-width: 40em;
  margin: 36px auto 0;
  font-size: 17px;
  font-weight: 300;
  color: #b9bcc2;
}
body.v3 .fq-glance-more a { color: var(--cream); text-underline-offset: 3px; }

/* ------------------------------------------------------------ the questions */

body.v3 main > section.fq-main[id] {
  --b-top: clamp(40px, 5vw, 72px);
  --b-end: clamp(72px, 8vw, 120px);
  --b-bg: linear-gradient(to bottom, var(--ground-up), var(--ground) 30%);
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  column-gap: clamp(40px, 5vw, 80px);
  align-items: start;
  overflow: visible;   /* the rail and the bar stick */
  text-align: left;
}

/* site.css puts every child of a section in column 2; here the grid is ours */
body.v3 main > section.fq-main > * { grid-column: auto; }

/* the rail: the eight topics, the one you're reading lit */
body.v3 .fq-rail {
  position: sticky;
  top: 28px;
  display: grid;
  gap: 2px;
}
body.v3 .b .fq-rail-k {
  margin: 0 0 12px 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
body.v3 .fq-rail a {
  display: flex;
  gap: 12px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.3;
  color: #b9bcc2;
  text-decoration: none;
  transition: background .15s, color .15s;
}
body.v3 .fq-rail a span { font-variant-numeric: tabular-nums; color: #8a8f99; }
body.v3 .fq-rail a:hover { color: #f1ece4; background: rgba(255, 255, 255, 0.04); }
body.v3 .fq-rail a.on { color: #fff; background: rgba(219, 195, 170, 0.16); }
body.v3 .fq-rail a.on span { color: var(--gold); }

body.v3 .fq-body { min-width: 0; max-width: 860px; }

/* the bar: search, a count, open all. It stays in reach while you read. */
body.v3 .fq-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: -14px 0 40px;
  padding: 14px 0 22px;
  background: linear-gradient(to bottom, var(--ground) 72%, rgba(2, 6, 13, 0));
}
body.v3 .fq-bar[hidden] { display: none; }
body.v3 .fq-pill {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 8px 8px 0;
  border-radius: var(--radius-full);
  background: #0b111d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
body.v3 .fq-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
body.v3 .fq-search svg {
  position: absolute;
  left: 22px;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #a9adb5;
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
body.v3 .fq-search input {
  width: 100%;
  height: 48px;
  padding: 0 44px 0 54px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  font: inherit;
  font-size: 17px;
  color: #f4efe7;
  -webkit-appearance: none;
          appearance: none;
}
body.v3 .fq-search input::placeholder { color: #8d929c; }
body.v3 .fq-search input:focus { outline: none; }
body.v3 .fq-pill:focus-within { box-shadow: inset 0 0 0 1.5px rgba(227, 191, 142, 0.7); }
body.v3 .fq-search input::-webkit-search-cancel-button { filter: invert(0.7); }
body.v3 .fq-search kbd {
  position: absolute;
  right: 12px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  font: inherit;
  font-size: 13px;
  color: #a9adb5;
  pointer-events: none;
}
body.v3 .fq-search input:focus ~ kbd,
body.v3 .fq-search input:not(:placeholder-shown) ~ kbd { display: none; }
body.v3 .b .fq-status {
  flex: none;
  font-size: 14px;
  color: #9c9fa5;
  white-space: nowrap;
}
body.v3 .fq-all {
  flex: none;
  height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.07);
  font: inherit;
  font-size: 14px;
  color: #ece7df;
  cursor: pointer;
  transition: background .15s;
}
body.v3 .fq-all:hover { background: rgba(255, 255, 255, 0.13); }
body.v3 .fq-all:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
body.v3 .fq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

body.v3 .b .fq-empty {
  margin: -24px 0 40px;
  padding: 28px 30px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 17px;
  color: #c9ccd2;
}

/* a group: number, heading, one line, then its questions */
body.v3 .fq-group { scroll-margin-top: 100px; }
body.v3 .fq-group + .fq-group { margin-top: clamp(56px, 6vw, 88px); }
body.v3 .fq-group[hidden] { display: none; }
body.v3 .b .fq-num {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.24em;
  font-variant-numeric: tabular-nums;
  color: var(--dot);
}
body.v3 .fq-group h2 {
  margin-top: 10px;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
body.v3 .b .fq-sub {
  margin: 12px 0 28px;
  font-size: 18px;
  font-weight: 350;
  color: #b9bcc2;
}

/* one question */
body.v3 .fq-item {
  margin-top: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  scroll-margin-top: 100px;
  transition: background-color .2s;
}
body.v3 .fq-item:hover { background-color: rgba(255, 255, 255, 0.065); }
body.v3 .fq-item[open] {
  background:
    radial-gradient(90% 80% at 0% 0%, var(--o-light), transparent 70%),
    linear-gradient(to bottom, var(--o), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
body.v3 .fq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 22px 22px 28px;
  list-style: none;
  cursor: pointer;
  border-radius: 16px;
}
body.v3 .fq-item summary::-webkit-details-marker { display: none; }
body.v3 .fq-item summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
body.v3 .fq-item h3 {
  font-size: clamp(19px, 1.6vw, 22px);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: #f1ece4;
  text-wrap: pretty;
}
body.v3 .fq-item[open] h3 { color: #fff; }

/* the plus that turns into a cross */
body.v3 .fq-x {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--o-light);
  transition: transform .25s, background .2s;
}
body.v3 .fq-x::before,
body.v3 .fq-x::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  margin: -0.75px 0 0 -6px;
  border-radius: 1px;
  background: #fff;
}
body.v3 .fq-x::after { transform: rotate(90deg); }
body.v3 .fq-item[open] .fq-x { transform: rotate(45deg); background: rgba(255, 255, 255, 0.14); }

/* the answer */
body.v3 .fq-a {
  max-width: 68ch;
  padding: 0 28px 28px;
}
body.v3 .b .fq-a p {
  font-size: 17.5px;
  font-weight: 350;
  line-height: 1.62;
  color: #dcd9d3;
}
body.v3 .b .fq-a > * + * { margin-top: 14px; }
body.v3 .b .fq-a ul { display: grid; gap: 10px; }
body.v3 .b .fq-a li {
  position: relative;
  padding-left: 22px;
  font-size: 17.5px;
  font-weight: 350;
  line-height: 1.55;
  color: #dcd9d3;
}
body.v3 .b .fq-a li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 0.68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot);
}
body.v3 .fq-a b { font-weight: 500; color: #f6f1e9; }
body.v3 .b .fq-a .fq-not { color: #a9adb5; }
body.v3 .b .fq-a .fq-not-list li { color: #b9bcc2; }
body.v3 .b .fq-a .fq-not-list li::before { background: #6f7480; }
body.v3 .fq-a a { color: var(--cream); text-underline-offset: 3px; }
body.v3 .fq-a .fq-more { white-space: nowrap; }
body.v3 .fq-a .fq-more::after { content: ' \2192'; }

/* the close: one small line under the button */
body.v3 .b-cta .cta-small { margin-top: 22px; }

/* ------------------------------------------------------------ 1100 and down */

@media (max-width: 1100px) {
  body.v3 .b .fq-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
  body.v3 main > section.fq-main[id] { grid-template-columns: minmax(0, 1fr); }
  body.v3 .fq-rail { display: none; }
  body.v3 .fq-body { margin: 0 auto; width: 100%; }
}

/* ------------------------------------------------------------ phones */

@media (max-width: 760px) {
  body.v3 main > section.fq-hero[id] { --b-top: calc(var(--header-h) + 56px); --b-end: 56px; }
  body.v3 .fq-hero .display { --d: clamp(42px, 11.6vw, 56px); }
  body.v3 .fq-hero .display span { display: block; }
  body.v3 .fq-topics { gap: 8px; margin-top: 30px; }
  body.v3 .fq-topics a { padding: 9px 14px; font-size: 14px; }

  body.v3 .fq-glance .display { --d: clamp(34px, 9.6vw, 44px); }
  body.v3 .fq-glance .display span { display: block; }
  body.v3 .b .fq-tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body.v3 .fq-tiles a { padding: 22px 20px 20px; }

  body.v3 .fq-bar { margin-bottom: 28px; padding: 10px 0 18px; }
  body.v3 .fq-pill { gap: 6px; padding: 6px 6px 6px 0; }
  body.v3 .fq-search svg { left: 16px; width: 18px; height: 18px; }
  body.v3 .fq-search input { height: 44px; padding-left: 44px; padding-right: 8px; font-size: 16px; }
  body.v3 .fq-search kbd { display: none; }
  body.v3 .b .fq-status { display: none; }
  body.v3 .fq-all { height: 38px; padding: 0 14px; }

  body.v3 .fq-item summary { gap: 14px; padding: 18px 14px 18px 18px; }
  body.v3 .fq-item h3 { font-size: 18px; }
  body.v3 .fq-x { width: 30px; height: 30px; }
  body.v3 .fq-a { padding: 0 18px 22px; }
  body.v3 .b .fq-a p,
  body.v3 .b .fq-a li { font-size: 16.5px; }
}

@media print {
  body.v3 .fq-hero-pic, body.v3 .fq-rail, body.v3 .fq-bar, body.v3 .fq-x { display: none; }
}