/* The product pages (/make/<piece>/, /es/make/, /pt/make/), built by
   tools/build_product_pages.mjs. The network page's settings (css/network.css):
   a white page, a paper section whose bottom corners round away, ink #14222c,
   blue #0866ef, Inter, hairlines. These pages are read, not operated: no script. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-var-latin.woff2") format("woff2");
}

:root {
  --ink: #14222c;
  --sub: #4f5e64;
  --muted: #596369;
  --blue: #0866ef;
  --blue-deep: #0553c4;
  --riso: #2b6ef0;
  --paper: #f7f4ec;
  --fill: #fffdf8;
  --hair: #e7e8eb;
  --hair-paper: rgba(20, 34, 44, 0.08);
  --edge: rgba(20, 34, 44, 0.12);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gut: max(18px, 5vw);
  --max: 1080px;
  --round: clamp(40px, 6vw, 96px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 16px/1.55 "Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-deep); }
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.defs { position: absolute; }

/* The paper section: header, the answer and its three numbers */
.paper {
  background: var(--paper);
  border-radius: 0 0 var(--round) var(--round);
  padding: 0 var(--gut) clamp(40px, 5vw, 72px);
}
.top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: calc(var(--max) + 120px);
  margin: 0 auto;
  height: 86px;
  padding-top: 16px;
}
.top-link { justify-self: start; color: var(--ink); font-size: 14px; font-weight: 600; }
.brand { grid-column: 2; color: var(--ink); font-weight: 800; font-size: 30px; letter-spacing: -0.04em; }
.brand span { color: var(--blue); }
.lang-toggle { justify-self: end; display: inline-flex; gap: 4px; }
.lang-toggle a { padding: 10px 5px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: #6b7378; }
.lang-toggle a:hover { color: var(--ink); }
.lang-toggle a[aria-current="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(180px, 26vw, 320px);
  gap: clamp(20px, 4vw, 64px);
  align-items: center;
  max-width: var(--max);
  margin: 0 auto;
  padding-top: clamp(28px, 4.2vw, 60px);
}
.hero.solo { grid-template-columns: minmax(0, 760px); }
.eyebrow { margin: 0 0 16px; color: var(--blue); font-size: 15px; font-weight: 500; }
h1 {
  margin: 0;
  font-size: clamp(34px, 5.2vw, 64px);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.lead { max-width: 62ch; margin: 22px 0 0; color: var(--sub); font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.5; text-wrap: pretty; }
.note { margin: 14px 0 0; color: var(--muted); font-size: 13.5px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  transition: transform 0.25s var(--ease), background 0.2s;
}
.btn:hover { background: var(--blue); color: #fff; transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge); }
.btn.ghost:hover { background: #fff; color: var(--ink); }

/* The drawing: the network page's flats, printed once in riso blue */
.hero-draw { justify-self: end; width: 100%; }
.draw, .tile-draw { display: block; width: 100%; height: auto; overflow: visible; }
.ink { opacity: 0.96; transform: translate(2.2px, 1.6px); filter: url(#grain); }
.fb { fill: var(--riso); }
.fo { fill: transparent; stroke: var(--ink); stroke-width: 1.45; stroke-linejoin: round; stroke-linecap: round; }
.fs { fill: none; stroke: var(--ink); stroke-width: 0.95; stroke-linecap: round; stroke-linejoin: round; }
.ft { fill: none; stroke: var(--ink); stroke-width: 0.8; stroke-dasharray: 2.2 2; stroke-linecap: round; opacity: 0.85; }
.fh { fill: var(--fill); stroke: var(--ink); stroke-width: 0.95; }
.fr { stroke-width: 0.75; }
.fw { stroke-width: 1.45; }
.fm { stroke-width: 0.5; opacity: 0.5; }
.fk { stroke-width: 0.75; }

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: var(--max);
  margin: clamp(32px, 4.5vw, 56px) auto 0;
  border-top: 1px solid var(--hair-paper);
}
.facts div { padding: 18px 18px 0 0; }
.facts dt { color: var(--muted); font-size: 13px; }
.facts dd { margin: 4px 0 0; font-size: clamp(20px, 2.3vw, 28px); font-weight: 650; letter-spacing: -0.03em; }

/* The page below the paper */
main { max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.block { padding-top: clamp(52px, 7vw, 96px); }
h2 { margin: 0 0 clamp(18px, 2.4vw, 30px); font-size: clamp(24px, 3vw, 36px); font-weight: 650; letter-spacing: -0.035em; line-height: 1.1; text-wrap: balance; }

.maker {
  display: grid;
  grid-template-columns: clamp(180px, 30%, 320px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 40px);
  padding: clamp(20px, 2.6vw, 32px) 0;
  border-top: 1px solid var(--hair);
}
.maker-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: var(--paper); }
.maker h3 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -0.025em; line-height: 1.2; }
.maker h3 a { color: var(--ink); }
.maker h3 a:hover { color: var(--blue); }
.maker h3 span { margin-left: 6px; color: var(--muted); font-size: 14px; font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.maker-lead { max-width: 64ch; margin: 8px 0 0; color: var(--sub); }
.maker dl { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr); margin: 16px 0 0; }
.maker dt, .maker dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--hair); }
.maker dt { color: var(--muted); font-size: 13.5px; padding-right: 14px; }
.maker dd { font-weight: 550; }
.maker dd small { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; font-weight: 400; }
.prices { margin: 0; padding: 0; list-style: none; }
.prices li { display: flex; justify-content: space-between; gap: 16px; max-width: 420px; }
.prices li + li { margin-top: 4px; }
.prices span { font-weight: 450; }
.prices b { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.maker-link { display: inline-block; margin-top: 14px; font-weight: 600; }
.maker-link::after { content: " →"; }

.faq .qa { max-width: 760px; padding: 20px 0; border-top: 1px solid var(--hair); }
.qa h3 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; }
.qa p, .qa ul { margin: 8px 0 0; color: var(--sub); }
.qa ul { padding-left: 18px; }
.qa li + li { margin-top: 4px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tile {
  display: flex;
  flex-direction: column;
  padding: 14px 14px 16px;
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.tile:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(20, 34, 44, 0.08); }
.tile-draw { width: 74%; margin: 0 auto 8px; }
.tile b { font-weight: 650; letter-spacing: -0.015em; }
.tile span { color: var(--muted); font-size: 13px; }
.more { margin: 18px 0 0; font-weight: 600; }
.more a::after { content: " →"; }

.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: calc(var(--max) + 2 * var(--gut));
  margin: clamp(72px, 9vw, 120px) auto 0;
  padding: 26px var(--gut) 48px;
  border-top: 1px solid var(--hair);
  font-size: 13.5px;
  color: var(--muted);
}
.foot p { margin: 0; }
.foot .brand { font-size: 20px; }

@media (max-width: 720px) {
  .top { height: 72px; padding-top: 8px; }
  .brand { font-size: 26px; }
  .hero { grid-template-columns: 1fr; }
  .hero-draw { order: -1; justify-self: start; width: 132px; margin-bottom: -6px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts div:last-child { display: none; }
  .maker { grid-template-columns: 1fr; }
  .maker-photo img { aspect-ratio: 16 / 9; }
  .maker dl { grid-template-columns: 1fr; }
  .maker dt { padding-bottom: 0; }
  .maker dd { padding-top: 2px; border-top: 0; }
  .foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .tile { transition: none; }
}