/* Postfjord site fonts, served from postfjord.com (scripts/build-site.mjs, 2026-09-28).
   Latin and Latin Extended subsets of Bricolage Grotesque (variable), Hanken Grotesk and IBM Plex Mono,
   all SIL Open Font License 1.1, downloaded from Google Fonts. Self-hosted so the page renders without
   a third-party request and no visitor IP goes to Google. Regenerate: see scripts/build-site.mjs. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-latin-ext-104b9349.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-latin-9fee080f.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin-ext-a1376a56.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin-1f21c6ea.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin-ext-a1376a56.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin-1f21c6ea.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin-ext-a1376a56.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin-1f21c6ea.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin-ext-a1376a56.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin-1f21c6ea.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-ext-f1050dc5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-c36f509c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-ext-77f03e26.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-a76f53ca.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* GENERATED from shared/tokens.js by scripts/build-site.mjs. Do not edit. */
:root {
  --pf-natt: #0a1c28;
  --pf-djup: #0f2a3a;
  --pf-plan: #12324a;
  --pf-fjord: #1f6f8b;
  --pf-is: #8fc8dc;
  --pf-sol: #f4b860;
  --pf-lingon: #e0584f;
  --pf-mossa: #5d9a6a;
  --pf-ljung: #8e6fc9;
  --pf-frost: #eef2f1;
  --pf-granit: #4d6272;
  --pf-bo-light: #ffd98f;
  --pf-bo-mid: #f4b860;
  --pf-bo-dark: #d9953a;
  --pf-part-postsocial: #f4b860;
  --pf-part-postchat: #e0584f;
  --pf-part-postmail: #8e6fc9;
  --pf-text-postsocial-dark: #f4b860;
  --pf-text-postchat-dark: #f0877f;
  --pf-text-postmail-dark: #b9a4e8;
  --pf-text-mossa-dark: #8fc79b;
  --pf-text-postsocial-light: #8a5a12;
  --pf-text-postchat-light: #a8322a;
  --pf-text-postmail-light: #5d3fa0;
  --pf-text-mossa-light: #2f6a3f;
  --pf-font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --pf-font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pf-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* Postfjord public site. One stylesheet for every page generated by scripts/build-site.mjs. */
:root {
  /* The palette lives in shared/tokens.js (landing/tokens.css, loaded first). */
  --navy: var(--pf-djup);
  --navy-deep: var(--pf-natt);
  --fjord: var(--pf-fjord);
  --ice: var(--pf-is);
  --sun: var(--pf-sol);
  --text: #eaf1f5;
  --muted: #a9bcc8;
  --dim: #6f8796;
  --line: rgba(143, 200, 220, 0.18);
  --card: rgba(255, 255, 255, 0.035);
  --card-hover: rgba(255, 255, 255, 0.07);
  /* depth: a raised surface has a gradient, a light top edge and a soft shadow */
  --surface: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025) 60%);
  --surface-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04) 60%);
  --edge: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --lift: 0 24px 60px -24px rgba(0, 0, 0, 0.65);
  --plane: var(--pf-plan);
  --radius: 16px;
  --radius-lg: 24px;
  --pad: clamp(16px, 5vw, 64px);
  --max: 1120px;
  /* paper grain, the texture of design system Fjord (docs/DESIGN.md) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--pf-font-body);
  color: var(--text);
  background: var(--navy-deep);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  line-height: 1.6;
  position: relative;
  z-index: 0;
  overflow-x: clip;
}
/* Light comes from the top right, where the sun sits in every illustration: a fjord-blue
   wash with a warm rim, fading into the deep by the second screen. */
body::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1400px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1000px 600px at 78% -10%, rgba(31, 111, 139, 0.55) 0%, rgba(31, 111, 139, 0) 65%),
    radial-gradient(560px 420px at 92% 4%, rgba(244, 184, 96, 0.14) 0%, rgba(244, 184, 96, 0) 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
}
a { color: var(--ice); }
h1, h2, h3, h4 { font-family: var(--pf-font-display); letter-spacing: -0.02em; line-height: 1.12; margin: 0; }
h1, h2 { font-weight: 800; font-variation-settings: "wdth" 80; }
h1 { letter-spacing: -0.035em; line-height: 0.96; }
/* the paper: a fine grain over every page, never over the pointer */
body::after { content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; background: var(--grain); opacity: 0.11; mix-blend-mode: overlay; }
p { margin: 0 0 12px; }
code { background: rgba(143, 200, 220, 0.12); padding: 1px 6px; border-radius: 5px; font-size: 13px; }
main { flex: 1; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) 48px; }
section { margin: 0 0 72px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid transparent; transition: transform 120ms, filter 120ms, background 120ms; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-primary { background: var(--sun); color: var(--navy-deep); }
.btn-ghost { border-color: var(--ice); color: var(--text); background: transparent; }
.btn-ghost:hover { background: rgba(143, 200, 220, 0.1); }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 10px; }
.fine { color: var(--dim); font-size: 13px; margin: 0; }
.center { text-align: center; }

/* header */
.site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 28px; padding: 14px var(--pad); background: rgba(10, 28, 40, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--pf-font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; text-decoration: none; color: inherit; }
.brand svg { width: 32px; height: 32px; border-radius: 9px; }
.site-nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.site-nav > a, .site-nav .menu > a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: 8px; display: inline-block; }
.site-nav > a:hover, .site-nav .menu > a:hover, .site-nav a.on { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.menu { position: relative; }
.dropdown { position: absolute; top: calc(100% + 6px); left: 0; min-width: 380px; padding: 8px; background: #12324a; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); display: none; grid-template-columns: 1fr 1fr; gap: 2px; }
.dropdown.small { min-width: 220px; grid-template-columns: 1fr; }
/* The dropdown opens 6px below its menu. This strip covers the gap, so the pointer stays over the menu on its way down and the dropdown does not close. */
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.menu:hover .dropdown, .menu:focus-within .dropdown { display: grid; }
.dropdown a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--text); }
.dropdown a:hover { background: rgba(255, 255, 255, 0.07); }
.dropdown strong { display: block; font-size: 14px; }
.dropdown span { display: block; font-size: 12px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nav-cta .signin { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.nav-cta .signin:hover { color: var(--text); }
.nav-toggle, .nav-burger { display: none; }

/* hero */
.hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; padding-top: 72px; margin-bottom: 88px; }
/* the hero mock sits on a raised plane, lit from the top right, and leans into the page */
.hero-visual { position: relative; }
.hero-visual .viz { transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); transform-origin: 30% 50%; }
.raised { position: relative; }
.raised::before { content: ""; position: absolute; inset: -12% -8% -20%; z-index: -1; pointer-events: none; border-radius: 40%;
  background: radial-gradient(closest-side, rgba(244, 184, 96, 0.16), rgba(31, 111, 139, 0.22) 45%, rgba(31, 111, 139, 0) 100%); filter: blur(20px); }
/* one load choreography: the hero text lines rise in order, the mock follows */
@media (prefers-reduced-motion: no-preference) {
  .hero-text > * { animation: rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero-text > :nth-child(2) { animation-delay: 60ms; } .hero-text > :nth-child(3) { animation-delay: 120ms; }
  .hero-text > :nth-child(4) { animation-delay: 180ms; } .hero-text > :nth-child(5) { animation-delay: 240ms; }
  .hero-visual { animation: rise 900ms 200ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  /* everything else reveals as it scrolls in, in browsers that can do it without a script */
  @supports (animation-timeline: view()) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--pf-font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ice); margin: 0 0 16px; }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 12px var(--sun); }
.hero h1, .page-hero h1 { font-size: clamp(38px, 6vw, 68px); font-weight: 800; margin: 0 0 20px; text-wrap: balance; }
.hero h1 { font-size: clamp(38px, 4.6vw, 60px); }
.hero h1 span, .page-hero h1 span { color: var(--sun); }
.lead { font-size: clamp(16px, 1.8vw, 20px); color: var(--muted); max-width: 560px; line-height: 1.5; }
.page-hero { padding-top: 56px; max-width: 760px; }
.page-hero .lead { max-width: 680px; }

/* illustrations (scripts/site-visuals.mjs) */
/* Product mocks: drawn in the app's own light theme (web/src/index.css), since that is what
   a new customer sees. The tokens are scoped to .viz so the dark site around them is untouched. */
.viz {
  --v-bg: #f4f7f9; --v-card: #ffffff; --v-text: #0f1f2a; --v-sub: #44596a; --v-muted: #7a8c99;
  --v-line: #d9e2e8; --v-line-strong: #b9c8d2; --v-accent: #1f6f8b; --v-accent-soft: #dcecf3; --v-warn: #c2781b; --v-warn-soft: #fbeed8;
  --v-danger: #b3373a; --v-ok: var(--pf-text-mossa-light); --v-done: var(--pf-mossa); --v-shadow: 0 1px 2px rgba(15, 31, 42, 0.06), 0 4px 16px rgba(15, 31, 42, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius); background: var(--v-bg); color: var(--v-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 0 rgba(255, 255, 255, 0.08), 0 40px 90px -20px rgba(0, 0, 0, 0.7); overflow: hidden; font-size: 12px; text-align: left;
}
.viz-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--v-line); background: var(--v-card); }
.viz-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--v-line); }
.viz-bar em { margin-left: 10px; font-style: normal; font-size: 12px; color: var(--v-sub); }
.viz-week { display: grid; grid-template-columns: repeat(7, 1fr); min-height: 240px; }
.viz-week > div { border-right: 1px solid var(--v-line); border-bottom: 1px solid var(--v-line); padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.viz-week > div:last-child { border-right: 0; }
.viz-week > div.today { background: var(--v-accent-soft); }
.viz-week header { display: flex; align-items: center; gap: 5px; padding-bottom: 2px; }
.viz-week b { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--v-muted); font-weight: 600; }
.viz-week header span { font-size: 11px; font-weight: 600; color: var(--v-sub); }
.viz-week .today header span { color: var(--v-accent); }
.viz-week .plus { margin-left: auto; font-style: normal; font-size: 12px; line-height: 1; color: var(--v-muted); }
.viz-week .chip { background: var(--v-card); box-shadow: var(--v-shadow); border-left: 3px solid var(--v-done); border-radius: 6px; padding: 5px 6px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.viz-week .chip.wait { border-left-color: var(--v-accent); }
.viz-week .chip.draft { border-left-color: var(--v-muted); }
.viz-week .time { font-size: 10px; font-weight: 600; color: var(--v-text); }
.viz-week .badge { font-size: 8px; font-weight: 700; padding: 1px 4px; border-radius: 4px; color: #fff; }
.viz-week .badge.ig { background: #c13584; }
.viz-week .badge.fb { background: #4267b2; }
.viz-week .chip em { font-style: normal; font-size: 10.5px; line-height: 1.25; color: var(--v-sub); flex-basis: 100%; }

.viz-queue { list-style: none; margin: 0; padding: 6px 0; background: var(--v-card); }
.viz-queue li { display: grid; grid-template-columns: 14px 1fr; column-gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--v-line); align-items: center; }
.viz-queue li:last-child { border-bottom: 0; }
.viz-queue .dot { width: 9px; height: 9px; border-radius: 50%; grid-row: span 2; }
.viz-queue .ok { background: var(--v-done); } .viz-queue .wait { background: var(--v-accent); } .viz-queue .bad { background: var(--v-danger); }
.viz-queue b { font-size: 13px; } .viz-queue em { font-style: normal; color: var(--v-sub); font-size: 11.5px; } .viz-queue u { color: var(--v-accent); text-decoration: none; font-weight: 600; }
.viz-composer { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.viz-composer .brief, .viz-composer .draft { padding: 10px 12px; border-radius: 10px; background: var(--v-card); border: 1px solid var(--v-line); line-height: 1.5; }
.viz-composer .draft { background: var(--v-accent-soft); border-color: transparent; border-left: 3px solid var(--v-accent); }
.viz-composer b { display: block; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v-accent); margin-bottom: 4px; }
.viz-composer .said { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; color: var(--v-sub); }
.viz-composer .chips { display: flex; gap: 6px; flex-wrap: wrap; } .viz-composer .chips span { font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--v-line); background: var(--v-card); color: var(--v-sub); }
.viz-composer .actions { margin: 0; gap: 8px; } .btnish { font-size: 11.5px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--v-line); background: var(--v-card); color: var(--v-text); } .btnish.primary { background: var(--v-accent); color: #fff; border-color: var(--v-accent); font-weight: 600; }
.viz-inbox { display: grid; grid-template-columns: 180px 1fr; min-height: 230px; }
.viz-inbox .threads { list-style: none; margin: 0; padding: 0; border-right: 1px solid var(--v-line); background: var(--v-card); }
.viz-inbox .threads li { padding: 10px 12px; border-bottom: 1px solid var(--v-line); display: grid; gap: 2px; }
.viz-inbox .threads li.on { background: var(--v-accent-soft); }
.viz-inbox .threads b { font-size: 12.5px; } .viz-inbox .threads em { font-style: normal; color: var(--v-sub); font-size: 11px; }
.viz-inbox .clock { font-size: 10px; color: var(--v-ok); font-weight: 600; } .viz-inbox .clock.warn { color: var(--v-warn); } .viz-inbox .clock.dim { color: var(--v-muted); font-weight: 400; }
.viz-inbox .thread { padding: 12px; display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; }
.viz-inbox .thread p { margin: 0; max-width: 85%; padding: 8px 11px; border-radius: 12px; line-height: 1.45; font-size: 12px; }
.viz-inbox .in { background: var(--v-card); box-shadow: var(--v-shadow); align-self: flex-start; border-bottom-left-radius: 3px; }
.viz-inbox .out { background: var(--v-accent); color: #fff; align-self: flex-end; border-bottom-right-radius: 3px; }
.viz-inbox .out.auto { background: var(--v-warn-soft); color: var(--v-text); border: 1px solid rgba(194, 120, 27, 0.35); }
.viz-inbox .tagline { display: block; font-size: 10px; color: var(--v-warn); font-weight: 600; margin-top: 4px; }
.viz-flow { display: grid; grid-template-columns: 1fr; gap: 0; padding: 18px; }
.viz-flow .node { border: 1px solid var(--v-line); border-radius: 12px; padding: 10px 12px; background: var(--v-card); }
.viz-flow .node small { display: block; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v-accent); }
.viz-flow .node b { display: block; font-size: 13px; } .viz-flow .node em { font-style: normal; color: var(--v-sub); font-size: 11.5px; display: block; }
.viz-flow .trigger { border-color: var(--v-warn); background: var(--v-warn-soft); } .viz-flow .trigger small { color: var(--v-warn); }
.viz-flow .dm { border-color: var(--v-accent); }
.viz-flow .buttons { display: flex; gap: 6px; margin-top: 8px; } .viz-flow .buttons span { font-size: 11px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--v-accent); color: var(--v-accent); }
.viz-flow .arrow { width: 2px; height: 18px; margin: 0 auto; background: var(--v-line-strong); position: relative; }
.viz-flow .arrow::after { content: ""; position: absolute; bottom: -1px; left: -4px; border: 5px solid transparent; border-top-color: var(--v-muted); }
.viz-flow .small { font-size: 11px; }
.viz-flow .stop { border-style: dashed; margin-top: 8px; } .viz-flow .stop b { color: var(--v-danger); }
.viz-ws { list-style: none; margin: 0; padding: 6px 0; background: var(--v-card); }
.viz-ws li { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--v-line); align-items: center; }
.viz-ws li:last-child { border-bottom: 0; } .viz-ws li.on { background: var(--v-accent-soft); }
.viz-ws .avatar { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--v-accent); grid-row: span 2; }
.viz-ws .avatar.mr { background: #7a4fbf; } .viz-ws .avatar.li { background: #c2637a; } .viz-ws .avatar.plus { background: transparent; border: 1px dashed var(--v-line-strong); color: var(--v-muted); }
/* link in bio page on postfjord.page (site-visuals.mjs bioPage): a narrow phone frame, centered */
.viz-phone { max-width: 340px; margin: 0 auto; }
.viz-bio { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 20px 24px; background: var(--v-card); }
.viz-bio .avatar { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 700; color: #fff; background: var(--v-accent); }
.viz-bio > b { font-size: 16px; } .viz-bio > em { font-style: normal; color: var(--v-sub); font-size: 12px; margin-bottom: 6px; }
.viz-bio .link { width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--v-line); text-align: center; font-weight: 600; font-size: 12.5px; }
.viz-bio .link.featured { background: var(--v-accent); border-color: var(--v-accent); color: #fff; }
.viz-bio .form { width: 100%; display: grid; gap: 7px; margin-top: 6px; padding: 12px; border-radius: 12px; background: var(--v-accent-soft); }
.viz-bio .form small { font-size: 11.5px; font-weight: 600; color: var(--v-text); }
.viz-bio .field { padding: 8px 10px; border-radius: 8px; background: var(--v-card); border: 1px solid var(--v-line); color: var(--v-muted); font-size: 11.5px; }
.viz-bio .btnish { text-align: center; }
.viz-ws b { font-size: 13px; } .viz-ws em { font-style: normal; color: var(--v-sub); font-size: 11.5px; } .viz-ws .add b { color: var(--v-muted); font-weight: 500; }
.viz-inline { margin: 28px 0 32px; }
.viz-inline .viz { box-shadow: none; }
.page-hero.with-visual { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; max-width: none; }
.icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(143, 200, 220, 0.12); margin-bottom: 14px; }
.icon svg { width: 22px; height: 22px; fill: none; stroke: var(--ice); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon svg .fill { fill: var(--sun); stroke: var(--sun); }
.steps .icon { margin-left: 10px; vertical-align: top; }

/* channels row */
.channels-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; font-size: 13px; color: var(--muted); margin-top: -24px; }
.channels-row span { display: inline-flex; align-items: center; gap: 7px; }
.channels-row i { width: 7px; height: 7px; border-radius: 50%; background: var(--ice); display: inline-block; }
.channels-row .soon { color: var(--dim); }
.channels-row .soon i { background: var(--dim); }
.channels-row .soon::after { content: "soon"; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; }

/* section headings and grids */
section > h2 { font-size: clamp(32px, 5vw, 60px); font-weight: 800; margin-bottom: 14px; letter-spacing: -0.03em; line-height: 0.98; text-wrap: balance; }
.sub { color: var(--muted); font-size: 17px; margin: 0 0 28px; max-width: 640px; }
.pillars, .products, .showcase, .features-list, .how, .faq, .pricing-teaser, .compare { text-align: left; }
.pillars > h2, .pillars .sub, .products > h2, .products .sub, .showcase > h2, .features-list > h2, .how > h2, .pricing-teaser > h2, .pricing-teaser .sub, .faq > h2 { text-align: center; margin-left: auto; margin-right: auto; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.pillar, .feature { display: block; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--edge); text-decoration: none; color: inherit; transition: background 160ms, border-color 160ms, transform 200ms, box-shadow 200ms; }
.pillar:hover, .feature:hover { background: var(--surface-hover); border-color: var(--ice); transform: translateY(-3px); box-shadow: var(--edge), var(--lift); }
.pillar h3, .feature h3 { font-size: 18px; margin-bottom: 8px; }
.pillar p, .feature p { color: var(--muted); font-size: 14.5px; margin: 0; }
.more-link { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--ice); font-weight: 600; text-decoration: none; }
.more-link::after { content: " \2192"; }
.eyebrow-sm { display: block; font-family: var(--pf-font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sun); margin-bottom: 8px; }

/* a full-bleed band: the page changes tone here, so the scroll has rhythm */
.band { position: relative; padding: 64px 0 72px; }
.band::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(143, 200, 220, 0.06), rgba(143, 200, 220, 0.015) 40%, rgba(10, 28, 40, 0) 100%); border-top: 1px solid rgba(143, 200, 220, 0.12); }

/* products: three illustrated panels, one per part of Postfjord */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.product-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--edge); text-decoration: none; color: inherit; overflow: hidden; transition: transform 220ms, box-shadow 220ms, border-color 160ms; }
.product-card:hover { transform: translateY(-4px); border-color: rgba(143, 200, 220, 0.4); box-shadow: var(--edge), var(--lift); }
.product-art { display: block; border-bottom: 1px solid var(--line); background: var(--navy-deep); }
.product-art .cover-art { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 560; transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.product-card:hover .cover-art { transform: scale(1.03); }
.product-body { display: flex; flex-direction: column; padding: 22px 24px 24px; flex: 1; }
.product-name { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--ice); margin-bottom: 8px; }
.product-name::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 10px var(--ice); }
.product-card[class*="part-"] .product-name::before { background: var(--part); box-shadow: 0 0 10px var(--part); }
.product-body h3 { font-size: 22px; letter-spacing: -0.02em; margin-bottom: 8px; }
.product-body p { color: var(--muted); font-size: 14.5px; margin: 0 0 4px; flex: 1; }

/* showcase: a bento of the features, each tile with a scene and its loop (the block "Home: the feature tiles" further down) */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin-top: 36px; }
.tile { grid-column: span 3; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--edge); text-decoration: none; color: inherit; overflow: hidden; transition: transform 220ms, box-shadow 220ms, border-color 160ms; }
.tile:hover { transform: translateY(-4px); border-color: rgba(143, 200, 220, 0.4); box-shadow: var(--edge), var(--lift); }
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-6 { grid-column: span 6; }
.tile-body { display: block; padding: 20px 24px 24px; }
.tile-body h3 { font-size: 20px; letter-spacing: -0.02em; margin-bottom: 6px; }
.tile-body p { color: var(--muted); font-size: 14.5px; margin: 0; }
.showcase-more { margin-top: 32px; }

/* how it works: three steps on one rail, the numbers sitting on it */
.steps { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; }
.steps li { padding: 24px 0 0; border-top: 1px solid rgba(143, 200, 220, 0.25); position: relative; }
.steps b { position: absolute; top: -17px; left: 0; display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; background: var(--sun); color: var(--navy-deep); font-weight: 800; box-shadow: 0 0 0 6px var(--navy-deep), 0 8px 24px rgba(244, 184, 96, 0.35); }
.steps .icon { margin: 0 0 14px; }
.steps h3 { font-size: 20px; margin-bottom: 8px; letter-spacing: -0.02em; }
.steps p { color: var(--muted); font-size: 15px; margin: 0; }

/* mcp band */
.mcp-band { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 48px; border: 1px solid var(--line); border-radius: var(--radius-lg); position: relative; overflow: visible;
  background: linear-gradient(135deg, rgba(31, 111, 139, 0.38), rgba(10, 28, 40, 0.5)); box-shadow: var(--edge), 0 40px 100px -40px rgba(0, 0, 0, 0.7); }
.mcp-band h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; margin-bottom: 12px; letter-spacing: -0.03em; }
.mcp-band p { color: var(--muted); }
.mcp-chat { margin: -84px -12px -84px 0; }
.chat { margin: 0; padding: 22px 24px; border-radius: 16px; background: #0b1f2c; border: 1px solid rgba(143, 200, 220, 0.22); font: 13.5px/1.65 var(--pf-font-mono); white-space: pre-wrap; color: #eaf1f5; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 70px -20px rgba(0, 0, 0, 0.8); }
.chat b { color: var(--sun); }

/* pricing */
/* minmax(0, 1fr): a long word or button in one language must not widen its card past the page (French, 2026-09-24) */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--edge); }
.plan.featured { border-color: var(--ice); background: linear-gradient(180deg, rgba(143, 200, 220, 0.14), rgba(143, 200, 220, 0.04) 60%); box-shadow: 0 0 0 1px var(--ice) inset, 0 30px 70px -20px rgba(0, 0, 0, 0.7); transform: translateY(-8px); }
.plan .tag { position: absolute; top: -12px; right: 18px; background: var(--sun); color: var(--navy-deep); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.plan h3 { font-size: 20px; }
.plan .price { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.plan .price small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-top: 2px; }
.plan ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.plan .cta { margin-top: auto; white-space: normal; text-align: center; }
/* Monthly or yearly: two hidden radios before .plans, no script (scripts/build-site.mjs planCards) */
.billing > input { position: absolute; opacity: 0; pointer-events: none; }
.bill-switch { display: flex; width: max-content; max-width: 100%; margin: 0 auto 22px; padding: 4px; gap: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.04); }
.bill-switch label { padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.bill-save { font-weight: 500; color: var(--sun); }
.bill-m:checked ~ .bill-switch label[for="bill-m"], .bill-y:checked ~ .bill-switch label[for="bill-y"] { background: var(--sun); color: var(--navy-deep); }
.bill-y:checked ~ .bill-switch label[for="bill-y"] .bill-save { color: var(--navy-deep); }
.bill-m:focus-visible ~ .bill-switch label[for="bill-m"], .bill-y:focus-visible ~ .bill-switch label[for="bill-y"] { outline: 2px solid var(--ice); outline-offset: 2px; }
.bill-m:checked ~ .plans .p-y, .bill-y:checked ~ .plans .p-m { display: none; }
.plan .plan-save { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--sun); }
.tax-note { text-align: center; font-size: 13px; color: var(--muted); margin-top: 14px; }
.compare h2 { font-size: 24px; margin: 8px 0 16px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
thead th { font-size: 15px; background: rgba(255, 255, 255, 0.04); }
tbody th { font-weight: 500; color: var(--muted); width: 40%; }
tr:last-child td, tr:last-child th { border-bottom: 0; }
tbody + tbody tr:first-child th { border-top: 1px solid var(--line); }
tr.group th { color: var(--text); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; background: rgba(143, 200, 220, 0.07); padding-top: 14px; padding-bottom: 10px; }
tr.group th a { color: var(--text); text-decoration: none; font-size: 15px; }
tr.group th a:hover { color: var(--ice); }
tr.group th span { margin-left: 10px; font-weight: 400; color: var(--muted); }
tr.group th::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 10px; vertical-align: 1px; background: var(--muted); }
tr.part-postsocial th::before { background: var(--sun); }
tr.part-postchat th::before { background: var(--pf-lingon); }
tr.part-postmail th::before { background: var(--pf-ljung); }

/* faq */
.faq { max-width: 760px; margin-left: auto; margin-right: auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 16px; padding: 12px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ice); font-size: 20px; font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--muted); margin: 0 0 14px; }

/* cta band */
.cta-band { position: relative; overflow: hidden; text-align: center; padding: clamp(48px, 7vw, 88px) 24px; border-radius: 26px; background: var(--sun); color: var(--navy-deep); box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.8); }
.cta-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--grain); opacity: 0.12; mix-blend-mode: multiply; }
.cta-band h2 { font-size: clamp(34px, 5.4vw, 64px); font-weight: 800; margin-bottom: 12px; letter-spacing: -0.03em; line-height: 0.98; color: var(--navy-deep); text-wrap: balance; }
.cta-band p { color: rgba(10, 28, 40, 0.78); font-size: 17px; }
.cta-band .btn-primary { background: var(--navy-deep); color: var(--pf-frost); }
.cta-band .btn-ghost { border-color: var(--navy-deep); color: var(--navy-deep); }
.cta-band .btn-ghost:hover { background: rgba(10, 28, 40, 0.08); }
.cta-band .actions { justify-content: center; }

/* prose pages: help, blog, legal, marketing body */
.prose { max-width: 760px; margin: 0 auto 72px; }
.prose h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 6px; }
.prose h2 { font-size: 22px; margin: 36px 0 10px; }
.prose h3 { font-size: 16px; margin: 20px 0 6px; color: var(--ice); font-weight: 600; }
.prose p, .prose li { font-size: 16px; color: var(--text); }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 4px; }
.prose .meta { color: var(--muted); font-size: 15px; margin-bottom: 24px; }
.prose table { margin: 12px 0 20px; }
.prose .card { border: 1px solid var(--line); border-radius: 14px; padding: 20px 24px; background: var(--card); margin-bottom: 20px; }
/* a long address in the legal texts or a guide breaks instead of running off a phone screen */
.prose.legal a, .prose.guide a { overflow-wrap: anywhere; }
.crumbs { color: var(--muted); font-size: 13px; margin: 0 0 8px; }
.soon-tag { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.6; color: var(--sun); background: rgba(244, 184, 96, 0.12); border: 1px solid rgba(244, 184, 96, 0.35); white-space: nowrap; }
h1 .soon-tag { font-size: 13px; vertical-align: 0.5em; }
td .soon-tag { margin-left: 0; }

/* help center: search, three part sections and the account pages */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.help-hero { max-width: 760px; margin: 0 auto 28px; text-align: center; }
.help-hero .lead { margin-left: auto; margin-right: auto; }
.help-search { position: relative; max-width: 620px; margin: 24px auto 0; text-align: left; }
.help-search input { width: 100%; font: inherit; font-size: 16px; color: var(--text); padding: 15px 20px; border-radius: 999px; border: 1px solid var(--line); background: rgba(10, 28, 40, 0.6); outline: none; }
.help-search input:focus { border-color: var(--ice); box-shadow: 0 0 0 3px rgba(143, 200, 220, 0.18); }
.help-search input::placeholder { color: var(--dim); }
.help-search .help-list { margin-top: 10px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: #0c2230; }
.help-search small { font-weight: 500; color: var(--dim); margin-left: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.help-none { margin: 12px 4px 0; color: var(--muted); font-size: 14px; }
.help-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.help-list a { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--text); transition: background 120ms; }
.help-list a:hover, .help-list a:focus-visible { background: var(--card-hover); }
.help-list .icon { width: 32px; height: 32px; border-radius: 9px; margin: 0; flex: none; }
.help-list .icon svg { width: 17px; height: 17px; }
.help-list b { display: block; font-size: 14.5px; font-weight: 600; }
.help-list em { display: block; font-style: normal; color: var(--muted); font-size: 13px; line-height: 1.45; margin-top: 2px; }
.help-parts .help-list em, .help-list.grid em { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.help-list.grid { grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.help-list.wide a { padding: 14px 16px; border: 1px solid var(--line); background: var(--card); }
.help-list.wide { gap: 10px; max-width: 820px; }
.help-start { display: flex; align-items: center; gap: 14px; max-width: 760px; margin: 0 auto 40px; padding: 16px 20px; border-radius: var(--radius); text-decoration: none; color: var(--text); border: 1px solid rgba(244, 184, 96, 0.4); background: rgba(244, 184, 96, 0.07); transition: background 120ms, transform 120ms; }
.help-start:hover { background: rgba(244, 184, 96, 0.12); transform: translateY(-1px); }
.help-start .icon { margin: 0; flex: none; background: rgba(244, 184, 96, 0.16); }
.help-start b { display: block; font-size: 16px; } .help-start em { display: block; font-style: normal; color: var(--muted); font-size: 14px; }
.help-start i { margin-left: auto; font-style: normal; font-size: 20px; color: var(--sun); }
.help-parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 56px; }
.help-part { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; display: flex; flex-direction: column; }
.help-part-art { display: block; border-bottom: 1px solid var(--line); }
.help-part-art .cover-art, .help-art .cover-art { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 560; }
.help-part h2 { font-size: 22px; margin: 18px 20px 4px; display: flex; align-items: center; }
.help-part h2 a { color: var(--text); text-decoration: none; }
.help-part h2 a:hover { color: var(--ice); }
.help-part > p { margin: 0 20px 10px; color: var(--muted); font-size: 14px; }
.help-part .help-list { padding: 0 8px 12px; }
.help-block { margin-bottom: 56px; }
.help-h2 { font-size: 22px; margin: 0 0 14px; }
.help-art { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.help-section-hero { margin-bottom: 36px; }
.help-others { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.help-others a { display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); text-decoration: none; color: var(--text); transition: background 120ms, border-color 120ms; }
.help-others a:hover { background: var(--card-hover); border-color: var(--ice); }
.help-others b { display: block; font-size: 16px; } .help-others span { color: var(--muted); font-size: 13.5px; }
.more-sections { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.more-sections a { font-size: 13px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--muted); }
.more-sections a:hover { color: var(--text); border-color: var(--ice); }
.crumbs a { color: var(--muted); text-decoration: none; }
.more { columns: 2; padding-left: 18px; }
.more li { margin-bottom: 4px; }
.release { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 28px; }
.release h2 { margin-top: 0; }
.date { color: var(--muted); font-size: 13px; margin: 0 0 8px; }
.related h2 { font-size: 22px; }
.page-hero + .prose { margin-top: 8px; }

/* blog: the latest post leads, the rest sit in a grid of illustrated cards */
.blog-hero { margin-bottom: 40px; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.post-meta .tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(244, 184, 96, 0.14); color: var(--sun); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.featured-wrap { margin-bottom: 48px; }
.featured-post { display: block; border: 1px solid rgba(143, 200, 220, 0.22); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--edge), var(--lift); text-decoration: none; color: inherit; overflow: hidden; transition: transform 220ms, box-shadow 220ms, border-color 160ms; }
.featured-post:hover { transform: translateY(-4px); border-color: rgba(143, 200, 220, 0.45); box-shadow: var(--edge), 0 40px 90px -30px rgba(0, 0, 0, 0.8); }
.featured-art { display: block; background: var(--navy-deep); border-bottom: 1px solid var(--line); }
.featured-art .cover-art { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 320; transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.featured-post:hover .cover-art { transform: scale(1.02); }
.featured-body { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: auto auto auto; column-gap: 40px; row-gap: 10px; padding: 28px 36px 32px; align-items: start; }
.featured-label { grid-column: 1; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ice); }
.featured-body .post-meta { grid-column: 1; }
.featured-body h2 { grid-column: 1; grid-row: 3; font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -0.03em; }
.featured-body p { grid-column: 2; grid-row: 1 / 3; color: var(--muted); font-size: 16px; margin: 0; align-self: end; }
.featured-body .more-link { grid-column: 2; grid-row: 3; margin-top: 4px; font-size: 14px; align-self: center; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--edge); text-decoration: none; color: inherit; overflow: hidden; transition: transform 220ms, box-shadow 220ms, border-color 160ms; }
.post-card:hover { transform: translateY(-4px); border-color: rgba(143, 200, 220, 0.4); box-shadow: var(--edge), var(--lift); }
.post-thumb { display: block; background: var(--navy-deep); border-bottom: 1px solid var(--line); }
.post-thumb .cover-art { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 320; transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.post-card:hover .cover-art { transform: scale(1.04); }
.post-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; flex: 1; }
.post-card h3 { font-size: 18px; letter-spacing: -0.02em; line-height: 1.25; }
.post-card p { color: var(--muted); margin: 0; font-size: 14px; }
.post-head { max-width: 760px; margin: 0 auto; padding-top: 48px; }
.post-head .post-meta { margin-bottom: 18px; }
.post-head h1 { font-size: clamp(32px, 5vw, 54px); font-weight: 800; letter-spacing: -0.035em; margin-bottom: 16px; }
.post-head .lead { max-width: 680px; margin-bottom: 0; }
.post-cover { max-width: 960px; margin: 36px auto 44px; }
.post-cover .cover-art { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 320; border-radius: var(--radius-lg); border: 1px solid rgba(143, 200, 220, 0.2); box-shadow: var(--edge), var(--lift); }
.prose.post { margin-bottom: 56px; }
.prose.post > p:first-child { font-size: 18px; color: var(--text); }
.more-posts { margin-bottom: 72px; }
/* Charts in posts (```chart, scripts/lib/blog-chart.mjs): inline SVG in the site's tokens, so the
   marks are is on dark and fjord on paper. x is in percent and text keeps its size at any width. */
.chart { margin: 28px 0 32px; padding: 20px 20px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); --chart-ink: var(--ice); --chart-track: var(--line); }
.chart-svg { display: block; width: 100%; overflow: visible; }
.chart-mark { fill: var(--chart-ink); }
.chart-track { fill: var(--chart-track); }
.chart-line { stroke: var(--chart-ink); stroke-width: 2.5; stroke-linecap: round; }
.chart-dot { fill: var(--chart-ink); stroke: var(--card); stroke-width: 2; }
.chart-axis { stroke: var(--muted); stroke-width: 1; }
.chart-label { fill: var(--text); font-family: var(--pf-font-body); font-size: 14px; }
.chart-tick { fill: var(--muted); font-family: var(--pf-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.chart-value { fill: var(--text); font-family: var(--pf-font-mono); font-size: 12px; font-weight: 500; }
.chart figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.chart-title { font-weight: 600; font-size: 15px; color: var(--text); }
.chart-source { font-family: var(--pf-font-mono); font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 480px) { .chart { padding: 16px 14px 12px; } }
/* Flow diagrams (```flow, scripts/lib/help-flow.mjs): steps as boxes with arrows in the site's
   tokens, so they turn with the section. The wide drawing shows from 520 px of figure width, the
   tall one below that; each is scaled to fit, and neither grows past its own size. */
.flow { container-type: inline-size; margin: 28px 0 32px; padding: 18px 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  --flow-ink: var(--ice); --flow-on: var(--pf-natt); }
.help-sheet .flow, main > .prose .flow, .light .flow { --flow-on: #fff; }
.flow-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.flow-title { font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--text); }
.flow-brand { display: inline-flex; align-items: center; gap: 7px; flex: none; font-family: var(--pf-font-display); font-weight: 750; font-size: 14px; letter-spacing: -0.01em; color: var(--text); }
.flow-mark { display: block; }
.flow-mark-ground { fill: var(--pf-djup); }
.flow-mark-fjord { fill: var(--pf-fjord); }
.flow-mark-water { fill: var(--pf-is); }
.flow-mark-sun { fill: var(--pf-sol); }
.flow-svg { display: block; width: 100%; height: auto; margin: 0 auto; overflow: visible; }
.flow-wide { max-width: 640px; }
.flow-tall { max-width: 280px; display: none; }
@container (max-width: 519px) { .flow-wide { display: none; } .flow-tall { display: block; } }
.flow-box { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.flow .flow-box { fill: var(--pf-natt); }
.help-sheet .flow .flow-box, main > .prose .flow .flow-box, .light .flow .flow-box { fill: #fff; }
.flow-step[class*="flow-tone-"] .flow-box { stroke: var(--flow-ink); stroke-width: 2; }
.flow-badge { fill: var(--flow-ink); }
.flow-num { fill: var(--flow-on); font-family: var(--pf-font-mono); font-size: 12px; font-weight: 600; }
.flow-label { fill: var(--text); font-family: var(--pf-font-body); font-size: 15px; font-weight: 600; }
.flow-note { fill: var(--muted); font-family: var(--pf-font-body); font-size: 13px; }
.flow-arrow { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.flow-head { fill: var(--muted); }
.flow-tone-sol { --flow-ink: var(--pf-sol); --flow-on: var(--pf-natt); }
.flow-tone-lingon { --flow-ink: var(--pf-lingon); --flow-on: var(--pf-natt); }
.flow-tone-ljung { --flow-ink: var(--pf-ljung); --flow-on: var(--pf-natt); }
.flow-tone-mossa { --flow-ink: var(--pf-mossa); --flow-on: var(--pf-natt); }
.flow-tone-fjord { --flow-ink: var(--pf-fjord); --flow-on: #fff; }
@media (max-width: 480px) { .flow { padding: 16px 14px 18px; } }
.more-posts h2 { font-size: 24px; margin-bottom: 20px; letter-spacing: -0.02em; }

/* features index: each part of the product is a chapter, each feature a row with its mock */
.features-hero { max-width: none; margin-bottom: 24px; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.jump a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--edge); text-decoration: none; color: var(--text); font-size: 14px; font-weight: 600; transition: border-color 160ms, transform 160ms; }
.jump a:hover { border-color: var(--ice); transform: translateY(-1px); }
.jump a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.jump a:is(.part-postsocial, .part-postchat, .part-postmail)::before { background: var(--part); box-shadow: 0 0 8px var(--part); }
.jump a:is(.part-postsocial, .part-postchat, .part-postmail):hover { border-color: var(--part); }
.jump a.part-claude::before { background: #d9c3ff; box-shadow: 0 0 8px #d9c3ff; }
.fgroup { position: relative; padding: 56px 0 8px; margin: 0; scroll-margin-top: 80px; }
.fgroup::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: -1; pointer-events: none; border-top: 1px solid rgba(143, 200, 220, 0.12); }
.fgroup:nth-of-type(odd)::before { background: linear-gradient(180deg, rgba(143, 200, 220, 0.055), rgba(143, 200, 220, 0) 60%); }
.fgroup:nth-of-type(even)::before { background: linear-gradient(180deg, rgba(31, 111, 139, 0.14), rgba(31, 111, 139, 0) 60%); }
.fgroup-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px 24px; margin-bottom: 8px; }
.fgroup-name { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; color: var(--ice); }
.fgroup-name::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 12px var(--ice); }
.fgroup:is(.part-postsocial, .part-postchat, .part-postmail) .fgroup-name { color: var(--part-dark); }
.fgroup:is(.part-postsocial, .part-postchat, .part-postmail) .fgroup-name::before { background: var(--part); box-shadow: 0 0 12px var(--part); }
.fgroup:is(.part-postsocial, .part-postchat, .part-postmail) .eyebrow-sm { color: var(--part-dark); }
.fgroup.light:is(.part-postsocial, .part-postchat, .part-postmail) :is(.fgroup-name, .eyebrow-sm, .more-link) { color: var(--part-light); }
.fgroup.light:is(.part-postsocial, .part-postchat, .part-postmail) .frow + .frow { border-top-color: color-mix(in srgb, var(--part) 30%, transparent); }
.part-claude .fgroup-name::before { background: #d9c3ff; box-shadow: 0 0 12px #d9c3ff; }
.fgroup-head h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -0.03em; }
.fgroup-head .more-link { margin: 0 0 6px; font-size: 14px; }
.frow { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; padding: 56px 0; }
.frow + .frow { border-top: 1px solid rgba(143, 200, 220, 0.1); }
.frow.flip .frow-text { order: 2; } .frow.flip .frow-visual { order: 1; }
.frow-text h3 { font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -0.03em; margin-bottom: 12px; }
.frow-text h3 a { color: var(--text); text-decoration: none; }
.frow-text h3 a:hover { color: var(--ice); }
.frow-text p { color: var(--muted); font-size: 16px; }
.frow-text .more-link { font-size: 14px; }
.frow-visual .viz { transform: perspective(1600px) rotateY(-4deg); transform-origin: 20% 50%; }
.frow.flip .frow-visual .viz { transform: perspective(1600px) rotateY(4deg); transform-origin: 80% 50%; }
.frow-visual .chat { font-size: 14px; }
.viz-empty { display: grid; place-items: center; min-height: 200px; }

/* footer */
.site-footer { border-top: 1px solid var(--line); padding: 48px var(--pad) 28px; background: rgba(10, 28, 40, 0.5); }
.footer-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: 32px; }
.footer-brand p { color: var(--muted); font-size: 14px; margin: 14px 0; max-width: 300px; }
.site-footer h4 { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin: 0 0 12px; }
.site-footer .footer-grid a { display: block; color: var(--muted); text-decoration: none; font-size: 14px; padding: 3px 0; }
.site-footer .footer-grid a:hover { color: var(--text); }
.guide-cover { margin: clamp(28px, 5vw, 56px) 0 clamp(20px, 3vw, 32px); }
.guide-cover .cover-art { width: 100%; height: auto; aspect-ratio: 1200 / 320; border-radius: var(--radius); display: block; }
.guide-card .guide-thumb { display: block; margin: -4px 0 14px; border-radius: 12px; overflow: hidden; }
.guide-card .guide-thumb .cover-art { width: 100%; height: auto; aspect-ratio: 1200 / 320; display: block; }
.site-footer .footer-note { max-width: var(--max); margin: 24px auto 0; font-size: 13px; color: var(--dim); }
.site-footer .footer-langs { max-width: var(--max); margin: 28px auto 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; }
.site-footer .footer-langs a { color: var(--muted); text-decoration: none; }
.site-footer .footer-langs a:hover { color: var(--text); }
.site-footer .footer-grid .brand { display: inline-flex; padding: 0; color: var(--text); font-size: 18px; }
.social { display: flex; gap: 10px; }
.site-footer .footer-grid .social a, .social a { display: grid; padding: 0; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--muted); border: 1px solid var(--line); transition: color 160ms, border-color 160ms, background 160ms; }
.social a svg { width: 18px; height: 18px; transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1); }
.site-footer .footer-grid .social a:hover, .social a:hover, .social a:focus-visible { color: var(--navy-deep); background: var(--sun); border-color: var(--sun); }
.social a:hover svg, .social a:focus-visible svg { transform: rotate(360deg); }
@media (prefers-reduced-motion: reduce) { .social a svg { transition: none; } .social a:hover svg { transform: none; } }
.footer-bottom { max-width: var(--max); margin: 36px auto 0; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; font-size: 13px; color: var(--dim); }
.footer-bottom a { color: var(--dim); text-decoration: none; }
.footer-bottom a:hover { color: var(--text); }

/* responsive */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding-top: 40px; gap: 40px; margin-bottom: 64px; }
  .hero-visual .viz { transform: none; }
  .grid3, .steps, .plans { grid-template-columns: 1fr 1fr; }
  .mcp-band { grid-template-columns: 1fr; padding: 28px; }
  .mcp-chat { margin: 0 0 -60px; }
  .pages-band .pages-mock { order: 2; }
  .page-hero.with-visual { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .help-parts { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .product-art .cover-art { aspect-ratio: 1200 / 400; object-fit: cover; }
  .tile, .span-2, .span-3, .span-4 { grid-column: span 6; }
  .featured-body { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 28px; }
  .post-grid { grid-template-columns: 1fr 1fr; }
  .frow { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
  .frow.flip .frow-text { order: 1; } .frow.flip .frow-visual { order: 2; }
  .frow-visual .viz, .frow.flip .frow-visual .viz { transform: none; }
  .fgroup-head { grid-template-columns: 1fr; }
  .plan.featured { transform: none; }
}
@media (max-width: 720px) {
  .grid3, .steps, .plans { grid-template-columns: 1fr; }
  .steps { gap: 36px; }
  .post-grid { grid-template-columns: 1fr; }
  .band { padding: 48px 0 56px; }
  .mcp-band { padding: 24px 20px; }
  .fgroup { padding-top: 40px; }
  .frow-text h3 { font-size: 24px; }
  .post-cover { margin: 24px 0 32px; }
  .post-head { padding-top: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .help-list.grid, .help-list.wide, .help-others { grid-template-columns: 1fr; }
  .help-start { align-items: flex-start; }
  .viz-week { grid-template-columns: repeat(4, 1fr); }
  .viz-week > div:nth-child(n + 5) { display: none; }
  .viz-inbox { grid-template-columns: 1fr; } .viz-inbox .threads { border-right: 0; border-bottom: 1px solid var(--v-line); }
  .nav-burger { display: flex; flex-direction: column; gap: 5px; margin-left: auto; cursor: pointer; padding: 8px; }
  .nav-burger span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px var(--pad) 20px; background: #0f2a3a; border-bottom: 1px solid var(--line); }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .site-nav > a, .site-nav .menu > a { display: block; font-size: 16px; padding: 10px 8px; }
  .dropdown { display: grid; position: static; min-width: 0; grid-template-columns: 1fr; box-shadow: none; border: 0; background: transparent; padding: 0 0 8px 12px; }
  .dropdown span { display: none; }
  .dropdown::before { display: none; }
  .nav-cta { margin: 12px 0 0; justify-content: space-between; }
}

/* cookie box: bottom corner, never covering the page; only shown until a choice is made */
.consent { position: fixed; z-index: 50; left: 16px; right: 16px; bottom: 16px; max-width: 440px; margin-left: auto; padding: 16px 18px; border-radius: var(--radius); background: #12324a; border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.consent[hidden] { display: none; }
.consent p { margin: 0; color: var(--text); line-height: 1.5; }
.consent a { color: var(--ice); }
.consent-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* a real photo beside a page heading (the about page) */
.page-photo { margin: 0; justify-self: center; width: 100%; max-width: 420px; }
.page-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.page-photo figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); text-align: right; }
.page-photo figcaption a { color: inherit; }

/* Academy: course and lesson pages reuse the help lists and the help-start box. */
.lesson-app { margin: 36px 0 28px; }
.lesson-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin: 8px 0 40px; }
.lesson-list .lesson-num { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--sun); background: rgba(244, 184, 96, 0.12); }
.lesson-list a[aria-current="page"] { background: var(--card-hover); }
.prose .lesson-list { padding-left: 0; }
.prose .lesson-list li { margin: 0; }
.course-outcome { padding: 14px 18px; border-left: 3px solid var(--sun); background: var(--card); border-radius: 0 12px 12px 0; }
.course-facts { color: var(--muted); font-size: 13px; margin: 6px 0 0; }
@media (max-width: 640px) { .lesson-nav a { width: 100%; text-align: center; } }

/* ---------- Design system Fjord: the home page (scripts/build-site.mjs, docs/DESIGN.md) ---------- */
/* A light section: the same components, with the tokens turned to paper. */
.light, main > .prose {
  --text: var(--pf-djup); --muted: var(--pf-granit); --dim: #6f8290; --ice: var(--pf-fjord);
  --line: rgba(15, 42, 58, 0.14); --card: #fff; --card-hover: #fff;
  --surface: #fbfcfb; --surface-hover: #fff; --edge: 0 1px 0 rgba(15, 42, 58, 0.04);
  --lift: 0 26px 50px -26px rgba(15, 42, 58, 0.45);
  color: var(--text);
}
.light { position: relative; }
.light::before, .light::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: -1; pointer-events: none; }
.light::before { background: var(--pf-frost); }
.light::after { display: none; }
.light p a:not(.btn), .light details a, .light li a, main > .prose a:not(.btn) { color: var(--pf-fjord); }
.light .product-card, .light .tile { color: var(--text); }
.light .soon-tag { color: #8a5a12; background: rgba(244, 184, 96, 0.2); border-color: rgba(138, 90, 18, 0.35); }
.light .eyebrow-sm, main > .prose .eyebrow-sm, main > .prose .lesson-num { color: #8a5a12; }
.light .frow + .frow { border-top-color: rgba(15, 42, 58, 0.12); }
.light .btn-ghost { border-color: var(--pf-djup); color: var(--pf-djup); }
.light .btn-ghost:hover { background: rgba(15, 42, 58, 0.06); }
.light .product-card:hover, .light .tile:hover { border-color: var(--pf-fjord); }

/* The cut edge between dark and light: the logo's mountains, full width. */
.fjord-edge { display: block; width: 100vw; max-width: none; margin: -1px 0 -1px calc(50% - 50vw); height: clamp(36px, 5.5vw, 80px); }
.fjord-edge-up { background: var(--pf-frost); }

.home > section { margin: 0; }
.home > section:not(.hero):not(.mcp-band):not(.cta-band) { padding: clamp(48px, 7vw, 88px) 0; }
.home > .mcp-band { margin: clamp(48px, 7vw, 88px) 0 24px; }
.home > .cta-band { margin: clamp(48px, 7vw, 88px) 0 24px; }

/* Hero: the headline, then the film */
.hero.hero-film { display: block; padding: clamp(20px, 3vw, 36px) 0 clamp(40px, 6vw, 64px); margin: 0; }
.hero-head { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px 56px; align-items: end; margin: clamp(32px, 5vw, 56px) 0 0; }
.hero-film .film { width: min(1360px, calc(100vw - 32px)); margin-left: 50%; transform: translateX(-50%); }
.hero-film h1 { font-size: clamp(46px, 8vw, 108px); font-variation-settings: "wdth" 76; margin: 0; }
.hero-side .lead { max-width: none; margin: 0; }
.hero-side .actions { margin: 22px 0 10px; }
.film { position: relative; margin: 0; border-radius: 22px; overflow: hidden; background: var(--pf-djup); box-shadow: 0 40px 90px -36px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(143, 200, 220, 0.14); }
.film-frame { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(180deg, #0b1e2a, #16475d); }
.film-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--grain); opacity: 0.22; mix-blend-mode: overlay; }
.film-stage { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 400ms; }
.film.is-narrow .film-frame { aspect-ratio: 1600 / 790; }
.film.is-narrow .film-play { right: 10px; bottom: 10px; width: 36px; height: 36px; }
.film-caption { display: none; padding: 14px 16px 16px; background: var(--pf-natt); min-height: 104px; }
.film.is-narrow .film-caption { display: block; }
.film-caption span { display: block; font: 500 11px/1.3 var(--pf-font-mono); letter-spacing: 0.14em; color: var(--ice); }
.film-caption b { display: block; margin-top: 6px; font: 750 24px/1.08 var(--pf-font-display); letter-spacing: -0.02em; color: var(--text); text-wrap: balance; }
.film.is-ready .film-stage { opacity: 1; }
.film-play { position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(238, 242, 241, 0.25); background: rgba(10, 28, 40, 0.55); color: var(--pf-frost); display: grid; place-items: center; cursor: pointer; opacity: 0.7; transition: opacity 160ms, background 160ms; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.film:hover .film-play, .film-play:focus-visible, .film-play:not(.is-playing) { opacity: 1; }
.film-play:hover { background: var(--sun); color: var(--navy-deep); }
.film-play svg { width: 16px; height: 16px; fill: currentColor; }
.film-play .i-pause, .film-play.is-playing .i-play { display: none; }
.film-play.is-playing .i-pause { display: inline; }
.film-play:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
.home .channels-row { margin: 26px 0 0; font-family: var(--pf-font-mono); font-size: 12.5px; letter-spacing: 0.04em; }
.home .channels-row .mcp { color: var(--dim); }
.home .channels-row .mcp i { background: var(--pf-ljung); }

/* How it works: Bo does each step */
.bo-steps { margin-top: 40px; gap: 36px; }
.bo-steps li { border-top: 2px solid var(--pf-djup); padding-top: 22px; }
.bo-steps .step-bo { display: block; width: 76px; height: 76px; margin-bottom: 14px; }
.bo-steps b { position: static; display: block; width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; margin-bottom: 6px; font: 500 12px/1 var(--pf-font-mono); letter-spacing: 0.14em; color: var(--pf-fjord); }
.bo-steps b::before { content: "0"; }
.bo-steps h3 { font-size: 26px; }
.bo .bo-eyes { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .bo .bo-eyes { animation: bo-blink 4.6s infinite; }
  .bo-steps li:nth-child(2) .bo-eyes { animation-delay: -1.5s; }
  .bo-steps li:nth-child(3) .bo-eyes { animation-delay: -3s; }
}
@keyframes bo-blink { 0%, 95%, 100% { transform: scaleY(1); } 97.5% { transform: scaleY(0.1); } }

.faq-band .faq { margin: 0 auto; }
.faq-band .faq > h2 { text-align: center; margin-bottom: 20px; }

@media (max-width: 900px) {
  .hero-head { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .film { border-radius: 16px; }
  .bo-steps .step-bo { width: 64px; height: 64px; }
}

/* ---------- Fjord on the other pages ---------- */
/* A marketing page's text, pricing's comparison: a paper band between two cut edges. */
.paper-band { padding: clamp(40px, 6vw, 72px) 0; margin: 0; }
.paper-band > .prose { margin-bottom: 40px; }
.paper-band > section { margin-bottom: 48px; }
.paper-band > section:last-child, .paper-band > .prose:last-child { margin-bottom: 0; }
.page-hero { padding-bottom: clamp(32px, 5vw, 56px); margin-bottom: 0; }
.page-hero h1 { font-size: clamp(40px, 6.6vw, 84px); font-variation-settings: "wdth" 78; }
.page-hero + .fjord-edge, .plans + .fjord-edge, .billing + .fjord-edge, .tax-note + .fjord-edge { margin-top: clamp(24px, 4vw, 48px); }
main > .fjord-edge-up + .cta-band, main > .fjord-edge-up + section { margin-top: clamp(48px, 7vw, 88px); }
.light .table-wrap { background: #fff; }
.light thead th { background: rgba(15, 42, 58, 0.04); }
.light tr.group th { background: rgba(15, 42, 58, 0.05); }
.light .compare h2, .paper-band .related h2 { font-size: clamp(26px, 3.4vw, 38px); }

/* The features index: groups alternate dark and paper. */
.fgroup.light { padding-bottom: 32px; }
.fgroup.light::before, .fgroup.light:nth-of-type(n)::before { border-top: 0; background: var(--pf-frost); }
.fgroup:not(.light) + .fjord-edge { margin-top: 24px; }

/* A reading page (help, blog post, changelog, legal, Academy): the text on a paper sheet. */
main > .prose { position: relative; max-width: 820px; margin: clamp(24px, 4vw, 48px) auto 72px; padding: clamp(28px, 5vw, 60px) clamp(20px, 5vw, 64px);
  background: var(--pf-frost); border-radius: 6px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 30px 70px -30px rgba(0, 0, 0, 0.75); }
main > .prose::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: var(--grain); opacity: 0.06; }
main > .prose > :first-child { margin-top: 0; }
main > .prose h1 { font-size: clamp(32px, 4.6vw, 52px); margin-bottom: 10px; }
main > .prose h2 { font-size: clamp(22px, 2.6vw, 28px); }
main > .prose code { background: rgba(15, 42, 58, 0.07); }
main > .prose .card, main > .prose .table-wrap { background: #fff; }
main > .prose .crumbs, main > .prose .crumbs a { color: var(--muted); }
.post-head + .post-cover + .prose, .post-head + .prose { margin-top: 0; }

/* ---------- Pricing with life: a fjord per plan, Solo in sun, prices that roll ---------- */
.plans { align-items: stretch; }
.plan { overflow: visible; padding-top: 18px; }
.plan-art { display: block; margin: 0 -8px 6px; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset; }
.plan-scene { display: block; width: 100%; height: auto; aspect-ratio: 300 / 130; }
.plan-scene .boat { transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .plan-scene .boat { animation: boat-bob 3.4s ease-in-out infinite; }
}
@keyframes boat-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-2px) rotate(2deg); } }
.plan .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.plan .price small { flex-basis: 100%; }
/* the meter: one amount high, the strip moves one line up for yearly */
.roll { display: inline-block; height: 1.1em; line-height: 1.1em; overflow: hidden; vertical-align: bottom; }
.roll-strip { display: flex; flex-direction: column; }
.roll-strip > span { display: block; height: 1.1em; }
@media (prefers-reduced-motion: no-preference) {
  .roll-strip { transition: transform 700ms cubic-bezier(0.3, 1.35, 0.4, 1); }
  .plan:nth-child(2) .roll-strip { transition-delay: 60ms; } .plan:nth-child(3) .roll-strip { transition-delay: 120ms; } .plan:nth-child(4) .roll-strip { transition-delay: 180ms; }
  .bill-y:checked ~ .plans .plan-save { animation: save-pop 500ms 350ms cubic-bezier(0.3, 1.6, 0.5, 1) both; }
}
.bill-y:checked ~ .plans .roll-strip { transform: translateY(-1.1em); }
@keyframes save-pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.plan .plan-save { margin-top: 0; padding: 3px 9px; border-radius: 999px; background: rgba(244, 184, 96, 0.16); }
/* B: Solo is the sun, like the call to action */
.plan.featured { background: var(--sun); color: var(--navy-deep); border-color: var(--sun); box-shadow: 0 30px 70px -24px rgba(244, 184, 96, 0.45), 0 30px 70px -30px rgba(0, 0, 0, 0.8); }
.plan.featured h3, .plan.featured .price { color: var(--navy-deep); }
.plan.featured .price small, .plan.featured ul { color: rgba(10, 28, 40, 0.75); }
.plan.featured .plan-save { color: var(--navy-deep); background: rgba(10, 28, 40, 0.1); }
.plan.featured .tag { background: var(--navy-deep); color: var(--sun); }
.plan.featured .cta.btn-primary { background: var(--navy-deep); color: var(--pf-frost); }

/* ---------- Films on the product cards and the part pages ---------- */
.product-art .film-card { display: block; margin: 0; border-radius: 0; box-shadow: none; background: var(--pf-natt); }
.film-card .film-frame { display: block; aspect-ratio: 1200 / 560; }
.film-card .film-frame::after { opacity: 0.16; }
.product-card:hover .film-card, .product-card:focus-visible .film-card { outline: none; }
.product-art { position: relative; }
.product-art::after { content: ""; position: absolute; right: 12px; bottom: 12px; width: 30px; height: 30px; border-radius: 50%; pointer-events: none;
  background: rgba(10, 28, 40, 0.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 5 L15 10 L7 15Z' fill='%23eef2f1'/%3E%3C/svg%3E") center / 14px no-repeat; transition: opacity 200ms; }
.product-card:hover .product-art::after, .product-card:focus-visible .product-art::after { opacity: 0; }
.part-hero { padding-top: clamp(20px, 3vw, 36px); }
.part-hero .hero-head h1 { font-size: clamp(46px, 8vw, 108px); }
@media (prefers-reduced-motion: reduce) { .product-art::after { display: none; } }

/* ---------- Feature loops (clip mode) ---------- */
.film-clip { margin: 0; border-radius: 18px; }
.film-clip .film-frame { aspect-ratio: 1600 / 740; }
.frow-visual .film-clip { box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(143, 200, 220, 0.14); }
.clip-hero .film-clip { align-self: center; }

/* ---------- Product updates (/updates, docs/updates) ---------- */
.updates { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 72px); }
.update { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin: 0; }
.update:nth-child(even) .update-art { order: 2; }
.update-art .film-clip { box-shadow: 0 30px 60px -34px rgba(10, 28, 40, 0.6), 0 0 0 1px rgba(15, 42, 58, 0.08); }
.update-bo { display: grid; place-items: center; aspect-ratio: 1600 / 740; border-radius: 18px; background: radial-gradient(90% 120% at 50% 100%, #1f6f8b 0%, var(--pf-natt) 70%); }
.update-bo .bo { width: clamp(96px, 16vw, 150px); height: auto; }
/* the 404 page (scripts/build-site.mjs): Bo waits beside the heading, the way back on paper below */
.not-found-art { display: grid; place-items: center; min-height: 200px; }
.not-found-bo { width: clamp(120px, 20vw, 220px); height: auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35)); }
.not-found-links, .not-found-langs { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 14px; padding: 0; margin: 0 0 28px; }
.light .not-found-links a { display: inline-block; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text); font-weight: 600; text-decoration: none; }
.light .not-found-links a:hover { border-color: var(--pf-fjord); }
.not-found-langs { flex-direction: column; gap: 6px; margin-bottom: 0; color: var(--muted); }
.light .not-found-langs a { color: var(--muted); text-decoration: none; }
.light .not-found-langs a:hover { color: var(--pf-fjord); }
.not-found-langs b { color: var(--text); font-weight: 600; }
.update-date { margin: 0 0 8px; font-family: var(--pf-font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.update h2 { margin: 0 0 12px; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.05; }
.update-text ul { padding-left: 1.1em; }
@media (max-width: 820px) {
  .update { grid-template-columns: 1fr; }
  .update:nth-child(even) .update-art { order: 0; }
}

/* ---------- Academy (scripts/build-site.mjs academy section, docs/site/academy.js) ---------- */
/* Colours for text on paper that pass WCAG AA: the palette's sun, moss and lingon are too light as text there. */
.academy-hero, .course-hero, .lesson, .academy-courses, .course-body { --ac-sun-ink: #8a5a12; --ac-ok-ink: #2b6b3a; --ac-bad-ink: #a63229; }
.academy-hero h1 span { color: var(--sun); }
.academy-hero, .course-hero { padding-bottom: 24px; }
.academy-art { display: grid; place-items: center; position: relative; min-height: 240px; }
.academy-art::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(244, 184, 96, 0.35), rgba(244, 184, 96, 0)); }
.academy-bo { position: relative; width: clamp(140px, 22vw, 240px); height: auto; }
.course-facts { color: var(--muted); font-size: 13px; margin: 6px 0 0; font-family: var(--pf-font-mono); letter-spacing: 0.04em; }
.course-hero .crumbs { margin-bottom: 18px; }
.course-art { position: relative; }
.course-art .cover-art { width: 100%; height: auto; aspect-ratio: 1200 / 320; border-radius: var(--radius); display: block; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8); }
.course-bo { position: absolute; right: -14px; top: -34px; width: 84px; height: 84px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35)); }

/* progress bar, on dark and on paper */
.academy-progress { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; font: 500 13px/1.3 var(--pf-font-mono); color: var(--muted); }
.academy-progress[hidden] { display: none; }
.academy-progress .bar { flex: 0 1 200px; height: 8px; border-radius: 4px; background: rgba(143, 200, 220, 0.2); overflow: hidden; }
.light .academy-progress .bar, main > .prose .academy-progress .bar { background: rgba(15, 42, 58, 0.12); }
.academy-progress .bar i { display: block; height: 100%; width: 0; background: var(--pf-mossa); border-radius: inherit; transition: width 300ms; }
.academy-progress.on-lesson { margin: 0 0 14px; }

/* the course cards on the Academy page */
.academy-courses { padding-top: clamp(40px, 6vw, 72px); }
.academy-courses > h2 { text-align: left; }
.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.course-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--line); color: var(--text); text-decoration: none; box-shadow: 0 1px 0 rgba(15, 42, 58, 0.04); transition: transform 200ms, box-shadow 200ms, border-color 160ms; }
.course-card:hover { transform: translateY(-3px); border-color: var(--pf-fjord); box-shadow: 0 26px 50px -26px rgba(15, 42, 58, 0.45); }
.course-cover .cover-art { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 320; }
.course-card-body { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 22px; flex: 1; }
.course-card .eyebrow-sm { color: var(--ac-sun-ink); margin: 0; }
.course-card h3 { font-size: 24px; font-weight: 800; font-variation-settings: "wdth" 80; }
.course-card p { color: var(--muted); font-size: 14.5px; margin: 0; }
.course-card .more-link { margin-top: auto; padding-top: 10px; color: var(--pf-fjord); }
.course-tick { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pf-mossa); box-shadow: 0 0 0 4px #fff; }
.course-tick[hidden] { display: none; }
.course-tick .tick { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.academy-how-title { margin-top: clamp(56px, 8vw, 96px); text-align: left; }

/* the lessons on a course page */
.course-body { padding-top: clamp(40px, 6vw, 72px); }
.course-intro { max-width: 720px; font-size: 17px; }
.course-intro .course-outcome { background: #fff; border-left-color: var(--pf-sol); }
.course-body > h2 { margin-top: 44px; }
.course-lessons { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; max-width: 880px; }
.course-lessons a { display: grid; grid-template-columns: 56px 1fr 40px; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line); color: var(--text); text-decoration: none; transition: border-color 160ms, transform 160ms; }
.course-lessons a:hover { border-color: var(--pf-fjord); transform: translateX(3px); }
.cl-num { font: 800 30px/1 var(--pf-font-display); font-variation-settings: "wdth" 78; color: var(--ac-sun-ink); }
.cl-text b { display: block; font-size: 17px; }
.cl-text em { display: block; font-style: normal; color: var(--muted); font-size: 14.5px; line-height: 1.45; margin-top: 2px; }
.cl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cl-tags span { font: 500 11.5px/1 var(--pf-font-mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; background: rgba(31, 111, 139, 0.1); color: var(--pf-djup); }
.lesson-tick { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line); justify-self: end; }
.lesson-tick .tick { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.is-done .lesson-tick { background: var(--pf-mossa); border-color: var(--pf-mossa); }
.is-done .lesson-tick .tick { opacity: 1; }
.lesson-list .lesson-tick { width: 26px; height: 26px; margin-left: auto; flex: none; align-self: center; }
.lesson-list .lesson-tick .tick { width: 15px; height: 15px; }

/* a lesson */
.lesson-film { margin: 8px 0 32px; }
.lesson-film .film-caption { --text: var(--pf-frost); --ice: var(--pf-is); }
/* A film with a portrait staging (a-kit.js two) shows it at 4:5 on phones. */
.film.is-portrait .film-frame { aspect-ratio: 4 / 5; }
/* On a phone a lesson film uses the sheet's side padding too, so its words stay 12 px or larger. */
@media (max-width: 720px) { main > .prose .lesson-film { margin-left: calc(-1 * clamp(20px, 5vw, 64px)); margin-right: calc(-1 * clamp(20px, 5vw, 64px)); border-radius: 10px; } }
.lesson .quiz, .lesson .practice { margin: 44px 0 8px; }
.quiz { padding: clamp(20px, 4vw, 32px); border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.quiz h2 { margin-top: 0 !important; }
.quiz .eyebrow-sm { color: var(--ac-sun-ink); }
.quiz .quiz-q { padding: 18px 0 4px; border-top: 1px solid var(--line); margin-top: 18px; }
.quiz .quiz-ask { display: flex; gap: 12px; font-weight: 600; font-size: 16.5px; margin: 0 0 12px; }
.quiz .quiz-n { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(244, 184, 96, 0.22); color: var(--ac-sun-ink); font: 700 14px/1 var(--pf-font-mono); }
.prose .quiz-options { list-style: none; padding: 0; margin: 0 0 8px 40px; display: grid; gap: 8px; }
.prose .quiz-options li { margin: 0; }
.quiz-opt { width: 100%; text-align: left; font: 500 15.5px/1.4 var(--pf-font-body); color: var(--text); padding: 12px 16px; border-radius: 12px; border: 1.5px solid rgba(15, 42, 58, 0.22); background: var(--pf-frost); cursor: pointer; transition: border-color 120ms, background 120ms; }
.quiz-opt:hover:not([aria-disabled]):not(:disabled) { border-color: var(--pf-fjord); background: #fff; }
.quiz-opt:disabled { cursor: default; opacity: 0.85; }
.quiz-opt[aria-disabled] { cursor: default; }
.quiz-opt.is-right { border-color: var(--pf-mossa); background: #e6f2e8; color: var(--ac-ok-ink); font-weight: 700; }
.quiz-opt.is-right::before { content: "\2713  "; }
.quiz-opt.is-wrong { border-color: var(--pf-lingon); background: #fbe7e5; color: var(--ac-bad-ink); }
.quiz-opt.is-wrong::before { content: "\2715  "; }
.quiz .quiz-why { margin: 4px 0 8px 40px; font-size: 15px; color: var(--muted); }
.quiz .quiz-why:empty { display: none; }
.quiz .quiz-why.ok { color: var(--ac-ok-ink); }
.quiz .quiz-reveal { margin: 0 0 8px 40px; font-size: 15px; }
.quiz .quiz-reveal summary { cursor: pointer; color: var(--pf-fjord); font-weight: 600; }
.quiz .quiz-score { margin: 16px 0 0; font-weight: 700; }
.quiz .quiz-score:empty { display: none; }
.lesson-done { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 40px 0 20px; padding: 18px 0 0; border-top: 1px solid var(--line); }
.lesson-done[hidden] { display: none; }
.lesson-done-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 14px; border-radius: 999px; border: 2px solid var(--pf-mossa); background: #fff; color: var(--ac-ok-ink); font: 700 15px/1 var(--pf-font-body); cursor: pointer; transition: background 160ms, color 160ms; }
.lesson-done-btn .tick { width: 22px; height: 22px; padding: 3px; border-radius: 50%; border: 2px solid var(--pf-mossa); fill: none; stroke: transparent; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; }
.lesson-done-btn.is-on { background: var(--ac-ok-ink); border-color: var(--ac-ok-ink); color: #fff; }
.lesson-done-btn.is-on .tick { stroke: #fff; border-color: #fff; }
.lesson-done .lesson-done-note { margin: 0; color: var(--muted); font-size: 14.5px; }

/* the practice runs */
.practice { padding: clamp(18px, 3.5vw, 30px); border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 50px -34px rgba(15, 42, 58, 0.5); }
.practice-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.practice-bo { flex: none; width: 64px; height: 64px; }
.practice-head h2 { margin: 0 0 6px !important; }
.practice-head p { color: var(--muted); font-size: 15px; margin: 0; }
.practice .eyebrow-sm { color: var(--ac-sun-ink); margin-bottom: 4px; }
.practice-nojs { color: var(--muted); font-size: 14.5px; }
.practice :focus-visible, .quiz :focus-visible, .lesson-done-btn:focus-visible, .course-card:focus-visible, .course-lessons a:focus-visible, .lesson-list a:focus-visible { outline: 3px solid var(--pf-fjord); outline-offset: 2px; }
.practice .pr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 20px 24px; align-items: start; }
.practice .pr-rail { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.prose .pr-rail li { margin: 0; }
.practice .pr-rail button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 0; background: transparent; font: 600 14px/1.2 var(--pf-font-body); color: var(--muted); cursor: pointer; }
.practice .pr-rail button:disabled { cursor: default; }
.practice .btn[aria-disabled="true"] { cursor: default; opacity: 0.7; }
.practice .pr-rail .is-current button { background: #fde4e1; color: var(--ac-bad-ink); cursor: default; }
.practice .pr-rail .is-done button { color: var(--text); }
.practice .pr-dot { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #e3eaed; color: var(--muted); font-size: 13px; font-weight: 700; }
.is-current .pr-dot, .is-done .pr-dot { background: var(--ac-bad-ink); color: #fff; }
.is-current .pr-dot { background: var(--ac-bad-ink); }
.practice .pr-panel { min-width: 0; }
.practice .pr-kicker { font: 500 12px/1 var(--pf-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 6px 0 6px; }
.prose .pr-title { font-size: 26px; font-weight: 800; color: var(--text); margin: 0 0 16px; font-variation-settings: "wdth" 80; }
.practice .pr-title:focus { outline: none; }
.practice .pr-lead { color: var(--muted); font-size: 15px; }
.practice .pr-body { display: grid; gap: 14px; }
.practice .pr-field { display: grid; gap: 6px; }
.practice .pr-field label, .practice .pr-own label { font-weight: 700; font-size: 14.5px; }
.practice .pr-field input, .practice .pr-field textarea, .practice .pr-field select, .practice .pr-own input, .practice .bb-field textarea, .practice .bb-field input { width: 100%; font: 400 15.5px/1.4 var(--pf-font-body); color: var(--text); padding: 10px 12px; border-radius: 10px; border: 1.5px solid rgba(15, 42, 58, 0.25); background: #fff; }
.practice .pr-field textarea, .practice .bb-field textarea { resize: vertical; min-height: 64px; }
.practice .pr-hint { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.practice .pr-radios { display: grid; gap: 8px; }
.practice .pr-radio { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 15.5px; }
.practice .pr-radio:has(input:checked) { border-color: var(--pf-fjord); background: #eef6f9; }
.practice .pr-radio input { width: 18px; height: 18px; accent-color: var(--pf-fjord); }
.practice .pr-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.practice .pr-posts[hidden] { display: none; }
.practice .pr-post { display: grid; gap: 6px; padding: 8px; border-radius: 12px; border: 2px solid var(--line); background: #fff; font: 600 13.5px/1.25 var(--pf-font-body); color: var(--text); cursor: pointer; text-align: left; }
.practice .pr-post[aria-pressed="true"] { border-color: var(--pf-fjord); background: #eef6f9; }
.practice .pr-post[aria-pressed="true"]::after { content: "Picked"; font: 500 11px/1 var(--pf-font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--pf-fjord); }
.practice .pr-thumb { display: block; aspect-ratio: 1; border-radius: 8px; background: linear-gradient(180deg, #f7cf86, #ec8a5e 60%, #8e6fc9 60%); }
.practice .pr-post-schedule .pr-thumb { background: repeating-linear-gradient(180deg, #fff 0 16%, #d5e7ef 16% 22%), #fff; border: 1px solid var(--line); }
.practice .pr-post-tour .pr-thumb { background: linear-gradient(180deg, #8fc8dc 0 55%, #1f6f8b 55% 70%, #0f2a3a 70%); }
.practice .pr-chipbox { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; border-radius: 10px; border: 1.5px solid rgba(15, 42, 58, 0.25); background: #fff; }
.practice .pr-chipbox:focus-within { border-color: var(--pf-fjord); }
.practice .pr-chipbox input { flex: 1; min-width: 140px; border: 0 !important; padding: 6px !important; }
.practice .pr-chipbox input:focus { outline: none; }
.practice .pr-chips { display: contents; }
.practice .pr-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 12px; border-radius: 999px; background: #fde4e1; color: var(--ac-bad-ink); font-weight: 700; font-size: 14px; }
.practice .pr-chip button { border: 0; background: transparent; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 50%; }
.practice .pr-toggle { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; }
.practice .pr-toggle label { font-size: 15px; font-weight: 600; cursor: pointer; }
.practice .pr-toggle .pr-hint { grid-column: 2; }
.practice .pr-toggle [role="switch"] { position: relative; width: 46px; height: 26px; border-radius: 13px; border: 0; background: #6f8390; cursor: pointer; padding: 0; transition: background 160ms; }
.practice .pr-toggle [aria-checked="true"] { background: var(--pf-fjord); }
.practice .pr-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left 160ms; }
[aria-checked="true"] .pr-knob { left: 23px; }
.practice .pr-replies { display: grid; gap: 10px; padding-left: 58px; }
.practice .pr-replies[hidden], .practice .pr-field[hidden] { display: none; }
.practice .pr-addons { font: 500 12px/1 var(--pf-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 10px 0 0; }
.prose .pr-feedback { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.prose .pr-feedback li { margin: 0; }
.practice .pr-note { padding: 10px 14px; border-radius: 12px; font-size: 14.5px; line-height: 1.45; background: #eef6f9; border-left: 4px solid var(--pf-fjord); }
.practice .pr-note b { font-family: var(--pf-font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.practice .pr-note.good { background: #e8f3ea; border-left-color: var(--pf-mossa); }
.practice .pr-note.good b { color: var(--ac-ok-ink); }
.practice .pr-note.warn { background: #fdf0dc; border-left-color: var(--pf-sol); }
.practice .pr-note.warn b { color: var(--ac-sun-ink); }
.practice .pr-note.tip { background: #f1ecfa; border-left-color: var(--pf-ljung); }
.practice .pr-note.tip b { color: #5d3fa0; }
.practice .pr-note.info b { color: var(--pf-fjord); }
.practice .pr-error { margin: 10px 0 0; color: var(--ac-bad-ink); font-weight: 700; font-size: 14.5px; }
.practice .pr-error:empty { display: none; }
.practice .pr-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.practice .pr-nav.pr-end { padding-top: 16px; border-top: 1px solid var(--line); }
.practice .pr-side { display: grid; gap: 8px; position: sticky; top: 84px; }
.practice .pr-side-title { font: 500 12px/1 var(--pf-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-align: center; margin: 0; }
.practice .pr-phone { border-radius: 28px; padding: 8px; background: var(--pf-djup); box-shadow: 0 20px 40px -24px rgba(10, 28, 40, 0.8); }
.practice .pr-phone-head { overflow-wrap: anywhere; display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 20px 20px 0 0; background: #fff; font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--line); }
.practice .pr-phone-head i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--pf-sol); }
.practice .pr-screen { display: flex; flex-direction: column; gap: 6px; padding: 10px; min-height: 200px; max-height: 420px; overflow-y: auto; background: #f8faf9; border-radius: 0 0 20px 20px; }
.practice .pr-bubble { max-width: 88%; padding: 8px 11px; border-radius: 14px; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.practice .pr-bubble.in { align-self: flex-start; background: #e3eaed; color: var(--pf-djup); }
.practice .pr-bubble.out { align-self: flex-end; background: var(--pf-fjord); color: #fff; }
.practice .pr-btn { display: block; margin-top: 6px; padding: 6px; border-radius: 8px; background: #fff; color: var(--pf-fjord); font-weight: 700; text-align: center; }
.practice .pr-pnote { margin: 2px 0; text-align: center; font: 500 11px/1.3 var(--pf-font-mono); color: var(--muted); }
.practice .pr-postcard { aspect-ratio: 16 / 10; border-radius: 10px; background: linear-gradient(180deg, #f7cf86, #ec8a5e 62%, #8e6fc9 62%); }
.practice .pr-caption { margin: 2px 0 6px; font-size: 13px; font-weight: 600; }
.practice .pr-comments { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
.practice .pr-comment { overflow-wrap: anywhere; min-width: 0; padding: 7px 10px; border-radius: 12px; background: #e3eaed; font-size: 13px; line-height: 1.35; }
.practice .pr-comment p { margin: 0; font-size: 13px; }
.practice .pr-comment.is-skipped { background: #fff; border: 1.5px dashed rgba(15, 42, 58, 0.35); }
.practice .pr-comment.is-skipped::after { content: "Left alone"; display: block; margin-top: 2px; font: 500 10.5px/1.3 var(--pf-font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.practice .pr-onpost { font: 500 10.5px/1.3 var(--pf-font-mono) !important; color: var(--muted); text-transform: uppercase; }
.practice .pr-reply { margin: 6px 0 0 14px; padding: 6px 9px; border-radius: 10px; background: var(--pf-fjord); color: #fff; }
.prose .pr-log { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.prose .pr-log li { margin: 0; padding: 9px 12px; border-radius: 10px; font-size: 14.5px; background: #eef6f9; overflow-wrap: anywhere; min-width: 0; }
.prose .pr-log li.ok { background: #e8f3ea; }
.prose .pr-log li span { color: var(--muted); }
.prose .pr-log li.ok span { color: var(--ac-ok-ink); font-weight: 600; }
.practice .pr-summary { margin: 14px 0 0; font-weight: 600; }
.practice .pr-summary:empty { display: none; }
.practice .pr-own { display: grid; gap: 6px; margin-top: 16px; }
.practice .pr-own-row { display: flex; gap: 8px; }
.practice .pr-own-row input { flex: 1; min-width: 0; }

/* the brief builder */
.practice .bb-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.practice .bb-fields { display: grid; gap: 14px; }
.practice .bb-field { display: grid; gap: 6px; }
.practice .bb-field label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; }
.practice .bb-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(244, 184, 96, 0.25); color: var(--ac-sun-ink); font: 700 12px/1 var(--pf-font-mono); }
.practice .bb-tip { margin: 0; color: var(--muted); font-size: 13.5px; }
.practice .bb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
.practice .bb-chip { padding: 6px 12px; border-radius: 999px; border: 1.5px solid rgba(15, 42, 58, 0.22); background: var(--pf-frost); font: 600 13.5px/1 var(--pf-font-body); color: var(--text); cursor: pointer; }
.practice .bb-chip:hover { border-color: var(--pf-fjord); }
.practice .bb-chip[hidden] { display: none; }
.practice .bb-out { position: sticky; top: 84px; padding: 20px; border-radius: 16px; background: var(--pf-frost); border: 1px solid var(--line); }
.practice .bb-preview { font-size: 15.5px; line-height: 1.55; white-space: pre-wrap; }
.practice .bb-preview.is-example { color: var(--muted); font-style: italic; }
.practice .bb-score { font-weight: 700; font-size: 14.5px; color: var(--ac-ok-ink); }
.practice .bb-score:empty { display: none; }
.practice .bb-out .actions { margin: 12px 0 8px; }
.practice .bb-out .btn { white-space: normal; text-align: center; }

@media (max-width: 960px) {
  .course-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .course-grid { grid-template-columns: 1fr; }
  .academy-art { min-height: 0; }
  .academy-bo { width: 120px; }
  .course-bo { width: 64px; height: 64px; top: -24px; right: -4px; }
  .course-lessons a { grid-template-columns: 40px 1fr 32px; gap: 12px; padding: 16px; }
  .cl-num { font-size: 24px; }
  .practice .pr-grid, .practice .bb-grid { grid-template-columns: 1fr; }
  .practice .pr-side, .practice .bb-out { position: static; }
  .practice .pr-grid.is-trying .pr-side { order: 1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; grid-template-rows: auto auto; grid-auto-flow: column; align-items: start; }
  .practice .pr-grid.is-trying .pr-panel { order: 2; }
  .practice .pr-grid.is-trying .pr-screen { max-height: 300px; min-height: 160px; }
  .practice .pr-replies { padding-left: 0; }
  .prose .quiz-options, .quiz .quiz-why, .quiz .quiz-reveal { margin-left: 0; }
  .practice-head { flex-direction: column; gap: 10px; }
  .practice-bo { width: 52px; height: 52px; }
  .practice .pr-own-row { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .course-card, .course-lessons a, .academy-progress .bar i, .practice .pr-knob, .practice .pr-toggle [role="switch"], .lesson-done-btn { transition: none; }
  .course-card:hover, .course-lessons a:hover { transform: none; }
}

/* ---------- Academy accounts: sign-in, My Academy, diplomas, the certificate (docs/site/academy-account.js) ---------- */
.ac-page, .academy-continue, .ac-signin, .lesson-account, .cert-card, .exam-page { --ac-sun-ink: #8a5a12; --ac-ok-ink: #2b6b3a; --ac-bad-ink: #a63229; }
.ac-page { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(48px, 7vw, 88px); min-height: 50vh; }
.ac-narrow { max-width: 760px; }
.ac-narrow h1 { font-size: clamp(34px, 5vw, 52px); margin: 0 0 12px; }
.lead-sm { font-size: 17px; color: var(--muted); margin: 0 0 20px; }
.ac-status { margin: 10px 0 0; font-size: 15px; color: var(--text); }
.ac-status:empty { display: none; }

/* the sign-in form */
.ac-signin { margin: 28px 0 8px; padding: clamp(20px, 4vw, 28px); border-radius: 18px; background: #fff; border: 1px solid var(--line); color: var(--pf-djup); }
.ac-signin h2 { margin: 0 0 6px !important; font-size: 22px; }
.ac-signin > p { margin: 0 0 14px; color: var(--pf-granit); }
.ac-form { display: grid; gap: 8px; margin: 0; }
.ac-form label { font-weight: 700; font-size: 15px; }
.ac-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ac-input { flex: 1 1 240px; min-width: 0; font: 500 16px/1.3 var(--pf-font-body); color: var(--pf-djup); padding: 12px 14px; border-radius: 12px; border: 1.5px solid rgba(15, 42, 58, 0.35); background: #fff; }
.ac-input:focus-visible { outline: 3px solid var(--pf-fjord); outline-offset: 2px; border-color: var(--pf-fjord); }
.ac-hint { margin: 2px 0 0; font-size: 13.5px; color: var(--pf-granit); }
.ac-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ac-sent { margin: 0 0 4px; font-size: 15px; overflow-wrap: anywhere; }
.ac-code { flex: 0 1 12ch; font: 700 22px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.3em; text-align: center; }
.ac-code-actions { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ac-code-actions .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ac-gate { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 0; font-weight: 600; color: var(--pf-djup); }
.lesson-account { margin: 0 0 20px; }
.ac-me-line { margin: 0; font-size: 14.5px; color: var(--pf-granit); }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--pf-fjord); text-decoration: underline; cursor: pointer; }
.btn[aria-busy="true"] { cursor: progress; opacity: 0.8; }
.btn:disabled { cursor: default; }
.quiz-retry { margin-top: 12px; }
.quiz-retry[hidden] { display: none; }

/* continue where you left off, and the invite */
.academy-continue { margin: 0 0 36px; }
.academy-continue[hidden], .ac-invite[hidden] { display: none; }
.ac-card { position: relative; padding: clamp(20px, 4vw, 30px); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--pf-sol); color: var(--pf-djup); }
.ac-card .eyebrow-sm { color: var(--ac-sun-ink); }
.ac-card .ac-title { margin: 0 0 6px; font-size: clamp(24px, 3vw, 30px); text-align: left; }
.ac-meta { margin: 6px 0 0; color: var(--pf-granit); font-size: 14.5px; }
.ac-card .academy-progress, .ac-course .academy-progress, .ac-cert .academy-progress, .exam-status .academy-progress { color: var(--pf-granit); }
.ac-card .academy-progress .bar, .ac-course .academy-progress .bar, .ac-cert .academy-progress .bar, .exam-status .academy-progress .bar, .cert-card .academy-progress .bar { background: rgba(15, 42, 58, 0.12); }
.ac-card .actions { margin: 16px 0 0; }

/* My Academy */
.ac-me .ac-continue { margin: 8px 0 28px; }
.ac-cert, .ac-course, .ac-account { margin: 0 0 18px; padding: clamp(18px, 3vw, 26px); border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.ac-cert { border-left: 6px solid var(--pf-ljung); }
.ac-cert h2, .ac-account h2 { margin: 0 0 4px !important; font-size: 24px; }
.ac-courses-title { margin: 36px 0 14px !important; }
.ac-course h3 { margin: 0; font-size: 21px; }
.ac-course h3 a { color: var(--pf-djup); text-decoration: none; }
.ac-course h3 a:hover { text-decoration: underline; }
.ac-missing { margin-top: 12px; font-size: 15px; }
.ac-missing p { margin: 0 0 6px; font-weight: 600; }
.ac-missing ul { margin: 0; padding-left: 20px; }
.ac-why { color: var(--pf-granit); font-size: 14px; }
.ac-held { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: #e6f2e8; color: var(--ac-ok-ink); }
.ac-held-line { margin: 0; }
.ac-held .ac-id { font-family: var(--pf-font-mono); font-size: 13px; }
.ac-diploma-links { margin: 10px 0 0 !important; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ac-note { font-size: 14px; }
.ac-claim { margin-top: 14px; }
.ac-account p { margin: 6px 0 0; }
.ac-account .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ac-danger { border-color: var(--ac-bad-ink) !important; color: var(--ac-bad-ink) !important; }
.ac-danger-solid { background: var(--ac-bad-ink); color: #fff; border-color: var(--ac-bad-ink); }
.ac-confirm { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: #fbe7e5; color: var(--pf-djup); }
.ac-confirm[hidden] { display: none; }
.ac-page :focus-visible, .academy-continue :focus-visible, .ac-signin :focus-visible, .cert-card:focus-visible, .exam :focus-visible, .dc-actions :focus-visible { outline: 3px solid var(--pf-fjord); outline-offset: 2px; }

/* the certificate card on the Academy page */
.cert-card { display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: center; margin-top: 24px; padding: clamp(18px, 3vw, 26px); border-radius: var(--radius-lg); background: var(--pf-natt); color: var(--pf-frost); text-decoration: none; border: 1px solid rgba(143, 200, 220, 0.2); transition: transform 200ms, box-shadow 200ms; }
.cert-card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -26px rgba(15, 42, 58, 0.6); }
.cert-card .eyebrow-sm { color: var(--pf-sol) !important; }
.cert-card h3 { margin: 0 0 6px; font-size: clamp(24px, 3vw, 30px); font-weight: 800; font-variation-settings: "wdth" 80; color: #fff; }
.cert-card p { margin: 0; color: #c8d8e1; font-size: 15px; }
.cert-card .course-facts { color: var(--pf-is); display: block; margin-top: 10px; }
.cert-card .academy-progress { color: #c8d8e1; }
.cert-card .academy-progress .bar { background: rgba(143, 200, 220, 0.25); }
.cert-card .more-link { display: inline-block; margin-top: 12px; color: var(--pf-sol); font-weight: 700; }
.cert-bo { width: 100%; max-width: 160px; height: auto; }
.cert-body { display: block; }

/* the final exam */
.exam-wrap { margin-top: 44px; max-width: 880px; }
.exam { margin-top: 16px; }
.exam-q { border: 0; border-top: 1px solid var(--line); margin: 18px 0 0; padding: 18px 0 4px; min-width: 0; }
.exam-q legend { display: flex; gap: 12px; font-weight: 600; font-size: 16.5px; padding: 0; margin-bottom: 12px; }
.exam-opt { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 8px 40px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid rgba(15, 42, 58, 0.22); background: var(--pf-frost); cursor: pointer; font-size: 15.5px; }
.exam-opt input { margin-top: 3px; accent-color: var(--pf-fjord); }
.exam-q:disabled .exam-opt { cursor: default; opacity: 0.85; }
.exam-status { margin-top: 12px; padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.exam-status[hidden] { display: none; }
.ac-steps { margin: 10px 0 0; padding-left: 20px; }
.ac-steps li.is-done { color: var(--ac-ok-ink); font-weight: 600; }
.exam-result { margin-top: 18px; }
.ac-score { font-size: 20px; font-weight: 800; margin: 0 0 6px; color: var(--ac-bad-ink); }
.ac-score.ok { color: var(--ac-ok-ink); }

/* a diploma */
.diploma-page { display: grid; justify-items: center; gap: 18px; }
.dc-status { max-width: 720px; text-align: center; }
.diploma-card { width: min(100%, 760px); border-radius: 22px; overflow: hidden; background: var(--pf-frost); border: 1px solid var(--line); box-shadow: 0 30px 70px -34px rgba(15, 42, 58, 0.55); color: var(--pf-djup); }
.diploma-card[hidden] { display: none; }
.dc-top { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 26px clamp(20px, 5vw, 44px) 0; background: var(--pf-natt); color: var(--pf-frost); }
.dc-brand { display: grid; gap: 4px; padding-bottom: 18px; }
.dc-logo { font: 800 26px/1 var(--pf-font-display); font-variation-settings: "wdth" 78; letter-spacing: -0.01em; }
.dc-kind { font: 500 12px/1 var(--pf-font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--pf-sol); }
.dc-bo { width: 110px; height: auto; margin-bottom: -18px; position: relative; z-index: 1; }
.diploma-card .fjord-edge { display: block; width: 100%; margin: -1px 0 0; height: 48px; background: var(--pf-natt); }
.dc-body { padding: 18px clamp(20px, 5vw, 44px) 30px; text-align: center; }
.dc-name { font: 800 clamp(30px, 5vw, 46px)/1.1 var(--pf-font-display); font-variation-settings: "wdth" 80; margin: 8px 0 6px; }
.dc-did { margin: 0; color: var(--pf-granit); font-size: 16px; }
.dc-course { font: 800 clamp(22px, 3.4vw, 30px)/1.2 var(--pf-font-display); font-variation-settings: "wdth" 80; color: var(--pf-fjord); margin: 6px 0 8px; }
.dc-what { margin: 0 auto; max-width: 520px; color: var(--pf-granit); }
.dc-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font: 500 13px/1.3 var(--pf-font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--pf-granit); }
.dc-foot b { color: var(--pf-djup); }
.dc-verify { margin: 10px 0 0; font-size: 12.5px; color: var(--pf-granit); }
.dc-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0; }

@media (max-width: 720px) {
  .cert-card { grid-template-columns: 1fr; }
  .cert-bo { max-width: 110px; }
  .exam-opt { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cert-card { transition: none; }
  .cert-card:hover { transform: none; }
}
@media print {
  .site-header, .site-footer, footer, .consent, .dc-actions, .dc-status, .cta-band, .fjord-edge:not(.diploma-card .fjord-edge) { display: none !important; }
  body, main, .light::before { background: #fff !important; }
  .diploma-page { padding: 0 !important; }
  .diploma-card { box-shadow: none; border: 2px solid var(--pf-djup); break-inside: avoid; }
  .dc-top, .diploma-card .fjord-edge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* ---------- Blog and help center in Fjord (scripts/build-site.mjs blog and help sections, docs/site/reading.js) ---------- */
/* Breadcrumbs as a list: Help / postsocial / Composer */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--dim); }
.crumbs [aria-current] { color: var(--text); }

/* Covers: a papercut scene per post (scripts/illustration/blog.mjs), 1200 x 560 like the loops. */
.blog-art { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 560; }
.post-thumb .blog-art, .featured-art .blog-art { aspect-ratio: 1200 / 560; }
.post-thumb, .featured-art { overflow: hidden; }

/* The blog index: topic buttons, the latest post, then the rest on paper. */
.tag-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.tag-filter button { font: 500 12px/1 var(--pf-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; cursor: pointer; transition: background 120ms, border-color 120ms; }
.tag-filter button:hover { border-color: var(--ice); }
.tag-filter button[aria-pressed="true"] { background: var(--sun); border-color: var(--sun); color: var(--navy-deep); }
.tag-filter button:focus-visible, .post-card:focus-visible, .featured-post:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
.featured-post { overflow: hidden; }
.featured-body h2 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.05; }
.featured-body p { font-size: 15.5px; }
.featured-label { font-family: var(--pf-font-mono); font-weight: 500; letter-spacing: 0.14em; }
.blog-list { padding: clamp(40px, 6vw, 72px) 0; margin: 0; }
.blog-list-title { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 24px; }
.blog-list .post-grid { gap: 24px; }
.light .post-card { background: #fff; border-color: rgba(15, 42, 58, 0.1); box-shadow: 0 1px 0 rgba(15, 42, 58, 0.04); }
.light .post-card:hover { border-color: var(--pf-fjord); box-shadow: var(--lift); }
.light .post-meta .tag { color: #8a5a12; background: rgba(244, 184, 96, 0.24); }
.post-card .post-thumb { border-bottom: 0; }
.post-card:hover .blog-art { transform: scale(1.03); }
.post-thumb .blog-art { transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.tag-empty { margin: 24px 0 0; color: var(--muted); }

/* Moods (scripts/lib/moods.mjs): the tag on a post and a course's eyebrow take the colour of the
   cover's time of day. The inks hold 4.5:1 on night and on paper (tests/coverArt.test.mjs). */
:is(.post-card, .featured-post, .post-head)[class*="mood-"] .post-meta .tag { color: var(--mood-ink); background: var(--mood-wash); }
.light .post-card[class*="mood-"] .post-meta .tag { color: var(--mood-ink-light); background: var(--mood-wash-light); }
.light .course-card[class*="mood-"] .eyebrow-sm { color: var(--mood-ink-light); }

/* Paper grain on the blog and Academy covers (scripts/illustration/rules.md): the site's --grain,
   painted once and shared by every card, instead of a noise filter inside each picture. */
.post-thumb, .featured-art, .course-cover, .post-hero:not(.has-film) { position: relative; }
.course-cover { display: block; }
:is(.post-thumb, .featured-art, .course-cover, .post-hero:not(.has-film), .course-art)::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--grain); opacity: 0.32; mix-blend-mode: overlay; border-radius: inherit; }
.post-hero:not(.has-film)::after { border-radius: 22px; }
.course-art::after { border-radius: var(--radius); }
.course-art .course-bo { z-index: 1; }
/* The same grain on the other painted pictures: the help centre's part cards and heroes, the home
   page's feature tiles, the guide covers and the pricing cards. A tile's film brings its own. */
.help-part-art, .help-art, .guide-cover, .guide-thumb, .plan-art { position: relative; }
:is(.help-part-art, .help-art, .guide-thumb, .plan-art, .tile-visual)::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--grain); opacity: 0.32; mix-blend-mode: overlay; border-radius: inherit; }
.guide-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--grain); opacity: 0.32; mix-blend-mode: overlay; border-radius: var(--radius); }
.plan-art::after { opacity: 0.22; }
.tile-visual::after { transition: opacity 350ms; }
.tile.is-film .tile-visual::after { opacity: 0; }

/* Painted covers (docs/ART.md): a 16:9 WebP cropped to the frame it sits in, Bo in its sky. */
.cover-paint { position: relative; display: block; overflow: hidden; }
.cover-paint img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 560; object-fit: cover; }
.post-thumb .cover-paint img { transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.post-card:hover .cover-paint img { transform: scale(1.03); }
.post-hero .cover-paint { border-radius: 22px; box-shadow: 0 40px 90px -36px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(143, 200, 220, 0.14); }
.post-hero .cover-paint img { aspect-ratio: 16 / 9; }
.course-cover .cover-paint img, .course-art .cover-paint img { aspect-ratio: 1200 / 320; }
.course-art .cover-paint { border-radius: var(--radius); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8); }
.cover-bo { position: absolute; top: 9%; right: 8%; width: 11%; height: auto; }
.blog-list + .fjord-edge-up + .cta-band { margin-top: clamp(48px, 7vw, 88px); }

/* A post: the reading bar, a stronger head, the hero, then the paper sheet over its lower edge. */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; display: none; }
.read-progress i { display: block; height: 100%; background: var(--sun); transform: scaleX(0); transform-origin: 0 50%; }
@supports (animation-timeline: scroll()) {
  .read-progress { display: block; }
  .read-progress i { animation: read-grow linear both; animation-timeline: scroll(root); }
}
.read-progress-js .read-progress { display: block; }
@keyframes read-grow { to { transform: scaleX(1); } }
.post-head { max-width: 860px; padding-top: clamp(32px, 5vw, 64px); }
.post-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; }
.post-kicker > a { font: 500 12px/1 var(--pf-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.post-kicker > a:hover { color: var(--text); }
.post-kicker .post-meta, .byline .post-meta { margin-bottom: 0; }
.post-kicker .sep { color: var(--dim); font: 500 12px/1 var(--pf-font-mono); }
.post-kicker { flex-wrap: wrap; }
.post-kicker .post-topic { font: 500 12px/1 var(--pf-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mood-ink, var(--muted)); }
.post-head h1 { font-size: clamp(38px, 6vw, 72px); font-variation-settings: "wdth" 78; line-height: 0.98; text-wrap: balance; margin-bottom: 20px; }
.post-head .lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 720px; }
.byline { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.byline .avatar { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--sun); color: var(--navy-deep); font: 800 17px/1 var(--pf-font-display); letter-spacing: -0.02em; }
.byline b { display: block; font-size: 15px; margin-bottom: 4px; }
.byline .post-meta { gap: 4px 12px; }
.post-hero { max-width: 1120px; margin: clamp(28px, 4vw, 48px) auto 0; }
.post-hero.has-film { max-width: 900px; margin-bottom: clamp(28px, 4vw, 48px); }
.post-hero .blog-art { border-radius: 22px; box-shadow: 0 40px 90px -36px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(143, 200, 220, 0.14); }
@media (min-width: 900px) {
  main > .post-hero:not(.has-film) + .prose { margin-top: -64px; z-index: 1; }
}
main > .prose.post { max-width: 780px; }
.prose.post p, .prose.post li { font-size: 17.5px; line-height: 1.7; }
.prose.post > p:first-child { font-size: clamp(18px, 2vw, 20px); line-height: 1.55; }
.prose.post h2 { margin-top: 48px; }
.prose.post h2::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--sun); margin-bottom: 16px; }
.prose.post ul { list-style: none; padding-left: 0; }
.prose.post ul li { position: relative; padding-left: 26px; margin-bottom: 8px; }
.prose.post ul li::before { content: ""; position: absolute; left: 4px; top: 0.72em; width: 8px; height: 8px; border-radius: 2px; background: var(--pf-fjord); transform: rotate(45deg); }
.prose.post a:not(.btn), .help-sheet a:not(.btn) { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose.post a:not(.btn):hover, .help-sheet a:not(.btn):hover { text-decoration-thickness: 2px; }
.prose blockquote { margin: 32px 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--sun); }
.prose blockquote p { font: 700 clamp(22px, 2.4vw, 28px)/1.25 var(--pf-font-display); letter-spacing: -0.015em; color: var(--text); margin: 0; }
.prose blockquote.said { margin: 22px 0; padding: 16px 20px; border: 0; border-radius: 18px 18px 18px 4px; background: #fff; box-shadow: 0 1px 0 rgba(15, 42, 58, 0.06), 0 14px 30px -22px rgba(15, 42, 58, 0.5); }
.prose blockquote.said p { font: 500 17px/1.55 var(--pf-font-body); letter-spacing: 0; }
.more-posts { max-width: var(--max); margin: 72px auto; }
.more-posts h2 { font-size: clamp(26px, 3.2vw, 36px); }

/* Numbered lists read as recipe steps: a mono number, a rule between steps. */
.prose ol.steps, .prose.post ol { list-style: none; counter-reset: step; padding-left: 0; margin: 16px 0 22px; }
.prose ol.steps > li, .prose.post ol > li { counter-increment: step; position: relative; padding: 12px 0 12px 52px; margin: 0; border-top: 1px solid var(--line); }
.prose ol.steps > li:last-child, .prose.post ol > li:last-child { border-bottom: 1px solid var(--line); }
.prose ol.steps > li::before, .prose.post ol > li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 12px; width: 36px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--pf-djup); color: var(--pf-frost); font: 500 13px/1 var(--pf-font-mono); letter-spacing: 0.04em; }

/* A help article: a header in the part's colour, "On this page" beside the paper sheet. */
.help-head { --part: var(--pf-is); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 56px; align-items: center; padding: clamp(28px, 5vw, 64px) 0 clamp(28px, 4vw, 48px); }
.help-head.part-postsocial { --part: var(--pf-part-postsocial); }
.help-head.part-postchat { --part: var(--pf-part-postchat); }
.help-head.part-postmail { --part: var(--pf-part-postmail); }
.help-head.with-clip { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.help-head::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: -10%; top: -20%; width: 70%; height: 140%; background: radial-gradient(closest-side, color-mix(in srgb, var(--part) 16%, transparent), transparent); }
.help-head .crumbs { font-family: var(--pf-font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 22px; }
.part-chip { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 6px 14px 6px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--part) 55%, transparent); font: 500 12px/1 var(--pf-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.part-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--part); box-shadow: 0 0 10px var(--part); }
.help-head h1 { font-size: clamp(40px, 6.4vw, 80px); font-variation-settings: "wdth" 78; line-height: 0.96; margin: 0 0 16px; text-wrap: balance; }
.help-head .lead { color: var(--muted); font-size: clamp(16px, 1.5vw, 19px); max-width: 640px; margin: 0; }
.help-head-icon { display: grid; place-items: center; width: clamp(96px, 12vw, 148px); aspect-ratio: 1; border-radius: 32px; background: color-mix(in srgb, var(--part) 14%, transparent); border: 1px solid color-mix(in srgb, var(--part) 35%, transparent); transform: rotate(-4deg); }
.help-head-icon svg { width: 46%; height: auto; fill: none; stroke: var(--part); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.help-head-icon svg .fill { fill: var(--part); stroke: var(--part); }
.help-head .film-clip { box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(143, 200, 220, 0.14); }
.help-layout { display: grid; grid-template-columns: 220px minmax(0, 820px); gap: 40px; justify-content: center; align-items: start; margin: 8px 0 64px; }
.help-layout.no-toc { grid-template-columns: minmax(0, 820px); }
.help-toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow: auto; }
.help-toc summary { list-style: none; cursor: pointer; font: 500 12px/1 var(--pf-font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ice); padding: 6px 0 14px; }
.help-toc summary::-webkit-details-marker { display: none; }
.help-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.help-toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; font-size: 14px; line-height: 1.35; }
.help-toc a:hover { color: var(--text); }
.help-toc a[aria-current] { color: var(--text); border-left-color: var(--sun); font-weight: 600; }
.help-toc a:focus-visible, .help-toc summary:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; border-radius: 4px; }
/* The sheet: the same paper as the other reading pages. */
.help-layout > .prose { position: relative; margin: 0; max-width: none; padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 60px);
  --text: var(--pf-djup); --muted: var(--pf-granit); --dim: #6f8290; --ice: var(--pf-fjord); --line: rgba(15, 42, 58, 0.14); --card: #fff; --card-hover: #fff;
  color: var(--text); background: var(--pf-frost); border-radius: 6px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 30px 70px -30px rgba(0, 0, 0, 0.75); }
.help-layout > .prose::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: var(--grain); opacity: 0.06; }
.help-sheet > :first-child { margin-top: 0; }
.help-sheet a:not(.btn) { color: var(--pf-fjord); }
.help-sheet code { background: rgba(15, 42, 58, 0.07); }
.help-sheet h2 { font-size: clamp(22px, 2.6vw, 28px); scroll-margin-top: 96px; }
.help-sheet h3 { color: var(--pf-fjord); font-size: 17px; }
.help-sheet p, .help-sheet li { font-size: 16.5px; line-height: 1.65; }
/* Markdown tables (scripts/lib/md-table.mjs): white on the paper, scrolling sideways inside their frame on a phone. */
.help-sheet .table-wrap, main > .prose .table-wrap { background: #fff; margin: 16px 0 24px; }
.help-sheet .table-wrap:focus-visible, main > .prose .table-wrap:focus-visible { outline: 2px solid var(--pf-fjord); outline-offset: 2px; }
.help-sheet .table-wrap table, main > .prose .table-wrap table { margin: 0; min-width: 560px; font-size: 14.5px; }
.help-sheet thead th, .help-sheet thead td, main > .prose thead th, main > .prose thead td { background: rgba(15, 42, 58, 0.04); font-size: 14px; }
.help-sheet tbody th, main > .prose tbody th { width: auto; color: var(--text); font-weight: 600; }
.help-sheet th, .help-sheet td { vertical-align: top; }
/* FAQ as accordions; the questions stay in the page for search and for the FAQ structured data. */
.faq-list { border-bottom: 1px solid var(--line); margin-top: 8px; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 4px; border-radius: 6px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { margin: 0; font-size: 17px; line-height: 1.35; color: var(--text); }
.faq-item summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--pf-fjord); border-bottom: 2px solid var(--pf-fjord); transform: rotate(45deg) translate(-3px, -3px); transition: transform 160ms; }
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq-item summary:hover h3 { color: var(--pf-fjord); }
.faq-item summary:focus-visible { outline: 2px solid var(--pf-fjord); outline-offset: 2px; }
.faq-a { padding: 0 4px 12px; }
/* After the article: related pages and the way to a person. */
.help-after { max-width: 1080px; margin: 0 auto 72px; }
.help-after .related { margin-bottom: 36px; }
.help-after .related a { border: 1px solid var(--line); background: var(--card); }
.help-after .related a:hover, .help-after .related a:focus-visible { background: var(--card-hover); border-color: var(--ice); }
.still-stuck { display: flex; gap: 24px; align-items: center; padding: clamp(22px, 3vw, 32px); border-radius: var(--radius-lg); background: rgba(244, 184, 96, 0.08); border: 1px solid rgba(244, 184, 96, 0.35); }
.still-stuck .still-bo { flex: none; width: 84px; height: 84px; }
.still-stuck h2 { font-size: clamp(24px, 2.6vw, 30px); margin-bottom: 8px; }
.still-stuck p { color: var(--muted); margin: 0; max-width: 640px; }
.still-stuck .actions { margin: 16px 0 0; }
/* The help index: each part's card carries its colour along the top. */
.help-part.part-postsocial { border-top: 3px solid var(--pf-part-postsocial); }
.help-part.part-postchat { border-top: 3px solid var(--pf-part-postchat); }
.help-part.part-postmail { border-top: 3px solid var(--pf-part-postmail); }

@media (max-width: 960px) {
  .help-head, .help-head.with-clip { grid-template-columns: 1fr; }
  .help-head-icon { display: none; }
  .help-layout, .help-layout.no-toc { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .help-toc { position: static; max-height: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 16px; }
  .help-toc summary { padding: 12px 0; display: flex; justify-content: space-between; align-items: center; }
  .help-toc summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ice); border-bottom: 2px solid var(--ice); transform: rotate(45deg); }
  .help-toc details[open] summary::after { transform: rotate(-135deg); }
  .help-toc ol { margin-bottom: 12px; }
}
@media (max-width: 720px) {
  .help-layout > .prose { margin-left: calc(-1 * var(--pad) + 8px); margin-right: calc(-1 * var(--pad) + 8px); }
  .still-stuck { flex-direction: column; align-items: flex-start; }
  .still-stuck .still-bo { width: 64px; height: 64px; }
  .post-hero .blog-art, .post-hero .cover-paint, .post-hero:not(.has-film)::after { border-radius: 14px; }
  .prose.post p, .prose.post li { font-size: 17px; }
  .prose ol.steps > li, .prose.post ol > li { padding-left: 46px; }
  .byline { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .post-thumb .blog-art, .faq-item summary::after { transition: none; }
  .post-card:hover .blog-art, .post-card:hover .cover-paint img { transform: none; }
  .featured-art .blog-art, .featured-art .cover-art { transition: none; }
  .featured-post:hover .blog-art, .featured-post:hover .cover-art, .featured-post:hover, .post-card:hover { transform: none; }
}

/* ---------- Home: the feature tiles (bento). A papercut scene, and the feature's loop over it ----------
   Markup: scripts/build-site.mjs featureTile. Scenes: scripts/illustration/features.mjs. Player: the tile mode
   in docs/site/films/base.js, which sets .has-film on the tile once its film is ready (never for less
   motion) and .is-film while the film shows. The link (.tile-body) covers the whole tile through its
   ::after; the play button sits above it, and on a touch screen it covers the picture, so a tap on the
   picture plays the film and a tap on the words opens the feature. Until the film is ready there is no
   button, and the whole tile is the link. */
.tile { position: relative; }
.tile-visual { order: -1; position: relative; display: block; height: 250px; overflow: hidden; background: var(--pf-natt); border-bottom: 1px solid var(--line); }
.tile-visual .feature-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.film.film-tile { position: absolute; inset: 0; display: block; margin: 0; border-radius: 0; box-shadow: none; background: var(--pf-natt); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 350ms, visibility 0s 350ms; }
.film-tile .film-frame { display: block; height: 100%; aspect-ratio: auto; }
.film-tile .film-frame::after { opacity: 0.16; }
.tile.is-film .film-tile { opacity: 1; visibility: visible; transition: opacity 350ms; }
.tile-body { color: inherit; text-decoration: none; }
.tile-body::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-lg); }
.tile-body:focus-visible { outline: none; }
/* An outline, not a shadow, so the ring stays in forced colours (Windows high contrast). */
.tile-body:focus-visible::after { outline: 2px solid var(--ice); outline-offset: -3px; }
.film-play.tile-play { display: none; z-index: 2; right: 12px; bottom: 12px; width: 36px; height: 36px; opacity: 1; }
.tile.has-film .film-play.tile-play { display: grid; }
.tile-play:focus-visible { outline-offset: 2px; }
@media (hover: none) {
  .tile.has-film .film-play.tile-play { inset: 0; width: auto; height: auto; display: block; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-tap-highlight-color: transparent; }
  .film-play.tile-play:hover { background: none; color: var(--pf-frost); }
  .tile-play svg { position: absolute; right: 12px; bottom: 12px; box-sizing: content-box; width: 14px; height: 14px; padding: 11px; border-radius: 50%; border: 1px solid rgba(238, 242, 241, 0.25); background: rgba(10, 28, 40, 0.6); }
  .tile-play:focus-visible { outline-offset: -3px; }
}
/* The shape keeps every loop whole. One column (960 px and down): at most 12 : 5, so a wide screen gets a
   taller picture instead of a strip that cuts the loops' tops. From 961 to 1100 px the narrow tiles would be
   almost square and cut the composer's draft, so every row there holds two tiles of three columns. */
@media (min-width: 961px) and (max-width: 1100px) { .tile.span-2, .tile.span-4 { grid-column: span 3; } }
@media (max-width: 960px) { .tile-visual { height: auto; aspect-ratio: 12 / 5; min-height: 210px; } }
/* Less motion: the scene only. Nothing plays, and base.js never adds .has-film, so there is no button. */
@media (prefers-reduced-motion: reduce) { .film.film-tile { display: none; } }

/* The download page (postfjord.com/download): one card per way to run Postfjord. */
.downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 8px 0 clamp(32px, 5vw, 56px); }
.dl-card { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--edge); }
.dl-card h2 { font-size: 20px; margin: 0 0 8px; display: flex; align-items: center; gap: 10px; }
.dl-card p { color: var(--muted); font-size: 14.5px; margin: 0 0 20px; flex: 1; }
.dl-beta { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(244, 184, 96, 0.16); color: var(--sun); }
/* Each card spans five shared rows (icon, heading, text, button, the code), so the buttons line up
   even when one card is longer. */
@supports (grid-template-rows: subgrid) {
  .dl-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; justify-items: start; align-content: start; }
  .dl-card .btn { align-self: start; }
}
.dl-soon { background: rgba(143, 200, 220, 0.14); color: var(--ice); }
.dl-qr { display: none; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.dl-qr svg { flex: none; width: 96px; height: 96px; border-radius: 8px; }
@media (hover: hover) and (pointer: fine) and (min-width: 720px) { .dl-qr { display: flex; } }

/* The press page (postfjord.com/press): the brand kit's logos, colours, type and rules. */
.press-kit, .press-contact { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) 48px; }
.press-kit h3 { margin: 40px 0 14px; font-size: 20px; }
.press-kit-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.press-kit-head h2 { margin: 0; }
.press-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; margin-top: 20px; }
.press-logo { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.press-logo-art { display: flex; align-items: center; justify-content: center; height: 150px; padding: 24px; background: var(--pf-frost); }
.press-logo.on-dark .press-logo-art { background: var(--pf-natt); }
.press-logo-art img { max-width: 100%; max-height: 72px; }
.press-logo figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 14px 16px; font-size: 14px; }
.press-logo figcaption span { color: var(--muted); flex: 1 1 auto; }
.press-logo figcaption a { font-family: var(--pf-font-mono); font-size: 12px; letter-spacing: 0.06em; }
.press-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap: 12px; }
.press-swatch { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 88px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); color: var(--pf-djup); }
.press-swatch.on-dark { color: var(--pf-frost); }
.press-swatch code { font-family: var(--pf-font-mono); font-size: 13px; background: none; padding: 0; color: inherit; }
.press-type p { margin: 0 0 10px; font-size: 22px; }
.press-type span { font-family: var(--pf-font-body); font-size: 14px; color: var(--muted); margin-left: 10px; }
.press-type-display { font-family: var(--pf-font-display); font-weight: 800; font-variation-settings: "wdth" 78; font-size: 30px !important; letter-spacing: -0.02em; }
.press-type-body { font-family: var(--pf-font-body); font-weight: 600; }
.press-type-mono { font-family: var(--pf-font-mono); }
.press-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.press-rule { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.press-rule img { display: block; width: 100%; height: auto; }
.press-rule figcaption { padding: 12px 14px; font-size: 14px; }
.press-rule strong { display: inline-block; margin-right: 6px; }
.press-rule.is-do strong { color: var(--pf-mossa); }
.press-rule.is-dont strong { color: var(--pf-lingon); }
.press-note { color: var(--muted); font-size: 14px; }

/* ---------- Part colours (docs/DESIGN.md): postsocial sol, postchat lingon, postmail ljung ----------
   Natt and frost carry the page; the part's colour is the one extra colour in view. --part fills dots,
   bars and edges; --part-dark and --part-light are the text shades that hold 4.5:1 on natt and on frost
   (shared/tokens.js ACCENT_TEXT). A feature takes the colour of its part (FEATURE_PART or front matter
   part in scripts/build-site.mjs); a solution page gets the quiet version (part-soft). */
.part-postsocial { --part: var(--pf-part-postsocial); --part-dark: var(--pf-text-postsocial-dark); --part-light: var(--pf-text-postsocial-light); }
.part-postchat { --part: var(--pf-part-postchat); --part-dark: var(--pf-text-postchat-dark); --part-light: var(--pf-text-postchat-light); }
.part-postmail { --part: var(--pf-part-postmail); --part-dark: var(--pf-text-postmail-dark); --part-light: var(--pf-text-postmail-light); }

/* Home: the three product cards, framed in their colour: a band on top and a rule under the film */
.product-card:is(.part-postsocial, .part-postchat, .part-postmail) { border-top: 4px solid var(--part); }
.product-card:is(.part-postsocial, .part-postchat, .part-postmail) .product-art { border-bottom: 2px solid var(--part); }
.product-card:is(.part-postsocial, .part-postchat, .part-postmail):hover { border-color: var(--part); }
.light .product-card:is(.part-postsocial, .part-postchat, .part-postmail) :is(.product-name, .more-link) { color: var(--part-light); }

/* Hero of a product, feature or solution page (dark): the eyebrow in the part's colour and a glow behind */
:is(.hero, .page-hero):is(.part-postsocial, .part-postchat, .part-postmail) { position: relative; isolation: isolate; }
:is(.hero, .page-hero):is(.part-postsocial, .part-postchat, .part-postmail)::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: -12%; top: -10%; width: 70%; height: 120%; background: radial-gradient(closest-side, color-mix(in srgb, var(--part) 18%, transparent), transparent); }
:is(.hero, .page-hero):is(.part-postsocial, .part-postchat, .part-postmail) .eyebrow::before { background: var(--part); box-shadow: 0 0 12px var(--part); }
:is(.hero, .page-hero):is(.part-postsocial, .part-postchat, .part-postmail):not(.part-soft) .eyebrow { color: var(--part-dark); }
:is(.hero, .page-hero).part-soft::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--part) 10%, transparent), transparent); }
.part-hero:is(.part-postsocial, .part-postchat, .part-postmail) .film { box-shadow: 0 40px 90px -36px rgba(0, 0, 0, 0.85), 0 0 0 1px color-mix(in srgb, var(--part) 55%, transparent); }

/* The page's text on paper: a short bar in the part's colour marks each section, small labels take its ink */
.paper-band:is(.part-postsocial, .part-postchat, .part-postmail):not(.part-soft) .prose h2::before { content: ""; display: block; width: 36px; height: 4px; margin-bottom: 14px; border-radius: 2px; background: var(--part); }
.paper-band:is(.part-postsocial, .part-postchat, .part-postmail):not(.part-soft) .eyebrow-sm { color: var(--part-light); }
.paper-band:is(.part-postsocial, .part-postchat, .part-postmail):not(.part-soft) .related .feature:hover { border-color: var(--part); }

/* ---------- The landing pages feature page (features/landing-pages, build-site.mjs sectionedBody) ----------
   postmail's page, so ljung is its accent: the eyebrow, the numbered markers and the call to action. Natt and
   frost carry the page. On paper ljung is mixed toward natt and on dark toward frost, so small labels stay readable. */
.lp-hero, .lp-story, .lp-back, .lp-more, .lp-cta { --lp: var(--pf-ljung); --lp-on-dark: color-mix(in srgb, var(--pf-ljung) 62%, var(--pf-frost)); --lp-on-paper: color-mix(in srgb, var(--pf-ljung) 62%, var(--pf-natt)); }
.lp-hero .eyebrow, .lp-back .eyebrow { color: var(--lp-on-dark); }
.lp-hero .eyebrow::before, .lp-back .eyebrow::before { background: var(--lp); box-shadow: 0 0 12px var(--lp); }
.lp-hero .film-clip { box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.75), 0 0 0 2px color-mix(in srgb, var(--pf-ljung) 55%, transparent); }
.lp-mark { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-family: var(--pf-font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.14em; color: var(--lp-on-dark); }
.lp-mark::after { content: ""; width: 36px; height: 2px; border-radius: 1px; background: var(--lp); }
.light .lp-mark { color: var(--lp-on-paper); }
.lp-mark:empty { display: none; }
.lp-sec h2, .lp-compare h2, .lp-group h2 { font-size: clamp(28px, 3.8vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 14px; text-wrap: balance; }
.lp-text p, .lp-compare p { color: var(--muted); font-size: 17px; }
@media (min-width: 961px) { .lp-hero.with-visual { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
.lp-intro { max-width: 760px; margin: 0 auto clamp(40px, 6vw, 72px); text-align: center; }
.lp-intro p { font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: var(--text); margin: 0; }
.lp-sec { margin: 0 0 clamp(56px, 8vw, 96px); }
.lp-sec:last-child { margin-bottom: 0; }
.lp-before-after { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.lp-gallery .lp-text, .lp-uses .lp-text { max-width: 720px; margin-bottom: 32px; }

/* before and after: the one link in a profile, then the page it opens */
.viz-ba { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); gap: 12px; align-items: center; }
.ba-side { display: flex; flex-direction: column; gap: 12px; align-items: center; min-width: 0; }
.ba-side .viz { width: 100%; max-width: 300px; margin: 0 auto; }
.ba-label { font-family: var(--pf-font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.ba-label.on { color: #fff; background: var(--lp-on-paper); border-color: transparent; }
.ba-arrow svg { width: 48px; height: 24px; fill: none; stroke: var(--lp-on-paper); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.viz-ig { padding: 16px 16px 0; background: var(--v-card); }
.ig-head { display: grid; grid-template-columns: 56px 1fr 1fr; gap: 8px; align-items: center; text-align: center; font-size: 11px; color: var(--v-sub); }
.ig-head b { display: block; font-size: 15px; color: var(--v-text); }
.ig-head .avatar { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 700; color: #fff; background: var(--v-accent); box-shadow: 0 0 0 2px var(--v-card), 0 0 0 4px #c13584; }
.ig-name { display: block; margin-top: 12px; font-size: 13px; }
.ig-bio { margin: 2px 0 4px; font-size: 12px; line-height: 1.4; color: var(--v-text); }
.ig-link { display: inline-block; font-size: 12px; font-weight: 600; color: var(--v-accent); padding: 2px 6px; margin-left: -6px; border-radius: 6px; background: var(--v-accent-soft); }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 14px -16px 0; }
.ig-grid i { aspect-ratio: 1; background: color-mix(in srgb, var(--pf-is) 55%, #fff); }
.ig-grid i.t1 { background: color-mix(in srgb, var(--pf-sol) 45%, #fff); } .ig-grid i.t2 { background: color-mix(in srgb, var(--pf-mossa) 35%, #fff); }
.viz-ba .viz-phone { width: 100%; }

/* the template gallery: six real templates, each in its own look (PAGE_STYLES) */
.tpl-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 28px); }
.tpl { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.tpl-page { display: flex; flex-direction: column; gap: 9px; min-height: 250px; padding: 22px 18px; border-radius: 18px; background: var(--t-bg); color: var(--t-text); font-family: var(--t-body); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 22px 44px -26px rgba(15, 42, 58, 0.55); border: 1px solid rgba(15, 42, 58, 0.08); overflow: hidden; }
.tpl-page.narrow { padding-left: 26px; padding-right: 26px; }
.tpl-eyebrow { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-muted); }
.tpl-h { font-family: var(--t-display); font-size: clamp(19px, 2vw, 24px); line-height: 1.1; font-weight: 700; overflow-wrap: anywhere; }
.tbtn { align-self: flex-start; padding: 8px 14px; border-radius: var(--t-br); background: var(--t-accent); color: var(--t-on); font-size: 12px; font-weight: 700; }
.tpl .row { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--t-text) 14%, transparent); font-size: 12px; }
.tpl .row em { font-style: normal; } .tpl .row b { color: var(--t-accent); } .tpl .row small { color: var(--t-muted); font-size: 11px; }
.tpl .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tpl .cards > span { display: flex; flex-direction: column; gap: 2px; padding: 9px; border-radius: var(--t-r); background: var(--t-surface); font-size: 11.5px; }
.tpl .cards small { color: var(--t-muted); font-size: 10.5px; } .tpl .cards em { font-style: normal; font-weight: 600; }
.tpl .img { display: block; height: 78px; border-radius: var(--t-r); background: linear-gradient(135deg, color-mix(in srgb, var(--t-accent) 70%, var(--t-bg)), var(--t-surface)); }
.tpl .field { padding: 9px 11px; border-radius: var(--t-r); background: var(--t-surface); color: var(--t-muted); font-size: 12px; border: 1px solid color-mix(in srgb, var(--t-text) 16%, transparent); }
.tpl-page .field + .tbtn { align-self: stretch; text-align: center; }
.tpl .check { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.tpl .check i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--t-accent); }
.tpl .check em { font-style: normal; }
.tpl figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font-size: 14px; }
.tpl figcaption span { font-family: var(--pf-font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* what you get back: dark, one mock beside each text */
.lp-back { padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 4vw, 40px); margin: 0; }
.lp-group { max-width: 720px; margin: 0 auto clamp(8px, 2vw, 24px); text-align: center; }
.lp-group .eyebrow { justify-content: center; }
.lp-row .frow-text h3 { font-size: clamp(24px, 2.8vw, 32px); }
.lp-row .frow-visual .viz { max-width: 520px; margin: 0 auto; }
.viz-editor ul { list-style: none; margin: 0; padding: 12px; display: grid; gap: 6px; background: var(--v-bg); }
.viz-editor li { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--v-card); border: 1px solid var(--v-line); font-size: 12.5px; }
.viz-editor li.on { border-color: var(--v-accent); box-shadow: 0 0 0 2px var(--v-accent-soft); }
.viz-editor li.add { justify-content: center; border-style: dashed; color: var(--v-sub); background: transparent; }
.viz-editor .arrows { color: var(--v-muted); letter-spacing: 4px; }
.viz-editor .look { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-top: 1px solid var(--v-line); background: var(--v-card); }
.viz-editor .look small { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v-sub); }
.viz-editor .swatches { display: flex; gap: 6px; } .viz-editor .swatches i { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--v-line); } .viz-editor .swatches i.on { box-shadow: 0 0 0 2px var(--v-card), 0 0 0 4px var(--v-text); }
.viz-editor .foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-top: 1px solid var(--v-line); background: var(--v-card); }
.viz-editor .foot em { font-style: normal; color: var(--v-sub); font-size: 11.5px; }
.viz-fc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 440px; margin: 0 auto; }
.viz-fc .viz-bio { padding: 12px; }
.viz-fc .field.typed { color: var(--v-text); }
.fc-step { justify-self: center; display: inline-flex; align-items: center; gap: 8px; font-family: var(--pf-font-mono); font-size: 12px; color: var(--lp-on-dark); }
.fc-step svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.fc-body { display: grid; grid-template-columns: 40px 1fr auto; gap: 4px 12px; align-items: center; padding: 14px 16px; background: var(--v-card); }
.fc-body .avatar { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--v-accent); }
.fc-body b { font-size: 13px; }
.fc-body .ok { font-size: 11px; font-weight: 700; color: var(--v-ok); padding: 2px 8px; border-radius: 999px; background: #dcebdf; }
.fc-body .tags { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.fc-body .tags i { font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--v-accent-soft); color: var(--v-accent); }
.fc-body em { grid-column: 1 / -1; font-style: normal; font-size: 11px; color: var(--v-sub); border-top: 1px solid var(--v-line); padding-top: 8px; margin-top: 6px; overflow-wrap: anywhere; }
.viz-numbers { display: grid; gap: 10px; padding: 14px 16px 16px; background: var(--v-card); }
.viz-numbers .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.viz-numbers .stats span { display: flex; flex-direction: column; padding: 10px; border-radius: 10px; background: var(--v-bg); border: 1px solid var(--v-line); min-width: 0; }
.viz-numbers .stats small, .viz-numbers .head { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v-sub); }
.viz-numbers .stats b { font-family: var(--pf-font-display); font-size: 24px; font-weight: 800; line-height: 1.1; }
.viz-numbers .stats em { font-style: normal; font-size: 10.5px; color: var(--v-sub); }
.viz-numbers .bar { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 12px; }
.viz-numbers .bar em { font-style: normal; } .viz-numbers .bar b { font-family: var(--pf-font-mono); font-weight: 500; }
.viz-numbers .bar span { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--v-bg); overflow: hidden; }
.viz-numbers .bar i { display: block; height: 100%; border-radius: 4px; background: var(--pf-ljung); }
.viz-numbers code { font-family: var(--pf-font-mono); font-size: 10.5px; color: var(--v-sub); background: var(--v-bg); padding: 6px 8px; border-radius: 6px; overflow-wrap: anywhere; }
.viz-qr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: end; max-width: 480px; margin: 0 auto; }
.viz-qr .tent { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 16px 16px; background: var(--pf-frost); color: var(--pf-djup); clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.8); }
.viz-qr .tent b { font-family: var(--pf-font-display); font-weight: 800; font-size: 18px; text-align: center; }
.viz-qr .tent small { font-family: var(--pf-font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pf-fjord); text-align: center; }
.viz-qr .qr { width: 100%; max-width: 150px; height: auto; display: block; }
.qr-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.qr-side .dl { display: flex; gap: 8px; } .qr-side .dl i { font-style: normal; font-family: var(--pf-font-mono); font-size: 12px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--text); background: var(--card); }
.qr-side .moved { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.qr-side .moved small { font-size: 11px; color: var(--muted); }
.qr-side code { font-family: var(--pf-font-mono); font-size: 11px; color: var(--muted); overflow-wrap: anywhere; background: none; padding: 0; }
.qr-side code.new { color: var(--text); } .qr-side .to { color: var(--lp-on-dark); line-height: 1; }
.viz-checks { list-style: none; margin: 0; padding: 6px 0; background: var(--v-card); }
.viz-checks li { display: grid; grid-template-columns: 12px 1fr; column-gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--v-line); align-items: center; }
.viz-checks .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--v-ok); grid-row: span 2; }
.viz-checks code { font-family: var(--pf-font-mono); font-size: 11.5px; color: var(--v-text); background: none; padding: 0; overflow-wrap: anywhere; }
.viz-checks em { font-style: normal; font-size: 11px; color: var(--v-ok); font-weight: 600; }
.viz-checks li.bad { background: #f8dcd8; } .viz-checks li.bad .dot { background: var(--v-danger); } .viz-checks li.bad em { color: var(--v-danger); }
.viz-checks li.night { display: block; border-bottom: 0; text-align: center; } .viz-checks li.night em { color: var(--v-sub); font-weight: 500; }

/* who uses it, the comparison and the FAQ, on paper */
.lp-more > * + * { margin-top: clamp(48px, 7vw, 88px); }
.lp-use-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-use { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--edge); }
.lp-use h3 { font-size: 19px; margin: 0 0 6px; }
.lp-use p { color: var(--muted); font-size: 15px; margin: 0; }
.lp-use .icon { background: color-mix(in srgb, var(--pf-ljung) 14%, transparent); }
.lp-use .icon svg { stroke: var(--lp-on-paper); } .lp-use .icon svg .fill { fill: var(--lp); stroke: var(--lp); }
.lp-compare { padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--lp); }
.lp-compare p:last-child { margin-bottom: 0; }
.lp-compare a { font-weight: 700; }
.lp-faq h2 { font-size: clamp(26px, 3.4vw, 38px); text-align: center; }
.lp-cta { background: color-mix(in srgb, var(--pf-ljung) 90%, var(--pf-frost)); color: var(--pf-natt); } /* 5.0:1 for natt text; plain ljung is 4.35:1 */
.lp-cta h2 { color: var(--pf-natt); }
.lp-cta p { color: var(--pf-natt); font-size: 19px; font-weight: 600; max-width: 640px; margin-left: auto; margin-right: auto; }
.lp-cta .btn-primary { background: var(--pf-natt); color: var(--pf-frost); }
.lp-cta .btn-ghost { border-color: var(--pf-natt); color: var(--pf-natt); }
main > .fjord-edge-up + .lp-cta { margin: clamp(48px, 7vw, 88px) 0 24px; }
@media (max-width: 960px) {
  .lp-before-after { grid-template-columns: 1fr; }
  .tpl-gallery, .lp-use-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .viz-ba { grid-template-columns: 1fr; }
  .ba-arrow { justify-self: center; transform: rotate(90deg); }
  .lp-use-grid { grid-template-columns: 1fr; }
  .tpl-gallery { gap: 12px; }
  .tpl-page { min-height: 210px; padding: 16px 12px; gap: 7px; }
  .tpl .cards { grid-template-columns: 1fr; }
  .tpl figcaption { font-size: 13px; }
  .viz-qr { grid-template-columns: 1fr 1fr; gap: 12px; }
  .viz-numbers .stats b { font-size: 20px; }
}

/* ---- status page (postfjord.com/status, docs/site/status.js) ---- */
.status-page { --st-ok: var(--pf-mossa); --st-degraded: var(--pf-sol); --st-down: var(--pf-lingon); --st-none: var(--line); max-width: 860px; margin: 0 auto 72px; padding: 0 16px; }
.status-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 32px 0 20px; }
.status-head h1 { font-size: clamp(28px, 4vw, 40px); margin: 0; }
.status-report-link { font-weight: 600; color: var(--text); }
.status-overall { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); font-size: 20px; font-weight: 700; margin: 0 0 28px; }
.status-dot, .status-key { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--st-none); flex: none; }
.status-overall .status-dot { width: 18px; height: 18px; }
[data-state="ok"] > .status-dot, .status-key[data-s="ok"] { background: var(--st-ok); }
[data-state="degraded"] > .status-dot, .status-key[data-s="degraded"] { background: var(--st-degraded); }
[data-state="down"] > .status-dot, .status-key[data-s="down"] { background: var(--st-down); }
.status-h2 { font-size: 20px; margin: 32px 0 12px; }
.status-rows { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); padding: 4px 20px; }
.status-row { padding: 16px 0; border-bottom: 1px solid var(--line); }
.status-row:last-child { border-bottom: 0; }
.status-row-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.status-name { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.status-word { color: var(--muted); font-weight: 500; font-size: 14px; }
.status-uptime { color: var(--muted); font-size: 14px; }
.status-about { color: var(--muted); font-size: 14px; margin: 4px 0 10px 22px; }
.status-bars { display: flex; gap: 2px; height: 32px; align-items: stretch; }
.status-bars span { flex: 1; min-width: 2px; border-radius: 2px; background: var(--st-none); }
.status-bars span[data-s="ok"] { background: var(--st-ok); }
.status-bars span[data-s="degraded"] { background: var(--st-degraded); }
.status-bars span[data-s="down"] { background: var(--st-down); }
.status-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin-top: 6px; letter-spacing: 0.04em; text-transform: uppercase; }
.status-legend { color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; margin-top: 16px; }
.status-legend .status-key { margin-right: -8px; }
.status-updated { color: var(--muted); font-size: 14px; }
.status-note { color: var(--muted); }
.status-incident { border: 1px solid var(--line); border-left: 4px solid var(--st-degraded); border-radius: var(--radius-lg); background: var(--card); padding: 16px 20px; margin: 0 0 16px; }
.status-incident[data-impact="down"] { border-left-color: var(--st-down); }
.status-incident[data-state="resolved"] { border-left-color: var(--st-ok); }
.status-incident h3 { margin: 0 0 10px; font-size: 18px; }
.status-step { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 8px 0; }
.status-step b { font-size: 13px; text-transform: capitalize; }
.status-step time { display: block; color: var(--muted); font-size: 13px; }
.status-step p { margin: 0; }
.status-past summary { cursor: pointer; font-weight: 600; margin: 8px 0; }
.status-report { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); padding: 4px 20px 20px; margin-top: 36px; }
.status-report form { display: grid; gap: 8px; max-width: 560px; }
.status-report label { font-weight: 600; font-size: 14px; margin-top: 6px; }
.status-report input, .status-report select, .status-report textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--pf-natt); }
.status-report button { justify-self: start; margin-top: 8px; }
.status-report .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.status-report-msg { min-height: 1.4em; font-weight: 600; }
.status-report-msg[data-kind="ok"] { color: var(--ac-ok-ink, #2f6a3f); }
.status-report-msg[data-kind="error"] { color: #a63229; }
@media (max-width: 600px) {
  .status-bars { height: 26px; gap: 1px; }
  .status-step { grid-template-columns: 1fr; gap: 2px; }
}

.mood-gryning { --mood-ink: #b9a4e8; --mood-ink-light: #5d3fa0; --mood-wash: rgba(142, 111, 201, 0.16); --mood-wash-light: rgba(142, 111, 201, 0.14); }
.mood-dimma { --mood-ink: #c1cacd; --mood-ink-light: #4d6272; --mood-wash: rgba(77, 98, 114, 0.16); --mood-wash-light: rgba(77, 98, 114, 0.14); }
.mood-morgon { --mood-ink: #8fc8dc; --mood-ink-light: #1c617b; --mood-wash: rgba(31, 111, 139, 0.16); --mood-wash-light: rgba(31, 111, 139, 0.14); }
.mood-sommar { --mood-ink: #8fc79b; --mood-ink-light: #2f6a3f; --mood-wash: rgba(93, 154, 106, 0.16); --mood-wash-light: rgba(93, 154, 106, 0.14); }
.mood-solnedgang { --mood-ink: #f0877f; --mood-ink-light: #a8322a; --mood-wash: rgba(224, 88, 79, 0.16); --mood-wash-light: rgba(224, 88, 79, 0.14); }
.mood-natt { --mood-ink: #f4b860; --mood-ink-light: #8a5a12; --mood-wash: rgba(244, 184, 96, 0.16); --mood-wash-light: rgba(244, 184, 96, 0.14); }