/* ---------------------------------------------------------------------------
TrustRMM on top of base.css (the srvit.co.il system).
Related, not identical. base.css gives the shared skeleton - grid, spacing
rhythm, form card, footer, RTL and mobile behaviour - so the two sites read
as one family. Everything in the IDENTITY block below deliberately pulls
TrustRMM away from srvit.co.il: the logo's cyan and navy instead of SrvIT's
teal-blue, heavier headings, tight "console" corners, a status-pill eyebrow
and an uptime-strip motif under every heading that SrvIT does not have.
--------------------------------------------------------------------------- */
/* =========================================================== IDENTITY === */
/* Colour comes from the TrustRMM logo: cyan #02ade8 for the mark, navy #0b1f33
for the wordmark. Cyan is a DECORATION colour only - white on it is 2.58:1
and fails - so text and buttons never sit on it. Measured, not eyeballed:
white on navy button #0b1f33 = 16.69:1 white on dark button #0a76aa = 5.02:1
accent-ink light #066f9e on bg = 5.25:1 accent-ink dark #3cc3f2 on bg = 9.41:1
muted light 7.40:1 faint on surface2 5.30:1 ok light #0c6f4a on surface2 > 4.8:1 */
:root{
--bg:#f5f9fc;--surface:#ffffff;--surface2:#eaf2f8;--line:#d7e3ec;
--ink:#0b1f33;--muted:#3f5468;--faint:#536578;
--accent:#02ade8;--accent-ink:#066f9e;--accent-btn:#0b1f33;--btn:#0b1f33;
--ok:#0c6f4a;--warn:#a04a08;
--console:#0b1f33;--console-ink:#dbe8f3;--console-line:#1d3450;
--r:6px; /* console corners: tighter than SrvIT's 12-16px */
--rl:10px;
}
@media(prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--bg:#0a0f16;--surface:#111925;--surface2:#172232;--line:#23324a;
--ink:#e6eef7;--muted:#9fb0c3;--faint:#8d9fb3;
--accent:#02ade8;--accent-ink:#3cc3f2;--accent-btn:#0a76aa;--btn:#0a76aa;
--ok:#2fbe86;--warn:#f5b040;
--console:#070b11;--console-ink:#dbe8f3;--console-line:#1d2a3d;
}
}
:root[data-theme="light"]{
--bg:#f5f9fc;--surface:#ffffff;--surface2:#eaf2f8;--line:#d7e3ec;
--ink:#0b1f33;--muted:#3f5468;--faint:#536578;
--accent:#02ade8;--accent-ink:#066f9e;--accent-btn:#0b1f33;--btn:#0b1f33;--ok:#0c6f4a;--warn:#a04a08;
--console:#0b1f33;--console-ink:#dbe8f3;--console-line:#1d3450;
}
:root[data-theme="dark"]{
--bg:#0a0f16;--surface:#111925;--surface2:#172232;--line:#23324a;
--ink:#e6eef7;--muted:#9fb0c3;--faint:#8d9fb3;
--accent:#02ade8;--accent-ink:#3cc3f2;--accent-btn:#0a76aa;--btn:#0a76aa;--ok:#2fbe86;--warn:#f5b040;
--console:#070b11;--console-ink:#dbe8f3;--console-line:#1d2a3d;
}
/* Type: heavy, tight headings - the wordmark is a bold geometric sans and the
headings follow it. Body stays at base size for long Hebrew lines. */
h1{font-size:clamp(30px,5vw,48px);font-weight:700;letter-spacing:-.012em;line-height:1.1}
h2{font-weight:700;letter-spacing:-.008em;line-height:1.22}
.hero .sub{font-size:18.5px;max-width:58ch}
.crumbs{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--muted);margin:0 0 14px}
.crumbs a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--accent-ink)}
.crumbs [aria-current]{color:var(--ink)}
.hero .icp{color:var(--faint);font-size:15.5px;max-width:58ch;margin:-6px 0 22px;padding-inline-start:14px;border-inline-start:2px solid var(--accent)}
.orcall{color:var(--muted);font-size:14.5px}
body{font-size:16.5px}
/* The eyebrow is a status pill: a green live dot, mono label, hairline box. */
.eyebrow,.sec-head .k,.sb .k,.legal>.wrap>.k{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
color:var(--accent-ink);background:var(--surface);
border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line));
border-radius:var(--r);padding:5px 12px 5px 10px;margin-bottom:16px
}
.eyebrow::before,.sec-head .k::before,.sb .k::before,.legal>.wrap>.k::before{
content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;
box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent);
animation:live 2.4s ease-out infinite
}
@keyframes live{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
/* THE MOTIF: an uptime strip under every section heading - a row of ticks,
all green but the last one in the accent, like the availability bar of a
monitored service. Drawn with gradients so it takes the theme's colours. */
.sec-head h2{position:relative;padding-bottom:24px}
.sec-head h2::after{
content:"";position:absolute;bottom:0;inset-inline-start:0;width:118px;height:8px;border-radius:2px;
background:
linear-gradient(to var(--to,left),var(--accent) 0 9px,transparent 9px) no-repeat,
repeating-linear-gradient(to right,var(--ok) 0 3px,transparent 3px 5px);
opacity:.9
}
html[dir="ltr"] .sec-head h2::after{--to:right}
/* Faint monitor grid behind the hero - the "screen" feel, gone on mobile. */
.hero{position:relative}
.hero::before{
content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background-image:
linear-gradient(color-mix(in srgb,var(--accent) 9%,transparent) 1px,transparent 1px),
linear-gradient(90deg,color-mix(in srgb,var(--accent) 9%,transparent) 1px,transparent 1px);
background-size:38px 38px;
-webkit-mask:radial-gradient(ellipse 70% 80% at 50% 0%,#000 30%,transparent 100%);
mask:radial-gradient(ellipse 70% 80% at 50% 0%,#000 30%,transparent 100%)
}
.hero>.wrap{position:relative;z-index:1}
@media(max-width:720px){.hero::before{display:none}}
/* Corners pulled in across the shared components. */
.icard,.fstep,.ccard,.stat,.cbox,.secbox,.cmnode,.lyr{border-radius:var(--r)}
.dev,.formcard,.sblist{border-radius:var(--rl)}
.btn,.btn.lg{border-radius:var(--r)}
/* Cards carry a cyan hairline on the top edge instead of a plain box. */
.icard{position:relative;overflow:hidden}
.icard::after{content:"";position:absolute;top:0;inset-inline-start:0;width:100%;height:2px;
background:linear-gradient(to var(--to,left),var(--accent),transparent);opacity:.65}
html[dir="ltr"] .icard::after{--to:right}
a.icard:hover::after{opacity:1}
/* PROOF BAND: a navy console strip - numbers in cyan on dark, mono. This is
the one place the brand goes dark in light mode, and it does so on purpose:
it is the readout of the system. Measured: #3cc3f2 on #0b1f33 = 8.9:1,
label #b9cbdd on #0b1f33 = 10.4:1. */
.proof{background:var(--console);border-top:3px solid var(--accent);border-bottom:1px solid var(--console-line)}
.proof .c{border-inline-start:1px solid var(--console-line)}
.proof .c:first-child{border-inline-start:none}
.proof .n{font-family:var(--mono);font-weight:600;font-size:26px;letter-spacing:-.01em;color:#3cc3f2}
.proof .n small{color:#3cc3f2;font-family:var(--mono)}
.proof .l{color:#b9cbdd;font-size:13px}
@media(max-width:720px){
.proof .c:nth-child(odd){border-inline-start:none}
.proof .c:nth-child(n+3){border-top:1px solid var(--console-line)}
}
/* NAVY FRAME: the header and the footer sit on the console colour, the page
between them stays light. srvit.co.il has a frosted light header and a light
footer, so this is the first thing that says "a different site" - before the
typeface (Plex, not Assistant) and the tighter corners register. The nav CTA
is white on navy; measured: #0b1f33 on #fff = 16.69:1, console-ink #dbe8f3 on
#0b1f33 = 13.6:1, faint #8aa3bc on #0b1f33 = 6.4:1. */
.nav{background:var(--console);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--console-line);border-top:3px solid var(--accent)}
.nav .links a{color:var(--console-ink)}
.nav .links a:hover{color:#fff}
.nav .links a[aria-current="page"]{color:#fff;font-weight:700;box-shadow:inset 0 -2px 0 var(--accent);padding-bottom:3px}
.nav .links a.nav-support{color:#3cc3f2;border-color:color-mix(in srgb,var(--accent) 55%,var(--console-line))}
.nav .links a.nav-support:hover{background:color-mix(in srgb,var(--accent) 16%,transparent);color:#fff}
.nav .langsw,.nav .toggle{color:var(--console-ink);border-color:var(--console-line);background:transparent}
.nav .langsw:hover,.nav .toggle:hover{color:#fff;border-color:var(--accent)}
.nav .sp .tel{color:var(--console-ink)}
.nav .sp .tel b{color:#fff}
.nav .sp .btn{background:#fff;color:var(--console)}
.nav .sp .btn:hover{filter:none;background:#e6f6fd}
.nav .burger{border-color:var(--console-line)}
.nav .burger span{background:#fff}
.mobnav{background:var(--console);border-top-color:var(--console-line)}
.mobnav a{color:var(--console-ink);border-bottom-color:var(--console-line)}
.mobnav .mn-c{color:#3cc3f2}
/* The wordmark is navy in the light file, so the header always shows the dark file. */
:root .nav .logo .lk-light,:root footer.site .logo .lk-light{display:none}
:root .nav .logo .lk-dark,:root footer.site .logo .lk-dark{display:block}
footer.site{background:var(--console);color:var(--console-ink);border-top:3px solid var(--accent)}
footer.site .fgrid a,footer.site .fgrid p,footer.site .tel,footer.site .tel b,footer.site .eml,footer.site .eml a{color:var(--console-ink)}
footer.site .fgrid a:hover{color:#fff}
footer.site .fgrid .fh{color:#8aa3bc}
footer.site .fbar{border-top-color:var(--console-line);color:#8aa3bc}
footer.site .fbar a{color:var(--console-ink)}
/* =============================================================== BASE === */
html[dir="ltr"] body{direction:ltr}
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);background:var(--accent);color:#fff;padding:10px 16px;border-radius:0 0 var(--r) 0;z-index:100}
.skip:focus{width:auto;height:auto;clip-path:none;inset-inline-start:0;top:0;position:fixed}
/* ------------------------------------------------------------ nav extras */
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.logo .mark{flex:none;color:var(--accent)}
.langsw{color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;border:1px solid var(--line);border-radius:var(--r);padding:6px 12px;line-height:1.2;white-space:nowrap}
.langsw:hover{color:var(--ink);border-color:var(--accent)}
.nav .links{gap:17px}
.nav .links a{white-space:nowrap}
/* The current-item colour lives ONLY in the navy-frame block above. A second
rule here used to repaint it with var(--ink): near-white in dark mode (so it
looked fine) but near-black in light mode, which made the current menu item
invisible on the navy bar. Amir caught it on 11/09/2026. Do not re-add a
colour here - this block runs later and would win again. */
.nav .links a.nav-support{border-radius:var(--r);white-space:nowrap}
/* The number must never wrap: at 1440 the nav was breaking it over four lines.
The English labels are longer than the Hebrew ones, so the nav copy of the
number goes first on anything under a wide desktop. It is still in the
footer, on the contact page and in the hero. */
.tel{white-space:nowrap}
@media(max-width:1560px){.nav .sp .tel{display:none}}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);width:40px;height:38px;cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.burger span{display:block;width:17px;height:1.8px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}
.mobnav{border-top:1px solid var(--line);background:var(--surface)}
.mobnav .wrap{display:flex;flex-direction:column;padding:8px 24px 16px}
.mobnav a{padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:16px;font-weight:600}
.mobnav a:last-child{border-bottom:none}
.mobnav .mn-c{color:var(--accent-ink)}
.mobnav .mn-l{color:var(--muted);font-family:var(--mono);font-size:14px}
@media(max-width:980px){.nav .links{display:none}.burger{display:inline-flex}.nav .sp .tel{display:none}}
@media(max-width:520px){.nav .sp .btn{display:none}}
/* ------------------------------------------------------- shared devices */
.dev{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.devhead{display:flex;align-items:center;gap:10px;padding:14px 17px;border-bottom:1px solid var(--line);background:var(--surface2)}
.devt{font-weight:700;font-size:14.5px}
.devst{margin-inline-start:auto;font-family:var(--mono);font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:4px 11px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;background:var(--surface)}
.devst.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--line));background:color-mix(in srgb,var(--ok) 9%,transparent)}
.devfoot{padding:12px 17px;border-top:1px solid var(--line);font-size:12.5px;color:var(--faint);background:var(--surface2)}
.dev .pulse{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;animation:pulse 2.4s infinite}
/* The stagger used to start every row at opacity 0 with delays up to 1.8s, so
the card sat half empty for nearly two seconds after load and screenshotted
that way. Content must never begin invisible: the fade now starts at 0.55,
the step is 0.06s and everything is fully legible inside 0.5s. */
@media(prefers-reduced-motion:no-preference){
.dev{animation:devfade .35s ease both}
.dev [style*="--d"]{animation:devin .3s ease both;animation-delay:calc(var(--d,0s) / 6)}
}
@keyframes devfade{from{opacity:0}to{opacity:1}}
@keyframes devin{from{opacity:.55;transform:translateY(5px)}to{opacity:1;transform:none}}
.pipe .pipesteps{list-style:none;margin:0;padding:12px 17px}
.pipe .pipesteps li{display:flex;align-items:center;gap:12px;padding:10px 0;position:relative;font-size:15px}
.pipe .dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--accent);flex:none;background:var(--surface);position:relative;z-index:1}
.pipe li:not(:last-child)::before{content:"";position:absolute;inset-inline-start:4.5px;top:26px;width:2px;height:calc(100% - 12px);background:var(--line)}
.pipe li:nth-child(-n+3) .dot{background:var(--accent)}
.pipe .lb{color:var(--muted)}
.pipe li:nth-child(-n+3) .lb{color:var(--ink);font-weight:600}
.pipe .mt{margin-inline-start:auto;display:flex;align-items:baseline;gap:10px;font-family:var(--mono);font-size:11.5px;white-space:nowrap}
.pipe .mt em{font-style:normal;color:var(--faint)}
.pipe .mt b{color:var(--muted);font-weight:500;unicode-bidi:plaintext}
.pipe li:nth-child(-n+3) .mt b{color:var(--accent-ink)}
@media(max-width:560px){.pipe .mt{display:none}}
.ndt{width:100%;border-collapse:collapse;font-size:14px}
.ndt td{padding:10px 9px;border-bottom:1px solid var(--line)}
.ndt td:first-child{padding-inline-start:17px}.ndt td:last-child{padding-inline-end:17px}
/* At desktop width the hero device is ~465px: with 17px cell padding the name column wrapped ("מוקד · משמרת ב" on two lines). Tighter cells, no wrapping above the phone breakpoint. */
@media(min-width:481px){.ndt .nm{white-space:nowrap}}
.ndt tr:last-child td{border-bottom:none}
.ndt .ae{font-family:var(--mono);font-size:11px;color:var(--accent-ink);white-space:nowrap}
.ndt .nm{color:var(--ink)}
.ndt .st{font-family:var(--mono);font-size:11px;color:var(--ok);white-space:nowrap}
.ndt .st.arch{color:var(--faint)}
.ndt .ct{font-family:var(--mono);font-size:11.5px;color:var(--muted);text-align:end;white-space:nowrap;unicode-bidi:plaintext}
/* A grid column is min-content wide by default, so the fleet table pushed the
hero past the phone's edge and the page scrolled sideways. */
.hero .grid>*{min-width:0}
@media(max-width:480px){
.ndt{font-size:13px}
.ndt td{padding:9px 9px}
.ndt .ae{font-size:11px}
.ndt .st{font-size:10.5px}
.ndt .ct{font-size:11px}
.devhead{padding:12px 12px}
}
.layers .lyr{margin:9px 17px;padding:11px 15px;border:1px solid var(--line);background:var(--surface2);width:var(--w,100%)}
.layers .lyr b{display:block;font-size:14.5px;font-weight:700}
.layers .lyr span{font-size:12.5px;color:var(--muted)}
.layers .lyr:first-of-type{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.cmbody{padding:16px 17px}
.cmnode{border:1px solid var(--line);padding:11px 14px;background:var(--surface2)}
.cmnode b{display:block;font-size:14.5px;font-weight:700}
.cmnode span{font-size:12.5px;color:var(--muted)}
.cmnode.core{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));background:color-mix(in srgb,var(--accent) 8%,var(--surface));margin-bottom:14px}
.cmspokes{display:grid;grid-template-columns:1fr 1fr;gap:9px;position:relative}
.cmspokes::before{content:"";position:absolute;top:-9px;inset-inline-start:50%;width:1px;height:9px;background:var(--line)}
@media(max-width:420px){.cmspokes{grid-template-columns:1fr}}
.wlrow{display:flex;align-items:center;gap:12px;padding:11px 17px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--muted)}
.wlrow:last-of-type{border-bottom:none}
.wlrow .t{font-family:var(--mono);font-size:12.5px;color:var(--faint);flex:none;width:44px;unicode-bidi:plaintext}
.wlrow .s{flex:1}
.wlrow .q{font-family:var(--mono);font-size:11.5px;white-space:nowrap}
.wlrow.done{color:var(--ink)}
.wlrow.done .q{color:var(--ok)}
.wlrow.act{color:var(--ink);font-weight:600;background:color-mix(in srgb,var(--accent) 7%,transparent)}
.wlrow.act .q{color:var(--accent-ink)}
.rrow{display:flex;align-items:baseline;gap:14px;padding:11px 17px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--muted)}
.rrow:last-of-type{border-bottom:none}
.rrow .t{font-family:var(--mono);font-size:12px;color:var(--faint);flex:none;width:52px;unicode-bidi:plaintext;text-align:start}
.rrow.done{color:var(--ink);font-weight:600}
.rrow.done .t{color:var(--ok)}
/* quote card: the line first, its status ("included") at the far end - reading order, not a ledger */
.quote .rrow .t{width:auto;margin-inline-start:auto;text-align:end}
.secgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:16px 17px}
.secbox{border:1px solid var(--line);background:var(--surface2);padding:14px 13px;font-size:14px;font-weight:600;text-align:center}
@media(max-width:420px){.secgrid{grid-template-columns:1fr}}
/* ------------------------------------------------------------- sections */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
@media(max-width:900px){.cards3{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cards3{grid-template-columns:1fr}}
.icard.big{display:flex;flex-direction:column;padding:24px 22px 20px}
/* base.css turns .ic into a full-bleed 88px tinted panel. This brand wants a
small instrument badge sitting with the text instead - tighter cards, and
another clear break from the SrvIT look. */
.icard.big .ic{
width:44px;height:44px;margin:0 0 14px;border-radius:var(--r);
border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line));
background:color-mix(in srgb,var(--accent) 8%,transparent);
color:var(--accent-ink);display:flex;align-items:center;justify-content:center
}
.icard.big .ic svg{width:22px;height:22px;stroke-width:1.6}
.icard.big .t{font-weight:600;font-size:17px;margin-bottom:6px;display:block}
.icard.big .t::before{content:none}
.icard.big .d{color:var(--muted);font-size:14.5px;flex:1}
.icard.big .mo{margin-top:12px;color:var(--accent-ink);font-size:13.5px;font-weight:600}
.cards3.rel .icard{display:flex;flex-direction:column;gap:3px;padding-top:22px}
.cards3.rel .t{font-weight:600;font-size:16px}
.cards3.rel .t::before{content:none}
.cards3.rel .d{color:var(--muted);font-size:13.5px}
.commit{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
@media(max-width:640px){.commit{grid-template-columns:1fr}}
.ccard{background:var(--surface2);border:1px solid var(--line);padding:18px 20px}
.ccard b{display:block;font-weight:600;font-size:15.5px;margin-bottom:5px}
.ccard p{margin:0;color:var(--muted);font-size:14.5px}
.pr{color:var(--muted);font-size:17px;margin:0 0 16px}
.pr:last-child{margin-bottom:0}
.faq{margin-top:26px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:16px 0;font-weight:600;font-size:16px;list-style:none;display:flex;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";font-family:var(--mono);color:var(--accent-ink);font-size:18px;flex:none;width:16px}
.faq details[open] summary::before{content:"\2212"}
.faq .a{padding:0 0 18px 0;margin-inline-start:28px;color:var(--muted);font-size:15.5px}
/* --------------------------------------------------------- SrvIT band */
.srvitband{background:var(--surface2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sb{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:start}
@media(max-width:820px){.sb{grid-template-columns:1fr;gap:26px}}
.sb h2{margin-bottom:12px}
.sb p{color:var(--muted);font-size:17px;margin:0 0 22px}
.sblist{list-style:none;margin:0;padding:0;border:1px solid var(--line);overflow:hidden;background:var(--surface)}
.sblist li{border-bottom:1px solid var(--line)}
.sblist li:last-child{border-bottom:none}
.sblist a{display:block;padding:13px 18px;color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:600}
.sblist a:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent-ink)}
/* -------------------------------------------------------------- form */
.formcard .rq{color:var(--accent-ink)}
input,textarea{border-radius:var(--r)}
/* Honeypot. NOT off-screen with a negative offset: in RTL that widens the
scrollable area and mobile opens on empty space. */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.thanks.show{display:block}
.thanks.err{background:color-mix(in srgb,#c0392b 12%,transparent);border-color:color-mix(in srgb,#c0392b 40%,var(--line))}
#trmm-send[disabled]{opacity:.6;cursor:progress}
.contactside{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
@media(max-width:640px){.contactside{grid-template-columns:1fr}}
.cbox{background:var(--surface);border:1px solid var(--line);padding:16px 18px;text-decoration:none;color:var(--ink);display:block}
.cbox:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.cbox b{display:block;font-size:13.5px;color:var(--muted);font-weight:600;margin-bottom:3px}
.cbox span{font-family:var(--mono);font-size:15px;color:var(--accent-ink)}
/* --------------------------------------------------------------- misc */
footer.site .fgrid{grid-template-columns:1.4fr 1fr 1fr .7fr}
@media(max-width:820px){footer.site .fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){footer.site .fgrid{grid-template-columns:1fr}}
footer.site .logo{margin-bottom:10px}
@media(prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none}
.dev [style*="--d"]{opacity:1;animation:none}
.dev .pulse,.eyebrow::before,.sec-head .k::before,.sb .k::before,.legal>.wrap>.k::before{animation:none}
html{scroll-behavior:auto}
}
/* ===================================================== ACCESSIBILITY ===== */
/* Toolbar + the visitor-controlled display modes. The toolbar is an
accommodation on top of an already-accessible page, not a substitute for
one: semantics, labels, focus order and measured contrast do the real work. */
.scr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip-path:inset(50%);white-space:nowrap;border:0}
.a11y-fab{position:fixed;inset-block-end:18px;inset-inline-start:18px;z-index:90;
width:52px;height:52px;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));
background:var(--surface);color:var(--accent-ink);cursor:pointer;box-shadow:var(--shadow);
display:flex;align-items:center;justify-content:center;padding:0}
.a11y-fab:hover{background:color-mix(in srgb,var(--accent) 10%,var(--surface));border-color:var(--accent)}
.a11y-panel{position:fixed;inset-block-end:80px;inset-inline-start:18px;z-index:91;
width:288px;max-width:calc(100vw - 36px);max-height:calc(100dvh - 110px);overflow:auto;
background:var(--surface);border:1px solid var(--line);border-radius:var(--rl);
box-shadow:0 12px 44px rgba(0,0,0,.22);padding:14px 16px 12px}
.a11y-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.a11y-head h2{font-size:17px;margin:0;font-weight:600;line-height:1.2;padding:0}
.a11y-head h2::after{content:none}
.a11y-x{margin-inline-start:auto;background:none;border:1px solid var(--line);border-radius:7px;
width:30px;height:30px;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.a11y-x:hover{color:var(--ink);border-color:var(--accent)}
.a11y-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.a11y-lbl{font-size:14px;color:var(--muted)}
.a11y-steps{margin-inline-start:auto;display:flex;align-items:center;gap:7px}
.a11y-step{background:var(--surface2);border:1px solid var(--line);border-radius:7px;
min-width:36px;height:31px;font-family:var(--mono);font-size:13px;font-weight:700;
color:var(--ink);cursor:pointer}
.a11y-step:hover{border-color:var(--accent);color:var(--accent-ink)}
.a11y-steps output{font-family:var(--mono);font-size:12px;color:var(--muted);min-width:42px;text-align:center}
.a11y-list{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:5px}
.a11y-t{width:100%;text-align:start;background:var(--surface2);border:1px solid var(--line);
border-radius:var(--r);padding:9px 12px;font-family:inherit;font-size:14px;color:var(--ink);
cursor:pointer;display:flex;align-items:center;gap:9px}
.a11y-t::before{content:"";width:15px;height:15px;border-radius:4px;border:1.5px solid var(--line);
background:var(--surface);flex:none}
.a11y-t[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);font-weight:600}
.a11y-t[aria-pressed="true"]::before{background:var(--accent);border-color:var(--accent);
box-shadow:inset 0 0 0 2px var(--surface)}
.a11y-t:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.a11y-foot{display:flex;align-items:center;gap:12px;padding-top:10px;border-top:1px solid var(--line)}
.a11y-reset{background:none;border:1px solid var(--line);border-radius:var(--r);padding:7px 12px;
font-family:inherit;font-size:13.5px;color:var(--muted);cursor:pointer}
.a11y-reset:hover{color:var(--ink);border-color:var(--accent)}
.a11y-foot a{margin-inline-start:auto;font-size:13px;color:var(--accent-ink)}
@media(max-width:640px){
.a11y-fab{width:46px;height:46px;inset-block-end:14px;inset-inline-start:14px}
.a11y-panel{inset-block-end:68px;inset-inline-start:14px}
}
/* ---- the modes themselves ------------------------------------------- */
/* Scale the page, not the toolbar, so the controls stay reachable. */
html.a11y-scaled body > header,
html.a11y-scaled body > main,
html.a11y-scaled body > footer{zoom:var(--a11y-font,1)}
html.a11y-contrast{--ink:#000;--muted:#1a1a1a;--faint:#262626;--bg:#fff;--surface:#fff;
--surface2:#f2f2f2;--line:#333;--accent:#004d6b;--accent-ink:#004d6b;--accent-btn:#0b1f33;--btn:#0b1f33}
html.a11y-contrast[data-theme="dark"]{--ink:#fff;--muted:#f0f0f0;--faint:#e4e4e4;--bg:#000;
--surface:#000;--surface2:#141414;--line:#bbb;--accent:#7fdcff;--accent-ink:#7fdcff;--accent-btn:#0a76aa;--btn:#0a76aa}
html.a11y-contrast *{text-shadow:none !important}
html.a11y-invert{filter:invert(1) hue-rotate(180deg);background:#fff}
html.a11y-invert img,html.a11y-invert video,html.a11y-invert svg{filter:invert(1) hue-rotate(180deg)}
html.a11y-grey{filter:grayscale(1)}
html.a11y-links a{text-decoration:underline !important;text-underline-offset:3px;
text-decoration-thickness:2px !important;font-weight:600}
html.a11y-links a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
html.a11y-readable body,html.a11y-readable button,html.a11y-readable input,html.a11y-readable textarea{
font-family:Arial,"Noto Sans Hebrew","Segoe UI",sans-serif !important;letter-spacing:.01em}
html.a11y-spacing body{line-height:2.05 !important;letter-spacing:.055em;word-spacing:.14em}
html.a11y-spacing p,html.a11y-spacing li{margin-block-end:1.1em}
html.a11y-motion *,html.a11y-motion *::before,html.a11y-motion *::after{
animation:none !important;transition:none !important;scroll-behavior:auto !important}
html.a11y-motion .reveal{opacity:1 !important;transform:none !important}
html.a11y-cursor,html.a11y-cursor *{
cursor:url("data:image/svg+xml;utf8,") 4 3,auto !important}
.a11y-guide{display:none;position:fixed;inset-inline:0;top:0;height:26px;z-index:88;
pointer-events:none;background:color-mix(in srgb,var(--accent) 22%,transparent);
border-block:2px solid var(--accent)}
/* ========================================================== LEGAL PAGE === */
/* Long-form statutory text. Wider line height and clear heading separation:
these pages get read properly, sometimes by a regulator. */
.legal .k{margin-bottom:26px}
.lblk{padding:0 0 4px;margin-bottom:26px}
.lblk h2{font-size:20px;font-weight:700;line-height:1.3;margin:0 0 12px;padding-bottom:14px;position:relative}
.lblk h2::after{content:"";position:absolute;bottom:0;inset-inline-start:0;width:48px;height:2px;background:var(--accent);opacity:.55}
html[dir="rtl"] .lblk h2::after{inset-inline-start:auto;right:0}
.lblk p{color:var(--muted);font-size:16.5px;line-height:1.85;margin:0 0 13px}
.lblk p:last-child{margin-bottom:0}
.lblk ul{margin:6px 0 0;padding:0;list-style:none}
.lblk li{color:var(--muted);font-size:16px;line-height:1.8;padding:7px 0 7px 0;
border-bottom:1px solid var(--line);display:flex;gap:11px;align-items:baseline}
.lblk li:last-child{border-bottom:none}
.lblk li::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--accent);
transform:rotate(45deg);flex:none;opacity:.75;margin-top:.55em}
.legal .lblk b,.legal .lblk strong{color:var(--ink)}
@media(max-width:640px){
.lblk h2{font-size:18px}
.lblk p{font-size:16px}
}
/* Obfuscated addresses: they only become links once JS assembles them. */
.eml{font-family:var(--mono);font-size:14.5px;direction:ltr;display:inline-block}
.eml a{color:var(--accent-ink)}
.cbox .eml{font-size:15px}
.lblk .eml{font-size:15px}
/* ---------------------------------------------------------------- LOGO ---- */
/* The real artwork, two files: the navy wordmark vanishes on the dark theme,
so a repainted copy is swapped in. The site's own toggle sets data-theme,
the OS preference covers the un-stamped state. */
.logo{display:inline-flex;align-items:center;color:var(--ink);text-decoration:none;line-height:0}
.logo .lock{display:block;height:34px;aspect-ratio:712/139}
.logo .lock img{height:100%;width:auto}
.logo .lk-light{display:block}
.logo .lk-dark{display:none}
@media(prefers-color-scheme:dark){
:root:not([data-theme="light"]) .logo .lk-light{display:none}
:root:not([data-theme="light"]) .logo .lk-dark{display:block}
}
:root[data-theme="dark"] .logo .lk-light{display:none}
:root[data-theme="dark"] .logo .lk-dark{display:block}
.logo:hover .lock{opacity:.85}
@media(max-width:980px){.logo .lock{height:30px}}
@media(max-width:420px){.logo .lock{height:26px}}
footer.site .logo.foot{margin-bottom:14px}
footer.site .logo.foot .lock{height:38px}
/* ================================================== TRUSTRMM DEVICES ===== */
/* Fleet list states beyond ok/arch. */
.ndt .st.warn{color:var(--warn)}
.ndt .st.fix{color:var(--accent-ink)}
.ndt .ct.rl{direction:inherit;font-family:var(--sans);font-size:13px;text-align:end}
.dev.team .ndt .nm{font-weight:600}
/* Sites tree: one row per site, a status dot, the endpoint count at the end. */
.siterow{display:flex;align-items:center;gap:12px;padding:11px 17px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink)}
.siterow:last-of-type{border-bottom:none}
.siterow .dot{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none}
.siterow.warn .dot{background:var(--warn)}
.siterow .nm{flex:1}
.siterow .ct{font-family:var(--mono);font-size:12.5px;color:var(--muted);unicode-bidi:plaintext}
.siterow.warn .ct{color:var(--warn)}
/* Shift board: a grid of seats. */
.seatgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;padding:16px 17px 10px}
.seat{aspect-ratio:1;border-radius:var(--r);border:1px solid color-mix(in srgb,var(--ok) 45%,var(--line));
background:color-mix(in srgb,var(--ok) 12%,var(--surface));display:flex;align-items:center;justify-content:center;
font-family:var(--mono);font-size:11px;color:var(--ok)}
.seat.fix{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--surface));color:var(--accent-ink);font-weight:700}
.seat.off{border-style:dashed;border-color:var(--line);background:transparent;color:var(--faint)}
.shiftlog{display:flex;gap:12px;align-items:baseline;margin:0 17px 14px;padding:9px 12px;border-radius:var(--r);
background:color-mix(in srgb,var(--accent) 8%,var(--surface2));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));font-size:13.5px}
.shiftlog .t{font-family:var(--mono);font-size:12px;color:var(--accent-ink);flex:none;unicode-bidi:plaintext}
@media(max-width:420px){.seatgrid{grid-template-columns:repeat(4,1fr)}}
/* Quote card total line. */
.qtotal{display:flex;align-items:baseline;gap:12px;padding:14px 17px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.qtotal b{margin-inline-start:auto;font-family:var(--mono);font-size:22px;color:var(--accent-ink);unicode-bidi:plaintext}
/* ===================================================== CTA BAND ========== */
.ctaband{padding-top:0}
.ctab{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
background:var(--console);color:var(--console-ink);border-radius:var(--rl);padding:30px 34px;
border:1px solid var(--console-line);position:relative;overflow:hidden}
.ctab::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--accent)}
.ctab h2{color:#fff;margin:0 0 6px;font-size:clamp(20px,2.4vw,26px)}
.ctab p{margin:0;color:#b9cbdd;font-size:15.5px;max-width:60ch}
.ctab .cta-row{margin:0;flex:none}
.ctab .btn{background:#fff;color:#0b1f33}
.ctab .btn.ghost{background:transparent;color:#fff;border:1px solid #3c5470;font-family:var(--mono)}
.ctab .btn.ghost:hover{border-color:var(--accent)}
@media(max-width:640px){.ctab{padding:24px 20px}.ctab .cta-row{width:100%}}
/* ===================================================== CHECKLIST ========= */
.checklist{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-top:28px;align-items:start}
@media(max-width:760px){.checklist{grid-template-columns:1fr}}
.checklist ul{list-style:none;margin:0;padding:0}
.checklist .yes{background:var(--surface);border:1px solid var(--line);border-radius:var(--rl);padding:8px 20px;box-shadow:var(--shadow)}
.checklist .yes li{display:flex;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink);font-weight:600}
.checklist .yes li:last-child{border-bottom:none}
.checklist .yes li::before{content:"";width:18px;height:18px;flex:none;border-radius:50%;background:var(--ok);
-webkit-mask:url('data:image/svg+xml;utf8,') no-repeat center/contain;
mask:url('data:image/svg+xml;utf8,') no-repeat center/contain;
transform:translateY(3px)}
.checklist .moreb{background:var(--surface2);border:1px solid var(--line);border-radius:var(--rl);padding:18px 20px}
.checklist .moreb b{display:block;font-size:13px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.checklist .more li{display:flex;gap:11px;align-items:baseline;padding:8px 0;font-size:15px;color:var(--muted);border-bottom:1px solid var(--line)}
.checklist .more li:last-child{border-bottom:none}
.checklist .more li::before{content:"+";font-family:var(--mono);color:var(--accent-ink);flex:none;font-weight:700}
/* ================================================= LEGAL (authored HTML) == */
/* The statutory texts are authored HTML (inc/legal/*.html) in div.trmm-legal:
same reading rhythm as .lblk above. */
.legal .trmm-legal{max-width:none}
.legal .trmm-legal__meta{font-family:var(--mono);font-size:12.5px;color:var(--faint);margin:0 0 26px}
.legal .trmm-legal h2{font-size:20px;font-weight:700;line-height:1.3;margin:30px 0 12px;padding-bottom:14px;position:relative}
.legal .trmm-legal h2:first-of-type{margin-top:0}
.legal .trmm-legal h2::after{content:"";position:absolute;bottom:0;inset-inline-start:0;width:48px;height:2px;background:var(--accent);opacity:.7}
.legal .trmm-legal h3{font-size:17px;font-weight:700;margin:20px 0 8px}
.legal .trmm-legal p{color:var(--muted);font-size:16.5px;line-height:1.85;margin:0 0 13px}
.legal .trmm-legal ul,.legal .trmm-legal ol{margin:6px 0 16px;padding:0;list-style:none}
.legal .trmm-legal li{color:var(--muted);font-size:16px;line-height:1.8;padding:7px 0;border-bottom:1px solid var(--line);display:flex;gap:11px;align-items:baseline}
.legal .trmm-legal li:last-child{border-bottom:none}
.legal .trmm-legal li::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--accent);transform:rotate(45deg);flex:none;opacity:.8;margin-top:.55em}
.legal .trmm-legal b,.legal .trmm-legal strong{color:var(--ink)}
.legal .trmm-legal a{color:var(--accent-ink)}
.legal .trmm-legal table{width:100%;border-collapse:collapse;font-size:15px;margin:8px 0 18px}
.legal .trmm-legal th,.legal .trmm-legal td{padding:9px 12px;border:1px solid var(--line);text-align:start;vertical-align:top;color:var(--muted)}
.legal .trmm-legal th{background:var(--surface2);color:var(--ink);font-weight:700}
.legal .trmm-legal .eml{font-size:15px}
@media(max-width:640px){.legal .trmm-legal h2{font-size:18px}.legal .trmm-legal p{font-size:16px}}
/* ---- how-it-works diagram (inc/render.php trmm_diagram) */
.diag{margin:28px 0 0;padding:22px 10px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.diag svg{display:block;width:100%;height:auto;max-width:960px;margin:0 auto;font-family:var(--sans);overflow:visible}
.diag .dg-stroke{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.diag .dg-card{fill:var(--surface2);stroke:var(--line)}
.diag .dg-shield{stroke:var(--accent-ink);fill:color-mix(in srgb,var(--accent) 12%,transparent)}
.diag .dg-row{fill:var(--line);stroke:none}
.diag .dg-ok{fill:var(--ok);stroke:none}
.diag .dg-warn{fill:#f5b942;stroke:none}
.diag .dg-dot{fill:var(--accent-ink);stroke:none}
.diag .dg-links path{fill:none;stroke:var(--accent-ink);stroke-width:1.6;stroke-dasharray:6 6;opacity:.85}
.diag .dg-links .dg-return{stroke-dasharray:none;stroke-width:2.2}
.diag .dg-arrowhead{fill:var(--accent-ink)}
.diag text{fill:var(--ink);stroke:none}
.diag .dg-lbl{font-size:13px;fill:var(--muted)}
.diag .dg-name{font-size:14px;font-weight:700;letter-spacing:.02em;fill:var(--accent-ink)}
.diag .dg-cap{font-size:15px;fill:var(--muted)}
.diag .dg-strong{fill:var(--ink);font-weight:600}
.diag .dg-small{font-size:13px;fill:var(--accent-ink)}
@media(prefers-reduced-motion:no-preference){
.diag .dg-links path:not(.dg-return){animation:dg-flow 1.6s linear infinite}
@keyframes dg-flow{to{stroke-dashoffset:-12}}
}
@media(max-width:640px){.diag{padding:14px 4px}.diag .dg-cap{font-size:19px}.diag .dg-lbl{font-size:17px}.diag .dg-small{font-size:17px}}
/* Hebrew in a mono-styled label: no tracking (it was tuned for Latin capitals), and mixed strings such as "1.5 דולר" or "2 דק'" resolve their own direction (plaintext) instead of being forced LTR. */
html[dir="rtl"] .eyebrow,html[dir="rtl"] .sec-head .k,html[dir="rtl"] .sb .k,html[dir="rtl"] .legal>.wrap>.k,html[dir="rtl"] .fgrid .fh,html[dir="rtl"] .checklist .moreb b,html[dir="rtl"] .draft{letter-spacing:.02em}