/* ELTS redesign — sections and shared parts, rebuilt from the design prototypes
   (design_handoff_elts_website/design/*.dc.html). Tokens, type scale, nav and the
   accessibility baseline live in elts.css; this file only adds to them.

   Two devices carry most of the layouts here:
   - .hair-grid: a hairline-divided grid drawn with a 1px gap over a gold-tinted
     background, so the rules stay correct whatever the column count at each width.
   - .js prefix: tab panels are only hidden once the script has run (App.razor sets
     html.js), so without JavaScript every panel is simply shown in sequence. */

/* ── Section shell ─────────────────────────────────────────────────────────── */
.sec{--sec-bg:var(--bg);border-top:1px solid var(--hair);padding-block:92px 100px;background:var(--sec-bg)}
.sec-alt{--sec-bg:var(--panel)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;margin-bottom:48px}
.sec-head--split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 64px;align-items:end;margin:18px 0 48px}
.fig{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);font-weight:600}
.sec-title{font-size:clamp(2rem,3.8vw,3.2rem);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;line-height:1.05;margin:18px 0 0;max-width:20ch}
.sec-head--split .sec-title{margin:0}
.sec-lead{color:var(--text-2);max-width:42ch;margin:0;font-size:1.02rem}

.hair-grid{display:grid;gap:1px;background:rgb(var(--gold-rgb) / .16);border:1px solid rgb(var(--gold-rgb) / .22)}
.hair-grid>*{background:var(--sec-bg,var(--bg));min-width:0}

/* The same look for lists whose last row can be short (filtered products, three store
   items in four columns): .hair-grid would show the empty cells as tinted blocks. Here
   every cell draws its own frame — inset lines on its start and top edges, outset lines
   on its end and bottom — which collapse into single hairlines between neighbours and
   leave empty cells blank, in either direction. */
.cell-grid{display:grid;--line:rgb(var(--gold-rgb) / .2)}
.cell-grid>*{min-width:0;background:var(--sec-bg,var(--bg));
  box-shadow:1px 0 0 0 var(--line),0 1px 0 0 var(--line),1px 1px 0 0 var(--line),inset 1px 0 0 0 var(--line),inset 0 1px 0 0 var(--line)}

/* Mono uppercase labels. Arabic has no case and suffers from letter-spacing, so the
   RTL block at the end of this file resets every one of these. */
.mono-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}

/* ── Buttons (design: mono, uppercase, square) ─────────────────────────────── */
.cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:17px 26px;border:1px solid transparent;
  font-family:var(--mono);font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.2;
  text-align:center;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.cta-btn.is-gold{background:var(--gold);color:var(--on-accent)}
.cta-btn.is-gold:hover{background:var(--gold-bright);color:var(--on-accent)}
.cta-btn.is-line{border-color:rgb(var(--ink-rgb) / .2);color:var(--text)}
.cta-btn.is-line:hover{border-color:var(--gold);color:var(--gold-ink)}
.cta-btn.is-outline{padding:15px 22px;font-size:.78rem;border-color:rgb(var(--gold-rgb) / .4);color:var(--gold-ink)}
.cta-btn.is-outline:hover{background:var(--gold);color:var(--on-accent)}
.link-arrow{display:inline-block;font-family:var(--mono);font-size:.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-ink);border-bottom:1px solid rgb(var(--gold-rgb) / .4);padding-bottom:3px}
.link-arrow:hover{border-color:var(--gold)}

.dot-pulse{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none;animation:gpulse 2.6s infinite}
@keyframes gpulse{0%{box-shadow:0 0 0 0 rgb(var(--gold-rgb) / .45)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes drawin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes flow{to{stroke-dashoffset:-64}}

/* ── Home: hero ────────────────────────────────────────────────────────────── */
.home-hero{position:relative;padding-block:120px 96px;overflow:hidden}
.home-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgb(var(--gold-rgb) / .06) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--gold-rgb) / .06) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(110% 70% at 50% 10%,#000,transparent 80%);mask-image:radial-gradient(110% 70% at 50% 10%,#000,transparent 80%)}
.home-hero>.wrap{position:relative}
.hero-rule{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 40px;align-items:start;padding-bottom:22px;border-bottom:1px solid var(--hair);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.hero-rule .est{color:var(--gold-ink)}
.home-hero h1{font-size:clamp(2.8rem,7vw,6.6rem);margin:44px 0 0;max-width:17ch}
.hero-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px 64px;margin-top:44px;align-items:start}
.hero-body .lead{margin:0;max-width:54ch;font-size:1.2rem}
.facts{border:1px solid rgb(var(--gold-rgb) / .3);padding:22px 24px}
.facts-label{color:var(--gold-ink);margin-bottom:14px}
.facts dl{margin:0;display:flex;flex-direction:column;gap:12px;font-family:var(--mono)}
.facts dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:9px;border-bottom:1px dashed rgb(var(--ink-rgb) / .12)}
.facts dl>div:last-child{border-bottom:none;padding-bottom:0}
.facts dt{font-size:.78rem;color:var(--text-2);text-transform:uppercase;letter-spacing:.06em}
.facts dd{margin:0;font-size:1.28rem;font-weight:600;font-variant-numeric:tabular-nums}
.facts dd.is-accent{color:var(--gold-ink)}
.hero-actions{display:flex;gap:12px;margin-top:48px;flex-wrap:wrap}

/* ── Home: atlas ───────────────────────────────────────────────────────────── */
.atlas{position:relative;border:1px solid rgb(var(--gold-rgb) / .22);background:var(--panel)}
.atlas::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgb(var(--ink-rgb) / .035) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--ink-rgb) / .035) 1px,transparent 1px);background-size:36px 36px}
.atlas-map{position:relative;width:100%;aspect-ratio:16/7.4;min-height:560px}
.atlas-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.atlas-wires path{fill:none;stroke:rgb(var(--gold-rgb) / .34);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .2s,stroke-width .2s}
.atlas-wires path.is-money{stroke-dasharray:6 5;animation:flow 3.2s linear infinite}
.atlas-wires path.is-on{stroke:var(--gold);stroke-width:1.8}
.atlas-node{position:absolute;width:17%;padding:14px 15px;text-align:start;font:inherit;cursor:pointer;
  background:var(--panel-2);color:var(--text);border:1px solid rgb(var(--gold-rgb) / .34);transition:background-color .2s,color .2s,border-color .2s}
.atlas-node.is-core{width:18%}
.atlas-node:hover{border-color:var(--gold)}
.atlas-node[aria-selected="true"]{background:var(--gold);color:var(--on-accent);border-color:var(--gold)}
.an-kicker{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.an-name{display:block;font-weight:600;font-size:1.02rem;letter-spacing:-.02em;margin-top:5px;line-height:1.25}
.an-port{display:block;font-family:var(--mono);font-size:.66rem;color:var(--text-3);margin-top:4px}
.atlas-node[aria-selected="true"] .an-kicker,.atlas-node[aria-selected="true"] .an-port{color:var(--on-accent)}
.atlas-specs{border:1px solid rgb(var(--gold-rgb) / .22);border-top:none}
.atlas-spec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.js .atlas-spec:not(.is-active){display:none}
.atlas-spec+.atlas-spec{border-top:1px solid rgb(var(--gold-rgb) / .22)}
.js .atlas-spec+.atlas-spec{border-top:none}
.atlas-spec-main{padding:34px 36px;border-inline-end:1px solid rgb(var(--gold-rgb) / .22)}
.spec-label{color:var(--gold-ink)}
.atlas-spec h3{font-size:1.9rem;font-weight:700;margin:14px 0 12px;text-transform:uppercase}
.atlas-spec-main p{color:var(--text-2);margin:0 0 22px;font-size:1.02rem}
.atlas-spec-rows{padding:24px 36px 34px}

/* Key/value rows with dashed rules — spec sheets, tickets, stacks. */
.kv{margin:0}
.kv>div{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:20px;padding:11px 0;border-bottom:1px dashed rgb(var(--ink-rgb) / .12);font-family:var(--mono);font-size:.8rem}
.kv dt{color:var(--text-3);letter-spacing:.06em;text-transform:uppercase}
.kv dd{margin:0;color:var(--text)}

/* ── Home: scene picker ────────────────────────────────────────────────────── */
.scene-tabs{display:flex;flex-wrap:wrap;border:1px solid rgb(var(--gold-rgb) / .22);border-bottom:none}
.scene-tab{padding:15px 24px;border:none;border-inline-end:1px solid rgb(var(--gold-rgb) / .22);background:transparent;color:var(--text-2);cursor:pointer;
  font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;transition:background-color .18s,color .18s}
.scene-tab:hover{color:var(--gold-ink)}
.scene-tab[aria-selected="true"]{background:var(--gold);color:var(--on-accent)}
.scene{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);border:1px solid rgb(var(--gold-rgb) / .22)}
.js .scene:not(.is-active){display:none}
.scene+.scene{margin-top:-1px}
.scene-info{padding:32px 34px;border-inline-end:1px solid rgb(var(--gold-rgb) / .22)}
.js .scene.is-active .scene-info{animation:drawin .45s cubic-bezier(.2,.7,.2,1) both}
.scene-code{color:var(--text-3)}
.scene-info h3{font-size:1.55rem;font-weight:700;text-transform:uppercase;margin:14px 0}
.scene-info>p{color:var(--text-2);margin:0 0 26px}
.stack-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px dashed rgb(var(--ink-rgb) / .12)}
.stack-badge{flex:none;padding:3px 7px;background:var(--gold);color:var(--on-accent);font-family:var(--mono);font-size:.66rem;font-weight:600}
.stack-name{font-weight:600;font-size:.98rem}
.stack-role{margin-inline-start:auto;font-family:var(--mono);font-size:.72rem;color:var(--text-3);text-align:end}
.scene-metrics{display:flex;flex-wrap:wrap;gap:20px 32px;margin-top:26px}
.scene-metric b{display:block;font-family:var(--mono);font-size:1.5rem;font-weight:600;color:var(--text)}
.scene-metric b.is-accent{color:var(--gold-ink)}
.scene-metric span{display:block;margin-top:4px;max-width:19ch;color:var(--text-3);font-family:var(--mono);font-size:.82rem}

.console{background:var(--panel-2);color:var(--text)}
.console-bar{display:flex;align-items:center;gap:12px;padding:13px 18px;background:var(--bg);border-bottom:1px solid rgb(var(--gold-rgb) / .22)}
.console-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
.console-app{font-family:var(--mono);font-size:.72rem;color:var(--text-2)}
.console-meta{margin-inline-start:auto;font-family:var(--mono);font-size:.68rem;color:var(--text-3)}
.console-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.95fr);min-height:430px}
.console-menu{padding:18px;border-inline-end:1px solid rgb(var(--gold-rgb) / .16)}
.console-cats{display:flex;flex-wrap:wrap;gap:1px;margin-bottom:16px}
.console-cat{padding:7px 12px;border:1px solid rgb(var(--gold-rgb) / .16);background:#0E1725;color:var(--text-2);font-family:var(--mono);font-size:.72rem}
.console-cat.is-current{border-color:rgb(var(--gold-rgb) / .5);background:rgb(var(--gold-rgb) / .14);color:var(--gold-ink)}
.console-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.console-item{display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-height:72px;padding:11px 10px;background:#0E1725;border:1px solid rgb(var(--gold-rgb) / .16)}
.console-item span{font-size:.83rem;font-weight:500;line-height:1.25}
.console-item b{font-family:var(--mono);font-size:.72rem;font-weight:400;color:var(--gold-ink)}
.ticket{display:flex;flex-direction:column;background:var(--bg)}
.ticket-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid rgb(var(--gold-rgb) / .16)}
.ticket-title{color:var(--text-2);font-size:.7rem;letter-spacing:.12em}
.ticket-no{font-family:var(--mono);font-size:.7rem;color:var(--text-3)}
.ticket-lines{flex:1;padding:6px 16px}
.ticket-line{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px dashed rgb(var(--ink-rgb) / .1)}
.ticket-line .q{flex:none;font-family:var(--mono);font-size:.74rem;color:var(--text-3)}
.ticket-line .n{font-size:.86rem}
.ticket-line .a{margin-inline-start:auto;font-family:var(--mono);font-size:.78rem;color:var(--text-2)}
.ticket-sum{padding:14px 16px;border-top:1px solid rgb(var(--gold-rgb) / .22);font-family:var(--mono)}
.ticket-sum>div{display:flex;justify-content:space-between;gap:12px;font-size:.76rem;color:var(--text-3);padding-bottom:6px}
.ticket-sum>div.total{align-items:baseline;padding:4px 0 0;font-size:1.12rem;font-weight:600;color:var(--text)}
.ticket-sum>div.total span+span{color:var(--gold-ink)}
.ticket-action{display:block;margin-top:14px;padding:14px;background:var(--gold);color:var(--on-accent);text-align:center;
  font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}

/* ── Home: integrations, deployment ────────────────────────────────────────── */
.integ{grid-template-columns:repeat(4,minmax(0,1fr))}
.integ-group{padding:28px 26px}
.integ-title{color:var(--gold-ink);margin-bottom:12px}
.integ-list{list-style:none;margin:0;padding:0}
.integ-list li{padding:11px 0;border-bottom:1px dashed rgb(var(--ink-rgb) / .12);font-weight:600;font-size:.98rem}
.integ-list li:last-child{border-bottom:none}

.layers{grid-template-columns:repeat(4,minmax(0,1fr))}
.layer{padding:30px 26px}
.layer-step{color:var(--text-3);font-size:.66rem}
.layer-name{margin:12px 0 10px;font-family:var(--mono);font-size:1.05rem;font-weight:600;color:var(--gold-ink);text-transform:uppercase}
.layer-copy{color:var(--text-2);font-size:.94rem;margin:0}
.badges{grid-template-columns:repeat(4,minmax(0,1fr));border-top:none}
.badges>li{list-style:none;padding:22px 26px;font-family:var(--mono);font-size:.78rem;color:var(--text-2)}
ul.badges{margin:0;padding:0}

/* ── Home: hardware strip ──────────────────────────────────────────────────── */
.hw-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.hw-card{display:flex;flex-direction:column}
.hw-media{height:180px;display:grid;place-items:center;border-bottom:1px solid rgb(var(--gold-rgb) / .16);
  background-image:linear-gradient(rgb(var(--gold-rgb) / .05) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--gold-rgb) / .05) 1px,transparent 1px);background-size:22px 22px}
.hw-media svg{width:62px;height:62px;color:rgb(var(--gold-rgb) / .6)}
.hw-media img{width:100%;height:100%;object-fit:contain;padding:14px}
.hw-body{display:flex;flex-direction:column;gap:12px;flex:1;padding:22px 24px}
.hw-cat{color:var(--text-3);font-size:.64rem;letter-spacing:.14em}
.hw-name{font-weight:600;font-size:1.02rem;margin:0;line-height:1.3}
.hw-specs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-family:var(--mono);font-size:.74rem;color:var(--text-2)}
.hw-specs li::before{content:"· "}
.hw-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px}
.hw-foot form{margin:0}
.hw-price{font-family:var(--mono);font-size:.72rem;color:var(--gold-ink)}
.hw-add{padding:7px 11px;border:1px solid rgb(var(--ink-rgb) / .18);background:transparent;color:var(--text-2);cursor:pointer;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.hw-add:hover{border-color:var(--gold);color:var(--gold-ink)}

/* ── Closing band ──────────────────────────────────────────────────────────── */
.closing{border-top:1px solid var(--hair);padding-block:104px 112px;text-align:center;
  background-image:radial-gradient(800px 420px at 50% 130%,rgb(var(--gold-rgb) / .16),transparent 70%)}
.closing h2{font-size:clamp(2.4rem,5.4vw,4.6rem);max-width:20ch;margin:0 auto 24px}
.closing p{color:var(--text-2);font-size:1.1rem;max-width:50ch;margin:0 auto 36px}
.closing-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── Site footer ───────────────────────────────────────────────────────────── */
/* The bottom padding keeps the last row clear of the floating WhatsApp button. */
.site-foot{border-top:1px solid var(--hair);padding-block:62px 104px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,4fr);gap:40px}
.foot-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.foot-tagline{margin-top:14px;color:var(--gold-ink);font-size:.7rem}
.foot-contact{margin:14px 0 0;color:var(--text-3);font-family:var(--mono);font-size:.86rem;line-height:1.8}
.foot-contact a:hover{color:var(--gold-ink)}
.foot-col-title{margin-bottom:14px;color:var(--text-3);font-size:.66rem}
.foot-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:.92rem;color:var(--text-2)}
.foot-links a:hover{color:var(--gold-ink)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px 20px;flex-wrap:wrap;margin-top:54px;padding-top:22px;
  border-top:1px solid var(--hair);font-family:var(--mono);font-size:.72rem;color:var(--text-3)}
.foot-legal{display:flex;gap:8px 20px;flex-wrap:wrap;align-items:center}
.foot-legal a:hover{color:var(--gold-ink)}

/* ── Floating WhatsApp button ──────────────────────────────────────────────── */
.wa-float{position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:35;display:grid;place-items:center;width:56px;height:56px;
  background:var(--gold);color:var(--on-accent);box-shadow:0 22px 44px -20px var(--shadow-color);transition:background-color .15s}
.wa-float:hover{background:var(--gold-bright);color:var(--on-accent)}
.wa-float svg{width:27px;height:27px}
body:has(.consent) .wa-float{inset-block-end:112px}

/* ── Utilities ─────────────────────────────────────────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sec--flush{border-top:none;padding-block:0 96px}
.sec-title--spaced{margin-bottom:44px}
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px 64px;align-items:start}
.split .sec-lead{margin-top:20px}

/* ── Inner-page hero (software overview, product pages) ────────────────────── */
.page-hero{position:relative;padding-block:44px 80px;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgb(var(--gold-rgb) / .06) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--gold-rgb) / .06) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(110% 70% at 50% 0,#000,transparent 80%);mask-image:radial-gradient(110% 70% at 50% 0,#000,transparent 80%)}
.page-hero>.wrap{position:relative}
.crumbs{padding-bottom:22px;border-bottom:1px solid var(--hair)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0;padding:0;list-style:none;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.crumbs li+li::before{content:"/";margin-inline-end:10px}
.crumbs a:hover{color:var(--gold-ink)}
.crumbs [aria-current]{color:var(--gold-ink)}
.page-kicker{display:flex;align-items:center;gap:12px;margin-top:44px;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ink);font-weight:600}
.page-title{font-size:clamp(2.4rem,6vw,5.4rem);margin:26px 0 0;max-width:20ch}
.page-hero-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px 64px;margin-top:40px;align-items:start}
.page-hero-body .lead{margin:0;max-width:54ch;font-size:1.2rem}
.page-hero-body .hero-actions{margin-top:0;justify-content:flex-end}

.prod-hero{padding-block:56px 88px}
.prod-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px 64px;margin-top:48px;align-items:center}
.prod-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ink);font-weight:600}
.prod-code{padding:4px 8px;border:1px solid rgb(var(--gold-rgb) / .4)}
.prod-title{font-size:clamp(2.4rem,5.6vw,5.4rem);margin:26px 0 22px;overflow-wrap:anywhere}
.prod-hero .lead{margin:0;max-width:48ch;font-size:1.22rem}
.prod-hero .hero-actions{margin-top:34px}
.prod-hero-visual{border:1px solid rgb(var(--gold-rgb) / .22);background:var(--panel);padding:14px;height:420px}
.prod-hero-visual .shot-img{width:100%;height:100%;object-fit:cover}
.prod-facts{grid-template-columns:repeat(4,minmax(0,1fr));margin:48px 0 0}
.prod-facts>div{padding:22px 26px;margin:0}
.prod-facts dt{color:var(--text-3);font-size:.66rem}
.prod-facts dd{margin:8px 0 0;font-family:var(--mono);font-size:1.15rem;font-weight:600;line-height:1.35}
.prod-facts dd.is-accent{color:var(--gold-ink)}

/* ── Software overview: filters, product grid, comparison, paths ───────────── */
/* The bar only appears once elts.js can make it work; without it every card shows. */
.filter-bar{display:none;flex-wrap:wrap;border:1px solid rgb(var(--gold-rgb) / .22);border-bottom:none}
.js .filter-bar{display:flex}
.filter-btn{padding:15px 22px;border:none;border-inline-end:1px solid rgb(var(--gold-rgb) / .22);background:transparent;color:var(--text-2);cursor:pointer;
  font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;transition:background-color .15s,color .15s}
.filter-btn:hover{color:var(--gold-ink)}
.filter-btn[aria-pressed="true"]{background:var(--gold);color:var(--on-accent)}
.filter-count{margin-inline-start:auto;align-self:center;padding:10px 20px;font-family:var(--mono);font-size:.72rem;color:var(--text-3)}
.prod-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none}
.prod-grid>li{display:flex}
.prod-grid>li[hidden]{display:none}
/* The card repeats its cell's frame so the hover background does not paint over it. */
.prod-card{position:relative;flex:1;display:flex;flex-direction:column;gap:12px;min-height:300px;padding:30px 30px 32px;box-shadow:inherit;transition:background-color .18s}
.prod-card:hover{background:var(--panel-2);color:inherit}
.prod-icon{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgb(var(--gold-rgb) / .3);color:var(--gold-ink)}
.prod-icon svg{width:21px;height:21px}
.prod-badge{position:absolute;inset-inline-end:26px;inset-block-start:30px;padding:5px 9px;border:1px solid rgb(var(--gold-rgb) / .4);color:var(--gold-ink);font-size:.64rem;letter-spacing:.12em}
.prod-meta{color:var(--text-3);font-weight:600}
.prod-name{font-size:1.35rem;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.prod-summary{color:var(--text-2);font-size:.98rem}
.prod-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;
  border-top:1px dashed rgb(var(--ink-rgb) / .12);font-family:var(--mono);font-size:.72rem;color:var(--text-3)}
.prod-open{flex:none;color:var(--gold-ink);letter-spacing:.1em;text-transform:uppercase}

/* position:relative makes this the containing block of the cells' .sr-only labels;
   without it those absolutely positioned labels escape the scroll box and widen the page. */
.compare-scroll{position:relative;overflow-x:auto;border:1px solid rgb(var(--gold-rgb) / .22)}
.compare-scroll:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.compare{width:100%;min-width:1040px;border-collapse:collapse;table-layout:fixed}
.compare th,.compare td{padding:14px;border-bottom:1px solid rgb(var(--gold-rgb) / .12);border-inline-start:1px solid rgb(var(--gold-rgb) / .12)}
.compare thead th{background:var(--panel-2);color:var(--gold-ink);font-size:.66rem;letter-spacing:.1em;text-align:center;border-bottom-color:rgb(var(--gold-rgb) / .22)}
.compare thead th:first-child{color:var(--text-3);text-align:start}
.compare th:first-child{border-inline-start:none;padding-inline:22px;width:24%}
.compare tbody th{font-weight:400;font-size:.94rem;text-align:start}
.compare td{text-align:center;font-family:var(--mono);font-size:.9rem}
.compare tbody tr:last-child>*{border-bottom:none}
.m-core{color:var(--gold-ink)}
.m-via{color:var(--text-2);font-weight:700}
.m-none{color:var(--text-3);opacity:.55}
.compare-legend{display:flex;flex-wrap:wrap;gap:10px 24px;margin:18px 0 0;padding:0;list-style:none;font-family:var(--mono);font-size:.72rem;color:var(--text-3)}

.paths{grid-template-columns:repeat(3,minmax(0,1fr))}
.path{padding:32px 32px 36px}
.path-kicker{color:var(--text-3)}
.path h3{font-size:1.3rem;font-weight:600;margin:14px 0 10px;letter-spacing:-.01em}
.path p{color:var(--text-2);font-size:.98rem;margin:0 0 18px}

/* ── Product page sections ─────────────────────────────────────────────────── */
.feat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.feat{padding:30px 30px 34px}
.feat-no{color:var(--text-3);font-size:.66rem}
.feat h3{font-size:1.18rem;font-weight:600;letter-spacing:-.02em;margin:14px 0 10px;line-height:1.3}
.feat p{color:var(--text-2);font-size:.98rem;margin:0}

.shots{border:1px solid rgb(var(--gold-rgb) / .22)}
.shot{margin:0}
.js .shot:not(.is-active){display:none}
.shot+.shot{border-top:1px solid rgb(var(--gold-rgb) / .22)}
.js .shot+.shot{border-top:none}
.shot-frame{height:clamp(380px,40vw,520px);padding:16px;background:var(--panel)}
.shot-img{display:block;width:100%;height:100%;object-fit:contain}
.shot-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:16px 22px;border-top:1px solid rgb(var(--gold-rgb) / .16);color:var(--text-2);font-size:.95rem}
.shot-cap b{color:var(--text);font-weight:600}
.shot-note{margin-inline-start:auto;color:var(--text-3);font-size:.62rem}
.shot-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid rgb(var(--gold-rgb) / .22)}
.shot-tab{display:block;padding:18px 22px;border:none;border-inline-end:1px solid rgb(var(--gold-rgb) / .16);background:transparent;color:var(--text-2);
  text-align:start;cursor:pointer;font:inherit;transition:background-color .15s,color .15s}
.shot-tab:last-child{border-inline-end:none}
.shot-tab:hover{color:var(--gold-ink)}
.shot-tab[aria-selected="true"]{background:var(--gold);color:var(--on-accent)}
.shot-tab .mono-label{display:block;font-size:.64rem}
.shot-tab-name{display:block;margin-top:6px;font-weight:600;font-size:.96rem;letter-spacing:-.01em}

.integ-rows{margin:0;padding:0;list-style:none;border:1px solid rgb(var(--gold-rgb) / .22)}
.integ-rows li{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr) minmax(0,.45fr);gap:8px 24px;align-items:center;padding:18px 26px;
  border-bottom:1px solid rgb(var(--gold-rgb) / .14)}
.integ-rows li:last-child{border-bottom:none}
.integ-name{font-weight:600}
.integ-what{color:var(--text-2);font-size:.94rem}
.integ-status{color:var(--gold-ink);text-align:end;font-size:.7rem;letter-spacing:.1em}

.spec-table{margin:0;border:1px solid rgb(var(--gold-rgb) / .22)}
.spec-table>div{display:grid;grid-template-columns:minmax(0,.35fr) minmax(0,.65fr);gap:8px 32px;padding:15px 28px;border-bottom:1px solid rgb(var(--gold-rgb) / .14);
  font-family:var(--mono);font-size:.84rem}
.spec-table>div:last-child{border-bottom:none}
.spec-table dt{color:var(--text-3);letter-spacing:.08em;text-transform:uppercase}
.spec-table dd{margin:0}

.plans{grid-template-columns:repeat(3,minmax(0,1fr))}
.plan{display:flex;flex-direction:column;padding:30px 30px 34px}
.plan-kicker{color:var(--text-3)}
.plan h3{font-size:1.6rem;font-weight:700;text-transform:uppercase;margin:14px 0 8px;line-height:1.15}
.plan-price{margin-bottom:22px;font-family:var(--mono);font-size:.92rem;color:var(--gold-ink)}
.plan ul{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;color:var(--text-2);font-size:.95rem}
.plan li::before{content:"· "}
.plan-cta{display:block;margin-top:auto;padding:14px 20px;border:1px solid rgb(var(--gold-rgb) / .4);color:var(--gold-ink);text-align:center;
  font-family:var(--mono);font-size:.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.plan ul+.plan-cta{margin-top:28px}
.plan-cta:hover{background:var(--gold);color:var(--on-accent)}
.plan.is-featured{background:var(--gold);color:var(--on-accent)}
.plan.is-featured :is(.plan-kicker,.plan-price,ul){color:rgba(26,20,6,.8)}
.plan.is-featured .plan-cta{border-color:#1A1406;background:#1A1406;color:#E3BE55}
.plan.is-featured .plan-cta:hover{background:#2A2210;color:#F4D580}

.qa{border:1px solid rgb(var(--gold-rgb) / .22)}
.qa-item{border-bottom:1px solid rgb(var(--gold-rgb) / .14)}
.qa-item:last-child{border-bottom:none}
.qa-item summary{display:flex;align-items:center;gap:20px;padding:22px 28px;cursor:pointer;list-style:none;font-weight:600;font-size:1.05rem;line-height:1.35}
.qa-item summary::-webkit-details-marker{display:none}
.qa-item summary:hover .qa-q{color:var(--gold-ink)}
.qa-no{flex:none;color:var(--text-3);font-size:.7rem}
.qa-sign{flex:none;margin-inline-start:auto;width:14px;height:14px;position:relative}
.qa-sign::before,.qa-sign::after{content:"";position:absolute;inset-inline:0;top:6px;height:2px;background:var(--gold)}
.qa-sign::after{transform:rotate(90deg);transition:transform .2s}
.qa-item[open] .qa-sign::after{transform:rotate(0)}
.qa-item p{margin:0;padding:0 28px 26px;padding-inline-start:68px;color:var(--text-2);max-width:78ch}

.demo{background-image:radial-gradient(800px 420px at 50% 130%,rgb(var(--gold-rgb) / .14),transparent 70%)}
.demo-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px 64px;align-items:start}
.demo-points{display:flex;flex-direction:column;gap:12px;margin:28px 0 0;padding:0;list-style:none;font-family:var(--mono);font-size:.82rem;color:var(--text-2)}
.demo-points li::before{content:"· "}
.demo-points a:hover{color:var(--gold-ink)}
.demo-form{border:1px solid rgb(var(--gold-rgb) / .22);background:var(--panel);padding:30px 32px}

/* ── Enquiry form ──────────────────────────────────────────────────────────── */
.enq{margin:0}
.enq-title{color:var(--text-3);margin-bottom:20px}
.enq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.enq-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.enq-wide{margin-top:14px}
.enq-field label{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.enq-opt{color:var(--text-3);text-transform:none;letter-spacing:0}
.enq-field input,.enq-field textarea{width:100%;padding:13px 14px;border:1px solid rgb(var(--gold-rgb) / .22);border-radius:0;background:var(--panel-2);color:var(--text);font:inherit;font-size:.95rem}
.enq-field textarea{resize:vertical;min-height:110px}
.enq-field input:focus,.enq-field textarea:focus{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold)}
.enq-field [aria-invalid="true"]{border-color:var(--error-text)}
.enq-error{color:var(--error-text);font-size:.85rem}
.enq-hint{grid-column:1/-1;margin:-4px 0 0;color:var(--text-3);font-size:.82rem}
.enq-alert{margin:0 0 18px;padding:12px 14px;border:1px solid var(--error-text);color:var(--error-text);font-size:.92rem}
.enq-hp{position:absolute;inset-inline-start:-10000px;width:1px;height:1px;overflow:hidden}
.enq-scale{margin-top:18px}
/* Pick-any chips: real checkboxes laid over their labels, so a click, a tap and the
   keyboard all work and no script is involved. */
.enq-choices{margin:20px 0 0;padding:0;border:none;min-width:0}
.enq-legend{padding:0;margin-bottom:10px;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.enq-chips{display:flex;flex-wrap:wrap;gap:8px}
.enq-chip{position:relative;display:inline-flex;cursor:pointer}
.enq-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.enq-chip span{padding:9px 13px;border:1px solid rgb(var(--gold-rgb) / .2);font-family:var(--mono);font-size:.74rem;color:var(--text-2);
  transition:border-color .15s,background-color .15s,color .15s}
.enq-chip:hover span{border-color:rgb(var(--gold-rgb) / .5)}
.enq-chip input:checked+span{border-color:var(--gold);background:rgb(var(--gold-rgb) / .16);color:var(--gold-ink)}
.enq-chip input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.enq-check{display:flex;align-items:center;gap:10px;margin-top:18px;color:var(--text-2);font-size:.92rem;cursor:pointer}
.enq-check input{width:18px;height:18px;margin:0;accent-color:var(--gold)}
.enq-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:20px}
.enq-promise{color:var(--text-3);font-size:.66rem}
.enq-privacy{margin:14px 0 0;color:var(--text-3);font-size:.82rem}
.enq-privacy a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px}
.enq-privacy a:hover{color:var(--gold-ink)}


/* ── Contact page ──────────────────────────────────────────────────────────── */
.contact-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px 64px;margin-top:44px;align-items:end}
.contact-hero-grid .page-title{margin:0}
.contact-hero-grid .lead{margin:0;max-width:52ch;color:var(--text-2);font-size:1.08rem}
.route-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
.route-tab{display:flex;flex-direction:column;gap:6px;padding:22px 26px;color:var(--text-2);transition:background-color .15s,color .15s}
.route-tab:hover{color:var(--gold-ink)}
.route-kicker{color:var(--text-3);font-size:.64rem}
.route-label{font-weight:600;letter-spacing:-.01em}
.route-tab[aria-current]{background:var(--gold);color:var(--on-accent)}
.route-tab[aria-current] .route-kicker{color:rgba(26,20,6,.7)}
.contact-body{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);border:1px solid rgb(var(--gold-rgb) / .22);border-top:none}
.contact-main{padding:40px 44px 44px;border-inline-end:1px solid rgb(var(--gold-rgb) / .22)}
.contact-code{color:var(--gold-ink)}
.contact-title{font-size:1.9rem;font-weight:700;text-transform:uppercase;letter-spacing:-.02em;line-height:1.15;margin:14px 0 10px}
.contact-blurb{margin:0 0 28px;max-width:56ch;color:var(--text-2)}
.contact-link{margin:-12px 0 28px}
.contact-aside{display:flex;flex-direction:column}
.aside-block{padding:30px 32px;border-bottom:1px solid rgb(var(--gold-rgb) / .16)}
.aside-block:last-child{border-bottom:none}
.aside-title{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:var(--gold-ink)}
.direct-lines,.office,.next-steps{margin:0;padding:0;list-style:none}
.direct-lines a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px dashed rgb(var(--ink-rgb) / .1)}
.direct-lines li:last-child a{border-bottom:none}
.direct-lines a:hover .dl-value{color:var(--gold-ink)}
.dl-label{font-weight:600}
.dl-value{font-family:var(--mono);font-size:.8rem;color:var(--text-2);text-align:end}
.office{color:var(--text-2);line-height:1.9}
.next-steps li{display:flex;gap:12px;padding:7px 0;color:var(--text-2);font-size:.95rem}
.next-steps .mono-label{flex:none;color:var(--gold-ink);padding-top:4px}


/* ── Solutions overview ────────────────────────────────────────────────────── */
.sol-aside{border:1px solid rgb(var(--gold-rgb) / .3);padding:22px 24px}
.sol-aside-title{color:var(--gold-ink);margin-bottom:12px}
.sol-aside p{margin:0 0 16px;color:var(--text-2);font-size:.95rem}
.ind-rows{margin:0;padding:0;list-style:none;border:1px solid rgb(var(--gold-rgb) / .22)}
.ind-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,.8fr);border-bottom:1px solid rgb(var(--gold-rgb) / .16)}
.ind-row:last-child{border-bottom:none}
.ind-row>div{padding:34px 34px 36px}
.ind-row>div+div{border-inline-start:1px solid rgb(var(--gold-rgb) / .16)}
.ind-code{color:var(--gold-ink)}
.ind-name{font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;line-height:1.1;margin:12px 0}
.ind-name a:hover{color:var(--gold-ink)}
.ind-main p{margin:0 0 20px;max-width:48ch;color:var(--text-2)}
:is(.ind-pains,.ind-stack)>.mono-label{margin-bottom:14px;color:var(--text-3)}
:is(.ind-pains,.ind-stack) ul{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.ind-pains li{position:relative;padding-inline-start:16px;color:var(--text-2);font-size:.95rem}
.ind-pains li::before{content:"›";position:absolute;inset-inline-start:0;color:var(--gold-ink)}
html[dir="rtl"] .ind-pains li::before{content:"‹"}
.ind-stack li{font-weight:600;font-size:.95rem}
.ind-stack a:hover{color:var(--gold-ink)}
.ind-note{margin:18px 0 0;padding-top:14px;border-top:1px dashed rgb(var(--ink-rgb) / .12);color:var(--text-3);font-family:var(--mono);font-size:.7rem;line-height:1.5}
.combos{grid-template-columns:repeat(3,minmax(0,1fr))}
.combo{padding:28px 28px 30px}
.combo-codes{color:var(--gold-ink)}
.combo h3{font-size:1.1rem;font-weight:600;margin:12px 0 8px}
.combo p{margin:0;color:var(--text-2);font-size:.95rem}

/* ── Industry pages ────────────────────────────────────────────────────────── */
.ind-hero .page-title{max-width:18ch}
.problems{grid-template-columns:repeat(2,minmax(0,1fr))}
.problem{display:flex;flex-direction:column;padding:30px 32px 32px}
.problem-no{color:var(--text-3);font-size:.66rem}
.problem h3{font-size:1.2rem;font-weight:600;letter-spacing:-.01em;line-height:1.3;margin:14px 0 10px}
.problem>p{margin:0 0 18px;color:var(--text-2);font-size:.96rem}
.problem>p.problem-fix{display:flex;gap:14px;margin:auto 0 0;padding-top:16px;border-top:1px dashed rgb(var(--ink-rgb) / .12);color:var(--text);font-size:.95rem}
.problem-fix .mono-label{flex:none;padding-top:3px;color:var(--gold-ink)}
.flow{border:1px solid rgb(var(--gold-rgb) / .22)}
.flow-tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid rgb(var(--gold-rgb) / .22)}
.flow-tab{padding:15px 22px;border:none;border-inline-end:1px solid rgb(var(--gold-rgb) / .22);background:transparent;color:var(--text-2);cursor:pointer;
  font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;transition:background-color .15s,color .15s}
.flow-tab:hover{color:var(--gold-ink)}
.flow-tab[aria-selected="true"]{background:var(--gold);color:var(--on-accent)}
.flow-panel{padding:30px 30px 26px}
.js .flow-panel:not(.is-active){display:none}
.flow-panel+.flow-panel{border-top:1px solid rgb(var(--gold-rgb) / .16)}
.js .flow-panel+.flow-panel{border-top:none}
.js .flow-panel.is-active{animation:drawin .35s cubic-bezier(.2,.7,.2,1) both}
.flow-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.flow-steps li{padding-top:14px;border-top:1px solid rgb(var(--gold-rgb) / .3)}
.flow-step{color:var(--text-3);font-size:.64rem}
.flow-node{display:block;margin:8px 0;font-family:var(--mono);font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink)}
.flow-steps p{margin:0;color:var(--text-2);font-size:.93rem}
.flow-note{display:flex;gap:14px;align-items:baseline;margin:26px 0 0;padding-top:18px;border-top:1px dashed rgb(var(--ink-rgb) / .12);color:var(--text-2);font-size:.92rem}
.flow-note .mono-label{flex:none;color:var(--gold-ink)}
.stack-list{margin:0;padding:0;list-style:none;border:1px solid rgb(var(--gold-rgb) / .22)}
.stack-item{display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,1.6fr) auto;gap:10px 24px;align-items:center;padding:20px 26px;
  border-bottom:1px solid rgb(var(--gold-rgb) / .14)}
.stack-item:last-child{border-bottom:none}
.stack-code{color:var(--gold-ink)}
.stack-name b{display:block;font-size:1.05rem;font-weight:600}
.stack-name .mono-label{display:block;margin-top:4px;color:var(--text-3);font-size:.62rem}
.stack-copy{margin:0;color:var(--text-2);font-size:.94rem}

/* ── Enquiry thank-you page ────────────────────────────────────────────────── */
.thanks{padding-block:120px 140px;background-image:radial-gradient(800px 420px at 50% 120%,rgb(var(--gold-rgb) / .14),transparent 70%)}
.thanks h1{font-size:clamp(2.2rem,4.8vw,4.2rem);margin:24px 0 22px;max-width:20ch}
.thanks .lead{margin:0;max-width:56ch;font-size:1.15rem;color:var(--text-2)}
.thanks-ref{display:flex;align-items:baseline;gap:14px;margin:30px 0 0;font-family:var(--mono)}
.thanks-ref .mono-label{color:var(--text-3)}
.thanks-ref b{font-size:1.3rem;color:var(--gold-ink);letter-spacing:.06em}

/* ── Drawn product screens (ScreenMockView) ────────────────────────────────── */
/* Everything is sized in em, and the base size follows the width of the frame the drawing
   sits in (13.5px in the hero column, 17px across the gallery), so it reads as the same
   screen at every size. Container queries simplify it when its own box gets narrow. */
.shot-frame,.prod-hero-visual{container-type:inline-size}
.mock{container-type:inline-size;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;
  border:1px solid rgb(var(--gold-rgb) / .16);background:var(--panel-2);font-size:clamp(12px,calc(10.8px + .53cqi),17px);line-height:1.35;color:var(--text)}
.mock:lang(ar){font-family:var(--font-ar)}
.mock:lang(en){font-family:var(--font)}
.mock-bar{display:flex;align-items:center;gap:10px;padding:.8em 1.1em;background:var(--bg);border-bottom:1px solid rgb(var(--gold-rgb) / .18);min-width:0}
.mock-lights{display:flex;gap:5px;flex:none}
.mock-lights i{width:7px;height:7px;border-radius:50%;background:var(--text-3);opacity:.6}
.mock-lights i:first-child{background:var(--gold);opacity:1}
.mock-title{font-family:var(--mono);font-size:.8em;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-meta{margin-inline-start:auto;flex:none;font-family:var(--mono);font-size:.74em;color:var(--text-3)}
.mock-body{flex:1;min-height:0;padding:1.1em;overflow:hidden}
.mock:lang(ar) :is(.mock-title,.mock-meta){font-family:var(--font-ar)}

.mk-tag{display:inline-block;padding:.2em .6em;border:1px solid currentColor;font-style:normal;font-family:var(--mono);font-size:.72em;
  letter-spacing:.04em;white-space:nowrap;color:var(--text-2)}
.mock:lang(ar) .mk-tag{font-family:var(--font-ar)}
.is-ok{--st:#4CAF6E}
.is-busy{--st:var(--gold)}
.is-warn{--st:#E0913A}
.is-alert{--st:#E8836F}
.is-idle{--st:var(--text-3)}
.mk-tag:is(.is-ok,.is-busy,.is-warn,.is-alert,.is-idle){color:var(--st)}
.mk-action{display:block;margin-top:auto;padding:.8em;background:var(--gold);color:var(--on-accent);text-align:center;font-weight:600;font-size:.9em}

/* pos — a till: categories and tiles beside the open ticket */
.mk-pos{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:1em;height:100%}
.mk-pos-main{display:flex;flex-direction:column;min-height:0}
.mk-chips{display:flex;flex-wrap:wrap;gap:1px;margin-bottom:.9em}
.mk-chip{padding:.45em .8em;border:1px solid rgb(var(--gold-rgb) / .16);background:var(--panel-3);color:var(--text-2);font-size:.82em}
.mk-chip.is-on{border-color:rgb(var(--gold-rgb) / .5);background:rgb(var(--gold-rgb) / .14);color:var(--gold-ink)}
.mk-tiles{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(4.6em,1fr);gap:.55em;min-height:0}
.mk-tile{display:flex;flex-direction:column;justify-content:space-between;gap:.4em;padding:.7em;border:1px solid rgb(var(--gold-rgb) / .14);background:var(--panel-3)}
.mk-tile span{font-size:.88em;font-weight:500}
.mk-tile b{font-family:var(--mono);font-weight:400;font-size:.8em;color:var(--gold-ink)}
.mk-ticket{display:flex;flex-direction:column;min-height:0;padding:.9em;border:1px solid rgb(var(--gold-rgb) / .16);background:var(--bg)}
.mk-ticket-lines{flex:1}
.mk-line{display:flex;align-items:baseline;gap:.6em;padding:.55em 0;border-bottom:1px dashed rgb(var(--ink-rgb) / .1);font-size:.88em}
.mk-line .q{flex:none;font-family:var(--mono);color:var(--text-3);font-size:.9em}
.mk-line .a{margin-inline-start:auto;font-family:var(--mono);color:var(--text-2)}
.mk-total{display:flex;justify-content:space-between;align-items:baseline;gap:1em;margin:.9em 0;font-family:var(--mono);font-weight:600;font-size:1.05em}
.mk-total b{color:var(--gold-ink)}

/* list — a table of rows with a status chip */
.mk-list{display:flex;flex-direction:column}
.mk-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,.8fr) minmax(0,.9fr);gap:.8em;align-items:center;padding:.75em .4em;
  border-bottom:1px solid rgb(var(--gold-rgb) / .1);font-size:.9em}
.mk-head{padding-block:.4em .6em;font-family:var(--mono);font-size:.7em;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.mock:lang(ar) .mk-head{font-family:var(--font-ar);letter-spacing:0;font-size:.8em}
.mk-row .c1{font-weight:600;font-family:var(--mono);font-size:.95em}
.mock:lang(ar) .mk-row .c1{font-family:var(--font-ar)}
.mk-row .c2{color:var(--text-2)}
.mk-row .c3{font-family:var(--mono);color:var(--text-2)}
.mk-row .c4{text-align:end}

/* board — columns of cards */
.mk-board{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:.8em;height:100%}
.mk-col{display:flex;flex-direction:column;gap:.55em;min-width:0;padding:.7em;background:var(--bg);border:1px solid rgb(var(--gold-rgb) / .12)}
.mk-col-head{display:flex;justify-content:space-between;align-items:baseline;gap:.5em;padding-bottom:.45em;border-bottom:1px solid rgb(var(--gold-rgb) / .16);
  font-family:var(--mono);font-size:.74em;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.mock:lang(ar) .mk-col-head{font-family:var(--font-ar);letter-spacing:0;font-size:.85em}
.mk-col-head b{color:var(--gold-ink)}
.mk-card{display:flex;flex-direction:column;gap:.3em;padding:.65em .7em;background:var(--panel-3);border-inline-start:3px solid var(--st,rgb(var(--gold-rgb) / .3))}
.mk-card .t{font-weight:600;font-size:.9em}
.mk-card .s{color:var(--text-2);font-size:.82em}
.mk-card .v{display:flex;justify-content:space-between;align-items:center;gap:.5em;font-family:var(--mono);font-size:.78em;color:var(--text-3)}

/* report — tiles, a bar chart and a short table */
.mk-report{display:flex;flex-direction:column;gap:1em;height:100%}
.mk-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6em}
.mk-kpi{padding:.75em .8em;background:var(--bg);border:1px solid rgb(var(--gold-rgb) / .12)}
.mk-kpi b{display:block;font-family:var(--mono);font-size:1.15em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-kpi b.is-accent{color:var(--gold-ink)}
.mk-kpi span{display:block;margin-top:.25em;color:var(--text-3);font-size:.78em}
.mk-report-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1em;flex:1;min-height:0}
.mk-chart{display:flex;align-items:flex-end;gap:.5em;padding:.8em .8em .4em;background:var(--bg);border:1px solid rgb(var(--gold-rgb) / .12);min-height:9em}
.mk-bar-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:.35em;height:100%}
.mk-bar{display:block;width:100%;height:var(--h);min-height:2px;background:linear-gradient(to top,rgb(var(--gold-rgb) / .35),var(--gold))}
.mk-bar-label{font-family:var(--mono);font-size:.68em;color:var(--text-3);white-space:nowrap}
.mock:lang(ar) .mk-bar-label{font-family:var(--font-ar);font-size:.74em}
.mk-mini{display:flex;flex-direction:column;justify-content:center;padding:.4em .9em;background:var(--bg);border:1px solid rgb(var(--gold-rgb) / .12)}
.mk-mini-row{display:flex;justify-content:space-between;gap:.8em;padding:.55em 0;border-bottom:1px dashed rgb(var(--ink-rgb) / .1);font-size:.86em}
.mk-mini-row:last-child{border-bottom:none}
.mk-mini-row span+span{font-family:var(--mono);color:var(--text-2)}
.mk-mini-row span:is(.is-ok,.is-busy,.is-warn,.is-alert){color:var(--st)}

/* floor — the dining room as a grid of tables */
.mk-floor{display:flex;flex-direction:column;gap:1em;height:100%}
.mk-tables{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:.7em;flex:1}
.mk-table{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.2em;min-height:4.4em;padding:.5em;text-align:center;
  border:1px solid var(--st,rgb(var(--gold-rgb) / .2));background:color-mix(in srgb,var(--st,transparent) 12%,var(--panel-3))}
.mk-table b{font-family:var(--mono);font-size:1em}
.mk-table span{color:var(--text-2);font-size:.76em}
.mk-legend{display:flex;flex-wrap:wrap;gap:.5em 1.2em;font-size:.78em;color:var(--text-2)}
.mk-legend span::before{content:"";display:inline-block;width:.75em;height:.75em;margin-inline-end:.45em;vertical-align:-.05em;background:var(--st)}

/* detail — fields beside a timeline */
.mk-detail{display:flex;flex-direction:column;height:100%}
.mk-subtabs{display:flex;gap:1.4em;margin:-.2em 0 .9em;border-bottom:1px solid rgb(var(--gold-rgb) / .16);font-size:.84em;color:var(--text-3)}
.mk-subtabs span{padding-bottom:.55em}
.mk-subtabs .is-on{color:var(--gold-ink);box-shadow:inset 0 -2px var(--gold)}
.mk-detail-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:1em;flex:1;min-height:0}
.mk-fields{margin:0;padding:.3em .9em;background:var(--bg);border:1px solid rgb(var(--gold-rgb) / .12)}
.mk-fields>div{padding:.6em 0;border-bottom:1px dashed rgb(var(--ink-rgb) / .1)}
.mk-fields>div:last-child{border-bottom:none}
.mk-fields dt{color:var(--text-3);font-size:.74em;text-transform:uppercase;letter-spacing:.06em;font-family:var(--mono)}
.mock:lang(ar) .mk-fields dt{font-family:var(--font-ar);letter-spacing:0;text-transform:none;font-size:.82em}
.mk-fields dd{margin:.15em 0 0;font-weight:600;font-size:.95em}
.mk-fields dd.is-accent{color:var(--gold-ink);font-family:var(--mono)}
.mk-timeline{display:flex;flex-direction:column;gap:.55em;min-height:0}
.mk-event{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.1em .8em;padding:.6em .7em;background:var(--panel-3);border-inline-start:3px solid var(--st,rgb(var(--gold-rgb) / .3))}
.mk-event .w{grid-row:span 2;font-family:var(--mono);font-size:.76em;color:var(--text-3);min-width:4.6em}
.mk-event .l{font-weight:600;font-size:.88em}
.mk-event .n{color:var(--text-2);font-size:.8em}

/* map — a street grid with numbered stops beside their list */
.mk-map{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1em;height:100%}
.mk-map-canvas{position:relative;min-height:12em;background:var(--bg);border:1px solid rgb(var(--gold-rgb) / .12);overflow:hidden}
.mk-streets{position:absolute;inset:0;width:100%;height:100%}
.mk-streets:dir(rtl){transform:scaleX(-1)}
.mk-streets path{fill:none;stroke:rgba(174,185,201,.16);stroke-width:1;vector-effect:non-scaling-stroke}
.mk-streets .avenue{stroke:rgba(174,185,201,.3);stroke-width:3}
.mk-streets .route{fill:none;stroke:var(--gold);stroke-width:2;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}
.mk-pin{position:absolute;display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--st,var(--gold));color:var(--on-accent);font-family:var(--mono);font-size:.8em;font-weight:600;box-shadow:0 0 0 3px rgb(var(--scrim-rgb) / .6)}
.mk-pin:dir(rtl){transform:translate(50%,-50%)}
.mk-stops{display:flex;flex-direction:column;gap:.5em;min-width:0}
.mk-stop{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.2em .7em;align-items:center;padding:.6em .7em;background:var(--panel-3);border:1px solid rgb(var(--gold-rgb) / .1)}
.mk-stop .no{display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:rgb(var(--gold-rgb) / .16);color:var(--gold-ink);font-family:var(--mono);font-size:.78em}
.mk-stop .l{font-weight:600;font-size:.88em}
.mk-stop .l small{display:block;font-weight:400;color:var(--text-2);font-size:.9em}
.mk-stop .v{font-family:var(--mono);font-size:.78em;color:var(--text-3)}
.mk-stop .mk-tag{grid-column:2/-1;justify-self:start}

/* phone — an app screen on a device outline */
.mock--phone{background:radial-gradient(60% 80% at 50% 50%,rgb(var(--gold-rgb) / .08),transparent 70%),var(--panel-2)}
.mock--phone .mock-body{display:grid;place-items:center;padding:1.2em}
.mk-phone{display:flex;flex-direction:column;gap:.7em;width:min(100%,17.5em);height:100%;max-height:34em;padding:1em .9em;border:1px solid rgb(var(--gold-rgb) / .35);
  border-radius:1.6em;background:var(--bg);box-shadow:0 20px 40px -24px var(--shadow-color);overflow:hidden}
.mk-phone-top{display:flex;flex-direction:column;gap:.15em;padding:.2em .3em .6em;border-bottom:1px solid rgb(var(--gold-rgb) / .16)}
.mk-phone-top .t{font-weight:700;font-size:1.02em}
.mk-phone-top .m{color:var(--text-3);font-size:.78em}
.mk-seg{display:flex;gap:1px;padding:2px;background:var(--panel-3)}
.mk-seg span{flex:1;padding:.4em .3em;text-align:center;font-size:.76em;color:var(--text-2)}
.mk-seg .is-on{background:var(--gold);color:var(--on-accent);font-weight:600}
.mk-pcards{display:flex;flex-direction:column;gap:.5em;min-height:0;overflow:hidden}
.mk-pcard{display:flex;flex-direction:column;gap:.2em;padding:.65em .7em;background:var(--panel-3);border-inline-start:3px solid var(--st,rgb(var(--gold-rgb) / .3))}
.mk-pcard .l{font-weight:600;font-size:.88em}
.mk-pcard .n{color:var(--text-2);font-size:.78em}
.mk-pcard .v{display:flex;justify-content:space-between;align-items:center;gap:.5em;font-family:var(--mono);font-size:.76em;color:var(--text-3)}
.mk-phone .mk-action{border-radius:.4em}

@container (max-width:460px){
  .mk-pos{grid-template-columns:minmax(0,1fr)}
  .mk-ticket{display:none}
  .mk-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr)}
  .mk-row .c3{display:none}
  .mk-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-report-body,.mk-detail-body,.mk-map{grid-template-columns:minmax(0,1fr)}
  .mk-mini,.mk-timeline{display:none}
  .mk-map-canvas{min-height:9em}
  .mk-stops{display:none}
  .mk-board{grid-template-columns:repeat(var(--cols,3),minmax(7.5em,1fr))}
}

/* ── About page ────────────────────────────────────────────────────────────── */
.about-title{max-width:20ch}
.about-offer,.about-rules,.team-grid,.client-grid{margin:0;padding:0;list-style:none}
.about-offer{grid-template-columns:repeat(4,minmax(0,1fr))}
.about-card{display:flex;flex-direction:column;gap:12px;padding:30px 28px 32px}
.about-card h3{font-size:1.2rem;font-weight:600;margin:0;line-height:1.25}
.about-card p{margin:0;color:var(--text-2);font-size:.97rem;flex:1}
.about-card .link-arrow{align-self:flex-start;margin-top:10px}
.about-rules-title{margin-bottom:44px}
.about-rules{grid-template-columns:repeat(2,minmax(0,1fr))}
.about-rule{padding:32px 34px 36px}
.rule-no{color:var(--text-3)}
.about-rule h3{font-size:1.32rem;font-weight:600;margin:14px 0 12px;max-width:24ch;line-height:1.2}
.about-rule p{margin:0;color:var(--text-2)}
.team-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.team-card{display:flex;flex-direction:column}
.team-photo{aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid rgb(var(--gold-rgb) / .16);
  background-color:rgb(var(--gold-rgb) / .03);
  background-image:linear-gradient(rgb(var(--gold-rgb) / .06) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--gold-rgb) / .06) 1px,transparent 1px);
  background-size:22px 22px}
.team-photo img{width:100%;height:100%;object-fit:cover;display:block}
.team-initials{font-family:var(--mono);font-size:clamp(2rem,4vw,3rem);font-weight:600;letter-spacing:.08em;color:var(--gold-ink)}
.team-body{padding:20px 22px 24px}
.team-name{font-size:1.04rem;font-weight:600;margin:0;letter-spacing:0;line-height:1.3}
.team-role{color:var(--gold-ink);margin-top:7px;font-size:.72rem;letter-spacing:.08em}
.team-note{color:var(--text-3);font-size:.9rem;margin:10px 0 0}
/* Logos are shown in white on the dark page so a wall of different brands reads as one
   strip; that needs a transparent background, which JPEG cannot have, so a JPEG logo
   is shown as it is. */
/* auto-fit: three clients share the row instead of filling half of a six-column grid. */
.client-grid{grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr))}
.client-cell{display:grid;min-height:112px}
.client-link{display:grid;transition:background-color .15s}
.client-link:hover{background:rgb(var(--gold-rgb) / .06)}
.client-mark{display:flex;align-items:center;justify-content:center;padding:20px 22px;text-align:center;min-width:0}
.client-mark img{display:block;max-width:100%;max-height:52px;width:auto;height:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.82;transition:opacity .15s}
.client-link:hover .client-mark img{opacity:1}
.client-mark img[src$=".jpg"]{filter:none;opacity:1;max-height:64px}
.client-name{font-family:var(--mono);font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);line-height:1.4;overflow-wrap:anywhere}
.client-link:hover .client-name{color:var(--gold-ink)}

/* ── Legal pages ───────────────────────────────────────────────────────────── */
.legal-page{padding-block:26px 96px}
.legal-page .crumbs{border-bottom-color:rgb(var(--gold-rgb) / .18)}
.legal-tabs{display:flex;flex-wrap:wrap;border-inline:1px solid rgb(var(--gold-rgb) / .22);border-bottom:1px solid rgb(var(--gold-rgb) / .22)}
.legal-tab{padding:16px 24px;border-inline-end:1px solid rgb(var(--gold-rgb) / .22);color:var(--text-2);
  font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;transition:background-color .15s,color .15s}
.legal-tab:hover{color:var(--gold-ink)}
.legal-tab[aria-current="page"]{background:var(--gold);color:var(--on-accent)}
.legal-body{display:grid;grid-template-columns:minmax(0,1fr) 280px;border-inline:1px solid rgb(var(--gold-rgb) / .22);border-bottom:1px solid rgb(var(--gold-rgb) / .22)}
.legal-doc{padding:48px 56px 64px;border-inline-end:1px solid rgb(var(--gold-rgb) / .22);min-width:0}
.legal-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;color:var(--text-3)}
.legal-ref{color:var(--gold-ink);border:1px solid rgb(var(--gold-rgb) / .4);padding:4px 9px}
.legal-title{font-size:clamp(2rem,3.8vw,3rem);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;line-height:1.1;margin:22px 0 20px;max-width:24ch}
.legal-intro{color:var(--text-2);font-size:1.12rem;margin:0 0 32px;max-width:64ch}
.legal-plain{border:1px solid rgb(var(--gold-rgb) / .3);background:var(--panel);padding:20px 24px;margin-bottom:44px;max-width:72ch}
.legal-plain .mono-label{color:var(--gold-ink);margin-bottom:10px}
.legal-plain p{margin:0;color:var(--text-2)}
.legal-section{margin-bottom:38px;scroll-margin-top:100px}
.legal-section h2{font-size:1.35rem;font-weight:600;letter-spacing:-.01em;line-height:1.3;margin:0 0 14px;text-transform:none}
.legal-section p{color:var(--text-2);font-size:1.02rem;line-height:1.75;margin:0 0 14px;max-width:68ch}
.legal-doc a{color:var(--gold-ink);text-decoration:underline;text-decoration-color:rgb(var(--gold-rgb) / .45);text-underline-offset:3px}
.legal-doc a:hover{text-decoration-color:var(--gold)}
/* A phone number split over two lines reads as two numbers, worse still in Arabic. */
a[href^="tel:"]{white-space:nowrap}
.legal-table{width:100%;max-width:80ch;border-collapse:collapse;margin:20px 0 8px;font-size:.94rem}
.legal-table thead th{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
  text-align:start;padding:10px 14px;border-bottom:1px solid rgb(var(--gold-rgb) / .3)}
.legal-table tbody :is(th,td){text-align:start;vertical-align:top;padding:13px 14px;border-bottom:1px solid var(--hair);color:var(--text-2);font-weight:400}
.legal-table code{font-family:var(--mono);font-size:.84rem;color:var(--text);white-space:nowrap}
.legal-ask{border:1px solid rgb(var(--gold-rgb) / .22);background:var(--panel);padding:26px 28px;margin-top:48px;max-width:72ch}
.legal-ask .mono-label{color:var(--text-3);margin-bottom:12px}
.legal-ask p{margin:0;color:var(--text-2)}
.legal-aside{padding:48px 0 60px;min-width:0}
.legal-aside-in{position:sticky;top:100px;padding:0 28px;display:flex;flex-direction:column;gap:28px}
.legal-toc>summary{list-style:none;color:var(--text-3);margin-bottom:14px;cursor:pointer}
.legal-toc>summary::-webkit-details-marker{display:none}
.legal-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:.92rem}
.legal-toc a{display:block;color:var(--text-2);line-height:1.4;padding-inline-start:12px;border-inline-start:2px solid rgb(var(--ink-rgb) / .12)}
.legal-toc a:hover{color:var(--gold-ink);border-color:var(--gold)}
.legal-also{border:1px solid rgb(var(--gold-rgb) / .22);padding:16px 18px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:.9rem}
.legal-also .mono-label{color:var(--text-3);margin-bottom:4px}
.legal-also a,.legal-print{color:var(--text-2);text-align:start}
.legal-also a:hover,.legal-print:hover{color:var(--gold-ink)}
/* Printing needs the script; without it the button would do nothing. */
html:not(.js) .legal-print{display:none}

/* ── Store: catalogue ──────────────────────────────────────────────────────── */
.store-hero{padding-block:44px 40px}
.store-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px 64px;align-items:end;margin-top:30px}
.store-title{font-size:clamp(2.2rem,5vw,4rem);margin:0;max-width:20ch}
.store-hero-grid .lead{margin:0;max-width:46ch;font-size:1.04rem}
.store-body{border-top:1px solid rgb(var(--gold-rgb) / .18)}
.store-layout{display:grid;grid-template-columns:270px minmax(0,1fr)}
.store-side{border-inline-end:1px solid rgb(var(--gold-rgb) / .18);padding-block:36px 60px;padding-inline:0 32px;min-width:0}
.store-side-title{color:var(--gold-ink);margin-bottom:16px}
.store-cats,.store-chips,.store-works{list-style:none;margin:0 0 36px;padding:0}
.store-cats{display:flex;flex-direction:column;gap:1px}
.store-cats a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;color:var(--text-2);font-weight:500;font-size:.93rem;line-height:1.3;transition:background-color .15s,color .15s}
.store-cats a:hover{color:var(--gold-ink)}
.store-cats a[aria-current="page"]{background:var(--gold);color:var(--on-accent)}
.store-n{font-family:var(--mono);font-size:.72rem;opacity:.7;font-variant-numeric:tabular-nums}
.store-chips{display:flex;flex-wrap:wrap;gap:6px}
.store-chips a{display:inline-block;font-family:var(--mono);font-size:.72rem;color:var(--text-2);border:1px solid rgb(var(--gold-rgb) / .2);padding:6px 10px}
.store-chips a:hover,.store-chips a[aria-current="true"]{border-color:var(--gold);color:var(--gold-ink)}
.store-works{display:flex;flex-direction:column;gap:9px}
.store-works a{display:flex;align-items:center;gap:9px;color:var(--text-2);font-size:.92rem}
.store-works a:hover{color:var(--gold-ink)}
.store-works .store-n{margin-inline-start:auto}
.store-tick{width:14px;height:14px;flex:none;border:1px solid rgb(var(--gold-rgb) / .5)}
.store-works a[aria-current="true"]{color:var(--text)}
.store-works a[aria-current="true"] .store-tick{background:var(--gold);border-color:var(--gold)}
.store-how{border:1px solid rgb(var(--gold-rgb) / .22);padding:18px 20px}
.store-how .mono-label{color:var(--gold-ink);margin-bottom:10px}
.store-how p{margin:0;color:var(--text-2);font-size:.88rem}
.store-main{padding-block:36px 80px;padding-inline:32px 0;min-width:0}
.store-added{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 20px;margin:0 0 20px;padding:14px 18px;
  border:1px solid rgb(var(--gold-rgb) / .4);background:rgb(var(--gold-rgb) / .06);color:var(--text)}
.store-added:focus{outline:none}
.store-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding-bottom:20px;border-bottom:1px solid rgb(var(--gold-rgb) / .18)}
.store-bar-label{color:var(--text-2);font-size:.78rem;letter-spacing:.1em}
.store-clear{margin-inline-start:12px;color:var(--gold-ink);border-bottom:1px solid rgb(var(--gold-rgb) / .4)}
.store-basket{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);border:1px solid rgb(var(--gold-rgb) / .35);padding:9px 13px}
.store-basket:hover{background:var(--gold);color:var(--on-accent)}
.store-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.store-empty{padding:56px 0 24px;max-width:52ch}
.store-empty h2{font-size:1.5rem;font-weight:600;margin:0 0 12px}
.store-empty p{color:var(--text-2);margin:0 0 24px}
.hw-name a{color:inherit}
.hw-name a:hover{color:var(--gold-ink)}
.hw-media{color:inherit}

/* ── Store: product ────────────────────────────────────────────────────────── */
.pd .store-added{margin:24px 0 0}
.pd-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;margin-top:44px;align-items:start}
.pd-media{border:1px solid rgb(var(--gold-rgb) / .22);background:var(--panel);padding:14px;aspect-ratio:4/3;display:grid;place-items:center}
.pd-media img{width:100%;height:100%;object-fit:contain;display:block}
.pd-glyph svg{width:120px;height:120px;color:rgb(var(--gold-rgb) / .5)}
.pd-kicker{color:var(--gold-ink);font-weight:600;font-size:.72rem;letter-spacing:.16em}
.pd-kicker a{color:inherit;border-bottom:1px solid rgb(var(--gold-rgb) / .4)}
.pd-title{font-size:clamp(2rem,4vw,3.2rem);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;line-height:1.05;margin:20px 0 18px}
.pd-lead{margin:0 0 22px;font-size:1.08rem}
.pd-highlights{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:.82rem;color:var(--text-2)}
.pd-highlights li::before{content:"\00B7  "}
.pd-buy{border:1px solid rgb(var(--gold-rgb) / .22);margin:0 0 30px}
.pd-price{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;border-bottom:1px solid rgb(var(--gold-rgb) / .16)}
.pd-price .mono-label{color:var(--text-3)}
.pd-price-value{font-family:var(--mono);font-weight:600;color:var(--gold-ink)}
.pd-qty{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:18px 22px}
.pd-qty label{color:var(--text-3)}
.pd-qty input{width:88px;font:600 1rem var(--mono);color:var(--text);background:var(--bg);border:1px solid rgb(var(--gold-rgb) / .3);padding:10px 12px;text-align:center}
.pd-qty .cta-btn{margin-inline-start:auto}
.pd-specs-title{color:var(--text-3);font-weight:400;margin:0 0 12px}
.pd-specs{margin:0;border:1px solid rgb(var(--gold-rgb) / .22)}
.pd-specs>div{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:8px 24px;padding:13px 22px;border-bottom:1px solid rgb(var(--gold-rgb) / .14);font-family:var(--mono);font-size:.82rem}
.pd-specs>div:last-child{border-bottom:none}
.pd-specs dt{color:var(--text-3);letter-spacing:.08em;text-transform:uppercase}
.pd-specs dd{margin:0;color:var(--text)}
.pd-specs .pd-spec-wide{grid-column:1/-1;color:var(--text-2)}
.pd-links{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:26px}
.pd-works{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.pd-works .mono-label{color:var(--text-3)}
.pd-related-title{margin:0 0 40px}

/* ── Store: quote basket ───────────────────────────────────────────────────── */
.quote-title{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.quote-page .lead{margin:10px 0 0;max-width:56ch;font-size:1.04rem}
.quote-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:44px;align-items:start;margin-top:40px}
.quote-lines{border:1px solid rgb(var(--gold-rgb) / .22);min-width:0}
.quote-table{width:100%;border-collapse:collapse}
.quote-table thead th{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
  text-align:start;padding:15px 20px;border-bottom:1px solid rgb(var(--gold-rgb) / .22)}
.quote-table tbody :is(th,td){text-align:start;vertical-align:middle;padding:16px 20px;border-bottom:1px solid rgb(var(--gold-rgb) / .14)}
.quote-table tbody th{font-weight:600;font-size:.98rem}
.quote-table tbody th a{color:var(--text)}
.quote-table tbody th a:hover{color:var(--gold-ink)}
.quote-cat{display:block;margin-top:5px;color:var(--text-3);font-weight:400;font-size:.62rem}
.quote-sku{font-family:var(--mono);font-size:.78rem;color:var(--text-2)}
.quote-x-cell{text-align:end;width:1%}
.quote-x{width:32px;height:32px;background:transparent;border:1px solid rgb(var(--ink-rgb) / .18);color:var(--text-3);cursor:pointer;font:600 1rem/1 var(--mono)}
.quote-x:hover{border-color:var(--gold);color:var(--gold-ink)}
.qty{display:inline-flex;align-items:stretch;border:1px solid rgb(var(--gold-rgb) / .28);margin:0}
.qty-default{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0;border:0}
.qty-btn{width:32px;min-height:34px;background:transparent;border:none;color:var(--gold-ink);cursor:pointer;font:600 1rem/1 var(--mono)}
.qty-btn:hover:not(:disabled){background:rgb(var(--gold-rgb) / .12)}
.qty-btn:disabled{color:var(--text-3);opacity:.45;cursor:default}
.qty-input{width:52px;text-align:center;font:600 .86rem var(--mono);color:var(--text);background:transparent;border:none;
  border-inline:1px solid rgb(var(--gold-rgb) / .28);-moz-appearance:textfield;appearance:textfield}
.qty-input::-webkit-inner-spin-button,.qty-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.quote-totals{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;padding:18px 20px;font-family:var(--mono);font-size:.8rem}
.quote-totals .mono-label{color:var(--text-3)}
.quote-total-note{color:var(--gold-ink)}
.quote-empty{padding:44px 28px;text-align:center}
.quote-empty h2{font-size:1.3rem;font-weight:600;margin:0 0 10px}
.quote-empty p{color:var(--text-2);margin:0 auto;max-width:44ch}
.quote-empty-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}
.quote-details{border:1px solid rgb(var(--gold-rgb) / .22);background:var(--panel);padding:28px 30px}
.quote-form .enq-field+.enq-field{margin-top:12px}
.quote-form .enq-hint{margin:10px 0 14px}

/* ── Support: hub ──────────────────────────────────────────────────────────── */
.support-hero{padding-block:44px 64px}
.support-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px 64px;align-items:end;margin-top:44px}
.support-title{font-size:clamp(2.2rem,5vw,4.2rem);margin:0;max-width:18ch}
.support-lead{margin:22px 0 0;max-width:52ch}
.search-box{display:flex;align-items:center;gap:12px;margin-top:28px;max-width:620px;padding-block:6px;padding-inline:18px 6px;
  border:1px solid rgb(var(--gold-rgb) / .3);background:rgb(var(--scrim-rgb) / .6);transition:border-color .15s}
.search-box:focus-within{border-color:var(--gold);outline:2px solid rgb(var(--gold-rgb) / .35);outline-offset:2px}
.search-box-icon{width:19px;height:19px;flex:none;fill:none;stroke:var(--text-3);stroke-width:1.8;stroke-linecap:round}
.search-box input{flex:1;min-width:0;padding:10px 0;border:none;background:transparent;color:var(--text);font:400 1rem var(--font)}
.search-box input:focus{outline:none}
.search-box input::placeholder{color:var(--text-3);opacity:1}
.search-box-go{flex:none;padding:11px 16px;border:none;background:var(--gold);color:var(--on-accent);cursor:pointer;
  font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.search-box-go:hover{background:var(--gold-bright)}
.reach{border:1px solid rgb(var(--gold-rgb) / .22);background:rgb(var(--scrim-rgb) / .55);padding:22px 26px 20px}
.reach-title{display:flex;align-items:center;gap:11px;margin:0 0 4px;color:var(--gold-ink);font-size:.7rem;font-weight:600;line-height:1.4;letter-spacing:.14em}
.reach .direct-lines a{padding:12px 0}
.reach-note{margin:12px 0 0;color:var(--text-3);font-size:.88rem}
.support-routes-bar{padding-bottom:88px}
.support-routes{grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none}
.support-routes>li{display:flex}
.support-route{flex:1;display:flex;flex-direction:column;gap:10px;padding:28px 26px 30px;box-shadow:inherit;transition:background-color .15s}
.support-route:hover{background:var(--panel-2);color:inherit}
.support-route:hover .support-route-title{color:var(--gold-ink)}
.support-route-no{color:var(--text-3)}
.support-route-title{font-size:1.2rem;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.support-route-copy{color:var(--text-2);font-size:.94rem}
.support-route-go{margin-top:auto;padding-top:12px;color:var(--gold-ink);font-size:.72rem}
.support-sec{scroll-margin-top:76px}
.support-qa .qa-item{scroll-margin-top:100px}
.kb-head-side{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.kb-empty{margin:0;max-width:62ch;color:var(--text-2);font-size:1.02rem}
.kb-empty a{color:var(--gold-ink)}
.kb-topics{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0;list-style:none}
.kb-topics a{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid rgb(var(--gold-rgb) / .22);color:var(--text-2);font-size:.92rem;font-weight:500}
.kb-topics a:hover{border-color:var(--gold);color:var(--gold-ink)}
.kb-topics a[aria-current]{background:var(--gold);border-color:var(--gold);color:var(--on-accent)}
.kb-n{font-family:var(--mono);font-size:.72rem;font-weight:400;opacity:.75;font-variant-numeric:tabular-nums}
.kb-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none}
.kb-grid>li{display:flex}
/* The card repeats its cell's frame so the hover background does not paint over it. */
.kb-card{flex:1;display:flex;flex-direction:column;gap:10px;padding:26px 28px 30px;box-shadow:inherit;transition:background-color .15s}
.kb-card:hover{background:var(--panel-2);color:inherit}
.kb-card:hover .kb-card-title{color:var(--gold-ink)}
.kb-card-meta{display:flex;flex-wrap:wrap;gap:4px 8px;color:var(--text-3);font-size:.66rem}
.kb-card-title{font-size:1.14rem;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.kb-card-summary{color:var(--text-2);font-size:.94rem}
.files{border:1px solid rgb(var(--gold-rgb) / .22)}
.files-table{width:100%;border-collapse:collapse}
.files-table thead th{padding:14px 20px;border-bottom:1px solid rgb(var(--gold-rgb) / .22);background:var(--panel-2);text-align:start;
  font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.files-table thead th:first-child{width:46%}
.files-table tbody :is(th,td){padding:16px 20px;border-bottom:1px solid rgb(var(--gold-rgb) / .12);text-align:start;vertical-align:middle;font-weight:400}
.files-table tbody tr:last-child>*{border-bottom:none}
.files-name{display:block;font-weight:600;font-size:.98rem}
.files-note{display:block;margin-top:3px;color:var(--text-3);font-size:.86rem}
.files-mono{font-family:var(--mono);font-size:.84rem;color:var(--text-2);white-space:nowrap}
.files-mono.is-accent{color:var(--gold-ink)}
.files-mono.is-blank{color:var(--text-3)}
.files-table .files-action{text-align:end}
.files-btn{display:inline-block;padding:8px 13px;border:1px solid rgb(var(--gold-rgb) / .4);color:var(--gold-ink);white-space:nowrap;
  font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.files-btn:hover{background:var(--gold);color:var(--on-accent)}
.support-qa .qa-tag{flex:none;width:118px;color:var(--text-3);font-size:.64rem;line-height:1.45}
.support-qa .qa-item p{padding-inline-start:166px}
.support-qa .qa-item p a{color:var(--gold-ink);text-decoration:underline;text-decoration-color:rgb(var(--gold-rgb) / .45);text-underline-offset:3px}
.ticket-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px 60px;align-items:start}
.ticket-title-h{max-width:18ch}
.ticket-lead{margin:22px 0 30px;max-width:46ch}
.sla{width:100%;border-collapse:collapse;border:1px solid rgb(var(--gold-rgb) / .22)}
.sla thead th{padding:12px 18px;border-bottom:1px solid rgb(var(--gold-rgb) / .22);background:var(--panel-2);text-align:start;
  font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.sla tbody :is(th,td){padding:14px 18px;border-bottom:1px solid rgb(var(--gold-rgb) / .14);text-align:start;vertical-align:top}
.sla tbody tr:last-child>*{border-bottom:none}
.sla tbody th{font-size:.96rem;font-weight:600;white-space:nowrap}
.sla tbody td{color:var(--text-2);font-size:.9rem}
.sla tbody td.sla-target{font-family:var(--mono);font-size:.8rem;color:var(--gold-ink);white-space:nowrap}
.sla tr.is-critical th{color:var(--error-text)}
.enq-span{grid-column:1/-1}
.ticket-photos{margin:10px 0 0;color:var(--text-3);font-size:.84rem}
.ticket-critical{font-family:var(--mono);font-size:.74rem}
.ticket-critical a{color:var(--gold-ink)}
.enq-chip.is-critical input:checked+span{border-color:var(--error);background:rgba(192,57,43,.2);color:var(--error-text)}

/* ── Support: knowledge base ───────────────────────────────────────────────── */
.kb-hero{padding-block:44px 48px}
.kb-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px 64px;align-items:end;margin-top:40px}
.kb-page-title{font-size:clamp(2.2rem,5vw,4rem);margin:0;max-width:18ch}
.kb-hero-grid .lead{margin:18px 0 0;max-width:52ch;font-size:1.06rem}
.kb-hero-grid .search-box{margin-top:0}
.kb-index{padding-block:48px 96px}
.kb-results{margin:0 0 22px;color:var(--text-2);font-family:var(--mono);font-size:.8rem}
.kb-none{padding:12px 0 8px;max-width:58ch}
.kb-none p{margin:0 0 18px;color:var(--text-2);font-size:1.02rem}
.kb-none a:not(.link-arrow){color:var(--gold-ink)}
.kb-group+.kb-group{margin-top:44px}
.kb-group-title{display:flex;align-items:baseline;gap:12px;margin:0 0 18px;font-size:1.3rem;font-weight:600;line-height:1.3;letter-spacing:-.01em;text-transform:none}
.kb-stuck{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px 32px;margin-top:56px;padding:28px 32px;
  border:1px solid rgb(var(--gold-rgb) / .22);background:var(--panel)}
.kb-stuck-title{margin:0 0 6px;font-size:1.3rem;font-weight:600;line-height:1.3;letter-spacing:-.01em;text-transform:none}
.kb-stuck p{margin:0;max-width:52ch;color:var(--text-2)}
.kb-stuck-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ── Support: a guide ──────────────────────────────────────────────────────── */
/* Three columns on a wide screen, the guide first in the page's own order: the other
   guides of the topic on one side, the contents and "Applies to" on the other. */
.kb-page{padding-block:26px 40px}
.kb-page .crumbs{border-bottom-color:rgb(var(--gold-rgb) / .18)}
.kb-layout{display:grid;grid-template-columns:240px minmax(0,1fr) 240px;grid-template-areas:"side main aside"}
.kb-article{grid-area:main;min-width:0;padding:40px 48px 72px}
.kb-aside{grid-area:aside;min-width:0;padding-block:40px 60px;padding-inline-start:28px;border-inline-start:1px solid rgb(var(--gold-rgb) / .18)}
.kb-aside-in{position:sticky;top:100px;display:flex;flex-direction:column;gap:26px}
.kb-side{grid-area:side;min-width:0;padding-block:36px 60px;padding-inline-end:28px;border-inline-end:1px solid rgb(var(--gold-rgb) / .18)}
.kb-side-title{margin-bottom:14px;color:var(--gold-ink)}
.kb-siblings{display:flex;flex-direction:column;gap:1px;margin:0 0 32px;padding:0;list-style:none}
.kb-siblings a{display:block;padding:9px 12px;color:var(--text-2);font-size:.93rem;line-height:1.35}
.kb-siblings a:hover{color:var(--gold-ink)}
.kb-siblings a[aria-current]{background:var(--gold);color:var(--on-accent);font-weight:600}
.kb-other{display:flex;flex-direction:column;gap:9px;margin:0 0 28px;padding:0;list-style:none;font-size:.93rem}
.kb-other a{color:var(--text-2)}
.kb-other a:hover{color:var(--gold-ink)}
.kb-fallback{margin:0 0 22px;padding:10px 14px;border:1px dashed rgb(var(--gold-rgb) / .4);color:var(--text-2);font-size:.9rem}
.kb-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;color:var(--text-3)}
.kb-meta a{color:var(--text-2);border-bottom:1px solid rgb(var(--gold-rgb) / .4)}
.kb-meta a:hover{color:var(--gold-ink)}
.kb-title{max-width:26ch;margin:22px 0 20px;font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.1;letter-spacing:-.03em;text-transform:none}
.kb-summary{max-width:64ch;margin:0 0 34px;color:var(--text-2);font-size:1.14rem}
.kb-note{max-width:72ch;margin-bottom:38px;padding:20px 24px;border:1px solid rgb(var(--gold-rgb) / .3);background:var(--panel-2)}
.kb-note .mono-label{margin-bottom:10px;color:var(--gold-ink)}
.kb-note p{margin:0;color:var(--text-2);font-size:.98rem}
.kb-note a{color:var(--gold-ink)}
.kb-body{max-width:68ch;counter-reset:kb-step}
.kb-body h2{margin:40px 0 14px;font-size:1.45rem;font-weight:600;line-height:1.3;letter-spacing:-.01em;text-transform:none;scroll-margin-top:100px}
.kb-body h2:first-child{margin-top:0}
.kb-body h2::before{counter-increment:kb-step;content:counter(kb-step) ". "}
.kb-body h3{margin:28px 0 10px;font-size:1.12rem;font-weight:600;text-transform:none}
.kb-body :is(p,li){color:var(--text-2);font-size:1.02rem;line-height:1.75}
.kb-body p{margin:0 0 16px}
.kb-body :is(ol,ul){display:flex;flex-direction:column;gap:10px;margin:0 0 22px;padding-inline-start:24px}
.kb-body strong{color:var(--text);font-weight:600}
.kb-body a{color:var(--gold-ink);text-decoration:underline;text-decoration-color:rgb(var(--gold-rgb) / .45);text-underline-offset:3px}
.kb-body a:hover{text-decoration-color:var(--gold)}
.kb-body code{font-family:var(--mono);font-size:.9em;color:var(--gold-ink)}
.kb-body pre{overflow-x:auto;margin:0 0 20px;padding:14px 16px;border:1px solid rgb(var(--gold-rgb) / .18);background:var(--panel-2)}
.kb-body img{max-width:100%;height:auto;border:1px solid rgb(var(--gold-rgb) / .22);background:var(--panel)}
.kb-body blockquote{margin:0 0 20px;padding:12px 18px;border-inline-start:3px solid var(--gold);background:var(--panel-2)}
.kb-body hr{margin:32px 0;border:none;border-top:1px solid var(--hair)}
.kb-stuck--article{margin-top:48px}
.kb-related{margin-top:44px;padding-top:28px;border-top:1px solid rgb(var(--gold-rgb) / .18)}
.kb-related-title{margin:0 0 18px;color:var(--gold-ink);font-weight:600}
.kb-grid--related{grid-template-columns:repeat(2,minmax(0,1fr))}
.kb-applies{padding:16px 18px;border:1px solid rgb(var(--gold-rgb) / .22)}
.kb-applies .mono-label{margin-bottom:8px;color:var(--text-3)}
.kb-applies p{margin:0;color:var(--text-2);font-size:.9rem}

/* ── Careers ───────────────────────────────────────────────────────────────── */
.careers-title{max-width:20ch}
.page-hero-body .careers-actions{margin-top:28px;justify-content:flex-start}
.careers-no{color:var(--text-3)}
.careers-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 32px;margin:0;padding:0;list-style:none}
.careers-steps li{padding-top:18px;border-top:1px solid rgb(var(--gold-rgb) / .3)}
.careers-steps h3{margin:10px 0 8px;font-size:1.2rem;font-weight:600;line-height:1.3;letter-spacing:-.01em;text-transform:none}
.careers-steps p{max-width:44ch;margin:0;color:var(--text-2);font-size:.97rem}
.apply-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px 60px;align-items:start}
.careers-lead{max-width:46ch;margin:22px 0}
.careers-email{margin:0;color:var(--text-2);font-size:.95rem}
.careers-email a{color:var(--gold-ink)}
.careers-cv input[type="file"]{padding:10px 12px;cursor:pointer}
.careers-cv input[type="file"]::file-selector-button{margin-inline-end:12px;padding:8px 12px;border:1px solid rgb(var(--gold-rgb) / .4);background:transparent;
  color:var(--gold-ink);font:600 .72rem var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.careers-cv input[type="file"]::file-selector-button:hover{background:var(--gold);color:var(--on-accent)}
.careers-cv .careers-cv-hint{margin:0}

/* ── Blog ──────────────────────────────────────────────────────────────────── */
.blog-hero{padding-block:44px 48px}
.blog-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px 64px;align-items:end;margin-top:40px}
.blog-title{font-size:clamp(2.2rem,5vw,4.2rem);margin:0;max-width:18ch}
.blog-hero-grid .lead{margin:0;max-width:48ch;font-size:1.08rem}
.blog-body{padding-block:40px 96px;border-top:1px solid rgb(var(--gold-rgb) / .18)}
.blog-cats{margin-bottom:28px}
/* The featured post: the design's wide card, its text beside an optional image. */
.blog-featured{display:grid;grid-template-columns:minmax(0,1fr);border:1px solid rgb(var(--gold-rgb) / .22);transition:background-color .18s}
.blog-featured.has-image{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.blog-featured:hover{background:var(--panel-2);color:inherit}
.blog-featured:hover .blog-featured-title{color:var(--gold-ink)}
.blog-featured-text{display:flex;flex-direction:column;gap:16px;padding:40px 44px 44px}
.blog-featured-kicker{color:var(--gold-ink);font-weight:600}
.blog-featured-title{max-width:26ch;font-size:clamp(1.8rem,3.2vw,2.7rem);font-weight:700;line-height:1.1;letter-spacing:-.03em;text-transform:uppercase}
.blog-featured-excerpt{max-width:60ch;color:var(--text-2);font-size:1.06rem}
.blog-featured-media{min-height:320px;border-inline-start:1px solid rgb(var(--gold-rgb) / .22);background:var(--panel)}
.blog-featured-media img{display:block;width:100%;height:100%;object-fit:cover}
.blog-read{color:var(--gold-ink)}
.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none}
.blog-featured+.blog-grid{margin-top:-1px}
.blog-grid>li{display:flex}
/* The card repeats its cell's frame so the hover background does not paint over it. */
.blog-card{flex:1;display:flex;flex-direction:column;gap:12px;min-height:260px;padding:28px 28px 30px;box-shadow:inherit;transition:background-color .15s}
.blog-card:hover{background:var(--panel-2);color:inherit}
.blog-card:hover .blog-card-title{color:var(--gold-ink)}
.blog-card-cat{color:var(--gold-ink);font-weight:600}
.blog-card-title{font-size:1.22rem;font-weight:600;line-height:1.3;letter-spacing:-.02em}
.blog-card-excerpt{color:var(--text-2);font-size:.96rem}
.blog-card-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;margin-top:auto;padding-top:14px;border-top:1px dashed rgb(var(--ink-rgb) / .12);color:var(--text-3)}
.blog-grid--related .blog-card{min-height:0}
.blog-page{padding-block:26px 40px}
.blog-page .crumbs{border-bottom-color:rgb(var(--gold-rgb) / .18)}
.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px}
.blog-article{min-width:0;padding-block:48px 80px;padding-inline-end:60px;border-inline-end:1px solid rgb(var(--gold-rgb) / .18)}
.blog-aside{min-width:0;padding-block:48px 60px;padding-inline-start:30px}
/* Taller than the window (a long contents list), it scrolls on its own, ending above the
   WhatsApp button; the 4px keep focus rings clear of its edges. */
.blog-aside-in{position:sticky;top:100px;max-height:calc(100vh - 200px);overflow-y:auto;scrollbar-width:thin;padding:4px;margin:-4px}
.blog-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;color:var(--text-3)}
.blog-meta a:not(.legal-ref){color:var(--text-2);border-bottom:1px solid rgb(var(--gold-rgb) / .4)}
.blog-meta a:not(.legal-ref):hover{color:var(--gold-ink)}
.blog-meta .legal-ref:hover{background:var(--gold);color:var(--on-accent)}
.blog-post-title{max-width:26ch;margin:24px 0 22px;font-size:clamp(2.1rem,4.2vw,3.4rem);line-height:1.08;letter-spacing:-.03em}
.blog-standfirst{max-width:60ch;margin:0 0 34px;color:var(--text);font-size:1.24rem;line-height:1.6}
.blog-byline{display:flex;align-items:center;flex-wrap:wrap;gap:14px 16px;margin-bottom:36px;padding-block:16px;border-block:1px solid rgb(var(--gold-rgb) / .18)}
.blog-mark{width:44px;height:44px;flex:none;object-fit:contain}   /* the company emblem */
.blog-author{display:flex;flex-direction:column;gap:3px}
.blog-author-name{font-weight:600;font-size:.98rem}
.blog-author-note{color:var(--text-3)}
.blog-share{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-inline-start:auto}
.blog-share .mono-label{margin-inline-end:4px;color:var(--text-3)}
.blog-share a,.blog-share .linkbtn{padding:8px 12px;border:1px solid rgb(var(--ink-rgb) / .15);color:var(--text-2);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.blog-share a:hover,.blog-share .linkbtn:hover{border-color:var(--gold);color:var(--gold-ink)}
/* Printing needs the script; without it the button would do nothing. */
html:not(.js) .blog-print{display:none}
.blog-cover{margin:0 0 40px;padding:14px;border:1px solid rgb(var(--gold-rgb) / .22);background:var(--panel)}
.blog-cover img{display:block;width:100%;height:auto}
.post-body{max-width:68ch}
.post-body h2{margin:44px 0 16px;font-size:1.5rem;font-weight:600;line-height:1.3;letter-spacing:-.01em;text-transform:none;scroll-margin-top:100px}
.post-body h2:first-child{margin-top:0}
.post-body h3{margin:30px 0 12px;font-size:1.15rem;font-weight:600;text-transform:none}
.post-body :is(p,li){color:var(--text-2);font-size:1.06rem;line-height:1.75}
.post-body p{margin:0 0 18px}
.post-body :is(ol,ul){display:flex;flex-direction:column;gap:10px;margin:0 0 24px;padding-inline-start:24px}
.post-body strong{color:var(--text);font-weight:600}
.post-body a{color:var(--gold-ink);text-decoration:underline;text-decoration-color:rgb(var(--gold-rgb) / .45);text-underline-offset:3px}
.post-body a:hover{text-decoration-color:var(--gold)}
.post-body blockquote{max-width:60ch;margin:0 0 34px;padding-block:6px;padding-inline:24px 0;border-inline-start:2px solid var(--gold)}
.post-body blockquote p{margin:0;color:var(--text);font-size:1.18rem}
.post-body img{max-width:100%;height:auto;border:1px solid rgb(var(--gold-rgb) / .22)}
.post-body code{font-family:var(--mono);font-size:.9em;color:var(--gold-ink)}
.blog-closing{margin-top:48px}

/* ── Sitemap ───────────────────────────────────────────────────────────────── */
.sitemap-hero{padding-block:44px 48px}
.sitemap-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-top:40px}
.sitemap-title{font-size:clamp(2.2rem,5vw,4rem);margin:0}
.sitemap-hero-grid .lead{margin:0;max-width:52ch;font-size:1.06rem}
.sitemap-xml{margin:14px 0 0;color:var(--text-3)}
.sitemap-xml a{color:var(--gold-ink);border-bottom:1px solid rgb(var(--gold-rgb) / .4);font-family:var(--mono);text-transform:none;letter-spacing:0}
.sitemap-body{padding-block:48px 96px}
.sitemap-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none}
.sitemap-sec{padding:28px 30px 32px}
.sitemap-sec-title{margin:0 0 16px;color:var(--gold-ink);font-size:.7rem;font-weight:600;line-height:1.4}
.sitemap-links{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.sitemap-links a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;color:var(--text-2);font-size:.96rem;line-height:1.4}
.sitemap-links a:hover{color:var(--gold-ink)}
.sitemap-langs{flex:none;color:var(--text-3);font-family:var(--mono);font-size:.64rem;letter-spacing:.08em}
.sitemap-note{max-width:90ch;margin:16px 0 0;color:var(--text-3);font-family:var(--mono);font-size:.72rem}

/* ── Error pages (404, 500) ────────────────────────────────────────────────── */
.err-hero{position:relative;padding-block:100px 120px;overflow:hidden}
.err-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgb(var(--gold-rgb) / .06) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--gold-rgb) / .06) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(110% 80% at 50% 20%,#000,transparent 80%);mask-image:radial-gradient(110% 80% at 50% 20%,#000,transparent 80%)}
.err-hero.is-fault::before{display:none}
.err-hero>.wrap{position:relative}
.err-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px 64px;align-items:start}
.err-kicker{margin:0;font-size:.74rem;letter-spacing:.2em}
.is-fault .err-kicker{color:var(--error-text)}
.err-dot{width:8px;height:8px;border-radius:50%;background:var(--error);flex:none;animation:epulse 2.6s infinite}
@keyframes epulse{0%{box-shadow:0 0 0 0 rgba(192,57,43,.5)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.err-title{font-size:clamp(2.6rem,6.4vw,5.6rem);margin:26px 0 24px;max-width:18ch}
.err-lead{margin:0 0 34px;max-width:50ch;font-size:1.16rem}
.is-fault .err-lead{margin-bottom:30px;max-width:52ch}
.err-main .search-box{margin:0 0 26px;max-width:560px}
.err-actions{margin-top:0}
.err-panel{border:1px solid rgb(var(--gold-rgb) / .22)}
.err-panel-title{margin:0;padding:20px 24px;border-bottom:1px solid rgb(var(--gold-rgb) / .22);color:var(--gold-ink);font-size:.7rem;font-weight:600;letter-spacing:.14em;line-height:1.4}
.err-links{margin:0;padding:0;list-style:none}
.err-links a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-bottom:1px solid rgb(var(--gold-rgb) / .14);transition:background-color .15s}
.err-links a:hover{background:var(--panel-2)}
.err-links a:hover .err-link-label{color:var(--gold-ink)}
.err-link-label{font-weight:600;font-size:.98rem}
.err-link-section{flex:none;font-family:var(--mono);font-size:.72rem;color:var(--text-3)}
.err-panel-foot{display:block;padding:18px 24px;font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink)}
.err-panel-foot:hover{color:var(--gold-ink-hover)}
.err-ref{max-width:520px;margin-bottom:30px;padding:20px 24px;border:1px solid rgb(var(--gold-rgb) / .22)}
.err-ref-label{margin:0 0 10px;color:var(--text-3);letter-spacing:.14em}
.err-ref-value{margin:0;font-family:var(--mono);font-size:1.1rem;color:var(--gold-ink);overflow-wrap:anywhere}
.err-ref-note{margin:12px 0 0;color:var(--text-2);font-size:.94rem}

/* ── Site search (/search) ─────────────────────────────────────────────────── */
.search-hero{padding-block:44px 52px}
.search-title{font-size:clamp(2.2rem,5vw,4rem);margin:40px 0 0}
.search-hero .search-box{max-width:720px}
.search-body{padding-block:40px 96px}
.search-count{margin:0 0 18px;color:var(--gold-ink);font-size:.72rem;font-weight:600;line-height:1.5}
.search-note{max-width:70ch;margin:0 0 24px;color:var(--text-2)}
.search-none{max-width:32ch;margin:0 0 14px;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.3;letter-spacing:-.01em;text-transform:none;overflow-wrap:anywhere}
.search-none-actions{margin-top:28px}
.search-hits{max-width:880px;margin:0;padding:0;list-style:none;border-top:1px solid var(--hair)}
.search-hit{padding:22px 0 24px;border-bottom:1px solid var(--hair)}
.search-hit-kind{margin:0 0 8px;color:var(--text-3)}
.search-hit-title{margin:0;font-size:1.22rem;line-height:1.35;letter-spacing:-.005em}
.search-hit-title a:hover{color:var(--gold-ink)}
.search-hit-title mark{background:none;color:var(--gold-ink)}
.search-hit-text{max-width:78ch;margin:10px 0 0;color:var(--text-2);font-size:.98rem;line-height:1.65;overflow-wrap:anywhere}
.search-hit-text mark{padding-inline:.08em;background:rgb(var(--gold-rgb) / .16);color:var(--text)}

/* ── Newsletter (ADR-022): the band at the foot of the blog, the box beside a post ── */
.nl-band{padding-block:80px 88px;border-top:1px solid rgb(var(--gold-rgb) / .18);background:var(--panel)}
.nl-band-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 60px;align-items:center}
.nl-kicker{margin:0;color:var(--gold-ink);font-weight:600}
.nl-title{margin:16px 0 14px;max-width:20ch;font-size:clamp(1.8rem,3.2vw,2.6rem)}
.nl-lead{margin:0;max-width:44ch;color:var(--text-2)}
.nl-form{display:flex;flex-direction:column;gap:10px;min-width:0}
.nl-row{display:flex;flex-wrap:wrap;gap:10px}
.nl-row input{flex:1;min-width:min(240px,100%);padding:15px 16px;border:1px solid rgb(var(--gold-rgb) / .22);border-radius:0;background:var(--panel-2);color:var(--text);font:400 .98rem var(--font)}
.nl-row input:focus{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold)}
.nl-row input::placeholder{color:var(--text-3);opacity:1}
.nl-row .cta-btn{flex:none;padding:16px 24px}
.nl-note{margin:0;color:var(--text-3);font-size:.85rem;line-height:1.5}
.nl-note a{color:var(--gold-ink);border-bottom:1px solid rgb(var(--gold-rgb) / .4)}
.nl-error{margin:0;color:var(--error-text);font-size:.9rem}
.nl-box{margin-top:28px;padding:18px 20px;border:1px solid rgb(var(--gold-rgb) / .22)}
.nl-box-title{margin:0 0 10px;color:var(--gold-ink);font-size:.66rem;font-weight:600;line-height:1.4}
.nl-box-lead{margin:0 0 12px;color:var(--text-2);font-size:.9rem;line-height:1.5}
.nl-box .nl-row{flex-direction:column;gap:8px}
.nl-box .nl-row input{min-width:0;padding:11px 12px;font-size:.9rem}
.nl-box .nl-row .cta-btn{width:100%;padding:12px}

/* ── Arabic ────────────────────────────────────────────────────────────────── */
/* Plex Mono has no Arabic glyphs; naming Plex Sans Arabic next means Arabic words in a
   monospace label fall back to the site's Arabic face instead of a system font. */
html[dir="rtl"]{--mono:"IBM Plex Mono","IBM Plex Sans Arabic",ui-monospace,"Cascadia Mono","Consolas",monospace}
html[dir="rtl"] :is(.fig,.mono-label,.hero-rule,.cta-btn,.link-arrow,.an-kicker,.facts dt,.kv dt,.scene-tab,.stack-role,.scene-metric span,
  .console-cat,.ticket-title,.ticket-action,.integ-title,.layer-step,.layer-name,.badges>li,.hw-cat,.hw-add,.foot-col-title,.foot-tagline,.foot-contact,.foot-bottom,
  .crumbs ol,.page-kicker,.prod-kicker,.prod-facts dt,.filter-btn,.filter-count,.prod-foot,.prod-open,.compare thead th,.compare-legend,.integ-status,
  .spec-table>div,.spec-table dt,.plan-price,.plan-cta,.demo-points,.enq-field label,.shot-note,
  .enq-legend,.enq-chip span,.enq-promise,.route-kicker,.contact-code,.aside-title,.dl-value,
  .sol-aside-title,.ind-code,.ind-note,.combo-codes,.problem-no,.problem-fix .mono-label,.flow-tab,.flow-step,.flow-node,
  .flow-note .mono-label,.stack-code,.stack-name .mono-label,.ind-pains>.mono-label,.ind-stack>.mono-label,
  .team-role,.client-name,.team-initials,.legal-tab,.legal-table thead th,
  .store-chips a,.store-basket,.pd-price-value,.pd-specs dt,.quote-table thead th,.pd-highlights,
  .search-box-go,.reach-title,.support-route-go,.kb-card-meta,.files-table thead th,.files-btn,.support-qa .qa-tag,
  .sla thead th,.ticket-critical,.kb-results,.kb-side-title,.kb-related-title,.kb-meta,.kb-note .mono-label,.kb-applies .mono-label,
  .blog-card-cat,.blog-card-foot,.blog-featured-kicker,.blog-meta,.blog-author-note,.blog-share a,.blog-share .linkbtn){
  font-family:var(--font-ar);letter-spacing:0;text-transform:none}
html[dir="rtl"] .fig{font-size:.86rem;font-weight:700}
html[dir="rtl"] .hero-rule{font-size:.86rem}
html[dir="rtl"] .cta-btn{font-size:.95rem}
html[dir="rtl"] .sec-title{text-transform:none;letter-spacing:0;line-height:1.3}
html[dir="rtl"] :is(.atlas-spec h3,.scene-info h3){text-transform:none;line-height:1.35}
html[dir="rtl"] :is(.page-title,.prod-title,.plan h3,.thanks h1){text-transform:none;letter-spacing:0;line-height:1.25}
html[dir="rtl"] :is(.crumbs ol,.page-kicker,.prod-kicker){font-size:.86rem}
html[dir="rtl"] :is(.filter-btn,.prod-foot,.integ-status,.plan-cta){font-size:.9rem}
html[dir="rtl"] .compare thead th{font-size:.8rem}
html[dir="rtl"] .spec-table>div{font-size:.92rem}
html[dir="rtl"] .prod-facts dt{font-size:.8rem}
html[dir="rtl"] .enq-field label{font-size:.85rem}
html[dir="rtl"] :is(.enq-legend,.enq-chip span){font-size:.85rem}
html[dir="rtl"] :is(.route-kicker,.enq-promise){font-size:.8rem}
html[dir="rtl"] .contact-title{text-transform:none;letter-spacing:0;line-height:1.35}
html[dir="rtl"] .ind-name{text-transform:none;letter-spacing:0;line-height:1.3}
html[dir="rtl"] :is(.team-role,.client-name){font-size:.86rem}
html[dir="rtl"] .about-rule h3{line-height:1.4}
html[dir="rtl"] .legal-title{text-transform:none;letter-spacing:0;line-height:1.3}
html[dir="rtl"] .legal-tab{font-size:.9rem}
html[dir="rtl"] .legal-meta{font-size:.82rem}
html[dir="rtl"] .legal-section p{line-height:1.9}
html[dir="rtl"] :is(.store-title,.pd-title,.quote-title){text-transform:none;letter-spacing:0;line-height:1.25}
html[dir="rtl"] :is(.store-basket,.store-chips a,.store-bar-label,.pd-kicker,.pd-specs>div,.quote-table thead th,.quote-cat){font-size:.86rem}
html[dir="rtl"] .pd-highlights{font-size:.95rem}
html[dir="rtl"] :is(.quote-totals,.quote-total-note){font-family:var(--font-ar);letter-spacing:0}
html[dir="rtl"] .enq-title{font-size:.86rem}
html[dir="rtl"] :is(.legal-plain,.legal-ask,.legal-also) .mono-label,html[dir="rtl"] .legal-toc>summary,html[dir="rtl"] .legal-table thead th{font-size:.82rem}
html[dir="rtl"] :is(.flow-tab,.flow-node){font-size:.9rem}
html[dir="rtl"] :is(.flow-step,.problem-no,.stack-name .mono-label,.ind-note){font-size:.8rem}
html[dir="rtl"] .dl-value[dir="ltr"]{font-family:var(--mono)}
html[dir="rtl"] .qa-item p{padding-inline-start:28px}
html[dir="rtl"] .kv>div{font-family:var(--font-ar);font-size:.9rem}
html[dir="rtl"] .scene-tab{font-size:.92rem}
html[dir="rtl"] :is(.search-box-go,.files-btn){font-size:.9rem}
html[dir="rtl"] :is(.reach-title,.support-route-go,.kb-side-title,.kb-related-title,.kb-note .mono-label,.kb-applies .mono-label){font-size:.88rem}
html[dir="rtl"] :is(.kb-card-meta,.support-qa .qa-tag,.files-table thead th,.sla thead th,.kb-meta){font-size:.82rem}
html[dir="rtl"] :is(.ticket-critical,.kb-results){font-size:.88rem}
html[dir="rtl"] .sla tbody td.sla-target{font-family:var(--font-ar);font-size:.9rem}
html[dir="rtl"] .support-qa .qa-item p{padding-inline-start:166px}
html[dir="rtl"] :is(.kb-title,.kb-body h2,.kb-group-title,.kb-stuck-title){line-height:1.4}
html[dir="rtl"] .kb-body :is(p,li){line-height:1.9}
html[dir="rtl"] .careers-steps h3{line-height:1.45}
html[dir="rtl"] .careers-cv input[type="file"]::file-selector-button{font-family:var(--font-ar);font-size:.85rem;letter-spacing:0;text-transform:none}
html[dir="rtl"] :is(.blog-featured-title,.blog-post-title){text-transform:none;letter-spacing:0;line-height:1.35}
html[dir="rtl"] :is(.blog-card-cat,.blog-card-foot,.blog-featured-kicker,.blog-meta,.blog-author-note){font-size:.84rem}
html[dir="rtl"] :is(.blog-share a,.blog-share .linkbtn){font-size:.85rem}
html[dir="rtl"] .blog-standfirst{line-height:1.8}
html[dir="rtl"] .post-body :is(p,li){line-height:1.9}
html[dir="rtl"] .post-body h2{line-height:1.45}
html[dir="rtl"] .sitemap-sec-title{font-size:.88rem}
html[dir="rtl"] .sitemap-xml{font-size:.85rem}
html[dir="rtl"] .sitemap-note{font-family:var(--font-ar);font-size:.85rem}
html[dir="rtl"] :is(.err-panel-title,.err-link-section,.err-panel-foot){font-family:var(--font-ar);letter-spacing:0;text-transform:none}
html[dir="rtl"] :is(.err-panel-title,.err-panel-foot){font-size:.88rem}
html[dir="rtl"] :is(.err-link-section,.err-ref-label){font-size:.84rem}
html[dir="rtl"] :is(.search-count,.search-hit-kind){font-family:var(--font-ar);letter-spacing:0;text-transform:none;font-size:.86rem}
html[dir="rtl"] .search-title{text-transform:none;letter-spacing:0;line-height:1.25}
html[dir="rtl"] .search-hit-title{line-height:1.5}
html[dir="rtl"] .search-hit-text{line-height:1.85}
html[dir="rtl"] :is(.nl-kicker,.nl-box-title){font-family:var(--font-ar);letter-spacing:0;text-transform:none;font-size:.88rem}
html[dir="rtl"] .nl-title{text-transform:none;letter-spacing:0;line-height:1.3}
/* Node coordinates are absolute percentages from the inline-start edge, so the nodes
   mirror by themselves; the wires are an SVG and have to be flipped to match. */
html[dir="rtl"] .atlas-wires{transform:scaleX(-1)}

/* ── Narrow screens ────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .integ,.layers,.badges,.hw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prod-grid,.feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prod-hero-grid{grid-template-columns:minmax(0,1fr)}
  .prod-hero-visual{height:400px}
  .route-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .contact-body{grid-template-columns:minmax(0,1fr)}
  .contact-main{border-inline-end:none;border-bottom:1px solid rgb(var(--gold-rgb) / .22)}
  .about-offer{grid-template-columns:repeat(2,minmax(0,1fr))}
  .team-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .store-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quote-grid{grid-template-columns:minmax(0,1fr)}
  .support-routes,.kb-grid,.blog-grid,.sitemap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blog-layout{grid-template-columns:minmax(0,1fr) 220px}
  .blog-article{padding-inline-end:40px}
  .kb-layout{grid-template-columns:minmax(0,1fr) 240px;grid-template-areas:"main aside" "side side"}
  .kb-article{padding-inline:0 40px}
  .kb-side{padding:28px 0 8px;border-inline-end:none;border-top:1px solid rgb(var(--gold-rgb) / .18)}
}
@media (max-width:900px){
  .sec{padding-block:64px 72px}
  .home-hero{padding-block:72px 64px}
  .hero-body,.sec-head--split{grid-template-columns:minmax(0,1fr)}
  /* Phone atlas: the absolute diagram cannot shrink to 375px, so the nodes become a
     two-column grid of the same buttons and the wires, which only mean something in
     the diagram, are dropped. */
  .atlas-map{aspect-ratio:auto;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px}
  .atlas-wires{display:none}
  .atlas-node,.atlas-node.is-core{position:static;width:auto}
  .atlas-spec,.scene,.console-body{grid-template-columns:minmax(0,1fr)}
  .atlas-spec-main,.scene-info,.console-menu{border-inline-end:none;border-bottom:1px solid rgb(var(--gold-rgb) / .22)}
  .atlas-spec-main,.atlas-spec-rows{padding:26px 22px}
  .scene-info{padding:26px 22px}
  .scene-tab{flex:1 1 50%;border-bottom:1px solid rgb(var(--gold-rgb) / .22)}
  .console-body{min-height:0}
  .console-items{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .foot-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .page-hero{padding-block:28px 56px}
  .err-hero{padding-block:56px 72px}
  .err-grid{grid-template-columns:minmax(0,1fr)}
  .page-hero-body,.split,.demo-grid,.plans,.paths{grid-template-columns:minmax(0,1fr)}
  .page-hero-body .hero-actions{justify-content:flex-start}
  .prod-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec--flush{padding-block:0 64px}
  /* A plain height, not aspect-ratio + min-height: that pair turns the minimum height
     into a minimum WIDTH (320 × 4/3 = 427px) and pushed the page sideways on phones. */
  .shot-frame{height:clamp(400px,64vw,480px);padding:10px}
  .integ-rows li{grid-template-columns:minmax(0,1fr) auto;padding:16px 18px}
  .integ-what{grid-column:1/-1;grid-row:2}
  .spec-table>div{grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 18px}
  .qa-item summary{padding:18px 18px;gap:14px}
  .qa-item p{padding:0 18px 22px}
  .demo-form{padding:24px 20px}
  .contact-hero-grid{grid-template-columns:minmax(0,1fr)}
  .ind-row{grid-template-columns:minmax(0,1fr)}
  .ind-row>div{padding:28px 22px}
  .ind-row>div+div{border-inline-start:none;border-top:1px solid rgb(var(--gold-rgb) / .16)}
  .problems,.combos{grid-template-columns:minmax(0,1fr)}
  .stack-item{grid-template-columns:56px minmax(0,1fr);padding:18px 18px}
  .stack-copy,.stack-link{grid-column:2/-1}
  .flow-panel{padding:24px 20px 22px}
  .contact-main{padding:28px 20px 32px}
  .aside-block{padding:26px 20px}
  .about-rules{grid-template-columns:minmax(0,1fr)}
  .about-rule{padding:26px 22px 30px}
  .store-hero-grid,.store-layout,.pd-grid{grid-template-columns:minmax(0,1fr)}
  .store-side{border-inline-end:none;border-bottom:1px solid rgb(var(--gold-rgb) / .18);padding:24px 0 8px}
  .store-cats{flex-direction:row;flex-wrap:wrap;gap:6px;margin-bottom:24px}
  .store-cats a{border:1px solid rgb(var(--gold-rgb) / .2);padding:8px 12px}
  .store-chips,.store-works{margin-bottom:24px}
  .store-how{margin-bottom:16px}
  .store-main{padding:28px 0 64px}
  .pd-grid{gap:32px;margin-top:28px}
  .legal-body{grid-template-columns:minmax(0,1fr)}
  .legal-aside{order:-1;padding:22px 0;border-bottom:1px solid rgb(var(--gold-rgb) / .22)}
  .legal-aside-in{position:static;padding:0 22px;gap:18px}
  .legal-doc{padding:32px 22px 44px;border-inline-end:none}
  .legal-toc[open]>summary{margin-bottom:14px}
  .legal-toc:not([open])>summary{margin-bottom:0}
  .legal-toc>summary::after{content:" +";color:var(--gold-ink)}
  .legal-toc[open]>summary::after{content:" −"}
  .about-rules-title{margin-bottom:32px}
  .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .support-hero-grid,.kb-hero-grid,.ticket-grid,.apply-grid,.careers-steps,.blog-hero-grid,.sitemap-hero-grid{grid-template-columns:minmax(0,1fr)}
  .blog-featured.has-image{grid-template-columns:minmax(0,1fr)}
  .blog-featured-media{min-height:220px;border-inline-start:none;border-top:1px solid rgb(var(--gold-rgb) / .22)}
  .blog-featured-text{padding:28px 22px 30px}
  .blog-layout{grid-template-columns:minmax(0,1fr)}
  .blog-aside,.blog-aside-in{display:contents}
  .blog-aside .legal-toc{order:-1;padding:22px 0;border-bottom:1px solid rgb(var(--gold-rgb) / .18)}
  .blog-aside .nl-box{order:1;margin:0 0 56px}
  .nl-band-grid{grid-template-columns:minmax(0,1fr)}
  .blog-article{padding:28px 0 48px;border-inline-end:none}
  .support-hero-grid{margin-top:32px;gap:32px}
  .support-routes-bar{padding-bottom:56px}
  .kb-hero-grid{margin-top:28px}
  .support-qa .qa-item p,html[dir="rtl"] .support-qa .qa-item p{padding-inline-start:18px}
  .kb-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"aside" "main" "side"}
  .kb-aside{padding:22px 0;border-inline-start:none;border-bottom:1px solid rgb(var(--gold-rgb) / .18)}
  .kb-aside-in{position:static;gap:18px}
  .kb-article{padding:28px 0 48px}
  .kb-toc[open]>summary{margin-bottom:14px}
  .kb-toc:not([open])>summary{margin-bottom:0}
}
/* The downloads table as stacked rows once its columns no longer fit. */
@media (max-width:720px){
  .files-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .files-table tr{display:block;padding:16px 18px;border-bottom:1px solid rgb(var(--gold-rgb) / .12)}
  .files-table tbody tr:last-child{border-bottom:none}
  .files-table tbody :is(th,td){display:block;padding:0;border:none}
  .files-table tbody td.is-blank{display:none}
  .files-table tbody td[data-label]{margin-top:6px}
  .files-table tbody td[data-label]::before{content:attr(data-label) " ";color:var(--text-3);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase}
  html[dir="rtl"] .files-table tbody td[data-label]::before{font-family:var(--font-ar);font-size:.8rem;letter-spacing:0;text-transform:none}
  .files-table .files-action{margin-top:14px;text-align:start}
}
@media (max-width:520px){
  /* Sized so the longest word ("INFRASTRUCTURE.") still fits a 375px screen; the
     desktop clamp's 2.8rem floor clipped it. */
  .home-hero h1{font-size:8.6vw}
  html[dir="rtl"] .home-hero h1{font-size:11vw}
  .hero-rule{grid-template-columns:minmax(0,1fr)}
  .integ,.layers,.badges,.hw-grid{grid-template-columns:minmax(0,1fr)}
  .hero-actions .cta-btn,.closing-actions .cta-btn{flex:1 1 100%}
  .prod-grid,.feat-grid,.enq-grid{grid-template-columns:minmax(0,1fr)}
  .prod-card{min-height:0;padding:24px 22px 26px}
  .prod-hero-visual{height:340px;padding:8px}
  .prod-facts>div{padding:18px 16px}
  .filter-btn{flex:1 1 auto;padding:13px 14px;border-bottom:1px solid rgb(var(--gold-rgb) / .22)}
  .filter-count{flex:1 1 100%;padding:12px 14px;text-align:center}
  .shot-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shot-tab{border-bottom:1px solid rgb(var(--gold-rgb) / .16)}
  .feat,.path,.plan{padding:24px 20px 28px}
  .thanks{padding-block:72px 96px}
  .route-tab{padding:16px 16px}
  .flow-steps{grid-template-columns:minmax(0,1fr)}
  .flow-tab{flex:1 1 auto;padding:13px 14px;border-bottom:1px solid rgb(var(--gold-rgb) / .22)}
  .problem{padding:24px 20px 26px}
  .combo{padding:24px 20px 26px}
  .about-offer{grid-template-columns:minmax(0,1fr)}
  .about-card{padding:24px 20px 26px}
  .store-grid{grid-template-columns:minmax(0,1fr)}
  .pd-qty .cta-btn{margin-inline-start:0;flex:1 1 100%}
  .pd-specs>div{grid-template-columns:minmax(0,1fr);gap:2px;padding:12px 16px}
  .quote-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .quote-table tr{display:block;position:relative;padding-block:16px;padding-inline:16px 56px;border-bottom:1px solid rgb(var(--gold-rgb) / .14)}
  .quote-table tbody :is(th,td){display:block;padding:4px 0;border:none}
  .quote-table tbody td[data-label]::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin:6px 0 4px}
  html[dir="rtl"] .quote-table tbody td[data-label]::before{font-family:var(--font-ar);letter-spacing:0;text-transform:none;font-size:.8rem}
  .quote-x-cell{position:absolute;top:14px;inset-inline-end:14px;width:auto}
  .quote-details{padding:24px 20px}
  .legal-tab{flex:1 1 50%;padding:14px 12px;text-align:center;border-bottom:1px solid rgb(var(--gold-rgb) / .22)}
  .legal-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .legal-table tr{display:block;padding:12px 0;border-bottom:1px solid var(--hair)}
  .legal-table tbody :is(th,td){display:block;padding:3px 0;border:none}
  .legal-table code{white-space:normal;overflow-wrap:anywhere}
  .legal-meta [aria-hidden="true"]{display:none}
  .legal-table tbody td::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-top:6px}
  html[dir="rtl"] .legal-table tbody td::before{font-family:var(--font-ar);letter-spacing:0;text-transform:none;font-size:.8rem}
  .team-body{padding:14px 14px 18px}
  .team-name{font-size:.95rem}
  .client-grid{grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr))}
  .client-cell{min-height:96px}
  .client-mark{padding:16px}
  .wa-float{inset-block-end:16px;inset-inline-end:16px;width:52px;height:52px}
  .support-routes,.kb-grid,.kb-grid--related{grid-template-columns:minmax(0,1fr)}
  .support-route,.kb-card,.blog-card{padding:22px 20px 24px}
  .blog-grid,.sitemap-grid{grid-template-columns:minmax(0,1fr)}
  .sitemap-sec{padding:22px 20px 24px}
  .nl-band{padding-block:56px 64px}
  .nl-row{flex-direction:column}
  .nl-row .cta-btn{width:100%}
  .search-title{margin-top:28px}
  .search-hit-title{font-size:1.1rem}
  .err-links a,.err-panel-title,.err-panel-foot{padding-inline:18px}
  .err-ref{padding:18px}
  .blog-card{min-height:0}
  .blog-share{margin-inline-start:0}
  .reach{padding:20px 18px 18px}
  .search-box{padding-inline:14px 5px}
  .search-box-go{padding:10px 12px}
  .support-qa summary{flex-wrap:wrap;row-gap:6px}
  .support-qa .qa-tag{width:auto;flex-basis:100%}
  .support-qa .qa-q{flex:1 1 0;min-width:0}
  .kb-stuck{padding:22px 20px}
  .kb-stuck-actions,.kb-stuck-actions .cta-btn{flex:1 1 100%}
  .sla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sla tr{display:block;padding:14px 16px;border-bottom:1px solid rgb(var(--gold-rgb) / .14)}
  .sla tbody tr:last-child{border-bottom:none}
  .sla tbody :is(th,td){display:block;padding:2px 0;border:none;white-space:normal}
  .sla tbody td.sla-target{margin-top:4px}
}

/* ── Print (the legal pages' "Print or save as PDF") ─────────────────────────── */
@media print{
  html,body{background:#fff!important;color:#000!important}
  .nav,.site-foot,.consent,.wa-float,.skip-link,.crumbs,.legal-tabs,.legal-aside,
  .blog-aside,.blog-share,.blog-closing,.kb-related{display:none!important}
  .blog-page{padding:0}
  .blog-layout{display:block}
  .blog-article{padding:0;border:none}
  .blog-article,.blog-article *{color:#000!important;background:transparent!important;border-color:#bbb!important}
  .legal-page{padding:0}
  .legal-body{display:block;border:none}
  .legal-doc{padding:0;border:none}
  .legal-doc,.legal-doc *{color:#000!important;background:transparent!important;border-color:#bbb!important}
  .legal-doc a{text-decoration:underline}
  .legal-section h2{break-after:avoid}
}

@media (prefers-reduced-motion:reduce){
  .dot-pulse,.err-dot,.atlas-wires path.is-money{animation:none}
  .js .scene.is-active .scene-info{animation:none}
  .qa-sign::after{transition:none}
  .js .flow-panel.is-active{animation:none}
}