#faq {
  font-family:var(--page-font);
  color:#081a34;
  --paper:#f7faff;
  --ink:#081a34;
  --muted:#506580;
  --accent:#396eaf;
  --rule:#c1d2e7;
}
#faq h2 {font-family:inherit;color:var(--ink)}
#faq h2 em {color:var(--accent)}
#faq .split > div > p {color:var(--muted)}
#faq .primary { margin-block-start:20px; }
.oct-continuation :is(.faq-up,.back-top):active {background:#deedff}
#faq .accordion h4 {font:650 14px/1.4 var(--page-font);color:var(--accent); margin:22px 0 5px;}
#faq .accordion h4:first-child {margin-top:0}
#faq .accordion details {border-bottom:1px solid var(--rule);padding:0}
#faq .accordion summary {
  align-items:center; min-height:46px; padding:12px 0; gap:14px;
  font:650 clamp(15px,1.14vw,18px)/1.4 var(--page-font);
  color:var(--ink);cursor:pointer;transition:color .2s;
}
#faq summary::-webkit-details-marker {display:none}
#faq summary::after {content:none}
#faq .faq-plus {flex:none;color:var(--accent)}
#faq .stem {transition:opacity .22s}
#faq details[open] .stem {opacity:0}
#faq details p {margin:0;padding:0 28px 15px 0;color:var(--muted);font:450 clamp(14px,1.02vw,16px)/1.55 var(--page-font);animation:none}
#faq details[open] p {animation:none}
#faq .conversation {gap:10px;margin-top:27px;min-height:128px;padding:5px 0 10px;}
#faq .chat-line {font-family:inherit;border-color:var(--rule);border-radius:16px;padding:11px 14px;box-shadow:0 5px 16px -10px #28548d7a;}
#faq .ask {background:linear-gradient(115deg,#fff,#f2f7ff);border-bottom-left-radius:4px;}
#faq .answer {background:linear-gradient(115deg,#162e4a,#081a34);color:#fff;border-color:#233f5d;border-bottom-right-radius:4px;}
#faq .chat-line i {font-family:inherit}
#faq .ask i {background:#deedff;color:var(--accent)}
#faq .answer i {background:#233f5d;color:#bcebff}
#faq :is(summary,.faq-up):focus-visible,.back-top:focus-visible {outline:2px solid #367ce6;outline-offset:3px;}
@media(hover:hover) {
  #faq .accordion summary:hover {color:var(--accent)}
  .oct-continuation :is(.faq-up,.back-top):hover {background:#e9f3ff;border-color:#6d9dd4;color:#1a439f}
}
/* The lower limb uses the same photograph, rotated in its original aspect ratio.
   The top veil blends with FAQ, and the dark end continues into the form section. */
#faq .faq-horizon {
  height:clamp(205px,22.5vw,390px); width:100%; position:relative; overflow:hidden;
  background:#030710;pointer-events:none;
}
.faq-horizon::before,.faq-horizon::after {content:"";position:absolute;inset:0}
.faq-horizon::before {
  background:url("./assets/product-horizon.webp") center top / cover no-repeat;
  inset-inline:-0.35%;
  transform:rotate(180.75deg);
}
.faq-horizon::after {
  background:linear-gradient(to bottom,var(--paper) 0%,rgba(247,250,255,.96) 6%,rgba(247,250,255,.72) 22%,rgba(247,250,255,.26) 43%,transparent 66% 88%,#030710 100%);
}
.oct-continuation #apply::before {height:42px;transform:none;background:linear-gradient(#030710,transparent)}
.oct-continuation #apply .wrap {padding-top:clamp(32px,4vw,64px)}
.oct-continuation #faq,.oct-continuation #apply {border-block-width:0}
#faq .faq-tools {display:none}
.oct-continuation :is(.back-top,.faq-up) {
  color:#396eaf; border:1px solid #c1d2e7; border-radius:50%;
  background:#f7faff; transition:background .2s,border-color .2s,color .2s;
}
@media(max-width:720px) {
  #faq .split {row-gap:22px}
  #faq .conversation {min-height:0;gap:8px;margin-top:18px;padding:0}
  #faq .accordion summary {padding:12px 0}
  #faq details p {padding-right:17px}
  #faq .faq-horizon {height:clamp(155px,42vw,205px)}
  #faq .faq-tools {display:flex;justify-content:flex-end;margin-top:12px;padding-right:env(safe-area-inset-right)}
  #faq .faq-up {width:44px;height:44px;display:grid;place-items:center}
  .oct-continuation .back-top {bottom:max(16px,env(safe-area-inset-bottom));right:max(16px,env(safe-area-inset-right))}
  .oct-continuation.faq-in-view .back-top {visibility:hidden;pointer-events:none}
}
@media(prefers-reduced-motion:reduce) {
  #faq *, .oct-continuation .back-top {transition:none}
  #faq .chat-line:hover {translate:none}
}

/* A portrait frame shows a narrower, slightly steeper part of the rim. */
@media (max-width:720px) {
  .faq-horizon::before { transform:rotate(180.88deg); }
}
@media (max-width:340px) {
  .faq-horizon::before { transform:rotate(180.93deg); }
}

#faq .conversation {
  container-type: inline-size;
  align-content: start;
  align-items: start;
}

#faq .chat-line {
  gap: 10px;
  padding: 11px 16px 11px 12px;
  font-weight: 550;
  line-height: 1.45;
}

#faq .ask {
  color: var(--ink);
  border-color: #b8d3ec;
  border-radius: 19px 19px 19px 6px;
  background: linear-gradient(125deg, #fcfeff 12%, #edf6ff);
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px -6px #264e803b;
}

#faq .ask i {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: #255ca2;
  background: linear-gradient(145deg, #e1f4ff, #c8e0fb);
  box-shadow: inset 0 0 0 1px #b7d5f0;
}

#faq .answer {
  border-radius: 19px 19px 6px 19px;
  color: #fff;
  border-color: #284868;
  background: radial-gradient(ellipse at left top, #204769 0%, transparent 72%),
              linear-gradient(112deg, #102944, #081a34 85%);
  box-shadow: inset 0 1px 0 #9bd9ff26, 0 5px 14px -7px #132f544f;
}

#faq .chat-emblem {
  flex: none;
  display: block;
  border-radius: 9px;
  box-shadow: 0 0 0 1px #80caff52;
}

/* Reserve room for a wrapped reply while letting each bubble fit its text. */
@container (max-width: 380px) {
  #faq .answer { min-height: calc(2lh + 24px); }
}