@font-face{font-family:Alexandria;src:url('/fonts/alexandria-lat.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+00B7,U+2013-2014,U+2018-201D,U+2026,U+2192}
@font-face{font-family:Alexandria;src:url('/fonts/alexandria-ar.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E}
:root{--bg:#f5f6fa;--surface:#fff;--ink:#171923;--muted:#5d6372;--line:#dce0e9;--accent:#5057e8;--accent-text:#424acb;--wash:#e8eaff;--button:#424acb;--button-ink:#fff;--pad:clamp(1.25rem,5vw,5rem);color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#101219;--surface:#191c26;--ink:#f2f3f8;--muted:#a8aebe;--line:#303545;--accent-text:#a6aaff;--wash:#222645;--button:#a6aaff;--button-ink:#121525;color-scheme:dark}}
:root[data-theme=dark]{--bg:#101219;--surface:#191c26;--ink:#f2f3f8;--muted:#a8aebe;--line:#303545;--accent-text:#a6aaff;--wash:#222645;--button:#a6aaff;--button-ink:#121525;color-scheme:dark}
:root[data-nivo=advisor]{--accent:#0b8278;--accent-text:#086e66;--wash:#e1f1ee;--button:#086e66}
:root[data-nivo=it]{--accent:#bf29d6;--accent-text:#8f209f;--wash:#f2e4f8;--button:#8f209f}
:root[data-nivo=logistics]{--accent:#cd4603;--accent-text:#a73702;--wash:#faeae1;--button:#a73702}
@media(prefers-color-scheme:dark){:root:not([data-theme=light])[data-nivo=advisor]{--accent-text:#6cd4c4;--wash:#163631;--button:#6cd4c4}:root:not([data-theme=light])[data-nivo=it]{--accent-text:#e89af1;--wash:#34203c;--button:#e89af1}:root:not([data-theme=light])[data-nivo=logistics]{--accent-text:#ffb18b;--wash:#39271f;--button:#ffb18b}}
:root[data-theme=dark][data-nivo=advisor]{--accent-text:#6cd4c4;--wash:#163631;--button:#6cd4c4}
:root[data-theme=dark][data-nivo=it]{--accent-text:#e89af1;--wash:#34203c;--button:#e89af1}
:root[data-theme=dark][data-nivo=logistics]{--accent-text:#ffb18b;--wash:#39271f;--button:#ffb18b}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:2rem}body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.75 Alexandria,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent-text);outline-offset:5px}p,h1,h2,figure{margin:0}[hidden]{display:none!important}.wrap{width:min(1440px,100%);margin-inline:auto;padding-inline:var(--pad)}.skip{position:fixed;inset-block-start:-100px;inset-inline-start:20px;padding:12px 20px;background:var(--ink);color:var(--bg);z-index:20}.skip:focus{inset-block-start:12px}
.header__inner{display:flex;align-items:center;gap:2.5rem;min-height:104px;border-block-end:1px solid var(--line)}.wordmark{display:flex;align-items:baseline;gap:10px;font-weight:800;font-size:1.65rem;letter-spacing:.13em}.wordmark span{font-weight:500;font-size:.75rem;letter-spacing:.16em;color:var(--muted)}.header__nav{display:flex;gap:2rem;margin-inline-start:auto;font-size:.875rem}.header__nav a,.footer a{border-block-end:1px solid transparent}.header__nav a:hover,.footer a:hover{border-color:currentColor}.header__tools{display:flex;align-items:center;gap:1.25rem}.language{font-size:.875rem;padding:10px 0}.theme{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;color:var(--ink);background:transparent}.theme:hover{background:var(--surface)}.theme svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}
/* The services are bookmarks down the leading edge of the panel, not boxes
   under it. They used to sit below a 540px-tall panel, which put them 12px
   below the fold at 1440x800 — the one thing telling a visitor NIVO has four
   services was invisible on arrival on a laptop. The rail also replaces two
   opposite orderings (roster order:2 on desktop, order:0 on phones) with one
   arrangement that is true at every width. */
.showcase{--rail:200px;display:grid;grid-template-columns:var(--rail) minmax(0,1fr);align-items:start;padding-block:2.25rem 3.5rem}
.roster{min-width:0;scroll-margin-top:2rem}
/* ⚠️ Spans both columns, and that is what makes the first bookmark line up
   with the sheet (Alin, 2026-09-12). Inside the bookmark column it pushed
   the tabs down by its own height — measured at 84px — while the sheet
   started at the top of the row, so the two columns began at different
   heights. As a row of its own it heads the whole section, which is what
   it always described. */
.roster__label{grid-column:1/-1;display:grid;gap:.25rem;font-size:.875rem;margin-block-end:1rem}.roster__label p{font-weight:600}.roster__label>span{color:var(--muted);font-size:.8125rem;line-height:1.5}
.roster__tabs{display:grid;gap:4px}
/* ⚠️ Logical properties throughout, because the Arabic page really does mirror:
   `<html dir="rtl">` flips the grid columns, so the rail sits on the reading
   side — right in Arabic — and the bookmarks must point the other way with it.
   A physical `border-right` here leaves the tabs shaped backwards, open edge
   away from the panel and rounded corners against it.
   `transform` and `box-shadow` have no logical form, so those two get the
   explicit `[dir=rtl]` overrides below and nothing else does. */
/* ⚠️ **Transparent, not absent** (Alin, 2026-09-12: no border lines on the
   inactive bookmarks). The border stays in the box so every bookmark is the
   same size whichever is live — dropping it outright would shrink the three
   quiet ones by 2px and make the live one jump as it gained the line back.
   Only its colour changes. */
.slot{display:flex;align-items:center;gap:.8rem;text-align:start;padding:.85rem .9rem;min-height:72px;border:1px solid transparent;border-inline-end:0;border-start-start-radius:10px;border-end-start-radius:10px;border-start-end-radius:0;border-end-end-radius:0;background:transparent;color:var(--ink);position:relative;margin-inline-end:-1px;transition:background-color .18s ease,border-color .18s ease}
.slot:hover{background:var(--surface);border-color:var(--accent-text)}
/* Three cues for the live tab, all of them static, so the answer to "which is
   selected" never depended on motion in the first place: it covers the spine,
   it takes the same surface as the card, and it carries the accent on its outer
   edge.

   ⚠️ **No pull toward the panel, and no extra width** (Alin, 2026-09-12). The
   live tab used to be shifted 6px past the card's edge, which made it wider
   than its neighbours and left it overhanging rather than meeting the card. A
   bookmark ends where its page begins; the single pixel of overlap below is
   only there to cover the spine, not to stick out.

   ⚠️ **The bar carries the visibility, not a coloured fill** (Alin,
   2026-09-12). The original 3px bar used `--accent`, the darker variant, and on
   dark it sat on a raised surface only nine luminance units off the page — too
   quiet. Filling the tab with the service's `--wash` tint fixed that and was
   rejected: it answered "make it clearer" by colouring things nobody asked to
   colour. So the surface stays neutral and the bar does the work — 4px, in
   `--accent-text`, which is the variant tuned for contrast rather than for a
   solid fill. The same `--surface` runs on into the panel, so the live bookmark
   and its page are one sheet; see `.stage` below. */
.slot[aria-selected=true]{background:var(--surface);border-color:var(--line);box-shadow:inset 4px 0 0 var(--accent-text),0 8px 20px #00000014}
[dir=rtl] .slot[aria-selected=true]{box-shadow:inset -4px 0 0 var(--accent-text),0 8px 20px #00000014}
/* The icon is the whole of a bookmark below 1000px, where the name is clipped
   to the accessibility tree — so it carries the identity, not a number. It sets
   `color` rather than `fill`/`stroke` because the drawings are `currentColor`
   throughout: idle takes the muted grey, live takes the service's own accent,
   and both follow the theme without a second rule. */
.slot__icon{width:22px;height:22px;flex:none;color:var(--muted)}
.slot[aria-selected=true] .slot__icon{color:var(--accent-text)}
.slot__copy{display:grid;gap:2px;min-width:0}
.slot__name{font-size:.9375rem;font-weight:600}
.slot__status{font-size:.75rem;color:var(--muted)}
.slot__dot{width:6px;height:6px;border-radius:50%;background:var(--accent);margin-inline-start:auto;opacity:0;flex:none}
.slot[aria-selected=true] .slot__dot{opacity:1}
/* The spine the bookmarks attach to. The live tab covers it — that break is
   what makes the tab and the panel read as one piece, and it is the only cue
   that is pure structure rather than colour or motion. The padding is the room
   the content keeps off the join.
   The card is outlined on all four sides (Alin, 2026-09-12). ⚠️ The start side
   is still the spine the bookmarks attach to — the live one covers its own
   height of it with an opaque surface and a 1px overlap, which is what breaks
   the line and joins the two. The far corners are rounded and the near ones are
   square, because that edge is a join rather than an edge.

   ⚠️ **The panel takes the live bookmark's own surface** (Alin, 2026-09-12) —
   `--surface`, the neutral raised one, never the service tint. Tinting both in
   the service's colour was tried first and rejected: it connected them by
   colouring a large area nobody asked to have coloured. Sharing the neutral
   surface joins the two into one sheet without introducing a colour anywhere.
   Inactive bookmarks stay transparent on the page ground, outside the sheet,
   which is what distinguishes them. */
.stage{min-width:0;background:var(--surface);border:1px solid var(--line);border-start-end-radius:14px;border-end-end-radius:14px;padding-inline:clamp(1rem,2vw,2rem);padding-block:clamp(1rem,1.75vw,1.5rem)}.panel{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:center;min-height:540px;padding-block:0}/* Only ever seen without JavaScript, where all four stack. */.panel+.panel{border-block-start:1px solid var(--line);margin-block-start:2rem;padding-block-start:2rem}/* ⚠️ The separation above is for the no-JavaScript stack only, and it has to
   be undone here for *all three* properties. `.panel+.panel` matches a
   visible panel whose previous sibling is `display:none`, so with JS the
   second, third and fourth services each inherited a top margin the first
   never had — measured 70px of sheet padding above the panel against 38px
   below, on every service except NIVO Group. */
.js .panel+.panel{border:0;margin-block-start:0;padding-block-start:0}.readout{min-width:0}.eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;color:var(--accent-text);font-size:.875rem;font-weight:600;margin-block-end:1.5rem}.status{font-size:.75rem;font-weight:500;border:1px solid var(--line);border-radius:30px;padding:3px 9px;color:var(--muted)}h1,.panel h2{font-size:clamp(2.65rem,4.35vw,4.4rem);font-weight:650;letter-spacing:-.055em;line-height:1.13;text-wrap:balance;margin-block-end:1.6rem}.description{font-size:1rem;line-height:1.85;max-width:56ch;color:var(--muted)}.service-points{padding:0;margin:1.6rem 0 2rem;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;list-style:none}.service-points li{font-size:.875rem;font-weight:500;display:flex;align-items:center;gap:8px}.service-points li:before{content:'';width:4px;height:4px;border-radius:50%;background:var(--accent);flex:none}.button{display:inline-flex;justify-content:space-between;align-items:center;gap:1.75rem;min-height:54px;padding:14px 23px;border-radius:7px;font-size:.875rem;font-weight:600;transition:transform .18s ease}.button:hover{transform:translateY(-2px)}.primary{background:var(--button);color:var(--button-ink)}.arrow{font:500 1.25rem/1 Arial,sans-serif}.portrait{position:relative;display:grid;place-items:center;min-width:0;padding:1rem 0}.portrait__light{position:absolute;inset:12% 5% 18%;border-radius:50%;background:radial-gradient(ellipse,var(--wash),transparent 70%);pointer-events:none}.portrait img{display:block;position:relative;width:100%;max-width:500px;height:auto;filter:drop-shadow(0 20px 25px #00000012)}.portrait figcaption{position:relative;color:var(--muted);font-size:.875rem;text-align:center;margin-block-start:-.25rem}.js .panel{animation:arrive .25s ease-out}@keyframes arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
/* The overview: the three services on the panel that used to describe them
   vaguely. Full width under the opening row rather than squeezed beside the
   portrait — "here is NIVO", then "here is what we do", and nothing else gets
   narrower for it. */
.overview{grid-column:1/-1;padding-block-start:.5rem}
.overview__label{font-size:.875rem;font-weight:600;margin-block-end:1rem}
/* auto-fit rather than three fixed columns: the panel loses 200px to the rail,
   so the cards need to fall to two and then one on their own. */
.overview__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.ocard{display:grid;align-content:start;gap:.75rem;text-align:start;padding:1.15rem 1.25rem;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--ink);transition:transform .18s ease,border-color .18s ease,background-color .18s ease}
.ocard:hover{background:var(--surface);border-color:var(--accent-text);transform:translateY(-2px)}
.ocard__head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.ocard .slot__icon{color:var(--muted)}
.ocard__name{font-size:1rem;font-weight:600}
/* The readiness pill, in the site's existing `.status` shape. Desk's reads
   "Invoices and credits" while the other two read "In development" and
   "Planned next" — so a visitor scanning three pills can see which one is a
   product without anybody writing a new word to say so. */
.ocard__status{font-size:.75rem;font-weight:500;border:1px solid var(--line);border-radius:30px;padding:3px 9px;color:var(--muted)}
/* The only arrow in the row, on the only service you can use today. */
.ocard__go{margin-inline-start:auto;font:500 1.1rem/1 Arial,sans-serif;color:var(--accent-text)}
[dir=rtl] .ocard__go{transform:scaleX(-1)}
.ocard__points{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;font-size:.8125rem;color:var(--muted)}
.ocard__points li{display:flex;align-items:baseline;gap:8px}
.ocard__points li:before{content:'';width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.55;flex:none;transform:translateY(-2px)}
/* The account's offer, where the reason for one lives — the Desk panel, not
   the header. The wording is Advisor's own, read from its dictionary. */
.panel-account{margin-block-start:1.25rem;font-size:.8125rem;color:var(--muted);max-width:46ch}
.panel-account a{border-block-end:1px solid var(--line);color:var(--ink)}
.panel-account a:hover{border-color:currentColor}
.contact{padding-block:4.5rem;display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;position:relative}.contact:before{content:'';position:absolute;top:0;inset-inline:var(--pad);height:1px;background:var(--line)}.contact h2{font-size:clamp(1.8rem,2.8vw,2.7rem);font-weight:600;letter-spacing:-.035em;line-height:1.3;margin-block-end:1rem;text-wrap:balance}.contact__intro>p:last-child{color:var(--muted);max-width:46ch}.contact__action{display:flex;align-items:flex-start;justify-content:center;flex-direction:column;gap:1rem}.phone{font-size:.875rem;letter-spacing:.03em;color:var(--muted)}.phone:hover{text-decoration:underline;text-underline-offset:4px}.contact__action p{font-size:.875rem;color:var(--muted);max-width:40ch}.footer{display:flex;justify-content:space-between;gap:2rem;padding-block:1.75rem;border-block-start:1px solid var(--line);font-size:.875rem;color:var(--muted)}
/* Shared LTR composition by owner preference; Arabic text keeps its reading direction. */
[lang=ar] :is(h1,h2,p,li,figcaption,.eyebrow,.slot__copy,.button,.roster__label,.header__nav,.footer){direction:rtl;unicode-bidi:plaintext;letter-spacing:0;text-transform:none}[lang=ar] .readout,[lang=ar] .contact__intro{text-align:right}[lang=ar] .eyebrow{justify-content:flex-start}[lang=ar] h1,[lang=ar] .panel h2{font-size:clamp(2.25rem,3.8vw,3.85rem);line-height:1.4;font-weight:650}[lang=ar] .description{line-height:1.95}[lang=ar] .service-points{direction:rtl}[lang=ar] .slot__copy{text-align:right}[lang=ar] .slot__name{font-size:.9375rem}[lang=ar] .contact__action{align-items:flex-end}[lang=ar] .arrow{transform:scaleX(-1)}[lang=ar] .language{letter-spacing:0}
@media(min-width:1500px){.panel{min-height:620px}}
/* The rail narrows in three steps, and what a bookmark shows narrows with it —
   name and status, then name, then just its number and dot. One structure at
   every width; only the width changes. The number is enough on its own because
   the panel beside it already names the service in its eyebrow. */
@media(max-width:1200px){.showcase{--rail:150px}.roster__label>span{display:none}.slot__status{display:none}}
/* ⚠️ The name is hidden from the eye, never from the accessibility tree. At
   56px only the number fits, but "01" is not a name — `display:none` here left
   a screen reader announcing "01, tab" with no way to know it leads to the
   Desk. The status line above is a different case: it is supplementary detail
   with no visual equivalent left to caption, so hiding it both ways keeps the
   two experiences equivalent. */
@media(max-width:1000px){.showcase{--rail:56px}.slot{flex-direction:column;justify-content:center;gap:.4rem;padding:.7rem .25rem;min-height:60px}.slot__copy{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.slot__icon{width:20px;height:20px}.slot__dot{margin-inline-start:0}}
@media(max-width:1050px){.header__inner{gap:1.5rem}.panel{grid-template-columns:1.2fr 1fr;gap:1.5rem;min-height:530px}}
@media(max-width:760px){.header__inner{min-height:80px;gap:1rem}.header__nav{display:none}.header__tools{margin-inline-start:auto;gap:1rem}.wordmark{font-size:1.4rem}.wordmark span{display:none}.showcase{padding-block:1.5rem 2.5rem}.roster__label{display:none}.stage{padding-inline:.9rem}.slot{border-start-start-radius:8px;border-end-start-radius:8px}.panel{grid-template-columns:1fr;gap:1rem;padding-block:2.75rem 0;min-height:0}.eyebrow{margin-block-end:1rem}h1,.panel h2{font-size:clamp(2.25rem,7vw,3.4rem)}.description{max-width:60ch}.service-points{margin-block:1.25rem 1.5rem}.portrait{padding:0;max-width:370px;width:100%;margin-inline:auto}.portrait img{width:100%}.contact{grid-template-columns:1fr;gap:2rem;padding-block:3rem}.contact__action{align-items:flex-start}.contact__action p{max-width:none}.footer{flex-direction:column;gap:.5rem}.footer a{align-self:flex-start}[lang=ar] .footer a{align-self:flex-end}[lang=ar] h1,[lang=ar] .panel h2{font-size:clamp(2rem,6.5vw,3rem)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

.group-account { padding-block:clamp(2rem,6vw,5rem); max-width:1100px; }
.group-account__heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-block-end:2rem; }
.group-account h1 { font-size:clamp(2rem,5vw,3.2rem); margin:0; }
.account-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:1.5rem; }
.account-card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:clamp(1.25rem,3vw,2rem); }
.account-card h2 { font-size:1rem; font-weight:500; color:var(--muted); margin-block-end:1rem; }
.account-card bdi { display:block; overflow-wrap:anywhere; }
[lang=ar] .account-card bdi, [lang=ar] .account-amount { text-align:right; }
.account-amount { font-size:clamp(2.5rem,6vw,4rem); font-weight:650; font-variant-numeric:tabular-nums; margin-block-end:1rem; }
.account-note { color:var(--muted); font-size:.8125rem; margin-block-start:.5rem; }
.group-account { min-height:calc(100vh - 104px); }
.group-account .auth-card { margin-inline:auto; width:100%; }
.group-account small { font-size:.875rem; color:var(--muted); }
.group-account input:focus-visible { outline:3px solid var(--accent-text); outline-offset:3px; }
.group-account summary { cursor:pointer; padding-block:.75rem; min-height:44px; }
.account-recovery { margin-block-start:2rem; background:transparent; }
.account-actions a:not(.button) { min-height:44px; display:inline-flex; align-items:center; text-decoration:underline; text-underline-offset:5px; }
#statement { margin-block-start:2rem; }
#statement-body { list-style:none; padding:0; margin-block:1rem 0; }
.statement-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:1rem; border-block-end:1px solid var(--line); }
.statement-row small { display:block; }
.statement-row bdi { font-size:1.25rem; font-variant-numeric:tabular-nums; }
.group-account .account-open { margin:0; }
.group-account [role=status]:not(:empty) { padding:1rem; margin-block:1rem; border-inline-start:3px solid var(--accent-text); background:var(--surface); }
@media(prefers-reduced-motion:no-preference) { .account-card { animation:account-in .18s ease-out; } @keyframes account-in { from { opacity:.6; transform:translateY(4px); } to { opacity:1; transform:none; } } }
.account-secondary { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 16px; border:1px solid var(--line); border-radius:7px; background:transparent; color:var(--ink); font:inherit; }
.account-secondary:disabled { opacity:.5; cursor:wait; }
.account-open,.account-actions { margin-block-start:1.5rem; }
.account-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
.account-google { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem; margin-block:1.25rem; }
.account-google p { color:var(--muted); font-size:.875rem; margin:0; }
.account-google [role=status] { flex-basis:100%; color:var(--ink); }
.account-contact { margin-block-start:1.5rem; }
.auth-card { max-width:34rem; }
.auth-card form { display:grid; gap:1.25rem; margin-block:1.5rem; }
.auth-card label { display:grid; gap:.5rem; }
.auth-card input { min-width:0; width:100%; padding:.8rem; border:1px solid var(--line); border-radius:7px; background:var(--bg); color:var(--ink); font:inherit; }
.auth-card button { justify-self:start; }
#account-status:empty { display:none; }
@media(max-width:760px) { .account-grid { grid-template-columns:minmax(0,1fr); } }
/* Shared Group account; remains separate from the service selector. */
.header__inner { flex-wrap:wrap; column-gap:1.5rem; row-gap:0; }
.account-nav { display:flex; align-items:center; justify-content:flex-end; gap:1.25rem; width:100%; padding-block:0 1rem; font-size:.8125rem; flex-wrap:wrap; }
.account-nav a { display:inline-flex; align-items:center; min-height:44px; border-block-end:1px solid var(--line); }
.account-nav a:hover { border-color:var(--ink); }
.account-nav [data-account-balance] { font-variant-numeric:tabular-nums; color:var(--muted); }
[lang=ar] .account-nav { direction:rtl; }
@media(max-width:760px) {
 .header__inner { padding-block-start:.5rem; }
 .account-nav { justify-content:flex-start; gap:1rem; padding-block:0 .5rem; }
}
/* Mobile opening. ⚠️ This used to read "introduce NIVO before asking visitors
   to choose a division" and push the roster below the panel with `order:2`.
   The rail supersedes that: the selector is a column beside the opening at
   every width now, so there is no before-or-after to order, and an `order` here
   silently swaps the two grid columns instead. The rest of this block — the
   stacked panel rows — is unchanged and still does its job. */
@media (max-width:760px) {
  .header__inner { min-height:72px; }
  .showcase { padding-block:1.5rem 2.5rem; }
  .panel { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; padding-block:0; }
  .readout { display:contents; }
  .panel .eyebrow { grid-row:1; margin:0; }
  .panel h1, .panel h2 { grid-row:2; margin:0; }
  .portrait { grid-row:3; width:clamp(160px,40vw,220px); padding:0; }
  .portrait figcaption { display:none; }
  .description { grid-row:4; }
  .service-points { grid-row:5; margin:0; }
  .panel .button { grid-row:6; justify-self:start; }
  /* One compact guide invitation, with no duplicate service cards below it. */
  [data-panel=base] .guide-intro { grid-row:5; margin:0; }
  [data-panel=base] .button { grid-row:6; }
  .overview__cards { grid-template-columns:minmax(0,1fr); }
  .panel-account { grid-row:7; margin-block-start:.25rem; }
  [lang=ar] .panel .button { justify-self:end; }
}
/* Desk is a separate section below the complete opening and service selector.
   Full-bleed and viewport-tall on purpose: bordered and inset inside the page
   column it read as a window pasted onto the site rather than as the desk
   itself, which is the one thing an embedded application must not look like.
   So the frame runs edge to edge and fills the screen, and the only chrome is
   the bar above it — which is also the way back out. */
.office[hidden] { display:none; }
.office { --office-bar:4.5rem; border-block-start:1px solid var(--line); }
/* Sticky, because the way back to the site is the thing a customer must never
   have to hunt for: the page header scrolls away, and without this the only
   exit is above a screenful of application. */
.office__bar { position:sticky; top:0; z-index:10; background:var(--bg); border-block-end:1px solid var(--line); }
.office__bar-inner { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; min-height:var(--office-bar); padding-block:.5rem; }
.office__bar h2 { font-size:clamp(1.05rem,1.7vw,1.35rem); font-weight:600; letter-spacing:-.025em; margin:0; }
.office__links { display:flex; align-items:center; gap:1.5rem; }
.office__links a { display:inline-flex; align-items:center; min-height:44px; font-size:.8125rem; color:var(--muted); border-block-end:1px solid transparent; }
.office__links a:hover { color:var(--ink); border-color:currentColor; }
/* `svh` so a phone's collapsing address bar cannot leave the desk taller than
   the screen; `vh` first for anything that does not know `svh`. */
/* A first height only: office.js measures the desk and sets an inline height to
   match its content, so the page has one scrollbar instead of two. A frame that
   scrolls inside a page that scrolls is what made this read as a window. `svh`
   keeps the first paint inside a phone's real viewport until the measurement
   lands. */
.office__frame { display:block; width:100%; height:calc(100vh - var(--office-bar)); height:calc(100svh - var(--office-bar)); min-height:30rem; border:0; background:var(--bg); }

/* Public guide: one compact invitation inside the opening (Alin, 2026-09-14).
   Match the Arabic panel-heading selector so it cannot inflate this subheading. */
.guide-intro{margin-block:1.25rem 1rem}
.panel .guide-intro h2{font-size:clamp(1.05rem,2vw,1.5rem);font-weight:600;line-height:1.5;margin:0}
.guide-intro .eyebrow{margin-block-end:.35rem}
.guide-launch{background:var(--surface);color:var(--ink);border:1px solid var(--line);flex-shrink:0}
.guide-launch:hover{border-color:var(--accent-text)}
.guide{width:min(580px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--ink);box-shadow:0 24px 90px #0004;overscroll-behavior:contain;text-align:start}
.guide::backdrop{background:#090e1b99}
body:has(.guide[open]){overflow:hidden}
.guide__header{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--surface);padding:1rem 1.4rem;border-block-end:1px solid var(--line)}
.guide__header h2{font-size:1.2rem;font-weight:600}
.guide__close{width:44px;height:44px;flex:none;border:1px solid var(--line);border-radius:50%;font-size:1.5rem;background:var(--bg);color:var(--ink)}
.guide__body{padding:1.25rem 1.4rem 1.5rem}
.guide__notice,.guide__note{font-size:.8125rem;line-height:1.9;color:var(--muted)}
.guide__search{display:grid;gap:.5rem;font-size:.875rem;margin-block:1.25rem .5rem;font-weight:500}
.guide__search input{min-width:0;width:100%;min-height:48px;font:inherit;padding:.75rem;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
.guide__search input::placeholder{color:var(--muted);opacity:1}
.guide__search input:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px}
.guide__results{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:44px;font-size:.75rem;color:var(--muted)}
.guide__results button{border:0;background:none;color:var(--accent-text);min-height:44px;padding:.25rem;text-decoration:underline}
.guide__topic{border-block-end:1px solid var(--line)}
.guide__topic summary{padding:1rem .25rem;cursor:pointer;font-size:.9375rem;font-weight:500;min-height:48px}
.guide__topic summary:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px}
.guide__topic[open]{padding-inline:.75rem;background:var(--bg);border-radius:10px}
.guide__answer{padding:0 .25rem 1rem;font-size:.875rem;line-height:1.9}
.guide__answer a{display:inline-flex;gap:.6rem;align-items:center;min-height:44px;margin-block-start:.5rem;color:var(--accent-text);text-decoration:underline;text-underline-offset:4px}
.guide__note{margin-block:1.25rem .75rem}
.guide__contact{display:inline-flex;align-items:center;min-height:44px;gap:.5rem;font-size:.875rem;text-decoration:underline;text-underline-offset:4px}
@media(max-width:600px){.guide{width:calc(100% - 16px);max-height:calc(100dvh - 16px);border-radius:16px}.guide__header{padding:.75rem 1rem}.guide__body{padding:1rem}.guide__topic summary{font-size:.875rem}}
@media(prefers-reduced-motion:no-preference){.guide[open]{animation:guide-arrive .18s ease-out}@keyframes guide-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}

/* Local conversation prototype; topic browsing remains the network-free path. */
.guide-chat__toggle{min-height:44px;margin-block:1rem .5rem;padding:.5rem .75rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--accent-text);text-align:start}
.guide--chatting .guide__search,.guide--chatting .guide__results,.guide--chatting .guide__topics,.guide--chatting .guide__note,.guide--chatting [data-guide-empty]{display:none}
.guide-chat__badge,.guide-chat__status{font-size:.75rem;color:var(--muted);line-height:1.8}
.guide-chat__about{font-size:.75rem;color:var(--muted);line-height:1.8}
.guide-chat__about summary{display:flex;align-items:center;min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.guide-chat__about[open] p{margin-block-end:1rem}
.guide-chat__message{margin-block:1rem;padding:1rem;border:1px solid var(--line);border-radius:12px;overflow-wrap:anywhere;line-height:1.9;font-size:.875rem;scroll-margin-block:5rem 1rem}
.guide-chat__message h3{font-size:.75rem;color:var(--muted);font-weight:500;margin:0 0 .4rem}
.guide-chat__message--user{background:var(--bg);margin-inline-start:1.5rem}
.guide-chat__answer{margin-block-start:.75rem}
.guide-chat__answer h4{font-size:.875rem;margin:0 0 .5rem}
.guide-chat__answer a{display:inline-flex;align-items:center;min-height:44px;color:var(--accent-text);text-decoration:underline;text-underline-offset:4px}
.guide-chat__message button{display:block;text-align:start;min-height:44px;width:100%;margin-block-start:.5rem;padding:.75rem;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--ink)}
.guide-chat form{display:grid;gap:.5rem;margin-block:1rem .5rem;font-size:.875rem}
.guide-chat textarea{resize:vertical;min-height:90px;max-height:180px;width:100%;font:inherit;padding:.75rem;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
.guide-chat textarea::placeholder{color:var(--muted);opacity:1}
.guide-chat textarea:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px}
.guide-chat__actions{display:flex;flex-wrap:wrap;gap:.5rem}
.guide-chat__actions button{min-height:44px;padding:.5rem .75rem;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:.8125rem}
.guide-chat__actions button[type=submit]{background:var(--button);color:var(--button-ink);border-color:var(--button)}
.guide-chat button:disabled{opacity:.5;cursor:wait}

/* Shared Group sign-in and signup: one calm surface, familiar Google bar,
   then email. Account balances and verification keep their existing layout. */
.group-account:has(#signed-out:not([hidden]))>.group-account__heading{display:none}
.account-entry{max-width:30rem;padding:clamp(1.25rem,4vw,2.5rem);border-radius:22px;box-shadow:0 14px 48px #141c4010}
.auth-emblem{display:grid;place-items:center;width:56px;height:56px;border:1px solid var(--line);border-radius:17px;background:var(--wash);margin-block-end:1.25rem}
.auth-emblem .slot__icon{width:30px;height:30px;color:var(--accent-text)}
.account-entry #auth-title{font-size:clamp(1.65rem,4vw,2rem);font-weight:650;line-height:1.4;margin:0 0 .65rem;letter-spacing:0}
.auth-intro{color:var(--muted);font-size:.875rem;line-height:1.9}
.account-entry .account-google{display:grid;gap:.65rem;margin-block:1.75rem 1.25rem}
.account-entry .account-google p{font-size:.75rem;line-height:1.7;color:var(--muted);text-align:center}
.google-signin{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;padding:12px;border:1px solid #747775;border-radius:10px;background:#fff;color:#1f1f1f;font-weight:500;font-size:14px;line-height:20px;transition:box-shadow .15s ease,background .15s ease}
.google-signin img{width:20px;height:20px;object-fit:contain;flex:none}
.google-signin:hover{background:#f8faff;box-shadow:0 2px 5px #00000014}
.google-signin[aria-disabled=true]{opacity:.6;cursor:wait}
.auth-divider{display:flex;align-items:center;gap:1rem;color:var(--muted);font-size:.75rem}
.auth-divider:before,.auth-divider:after{content:'';height:1px;background:var(--line);flex:1}
.account-entry #auth-form{gap:1rem;margin-block:1.25rem}
.account-entry label{font-size:.8125rem;font-weight:500}
.account-entry input{min-height:48px;border-radius:10px;font-size:1rem}
.auth-password-group{display:grid;gap:.5rem}
.password-field{display:flex;align-items:center;min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.password-field:focus-within{outline:3px solid var(--accent-text);outline-offset:3px}
.account-entry .password-field input{border:0;background:transparent;outline:none;min-width:0;flex:1;width:0}
.password-field button{flex:none;min-height:44px;padding:.5rem .75rem;font-size:.75rem;color:var(--accent-text);background:transparent;border:0}
.account-entry #password-hint{font-size:.75rem}
.account-entry #forgot-password{font-size:.75rem;text-decoration:underline;text-underline-offset:4px;justify-self:end;display:inline-flex;align-items:center;min-height:44px;margin-block:-.5rem}
.account-entry #auth-submit{width:100%;justify-content:center;border:0;border-radius:10px}
.auth-mode-switch{border-block-start:1px solid var(--line);padding-block-start:1rem;text-align:center}
.auth-mode-switch button{min-height:44px;padding:.5rem 0;border:0;background:none;color:var(--accent-text);font-size:.8125rem;line-height:1.8;text-decoration:underline;text-underline-offset:4px}
#signed-out:not([hidden])~#recovery:not([open]){display:none}
.group-account:has(#signed-out:not([hidden]))>#account-status{max-width:30rem;margin-inline:auto}
.group-account:has(#signed-out:not([hidden]))>p.account-actions{justify-content:center;font-size:.75rem}
@media(max-width:600px){.group-account:has(#signed-out:not([hidden])){padding-block:1.25rem 2rem}.account-entry{padding:1.25rem;border-radius:16px}.account-entry .account-google{margin-block-start:1.25rem}}