/* =====================================================================
   blerc.com: public site styles.

   Ported from the approved stylesheet, docs/design/blerc.css. Class names
   and values are the design's. Everything the public pages use is here.
   The admin styles are a separate file, from Phase 4.

   What differs from the design file, and why:

   1. No colour values for the themes. They come from themes.css, which is
      generated from the C# theme records. This file only adds the handful
      of tokens that have no place in those records (see "Extra tokens").
   2. The design marks dark mode with a class (.m-dark). Here the mode is
      the data-mode attribute on <html>, set by the server, and it can also
      be "system". So the few rules that were written against .m-dark read
      a token instead, and work in every mode without being repeated.
   3. The artboards carry layout in style attributes. Those are classes
      here (.hero-copy, .cta and friends), so a strict Content Security
      Policy can forbid inline styles later.
   ===================================================================== */

/* ---------- Fonts: self-hosted, variable, Latin and Latin Extended ---------- */
/* Built by tools/fonts/subset_fonts.py from the google/fonts repository
   (SIL Open Font License, see /fonts/Archivo-OFL.txt and Newsreader-OFL.txt).
   The Archivo Latin file is preloaded in App.razor; keep the address the same
   in both places.
   Both hold only what the design uses. Archivo: weights 400 to 900 and
   widths 100% to 125% (the brief's wider range was a starting point: Phase 3 answers,
   question 3). Newsreader: weights 400 to 700 and optical sizes 14 to 40
   (reading text from 19 px to 34 px). Ask neither for anything outside that,
   or widen the files first with the tool. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url('/fonts/archivo-latin-v2.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: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url('/fonts/archivo-latin-ext-v2.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: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/newsreader-latin-v2.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: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/newsreader-latin-ext-v2.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: 'Newsreader';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/newsreader-italic-latin-v2.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: 'Newsreader';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/newsreader-italic-latin-ext-v2.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;
}

/* ---------- Extra tokens ---------- */
/* The design's tokens that Blerc.SharedUI's ThemeTokens has no place for.

   Three are other tokens under the design's name: --surface2 is rowBg, --ok is
   savings and --okSoft is bestBg (the mapping in the brief, section 9).
   --ring is the text colour in every theme. The rest never change per theme
   in the design, only per mode, so they are written once for light and once
   for dark.

   The three blocks below mirror the mode switch in themes.css on purpose:
   light is the base, "system" follows a dark device, and an explicit dark
   comes last so it wins. --okSoft and --infoSoft are restated in the dark
   blocks because themes.css defines tokens of the same names there. */
:root {
  --f-ui: 'Archivo', 'Helvetica Neue', Helvetica, sans-serif;
  --f-read: 'Newsreader', Georgia, 'Times New Roman', serif;

  --surface2: var(--rowBg);
  --ok: var(--savings);
  --okSoft: var(--bestBg);
  --ring: var(--text);
  --onBand: #EEF2F8;

  --bandMut: #A9B4C7;
  --info: #1D4FB0;
  --infoSoft: #E5EDFC;
  --bad: #B42318;
  --badSoft: #FDE8E6;

  /* Stand-ins for the design's .m-dark rules. */
  --linkHover: var(--primaryHover);
  --show-moon: block;
  --show-sun: none;
}
@media (prefers-color-scheme: dark) {
  :root[data-mode="system"] {
    --okSoft: var(--bestBg);
    --bandMut: #A3AEC2;
    --info: #8DB0FF;
    --infoSoft: #16264A;
    --bad: #FF8A80;
    --badSoft: #3A1512;
    --linkHover: var(--text);
    --show-moon: none;
    --show-sun: block;
  }
}
:root[data-mode="dark"] {
  --okSoft: var(--bestBg);
  --bandMut: #A3AEC2;
  --info: #8DB0FF;
  --infoSoft: #16264A;
  --bad: #FF8A80;
  --badSoft: #3A1512;
  --linkHover: var(--text);
  --show-moon: none;
  --show-sun: block;
}

/* ---------- Base ---------- */
/* The header stays at the top of the screen (see Site navigation). So a link
   to a place further down the page, the skip link's target, and whatever the
   Tab key reaches next must stop below the header and not under it. --stuck
   is the header's height: one row at every width, shorter on a phone. */
html { background: var(--bg); --stuck: 88px; scroll-padding-top: calc(var(--stuck) + 12px); }
body { margin: 0; }
.bl {
  font-family: var(--f-ui);
  /* 100%, not the design's 16px: the same size by default, and it follows a
     visitor who has asked their browser for larger text. */
  font-size: 100%;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Keeps the footer at the bottom of a short page such as the 404. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.bl > main { flex: 1 0 auto; }
.bl > main:focus { outline: none; }
.bl *, .bl *::before, .bl *::after { box-sizing: border-box; }
.bl img { max-width: 100%; display: block; }
.bl a { color: var(--primary); text-underline-offset: 3px; }
.bl a:hover { color: var(--linkHover); }
.bl :focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
.bl p, .bl h1, .bl h2, .bl h3, .bl h4, .bl ul, .bl ol, .bl figure, .bl dl, .bl dd { margin: 0; }
.bl button { font: inherit; color: inherit; }

.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }
.wrap-read { width: 100%; max-width: 720px; }

/* The first stop for a keyboard: jump past the header. Off screen until focused.
   It is lifted by its own height, whatever that is, so no part of it can show.
   The shadow belongs to the focused state only: a shadow spreads well past the
   box, and on the hidden link it reached down into the top of the page. */
.skip {
  position: absolute; left: 12px; top: 0; z-index: 30;
  transform: translateY(calc(-100% - 8px));
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--surface); color: var(--text); font-weight: 700; text-decoration: none;
}
.bl a.skip { color: var(--text); }
.skip:focus { top: 12px; transform: none; box-shadow: var(--cardShadow); }

/* ---------- Type ---------- */
.disp { font-family: var(--f-ui); font-weight: 800; font-stretch: 118%; letter-spacing: -0.022em; line-height: 1.02; text-wrap: balance; }
.d-xl { font-size: clamp(2.6rem, 5vw, 4.25rem); }
.d-l  { font-size: clamp(2.1rem, 3.8vw, 3.25rem); }
.d-m  { font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.08; }
.d-s  { font-size: 1.5rem; line-height: 1.12; }
.d-xs { font-size: 1.3125rem; line-height: 1.15; }
.lead { font-family: var(--f-read); font-size: clamp(1.1875rem, 1.6vw, 1.375rem); line-height: 1.55; color: var(--textMut); text-wrap: pretty; }
.read { font-family: var(--f-read); font-size: 1.1875rem; line-height: 1.68; text-wrap: pretty; }
.read h2 { font-family: var(--f-ui); font-weight: 800; font-stretch: 112%; font-size: 1.625rem; line-height: 1.15; letter-spacing: -0.015em; margin: 2.2em 0 .6em; }
.read p + p { margin-top: 1em; }
.read ul { padding-left: 1.2em; margin-top: 1em; display: flex; flex-direction: column; gap: .4em; }
.small { font-size: .875rem; line-height: 1.5; }
.xs { font-size: .8125rem; line-height: 1.45; }
.mut { color: var(--textMut); }
.strong { font-weight: 700; }
.wide { font-stretch: 112%; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px; border-radius: 999px;
  font-family: var(--f-ui); font-weight: 700; font-size: 1rem; font-stretch: 106%; line-height: 1;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.bl a.btn:hover { text-decoration: none; }
.btn-p, .bl a.btn-p { background: var(--primaryBtn); color: var(--onPrimaryBtn); }
.btn-p:hover, .bl a.btn-p:hover { background: var(--primaryHover); color: var(--onPrimaryBtn); }
.btn-o, .bl a.btn-o { background: transparent; color: var(--text); border-color: var(--text); }
.btn-o:hover, .bl a.btn-o:hover { background: var(--hoverWash); color: var(--text); }
.btn-a, .bl a.btn-a { background: var(--accent); color: var(--onAccent); }
.btn-a:hover, .bl a.btn-a:hover { filter: brightness(.96); color: var(--onAccent); }
.btn-q, .bl a.btn-q { background: transparent; color: var(--text); border-color: var(--border); }
.btn-q:hover, .bl a.btn-q:hover { background: var(--hoverWash); color: var(--text); }
.btn-band, .bl a.btn-band { background: transparent; color: var(--onBand); border-color: rgba(238, 242, 248, .5); }
.btn-band:hover, .bl a.btn-band:hover { background: rgba(238, 242, 248, .08); color: var(--onBand); }
/* A real button, as against a link drawn as one. The rule further up gives
   every button the colour of the page around it, and it outweighs the colour
   of the kind of button it is: a class and an element against a class. So the
   words on a primary button were the page's dark text on blue, 3 to 1, and in
   dark mode the words on an accent button were light on yellow, 1.35 to 1.
   The design has the same rules in the same order. A link drawn as a button
   was right all along. Found by the sign-in check's contrast step, 12 October
   2026. */
.bl button.btn-p, .bl button.btn-p:hover { color: var(--onPrimaryBtn); }
.bl button.btn-o, .bl button.btn-o:hover { color: var(--text); }
.bl button.btn-a, .bl button.btn-a:hover { color: var(--onAccent); }
.bl button.btn-q, .bl button.btn-q:hover { color: var(--text); }
.bl button.btn-band, .bl button.btn-band:hover { color: var(--onBand); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: .9375rem; gap: 8px; }
/* The small button is drawn 40 px tall, as designed. This gives it a 44 px
   target to press without changing how it looks. */
.btn-sm { position: relative; }
.btn-sm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
}
.icon-btn:hover { background: var(--hoverWash); }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic.s { width: 16px; height: 16px; }
.ic.l { width: 24px; height: 24px; }

/* ---------- Site navigation ---------- */
/* The header stays at the top of the screen while the page scrolls (Phase 5
   answers, C2). Sticky, not fixed: it is where it always was until the page
   moves, so nothing jumps as the page loads. Its background is the page's
   own and solid, in every theme and both modes, so nothing shows through. */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--bg); }
/* Where it ends, once the page has moved under it. site.js marks the page as
   moved. A shadow one pixel deep and not a border, so the header is the same
   height either way. With scripts off the header still stays, without this. */
[data-scrolled] .site-header { box-shadow: 0 1px 0 var(--border); }
/* The links as a row of their own, for a screen too narrow to hold them in
   the header. Not shown on a wide one. */
.nav-under { display: none; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding-block: 22px; }
/* min-height: the logo is 34 px tall (28 px on a phone), and the link around
   it is a touch target, so the link is given the full 44 px.
   The logo is one SVG file drawn in currentColor, so the colour set here is
   the colour it takes: the theme's text colour, in either mode. */
.bl .nav-logo { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); }
.bl .nav-logo:hover { color: var(--text); }
.nav-logo svg { height: 34px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.bl .nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; color: var(--text); text-decoration: none; font-weight: 600; font-stretch: 106%; }
.bl .nav-links a:hover { background: var(--hoverWash); color: var(--text); }
.bl .nav-links a[aria-current="page"] { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--text); }
.nav-end { display: flex; align-items: center; gap: 10px; }

/* the light and dark switch: a form holding one round button */
.mode-switch { display: inline-flex; margin: 0; }
.ic-moon { display: var(--show-moon); }
.ic-sun { display: var(--show-sun); }

/* ---------- Hero ring (the brand's circle, used as a window onto products) ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-block: clamp(24px, 4vw, 56px) clamp(56px, 7vw, 96px); }
.hero-copy { display: flex; flex-direction: column; gap: 28px; }
.hero-copy .lead { max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-points { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.hero-points li { display: inline-flex; align-items: center; gap: 8px; }
.ring-stage { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.ring { position: relative; width: min(440px, 100%); aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--ring); padding: 16px; }
.ring-window { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--heroA); }
.ring-window img { width: 100%; height: 100%; object-fit: cover; }
/* the Blerc mark in the ring, as on the About artboard */
.ring-window-mark { display: grid; place-items: center; }
.ring-window-mark svg { width: 52%; height: auto; color: var(--onBand); }
.sticker {
  position: absolute; top: 4%; right: -2%; width: 122px; height: 122px; border-radius: 50%;
  display: grid; place-items: center; text-align: center; padding: 14px;
  background: var(--accent); color: var(--onAccent);
  font-weight: 800; font-stretch: 112%; font-size: .9375rem; line-height: 1.1;
  transform: rotate(-9deg); box-shadow: 0 6px 18px rgba(18, 26, 43, .18);
}

/* ---------- Sections ---------- */
.sec { padding-block: clamp(56px, 8vw, 112px); }
.sec-tight { padding-block: clamp(40px, 5vw, 72px); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); }
.band { background: var(--heroA); color: var(--onBand); }
.band .mut { color: var(--bandMut); }
.band .lead { color: var(--bandMut); }
.bl .band a:not(.btn):not(.sbtn) { color: var(--onBand); }
/* Not in the design file. The focus outline is the link colour, which is chosen
   to read on the page. On the band, in light mode, it nearly vanishes in two
   themes (Haunted House 2.5:1, Summer 2.1:1, against the 3:1 an outline needs).
   Inside the band the outline takes the band's own text colour. */
.bl .band :focus-visible { outline-color: var(--onBand); }
.rule { height: 0; border: 0; border-top: 1.5px solid var(--border); margin: 0; }

/* the call to action a page puts above the footer columns */
.cta { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-end; justify-content: space-between; }
.cta-copy { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* a short page that only has something to say: the 404 and the error page */
.page-note { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-block: clamp(48px, 8vw, 112px); }
.page-note .lead { max-width: 34em; }
.note-code { font-stretch: 112%; letter-spacing: .08em; }

/* footer */
.foot { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-block: 64px 40px; }
.cta + .wrap > .foot { border-top: 1px solid rgba(238, 242, 248, .16); }
.foot-brand { display: flex; flex-direction: column; gap: 16px; }
.foot-brand p { max-width: 32ch; }
.foot-logo { height: 34px; width: auto; align-self: flex-start; color: var(--onBand); }
.foot h2 { font-size: .9375rem; font-weight: 700; line-height: 1.55; margin-bottom: 14px; color: var(--onBand); }
.foot ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bl .foot a { color: var(--bandMut); text-decoration: none; }
.bl .foot a:hover { color: var(--onBand); text-decoration: underline; }
.legal { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-block: 22px; border-top: 1px solid rgba(238, 242, 248, .16); }
.legal-links { display: flex; gap: 20px; }

/* ---------- Never show what is marked hidden ---------- */
/* Several classes here set their own display, which would otherwise win over
   the browser's rule for the hidden attribute. The ring and the share button
   rely on hidden meaning hidden. */
.bl [hidden] { display: none !important; }

/* ---------- Hero ring: the picker and the line under it ---------- */
.ring-item { width: 100%; height: 100%; }
.ring-item .cover { width: 100%; height: 100%; }
.picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pick, .bl a.pick {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 5px 18px 5px 5px;
  border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface);
  font-family: var(--f-ui); font-size: 1rem; font-weight: 600; font-stretch: 106%; cursor: pointer; color: var(--text); text-decoration: none;
}
.pick:hover, .bl a.pick:hover { border-color: var(--textMut); color: var(--text); }
.pick[aria-pressed="true"], .pick[aria-current="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.pick-dot { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; }
.pick-dot img { width: 100%; height: 100%; object-fit: cover; }
.pick-dot .cover { width: 100%; height: 100%; padding: 0; }
.pick-dot .cover::after { display: none; }
.now { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.now p { max-width: 40ch; }

/* ---------- Product tiles (image + name + buttons on the image) ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 20px; }
.tile {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  border-radius: 22px; aspect-ratio: 16 / 10; background: var(--heroA); color: #FFFFFF;
}
.tile.span2 { grid-column: span 2; aspect-ratio: 21 / 10; }
/* the home page's tiles are taller than they are on the showcase */
.tile.tall, .tile.tall.span2 { aspect-ratio: auto; min-height: 340px; }
.tiles-home .tile.tall:nth-child(-n+2) { min-height: 420px; }
.tile > img, .tile > .cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.tile .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 13, 26, .92) 0%, rgba(8, 13, 26, .62) 36%, rgba(8, 13, 26, 0) 68%); transition: background-color .3s ease; }
.tile:hover > img, .tile:hover > .cover, .tile:focus-within > img, .tile:focus-within > .cover { transform: scale(1.04); }
.tile:hover .scrim, .tile:focus-within .scrim { background-color: rgba(8, 13, 26, .28); }
.tile-top { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; z-index: 2; pointer-events: none; }
.tile-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.tile-name { font-weight: 800; font-stretch: 116%; font-size: 1.625rem; line-height: 1.05; letter-spacing: -0.012em; }
.tile.span2 .tile-name { font-size: 2.125rem; }
.bl .tile-name a { color: #FFFFFF; text-decoration: none; }
/* the stretched link: the name's link covers the whole tile */
.tile-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* The focus outline is drawn round the whole tile, in white, where it can be
   seen against any picture. The link's own outline would hug the name alone. */
.bl .tile-name a:focus-visible { outline: none; }
.bl .tile-name a:focus-visible::after { outline: 3px solid #FFFFFF; outline-offset: -6px; border-radius: 18px; }
.tile-desc { font-size: .9375rem; line-height: 1.45; color: rgba(255, 255, 255, .88); max-width: 48ch; }
.tile-acts { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; max-height: 0; opacity: 0; transform: translateY(8px); overflow: hidden; transition: max-height .35s ease, opacity .25s ease, transform .35s ease; }
.tile:hover .tile-acts, .tile:focus-within .tile-acts { max-height: 140px; opacity: 1; transform: none; margin-top: 6px; }
/* For the keyboard the row is open at once, not slid open. A browser brings
   what the keyboard reaches into view as the page is at that moment. With the
   row still shut, it put the tile's name just under the header, and the row
   then slid open and pushed the name up behind it: seen tabbing back up the
   home page, 12 October 2026. A pointer keeps the slide. */
.tile:focus-within .tile-acts { transition: none; }
@media (hover: none) { .tile .tile-acts { max-height: none; opacity: 1; transform: none; margin-top: 6px; } }
/* room for the focus ring of a button inside the clipped row */
.tile-acts { padding: 3px; margin-inline: -3px; }

.chip-glass { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(12, 18, 34, .55); border: 1px solid rgba(255, 255, 255, .28); color: #FFFFFF; font-size: .8125rem; font-weight: 700; font-stretch: 108%; backdrop-filter: blur(8px); }
.chip-sun { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--accent); color: var(--onAccent); font-size: .8125rem; font-weight: 800; font-stretch: 108%; }

/* store and link buttons that sit on imagery */
.sbtn, .bl a.sbtn {
  display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 14px 0 12px; border-radius: 12px;
  background: rgba(255, 255, 255, .96); color: #121A2B; text-decoration: none; font-weight: 700; font-size: .875rem; line-height: 1.1;
}
.bl a.sbtn:hover { background: #FFFFFF; color: #121A2B; box-shadow: 0 0 0 3px rgba(255, 197, 61, .9); }
.bl .tile a.sbtn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.sbtn small { display: block; font-size: .6875rem; font-weight: 600; opacity: .7; letter-spacing: .01em; }
/* the same buttons on a light page */
.sbtn.solid, .bl a.sbtn.solid { background: var(--text); color: var(--bg); min-height: 54px; padding: 0 18px 0 14px; border-radius: 14px; font-size: .9375rem; }
.bl a.sbtn.solid:hover { background: var(--text); color: var(--bg); box-shadow: 0 0 0 3px var(--accent); }
.sbtn.line, .bl a.sbtn.line { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--text); min-height: 54px; padding: 0 18px 0 14px; border-radius: 14px; font-size: .9375rem; }
.bl a.sbtn.line:hover { background: var(--hoverWash); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--text); }

/* The stores' own badges, on the product page only. The artwork is each
   store's file, unaltered. Apple asks for at least 40 px of height and a
   quarter of that as clear space. Google's file has its clear space built
   in, so it is drawn larger and pulled back by that margin, which leaves its
   visible badge the same height as the other two. */
.store-badge, .bl a.store-badge { display: inline-flex; border-radius: 10px; }
.store-badge img { display: block; width: auto; height: 54px; }
.store-badge-google img { height: 80px; margin: -13px; }

/* generated cover for products without artwork: the product's colour, the
   brand ring pattern, and its name. The colour is the fill of a small SVG. */
.cover { position: relative; display: grid; place-items: center; padding: 24px; color: #FFFFFF; overflow: hidden; background-color: var(--primaryBtn); }
.cover-fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover-fill-default { fill: var(--primaryBtn); }
.cover::after { content: ""; position: absolute; inset: 0; background-image: repeating-radial-gradient(circle at 78% 30%, rgba(255, 255, 255, 0) 0 26px, rgba(255, 255, 255, .09) 26px 28px); }
.cover-word { position: relative; z-index: 1; font-weight: 900; font-stretch: 125%; font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -0.03em; line-height: .95; text-align: center; }
/* On a tile the name sits in the top half, clear of the words at the bottom,
   and is small enough that a long name stays out of their way. */
.tile > .cover { align-items: start; padding-top: 64px; }
.tile > .cover .cover-word { font-size: clamp(1.5rem, 2.4vw, 2.125rem); max-width: 14ch; }
.tile.span2 > .cover .cover-word { font-size: clamp(2rem, 4.4vw, 3.4rem); padding-top: 24px; }

/* ---------- Sections ---------- */
.sec-work { padding-top: 24px; }
.sec-surface { background: var(--surface); }
.sec-surface2 { background: var(--surface2); }
.sec-ruled { border-block: 1px solid var(--border); }
.sec-head-copy { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.sec-head-flush { margin: 0; }
.stack-40 { display: flex; flex-direction: column; gap: 40px; }
.svc-title { max-width: 16ch; }
.svc-lead { max-width: 30em; }

/* the top of a page that starts with breadcrumbs and a heading */
.page-top { padding-block: clamp(32px, 5vw, 72px) 32px; display: flex; flex-direction: column; gap: 28px; }

/* type filters: plain links to real pages */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter, .bl a.filter { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600; font-stretch: 106%; text-decoration: none; }
.bl a.filter:hover { border-color: var(--textMut); color: var(--text); }
.filter .n { font-size: .8125rem; color: var(--textMut); font-weight: 700; }
.filter[aria-current="page"], .bl a.filter[aria-current="page"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.filter[aria-current="page"] .n { color: var(--bg); opacity: .75; }

/* the segmented choice: links on the showcase, radio buttons on the form */
.seg { display: inline-flex; flex-wrap: wrap; padding: 4px; border-radius: 999px; background: var(--surface2); gap: 4px; }
.bl .seg a, .seg-radio span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; font-weight: 600; font-stretch: 106%; color: var(--textMut); text-decoration: none; cursor: pointer; }
.bl .seg a:hover, .seg-radio label:hover span { color: var(--text); }
.bl .seg a[aria-current="true"], .seg-radio input:checked + span { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(18, 26, 43, .12), 0 0 0 1px var(--border); }
.seg-radio { border-radius: 24px; align-self: flex-start; }
.seg-radio label { position: relative; display: inline-flex; }
.seg-radio input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg-radio input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 2px; }

/* services as a set of rows */
.svc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, .8fr); gap: 12px 40px; padding-block: 34px; border-top: 1.5px solid var(--border); align-items: start; }
.svc:last-child { border-bottom: 1.5px solid var(--border); }
.svc-links { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.svc-links a { align-self: flex-start; display: inline-flex; align-items: center; min-height: 28px; }

/* process: a real sequence, so numbered */
.steps-wrap { display: flex; flex-direction: column; gap: 40px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 28px; list-style: none; padding: 0; }
.step { display: flex; flex-direction: column; gap: 12px; }
.step-n { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--onAccent); font-weight: 900; font-stretch: 118%; font-size: 1.25rem; }

/* client quotes */
.quotes { display: flex; flex-direction: column; gap: 40px; }
.quote { display: flex; flex-direction: column; gap: 20px; max-width: 860px; padding-top: 40px; border-top: 1.5px solid var(--border); }
.quote blockquote { margin: 0; font-family: var(--f-read); font-style: italic; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.35; text-wrap: pretty; }
.quote figcaption { display: flex; align-items: center; gap: 12px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--heroA); color: var(--onBand); font-weight: 800; font-size: .875rem; flex: none; }
.avatar.sun { background: var(--accent); color: var(--onAccent); }

/* the short call to action: a heading and a button */
.cta-short { align-items: center; gap: 24px; }
.cta-short h2 { max-width: 22ch; }

/* breadcrumbs */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .9375rem; color: var(--textMut); list-style: none; padding: 0; }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; }
/* The design draws the slash in the border colour, which is too faint to see
   (1.3:1). It is decoration, but a trail nobody can read as a trail is no use,
   so it takes the muted text colour. */
.crumbs li + li::before { content: "/"; color: var(--textMut); font-weight: 700; }
.bl .crumbs a { display: inline-flex; align-items: center; min-height: 28px; color: var(--textMut); text-decoration: none; }
.bl .crumbs a:hover { color: var(--text); text-decoration: underline; }

/* ---------- Showcase ---------- */
.showcase-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.showcase-head-copy { display: flex; flex-direction: column; gap: 16px; max-width: 700px; }
.showcase-tiles { padding-bottom: clamp(56px, 8vw, 112px); }

/* ---------- Product page ---------- */
.product-top { padding-block: 24px clamp(48px, 6vw, 88px); display: flex; flex-direction: column; gap: 28px; }
.product-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: clamp(28px, 4vw, 56px); align-items: center; }
.product-figure { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--heroA); }
.product-figure img { width: 100%; height: 100%; object-fit: cover; }
.product-figure .cover { position: absolute; inset: 0; }
.product-intro { display: flex; flex-direction: column; gap: 22px; }
.product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; font-size: .9375rem; padding-top: 18px; border-top: 1.5px solid var(--border); }
.facts dt { color: var(--textMut); }
.facts dd { font-weight: 600; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--surface2); color: var(--text); font-size: .875rem; font-weight: 600; }
.tag.sun { background: var(--accentSoft); color: var(--accentText); }
.tag.ok { background: var(--okSoft); color: var(--ok); }

.product-story-band { background: var(--surface); border-block: 1px solid var(--border); }
.product-story { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 72px); padding-block: clamp(48px, 6vw, 96px); align-items: flex-start; }
.story { flex: 999 1 560px; min-width: 0; max-width: 720px; }
.story > p:first-child { font-size: 1.375rem; line-height: 1.55; }
.story > h2:first-child { margin-top: 0; }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; margin-top: 1em; }
.shot-img { width: 100%; height: auto; border-radius: 18px; background: var(--surface2); }
.client-quote { margin: 2em 0 0; padding-left: 20px; border-left: 3px solid var(--accent); font-style: italic; }
.client-quote footer { margin-top: .6em; font-family: var(--f-ui); font-style: normal; }
.product-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.side-buttons { display: flex; flex-direction: column; gap: 10px; }
/* "Coming soon to Google Play and the App Store." It belongs to the buttons above it. */
.side-coming { margin-top: -8px; }
.side-links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.side-links a { display: inline-flex; align-items: center; min-height: 32px; }
.share { align-self: flex-start; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.card-shadow { box-shadow: var(--cardShadow); }
.h-card { font-weight: 700; font-stretch: 108%; font-size: 1.125rem; line-height: 1.25; }

/* questions: native details and summary, so they open with no script */
.product-faq { display: flex; flex-wrap: wrap; gap: 32px clamp(32px, 6vw, 96px); }
.product-faq > h2 { flex: 1 1 280px; }
.faq { flex: 999 1 560px; min-width: 0; border-top: 1.5px solid var(--border); }
.faq-item { border-bottom: 1.5px solid var(--border); }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 16px 0; font-weight: 700; font-stretch: 108%; font-size: 1.125rem; cursor: pointer; color: var(--text); list-style: none; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q .ic { transition: transform .2s ease; }
.faq-item[open] .faq-q .ic { transform: rotate(180deg); }
.faq-a { padding: 4px 0 22px; font-size: 1.0625rem; }

/* ---------- About ---------- */
.about-top { padding-bottom: clamp(48px, 6vw, 88px); }
.about-top h1 { max-width: 14ch; }
.about-lead { font-family: var(--f-read); font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.32; max-width: 30ch; text-wrap: pretty; }
.about-story { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: clamp(40px, 6vw, 96px); align-items: center; }
.about-ring { display: grid; place-items: center; }
.ring-about { width: min(400px, 100%); }
.about-story-copy { display: flex; flex-direction: column; gap: 1em; max-width: 620px; }
.about-story-copy h2 { font-family: var(--f-ui); margin: 0; }
.about-story-copy p + p { margin-top: 0; }
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 40px; }
.value { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 3px solid var(--text); }
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 32px; }
.people-lead { max-width: 38ch; }
.person { display: flex; flex-direction: column; gap: 16px; }
.person-ring { width: 168px; height: 168px; border-radius: 50%; border: 3px solid var(--ring); padding: 8px; }
.person-face { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-stretch: 118%; font-size: 2rem; }
.face-0 { background: var(--heroA); color: var(--onBand); }
.face-1 { background: var(--accent); color: var(--onAccent); }
.face-2 { background: var(--primaryBtn); color: var(--onPrimaryBtn); }
.person-role { color: var(--primary); }
.tools { display: flex; flex-wrap: wrap; gap: 32px clamp(32px, 6vw, 96px); }
.tools-copy { flex: 1 1 320px; display: flex; flex-direction: column; gap: 12px; }
.tools-tags { flex: 999 1 560px; list-style: none; padding: 0; align-content: flex-start; }

/* ---------- Contact ---------- */
.contact { display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 96px); padding-block: clamp(32px, 5vw, 72px) clamp(64px, 8vw, 120px); align-items: flex-start; }
.contact-info { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.contact-ways { list-style: none; padding: 0; display: flex; flex-direction: column; border-top: 1.5px solid var(--border); }
.contact-ways li { display: flex; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1.5px solid var(--border); }
.contact-way { font-size: 1.125rem; }
.bl a.contact-way { display: inline-flex; align-items: center; min-height: 28px; }
.icon-plain { pointer-events: none; flex: none; }
.contact-social { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.contact-social a { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; min-width: 24px; }
.contact-form { flex: 999 1 560px; padding: clamp(22px, 3vw, 40px); gap: 24px; }
.contact-send { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.contact-send p { max-width: 46ch; }
/* What the form says back (Phase 7): sent, or what stopped it. The design's
   "Message sent" box (Contact.dc.html), and the same box in the colours of a
   problem. A problem with one field is said under that field, in words, and
   the field is marked for a screen reader as well as by its border. */
.contact-said { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 14px; color: var(--text); }
.contact-sent { background: var(--okSoft); }
.contact-refused { background: var(--badSoft); }
.contact-said .dot-ok { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface); color: var(--ok); }
.contact-said .dot-ok .ic { width: 14px; height: 14px; }
.contact-form .err { color: var(--bad); font-size: .875rem; font-weight: 600; }
.contact-form .input[aria-invalid="true"] { border-color: var(--bad); }
/* The field no person fills in: off the screen, never shown, never reached. */
.contact-extra { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.fieldset { border: 0; padding: 0; margin: 0; }
.fieldset > legend { margin-bottom: 7px; }
.field > label, .lbl { font-weight: 600; font-size: .9375rem; color: var(--text); padding: 0; }
.req { color: var(--bad); }
.input {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--fieldBorder); background: var(--field); color: var(--text);
  font-family: var(--f-ui); font-size: 1rem; line-height: 1.4;
}
.input::placeholder { color: var(--textMut); opacity: 1; }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--hoverWash), 0 0 0 1px var(--primary); }
textarea.input { min-height: 140px; resize: vertical; }
.hint { font-size: .8125rem; line-height: 1.45; color: var(--textMut); }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--textMut) 50%), linear-gradient(135deg, var(--textMut) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px; }
.reveal { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--fieldBorder); background: var(--surface); cursor: pointer; font-weight: 600; text-align: left; color: var(--text); }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--primary); background: var(--hoverWash); }
.choice:has(input:focus-visible) { outline: 3px solid var(--primary); outline-offset: 2px; }
.box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--fieldBorder); display: grid; place-items: center; flex: none; background: var(--field); }
.box .ic { width: 14px; height: 14px; stroke-width: 2.6; opacity: 0; }
.choice input:checked + .box { background: var(--primaryBtn); border-color: var(--primaryBtn); color: var(--onPrimaryBtn); }
.choice input:checked + .box .ic { opacity: 1; }

/* The contact form's topic. The three radio buttons are real, and :has()
   shows the fields that go with the chosen one. No script is involved. A
   browser without :has() shows every field, which is still a working form. */
.reveal-project, .reveal-help, .hint-project, .hint-help, .hint-join { display: none; }
.contact-form:has(input[name="topic"][value="NewProject"]:checked) .reveal-project,
.contact-form:has(input[name="topic"][value="AppHelp"]:checked) .reveal-help { display: flex; }
.contact-form:has(input[name="topic"][value="NewProject"]:checked) .hint-project,
.contact-form:has(input[name="topic"][value="AppHelp"]:checked) .hint-help,
.contact-form:has(input[name="topic"][value="WorkingWithBlerc"]:checked) .hint-join { display: inline; }
@supports not selector(:has(*)) {
  .reveal-project, .reveal-help { display: flex; }
  .hint-project { display: inline; }
}

/* ---------- Pages of text: the policies and a product's support pages ---------- */
.text-page { padding-block: clamp(32px, 5vw, 72px) clamp(56px, 8vw, 112px); display: flex; flex-direction: column; gap: 28px; }
.text-body { max-width: 720px; }
.text-page > p > a { display: inline-flex; align-items: center; min-height: 32px; }
.read h3 { font-family: var(--f-ui); font-weight: 700; font-stretch: 108%; font-size: 1.25rem; line-height: 1.2; margin: 1.8em 0 .5em; }
.read ol { padding-left: 1.4em; margin-top: 1em; display: flex; flex-direction: column; gap: .4em; }
.read ul + p, .read ol + p, .read blockquote + p { margin-top: 1em; }
.read blockquote { margin: 1.2em 0 0; padding-left: 20px; border-left: 3px solid var(--border); color: var(--textMut); }
.read code { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: .9em; padding: 2px 6px; border-radius: 6px; background: var(--surface2); }
.read figure { margin-top: 1.4em; }
.read figure img { border-radius: 14px; height: auto; }
.read figcaption { margin-top: .5em; font-family: var(--f-ui); font-size: .875rem; color: var(--textMut); }
.read table { width: 100%; border-collapse: collapse; margin-top: 1.2em; font-family: var(--f-ui); font-size: .9375rem; }
.read th, .read td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .svc { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile.span2 { grid-column: auto; aspect-ratio: 16 / 10; }
  .tile.tall.span2 { aspect-ratio: auto; }
}
/* Under this width the three links do not fit between the logo and the
   buttons. They leave the header for a row of their own beneath it, which
   scrolls away with the page, and the header stays one row. No menu button
   (Phase 0 answers, question 8). */
@media (max-width: 820px) {
  .nav-links-wide { display: none; }
  .nav-under { display: block; padding-bottom: 16px; }
}
@media (max-width: 560px) {
  .foot { grid-template-columns: minmax(0, 1fr); }
  /* Phone navigation: the links' row is spread across the screen, 16 px
     under the header's row, as the phone artboard has the two rows. */
  .nav-under { padding-block: 2px 14px; }
  .nav-under .nav-links { justify-content: space-between; }

  /* Sizes from the phone artboard, MobileHome.dc.html. The header is 72 px
     tall here: 14, the 44 of a touch target, and 14. */
  html { --stuck: 72px; }
  .nav { padding-block: 14px; }
  .nav-logo svg { height: 28px; }
  .d-xl { font-size: 2.35rem; }
  .d-l { font-size: 1.85rem; }
  .lead { font-size: 1.125rem; }
  .hero-copy { gap: 22px; }
  .hero-actions { flex-direction: column; gap: 10px; }
  .ring { width: min(300px, 100%); padding: 12px; }
  .sticker { width: 92px; height: 92px; font-size: .75rem; padding: 10px; right: -4%; }
  .cta-actions { flex-direction: column; width: 100%; }
  .tiles-home .tile.tall:nth-child(-n+2) { min-height: 360px; }
  .tile.span2 .tile-name { font-size: 1.625rem; }
  .person-ring { width: 132px; height: 132px; }
  .contact-send .btn { width: 100%; }
  .faq-q { font-size: 1.0625rem; }

  /* On a phone, a link that stands on its own line is given the full 44 px to
     press (brief, section 1, rule 9). The design's lists are tighter than
     that, so the gap between the lines goes and the links grow into it.
     A link inside a sentence is left as it is. */
  .foot ul { gap: 0; }
  .side-links { gap: 0; }
  .svc-links { gap: 0; }
  .bl .foot a, .bl .legal-links a, .bl .crumbs a, .side-links a, .svc-links a, .contact-social a, .bl a.contact-way, .text-page > p > a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  /* A short word is narrower than 44 px: "X" is 11 px across, "Terms" 39 and
     "Home" 41. The last legal link keeps its text on the right-hand edge. */
  .contact-social a, .bl .foot a, .bl .legal-links a, .bl .crumbs a { min-width: 44px; }
  .bl .legal-links a:last-child { justify-content: flex-end; }
  .legal { align-items: center; }
}
/* Narrower than the phone artboard's 390 px, the logo, the switch and the
   button do not fit in one row as they are drawn there. The row has to stay
   one row, because it is the part that stays at the top of the screen. So
   the gaps tighten and the logo gives way: it is as wide as what is left,
   and as tall as that makes it, which is a little shorter on the narrowest
   phones. */
@media (max-width: 389px) {
  .nav { flex-wrap: nowrap; gap: 8px; }
  .nav-end { flex: none; gap: 6px; }
  .nav-end .btn-sm { padding-inline: 12px; }
  .bl .nav-logo { flex: 0 1 129px; min-width: 0; }
  .nav-logo svg { flex: 1 1 auto; min-width: 0; width: 100%; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .bl * { transition: none !important; animation: none !important; }
}
/* On paper the header is an ordinary header at the top of the first page. */
@media print {
  .site-header { position: static; box-shadow: none; }
}