/* DV48 ASK — VOLTA bold skin: neo-brutalist. Off-white ground, 3px black outlines, hard offset shadows,
   lemon and electric-cyan blocks, Archivo from condensed to extended. */
:root {
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* primitives */
  --c-paper: #f2eee5; --c-ink: #111111; --c-white: #fffdf7; --c-yellow: #fdee3b; --c-cyan: #22e4f2; --c-red: #d7261e;
  /* semantic (light) */
  --paper: var(--c-paper); --ink: var(--c-ink); --surface: var(--c-white); --muted: #4a4a48; --line: var(--c-ink);
  --card: var(--c-yellow); --card-ink: var(--c-ink); --accent: var(--c-cyan); --accent-ink: var(--c-ink);
  --shadow: var(--c-ink); --btn: var(--c-ink); --btn-ink: var(--c-cyan);
  --mark: var(--c-yellow); --ring: #1d4ed8; --ok: #0f8a4a; --err: var(--c-red);
  --bw: 3px; --off: 6px;
  --track-fill: linear-gradient(var(--c-ink), var(--c-ink)); --track-off: var(--c-white); --track-h: 12px;
  --thumb: 30px; --thumb-bg: var(--c-cyan); --thumb-border: 3px solid var(--c-ink); --thumb-shadow: 3px 3px 0 var(--c-ink);
  /* the bike (read by the sprite's gradients, so they live on :root) */
  --bike-frame: #696d71; --bike-frame-hi: #a9aeb2; --bike-frame-lo: #3b3e41; --bike-tyre: #121212; --bike-metal: #c2c6c9;
  --bike-dark: #1c1d1f; --bike-accent: var(--c-cyan); --bike-shadow: #000;
  color-scheme: light;
}
[data-theme=dark] {
  --paper: #0f0f0f; --ink: #f2eee5; --surface: #1a1a1a; --muted: #c9c4b8; --line: #f2eee5;
  --card: var(--c-yellow); --card-ink: #111; --shadow: var(--c-cyan); --btn: #111; --btn-ink: var(--c-cyan);
  --mark: #7a6f00; --ring: #8ab4ff; --ok: #4ade80; --err: #ff8a80;
  --track-off: #fffdf7;
  color-scheme: dark;
}

body { font-family: var(--font); color: var(--ink); background: var(--paper); font-size: 17px; line-height: 1.45; min-height: 100svh; }
.cond { font-stretch: 72%; }

/* ---------- top bar */
.bar { position: relative; z-index: 6; height: 88px; display: flex; align-items: center; gap: 16px; padding: 0 clamp(16px, 4vw, 56px); border-bottom: 4px solid var(--line); background: var(--paper); }
.logo { font-size: clamp(34px, 3.4vw, 50px); font-weight: 900; font-stretch: 115%; letter-spacing: -.01em; line-height: 1; text-decoration: none; color: var(--ink); padding: 4px 0; min-height: 44px; display: inline-flex; align-items: center; }
.bar-tools { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.sq-btn { width: 48px; height: 48px; border: var(--bw) solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; box-shadow: 4px 4px 0 var(--shadow); transition: transform .08s, box-shadow .08s; }
.pill-btn { height: 48px; padding: 0 18px; border: var(--bw) solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-stretch: 72%; font-size: 22px; text-transform: uppercase; letter-spacing: .01em; box-shadow: 4px 4px 0 var(--shadow); transition: transform .08s, box-shadow .08s; }
.pill-btn--cyan { background: var(--c-cyan); color: #111; border-color: #111; }
.pill-btn .i { width: 22px; height: 22px; stroke-width: 2.6; }
.sq-btn:hover, .pill-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--shadow); }
.sq-btn:active, .pill-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--shadow); }

/* ---------- the board */
.board { position: relative; height: calc(100svh - 88px); min-height: 520px; padding: 16px clamp(110px, 10vw, 160px) 24px; }
.deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.blk { position: absolute; border: 4px solid var(--line); }
.blk--y1 { left: -4px; top: 18%; width: clamp(40px, 7vw, 104px); height: 36%; background: var(--c-yellow); }
.blk--c1 { left: -4px; top: calc(54% - 4px); width: clamp(40px, 7vw, 104px); height: 26%; background: var(--c-cyan); }
.blk--y2 { left: -4px; top: calc(80% - 8px); width: clamp(40px, 7vw, 104px); height: calc(20% + 12px); background: var(--c-yellow); }
.blk--c2 { right: -4px; top: -4px; width: clamp(18px, 2.2vw, 32px); height: 42%; background: var(--c-cyan); }
.blk--c3 { right: -4px; bottom: -4px; width: clamp(40px, 6.6vw, 96px); height: 24%; background: var(--c-cyan); }

.ask { position: relative; z-index: 2; max-width: 1060px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.ask-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.ask-chat .chips--dock { flex: none; }
.ask-top { display: flex; align-items: center; gap: 18px; flex: none; min-width: 0; }
.ask-top h1 { font-size: 36px; font-weight: 800; font-stretch: 80%; letter-spacing: -.01em; line-height: 1; text-transform: uppercase; flex: none; }
.chips { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding: 4px 8px 8px 4px; margin: -4px -8px -8px -4px; min-width: 0; flex: 1; }
.chips::-webkit-scrollbar { display: none; }
.ask-top .chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.chip { flex: none; height: 50px; padding: 0 20px; border: var(--bw) solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink); font-weight: 700; font-stretch: 72%; font-size: 23px; text-transform: uppercase; letter-spacing: .005em; line-height: 1; white-space: nowrap; transition: transform .08s, box-shadow .08s, background-color .12s; font-size: 25px; }
.chips .chip:first-child { background: var(--c-yellow); color: #111; border-color: #111; }
.chip:hover { background: var(--c-yellow); color: #111; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--shadow); }
.chip:active { transform: translate(1px, 1px); box-shadow: none; }
.chip mark { background: var(--c-cyan); color: #111; padding: 0 2px; }
.chips-empty { font-weight: 600; padding: 10px 2px; }

.ask-tools { display: none; align-items: center; gap: 14px; flex: none; }
.tabs { display: flex; border: var(--bw) solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 4px 4px 0 var(--shadow); overflow-x: auto; scrollbar-width: none; flex: 0 1 auto; min-width: 0; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; height: 42px; padding: 0 12px; font-weight: 700; font-stretch: 72%; font-size: 17.5px; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.tab + .tab { border-left: var(--bw) solid var(--line); }
.tab:hover { background: var(--c-yellow); color: #111; }
.tab[aria-selected=true] { background: var(--ink); color: var(--paper); }
.tab:focus-visible { outline-offset: -5px; }
.search { flex: 1 1 200px; max-width: 380px; height: 48px; display: flex; align-items: center; border: var(--bw) solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 4px 4px 0 var(--shadow); }
.search > .i { position: absolute; left: 12px; pointer-events: none; stroke-width: 2.6; }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; padding: 0 6px 0 42px; font-size: 18px; font-weight: 600; border-radius: inherit; }
.search input::placeholder { color: var(--muted); font-weight: 500; }
.search input::-webkit-search-cancel-button { display: none; }
.search input:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.search-clear { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.results { background: var(--surface); border: var(--bw) solid var(--line); border-radius: 12px; box-shadow: 6px 6px 0 var(--shadow); min-width: min(380px, calc(100vw - 32px)); }
.opt { min-height: 46px; padding: 8px 10px; border-radius: 6px; }
.opt-q { font-weight: 700; font-stretch: 78%; font-size: 21px; line-height: 1.1; text-transform: uppercase; }
.opt-t { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.opt[aria-selected=true], .opt:hover { background: var(--c-yellow); color: #111; }
.opt[aria-selected=true] .opt-t, .opt:hover .opt-t { color: #111; }
.opt mark { background: var(--c-yellow); color: #111; box-shadow: 0 0 0 2px var(--c-yellow); }
.opt[aria-selected=true] mark, .opt:hover mark { background: var(--c-cyan); box-shadow: 0 0 0 2px var(--c-cyan); }
.opt--ask .opt-q { font-stretch: 90%; font-size: 16px; text-transform: none; font-weight: 600; }
.opt-head { font-size: 13px; font-weight: 700; text-transform: uppercase; }

/* ---------- conversation */
.chat-log { --pad-l: 4px; --pad-r: 14px; flex: 1; padding: 8px var(--pad-r) 18px var(--pad-l); gap: 20px; scroll-padding: 12px; }
/* the conversation is a centred column, like the concept: question on the right with its icon, the card to its left */
.chat-log > .msg { width: min(780px, 100%); margin-inline: auto; }
.msg { gap: 14px; }
.avatar { flex: none; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border: var(--bw) solid var(--line); border-radius: 10px; background: #111; color: var(--c-cyan); font-weight: 900; font-stretch: 110%; font-size: 24px; margin-top: 2px; }
.avatar--user { background: transparent; color: var(--ink); border: 0; width: 46px; }
.avatar--user .i { width: 48px; height: 48px; }
.bubble--user { position: relative; max-width: min(580px, 82%); background: var(--surface); border: var(--bw) solid var(--line); border-radius: 14px; box-shadow: var(--off) var(--off) 0 var(--shadow); padding: 14px 22px 15px; font-weight: 700; font-stretch: 72%; font-size: 32px; line-height: 1.02; text-transform: uppercase; }
.bubble--user::after { content: ""; position: absolute; right: 26px; bottom: -14px; width: 18px; height: 18px; background: var(--surface); border-right: var(--bw) solid var(--line); border-bottom: var(--bw) solid var(--line); transform: skewY(40deg) rotate(0deg); transform-origin: top; }
.msg--bot .bubble { position: relative; max-width: min(560px, calc(100% - 60px)); background: var(--surface); border: var(--bw) solid var(--line); border-radius: 14px; box-shadow: var(--off) var(--off) 0 var(--shadow); padding: 14px 18px; font-size: 17px; font-weight: 500; }
.msg--bot .bubble--card { background: var(--card); color: var(--card-ink); border-color: #111; border-radius: 16px; box-shadow: 10px 10px 0 var(--shadow); padding: 16px 22px 18px; width: min(620px, calc(100% - 70px)); }
.bubble--card:has(.range) > .bubble-tag { display: none; }
.msg--bot .bubble--form { width: min(520px, calc(100% - 60px)); }
.bubble-tag { display: inline-block; font-weight: 800; font-stretch: 72%; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; border: 2px solid currentColor; border-radius: 99px; padding: 1px 10px; margin-bottom: 10px !important; }
.bubble-sub { font-weight: 800; font-stretch: 72%; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; margin-top: 14px !important; }
.typing { padding: 20px 26px !important; gap: 9px !important; }
.typing i { width: 15px; height: 15px; background: var(--ink); }

.ans { font-size: 15.5px; line-height: 1.4; }
.bubble--card:has(.range) .ans > p:first-child { font-size: 15px; line-height: 1.35; }
.range .ans-bike { margin: -6px 0 -4px; }
.bubble--card:has(.range) .ans > * + * { margin-top: 6px; }
.range-table { margin-top: 6px; }
.ans strong { font-weight: 800; }
.ans-link { font-weight: 800; text-decoration-thickness: 3px; text-underline-offset: 3px; }
.ans-bike { margin: 2px -6px 4px; }
.ans-bike svg { max-height: 140px; }
.ans-bike figcaption { font-size: 14px; font-weight: 600; margin-top: 2px; }
.range-ctl { margin-top: 0; }
.range-label, .range-pack { font-weight: 800; font-stretch: 72%; font-size: 19px; text-transform: uppercase; }
.range-input { height: 34px; }
.range-input::-webkit-slider-runnable-track { border: 3px solid #111; box-sizing: content-box; }
.range-input::-moz-range-track { border: 3px solid #111; }
.range-ticks { font-weight: 700; font-stretch: 72%; font-size: 15px; text-transform: uppercase; }
.range-table, .ans-table { width: 100%; border-collapse: collapse; margin-top: 12px; text-transform: uppercase; font-stretch: 72%; }
.range-table th, .range-table td { text-align: left; padding: 3px 8px 3px 0; font-size: 27px; font-weight: 700; line-height: 1.05; border-bottom: 3px solid #111; }
.range-table thead th { font-size: 20px; font-weight: 700; padding-bottom: 6px; }
.range-table tbody tr:last-child > * { border-bottom: 0; }
.ans-table th, .ans-table td { padding: 6px 10px 6px 0; font-size: 20px; font-weight: 700; line-height: 1.1; border-bottom: 3px solid currentColor; }
.ans-table thead th { font-size: 16px; letter-spacing: .03em; }
.ans-table tbody tr:last-child > * { border-bottom: 0; }
.msg--bot .bubble:not(.bubble--card) .ans-table th, .msg--bot .bubble:not(.bubble--card) .ans-table td { border-color: var(--line); }
.ans-note { font-size: 14px; font-weight: 600; }
.ans-list { padding-left: 1.5em; }
.ans-list li::marker { font-weight: 900; }
.ans-btn { min-height: 60px; width: 100%; padding: 8px 16px; border-radius: 10px; background: var(--btn); color: var(--btn-ink); border: var(--bw) solid #111; font-weight: 800; font-stretch: 72%; font-size: 40px; line-height: 1; text-transform: uppercase; letter-spacing: .01em; margin-top: 18px !important; transition: transform .08s, box-shadow .08s; }
.ans-btn .i { width: 28px; height: 28px; stroke-width: 2.6; }
.ans-btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 #111; }
.ans-btn:active { transform: translate(2px, 2px); box-shadow: none; }

.fb { margin-top: 16px; gap: 10px; }
.fb-q { font-weight: 800; font-stretch: 72%; font-size: 18px; text-transform: uppercase; margin-right: 4px !important; }
.fb-btn, .fb-human { height: 40px; padding: 0 12px; border: var(--bw) solid #111; border-radius: 8px; background: var(--c-white); color: #111; font-weight: 800; font-stretch: 72%; font-size: 17px; text-transform: uppercase; box-shadow: 3px 3px 0 #111; transition: transform .08s, box-shadow .08s; }
.fb-btn:hover, .fb-human:hover { background: var(--c-cyan); }
.fb-btn:active, .fb-human:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #111; }
.fb--done { font-weight: 800; font-stretch: 80%; font-size: 19px; text-transform: uppercase; }
.fb-ico { width: 32px; height: 32px; border: var(--bw) solid #111; border-radius: 50%; background: var(--c-cyan); color: #111; display: inline-flex; align-items: center; justify-content: center; }
.fb-ico .i { width: 18px; height: 18px; stroke-width: 3.2; }
.fb--down p { flex: 1 1 200px; }

.fu { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px !important; align-items: center; }
.fu-label { width: 100%; font-weight: 800; font-stretch: 72%; font-size: 16px; text-transform: uppercase; letter-spacing: .05em; }
.fu .chip { height: 40px; font-size: 19px; padding: 0 14px; background: var(--c-white); color: #111; border-color: #111; }
.chip--q { flex: 0 1 auto; max-width: 100%; height: auto !important; min-height: 44px; padding: 8px 14px !important; white-space: normal; text-align: left; border-radius: 12px !important; font-size: 19px !important; line-height: 1.08 !important; }
.link-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; font-weight: 800; font-stretch: 80%; font-size: 17px; text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.link-btn .i { width: 20px; height: 20px; }

/* composer */
.composer { flex: none; display: flex; align-items: stretch; height: 62px; border: var(--bw) solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--off) var(--off) 0 var(--shadow); }
.composer input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 18px; font-size: 19px; font-weight: 600; border-radius: 12px 0 0 12px; }
.composer input::placeholder { color: var(--muted); font-weight: 500; }
.composer input:focus-visible { outline: 3px solid var(--ring); outline-offset: -6px; }
.send { display: inline-flex; align-items: center; gap: 10px; padding: 0 22px; background: var(--c-cyan); color: #111; border-left: var(--bw) solid var(--line); border-radius: 0 11px 11px 0; font-weight: 800; font-stretch: 72%; font-size: 24px; text-transform: uppercase; }
.send .i { width: 22px; height: 22px; stroke-width: 2.6; }
.send:hover { background: var(--c-yellow); }
.send:focus-visible { outline-offset: -6px; }

/* hand-off form */
.form-title { font-weight: 800; font-stretch: 75%; font-size: 30px; text-transform: uppercase; line-height: 1; }
.form-title:focus { outline: none; }
.form-sub { font-size: 15.5px; font-weight: 500; margin-top: 6px !important; }
.field label { font-weight: 800; font-stretch: 72%; font-size: 17px; text-transform: uppercase; letter-spacing: .03em; }
.field input, .field textarea { border: var(--bw) solid var(--line); border-radius: 8px; background: var(--paper); padding: 10px 12px; font-size: 17px; font-weight: 600; color: var(--ink); }
.field input { height: 48px; }
.field [aria-invalid=true] { border-color: var(--err); box-shadow: 3px 3px 0 var(--err); }
.field-err { font-size: 14.5px; font-weight: 700; color: var(--err); }
.err-sum { border: var(--bw) solid var(--err); color: var(--err); border-radius: 8px; padding: 8px 12px; font-weight: 800; font-stretch: 80%; font-size: 17px; text-transform: uppercase; }
.btn-primary { height: 52px; padding: 0 20px; border: var(--bw) solid #111; border-radius: 10px; background: var(--c-cyan); color: #111; font-weight: 800; font-stretch: 72%; font-size: 24px; text-transform: uppercase; box-shadow: 4px 4px 0 var(--shadow); }
.btn-primary:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--shadow); }
.btn-ghost { height: 52px; padding: 0 14px; font-weight: 800; font-stretch: 72%; font-size: 20px; text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.sent { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: center; }
.sent-ico { width: 44px; height: 44px; border: var(--bw) solid var(--line); border-radius: 50%; background: var(--c-cyan); color: #111; display: inline-flex; align-items: center; justify-content: center; }
.sent-ico .i { stroke-width: 3.2; }
.sent-title { font-weight: 800; font-stretch: 75%; font-size: 30px; text-transform: uppercase; }
.sent p { grid-column: 1 / -1; margin-top: 10px !important; }
.sent-ref { font-weight: 800; font-stretch: 80%; text-transform: uppercase; font-size: 15px; letter-spacing: .04em; }

/* menus */
.menu { background: var(--surface); border: var(--bw) solid var(--line); border-radius: 12px; box-shadow: 6px 6px 0 var(--shadow); }
.menu [role=menuitem] { border-radius: 6px; font-weight: 800; font-stretch: 75%; font-size: 21px; text-transform: uppercase; color: var(--ink); }
.menu [role=menuitem]:hover, .menu [role=menuitem]:focus-visible { background: var(--c-yellow); color: #111; outline: none; }

/* the bell sticker */
.bell { position: absolute; z-index: 3; left: calc(50% + 420px); top: 47%; width: clamp(140px, 12vw, 190px); aspect-ratio: 1; transform: rotate(-14deg); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); filter: drop-shadow(5px 6px 0 var(--shadow)); }
.bell svg { width: 100%; height: 100%; overflow: visible; }
.bell:hover { transform: rotate(-6deg) scale(1.05); }
.bell:focus-visible { outline-offset: 6px; border-radius: 50%; }
.bell-die { fill: #fffdf7; stroke: #111; stroke-width: 3; }
.bell-paper { fill: #fffdf7; }
.bell-text { font-family: var(--font); font-weight: 900; font-stretch: 78%; font-size: 23px; letter-spacing: 1.2px; fill: #111; }
.bell-dome { fill: var(--c-yellow); stroke: #111; stroke-width: 4; stroke-linejoin: round; }
.bell-shine { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; opacity: .9; }
.bell-base { fill: var(--c-cyan); stroke: #111; stroke-width: 4; }
.bell-knob { fill: #111; }
.bell-lever { fill: none; stroke: #111; stroke-width: 6; stroke-linecap: round; }
.bell-thumb { fill: var(--c-cyan); stroke: #111; stroke-width: 4; }
.bell-clamp { fill: none; stroke: #111; stroke-width: 5; stroke-linecap: round; }
.bell-waves path { fill: none; stroke: #111; stroke-width: 4; stroke-linecap: round; opacity: 0; }
.bell-body { transform-origin: 110px 140px; }
.bell.is-ringing .bell-body { animation: ring .9s cubic-bezier(.3, .7, .4, 1); }
.bell.is-ringing .bell-waves path { animation: wave .9s ease-out; }
@keyframes ring { 10% { transform: rotate(14deg); } 25% { transform: rotate(-12deg); } 40% { transform: rotate(9deg); } 55% { transform: rotate(-6deg); } 70% { transform: rotate(3deg); } }
@keyframes wave { 15% { opacity: 1; } 100% { opacity: 0; transform: translateX(-8px); } }

/* ---------- list view / no-JS accordion */
.faq-list { position: relative; z-index: 2; flex: 1; min-height: 0; width: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 4px 14px 30px 4px; }
.nojs .faq-list { height: auto; overflow: visible; }
.nojs .board { height: auto; min-height: calc(100svh - 88px); }
.faq-list-head h2 { font-weight: 900; font-stretch: 80%; font-size: 58px; text-transform: uppercase; line-height: .95; }
.faq-list-head h2:focus { outline: none; }
.faq-list-sub { font-weight: 600; margin-top: 6px; }
.faq-group { margin-top: 26px; }
.faq-group-title { font-weight: 900; font-stretch: 72%; font-size: 24px; text-transform: uppercase; display: inline-block; background: var(--c-cyan); color: #111; border: var(--bw) solid #111; padding: 2px 12px; margin-bottom: 12px; transform: rotate(-1.5deg); }
.faq-group:nth-of-type(even) .faq-group-title { background: var(--c-yellow); transform: rotate(1deg); }
.faq-item { border: var(--bw) solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 4px 4px 0 var(--shadow); }
.faq-item + .faq-item { margin-top: 12px; }
.faq-item summary { min-height: 54px; padding: 10px 14px; font-weight: 800; font-stretch: 72%; font-size: 23px; text-transform: uppercase; line-height: 1.05; border-radius: 8px; }
.faq-item summary:hover { background: var(--c-yellow); color: #111; }
.faq-item[open] summary { border-bottom: var(--bw) solid var(--line); border-radius: 8px 8px 0 0; }
.faq-ico { stroke-width: 3; width: 24px; height: 24px; }
.faq-item[open] .faq-ico { transform: rotate(45deg); }
.faq-q mark { background: var(--c-yellow); color: #111; }
.faq-a { padding: 14px 16px 18px; }
.faq-a .ans-btn { max-width: 420px; font-size: 26px; min-height: 54px; color: var(--c-cyan); }
.faq-a .range-table th, .faq-a .range-table td { border-color: var(--line); }
.faq-a .range-input::-webkit-slider-runnable-track { border-color: var(--line); }
.faq-empty { margin-top: 20px; font-weight: 700; }
.faq-help { margin-top: 30px; padding: 16px 18px; border: var(--bw) solid #111; border-radius: 12px; background: var(--c-yellow); color: #111; box-shadow: 6px 6px 0 var(--shadow); }
.faq-help h3 { font-weight: 900; font-stretch: 75%; font-size: 30px; text-transform: uppercase; }
.faq-help a { font-weight: 800; }

/* ---------- tablets and small laptops */
@media (max-width: 1180px) {
  .board { padding-left: clamp(64px, 8vw, 110px); padding-right: clamp(40px, 6vw, 90px); }
  .bell { display: none; }
}
@media (max-width: 1000px) and (min-width: 701px) and (min-height: 501px) {
  .ask-tools { flex-wrap: wrap; }
  .tabs { order: 2; flex-basis: 100%; }
  .search { max-width: none; }
}

/* ---------- phones (and phones on their side) */
@media (max-width: 700px), (max-height: 500px) {
  .only-wide { display: none !important; }
  .only-phone { display: inline-flex !important; }
  .bar { height: 64px; border-bottom-width: 3px; padding: 0 10px 0 16px; }
  .logo { font-size: 34px; }
  .bar-tools { gap: 10px; }
  .sq-btn { width: 44px; height: 44px; box-shadow: 3px 3px 0 var(--shadow); }
  .board { height: calc(100svh - 64px); height: calc(100dvh - 64px); min-height: 0; padding: 0; }
  .deco, .bell { display: none; }
  .ask { gap: 10px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }
  .ask-chat { gap: 10px; }
  .js .ask-top { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .js .ask-top .chips { display: none; }
  .ask-tools { display: none; flex-direction: column; align-items: stretch; gap: 10px; }
  .ask-tools.is-open { display: flex; }
  .ask-tools .search { order: 1; max-width: none; flex: none; }
  .ask-tools .tabs { order: 2; }
  .tab { height: 44px; }
  .chat-log { --pad-l: 2px; --pad-r: 8px; padding: 8px var(--pad-r) 14px var(--pad-l); gap: 18px; }
  .composer { height: 56px; box-shadow: 4px 4px 0 var(--shadow); }
  .chips--dock.only-phone { display: flex !important; }
  .chips--dock { margin: -4px -12px -8px; padding: 4px 12px 8px; scroll-padding: 12px; }
  .send { padding: 0 16px; font-size: 21px; }
  .chips { gap: 10px; padding: 4px 6px 8px 4px; }
  .chip, .fu .chip { height: 44px; font-size: 21px; padding: 0 15px; }
  .avatar { width: 38px; height: 38px; font-size: 20px; }
  .avatar--user .i { width: 32px; height: 32px; }
  .bubble--user { font-size: 22px; max-width: 80%; }
  .msg--bot .bubble { max-width: calc(100% - 52px); }
  .msg--bot .bubble--card, .msg--bot .bubble--form { width: calc(100% - 52px); padding: 14px 16px 16px; box-shadow: 7px 7px 0 var(--shadow); }
  .range-table th, .range-table td { font-size: 22px; padding: 2px 6px 2px 0; }
  .range-table thead th { font-size: 17px; }
  .ans-bike svg { max-height: 104px; }
  .bubble--user { font-size: 21px; }
  .ans-btn { font-size: 23px; min-height: 54px; white-space: nowrap; padding: 8px 10px; }
  .fb-btn, .fb-human { height: 44px; }
  .faq-list { padding: 8px 2px 30px; }
  [data-view=list] .ask-tools { display: flex; }
  .faq-list-head h2 { font-size: 44px; }
  .results { min-width: 0; }
}
@media (max-height: 500px) {
  .bar { height: 54px; }
  .board { height: calc(100svh - 54px); }
}
.kw { font-size: .82em; opacity: .85; margin-left: 4px; white-space: nowrap; }

/* touch screens: every control at least 44 px */
@media (pointer: coarse) {
  .tab, .fu .chip { height: 44px; }
  .search { height: 52px; }
  .fb-btn, .fb-human { height: 44px; }
}
@media (max-height: 600px) {
  .fu--greet, .bubble-sub { display: none; }
}

/* header search (desktop) and the topic menu beside FAQ */
.search--bar { flex: 1 1 260px; max-width: 380px; margin: 0 auto 0 clamp(16px, 4vw, 64px); box-shadow: 4px 4px 0 var(--shadow); }
.topic-wrap { flex: none; }
.topic-btn { height: 50px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 18px; border: var(--bw) solid var(--line); border-radius: 99px; background: var(--ink); color: var(--paper); font-weight: 800; font-stretch: 72%; font-size: 23px; text-transform: uppercase; box-shadow: 3px 3px 0 var(--shadow); transition: transform .08s, box-shadow .08s; }
.topic-btn .i { width: 20px; height: 20px; stroke-width: 3; transition: transform .2s; }
.topic-btn[aria-expanded=true] .i { transform: rotate(180deg); }
.topic-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow); }
.menu--left { left: 0; right: auto; }
.menu [role=menuitemradio] { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 6px; font-weight: 800; font-stretch: 75%; font-size: 21px; text-transform: uppercase; color: var(--ink); text-align: left; }
.menu [role=menuitemradio] .i { visibility: hidden; stroke-width: 3; }
.menu [role=menuitemradio][aria-checked=true] .i { visibility: visible; }
.menu [role=menuitemradio]:hover, .menu [role=menuitemradio]:focus-visible { background: var(--c-yellow); color: #111; outline: none; }
@media (max-width: 1100px) {
  .bar .pill-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bar .pill-btn { padding: 0 12px; }
}
/* shorter laptop screens: the showcase card still fits with its button */
@media (max-height: 860px) and (min-width: 701px) and (min-height: 501px) {
  .ans-bike svg { max-height: 104px; }
  .bubble--user { font-size: 28px; padding: 10px 18px 11px; }
  .range-table th, .range-table td { font-size: 23px; padding: 2px 8px 2px 0; }
  .range-table thead th { font-size: 18px; }
  .ans-btn { min-height: 52px; font-size: 32px; margin-top: 12px !important; }
  .range-input { height: 30px; }
  .chip, .topic-btn { height: 46px; font-size: 22px; }
}

/* tablets and small laptops: the bell sticker would crowd the card, so hand-off moves into the header */
.bar-human { display: none; }
@media (max-width: 1180px) and (min-width: 701px) and (min-height: 501px) { .bar-human { display: inline-flex; } }