/* Pro-Motion. Plain CSS, no framework, no inline styles. A dark page in the family of the SuperPower FX site (same canvas, same
   orange accent). The one showpiece is the timeline on the home page: products are layers, the ruler names the stages, a hairline with five nodes: solid
   bar is the stage reached and a dashed one what is still ahead. Onest carries Latin and Cyrillic in one design. */

@font-face { font-family: "Onest"; src: url("/fonts/onest-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; src: url("/fonts/onest-cyrillic-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-cyrillic-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  color-scheme: dark;
  --canvas: #141414;
  --card: #1f1f1f;
  --line: #2f2f2f;
  --tick: #3a3a3a;
  --text: #f4f4f4;
  --text-2: #c1c1c1;
  --text-3: #9a9a9a;
  --accent: #ff6a13;
  --accent-ink: #141414;
  --grow: #8a5232;                       /* "room to grow": the accent, quieter; never a stage, never filled */
  --grow-text: #c08560;                  /* its label (6.1:1 on the canvas) */
  --tagw: 29px;                          /* the name tag's thickness: the page keeps clear of it */
  --tagl: 168.5625px;                    /* its length: the artwork (48 x 279) scaled uniformly to --tagw, 279 / 48 x 29 px */
  --danger: #f5beb5;
  --sans: "Onest", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --head: 380px;
  --gap: 40px;
  font-family: var(--sans);
  color: var(--text);
  background: var(--canvas);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
/* A little atmosphere, as in the loading screens: a faint glow in the upper right and a hairline along the very top edge. */
/* Type and colour are set on body too, not only on the root: a host page that styles body (an embedding preview, a reader mode) must not win. */
body { position: relative; overflow-x: clip; margin: 0; font-family: var(--sans); font-size: 16px; font-weight: 400; color: var(--text); background: radial-gradient(1100px 560px at 88% -120px, rgba(255, 106, 19, .05), transparent 70%) no-repeat, var(--canvas); line-height: 1.5; }
body::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 106, 19, .5) 28%, rgba(255, 106, 19, .5) 72%, transparent); pointer-events: none; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
a { color: inherit; text-underline-offset: .25em; }
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: min(1120px, 100% - 48px); margin: auto; }
@media (max-width: 1232px) { .wrap { width: auto; margin: 0 24px 0 calc(var(--tagw) + 14px); } }   /* where the column comes closer to the edge than the tag is wide, the page keeps clear of it */

/* Header and footer */
header { display: flex; align-items: center; justify-content: flex-end; gap: 24px; min-height: 93px; padding: 26px 0; border-bottom: 1px solid var(--line); }
/* The name tag: the owner's final artwork, version 9 (src/brand-tag.mjs), an orange tag hanging from the left edge of the window near
   the top, the mark at the top and PRO-MOTION reading downwards. It scrolls with the page, above the content and below the open language
   list. The artwork is inline, scaled uniformly to the tag's thickness; only its orange parts change on hover and press (the tag and the
   orange of the mark together, so the mark's rim never shows lighter than the tag), the white stays white. */
.brand { --fill: #ff6b00; position: absolute; top: 26px; left: 0; z-index: 2; display: block; width: var(--tagw); height: var(--tagl); line-height: 0; }
.brand > svg { display: block; width: 100%; height: 100%; pointer-events: none; }   /* only the outer one: the mark is a nested svg with its own size; no pointer, so the artwork's own <title> never shows as a tooltip instead of the link's */
.brand svg [fill="#FF6B00" i] { fill: var(--fill); }
.brand svg [stroke="#FF6B00" i] { stroke: var(--fill); }
.brand:hover { --fill: #e85f00; }
.brand:active { --fill: #d15500; }
.brand:focus-visible { outline: 2px solid #ff6b00; outline-offset: 3px; }
@media print { .brand { display: none; } }
nav.main { margin-left: auto; display: flex; gap: 24px; font-size: 14.5px; color: var(--text-2); }
nav.main a { display: inline-block; padding: 10px 0; margin: -10px 0; text-decoration: none; }   /* a taller target for a finger, same layout */
nav.main a:hover, nav.main a[aria-current] { color: var(--text); }
nav.main a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; }
/* The language menu, made for up to 16 languages (a disclosure, no script). The button carries the ringed cross of the map's survey
   marks and the current code; the list opens under it with the cut corner of the button and the logo, past 8 languages in two
   columns. The current language has the filled ring of the status line. */
nav.lang { position: relative; }
nav.lang summary { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 9px; border: 1px solid var(--line); border-radius: 7px; font: 500 12px/1 var(--mono); color: var(--text-2); list-style: none; cursor: pointer; user-select: none; }
nav.lang summary::-webkit-details-marker { display: none; }
nav.lang summary::before { content: ""; width: 13px; height: 13px; border: 1px solid currentColor; border-radius: 50%; background: linear-gradient(currentColor, currentColor) 50% 50% / 1px 100% no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / 100% 1px no-repeat; }
nav.lang summary::after { content: ""; width: 5px; height: 5px; margin: -3px 1px 0 1px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
nav.lang details[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
nav.lang summary:hover, nav.lang details[open] summary { color: var(--text); border-color: #4a4a4a; }
nav.lang summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.lang-code { color: var(--accent); }
.lang-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 10; display: grid; gap: 2px; width: 230px; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--line); border-radius: 8px 0 8px 8px;
  background: linear-gradient(225deg, transparent 8.2px, var(--line) 8.2px 9.3px, transparent 9.3px) 100% 0 / 14px 14px no-repeat, #1b1b1b;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.lang-list.many { width: 360px; grid-template-columns: 1fr 1fr; }
.lang-list a { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 30px; border-radius: 5px; font-size: 14.5px; line-height: 1.3; color: var(--text-2); text-decoration: none; }
.lang-list a:hover { background: #262626; color: var(--text); }
.lang-list .code { margin-left: auto; font: 500 11px/1 var(--mono); color: var(--text-3); }
.lang-list a[aria-current] { color: var(--accent); }
.lang-list a[aria-current]::before { content: ""; position: absolute; left: 10px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border: 1.5px solid currentColor; border-radius: 50%; background: radial-gradient(circle, currentColor 0 1.8px, transparent 2.3px); }
footer { position: relative; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; padding: 30px 0 44px; font-size: 13.5px; color: var(--text-3); }
footer::before { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 6px; background: url("/brush-line.webp") 0 0 / 100% 100% no-repeat; opacity: .5; transform: rotate(.25deg) scaleX(-1); pointer-events: none; }
footer a { display: inline-block; padding: 10px 0; margin: -10px 0; }
.sign { display: inline-flex; align-items: center; gap: 10px; }
.sign img { display: block; height: 20px; width: auto; opacity: .85; }

/* Home: pen lines run loosely down the whole page behind the text (a drawing the text sits on; still, no animation) */
main { position: relative; z-index: 0; }
.lines { position: absolute; top: 0; bottom: 0; left: 50%; width: min(100vw, 2000px); transform: translateX(-50%); z-index: -1; overflow: hidden; background: url("/lines.svg") 50% 0 / 2000px auto no-repeat; pointer-events: none; }  /* wider than the column, so the lines run off the window */
/* Home: the opening line */
.intro { padding: 92px 0 60px; max-width: 920px; }
h1 { font-size: clamp(44px, 7.6vw, 94px); font-weight: 500; line-height: 1.02; letter-spacing: -.045em; margin: 0 0 28px; }
.intro > p { max-width: 640px; margin: 0; font-size: 20px; line-height: 1.65; color: var(--text-2); }

/* Home: the timeline. The ruler names five stages; a product's bar is filled up to the stage it has reached (class stage-N). */
/* A hairline brush stroke instead of a plain rule, leaning a little off level (the logo is asymmetric and angular as well). */
.timeline { position: relative; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 6px; background: url("/brush-line.webp") 0 0 / 100% 100% no-repeat; opacity: .6; transform: rotate(-.3deg); transform-origin: left center; pointer-events: none; }
/* The lane is four stage columns and, after them, a fifth of the same width: "improvements", a point no product ever reaches (--tail). */
.timeline { --tail: 20%; }
.ruler { display: grid; grid-template-columns: repeat(4, 1fr) var(--tail); margin: 0 0 0 calc(var(--head) + var(--gap)); padding: 0 0 14px; list-style: none; }
.ruler li { text-align: center; font-size: 12.5px; line-height: 1.3; color: var(--text-3); }
.ruler .grow-label a { color: var(--grow-text); text-decoration: none; }
.ruler .grow-label a:hover { color: var(--accent); text-decoration: underline; }
.layers { list-style: none; margin: 0; padding: 0; }
.layer { display: grid; grid-template-columns: var(--head) 1fr; column-gap: var(--gap); padding: 32px 0 38px; border-bottom: 1px solid var(--line); }
.layer h3 { margin: 0 0 6px; font-size: 29px; font-weight: 560; letter-spacing: -.03em; line-height: 1.15; }
.kind { margin: 0 0 18px; font-size: 14px; color: var(--text-3); }
.lane { position: relative; }
/* Minimal: a hairline from the first stage to the last, four nodes on it, solid up to the stage a product has reached (--s stages
   done), dashed after it. Past the last stage it goes on to a fifth point that is never filled: a stroke, a few dashes, a stroke
   (there is always something to improve); in a quieter accent once the product is released, grey before. */
.track { --u: calc((100% - var(--tail)) / 4); position: relative; height: 22px; margin-top: 4px; }
.stage-1 { --s: 0; } .stage-2 { --s: 1; } .stage-3 { --s: 2; } .stage-4 { --s: 3; }
.bar, .bar-next, .grow { position: absolute; top: 11px; height: 0; }
.bar { left: calc(var(--u) * .5); width: calc(var(--u) * var(--s)); border-top: 1.5px solid var(--accent); }
.bar-next { left: calc(var(--u) * (.5 + var(--s))); width: calc(var(--u) * (3 - var(--s))); border-top: 1px dashed var(--tick); }
.stage-4 .bar-next { display: none; }
.layer { --way: #4a4a4a; } .stage-4 { --way: var(--grow); }
.grow { left: calc(var(--u) * 3.5 + 12px); width: calc(var(--u) - 24px); top: 11px; height: 1px;   /* stroke, gap, 3 dashes with equal gaps, stroke */
  background: linear-gradient(90deg, var(--way) 0 28%, transparent 28% 34.29%, var(--way) 34.29% 40.57%, transparent 40.57% 46.86%,
    var(--way) 46.86% 53.14%, transparent 53.14% 59.43%, var(--way) 59.43% 65.71%, transparent 65.71% 72%, var(--way) 72% 100%); }
.dots { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr) var(--tail); }
.dots i { place-self: center; width: 9px; height: 9px; border: 1px solid #5a5a5a; border-radius: 50%; background: var(--canvas); }
.stage-1 .dots i:nth-child(-n+1), .stage-2 .dots i:nth-child(-n+2), .stage-3 .dots i:nth-child(-n+3), .stage-4 .dots i:nth-child(-n+4) { border-color: var(--accent); background: var(--accent); }
.dots .beyond { width: 11px; height: 11px; border: 1.5px dotted #6a6a6a; background: var(--canvas); }
.stage-4 .dots .beyond { border-color: var(--grow-text); }
.stage-1 .dots i:nth-child(1), .stage-2 .dots i:nth-child(2), .stage-3 .dots i:nth-child(3), .stage-4 .dots i:nth-child(4) { width: 15px; height: 15px; background: var(--canvas); box-shadow: inset 0 0 0 3px var(--canvas), inset 0 0 0 9px var(--accent); }
/* The status reads like the line under a title on an install screen: a small ring and the state. The ring is solid with a filled centre
   once the product has a working version (beta or release) and dashed while it is still being made. */
.status { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 14px; font-weight: 520; line-height: 1.3; }
.status::before { content: ""; flex: none; width: 13px; height: 13px; border: 1.5px solid currentColor; border-radius: 50%; }
.stage-1 .status::before, .stage-2 .status::before { border-style: dashed; }
.stage-3 .status::before, .stage-4 .status::before { background: radial-gradient(circle, currentColor 0 2.1px, transparent 2.6px); }
.stage-1 .status, .stage-2 .status { color: var(--text-2); }
.stage-3 .status, .stage-4 .status { color: var(--accent); }
.text { max-width: 580px; margin: 0 0 16px; font-size: 16.5px; line-height: 1.65; color: var(--text-2); }
.more { display: inline-block; font-weight: 560; }
.hint { margin: 18px 0 0; font-size: 13px; color: var(--text-3); }
.hint a { color: var(--grow-text); }
.hint a:hover { color: var(--accent); }

/* Roadmap: each product a row like a layer of the timeline; its plans in three groups whose rings say how near they are: a filled
   ring (now, as a product's status once it works), a dashed one (next), a dotted one in the "room to grow" colour (later). */
.road-intro { padding: 72px 0 40px; max-width: 820px; }
.road-intro h1 { font-size: clamp(40px, 6vw, 72px); margin-bottom: 20px; }
.road-intro p { max-width: 640px; margin: 0; font-size: 18px; line-height: 1.65; color: var(--text-2); }
.roads { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.road { display: grid; grid-template-columns: var(--head) 1fr; column-gap: var(--gap); padding: 32px 0 36px; border-bottom: 1px solid var(--line); }
.road h2 { margin: 0 0 6px; font-size: 29px; font-weight: 560; letter-spacing: -.03em; line-height: 1.15; }
.road .kind { margin: 0; }
.road-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.road-group h3 { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; font-size: 14px; font-weight: 560; color: var(--text-2); }
.road-group h3::before { content: ""; flex: none; width: 13px; height: 13px; border: 1.5px solid currentColor; border-radius: 50%; }
.road-group.now h3 { color: var(--accent); }
.road-group.now h3::before { background: radial-gradient(circle, currentColor 0 2.1px, transparent 2.6px); }
.road-group.next h3::before { border-style: dashed; }
.road-group.later h3 { color: var(--grow-text); }
.road-group.later h3::before { border-style: dotted; }
.road-group ul { margin: 0; padding: 0; list-style: none; }
.road-group li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.5; color: var(--text-2); }
.road-group li:first-child { border-top: 0; padding-top: 0; }
.road-empty { grid-column: 1 / -1; margin: 4px 0 0; font-size: 15.5px; color: var(--text-2); }

/* Roadmap: where to send a wish (each product's own site) */
.wish-index { display: grid; grid-template-columns: var(--head) minmax(0, 620px); column-gap: var(--gap); padding: 56px 0 76px; border-top: 1px solid var(--line); }
.wish-index h2 { margin-top: 2px; }
.wish-text p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--text-2); }
.wish-links { list-style: none; margin: 0; padding: 0; }
.wish-links li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 17px; }
.wish-links li:first-child { border-top: 0; padding-top: 0; }

/* The account service's pages for administrators: the notice on the account page and the list of ideas (src/app.mjs) */
.notice { margin: 0 0 24px; padding: 14px 16px; border: 1px solid var(--accent); border-radius: 7px; }
.notice p { margin: 0 0 4px; color: var(--text) !important; font-weight: 560; }
.idea-filter { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0; font-size: 14px; }
.idea-filter a { color: var(--text-2); text-decoration: none; }
.idea-filter a span { color: var(--text-3); }
.idea-filter a[aria-current] { color: var(--accent); text-decoration: underline; }
.ideas-admin { margin: 24px 0 0; padding: 0; list-style: none; }
.idea { padding: 18px 0; border-top: 1px solid var(--line); }
.idea.new { border-left: 2px solid var(--accent); padding-left: 14px; }
.prose .idea-meta { margin: 0 0 8px; font-size: 13.5px; color: var(--text-3); }
.idea-state { color: var(--text-2); font-weight: 560; }
.idea.new .idea-state { color: var(--accent); }
.prose .idea-text { margin: 0 0 12px; color: var(--text); white-space: normal; }
.idea form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.idea button { padding: 6px 12px; border: 1px solid #444; border-radius: 6px; background: transparent; color: var(--text-2); font: inherit; font-size: 13.5px; cursor: pointer; }
.idea button:hover { border-color: var(--accent); color: var(--text); }

/* Home: the account */
.account { position: relative; display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 1fr); align-items: center; gap: 40px; padding: 64px 0 76px; }
.figure { position: relative; justify-self: end; width: min(330px, 100%); aspect-ratio: 1; margin-right: -8px; pointer-events: none; }
.figure img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
h2 { font-size: 28px; font-weight: 540; letter-spacing: -.035em; line-height: 1.2; margin: 0 0 14px; }
.account p { margin: 0 0 8px; font-size: 17px; line-height: 1.7; color: var(--text-2); }
.button { display: inline-block; margin: 16px 0; padding: 11px 22px 11px 18px; border: 1px solid var(--accent); border-radius: 7px 0 7px 7px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 15px; font-weight: 600; line-height: 1.4; text-decoration: none; cursor: pointer; }
.button:hover { color: var(--accent-ink); background: #fff; border-color: #fff; }

/* Text pages (privacy notice, and the account service's pages) */
.prose { max-width: 780px; padding: 64px 0 76px; }
.prose h1 { font-size: clamp(36px, 5vw, 58px); margin-bottom: 18px; }
.prose h2 { font-size: 22px; margin: 40px 0 10px; }
.prose p, .prose li { font-size: 16px; line-height: 1.8; color: var(--text-2); }
.prose li { margin: .5em 0; }
.prose code { padding: .1em .35em; border-radius: 4px; background: var(--card); font: .9em var(--mono); color: var(--text); }
.kicker, .eyebrow { margin: 0 0 14px; font-size: 14px; color: var(--accent); }
.date { margin: 0 0 24px; font-size: 13px !important; color: var(--text-3) !important; }

/* The account service's forms (sign-in, account page) */
.google-button { display: block; margin: 24px 0; padding: 0; border: 0; border-radius: 24px; background: transparent; line-height: 0; cursor: pointer; }
.google-button img { display: block; width: auto; height: 40px; }
.small { max-width: 580px; font-size: 14px !important; }
form { margin: 24px 0; }
label { display: block; margin: 14px 0 8px; color: var(--text-2); }
input[type=email], input[type=text], input[type=url], textarea { display: block; width: min(100%, 420px); padding: 12px; border: 1px solid #76877b; border-radius: 5px; background: #1b231e; color: var(--text); font: inherit; }
textarea { width: min(100%, 560px); resize: vertical; }
textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
[aria-invalid=true] { border-color: #b86559; }
input[type=file] { display: block; max-width: 100%; color: var(--text-2); font: inherit; font-size: 14px; }
/* The Profile section of the account page: the avatar is a circle, as products show it */
.profile { margin: 40px 0; padding-top: 4px; border-top: 1px solid var(--line); }
.profile form { margin: 16px 0; }
.avatar { margin: 18px 0 8px; }
.avatar img, .avatar-none { display: block; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--card); }
.avatar-none { display: grid; place-items: center; font-size: 13px; color: var(--text-3); }
.prose .field-error { margin: 6px 0 0; font-size: 14px; color: var(--danger); }
.danger { border-color: #b86559; background: transparent; color: var(--danger); }
.danger:hover { background: #4c2823; border-color: #b86559; color: #ffe1dc; }

/* One orchestrated moment: the solid bars are drawn in from the left. */
@media (prefers-reduced-motion: no-preference) {
  .bar { animation: uncover 1.1s cubic-bezier(.2, .75, .15, 1) both; }
}
@keyframes uncover { from { clip-path: inset(-3px 100% -3px 0); } to { clip-path: inset(-3px 0 -3px 0); } }

@media (max-width: 1000px) {
  :root { --head: 300px; --gap: 32px; }
  .road-body { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
  :root { --head: 0px; --gap: 0px; }
  :root { --tagw: 25px; --tagl: 145.3125px; }   /* 279 / 48 x 25 px */
  .wrap { margin: 0 18px 0 calc(var(--tagw) + 12px); }
  header { flex-wrap: wrap; gap: 14px 18px; padding: 22px 0; min-height: 0; }
  .brand { top: 22px; }
  nav.main { margin-left: 0; order: 3; width: 100%; gap: 18px; font-size: 14px; }
  nav.lang { margin-left: auto; }
  .lang-list.many { width: min(360px, 100vw - 36px); }
  .lines { background-image: url("/lines-narrow.svg"); background-size: 1375px auto; background-position: -426px 0; opacity: .7; }   /* the same line, without the big drops of ink, which would land in the text */
  .intro { padding: 58px 0 42px; }
  .intro > p { font-size: 18px; }
  .layer { display: flex; flex-direction: column; align-items: flex-start; padding: 26px 0 30px; }
  .layer-head { display: contents; }
  .layer h3 { order: 1; }
  .kind { order: 2; margin-bottom: 14px; }
  .lane { order: 3; align-self: stretch; margin: 0 0 22px; }
  .status { order: 4; }
  .text { order: 5; }
  .more { order: 6; }
  .ruler { display: none; }
  .road { display: block; padding: 26px 0 30px; }
  .road .kind { margin-bottom: 18px; }
  .road-body { grid-template-columns: 1fr; gap: 18px; }
  .road-intro { padding: 48px 0 30px; }
  .wish-index { display: block; padding: 40px 0 52px; }
  .wish-text { margin-bottom: 24px; }
  .layer h3 { font-size: 26px; }
  .account { display: block; padding: 44px 0 52px; }
  .figure { justify-self: start; width: 200px; margin: 26px 0 0 -12px; }
  .prose { padding: 40px 0 52px; }
}

/* SuperPower FX page (spfx.pro-motion.dev): the same canvas and accent; one sample element, drawn as hairlines like the timeline. */
/* The product's own logo above the headline, as on the SuperPower Normals page (.spn-product); the name and kind are in the header,
   beside the drawing (owner, 2026-10-21). */
.intro > p.fx-product { display: flex; align-items: center; gap: 16px; max-width: none; margin: 0 0 30px; color: var(--text); }
.fx-product img { display: block; flex: none; width: 64px; height: 64px; }
.intro > p.facts { margin: 22px 0 0; font-size: 15px; color: var(--text-3); }
.intro > p.small { margin-top: 14px; font-size: 14px; }
.intro .button { margin-top: 26px; }
.sample { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 56px 0; border-top: 1px solid var(--line); }
.code { margin: 0; padding: 0 0 0 22px; border-left: 1px solid var(--line); font: 14px/1.85 var(--mono); color: var(--text-2); overflow-x: auto; }
.element { display: grid; grid-template-columns: 150px 1fr; gap: 12px 36px; align-items: center; }
.shape { width: 150px; height: 150px; }
.shape polygon { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }
.ctls { display: grid; gap: 22px; }
.ctl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 14px; color: var(--text-2); }
.ctl b { font-weight: 560; color: var(--accent); font-family: var(--mono); font-size: 13px; }
.ctl-line { grid-column: 1 / -1; position: relative; height: 11px; border-top: 0; background: linear-gradient(var(--tick), var(--tick)) 0 5px / 100% 1px no-repeat; }
.ctl-line u { position: absolute; left: 0; top: 4px; height: 0; border-top: 1.5px solid var(--accent); text-decoration: none; }
.ctl-line u::after { content: ""; position: absolute; right: -5px; top: -6px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.ctl-line .f75 { width: 75%; } .ctl-line .f33 { width: 33%; }
.element .small { grid-column: 1 / -1; margin: 6px 0 0; color: var(--text-3); }
.how { padding: 56px 0 76px; border-top: 1px solid var(--line); }
.steps { counter-reset: step; list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 32px; }
.steps li { position: relative; padding-top: 24px; border-top: 1px solid var(--tick); counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; top: -9px; left: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--canvas); border: 1px solid var(--accent); color: var(--accent); font: 11px/16px var(--mono); text-align: center; }
.steps h3 { margin: 0 0 8px; font-size: 18px; font-weight: 560; letter-spacing: -.02em; }
.steps p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-2); }
@media (max-width: 1000px) {
  .sample { grid-template-columns: 1fr; gap: 36px; padding: 40px 0; }
  .steps { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
}
@media (max-width: 780px) {
  .intro > p.fx-product { margin-bottom: 24px; }
  .fx-product img { width: 56px; height: 56px; }
}
@media (max-width: 560px) {
  .element { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------------------------------------------------------
   Header K01 "shared support" (owner 2026-10-20; the approved mock-up is design-brief-top-left/concepts/header-bottom-aligned).
   Pages of pro-motion.dev only (body.pm); the product sites and the account service keep the header above. :where() keeps
   every selector as specific as the rule it refines, so the order below decides, as in the mock-up.
   Wide screens: a 128 px drawing at the start of the column, its box from 14 px down to 142 px, crossing the rule at 88 px. The
   title block, the menu and the language button are centred on one axis, half-way between the top of the drawing's box and the
   rule (51 px), whatever their own height. 781 to 1100 px: a 72 px drawing, the menu in a row of its own; up to 780 px: 56 px.
   --------------------------------------------------------------------------------------------------------------------------- */
:where(.pm) { --text-3: #a3a3a3; --grow-text: #c98d67; min-height: 320px; }
:where(.pm) .wrap { --left: max(24px, calc((100vw - 1120px) / 2)); --right: max(24px, calc((100vw - 1120px) / 2)); }
:where(.pm) .skip { position: absolute; left: 48px; top: -100px; z-index: 100; padding: 10px 16px; border: 1px solid var(--accent); background: var(--canvas); color: var(--text); }
:where(.pm) .skip:focus { top: 8px; }
:where(.pm) a:focus-visible, :where(.pm) summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
:where(.pm) header { --band-top: 14px; --rule-y: 88px; --band-center: calc((var(--band-top) + var(--rule-y)) / 2); --line-start: 140px;
  position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 28px; height: 112px; min-height: 112px;
  padding: 24px 0; border-bottom: 0; overflow: visible; }
:where(.pm) header > * { min-width: 0; }
/* the rule starts just after the drawing; its last 60 px are orange */
:where(.pm) header::before { content: ""; position: absolute; left: var(--line-start); right: 0; top: var(--rule-y); border-top: 1px solid #363636; pointer-events: none; }
:where(.pm) header::after { content: ""; position: absolute; right: 0; top: var(--rule-y); width: 60px; border-top: 1px solid var(--accent); pointer-events: none; }
:where(.pm) .caption { --art-size: 128px; --art-top: -10px; --copy-x: 144px; --copy-y: calc(var(--band-center) - 24px);
  position: relative; display: block; flex: 1; height: 64px; min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 15px; line-height: 1.35; color: var(--text); }
:where(.pm) .left-art { position: absolute; left: 0; top: var(--art-top); z-index: 1; width: var(--art-size); height: var(--art-size); pointer-events: none; }
:where(.pm) .left-art img { display: block; width: 100%; height: 100%; }
:where(.pm) .caption-copy { position: absolute; left: var(--copy-x); top: var(--copy-y); z-index: 2; display: block; width: max-content; max-width: calc(100% - var(--copy-x) - 8px); transform: translateY(-50%); }
:where(.pm) .caption-title { display: block; font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -.015em; }
:where(.pm) .caption-copy small { display: block; margin-top: 5px; font: 400 8px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #a3a3a3; }
:where(.pm) nav.main { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; width: auto; margin: 0; font-size: 14px; color: var(--text-2); order: 0;
  align-self: flex-start; margin-top: calc(var(--band-center) - 24px); transform: translateY(-50%); }
:where(.pm) nav.main a { position: relative; display: flex; align-items: center; min-height: 44px; margin: 0; padding: 8px 0; text-decoration: none; overflow-wrap: anywhere; }
:where(.pm) nav.main a[aria-current] { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 7px; text-decoration-thickness: 1px; }
:where(.pm) .utilities { display: flex; align-items: center; flex: none; gap: 0; min-width: 0; align-self: flex-start; margin-top: calc(var(--band-center) - 24px); transform: translateY(-50%); }
:where(.pm) nav.lang { position: relative; flex: none; margin: 0; order: 0; }
:where(.pm) nav.lang summary { min-height: 44px; padding: 10px 11px; gap: 7px; }
:where(.pm) .lang-list { right: 0; max-width: calc(100vw - 55px); max-height: min(70vh, 560px); overflow-y: auto; clip-path: none; }
:where(.pm) .lang-list.many { width: 360px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
:where(.pm) .lang-list a { min-height: 44px; overflow-wrap: anywhere; }
:where(.pm) .lang-list .code { flex: none; }
:where(.pm) .lang-list a:focus-visible { outline-offset: -2px; }
/* the page under the header (as in the mock-up) */
:where(.pm) .intro { padding-top: 68px; }
:where(.pm) .intro, :where(.pm) .layer-head, :where(.pm) .account-text { min-width: 0; }
:where(.pm) .intro h1, :where(.pm) .layer h3, :where(.pm) .prose h1, :where(.pm) .prose h2 { overflow-wrap: anywhere; }
:where(.pm) .ruler li { padding-top: 8px; }
:where(.pm) .button { clip-path: none; }
:where(.pm) .lines { max-width: 100vw; left: calc(50% - (var(--left) - var(--right)) / 2); }   /* centred on the window, not on the column that clears the tag */
@media (max-width: 1232px) { :where(.pm) .wrap { --left: calc(var(--tagw) + 14px); --right: 24px; } }
@media (min-width: 781px) and (max-width: 1100px) {
  :where(.pm) header { flex-wrap: wrap; height: auto; min-height: 0; padding: 20px 0; gap: 14px 24px; --line-start: 0px; }
  :where(.pm) header::before, :where(.pm) header::after { top: auto; bottom: 0; }
  :where(.pm) .caption { --art-size: 72px; --art-top: -4px; --copy-x: 88px; --copy-y: 0px; }
  :where(.pm) .caption-copy { transform: none; }
  :where(.pm) nav.main { order: 3; flex-basis: 100%; width: 100%; margin: 0; transform: none; }
  :where(.pm) .utilities { margin-left: auto; margin-top: 0; transform: none; }
}
@media (max-width: 780px) {
  :where(.pm) { min-height: 460px; }
  :where(.pm) .wrap { --left: calc(var(--tagw) + 12px); --right: 18px; }
  :where(.pm) header { flex-wrap: wrap; height: auto; min-height: 0; padding: 18px 0; gap: 12px; --line-start: 0px; }
  :where(.pm) header::before, :where(.pm) header::after { top: auto; bottom: 0; }
  :where(.pm) header::after { width: 40px; }
  :where(.pm) .caption { --art-size: 56px; --art-top: 4px; --copy-x: 72px; --copy-y: 8px; font-size: 12px; }
  :where(.pm) .caption-copy { max-width: calc(100% - 74px); transform: none; }
  :where(.pm) .caption-title { font-size: 13px; }
  :where(.pm) .caption-copy small { letter-spacing: .02em; }
  :where(.pm) nav.main { order: 3; flex-basis: 100%; width: 100%; margin: 0; gap: 4px 18px; font-size: 14px; transform: none; }
  :where(.pm) .utilities { margin-left: auto; margin-top: 0; transform: none; }
  :where(.pm) nav.lang { order: 2; margin-left: auto; }
  :where(.pm) nav.lang summary { padding: 10px 9px; gap: 6px; }
  :where(.pm) .lang-list.many { max-width: calc(100vw - 55px); }
  :where(.pm) .intro { padding: 46px 0 42px; }
  :where(.pm) h1 { font-size: clamp(40px, 10.5vw, 64px); line-height: 1.05; }
  :where(.pm) .prose h1 { font-size: clamp(28px, 8vw, 34px); }
}