/* The Questions section and its answers (5 October 2026): the answer pop-up style of round five's 03,
 * "Your Question First", scoped to .axp-answer so it never touches the tours. Role tokens only. */

/* ---------- the section on the page ---------- */
.questions .q-head{display:grid;grid-template-columns:minmax(0,1fr);gap:12px 56px;align-items:end;margin-bottom:40px}
/* More questions follows the tour cards, inside Take a tour (Ken, round thirteen) */
.more-q{margin-top:80px;padding-top:56px;border-top:var(--axis-hairline)}
.questions .q-head h2{margin:0}
.axis-root .questions .q-head .lede{margin:0;font-size:clamp(18px,1.5vw,21px)}
.q-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.q-card{position:relative;display:flex;flex-direction:column;gap:16px;width:100%;height:100%;padding:24px 24px 18px 26px;text-align:left;font:inherit;color:var(--axis-fg);background:var(--axis-raised);border:1.5px solid var(--axis-border);border-radius:22px 22px 22px 6px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.q-card:hover{border-color:var(--axis-link);box-shadow:0 12px 34px rgba(11,18,32,.08)}
.q-card:focus-visible{outline:3px solid var(--axis-link);outline-offset:3px}
.q-card .q{display:block;font:800 clamp(21px,1.9vw,26px)/1.22 var(--axis-font-display);letter-spacing:-.03em;color:var(--axis-heading);text-wrap:balance}
.q-card .q::before{content:"\201C";color:var(--axis-link);margin-right:1px}
.q-card .q::after{content:"\201D";color:var(--axis-link);margin-left:1px}
.q-card .a{display:flex;align-items:center;gap:16px;padding-top:14px;border-top:var(--axis-hairline);margin-top:auto}
.q-card .a-t{flex:1;min-width:0}
.q-card .a-x{display:block;font:500 16px/1.4 var(--axis-font-body);color:var(--axis-fg-muted);text-wrap:balance}
.q-card .go{flex:none;width:42px;height:42px;border-radius:50%;background:var(--axis-accent);display:grid;place-items:center;transition:transform .15s}
.q-card .go svg{width:18px;height:18px;fill:none;stroke:var(--axis-accent-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.q-card:hover .go{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.q-card,.q-card .go{transition:none}.q-card:hover .go{transform:none}}

/* ---------- an answer, in its pop-up ---------- */
.axp-answer .axp-eyebrow .axp-tt{font:600 17px/1.35 var(--axis-font-body);text-transform:none;letter-spacing:-.005em}
.axp-answer .axp-eyebrow .axp-tt::before{content:"\201C"}
.axp-answer .axp-eyebrow .axp-tt::after{content:"\201D"}
.axp-answer .tour{position:relative;background:var(--axis-band);padding:0 0 8px}
:root[data-axis-theme="dark"] .axp-answer .tour{background:var(--axis-bg)}
@media (prefers-color-scheme:dark){:root:not([data-axis-theme="light"]) .axp-answer .tour{background:var(--axis-bg)}}
.axp-answer .tour .wrap{max-width:none;padding:0 48px}
.axp-answer .tour-h:focus{outline:none}
.axp-answer .tour-head{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:40px 64px;align-items:center;padding:44px 0 28px}
.axp-answer .tour-head.head-solo{grid-template-columns:minmax(0,1fr)}
.axp-answer .tour-head.head-solo .tour-intro{max-width:52em}
.axis-root .axp-answer .tour-head .reply{font:600 clamp(19px,1.6vw,22px)/1.35 var(--axis-font-display);letter-spacing:-.015em;color:var(--axis-link);margin:0 0 12px}
.axp-answer .tour-head .tour-h{font-size:clamp(32px,3.6vw,52px);letter-spacing:-.055em;line-height:1.03;margin:0 0 18px}
.axis-root .axp-answer .tour-head .lede{margin:0 0 20px;max-width:32em}
.axp-answer .tour-visual{min-width:0}
.axp-answer .part{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:28px 64px;align-items:start;padding:52px 0;border-top:var(--axis-hairline)}
.axp-answer .part-stack{grid-template-columns:minmax(0,1fr)}
.axp-answer .part-stack .part-copy{max-width:46em}
.axis-root .axp-answer .part-k{display:flex;align-items:center;gap:10px;font:700 12px var(--axis-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--axis-eyebrow);margin:0 0 16px}
.axp-answer .part h3{font-size:clamp(26px,2.8vw,40px);letter-spacing:-.045em;line-height:1.06;margin:0 0 16px}
.axis-root .axp-answer .part-copy p{font-size:17px;line-height:1.65;margin:0 0 12px}
.axp-answer .part-copy .asks{margin-top:18px}
.axp-answer .part-visual{min-width:0}
.axis-root .axp-answer .part-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:baseline;margin:18px 0 0;padding:14px 18px;border:1.5px solid var(--axis-border);border-radius:12px;background:var(--axis-raised);font-size:15.5px;line-height:1.55}
.axp-answer .pn-k{font:700 11px var(--axis-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--axis-eyebrow)}
/* kit elements in the answer: same markup as in the pop-ups, without the frame */
.axp-answer .axb.axb-inline{padding:0;background:transparent;gap:16px;font-size:16px}
.axp-answer .axb.axb-inline .axb-el + .axb-el{margin-top:18px}
.axp-answer .axb.axb-inline .axb-flow:not(.axb-conv){flex-wrap:nowrap}
.axp-answer .axb.axb-inline .axb-fstep{flex:1 1 0;min-width:0}
.axp-answer .axb.axb-inline .axb-arrow{display:block}
.axp-answer .axb.axb-inline .axb-fstep:last-child .axb-arrow{display:none}
@container axb (max-width: 520px){
  .axp-answer .axb.axb-inline .axb-flow:not(.axb-conv){flex-direction:column}
  .axp-answer .axb.axb-inline .axb-fstep{flex-direction:column;align-items:stretch}
  .axp-answer .axb.axb-inline .axb-arrow{width:auto;height:24px;line-height:24px;transform:rotate(90deg)}
}
.axp-answer .part-visual .axb-chart{max-width:360px;margin:0 auto}
.axp-answer .part-visual .axb-el-chart .axb-el-cap{text-align:center}
.axp-answer .axb.axb-inline .axb-el-title{margin-bottom:10px}

/* the ending: Quick Start, the tour that tells the whole story, and the way back */
.axp-answer .tour-end{padding:48px 0 48px;border-top:var(--axis-hairline)}
.axp-answer .end-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:0;background:var(--axis-raised);border:1.5px solid var(--axis-heading);clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%);position:relative}
.axp-answer .end-card::before{content:"";position:absolute;top:0;right:0;width:37px;height:37px;background:linear-gradient(to bottom left,transparent calc(50% - 1px),var(--axis-heading) calc(50% - 1px),var(--axis-heading) calc(50% + .6px),transparent calc(50% + .6px))}
.axp-answer .end-main{display:flex;gap:28px;align-items:center;padding:34px 40px 36px}
.axp-answer .end-main h3{font-size:clamp(26px,2.8vw,40px);letter-spacing:-.045em;line-height:1.05;margin:0 0 12px}
.axis-root .axp-answer .end-main p:not(.eyebrow){font-size:17px;margin:0 0 22px}
.axis-root .axp-answer .end-main .eyebrow{margin-bottom:12px}
.axp-answer .end-main .axis-btn{cursor:pointer}
.axp-answer .end-more{padding:34px 36px 36px;border-left:var(--axis-hairline);display:flex;flex-direction:column;justify-content:center;gap:12px;align-items:flex-start}
.axis-root .axp-answer .end-k{margin:0;font-size:15px;line-height:1.5;color:var(--axis-fg-muted)}
.axp-answer .tour-jump{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;cursor:pointer;text-align:left;font:700 17px/1.35 var(--axis-font-display);letter-spacing:-.015em;color:var(--axis-link)}
.axp-answer .tour-jump:hover span:first-child{text-decoration:underline;text-underline-offset:3px}
.axp-answer .back-btn{margin-top:8px;display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--axis-font-body);color:var(--axis-fg);background:transparent;border:1.5px solid var(--axis-fg);border-radius:var(--axis-radius-sm);padding:11px 16px;cursor:pointer}
.axp-answer .back-btn:hover{background:var(--axis-fg);color:var(--axis-bg)}

@media (max-width:1060px){
  .questions .q-head{grid-template-columns:1fr}
  .axp-answer .tour-head,.axp-answer .part,.axp-answer .end-card{grid-template-columns:minmax(0,1fr)}
  .axp-answer .end-more{border-left:0;border-top:var(--axis-hairline)}
}
@media (max-width:760px){
  .q-grid{grid-template-columns:1fr}
  .q-card{padding:20px 18px 14px 20px}
  .axp-answer .tour .wrap{padding:0 20px}
  .axp-answer .tour-head{padding:28px 0 20px}
  .axp-answer .part{padding:40px 0}
  .axp-answer .end-main{padding:26px 20px 28px}
  .axp-answer .end-more{padding:24px 20px 26px}
  .axp-answer .axp-eyebrow .axp-tt{font-size:15px}
}