/* Build pages (owner review 17 Oct 2026: "this is a visual site"): the visual blocks from inc/visuals.php, and card
   treatments of the steps, lists and fit lists the pages already had. Loaded on the five build pages and n8n only.
   Status colours: OK #3A3F45 (neutral), warning #B87400, critical #C7362F, always with an icon and a word. */

/* The demo is followed by text on some pages */
.demo-box{margin-bottom:28px}

/* Price card: the price, then the path from agreement to handover */
.pricebox{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(0,2.25fr);margin:0 0 20px;border:2px solid var(--char);background:var(--sheet);box-shadow:8px 8px 0 var(--char)}
.pb-price{display:flex;flex-direction:column;gap:4px;padding:22px;background:var(--char);color:var(--white)}
.pb-price p{margin:0}
.pb-k{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--yellow)}
.pb-amt{font-family:var(--display);font-weight:800;font-size:3.2rem;line-height:1;letter-spacing:-.01em}
.pb-tax{font-size:.86rem;color:#C9CDD1}
.pb-price .pb-split{display:flex;gap:2px;margin-top:auto;padding-top:18px}
.pb-split span{flex:1;padding:6px 8px;background:var(--orange);color:var(--char);font-family:var(--mono);font-size:.69rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-align:center}
.pb-split span+span{background:var(--yellow)}
.pb-path{position:relative;list-style:none;margin:0;padding:22px 18px 18px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-content:center;gap:10px}
.pb-path li:not(:last-child):after{content:"";position:absolute;top:20px;left:calc(50% + 20px);width:calc(100% - 30px);height:2px;background:var(--char)}
.pb-path li{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.pb-i{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;border:2px solid var(--char);border-radius:50%;background:var(--sheet);font-family:var(--mono);font-weight:800;font-size:.9rem}
.pb-path .pay .pb-i{background:var(--orange);border-color:var(--orange);color:var(--char)}
.pb-path .pay~.pay .pb-i{background:var(--yellow);border-color:var(--yellow)}
.pb-path b{margin-top:4px;font-size:.95rem;line-height:1.2}
.pb-path small{font-size:.78rem;line-height:1.35;color:var(--muted)}
.pb-not{grid-column:1/-1;margin:0;padding:12px 18px;border-top:1px dotted var(--muted);font-size:.88rem;color:var(--muted)}
.pb-not span{color:#C7362F;font-weight:800}
.pb-not b{color:var(--char)}
.pb-audit{max-width:60rem;margin:0;padding:14px 18px;border:2px solid var(--char);border-left:8px solid var(--yellow);background:var(--sheet)}
@media (max-width:860px){
  .pricebox{grid-template-columns:1fr}
  .pb-amt{font-size:2.6rem}
  .pb-path{grid-template-columns:1fr;gap:0;padding:12px 16px}
  .pb-path li:not(:last-child):after{top:46px;left:19px;width:2px;height:calc(100% - 40px)}
  .pb-path li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;align-items:center;padding:6px 0;text-align:left}
  .pb-path .pb-i{grid-row:span 2}
  .pb-path b{margin:0}
}

/* Prices as tiles (n8n) */
.ptiles{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:16px}
.ptiles li{display:flex;flex-direction:column;gap:4px;padding:16px;background:var(--sheet);border:2px solid var(--char);box-shadow:5px 5px 0 var(--char)}
.pt-name{font-weight:700;line-height:1.25}
.pt-amt{margin-top:auto;padding-top:10px;font-family:var(--display);font-weight:800;font-size:1.9rem;line-height:1}
.pt-time{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ptiles .is-long .pt-amt{font-size:1.35rem;line-height:1.1}
.ptiles .is-start{background:var(--char);color:var(--white);box-shadow:5px 5px 0 var(--orange)}
.ptiles .is-start .pt-time{color:var(--yellow)}

/* Which systems connect */
.pmap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;margin:0 0 22px;padding:16px;background:var(--sheet);border:2px solid var(--char);box-shadow:5px 5px 0 var(--char)}
.pm-side{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pm-side li{display:flex;align-items:center;gap:10px;min-height:46px;padding:6px 10px;background:var(--white);border:1px solid var(--line);font-weight:700;line-height:1.2}
.pm-mk{flex:none;display:grid;place-items:center;width:28px;height:28px}
.pm-mk img{width:24px;height:24px;object-fit:contain}
.pm-mid{margin:0;display:flex;align-items:center;gap:6px}
.pm-mid b{padding:6px 10px;background:var(--char);color:var(--yellow);font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;text-align:center}
.pm-ar{position:relative;width:22px;height:2px;background:var(--char)}
.pm-ar:after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid var(--char);border-right:0}
@media (max-width:560px){
  .pmap{grid-template-columns:1fr}
  .pm-mid{flex-direction:column}
  .pm-ar{width:2px;height:14px}
  .pm-ar:after{right:-4px;top:auto;bottom:-6px;border:5px solid transparent;border-top:7px solid var(--char);border-bottom:0}
}

/* Who does what (n8n), in the style of the home "AI workflow" cards */
.roles-flow{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.roles-flow li{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 14px;background:var(--sheet);border:2px solid var(--char);box-shadow:5px 5px 0 var(--char)}
.roles-flow{counter-reset:rf}
.roles-flow li:not(:last-child):after{content:"→";position:absolute;top:22px;right:-17px;z-index:2;width:16px;text-align:center;font-weight:800;color:var(--arrow)}
.rf-i{display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:var(--char);color:var(--orange);font-family:var(--mono);font-weight:800}
.roles-flow b{font-family:var(--display);font-weight:800;font-size:1.25rem;line-height:1.05;text-transform:uppercase}
.roles-flow li>span:last-child{font-size:.92rem;line-height:1.45}
.roles-flow .ai{background:var(--char);color:var(--white);box-shadow:5px 5px 0 var(--orange)}
.roles-flow .ai .rf-i{background:linear-gradient(135deg,#FF6B00,#FFB04C);color:var(--char)}
.roles-flow .ai>span:last-child{color:#E6E8EA}
.roles-flow .you{border-top:8px solid var(--yellow)}
.roles-flow .you .rf-i{background:var(--yellow);color:var(--char)}
@media (max-width:1000px){.roles-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.roles-flow li:after{display:none}
  .roles-flow li:before{counter-increment:rf;content:counter(rf,decimal-leading-zero);content:counter(rf,decimal-leading-zero) / "";position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.06em;color:var(--muted)}
  .roles-flow .ai:before{color:#C9CDD1}}
@media (max-width:560px){.roles-flow{grid-template-columns:1fr}}

/* A past result as a figure */
.cstat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 16px;align-items:center;max-width:40rem;margin:0 0 16px;padding:14px 18px;background:var(--char);color:var(--white);border-left:8px solid #3DD27A}
.cstat b{grid-row:span 2;font-family:var(--display);font-weight:800;font-size:3rem;line-height:1;color:#3DD27A}
.cs-u{font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--yellow)}
.cs-t{font-size:.92rem;color:#E6E8EA}

/* Margin chart (job profit): one axis, zero line, dashed threshold, status by icon and word as well as colour */
.mchart{container-type:inline-size;margin:0;padding:16px 18px 12px;background:var(--sheet);border:2px solid var(--char);box-shadow:5px 5px 0 var(--char)}
.mchart figcaption{margin-bottom:22px;font-family:var(--mono);font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.mc-plot{--lab:112px;--val:150px;display:grid;gap:12px}
.mc-row{display:grid;grid-template-columns:var(--lab) minmax(0,1fr) var(--val);align-items:center;gap:12px}
.mc-job{margin:0;display:grid;line-height:1.25}
.mc-job b{font-size:.94rem}
.mc-job small{font-size:.7rem;color:var(--muted)}
.mc-track{position:relative;height:24px}
.mc-track:before{content:"";position:absolute;top:-7px;bottom:-7px;left:var(--zero);width:1px;background:var(--char)}
.mc-track:after{content:"";position:absolute;top:-7px;bottom:-7px;left:var(--thr);border-left:2px dashed var(--muted)}
.mc-bar{position:absolute;top:3px;bottom:3px;background:#3A3F45;border-radius:0 4px 4px 0}
.mc-bar.is-neg{border-radius:4px 0 0 4px}
.is-low .mc-bar{background:#B87400}
.is-low .mc-flag i{background:#9A6100}
.is-loss .mc-bar,.is-loss .mc-flag i{background:#C7362F}
.mc-thr{position:absolute;bottom:calc(100% + 8px);left:var(--thr);transform:translateX(-50%);font-style:normal;font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;color:var(--muted)}
.mc-val{margin:0;display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.mc-val b{min-width:3.3em;text-align:right}
.mc-flag{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;font-weight:700;line-height:1.2}
.mc-flag i{flex:none;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#3A3F45;color:var(--white);font-style:normal;font-size:.69rem;font-weight:800}
.mc-axis .mc-track{height:16px}
.mc-axis .mc-track:before,.mc-axis .mc-track:after{display:none}
.mc-key{display:none;margin:0;align-items:center;gap:6px;font-family:var(--mono);font-size:.66rem;font-weight:700;text-transform:uppercase;color:var(--muted)}
.mc-key span{width:0;height:12px;border-left:2px dashed var(--muted)}
.mc-axis .mc-track span{position:absolute;top:0;transform:translateX(-50%);font-family:var(--mono);font-size:.66rem;color:var(--muted)}
/* By the chart's own width, not the screen's: beside the report at 1024 it is as narrow as on a phone (WB-DIA-14) */
@container (max-width:480px){
  .mc-row{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
  .mc-track{grid-column:1/-1;grid-row:2}
  .mc-axis{grid-template-columns:1fr}
  .mc-axis>span{display:none}
  .mc-axis .mc-track{grid-row:1}
  .mc-thr{display:none}
  .mc-key{display:flex}
}
@container (max-width:380px){.mc-row{grid-template-columns:minmax(0,1fr)}.mc-track{grid-row:3}.mc-val{grid-row:2}.mc-job small{font-size:.75rem}}

/* Steps as cards in one row */
.steps{--n:4;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:26px 16px;max-width:none;margin:14px 0 22px}
.steps:has(>li:nth-child(3):last-child),.steps:has(>li:nth-child(6):last-child){--n:3}
.steps:has(>li:nth-child(5):last-child){--n:5}
.steps li{margin:0;padding:30px 16px 16px;background:var(--sheet);border:2px solid var(--char);box-shadow:5px 5px 0 var(--char)}
.steps li::before{top:-18px;left:14px;width:36px;height:36px}
.steps h3{font-size:1.3rem}
.steps p{font-size:.95rem}
@media (max-width:1000px){.steps{--n:2!important}}
@media (max-width:600px){.steps{--n:1!important}.steps li{padding-left:16px}}

/* Lists whose items start with a bold label become cards */
ul.bullets:has(>li>strong:first-child){max-width:none;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:12px}
@media (min-width:861px){ul.bullets:has(>li>strong:first-child):has(>li:nth-child(6):last-child),ul.bullets:has(>li>strong:first-child):has(>li:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}
ul.bullets:has(>li>strong:first-child)>li{margin:0;padding:14px 16px;background:var(--sheet);border:2px solid var(--char);border-top:6px solid var(--orange);line-height:1.45}
ul.bullets:has(>li>strong:first-child)>li>strong:first-child{display:block;margin-bottom:4px;font-family:var(--display);font-weight:800;font-size:1.15rem;line-height:1.05;text-transform:uppercase}

/* What goes wrong (problem lists) and what you get (tick lists) */
ul.flags,ul.ticks{list-style:none;margin:0 0 1em;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:10px}
ul.flags>li,ul.ticks>li{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;background:var(--sheet);border:2px solid var(--char);font-weight:600;line-height:1.4}
ul.flags>li{border-left:6px solid #C7362F}
ul.flags>li::before,ul.ticks>li::before{content:"!";flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:-1px;border-radius:50%;background:#C7362F;color:var(--white);font-weight:800;font-size:.8rem}
ul.flags.q>li::before{content:"?"}
ul.ticks>li{border-left:6px solid var(--char)}
ul.ticks>li::before{content:"✓";background:var(--char);color:var(--yellow)}

/* Good fit and poor fit as two cards */
.fitgrid{gap:18px;margin-bottom:20px}
.fitgrid>div{padding:16px 18px;background:var(--sheet);border:2px solid var(--char);box-shadow:5px 5px 0 var(--char)}
.fitgrid>div:first-child{border-top:8px solid #1E8A43}
.fitgrid>div:last-child{border-top:8px solid #C7362F}
.fitgrid .mini-h{margin-top:0}
.fitgrid .bullets{padding-left:0;list-style:none}
.fitgrid .bullets li{display:flex;gap:10px;align-items:flex-start}
.fitgrid .bullets li::before{content:"✓";flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:2px;border-radius:50%;background:#1E8A43;color:var(--white);font-weight:800;font-size:.72rem}
.fitgrid>div:last-child .bullets li::before{content:"✕";background:#C7362F}

/* Routing: enquiry, the rules, the right person */
.route{display:grid;grid-template-columns:minmax(0,.8fr) auto minmax(0,1.2fr) auto minmax(0,1fr);align-items:center;gap:10px;margin:0 0 20px}
.route>div{padding:14px 16px;background:var(--sheet);border:2px solid var(--char);box-shadow:5px 5px 0 var(--char)}
.route .rt-k{display:block;margin-bottom:6px;font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.route b{display:block;font-family:var(--display);font-weight:800;font-size:1.2rem;line-height:1.05;text-transform:uppercase}
.route ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.route li{padding:3px 9px;border:1px solid var(--char);border-radius:999px;font-size:.82rem;font-weight:600;background:var(--white)}
.route .rt-ar{align-self:center;font-weight:800;font-size:1.3rem;color:var(--arrow)}
.route .rt-you{border-top:8px solid var(--yellow)}
@media (max-width:860px){.route{grid-template-columns:1fr}.route .rt-ar{justify-self:center;transform:rotate(90deg)}}

/* Job profit example: the report beside the margin chart */
.jp-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:start}
.jp-grid .mini-h{margin-top:0}
.jp-grid .mchart{margin-bottom:24px}
@media (max-width:1000px){.jp-grid{grid-template-columns:1fr}}

/* Pricing ladder as a timeline (inc/visuals.php wb_gantt): info on the left, weeks on the right */
.gantt{--info:minmax(0,1fr);--plot:minmax(0,1.35fr);margin:0 0 18px;padding:14px 18px 6px;background:var(--sheet);border:2px solid var(--char);box-shadow:8px 8px 0 var(--char)}
.g-axis{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:var(--info) var(--plot);gap:20px;padding:6px 0 10px;background:var(--sheet);border-bottom:2px solid var(--char)}
.g-axk{font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);align-self:end}
.g-scale{position:relative;height:16px}
.g-scale span{position:absolute;top:0;transform:translateX(-50%);font-family:var(--mono);font-size:.75rem;color:var(--muted)}
.g-grp{margin:14px 0 4px;display:inline-block;padding:3px 9px;background:var(--char);color:var(--yellow);font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.g-list{list-style:none;margin:0;padding:0}
.g-row{display:grid;grid-template-columns:var(--info) var(--plot);gap:20px;align-items:center;padding:12px 0;border-bottom:1px dotted var(--muted)}
.g-list .g-row:last-child{border-bottom:0}
.g-info p{margin:0}
.g-name{font-weight:800;line-height:1.25}
.g-name .note{font-weight:400;font-size:.85rem;color:var(--muted)}
.g-info .g-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:2px}
.g-price .amt{font-family:var(--display);font-weight:800;font-size:1.45rem;line-height:1.1}
.g-time{font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.g-info .note{font-size:.875rem;color:var(--muted)}
.g-info .g-what{margin-top:4px;font-size:.95rem;line-height:1.45;color:var(--char)}
.g-what .go{font-weight:800;white-space:nowrap}
.g-track{position:relative;height:30px;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),var(--line) calc(10% - 1px) 10%)}
.g-bar{position:absolute;top:5px;bottom:5px;background:var(--orange);border-radius:0 4px 4px 0}
.is-audit .g-bar{background:var(--char);border-radius:4px}
.g-bar.is-more{background:repeating-linear-gradient(135deg,var(--orange) 0 3px,#FFD3B3 3px 7px);border-left:2px solid var(--sheet)}
.g-bar.is-month{background:repeating-linear-gradient(90deg,var(--yellow) 0 14px,transparent 14px 20px);border-radius:0}
.g-lab{position:absolute;top:50%;transform:translateY(-50%);margin-left:8px;padding:1px 4px;background:var(--sheet);font-family:var(--mono);font-size:.75rem;font-weight:700;white-space:nowrap;color:var(--char)}
.g-lab.is-end{margin-left:-6px;padding:1px 6px;background:var(--sheet);border:1px solid var(--char);transform:translate(-100%,-50%)}
.g-key{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:12px 0 8px;padding-top:10px;border-top:2px solid var(--char);font-family:var(--mono);font-size:.75rem;font-weight:700;text-transform:uppercase;color:var(--muted)}
.g-key span{width:22px;height:10px;background:var(--orange);border-radius:2px}
.g-key .k-more{margin-left:8px;background:repeating-linear-gradient(135deg,var(--orange) 0 3px,#FFD3B3 3px 7px)}
.g-key .k-month{margin-left:8px;background:repeating-linear-gradient(90deg,var(--yellow) 0 7px,transparent 7px 10px)}
.g-lab.is-in{margin-left:0;padding:1px 6px;background:var(--sheet);border:1px solid var(--char);transform:translate(8px,-50%)}
.g-row.is-build .g-bar:not(.is-more){border-radius:4px 0 0 4px}
.g-row.is-build .g-bar:not(.is-more):nth-last-child(2){border-radius:4px}
@media (max-width:860px){
  .gantt{padding:12px 14px 4px}
  .g-axis{position:static;grid-template-columns:1fr;gap:2px}
  .g-axk{align-self:start}
  .g-scale span.odd{display:none}
  .g-row{grid-template-columns:1fr;gap:8px}
  /* the ruler scrolls away on a narrow screen, so each bar carries its own ends: week 0 and week 10 */
  .g-track{margin-bottom:18px}
  .g-track:before,.g-track:after{position:absolute;top:100%;margin-top:2px;font-family:var(--mono);font-size:.69rem;line-height:1.2;color:var(--muted)}
  .g-track:before{content:"0";left:0}
  .g-track:after{content:"10 weeks";right:0}
}
@media (max-width:420px){.g-lab.is-in,.g-lab.is-end{white-space:normal;width:max-content;max-width:calc(60% - 12px);line-height:1.2}}

/* A real build's systems, left to right (/work/) */
.sflow{list-style:none;margin:18px 0 20px;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:18px}
.sflow li{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px;background:var(--sheet);border:2px solid var(--char);box-shadow:5px 5px 0 var(--char)}
.sflow li:not(:last-child):after{content:"→";position:absolute;top:22px;right:-17px;z-index:2;width:16px;text-align:center;font-weight:800;color:var(--arrow)}
.sf-i{display:grid;place-items:center;width:42px;height:42px;border-radius:8px;background:var(--char);color:var(--orange);font-family:var(--mono);font-weight:800}
.sf-i.mk{background:var(--white);border:1px solid var(--line)}
.sf-i.mk img{width:26px;height:26px;object-fit:contain}
.sflow b{margin-top:4px;font-weight:800;line-height:1.2}
.sflow small{font-size:.84rem;line-height:1.4;color:var(--muted)}
.sflow .ai{background:var(--char);color:var(--white);box-shadow:5px 5px 0 var(--orange)}
.sflow .ai .sf-i{background:linear-gradient(135deg,#FF6B00,#FFB04C);color:var(--char)}
.sflow .ai small{color:#C9CDD1}
.sflow .you{border-top:8px solid var(--yellow)}
.sflow .you .sf-i{background:var(--yellow);color:var(--char)}
/* 701 to 1000px: three to a row (two for a four-step flow), no arrow at the end of a row */
@media (min-width:701px) and (max-width:1000px){
  .sflow{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
  .sflow li:nth-child(3n):after{display:none}
  .sflow:has(>li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  .sflow:has(>li:nth-child(4):last-child) li:nth-child(3):after{display:block}
  .sflow:has(>li:nth-child(4):last-child) li:nth-child(2n):after{display:none}
}
@media (max-width:700px){.sflow{grid-auto-flow:row;grid-template-columns:1fr;gap:28px}.sflow li{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:12px}.sflow li b{margin:0}.sflow small{flex-basis:100%}.sflow li:not(:last-child):after{content:"↓";top:auto;bottom:-27px;right:auto;left:22px;font-size:1.25rem;line-height:22px}}

/* Phones: the labels in the pictures are at least 11 px (.69rem) */
@media (max-width:700px){
  .mc-thr,.mc-key,.mc-axis .mc-track span,.route .rt-k{font-size:.69rem}
}