/* filaflow.net (family guide §19): the same tokens, fonts, spacing and motion as the apps. The company is ink; product sections use
   their unit colour in colour fields (the website is the one place large colour areas are allowed). Fonts are self-hosted. */

:root {
  --ink: #0F1214; --ink-2: #545B60; --ink-3: #666E73; --ink-4: #8E959A;
  --brand-ink: #14191B; --paper: #FFFFFF; --canvas: #F3F5F4; --tint: #F2F5F4; --rule: #D3D7D9; --hairline: #E8EBEC;
  --ok: #2B7A3D;
  --erp: #0B5A56; --erp-strong: #08443F; --erp-soft: #D3E6E4;
  --crm: #5A2F73; --crm-strong: #46225A; --crm-soft: #EBE0F0;
  --sans: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --ease-enter: cubic-bezier(0.2, 0, 0, 1);
  --ease-move: cubic-bezier(0.4, 0, 0.2, 1);
  color-scheme: light;
}
[dir="rtl"] {
  --sans: "IBM Plex Sans Arabic", "Golos Text", "Noto Sans Arabic", "Geeza Pro", system-ui, sans-serif;
  --serif: "Noto Naskh Arabic", "Source Serif 4", "Geeza Pro", Georgia, serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 var(--sans); font-variant-numeric: tabular-nums lining-nums; -webkit-font-smoothing: antialiased; }
[dir="rtl"] body { font-size: 17px; line-height: 1.75; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .wrap { padding: 0 34px; } }
.read { max-width: 65ch; }
.balance { text-wrap: balance; }
.pretty { text-wrap: pretty; }
.skip { position: absolute; top: 8px; inset-inline-start: 8px; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  background: var(--paper); color: var(--ink); padding: 8px 12px; border-radius: 8px; z-index: 10; }
.skip:focus { width: auto; height: auto; clip-path: none; }
main:focus { outline: none; }   /* the skip link moves focus here (S06); the next Tab reaches the first link in the content */

/* 1.1.45: the quiet language suggestion above the header (shown by site.js; never a redirect). */
.lang-hint { background: var(--tint); color: var(--ink); border-bottom: 1px solid var(--hairline); font-size: 14px; }
.lang-hint .wrap { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.lang-hint nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-underline-offset: 4px; }
.lang-hint nav a[hidden] { display: none; }
.lang-hint-x { margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-inline-end: -12px;
  background: none; border: 0; color: var(--ink-2); cursor: pointer; border-radius: 8px; }
.lang-hint-x:hover { color: var(--ink); }
/* Header */
.top { position: relative; z-index: 2; }
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.top .brand { display: inline-flex; align-items: center; text-decoration: none; }
.top .brand img { height: 26px; width: auto; }
.top nav { display: flex; gap: 22px; flex-wrap: wrap; font-size: 14.5px; }
.top nav a { text-decoration: none; opacity: 0.85; }
.top nav a:hover, .top nav a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.top .end { margin-inline-start: auto; display: flex; gap: 14px; align-items: center; font-size: 14px; }
.top .langs { display: flex; gap: 2px; }
.top .langs a { text-decoration: none; padding: 4px 8px; border-radius: 6px; opacity: 0.8; }
.top .langs a[aria-current="true"] { opacity: 1; font-weight: 600; }
.on-ink { background: var(--brand-ink); color: var(--paper); }
.on-ink .btn.secondary { color: var(--paper); border-color: rgba(255,255,255,0.45); }
.on-paper { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--hairline); }
@media (max-width: 767px) {
  .top .wrap { flex-wrap: wrap; gap: 8px 16px; padding-top: 12px; padding-bottom: 12px; }
  .top nav { order: 3; width: 100%; gap: 16px; font-size: 14px; }
  .top .end { gap: 8px; }
  .top .langs .ic { display: none; }
  .top .langs a { padding: 4px 6px; }
  .top .btn { min-height: 40px; padding: 0 14px; }
  /* 1.1.25 (audit H1): on a narrow phone the language links and Sign in wrap inside the width (language links stay together, Sign in
     takes its own row when needed; rows start at the reading side, so at the right in Arabic). Nothing is hidden or shortened. */
  .top .end { flex-wrap: wrap; min-inline-size: 0; max-inline-size: 100%; row-gap: 8px; }
  .top .langs { flex-wrap: nowrap; }
}
.top .btn { white-space: nowrap; }
/* 1.1.43: "Keep me posted" in the top bar: a quiet text button (ink on paper, paper on ink), nav height, never a filled box.
   Hidden (kept in place, so nothing moves) while the form itself is on screen. */
.top .keep { display: inline-flex; align-items: center; min-height: 32px; padding: 0 2px; font: 600 14px/1 var(--sans); white-space: nowrap; text-decoration: none;
  color: inherit; border-bottom: 1px solid transparent; transition: opacity 160ms var(--ease-move), border-color 120ms var(--ease-move); }
.on-paper .keep { color: var(--erp); }
.top .keep:hover { border-bottom-color: currentColor; }
.top .keep[data-away] { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 420px) { .top .keep { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .top .keep { transition: none; } }

/* Arabic pages: a Latin name (Sampleford Group, FilaFlow ERP) never breaks across lines. */
[dir="rtl"] bdi { white-space: nowrap; }
/* …except in headings: a long Latin name may break at its space ("Sampleford / Group"), still left to right (1.1.25, audit M1). */
[dir="rtl"] :is(h1, h2, h3) bdi { white-space: normal; overflow-wrap: break-word; }

/* Icons: the FilaFlow set (guide §3.4), one 1.5 px line in the text colour; only on actions. */
.ic { flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: butt; stroke-linejoin: miter; vertical-align: -0.15em; }
.top .langs { align-items: center; }
.top .langs .ic { opacity: 0.7; margin-inline-end: 4px; }
[dir="rtl"] .btn .ic, [dir="rtl"] .links .ic[data-flip] { transform: scaleX(-1); }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 8px; font: 600 15px/1 var(--sans);
  text-decoration: none; border: 1px solid transparent; transition: background-color 120ms var(--ease-move), transform 120ms var(--ease-move); }
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--paper); color: var(--ink); }
.btn.dark { background: var(--brand-ink); color: var(--paper); }
.btn.dark:hover { background: #000; }
.btn.erp { background: var(--erp); color: var(--paper); }
.btn.erp:hover { background: var(--erp-strong); }
.btn.crm { background: var(--crm); color: var(--paper); }
.btn.crm:hover { background: var(--crm-strong); }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.secondary:hover { background: var(--tint); }
.on-ink .btn.secondary:hover, .field .btn.secondary:hover { background: rgba(255,255,255,0.08); }
.link { font-weight: 600; text-underline-offset: 4px; }
.arrow::after { content: " →"; }
[dir="rtl"] .arrow::after { content: " ←"; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Hero (company, ink) */
.hero { padding: 56px 0 56px; }
.hero h1 { font: 400 clamp(40px, 6.3vw, 68px)/1.05 var(--serif); letter-spacing: -0.01em; margin: 0; max-width: 16ch; }
@media (min-width: 768px) { .hero h1 .line { white-space: nowrap; } }
[dir="rtl"] .hero h1 { line-height: 1.35; letter-spacing: 0; }
.hero p.lead { font-size: 19px; line-height: 1.55; max-width: 34em; margin: 26px 0 0; opacity: 0.88; }
.label { font-size: 12px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.8; margin: 0 0 14px; }
[dir="rtl"] .label { letter-spacing: 0; text-transform: none; font-size: 13px; }

/* Colour fields (products) */
.fields { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .fields { grid-template-columns: 1fr 1fr; } }
.field { color: var(--paper); padding: 56px 0 64px; display: flex; flex-direction: column; }
.field.erp { background: var(--erp); }
.field.crm { background: var(--crm); }
.field .inner { padding: 0 16px; max-width: 620px; width: 100%; flex: 1; display: flex; flex-direction: column; }
@media (min-width: 768px) { .field .inner { padding: 0 34px; } }
@media (min-width: 900px) { .fields .field.erp .inner { margin-inline-start: auto; } }
.field h2 { font: 400 clamp(30px, 3.6vw, 40px)/1.15 var(--serif); margin: 0; max-width: 24ch; }
[dir="rtl"] .field h2 { line-height: 1.45; }
.field p { margin: 18px 0 0; opacity: 0.9; max-width: 32em; }
/* Both product fields end with their button on the same line, whatever the length of the text above (founder, 8 Oct). */
.field .actions { margin-top: auto; padding-top: 26px; }
/* Side by side, the two panels share their rows (founder, 9 Oct 2026): label, headline, who it's for, what it does and the button
   each start at the same height in both (1.1.38: label, headline, one line, buttons), whatever the headline's length or language. On phones they stack. */
@media (min-width: 900px) {
  .fields { grid-template-rows: repeat(4, auto); }
  .fields .field { grid-row: span 4; display: grid; grid-template-rows: subgrid; }
  .fields .field .inner { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; align-content: start; }
  .fields .field .actions { margin-top: 0; align-self: start; }
}
.field .btn.primary { color: var(--ink); }
.field .btn.secondary { color: var(--paper); border-color: rgba(255,255,255,0.45); }

/* Product page hero */
.product-hero { padding: 64px 0 72px; color: var(--paper); }
.product-hero.erp { background: var(--erp); }
.product-hero.crm { background: var(--crm); }
.product-hero h1 { font: 400 clamp(38px, 5.6vw, 60px)/1.1 var(--serif); margin: 0; max-width: 18ch; }
[dir="rtl"] .product-hero h1 { line-height: 1.45; }
.product-hero p.lead { font-size: 18.5px; max-width: 36em; margin: 22px 0 0; opacity: 0.9; }
/* 1.1.45 (audit S01): the category beside the product's name, quiet (an outline, never a filled badge); normal case, so it reads as words. */
.label .category { display: inline-block; margin-inline-start: 10px; padding: 1px 10px; border: 1px solid rgba(255,255,255,0.4); border-radius: 999px;
  text-transform: none; letter-spacing: 0; font-size: 12.5px; line-height: 1.6; vertical-align: 1px; white-space: nowrap; }
/* A lighter first screen on a phone: less padding, a smaller home headline, and the buttons right after the first sentence
   (the product's longer sentences follow them). */
@media (max-width: 767px) {
  .hero { padding: 36px 0 32px; }
  .hero h1 { font-size: clamp(32px, 9vw, 40px); }
  .field { padding: 40px 0 48px; }
  .product-hero { padding: 40px 0 48px; }
  .product-hero .wrap { display: flex; flex-direction: column; }
  .product-hero .actions { order: 1; }
  .product-hero p.lead { font-size: 17px; margin-top: 16px; }
  .product-hero p.lead.more { order: 2; }
  .product-hero .wrap > div:last-child { order: 3; margin-top: 32px !important; }
  .label .category { margin-inline-start: 0; margin-top: 6px; }
}

/* Screenshots: a thin rule border and 12 px corners, no tilt, no floating cards (guide §26). */
.shot { position: relative; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--canvas); }
.shot img { width: 100%; height: auto; }
.shot.on-colour { border-color: rgba(255,255,255,0.25); }
.showcase { padding: 72px 0; }
.switch { display: inline-flex; position: relative; padding: 2px; border-radius: 8px; background: var(--tint); box-shadow: inset 0 0 0 1px var(--hairline); margin: 0 0 22px; }
.switch button { position: relative; z-index: 1; border: 0; background: transparent; font: 500 14px var(--sans); color: var(--ink-2); height: 36px; padding: 0 16px; border-radius: 6px; cursor: pointer; }
.switch button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.showcase .stage { position: relative; }
.showcase .stage .shot { transition: opacity 600ms var(--ease-move); }
.showcase .stage .shot[hidden] { display: block; position: absolute; inset: 0; opacity: 0; pointer-events: none; }

/* Sections */
section.band { padding: 72px 0; border-top: 1px solid var(--hairline); }
section.band h2 { font: 400 clamp(28px, 3.4vw, 38px)/1.2 var(--serif); margin: 0 0 12px; max-width: 22ch; }
[dir="rtl"] section.band h2 { line-height: 1.5; }
section.band > .wrap > p.intro { color: var(--ink-2); max-width: 40em; margin: 0 0 36px; }
.points { display: grid; grid-template-columns: 1fr; gap: 32px 48px; }
@media (min-width: 768px) { .points { grid-template-columns: repeat(3, 1fr); } }
.points.two { }
@media (min-width: 768px) { .points.two { grid-template-columns: repeat(2, 1fr); } }
.points h3 { font: 600 16px/1.4 var(--sans); margin: 0 0 6px; }
.points p { margin: 0; color: var(--ink-2); }
.split { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 5fr 7fr; gap: 56px; } }

/* Early access (founder, 8 Oct 2026): one large serif line, then two quiet actions; open, no boxes (guide §6.1). */
.early { padding: 88px 0 104px; }
.early h1 { font: 400 clamp(38px, 6vw, 68px)/1.08 var(--serif); letter-spacing: -0.01em; margin: 0; max-width: 18ch; }
[dir="rtl"] .early h1 { line-height: 1.45; letter-spacing: 0; }
.early .quiet { display: grid; grid-template-columns: 1fr; gap: 40px 64px; margin-top: 64px; max-width: 880px; }
@media (min-width: 768px) { .early .quiet { grid-template-columns: 1fr 1fr; } }
.early .quiet > div { border-top: 1px solid var(--hairline); padding-top: 20px; }
.early h2 { font: 600 17px/1.4 var(--sans); margin: 0; }
.note-line { color: var(--ink-2); margin: 6px 0 0; }
.links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 16px 0 0; }
.links a { display: inline-flex; align-items: center; gap: 8px; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 5px; }
.links a:hover { text-decoration-color: currentColor; }

/* Reading pages (help, legal, status, what's new): plain layout, 65-character lines, Golos 16 px (guide §19). */
.page { padding: 56px 0 88px; }
.page h1 { font: 400 clamp(34px, 4.6vw, 48px)/1.15 var(--serif); margin: 0 0 16px; max-width: 20ch; }
[dir="rtl"] .page h1 { line-height: 1.45; }
/* A single long word (RU «Конфиденциальность») is wider than a 320 px phone: it may hyphenate there, and only there (1.1.25). */
@media (max-width: 359px) { .page h1 { hyphens: auto; overflow-wrap: break-word; } }
.page h2 { font: 600 19px/1.35 var(--sans); margin: 40px 0 10px; }
.page p, .page li { max-width: 65ch; }
.page ol { padding-inline-start: 22px; }
.page ol li { margin: 0 0 10px; }
.list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--hairline); max-width: 760px; }
.list li { border-bottom: 1px solid var(--hairline); }
.list a { display: flex; justify-content: space-between; gap: 4px 16px; padding: 14px 0; text-decoration: none; }
.list a > span { min-width: 0; overflow-wrap: anywhere; }
.list a:hover span:first-child { text-decoration: underline; text-underline-offset: 4px; }
.list .meta { color: var(--ink-3); font-size: 14px; text-align: end; }
/* Phones: the title and its "when" line stack, so nothing runs off the right edge (second review, P1). */
@media (max-width: 600px) { .list a { flex-direction: column; } .list .meta { text-align: start; } }
.read p, .callout { overflow-wrap: anywhere; }
.entry { border-top: 1px solid var(--hairline); padding: 22px 0; max-width: 760px; }
.entry h2 { margin: 0 0 4px; }
.entry .date { color: var(--ink-3); font-size: 14px; margin: 0 0 10px; }
.service { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--hairline); padding: 14px 0; max-width: 760px; }
.service .state { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.service .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.service .state.warn { color: #8F5C00; } .service .state.warn .dot { background: #8F5C00; }
.service .state.bad { color: #A82A20; } .service .state.bad .dot { background: #A82A20; }
.callout { border-top: 1px solid var(--hairline); padding: 16px 0 0; max-width: 760px; color: var(--ink-2); }
.callout.problem { color: #8F5C00; border-top-color: #8F5C00; }
.choose-list { max-width: 760px; }
.choose-list a { align-items: center; padding: 18px 0; }
.choose-list strong { display: block; font-size: 17px; }
.choose-list .sub { color: var(--ink-2); font-size: 14.5px; }
.choose-list .ic { color: var(--ink-2); flex: none; }
[dir="rtl"] .choose-list .ic { transform: scaleX(-1); }

/* Footer */
footer.site { border-top: 1px solid var(--hairline); padding: 40px 0 56px; color: var(--ink-3); font-size: 14px; }
footer.site .cols { display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; }
footer.site nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
footer.site a { text-decoration: none; color: var(--ink-2); }
footer.site a:hover { color: var(--ink); text-decoration: underline; }
footer.site .mails { display: flex; flex-direction: column; gap: 6px; }
footer.site .mark { height: 14px; width: auto; opacity: 0.85; margin-bottom: 10px; }

/* Website motion (guide §9.6): the hero sentence fades in once, line by line; sections fade in and rise 12 px once as they come into
   view. Without scripts everything is simply visible; with reduced motion nothing moves. */
.rise { transition: opacity 320ms var(--ease-enter), transform 320ms var(--ease-enter); }
/* Only a section that starts below the first screen waits to fade in; everything is visible without the script, when printed
   and in a full-page picture of the page. */
.js .rise.later { opacity: 0; transform: translateY(12px); }
@media print { .js .rise.later { opacity: 1; transform: none; } }
.js .hero .line { opacity: 0; animation: fade 320ms var(--ease-enter) forwards; }
@keyframes fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .js .rise, .js .hero .line { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .showcase .stage .shot { transition: none; }
}

/* 1.1.23: product pages "Available now" and "Coming next" (copy sheet §4): open lists, no cards. */
.points.now h3 { font-weight: 600; }
.next-list { list-style: none; padding: 0; margin: 0 0 18px; border-top: 1px solid var(--hairline); max-width: 760px; }
.next-list li { border-bottom: 1px solid var(--hairline); padding: 12px 0; color: var(--ink-2); }
.next-list li strong { color: var(--ink); font-weight: 600; }

section.band > .wrap > p.intro { color: var(--ink-2); }
.early .sub { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 34em; margin: 22px 0 0; }
.early-grid { display: grid; grid-template-columns: 1fr; gap: 48px 72px; margin-top: 56px; max-width: 1000px; }
@media (min-width: 900px) { .early-grid { grid-template-columns: 3fr 2fr; } }
.early-demo { border-top: 1px solid var(--hairline); padding-top: 20px; align-self: start; }
.early .said { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.2; max-width: 22ch; min-height: 1.2em; }
.early .after { margin-top: 48px; border-top: 1px solid var(--hairline); padding-top: 20px; max-width: 520px; }
.list-note { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 4px 0; margin: 8px 0 32px; scroll-margin-top: 24px; }

/* The early-access and news form (copy sheet §5, "Look"): the website's open style. Hairline fields (a line under the text, no box),
   plain-word choices underlined in the product's colour when chosen (teal ERP, plum CRM, ink otherwise), our own check mark from the
   FilaFlow icon set, the extra questions sliding open (320 ms, nothing moves with reduced motion). */
.wl { max-width: 560px; }
.wl fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.wl legend, .wl-field label, .wl-sub, .wl-lead { display: block; padding: 0; font-size: 14px; color: var(--ink-2); margin: 0 0 6px; }
.wl-field { margin: 0 0 22px; }
.wl-field input, .wl-field textarea { width: 100%; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent; color: var(--ink);
  font: 17px/1.5 var(--sans); padding: 6px 0 8px; outline: none; transition: border-color 120ms var(--ease-move); }
.wl-field textarea { resize: none; overflow: hidden; min-height: 40px; }
.wl-products .word { font-size: 17px; }
.wl-field input:focus, .wl-field textarea:focus { border-bottom-color: var(--ink); box-shadow: 0 1px 0 0 var(--ink); }
[dir="rtl"] .wl-field input[type="email"] { text-align: right; }
.wl-interests { margin: 0 0 22px; }
.wl-boxes, .wl-words { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; }
.wl-words { margin: 0 0 14px; }
.wl-lead { display: inline; margin: 0; }
.choice { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; min-height: 40px; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.choice .word { text-decoration: underline 2px transparent; text-underline-offset: 6px; transition: text-decoration-color 120ms var(--ease-move); }
.choice:hover .word { text-decoration-color: var(--rule); }
.choice input:checked ~ .word { text-decoration-color: var(--ink); }
.choice.erp input:checked ~ .word { text-decoration-color: var(--erp); }
.choice.crm input:checked ~ .word { text-decoration-color: var(--crm); }
.choice input:focus-visible ~ .word { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
.choice .tick { width: 20px; height: 20px; flex: none; border: 1px solid var(--ink-4); border-radius: 4px; display: inline-grid; place-items: center; color: var(--paper);
  transition: background-color 120ms var(--ease-move), border-color 120ms var(--ease-move); }
.choice .tick svg { fill: none; stroke: currentColor; stroke-width: 2; opacity: 0; }
.choice input:checked + .tick { background: var(--ink); border-color: var(--ink); }
.choice.erp input:checked + .tick { background: var(--erp); border-color: var(--erp); }
.choice.crm input:checked + .tick { background: var(--crm); border-color: var(--crm); }
.choice input:checked + .tick svg { opacity: 1; }
.wl-early { margin: 0 0 4px; }
.wl-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease-enter); }
.wl-more.open { grid-template-rows: 1fr; }
.wl-more-inner { overflow: hidden; min-height: 0; }
.wl-more.open .wl-more-inner { padding-top: 18px; }
.wl-intro { color: var(--ink-2); margin: 0 0 14px; }
.wl-product .wl-sub { display: none; margin-top: 4px; font-weight: 600; }
.wl.both .wl-product .wl-sub { display: block; }
.wl-send { margin: 26px 0 0; }
.wl-send .btn[disabled] { opacity: 0.6; cursor: default; }
.wl-error { color: #A82A20; margin: 14px 0 0; }
.wl-consent { color: var(--ink-3); font-size: 14px; margin: 14px 0 0; max-width: 46em; }
.wl-consent a { color: var(--ink-2); text-underline-offset: 3px; }
.wl-done { font: 400 clamp(22px, 2.6vw, 28px)/1.35 var(--serif); max-width: 26em; margin: 0; }
[dir="rtl"] .wl-done { line-height: 1.6; }
.wl-check:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .wl-more { transition: none; } }
.provider-link { margin-top: 40px; font-size: 14px; }
.provider-link a { font-weight: 500; color: var(--ink-2); }

/* The short form below "Coming next" starts on its own, under a hairline, so it never runs into the line above (founder, 9 Oct). */
.wl.short { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--hairline); }
@media (max-width: 600px) { .wl.short { margin-top: 28px; padding-top: 24px; } .wl-field { margin-bottom: 26px; } .wl-boxes, .wl-words { gap: 10px 24px; } }
/* After sending: a clear pop-up that the confirmation email is on its way (founder, 9 Oct). */
.wl-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(15, 18, 20, 0.45);
  animation: wl-fade 200ms var(--ease-enter); }
.wl-modal[hidden] { display: none; }
.wl-modal-box { position: relative; width: 100%; max-width: 440px; background: var(--paper); border-radius: 16px; padding: 36px 28px 28px; text-align: center;
  box-shadow: 0 24px 64px rgba(15, 18, 20, 0.25); }
.wl-modal-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--tint); color: var(--ink); margin-bottom: 18px; }
.wl-modal-text { font: 400 24px/1.35 var(--serif); margin: 0 0 10px; }
[dir="rtl"] .wl-modal-text { line-height: 1.6; }
.wl-modal-email { color: var(--ink-2); margin: 0 0 24px; overflow-wrap: anywhere; font-weight: 500; }
.wl-modal-email:empty { display: none; }
.wl-modal-x { position: absolute; top: 12px; inset-inline-end: 12px; width: 40px; height: 40px; border: 0; background: transparent; color: var(--ink-3); border-radius: 8px; cursor: pointer; }
.wl-modal-x:hover { background: var(--tint); color: var(--ink); }
.wl-modal .btn { min-width: 160px; }
@keyframes wl-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wl-modal { animation: none; } }
.wl.short + .wl-done { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--hairline); }

/* Service notices (1.1.25): the quiet line when there is no notice. */
.quiet-line { color: var(--ink-2); margin: 24px 0 0; }

/* Service status rows (1.1.34): one row per service: name, state, when it was last checked. Colour is never the only signal (the state is written out). */
.status-rows { list-style: none; margin: 24px 0 0; padding: 0; max-width: 760px; border-top: 1px solid var(--hairline); }
.status-rows li { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--hairline); align-items: baseline; }
.status-rows .row-name { font-weight: 600; }
.status-rows .row-state { text-align: end; color: var(--ink-2); }
.status-rows .row-state::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 8px; background: var(--ink-4); }
.status-rows li[data-state="ok"] .row-state { color: var(--ink); }
.status-rows li[data-state="ok"] .row-state::before { background: var(--ok); }
.status-rows li[data-state="problem"] .row-state { color: #8F5C00; font-weight: 600; }
.status-rows li[data-state="problem"] .row-state::before { background: #8F5C00; }
.status-rows .row-when { grid-column: 1 / -1; color: var(--ink-3); font-size: 14px; }

/* 1.1.38: the money line of each product page, the small "Example data" caption inside a money picture, the "in final checks" tag and the shop line. Quiet, no boxes. */
.money-line { font: 400 clamp(20px, 2.2vw, 24px)/1.4 var(--serif); color: var(--ink); max-width: 36em; margin: 0 0 32px; }
[dir="rtl"] .money-line { line-height: 1.6; }
.shot-note { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; padding: 7px 14px; border-top: 1px solid var(--hairline); background: var(--paper); color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }
.shot-note .dot { opacity: 0.6; }
.shot-note button { font: inherit; color: var(--ink-2); background: none; border: 0; padding: 2px 4px; margin: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.shot-note button:hover { color: var(--ink); }
.shot-note .region-menu { display: inline-flex; flex-wrap: wrap; gap: 0 2px; }
.shot-note .region-menu[hidden] { display: none; }
.shot-note .region-menu button[aria-pressed="true"] { color: var(--ink); font-weight: 600; text-decoration: none; }
.shot-note [data-region-code] { unicode-bidi: isolate; direction: ltr; }
.shot-note .region-msg { flex-basis: 100%; color: var(--ink-2); }
.shot-note .region-msg:empty { display: none; }
.next-list .tag { display: inline-block; margin-inline-start: 6px; font-size: 12.5px; color: var(--ink-3); border: 1px solid var(--rule); border-radius: 999px; padding: 0 8px; line-height: 1.6; white-space: nowrap; }
.shops-next { margin: 22px 0 4px; color: var(--ink); max-width: 40em; }
.shops-under { margin: 0 0 18px; color: var(--ink-2); font-size: 14.5px; }

/* 1.1.45 (audit S13): the CRM add-on line under "Customer history, built in." */
.points .addon { margin-top: 8px; }
/* 1.1.45 (audit N03): How to start, three short steps */
.steps { list-style: none; counter-reset: step; margin: 24px 0 0; padding: 0; display: grid; gap: 22px 32px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { counter-increment: step; position: relative; padding-top: 44px; }
.steps li::before { content: counter(step); position: absolute; top: 0; inset-inline-start: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center; font: 500 14px/1 var(--sans); color: var(--ink-2); }
.steps h3 { margin: 0; font-size: 17px; }
.steps h3 a { text-underline-offset: 4px; }
.steps p { margin: 6px 0 0; color: var(--ink-2); }

/* 1.1.45 (audit S11): "View screen" on every screenshot, and the enlarged view. */
.shot-view { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--rule); border-radius: 999px; background: rgba(255,255,255,0.92); color: var(--ink); font: 500 13px/1 var(--sans); cursor: pointer;
  box-shadow: 0 1px 2px rgba(15,18,20,0.08); }
.shot-view:hover { background: var(--paper); }
@media (max-width: 767px) { .shot-view { top: 8px; inset-inline-end: 8px; min-height: 44px; } }
.viewer { width: min(1480px, 100vw - 24px); max-width: none; max-height: calc(100vh - 24px); padding: 0; border: 0; border-radius: 14px; background: var(--paper); color: var(--ink); overflow: hidden; }
.viewer::backdrop { background: rgba(15, 18, 20, 0.7); }
.viewer-scroll { max-height: calc(100vh - 24px); overflow: auto; -webkit-overflow-scrolling: touch; }
.viewer-scroll img { width: 100%; height: auto; cursor: zoom-in; }
.viewer-scroll img.zoomed { width: 1440px; max-width: none; cursor: zoom-out; }
.viewer-x { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 1; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--ink); cursor: pointer; box-shadow: 0 1px 3px rgba(15,18,20,0.2); }
/* 1.1.45 (audit S11): phone header. Row 1: brand, the short language codes and Sign in; row 2: ERP, CRM, Early access, Help (44 px touch rows).
   "Keep me posted" stays on wider screens and next to the form. */
.top .langs .ln-short { display: none; }
@media (max-width: 767px) {
  .top .keep { display: none; }
  .top .langs .ln-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .top .langs .ln-short { display: inline; }
  .top .langs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 36px; justify-content: center; }
  .top nav { gap: 4px 20px; }
  .top nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .top .wrap { padding-top: 6px; padding-bottom: 2px; row-gap: 0; }
}

/* 1.1.45: the workshop story. Four short steps on a quiet tint, numbered by a thin line in the product's colour; the example note under it. */
.band.story { background: var(--tint); }
.story-steps { list-style: none; margin: 28px 0 20px; padding: 0; display: grid; gap: 24px 28px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .story-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .story-steps { grid-template-columns: repeat(4, 1fr); } }
.story-steps li { border-top: 2px solid var(--erp); padding-top: 14px; }
.story.crm .story-steps li { border-top-color: var(--crm); }
.story-step { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--erp); }
.story.crm .story-step { color: var(--crm); }
[dir="rtl"] .story-step { letter-spacing: 0; text-transform: none; font-size: 13.5px; }
.story-steps p.pretty { margin: 0; color: var(--ink); }
.story .shot-note { border: 1px solid var(--hairline); border-radius: 10px; display: inline-flex; }
.amt { font-weight: 600; white-space: nowrap; }

/* 1.1.62: workflow pages and the print-cost calculator */
.wf-tag { display: inline-block; margin-inline-start: 8px; font-size: 12.5px; color: var(--ink-3); border: 1px solid var(--rule); border-radius: 999px; padding: 0 8px; line-height: 1.6; white-space: nowrap; vertical-align: middle; }
.wf-tag.now { color: var(--erp); border-color: var(--erp); }
.crm .wf-tag.now { color: var(--crm); border-color: var(--crm); }
.wf-faq { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--hairline); max-width: 760px; }
.wf-faq li { border-bottom: 1px solid var(--hairline); padding: 14px 0; }
.wf-faq h3 { margin: 0 0 6px; font: 600 16px/1.4 var(--sans); }
.wf-faq p { margin: 0; color: var(--ink-2); }
.wf-related { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wf-related a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 5px; }
.wf-related a:hover { text-decoration-color: currentColor; }
.calc { display: grid; gap: 28px; grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 880px) { .calc { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } .calc-out { position: sticky; top: 16px; } }
.calc fieldset { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.calc legend { font: 600 16px/1.4 var(--sans); margin: 0 0 10px; padding: 0; }
.calc-field { margin: 0 0 12px; }
.calc-field label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.calc-field input, .calc-field select { width: 100%; max-width: 320px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 8px; font: 16px/1.3 var(--sans); background: var(--paper); color: var(--ink); }
.calc-field input[aria-invalid="true"] { border-color: var(--bad, #b3261e); }
.calc-field .hint { display: block; font-size: 13px; color: var(--ink-3); margin: 4px 0 0; max-width: 40em; }
.calc-field .bad { display: block; font-size: 13px; color: var(--bad, #b3261e); margin: 4px 0 0; }
.calc-out { border: 1px solid var(--hairline); border-radius: 12px; padding: 18px 18px 14px; background: var(--tint); }
.calc-out h2 { margin: 0 0 10px; font: 600 16px/1.4 var(--sans); }
.calc-out table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.calc-out th { text-align: start; font-weight: 400; color: var(--ink-2); padding: 6px 0; border-bottom: 1px solid var(--hairline); }
.calc-out td { text-align: end; padding: 6px 0; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.calc-out tr.strong th, .calc-out tr.strong td { font-weight: 600; color: var(--ink); }
.calc-out .calc-note { font-size: 13px; color: var(--bad, #b3261e); margin: 0 0 8px; }
.calc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
@media print { .calc-actions, header, footer, .lang-hint, .top-keep { display: none !important; } .calc { grid-template-columns: 1fr; } .calc-out { position: static; } }