/* ============================================================
   FAQ.

   Eight questions, one column, a centred title above them. No card
   around the group and no card around each row: the section is a
   stable navy surface and the questions are separated by hairlines.
   details/summary so the keyboard and a screen reader get the
   accordion for free. The open marker is a plain cross, aligned with
   every other one, that turns when the answer is out.
   ============================================================ */

.faq{
  --faq-gold:#F0CE80;
  position:relative;z-index:1;
  padding:54px 24px 56px;
  background:#111A28;
  border-top:1px solid rgba(237,232,223,.07);
  color:#EDE8DF;
  font-family:Archivo,Arial,sans-serif;
  scroll-margin-top:100px;
}

/* A reading width, not a page width. */
.faq-shell{max-width:820px;margin:0 auto}

.faq header{text-align:center;max-width:620px;margin:0 auto 30px}
.faq h2{
  font-size:clamp(26px,2.8vw,34px);font-weight:600;line-height:1.15;
  letter-spacing:-.04em;margin:11px 0 9px;color:#fff;
}
.faq header p{font-size:13.5px;line-height:1.65;color:#A7B4C7;margin:0}
.faq header>a{
  display:inline-block;margin-top:14px;
  font-size:11px;color:#D8BD79;text-decoration:none;text-underline-offset:4px;
}
.faq header>a:hover{text-decoration:underline}

.faq-items{border-top:1px solid rgba(237,232,223,.12)}
.faq details{border-bottom:1px solid rgba(237,232,223,.09)}

.faq summary{
  display:flex;align-items:center;gap:16px;
  min-height:60px;padding:15px 2px;
  font-size:15px;font-weight:500;line-height:1.45;color:#E4E9F1;
  cursor:pointer;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:#fff}
.faq details[open] summary{color:#fff}

.faq-n{
  flex:0 0 auto;width:18px;
  font-size:10.5px;font-weight:500;letter-spacing:.04em;color:#7D8CA2;
  font-variant-numeric:tabular-nums;
}
.faq-plus{
  flex:0 0 auto;margin-left:auto;width:18px;text-align:center;
  font-size:19px;font-weight:300;line-height:1;color:#9FAEC4;
  transition:transform .18s ease,color .18s ease;
}
.faq details[open] .faq-plus{transform:rotate(45deg);color:var(--faq-gold)}

/* The answer starts on the same line as the question, past the number. */
.faq details p{
  margin:0 0 20px;padding:0 34px;
  font-size:13.5px;line-height:1.8;color:#B2BFD0;
}

.faq-source{margin:18px 0 0;font-size:10px;line-height:1.7;color:#8696AC}
.faq-source a{color:#AEBAC9;text-underline-offset:3px}

.faq :focus-visible,.ft :focus-visible{outline:2px solid #EDBD40;outline-offset:4px}

@media (max-width:600px){
  .faq{padding:36px 16px 38px}
  .faq header{margin-bottom:24px}
  .faq h2{font-size:26px}
  .faq header p{font-size:12.5px}
  .faq summary{font-size:13.5px;gap:12px;min-height:58px;padding:14px 2px}
  .faq-n{width:16px}
  .faq-plus{width:16px;font-size:18px}
  .faq details p{padding:0 28px;font-size:12.5px}
  .faq-source{font-size:9.5px}
}

@media (prefers-reduced-motion:reduce){
  .faq-plus{transition:none}
}

/* ============================================================
   Out of scope for this redesign: the newsletter block and the site
   footer keep the rules they already had, in the order they had them.
   ============================================================ */

.ft :focus-visible{outline:2px solid #edbd40;outline-offset:4px}
.ft{padding:44px 28px 25px!important;background:#101621!important;border-top:1px solid #ffffff14}
.ft__shell{max-width:1320px!important}
.ft__mid{display:grid!important;grid-template-columns:1fr 2.1fr!important;gap:70px!important;margin:0!important;padding:0!important}
.ft-brand-name{font-size:22px;font-weight:700;letter-spacing:-.05em;color:#fff;text-decoration:none}
.ft-brand-name span{color:#f4bd28}
.ft__line{font-size:12px!important;line-height:1.8!important;max-width:270px!important;margin:14px 0 0!important;color:#98a5b7!important}
.ft__nav{display:grid!important;grid-template-columns:1fr 1.2fr 1.15fr;gap:28px!important}
.ft__row{display:block!important;border:0!important;padding:0!important}
.ft__row h2{font-size:10px!important;color:#e1e6ed!important;letter-spacing:.09em!important;margin:0 0 15px!important}
.ft__row ul{display:flex!important;flex-direction:column;gap:2px!important;align-items:flex-start!important}
.ft__row a{font-size:12px!important;line-height:1.5!important;display:inline-block;padding:7px 0;color:#a8b3c3!important;text-decoration:none!important}
.ft__row a:hover{color:#eac779!important}
.ft__ad{margin:30px 0 0!important;padding:20px 24px!important;grid-template-columns:190px 1fr!important;border-radius:10px!important;border-left:2px solid #edb52c!important;background:#ffffff02!important}
.ft__adH{font-size:10px!important;letter-spacing:.12em!important}
.ft__adP{font-size:12px!important;line-height:1.8!important;color:#b3bdca!important}
.ft__adP--sub{font-size:11px!important}
.ft__base{margin-top:22px!important;padding-top:19px!important}
.ft__legal a,.ft__copy{font-size:10px!important}
.ft__risk{font-size:10px!important;line-height:1.8!important;margin-top:21px!important;color:#8895a8!important}
@media(max-width:900px){.ft__mid{grid-template-columns:1fr!important;gap:28px!important}.ft__line{max-width:400px!important}.ft__nav{gap:25px!important}.ft__ad{grid-template-columns:1fr!important;gap:9px!important}.ft__adP{grid-column:1!important}}
@media(max-width:600px){.ft{padding:30px 18px 22px!important}.ft__nav{grid-template-columns:1fr 1fr;gap:24px 17px!important}.ft__row:last-child{grid-column:1/-1}.ft__row:last-child ul{display:grid!important;grid-template-columns:1fr 1fr;gap:0 17px!important}.ft__row a{font-size:11px!important;min-height:40px;display:flex;align-items:center}.ft__row h2{margin-bottom:8px!important}.ft__ad{padding:17px 16px!important;margin-top:23px!important}.ft__adP{font-size:11px!important}.ft__base{gap:16px!important}.ft__legal ul{flex-wrap:wrap;gap:14px!important}.ft__risk{font-size:9px!important}.ft-brand-name{font-size:21px}}
.ft-brand-name{display:inline-flex;align-items:center;gap:9px;letter-spacing:-.035em}
.ft-brand-name img{width:32px;height:32px;object-fit:contain}
.ft-brand-name span{margin-left:-9px}
.ft__nav{grid-template-columns:1.6fr 1fr!important;gap:45px!important}
.ft__row:first-child ul{display:grid!important;grid-template-columns:1fr 1fr;column-gap:30px!important;grid-auto-flow:column;grid-template-rows:repeat(5,auto)}
@media(max-width:760px){.ft__nav{grid-template-columns:1fr!important;gap:26px!important}.ft__row:first-child ul{gap:2px 18px!important}.ft__row:last-child{grid-column:auto}.ft__row:last-child ul{grid-template-columns:1fr 1fr}}
.updates{position:relative;z-index:1;padding:28px 24px;background:#111b2b}
.updates-panel{position:relative;isolation:isolate;overflow:hidden;max-width:1320px;margin:0 auto;border:1px solid #d4b35930;border-radius:16px;background:radial-gradient(ellipse at 0% 80%,#c9931919,transparent 40%),radial-gradient(ellipse at 100% 20%,#c9931919,transparent 40%),#0c1523;padding:34px 24px}
.updates-content{position:relative;z-index:1;text-align:center;max-width:680px;margin:auto}
.updates h2{font-size:clamp(23px,2.4vw,31px);letter-spacing:-.035em;line-height:1.2;color:#fff;margin:10px 0}
.updates p{font-size:13px;color:#aab6c8;margin:0 0 18px}
.updates-form{display:flex;max-width:420px;margin:auto;padding:5px;border:1px solid #ffffff20;background:#172131;border-radius:8px;gap:6px}
.updates-form input{min-width:0;flex:1;background:none;border:0;padding:9px 11px;color:white;font:inherit;font-size:12px;opacity:1;-webkit-text-fill-color:#aab6c8}
.updates-form input::placeholder{color:#98a5b7}
/* The 15px gap was holding the label off a trailing arrow. With the arrow
   gone the label is the only thing in the button, so it is centred. */
.updates-form button{background:#efc358;color:#131b28;border:0;border-radius:5px;padding:10px 16px;display:flex;justify-content:center;align-items:center;font:600 12px Archivo,Arial,sans-serif;opacity:1;cursor:not-allowed}
.updates-content>small{display:block;font-size:9px;color:#8996aa;margin-top:10px}
.updates-mark{position:absolute;width:270px;height:270px;object-fit:contain;top:50%;pointer-events:none;opacity:.85;z-index:0}
.updates-mark-left{left:-100px;transform:translateY(-50%) rotate(-22deg)}
.updates-mark-right{right:-100px;transform:translateY(-50%) rotate(22deg)}
@media(max-width:900px){.updates-mark{width:210px;height:210px;opacity:.45}.updates-mark-left{left:-110px}.updates-mark-right{right:-110px}.updates-content{max-width:520px}}
@media(max-width:600px){.updates{padding:20px 14px}.updates-panel{padding:28px 22px;border-radius:12px}.updates h2{font-size:24px;max-width:260px;margin:10px auto}.updates p{font-size:12px;max-width:240px;margin:0 auto 17px}.updates-mark{width:150px;height:150px;opacity:.28;top:42%}.updates-mark-left{left:-95px}.updates-mark-right{right:-95px}.updates-form button{padding:10px 12px;font-size:11px}.updates-form input{padding:9px 6px;font-size:11px}.updates-content>.cp-kicker{font-size:9px}.updates-content>small{font-size:9px}}