/* Materials page. Page-only layout and the few small parts nothing else needs; every component it leans on (.panel, .card, .spot, .cmp,
   .readouts, .callout, .badge, .btn-*) is in site.css. Page CSS stays free of external resources, as site.css is. */

.mat > section { padding-block: clamp(32px, 5vw, 56px); }
.mat h2 { margin-bottom: var(--space-4); }
.mat .eyebrow { margin-bottom: var(--space-3); }
.mat .measure { margin-bottom: var(--space-5); }

/* ---- Hero: title and lead on the left, the heat scale on the right ---- */
.mat-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 80px); align-items: center; padding-top: clamp(40px, 7vw, 96px); padding-bottom: clamp(24px, 4vw, 48px); }
.mat-hero .display { margin: 0 0 var(--space-4); font-size: clamp(3rem, 1.4rem + 7vw, 6.25rem); }
.mat-hero .lead { margin-bottom: var(--space-5); }
.mat-jump { gap: var(--space-2); }
.mat-jump .sm-btn { --b-h: 44px; }

/* The heat scale: markers on a 40 to 100 degree axis. Positions are (t - 40) / 60 of the width. */
.scale { margin: 0; }
.scale .panel-head { margin-bottom: var(--space-4); }
.scale-plot { position: relative; height: 128px; margin: var(--space-4) 18px 0; }
.scale-axis { position: absolute; left: 0; right: 0; bottom: 26px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, rgba(125, 211, 252, .55), rgba(255, 138, 71, .85) 62%, #FF6B1A); box-shadow: 0 0 18px -2px rgba(255, 107, 26, .35); }
.scale-ticks { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; display: flex; justify-content: space-between; font-size: .6875rem; line-height: 16px; color: var(--text-3); }
.scale-ticks span { position: relative; display: flex; justify-content: center; width: 0; white-space: nowrap; }
.scale-ticks span::before { content: ""; position: absolute; left: 0; top: -10px; width: 1px; height: 8px; background: var(--line-strong); }
.scale-mark { --p: 0%; position: absolute; left: var(--p); bottom: 26px; width: 0; height: 0; }
.scale-mark[data-t="55"] { --p: 25%; }
.scale-mark[data-t="70"] { --p: 50%; }
.scale-mark[data-t="90"] { --p: 83.333%; }
.scale-mark::before { content: ""; position: absolute; left: -.5px; bottom: 7px; width: 1px; height: 44px; background: linear-gradient(0deg, var(--text-2), transparent); }
.scale-mark::after { content: ""; position: absolute; left: -5px; bottom: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--text); box-shadow: 0 0 12px rgba(233, 238, 247, .35); }
.scale-label { position: absolute; left: 0; bottom: 56px; display: flex; flex-direction: column; align-items: center; gap: 3px; transform: translateX(-50%); white-space: nowrap; }
.scale-label b { font: 650 1rem/1 var(--font-head); letter-spacing: -.02em; color: var(--text); }
.scale-label i { font-style: normal; font-size: .75rem; line-height: 1; color: var(--signal-hi); }
.scale .helper { margin: var(--space-4) 0 0; }

/* ---- Which should I pick ---- */
.mat-pick { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.pick-panel { padding: 0; overflow: hidden; margin: 0; }
.pick { list-style: none; margin: 0; padding: 0; }
.pick li + li { border-top: 1px solid var(--line); }
.pick a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; min-height: 76px; padding: 16px var(--space-5); color: var(--text); text-decoration: none; transition: background-color var(--dur-1), padding var(--dur-2) var(--ease); }
.pick a:hover { background: rgba(255, 255, 255, .035); }
.pick a:focus-visible { outline-offset: -3px; border-radius: 0; }
.pick .q { display: grid; gap: 2px; min-width: 0; }
.pick .q b { font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; }
.pick .q span { color: var(--text-2); font-size: var(--fs-small); }
.pick .a { display: inline-flex; align-items: baseline; gap: 10px; font: 600 1.125rem/1 var(--font-mono); letter-spacing: -.01em; color: var(--signal-hi); white-space: nowrap; }
.pick .a::after { content: "\2192"; display: inline-block; transition: transform var(--dur-2) var(--ease); }
.pick a:hover .a::after { transform: translateX(3px); }
.pick .a small { font: 500 .6875rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pick .is-soon .a { color: var(--text-2); }

/* ---- The comparison table ---- */
.mat-wrap { margin-top: var(--space-5); }
.mat-wrap:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: var(--r); }
.mat-table { min-width: 1040px; table-layout: fixed; }
.mat-table th, .mat-table td { padding: 16px 18px; line-height: 1.5; }
.mat-table thead th { padding-top: 18px; padding-bottom: 16px; vertical-align: top; white-space: normal; }
.mat-table thead th:first-child, .mat-table tbody th { width: 168px; }
.mat-table td { color: var(--text-2); font-size: .9375rem; }
.mat-table tbody th { font: 500 .6875rem/1.4 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; color: var(--text-3); padding-top: 21px; }
.mat-table th:first-child { position: sticky; left: 0; z-index: 2; background: #0B111D; box-shadow: 1px 0 0 var(--line); }
.mat-table thead th:first-child { background: #0E1522; }
.mat-th { display: block; font: 650 1.375rem/1.1 var(--font-head); letter-spacing: -.03em; text-transform: none; color: var(--text); }
.mat-tag { display: block; margin-top: 6px; font: 500 .6875rem/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.mat-table thead .badge { margin-top: 6px; }
.mat-table .is-soon { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .018) 0 6px, transparent 6px 12px); }
.mat-table td.is-soon { color: var(--text-3); }
.mat-table thead th:first-child, .mat-table tbody th { background-clip: padding-box; }
.unrated { color: var(--text-3); font-size: var(--fs-small); }
.mat-price-cell { display: inline-block; margin-right: 4px; font-size: 1.125rem; color: var(--text); }
.scroll-hint { display: none; margin: 0 0 var(--space-2); }

/* The 1 to 5 rating: a bar plus the words. Filled segments are ice (data); the figure is always printed as well. */
.rate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; }
.rate-bar { display: inline-grid; grid-auto-flow: column; gap: 3px; flex: none; }
.rate-bar i { display: block; width: 11px; height: 6px; border-radius: 2px; background: rgba(255, 255, 255, .11); }
.rate[data-v="1"] i:nth-child(-n+1), .rate[data-v="2"] i:nth-child(-n+2), .rate[data-v="3"] i:nth-child(-n+3),
.rate[data-v="4"] i:nth-child(-n+4), .rate[data-v="5"] i:nth-child(-n+5) { background: var(--ice); box-shadow: 0 0 8px rgba(125, 211, 252, .4); }
.rate-word { font: 500 .6875rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text); white-space: nowrap; }
.rate-word .n { color: var(--text-3); margin-right: 2px; }

/* ---- Material cards ---- */
.mat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-4); row-gap: 0; margin-top: var(--space-5); }
.mat-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
/* Where subgrid is supported each card spans four rows (head, blurb, good for, not for), so the same part of every card lines up. */
@supports (grid-template-rows: subgrid) {
  .mat-grid .mat-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--space-4); align-content: start; }
  .mat-grid .gn { display: contents; }
}
.mat-card > p { margin: 0; }
.mat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.mat-head p { margin: 0; }
.mat-name { margin: 0 0 4px; font: 650 clamp(1.75rem, 1.4rem + 1vw, 2.25rem)/1 var(--font-head); letter-spacing: -.04em; }
.mat-rate { display: grid; justify-items: end; gap: 2px; text-align: right; }
.mat-rate .num { font-size: 1.5rem; line-height: 1; letter-spacing: -.03em; color: var(--signal-hi); }
.gn { display: grid; gap: var(--space-4); margin-top: auto; }
.gn > div { min-width: 0; }
.gn h4 { margin: 0 0 var(--space-2); }
.gn ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gn li { position: relative; padding-left: 24px; color: var(--text-2); font-size: .9375rem; line-height: 1.5; }
.gn li::before { position: absolute; left: 0; top: .12em; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 5px; font: 600 .75rem/1 var(--font-mono); }
.gn-yes li::before { content: "+"; color: var(--good); background: rgba(52, 211, 153, .1); border: 1px solid rgba(52, 211, 153, .3); }
.gn-no li::before { content: "\00D7"; color: var(--text-3); background: var(--surface); border: 1px solid var(--line-strong); }
.mat-soon { margin-top: var(--space-4); border-style: dashed; background: transparent; box-shadow: none; gap: var(--space-3); }
.mat-soon .mat-head { border-bottom: 0; padding-bottom: 0; align-items: center; }
.mat-soon .mat-name { margin-bottom: 4px; color: var(--text-2); }
.mat-soon > p { max-width: 70ch; }

/* ---- Finishes ---- */
.fin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-4); row-gap: var(--space-4); margin: var(--space-5) 0 var(--space-3); }
.fin { display: flex; flex-direction: column; gap: 0; padding: var(--space-5); }
/* Five rows (number, name, price, blurb, when to choose it) shared across the three cards where subgrid is supported. */
@supports (grid-template-rows: subgrid) {
  .fin-grid { row-gap: 0; }
  .fin-grid .fin { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .fin-grid .fin-for { margin: 0 !important; }
}
.fin-n { margin: 0 0 var(--space-5); color: var(--signal-hi); }
.fin h3 { margin-bottom: var(--space-2); font-size: 1.5rem; letter-spacing: -.03em; }
.fin-price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.fin-price .price { font: 500 1.75rem/1 var(--font-mono); letter-spacing: -.04em; color: var(--text); }
.fin-price .from { font: 500 .6875rem/1.35 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.fin p { margin-bottom: var(--space-3); }
.fin-for { margin: auto 0 0 !important; padding-top: var(--space-3); font-size: .9375rem; }
.fin-for b { display: block; margin-bottom: 2px; font: 500 .6875rem/1.4 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; color: var(--text-3); }
.fin-grid + .helper { margin-top: var(--space-3); }

/* ---- Fit and size ---- */
.mat-fit { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.mat-fit .readouts { margin-bottom: var(--space-4); }
.mat-fit .readout dd { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); }
.mat-fit .callout { margin-bottom: 0; }
.mat-fit p .num { color: var(--text); }

/* ---- Samples and the closing call to action ---- */
.mat-samples, .mat-go { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5) var(--space-6); align-items: center; }
.mat-samples h2, .mat-go h2 { margin-bottom: var(--space-3); }
.mat-samples .muted, .mat-go .muted { max-width: 60ch; margin: 0; }
.mat-samples .btns, .mat-go .btns { margin: 0; }
.mat-go h2 { font-size: var(--fs-h2); }

/* ---- Narrow screens ---- */
@media (max-width: 960px) {
  .mat-hero, .mat-pick, .mat-fit { grid-template-columns: minmax(0, 1fr); }
  .mat-grid, .fin-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-4); }
  .mat-grid .mat-card, .fin-grid .fin { grid-row: auto; display: flex; grid-template-rows: none; }
  .mat-grid .gn { display: grid; }
  .mat-samples, .mat-go { grid-template-columns: minmax(0, 1fr); }
  .scroll-hint { display: block; }
}
@media (max-width: 600px) {
  .mat-hero .display { font-size: clamp(2.75rem, 17vw, 4rem); }
  .pick a { padding: 14px var(--space-4); min-height: 72px; }
  .mat-table th, .mat-table td { padding: 14px 14px; }
  .mat-table thead th:first-child, .mat-table tbody th { width: 120px; }
  .mat-card, .fin { padding: var(--space-4); }
  .mat-samples .btns > *, .mat-go .btns > * { flex: 1 1 100%; }
}