/* The site shell (Brief 19, D-070): one header, one footer, one set of buttons, one type pair and the poster page head on
   every public page, the landing page and the login bridge. Variant 11's design system (docs/design/variants/v11.md):
   Boldonse for statements and page titles, Work Sans for text, sun yellow as a field, poster ink, square corners, 3-px
   rules. All colours are tokens from feldmelder.css (:root, --lp-*); light by default, dark through data-bs-theme. */
@font-face { font-family: "Boldonse"; font-weight: 400; font-display: block; src: url("../fonts/boldonse/boldonse-400.woff2") format("woff2"); }
/* Work Sans "optional" (Brief 20): text paints at once; if the preloaded font is not there within ~100 ms the page keeps the
   fallback for this view instead of swapping later (no layout shift) – "block" held the mobile LCP above 2.5 s */
@font-face { font-family: "Work Sans"; font-weight: 400; font-display: optional; src: url("../fonts/worksans/worksans-400.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-weight: 700; font-display: optional; src: url("../fonts/worksans/worksans-700.woff2") format("woff2"); }
/* The site manages its own colours in both themes. "only" keeps phone browsers from recolouring it on their own (Chrome's
   auto dark mode, Samsung Internet's dark mode) – a light-only page was darkened there: the sun-yellow poster turned brown
   and the logo grey (owner, live site, after Brief 19). */
:root, :root[data-bs-theme="light"] { color-scheme: only light; }
:root[data-bs-theme="dark"] { color-scheme: only dark; }
/* the same for browsers that look for a dark-scheme rule before darkening a page on their own: on a dark system the site
   still shows the theme the visitor chose (light unless switched, D-029) */
@media (prefers-color-scheme: dark) { :root:not([data-bs-theme="dark"]) { color-scheme: only light; } }
/* The landing page's header and first poster are one fixed look in both themes: white bar, colour logo, sun-yellow
   poster with ink text (light-dark() tokens resolve to their light values here); the sections below follow the theme. */
.lp-page .lp-head, .lp-page .lp-p1 { color-scheme: only light; }
.lp-head, .lp-foot, .lp-btn, .fm-site { --sun: var(--lp-sun); --ink: var(--lp-poster-ink); --m: clamp(1.25rem, 4vw, 4rem); }

.lp-skip { position: absolute; left: .75rem; top: -3rem; z-index: 100; padding: .6rem 1rem; background: var(--lp-poster-ink); color: var(--lp-white);
  text-decoration: none; font-weight: 700; }
.lp-skip:focus { top: .75rem; }

/* logo versions (docs/brand.md): mark, dot, word through the sprite's custom properties */
.lp-logo { display: block; height: auto; flex-shrink: 0; }
.lp-logo--h { aspect-ratio: 13097.4 / 1877.9; }
.lp-logo--v { aspect-ratio: 10638 / 5308.6; }
.lp-logo--mark { aspect-ratio: 16.8 / 18.1; }
.lp-logo--colour { color: var(--lp-ink); --fm-logo-mark: var(--lp-green); --fm-logo-dot: var(--lp-sun); }
.lp-logo--dark { color: var(--lp-white); --fm-logo-mark: var(--lp-green-bright); --fm-logo-dot: var(--lp-sun); }
.lp-logo--on-green { color: var(--lp-white); --fm-logo-mark: var(--lp-white); --fm-logo-dot: var(--lp-sun); }
.lp-logo--white { color: var(--lp-white); --fm-logo-mark: var(--lp-white); --fm-logo-dot: var(--lp-white); }
.lp-logo--black { color: var(--lp-ink); --fm-logo-mark: var(--lp-ink); --fm-logo-dot: var(--lp-ink); }
/* on the sub-pages' dark theme the header's colour lockup becomes the dark version – the green mark stays (Brief 19);
   the landing page keeps the colour version on its white bar */
:root[data-bs-theme="dark"] body:not(.lp-page) .lp-head .lp-logo--colour { color: var(--lp-white); --fm-logo-mark: var(--lp-green-bright); }

/* header: a paper bar (white / slate-950) above every page; the colour logo, links, language, log in */
.lp-head { position: relative; z-index: 30; display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem; padding: 0 var(--m);
  background: var(--lp-paper); color: var(--lp-paper-ink); border-bottom: 3px solid var(--lp-paper-line);
  font: 400 1rem/1.4 "Work Sans", system-ui, sans-serif; }
.lp-brand { display: inline-flex; align-items: center; min-height: 2.75rem; }
.lp-brand .lp-logo { width: 10.5rem; }
.lp-head a, .lp-head button { color: var(--lp-paper-ink); }
.lp-menu-btn { margin-left: auto; min-height: 2.75rem; padding: 0 1rem; border: 3px solid currentColor; background: none; font: 700 1rem "Work Sans", sans-serif; cursor: pointer; }
.lp-menu { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; display: grid; gap: .5rem; padding: 1rem var(--m); background: var(--lp-paper);
  border-bottom: 3px solid var(--lp-paper-line); }
.lp-js .lp-menu:not(.is-open) { display: none; }
.lp-nav { display: grid; margin: 0; padding: 0; list-style: none; }
.lp-nav a, .lp-login { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; font-weight: 700; }
.lp-nav a:hover, .lp-login:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .25em; }
.lp-lang { display: flex; }
.lp-lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; text-decoration: none; font-weight: 700; }
.lp-head .lp-lang a[aria-current] { background: var(--lp-paper-ink); color: var(--lp-paper); }
.lp-login { padding: 0 1rem; border: 3px solid currentColor; }
@media (min-width: 900px) {
  .lp-menu-btn { display: none; }
  .lp-menu, .lp-js .lp-menu:not(.is-open) { position: static; display: flex; align-items: center; gap: 1.5rem; flex: 1; padding: 0; border: 0; background: none; }
  .lp-nav { display: flex; gap: 1.5rem; }
  .lp-lang { margin-left: auto; }
}

/* buttons: square, 3-px rule; ink fill for the primary action */
.lp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.5rem; border: 3px solid currentColor;
  color: inherit; text-decoration: none; font: 700 1.0625rem/1.2 "Work Sans", system-ui, sans-serif; background: transparent; cursor: pointer; }
.lp-btn:hover { background: rgba(17, 17, 17, .08); }
.lp-btn:active { scale: .96; }
.lp-btn-ink { background: var(--ink); border-color: var(--ink); color: var(--lp-white); }
.lp-btn-ink:hover { background: var(--lp-poster-ink-hover); }
@media (prefers-reduced-motion: reduce) { .lp-btn:active { scale: 1; } }

/* footer: ink ground, the dark logo version (green mark), product and legal links, language, light/dark */
.lp-foot { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 2.5rem var(--m) 3rem; background: var(--lp-poster-ink);
  color: var(--lp-white); font: 400 1rem/1.5 "Work Sans", system-ui, sans-serif; }
.lp-foot-brand { grid-column: 1 / -1; display: inline-flex; align-items: center; min-height: 2.75rem; }
.lp-foot-logo { width: 10rem; }
.lp-foot-list { margin: 0; padding: 0; list-style: none; }
.lp-foot-list a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--lp-white); text-decoration: none; }
.lp-foot-list a:hover { text-decoration: underline; }
.lp-foot-end { grid-column: 1 / -1; display: grid; gap: .75rem; justify-items: start; }
.lp-foot-end p { margin: 0; color: var(--lp-foot-muted); }
.lp-foot .lp-lang a { color: var(--lp-white); }
.lp-foot .lp-lang a[aria-current] { background: var(--lp-sun); color: var(--lp-poster-ink); }
.lp-theme { min-height: 2.75rem; padding: 0 1rem; border: 3px solid var(--lp-white); background: none; color: var(--lp-white); font: 700 .9375rem "Work Sans", sans-serif; cursor: pointer; }
@media (min-width: 900px) { .lp-foot { grid-template-columns: 3fr 2fr 2fr 2fr 3fr; } .lp-foot-brand, .lp-foot-end { grid-column: auto; } }

/* focus on the shell: an ink ring with a white inner ring reads on yellow, white and ink (the sun ring would vanish on yellow) */
.lp-head :focus-visible, .lp-foot :focus-visible, .lp-btn:focus-visible { outline: 3px solid var(--lp-sun); outline-offset: 2px; box-shadow: 0 0 0 2px var(--lp-poster-ink); }
@media print { .lp-head, .lp-foot, .lp-skip { display: none !important; } }

/* ------------------------------------------------------------------ public sub-pages in the poster language (Brief 19)
   CSS only – the pages' content and legal texts are unchanged. The page head becomes a full-width sun-yellow poster band
   (the landing page's first poster), the title in Boldonse; text in Work Sans; cards, buttons and fields square with the
   poster's ink rules. Tabler stays for the components. */
.fm-public { --tblr-body-font-family: "Work Sans", system-ui, sans-serif; --tblr-font-sans-serif: "Work Sans", system-ui, sans-serif;
  --tblr-body-bg: var(--lp-paper-2); background: var(--lp-paper-2); }
.fm-public h2, .fm-public h3, .fm-public .h2, .fm-public .h3, .fm-public .fm-h2, .fm-public .card-title { font-family: "Work Sans", system-ui, sans-serif;
  font-weight: 700; letter-spacing: -.01em; }
.fm-public h1, .fm-public .h1, .fm-public-plant .page-title { font-family: "Boldonse", "Work Sans", sans-serif; font-weight: 400; letter-spacing: -.02em;
  line-height: 1.3; hyphens: auto; overflow-wrap: break-word; color: var(--lp-poster-ink); }
/* one long compound word per title (AVV, AGB, privacy policy): on phones Boldonse is too wide for it at the normal
   size, and a browser without a German hyphenation dictionary would break it without a hyphen – so it gets smaller */
@media (max-width: 575.98px) {
  .fm-public .fm-page-head h1.fm-h1-long { font-size: min(1.5rem, 6.2vw); }
  .fm-public .fm-page-head h1.fm-h1-xlong { font-size: min(1.25rem, 5.1vw); }
}

/* the poster band: the page head runs edge to edge in sun yellow from the header down (box-shadow + clip-path widen it) */
.fm-public .section:first-of-type { padding-top: 0; }
.fm-public .fm-page-head, .fm-public .fm-error-body, .fm-public-plant .page-header {
  position: relative; background: var(--lp-sun); color: var(--lp-poster-ink);
  box-shadow: 0 0 0 100vmax var(--lp-sun); clip-path: inset(0 -100vmax); padding: 2.5rem 0 2.25rem; margin-bottom: 3rem; max-width: none; }
.fm-public .fm-page-head .h1 { font-size: clamp(1.75rem, 3.6vw + .5rem, 3.75rem); margin: 0; max-width: 22ch; }
.fm-public .fm-page-head .fm-lead { color: var(--lp-poster-ink); font-weight: 700; max-width: 40rem; }
.fm-public .fm-page-head a { color: var(--lp-poster-ink); }
.fm-public-plant .page-header { margin-bottom: 1.5rem; padding: 2rem 0 1.75rem; }
.fm-public-plant .page-title { font-size: clamp(1.5rem, 2.4vw + .5rem, 2.5rem); }
.fm-public-plant .page-pretitle { color: var(--lp-poster-ink); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: .9375rem; }
.fm-public .fm-error-body { max-width: none; padding: 3rem 0; }
.fm-public .fm-error-body .h1 { font-size: clamp(1.75rem, 3.6vw + .5rem, 3.25rem); }
.fm-public .fm-error-body .text-secondary { color: var(--lp-poster-ink) !important; font-weight: 700; }
.fm-public .fm-error-body .btn-cta-outline { --tblr-btn-border-color: var(--lp-poster-ink); --tblr-btn-color: var(--lp-poster-ink); }
.fm-public .fm-error-code { font-family: "Boldonse", sans-serif; font-weight: 400; color: var(--lp-poster-ink); }

/* cards, fields, buttons: square, ink rules, no shadow at rest */
.fm-public .card { border: 3px solid var(--lp-paper-line); border-radius: 0; box-shadow: none; background: var(--lp-paper); }
.fm-public .card-active { background: var(--lp-paper); }
.fm-public .card-status-top { height: .5rem; background: var(--lp-sun) !important; border-radius: 0; }
.fm-public .form-control, .fm-public .form-select { border: 2px solid var(--lp-paper-line); border-radius: 0; background-color: var(--lp-paper); }
.fm-public .btn { border-radius: 0; font-weight: 700; }
.fm-public .btn-primary, .fm-public .btn-cta, .fm-bridge .btn-primary {
  --tblr-btn-bg: var(--lp-poster-ink); --tblr-btn-border-color: var(--lp-poster-ink); --tblr-btn-color: var(--lp-white);
  --tblr-btn-hover-bg: var(--lp-poster-ink-hover); --tblr-btn-hover-border-color: var(--lp-poster-ink-hover); --tblr-btn-hover-color: var(--lp-white);
  --tblr-btn-active-bg: var(--lp-poster-ink-hover); --tblr-btn-active-border-color: var(--lp-poster-ink-hover); --tblr-btn-active-color: var(--lp-white);
  border-width: 3px; box-shadow: none; filter: none; background-image: none; }   /* flat ink: no Tabler sheen */
.fm-public .btn-outline-primary, .fm-public .btn-cta-outline, .fm-public .card .btn:not(.btn-primary) {
  --tblr-btn-bg: transparent; --tblr-btn-border-color: var(--lp-paper-ink); --tblr-btn-color: var(--lp-paper-ink);
  --tblr-btn-hover-bg: var(--lp-paper-ink); --tblr-btn-hover-border-color: var(--lp-paper-ink); --tblr-btn-hover-color: var(--lp-paper);
  border-width: 3px; }
.fm-public .feature-icon { border-radius: 0; background: var(--lp-sun); color: var(--lp-poster-ink); }
.fm-public .fm-legal-note { border-radius: 0; border: 3px solid var(--lp-paper-line); background: var(--lp-paper); }
[data-bs-theme="dark"] .fm-public .fm-page-head .h1, [data-bs-theme="dark"] .fm-public-plant .page-title { color: var(--lp-poster-ink); }

/* Brief 20 content pages (D-072): breadcrumbs in the band, a reading column, claims with the ink rule, steps, comparison
   table, glossary, FAQ as <details>, the status line and the call to action as a square ink-framed card */
/* links inside running text are underlined, not told apart by colour alone (WCAG 1.4.1; Lighthouse link-in-text-block) */
.fm-public main :is(p, li, dd, td) a:not(.btn) { text-decoration: underline; text-underline-offset: .15em; }
.fm-crumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0 0 1rem; padding: 0; list-style: none; font-weight: 700; font-size: .9375rem; }
.fm-crumbs li + li::before { content: "/"; margin-right: .5rem; }
.fm-crumbs a { display: inline-flex; align-items: center; min-height: 1.5rem; color: var(--lp-poster-ink); }
.fm-content-body { max-width: 46rem; }
.fm-content-body p, .fm-content-body li, .fm-content-body dd { font-size: 1.0625rem; line-height: 1.6; }
.fm-block { margin: 0 0 2.5rem; }
.fm-block h2, .fm-steps h2 { font-size: 1.5rem; margin: 0 0 .75rem; }
.fm-list { padding-left: 1.25rem; }
.fm-list li { margin-bottom: .35rem; }
.fm-claims { margin: 0; padding: 0; list-style: none; }
.fm-claims li { margin: 0 0 .75rem; padding: .25rem 0 .25rem 1rem; border-left: 4px solid var(--lp-green); }
.fm-limits { padding: 1.25rem 1.5rem; border: 3px solid var(--lp-paper-line); background: var(--lp-paper); }
.fm-limits .fm-list { margin-bottom: 0; }
.fm-status { padding: 1rem 1.25rem; border-left: 4px solid var(--lp-poster-ink); background: var(--lp-paper); font-weight: 700; }
.fm-steps { counter-reset: none; margin: 0 0 2.5rem; padding: 0; list-style: none; display: grid; gap: 1rem; }
.fm-steps li { padding: 1.25rem 1.5rem; border: 3px solid var(--lp-poster-ink); background: var(--lp-paper); }
.fm-steps p { margin: 0; }
.fm-cards { display: grid; gap: 1rem; margin: 0 0 2.5rem; padding: 0; list-style: none; }
@media (min-width: 768px) { .fm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fm-cards a { display: grid; gap: .35rem; height: 100%; padding: 1.25rem 1.5rem; border: 3px solid var(--lp-poster-ink); background: var(--lp-paper);
  color: var(--lp-paper-ink); text-decoration: none; }
.fm-public main .fm-cards a:not(.btn) { text-decoration: none; }   /* a whole card is the link: underline on hover only */
.fm-cards a:hover strong { text-decoration: underline; }
.fm-cards strong { font-size: 1.25rem; }
.fm-cards span { color: var(--lp-paper-muted); }
.fm-compare-wrap { overflow-x: auto; margin: 0 0 2.5rem; border: 3px solid var(--lp-poster-ink); background: var(--lp-paper); }
.fm-compare { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: 1rem; }
.fm-compare th, .fm-compare td { padding: .75rem 1rem; border-bottom: 1px solid var(--lp-paper-line); text-align: left; vertical-align: top; }
.fm-compare thead th { background: var(--lp-poster-ink); color: var(--lp-white); }
.fm-compare tbody th { width: 22%; font-weight: 700; }
/* phones: one block per criterion, each answer labelled with its approach – no sideways scrolling */
@media (max-width: 767.98px) {
  .fm-compare { min-width: 0; }
  .fm-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .fm-compare tr, .fm-compare th, .fm-compare td { display: block; width: auto; }
  .fm-compare tbody th { width: auto; background: var(--lp-poster-ink); color: var(--lp-white); }
  .fm-compare td { border-bottom: 1px solid var(--lp-paper-line); }
  .fm-compare td::before { content: attr(data-label); display: block; font-weight: 700; font-size: .875rem; color: var(--lp-paper-muted); }
}
.fm-terms { margin: 0 0 2.5rem; }
.fm-terms div { padding: 1rem 0; border-bottom: 1px solid var(--lp-paper-line); scroll-margin-top: 5rem; }
.fm-terms dt { font-size: 1.25rem; font-weight: 700; }
.fm-terms dd { margin: .35rem 0 0; }
.fm-faq details { border-top: 1px solid var(--lp-paper-line); }
.fm-faq details:last-child { border-bottom: 1px solid var(--lp-paper-line); }
.fm-faq summary { display: flex; align-items: center; min-height: 3rem; padding: .5rem 0; font-weight: 700; cursor: pointer; }
.fm-faq details p { margin: 0 0 1rem; }
.fm-sources { padding-left: 1.25rem; font-size: .9375rem; }
.fm-tm { font-size: .9375rem; color: var(--lp-paper-muted); }
.fm-cta-band { margin: 1rem 0 3rem; padding: 2rem; border: 3px solid var(--lp-poster-ink); background: var(--lp-paper); max-width: 46rem; }
.fm-cta-band h2 { font-family: "Boldonse", "Work Sans", sans-serif; font-weight: 400; font-size: clamp(1.25rem, 2vw + .5rem, 1.75rem); line-height: 1.35; }
.fm-cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0 0; }

/* short pages: the footer sits at the bottom of the window (the page is a flex column, base_public.html) */
.fm-public .lp-foot { margin-top: auto; }

/* the login bridge: the form on a sun-yellow poster, in a square card with the poster's ink rule */
.fm-bridge { background: var(--lp-sun); font-family: "Work Sans", system-ui, sans-serif; --tblr-body-font-family: "Work Sans", system-ui, sans-serif; }
.fm-bridge-main { flex: 1 0 auto; display: flex; align-items: center; padding: 2rem 0 3rem; }
.fm-bridge .card { border: 3px solid var(--lp-poster-ink); border-radius: 0; box-shadow: none; }
.fm-bridge .card-title, .fm-bridge h2 { font-family: "Boldonse", sans-serif; font-weight: 400; letter-spacing: -.01em; }
.fm-bridge .form-control { border: 2px solid var(--lp-paper-line); border-radius: 0; }
.fm-bridge .btn { border-radius: 0; font-weight: 700; }
.fm-bridge main > .container > .text-center a, .fm-bridge-main .text-center a { color: var(--lp-poster-ink); font-weight: 700; }
/* targets of at least 24 px (WCAG 2.5.8) for the stand-alone text links and the consent check box */
/* badges on the yellow band (live demo: "Demo – simulated data") are paper chips with ink text – a tinted badge on sun yellow fails */
.fm-public-plant .page-header .fm-band-badge { background: var(--lp-paper); color: var(--lp-paper-ink); border: 2px solid var(--lp-poster-ink); border-radius: 0; }
.fm-bridge-main a:not(.btn), .fm-public a[href$="avv.pdf"] { display: inline-block; padding-block: .25rem; }
.fm-public .form-check-input { width: 1.5rem; height: 1.5rem; margin-top: 0; }
.fm-public .form-check:has(.form-check-input) { padding-left: 2.25rem; }
.fm-public .form-check .form-check-input { margin-left: -2.25rem; }

/* the portal keeps its app layout; page titles take the poster face so the jump from the login is not a break */
.fm-app .page-title { font-family: "Boldonse", "Work Sans", sans-serif; font-weight: 400; letter-spacing: -.01em; line-height: 1.35; }

/* Brief 21 (D-073): phone mockups in SVG – our own frame, the app's screens redrawn; fixed light look (it shows the app's
   light theme) in both site themes, so only theme-independent tokens are used */
.ph { display: block; width: 100%; max-width: 20rem; height: auto; font-family: "Work Sans", system-ui, sans-serif; }
.ph-body { fill: var(--lp-poster-ink); }
.ph-screen, .ph-bar, .ph-dialog, .ph-notif { fill: var(--lp-white); }
.ph-cam { fill: var(--lp-slate-800); }
.ph-on-light .ph-status, .ph-on-light .ph-fill { fill: var(--lp-poster-ink); }
.ph-on-light .ph-stroke { fill: none; stroke: var(--lp-poster-ink); stroke-width: 1.5; }
.ph-on-dark .ph-status, .ph-on-dark .ph-fill { fill: var(--lp-white); }
.ph-on-dark .ph-stroke { fill: none; stroke: var(--lp-white); stroke-width: 1.5; }
.ph-status { font-size: 13px; font-weight: 700; }
.ph-title { font-size: 19px; font-weight: 700; fill: var(--lp-poster-ink); }
.ph-h { font-size: 15px; font-weight: 700; fill: var(--lp-poster-ink); }
.ph-text { font-size: 13px; fill: var(--lp-poster-ink); }
.ph-small { font-size: 12px; fill: var(--lp-slate-700); text-anchor: middle; }
.ph-small.ph-left { text-anchor: start; }
.ph-label { font-size: 13px; font-weight: 700; fill: var(--lp-poster-ink); text-anchor: middle; }
.ph-icon { fill: var(--lp-poster-ink); }
.ph .ph-stroke { fill: none; stroke: var(--lp-poster-ink); stroke-width: 1.8; stroke-linecap: round; }
.ph-chip, .ph-card, .ph-seg { fill: var(--lp-mist); }
.ph-chip { stroke: var(--lp-slate-100); }
.ph-dot-ok { fill: var(--lp-green); }
.ph-post { stroke: var(--lp-slate-700); stroke-width: 3; stroke-linecap: round; }
.ph-module { stroke: var(--lp-green); stroke-width: 6; stroke-linecap: round; }
.ph-pivot { fill: var(--lp-poster-ink); }
.ph-scrim { fill: var(--lp-poster-ink); opacity: .45; }
.ph-p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--lp-poster-ink); }
.ph-p-small { font-size: 12px; }
.ph-check { fill: var(--lp-green); }
.ph-tick { fill: none; stroke: var(--lp-white); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ph-field { fill: none; stroke: var(--lp-green); stroke-width: 2; }
.ph-field-label { font-size: 11px; fill: var(--lp-green); }
.ph-code { font-size: 18px; letter-spacing: .12em; fill: var(--lp-poster-ink); }
.ph-link { font-size: 14px; font-weight: 700; fill: var(--lp-green); }
.ph-btn { fill: var(--lp-green); }
.ph-btn-t { font-size: 14px; font-weight: 700; fill: var(--lp-white); }
.ph-btn-o { fill: none; stroke: var(--lp-green); stroke-width: 1.5; }
.ph-btn-o-t { font-size: 14px; font-weight: 700; fill: var(--lp-green); }
.ph-seg-on { fill: var(--lp-green); }
.ph-seg-t { font-size: 13px; font-weight: 700; fill: var(--lp-poster-ink); }
.ph-seg-t-on { fill: var(--lp-white); }
.ph-sev, .ph-tag { fill: var(--lp-amber); }
.ph-tag-t { font-size: 12px; font-weight: 700; fill: var(--lp-poster-ink); }
.ph-wall { fill: var(--lp-green); }
.ph-clock { font-family: "Boldonse", "Work Sans", sans-serif; font-size: 64px; fill: var(--lp-white); }
.ph-mark { --fm-logo-mark: var(--lp-green); --fm-logo-dot: var(--lp-sun); color: var(--lp-poster-ink); }
/* the /app page: phones side by side, captions below */
.fm-phones { display: grid; gap: 2rem 1.5rem; margin: 0 0 3rem; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); max-width: 72rem; }
.fm-phones figure { margin: 0; display: grid; gap: .75rem; justify-items: center; }
.fm-phones figcaption { font-weight: 700; text-align: center; max-width: 18rem; }