/* =====================================================================
   Raizer design system v1.1 — raizer.css
   The code behind the Raizer brand book v1.0 (raizer.tech/brand/).
   v1.1 (17 October 2026): section 22A app components, heat and data tokens.
   Read DESIGN.md before building anything with it.
   One stylesheet, no framework. Classes are prefixed rz-, tokens --rz-.
   Mode: Graphite by default; set data-mode="limestone" or "graphite"
   on <html> or any element to switch that subtree.
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Jost:wght@200;400;600&display=swap");

/* ---------------------------------------------------------------------
   1. Global tokens (shared by both modes)
   --------------------------------------------------------------------- */
:root{
  /* orange: solid when small, interactive or data; gradient only when big */
  --rz-orange:#FF8B26; --rz-orange-mid:#EF7025; --rz-orange-deep:#DD4B23;
  --rz-gradient:linear-gradient(90deg,#FF8B26 0%,#EF7025 36%,#DD4B23 100%); /* always left to right, never animated, never flipped */
  --rz-ink:#0e141b; --rz-white:#FFFFFF;
  --rz-light-strong:#535860; /* Graphite corner light, top-left */

  /* the signature cut: one 45-degree cut, bottom-right only */
  --rz-cut-sm:9px;    /* buttons, fields */
  --rz-cut-md:12px;   /* stat tiles, chips, notices */
  --rz-cut-card:20px; /* cards */
  --rz-cut-lg:36px;   /* image frames, slides, canvases */
  --rz-cut-xl:63px;   /* the large cut: big frames, feature panels, one divider band; once per page at least */

  /* fixed type scale: six sizes, nothing in between */
  --rz-t13:13px; --rz-t16:16px; --rz-t20:20px; --rz-t32:32px; --rz-t56:56px; --rz-t96:96px;
  --rz-arx:1.125; /* Arabic is set 12.5% larger than the English beside it */

  /* spacing in nines (the logo's 9-unit module) */
  --rz-s1:9px; --rz-s2:18px; --rz-s3:27px; --rz-s4:36px; --rz-s6:54px; --rz-s8:72px; --rz-s12:108px;
  --rz-gut:18px; --rz-max:1440px;

  --rz-font-en:"Jost",system-ui,sans-serif;
  --rz-font-ar:"Almarai","Jost",sans-serif;

  /* motion: transform and opacity only */
  --rz-ease-in:cubic-bezier(0.16,1,0.3,1);   /* entrances */
  --rz-ease-ui:cubic-bezier(0.2,0.7,0.2,1);  /* interactions */
  --rz-d-press:90ms; --rz-d-ui:180ms; --rz-d-enter:540ms; --rz-d-light:900ms;
  --rz-depth:5px; /* press depth = button extrusion */

  /* the cut as a clip-path (uses --c set on the element) */
  --rz-light:radial-gradient(circle farthest-corner at 0 0,#535860 0%,#383d44 22.4%,#1a2026 49%,rgba(14,20,27,0) 70%);
}
/* v1.1 heat steps (G11) and data palette (G12). Shared by both modes, but built on mode
   tokens, so they are re-declared at every mode boundary to follow the local mode. */
:root,[data-mode],.rz-band--graphite,.rz-band--lit,.rz-band--stone,.rz-band--alt{
  /* heat: grey to orange in 4 steps (calendar and day cells) */
  --rz-heat-0:var(--rz-surf);
  --rz-heat-1:var(--rz-surf2);
  --rz-heat-2:color-mix(in srgb,var(--rz-orange) 45%,var(--rz-surf));
  --rz-heat-3:var(--rz-orange); /* text on it: --rz-ink */
  /* data: solid colours only, orange-led, 5 at most. More than 5 categories: top 4 + "Other" in --rz-line2 */
  --rz-data-1:var(--rz-orange);      /* the series that matters */
  --rz-data-2:var(--rz-text);
  --rz-data-3:var(--rz-muted);
  --rz-data-4:var(--rz-ctl);
  --rz-data-5:var(--rz-orange-deep);
}
@media (max-width:900px){
  :root{--rz-t32:clamp(24px,6.2vw,32px);--rz-t56:clamp(40px,10.8vw,56px);--rz-t96:clamp(60px,16.5vw,96px);--rz-s8:54px;--rz-s12:72px}
}
@media (min-width:1100px){ :root{--rz-gut:36px} }

/* ---------------------------------------------------------------------
   2. Mode tokens
   Graphite = dark (default, Raizer). Limestone = light (Raizer Ventures).
   Ablaq bands (.rz-band--stone / --graphite / --lit) carry their own tokens.
   --------------------------------------------------------------------- */
:root,
[data-mode="graphite"],
.rz-band--graphite,.rz-band--lit{
  --rz-bg:#0e141b; --rz-surf:#1a2026; --rz-surf2:#232930;
  --rz-text:#FFFFFF; --rz-muted:#B0B8C1;
  --rz-line:rgba(255,255,255,.08); --rz-line2:rgba(255,255,255,.18);
  --rz-ctl:#6B727B;            /* control boundary (fields, checkboxes): 3:1 or better */
  --rz-btn-ink:#0e141b;        /* label on orange: always ink (7.9:1) */
  --rz-sec-face:#3a4048;       /* secondary button extrusion */
  --rz-tile-face:#2c323a;      /* stat tile extrusion */
  --rz-hi-num:var(--rz-orange); /* .is-hi number: solid orange on Graphite (v1.1, G9) */
  --rz-grid-c:rgba(255,255,255,.045);
  --rz-sh-lo:rgba(0,0,0,.70); --rz-sh-hi:rgba(0,0,0,.55);
  --rz-hi:inset 0 1px 0 rgba(255,255,255,.06);
  --rz-b-amb:drop-shadow(0 10px 14px rgba(0,0,0,.60));
  --rz-b-key:drop-shadow(6px 6px 7px rgba(0,0,0,.80));
  --rz-lift:drop-shadow(10px 12px 16px rgba(0,0,0,.70));
  --rz-light-vis:visible;
  --rz-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B0B8C1' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  color-scheme:dark;
}
[data-mode="limestone"],
.rz-band--stone{
  --rz-bg:#F5F2EC; --rz-surf:#FBFAF7; --rz-surf2:#EAE6DE;
  --rz-text:#0e141b; --rz-muted:#615C55;
  --rz-line:#DCD7CD; --rz-line2:#C9C3B8;
  --rz-ctl:#8C867D;
  --rz-btn-ink:#0e141b;
  --rz-sec-face:#0e141b;
  --rz-tile-face:#D3CEC4;
  --rz-hi-num:var(--rz-text); /* .is-hi number on stone stays ink, with an rz-rule under it (G9) */
  --rz-grid-c:rgba(14,20,27,.05);
  --rz-sh-lo:rgba(14,20,27,.22); --rz-sh-hi:rgba(14,20,27,.16);
  --rz-hi:inset 0 1px 0 rgba(255,255,255,.9);
  --rz-b-amb:drop-shadow(0 9px 12px rgba(14,20,27,.20));
  --rz-b-key:drop-shadow(6px 6px 7px rgba(14,20,27,.32));
  --rz-lift:drop-shadow(10px 12px 16px rgba(14,20,27,.22));
  --rz-light-vis:hidden; /* Limestone is flat: no corner light */
  --rz-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e141b' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  color-scheme:light;
}
[data-mode]{background:var(--rz-bg);color:var(--rz-text)}

/* ---------------------------------------------------------------------
   3. Base
   --------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{hanging-punctuation:first last;font-synthesis:none;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--rz-bg);color:var(--rz-text);font-family:var(--rz-font-en);font-weight:400;font-size:var(--rz-t16);line-height:1.6;letter-spacing:0;-webkit-font-smoothing:antialiased;overflow-x:hidden}
:lang(ar){font-family:var(--rz-font-ar);letter-spacing:0;font-style:normal}
:lang(ar) *{letter-spacing:0 !important;font-style:normal}
[dir="rtl"]{text-align:right}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0} /* spacing comes from the rz-mt utilities and component gaps, in nines */
b,strong{font-weight:600}
:lang(ar) b,:lang(ar) strong{font-weight:700}
img,svg,video{max-width:100%}
.rz-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rz-tab{font-variant-numeric:tabular-nums lining-nums}
.rz-ac{font-size:.9em;letter-spacing:.04em} /* acronyms in running text: AI, CRM, ROI */
.rz-muted{color:var(--rz-muted)}
:focus-visible{outline:2px solid var(--rz-text);outline-offset:3px}

/* layout helpers (spacing in nines) */
.rz-wrap{max-width:var(--rz-max);margin-inline:auto;padding-inline:var(--rz-gut)}
.rz-stack>*+*{margin-top:var(--rz-s2)}
/* margin utilities (.rz-mt1–.rz-mt8) are defined at the end of the file so they win over component resets */
.rz-grid{display:grid;gap:var(--rz-s4);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .rz-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rz-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:640px) and (max-width:899px){ .rz-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))} }
.rz-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--rz-s2)}
/* added from the proof assets (add-back rule) */
.rz-split{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--rz-s2)} /* two ends of one row: logo + label, footnote + logo */
.rz-split--end{align-items:flex-end}
.rz-col{display:flex;flex-direction:column} /* column whose .rz-push child sinks to the bottom */
.rz-push{margin-top:auto !important}
.rz-ratio-2x1{aspect-ratio:2/1} .rz-ratio-3x2{aspect-ratio:3/2} .rz-ratio-16x9{aspect-ratio:16/9} .rz-ratio-4x5{aspect-ratio:4/5}

/* ---------------------------------------------------------------------
   4. Typography
   Jost 200 / 400 / 600 — Almarai 300 / 400 / 700 / 800.
   Sentence case everywhere; capitals only in labels and display caps.
   --------------------------------------------------------------------- */
/* label: 13px tracked caps, muted */
.rz-label{display:block;font-size:var(--rz-t13);font-weight:400;text-transform:uppercase;letter-spacing:.11em;line-height:1.4;color:var(--rz-muted)}
.rz-label .rz-sl{color:var(--rz-orange);margin:0 .4em} /* the label slash: solid orange */
.rz-label--rule::before{content:"";display:inline-block;vertical-align:middle;width:var(--rz-s4);height:2px;margin-inline-end:var(--rz-s2);margin-top:-.2em;background:var(--rz-orange)} /* 36px heading rule, solid */
.rz-label--ink{color:var(--rz-text)}
.rz-label:lang(ar){text-transform:none;font-weight:700;font-size:calc(var(--rz-t13) * var(--rz-arx))}

/* display caps: covers, section titles, slides, posts. 1–3 words, one per line */
.rz-display{margin:0;font-family:var(--rz-font-en);text-transform:uppercase;font-weight:200;font-size:var(--rz-t96);line-height:.95;letter-spacing:-.01em}
.rz-display>span{display:block}
.rz-display strong{font-weight:600}
.rz-display--md{font-size:var(--rz-t56)}
.rz-display:lang(ar){font-family:var(--rz-font-ar);text-transform:none;font-weight:300;font-size:calc(var(--rz-t56) * var(--rz-arx));line-height:1.2}
.rz-display:lang(ar) strong{font-weight:800}

/* the orange word: gradient text. One in the hero + at most two key headlines per page */
.rz-one{font-weight:600;background:var(--rz-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
:lang(ar) .rz-one,.rz-one:lang(ar){font-weight:800}
.rz-h1 .rz-one,.rz-h2 .rz-one,.rz-h3 .rz-one{font-weight:inherit}

/* sentence headlines */
.rz-hero,.rz-h1,.rz-h2,.rz-h3,.rz-h4{margin:0;text-wrap:balance;font-family:inherit}
.rz-hero{font-size:var(--rz-t96);font-weight:200;line-height:1.02;letter-spacing:-.025em}
.rz-h1{font-size:var(--rz-t56);font-weight:200;line-height:1.02;letter-spacing:-.025em}
.rz-h2{font-size:var(--rz-t32);font-weight:400;line-height:1.1;letter-spacing:-.02em}
.rz-h3{font-size:var(--rz-t20);font-weight:400;line-height:1.3}
.rz-h4{font-size:var(--rz-t16);font-weight:600;line-height:1.4}
.rz-hero:lang(ar),.rz-h1:lang(ar){font-weight:300;line-height:1.25;font-size:calc(var(--rz-t56) * var(--rz-arx))}
.rz-h2:lang(ar){line-height:1.3;font-size:calc(var(--rz-t32) * var(--rz-arx))}
.rz-h3:lang(ar){line-height:1.4;font-size:calc(var(--rz-t20) * var(--rz-arx))}
.rz-h4:lang(ar){font-weight:700;font-size:calc(var(--rz-t16) * var(--rz-arx))}

.rz-lede{margin:0;font-size:var(--rz-t20);line-height:1.5;color:var(--rz-muted);max-width:36em;text-wrap:pretty}
.rz-lede:lang(ar){font-size:calc(var(--rz-t20) * var(--rz-arx));line-height:1.75}
.rz-prose{max-width:65ch}
.rz-prose p{margin:0;text-wrap:pretty}
.rz-prose p+p{margin-top:var(--rz-s2)}
.rz-prose:lang(ar){font-size:calc(var(--rz-t16) * var(--rz-arx));line-height:1.75}
.rz-small{font-size:var(--rz-t13);line-height:1.6;color:var(--rz-muted)}
.rz-small:lang(ar){font-size:calc(var(--rz-t13) * var(--rz-arx))}

/* text link: ink with a solid orange underline */
.rz-link{color:var(--rz-text);font-weight:600;text-decoration:underline;text-decoration-color:var(--rz-orange);text-decoration-thickness:2px;text-underline-offset:4px}
.rz-link:hover{color:var(--rz-muted)}

/* section head: label, headline, one-line lede — every section opens this way */
.rz-head{max-width:48em}
.rz-head>.rz-label{margin-bottom:var(--rz-s3)}
.rz-head>.rz-lede{margin-top:var(--rz-s2)}

/* big numbers: 56–96px, weight 200, tabular, small label under. They never count up */
.rz-bignum{font-size:var(--rz-t96);font-weight:200;line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums}

/* pull quote: 32px, opening mark hangs outside the text edge. Arabic uses « » */
.rz-quote{margin:0}
.rz-quote blockquote{margin:0}
.rz-quote p{margin:0;font-size:var(--rz-t32);line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.rz-quote figcaption{margin-top:var(--rz-s2)}
@supports not (hanging-punctuation:first){ .rz-quote p{text-indent:-.4em} .rz-quote:lang(ar) p{text-indent:0} }
.rz-quote:lang(ar) p{font-weight:300;font-size:calc(var(--rz-t32) * var(--rz-arx));line-height:1.4}

/* ---------------------------------------------------------------------
   5. Shape: the cut, the ring, the corner light, the grid texture
   --------------------------------------------------------------------- */
.rz-cut{--c:var(--rz-cut-md);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%)}
.rz-cut--sm{--c:var(--rz-cut-sm)} .rz-cut--card{--c:var(--rz-cut-card)} .rz-cut--lg{--c:var(--rz-cut-lg)} .rz-cut--xl{--c:var(--rz-cut-xl)}
/* 1px hairline that follows the cut (place on a clipped element) */
.rz-ring{position:relative;--b:1px}
.rz-ring::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--ring,var(--rz-line));
  --ci:calc(var(--c) - var(--b) * 0.5858);
  clip-path:polygon(evenodd,0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 0,
    var(--b) var(--b),var(--b) calc(100% - var(--b)),calc(100% - var(--b) - var(--ci)) calc(100% - var(--b)),
    calc(100% - var(--b)) calc(100% - var(--b) - var(--ci)),calc(100% - var(--b)) var(--b),var(--b) var(--b))}
/* lifted: things you read float. Put on the WRAPPER of a clipped element so the shadow follows the cut */
.rz-lift{filter:var(--rz-lift)}

/* Graphite corner light: one per canvas, top-left only, hidden on Limestone */
.rz-lit{position:relative;isolation:isolate}
.rz-lit::before{content:"";position:absolute;top:0;left:0;width:min(100%,1440px);height:min(100%,960px);z-index:-1;pointer-events:none;
  transform-origin:0 0;visibility:var(--rz-light-vis);background:var(--rz-light)}
/* 36px grid texture (the cover grid). Combine with rz-lit on canvases */
.rz-gridtex{position:relative;isolation:isolate}
.rz-gridtex::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,var(--rz-grid-c) 0 1px,transparent 1px 36px),repeating-linear-gradient(90deg,var(--rz-grid-c) 0 1px,transparent 1px 36px)}

/* ---------------------------------------------------------------------
   6. Ablaq bands: full-bleed sections that alternate stone and graphite.
   Hard edges, never cut, no shadow or fade between bands.
   --------------------------------------------------------------------- */
.rz-band{display:block;background:var(--rz-bg);color:var(--rz-text);padding-block:var(--rz-s12)}
.rz-band--tight{padding-block:var(--rz-s8)}
/* relative band: always the OTHER mode to the page, so a mode toggle swaps the whole rhythm */
:root:not([data-mode="limestone"]) .rz-band--alt{
  --rz-bg:#F5F2EC; --rz-surf:#FBFAF7; --rz-surf2:#EAE6DE; --rz-text:#0e141b; --rz-muted:#615C55; --rz-line:#DCD7CD; --rz-line2:#C9C3B8; --rz-ctl:#8C867D;
  --rz-sec-face:#0e141b; --rz-tile-face:#D3CEC4; --rz-hi-num:#0e141b; --rz-grid-c:rgba(14,20,27,.05); --rz-sh-lo:rgba(14,20,27,.22); --rz-sh-hi:rgba(14,20,27,.16);
  --rz-hi:inset 0 1px 0 rgba(255,255,255,.9); --rz-b-amb:drop-shadow(0 9px 12px rgba(14,20,27,.20)); --rz-b-key:drop-shadow(6px 6px 7px rgba(14,20,27,.32));
  --rz-lift:drop-shadow(10px 12px 16px rgba(14,20,27,.22)); --rz-light-vis:hidden; color-scheme:light;
  --rz-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e141b' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
:root[data-mode="limestone"] .rz-band--alt{
  --rz-bg:#0e141b; --rz-surf:#1a2026; --rz-surf2:#232930; --rz-text:#FFFFFF; --rz-muted:#B0B8C1; --rz-line:rgba(255,255,255,.08); --rz-line2:rgba(255,255,255,.18); --rz-ctl:#6B727B;
  --rz-sec-face:#3a4048; --rz-tile-face:#2c323a; --rz-hi-num:#FF8B26; --rz-grid-c:rgba(255,255,255,.045); --rz-sh-lo:rgba(0,0,0,.70); --rz-sh-hi:rgba(0,0,0,.55);
  --rz-hi:inset 0 1px 0 rgba(255,255,255,.06); --rz-b-amb:drop-shadow(0 10px 14px rgba(0,0,0,.60)); --rz-b-key:drop-shadow(6px 6px 7px rgba(0,0,0,.80));
  --rz-lift:drop-shadow(10px 12px 16px rgba(0,0,0,.70)); --rz-light-vis:visible; color-scheme:dark;
  --rz-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B0B8C1' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}

/* segmented control: flat, for switching a view (mode, tab, period). Not a press block */
.rz-seg{display:inline-flex;flex-wrap:wrap}
.rz-seg>button{font:inherit;font-size:var(--rz-t13);line-height:1;background:transparent;color:var(--rz-muted);border:0;border-radius:0;
  box-shadow:inset 0 0 0 1px var(--rz-line2);padding:var(--rz-s1) var(--rz-s2);margin-inline-end:-1px;cursor:pointer;min-height:36px}
.rz-seg>button:hover{color:var(--rz-text)}
.rz-seg>button[aria-pressed="true"]{background:var(--rz-text);color:var(--rz-bg);box-shadow:inset 0 0 0 1px var(--rz-text)}
.rz-band--lit{position:relative;isolation:isolate;overflow:hidden}
.rz-band--lit::before{content:"";position:absolute;top:0;left:0;width:min(100%,1440px);height:min(100%,960px);z-index:-1;pointer-events:none;transform-origin:0 0;background:var(--rz-light)}

/* ---------------------------------------------------------------------
   7. Card — read surface: lifted only, 20px cut, 1px hairline.
   One element: shadow on the card, surface + ring drawn by pseudo layers.
   --------------------------------------------------------------------- */
.rz-card{--c:var(--rz-cut-card);position:relative;isolation:isolate;display:block;padding:var(--rz-s4);color:var(--rz-text);filter:var(--rz-lift);min-width:0}
.rz-card::before,.rz-card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.rz-card::before{background:var(--rz-surf);box-shadow:var(--rz-hi);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%)}
.rz-card::after{--b:1px;--ci:calc(var(--c) - var(--b) * 0.5858);background:var(--ring,var(--rz-line));
  clip-path:polygon(evenodd,0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 0,
    var(--b) var(--b),var(--b) calc(100% - var(--b)),calc(100% - var(--b) - var(--ci)) calc(100% - var(--b)),
    calc(100% - var(--b)) calc(100% - var(--b) - var(--ci)),calc(100% - var(--b)) var(--b),var(--b) var(--b))}
.rz-card--xl{--c:var(--rz-cut-xl);padding:var(--rz-s6)} /* feature panel: the large cut */
.rz-card>:first-child{margin-top:0}
a.rz-card{text-decoration:none;transition:transform var(--rz-d-ui) var(--rz-ease-ui)}
a.rz-card:hover{transform:translateY(-3px)}
.rz-card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--rz-s2)}

/* ---------------------------------------------------------------------
   8. Image frame — read surface: lifted, 36px cut (63px with --xl).
   figure.rz-frame wrapping one image/video/div. The shadow sits on the figure,
   the cut on its child.
   --------------------------------------------------------------------- */
.rz-frame{--c:var(--rz-cut-lg);margin:0;filter:var(--rz-lift);min-width:0}
.rz-frame--xl{--c:var(--rz-cut-xl)}
:where(.rz-frame>:not(figcaption)){display:block;width:100%}
.rz-frame>:not(figcaption){clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%)}
.rz-frame>img,.rz-frame>video{height:auto;object-fit:cover}
.rz-frame figcaption{margin-top:var(--rz-s3);font-size:var(--rz-t13);color:var(--rz-muted)}
.rz-frame__ph{aspect-ratio:2/1;background:var(--rz-surf2);display:flex !important;align-items:center;justify-content:center;color:var(--rz-muted)}
.rz-frame__ph .rz-ic{width:45px;height:45px}
.rz-frame__canvas{position:relative;isolation:isolate;overflow:hidden;background:var(--rz-bg);color:var(--rz-text)}

/* ---------------------------------------------------------------------
   9. Buttons — things you press are blocks: extruded 5px down-right,
   lifted, primary with the one orange underglow.
   <a class="rz-btn" href="#"><span class="rz-btn__face">Book a call <svg class="rz-ic rz-ic--dir">…</svg></span></a>
   Only transform and opacity animate.
   --------------------------------------------------------------------- */
.rz-btn{--c:var(--rz-cut-sm);--d:var(--rz-depth);--f:var(--rz-orange-deep);
  position:relative;isolation:isolate;display:inline-flex;vertical-align:top;margin:0 var(--d) var(--d) 0;padding:0;border:0;background:none;
  font:inherit;color:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 7px 10px rgba(255,139,38,.30)) drop-shadow(9px 11px 8px var(--rz-sh-lo))}
/* extrusion: the swept side faces of the block */
.rz-btn::before{content:"";position:absolute;top:0;left:0;width:calc(100% + var(--d));height:calc(100% + var(--d));z-index:-1;pointer-events:none;background:var(--f);
  clip-path:polygon(calc(100% - var(--d)) 0,100% var(--d),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--d) 100%,0 calc(100% - var(--d)),
    calc(100% - var(--d) - var(--c)) calc(100% - var(--d)),calc(100% - var(--d)) calc(100% - var(--d) - var(--c)));
  transition:transform var(--rz-d-ui) var(--rz-ease-ui),opacity var(--rz-d-press) var(--rz-ease-ui)}
/* hover shadow: deeper, fades in */
.rz-btn::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:var(--rz-sh-hi);filter:blur(14px);transform:translate(12px,18px);opacity:0;
  transition:opacity var(--rz-d-ui) var(--rz-ease-ui)}
.rz-btn__face{--rc:currentColor;--rw:0px;position:relative;display:inline-flex;align-items:center;gap:var(--rz-s1);height:54px;padding:0 var(--rz-s3);
  font-family:var(--rz-font-en);font-size:var(--rz-t16);font-weight:600;line-height:1;white-space:nowrap;
  background:var(--rz-orange);color:var(--rz-btn-ink);box-shadow:var(--rz-hi);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%);
  transition:transform var(--rz-d-ui) var(--rz-ease-ui)}
.rz-btn:hover::before,.rz-btn:hover .rz-btn__face{transform:translateY(-2px)}
.rz-btn:hover::after{opacity:1}
.rz-btn:active::before{transform:none;opacity:0;transition-duration:var(--rz-d-press)}
.rz-btn:active .rz-btn__face{transform:translate(var(--d),var(--d));transition-duration:var(--rz-d-press)}
.rz-btn:active::after{opacity:0}
.rz-btn:focus-visible{outline:none}
.rz-btn:focus-visible .rz-btn__face{outline:2px solid currentColor;outline-offset:-6px}
/* secondary: surface face, ink ring, graphite extrusion, no glow */
.rz-btn--secondary{--f:var(--rz-sec-face);filter:drop-shadow(9px 11px 8px var(--rz-sh-lo))}
.rz-btn--secondary .rz-btn__face{--rw:1.5px;background:
  linear-gradient(to bottom right,transparent calc(50% - var(--rw)),var(--rc) calc(50% - var(--rw))) right bottom/var(--c) var(--c) no-repeat,var(--rz-surf);
  color:var(--rz-text);box-shadow:inset 0 0 0 var(--rw) var(--rc)}
/* sizes */
.rz-btn--sm .rz-btn__face{height:36px;padding:0 var(--rz-s2);font-size:var(--rz-t13)}
.rz-btn--lg .rz-btn__face{height:72px;padding:0 var(--rz-s4);font-size:var(--rz-t20)}
/* Arabic */
.rz-btn__face:lang(ar){font-family:var(--rz-font-ar);font-weight:700;font-size:calc(var(--rz-t16) * var(--rz-arx))}
.rz-btn--sm .rz-btn__face:lang(ar){font-size:calc(var(--rz-t13) * var(--rz-arx))}
/* disabled: flat, pressed into the depth, no shadow, no motion */
.rz-btn:disabled,.rz-btn[aria-disabled="true"]{filter:none;cursor:not-allowed;pointer-events:none}
.rz-btn:disabled::before,.rz-btn:disabled::after,.rz-btn[aria-disabled="true"]::before,.rz-btn[aria-disabled="true"]::after{display:none}
.rz-btn:disabled .rz-btn__face,.rz-btn[aria-disabled="true"] .rz-btn__face{--rw:1px;--rc:var(--rz-line2);transform:translate(var(--d),var(--d));
  background:linear-gradient(to bottom right,transparent calc(50% - var(--rw)),var(--rc) calc(50% - var(--rw))) right bottom/var(--c) var(--c) no-repeat,var(--rz-surf2);
  color:var(--rz-muted);box-shadow:inset 0 0 0 var(--rw) var(--rc)}
.rz-btns{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--rz-s2)}

/* ---------------------------------------------------------------------
   10. Icons — inline SVG, stroke only, 0/45/90/135 degrees, square caps.
   <svg class="rz-ic" aria-hidden="true"><use href="#i-arrow"/></svg>
   --------------------------------------------------------------------- */
.rz-ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;vertical-align:middle}
.rz-ic--lg{width:27px;height:27px}
.rz-ic--orange{color:var(--rz-orange)}
[dir="rtl"] .rz-ic--dir{transform:scaleX(-1)} /* arrows flip in Arabic */

/* ---------------------------------------------------------------------
   11. Logo — always the SVG, never typed. Gradient on both modes,
   white on Graphite only, ink for one-colour light uses. 6:1, never stretched.
   --------------------------------------------------------------------- */
.rz-logo{display:block;width:144px;height:auto;aspect-ratio:6/1;flex:none}
.rz-logo--sm{width:90px} .rz-logo--lg{width:216px} .rz-logo--xl{width:288px}

/* ---------------------------------------------------------------------
   12. Stat tiles — press-family blocks: extruded 3px + lifted, 12px cut.
   <div class="rz-stat-row"><div class="rz-stat">…</div>…</div>
   The row carries the extrusion and shadow; use it even for one tile.
   --------------------------------------------------------------------- */
.rz-stat-row{--f:var(--rz-tile-face);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(198px,100%),1fr));gap:var(--rz-s2);
  filter:drop-shadow(1px 1px 0 var(--f)) drop-shadow(1px 1px 0 var(--f)) drop-shadow(1px 1px 0 var(--f)) var(--rz-b-amb) var(--rz-b-key)}
.rz-stat-row--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.rz-stat-row--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){ .rz-stat-row--4,.rz-stat-row--3{grid-template-columns:repeat(2,minmax(0,1fr))} }
.rz-stat{--c:var(--rz-cut-md);position:relative;min-width:0;padding:var(--rz-s3) var(--rz-s2);background:var(--rz-surf);box-shadow:var(--rz-hi);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%)}
.rz-stat::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--rz-line);--b:1px;--ci:calc(var(--c) - var(--b) * 0.5858);
  clip-path:polygon(evenodd,0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 0,
    var(--b) var(--b),var(--b) calc(100% - var(--b)),calc(100% - var(--b) - var(--ci)) calc(100% - var(--b)),
    calc(100% - var(--b)) calc(100% - var(--b) - var(--ci)),calc(100% - var(--b)) var(--b),var(--b) var(--b))}
.rz-stat__num{display:block;font-weight:200;font-size:var(--rz-t56);line-height:1;letter-spacing:-.025em;font-variant-numeric:tabular-nums lining-nums}
.rz-stat__label{display:block;margin-top:var(--rz-s1)}
.rz-stat__bar{display:block;height:2px;background:var(--rz-line);margin-top:var(--rz-s2);position:relative}
.rz-stat__bar>i{position:absolute;top:0;bottom:0;left:0;background:var(--rz-orange)}
.rz-stat .rz-badge{margin-top:var(--rz-s2)}

/* ---------------------------------------------------------------------
   13. Badge / tag — uncut, 13px tracked caps. Solid colours only.
   --------------------------------------------------------------------- */
.rz-badge{display:inline-flex;align-items:center;gap:var(--rz-s1);font-size:var(--rz-t13);font-weight:400;text-transform:uppercase;letter-spacing:.11em;line-height:1;
  padding:7px 9px;color:var(--rz-muted);box-shadow:inset 0 0 0 1px var(--rz-line2);white-space:nowrap;vertical-align:middle}
.rz-badge--ink{background:var(--rz-text);color:var(--rz-bg);box-shadow:none}
.rz-badge--orange{background:var(--rz-orange);color:var(--rz-ink);box-shadow:none}
.rz-badge .rz-ic{width:13px;height:13px}
.rz-badge:lang(ar){text-transform:none;font-weight:700;font-size:calc(var(--rz-t13) * var(--rz-arx))}

/* ---------------------------------------------------------------------
   14. Forms — fields are flat (not pressed, not read): no shadow, no depth,
   the 9px cut, a 1px control line that follows the cut.
   Focus = 2px ink/white line. Error = 2px deep orange line + ink message
   with an orange marker (small orange text fails on stone).
   --------------------------------------------------------------------- */
.rz-field{display:grid;gap:var(--rz-s1);min-width:0}
.rz-field__label{font-size:var(--rz-t13);font-weight:400;text-transform:uppercase;letter-spacing:.11em;line-height:1.4;color:var(--rz-text)}
.rz-field__label:lang(ar){text-transform:none;font-weight:700;font-size:calc(var(--rz-t13) * var(--rz-arx))}
.rz-field__help{font-size:var(--rz-t13);line-height:1.6;color:var(--rz-muted)}
.rz-field__error{display:none;align-items:flex-start;gap:var(--rz-s1);font-size:var(--rz-t13);line-height:1.6;color:var(--rz-text)}
.rz-field__error .rz-ic{width:13px;height:13px;margin-top:.25em;color:var(--rz-orange)}
.rz-field__help:lang(ar),.rz-field__error:lang(ar){font-size:calc(var(--rz-t13) * var(--rz-arx))}
.rz-field--error .rz-field__error{display:flex}

.rz-input{--c:var(--rz-cut-sm);--rc:var(--rz-ctl);--rw:1px;
  -webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;min-height:54px;margin:0;padding:0 var(--rz-s2);border:0;border-radius:0;outline:none;
  font:inherit;font-size:var(--rz-t16);line-height:1.5;color:var(--rz-text);
  background:linear-gradient(to bottom right,transparent calc(50% - var(--rw)),var(--rc) calc(50% - var(--rw))) right bottom/var(--c) var(--c) no-repeat,var(--rz-surf);
  box-shadow:inset 0 0 0 var(--rw) var(--rc);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%)}
.rz-input::placeholder{color:var(--rz-muted);opacity:1}
.rz-input:hover{--rc:var(--rz-muted)}
.rz-input:focus,.rz-input:focus-visible{--rc:var(--rz-text);--rw:2px}
.rz-field--error .rz-input,.rz-input[aria-invalid="true"]{--rc:var(--rz-orange-deep);--rw:2px}
.rz-input:disabled{--rc:var(--rz-line2);background:var(--rz-surf2);color:var(--rz-muted);cursor:not-allowed}
textarea.rz-input{min-height:144px;padding:var(--rz-s2);resize:vertical}
select.rz-input{padding-right:var(--rz-s6);cursor:pointer;
  background:var(--rz-chev) right var(--rz-s2) center/18px 18px no-repeat,
    linear-gradient(to bottom right,transparent calc(50% - var(--rw)),var(--rc) calc(50% - var(--rw))) right bottom/var(--c) var(--c) no-repeat,var(--rz-surf)}
[dir="rtl"] select.rz-input{padding-right:var(--rz-s2);padding-left:var(--rz-s6);
  background:var(--rz-chev) left var(--rz-s2) center/18px 18px no-repeat,
    linear-gradient(to bottom right,transparent calc(50% - var(--rw)),var(--rc) calc(50% - var(--rw))) right bottom/var(--c) var(--c) no-repeat,var(--rz-surf)}
.rz-input:lang(ar){font-size:calc(var(--rz-t16) * var(--rz-arx))}

/* checkbox: uncut square (controls under 27px are never cut). Radio: a diamond — no circles in the system */
.rz-check{display:flex;align-items:flex-start;gap:var(--rz-s2);cursor:pointer;line-height:1.5}
.rz-check+.rz-check{margin-top:var(--rz-s1)}
.rz-checkbox,.rz-radio{-webkit-appearance:none;appearance:none;flex:none;margin:0;cursor:pointer;background:var(--rz-surf);box-shadow:inset 0 0 0 1.5px var(--rz-ctl)}
.rz-checkbox{width:18px;height:18px;margin-top:3px}
.rz-checkbox:checked{box-shadow:none;background:var(--rz-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e141b' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center/14px no-repeat}
.rz-radio{width:13px;height:13px;margin:6px 2px 0;padding:3px;transform:rotate(45deg)}
.rz-radio:checked{box-shadow:inset 0 0 0 1.5px var(--rz-text);background:linear-gradient(var(--rz-orange),var(--rz-orange)) content-box,var(--rz-surf)}
.rz-checkbox:focus-visible,.rz-radio:focus-visible{outline:2px solid var(--rz-text);outline-offset:3px}
.rz-checkbox:disabled,.rz-radio:disabled{opacity:.45;cursor:not-allowed}
.rz-fieldset{border:0;margin:0;padding:0;min-width:0}
.rz-fieldset>legend{padding:0;margin-bottom:var(--rz-s2)}
.rz-form{display:grid;gap:var(--rz-s3);max-width:540px}

/* ---------------------------------------------------------------------
   15. Table — tabular figures, hairlines, solid orange only (data).
   Wrap in .rz-table-wrap so it scrolls inside itself on phones.
   --------------------------------------------------------------------- */
.rz-table-wrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.rz-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums lining-nums;font-size:var(--rz-t16)}
.rz-table caption{caption-side:bottom;text-align:start;padding-top:var(--rz-s1);font-size:var(--rz-t13);color:var(--rz-muted)}
.rz-table th{text-align:start;font-weight:400;font-size:var(--rz-t13);letter-spacing:.11em;text-transform:uppercase;color:var(--rz-muted);padding:0 var(--rz-s2) var(--rz-s1) 0;border-bottom:1px solid var(--rz-line2);white-space:nowrap}
.rz-table td{padding:var(--rz-s1) var(--rz-s2) var(--rz-s1) 0;border-bottom:1px solid var(--rz-line);vertical-align:baseline}
.rz-table th:last-child,.rz-table td:last-child{padding-right:0}
.rz-table .rz-num{text-align:end;white-space:nowrap}
.rz-table tfoot td{font-weight:600;border-bottom:0;border-top:1px solid var(--rz-line2)}
.rz-table th:lang(ar){text-transform:none;font-weight:700;letter-spacing:0}
.rz-meter{display:inline-block;width:90px;height:2px;background:var(--rz-line2);position:relative;vertical-align:middle}
.rz-meter>i{position:absolute;top:0;bottom:0;left:0;background:var(--rz-orange)}

/* ---------------------------------------------------------------------
   16. Notice / alert — flat sunk panel, 12px cut, orange marker icon.
   Never a coloured side border. Never a shadow (it is not raised).
   --------------------------------------------------------------------- */
.rz-notice{--c:var(--rz-cut-md);display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--rz-s2);padding:var(--rz-s2) var(--rz-s3) var(--rz-s2) var(--rz-s2);
  background:var(--rz-surf2);color:var(--rz-text);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%)}
.rz-notice>.rz-ic{margin-top:3px;color:var(--rz-orange)}
.rz-notice__title{display:block;font-weight:600}
.rz-notice__body{margin:0;color:var(--rz-muted)}
.rz-notice__title+.rz-notice__body{margin-top:2px}
.rz-notice--quiet>.rz-ic{color:var(--rz-muted)}

/* ---------------------------------------------------------------------
   17. Dividers
   --------------------------------------------------------------------- */
.rz-divider{border:0;height:1px;margin:var(--rz-s6) 0;background:var(--rz-line)}
.rz-rule{display:block;width:var(--rz-s4);height:2px;border:0;margin:0;background:var(--rz-orange)} /* 36px heading rule, solid */
/* divider band: big gradient shape with the 63px cut. Once per page at most */
.rz-cutband{--c:var(--rz-cut-xl);display:block;height:var(--rz-s8);background:var(--rz-gradient);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%)}

/* ---------------------------------------------------------------------
   18. Navigation bar — logo (SVG, never text), links, one CTA.
   Below 900px the links fold into a menu (raizer.js toggles it).
   --------------------------------------------------------------------- */
.rz-nav{position:sticky;top:0;z-index:50;background:var(--rz-bg);color:var(--rz-text);box-shadow:0 1px 0 var(--rz-line)}
.rz-nav__in{max-width:var(--rz-max);margin-inline:auto;padding-inline:var(--rz-gut);min-height:72px;display:flex;align-items:center;gap:var(--rz-s4)}
.rz-nav__brand{display:block;flex:none;padding:var(--rz-s1) 0}
.rz-nav__brand .rz-logo{width:108px}
.rz-nav__menu{display:flex;align-items:center;gap:var(--rz-s4);margin-inline-start:auto}
.rz-nav__links{display:flex;align-items:center;gap:var(--rz-s4);margin:0;padding:0;list-style:none}
.rz-nav__links a{display:block;padding:var(--rz-s1) 0;color:var(--rz-muted);text-decoration:none;font-size:var(--rz-t16)}
.rz-nav__links a:hover{color:var(--rz-text)}
.rz-nav__links a[aria-current="page"]{color:var(--rz-text);text-decoration:underline;text-decoration-color:var(--rz-orange);text-decoration-thickness:2px;text-underline-offset:9px}
.rz-nav__links a:lang(ar){font-size:calc(var(--rz-t16) * var(--rz-arx))}
.rz-nav__toggle{display:none;margin-inline-start:auto;width:45px;height:45px;align-items:center;justify-content:center;padding:0;border:0;background:none;color:var(--rz-text);cursor:pointer}
.rz-nav__toggle .rz-ic{width:27px;height:27px}
.rz-nav__toggle .rz-nav__close{display:none}
.rz-nav__toggle[aria-expanded="true"] .rz-nav__open{display:none}
.rz-nav__toggle[aria-expanded="true"] .rz-nav__close{display:block}
@media (max-width:899px){
  .rz-nav__in{flex-wrap:wrap;gap:0 var(--rz-s2);min-height:63px}
  .rz-nav__toggle{display:inline-flex}
  .rz-nav__menu{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:var(--rz-s3);margin:0;padding:var(--rz-s2) 0 var(--rz-s4);border-top:1px solid var(--rz-line)}
  .rz-nav[data-open] .rz-nav__menu{display:flex}
  .rz-nav__links{flex-direction:column;align-items:stretch;gap:0}
  .rz-nav__links a{padding:var(--rz-s2) 0;border-bottom:1px solid var(--rz-line);font-size:var(--rz-t20)}
  .rz-nav__links a[aria-current="page"]{text-underline-offset:6px}
  html:not(.rz-js) .rz-nav__menu{display:flex} /* no JS: show the links */
  html:not(.rz-js) .rz-nav__toggle{display:none}
}

/* ---------------------------------------------------------------------
   19. Footer — logo, origin line, link groups, small print.
   Takes the opposite band to the section above it (Ablaq).
   --------------------------------------------------------------------- */
.rz-footer{background:var(--rz-bg);color:var(--rz-text);padding-block:var(--rz-s8) var(--rz-s6)}
.rz-footer__in{max-width:var(--rz-max);margin-inline:auto;padding-inline:var(--rz-gut);display:grid;gap:var(--rz-s6);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){ .rz-footer__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.rz-footer__cols{display:grid;gap:var(--rz-s4);grid-template-columns:repeat(auto-fit,minmax(144px,1fr))}
.rz-footer__origin{margin:var(--rz-s3) 0 0;font-size:var(--rz-t20);line-height:1.4;max-width:24em;text-wrap:balance}
.rz-footer__origin:lang(ar){font-size:calc(var(--rz-t20) * var(--rz-arx))}
.rz-footer__col ul{list-style:none;margin:var(--rz-s2) 0 0;padding:0;display:grid;gap:var(--rz-s1)}
.rz-footer__col a{color:var(--rz-muted);text-decoration:none}
.rz-footer__col a:hover{color:var(--rz-text)}
.rz-footer__base{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--rz-s1) var(--rz-s3);padding-top:var(--rz-s3);border-top:1px solid var(--rz-line);font-size:var(--rz-t13);color:var(--rz-muted)}

/* ---------------------------------------------------------------------
   20. Fixed canvases — posts, slides, covers.
   Author at HALF size and export at 2x (deviceScaleFactor 2) so the fixed
   type scale stays intact: a 1080x1350 post is a 540x675 canvas.
   A4 covers are authored at true size (210mm x 297mm).
   --------------------------------------------------------------------- */
.rz-canvas{position:relative;isolation:isolate;overflow:hidden;background:var(--rz-bg);color:var(--rz-text);display:flex;flex-direction:column}
.rz-canvas--post{width:540px;height:675px;padding:var(--rz-s4)}
.rz-canvas--slide{width:960px;height:540px;padding:var(--rz-s6)}
.rz-canvas--a4{width:210mm;height:297mm;padding:var(--rz-s8) var(--rz-s6)}
/* fixed canvases never scale their type down on small screens */
.rz-canvas{--rz-t32:32px;--rz-t56:56px;--rz-t96:96px;--rz-s8:72px;--rz-s12:108px}

/* ---------------------------------------------------------------------
   21. Motion — raizer.js adds .rz-js to <html> and drives entrances.
   Without JS everything is visible. Transform and opacity only.
   --------------------------------------------------------------------- */
.rz-js .rz-pre{opacity:0}
.rz-logo-wipe svg{display:block;width:100%;height:auto}
@media (prefers-reduced-motion:reduce){
  .rz-btn::before,.rz-btn__face,a.rz-card{transition:none !important}
  .rz-btn:hover::before,.rz-btn:hover .rz-btn__face,.rz-btn:active .rz-btn__face,a.rz-card:hover{transform:none}
}

/* ---------------------------------------------------------------------
   22. Print — PDF engines draw a hairline box around clipped gradient
   text, so the orange word prints in the gradient's mid stop.
   --------------------------------------------------------------------- */
@media print{
  html,body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rz-one{background:none !important;-webkit-text-fill-color:#EF7025 !important;color:#EF7025 !important}
  .rz-nav{position:static}
  .rz-nav__toggle{display:none !important}
  .rz-js .rz-pre{opacity:1 !important}
}

/* ---------------------------------------------------------------------
   22A. App components (v1.1, 17 October 2026) — for internal apps:
   CRM, Life Dashboard, proposals. Tokens only. Spec: Rebrand Plan §4.
   --------------------------------------------------------------------- */
/* G1 app nav: same as rz-nav, up to 8 links. Folds below 900px exactly like rz-nav */
.rz-nav--app .rz-nav__brand .rz-logo{width:90px}
@media (min-width:900px){
  .rz-nav--app .rz-nav__in{min-height:54px}
  .rz-nav--app .rz-nav__links{gap:var(--rz-s3)}
  .rz-nav--app .rz-nav__links a{font-size:var(--rz-t13)}
}

/* G2 bottom tab bar on phones. Hidden from 900px */
.rz-tabbar{position:fixed;inset-inline:0;bottom:0;z-index:50;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  background:var(--rz-bg);box-shadow:0 -1px 0 var(--rz-line);padding-bottom:env(safe-area-inset-bottom)}
.rz-tabbar__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--rz-s1);min-height:54px;padding:var(--rz-s1) 0;margin:0;border:0;border-radius:0;background:none;
  font:inherit;font-size:var(--rz-t13);font-weight:400;text-transform:uppercase;letter-spacing:.11em;line-height:1.4;color:var(--rz-muted);text-decoration:none;cursor:pointer}
.rz-tabbar__item .rz-ic{width:18px;height:18px}
.rz-tabbar__item[aria-pressed="true"]{color:var(--rz-text);box-shadow:inset 0 2px 0 var(--rz-orange)}
.rz-tabbar__item:lang(ar){text-transform:none;letter-spacing:0;font-weight:700;font-size:calc(var(--rz-t13) * var(--rz-arx))}
@media (min-width:900px){ .rz-tabbar{display:none} }

/* G3 modal + overlay. A read surface: lifted, 20px cut (surface drawn by ::before so the shadow follows the cut).
   Use dialog.rz-modal with showModal(), or div.rz-modal inside .rz-overlay.is-open */
.rz-overlay{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:var(--rz-gut);background:rgba(14,20,27,.72)}
.rz-overlay.is-open{display:flex}
dialog.rz-modal::backdrop{background:rgba(14,20,27,.72)}
.rz-modal{--c:var(--rz-cut-card);position:relative;isolation:isolate;display:flex;flex-direction:column;width:min(720px,100% - 2*var(--rz-gut));max-width:none;max-height:86vh;
  margin:auto;padding:0;border:0;background:transparent;color:var(--rz-text);filter:var(--rz-lift)}
dialog.rz-modal:not([open]){display:none}
.rz-modal::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--rz-surf);box-shadow:var(--rz-hi);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%)}
.rz-modal__head{flex:none;padding:var(--rz-s3);border-bottom:1px solid var(--rz-line)}
.rz-modal__body{flex:1 1 auto;min-height:0;overflow:auto;padding:var(--rz-s3)}
.rz-modal__foot{flex:none;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:flex-start;gap:var(--rz-s2);padding:var(--rz-s3);border-top:1px solid var(--rz-line)} /* flex-end = right, left in RTL */
@keyframes rz-k-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes rz-k-fade{from{opacity:0}to{opacity:1}}
dialog.rz-modal[open],.rz-overlay.is-open>.rz-modal{animation:rz-k-rise var(--rz-d-enter) var(--rz-ease-in) both}
@media (max-width:639px){
  .rz-overlay{align-items:flex-end;padding:0}
  .rz-modal{width:100%;margin:auto 0 0}
}

/* G4 filter chips (multi-select) + rz-seg links and the .is-on alias */
.rz-chip{display:inline-flex;align-items:center;gap:var(--rz-s1);height:27px;padding:0 var(--rz-s2);margin:0;border:0;border-radius:0;background:transparent;
  font:inherit;font-size:var(--rz-t13);line-height:1;color:var(--rz-muted);box-shadow:inset 0 0 0 1px var(--rz-line2);white-space:nowrap;text-decoration:none;cursor:pointer}
.rz-chip:hover{color:var(--rz-text)}
.rz-chip[aria-pressed="true"],.rz-chip.is-on{background:var(--rz-text);color:var(--rz-bg);box-shadow:inset 0 0 0 1px var(--rz-text)}
.rz-chip .rz-ic{width:13px;height:13px}
.rz-seg>a{display:inline-flex;align-items:center;font-size:var(--rz-t13);line-height:1;color:var(--rz-muted);text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--rz-line2);padding:var(--rz-s1) var(--rz-s2);margin-inline-end:-1px;min-height:36px}
.rz-seg>a:hover{color:var(--rz-text)}
.rz-seg>.is-on,.rz-seg>a[aria-current="page"]{background:var(--rz-text);color:var(--rz-bg);box-shadow:inset 0 0 0 1px var(--rz-text)}

/* G5 toast: a floating notice. Hidden until .is-on */
.rz-toast{--c:var(--rz-cut-md);position:fixed;z-index:95;bottom:var(--rz-s4);left:50%;translate:-50% 0;isolation:isolate;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--rz-s2);width:max-content;max-width:min(540px,100% - 2*var(--rz-gut));
  padding:var(--rz-s2) var(--rz-s3) var(--rz-s2) var(--rz-s2);color:var(--rz-text);filter:var(--rz-lift);
  opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity var(--rz-d-ui) var(--rz-ease-ui),transform var(--rz-d-ui) var(--rz-ease-ui)}
.rz-toast::before,.rz-toast::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.rz-toast::before{background:var(--rz-surf2);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%)}
.rz-toast.is-on{opacity:1;transform:none;pointer-events:auto}
.rz-toast>.rz-ic{margin-top:3px;color:var(--rz-orange)}
.rz-toast__body{margin:0}
/* --alert: #i-alert + a 2px deep-orange line that follows the cut */
.rz-toast--alert>.rz-ic{color:var(--rz-orange-deep)}
.rz-toast--alert::after{--b:2px;--ci:calc(var(--c) - var(--b) * 0.5858);background:var(--rz-orange-deep);
  clip-path:polygon(evenodd,0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 0,
    var(--b) var(--b),var(--b) calc(100% - var(--b)),calc(100% - var(--b) - var(--ci)) calc(100% - var(--b)),
    calc(100% - var(--b)) calc(100% - var(--b) - var(--ci)),calc(100% - var(--b)) var(--b),var(--b) var(--b))}
@media (max-width:639px){ .rz-toast{left:var(--rz-gut);right:var(--rz-gut);translate:none;width:auto;max-width:none} }

/* G6 progress: 9px blocks (rz-meter stays the 2px inline bar) */
.rz-progress{display:block;position:relative;height:9px;background:var(--rz-line)}
.rz-progress>i{position:absolute;top:0;bottom:0;inset-inline-start:0;background:var(--rz-orange)}
.rz-progress__mark{position:absolute;top:50%;width:2px;height:18px;margin:-9px 0 0 -1px;background:var(--rz-text)} /* set left:% */
.rz-progress--steps{display:flex;gap:var(--rz-s1);background:none}
.rz-progress--steps>i{position:static;flex:1 1 0;min-width:0;background:var(--rz-line)}
.rz-progress--steps>i.is-on{background:var(--rz-orange)}
.rz-progress--steps>i.is-current{background:var(--rz-text)}

/* G7 empty state. No dashed borders */
.rz-empty{display:flex;flex-direction:column;align-items:center;gap:var(--rz-s2);padding:var(--rz-s6) var(--rz-s3);text-align:center;color:var(--rz-muted)}
.rz-empty>p{margin:0}
.rz-empty--inline{--c:var(--rz-cut-md);align-items:flex-start;text-align:start;padding:var(--rz-s2);background:var(--rz-surf2);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%)}

/* G8 icon-only button: square face, label in aria-label. Keeps the extrusion and the 9px cut */
.rz-btn--icon .rz-btn__face{width:54px;padding:0;justify-content:center}
.rz-btn--icon.rz-btn--sm .rz-btn__face{width:36px;padding:0}
.rz-btn--icon.rz-btn--lg .rz-btn__face{width:72px;padding:0}

/* G9 state system: icon + label, ink and orange. No red, no green.
   done/ok = rz-badge--ink + #i-check · alert/miss/fail = rz-badge--alert + #i-alert · pending/warn/info = rz-badge + #i-info
   active/current = rz-badge--orange · de-emphasised = rz-badge--quiet */
.rz-badge--alert{background:transparent;color:var(--rz-text);box-shadow:inset 0 0 0 2px var(--rz-orange-deep)}
.rz-badge--alert .rz-ic{color:var(--rz-orange-deep)}
.rz-badge--quiet{background:transparent;color:var(--rz-muted);box-shadow:inset 0 0 0 1px var(--rz-line2)}
.is-hi{color:var(--rz-hi-num)} /* solid orange on Graphite; ink on stone (put an rz-rule under it) */
.is-muted{color:var(--rz-muted)} /* on a container. Never opacity */
.rz-ic--alert{color:var(--rz-orange-deep)}
.rz-msg--ok{color:var(--rz-text);font-weight:600}
.rz-msg--alert{color:var(--rz-text)}
.rz-msg--alert::before{content:"";display:inline-block;vertical-align:middle;width:9px;height:2px;margin-inline-end:var(--rz-s1);margin-top:-.2em;background:var(--rz-orange-deep)}

/* G10 change figure: the sign is always written, direction is never coloured */
.rz-delta{display:inline-flex;align-items:center;gap:var(--rz-s1);font-size:var(--rz-t13);line-height:1.4;font-variant-numeric:tabular-nums lining-nums;color:var(--rz-text);white-space:nowrap}
.rz-delta>.rz-ic{width:13px;height:13px;color:var(--rz-muted)}
.rz-delta--up>.rz-ic{transform:rotate(180deg)}

/* G11 heat cells (calendar, day grids): square, uncut (cells tile edge to edge) */
.rz-heat{display:flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;aspect-ratio:1;padding:0;margin:0;border:0;
  font:inherit;font-size:var(--rz-t13);line-height:1;font-variant-numeric:tabular-nums lining-nums;background:var(--rz-heat-0);color:var(--rz-text)}
.rz-heat--1{background:var(--rz-heat-1)}
.rz-heat--2{background:var(--rz-heat-2)}
.rz-heat--3{background:var(--rz-heat-3);color:var(--rz-ink)}
.rz-heat[aria-current="date"]{box-shadow:inset 0 0 0 2px var(--rz-text)}
.rz-heat[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--rz-orange-deep)}

/* G12 bar chart: solid data colours, square ends, value above, label below. Label series directly */
.rz-bars{display:flex;align-items:stretch;gap:var(--rz-s1);height:144px;padding-top:var(--rz-s3);margin-bottom:var(--rz-s3)} /* the plot area is the height minus the top padding */
.rz-bars>*{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.rz-bars>*>i{display:block;flex:none;width:100%;background:var(--rz-data-1)} /* set height:% of the plot area */
.rz-bars>*>i~*{position:absolute;top:100%;inset-inline:0;text-align:center;padding-top:4px;white-space:nowrap} /* label below the bar */
.rz-bars .rz-tab{font-size:var(--rz-t13);line-height:1.4}

/* G13 list rows: checklists, tasks, habits. Flat: rows are not cards */
.rz-list{margin:0;padding:0;list-style:none}
.rz-list__row{display:flex;align-items:flex-start;gap:var(--rz-s2);padding:var(--rz-s2) 0;border-bottom:1px solid var(--rz-line)}
.rz-list__row.is-done{color:var(--rz-muted);text-decoration:line-through 1px}
.rz-list__row.is-current{box-shadow:inset 0 2px 0 var(--rz-orange)}
.rz-list__row.is-draft{color:var(--rz-muted)}

/* G14 board (kanban): flat sunk columns, compact cards */
.rz-board{display:flex;align-items:flex-start;gap:var(--rz-s2);overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:var(--rz-s2)}
.rz-board__col{flex:0 0 243px;min-width:0;background:var(--rz-surf2)}
.rz-board__head{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:var(--rz-s1);padding:var(--rz-s2);background:var(--rz-surf2)}
.rz-board__items{display:grid;gap:var(--rz-s2);padding:0 var(--rz-s2) var(--rz-s2)}
.rz-board .rz-card{--c:var(--rz-cut-md);padding:var(--rz-s2)}
.rz-board__col.is-end>.rz-board__head{color:var(--rz-muted)}

/* G15 steps: phases, timelines, numbered steps. "01 —" labels, no circles */
.rz-steps{list-style:none;margin:0;padding:0;counter-reset:rz-step}
.rz-steps>li{counter-increment:rz-step;position:relative;display:grid;grid-template-columns:var(--rz-s8) minmax(0,1fr);gap:var(--rz-s2);padding-bottom:var(--rz-s3)}
.rz-steps>li::before{content:counter(rz-step,decimal-leading-zero) " \2014";align-self:start;justify-self:start;font-size:var(--rz-t13);text-transform:uppercase;letter-spacing:.11em;line-height:1.4;
  font-variant-numeric:tabular-nums lining-nums;color:var(--rz-muted);padding-top:3px}
.rz-steps>li:not(:last-child)::after{content:"";position:absolute;inset-inline-start:0;top:var(--rz-s4);bottom:0;width:1px;background:var(--rz-line)} /* connector */
.rz-steps>li.is-current::before{color:var(--rz-text);padding-bottom:var(--rz-s1);background:linear-gradient(var(--rz-orange),var(--rz-orange)) 0 100%/var(--rz-s4) 2px no-repeat}
[dir="rtl"] .rz-steps>li.is-current::before{background-position:100% 100%}
.rz-steps--h{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch}
.rz-steps--h>li{flex:0 0 216px;display:block;padding:0 var(--rz-s3) var(--rz-s2) 0}
[dir="rtl"] .rz-steps--h>li{padding:0 0 var(--rz-s2) var(--rz-s3)}
.rz-steps--h>li::before{display:inline-block;margin-bottom:var(--rz-s2);padding-bottom:var(--rz-s1)} /* room for the current rule on every label, so titles line up */
.rz-steps--h>li:not(:last-child)::after{top:12px;bottom:auto;inset-inline-start:var(--rz-s6);inset-inline-end:var(--rz-s1);width:auto;height:1px}
.rz-steps--h>li.is-done:not(:last-child)::after{height:2px;background:var(--rz-orange)}

/* G16 lightbox: one image in a 36px frame over ink */
.rz-lightbox{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;gap:var(--rz-s2);padding:var(--rz-s8) var(--rz-gut);background:rgba(14,20,27,.92)}
.rz-lightbox.is-open{display:flex}
.rz-lightbox .rz-frame{flex:0 1 auto;max-width:min(1080px,100%)}
.rz-lightbox .rz-frame>img{max-height:76vh;width:auto;max-width:100%}
.rz-lightbox__close{position:absolute;top:var(--rz-s2);inset-inline-end:var(--rz-gut)}

/* G17 chart tooltip */
.rz-tip{--c:var(--rz-cut-md);position:absolute;z-index:20;isolation:isolate;pointer-events:none;padding:var(--rz-s1) var(--rz-s2);
  font-size:var(--rz-t13);line-height:1.6;color:var(--rz-muted);filter:var(--rz-lift);opacity:0;transition:opacity var(--rz-d-press) var(--rz-ease-ui)}
.rz-tip::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--rz-surf2);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%)}
.rz-tip.is-on{opacity:1}
.rz-tip__sw{display:inline-block;width:9px;height:9px;margin-inline-end:var(--rz-s1);vertical-align:middle;background:var(--rz-data-1)}

/* G18 code: mono is a new face, for code only. Never orange text */
.rz-code{font-family:ui-monospace,Consolas,monospace;font-size:var(--rz-t13);background:var(--rz-surf2);color:var(--rz-text);padding:0 var(--rz-s1)}
.rz-code--block{--c:var(--rz-cut-md);display:block;margin:0;padding:var(--rz-s2);overflow-x:auto;direction:ltr;text-align:left;line-height:1.6;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%)}

/* G21 avatar: square, 9px cut (it is 27px or more). No circles */
.rz-avatar{--c:var(--rz-cut-sm);display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;object-fit:cover;
  background:var(--rz-surf2);color:var(--rz-muted);vertical-align:middle;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%)}
.rz-avatar--lg{--c:var(--rz-cut-md);width:54px;height:54px}

/* G23 sticky table head. No row hover */
.rz-table--sticky thead th{position:sticky;top:0;z-index:1;background:var(--rz-bg)}
.rz-card .rz-table--sticky thead th{background:var(--rz-surf)}

/* G24 disclosure (details) */
.rz-disclosure>summary{display:flex;justify-content:space-between;align-items:center;gap:var(--rz-s2);padding:var(--rz-s2) 0;border-bottom:1px solid var(--rz-line);
  font-size:var(--rz-t16);font-weight:600;line-height:1.4;list-style:none;cursor:pointer}
.rz-disclosure>summary::-webkit-details-marker{display:none}
.rz-disclosure>summary:lang(ar){font-weight:700;font-size:calc(var(--rz-t16) * var(--rz-arx))}
.rz-disclosure>summary .rz-ic{transition:transform var(--rz-d-ui) var(--rz-ease-ui)}
.rz-disclosure[open]>summary .rz-ic{transform:rotate(180deg)}
.rz-disclosure__body{padding:var(--rz-s2) 0}

/* G26 search hit: underlined like rz-link, not bold */
mark.rz-mark{background:transparent;color:var(--rz-text);text-decoration:underline 2px var(--rz-orange);text-underline-offset:3px}

/* G28 bare input (inline edit, quick add): control line hidden until hover or focus */
.rz-input--bare{--rc:transparent}
.rz-input--bare:hover{--rc:var(--rz-line2)}
.rz-input--bare:focus,.rz-input--bare:focus-visible{--rc:var(--rz-text);--rw:2px}

/* G29 bullets: a 6px solid orange square, not a dot */
ul.rz-list-mark{margin:0;padding:0}
ul.rz-list-mark>li{list-style:none;position:relative;padding-inline-start:var(--rz-s3)}
ul.rz-list-mark>li::before{content:"";position:absolute;inset-inline-start:0;top:.7em;width:6px;height:6px;background:var(--rz-orange)}

/* G30 tree (sitemaps): each level indented 27px with a 1px muted guide on the inline-start side */
.rz-tree,.rz-tree ul{list-style:none;margin:0;padding:0}
.rz-tree ul{margin-top:var(--rz-s1);padding-inline-start:var(--rz-s3);border-inline-start:1px solid var(--rz-line)}
.rz-tree li{padding-block:var(--rz-s1)}

@media (prefers-reduced-motion:reduce){
  dialog.rz-modal[open],.rz-overlay.is-open>.rz-modal{animation:rz-k-fade var(--rz-d-ui) var(--rz-ease-ui) both}
  .rz-toast{transform:none;transition:opacity var(--rz-d-ui) var(--rz-ease-ui)}
  .rz-disclosure>summary .rz-ic{transition:none}
}

/* ---------------------------------------------------------------------
   23. Spacing utilities — last, so they override component margin resets
   --------------------------------------------------------------------- */
.rz-mt1{margin-top:var(--rz-s1)}
.rz-mt2{margin-top:var(--rz-s2)}
.rz-mt3{margin-top:var(--rz-s3)}
.rz-mt4{margin-top:var(--rz-s4)}
.rz-mt6{margin-top:var(--rz-s6)}
.rz-mt8{margin-top:var(--rz-s8)}