/* LOOP+ / لـَــوب + — Saudi heritage in a modern editorial language.
   Display headlines are outlined Thmanyah (SVG, see site/brand); text uses IBM Plex Sans Arabic. */
:root {
  --night: #1d1013; --milk: #f3ecdf; --sky: #e8c27a; --sky-deep: #c9952f; --sand: #e7d3a8;
  --coffee: #3a1a20; --palm: #56603a; --ember: #c4532f; --saffron: #d9a23a;
  --oud: #4a1d2b; --oud-deep: #2b0f17; --green: #1f3b2e; --green-deep: #142a20; --olive: #56603a; --clay: #c4532f; --mustard: #d9a23a; --paper: #f6eddb;
  --bg: var(--milk); --ink: var(--night); --muted: #6a5a52; --line: #dccab0; --card: var(--paper);
  --radius: 22px;
  /* film grain laid over the gradients (as in the references) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* One light look on every device: we market in daylight colours, not dark mode */
:root { color-scheme: light; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: 'IBM Plex Sans Arabic', system-ui, Tahoma, sans-serif; font-size: 18px; line-height: 1.75;
  overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 780px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.center { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h1, h2, h3 { line-height: 1.3; margin: 0 0 12px; }
h3 { font-size: 22px; }
.latin { font-family: Inter, sans-serif; direction: ltr; unicode-bidi: isolate; }

/* display type (outlined svg) */
.dt { display: block; line-height: 0; }
.dt svg { display: block; height: var(--dt, 1em); width: auto; max-width: 100%; }
.dt-line { display: flex; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ink); color: var(--bg); text-decoration: none; border: 0; cursor: pointer;
  padding: 13px 26px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 17px;
  transition: transform .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-accent { background: var(--ember); color: #fff; }
.btn-small { padding: 8px 20px; font-size: 15px; }
.btn-sky { background: var(--sky); color: var(--green); }

/* header */
/* header: a floating glass bar over the page; slides away on the way down, back on the way up (main.js) */
.site-header { position: fixed; z-index: 40; top: 0; left: 0; right: 0; padding: 8px 16px; pointer-events: none; transition: background .3s ease, box-shadow .3s ease; }
.site-header.floating { pointer-events: auto; background: rgba(243, 236, 223, .72); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 1px 0 rgba(31, 59, 46, .08); }
.site-header.floating.on-dark { background: rgba(43, 15, 23, .7); }
.site-header.tucked { translate: 0 0; }
.header-row { pointer-events: auto; max-width: 1168px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; padding: 0;
  transition: color .3s ease; }
.site-header .nav a, .site-header .logo { transition: color .3s ease; }
.site-header.on-dark .logo, .site-header.on-dark .nav a { color: var(--paper); }
.site-header.on-dark .btn { background: var(--sky); color: var(--green); }
main { padding-top: 96px; }
main > .hx:first-child { margin-top: -96px; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); direction: ltr; unicode-bidi: isolate; }
.wm svg { display: block; width: auto; }
.wm-latin svg { height: 22px; }
.wm-ar svg { height: 38px; }
.wm-ar { padding-inline-start: 12px; border-inline-start: 1.5px solid var(--line); }
.nav { display: flex; gap: 26px; }
.nav a { text-decoration: none; color: var(--muted); font-weight: 500; }
.nav a:hover { color: var(--ink); }
@media (max-width: 820px) { .nav { display: none; } .wm-latin { display: none; } .wm-ar { border: 0; padding: 0; } }

/* hero */
.hero { position: relative; padding: 40px 0 80px; overflow: hidden; }
.hero-grid { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.hero-title { --dt: clamp(64px, 10.5vw, 158px); margin: 10px 0 18px; }
.hero-title .dt + .dt { margin-top: 4px; }
.hero-title .accent { color: var(--green); }
.hero-sub { --dt: clamp(30px, 4.4vw, 62px); margin: -4px 0 24px; color: var(--coffee); }
.lead { font-size: 21px; color: var(--muted); max-width: 52ch; margin: 0 0 26px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.offer-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--oud); color: var(--sky); font-weight: 700; font-size: 15px; padding: 6px 16px; border-radius: 999px; }
.offer-pill::before { content: ""; width: 12px; height: 12px; background: currentColor; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

/* marquee band */
.band { background: var(--green); color: var(--milk); overflow: hidden; white-space: nowrap; padding: 14px 0; font-weight: 700; font-size: 20px; }
.band-track { display: inline-flex; gap: 36px; animation: marquee 32s linear infinite; padding-inline-start: 36px; }
.band-track span::after { content: "✦"; margin-inline-start: 36px; color: var(--sky); }
@keyframes marquee { to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .band-track { animation: none; } }

/* sections */
.section { padding: 90px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 38px; }
.section-head .dt { --dt: clamp(50px, 7.5vw, 104px); }
.section-head p { color: var(--muted); max-width: 46ch; margin: 0; }
.alt { background: var(--card); }
.dark { background: var(--night); color: var(--milk); --muted: #d6c2b0; --line: #2b2925; }
.dark .btn { background: var(--milk); color: var(--night); }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.step { border-radius: var(--radius); padding: 28px; min-height: 280px; display: flex; flex-direction: column; }
.step { position: relative; isolation: isolate; }
.step::before { content: ""; position: absolute; inset: 9px; border: 1.5px dashed currentColor; border-radius: 15px; opacity: .3; z-index: -1; }
.step:nth-of-type(1) { background: var(--sky); color: var(--green); }
.step:nth-of-type(2) { background: var(--green); color: var(--paper); }
.step:nth-of-type(3) { background: var(--oud); color: var(--paper); }
.step .num { line-height: 0; margin-bottom: auto; --dt: 92px; }
.step:nth-of-type(1) .num { color: var(--oud); } .step:nth-of-type(2) .num { color: var(--sky); } .step:nth-of-type(3) .num { color: var(--sky); }
.step h3 { font-size: 24px; margin-top: 26px; }
.step p { margin: 0; opacity: .85; }
@media (max-width: 900px) { .steps { grid-template-columns: minmax(0, 1fr); } .step { min-height: 0; } }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plan { position: relative; border-radius: var(--radius); padding: 30px 26px 26px; display: flex; flex-direction: column;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease; }
.plan:hover { transform: translateY(-8px); box-shadow: 0 30px 56px rgba(43, 15, 23, .22); }
.plan.featured:hover { transform: translateY(-16px); }
.badge { overflow: hidden; isolation: isolate; }
.badge::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .75) 50%, transparent 70%); transform: translateX(-120%); animation: shine 3.2s ease-in-out infinite; }
@keyframes shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
/* cards rise in one after another when the pricing comes into view (only when scripts run) */
.js .plans .plan { opacity: 0; translate: 0 34px; transition: opacity .6s ease, translate .6s cubic-bezier(.2, .8, .2, 1), transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease; }
.js .plans.in .plan { opacity: 1; translate: 0 0; }
.js .plans.in .plan:nth-child(2) { transition-delay: .12s, .12s, 0s, 0s; }
.js .plans.in .plan:nth-child(3) { transition-delay: .24s, .24s, 0s, 0s; }
@media (prefers-reduced-motion: reduce) { .badge::after, .emblem { animation: none !important; } .badge::after { display: none; } .js .plans .plan { opacity: 1; translate: 0 0; transition: none; } }
/* coaster cards (as in the references): solid stock, a dashed inner border, a round emblem on the corner */
.plan { border-radius: 30px; isolation: isolate; box-shadow: 0 18px 40px rgba(43, 15, 23, .14); }
.plan::before { content: ""; position: absolute; inset: 11px; border: 1.5px dashed var(--plan-line); border-radius: 21px; z-index: -1; pointer-events: none; }
.tone-sky { --plan-bg: var(--sky); --plan-line: color-mix(in srgb, var(--green) 35%, transparent); --plan-name: var(--green); --plan-star: var(--oud);
  background: radial-gradient(90% 60% at 100% 0%, #f3dca8 0, transparent 70%), var(--sky); color: var(--green); --ink: var(--green); --bg: var(--sky); }
.tone-green { --plan-bg: var(--green); --plan-line: color-mix(in srgb, var(--sky) 50%, transparent); --plan-name: var(--sky); --plan-star: var(--sky);
  background: radial-gradient(90% 60% at 100% 0%, #2f5a45 0, transparent 70%), var(--green); color: var(--paper); --ink: var(--sky); --bg: var(--green); }
.tone-oud { --plan-bg: var(--oud); --plan-line: color-mix(in srgb, var(--sky) 50%, transparent); --plan-name: var(--sky); --plan-star: var(--sky);
  background: radial-gradient(90% 60% at 100% 0%, #64283a 0, transparent 70%), var(--oud); color: var(--paper); --ink: var(--paper); --bg: var(--oud); }
.tone-sky .btn-ghost { color: var(--green); box-shadow: inset 0 0 0 2px var(--green); }
.tone-green .btn-ghost { color: var(--sky); box-shadow: inset 0 0 0 2px var(--sky); }
.tone-oud .btn-ghost { color: var(--paper); box-shadow: inset 0 0 0 2px var(--paper); }
.plan-name { color: var(--plan-name); }
.emblem { position: absolute; top: -18px; inset-inline-end: 22px; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; rotate: 12deg;
  box-shadow: 0 8px 18px rgba(43, 15, 23, .25); outline: 1.5px dashed currentColor; outline-offset: -7px; }
.emblem svg { width: 24px; height: 24px; }
.tone-sky .emblem { background: var(--green); color: var(--sky); }
.tone-green .emblem { background: var(--sky); color: var(--green); }
.tone-oud .emblem { background: var(--sky); color: var(--oud); animation: spin 18s linear infinite; }
@keyframes spin { to { rotate: 372deg; } }
.plan.featured { transform: translateY(-10px); box-shadow: 0 28px 56px rgba(43, 15, 23, .24); }
.badge { position: absolute; top: -14px; inset-inline-start: 24px; background: var(--sky); color: var(--green); font-size: 14px; font-weight: 700; padding: 4px 14px; border-radius: 999px; }
.plan-name { margin: 0 0 4px; line-height: 0; }
.plan-name svg { height: 52px; width: auto; display: block; }
.plan-includes { margin: 18px 0 0; font-weight: 700; font-size: 16px; display: inline-flex; align-self: flex-start; padding: 4px 14px; border-radius: 999px; background: color-mix(in srgb, currentColor 10%, transparent); }
.feats { position: relative; margin-bottom: 24px; }
.feats ul { margin-bottom: 0; }
.feats-glass { display: none; }
/* folded: the first 5 show, the 6th sits under frosted glass with the button; the rest wait */
.js .feats.has-more:not(.open) li:nth-child(n+7) { display: none; }
.js .feats.has-more:not(.open) .feats-glass { display: flex; position: absolute; inset: auto -6px -2px; height: 92px; align-items: flex-end; justify-content: center; padding-bottom: 6px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--plan-bg) 15%, transparent), color-mix(in srgb, var(--plan-bg) 88%, transparent) 70%);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); -webkit-mask-image: linear-gradient(transparent, #000 35%); mask-image: linear-gradient(transparent, #000 35%); }
.more-btn { font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; border: 0; border-radius: 999px; padding: 9px 20px; display: inline-flex; gap: 8px; align-items: center;
  background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }
.more-btn::after { content: "↓"; font-family: Inter, sans-serif; animation: nudge 1.6s ease-in-out infinite; }
.more-btn:hover { background: color-mix(in srgb, currentColor 20%, transparent); }
.feats.open li:nth-child(n+6) { animation: feat-in .45s ease both; }
@keyframes feat-in { from { opacity: 0; translate: 0 8px; } }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .more-btn::after, .feats.open li { animation: none; } }
.plan-tag { margin: 2px 0 18px; opacity: .75; }
.plan-price s { opacity: .55; font-size: 20px; }
.plan-price p { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.plan-price b { font-family: 'IBM Plex Sans Arabic', sans-serif; font-weight: 700; font-size: 62px; line-height: 1.1; }
.plan ul { list-style: none; padding: 0; margin: 18px 0 24px; }
.plan-cta { margin-top: auto; }
.plan li { padding: 7px 0; padding-inline-start: 26px; position: relative; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.plan li::before { content: "✦"; position: absolute; inset-inline-start: 0; color: var(--plan-star); }
.plan-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.plan-cta .btn { padding: 12px 10px; font-size: 16px; }
.pricing-note { margin-top: 26px; color: var(--muted); text-align: center; }
@media (max-width: 960px) { .plans { grid-template-columns: minmax(0, 1fr); } .plan.featured { transform: none; } }

.compare { margin-top: 30px; background: var(--card); border-radius: var(--radius); padding: 16px 20px; box-shadow: inset 0 0 0 1.5px var(--line); overflow: hidden; }
.compare summary { cursor: pointer; font-weight: 700; }
.table-wrap { overflow-x: auto; margin-top: 12px; }
table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 15px; }
th, td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: start; }
tr.group td { font-weight: 700; color: var(--muted); }

/* work: a slow moving reel of posts (site/work.json) */
.work-sec { background: #e3f2fa; }
.reel { overflow: hidden; direction: ltr; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.reel-track { display: flex; width: max-content; animation: reel calc(var(--n) * 7s) linear infinite; }
.reel:hover .reel-track { animation-play-state: paused; }
.reel figure { margin: 0 10px; width: clamp(230px, 24vw, 320px); flex: none; }
.reel img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; box-shadow: 0 18px 36px rgba(15, 14, 12, .14); transition: transform .3s ease; }
.reel img:hover { transform: scale(1.03) rotate(-1deg); }
@keyframes reel { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .reel { overflow-x: auto; } .reel-track { animation: none; } }

.work { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.work figure { margin: 0; }
.work img { border-radius: 10px; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 20px 40px rgba(0, 0, 0, .14); }
.work figcaption { color: var(--muted); font-size: 15px; margin-top: 10px; }
@media (max-width: 900px) { .work { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin: 0 auto; } }

/* forms */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 46px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.checks { list-style: none; padding: 0; }
.checks li { padding: 8px 0; padding-inline-start: 28px; position: relative; }
.checks li::before { content: "✦"; position: absolute; inset-inline-start: 0; color: var(--green); }
.card { background: var(--card); border-radius: var(--radius); padding: 26px; box-shadow: inset 0 0 0 1.5px var(--line); }
.dark .card { background: #1c1b18; }
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font-weight: 500; }
.form input, .form select, .form textarea { min-width: 0; width: 100%; font: inherit; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); }
.form .row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.form .consent { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 15px; color: var(--muted); }
.form .consent input { flex: none; width: 18px; height: 18px; margin: 4px 0 0; padding: 0; accent-color: var(--green); }
.form .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form-msg { margin: 0; min-height: 1.5em; }
.form-msg.ok { color: #1e7a53; }
.form-msg.err { color: var(--ember); }
.plan-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.plan-pick label { display: block; cursor: pointer; position: relative; }
.plan-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; }
.plan-pick span { display: block; text-align: center; border-radius: 14px; padding: 10px 6px; box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 700; }
.plan-pick small { display: block; font-weight: 500; color: var(--muted); }
.plan-pick input:checked + span { background: var(--ink); color: var(--bg); box-shadow: none; }
.plan-pick input:checked + span small { color: inherit; opacity: .8; }
.plan-pick input:focus-visible + span { outline: 3px solid var(--ember); }

/* faq */
.faq details { border-top: 1.5px solid var(--line); padding: 18px 0; }
.faq details:last-child { border-bottom: 1.5px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 700; font-size: 20px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; font-family: Inter, sans-serif; font-weight: 800; }
.faq details[open] summary::after { content: "−"; }
.faq p { color: var(--muted); margin: 10px 0 0; }

/* contact */
.contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.contact-cards a { text-decoration: none; border-radius: var(--radius); padding: 26px; display: block; }
.contact-cards a:nth-child(1) { background: var(--oud); color: var(--paper); }
.contact-cards a:nth-child(2) { background: var(--green); color: var(--paper); }
.contact-cards a:nth-child(3) { background: var(--sky); color: var(--green); }
.contact-cards b { display: block; font-size: 24px; }
@media (max-width: 900px) { .contact-cards { grid-template-columns: minmax(0, 1fr); } }

/* legal pages and sector pages (prose) */
.prose { padding: 50px 0 80px; }
.prose h1 { font-size: clamp(34px, 5vw, 52px); }
.prose h2 { font-size: 24px; margin-top: 32px; }
.page-hero { padding: 50px 0 10px; }
.page-hero .dt { --dt: clamp(60px, 10vw, 140px); margin-bottom: 14px; }

/* footer */
.site-footer { background: var(--night); color: var(--milk); padding: 70px 0 0; overflow: hidden; --muted: #d6c2b0; }
.footer-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 46px; border-bottom: 1px solid #2b2925; }
.footer-cta p { font-size: clamp(26px, 3.5vw, 40px); font-weight: 700; margin: 0; }
.pill-call { display: inline-flex; align-items: center; gap: 12px; background: #1d1c19; color: var(--milk); text-decoration: none; border-radius: 999px; padding: 8px 22px 8px 8px; box-shadow: inset 0 0 0 1px #34322d; }
.pill-call:hover { background: #26241f; }
.pill-ico { width: 46px; height: 46px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; }
.pill-ico svg { width: 26px; height: 26px; }
.pill-call b { display: block; line-height: 1.3; }
.pill-call small { color: #d6c2b0; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 26px; padding: 40px 16px 10px; }
.footer-grid h4 { margin: 0 0 8px; }
.footer-grid a { display: block; color: #d6c2b0; text-decoration: none; margin: 4px 0; }
.footer-grid a:hover { color: var(--milk); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.footer-giant { color: #f6f0e1; line-height: 0; margin-top: 20px; display: flex; justify-content: center;
  -webkit-mask-image: linear-gradient(#000 20%, transparent 95%); mask-image: linear-gradient(#000 20%, transparent 95%); }
.footer-giant { padding: 0 16px; }
.footer-giant .dt { width: min(1168px, 100%); }
.footer-giant .dt svg { height: auto; width: 100%; }
.footer-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 6px 16px 26px; }
.footer-legal { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.footer-legal a { font-size: 15px; }
.footer-bottom a { color: #d6c2b0; }


/* Until the agency number is set, WhatsApp buttons stay hidden */
.no-wa .wa, .no-wa .wa-only { display: none !important; }

/* social accounts: bare icons, no backgrounds */
.socials { display: flex; flex-wrap: wrap; gap: 18px; }
.socials a { display: grid; place-items: center; color: var(--oud); transition: transform .2s ease, color .2s ease; }
.socials a:hover { transform: translateY(-3px); color: var(--green); }
.site-footer .socials a { color: var(--sky); }
.site-footer .socials a:hover { color: var(--paper); }
.socials svg { width: 22px; height: 22px; }

/* the rail on the screen edge: accounts + WhatsApp, stays put while the page scrolls.
   It switches to a light colour over dark sections (main.js sets .on-dark). */
.rail { position: fixed; z-index: 30; inset: auto auto 22px 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--oud); transition: color .3s ease; }
.rail::before { content: ""; width: 1.5px; height: 64px; background: linear-gradient(transparent, var(--green)); opacity: .7; margin-bottom: 2px; }
.rail a { display: grid; place-items: center; color: inherit; transition: transform .2s ease, color .2s ease; }
.rail a:hover { transform: scale(1.15); color: var(--green); }
.rail svg { width: 25px; height: 25px; filter: drop-shadow(0 2px 6px rgba(43, 15, 23, .18)); }
.rail a.on-dark { color: var(--sky); }
.rail a.on-dark:hover { color: var(--paper); }
@media (max-width: 1339px) { .rail { inset: auto auto 12px 10px; gap: 13px; padding: 12px 8px; border-radius: 999px; background: rgba(246, 237, 219, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 8px 22px rgba(31, 59, 46, .15); } .rail::before { display: none; } .rail svg { width: 21px; height: 21px; filter: none; } .rail a.on-dark { color: var(--oud); } }
.rail { transition: color .3s ease, opacity .35s ease, translate .35s ease; }
.rail.away { opacity: 0; translate: -20px 0; pointer-events: none; }
/* on narrower screens the rail rides with the header: hidden while reading down, back on the way up */
@media (max-width: 1339px) { .rail.tucked { opacity: 1; } }
@media (max-width: 1099px) { .si-plans { display: none; } }


/* ---------- warm gradients with grain, flowing from section to section ---------- */
.grainy { position: relative; isolation: isolate; }
.grainy::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .22; mix-blend-mode: multiply; pointer-events: none; }
.hero { background:
  radial-gradient(45% 55% at 8% 30%, rgba(31, 59, 46, .18) 0, transparent 70%),
  radial-gradient(40% 50% at 92% 0%, rgba(255, 255, 255, .6) 0, transparent 70%),
  linear-gradient(180deg, #b9e0f1 0%, #cfeaf5 55%, #e6f1ef 82%, var(--milk) 100%); }
/* the work reel sits on deep oud, like the coasters on dark stock */
.work-sec { background: radial-gradient(60% 70% at 85% 10%, #6a2a3c 0, transparent 70%), radial-gradient(50% 60% at 5% 100%, rgba(31, 59, 46, .6) 0, transparent 70%), var(--oud);
  color: var(--paper); --muted: #d8c3b4; }
.work-sec { padding-bottom: 70px; }
.work-sec .reel img { box-shadow: 0 22px 44px rgba(0, 0, 0, .35); }
#pricing { background: radial-gradient(60% 50% at 50% 0%, rgba(232, 194, 122, .35) 0, transparent 70%), linear-gradient(180deg, #ebe2cf 0%, var(--milk) 100%); }
#audit { background: radial-gradient(70% 90% at 90% 100%, rgba(196, 83, 47, .22) 0, transparent 70%), linear-gradient(180deg, var(--milk), #ece0cc); }
.faq-sec { background: linear-gradient(180deg, #ece0cc, var(--milk) 40%); }
/* footer in deep oud; the giant name has a slow shine */
.site-footer { background: radial-gradient(70% 60% at 85% 0%, #5a2333 0, transparent 70%), var(--oud-deep); position: relative; overflow: visible; }
.site-footer .footer-giant { overflow: hidden; }
.footer-cta, .footer-cta + * { border-color: rgba(246, 237, 219, .14); }
.pill-call { background: rgba(246, 237, 219, .07); box-shadow: inset 0 0 0 1px rgba(246, 237, 219, .18); }
.pill-ico { background: var(--sky); color: var(--green); }
.footer-giant { color: var(--sky); }

/* ---------- stickers on the section edges (from the brand sticker sheet) ---------- */
.has-stickers { position: relative; overflow-x: clip; }
html, main { overflow-x: clip; }
.sticker { position: absolute; z-index: 1; pointer-events: none; filter: drop-shadow(0 14px 22px rgba(43, 15, 23, .2)); }
.st-a { width: 140px; top: auto; bottom: 26px; right: max(-46px, calc(50% - 600px - 150px)); rotate: -12deg; }
.st-b { width: 190px; top: 36px; left: max(-70px, calc(50% - 600px - 220px)); rotate: 14deg; }
.st-c { width: 130px; top: 70px; right: max(-40px, calc(50% - 600px - 150px)); rotate: 10deg; animation: float 7s ease-in-out infinite; }
.st-d { width: 210px; bottom: 70px; left: max(-90px, calc(50% - 600px - 240px)); rotate: -8deg; }
.st-e { width: 160px; top: 40px; left: max(-60px, calc(50% - 600px - 190px)); rotate: -10deg; animation: float 8s ease-in-out infinite reverse; }
@keyframes float { 50% { translate: 0 -12px; } }
/* the edge stickers need room beside the 1200px column; narrower screens keep only the in-page ones */
@media (max-width: 1499px) { .sticker { display: none; } }
@media (prefers-reduced-motion: reduce) { .sticker { animation: none; } }

/* leaf ribbon across a section boundary */
.work-wrap { position: relative; margin-top: -3.5vw; }
.work-wrap .work-sec { clip-path: polygon(0 3.5vw, 100% 0, 100% 100%, 0 100%); padding-top: calc(90px + 3.5vw); }
.ribbon { position: absolute; z-index: 2; top: calc(1.75vw - 29px); left: -3vw; right: -3vw; height: 58px; transform: skewY(-2deg);
  background: url(/assets/stickers/ribbon.svg?v=1170768162) repeat-x center / auto 100%; box-shadow: 0 10px 24px rgba(43, 15, 23, .25); }

/* the same stickers inside the page too (next to headings, on card and form corners) */
.sticker-in { position: absolute; z-index: 3; pointer-events: none; filter: drop-shadow(0 12px 20px rgba(43, 15, 23, .22)); }
.section-head { position: relative; }
.si-how { width: 92px; inset: -46px auto auto -34px; rotate: -14deg; }
.steps { position: relative; }
.si-work { width: 104px; inset: -10px auto auto 34%; rotate: 10deg; animation: float 7s ease-in-out infinite; }
.plans-wrap, .form-wrap { position: relative; }
.si-plans { width: 104px; inset: 10px auto auto 6%; rotate: -8deg; animation: spin 26s linear infinite; }
.si-form { width: 120px; inset: auto auto -40px -40px; rotate: 12deg; }
.site-footer .si-foot { width: 120px; inset: -44px auto auto 9%; rotate: -9deg; }
@media (max-width: 760px) { .si-how { width: 64px; inset: -36px auto auto -6px; } .si-work, .si-plans { width: 64px; inset: 0 auto auto 0; } .si-form { width: 84px; inset: auto auto -28px -6px; } .site-footer .si-foot { display: none; } }
@media (prefers-reduced-motion: reduce) { .sticker-in { animation: none !important; } }

/* phones: everything a size smaller */
@media (max-width: 640px) {
  body { font-size: 16px; line-height: 1.7; }
  .header-row { height: 56px; }
  .wm-ar svg { height: 30px; }
  .btn { padding: 11px 20px; font-size: 15px; }
  .btn-small { padding: 7px 16px; font-size: 14px; }
  .section { padding: 64px 0; }
  .section-head { margin-bottom: 26px; }
  .section-head .dt { --dt: clamp(40px, 11vw, 60px); }
  .lead { font-size: 16px; }
  .step { padding: 22px; } .step h3 { font-size: 19px; } .step .num { --dt: 64px; }
  .plan { padding: 26px 20px 20px; } .plan-name svg { height: 40px; } .plan-price b { font-size: 48px; } .plan li { font-size: 15px; }
  .faq summary { font-size: 17px; }
  .footer-cta p { font-size: 24px; }
  .footer-grid { gap: 18px; padding-top: 28px; }
  .footer-grid a { font-size: 15px; }
  .rail svg { width: 18px; height: 18px; } .rail { gap: 10px; padding: 9px 6px; }
}

/* ==========================================================================
   Night & sky: Saudi postage stamp meets glass. Near-black with a sky-blue
   glow at the top, a perforated sky-blue stamp holding the payphone, glass
   notifications of what the system does, and the journey as a lit timeline.
   ========================================================================== */
:root { --ice: #b4e2f8; --ice-soft: #dff2fb; --night-0: #05080b; --night-1: #0a1520; --sun: #f0a040; }

/* header: transparent at the top, a floating glass pill once the page moves */
.header-row { padding: 0 18px; border-radius: 999px; transition: background .35s ease, box-shadow .35s ease, color .3s ease; }
.site-header.floating, .site-header.floating.on-dark { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; padding-top: 10px; }
.site-header.floating .header-row { height: 60px; background: rgba(246, 237, 219, .72); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 12px 32px rgba(20, 30, 40, .14); }
.site-header.floating.on-dark .header-row { background: rgba(12, 18, 26, .55); box-shadow: inset 0 0 0 1px rgba(180, 226, 248, .16), inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 36px rgba(0, 0, 0, .4); }
.site-header.on-dark .btn { background: var(--ice); color: var(--night-0); }
.site-header.on-dark .nav a { color: rgba(238, 244, 248, .78); }
.site-header.on-dark .nav a:hover { color: #fff; }

/* buttons on dark */
.btn-glow { background: var(--ice); color: var(--night-0); box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset, 0 10px 30px rgba(180, 226, 248, .35); }
.btn-glow:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset, 0 14px 40px rgba(180, 226, 248, .55); }
.btn-glass { background: rgba(255, 255, 255, .07); color: #eef4f8; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.btn-glass:hover { background: rgba(255, 255, 255, .12); }
.spark { display: inline-block; width: .9em; height: .9em; background: currentColor; flex: none;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

/* ---------- hero ---------- */
.hx { position: relative; overflow: hidden; isolation: isolate; color: #eef4f8; background:
  radial-gradient(90% 62% at 30% -14%, rgba(180, 226, 248, .62) 0, rgba(180, 226, 248, .22) 40%, transparent 74%),
  radial-gradient(40% 40% at 100% 104%, rgba(74, 29, 43, .55) 0, transparent 70%),
  linear-gradient(180deg, var(--night-1) 0%, var(--night-0) 62%); }
.hx::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .16; mix-blend-mode: overlay; pointer-events: none; }
.hx-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hx-sky::before { content: ""; position: absolute; inset: 0; opacity: .085;
  background: url(/assets/najd-tile.svg?v=1170768162) center top / 56px 112px repeat;
  -webkit-mask-image: radial-gradient(70% 60% at 30% 50%, #000 0, transparent 80%); mask-image: radial-gradient(70% 60% at 30% 50%, #000 0, transparent 80%); }
.hx-sky i { position: absolute; width: 12px; height: 12px; background: var(--ice-soft); opacity: .0;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: twinkle 5s ease-in-out infinite; }
.hx-sky i:nth-child(1) { top: 16%; left: 8%; animation-delay: .2s; }
.hx-sky i:nth-child(2) { top: 9%; left: 44%; width: 8px; height: 8px; animation-delay: 1.4s; }
.hx-sky i:nth-child(3) { top: 30%; left: 52%; width: 9px; height: 9px; animation-delay: 2.6s; }
.hx-sky i:nth-child(4) { top: 72%; left: 6%; width: 8px; height: 8px; animation-delay: 3.3s; }
.hx-sky i:nth-child(5) { top: 20%; right: 6%; animation-delay: .9s; }
.hx-sky i:nth-child(6) { top: 84%; left: 47%; width: 7px; height: 7px; animation-delay: 2s; }
.hx-sky i:nth-child(7) { top: 62%; right: 3%; width: 8px; height: 8px; animation-delay: 4s; }
@keyframes twinkle { 0%, 100% { opacity: 0; scale: .5; } 50% { opacity: .9; scale: 1; } }

.hx-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(20px, 4vw, 64px);
  min-height: clamp(660px, 100svh, 940px); padding-top: 112px; padding-bottom: 56px; }
.hx-copy { position: relative; z-index: 2; }
.hx-pill { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 7px 16px 7px 18px; border-radius: 999px; font-size: 15px; font-weight: 700; color: var(--ice);
  background: rgba(180, 226, 248, .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(180, 226, 248, .25); }
.hx-pill .spark { color: var(--sun); animation: spin 8s linear infinite; }
.hx-title { margin: 0; color: #f6eddb; }
.hx-title .dt { --dt: clamp(58px, 8.6vw, 148px); }
.hx-title .accent { color: var(--ice); margin-top: -.04em; filter: drop-shadow(0 0 28px rgba(180, 226, 248, .35)); }
.hx-sub { --dt: clamp(24px, 2.5vw, 38px); margin: 18px 0 14px; color: var(--sun); }
.hx-lead { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.85; color: rgba(238, 244, 248, .78); max-width: 46ch; margin: 0 0 26px; }
.hx-trust { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: rgba(238, 244, 248, .66); }
.hx-trust li { display: inline-flex; align-items: center; gap: 8px; }
.hx-trust li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 10px var(--ice); }

/* the stamp on a Najdi motif, the payphone standing out of its top edge (still: no floating) */
.hx-visual { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1 / 1.04; justify-self: center; }
.hx-visual::before { content: ""; position: absolute; inset: 12% 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(180, 226, 248, .32), transparent); filter: blur(10px); }
.hx-motif { position: absolute; left: 50%; top: 53%; width: 84%; max-width: none; translate: -50% -50%; opacity: .55; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }
.hx-stamp { position: absolute; left: 50%; top: 53%; width: 54%; aspect-ratio: 400 / 500; translate: -50% -50%; rotate: -5deg;
  background: url(/assets/stamp-sky.svg?v=1170768162) center / 100% 100% no-repeat;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .6)) drop-shadow(0 0 34px rgba(180, 226, 248, .22)); }
.hx-booth { position: absolute; left: 50%; bottom: 15%; height: 98%; width: auto; max-width: none; translate: -50% 0; filter: drop-shadow(0 16px 18px rgba(5, 8, 11, .45)); }
.hx-stamp-foot { position: absolute; left: 10%; right: 10%; bottom: 5.2%; height: 8%; display: flex; align-items: center; justify-content: center; gap: .7em;
  color: #0b1620; font-weight: 700; font-size: clamp(8px, .95vw, 13px); white-space: nowrap; }
.hx-stamp-foot .mark { display: block; line-height: 0; }
.hx-stamp-foot .mark svg { height: 2.1em; width: auto; display: block; }

/* entrance: everything waits for the payphone photo, then rises in together (main.js adds .ready) */
.js .hx [data-in] { opacity: 0; translate: 0 22px; }
.js .hx.ready [data-in] { opacity: 1; translate: 0 0; transition: opacity .8s ease var(--d, 0s), translate .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0s); }

/* Sadu weave under the hero, in sky blue */
.h2-sadu { position: relative; z-index: 4; height: clamp(26px, 2.6vw, 40px); background: url(/assets/sadu.svg?v=1170768162) repeat-x 0 0 / auto 100%; animation: weave 30s linear infinite; }
@keyframes weave { to { background-position-x: -1600px; } }

/* the ticker under it: dark glass with a sky-blue edge */
.band { position: relative; z-index: 3; background: var(--night-0); color: #dceef8; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 -1px 0 rgba(180, 226, 248, .14); font-size: 18px; }
.band-track span::after { color: var(--ice); }

/* tablets and phones: text first, the stamp scene under it */
@media (max-width: 900px) {
  .hx-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 8px; padding-top: 100px; padding-bottom: 34px; }
  .hx-title .dt { --dt: min(19vw, 128px); }
  .hx-sub { --dt: clamp(22px, 5.4vw, 34px); }
  .hx-lead { max-width: 56ch; }
  .hx-visual { max-width: 560px; margin-top: 10px; }
}
@media (max-width: 640px) {
  .hx-pill { font-size: 13px; padding: 6px 14px; margin-bottom: 16px; }
  .hx-sub { margin: 12px 0 10px; }
  .hx-lead { font-size: 15.5px; margin-bottom: 20px; }
  .hx-trust { font-size: 12.5px; gap: 6px 14px; margin-top: 18px; }
  .hx-visual { aspect-ratio: 1 / 1.12; }
  .hx-stamp { width: 60%; }
  .band { font-size: 15px; padding: 11px 0; }
}

/* ---------- the journey: a lit timeline of glass cards ---------- */
.jr { position: relative; overflow: hidden; isolation: isolate; color: #eef4f8; --muted: rgba(238, 244, 248, .66); background:
  radial-gradient(55% 35% at 70% 0%, rgba(180, 226, 248, .14) 0, transparent 70%),
  radial-gradient(45% 40% at 0% 100%, rgba(74, 29, 43, .5) 0, transparent 70%),
  var(--night-0); padding-bottom: calc(90px + 3.5vw); }
.jr::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .06;
  background: url(/assets/najd-tile.svg?v=1170768162) center top / 56px 112px repeat;
  -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); }
.jr-head h2 { color: #f6eddb; margin: 0; }
.jr-head p { color: var(--muted); }
.jr-list { list-style: none; padding: 0; margin: 10px 0 0; position: relative; display: grid; gap: 26px; --p: 0; }
.jr-list::before, .jr-list::after { content: ""; position: absolute; top: 0; right: calc(50% - 1px); width: 2px; border-radius: 2px; }
.jr-list::before { bottom: 0; background: rgba(180, 226, 248, .14); }
.jr-list::after { height: calc(var(--p) * 100%); background: linear-gradient(var(--ice), var(--sun)); box-shadow: 0 0 14px rgba(180, 226, 248, .6); transition: height .2s linear; }
.jr-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); align-items: center; }
.jr-num { grid-column: 2; grid-row: 1; justify-self: center; z-index: 1; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; line-height: 0;
  background: var(--night-0); color: var(--ice); box-shadow: inset 0 0 0 1.5px rgba(180, 226, 248, .4), 0 0 0 8px var(--night-0); transition: background .5s ease, color .5s ease, box-shadow .5s ease; }
.jr-num .dt svg { height: 30px; }
.jr-step.in .jr-num { background: var(--ice); color: var(--night-0); box-shadow: 0 0 0 8px var(--night-0), 0 0 30px rgba(180, 226, 248, .55); }
.jr-card { grid-row: 1; grid-column: 1; position: relative; padding: 26px 28px; border-radius: 26px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .12), 0 24px 50px rgba(0, 0, 0, .35);
  transition: box-shadow .35s ease, translate .35s ease; }
.jr-step:nth-child(even) .jr-card { grid-column: 3; }
@media (hover: hover) and (pointer: fine) { .jr-card:hover { translate: 0 -4px; box-shadow: inset 0 0 0 1px rgba(180, 226, 248, .4), 0 30px 60px rgba(0, 0, 0, .45), 0 0 40px rgba(180, 226, 248, .12); } }
.jr-when { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 3px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ice); background: rgba(180, 226, 248, .1); }
.jr-card h3 { font-size: clamp(21px, 2vw, 27px); color: #fff; margin: 0 0 8px; }
.jr-card > p:not(.jr-when) { margin: 0; color: var(--muted); font-size: 16.5px; line-height: 1.85; }
.jr-tech { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jr-tech li { font-size: 13px; line-height: 1.5; padding: 4px 12px; border-radius: 999px; color: var(--ice-soft); background: rgba(180, 226, 248, .05); box-shadow: inset 0 0 0 1px rgba(180, 226, 248, .22); }
.jr-tech li::before { content: "✦ "; color: var(--sun); }
.jr-note { margin: 34px 0 0; text-align: center; color: var(--muted); font-size: 15px; }
.jr-note a { color: var(--ice); }
.js .jr-card { opacity: 0; translate: 0 26px; transition: opacity .7s ease, translate .7s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease; }
.js .jr-step.in .jr-card { opacity: 1; translate: 0 0; }
@media (max-width: 900px) {
  .jr-list { gap: 18px; }
  .jr-list::before, .jr-list::after { right: 27px; }
  .jr-step { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: start; }
  .jr-num { grid-column: 1; width: 52px; height: 52px; margin-top: 18px; }
  .jr-num .dt svg { height: 24px; }
  .jr-card, .jr-step:nth-child(even) .jr-card { grid-column: 2; }
}
@media (max-width: 640px) {
  .jr-card { padding: 20px 18px; border-radius: 20px; }
  .jr-card > p:not(.jr-when) { font-size: 15px; }
  .jr-tech li { font-size: 12px; padding: 3px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .hx *, .hx *::before, .h2-sadu { animation: none !important; }
  .js .hx [data-in], .js .jr-card { opacity: 1; translate: 0 0; transition: none; }
}

/* the edge rail: one dark glass pill that reads on light and dark sections alike */
.rail a.on-dark, .rail a { color: var(--ice); }
@media (max-width: 1339px) { .rail { background: rgba(12, 18, 26, .62); box-shadow: inset 0 0 0 1px rgba(180, 226, 248, .18), 0 10px 26px rgba(0, 0, 0, .3); } .rail a.on-dark { color: var(--ice); } }
@media (min-width: 1340px) { .rail a { color: var(--oud); } .rail a.on-dark { color: var(--ice); } .rail::before { background: linear-gradient(transparent, var(--ice)); } }
.rail a:hover { color: #fff; }

/* ---------- pricing: dark glass cards with a lit edge, one accent per plan ---------- */
#pricing { color: #eef4f8; --muted: rgba(238, 244, 248, .62); position: relative; isolation: isolate; background:
  radial-gradient(50% 40% at 50% 0%, rgba(180, 226, 248, .16) 0, transparent 70%), var(--night-0); }
#pricing::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .05;
  background: url(/assets/najd-tile.svg?v=1170768162) center top / 56px 112px repeat;
  -webkit-mask-image: linear-gradient(#000, transparent 70%); mask-image: linear-gradient(#000, transparent 70%); }
#pricing .section-head .dt { color: #f6eddb; }
#pricing .pricing-note a { color: var(--ice); }
.plan.tone-sky { --tone: var(--ice); --tone-rgb: 180, 226, 248; }
.plan.tone-green { --tone: #8fdcb2; --tone-rgb: 143, 220, 178; }
.plan.tone-oud { --tone: var(--sun); --tone-rgb: 240, 160, 64; }
.plan.tone-sky, .plan.tone-green, .plan.tone-oud {
  --plan-bg: #0b1119; --plan-name: var(--tone); --plan-star: var(--tone); --ink: var(--tone); --bg: #0b1119;
  color: #eef4f8; border-radius: 28px;
  background: radial-gradient(110% 60% at 100% 0%, rgba(var(--tone-rgb), .16) 0, transparent 62%), linear-gradient(165deg, #121b26 0%, #0a0f16 60%, #080c11 100%);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08); }
/* a 1px gradient edge instead of the dashed coaster border */
.plan.tone-sky::before, .plan.tone-green::before, .plan.tone-oud::before { inset: 0; border: 0; border-radius: inherit; padding: 1px; z-index: 0;
  background: linear-gradient(160deg, rgba(var(--tone-rgb), .7), rgba(255, 255, 255, .08) 38%, rgba(255, 255, 255, .04) 70%, rgba(var(--tone-rgb), .3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.plan > * { position: relative; z-index: 1; }
.plan .badge, .plan .emblem { position: absolute; z-index: 2; }
.plan-tag { color: rgba(238, 244, 248, .7); opacity: 1; }
.plan-price s { color: rgba(238, 244, 248, .45); opacity: 1; }
.plan-price b { color: #fff; text-shadow: 0 0 30px rgba(var(--tone-rgb), .35); }
.plan-price span { color: rgba(238, 244, 248, .6); }
.plan-includes { background: rgba(var(--tone-rgb), .1); color: var(--tone); }
.plan li { border-top-color: rgba(255, 255, 255, .07); color: rgba(238, 244, 248, .86); }
.plan li::before { color: var(--tone); }
.plan .emblem { background: rgba(var(--tone-rgb), .12); color: var(--tone); outline: 0; rotate: 0deg;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(var(--tone-rgb), .45), 0 0 24px rgba(var(--tone-rgb), .3); }
.plan .badge { background: var(--tone); color: var(--night-0); }
.plan .plan-cta .btn:not(.btn-ghost) { background: var(--tone); color: var(--night-0); box-shadow: 0 10px 26px rgba(var(--tone-rgb), .3); }
.plan .plan-cta .btn-ghost { background: rgba(255, 255, 255, .05); color: #eef4f8; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.plan .more-btn { color: var(--tone); }
@media (hover: hover) and (pointer: fine) { .plan:hover { box-shadow: 0 36px 70px rgba(0, 0, 0, .55), 0 0 50px rgba(var(--tone-rgb), .18); } }
/* the featured plan: its edge carries a slow travelling light */
@property --spin { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.plan.featured::before { padding: 1.5px; background: conic-gradient(from var(--spin), rgba(var(--tone-rgb), .15), var(--tone) 12%, rgba(var(--tone-rgb), .15) 26%, rgba(255, 255, 255, .06) 50%, rgba(var(--tone-rgb), .15) 76%, var(--tone) 88%, rgba(var(--tone-rgb), .15));
  animation: edge 6s linear infinite; }
@keyframes edge { to { --spin: 360deg; } }
@media (prefers-reduced-motion: reduce) { .plan.featured::before { animation: none; } }