/* =====================================================================
Raizer design system v1.0 — raizer.css
The code behind the Raizer brand book v1.0 (raizer.tech/brand/).
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 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%);
}
@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-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-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-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-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.
Book a call
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.
--------------------------------------------------------------------- */
.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.
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 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}
}
/* ---------------------------------------------------------------------
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)}