/* Diagenics investor platform · the design language of diagenics.com (computed styles read 25 Sept 2026):
   a navy #192030 header bar with the white wordmark and white upper-case navigation, Nunito Sans 300 body text 15px #666,
   headings in "Planer W00 Demi Bold" (licensed to diagenics.com only; the self-hosted Titillium Web 600 stands in, the
   closest free match to its stroke weight), Khula 600 kickers, square buttons in the content and pill buttons in a navy hero band (as the site), content 1140px wide, a two-tone navy footer
   with a white legal strip. The WordPress plugin (wordpress/diagenics-investors/assets/invest.css) uses the same tokens.
   Text colours are the site's hues a shade darker where the site's own values miss WCAG AA (4.5:1): blue text #1E6FBD,
   muted text #6B6B6B. The brand blue #2685DB stays for accents that carry no text (dots, borders, focus rings). */
:root{
  --white:#fff;--bg:#fff;--bg2:#F7F8F9;--panel:#F1F1F2;--line:#DEDEDE;--field:#8A8F98;
  --navy:#192030;--navy2:#000B23;--blue:#2685DB;--blue-text:#1E6FBD;--blue2:#2884F6;--bluesoft:#E9F2FC;--blue-on-navy:#8EC1EE;
  --ink:#192030;--text:#666666;--muted:#6B6B6B;--red:#B42318;--redsoft:#FDECEA;--green:#61A518;--green-text:#3E6B10;--greensoft:#EAF4E0;
  --amber:#B8860B;--amber-text:#8A6508;--ambersoft:#FBF3DC;
  --head:'Planer W00 Demi Bold','Titillium Web','Nunito Sans',sans-serif;
  --sans:'Nunito Sans','Helvetica Neue',Arial,sans-serif;
  --kicker:Khula,'Nunito Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'Space Mono',Menlo,monospace;
  --r:5px;--pill:30px;--wrap:1236px;--gutter:48px;
  /* legacy aliases used by module templates */
  --paper:var(--bg);--panel2:var(--line);--ink2:var(--text);--gold:var(--blue);--goldsoft:var(--bluesoft);--tan:var(--line);--serif:var(--head);--r2:var(--r);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;font-weight:300;line-height:1.6}
/* the footer stays at the bottom of short pages; clip: full-bleed bands never make the page scroll sideways */
body{min-height:100vh;display:flex;flex-direction:column;overflow-x:clip}
a{color:var(--blue-text);text-underline-offset:2px}a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
/* the first Tab of every page: "Skip to content", visible only while focused; the page itself (main) takes the focus without a ring */
.skip-link{position:absolute;left:12px;top:-60px;z-index:20;background:#fff;color:var(--navy);font-weight:600;padding:10px 16px;border-radius:var(--r);text-decoration:none}
.skip-link:focus{top:12px}
main:focus{outline:none}
/* the red STAGING / TEST banner: a white ring, the blue one would vanish on red */
.env-banner a:focus-visible{outline-color:#fff}
h1,h2,h3,h4{font-family:var(--head);font-weight:600;color:var(--ink);margin:0 0 .45em;line-height:1.15;letter-spacing:.01em}
h1{font-size:44px;text-transform:uppercase;letter-spacing:.5px}h2{font-size:24px}h3{font-size:17px;font-family:var(--sans);font-weight:600;letter-spacing:.2px}
p{margin:0 0 1em}strong{font-weight:600;color:var(--ink)}
.k{font-family:var(--kicker);font-size:11px;line-height:1.4;letter-spacing:2px;text-transform:uppercase;color:var(--blue-text);font-weight:600}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:0}
/* dates, times and figures in running UI: the body face with even-width digits (monospace is only for IBANs, addresses, hashes, references) */
.tnum{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.lead{font-size:17px;color:var(--text);max-width:680px;font-weight:300}
.small{font-size:13px;color:var(--text)}

/* header as on diagenics.com: navy bar, white wordmark, white upper-case navigation, the active item underlined */
.top{background:var(--navy);position:sticky;top:0;z-index:5}
/* a field or button reached with Tab / Shift+Tab stops below the sticky header (88px + 8px), never under it */
html{scroll-padding-top:96px}
/* every anchor target (a task card's link to #g2, a Safe row #tx-..., the reconciliation after its redirect) stops below
   the sticky header (88px) instead of under it, and the target is marked */
[id]{scroll-margin-top:110px}
body.admin :target:not(main):not(section){box-shadow:0 0 0 3px var(--blue);border-radius:var(--r)}
tr:target>td{background:var(--bluesoft)}
.top-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);min-height:88px;display:flex;flex-wrap:wrap;align-items:center;gap:0 30px}
.brand{text-decoration:none;color:#fff;display:flex;align-items:center;gap:16px;margin-right:auto;min-width:0;min-height:44px}
.brand img{width:137px;height:auto;display:block}
.brand-sub{font-family:var(--kicker);font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--blue-on-navy);border-left:1px solid rgba(255,255,255,.3);padding:3px 0 0 16px;line-height:1.2}
.nav{order:2;display:flex;gap:28px;align-items:center;font-family:var(--head);font-size:14px;font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.nav a,.nav button.link{color:#fff;text-decoration:none;padding:15px 0 13px;border-bottom:2px solid transparent;line-height:20px}
.nav a:hover,.nav button.link:hover{color:var(--blue-on-navy)}
.nav a.on{border-bottom-color:#fff}
.nav .who{font-family:var(--sans);font-size:13px;font-weight:300;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.75);overflow-wrap:anywhere}
.lang{order:3;font-family:var(--head);font-size:14px;font-weight:600;letter-spacing:.3px;color:rgba(255,255,255,.55);white-space:nowrap}
.lang a{color:#fff;text-decoration:none;padding:15px 0 13px;border-bottom:2px solid transparent}.lang a:hover{color:var(--blue-on-navy)}.lang a.on{border-bottom-color:#fff}
.menu-btn{order:4;display:none;align-items:center;justify-content:center;width:44px;height:44px;margin:0 -8px 0 0;padding:0;background:none;border:0;color:#fff;cursor:pointer}
.menu-btn svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.6;fill:none}
.menu-btn[aria-expanded="true"] .bars{display:none}.menu-btn:not([aria-expanded="true"]) .cross{display:none}
.inline{display:inline}
button.link{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0;letter-spacing:inherit;text-transform:inherit}

.page{width:100%;max-width:var(--wrap);margin:0 auto;padding:56px var(--gutter) 96px;flex:1 0 auto}
/* narrow pages (gate, start, sign-in, notices): one centred column, as the forms of diagenics.com sit in the content grid */
.narrow{max-width:720px;margin-left:auto;margin-right:auto}

/* footer as on diagenics.com: two-tone navy block with upper-case, letter-spaced links, then a white legal strip */
.foot{flex:none;font-size:13px;line-height:1.7}
.foot-main{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);color:rgba(255,255,255,.75)}
.foot-cols{background:var(--navy);padding:64px 48px 56px max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 48px}
.foot-side{background:var(--navy2);padding:64px max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter))) 56px 56px}
.foot-h{font-family:var(--head);font-size:16px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#fff;margin:0 0 18px;line-height:1.2}
.foot-links{list-style:none;margin:0;padding:0}
.foot-links li{margin:0 0 6px}.foot-links a{display:inline-block;padding:3px 0}
.foot-links a,.foot-legal a{font-size:12px;font-weight:400;letter-spacing:2px;text-transform:uppercase;text-decoration:none}
.foot-links a{color:#fff}.foot-links a:hover,.foot-links a:focus-visible{color:var(--blue-on-navy);text-decoration:underline}
.foot-main p{margin:0 0 10px}
.foot-legal{background:#fff;color:var(--ink)}
.foot-legal .foot-in{max-width:var(--wrap);margin:0 auto;padding:22px var(--gutter);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:11px;letter-spacing:1px;text-transform:uppercase}
.foot-legal a{display:inline-block;padding:4px 0;color:var(--ink);font-size:11px;letter-spacing:1px}.foot-legal a:hover,.foot-legal a:focus-visible{text-decoration:underline}
.foot-legal .links{display:flex;flex-wrap:wrap;gap:4px 18px}

/* dark hero band, full width as on diagenics.com, its own section between the header and the page (layout.njk block
   hero): no negative margin, so nothing below it (a message, the first card) can ever be covered by it. Its text keeps
   to the content grid; .hero-narrow keeps it to the one centred column of the investor journey (.narrow). */
.hero{background:var(--navy);color:#fff;padding:56px 0 48px}
.hero-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.hero-in>*{max-width:1140px}
.hero-narrow .hero-in{max-width:calc(720px + 2 * var(--gutter))}
.hero + .page{padding-top:40px}
/* a page that is only its band ("You can close this tab"): the band takes the screen, the empty page below takes none */
.hero-fill{flex:1 0 auto}
.hero + .page.page-none,.page.page-none{padding:0;flex:none}
.hero h1{color:#fff;font-size:52px;margin-bottom:14px}
.hero-narrow h1{font-size:40px}
.hero .lead{color:rgba(255,255,255,.8);font-size:18px}
.hero .lead:last-child{margin-bottom:0}
.hero .actions{margin-top:24px}
/* the investor journey in the band: "Step 3 of 8" above the headline, eight segments below it (src/views/_stepper.njk) */
.journey{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.journey li{font-family:var(--kicker);font-size:10.5px;font-weight:600;letter-spacing:1px;line-height:1.35;text-transform:uppercase;color:rgba(255,255,255,.72);min-width:0;hyphens:manual;overflow-wrap:break-word}
.journey li::before{content:"";display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.22);margin:0 0 10px}
.journey li.done::before{background:var(--blue-on-navy)}
.journey li.current::before{background:#fff}
.journey li.current{color:#fff}
/* the Wallet step skipped: an outline only, never filled (style rules 3) */
.journey li.skipped::before{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
/* a wide screen: every step name whole on one line ("ZAHLUNGSPRÜFUNG", never "ZAHLUNGS-/PRÜFUNG"); each segment as wide as
   its name plus an equal share of the rest (the eight German names need about 600 of the 720 pixels) */
@media(min-width:821px){.journey{grid-template-columns:repeat(8,auto)}.journey li{hyphens:none;white-space:nowrap;overflow-wrap:normal}}
/* a compound with a hyphen in a headline stays whole ("E-MAIL-POSTFACH", "DIA-TOKEN"): the nobreak filter of src/server.ts */
.nw{white-space:nowrap}
/* text set in bold inside the navy band (the e-mail a link went to, the DIA tokens to cancel) stays white, never navy on navy */
.hero strong{color:#fff}
.hero .k{color:var(--blue-on-navy)}
.hero a:not(.btn){color:#fff}
.hero .btn:hover{background:#fff;color:var(--navy)}

.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;margin:0 0 16px}
.card.gold{background:var(--bluesoft);border-color:var(--blue)}
.card.dashed{background:transparent;border:1px dashed var(--field)}
.card.white{background:var(--white)}
.card.navy{background:var(--navy);color:rgba(255,255,255,.85);border-color:var(--navy)}
.card.navy h3,.card.navy strong,.card.navy .big{color:#fff}.card.navy .k{color:var(--blue-on-navy)}.card.navy a:not(.btn){color:#fff}
.card h3{margin-top:0}
/* a card's own title as a heading (h2, so the levels never skip): the size of a sub-section */
h2.card-h{font-size:19px;margin:0 0 .45em}.sec-h{margin-top:28px}
/* minmax(0,1fr): a column never grows past its share for unbreakable content (a long JSON payload, a wide table) */
.grid{display:grid;gap:16px}.grid-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid>*{min-width:0}
.grid-side{grid-template-columns:260px minmax(0,1fr);gap:24px}
/* a page with a narrower side column (the crypto guide): two thirds and one third, one column on a phone or tablet */
.grid-guide{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media(max-width:820px){.grid-guide{grid-template-columns:minmax(0,1fr)}}
@media(max-width:1000px){
  .foot-main{grid-template-columns:minmax(0,1fr)}
  .foot-cols,.foot-side{padding-left:var(--gutter);padding-right:var(--gutter)}
  .foot-side{padding-top:40px;padding-bottom:40px}
}
@media(max-width:820px){.grid-2,.grid-3,.grid-side{grid-template-columns:minmax(0,1fr)}
  :root{--gutter:20px}
  .page{padding-top:36px}
  .hero{padding-top:36px;padding-bottom:32px}.hero h1,.hero-narrow h1{font-size:30px}
  /* a headline breaks between words, never inside a short one ("GE-NAU"); a very long compound still wraps */
  .hero h1{hyphens:manual;overflow-wrap:break-word}
  .hero .lead{font-size:16px}
  .hero + .page{padding-top:28px}
  .nav{gap:22px}
  /* a phone: the segments only; the name of the current step is the headline above them */
  .journey{margin-top:24px;gap:4px}
  .journey li::before{margin:0}
  .journey .lbl{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}
@media(max-width:600px){
  h1{font-size:30px;overflow-wrap:break-word;hyphens:auto}
  /* a phone: the same footer, compact (night check of 14 October 2026: footer and band were a third of the signing
     page). The links side by side, wrapping; less air around each block; nothing left out */
  .foot{line-height:1.5}
  .foot-cols{grid-template-columns:minmax(0,1fr);padding-top:22px;padding-bottom:14px;gap:12px}
  .foot-side{padding-top:14px;padding-bottom:16px}
  .foot-h{font-size:14px;margin:0 0 6px}
  .foot-main p{margin:0 0 2px}
  .foot-links{display:flex;flex-wrap:wrap;gap:0 16px}
  .foot-links li{margin:0}
  .foot-links a,.foot-legal a{letter-spacing:1px}
  .foot-legal .foot-in{flex-direction:row;padding-top:10px;padding-bottom:12px;gap:0 16px}
  .foot-legal .links{gap:0 16px}
  .hero{padding-top:22px;padding-bottom:20px}
  .hero h1,.hero-narrow h1{margin-bottom:8px}
  .hero .lead{line-height:1.45;margin-bottom:10px}
  .hero .sp-fixed{margin-top:4px;padding-top:8px}
  .journey{margin-top:16px}
  .hero + .page{padding-top:20px}
}
/* phone: one navy row (wordmark, language, menu button) as on diagenics.com; the menu button opens the navigation below it.
   Folded by CSS alone, so the open menu never paints before public/js/site.js has run (slow network); without script
   (<noscript> in layout.njk) the navigation stays open below the wordmark. */
@media(max-width:760px){
  html{scroll-padding-top:80px}
  .top-in{min-height:72px;gap:0 16px}
  .brand img{width:118px}
  .top .menu-btn{display:inline-flex}
  .top .nav{order:9;flex-basis:100%;display:none;flex-direction:column;align-items:stretch;gap:0;padding:4px 0 14px;border-top:1px solid rgba(255,255,255,.15)}
  .top.open .nav{display:flex}
  .top .nav a,.top .nav button.link{display:block;width:100%;text-align:left;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12)}
  .top .nav a.on{border-bottom-color:rgba(255,255,255,.12);box-shadow:inset 3px 0 0 #fff;padding-left:12px}
  .top .nav form.inline{display:block}
  .nav .who{padding:12px 0 6px}
}
/* a short window (a phone held sideways, 200% zoom on a laptop): the header scrolls away with the page instead of
   covering half of it, and a focused field or button is never hidden under it */
@media(max-height:500px){
  .top{position:static}
  html{scroll-padding-top:8px}
  [id]{scroll-margin-top:8px}
}
@media(max-width:420px){.brand-sub{display:none}}

/* buttons (style rules 1, 14 October 2026): one system for investor pages and back office. Three levels: PRIMARY filled
   blue, SECONDARY white with a 1px navy outline, TERTIARY a text link; DESTRUCTIVE filled red for an irreversible step
   only. Square everywhere in the content; the pill only on buttons in the navy band (.hero) and on chips. One size: at
   least 48px tall, 12px upper case, letter-spacing 2px. Small utility buttons (Copy, Paste: .small / .mini) are
   secondary, at least 44 x 44px, on the row of their value. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;background:var(--blue-text);color:#fff;text-decoration:none;padding:12px 28px;border-radius:0;font-weight:600;font-size:12px;letter-spacing:2px;text-transform:uppercase;border:0;cursor:pointer;font-family:var(--sans);line-height:1.3;text-align:center;vertical-align:middle;transition:background .15s,color .15s}
/* BO-HOVER-01: on a touch screen a hover sticks after the tap, so the hover look only where a pointer hovers */
@media (hover:hover){.btn:hover{background:var(--navy);color:#fff}}
.btn.secondary,.btn.ghost{background:var(--white);color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}.btn.secondary:hover,.btn.ghost:hover{background:var(--panel);color:var(--navy)}
.btn.danger{background:var(--red);color:#fff;box-shadow:none}.btn.danger:hover{background:#8f1d14;color:#fff}
.btn.small,.btn.mini,.btn.sm{min-height:44px;min-width:44px;padding:8px 14px;letter-spacing:1.5px}
.btn.small:not(.danger):not(.primary),.btn.mini:not(.danger):not(.primary){background:var(--white);color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.btn.small:not(.danger):not(.primary):hover,.btn.mini:not(.danger):not(.primary):hover{background:var(--panel)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.block{display:flex;width:100%}
.hero .btn{border-radius:var(--pill)}
/* the copied feedback inside a Copy button (public/js/payments-pay-*.js, token-detail.js) */
.btn.copied,.btn.is-copied{color:var(--green-text);box-shadow:inset 0 0 0 1px var(--green-text)}
/* Subscriptions: the steps of one subscription, who does each, how many stand there now */
.process ol{list-style:none;margin:8px 0 6px;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;counter-reset:none}
.process li{position:relative;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:14px 14px 12px;display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.45}
.process li strong{font-size:14px}
.process li em{font-style:normal;color:var(--blue-text);font-size:12px}
.process-n{font-family:var(--head);font-size:28px;line-height:1;color:var(--navy)}
@media (max-width:1100px){.process ol{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.process ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the next step of a page: on white, right below the navy band with the steps */
.next-action{margin:0 0 32px}

/* form fields: one style with the WordPress plugin (1px #8A8F98 border, 3:1 against white; the radius of diagenics.com) */
label{display:block;font-size:12px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--ink);margin:0 0 8px}
input[type=text],input[type=email],input[type=number],input[type=tel],input[type=password],input[type=date],input[type=search],input[type=url],select,textarea{
  width:100%;min-height:50px;padding:12px 16px;border:1px solid var(--field);border-radius:var(--r);background:var(--white);font:inherit;font-size:15px;font-weight:400;color:var(--ink)}
textarea{min-height:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--bluesoft)}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--red)}
/* checkboxes: the square navy box of the WordPress plugin, blue with a white tick when checked */
input[type=checkbox]{-webkit-appearance:none;appearance:none;display:inline-grid;place-content:center;flex:0 0 22px;width:22px;height:22px;margin:0 8px 0 0;padding:0;vertical-align:-6px;border:2px solid var(--navy);border-radius:0;background:#fff;cursor:pointer;transition:background-color .12s,border-color .12s}
input[type=checkbox]::before{content:"";width:12px;height:12px;background:#fff;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);transform:scale(0);transition:transform .12s}
input[type=checkbox]:checked{background:var(--blue-text);border-color:var(--blue-text)}
input[type=checkbox]:checked::before{transform:scale(1)}
input[type=checkbox]:focus{box-shadow:none}
/* a keyboard focus is always visible: the same 3px blue ring as buttons and links (checkboxes have no soft shadow) */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
input[type=checkbox]:disabled{opacity:.45;cursor:not-allowed}
@media (forced-colors:active){input[type=checkbox]{-webkit-appearance:auto;appearance:auto}input[type=checkbox]::before{display:none}}
/* a statement to confirm: box left, text right, a rule between statements (gate, start, the plugin's gate) */
label.check{display:flex;gap:16px;align-items:flex-start;margin:0;padding:16px 0;border-bottom:1px solid var(--line);text-transform:none;letter-spacing:0;font-size:15px;font-weight:400;line-height:1.5;color:var(--ink);cursor:pointer}
label.check input[type=checkbox]{margin:1px 0 0}
label.check:last-of-type{border-bottom:0}
form>label.check:first-of-type{padding-top:4px}
label.check+.btn,label.check~.btn{margin-top:14px}
.field{margin:0 0 18px}
/* a group of choices named by its legend, in the style of a field label */
fieldset.plain{border:0;padding:0;margin-left:0;margin-right:0;min-width:0}
fieldset.plain>legend{padding:0;margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--ink)}
.help{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.45}
/* the statements of the gate: a read-only list, confirmed with one tick (src/investor/views/gate.njk) */
ul.statements{margin:10px 0 14px;padding:0 0 0 20px;color:var(--ink);font-weight:400}
ul.statements>li{margin:0 0 12px;line-height:1.5}
ul.statements .help{display:block;margin-top:4px}
details.more.inline-more,details.more.inline-more:last-child{border-top:0;border-bottom:0;margin:0}
details.more.inline-more>summary{min-height:36px;padding:4px 0;font-size:13px;color:var(--blue-text)}
details.more.inline-more>.more-body{padding:0 0 6px;font-size:13px}
.err{color:var(--red);font-size:13px;font-weight:400}

.flash{padding:12px 16px;border-radius:var(--r);margin:0 0 20px;font-size:14px;background:var(--bluesoft);border:1px solid var(--blue);color:var(--ink)}
/* the page's message (layout.njk: .flash-box, a live region) sits in the column of the investor journey (.narrow) */
.page:has(> .narrow) > .flash-box{max-width:720px;margin-left:auto;margin-right:auto}
.flash.error{background:var(--redsoft);border-color:var(--red);color:var(--red)}
.flash.ok{background:var(--greensoft);border-color:var(--green);color:var(--green-text)}

.choice{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice label.opt{position:relative;margin:0;text-transform:none;letter-spacing:0;font-weight:300}
.choice input{position:absolute;opacity:0;inset:0;cursor:pointer}
.choice .box{display:flex;gap:14px;align-items:center;background:var(--white);border-radius:var(--r);padding:16px 18px;border:1px solid var(--field)}
.choice input:checked+.box{background:var(--bluesoft);border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset}
.choice input:focus-visible+.box{outline:3px solid var(--blue);outline-offset:2px}
.choice strong{font-size:15px}
.disc{width:44px;height:44px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;flex:0 0 44px;color:#fff}
.disc svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* the one task of a page: a white card with what is needed for it and its one primary button (.btn); everything else
   is a plain link (.linkrow) or folded away under "More details" (.more) */
.task{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;margin:0 0 20px}
.task>:last-child{margin-bottom:0}
.task h2{font-size:24px;margin:0 0 10px}
.task .btn{margin-top:6px}
.task .kv{margin:4px 0 18px}
.linkrow{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 20px;font-size:14px}
.linkrow a,.linkrow button.link{color:var(--blue-text);text-decoration:underline;text-underline-offset:2px;min-height:32px;display:inline-flex;align-items:center}
details.more{border-top:1px solid var(--line);margin:8px 0 20px}
details.more:last-child{border-bottom:1px solid var(--line)}
details.more>summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 0;font-size:14px}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s;flex:none;margin:0 2px}
details.more[open]>summary::before{transform:rotate(45deg)}
details.more>.more-body{padding:4px 0 18px;font-size:14px}
details.more>.more-body>:last-child{margin-bottom:0}
details.more .card{margin-bottom:12px}
@media(max-width:600px){.task{padding:20px 18px}}

/* status + tables */
.pill{display:inline-block;padding:4px 10px;border-radius:999px;font-family:var(--sans);font-size:10.5px;line-height:1.5;letter-spacing:1px;text-transform:uppercase;font-weight:600;background:var(--panel);color:var(--text)}
.pill.gold,.pill.blue{background:var(--bluesoft);color:var(--blue-text)}.pill.ok{background:var(--greensoft);color:var(--green-text)}.pill.bad{background:var(--redsoft);color:var(--red)}.pill.warn{background:var(--ambersoft);color:var(--amber-text);border-left:0;padding:4px 10px;border-radius:999px;font-size:10.5px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:600;padding:10px;border-bottom:2px solid var(--line)}
td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}
tr:hover td{background:var(--bg2)}
/* narrow screens: a table.stack shows each row as a block (documents, crypto deposits), so no column is cut off on the right;
   a cell with data-label shows its column name in front of the value */
@media(max-width:600px){table.stack thead{display:none}table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
  table.stack tr{border-bottom:1px solid var(--line);padding:6px 0 10px}
  table.stack td{border:0;padding:4px 0}
  table.stack td[data-label]::before{content:attr(data-label);display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;font-weight:600;color:var(--muted)}
}
.kv{display:grid;grid-template-columns:170px 1fr;gap:8px 16px;font-size:14px}
.kv dt{color:var(--muted);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;font-weight:600;padding-top:3px}.kv dd{margin:0;color:var(--ink);font-weight:400}
.copy{font-family:var(--mono);font-size:14px;background:var(--white);border:1px solid var(--field);border-radius:var(--r);padding:8px 12px;display:inline-block;user-select:all;color:var(--ink);max-width:100%;overflow-wrap:anywhere;box-sizing:border-box}
.kv dd{min-width:0;overflow-wrap:anywhere}
/* payment details: value and copy button on one line; the value may wrap inside its box, the button never drops below it */
.kv.pay{grid-template-columns:150px minmax(0,1fr)}
.pay-row{display:flex;align-items:center;gap:8px}
.pay-row.has-hint{flex-wrap:wrap}
/* the clipboard refused: the value is selected and this line asks for a manual copy (public/js/payments-pay-*.js) */
.copy-fail{flex-basis:100%;color:var(--red)}
/* a crypto address in groups of four to compare by eye: the gaps are margins, so a copy never carries spaces */
.copy.addr{overflow-wrap:normal}.addr .g{display:inline-block;margin-right:.4em}.addr .g:last-child{margin-right:0}
.pay-row .copy{flex:0 1 auto;min-width:0}
.pay-row .btn{flex:none;white-space:nowrap}
/* a label next to a copy box sits on the line of the text inside the box */
.kv.pay dt:has(+ dd.pay-row){padding-top:12px}
@media(max-width:600px){.kv,.kv.pay,.kv.wide{grid-template-columns:minmax(0,1fr);gap:2px 0}.kv dt,.kv.pay dt:has(+ dd.pay-row){padding-top:10px}.kv dd{margin-bottom:4px}.card{padding:20px 18px}.copy{font-size:13px;padding:7px 10px}}
.big{font-size:22px;font-weight:600;color:var(--ink);font-family:var(--head)}
.qr{background:#fff;padding:12px;border:1px solid var(--line);border-radius:var(--r);display:inline-block}
/* notices by meaning (style rules 5): .note (blue) information; .caution (amber) a rule the reader must follow (own-name
   account, exact amount, only this network); .error (red) something went wrong. Red is never used for a normal rule. */
.note,.caution,.error:not(.flash){margin:0 0 16px;border-left:3px solid var(--blue);padding:12px 16px;background:var(--bluesoft);border-radius:0 var(--r) var(--r) 0;font-size:13.5px;color:var(--ink)}
.caution{border-left-color:var(--amber);background:var(--ambersoft)}
.error:not(.flash){border-left-color:var(--red);background:var(--redsoft)}
/* the waiting "Check your inbox" page (check-inbox.njk): a small spinner next to the waiting text */
.wait-line{display:flex;align-items:center;gap:12px;color:var(--ink)}
.spinner{flex:none;width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:dg-spin .9s linear infinite}
@keyframes dg-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}
.hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
details summary{cursor:pointer;color:var(--blue-text);font-weight:600;font-size:13px}
.timeline{list-style:none;padding:0;margin:0;font-size:13px}
.timeline li{padding:8px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px}
.timeline li>span{min-width:0;overflow-wrap:anywhere}
@media(max-width:600px){.timeline li{grid-template-columns:minmax(0,1fr);gap:2px}}
/* back-office forms laid out as a grid of fields fall back to one column on a phone */
@media(max-width:720px){form.filters{grid-template-columns:minmax(0,1fr)!important}form.inline.row{display:flex!important;flex-wrap:wrap}form.inline.row input[type=text]{width:100%!important}}
.timeline .t{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
pre{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:12px;font-size:12px;overflow:auto;font-family:var(--mono)}
/* back office: every page on the wide grid (header, page and footer), the navigation in one row */
body.admin{--wrap:1480px}
.admin-nav{display:flex;gap:2px;margin:0 0 28px;font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:600;flex-wrap:wrap}
/* phone: the few tabs of a Diagenics user wrap onto a second line; BIT BAJT's long row scrolls, its right edge fades to show that it does */
@media(max-width:600px){.admin-nav:not(.few){flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:4px;-webkit-mask-image:linear-gradient(to right,#000 85%,transparent);mask-image:linear-gradient(to right,#000 85%,transparent)}}
.admin-nav a{text-decoration:none;color:var(--text);padding:8px 11px;border-radius:var(--pill);border:1px solid transparent;white-space:nowrap}.admin-nav a.on,.admin-nav a:hover{background:var(--navy);color:#fff}
/* a module's own sections under the shared navigation (Payments: Bank, Crypto, Review queue) */
.admin-nav.sub{margin:-18px 0 28px;padding-top:8px;border-top:1px solid var(--line);font-size:10.5px}.admin-nav.sub a.on{background:var(--blue-text)}
/* numbered step circles like the "what happens next" band */
.num{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:600;font-size:14px;margin-bottom:10px}
/* back office: pipeline (/admin/pipeline) */
.page.wide{max-width:1480px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* a file field in the page's style and language: the native control stays focusable but invisible, its label is the button */
.file-pick{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.file-pick input[type=file]{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;overflow:hidden}
.file-pick .file-btn{margin:0;cursor:pointer}
.file-pick input[type=file]:focus-visible + .file-btn{outline:2px solid var(--blue);outline-offset:2px}
.file-pick .file-name{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.card.ok{background:var(--greensoft);border-color:var(--green)}.card.bad{background:var(--redsoft);border-color:var(--red)}
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:0 0 18px}
.kpi{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;min-width:0}
a.kpi{display:block;text-decoration:none;color:inherit}a.kpi:hover{border-color:var(--blue)}
.kpi.attn,.kpi.warn{background:var(--ambersoft);border-color:var(--amber)}.kpi.ok{background:var(--greensoft);border-color:var(--green)}.kpi.bad{background:var(--redsoft);border-color:var(--red)}
.kpi .big{font-size:18px;overflow-wrap:anywhere}.kpi .small{font-size:12px;color:var(--muted);line-height:1.4}
@media(max-width:1200px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.kpis{grid-template-columns:1fr 1fr}}
.pipe-bar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin:0 0 10px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.chip{text-decoration:none;color:var(--ink);border:1px solid var(--field);border-radius:var(--pill);padding:7px 14px;font-size:12px;font-weight:600;background:var(--white)}
.chip span{color:var(--muted);font-weight:400;margin-left:4px}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}.chip.on span{color:var(--blue-on-navy)}
.chip.stuck:not(.on){border-color:var(--red);color:var(--red)}
.pipe-search{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:0 1 600px;margin:0}
.pipe-search input[type=text]{flex:1 1 180px}
.pipe-search .pipe-date{display:flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0}
.pipe-search .pipe-date label{margin:0;white-space:nowrap}
.pipe-search input[type=date]{padding:8px;min-height:40px;width:150px;min-width:0}
.pipe-search input[type=text]{padding:8px 12px;min-width:0;min-height:40px}
.pipe-search .btn{white-space:nowrap}
.table-scroll{overflow-x:auto}
.table-scroll:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
/* the privacy notice table on a phone: long German compounds break inside the cell, the table scrolls, never the page */
.privacy-table th,.privacy-table td{hyphens:auto;overflow-wrap:break-word}
/* on a phone each row of the privacy table is a card (label: text), never three columns of broken words */
@media (max-width:600px){
  .privacy-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .privacy-table,.privacy-table tbody,.privacy-table tr,.privacy-table td{display:block;width:100%}
  .privacy-table tr{border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;margin:0 0 12px;background:var(--white)}
  .privacy-table td{border:0;padding:4px 0;hyphens:manual}
  .privacy-table td::before{content:attr(data-label);display:block;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:600}
}
table.pipeline td{font-size:13px}
table.pipeline .pill{white-space:nowrap}
table.pipeline td.ssa a{display:block;font-weight:600;margin:0 0 4px}
table.pipeline td.sub .mail{display:block;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.pipeline td.amt{white-space:nowrap}table.pipeline td.amt .small{display:block}
table.pipeline td.steps .stage{display:block;margin-top:4px;max-width:210px;line-height:1.35}
table.pipeline td.lights{min-width:150px}table.pipeline td.lights .pill{margin:0 3px 3px 0;padding:2px 7px}table.pipeline td.lights .small{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.pipeline td.next{min-width:260px}
table.pipeline td.next .act{margin:4px 0 2px;color:var(--ink);font-weight:400}
table.pipeline td.next .also{margin-top:6px;line-height:1.4}
table.pipeline tr.stuck td:first-child{box-shadow:inset 3px 0 0 var(--red)}
@media(max-width:720px){
  table.pipeline thead{display:none}
  table.pipeline,table.pipeline tbody,table.pipeline tr,table.pipeline td{display:block;width:auto}
  table.pipeline tr{border:1px solid var(--line);border-radius:var(--r);margin:0 0 12px;padding:10px 12px;background:var(--white)}
  table.pipeline tr.stuck{border-left:3px solid var(--red)}
  table.pipeline tr.stuck td:first-child{box-shadow:none}
  table.pipeline tr:hover td{background:none}
  table.pipeline td{border:0;padding:3px 0}
  table.pipeline td.ssa a{display:inline;margin-right:8px}
  table.pipeline td.sub .mail{max-width:100%}
  table.pipeline td.amt{white-space:normal}table.pipeline td.amt .small{display:inline;margin-left:8px}
  table.pipeline td.steps .stage{max-width:none}
  table.pipeline td.next{min-width:0;padding-top:8px}
}
.track{display:inline-flex;gap:3px;align-items:center;white-space:nowrap;vertical-align:middle}
.track i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--line);box-sizing:border-box}
.track i.opt{margin-left:7px}
.track i.s-done{background:var(--blue)}
.track i.s-current{background:var(--white);border:3px solid var(--amber)}
.track i.s-open{background:var(--white);border:2px solid var(--muted)}
.track i.s-declined{background:var(--muted)}
.track i.s-failed{background:var(--red)}
.track i.s-skipped{background:transparent;border:1px dashed var(--muted)}
.track-legend .track{margin:0 2px 0 8px}

/* back office lists: the whole row opens the subscription; the number reads as a link, "Open →" at the end */
tr:has(.row-link){position:relative;cursor:pointer}
.row-link{font-weight:700;white-space:nowrap}
.row-link::after{content:"";position:absolute;inset:0}
.row-open{color:var(--blue-text);font-weight:600;white-space:nowrap;text-align:right}
tr:has(.row-link):hover .row-link{text-decoration:underline}
tr:has(.row-link):hover td{background:var(--bluesoft)}

/* the share price of a signed-in investor's pages (src/views/_share-price.njk): part of the navy band's content, a compact
   facts line under the lead and before the step bar, in the type of the WordPress hero's facts (a thin top rule, the
   kicker label, the value with the change beside it, two short muted lines "As of <date>" and "Sources: ..."). The value is the
   platform's own price per share; the three quote pages are links only. */
.share-price{display:block;margin:6px 0 0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.22);color:#fff;font-family:var(--sans)}
.hero .lead+.share-price{margin-top:4px}
.share-price .sp-label{display:block;margin:0 0 6px;color:var(--blue-on-navy)}
.share-price .sp-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;margin:0}
.share-price .sp-value{font-family:var(--head);font-size:22px;font-weight:600;line-height:1.2;letter-spacing:.01em;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.share-price .sp-change{font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums}
.share-price .sp-change.up{color:#9BD35A}.share-price .sp-change.down{color:#FF9B8F}.share-price .sp-change.flat{color:rgba(255,255,255,.75)}
.share-price .sp-line{margin:6px 0 0;font-size:12px;line-height:1.5;color:rgba(255,255,255,.7)}
.share-price .sp-src{display:block}
.share-price .sp-line a{color:rgba(255,255,255,.9);text-decoration-color:rgba(255,255,255,.35);white-space:nowrap}
.share-price .sp-line a:hover,.share-price .sp-line a:focus{color:#fff;text-decoration-color:currentColor}
.share-price .sp-own{margin:6px 0 0;font-size:13px;line-height:1.4;font-weight:600;color:#fff}
.share-price .sp-own+.sp-line{margin-top:8px}
.sp-meta a{white-space:nowrap}
/* INV-02: the same box inside a white card, next to the share decision (/start step 1, /app/package) */
.share-price.in-card{margin:0 0 18px;padding:12px 14px;border:1px solid var(--line);border-top:3px solid var(--blue-text);background:var(--paper,#fff);color:var(--ink)}
.share-price.in-card .sp-label{color:var(--blue-text)}
.share-price.in-card .sp-value{color:var(--navy,var(--ink))}
.share-price.in-card .sp-change.up{color:var(--green-text)}.share-price.in-card .sp-change.down{color:var(--red)}.share-price.in-card .sp-change.flat{color:var(--muted)}
.share-price.in-card .sp-line{color:var(--muted)}
.share-price.in-card .sp-line a{color:var(--blue-text);text-decoration-color:currentColor}
.share-price.in-card .sp-line a:hover,.share-price.in-card .sp-line a:focus{color:var(--navy,var(--ink))}
.share-price.in-card .sp-own{color:var(--ink)}
/* A11Y-002: every quote link and the inline "Change" action a hit area of at least 44 x 44 px; the negative margins keep
   the line as it was (a short name such as "VZ" is centred in its 44 px) */
.share-price .sp-line a{display:inline-block;min-width:44px;padding:13px 0;margin:-13px 0;text-align:center}
.inline-act{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;margin:-12px 0;vertical-align:middle}

/* ---- investor pages, owner test of 13 October 2026 (UX-01 to UX-24) ---------------------------------------------- */
/* the header's Messages link with its unread count */
.nav-count{display:inline-block;min-width:18px;padding:0 6px;margin-left:4px;border-radius:999px;background:#fff;color:var(--navy);font-size:11px;line-height:18px;text-align:center;font-weight:700}
/* the subscription's own fixed price, one line in the navy band (src/views/_share-price.njk) */
.hero .sp-fixed{margin:8px 0 0;padding:12px 0 0;border-top:1px solid rgba(255,255,255,.22);font-size:14px;line-height:1.5;color:rgba(255,255,255,.85)}
/* a form answered with an error: the summary at the top of the card links to each field; a missing tick is outlined */
.err-summary{margin:0 0 16px;padding:12px 16px;border:2px solid var(--red);background:var(--redsoft);border-radius:var(--r);font-size:14px}
.err-summary-h{margin:0 0 4px;font-weight:600;color:var(--red)}
.err-summary ul{margin:0;padding:0 0 0 18px;color:var(--red)}
.err-summary a{display:inline-flex;align-items:center;min-height:44px;color:var(--red);font-weight:600}
.err-summary:focus{outline:3px solid var(--blue);outline-offset:2px}
label.check.invalid input[type=checkbox]{border-color:var(--red);box-shadow:0 0 0 3px var(--redsoft)}
label.check.invalid+.err{margin:-6px 0 12px 38px}
/* the first tap on the sticky bar while the box is unticked (site.js data-action-bar-check): the box marked in amber (a rule, not an error) */
label.check.nudge{background:var(--ambersoft);box-shadow:-12px 0 0 var(--ambersoft),12px 0 0 var(--ambersoft)}
label.check.nudge input[type=checkbox]{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber)}
/* one copy / paste field (style rules 1 and UI-03): the value (readonly; monospace for an IBAN, address or reference, the
   sans face with even digits for an amount) and its small secondary button on the same row, the button never below it */
.paste-row,.pay-row{display:flex;gap:8px;align-items:flex-start;flex-wrap:nowrap}
.paste-row{align-items:stretch}
.paste-row input{flex:1 1 auto;min-width:0}
.paste-row .btn,.pay-row .btn{flex:none;white-space:nowrap;margin:0}
.pay-row .copy{flex:1 1 auto;min-width:0;min-height:44px;display:flex;align-items:center}
.pay-row .copy.addr{display:block;padding-top:11px;padding-bottom:11px}
.copy.tnum,.copy.big{font-family:var(--sans);font-variant-numeric:tabular-nums;font-weight:600}
.pay-row.has-hint{flex-wrap:wrap}
/* EN | DE: each a hit area of at least 44 x 44 px */
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 4px;text-align:center}
/* a link on its own line (a .linkrow, a row of .actions): a hit area at least 44px tall; links inside a sentence are exempt */
.linkrow a,.linkrow button.link,.actions>a:not(.btn),.actions>button.link,.actions>form>button.link,p.linkrow>span>a{display:inline-flex;align-items:center;min-height:44px}
/* A11Y-002: a short link in a sentence on its own line ("Sign in") is at least 44 px wide too */
p.linkrow>span>a{min-width:44px;justify-content:center}
/* A11Y-002: a statement to tick is a 44 px target even as the first of its form (4 px top padding) */
label.check{min-height:44px}
/* the STAGING / TEST banner never makes a 320 px page scroll sideways */
.env-banner{overflow-wrap:anywhere}
.foot-links a,.foot-legal a{display:inline-flex;align-items:center;min-height:44px;padding:0}
/* phones: no zoom on a field (16 px), thumb-sized buttons and links, nothing under 12 px; primary and secondary buttons
   full width, the secondary right under the primary (one size: the same 12px as on a wide screen) */
@media (max-width:600px){
  input[type=text],input[type=email],input[type=number],input[type=tel],input[type=password],input[type=date],input[type=search],input[type=url],select,textarea{font-size:16px}
  body:not(.admin) .btn:not(.mini):not(.small):not(.sm){display:flex;width:100%}
  body:not(.admin) .actions .btn+.btn,body:not(.admin) .actions .btn+form,body:not(.admin) .actions form+form{margin-top:0}
  body:not(.admin) .pill,body:not(.admin) .kv dt,body:not(.admin) th,body:not(.admin) .k,body:not(.admin) .help{font-size:12px}
  body:not(.admin) .actions.next-action{flex-direction:column;align-items:stretch}
  .actions{flex-direction:column;align-items:stretch}
  /* a copy field on a phone: the value as wide as the row allows (an IBAN on one line), the button 44px tall */
  .pay-row .btn.small,.pay-row .btn.mini{padding:8px 10px;letter-spacing:1px}
  .kv.pay>dt:first-child{padding-top:0!important}
  /* the footer: two links per row, each a 44px tap target (R3-INV-02: shorter phone pages) */
  .foot-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  /* A11Y-002: the footer columns use the page gutter on the right too, and a long word ("Datenschutzhinweis",
     "Nutzungsbedingungen") breaks inside its own column (hyphenated where the browser can) instead of running into the
     next link or past a 320 px screen */
  .foot-cols{padding-right:var(--gutter)}
  .foot-links a{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
  .foot-legal .links{flex-direction:column;gap:0}
}
/* the sticky action bar (public/js/site.js, [data-action-bar], every screen width: R3-SH-01): white, fixed to the bottom,
   the page's one primary button and nothing else, shown only while that button is out of view; the page keeps room for
   it at its end, so no last line is ever covered. Phone: the button full width. Wide screen: its normal width, at the
   left edge of the page's own button (the script sets the left padding) */
.action-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:6;background:#fff;border-top:1px solid var(--line);padding:16px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -4px 12px rgba(25,32,48,.06)}
.action-bar[hidden]{display:none}
.action-bar .btn{margin:0}
body.with-action-bar{padding-bottom:var(--action-bar-h,80px)}
/* a field scrolled into view (focus, a link to it, the error summary) is never hidden behind the bar (WCAG 2.4.11) */
html:has(body.with-action-bar){scroll-padding-bottom:calc(var(--action-bar-h,80px) + 16px)}
@media (max-width:767px){
  .action-bar .btn{display:flex;width:100%}
}
/* documents: the "not needed" pill and the dates never break */
.doc-table .pill,.doc-table td.date{white-space:nowrap}
/* A11Y-007: the idle warning of a signed-in investor (layout.njk #idle-warn): fixed at the bottom, above the action bar */
.idle-warn{position:fixed;left:16px;right:16px;bottom:16px;z-index:8;max-width:560px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue-text);padding:14px 16px;box-shadow:0 4px 16px rgba(25,32,48,.18)}
.idle-warn[hidden]{display:none}
.idle-warn p{flex:1 1 220px;margin:0;font-size:14px;line-height:1.45;color:var(--ink)}
.idle-warn .btn{margin:0}
body.with-action-bar .idle-warn{bottom:calc(var(--action-bar-h,80px) + 12px)}