/* Who makes what: the network page, a line sheet of technical flats.
   Built on the live homepage's own settings: a white page, a paper section
   whose bottom corners round away, ink #14222c for text and drawings only,
   blue #0866ef, Inter at 550, hairlines #e7e8eb. No frames, no grid lines.  */

@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;
  --soft: #8a9296;
  --blue: #0866ef;
  --blue-deep: #0553c4;
  --green: #16a66a;
  --riso: #2b6ef0;
  --paper: #f7f4ec;
  --warm: #eee9dd;
  --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: 1240px;
  --round: clamp(48px, 7.5vw, 130px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 16px/1.5 "Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
button { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.defs { position: absolute; }

/* The paper section: header, introduction and the sheet */
.paper {
  background: var(--paper);
  border-radius: 0 0 var(--round) var(--round);
  padding: 0 var(--gut) clamp(56px, 7vw, 110px);
}
/* Header, as on the homepage: the menu on the left, the wordmark in the middle,
   the languages on the right. The menu sits above the sheet it opens. */
.top {
  position: relative;
  z-index: 70;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin: 0 calc(-1 * var(--gut));
  padding: 16px 46px 0;
  height: 86px;
}
.top-left { display: flex; align-items: center; gap: 14px; }
.brand { grid-column: 2; color: var(--ink); font-weight: 800; font-size: 30px; letter-spacing: -0.04em; }
.brand span { color: var(--blue); }
.nav-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; margin-left: -10px; padding: 10px; background: none; border: 0; cursor: pointer; }
.nav-burger span { display: block; height: 2px; background: var(--ink); transition: transform 0.25s ease; }
.nav-burger span:nth-child(3) { display: none; }
.nav-open .nav-burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-open .nav-burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
.nav-burger:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.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; }
/* The menu itself is css/menu.css, shared with every page; here it only sits
   under the header, which stays on top to close it. */
.nav-sheet { z-index: 60; }

/* The header: centred words over the valley and its workshops */
.hero { position: relative; margin: 0 calc(-1 * var(--gut)); padding: clamp(28px, 4.2vw, 60px) 0 0; text-align: center; }
.hero-text { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; padding: 0 var(--gut); }
.hero-scene { position: relative; z-index: 0; margin-top: -6.4vw; pointer-events: none; }
.hero-scene svg { display: block; width: 100%; height: auto; aspect-ratio: 1400 / 262; }
.eyebrow { margin: 0 0 18px; color: var(--blue); font-size: 15px; font-weight: 500; }
h1 {
  margin: 0;
  font-size: clamp(36px, 3.8vw, 58px);
  font-weight: 550;
  line-height: 1.035;
  letter-spacing: -0.06em;
}
h1 span { display: block; color: var(--blue); text-wrap: balance; }

/* Your line in words: the fastest way to a plan */
.ask { max-width: 640px; margin: clamp(24px, 2.8vw, 34px) auto 0; }
.ask-label { display: block; margin: 0 0 10px; font-size: 15px; color: var(--sub); }
.ask-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 22px;
  background: #fff;
  border: 1px solid var(--edge);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(20, 34, 44, 0.06);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ask-box:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(8, 102, 239, 0.12), 0 10px 30px rgba(20, 34, 44, 0.06); }
.ask input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  outline: none;
  font: 400 17px/1.3 "Inter", system-ui, -apple-system, sans-serif;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ask input::placeholder { color: var(--soft); }
.ask button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 48px;
  padding: 0 20px 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}
.ask button:hover { background: var(--blue-deep); }
.ask button svg { width: 16px; height: 16px; flex: none; }
.ask-note { min-height: 21px; margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.ask-note a { font-weight: 500; }

.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; max-width: var(--max); margin: 10px auto 0; font-size: 14px; color: var(--muted); }
.facts b { color: var(--ink); font-weight: 550; font-variant-numeric: tabular-nums; }

/* Quantity and key: a quiet pill that stays in reach while you browse */
.toolbar {
  position: sticky;
  top: 12px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  max-width: var(--max);
  margin: clamp(28px, 3.4vw, 44px) auto 0;
  padding: 8px 10px 8px 22px;
  background: rgba(255, 253, 248, 0.86);
  border: 1px solid var(--hair-paper);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(20, 34, 44, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.qty { display: flex; align-items: center; gap: 14px; margin: 0; padding: 0; border: 0; min-width: 0; }
.qty-label { font-size: 14px; font-weight: 500; }
.seg { display: flex; gap: 2px; }
.seg button {
  border: 0;
  background: none;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.seg button:hover { color: var(--ink); background: rgba(20, 34, 44, 0.05); }
.seg button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.key { margin: 0 12px 0 0; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.key .k.told { margin-left: 12px; }
.k { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.k.seen { background: var(--ink); }
.k.told { border: 1.2px solid var(--ink); }

/* The sheet: one row per family, a label column like the homepage's factory list */
.sheet { max-width: var(--max); margin: 30px auto 0; }
.fam-row {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: 16px;
  padding: 26px 0 22px;
  border-top: 1px solid var(--hair-paper);
}
.fam-row:first-child { border-top: 0; }
.fam-row h2 { margin: 18px 0 0; font-size: 17px; font-weight: 550; letter-spacing: -0.02em; }
.fam-row h2 small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.fam-pieces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px 12px; }

.piece {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 12px 12px 16px;
  border: 0;
  border-radius: 24px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.piece:hover { background: rgba(255, 255, 255, 0.72); }
.piece[aria-pressed="true"] { background: #fff; box-shadow: 0 8px 30px -18px rgba(20, 34, 44, 0.35); }
.piece:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.piece-draw { display: block; margin: 0 -4px 4px; }
.piece-draw svg { display: block; width: 100%; height: auto; overflow: visible; }
.piece-name { font-size: 16px; font-weight: 550; letter-spacing: -0.02em; margin-bottom: 6px; }
.piece-name small { font-weight: 400; color: var(--muted); font-size: 13px; letter-spacing: 0; }
.piece-makers { display: grid; gap: 2px; }
.mk { display: flex; align-items: baseline; gap: 7px; font-size: 12.5px; line-height: 1.4; color: var(--muted); transition: opacity 0.3s; }
.mk .k { width: 6px; height: 6px; transform: translateY(-1px); }
.mk b { margin-left: auto; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk.no { opacity: 0.38; }
.mk.no b { text-decoration: line-through; text-decoration-thickness: 1px; }

.piece-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid rgba(20, 34, 44, 0.16);
  background: rgba(255, 255, 255, 0.8);
  transition: background 0.2s, border-color 0.2s, transform 0.35s var(--ease);
}
.piece:hover .piece-check { border-color: var(--blue); }
.piece-check::after {
  content: "";
  position: absolute;
  left: 7.5px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.3s var(--ease);
}
.piece[aria-pressed="true"] .piece-check { background: var(--blue); border-color: var(--blue); }
.piece[aria-pressed="true"] .piece-check::after { transform: rotate(45deg) scale(1); }

/* Flats */
.fb { fill: var(--riso); }
.ink {
  opacity: 0;
  transform: translate(9px, -7px);
  transition: opacity 0.16s, transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.2);
  filter: url(#grain);
}
.on .ink, .piece[aria-pressed="true"] .ink { opacity: 0.96; transform: translate(2.2px, 1.6px); }
.fo { fill: var(--fill); stroke: var(--ink); stroke-width: 1.45; stroke-linejoin: round; stroke-linecap: round; transition: fill 0.2s; }
.on .fo, .piece[aria-pressed="true"] .fo { fill: transparent; }
.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; }
.piece:hover .ft { animation: march 1.1s linear infinite; }
@keyframes march { to { stroke-dashoffset: -8.4; } }

/* Drawing on: outlines are plotted, then stitches and fill arrive. The page
   arrives with every flat pending, hidden only while scripts run (the .js
   class, set in the head). The page script marks the page ready; if it never
   comes, the flats show anyway after 4 s. */
.js .pending .fo, .js .pending .fs { stroke-dasharray: 1 1; stroke-dashoffset: 1; fill-opacity: 0; }
.js .pending .ft, .js .pending .fh { opacity: 0; }
.js:not(.network-ready) .pending :is(.fo, .fs, .ft, .fh) { animation: shown 0s 4s forwards; }
@keyframes shown { to { stroke-dashoffset: 0; fill-opacity: 1; opacity: 1; } }
.drawing .fo, .drawing .fs { stroke-dasharray: 1 1; stroke-dashoffset: 0; fill-opacity: 1;
  transition: stroke-dashoffset 1.15s cubic-bezier(0.55, 0.05, 0.25, 1), fill-opacity 0.5s 0.8s, fill 0.2s; }
.drawing .ft, .drawing .fh { opacity: 1; transition: opacity 0.45s 0.85s; }

.not-yet { max-width: var(--max); margin: 8px auto 0; padding: 20px 0 0 204px; border-top: 1px solid var(--hair-paper); font-size: 14px; color: var(--muted); }
.not-yet a { font-weight: 500; }

/* White sections below the paper */
main { padding: 0 var(--gut); }
.route-band, .makers, .how { max-width: var(--max); margin: clamp(80px, 10vw, 140px) auto 0; }

/* The close: the valley and the road out, a paper section whose top corners
   round in the way the header's bottom corners round away. Anything not on
   the sheet goes to the quote form. */
.closing { position: relative; isolation: isolate; overflow: hidden; height: clamp(720px, 64vw, 1040px); margin-top: clamp(80px, 10vw, 140px); border-radius: var(--round) var(--round) 0 0; background: var(--paper); text-align: center; }
.closing-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.closing-distance { position: absolute; left: -4%; top: -4%; width: 108%; max-width: none; height: 108%; object-fit: cover; object-position: 50% bottom; transform: translate3d(0, var(--distance-y, 0px), 0); }
.closing-foreground { position: absolute; left: -6%; bottom: -8%; width: 112%; max-width: none; height: 112%; object-fit: cover; object-position: center bottom; transform: translate3d(var(--foreground-x, 0px), var(--foreground-y, 0px), 0); }
.closing-copy { position: relative; max-width: 980px; margin: 0 auto; padding: clamp(64px, 8vw, 116px) var(--gut) 0; }
.closing h2 { margin: 0 auto; font-size: clamp(40px, 4.6vw, 72px); text-wrap: balance; }
.closing p { margin: 16px auto 0; max-width: 40ch; color: var(--sub); font-size: 18px; line-height: 1.6; }
.closing-cta { display: inline-flex; align-items: center; gap: 18px; height: 54px; margin-top: 28px; padding: 0 22px 0 24px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 15px; font-weight: 500; transition: background 0.2s; }
.closing-cta:hover { background: var(--blue-deep); }
.closing-cta svg { width: 16px; height: 16px; flex: none; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 7vw, 100px); align-items: end; margin-bottom: 40px; }
h2 { margin: 0; font-size: clamp(30px, 3.4vw, 50px); font-weight: 550; letter-spacing: -0.05em; line-height: 1.05; }
.section-head h2 { max-width: 14ch; }
.section-head p { margin: 0; max-width: 34em; color: var(--muted); font-size: 18px; line-height: 1.6; }

/* The route: what the network covers between an order and a customer */
.route { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.route li { position: relative; padding: 34px 26px 0 0; }
.route li::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 16px;
  right: 0;
  border-top: 2px solid var(--blue);
}
.route li:last-child::before { display: none; }
.route li.off::before, .route li.next-off::before { border-top: 2px dashed rgba(20, 34, 44, 0.22); }
.route .dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 5px #fff;
}
.route li.off .dot { background: #fff; border: 2px solid rgba(20, 34, 44, 0.3); }
.route b { display: block; font-size: 18px; font-weight: 550; letter-spacing: -0.02em; }
.route span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 26ch; }
.route li.off b { color: var(--muted); }

/* The factories: rows like the homepage's factory list */
.maker-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.maker {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) minmax(0, 270px) auto;
  gap: 30px;
  align-items: center;
  padding: 22px 2px;
  border-bottom: 1px solid var(--hair);
}
.maker img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; background: var(--warm); }
.maker h3 { margin: 0; font-size: 19px; font-weight: 550; letter-spacing: -0.025em; }
.maker h3 a { color: inherit; }
.maker h3 a:hover { color: var(--blue); }
.maker-where { margin: 1px 0 8px; font-size: 13px; color: var(--muted); }
.maker-lead { margin: 0 0 8px; font-size: 15px; color: var(--sub); max-width: 36em; }
.maker-terms { margin: 0; font-size: 13px; color: var(--soft); line-height: 1.55; }
.maker-terms span { display: block; }
.maker-makes { display: flex; flex-wrap: wrap; gap: 2px; }
.mini { width: 44px; height: 44px; display: block; }
.mini .fo { stroke-width: 3; }
.mini .fs, .mini .fr { stroke-width: 2; }
.mini .ft, .mini .fm, .mini .fk { display: none; }
.mini .fh { stroke-width: 1.8; }
.maker-also { flex-basis: 100%; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.maker-link { font-size: 13px; color: var(--muted); white-space: nowrap; }
.maker-link:hover { color: var(--blue); }

/* How we know */
.how h2 { margin-bottom: 36px; }
.how-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.how-list li { border-top: 1px solid var(--hair); padding-top: 18px; font-size: 15.5px; color: var(--muted); }
.how-list strong { display: block; margin-bottom: 6px; color: var(--ink); font-size: 18px; font-weight: 550; letter-spacing: -0.02em; }
.how-list .k { vertical-align: 0.05em; }

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

/* Your line: a bar that grows into the plan */
.line {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 20;
  width: min(820px, calc(100% - 24px));
  background: #fff;
  border: 1px solid var(--edge);
  border-radius: 30px;
  box-shadow: 0 26px 70px -30px rgba(20, 34, 44, 0.45), 0 2px 10px rgba(20, 34, 44, 0.05);
  transform: translate(-50%, 150%);
  transition: transform 0.55s var(--ease);
  overflow: hidden;
}
.line.show { transform: translate(-50%, 0); }
.line-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); }
.line.open .line-panel { grid-template-rows: 1fr; }
.line-panel-inner { min-height: 0; overflow: hidden; }
/* The plan and the send form scroll together; the plan redraws, the form stays. */
.plan-scroll { max-height: min(64vh, 640px); overflow: auto; overscroll-behavior: contain; border-bottom: 1px solid var(--hair); }
.line-bar { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 10px 10px 10px 16px; }
.line-flats { display: flex; flex: none; padding-left: 12px; }
.line-flats svg { width: 44px; height: 44px; margin-left: -12px; overflow: visible; }
.line-flats .more { align-self: center; margin-left: 6px; font-size: 12.5px; font-weight: 550; color: var(--muted); }
.line-head { flex: 1; min-width: 0; margin: 0; font-size: 15px; line-height: 1.35; color: var(--muted); }
.line-head strong { color: var(--ink); font-weight: 550; }
.line-toggle, .send {
  flex: none;
  border: 0;
  border-radius: 999px;
  padding: 13px 20px;
  background: var(--blue);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.line-toggle:hover, .send:hover { background: var(--blue-deep); }
.line.open .line-toggle { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge); }
.line.open .line-toggle:hover { box-shadow: inset 0 0 0 1px var(--ink); }

.plan-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 20px 24px 8px; }
.plan-top h3 { margin: 0; font-size: 14px; font-weight: 550; color: var(--muted); }
.plan-top button { border: 0; background: none; padding: 0; font-size: 13.5px; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.plan-f { padding: 16px 24px 18px; border-top: 1px solid var(--hair); }
.plan-f-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-photo { width: 56px; height: 42px; object-fit: cover; border-radius: 9px; flex: none; margin-right: 4px; background: var(--warm); }
.plan-f-head h4 { margin: 0; font-size: 18px; font-weight: 550; letter-spacing: -0.02em; }
.plan-f-head .where { font-size: 13.5px; color: var(--muted); }
.plan-f-head a { margin-left: auto; font-size: 13.5px; font-weight: 500; }
.plan-pieces { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0; }
.plan-piece { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; }
.plan-piece svg { width: 38px; height: 38px; overflow: visible; }
.plan-piece small { font-weight: 400; color: var(--muted); font-size: 12.5px; }
/* Each garment's own quantity, changed in place */
.pq select {
  -webkit-appearance: none;
  appearance: none;
  margin-left: 2px;
  padding: 3px 24px 3px 10px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2314222c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center / 9px 6px;
  font: 500 13px/1.4 "Inter", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  cursor: pointer;
}
.pq select:hover { border-color: var(--ink); }
.pq select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.plan-fix { margin-left: 6px; padding: 0; border: 0; background: none; color: var(--blue); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.plan-facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 13.5px; color: var(--sub); }
.plan-facts li { display: flex; gap: 8px; align-items: baseline; }
.plan-facts b { font-weight: 550; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-facts .unknown { color: var(--soft); }
.plan-alt { margin: 12px 0 0; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.plan-alt button { border: 1px solid var(--edge); background: #fff; border-radius: 999px; padding: 4px 11px; font-size: 12.5px; color: var(--sub); cursor: pointer; }
.plan-alt button:hover { border-color: var(--blue); color: var(--blue); }
.plan-warn { margin: 0; padding: 12px 24px; border-top: 1px solid var(--hair); background: #fbf6ea; color: #7a5212; font-size: 14px; }
.plan-warn + .plan-warn { border-top: 0; padding-top: 0; }
.plan-route { padding: 16px 24px 18px; border-top: 1px solid var(--hair); }
.plan-route h4 { margin: 0 0 12px; font-size: 14px; font-weight: 550; color: var(--muted); }
.plan-route .route { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plan-route .route li { padding: 24px 14px 0 0; }
.plan-route .route .dot { width: 12px; height: 12px; }
.plan-route .route li::before { top: 5px; left: 12px; }
.plan-route .route b { font-size: 14px; }
.plan-route .route span { font-size: 12.5px; margin-top: 3px; }
.plan-sum { margin: 0; padding: 14px 24px; border-top: 1px solid var(--hair); font-size: 13.5px; color: var(--sub); }
.plan-sum p { margin: 0 0 4px; }
.plan-sum p:last-child { margin: 0; color: var(--muted); }
.plan-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 24px 18px; border-top: 1px solid var(--hair); }
.plan-actions .quiet { border: 0; background: none; padding: 0; font-size: 14px; color: var(--sub); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.sent-mark { font-size: 14.5px; font-weight: 550; color: var(--ink); }
.sent-mark::before { content: "✓ "; color: var(--blue); }

/* Sending the line: the form under the plan (js/network-page.js, openSend). */
.send-panel { padding: 18px 24px 22px; border-top: 1px solid var(--hair); background: #fff; }
.send-panel h4 { margin: 0; font-size: 18px; font-weight: 550; letter-spacing: -0.02em; }
.send-intro { margin: 6px 0 0; font-size: 14px; color: var(--sub); }
.send-checks { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--paper); font-size: 13.5px; color: var(--sub); }
.send-checks-head { margin: 0; font-weight: 550; color: var(--ink); }
.send-checks ul { margin: 6px 0 0; padding-left: 18px; }
.send-checks li { margin: 2px 0; }
.send-form { display: grid; gap: 12px; margin-top: 16px; }
.send-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.send-field { display: grid; gap: 5px; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.send-field .opt { font-weight: 400; color: var(--muted); }
/* 16px text: iPhones zoom into smaller fields when they take focus. */
.send-field input, .send-field textarea { font: inherit; font-size: 16px; font-weight: 400; color: var(--ink); padding: 10px 12px; border: 1px solid var(--edge); border-radius: 10px; background: #fff; }
.send-field textarea { resize: vertical; min-height: 72px; }
.send-field input:focus, .send-field textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.send-status { margin: 0; font-size: 14px; color: #8a3b12; }
.send-status:empty { display: none; }
.send-go { justify-self: start; }
.send-go:disabled { background: var(--muted); cursor: progress; }
.send-fine { margin: 0; font-size: 12.5px; color: var(--muted); }
.send-done { outline: none; }
.send-done p { margin: 6px 0 0; font-size: 14.5px; color: var(--sub); }
/* The field only bots fill: kept out of sight and out of the tab order. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The language chip (js/langhint.js), offered to Spanish-browser visitors as on
   every page. It rises above your line's bar while the bar is up. */
.langhint { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 4px; max-width: calc(100vw - 32px); padding: 8px 8px 8px 18px; background: #fff; border: 1px solid var(--edge); border-radius: 999px; box-shadow: 0 10px 30px -12px rgba(20, 34, 44, 0.3); font-size: 14px; font-weight: 600; }
.langhint a { color: var(--blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.langhint a:hover { text-decoration: underline; }
.langhint button { padding: 6px 10px; border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.langhint button:hover { color: var(--ink); }
body:has(.line.show) .langhint { bottom: 104px; }

/* Narrower than the full sheet */
@media (max-width: 1100px) {
  .fam-row { grid-template-columns: 1fr; gap: 6px; }
  .fam-row h2 { margin: 0 0 4px 14px; }
  .fam-row h2 small { display: inline; margin-left: 8px; }
  .fam-pieces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .not-yet { padding-left: 14px; }
  .maker { grid-template-columns: 132px minmax(0, 1fr); }
  .maker-makes, .maker-link { grid-column: 2; }
  .route { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .route li:nth-child(2)::before { display: none; }
}

@media (max-width: 640px) {
  .top { height: 70px; padding: 10px 24px 0; }
  .brand { font-size: 25px; }
  .nav-burger { width: 38px; height: 40px; padding: 8px; margin-left: -8px; }
  h1 { font-size: 30px; }
  .ask-label { font-size: 14.5px; }
  .ask-box { padding: 5px 5px 5px 18px; }
  .ask input { font-size: 16px; height: 46px; }
  .ask button { width: 46px; height: 46px; padding: 0; justify-content: center; }
  .ask button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ask-note { font-size: 13.5px; }
  .toolbar { border-radius: 26px; padding: 10px 12px; top: 8px; }
  .qty { flex-wrap: wrap; gap: 6px 10px; }
  .seg button { padding: 6px 9px; font-size: 13.5px; }
  .key { font-size: 12.5px; margin: 0; }
  .fam-pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 6px; }
  .piece { padding: 10px 10px 14px; border-radius: 20px; }
  .piece-check { top: 8px; right: 8px; }
  .piece-name { font-size: 15px; }
  .mk { font-size: 11.5px; gap: 5px; }
  .fam-row h2 { margin-left: 10px; }
  .not-yet { padding-left: 10px; }
  .section-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 28px; }
  .section-head p { font-size: 16px; }
  .route { grid-template-columns: 1fr; row-gap: 26px; }
  .route li { padding: 0 0 0 34px; }
  .route li::before, .route li:nth-child(2)::before { display: block; top: 22px; bottom: -22px; left: 7px; right: auto; border-top: 0; border-left: 2px solid var(--blue); }
  .route li.off::before, .route li.next-off::before { border-top: 0; border-left: 2px dashed rgba(20, 34, 44, 0.22); }
  .route li:last-child::before { display: none; }
  .maker { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; }
  .maker img { border-radius: 12px; }
  .maker-makes, .maker-link { grid-column: 1 / -1; }
  .how-list { grid-template-columns: 1fr; gap: 22px; }
  .closing { height: 760px; }
  .closing-distance { left: -40%; top: 0; width: 180%; height: 100%; object-position: 96% bottom; }
  .closing-foreground { left: -25%; bottom: -24px; width: 150%; height: auto; object-fit: contain; }
  .foot { flex-direction: column; align-items: flex-start; padding: 22px var(--gut) 140px; }
  .line { width: calc(100% - 16px); bottom: max(8px, env(safe-area-inset-bottom)); border-radius: 24px; }
  .line-bar { gap: 10px; padding: 8px 8px 8px 12px; }
  .line-flats svg { width: 36px; height: 36px; }
  .line-head { font-size: 13.5px; }
  .line-toggle { padding: 11px 15px; font-size: 14px; }
  .plan-scroll { max-height: 66vh; }
  .plan-top, .plan-f, .plan-sum, .plan-actions, .plan-warn, .plan-route, .send-panel { padding-left: 16px; padding-right: 16px; }
  .send-row { grid-template-columns: 1fr; }
  .plan-route .route { grid-template-columns: 1fr; }
  .plan-route .route li { padding: 0 0 0 26px; }
  .plan-route .route li::before { top: 16px; left: 5px; }
}

/* The header scene (scene.js) */
.s-ln { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.s-floor { fill: var(--fill); stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; }
.s-in { fill: #fff; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.s-in.s-side { fill: #f3efe4; }
.s-out { fill: #fff; stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.s-out.s-side { fill: #ece7da; }
.s-top { fill: #fff; stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; }
.s-solid { fill: var(--ink); }
.s-blue { fill: var(--riso); stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.s-cloth { fill: var(--riso); opacity: 0.92; }
.s-stripe { fill: none; stroke: var(--riso); stroke-width: 2.4; }
.s-road { fill: #eeeae0; stroke: var(--ink); stroke-width: 1.1; }
.s-lane { fill: none; stroke: #fff; stroke-width: 1.6; stroke-dasharray: 10 9; }
.s-ground { fill: var(--paper); }
.s-ridge { fill: #eef3fd; stroke: rgba(8, 102, 239, 0.42); stroke-width: 1.1; stroke-linejoin: round; }
.s-ridge.s-far { fill: #f6f8fe; stroke: rgba(8, 102, 239, 0.24); }
.s-sea { fill: none; stroke: rgba(8, 102, 239, 0.4); stroke-width: 1.1; stroke-linecap: round; }
.s-ghost { fill: none; stroke: rgba(20, 34, 44, 0.32); stroke-width: 1.2; stroke-dasharray: 4 4; stroke-linejoin: round; }
.s-grain { filter: url(#grain); }
.s-bob { animation: s-bob 0.9s ease-in-out infinite alternate; }
.s-pace { animation: s-pace 7s ease-in-out infinite alternate; }
.s-needle { animation: s-needle 0.32s steps(2, jump-none) infinite; }
.s-spin { stroke-dasharray: 3 3; animation: s-spin 1.4s linear infinite; }
@keyframes s-bob { to { transform: translateY(-1.2px); } }
@keyframes s-pace { to { transform: translateX(var(--reach, 30px)); } }
@keyframes s-needle { to { transform: translateY(2.2px); } }
@keyframes s-spin { to { stroke-dashoffset: -12; } }
.s-paused * { animation-play-state: paused !important; }

/* Phones: the scene sits under the words, a few workshops wide */
@media (max-width: 700px) {
  .hero-scene { margin-top: 14px; }
  .hero-scene svg { aspect-ratio: auto; height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  .closing-distance, .closing-foreground { transform: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
  .js .pending .fo, .js .pending .fs { stroke-dasharray: none; stroke-dashoffset: 0; fill-opacity: 1; }
  .js .pending .ft, .js .pending .fh { opacity: 1; }
}