/* ==========================================================================
   Home
   ========================================================================== */
.sec-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }
.sec-head h2 { margin-top: 10px; }
.sec-head__side { max-width: 380px; font-size: 17px; line-height: 1.7; }
.sec-head .link-underline { align-self: flex-start; border-bottom: 2px solid var(--ink); text-decoration: none; padding-bottom: 2px; }
@media (min-width: 1024px) {
  .sec-head { flex-direction: row; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; gap: 24px; }
  .sec-head .link-underline { align-self: auto; }
}

/* ---------- hero ---------- */
.hero { background-image: repeating-linear-gradient(90deg, rgba(17,17,17,.06) 0 1px, transparent 1px calc(100% / 12)); }
.hero__grid { display: flex; flex-direction: column; }
.hero__copy { display: flex; flex-direction: column; gap: 22px; padding-block: 32px 28px; }
.hero__title { font-size: clamp(54px, 14vw, 104px); line-height: .95; }
.hero__lead { max-width: 520px; }
.hero__cta { display: flex; flex-direction: column; gap: 8px; }
.hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--bw) solid var(--ink); margin-top: 8px; }
.hero__stats > div { padding: 14px 0 0; display: flex; flex-direction: column-reverse; gap: 2px; }
.hero__stats > div + div { padding-inline-start: 12px; border-inline-start: 1px solid var(--line); }
.hero__stats dd { margin: 0; font-size: clamp(24px, 6vw, 34px); line-height: 1.15; font-weight: 800; letter-spacing: -.03em; }
.hero__stats dt { font-size: 12px; line-height: 1.35; }
.hero__stage { min-height: 420px; margin-inline: calc(var(--gutter) * -1); }
.hero__code { position: absolute; top: 14px; inset-inline-end: 18px; font-size: clamp(80px, 22vw, 168px); line-height: 1; -webkit-text-stroke-width: 1.5px; }
.hero__strands { inset-inline-start: -8%; bottom: 8%; width: 118%; opacity: .4; }
.hero__spool { inset-inline-start: 6%; top: 14%; width: 62%; }
.hero__vase { inset-inline-start: 46%; bottom: 20%; width: 38%; }
.callout { position: absolute; display: flex; align-items: center; direction: ltr; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.callout span { background: var(--surface); padding: 4px 8px; }
.callout i { width: 50px; height: 1px; background: var(--ink); }
.callout b { width: 7px; height: 7px; background: var(--ink); }
.callout--a { left: 4%; top: 12%; }
.callout--b { right: 4%; top: 46%; }
.hero__picker { position: absolute; inset-inline: 0; bottom: 0; background: var(--surface); border-top: var(--bw) solid var(--ink); display: flex; align-items: center; gap: 12px; padding: 10px var(--gutter); }
.hero__picker-text { display: flex; flex-direction: column; font-size: 13px; line-height: 1.4; min-width: 0; }
.hero__picker-text strong { font-size: 15px; }
.hero__sw { margin-inline-start: auto; display: flex; gap: 6px; }
.hero__sw button { width: 36px; height: 36px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); transition: box-shadow .12s ease; }
.hero__sw button:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.hero__sw button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--ink); }

@media (min-width: 768px) {
  .hero__cta { flex-direction: row; }
  .hero__stage { margin-inline: 0; min-height: 560px; }
}
@media (min-width: 1024px) {
  .hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; min-height: 760px; }
  .hero__copy { grid-column: span 6; padding-block: 64px 48px; gap: 28px; }
  .hero__cta .btn { min-height: 60px; font-size: 17px; }
  .hero__stats { margin-top: auto; }
  .hero__stats > div + div { padding-inline-start: 20px; }
  .hero__stage { grid-column: span 6; margin-block: 32px; min-height: 680px; }
  .hero__vase { bottom: 13%; }
  .callout i { width: 70px; }
}

/* ---------- materials ---------- */
.mats { display: block; }
.mats__list { border-top: var(--bw) solid var(--ink); }
.mat-row { display: grid; grid-template-columns: 36px 1fr auto; grid-template-areas: "n name p" "n d d"; gap: 2px 12px; align-items: baseline; padding: 18px 8px; border-bottom: var(--bw) solid var(--ink); transition: background-color .15s ease; }
.mat-row:hover, .mat-row.is-on { background: var(--surface); }
.mat-row__n { grid-area: n; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.mat-row strong { grid-area: name; font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.035em; text-align: right; }
.mat-row__d { grid-area: d; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; font-size: 15px; line-height: 1.55; }
.mat-row__p { grid-area: p; font-weight: 700; white-space: nowrap; }
.warn-tag { font-style: normal; font-size: 12px; font-weight: 700; color: var(--warn); box-shadow: inset 0 0 0 1px #C9A560; padding: 0 8px; }
.mats__preview { display: none; }
@media (min-width: 1024px) {
  .mats { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
  .mats__list { grid-column: span 7; }
  .mat-row { grid-template-columns: 56px 200px 1fr auto; grid-template-areas: "n name d p"; align-items: center; padding: 22px 12px; gap: 16px; }
  .mat-row strong { font-size: 40px; line-height: 44px; }
  .mats__preview { display: block; grid-column: span 5; min-height: 560px; }
  .mats__macro { inset: 0; width: 100%; height: 46%; object-fit: cover; }
  .mats__obj { inset-inline-start: 50%; bottom: 72px; transform: translateX(-50%); width: 58%; transition: opacity .25s ease; }
  .mats__label { position: absolute; top: 16px; inset-inline-end: 16px; background: var(--surface); padding: 6px 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; }
  .mats__spec { position: absolute; inset-inline: 0; bottom: 0; background: var(--surface); border-top: var(--bw) solid var(--ink); padding: 14px 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; font-size: 13px; line-height: 1.4; }
  .mats__spec > span { display: flex; flex-direction: column; }
  .mats__spec > span + span { border-inline-start: 1px solid var(--line); padding-inline-start: 12px; }
  .mats__spec strong { font-size: 16px; }
}

/* ---------- tiers ---------- */
.tiers__bg { opacity: .18; }
.tiers__pair { display: grid; border: var(--bw) solid var(--ink); background: var(--paper); }
.tier { padding: 24px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; }
.tier + .tier { border-top: var(--bw) solid var(--ink); }
.tier--premium { background: var(--accent); }
.tier__txt { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.tier__price { font-size: clamp(36px, 9vw, 52px); line-height: 1; font-weight: 800; letter-spacing: -.04em; }
.spec-list { width: 100%; display: flex; flex-direction: column; font-size: 14px; }
.spec-list > div { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.spec-list > div:last-child { border-bottom: 1px solid var(--line); }
.tier--premium .spec-list > div { border-color: rgba(17,17,17,.25); }
.spec-list dt { color: var(--ink-2); }
.tier--premium .spec-list dt { color: var(--ink); }
.spec-list dd { margin: 0; font-weight: 700; text-align: left; }
.center-row { display: flex; justify-content: center; margin-top: 24px; }
@media (min-width: 768px) {
  .tiers__pair { grid-template-columns: 1fr 1fr; }
  .tier + .tier { border-top: 0; }
  .tier { padding: 36px; gap: 24px; }
  .tier:first-child { border-inline-end: var(--bw) solid var(--ink); }
}
@media (max-width: 767px) {
  .tier { grid-template-columns: 1fr; }
  .tier img { max-width: 220px; margin-inline: auto; }
}

/* ---------- printer ---------- */
.printer__grid { display: flex; flex-direction: column; }
.printer__copy { display: flex; flex-direction: column; gap: 22px; padding-block: var(--section-y); }
.printer__tiles { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--bw) solid var(--ink); border-inline-start: var(--bw) solid var(--ink); }
.printer__tiles a { min-height: 88px; padding: 14px 18px; border-inline-end: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--ink); display: flex; flex-direction: column; justify-content: center; gap: 2px; background: var(--surface); transition: background-color .15s ease; }
.printer__tiles a:hover { background: var(--accent); }
.printer__tiles strong { font-size: 20px; }
.printer__tiles .muted { font-size: 13px; }
.printer__art { min-height: 300px; margin-inline: calc(var(--gutter) * -1); }
.printer__tool { inset-inline-start: 50%; top: 50%; width: 78%; transform: translate(-50%, -50%) rotate(-8deg); }
.printer__tag { position: absolute; top: 16px; inset-inline-end: 16px; background: var(--surface); padding: 6px 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
@media (min-width: 1024px) {
  .printer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
  .printer__copy { grid-column: span 6; gap: 28px; padding-block: 96px; }
  .printer__art { grid-column: span 6; margin: 32px 0; min-height: 0; }
  .printer__tiles strong { font-size: 22px; }
}

/* ---------- best sellers ---------- */
.best__tabs > button { min-height: 46px; padding: 0 20px; }
.best { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); gap: 0; border-top: var(--bw) solid var(--ink); }
.best::-webkit-scrollbar { display: none; }
.best > .pcard { flex: 0 0 72vw; max-width: 300px; scroll-snap-align: start; margin: 0; border-top: 0; border-inline-start: 0; }
.best > .pcard:first-child { border-inline-start: var(--bw) solid var(--ink); }
.best__add { position: absolute; bottom: 0; inset-inline-end: 0; width: 46px; height: 46px; background: var(--accent); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.best__add:hover { background: var(--ink); color: #fff; }
.best .pcard__body { padding-inline-end: 62px; }
@media (min-width: 1024px) {
  .best { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; overflow: visible; margin-inline: 0; padding-inline: 0; border-top: var(--bw) solid var(--ink); border-inline-start: var(--bw) solid var(--ink); }
  .best > .pcard { flex: none; max-width: none; margin: 0; border: 0; border-inline-end: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--ink); min-height: 420px; }
  .best > .pcard:first-child { grid-column: span 2; grid-row: span 2; border-inline-start: 0; }
  .best > .pcard .pcard__stage { aspect-ratio: auto; flex: 1; min-height: 260px; }
}

/* ---------- macro ---------- */
.macro { min-height: 460px; color: #fff; }
.macro__grid { padding-block: 56px; display: flex; flex-direction: column; gap: 28px; }
.macro__copy { display: flex; flex-direction: column; gap: 20px; }
.macro h2 { font-size: clamp(38px, 7vw, 80px); line-height: .98; }
.macro__copy p { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.7; max-width: 520px; color: #DCE1EE; }
.report { background: var(--surface); color: var(--ink); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.report > div { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 10px; font-size: 15px; }
.report > .eyebrow + div { border-top-color: var(--ink); }
.report .link-underline { align-self: flex-start; margin-top: 6px; }
@media (min-width: 1024px) {
  .macro { min-height: 560px; }
  .macro__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding-block: 96px; }
  .macro__copy { grid-column: span 7; gap: 24px; }
  .report { grid-column: 9 / span 4; align-self: end; padding: 22px; }
}

/* ---------- guides ---------- */
.gcards { display: grid; gap: 28px; }
.gcard { display: flex; flex-direction: column; gap: 14px; }
.gcard__img { display: block; height: 260px; }
.gcard__img img { transition: transform .6s var(--ease); }
.gcard:hover .gcard__img img { transform: scale(1.05); }
.gcard__meta { display: flex; gap: 16px; font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.gcard__t { font-size: 20px; line-height: 1.4; font-weight: 700; }
.gcard__t--lead { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
@media (min-width: 768px) {
  .gcards { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .gcard--lead { grid-column: span 4; }
  .gcard:not(.gcard--lead) { grid-column: span 2; }
  .gcard__img { height: 320px; }
}
@media (min-width: 1024px) {
  .gcards { grid-template-columns: repeat(12, 1fr); }
  .gcard--lead { grid-column: span 6; }
  .gcard:not(.gcard--lead) { grid-column: span 3; }
  .gcard__img { height: 380px; }
}

/* ---------- brands ---------- */
.brands { padding-block: 40px; display: flex; flex-direction: column; gap: 20px; }
.brands__list { display: flex; flex-wrap: wrap; }
.brands__list a { font-size: clamp(24px, 4vw, 36px); line-height: 1.4; font-weight: 300; letter-spacing: -.02em; padding: 0 18px; border-inline-start: 1px solid var(--ink); transition: background-color .15s ease; }
.brands__list a:hover { background: var(--accent); }
.brands__list a:first-child { border-inline-start: 0; padding-inline-start: 0; }
@media (min-width: 1024px) {
  .brands { flex-direction: row; align-items: center; justify-content: space-between; padding-block: 56px; }
  .brands__list a { padding: 0 22px; }
}