מסמכי רנטולס</title>
<style>
@font-face{font-family:'Rubik';font-style:normal;font-weight:300;font-display:block;src:url(/assets/50b35eca1c68053e.woff2) format('woff2');unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Rubik';font-style:normal;font-weight:300;font-display:block;src:url(/assets/b66466619f821db6.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:block;src:url(/assets/6fbbb1be81d82db2.woff2) format('woff2');unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:block;src:url(/assets/06b031a6685c19ca.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:block;src:url(/assets/5c3e3897cc5e670f.woff2) format('woff2');unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:block;src:url(/assets/bf0279d0320442c4.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:600;font-display:block;src:url(/assets/3dd0f7e001fe527b.woff2) format('woff2');unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Rubik';font-style:normal;font-weight:600;font-display:block;src:url(/assets/3eefafb109fc898f.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:block;src:url(/assets/6fa1b8c9fdc90f22.woff2) format('woff2');unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:block;src:url(/assets/a0c4fcf2b75419ea.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:800;font-display:block;src:url(/assets/131deffb985c65dd.woff2) format('woff2');unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Rubik';font-style:normal;font-weight:800;font-display:block;src:url(/assets/a8c0371ecf43ba80.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  /* Same steel field as the homepage, so moving between them feels like one site.
     Every value below was measured against the page background (#1A1740) and the
     panel that sits on it (#1E2C45); the lowest is 8:1. */
  --navy:#A9C8F0; --navy-rgb:169,200,240; --wine:#FFC9D0; --wine-rgb:255,201,208; --green:#7BE0A6;
  --ink:#FFFFFF; --ink-2:#C9C5E4; --ink-3:#C6C0E6;
  --bg:#1A1740; --panel:#231F58; --rule:rgba(255,255,255,.16); --rule-2:rgba(255,255,255,.09);
  --maxw:1120px; --e:cubic-bezier(.22,1,.36,1);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 18px 44px -30px rgba(0,0,0,.8);
}
/* The page is dark by design now, so there is no separate dark theme to switch to. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;color:var(--ink);direction:rtl;text-align:right;
  background:
    radial-gradient(90% 70% at 88% 4%, rgba(104,11,20,.16) 0%, transparent 55%),
    radial-gradient(120% 85% at 50% -8%, #2E2A68 0%, transparent 60%),
    linear-gradient(150deg, #221F55 0%, #151233 62%, #1C1945 100%) fixed;
  background-color:var(--bg);
  font-family:Rubik,"Segoe UI",system-ui,sans-serif;font-size:16.5px;line-height:1.72;
  font-synthesis:none;-webkit-font-smoothing:antialiased}
a{color:var(--wine);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--wine);outline-offset:3px;border-radius:4px}
/* main is a programmatic focus target for the skip link and tab switch, not a control */
main:focus,main:focus-visible{outline:none}
.skip{position:fixed;inset-block-start:-100px;inset-inline-start:14px;z-index:90;padding:12px 20px;
  border-radius:0 0 14px 14px;background:var(--navy);color:#fff;font-weight:600;text-decoration:none;
  transition:inset-block-start .2s var(--e)}
.skip:focus{inset-block-start:0}

/* ── masthead ── */
header{position:sticky;inset-block-start:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);
  border-bottom:1px solid var(--rule);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
.bar{max-width:var(--maxw);margin-inline:auto;padding:12px clamp(16px,4vw,28px);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
/* the logo is dark ink on transparency — it needs its own light plate on steel */
.lg{height:clamp(30px,3.2vw,38px);width:auto;display:block;
  background:rgba(255,255,255,.94);border-radius:10px;padding:5px 9px;box-sizing:content-box}
.home{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:600;color:#E6E3F5;text-decoration:none}
.home:hover{color:#FFC9D0}
.home svg{width:15px;height:15px;transform:scaleX(-1)}

/* ── page tabs ── */
.tabs{border-bottom:1px solid var(--rule);background:var(--panel)}
.tabs .in{max-width:var(--maxw);margin-inline:auto;padding:0 clamp(16px,4vw,28px);
  display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.tabs .in::-webkit-scrollbar{display:none}
.tabs a{position:relative;padding:15px 15px 13px;font-size:.88rem;font-weight:500;color:var(--ink-2);
  white-space:nowrap;text-decoration:none;border-bottom:2px solid transparent}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--wine);font-weight:600;border-bottom-color:var(--wine)}

/* ── document ── */
main{max-width:var(--maxw);margin-inline:auto;padding:clamp(30px,5vw,58px) clamp(16px,4vw,28px) 90px}
.doc{max-width:70ch}
.doc[hidden]{display:none}
.eyebrow{display:block;font-size:.72rem;font-weight:600;letter-spacing:.18em;color:var(--ink-3)}
h1{margin:12px 0 0;font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.12;letter-spacing:-.025em;
  font-weight:700;text-wrap:balance}
.lede{margin:18px 0 0;font-size:clamp(1.02rem,1.7vw,1.16rem);color:var(--ink-2);max-width:60ch}
.upd{margin-top:22px;font-size:.8rem;color:var(--ink-3);padding-top:16px;border-top:1px solid var(--rule)}
h2{margin:clamp(34px,4.6vw,52px) 0 0;font-size:clamp(1.24rem,2.5vw,1.6rem);line-height:1.28;
  letter-spacing:-.015em;font-weight:600;text-wrap:balance}
h3{margin:30px 0 0;font-size:1.03rem;font-weight:600}
p{margin:14px 0 0}
.doc ul,.doc ol{margin:14px 0 0;padding-inline-start:1.2em;display:flex;flex-direction:column;gap:9px}
li::marker{color:var(--wine)}
strong{font-weight:600}
ol.legal{list-style:none;counter-reset:cl;padding-inline-start:0;gap:12px}
ol.legal li{counter-increment:cl;position:relative;padding-inline-start:2.1em;color:var(--ink-2)}
ol.legal li::before{content:counter(cl,hebrew) ".";position:absolute;inset-inline-start:0;
  font-weight:600;color:var(--wine);font-size:.92em}
.ver{margin-top:10px;font-size:.78rem;font-weight:500;letter-spacing:.04em;color:var(--ink-3)}
.note ul{margin-top:12px}


.doc.wide{max-width:none}
.doc.art{max-width:70ch}
.back{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;
  color:var(--ink-2);text-decoration:none;margin-bottom:6px}
.back::before{content:"←";font-size:1em}
.back:hover{color:var(--wine)}

figure.quote{margin:24px 0 0;padding:22px 24px;border-radius:16px;background:var(--panel);
  border:1px solid var(--rule);border-inline-start:3px solid var(--wine);box-shadow:var(--shadow)}
figure.quote blockquote{margin:0}
figure.quote p{margin:0;font-size:1.03rem;line-height:1.75}
figure.quote figcaption{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule-2);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
figure.quote figcaption b{font-weight:600}
figure.quote figcaption span{font-size:.84rem;color:var(--ink-3)}

/* capped so five cards land 3+2 instead of leaving one alone on a second row */
.cards{margin-top:26px;max-width:960px;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.ac{display:flex;flex-direction:column;gap:7px;padding:20px 22px;border-radius:16px;
  background:var(--panel);border:1px solid var(--rule);box-shadow:var(--shadow);
  text-decoration:none;color:inherit;transition:transform .25s var(--e),border-color .25s var(--e)}
.ac:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--wine) 40%,var(--rule))}
.ac b{font-size:1.02rem;font-weight:600;line-height:1.35;text-wrap:balance}
.ac em{font-style:normal;font-size:.9rem;color:var(--ink-2);line-height:1.6}
.ac span{margin-top:auto;padding-top:8px;font-size:.73rem;font-weight:600;letter-spacing:.1em;
  color:var(--wine);text-transform:none}

/* ── set pieces ── */
.note{margin-top:26px;padding:18px 20px;border-radius:14px;background:var(--panel);
  border:1px solid var(--rule);border-inline-start:3px solid var(--navy);box-shadow:var(--shadow)}
.note p:first-child{margin-top:0}
.note.warm{border-inline-start-color:var(--wine)}

.facts{margin-top:30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:16px;overflow:hidden}
.facts div{background:var(--panel);padding:18px 18px 16px}
.facts b{display:block;font-size:1.35rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.facts span{display:block;margin-top:3px;font-size:.79rem;color:var(--ink-3);line-height:1.45}

details{margin-top:12px;border:1px solid var(--rule);border-radius:14px;background:var(--panel);overflow:hidden}
details+details{margin-top:8px}
summary{padding:16px 20px;font-weight:600;cursor:pointer;list-style:none;display:flex;
  align-items:center;justify-content:space-between;gap:14px}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:0 0 auto;width:9px;height:9px;border-inline-end:2px solid var(--wine);
  border-block-end:2px solid var(--wine);transform:rotate(45deg);transition:transform .3s var(--e)}
details[open] summary::after{transform:rotate(-135deg)}
details .body{padding:0 20px 18px;color:var(--ink-2)}
details .body p:first-child{margin-top:0}

dl.contact{margin:22px 0 0;display:grid;grid-template-columns:auto 1fr;gap:10px 20px;align-items:baseline}
dl.contact dt{font-size:.82rem;color:var(--ink-3);font-weight:500}
dl.contact dd{margin:0;font-weight:500}

footer{border-top:1px solid var(--rule);background:var(--panel)}
footer .in{max-width:var(--maxw);margin-inline:auto;padding:26px clamp(16px,4vw,28px);
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;justify-content:space-between;
  font-size:.82rem;color:var(--ink-3)}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--wine)}

/* ══ glass cards — the brief's tokens, shared with the homepage ══
   blur(15px) saturate(180%), a 15% pink tint, a 1px white border and the float
   shadow. On this navy the tint composites dark, so the ink is white: dark text
   on a 15% wash measures about 1.4:1 and is simply not there. */
:root{ --r-card:22px; --r-inner:11px; --pad-card:20px 22px;
  --mat:rgba(255,255,255,.09); --mat-hi:rgba(255,255,255,.16);
  --fill:rgba(255,255,255,.14);
  --hair:rgba(255,255,255,.22);
  --glass:blur(14px) saturate(90%);
  --sheen:linear-gradient(170deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 46%);
  --rim:inset 0 1px 0 rgba(255,255,255,.35);
  --lift:0 8px 32px 0 rgba(31,38,135,.15), 0 18px 40px -22px rgba(0,0,0,.60);
  --lift-hi:0 12px 40px 0 rgba(31,38,135,.22), 0 24px 52px -24px rgba(0,0,0,.66); }

/* the skip link was light blue under white text — 1.6:1. It is a control. */
.skip{background:#262462 !important;color:#FFFFFF !important}

.ac,.note,details,figure.quote,.facts{
  --ink:#FFFFFF; --ink-2:#EFEDF9; --ink-3:#DAD6EF;
  --wine:#FFC9D0; --wine-rgb:255 201 208; --navy:#C7D6F2;
  color:var(--ink);
  background:var(--sheen), var(--mat) !important;
  -webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);
  border:1px solid rgba(255,255,255,.30) !important;
  border-radius:var(--r-card) !important;
  box-shadow:var(--lift), var(--rim) !important}
.ac,.note,figure.quote{padding:var(--pad-card)}
.ac:hover{background:var(--sheen), var(--mat-hi) !important;
  border-color:rgba(255,255,255,.44) !important;
  box-shadow:var(--lift-hi), var(--rim) !important;transform:translateY(-2px)}
.ac span{color:var(--wine)}
li::marker{color:#FFC9D0}
a{text-decoration-thickness:1px}

/* a note is told from a quote by the tint of its glass, not by an edge bar */
.note.warm{--mat:rgba(255,160,175,.13)}
figure.quote figcaption{border-top:1px solid var(--hair)}
figure.quote figcaption b{color:#FFC9D0}

/* the fact strip is one pane; its dividers are hairlines inside it */
.facts{gap:0;overflow:hidden !important}
.facts div{background:transparent !important;padding:16px 18px;box-shadow:none !important;
  border-radius:0 !important}
.facts div + div{border-inline-start:1px solid rgba(255,255,255,.20)}

/* accordions. The chevron used logical borders, so in RTL it pointed sideways
   instead of down; physical borders keep it pointing down closed, up open. */
details summary::after{border:0 !important;
  border-right:2px solid #FFC9D0 !important;border-bottom:2px solid #FFC9D0 !important}
details .body{color:var(--ink-2)}
details{scroll-margin-top:96px}
html{scroll-padding-top:96px}

/* the tab strip is a segmented control. A tab is a control, so the current one
   keeps an opaque surface rather than the glass. */
.tabs{background:transparent;border-bottom:0}
.tabs .in{gap:6px;padding-block:10px}
.tabs a{border-bottom:0;border-radius:999px;padding:9px 16px;color:#E6E3F5}
.tabs a:hover{background:rgba(255,255,255,.12);color:#FFFFFF}
.tabs a[aria-current="page"]{background:rgba(255,255,255,.93);color:#680B14;
  box-shadow:var(--lift), inset 0 0 0 1px rgba(255,255,255,.6);
  border-bottom-color:transparent}

header{background:rgba(22,19,52,.68);border-bottom:1px solid rgba(255,255,255,.14)}
footer{background:transparent;border-top:1px solid rgba(255,255,255,.12)}



/* ══ accessibility panel ══
   The button sits on the physical left edge, mid-height — the placement Israeli
   users look for, and the one corner not already taken by WhatsApp or the mascot.
   Everything here is driven by classes on <html>, so a setting survives a rebuild
   of any section and applies to markup that did not exist when it was switched on. */
.a11yb{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:112;
  width:46px;height:46px;border:0;border-start-end-radius:14px;border-end-end-radius:14px;
  border-start-start-radius:0;border-end-start-radius:0;
  background:var(--navy);color:#fff;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 10px 26px -10px rgba(23,20,27,.55);transition:width .2s var(--e),background .2s var(--e)}

.a11yb:hover{width:54px}

.a11yb:focus-visible{outline:3px solid var(--wine);outline-offset:3px}

.a11yb svg{width:27px;height:27px}
@media (max-width:760px){.a11yb{width:42px;height:42px;top:auto;bottom:calc(84px + env(safe-area-inset-bottom));transform:none}
  .a11yb svg{width:24px;height:24px}}


.a11yp{position:fixed;left:12px;top:50%;transform:translateY(-50%) scale(.96);z-index:113;
  width:min(320px,calc(100vw - 24px));max-height:min(86vh,620px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--paper);border:1px solid var(--rule);border-radius:20px;padding:16px;
  box-shadow:0 30px 70px -24px rgba(23,20,27,.5);
  /* No visibility here on purpose. visibility:hidden also blocks focus(), so the
     first control could not be focused on the frame the panel opens. Fading with
     opacity keeps it focusable at once; pointer-events guards the fade-out. */
  opacity:0;pointer-events:none;transition:opacity .22s var(--e),transform .22s var(--e)}

.a11yp.open{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1)}

.a11yp[hidden]{display:none}
@media (max-width:760px){.a11yp{left:8px;right:8px;width:auto;top:auto;
  bottom:calc(84px + env(safe-area-inset-bottom));transform:translateY(8px) scale(.98);max-height:70vh}
  .a11yp.open{transform:translateY(0) scale(1)}}

.a11yhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}

.a11yhd h2{font-size:1.05rem;font-weight:600;margin:0}

.a11yx{border:0;background:none;font-size:1.6rem;line-height:1;color:var(--ink-2);cursor:pointer;
  width:34px;height:34px;border-radius:10px}

.a11yx:hover{background:var(--rule-2);color:var(--ink)}

.a11yx:focus-visible{outline:2px solid var(--wine);outline-offset:2px}

.a11yrow{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 2px;font-size:.9rem}

.a11ystep{display:flex;align-items:center;gap:4px}

.a11ystep button{width:34px;height:34px;border:1px solid var(--rule);background:var(--paper);
  border-radius:10px;font-size:1.1rem;line-height:1;color:var(--ink);cursor:pointer}

.a11ystep button:hover{background:var(--rule-2)}

.a11ystep button:focus-visible{outline:2px solid var(--wine);outline-offset:2px}

.a11ystep output{min-width:62px;text-align:center;font-size:.82rem;color:var(--ink-2);
  font-variant-numeric:tabular-nums}

.a11ygrid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0 12px}

.a11ygrid button{padding:11px 8px;border:1px solid var(--rule);background:var(--paper);
  border-radius:12px;font-size:.8rem;font-weight:500;color:var(--ink);cursor:pointer;
  text-align:center;line-height:1.3;min-height:48px}

.a11ygrid button:hover{background:var(--rule-2)}

.a11ygrid button:focus-visible{outline:2px solid var(--wine);outline-offset:2px}

/* a pressed control must not rely on colour alone — it also gains a check mark */
.a11ygrid button[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}

.a11ygrid button[aria-pressed="true"]::before{content:"✓ ";font-weight:700}

.a11yreset{width:100%;padding:11px;border:1px solid var(--rule);background:none;border-radius:12px;
  font-size:.84rem;font-weight:600;color:var(--wine);cursor:pointer}

.a11yreset:hover{background:rgba(var(--wine-rgb)/.08)}

.a11yreset:focus-visible{outline:2px solid var(--wine);outline-offset:2px}

.a11yft{margin:11px 0 0;font-size:.74rem;line-height:1.6;color:var(--ink-2);text-align:center}

.a11yft a{color:var(--wine)}

/* the reading ruler follows the pointer */
.a11yguide{position:fixed;left:0;right:0;height:2.3rem;z-index:111;pointer-events:none;
  border-block:2px solid rgba(23,20,27,.85);background:rgba(23,20,27,.07)}

.a11yguide[hidden]{display:none}


/* ── the settings themselves ── */
html.a11y-still *,html.a11y-still *::before,html.a11y-still *::after{
  animation-duration:.001ms !important;animation-iteration-count:1 !important;
  transition-duration:.001ms !important;scroll-behavior:auto !important}

html.a11y-gray{filter:grayscale(1)}

html.a11y-links a{text-decoration:underline !important;text-underline-offset:3px;
  text-decoration-thickness:2px !important;font-weight:600 !important}

html.a11y-readable body,html.a11y-readable button,html.a11y-readable input{
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif !important;letter-spacing:.01em}

html.a11y-bigcur,html.a11y-bigcur *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M6 3 34 21 21 23 17 38z' fill='%23fff' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3,auto !important}

/* High contrast raises every token at once, so it reaches components added later.
   Values are pinned, not filtered: invert() would also flip the photographs. */
html.a11y-contrast{--paper:#FFFFFF;--ink:#000000;--ink-2:#1A1A1A;--ink-3:#2B2B2B;
  --rule:#000000;--rule-2:#E4E4E4;--wine:#5A0010;--navy:#00153F}

html.a11y-contrast body{background:#fff}

/* Dark is the same idea inverted — a pinned palette, not a filter. The site was
   drawn light, so both modes drop the frosted-glass fills and the moving colour
   field underneath them; left in place they would wash the text out. */
html.a11y-dark{--paper:#0B0A14;--surf:#161427;--ink:#FFFFFF;--ink-2:#E4E1EC;--ink-3:#BFB9CE;
  --rule:rgba(255,255,255,0.049);--rule-2:rgba(255,255,255,0.045);
  /* --navy stays a *background* colour, because the buttons that use it carry
     hard-coded white text. #5854C4 keeps that white at 6:1 and still separates
     from the page. Where --navy was used as text instead, it is overridden below. */
  --wine:#FFC3CB;--wine-rgb:255 195 203;--navy:#5854C4;--navy-rgb:88 84 196;
  --tl:#7FE0A4;--tl-rgb:127 224 164;color-scheme:dark}

/* Colours written as literals rather than tokens have to be named one by one —
   they are the ones a theme switch cannot reach. Each is the light twin of the
   original, checked against the dark surface it now sits on. */
html.a11y-dark .tag{color:#FFFFFF}

html.a11y-dark .tile.wa .ti,html.a11y-dark .tile.wa .tgo{color:#63D68E}

html.a11y-dark .tile.wa .ti{background:rgba(255,255,255,0.045)}

html.a11y-dark .leaf .num{color:#3A3570}

/* the logo is a fixed image with dark lettering — it needs its own light plate */
html.a11y-dark .lgw{background:rgba(255,255,255,.96)}

html.a11y-dark body{background:#0B0A14}

/* Every frosted surface is repainted opaque. Left translucent over a dark page
   they turn near-white and every label on them drops under the threshold. */
/* NOTE: .qs, .catbar, .slot, .ti and .soc a are intentionally absent — they are
   white surfaces with dark ink in the base theme, and repainting them dark here
   flipped their contrast the wrong way. */
html.a11y-dark .consent,html.a11y-dark header::before,html.a11y-dark .ghost,
html.a11y-dark .ghost:hover,html.a11y-dark .gc,html.a11y-dark .gc:hover,
html.a11y-dark .note,html.a11y-dark header nav,html.a11y-dark .fig,
html.a11y-dark .stp,html.a11y-dark .pill,html.a11y-dark .v,html.a11y-dark .mbar,
html.a11y-dark .rbtn,html.a11y-dark .shot figcaption,html.a11y-dark .tile,
html.a11y-dark .tile:hover,html.a11y-dark .hours,
html.a11y-dark .hrow,html.a11y-dark .bub,html.a11y-dark .lockwall,
html.a11y-dark .leaf .num,html.a11y-dark .gpanel,html.a11y-dark .gform input{
  background:var(--surf) !important;color:var(--ink);
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  box-shadow:0 0 0 1px var(--rule) !important}

/* the places --navy carried text rather than a fill */
html.a11y-dark .gc,html.a11y-dark .gc .from b,html.a11y-dark .gc .go,
html.a11y-dark .soc a,html.a11y-dark .tgo,
html.a11y-dark .rbtn,html.a11y-dark .hand{color:#C9C6F5}

html.a11y-dark .a11ygrid button[aria-pressed="true"]{color:#fff}

html.a11y-dark .a11yguide{border-color:rgba(255,255,255,0.160);background:rgba(255,255,255,0.045)}

html.a11y-dark *:focus-visible{outline:3px solid #FFC3CB !important;outline-offset:2px}

html.a11y-contrast .field,html.a11y-contrast .crust,
html.a11y-contrast .gc::before,html.a11y-contrast .tile::before,
html.a11y-dark .field,html.a11y-dark .crust,
html.a11y-dark .gc::before,html.a11y-dark .tile::before{display:none !important}

html.a11y-contrast .fig,html.a11y-contrast .gc,html.a11y-contrast .tile,html.a11y-contrast .sug,
html.a11y-dark .fig,html.a11y-dark .gc,html.a11y-dark .tile,html.a11y-dark .sug{
  background:var(--paper) !important;border:1px solid var(--rule) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  box-shadow:0 10px 30px -18px rgba(0,0,0,.6) !important}

/* The navy page uses pale rose for text on its dark cards. High-contrast mode
   turns those cards white, so the same rose lands at 1.3:1 — it has to invert. */
html.a11y-contrast .gc.key{background:#FFFFFF !important;color:#000 !important;
  box-shadow:0 0 0 2px #000 !important}

html.a11y-contrast .gc.key em,html.a11y-contrast .gc.key .from,
html.a11y-contrast .gc.key .slot,html.a11y-contrast .gc.key .go,
html.a11y-contrast .gc.key .from b{color:#000 !important}

html.a11y-contrast .tag,html.a11y-contrast .tag.hot{background:#E4E4E4 !important;
  color:#000 !important;box-shadow:0 0 0 1px #000 !important}

html.a11y-contrast .tile.wa .tgo,html.a11y-contrast .tile.wa .ti{color:#000 !important}

html.a11y-contrast .lock li svg,html.a11y-contrast .hrow.lit .hk svg,
html.a11y-contrast .shot .dot{color:#000 !important;background:#000 !important}

html.a11y-contrast a,html.a11y-contrast button{text-decoration-thickness:2px}

html.a11y-contrast *:focus-visible{outline:3px solid #000 !important;outline-offset:2px}


/* the accessibility button was navy on navy: 1.08 against the field */
.a11yb{background:rgba(255,255,255,.93) !important;color:#262462 !important;
  box-shadow:var(--lift), inset 0 0 0 1px rgba(255,255,255,.6) !important}

.a11yb:hover{background:rgba(255,255,255,.98) !important;color:#680B14 !important}

html.a11y-dark .a11yb{background:rgba(255,255,255,.93) !important;color:#262462 !important}


/* ══ the accessibility modes, against the glass ════════════════════════════
   Each pane now sets its own --ink on itself, and a token set on the element
   beats the one the mode defines on :root. So high contrast turned the cards
   white while their text stayed white — 58 failures that the page lint could
   not see, because it never switches the modes on. Both modes drop the glass
   for a flat surface; they have to drop the glass ink with it. */
html.a11y-contrast .gc:not(.key),
html.a11y-contrast .tile,
html.a11y-contrast .fig,
html.a11y-contrast .stp,
html.a11y-contrast .note,
html.a11y-contrast .v,
html.a11y-contrast .hours,
html.a11y-contrast .pill,
html.a11y-contrast .bub,
html.a11y-contrast .deposit,
html.a11y-contrast .gpanel{
  --ink:#000000; --ink-2:#1A1A1A; --ink-3:#2B2B2B;
  --wine:#8A0C17; --wine-rgb:138 12 23;
  color:#000000 !important;
  background:#FFFFFF !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  box-shadow:0 0 0 2px #000000 !important}

html.a11y-dark .gc:not(.key),
html.a11y-dark .tile,
html.a11y-dark .fig,
html.a11y-dark .stp,
html.a11y-dark .note,
html.a11y-dark .v,
html.a11y-dark .hours,
html.a11y-dark .pill,
html.a11y-dark .bub,
html.a11y-dark .deposit,
html.a11y-dark .gpanel{
  --ink:#FFFFFF; --ink-2:#E4E1EC; --ink-3:#BFB9CE;
  --wine:#FFC3CB; --wine-rgb:255 195 203;
  color:#FFFFFF !important;
  background:#161427 !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.20) !important}

/* the moulded edge is a glass effect; with no glass there is nothing to mould */
html.a11y-contrast .stp::before,
html.a11y-contrast .note::before,
html.a11y-contrast .hours::before,
html.a11y-contrast .fig::before,
html.a11y-contrast .v::before,
html.a11y-contrast .bub::before,
html.a11y-contrast .pill::before,
html.a11y-contrast .deposit::before,
html.a11y-contrast .stp::after,
html.a11y-contrast .note::after,
html.a11y-contrast .hours::after,
html.a11y-contrast .fig::after,
html.a11y-contrast .v::after,
html.a11y-contrast .bub::after,
html.a11y-contrast .pill::after,
html.a11y-contrast .deposit::after,
html.a11y-dark .stp::before,
html.a11y-dark .note::before,
html.a11y-dark .hours::before,
html.a11y-dark .fig::before,
html.a11y-dark .v::before,
html.a11y-dark .bub::before,
html.a11y-dark .pill::before,
html.a11y-dark .deposit::before,
html.a11y-dark .stp::after,
html.a11y-dark .note::after,
html.a11y-dark .hours::after,
html.a11y-dark .fig::after,
html.a11y-dark .v::after,
html.a11y-dark .bub::after,
html.a11y-dark .pill::after,
html.a11y-dark .deposit::after{
  display:none !important}

html.a11y-contrast .stp .no{-webkit-text-stroke:2px #000000}

html.a11y-dark .stp .no{-webkit-text-stroke:2px #FFC3CB}

html.a11y-dark .tag{background:#FFFFFF !important;color:#1A1A2E !important}

html.a11y-dark .tag.hot{background:#FFD4DA !important;color:#5C0A12 !important}

html.a11y-dark .slot,html.a11y-dark .ti{background:#FFFFFF !important;color:#262462 !important}

html.a11y-contrast .slot,html.a11y-contrast .ti{background:#FFFFFF !important;
  color:#000000 !important;box-shadow:0 0 0 1px #000 !important}

html.a11y-dark header nav.open{background:#161427 !important}

html.a11y-dark header nav.open a{color:#FFFFFF}

html.a11y-dark header nav.open a.navgo{color:#FFC3CB}

html.a11y-contrast header nav.open{background:#FFFFFF !important;box-shadow:0 0 0 2px #000 !important}

html.a11y-contrast header nav.open a{color:#000000}

html.a11y-contrast header nav.open a.navgo{color:#8A0C17}
/* ══ tool and category pages ══
   These sit on the same chrome as the document pages, so everything here is
   written against the tokens that page already defines — --panel, --rule,
   --ink-2, --ink-3, --wine — and nothing re-declares a colour. The glass
   rules and the three accessibility modes pick these up for free because the
   surfaces reuse .note's and .facts' own classes. */

.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  margin:0 0 14px;font-size:.8rem;color:var(--ink-3)}
.crumb a{color:var(--ink-2);text-decoration:none}
.crumb a:hover,.crumb a:focus-visible{text-decoration:underline}
.crumb .sep{opacity:.55}
.crumb [aria-current]{color:var(--ink-3)}

/* The English name is reference, not a heading — it is what the tool is called
   on its own box, which is how half the customers arrive at it. */
.doc .en{margin:6px 0 0;font-size:.86rem;font-weight:600;color:var(--ink-3);
  letter-spacing:.01em}

.doc .cta{margin:26px 0 0}
.doc .cta .go{display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;border-radius:999px;
  font-size:1rem;font-weight:700;text-decoration:none;
  background:#FFFFFF;color:#1A1840;
  box-shadow:0 10px 26px -14px rgba(0,0,0,.65)}
.doc .cta .go::after{content:"›";font-size:1.25em;line-height:1;margin-block-start:-2px}
.doc .cta .go:hover,.doc .cta .go:focus-visible{background:#F1EFFA;color:#120F33}

/* The sibling list is the whole point of these pages: it is what turns 250
   separate URLs into a catalogue a crawler can walk. Two columns on a wide
   screen, one on a phone, and no bullet — the rule between rows does that job. */
.doc ul.sibs{margin:16px 0 0;padding:0;list-style:none;gap:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));
  border:1px solid var(--rule);border-radius:16px;overflow:hidden;
  background:var(--rule);row-gap:1px;column-gap:1px}
.doc ul.sibs li{background:var(--panel);margin:0;padding:0}
 /* A grid rather than a flex row: the name is a bare text node, and as an
    anonymous flex item it took the whole line and pushed the price under it.
    Two explicit tracks keep the price on the same line, at the far edge. */
.doc ul.sibs a{display:grid;grid-template-columns:1fr auto;align-items:baseline;
  gap:10px;padding:13px 16px;text-decoration:none;color:var(--ink)}
.doc ul.sibs a:hover,.doc ul.sibs a:focus-visible{background:rgba(255,255,255,.07)}
.doc ul.sibs .n{min-width:0}
.doc ul.sibs .r{font-size:.8rem;font-weight:600;color:var(--ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.doc ul.sibs .x{font-size:.75rem;font-weight:600;color:var(--wine);white-space:nowrap}

/* A category page is mostly this list, so give it a little more room there. */
.doc ul.sibs.big a{padding:15px 17px;font-size:1.01rem}

@media(max-width:560px){
  .doc ul.sibs{grid-template-columns:1fr}
  .doc .cta .go{width:100%;justify-content:center}
}

/* ══ the accessibility modes ══
   The panel came from the homepage, and so did its three modes — which means
   they only ever knew the homepage's tokens. The document and tool pages carry
   their own set (--bg, --panel, --green, and the rgb twins), and with those
   left alone the tab strip and the tool list kept a dark navy background while
   the ink turned black: 1.26:1, measured. Each mode redefines them here, which
   is enough because every surface on these pages is painted from a token. */
html.a11y-contrast{
  --bg:#FFFFFF; --panel:#FFFFFF; --green:#0A5C2E;
  --wine-rgb:138,12,23; --navy-rgb:11,60,138;
  --shadow:0 0 0 1px #000000}
html.a11y-contrast .doc .cta .go{background:#FFFFFF;color:#000000;
  box-shadow:0 0 0 2px #000000}
html.a11y-contrast .doc ul.sibs a:hover,
html.a11y-contrast .doc ul.sibs a:focus-visible{background:#E4E4E4}

html.a11y-dark{
  --bg:#0E0C1C; --panel:#161427; --green:#7BE0A6;
  --shadow:0 1px 2px rgba(0,0,0,.6), 0 18px 44px -30px rgba(0,0,0,.9)}
html.a11y-dark .doc .cta .go{background:#FFFFFF;color:#120F33}

/* The glass re-theme hard-coded a few light inks straight into the chrome —
   .tabs a, .home, the list markers — on the assumption that the page behind
   them is always dark navy. In high-contrast mode the page turns white and
   those became white-on-white: measured 1.26:1 on every tab. They were
   unreachable before, because the document pages shipped without the panel at
   all; now that every page has it, they need an answer. */
html.a11y-contrast .tabs a{color:#000000}
html.a11y-contrast .tabs a:hover,
html.a11y-contrast .tabs a:focus-visible{background:#E4E4E4;color:#000000}
html.a11y-contrast .tabs a[aria-current="page"]{color:#8A0C17;background:#E4E4E4;
  border-bottom-color:#8A0C17}
html.a11y-contrast .home{color:#000000}
html.a11y-contrast .home:hover,html.a11y-contrast .home:focus-visible{color:#8A0C17}
html.a11y-contrast li::marker{color:#000000}
html.a11y-contrast figure.quote figcaption b{color:#8A0C17}

/* The glass pass gave .ac, .note, details, figure.quote and .facts their own
   --ink on the element itself. A token set on an element beats one inherited
   from :root, so redefining the palette on <html> never reached inside them —
   the facts grid kept white-on-glass ink over a white page, 1.41:1 measured.
   Each mode has to restate the palette on the panes, exactly as the homepage
   does for its own. */
html.a11y-contrast .ac,html.a11y-contrast .note,html.a11y-contrast details,
html.a11y-contrast figure.quote,html.a11y-contrast .facts{
  --ink:#000000; --ink-2:#1A1A1A; --ink-3:#2B2B2B;
  --wine:#8A0C17; --wine-rgb:138 12 23; --navy:#0B3C8A;
  color:#000000 !important; background:#FFFFFF !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border:1px solid #000000 !important; box-shadow:0 0 0 2px #000000 !important}
html.a11y-contrast .facts div + div{border-inline-start:1px solid #000000}
html.a11y-contrast .facts span{color:#2B2B2B}

html.a11y-dark .ac,html.a11y-dark .note,html.a11y-dark details,
html.a11y-dark figure.quote,html.a11y-dark .facts{
  --ink:#FFFFFF; --ink-2:#E4E1EC; --ink-3:#BFB9CE;
  --wine:#FFC3CB; --wine-rgb:255 195 203; --navy:#A9C8F0;
  background:#161427 !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border:1px solid #3A3550 !important; box-shadow:none !important}
html.a11y-dark .facts div + div{border-inline-start:1px solid #3A3550}

/* The bar keeps a translucent navy glass, which is right on the dark page and
   wrong once the page behind it is white: black .home on it read 3.40:1. */
html.a11y-contrast header{background:#FFFFFF !important;
  border-bottom:1px solid #000000;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important}
html.a11y-contrast header::before{display:none !important}

/* The panel paints itself with var(--paper), a token that only ever existed on
   the homepage: the document pages define --bg and --panel and nothing else.
   With the variable unresolved the panel had no background at all — on a phone
   it rendered as a transparent sheet with the page showing through it, and the
   footer link measured 1.45:1 over the white order button. The two modes
   redefine --paper for themselves, so only the default needs a value. */
:root{--paper:#231F58}
.a11yp{background:var(--paper,#231F58) !important;
  box-shadow:0 30px 70px -24px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.12)}