/* Badals site layout, v2 "Swiss grid".
   Brand values come from tokens.css; buttons, inputs and tabs from components.css.
   Direction: strict 12-column grid, flush-start, black on white,
   orange only on the primary action. Sections open with a 1px ink rule. */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font: 400 16px/1.55 var(--font-sans); color: var(--ink); background: var(--canvas); overflow-x: hidden; margin: 0; }
html[dir="rtl"] body { font-family: var(--font-arabic); line-height: 1.8; }
html[dir="rtl"] { font-synthesis: none; } /* GE SS Two has one weight: never fake-bold it */
img { max-width: 100%; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; margin: 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: -9999px; top: 8px; z-index: 100; }
.skip:focus { inset-inline-start: 8px; }

/* ---------- Grid ---------- */
:root { --gutter: 24px; --edge: 40px; }
@media (max-width: 768px) { :root { --gutter: 16px; --edge: 20px; } }
@media (max-width: 480px) { :root { --edge: 16px; } }
.wrap { max-width: 1320px; margin-inline: auto; padding-inline: var(--edge); }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }

/* A section = space, an orange tick above the title, title in columns 1-4,
   content in 5-12. No dividing rules: the white surfaces do that work. */
.row { padding-block: 56px 88px; }
.row > .g12 { row-gap: 32px; }
.row-head { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 12px; align-content: start; }
.row-body { grid-column: 5 / -1; min-width: 0; }
.row-title { font: 600 28px/1.2 var(--font-sans); letter-spacing: -0.01em; }
.row-title::before { content: ""; display: block; width: 30px; height: 3px; background: var(--primary); margin-bottom: 18px; }
html[dir="rtl"] .row-title { font: 300 28px/1.45 var(--font-arabic); letter-spacing: 0; }
.row-lead { color: var(--body); max-width: 32ch; }
.fine { font-size: 13px; line-height: 1.5; color: var(--mute); }
@media (max-width: 900px) {
  .row { padding-block: 24px 64px; }
  .row-head, .row-body { grid-column: 1 / -1; }
  .row-lead { max-width: 60ch; }
}
@media (max-width: 480px) { .row { padding-block: 16px 48px; } .row-title, html[dir="rtl"] .row-title { font-size: 24px; } }

/* Links: ink with an orange underline (brand rule) */
.tlink { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--link-underline);
  text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color .12s; }
.tlink:hover { text-decoration-color: var(--ink); }
.tlink:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
button.tlink { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; }

/* ---------- Header: black bar, white wordmark (brand rule) ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--surface-dark); color: var(--on-dark); }
.site-header.is-stuck { box-shadow: var(--shadow-sticky); }
.site-header { transition: transform .28s ease; }
.site-header.is-away { transform: translateY(-100%); }
.nav { height: 68px; display: flex; align-items: center; gap: 32px; }
.nav-logo { display: flex; align-items: center; min-height: 44px; }
.nav-logo img { height: 28px; width: auto; display: block; }
.nav-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--on-dark); text-decoration: none; font-size: 15px; padding-block: 23px; border-bottom: 2px solid transparent; }
.nav-links a:hover { border-bottom-color: var(--hairline-strong); }
.nav-links a[aria-current="page"] { border-bottom-color: var(--primary); font-weight: 600; }
.nav-links a:focus-visible, .lang-switch:focus-visible, .menu-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.nav-end { margin-inline-start: auto; display: flex; align-items: center; gap: 20px; }
.lang-switch { color: var(--on-dark); text-decoration: none; font: 400 15px/1 var(--font-arabic); min-height: 44px; display: inline-flex; align-items: center; }
html[dir="rtl"] .lang-switch { font-family: var(--font-sans); }
.lang-switch:hover { text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.auth-cta { height: 48px; font-size: 16px; padding-inline: 22px; }
.menu-btn { display: none; width: 44px; height: 44px; place-items: center; background: none; border: 0; color: var(--on-dark); cursor: pointer; margin-inline-start: -10px; }
.drawer { background: var(--surface-dark); border-top: 1px solid var(--hairline-strong); padding-block: 8px 20px; }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer a { display: flex; align-items: center; min-height: 52px; color: var(--on-dark); text-decoration: none; font-size: 20px; border-bottom: 1px solid var(--surface-elevated); }
.drawer a[aria-current="page"] { font-weight: 600; }
.drawer .lang-switch { font-size: 18px; border: 0; margin-top: 8px; }
@media (min-width: 901px) { .drawer { display: none; } }
@media (max-width: 900px) {
  .nav { gap: 12px; height: 60px; }
  .nav-links, .nav-end .lang-switch { display: none; }
  .menu-btn { display: grid; }
}
@media (max-width: 480px) {
  .nav-logo img { height: 24px; }
  .auth-cta { height: 44px; font-size: 14.5px; padding-inline: 12px; }
}
@media (max-width: 350px) { .auth-cta { font-size: 13px; padding-inline: 9px; } .nav-logo img { height: 20px; } }

/* ---------- Home hero ---------- */
.hero { padding-block: 72px 96px; }
.hero-title { grid-column: 1 / span 10; font: 600 clamp(44px, 7.4vw, 104px)/0.98 var(--font-sans); letter-spacing: -0.035em; }
html[dir="rtl"] .hero-title { font: 300 clamp(40px, 6.4vw, 88px)/1.25 var(--font-arabic); letter-spacing: 0; }
.hero-copy { grid-column: 1 / span 6; margin-top: 48px; display: flex; flex-direction: column; gap: 24px; }
.hero-sub { font-size: 20px; line-height: 1.5; color: var(--body); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.hero-note { font-size: 14px; color: var(--mute); }
@media (max-width: 900px) {
  .hero { padding-block: 40px 64px; }
  .hero-title { grid-column: 1 / -1; }
  .hero-copy { grid-column: 1 / -1; margin-top: 32px; }
}
@media (max-width: 480px) {
  .hero-sub { font-size: 17px; }
  .hero-actions .bd-btn { flex: 1 1 100%; }
}

/* ---------- Ordered steps (a real sequence) ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.steps li { display: flex; flex-direction: column; gap: 8px; }
.steps .n { font: 600 15px/1 var(--font-sans); font-variant-numeric: tabular-nums; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); margin-bottom: 8px; }
.steps h3 { font: 600 19px/1.3 var(--font-sans); }
html[dir="rtl"] .steps h3 { font: 300 21px/1.5 var(--font-arabic); }
.steps p { color: var(--body); }
.more { margin-top: 32px; }
@media (max-width: 700px) { .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* ---------- Definition list (what you get, customs...) ---------- */
.defs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); margin: 0; }
.defs div { padding-block: 18px 22px; border-top: 1px solid var(--hairline); }
.defs div:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.defs dt { font-weight: 600; margin-bottom: 4px; }
.defs dd { margin: 0; color: var(--body); }
@media (max-width: 700px) { .defs { grid-template-columns: minmax(0, 1fr); } .defs div:nth-child(2) { border-top: 1px solid var(--hairline); padding-top: 18px; } }

/* ---------- Stores: logo wall ---------- */
/* Tiles share their borders so the wall reads as one grid */
.logo-wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--hairline); border-inline-start: 1px solid var(--hairline); }
.logo-wall li { border-bottom: 1px solid var(--hairline); border-inline-end: 1px solid var(--hairline); }
.logo-wall a { display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 16px; color: var(--ink); text-decoration: none; transition: background-color .12s; }
.logo-wall a:hover { background: var(--surface-soft); }
.logo-wall a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.logo-wall img { max-width: 78%; max-height: 54px; object-fit: contain; }
.logo-name { font: 600 20px/1.1 var(--font-sans); letter-spacing: -0.02em; text-align: center; }
@media (max-width: 1024px) { .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } .logo-name { font-size: 17px; } }

/* ---------- Big figure (rates preview) ---------- */
.figure { font: 600 clamp(48px, 7vw, 88px)/1 var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.figure-cap { margin-top: 12px; color: var(--body); font-size: 18px; max-width: 40ch; }

/* ---------- Closing call to action ---------- */
.close-row .row-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.close-title { font: 600 clamp(28px, 3.6vw, 44px)/1.1 var(--font-sans); letter-spacing: -0.02em; max-width: 16ch; }
html[dir="rtl"] .close-title { font: 300 clamp(28px, 3.4vw, 40px)/1.4 var(--font-arabic); letter-spacing: 0; }
@media (max-width: 480px) { .close-row .bd-btn { width: 100%; } }

/* ---------- Sub-page header ---------- */
.page-head { padding-block: 64px 48px; }
.page-head h1 { grid-column: 1 / span 9; font: 600 clamp(40px, 5.6vw, 76px)/1.02 var(--font-sans); letter-spacing: -0.03em; }
html[dir="rtl"] .page-head h1 { font: 300 clamp(36px, 5vw, 64px)/1.3 var(--font-arabic); letter-spacing: 0; }
.page-head p { grid-column: 1 / span 6; margin-top: 24px; font-size: 20px; color: var(--body); }
@media (max-width: 900px) { .page-head { padding-block: 40px 24px; } .page-head h1, .page-head p { grid-column: 1 / -1; } .page-head p { font-size: 17px; } }

/* ---------- Tables (timings, rates) ---------- */
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { text-align: start; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--hairline); vertical-align: baseline; }
html[dir="rtl"] .tbl th, html[dir="rtl"] .tbl td { padding: 14px 0 14px 16px; }
.tbl thead th { font-size: 14px; font-weight: 400; color: var(--mute); border-bottom: 1px solid var(--ink); }
.tbl td.num { font-weight: 600; white-space: nowrap; }
.tbl tr.is-hit td { background: var(--primary-tint); }

/* Detailed steps (How it works) */
.steps-long { list-style: none; margin: 0; padding: 0; }
.steps-long li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 var(--gutter); padding-block: 20px 24px; border-bottom: 1px solid var(--hairline); }
.steps-long li:first-child { padding-top: 0; }
.steps-long .n { font-weight: 600; font-variant-numeric: tabular-nums; }
.steps-long h3 { font: 600 19px/1.35 var(--font-sans); margin-bottom: 6px; }
html[dir="rtl"] .steps-long h3 { font: 300 21px/1.5 var(--font-arabic); }
.steps-long p { color: var(--body); max-width: 60ch; }
.prose p { max-width: 62ch; color: var(--body); font-size: 18px; }
.prose p + p { margin-top: 16px; }

/* ---------- Rates page ---------- */
.sample { display: inline-block; font-size: 14px; color: var(--warning); background: var(--warning-pale); padding: 6px 10px; border-radius: var(--radius-sm); margin-bottom: 20px; }
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px var(--gutter); }
.calc-inputs { display: flex; flex-direction: column; gap: 20px; }
.calc-dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.calc-out { display: flex; flex-direction: column; gap: 10px; }
.calc-line { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); font-variant-numeric: tabular-nums; }
.calc-total { font: 600 44px/1 var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: 8px; }
@media (max-width: 700px) { .calc { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 380px) { .calc-dims { grid-template-columns: minmax(0, 1fr); } }
.two-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--gutter); }
.two-lists h3 { font: 600 17px/1.4 var(--font-sans); padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { display: flex; justify-content: space-between; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--hairline); color: var(--body); }
.plain-list li span + span { color: var(--ink); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .two-lists { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ ---------- */
.faq-toc { position: sticky; top: 92px; display: flex; flex-direction: column; }
.faq-toc a { color: var(--body); text-decoration: none; padding-block: 8px; font-size: 15px; }
.faq-toc a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (max-width: 900px) { .faq-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px 20px; } .faq-toc a { min-height: 44px; display: inline-flex; align-items: center; } }
.faq-group + .faq-group { margin-top: 56px; }
.faq-group { scroll-margin-top: 92px; }
.faq-group h2 { font: 600 22px/1.3 var(--font-sans); padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
html[dir="rtl"] .faq-group h2 { font: 300 24px/1.5 var(--font-arabic); }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-block: 16px; font-weight: 600; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-weight: 400; font-size: 22px; line-height: 1; color: var(--mute); }
.faq-item[open] summary::after { content: "\2212"; color: var(--ink); }
.faq-item summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.faq-item p { padding-bottom: 20px; color: var(--body); max-width: 62ch; }

/* ---------- Footer: what the site has, nothing more ---------- */
.site-footer { border-top: 1px solid var(--ink); margin-top: 32px; padding-block: 40px 24px; }
.foot { row-gap: 32px; }
.foot-brand { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.foot-brand img { height: 44px; width: auto; }
.foot-brand p { color: var(--body); font-size: 15px; max-width: 30ch; }
.foot-contact { grid-column: 5 / span 4; }
.foot-links { grid-column: 9 / -1; }
.foot h2 { font-size: 14px; font-weight: 400; color: var(--mute); margin-bottom: 10px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.foot li a, .foot li span { display: inline-flex; min-height: 36px; align-items: center; color: var(--ink); text-decoration: none; font-size: 15px; }
.foot li a:hover { text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--mute); }
@media (max-width: 900px) { .foot-brand, .foot-contact, .foot-links { grid-column: 1 / -1; } .foot li a, .foot li span { min-height: 44px; } }

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 80;
  background: var(--ink); color: var(--canvas); padding: 12px 18px; border-radius: var(--radius-sm); font-size: 15px; max-width: calc(100vw - 32px); }
[lang="en"] { font-family: var(--font-sans); }

/* ---------- Delivery timeline (How it works) ---------- */
/* Bars are placed on a 0-15 day scale: --s = start day, --e = end day. */
.tl-storage { color: var(--body); max-width: 60ch; margin-bottom: 28px; }
.tl-storage strong { color: var(--ink); }
.tl { margin: 0; --max: 15; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--body); margin-bottom: 20px; }
.tl-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.sw-transit { background: var(--ink); }
.sw-local { background: var(--primary); }
.tl-rows { display: flex; flex-direction: column; gap: 14px; }
.tl-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--gutter); align-items: center; }
.tl-label { font-weight: 600; font-size: 15px; }
.tl-track { position: relative; height: 36px; margin-inline-end: 84px; /* room for the total label */
  background: repeating-linear-gradient(to right, transparent 0 calc(100% / 5 - 1px), var(--hairline) calc(100% / 5 - 1px) calc(100% / 5)); }
html[dir="rtl"] .tl-track { background: repeating-linear-gradient(to left, transparent 0 calc(100% / 5 - 1px), var(--hairline) calc(100% / 5 - 1px) calc(100% / 5)); }
.tl-bar { position: absolute; top: 0; bottom: 0; inset-inline-start: calc(var(--s) / var(--max) * 100%);
  width: calc((var(--e) - var(--s)) / var(--max) * 100% - 2px); /* 2px surface gap between segments */
  box-sizing: border-box; border-radius: 2px; display: flex; align-items: center; padding-inline: 10px; }
.tl-bar b { font: 600 14px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.tl-bar.sw-transit b { color: var(--canvas); }
.tl-bar.sw-local b { color: var(--on-primary); }
.tl-total { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: calc(var(--s) / var(--max) * 100% + 10px);
  white-space: nowrap; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; background: var(--canvas); padding-inline: 4px; }
.tl-axis-row { align-items: start; }
.tl-axis { position: relative; height: 28px; margin-inline-end: 84px; border-top: 1px solid var(--ink); }
.tl-axis span { position: absolute; top: 6px; inset-inline-start: calc(var(--s) / var(--max) * 100%); transform: translateX(-50%);
  font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
html[dir="rtl"] .tl-axis span { transform: translateX(50%); }
.tl-axis em { position: absolute; top: 6px; inset-inline-start: calc(100% + 16px); font-style: normal; font-size: 13px; color: var(--mute); }
@media (max-width: 600px) {
  .tl-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tl-axis-row .tl-label { display: none; }
  .tl-track, .tl-axis { margin-inline-end: 72px; }
  .tl-total { font-size: 14px; }
}


/* ---------- Closing band: the cube-circuit pattern, white on black ---------- */
/* The brand pattern is only ever used this way: on black, under a dark gradient. */
.close-row {
  background-color: var(--surface-dark);
  background-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .88) 42%, rgba(0, 0, 0, .45) 100%), url("../assets/img/pattern.jpg");
  background-size: auto, 620px auto;
  background-position: center, center;
  background-repeat: no-repeat, repeat;
  color: var(--on-dark);
  padding-block: 72px;
  margin-top: 24px;
}
html[dir="rtl"] .close-row { background-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, .88) 42%, rgba(0, 0, 0, .45) 100%), url("../assets/img/pattern.jpg"); }
.close-row > .g12 { background: none; padding-top: 0; }
.close-row .close-title { color: var(--on-dark); }
@media (max-width: 900px) {
  .close-row { padding-block: 48px; background-image: linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.75) 100%), url("../assets/img/pattern.jpg"); }
  html[dir="rtl"] .close-row { background-image: linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.75) 100%), url("../assets/img/pattern.jpg"); }
}
.site-footer { margin-top: 0; }
@media (max-width: 700px) { .close-title, html[dir="rtl"] .close-title { max-width: none; font-size: 30px; } }

/* ---------- Home hero: same black pattern chapter as the closing band ---------- */
.hero {
  background-color: var(--surface-dark);
  background-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .9) 45%, rgba(0, 0, 0, .45) 100%), url("../assets/img/pattern.jpg");
  background-size: auto, 620px auto;
  background-position: center, center;
  background-repeat: no-repeat, repeat;
  color: var(--on-dark);
  padding-block: 88px 96px;
}
html[dir="rtl"] .hero { background-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, .9) 45%, rgba(0, 0, 0, .45) 100%), url("../assets/img/pattern.jpg"); }
.hero .hero-title { color: var(--on-dark); }
.hero .hero-sub { color: var(--on-dark-mute); }
.hero .hero-note { color: var(--on-dark-mute); }
.hero .tlink { color: var(--on-dark); }
.hero .tlink:hover { text-decoration-color: var(--on-dark); }
@media (max-width: 900px) {
  .hero { padding-block: 48px 56px;
    background-image: linear-gradient(180deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.72) 100%), url("../assets/img/pattern.jpg"); }
  html[dir="rtl"] .hero { background-image: linear-gradient(180deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.72) 100%), url("../assets/img/pattern.jpg"); }
}

/* How it works: the section pins while the four steps play through */
.flow-row { padding-block: 0; }
.flow-row > .g12 { padding-top: 0; }
/* the wrap is sized by flow.js: the steps' own height plus the scroll it takes to play them */
.flow-pin { position: sticky; top: 64px; padding-block: 16px; }

/* the timeline itself: the line lights up beside the step you are on */
.flow { position: relative; }
.flow-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.flow-rail { position: absolute; inset-block: 6px; inset-inline-start: 44px; width: 2px; background: var(--hairline); }
.flow-rail i { position: absolute; inset-inline-start: -1px; width: 4px; height: 96px; border-radius: 2px; background: var(--primary);
  box-shadow: 0 0 16px rgba(246,146,30,.65); transition: transform .35s ease; }
.flow-steps li { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 0 28px; padding-block: 26px; }
.flow-steps .fi { width: 34px; height: 34px; color: var(--mute); transition: color .3s, transform .3s; }
.flow-steps .fi svg { width: 100%; height: 100%; }
.flow-steps h3 { font: 600 17px/1.4 var(--font-sans); color: var(--mute); transition: color .3s, font-size .3s; }
html[dir="rtl"] .flow-steps h3 { font: 300 18px/1.6 var(--font-arabic); }
.flow-steps li.is-on .fi { color: var(--primary); transform: scale(1.18); }
.flow-steps li.is-on h3 { color: var(--ink); font-size: 28px; }
html[dir="rtl"] .flow-steps li.is-on h3 { font-size: 28px; }
.flow-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 28px; padding-inline-start: 72px; }
@media (prefers-reduced-motion: reduce) { .flow-steps h3, .flow-steps .fi { color: var(--ink); } }
@media (max-width: 600px) {
  .flow-rail { inset-inline-start: 34px; }
  .flow-steps li { grid-template-columns: 34px 1fr; gap: 0 20px; padding-block: 26px; }
  .flow-steps .fi { width: 26px; height: 26px; }
  .flow-steps h3 { font-size: 15px; }
  .flow-steps li.is-on h3, html[dir="rtl"] .flow-steps li.is-on h3 { font-size: 19px; }
  .flow-cta { padding-inline-start: 0; }
}


/* ---------- Worth shipping: the looping product row ---------- */
.shop-row { padding-bottom: 40px; }
.shop-row > .g12 { row-gap: 24px; }
.shop-row .row-head { grid-column: 1 / -1; }   /* title and lead sit above the carousel */
.shop-row .row-lead { max-width: 60ch; }
.shop-body { grid-column: 1 / -1; }
.carousel { min-width: 0; }
.prail { overflow: hidden; }
.ptrack { display: flex; width: max-content; will-change: transform; }
.ptrack > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; padding-inline-end: 16px; }
.pcard { flex: 0 0 210px; display: flex; flex-direction: column; gap: 6px; }
.pimg { position: relative; aspect-ratio: 4 / 3; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--ink); }
.pimg > svg { width: 82%; height: auto; }
/* product shots come on white: multiply melts the white into the tile colour */
.pimg > .pphoto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; mix-blend-mode: multiply; }
.pimg > .pstore { z-index: 1; }
a.pimg { text-decoration: none; }
a.pimg:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pstore { position: absolute; inset-inline-end: 8px; bottom: 8px; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  height: 26px; min-width: 26px; padding-inline: 8px; display: inline-flex; align-items: center; justify-content: center; font: 600 12px/1 var(--font-sans); }
.pstore img { max-height: 14px; max-width: 64px; object-fit: contain; display: block; }
.pstore img[src$="homedepot.png"] { max-height: 26px; }   /* square logo: needs height to be legible */
.pcard h3 { font: 600 15px/1.35 var(--font-sans); margin-top: 4px; }
html[dir="rtl"] .pcard h3 { font: 300 16px/1.6 var(--font-arabic); }
.pprice { font: 600 17px/1.2 var(--font-sans); font-variant-numeric: tabular-nums; }
.psave { color: var(--primary-active); font-weight: 600; font-size: 13.5px; }
.ponly { color: var(--ink); font-weight: 600; font-size: 13.5px; }
.pnav { display: none; }
.stores-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 20px; margin-top: 24px; }
.stores-more .fine { max-width: 40ch; }
@media (max-width: 800px) {
  .prail { margin-inline: calc(var(--edge) * -1); padding-inline: var(--edge); }
  .pcard { flex-basis: 165px; }
}

.merge { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px var(--gutter); align-items: center;
  background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 28px; margin-bottom: 28px; }
.merge h3 { font: 600 22px/1.3 var(--font-sans); margin-bottom: 8px; }
html[dir="rtl"] .merge h3 { font: 300 24px/1.5 var(--font-arabic); }
.merge p { color: var(--body); }
.merge-art { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.mchip { width: 54px; height: 40px; display: grid; place-items: center; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-sm); }
.mchip img { max-width: 38px; max-height: 18px; object-fit: contain; }
.marrow { color: var(--primary-active); font-size: 22px; font-weight: 600; }
html[dir="rtl"] .marrow { transform: scaleX(-1); display: inline-block; }
.mbox { width: 64px; height: 64px; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); border-radius: var(--radius-sm); }
.mbox svg { width: 40px; height: 40px; }
@media (max-width: 800px) { .merge { grid-template-columns: minmax(0, 1fr); padding: 20px; } .merge-art { justify-content: flex-start; } }

/* ---------- Definition list (what you get, customs...) ---------- */
.defs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); margin: 0; }
.defs div { padding-block: 18px 22px; border-top: 1px solid var(--hairline); }
.defs div:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.defs dt { font-weight: 600; margin-bottom: 4px; }
.defs dd { margin: 0; color: var(--body); }
@media (max-width: 700px) { .defs { grid-template-columns: minmax(0, 1fr); } .defs div:nth-child(2) { border-top: 1px solid var(--hairline); padding-top: 18px; } }

/* ---------- Stores: logo wall ---------- */
/* Tiles share their borders so the wall reads as one grid */
.logo-wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--hairline); border-inline-start: 1px solid var(--hairline); }
.logo-wall li { border-bottom: 1px solid var(--hairline); border-inline-end: 1px solid var(--hairline); }
.logo-wall a { display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 16px; color: var(--ink); text-decoration: none; transition: background-color .12s; }
.logo-wall a:hover { background: var(--surface-soft); }
.logo-wall a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.logo-wall img { max-width: 78%; max-height: 54px; object-fit: contain; }
.logo-name { font: 600 20px/1.1 var(--font-sans); letter-spacing: -0.02em; text-align: center; }
@media (max-width: 1024px) { .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } .logo-name { font-size: 17px; } }

/* ---------- Big figure (rates preview) ---------- */
.figure { font: 600 clamp(48px, 7vw, 88px)/1 var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.figure-cap { margin-top: 12px; color: var(--body); font-size: 18px; max-width: 40ch; }

/* ---------- Closing call to action ---------- */
.close-row .row-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.close-title { font: 600 clamp(28px, 3.6vw, 44px)/1.1 var(--font-sans); letter-spacing: -0.02em; max-width: 16ch; }
html[dir="rtl"] .close-title { font: 300 clamp(28px, 3.4vw, 40px)/1.4 var(--font-arabic); letter-spacing: 0; }
@media (max-width: 480px) { .close-row .bd-btn { width: 100%; } }

/* ---------- Sub-page header ---------- */
.page-head { padding-block: 64px 48px; }
.page-head h1 { grid-column: 1 / span 9; font: 600 clamp(40px, 5.6vw, 76px)/1.02 var(--font-sans); letter-spacing: -0.03em; }
html[dir="rtl"] .page-head h1 { font: 300 clamp(36px, 5vw, 64px)/1.3 var(--font-arabic); letter-spacing: 0; }
.page-head p { grid-column: 1 / span 6; margin-top: 24px; font-size: 20px; color: var(--body); }
@media (max-width: 900px) { .page-head { padding-block: 40px 24px; } .page-head h1, .page-head p { grid-column: 1 / -1; } .page-head p { font-size: 17px; } }

/* ---------- Tables (timings, rates) ---------- */
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { text-align: start; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--hairline); vertical-align: baseline; }
html[dir="rtl"] .tbl th, html[dir="rtl"] .tbl td { padding: 14px 0 14px 16px; }
.tbl thead th { font-size: 14px; font-weight: 400; color: var(--mute); border-bottom: 1px solid var(--ink); }
.tbl td.num { font-weight: 600; white-space: nowrap; }
.tbl tr.is-hit td { background: var(--primary-tint); }

/* Detailed steps (How it works) */
.steps-long { list-style: none; margin: 0; padding: 0; }
.steps-long li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 var(--gutter); padding-block: 20px 24px; border-bottom: 1px solid var(--hairline); }
.steps-long li:first-child { padding-top: 0; }
.steps-long .n { font-weight: 600; font-variant-numeric: tabular-nums; }
.steps-long h3 { font: 600 19px/1.35 var(--font-sans); margin-bottom: 6px; }
html[dir="rtl"] .steps-long h3 { font: 300 21px/1.5 var(--font-arabic); }
.steps-long p { color: var(--body); max-width: 60ch; }
.prose p { max-width: 62ch; color: var(--body); font-size: 18px; }
.prose p + p { margin-top: 16px; }

/* ---------- Rates page ---------- */
.sample { display: inline-block; font-size: 14px; color: var(--warning); background: var(--warning-pale); padding: 6px 10px; border-radius: var(--radius-sm); margin-bottom: 20px; }
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px var(--gutter); }
.calc-inputs { display: flex; flex-direction: column; gap: 20px; }
.calc-dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.calc-out { display: flex; flex-direction: column; gap: 10px; }
.calc-line { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); font-variant-numeric: tabular-nums; }
.calc-total { font: 600 44px/1 var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: 8px; }
@media (max-width: 700px) { .calc { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 380px) { .calc-dims { grid-template-columns: minmax(0, 1fr); } }
.two-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--gutter); }
.two-lists h3 { font: 600 17px/1.4 var(--font-sans); padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { display: flex; justify-content: space-between; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--hairline); color: var(--body); }
.plain-list li span + span { color: var(--ink); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .two-lists { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ ---------- */
.faq-toc { position: sticky; top: 92px; display: flex; flex-direction: column; }
.faq-toc a { color: var(--body); text-decoration: none; padding-block: 8px; font-size: 15px; }
.faq-toc a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (max-width: 900px) { .faq-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px 20px; } .faq-toc a { min-height: 44px; display: inline-flex; align-items: center; } }
.faq-group + .faq-group { margin-top: 56px; }
.faq-group { scroll-margin-top: 92px; }
.faq-group h2 { font: 600 22px/1.3 var(--font-sans); padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
html[dir="rtl"] .faq-group h2 { font: 300 24px/1.5 var(--font-arabic); }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-block: 16px; font-weight: 600; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-weight: 400; font-size: 22px; line-height: 1; color: var(--mute); }
.faq-item[open] summary::after { content: "\2212"; color: var(--ink); }
.faq-item summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.faq-item p { padding-bottom: 20px; color: var(--body); max-width: 62ch; }

/* ---------- Footer: what the site has, nothing more ---------- */
.site-footer { border-top: 1px solid var(--ink); margin-top: 32px; padding-block: 40px 24px; }
.foot { row-gap: 32px; }
.foot-brand { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.foot-brand img { height: 44px; width: auto; }
.foot-brand p { color: var(--body); font-size: 15px; max-width: 30ch; }
.foot-contact { grid-column: 5 / span 4; }
.foot-links { grid-column: 9 / -1; }
.foot h2 { font-size: 14px; font-weight: 400; color: var(--mute); margin-bottom: 10px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.foot li a, .foot li span { display: inline-flex; min-height: 36px; align-items: center; color: var(--ink); text-decoration: none; font-size: 15px; }
.foot li a:hover { text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--mute); }
@media (max-width: 900px) { .foot-brand, .foot-contact, .foot-links { grid-column: 1 / -1; } .foot li a, .foot li span { min-height: 44px; } }

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 80;
  background: var(--ink); color: var(--canvas); padding: 12px 18px; border-radius: var(--radius-sm); font-size: 15px; max-width: calc(100vw - 32px); }
[lang="en"] { font-family: var(--font-sans); }

/* ---------- Delivery timeline (How it works) ---------- */
/* Bars are placed on a 0-15 day scale: --s = start day, --e = end day. */
.tl-storage { color: var(--body); max-width: 60ch; margin-bottom: 28px; }
.tl-storage strong { color: var(--ink); }
.tl { margin: 0; --max: 15; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--body); margin-bottom: 20px; }
.tl-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.sw-transit { background: var(--ink); }
.sw-local { background: var(--primary); }
.tl-rows { display: flex; flex-direction: column; gap: 14px; }
.tl-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--gutter); align-items: center; }
.tl-label { font-weight: 600; font-size: 15px; }
.tl-track { position: relative; height: 36px; margin-inline-end: 84px; /* room for the total label */
  background: repeating-linear-gradient(to right, transparent 0 calc(100% / 5 - 1px), var(--hairline) calc(100% / 5 - 1px) calc(100% / 5)); }
html[dir="rtl"] .tl-track { background: repeating-linear-gradient(to left, transparent 0 calc(100% / 5 - 1px), var(--hairline) calc(100% / 5 - 1px) calc(100% / 5)); }
.tl-bar { position: absolute; top: 0; bottom: 0; inset-inline-start: calc(var(--s) / var(--max) * 100%);
  width: calc((var(--e) - var(--s)) / var(--max) * 100% - 2px); /* 2px surface gap between segments */
  box-sizing: border-box; border-radius: 2px; display: flex; align-items: center; padding-inline: 10px; }
.tl-bar b { font: 600 14px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.tl-bar.sw-transit b { color: var(--canvas); }
.tl-bar.sw-local b { color: var(--on-primary); }
.tl-total { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: calc(var(--s) / var(--max) * 100% + 10px);
  white-space: nowrap; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; background: var(--canvas); padding-inline: 4px; }
.tl-axis-row { align-items: start; }
.tl-axis { position: relative; height: 28px; margin-inline-end: 84px; border-top: 1px solid var(--ink); }
.tl-axis span { position: absolute; top: 6px; inset-inline-start: calc(var(--s) / var(--max) * 100%); transform: translateX(-50%);
  font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
html[dir="rtl"] .tl-axis span { transform: translateX(50%); }
.tl-axis em { position: absolute; top: 6px; inset-inline-start: calc(100% + 16px); font-style: normal; font-size: 13px; color: var(--mute); }
@media (max-width: 600px) {
  .tl-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tl-axis-row .tl-label { display: none; }
  .tl-track, .tl-axis { margin-inline-end: 72px; }
  .tl-total { font-size: 14px; }
}


/* ---------- Closing band: the cube-circuit pattern, white on black ---------- */
/* The brand pattern is only ever used this way: on black, under a dark gradient. */
.close-row {
  background-color: var(--surface-dark);
  background-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .88) 42%, rgba(0, 0, 0, .45) 100%), url("../assets/img/pattern.jpg");
  background-size: auto, 620px auto;
  background-position: center, center;
  background-repeat: no-repeat, repeat;
  color: var(--on-dark);
  padding-block: 72px;
  margin-top: 24px;
}
html[dir="rtl"] .close-row { background-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, .88) 42%, rgba(0, 0, 0, .45) 100%), url("../assets/img/pattern.jpg"); }
.close-row > .g12 { background: none; padding-top: 0; }
.close-row .close-title { color: var(--on-dark); }
@media (max-width: 900px) {
  .close-row { padding-block: 48px; background-image: linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.75) 100%), url("../assets/img/pattern.jpg"); }
  html[dir="rtl"] .close-row { background-image: linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.75) 100%), url("../assets/img/pattern.jpg"); }
}
.site-footer { margin-top: 0; }
@media (max-width: 700px) { .close-title, html[dir="rtl"] .close-title { max-width: none; font-size: 30px; } }

/* ---------- Home hero: same black pattern chapter as the closing band ---------- */
.hero {
  background-color: var(--surface-dark);
  background-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .9) 45%, rgba(0, 0, 0, .45) 100%), url("../assets/img/pattern.jpg");
  background-size: auto, 620px auto;
  background-position: center, center;
  background-repeat: no-repeat, repeat;
  color: var(--on-dark);
  padding-block: 88px 96px;
}
html[dir="rtl"] .hero { background-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, .9) 45%, rgba(0, 0, 0, .45) 100%), url("../assets/img/pattern.jpg"); }
.hero .hero-title { color: var(--on-dark); }
.hero .hero-sub { color: var(--on-dark-mute); }
.hero .hero-note { color: var(--on-dark-mute); }
.hero .tlink { color: var(--on-dark); }
.hero .tlink:hover { text-decoration-color: var(--on-dark); }
@media (max-width: 900px) {
  .hero { padding-block: 48px 56px;
    background-image: linear-gradient(180deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.72) 100%), url("../assets/img/pattern.jpg"); }
  html[dir="rtl"] .hero { background-image: linear-gradient(180deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.72) 100%), url("../assets/img/pattern.jpg"); }
}



/* ---------- White page ---------- */
/* Product images keep a hairline so they hold their shape on white. */
.pimg { background: #f6f5f3; border: 0; border-radius: 10px; overflow: hidden; }

/* ---------- More brand colour, kept to orange and flame ---------- */

.ponly { color: var(--ink); font-weight: 600; font-size: 13.5px; }

/* Numbers and figures carry the accent */
.steps .n { color: var(--primary-active); font-size: 17px; }
.steps-long .n { color: var(--primary-active); }
.figure { color: var(--accent-strong); }
.figure-from { font: 600 14px/1 var(--font-sans); color: var(--mute); margin-bottom: 10px; }
html[dir="rtl"] .figure-from { font: 300 15px/1.4 var(--font-arabic); }
.detail-step .step-num { color: var(--primary-active); }
.faq-item summary::after { color: var(--primary); }
.faq-item[open] summary::after { color: var(--primary-active); }
.logo-wall a:hover { background: var(--primary-tint); }
.tbl tr.is-hit td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
html[dir="rtl"] .tbl tr.is-hit td:first-child { box-shadow: inset -3px 0 0 var(--primary); }
.two-lists h3, .store-list { border-color: var(--primary); }
/* the steps row is short: it should not need a screen of its own */

@media (max-width: 700px) { .flow-pin { padding-block: 12px; } }

/* ---------- What you get: white cards, Oman in its own box ---------- */
.why-row .row-head, .why-row .row-body { grid-column: 1 / -1; }
.why-row { padding-top: 40px; }
.why-row .row-head { margin-bottom: 8px; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { background: var(--canvas); border: 1px solid rgba(35, 31, 32, .14); border-radius: 12px;
  padding: 30px 28px 32px; min-width: 0; }
.card h3 { font: 600 21px/1.28 var(--font-sans); letter-spacing: -0.01em; margin-bottom: 10px; }
html[dir="rtl"] .card h3 { font: 300 22px/1.55 var(--font-arabic); letter-spacing: 0; }
.card p { color: var(--body); font-size: 15px; line-height: 1.6; }
.card-art { display: block; width: 78px; height: 78px; margin-bottom: 20px; }
.card-art svg { width: 100%; height: 100%; }
.c-tax .card-art { width: 98px; }

/* Colour on two of the boxes: orange for one box, black for the tax-free
   address. Oman and storage stay white so the colour has something to sit against. */
.c-box { background: var(--primary); border-color: var(--primary); }
.c-box p { color: rgba(35, 31, 32, .82); }
/* a light carton on orange: pale lid, two shaded sides, dark tape */
.c-box .card-art path:nth-child(1) { fill: #fff; }
.c-box .card-art path:nth-child(2) { fill: #f9d2a4; opacity: 1; }
.c-box .card-art path:nth-child(3) { fill: #fde9d2; }
.c-box .card-art path:nth-child(4) { stroke: var(--ink); }
.c-tax { background: var(--surface-dark); border-color: var(--surface-dark); color: var(--on-dark); }
.c-tax p { color: var(--on-dark-mute); }
.c-tax .card-art circle { fill: var(--surface-dark); }
.c-tax .card-art g path:nth-of-type(2) { stroke: #fff; }

/* Oman, in its own box, nothing else in it */
.c-map { grid-column: 3; grid-row: 1 / span 2; display: grid; place-items: center; padding: 36px; }
.map-oman { width: 100%; height: 100%; max-height: 480px; }
.c-box  { grid-column: 1; grid-row: 1; }
.c-tax  { grid-column: 2; grid-row: 1; }
.c-days { grid-column: 1 / span 2; grid-row: 2; display: grid; grid-template-columns: 78px minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 28px; align-content: center; }
.c-days .card-art { align-self: center; }
.c-days .card-art { grid-row: 1 / span 2; margin: 0; }
.c-days h3, .c-days p { grid-column: 2; }

@media (max-width: 1000px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-map { grid-column: 1 / -1; grid-row: auto; padding: 28px; }
  .map-oman { max-height: 320px; }
  .c-box, .c-tax { grid-column: auto; grid-row: auto; }
  .c-days { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 680px) {
  .cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .card { padding: 26px 22px 28px; }
  .c-days { display: block; }
  .c-days .card-art { margin-bottom: 20px; }
  .map-oman { max-height: 260px; }
}

/* ---------- Omani rial sign ---------- */
/* Drawn from the SVG as a mask so it takes the text colour. It precedes the
   amount, so in Arabic it sits on the right. */
.money { white-space: nowrap; unicode-bidi: isolate; }
.rial { display: inline-block; width: 1.5em; height: .78em; vertical-align: -0.06em; background-color: currentColor;
  -webkit-mask: url("../assets/img/omr.svg") no-repeat center / contain; mask: url("../assets/img/omr.svg") no-repeat center / contain; }

/* ---------- What you get: polish ---------- */
/* text sits at the bottom of the coloured cards, drawing at the top */
.c-box, .c-tax { display: flex; flex-direction: column; min-height: 300px; padding: 32px 30px 30px; }
.c-box h3, .c-tax h3 { margin-top: auto; padding-top: 28px; font-size: 24px; }
html[dir="rtl"] .c-box h3, html[dir="rtl"] .c-tax h3 { font-size: 25px; }
/* one size for all three drawings */
.card-art { width: 100px; height: 100px; margin-bottom: 0; }
.c-tax .card-art { width: 126px; }
/* the wide storage card: bigger calendar and headline, sentence right under it */
.c-days { grid-template-columns: 100px minmax(0, 1fr); gap: 4px 32px; padding: 32px 36px; }
.c-days h3 { font-size: 24px; align-self: end; margin-bottom: 6px; }
html[dir="rtl"] .c-days h3 { font-size: 25px; }
.c-days p { font-size: 16px; align-self: start; }

/* Oman in red dots on a pale map of the region, filling its box */
.c-map-ctx { padding: 0; overflow: hidden; }
.c-map-ctx .map-oman { width: 100%; height: 100%; max-height: none; display: block; }

@media (max-width: 1000px) {
  /* the map sits beside the two colour cards rather than above them */
  .c-box { grid-column: 1; grid-row: 1; }
  .c-tax { grid-column: 1; grid-row: 2; }
  .c-map { grid-column: 2; grid-row: 1 / span 2; }
  .c-days { grid-column: 1 / -1; grid-row: 3; }
}
@media (max-width: 680px) {
  .c-box, .c-tax, .c-map, .c-days { grid-column: auto; grid-row: auto; }
  .c-box, .c-tax { min-height: 240px; padding: 26px 22px 24px; }
  .card-art { width: 84px; height: 84px; }
  .c-tax .card-art { width: 106px; }
  .c-days { padding: 26px 22px 28px; }
  .c-days .card-art { margin-bottom: 20px; }
  .c-box h3, .c-tax h3, .c-days h3 { font-size: 21px; }
  .c-map-ctx { aspect-ratio: 4 / 5; }
}

/* ---------- Content-driven sections ---------- */
[hidden] { display: none !important; }
.faq-a { padding-bottom: 20px; color: var(--body); max-width: 62ch; }
.faq-a p + p { margin-top: 10px; }

/* ---------- Prohibited items ---------- */
.pi-group + .pi-group { margin-top: 48px; }
.pi-group h2 { display: flex; align-items: center; gap: 12px; font: 600 22px/1.3 var(--font-sans); padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
html[dir="rtl"] .pi-group h2 { font: 300 24px/1.5 var(--font-arabic); }
.pi-mark { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.pi-banned .pi-mark { background: var(--primary-active); }
.pi-restricted .pi-mark { background: var(--primary); }
.pi-list { list-style: none; margin: 0; padding: 0; }
.pi-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 24px; padding-block: 14px; border-bottom: 1px solid var(--hairline); }
.pi-text { font-weight: 600; color: var(--ink); }
.pi-note { color: var(--body); font-size: 15px; }
@media (max-width: 700px) { .pi-list li { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Phones: the first screen tells the whole story ----------
   Hero (what Badals is, one button) and the Worth shipping row (what people
   buy and how much they save) share the first screen, so nothing is cut off
   mid-sentence. The lead line under "Worth shipping" only shows on tall
   phones; the savings on each card already say it. */
@media (max-width: 600px) {
  .hero { padding-block: 26px 22px; }
  .hero-title { font-size: 42px; line-height: 1; }
  html[dir="rtl"] .hero-title { font-size: 40px; line-height: 1.3; }
  .hero-copy { margin-top: 14px; gap: 14px; }
  .hero-sub { font-size: 16px; line-height: 1.45; }
  .hero-actions { gap: 14px; }
  .hero-actions .bd-btn { min-height: 50px; }
  .hero-actions .tlink { padding-block: 10px; margin-block: -10px; }

  .shop-row { padding-block: 16px 28px; }
  .shop-row > .g12 { row-gap: 12px; }
  .shop-row .row-title::before { margin-bottom: 12px; }
  .shop-row .row-lead { display: none; }
  .pcard { flex-basis: 142px; gap: 2px; }
  .psave, .ponly { font-size: 12.5px; }
  .pcard h3 { font-size: 14px; line-height: 1.3; }
  html[dir="rtl"] .pcard h3 { font-size: 15px; line-height: 1.5; }
  .pprice { font-size: 16px; }
}
@media (max-width: 600px) and (min-height: 720px) {
  .shop-row .row-lead { display: block; font-size: 15px; }
  html[dir="rtl"] .shop-row .row-lead { display: none; }   /* three lines in Arabic: too tall */
}
@media (max-width: 600px) and (min-height: 820px) {
  html[dir="rtl"] .shop-row .row-lead { display: block; }
}
@media (max-width: 600px) and (max-height: 600px) {
  .hero { padding-block: 18px 18px; }
  .hero-title { font-size: 34px; }
  .shop-row { padding-top: 12px; }
  .shop-row .row-title { font-size: 22px; }
  .shop-row .row-title::before { margin-bottom: 10px; }
  html[dir="rtl"] .hero-title { font-size: 34px; }
  .hero-sub { font-size: 15px; }
  .hero-copy { margin-top: 10px; gap: 12px; }
  .hero-actions .tlink { display: none; }          /* the menu has How it works */
  .pcard { flex-basis: 132px; }
  .psave, .ponly { font-size: 12px; white-space: nowrap; }
  .pcard h3 { font-size: 13px; }
}

/* ---------- Phones: What you get fits on one screen ----------
   Two by two, orange and black on a diagonal. Small
   drawings, headline, one short sentence. */
@media (max-width: 600px) {
  .why-row { padding-block: 24px 36px; }
  .why-row .row-head { margin-bottom: 0; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* orange and black on a diagonal, the two white cards between them */
  .c-box { grid-column: 1; grid-row: 1; }
  .c-map { grid-column: 2; grid-row: 1; }
  .c-days { grid-column: 1; grid-row: 2; }
  .c-tax { grid-column: 2; grid-row: 2; }
  .card, .c-box, .c-tax, .c-days { display: flex; flex-direction: column; min-height: 0; padding: 16px 14px 16px; border-radius: 12px; }
  .card-art, .c-days .card-art { width: 46px; height: 46px; margin: 0 0 12px; }
  .c-tax .card-art { width: 58px; }
  .card h3, .c-box h3, .c-tax h3, .c-days h3 { font-size: 16px; line-height: 1.25; margin: auto 0 6px; padding-top: 0; }
  html[dir="rtl"] .card h3, html[dir="rtl"] .c-box h3, html[dir="rtl"] .c-tax h3, html[dir="rtl"] .c-days h3 { font-size: 17px; line-height: 1.45; }
  .card p, .c-days p { font-size: 13px; line-height: 1.45; }
  html[dir="rtl"] .card p { font-size: 14px; line-height: 1.6; }
  .c-map-ctx { padding: 0; aspect-ratio: auto; min-height: 100%; }
  .c-map-ctx .map-oman { position: absolute; inset: 0; }
  .c-map { position: relative; }
}

/* ---------- What you get: dark mode ----------
   The orange card keeps dark text, every card keeps a visible edge, and the
   neighbouring countries on the map drop back so Oman stays the subject. */
.c-box h3 { color: #231f20; }
.c-box .card-art path:nth-child(4) { stroke: #231f20; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card { border-color: var(--hairline); }
  :root:not([data-theme="light"]) .c-box { border-color: var(--primary); }
  :root:not([data-theme="light"]) .c-days, :root:not([data-theme="light"]) .c-map { background: var(--surface-soft); }
  :root:not([data-theme="light"]) .map-oman g[fill="#e2dfdb"] { fill: #4a4445; }
  :root:not([data-theme="light"]) .c-days .card-art rect { fill: #fff; }
  :root:not([data-theme="light"]) .c-days .card-art path[stroke] { stroke: #fff; }
  :root:not([data-theme="light"]) .c-days .card-art text { fill: #231f20; }
}
:root[data-theme="dark"] .c-days .card-art rect { fill: #fff; }
:root[data-theme="dark"] .c-days .card-art path[stroke] { stroke: #fff; }
:root[data-theme="dark"] .c-days .card-art text { fill: #231f20; }
:root[data-theme="dark"] .card { border-color: var(--hairline); }
:root[data-theme="dark"] .c-box { border-color: var(--primary); }
:root[data-theme="dark"] .c-days, :root[data-theme="dark"] .c-map { background: var(--surface-soft); }
:root[data-theme="dark"] .map-oman g[fill="#e2dfdb"] { fill: #4a4445; }

/* short phones (iPhone SE and similar): What you get tightens a little more */
@media (max-width: 600px) and (max-height: 600px) {
  .why-row { padding-top: 14px; }
  .why-row .row-title::before { margin-bottom: 10px; }
  .card, .c-box, .c-tax, .c-days { padding: 12px 12px 12px; }
  .card p, .c-days p { font-size: 12.5px; line-height: 1.4; }
  html[dir="rtl"] .card p { font-size: 13px; line-height: 1.45; }
  .card-art, .c-days .card-art { width: 38px; height: 38px; margin-bottom: 8px; }
  .c-tax .card-art { width: 48px; }
  .card h3, .c-box h3, .c-tax h3, .c-days h3 { font-size: 15px; }
  html[dir="rtl"] .card h3, html[dir="rtl"] .c-box h3, html[dir="rtl"] .c-tax h3, html[dir="rtl"] .c-days h3 { font-size: 15px; line-height: 1.4; }
}

/* ---------- Worth shipping row: swipe, drag, reduced motion ---------- */
.prail { touch-action: pan-y; cursor: grab; }
.prail.is-dragging { cursor: grabbing; }
.prail.is-dragging a { pointer-events: none; }
.prail img { -webkit-user-drag: none; user-select: none; }
.ptrack { user-select: none; -webkit-user-select: none; }
/* reduced motion: one copy, scrolled by hand */
.prail.is-still { overflow-x: auto; touch-action: auto; cursor: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.prail.is-still::-webkit-scrollbar { display: none; }
.prail.is-still .pcard { scroll-snap-align: start; }

/* "x% less than Oman": a deeper flame so the small text reads on white */
.psave { color: #c9431b; }

/* store badge on a product photo: always a white chip, so dark logos show */
.pstore { background: #fff; border-color: rgba(35, 31, 32, .12); }

/* How it works: the steps that are not lit still read clearly */
.flow-steps li:not(.is-on) h3, .flow-steps li:not(.is-on) .fi { color: #5e5e5e; }

/* text links: a thumb-sized tap area without moving the layout */
@media (max-width: 900px) {
  .tlink { display: inline-block; padding-block: 10px; margin-block: -10px; }
}

/* Stores on phones: four across, so the wall is one screen, not two */
@media (max-width: 600px) {
  .logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .logo-wall a { aspect-ratio: 1 / 1; padding: 8px; }
  .logo-wall img { max-width: 86%; max-height: 30px; }
  .logo-name { font-size: 12px; line-height: 1.2; letter-spacing: 0; }
}

/* ---------- Dark mode: logos keep a light ground ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .psave { color: var(--primary-active); }
  :root:not([data-theme="light"]) .flow-steps li:not(.is-on) h3,
  :root:not([data-theme="light"]) .flow-steps li:not(.is-on) .fi { color: var(--mute); }
  :root:not([data-theme="light"]) .logo-wall { gap: 8px; border: 0; }
  :root:not([data-theme="light"]) .logo-wall li { border: 0; }
  :root:not([data-theme="light"]) .logo-wall a { background: #fff; color: #231f20; border-radius: 8px; }
  :root:not([data-theme="light"]) .logo-wall a:hover { background: #f1efec; }
}
:root[data-theme="dark"] .psave { color: var(--primary-active); }
:root[data-theme="dark"] .flow-steps li:not(.is-on) h3,
:root[data-theme="dark"] .flow-steps li:not(.is-on) .fi { color: var(--mute); }
:root[data-theme="dark"] .logo-wall { gap: 8px; border: 0; }
:root[data-theme="dark"] .logo-wall li { border: 0; }
:root[data-theme="dark"] .logo-wall a { background: #fff; color: #231f20; border-radius: 8px; }
:root[data-theme="dark"] .logo-wall a:hover { background: #f1efec; }
@media (max-width: 600px) {
  :root[data-theme="dark"] .logo-wall { gap: 6px; }
}
@media (max-width: 600px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-wall { gap: 6px; }
}

/* ---------- How it works: a full screen that holds still ----------
   While the four steps play, the section is exactly one screen tall and
   sits at the very top, so nothing shows above or below it and it never
   moves. flow.js sets its height to the window height. The steps spread
   out to fill the screen. */
.flow-pin { top: 0; height: 100vh; height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column;
  padding-block: 56px 48px; background: var(--canvas); }
.flow-pin > .wrap { flex: 1; min-height: 0; width: 100%; box-sizing: border-box; grid-template-rows: minmax(0, 1fr); row-gap: 24px; }
.flow-row .row-body.flow { display: flex; flex-direction: column; min-height: 0; }
.flow-row .flow-steps { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; }
.flow-row .flow-steps li { padding-block: 10px; }
.flow-row .flow-cta { margin-top: 20px; }
@media (max-width: 900px) {
  .flow-pin { padding-block: 28px 28px; }
  .flow-pin > .wrap { grid-template-rows: auto minmax(0, 1fr); }
}
@media (max-width: 600px) and (max-height: 600px) {
  .flow-pin { padding-block: 18px 18px; }
  .flow-row .flow-steps li { padding-block: 6px; }
}