/* Full FAQ page styles — verbatim from the 2026-06-22 FAQ handover (self-contained). */
  :root{
    --paper:#EFEDE8; --paper-2:#E6E3DC; --ink:#111111; --ink-soft:#3A3A3A;
    --dark:#0B0B0D; --dark-2:#15151A; --dark-line:#2A2A30; --light:#EDEDED; --light-soft:#B9B9BE;
    --yellow:#F8B700; --red:#E10600; --blue:#0F4FC2;
    --display:'Chakra Petch', system-ui, sans-serif;
    --body:'Manrope', system-ui, sans-serif;
    --mono:'JetBrains Mono', ui-monospace, monospace;
    --maxw:1280px; --maxw-wide:1480px; --gutter:clamp(20px,4vw,56px);
  }
  *{box-sizing:border-box}
  html,body{margin:0; padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--body); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; line-height:1.5;
    background-image:
      radial-gradient(1200px 600px at 10% -10%, rgba(0,0,0,.04), transparent 60%),
      radial-gradient(900px 500px at 110% 110%, rgba(0,0,0,.04), transparent 60%);
  }
  a{color:inherit; text-decoration:none}
  button{font:inherit; cursor:pointer; border:0; background:transparent; color:inherit}
  :focus-visible{outline:2px solid var(--yellow); outline-offset:3px}

  .display{font-family:var(--display); font-weight:700; letter-spacing:-0.01em; text-transform:uppercase}
  .label{font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.18em; font-size:12px}
  .mono{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}

  /* mark */
  .mark{display:inline-flex; flex-direction:column; gap:4px; width:34px}
  .mark span{display:block; height:5px; border-radius:1px}
  .mark span:nth-child(1){background:var(--yellow); width:100%}
  .mark span:nth-child(2){background:var(--red); width:82%}
  .mark span:nth-child(3){background:var(--blue); width:64%}
  .mark.lg{width:84px} .mark.lg span{height:6px}

  /* nav */
  .nav{position:sticky; top:0; z-index:50; background:rgba(11,11,13,.9); backdrop-filter:saturate(140%) blur(8px); -webkit-backdrop-filter:saturate(140%) blur(8px); color:var(--light); border-bottom:1px solid rgba(255,255,255,.08)}
  .nav-inner{max-width:var(--maxw-wide); margin:0 auto; display:flex; align-items:center; gap:20px; padding:14px var(--gutter)}
  .brand{display:flex; align-items:center; gap:12px}
  .brand .word{font-family:var(--display); font-weight:700; letter-spacing:.04em; font-size:14px}
  .brand .word .sub{display:block; font-size:9.5px; letter-spacing:.22em; color:var(--light-soft); font-weight:500}
  .nav .spacer{margin-left:auto}
  .nav .back{font-family:var(--display); font-weight:600; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--light)}
  .nav .back:hover{color:var(--yellow)}
  .btn{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.16em; text-transform:uppercase; background:var(--red); color:#fff; border-radius:0; transition:background .15s ease}
  .btn:hover{background:#b40500}
  .btn.ghost{background:transparent; border:1px solid var(--ink); color:var(--ink)}
  .btn.ghost:hover{background:var(--ink); color:#fff}
  .btn.sm{padding:10px 14px; font-size:11.5px}

  /* header */
  .head{max-width:var(--maxw); margin:0 auto; padding:clamp(48px,7vw,90px) var(--gutter) 0}
  .eyebrow{display:inline-flex; align-items:center; gap:10px; margin-bottom:16px}
  .eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--red)}
  h1.display{font-size:clamp(40px,7vw,92px); line-height:.95; letter-spacing:-0.02em; margin:0 0 18px; max-width:16ch}
  .head .sub{font-size:clamp(15px,1.4vw,18px); color:var(--ink-soft); max-width:60ch; margin:0 0 30px}

  /* search */
  .search-wrap{position:relative; max-width:520px; margin-bottom:8px}
  .search-wrap input{width:100%; font-family:var(--body); font-size:15px; padding:14px 16px 14px 44px; border:1px solid rgba(17,17,17,.3); border-radius:8px; background:#fff; color:var(--ink)}
  .search-wrap input:focus{outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(225,6,0,.1)}
  .search-wrap .ic{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--ink-soft); font-size:16px}
  .search-meta{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-top:10px; min-height:14px}

  /* body layout */
  .faq-body{max-width:var(--maxw); margin:0 auto; padding:40px var(--gutter) 0; display:grid; grid-template-columns:230px 1fr; gap:clamp(28px,4vw,64px); align-items:start}
  @media (max-width:860px){ .faq-body{grid-template-columns:1fr; gap:24px} }

  /* sidebar */
  .faq-side{position:sticky; top:90px; align-self:start}
  @media (max-width:860px){
    .faq-side{position:static; top:auto}
    .faq-side ul{display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; margin:0 calc(var(--gutter)*-1); padding-left:var(--gutter); padding-right:var(--gutter); scrollbar-width:none}
    .faq-side ul::-webkit-scrollbar{display:none}
    .faq-side .side-title{display:none}
  }
  .faq-side .side-title{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:14px}
  .faq-side ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
  .faq-side a{display:block; font-family:var(--display); font-weight:600; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); padding:8px 12px; border-radius:6px; white-space:nowrap; border-left:2px solid transparent; transition:background .15s ease, color .15s ease}
  .faq-side a:hover{background:rgba(17,17,17,.05); color:var(--ink)}
  .faq-side a.active{background:var(--ink); color:#fff}
  @media (max-width:860px){ .faq-side a{border:1px solid rgba(17,17,17,.2)} .faq-side a.active{border-color:var(--ink)} }

  /* sections */
  .faq-main{min-width:0}
  .cat-block{margin-bottom:48px; scroll-margin-top:88px}
  .cat-block h2{font-family:var(--display); font-weight:700; font-size:clamp(20px,2.4vw,30px); text-transform:uppercase; letter-spacing:-0.005em; margin:0 0 6px; display:flex; align-items:center; gap:14px}
  .cat-block h2 .cnum{font-family:var(--mono); font-size:13px; color:var(--red); letter-spacing:.04em; font-weight:500}
  .cat-block .cat-rule{height:2px; background:linear-gradient(90deg,var(--yellow) 0 33%,var(--red) 33% 66%,var(--blue) 66% 100%); width:64px; margin:0 0 14px}

  details.q{border-top:1px solid rgba(17,17,17,.16); padding:16px 0}
  .cat-block details.q:last-of-type{border-bottom:1px solid rgba(17,17,17,.16)}
  details.q summary{list-style:none; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; font-family:var(--display); font-weight:600; font-size:clamp(15px,1.5vw,18px); letter-spacing:-0.005em; padding:4px 0}
  details.q summary::-webkit-details-marker{display:none}
  details.q .chev{flex:0 0 auto; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--ink); border-radius:50%; transition:transform .2s ease, background .2s ease; font-family:var(--mono); font-size:14px; margin-top:2px}
  details.q[open] .chev{transform:rotate(45deg); background:var(--ink); color:#fff}
  details.q .a{padding:14px 36px 6px 0; font-size:15px; color:var(--ink-soft); max-width:70ch; line-height:1.6}
  details.q .a ul{margin:8px 0 0; padding-left:18px}
  details.q .a li{margin:4px 0}
  details.q .a a{color:var(--red); text-decoration:underline}
  mark{background:rgba(248,183,0,.45); color:inherit; padding:0 1px}
  .no-results{font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); padding:24px 0; display:none}

  /* contact */
  .contact{max-width:var(--maxw); margin:24px auto 0; padding:0 var(--gutter)}
  .contact-card{background:var(--ink); color:var(--light); border-radius:18px; padding:clamp(28px,4vw,48px); display:grid; grid-template-columns:1.4fr 1fr; gap:28px; align-items:center; position:relative; overflow:hidden}
  .contact-card::after{content:""; position:absolute; bottom:0; right:0; width:120px; height:120px; background:linear-gradient(135deg,var(--blue) 0 33%,var(--red) 33% 66%,var(--yellow) 66% 100%); clip-path:polygon(100% 0,100% 100%,0 100%); opacity:.85}
  @media (max-width:680px){ .contact-card{grid-template-columns:1fr} }
  .contact-card h3{font-family:var(--display); font-weight:700; font-size:clamp(22px,2.6vw,32px); text-transform:uppercase; margin:0 0 10px; color:var(--yellow)}
  .contact-card p{margin:0; color:var(--light-soft); font-size:15px}
  .contact-card .lines{position:relative; z-index:2}

  /* contact modal */
  .contact-veil{position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; background:rgba(7,7,9,.78); backdrop-filter:blur(6px); padding:24px}
  .contact-veil.open{display:flex}
  .contact-modal{position:relative; width:min(460px,100%); background:var(--paper); border:1px solid var(--ink); border-radius:18px; padding:32px; transform:translateY(16px); opacity:0; transition:.3s ease}
  .contact-veil.open .contact-modal{transform:none; opacity:1}
  .contact-modal h3{font-size:30px; margin:6px 0 20px}
  .contact-close{position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%; border:1px solid rgba(17,17,17,.3); font-family:var(--mono); font-size:14px; display:flex; align-items:center; justify-content:center}
  .contact-close:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
  .contact-rows{display:flex; flex-direction:column; gap:0; margin-bottom:22px}
  .crow{display:grid; grid-template-columns:84px 1fr; gap:14px; padding:12px 0; border-top:1px solid rgba(17,17,17,.14); align-items:baseline}
  .crow:last-child{border-bottom:1px solid rgba(17,17,17,.14)}
  .crow .ck{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
  .crow .cv{font-size:14.5px; color:var(--ink)}
  .crow .cv a{color:var(--red); text-decoration:underline}
  .contact-card .lines .row{font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; color:var(--light); margin-top:6px}
  .contact-card .lines a{color:var(--yellow)}


/* Contact "send a message" form (modal) */
.contact-form{display:flex; flex-direction:column; gap:14px; margin-top:4px}
.cf-field{display:flex; flex-direction:column; gap:6px}
.cf-field label{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.cf-field input,.cf-field textarea{width:100%; font-family:var(--body); font-size:15px; padding:11px 13px; border:1px solid rgba(17,17,17,.3); border-radius:8px; background:#fff; color:var(--ink)}
.cf-field input:focus,.cf-field textarea:focus{outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(225,6,0,.1)}
.cf-field textarea{resize:vertical; min-height:96px}
.contact-sent{text-align:center; padding:18px 0}

/* Legal page prose */
.cat-block p{font-size:15px; color:var(--ink-soft); line-height:1.7; max-width:75ch; margin:0 0 12px}
.cat-block h3{font-family:var(--display); font-weight:600; font-size:16px; text-transform:uppercase; letter-spacing:.02em; color:var(--ink); margin:22px 0 6px}
.cat-block ul{margin:0 0 12px; padding-left:20px; color:var(--ink-soft); font-size:15px; line-height:1.7; max-width:75ch}
.cat-block li{margin:4px 0}
.cat-block p a,.cat-block li a{color:var(--red); text-decoration:underline}

/* Breathing room before the shared footer on FAQ + legal pages */
.faq-body{padding-bottom:clamp(40px,5vw,72px)}
.contact{margin-bottom:clamp(40px,5vw,72px)}