/* ux5: How it works horizontal tiles + Add-on prices table (preview only) */

/* ——— How it works: big number LEFT, copy RIGHT ——— */
#how .steps3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:20px;
  align-items:stretch;
}
#how .step{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:16px;
  min-height:100%;
  padding:18px 18px 18px 16px!important;
  box-sizing:border-box;
}
#how .step > i{
  flex:none;
  display:block;
  font:400 clamp(52px,5.2vw,72px)/.9 'Archivo Black',system-ui,sans-serif!important;
  color:#FF7A00!important;
  font-style:normal!important;
  letter-spacing:-.04em;
  min-width:1.05ch;
  text-align:center;
  line-height:.9!important;
  margin:0!important;
}
#how .step .step-body{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
#how .step h3{
  margin:0!important;
  font:700 17px/1.25 Inter,system-ui,sans-serif!important;
  color:#0B2545!important;
}
#how .step p{
  margin:0!important;
  font:500 14px/1.45 Inter,system-ui,sans-serif!important;
  color:#4a5562!important;
}
@media(max-width:1024px){
  #how .step{gap:14px;padding:16px!important}
  #how .step > i{font-size:clamp(46px,6vw,60px)!important}
  #how .step h3{font-size:16px!important}
}
@media(max-width:900px){
  #how .steps3{grid-template-columns:1fr}
  #how .step{gap:18px;padding:16px 18px!important}
  #how .step > i{font-size:64px!important;min-width:1.1ch}
}
@media(max-width:390px){
  #how .step{gap:14px;padding:14px 14px!important}
  #how .step > i{font-size:56px!important}
  #how .step h3{font-size:15px!important}
  #how .step p{font-size:13.5px!important}
}

/* ——— Add-on prices: Item | Price | Unit/Note ——— */
#addl.ao-table-wrap,
#addl{
  min-height:0!important;
}
.ao-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font:500 13.5px/1.4 Inter,system-ui,sans-serif;
  color:#1F2A37;
}
.ao-table col.ao-c-item{width:42%}
.ao-table col.ao-c-price{width:26%}
.ao-table col.ao-c-note{width:32%}
.ao-table thead th{
  text-align:left;
  font:700 11px/1.2 Inter,system-ui,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6b7585;
  padding:0 10px 10px 0;
  border-bottom:1px solid rgba(11,37,69,.14);
  vertical-align:bottom;
}
.ao-table thead th.ao-th-price{padding-right:12px}
.ao-table thead th.ao-th-note{padding-right:0}
.ao-table tbody td{
  padding:10px 10px 10px 0;
  border-bottom:1px solid rgba(11,37,69,.10);
  vertical-align:top;
  word-break:break-word;
}
.ao-table tbody tr:last-child td{border-bottom:0;padding-bottom:4px}
.ao-table .ao-item{
  font:600 13.5px/1.35 Inter,system-ui,sans-serif;
  color:#0B2545;
}
.ao-table .ao-price{
  font:600 13.5px/1.35 Inter,system-ui,sans-serif;
  color:#0B2545;
  white-space:nowrap;
}
.ao-table .ao-note{
  font:500 12.5px/1.4 Inter,system-ui,sans-serif;
  color:#5b6675;
}
.ao-table .ao-sub td{
  padding-top:2px;
  border-bottom:1px solid rgba(11,37,69,.10);
}
.ao-table .ao-sub .ao-item{visibility:hidden;height:0;padding:0;overflow:hidden;line-height:0;font-size:0}
.ao-table .ao-group-end td{border-bottom:1px solid rgba(11,37,69,.10)}
#addl .ao-foot{
  margin:14px 0 0!important;
  font:500 13px/1.45 Inter,system-ui,sans-serif!important;
  color:#6b7585!important;
}
@media(max-width:600px){
  .ao-table,
  .ao-table thead{display:block;width:100%}
  .ao-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .ao-table tbody{display:block;width:100%}
  .ao-table tr{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"item price" "note note";
    gap:2px 10px;
    padding:10px 0;
    border-bottom:1px solid rgba(11,37,69,.10);
  }
  .ao-table tbody tr:last-child{border-bottom:0}
  .ao-table td{
    display:block;
    border:0!important;
    padding:0!important;
  }
  .ao-table .ao-item{grid-area:item;font-size:13px}
  .ao-table .ao-price{grid-area:price;text-align:right;font-size:13px}
  .ao-table .ao-note{grid-area:note;font-size:12px;margin-top:2px}
  .ao-table .ao-sub{
    grid-template-areas:"price price" "note note";
    padding-top:0;
    margin-top:-6px;
    border-bottom:1px solid rgba(11,37,69,.10);
  }
  .ao-table .ao-sub .ao-item{display:none}
  .ao-table .ao-sub .ao-price{text-align:left}
}

/* ——— Build my quote page (no 3D) ——— */
.bq{padding-top:28px;padding-bottom:48px;max-width:1200px}
.bq h1{font:400 clamp(28px,4vw,44px)/1.08 'Archivo Black',system-ui,sans-serif;color:#0B2545;margin:6px 0 10px}
.bq .lead{max-width:720px;margin:0 0 22px}
.bq-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:22px;align-items:start}
@media(max-width:900px){.bq-grid{grid-template-columns:1fr}}
.bq-card{position:relative;width:100%;max-width:none;margin:0}
.bq-hint{margin:0 0 10px;font:500 13px/1.45 Inter,system-ui,sans-serif;color:#5b6675}
.bq-side .card{padding:18px 18px 14px}
.bq-side h2{margin:0 0 10px;font:400 22px 'Archivo Black',system-ui,sans-serif;color:#0B2545}
.pq-opt .proj-ic{width:28px;height:28px;flex:none;display:block}
@media(max-width:600px){.pq-opt .proj-ic{width:24px;height:24px}}