/* Fracktal material pages — lifted verbatim from the Open Design
   template, where it was inlined identically in all ten pages.
   Every colour is a :root token; brandkit.py depends on that. */

/* Montserrat used to be @import-ed from Google here. It is self-hosted now and
   declared once in chrome.css, which every page loads before this one — see
   fonts.py for why (LiteSpeed strips the Google Fonts request). An @import is
   also the slowest way to load a font: the browser cannot see it until this
   sheet has downloaded and parsed, so it serialises two round trips. */

:root{
  --canvas:#ffffff;
  --ink:#3c3c3c;
  --red:#f25e50;
  --dark:#111111;
  --muted:#5a5a5a;
  --border:#e6e6e6;
  --surface-soft:rgba(17,17,17,0.035);
  --radius:6px;
  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --maxw:1120px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--canvas);
  font-weight:400;
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
/* `height:auto` is the required companion to the width/height attributes the
   renderer now measures onto every image. The attributes give the browser the
   aspect ratio before the bytes arrive, so it reserves the right space instead
   of reflowing the page under the reader. But an attribute height is a fixed
   height, and `max-width:100%` shrinks the width on a narrow screen — the two
   together squash the picture. `height:auto` hands the height back to the
   ratio. Attributes for the reserved space, CSS for the actual size. */
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
h1,h2,h3,h4{font-weight:700;color:var(--dark);margin:0;line-height:1.15;letter-spacing:-0.02em;}
h1{font-size:clamp(30px,5vw,52px);}
h2{font-size:clamp(24px,3.4vw,34px);letter-spacing:-0.015em;}
h3{font-size:20px;letter-spacing:-0.01em;}
p{margin:0;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.hero .wrap{overflow:visible;}
.section{padding:72px 0;}
.section--tight{padding:56px 0;}

.overline{
  font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:0.1em;color:var(--red);margin-bottom:14px;display:block;
}
.overline--muted{color:var(--muted);}
.sec-head{max-width:720px;margin-bottom:40px;}
.sec-head p{color:var(--muted);margin-top:14px;font-size:16px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font-family:var(--font);font-weight:600;font-size:14px;letter-spacing:0.02em;
  padding:13px 24px;border-radius:var(--radius);border:1px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.btn--primary{background:var(--red);color:#fff;}
.btn--primary:hover{filter:brightness(0.92);}
.btn--outline{background:transparent;color:#fff;border-color:rgba(255,255,255,0.4);}
.btn--outline:hover{border-color:#fff;background:rgba(255,255,255,0.08);}

/* ---------- Hero ---------- */
.hero{background:#000;color:#fff;padding:84px 0 10px;overflow:visible;}
.hero h1{color:#fff;}
.hero .overline{color:var(--red);}
.hero__descriptor{
  font-size:clamp(16px,2vw,20px);color:rgba(255,255,255,0.8);font-weight:400;
  margin-top:20px;max-width:640px;line-height:1.5;
}
.hero__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;}
.tag{
  font-size:12px;font-weight:600;letter-spacing:0.04em;
  padding:6px 12px;border:1px solid rgba(255,255,255,0.22);border-radius:var(--radius);
  color:rgba(255,255,255,0.85);
}
.hero__specs{
  display:flex;flex-wrap:wrap;margin-top:40px;
  border-top:1px solid rgba(255,255,255,0.14);padding-top:28px;
}
.spec-inline{width:25%;padding-right:16px;margin-bottom:8px;}
.spec-inline .k{font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:rgba(255,255,255,0.5);font-weight:600;}
.spec-inline .v{font-size:20px;font-weight:700;color:#fff;margin-top:6px;}
.spec-inline .v small{font-size:13px;font-weight:500;color:rgba(255,255,255,0.65);}

/* ---------- Machine-readable reference ---------- */
.quickref{
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface-soft);padding:22px 24px;margin-top:40px;
}
.quickref h2{font-size:13px;text-transform:uppercase;letter-spacing:0.09em;color:var(--muted);}
.quickref dl{display:grid;grid-template-columns:repeat(4,1fr);gap:0 24px;margin:14px 0 0;}
.quickref dt{display:none;}
.qr-item{padding:10px 0;border-bottom:1px solid var(--border);}
.qr-item:nth-last-child(-n+4){border-bottom:0;}
.qr-item .k{font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);font-weight:600;}
.qr-item dd{margin:4px 0 0;font-size:15px;font-weight:600;color:var(--dark);}
@media(max-width:900px){
  .quickref{padding:16px 18px;}
  .quickref dl{grid-template-columns:repeat(3,1fr);gap:0 16px;}
  .qr-item{padding:8px 0;}
  .qr-item:nth-last-child(-n+3){border-bottom:0;}
  .qr-item .k{font-size:10px;}
  .qr-item dd{font-size:13px;}
}

/* ---------- Radar ---------- */
.chart-panel{
  border:1px solid var(--border);border-radius:var(--radius);
  padding:32px;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;gap:40px;
}
.chart-panel .chart-side{flex:0 0 320px;order:1;display:flex;flex-direction:column;justify-content:center;padding-right:20px;}
.chart-panel .svg-hold{flex:1 1 auto;order:2;max-width:520px;overflow:visible;}
.chart-side h2{margin-bottom:16px;}
.legend{margin-top:22px;}
.legend-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.legend-row:last-child{border-bottom:0;}
.swatch{width:16px;height:16px;border-radius:3px;flex:0 0 auto;}
.legend-row .lbl{font-weight:600;font-size:14px;color:var(--dark);}
.legend-row .sub{font-size:12px;color:var(--muted);margin-left:auto;}
.radar-note{font-size:12px;color:var(--muted);margin-top:18px;line-height:1.5;}

/* compare dropdown */
.compare-select{margin-bottom:20px;}
.compare-label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);margin-bottom:8px;}
.compare-dropdown{
  width:100%;padding:12px 14px;font-family:var(--font);font-size:14px;font-weight:600;
  color:var(--dark);background:var(--canvas);border:1px solid var(--border);border-radius:var(--radius);
  cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a5a5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.compare-dropdown:hover{border-color:var(--muted);}
.compare-dropdown:focus{outline:2px solid var(--red);outline-offset:2px;}
svg{display:block;width:100%;height:auto;}

/* ---------- Property cards ---------- */
.card-flex{display:flex;flex-wrap:wrap;gap:20px;}
.prop-card{
  width:calc(25% - 15px);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 22px;background:var(--canvas);transition:border-color .12s ease;
}
.prop-card:hover{border-color:var(--muted);}
.prop-card .name{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);}
.prop-card .val{font-size:28px;font-weight:700;color:var(--dark);margin:6px 0 8px;letter-spacing:-0.02em;}
.prop-card .ctx{font-size:13px;color:var(--muted);line-height:1.5;}

/* ---------- Machine requirements table ---------- */
.req-table{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.req-table th,.req-table td{text-align:left;padding:15px 18px;font-size:14px;border-bottom:1px solid var(--border);vertical-align:top;}
.req-table thead th{background:var(--dark);color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:0.08em;font-weight:600;}
.req-table tbody tr:last-child td{border-bottom:0;}
.req-table tbody tr:nth-child(odd){background:var(--canvas);}
.req-table tbody tr:nth-child(even){background:var(--border);}
.req-table td:first-child{font-weight:600;color:var(--dark);display:flex;align-items:center;gap:10px;}
.req-icon{flex:0 0 auto;color:var(--muted);display:flex;}
.req-table td .rec{color:var(--dark);}
.table-scroll{overflow-x:auto;}
@media(max-width:768px){
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
}
@media(max-width:640px){
  .table-scroll{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .req-table{display:contents;}
  .req-table thead{display:none;}
  .req-table tbody{display:contents;}
  .req-table tr{display:block;border:1px solid var(--border);border-radius:var(--radius);padding:12px;background:var(--canvas);overflow:hidden;}
  .req-table tr:nth-child(4n+3),.req-table tr:nth-child(4n+4){background:var(--border);}
  .req-table td{display:block;border:0;padding:4px 0;font-size:12px;width:100%;}
  .req-table td:first-child{font-size:13px;font-weight:600;padding:0 0 6px 0;margin-bottom:6px;border-bottom:1px solid rgba(0,0,0,0.1);}
  .req-table td:last-child{padding-bottom:0;}
  .req-table td:nth-child(2)::before{content:"Min: ";font-weight:600;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:0.03em;display:inline-block;min-width:30px;}
  .req-table td:nth-child(3)::before{content:"Rec: ";font-weight:600;color:var(--red);font-size:10px;text-transform:uppercase;letter-spacing:0.03em;display:inline-block;min-width:30px;}
}
@media(max-width:480px){
  .req-table tr{padding:10px;font-size:11px;}
}
.callout{
  display:flex;gap:16px;align-items:flex-start;margin-top:24px;
  border:1px solid var(--border);
  border-radius:var(--radius);padding:20px 22px;background:var(--canvas);
}
.callout .ic{color:var(--red);flex:0 0 auto;margin-top:2px;}
.callout p{font-size:14px;color:var(--ink);line-height:1.55;}

/* ---------- Applications ---------- */
.app-tile{
  width:calc(33.333% - 14px);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 22px;background:var(--canvas);
}
.app-tile h3{font-size:15px;margin-bottom:12px;display:flex;align-items:center;gap:10px;}
.app-tile h3 .ic{flex:0 0 auto;color:var(--muted);}
.app-tile ul{margin:0;padding:0;list-style:none;}
.app-tile li{font-size:13px;color:var(--muted);padding:4px 0 4px 14px;position:relative;line-height:1.4;}
.app-tile li::before{content:"";position:absolute;left:0;top:10px;width:4px;height:4px;background:var(--border);border-radius:1px;}

/* ---------- Use / Avoid ---------- */
.decide-col{width:calc(50% - 12px);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.decide-head{padding:14px 20px;display:flex;align-items:center;gap:10px;}
.decide-head .ic{flex:0 0 auto;}
.decide-head h3{color:#fff;font-size:14px;font-weight:600;}
.decide--use .decide-head{background:var(--dark);}
.decide--avoid .decide-head{background:var(--ink);}
.decide-body{padding:4px 20px 16px;}
.decide-body ul{margin:0;padding:0;list-style:none;}
.decide-body li{font-size:13px;color:var(--ink);padding:10px 0 10px 24px;position:relative;border-bottom:1px solid var(--border);line-height:1.45;}
.decide-body li:last-child{border-bottom:0;}
.decide-body li .ic{position:absolute;left:0;top:10px;}
.decide--use li .ic{color:var(--red);}
.decide--avoid li .ic{color:var(--muted);}

/* ---------- DfAM ---------- */
.tip-card{
  width:calc(25% - 15px);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 20px;background:var(--surface-soft);
}
.tip-card h3{font-size:14px;margin-bottom:8px;line-height:1.35;display:flex;align-items:flex-start;gap:10px;}
.tip-card h3 .ic{flex:0 0 auto;color:var(--muted);margin-top:1px;}
.tip-card p{font-size:12px;color:var(--muted);line-height:1.5;margin-left:0;}

/* ---------- Related ---------- */
.related-scroll-wrap{position:relative;overflow:hidden;}
.related-scroll{display:flex;gap:16px;transition:transform 0.5s ease;}
.mat-card{
  flex:0 0 auto;width:200px;border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 22px;text-decoration:none;background:var(--canvas);transition:border-color .15s ease,box-shadow .15s ease;
  position:relative;
}
.mat-card:hover{border-color:var(--red);box-shadow:0 4px 12px rgba(0,0,0,0.06);}
.mat-card:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
.mat-card .name{font-weight:700;color:var(--dark);font-size:15px;line-height:1.35;}
.mat-card__btns{display:flex;gap:6px;margin-top:12px;}
.mat-card__btn{
  display:inline-block;padding:6px 10px;font-size:10px;font-weight:600;
  letter-spacing:0.04em;text-transform:uppercase;border-radius:var(--radius);
  text-decoration:none;transition:opacity .15s ease;cursor:pointer;white-space:nowrap;
}
.mat-card__btn--compare{background:var(--red);color:#fff;border:none;}
.mat-card__btn--compare:hover{opacity:0.9;}
.mat-card__btn--view{background:transparent;color:var(--red);border:1px solid var(--red);}
.mat-card__btn--view:hover{background:var(--red);color:#fff;}

/* ---------- CTA ---------- */
.cta{background:var(--dark);color:#fff;text-align:center;padding:80px 0;}
.cta h2{color:#fff;margin-bottom:8px;}
.cta p{color:rgba(255,255,255,0.7);margin-bottom:30px;}
.cta__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.wordmark{
  margin-top:44px;font-weight:700;letter-spacing:0.14em;font-size:13px;text-transform:uppercase;color:rgba(255,255,255,0.5);
}
.wordmark b{color:#fff;}

/* ---------- Hero image split ---------- */
.hero__inner{display:flex;align-items:center;gap:32px;}
.hero__content{flex:1;min-width:0;}
.hero__img-wrap{flex:0 0 460px;overflow:hidden;background:#000;position:relative;border-radius:var(--radius);}
.hero__img-wrap::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,#000 0%,transparent 20%,transparent 80%,rgba(0,0,0,0.4) 100%),
    linear-gradient(to bottom,transparent 78%,rgba(0,0,0,0.4) 93%,#000 100%),
    linear-gradient(to top,transparent 78%,rgba(0,0,0,0.4) 94%,#000 100%);
}
.hero__img-wrap img{width:100%;height:auto;max-height:380px;object-fit:cover;display:block;}

/* ---------- App tile with image ---------- */
.app-tile.has-img{padding:0;}
.app-tile.has-img .tile-img{width:100%;height:160px;object-fit:cover;border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;display:block;}
.app-tile.has-img .tile-body{padding:20px 22px;}

/* ---------- Carousel (JS-driven single-card step) ---------- */
.carousel-wrap{position:relative;overflow:hidden;}
.carousel-track{display:flex;gap:20px;transition:transform 0.5s ease;}

/* ---------- Compatible Printers ---------- */
.printer-scroll-wrap{position:relative;overflow:hidden;}
.printer-scroll{display:flex;gap:20px;transition:transform 0.5s ease;}
.printer-scroll::-webkit-scrollbar{height:6px;}
.printer-scroll::-webkit-scrollbar-track{background:var(--surface-soft);border-radius:3px;}
.printer-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.printer-scroll::-webkit-scrollbar-thumb:hover{background:var(--muted);}
.printer-card{
  flex:0 0 300px;scroll-snap-align:start;
  border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;background:var(--canvas);text-decoration:none;
  transition:border-color .15s ease,box-shadow .15s ease;
  display:flex;flex-direction:column;
}
.printer-card:hover{border-color:var(--red);box-shadow:0 4px 12px rgba(0,0,0,0.06);}
.printer-card:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
.printer-card__img{width:100%;height:280px;object-fit:cover;background:var(--surface-soft);padding:0;display:block;}
.printer-card__body{padding:18px 20px 22px;flex:1;display:flex;flex-direction:column;}
.printer-card__name{font-weight:700;font-size:17px;color:var(--dark);}
.printer-card__note{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5;flex:1;}
.printer-card__compat{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px;}
.compat-tag{font-size:10px;font-weight:600;letter-spacing:0.05em;padding:2px 7px;background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--radius);color:var(--muted);}
.printer-card__link{
  display:inline-block;margin-top:14px;padding:6px 12px;font-size:10px;font-weight:600;
  letter-spacing:0.04em;text-transform:uppercase;color:#fff;background:var(--red);
  border:none;border-radius:var(--radius);transition:opacity .15s ease;cursor:pointer;pointer-events:none;
}
.printer-card__link:hover{opacity:0.9;}
.printer-not-compat{
  background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 20px;display:flex;align-items:flex-start;gap:12px;margin-top:20px;
}
.printer-not-compat .ic{color:var(--muted);flex:0 0 auto;margin-top:2px;}
.printer-not-compat p{font-size:13px;color:var(--muted);line-height:1.5;}
.printer-not-compat p strong{color:var(--ink);}

/* ---------- Prop card with image ---------- */
.prop-card.has-img{padding:0;}
.prop-card.has-img .prop-img{width:100%;height:100px;object-fit:cover;border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;display:block;}
.prop-card.has-img .prop-body{padding:16px 20px;}
/* The `cards` block's optional per-card control. Only the contact page uses it
 * today and that page loads landing.css, but the block is shared, so the rule
 * lives in both sheets rather than waiting to be missed on the first material
 * page that wants one. */
.prop-act{margin-top:16px;}
.prop-act--plain{background:var(--red);color:#fff;}
.prop-act--plain:hover{filter:brightness(0.92);color:#fff;}

/* ---------- Tip card with image ---------- */
.tip-card.has-img{padding:0;}
.tip-card.has-img .tip-img{width:100%;height:110px;object-fit:cover;border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;display:block;}
.tip-card.has-img .tip-body{padding:12px 14px;}
.tip-card.has-img .tip-body h3{margin-bottom:6px;}
.tip-card.has-img .tip-body h3 .ic{display:none;}
.tip-card.has-img .tip-body p{margin-left:0;}

/* ---------- Mat card with image ---------- */
.mat-card.has-img{padding:0;width:220px;}
.mat-card.has-img .mat-img{width:100%;height:160px;object-fit:cover;border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;display:block;}
.mat-card.has-img .mat-body{padding:14px 18px 16px;}
.mat-card.has-img .cta-pill{margin-top:12px;}

/* ---------- Footer nav anchor list (sr context) ---------- */
.footer-min{padding:26px 0;border-top:1px solid var(--border);font-size:12px;color:var(--muted);}

/* skip link */
.skip-link{
  position:absolute;top:-100px;left:16px;background:var(--dark);color:#fff;
  padding:10px 16px;border-radius:var(--radius);font-size:14px;font-weight:600;
  z-index:9999;text-decoration:none;
}
.skip-link:focus{top:16px;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .spec-inline{width:50%;}
  .qr-item{width:50%;}
  .prop-card{width:calc(50% - 10px);}
  .app-tile{width:calc(50% - 10px);}
  .tip-card{width:calc(50% - 10px);}
  .chart-panel{flex-direction:column;padding:24px 16px;}
  .chart-panel .chart-side{flex:none;width:100%;order:1;padding-right:0;}
  .chart-panel .svg-hold{flex:none;width:100%;max-width:none;order:2;margin:16px -8px 0;}
  .hero__inner{flex-direction:column-reverse;}
  .hero__img-wrap{flex:0 0 auto;width:100%;max-width:480px;margin:0 auto -30px;border-radius:var(--radius) var(--radius) 0 0;}
  .hero__img-wrap img{height:260px;max-height:260px;}
  .printer-card{max-width:100%;}
}
@media (max-width:600px){
  .section{padding:52px 0;}
  .wrap{padding:0 18px;}
  .spec-inline{width:50%;}
  .quickref dl{grid-template-columns:repeat(2,1fr);}
  .qr-item:nth-last-child(-n+3){border-bottom:1px solid var(--border);}
  .qr-item:nth-last-child(-n+2){border-bottom:0;}
  .qr-item{width:100%;}
  .prop-card{width:calc(50% - 10px);}
  .prop-card.has-img .prop-img{height:70px;}
  .app-tile{width:calc(50% - 10px);}
  .app-tile.has-img .tile-img{height:100px;}
  .tip-card{width:calc(50% - 10px);}
  .tip-card.has-img .tip-img{height:80px;}
  .decide-col{width:100%;}
  .hero__specs{padding-top:22px;}
  .chart-panel{padding:20px 12px;}
  .chart-panel .svg-hold{margin:16px -4px 0;}
}

#scatter-container{display:flex;gap:20px;align-items:flex-start;}
      #scatter-left-panel{flex:0 0 220px;display:flex;flex-direction:column;gap:16px;}
      #scatter-chart-wrapper{flex:1;overflow:visible;}
      #scatter-chart svg{display:block;width:100%;height:auto;max-width:100%;}
      #scatter-materials{background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--radius);padding:16px;overflow-y:auto;max-height:400px;}
      #material-desc{padding:16px;background:var(--canvas);border:1px solid var(--border);border-radius:var(--radius);font-size:12px;line-height:1.4;color:var(--muted);}
      .mat-btn{min-height:44px;-webkit-user-select:none;-webkit-touch-callout:none;}
      @media(max-width:768px){
        #scatter-container{flex-direction:column;align-items:stretch;}
        #scatter-left-panel{flex:1;flex-direction:row;gap:16px;}
        #scatter-chart-wrapper{width:100%;overflow:visible;}
        #scatter-chart svg{width:100%;}
        #scatter-materials{flex:0 0 160px;max-height:200px;}
        #material-desc{flex:1;padding:12px!important;font-size:11px!important;min-width:auto;}
      }
      @media(max-width:640px){
        #scatter-left-panel{flex-direction:column;}
        #scatter-materials{flex:1;max-height:180px;}
        .scatter-label{font-size:10px!important;}
        #material-desc{font-size:11px!important;}
      }
      @media(max-width:480px){
        #scatter-materials{max-height:150px;min-width:auto;}
        #material-desc{min-width:auto;}
        #material-list{gap:4px!important;}
        .mat-btn{padding:8px 10px!important;font-size:11px!important;min-height:40px!important;}
        .mat-btn span{font-size:9px!important;}
        .scatter-label{font-size:9px!important;}
      }

.scatter-grid { stroke:rgba(60,60,60,0.15); stroke-width:1; }
              .scatter-label { font-family:Montserrat,system-ui,-apple-system,sans-serif; }
              .scatter-circle { cursor:pointer; transition:all .2s ease; touch-action:manipulation; }
              .scatter-circle:hover, .scatter-circle:active { opacity:0.9; }
              .scatter-circle.active { filter:drop-shadow(0 0 10px #f25e50); }


/* ─── added by the port ────────────────────────────────────────────────────
   Everything above is lifted verbatim from Open Design. Everything below is
   the SAME declarations, transcribed out of the inline `style="…"` attributes
   the port moved to class names — not a redesign. If a rule here disagrees
   with the original page, the original wins: `_source/od-pages/` is the
   reference, and this section is the one the port already got wrong once.

   Do not add rules for anything the lifted sheet already styles. It carries
   `.scatter-circle`, `.scatter-circle.active` and `.scatter-label` already;
   a second, slightly different copy here is how a port drifts. */

.scatter-panel__title{font-size:11px;text-transform:uppercase;
  letter-spacing:0.06em;color:var(--muted);margin:0 0 12px;font-weight:600;}
.scatter-panel__list,#material-list{display:flex;flex-direction:column;gap:6px;}
.mat-btn{background:var(--canvas);border:1px solid var(--border);
  border-radius:var(--radius);padding:10px 12px;font-family:var(--font);
  font-size:12px;font-weight:600;color:var(--dark);cursor:pointer;
  text-align:left;transition:all .12s ease;}
.mat-btn__sub{font-size:10px;font-weight:400;color:var(--muted);}

/* The only rule here the original did not have. `mat-active` is toggled by
   the script on every click and was styled by nothing, so selecting a
   material moved the highlight on the chart and left the list untouched —
   and the list scrolls, so the selected row can be off-screen entirely. */
.mat-btn.mat-active{border-color:var(--red);
  background:color-mix(in oklab, var(--red) 8%, var(--canvas));}

/* A cutout in a card thumb. These containers crop with `cover`, which is right
   for a photograph and wrong for a transparent product render — it slices the
   spool. `is-contained` (see chrome.contained) says the picture must be read
   whole, so it is contained on the card's own soft surface instead. */
.mat-card.has-img .mat-img.is-contained,
.app-tile.has-img .tile-img.is-contained,
.prop-card.has-img .prop-img.is-contained,
.tip-card.has-img .tip-img.is-contained{
  object-fit:contain;background:var(--surface-soft);padding:10px;
}

/* ------------------------------------------------ the phone floor
 *
 * Two numbers, measured in a 390px browser rather than guessed at.
 *
 * 44px, because that is the size Apple and Google both publish for a control
 * a thumb has to hit, and the material cards' Compare / View Material buttons
 * were 30px tall. 12px, because below that a line stops being readable on a
 * phone held at arm's length and Lighthouse stops counting it as text — and
 * the material-picker sub-labels were NINE.
 *
 * This block only lowers nothing: it raises. Everything here is a floor, and
 * the desktop layout above is untouched. `!important` appears only where the
 * rule it is overriding is itself `!important` (the scatter panel's).
 */
@media (max-width: 640px) {
  .mat-card__btn { min-height: 44px; display: inline-flex; align-items: center;
    padding: 6px 12px; font-size: 12px; }
  .qr-item .k { font-size: 12px; }
  .spec-inline .k, .compare-label, .prop-card .name,
  .req-table thead th { font-size: 12px; }
  .req-table td:nth-child(2)::before,
  .req-table td:nth-child(3)::before { font-size: 12px; }
  .compat-tag { font-size: 12px; }
  .callout p, .foot-note { font-size: 14px; }
  /* Chips that link to another material: 18px tall, in a row, in a scroller —
   * the hardest thing on these pages to hit. */
  .quickref a, .compat-tag a, .mat-chip { min-height: 44px;
    display: inline-flex; align-items: center; }
  /* A spec table that scrolls sideways must SAY so, or it reads as clipped. */
  .tablewrap { -webkit-overflow-scrolling: touch; }
}
@media (max-width: 480px) {
  .req-table tr { font-size: 12px; }
  .mat-btn { font-size: 12px !important; min-height: 44px !important; }
  .mat-btn span, .mat-btn__sub { font-size: 12px !important; }
  #material-desc { font-size: 13px !important; }
  /* Axis labels inside the SVG. 9px was unreadable; 11px is the most the
   * scatter can carry without the labels colliding, and a chart label is not
   * body copy — it is read against the axis it sits on. */
  .scatter-label { font-size: 11px !important; }
}

/* ------------------------------- charts on a phone
 *
 * These three SVGs carry their label sizes as presentation attributes in USER
 * UNITS, and the SVG is scaled to fit its column. On a 390px screen the radar
 * is drawn at 0.39x, so `font-size="10"` is not 10px — it is 3.9px. The bar
 * chart lands at 5.6px and the scatter at 5px. Nothing could see it: the DOM
 * says 10, `getComputedStyle` says 10, and it is 10 — of a unit that is
 * scaled away before it reaches the screen.
 *
 * So the sizes are restated per chart, each multiplied by that chart's own
 * scale, to land near 11 real pixels. The numbers below are not round because
 * the scale factors are not round.
 *
 * Presentation attributes lose to any CSS rule, so no `!important` is needed
 * to beat them — but the scatter's labels also carry a `.scatter-label` rule
 * with `!important` further up this file, which is why that one has it too.
 */
@media (max-width: 640px) {
  /* The radar and the scatter are NOT fixed by enlarging their type. Tried:
     at the size needed to read them, "Ease of Printing" runs off the left
     edge and "Dimensional Stability" lands on top of "Chemical Resistance".
     Nine labels around a polygon need width, and 342px is not width.

     So they keep their designed proportions and are given room instead. The
     chart renders at a size where its own 12-unit labels are ~10 real pixels
     and the reader swipes it — the same answer `.tablewrap` already gives the
     wide spec tables on this page, rather than a second, worse answer. */
  #scatter-chart-wrapper {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .chart-svg--scatter { min-width: 640px; }           /* 0.94x -> 10u ~9.4px */
  /* The radar keeps its whole shape on screen: `site.js` swaps in the short
     axis names below this width, and nine short names leave room for type
     that is actually readable at 0.43x. */
  .chart-svg--radar #radar-labels { font-size: 25px; }  /* 0.43x -> ~10.7px */
  .chart-svg--radar text { font-size: 24px; }           /* ring numbers -> ~9.4px */
  /* The bar chart is only scaled to 0.56, so this one can be sized up — but
     not freely. Its material names are anchored at x=94 and run leftwards,
     which is all the gutter there is; at 19u "Nylon PA12" lost its N off the
     edge of the viewBox. 16u is what fits the longest name in 94 units. */
  .chart-svg--bar text { font-size: 16px; }           /* 0.56x -> ~9px */
  .printer-card__link { font-size: 12px; }
  .scatter-panel__title { font-size: 12px; }
  /* A link that IS the whole table cell is a target, not an inline link — it
     was 18px tall inside a 44px row. Fill the row. */
  .spec-table td a { display: block; padding: 12px 0; }
  .skip-link { min-height: 44px; display: flex; align-items: center; }
}