.page-faq{
  background:var(--deep-slate);
  color:var(--ink);
  scroll-behavior:smooth;
}

.page-faq .page-shell{
  max-width:1280px;
  margin:0 auto;
  padding:0 16px 64px;
}

.page-faq .breadcrumbs{
  font-family:var(--font-data);
  font-size:12px;
  color:rgba(255,255,255,0.6);
  padding-top:20px;
  margin-bottom:12px;
}

.page-faq .breadcrumbs a{
  color:var(--teal);
  text-decoration:none;
}

.page-faq .breadcrumbs__sep{
  color:rgba(255,255,255,0.35);
  padding:0 6px;
}

.page-faq .breadcrumbs__current{
  color:rgba(255,255,255,0.85);
}

.page-faq .page-head{
  color:var(--paper);
  padding:28px 0 40px;
}

.page-faq .page-head h1{
  font-family:var(--font-head);
  font-weight:900;
  font-size:32px;
  line-height:1.2;
  margin:0 0 14px;
  color:var(--paper);
}

.page-faq .page-head h1 span{
  display:block;
  color:var(--amber);
  font-size:20px;
  font-weight:700;
  margin-top:8px;
}

.page-faq .page-head p{
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.7;
  color:rgba(255,255,255,0.85);
  max-width:720px;
  margin:0;
}

.page-faq .jump-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px;
}

.page-faq .jump-tag{
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  color:var(--paper);
  border:1px solid rgba(255,255,255,0.3);
  padding:6px 12px;
  text-decoration:none;
  transition:border-color .2s ease,color .2s ease;
}

.page-faq .jump-tag:hover{
  border-color:var(--amber);
  color:var(--amber);
}

.page-faq .steps-section{
  background:var(--cream);
  padding:48px 0 56px;
}

.page-faq .dimensions-section{
  background:var(--light-gray);
  padding:48px 0 56px;
}

.page-faq .legend-section{
  background:var(--deep-slate);
  color:var(--paper);
  padding:48px 0 56px;
  border-top:4px solid var(--amber);
  border-bottom:4px solid var(--amber);
}

.page-faq .faq-section{
  background:var(--cream);
  padding:48px 0 56px;
}

.page-faq .feedback-section{
  background:var(--light-gray);
  padding:48px 0 56px;
}

.page-faq .section-head{
  margin-bottom:24px;
}

.page-faq .section-kicker{
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:0.08em;
  color:var(--signal-orange);
  margin:0 0 6px;
}

.page-faq .section-title{
  font-size:24px;
  font-weight:900;
  margin:0;
  color:var(--ink);
}

.page-faq .legend-section .section-kicker{
  color:var(--update-green);
}

.page-faq .legend-section .section-title{
  color:var(--paper);
}

.page-faq .steps-graphic{
  display:block;
  width:100%;
  height:auto;
  margin:0 0 32px;
  background:var(--paper);
  border:1px solid rgba(30,37,48,0.15);
}

.page-faq .steps-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

.page-faq .step-card{
  padding:24px;
  position:relative;
  color:var(--ink);
  border:1px solid var(--ink);
  border-radius:0;
}

.page-faq .step-card--green{
  background:var(--update-green);
}

.page-faq .step-card--amber{
  background:var(--amber);
}

.page-faq .step-card--orange{
  background:var(--signal-orange);
}

.page-faq .step-card__num{
  display:inline-block;
  font-family:var(--font-data);
  font-size:48px;
  font-weight:800;
  line-height:1;
  margin-bottom:24px;
  color:var(--deep-slate);
}

.page-faq .step-card h3{
  font-size:20px;
  font-weight:900;
  margin:0 0 8px;
  color:var(--ink);
}

.page-faq .step-card p{
  font-size:14px;
  line-height:1.6;
  margin:0 0 20px;
}

.page-faq .step-card .btn{
  display:inline-block;
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  padding:10px 16px;
  border:1px solid var(--ink);
  transition:background .2s ease,color .2s ease;
}

.page-faq .step-card .btn:hover{
  background:var(--paper);
  color:var(--ink);
}

.page-faq .dimensions-lead{
  margin-bottom:24px;
  font-size:14px;
  line-height:1.7;
  color:var(--deep-slate);
  max-width:720px;
}

.page-faq .dimensions-graphic{
  width:100%;
  max-width:640px;
  height:auto;
  display:block;
  margin:0 auto 32px;
  background:var(--paper);
  border:1px solid var(--ink);
}

.page-faq .dimension-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

.page-faq .dimension-card{
  background:var(--paper);
  border:1px solid var(--ink);
  padding:20px;
  position:relative;
}

.page-faq .dimension-card--teal{
  border-top:6px solid var(--teal);
}

.page-faq .dimension-card--violet{
  border-top:6px solid var(--violet);
}

.page-faq .dimension-card--orange{
  border-top:6px solid var(--signal-orange);
}

.page-faq .dimension-card--green{
  border-top:6px solid var(--update-green);
}

.page-faq .dimension-card--amber{
  border-top:6px solid var(--amber);
}

.page-faq .dimension-card__weight{
  display:inline-block;
  font-family:var(--font-data);
  font-size:36px;
  font-weight:800;
  line-height:1;
  margin-bottom:8px;
  color:var(--deep-slate);
}

.page-faq .dimension-card__weight span{
  font-size:14px;
  margin-left:2px;
}

.page-faq .dimension-card h3{
  font-size:18px;
  font-weight:900;
  margin:0 0 8px;
  color:var(--ink);
}

.page-faq .dimension-card p{
  font-size:13px;
  line-height:1.6;
  margin:0;
  color:rgba(15,17,21,0.8);
}

.page-faq .legend-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-bottom:24px;
}

.page-faq .legend-card{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.18);
  padding:20px;
  display:grid;
  grid-template-columns:44px 1fr;
  grid-auto-rows:auto;
  column-gap:14px;
  row-gap:6px;
}

.page-faq .legend-card .status-swatch{
  grid-row:1 / span 3;
  grid-column:1;
  align-self:start;
}

.page-faq .legend-card h3{
  grid-column:2;
  font-size:16px;
  font-weight:900;
  margin:0;
  color:var(--paper);
}

.page-faq .legend-card p{
  grid-column:2;
  font-size:13px;
  line-height:1.6;
  margin:0;
  color:rgba(255,255,255,0.72);
}

.page-faq .status-swatch{
  display:block;
  width:18px;
  height:18px;
  flex:0 0 18px;
  background:var(--update-green);
}

.page-faq .status-swatch--green{
  background:var(--update-green);
}

.page-faq .status-swatch--amber{
  background:var(--amber);
}

.page-faq .status-swatch--red{
  background:var(--alert-red);
}

.page-faq .tag-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.page-faq .tag{
  display:inline-block;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  padding:6px 12px;
  color:var(--ink);
  border:1px solid var(--ink);
  background:var(--paper);
}

.page-faq .tag--orange{
  background:var(--signal-orange);
}

.page-faq .tag--teal{
  background:var(--teal);
}

.page-faq .tag--violet{
  background:var(--violet);
  color:var(--paper);
}

.page-faq .tag--green{
  background:var(--update-green);
}

.page-faq .tag--amber{
  background:var(--amber);
}

.page-faq .tag--red{
  background:var(--alert-red);
  color:var(--paper);
}

.page-faq .tag--gray{
  background:var(--light-gray);
}

.page-faq .faq-item{
  border:1px solid var(--ink);
  background:var(--paper);
  margin:0 0 12px;
}

.page-faq .faq-item summary{
  cursor:pointer;
  padding:16px 20px;
  font-size:15px;
  font-weight:800;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  position:relative;
  color:var(--ink);
}

.page-faq .faq-item summary::-webkit-details-marker{
  display:none;
}

.page-faq .faq-item summary::after{
  content:"+";
  font-family:var(--font-data);
  font-size:20px;
  color:var(--signal-orange);
  transition:transform .2s ease;
}

.page-faq .faq-item[open] summary{
  border-bottom:1px solid var(--ink);
}

.page-faq .faq-item[open] summary::after{
  content:"−";
}

.page-faq .faq-item p{
  padding:16px 20px;
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:rgba(15,17,21,0.85);
}

.page-faq .faq-item a{
  color:var(--signal-orange);
  font-weight:700;
  text-decoration:underline;
}

.page-faq .feedback-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

.page-faq .feedback-card{
  padding:24px;
  border:1px solid var(--ink);
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-start;
}

.page-faq .feedback-card h3{
  font-size:18px;
  font-weight:900;
  margin:0;
  color:var(--ink);
}

.page-faq .feedback-card p{
  font-size:14px;
  line-height:1.6;
  margin:0;
}

.page-faq .feedback-card--primary{
  background:var(--deep-slate);
  color:var(--paper);
}

.page-faq .feedback-card--primary h3{
  color:var(--paper);
}

.page-faq .feedback-card--primary p{
  color:rgba(255,255,255,0.85);
}

.page-faq .feedback-card--secondary{
  background:var(--paper);
}

.page-faq .feedback-card--tertiary{
  background:var(--teal);
}

.page-faq .feedback-card .btn{
  margin-top:auto;
  background:var(--amber);
  color:var(--ink);
  padding:10px 18px;
  text-decoration:none;
  font-weight:800;
  border:1px solid var(--ink);
  transition:background .2s ease,color .2s ease;
}

.page-faq .feedback-card--primary .btn{
  background:var(--update-green);
  color:var(--ink);
}

.page-faq .feedback-card .btn:hover{
  background:var(--paper);
  color:var(--ink);
}

.page-faq .feedback-card--tertiary .status-swatch{
  align-self:flex-end;
  margin-top:auto;
}

@media (min-width:720px){

  .page-faq .steps-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .page-faq .dimension-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .page-faq .legend-cards{
    grid-template-columns:repeat(3,1fr);
  }

  .page-faq .feedback-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (min-width:1024px){

  .page-faq .page-shell{
    padding:0 32px 72px;
  }

  .page-faq .dimension-grid{
    grid-template-columns:repeat(5,1fr);
  }

  .page-faq .page-head{
    padding:40px 0 48px;
  }
}

@media (prefers-reduced-motion:reduce){

  .page-faq,
  .page-faq *,
  .page-faq *::before,
  .page-faq *::after{
    transition:none !important;
    scroll-behavior:auto !important;
  }
}