/* Sefareshino site: page layout on top of the owner's design system (assets/sf.css, built from ds/).
   Tokens only (--ds-*), logical properties only, hairlines as inset box-shadows — the same rules as the system.
   Spacing scale: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 96. Type: the system's t-* roles. */

body { background: var(--ds-color-canvas); }
main { display: block; }

.skip {
  position: absolute;
  inset-block-start: var(--ds-space-8);
  inset-inline-start: var(--ds-space-8);
  z-index: var(--ds-z-toast);
  padding: var(--ds-space-8) var(--ds-space-16);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-color-inverse);
  color: var(--ds-color-text-inverse);
  font-weight: var(--ds-weight-bold);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ── Header: the system's storefront header, aligned to the page container ── */
.site-header {
  --edge: var(--ds-space-12);
  --ds-layout-topbar: var(--ds-space-64);
}
.site-header .sf-header__strip { padding-inline: var(--edge); }
.site-header .sf-header__rate b { font-weight: var(--ds-weight-extrabold); }
.site-header .sf-header__rate bdi { color: var(--ds-color-stage-ink); }
/* The strip's second group: centred on the text line, and 12 on both sides of each hairline (8 gap + 4 margin). */
.site-header .sf-header__more { align-items: center; gap: var(--ds-space-8); }
/* While the live rate is flowing, the dot sends out a soft halo (compositor-only: scale and opacity). */
.sf-header__live { position: relative; }
.sf-header__live::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ds-color-stage-accent); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .is-rate-live .sf-header__live::after { animation: site-live 2.4s var(--ds-ease-out-expo) infinite; }
}
@keyframes site-live {
  0% { opacity: .6; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(2.75); }
}

/* Phone: menu · logo · actions; the link field lives in the drawer. */
.site-header .sf-header__bar { grid-template-areas: "menu logo actions"; padding: var(--ds-space-8) var(--edge); }
.site-header .sf-header__search,
.site-header .sf-header__nav,
.site-header .site-header__cta { display: none; }
.site-header .sf-header__menu { display: inline-flex; }

.sf-header__search .sf-icon-button { margin-inline-end: calc(var(--ds-space-4) * -1); }

@container sf-header (min-width: 768px) {
  .site-header .sf-header__strip,
  .site-header .sf-header__bar,
  .site-header .sf-mega { --edge: var(--ds-space-24); }
  .site-header.sf-header .sf-header__strip { padding-inline: var(--edge); }
  .site-header.sf-header .sf-header__bar,
  .site-header.sf-header .sf-header__bar:has(> .sf-header__nav) {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "menu logo search actions";
    gap: var(--ds-space-16);
    block-size: var(--ds-space-64);
    padding: 0 var(--edge);
  }
  .site-header.sf-header .sf-header__menu { display: inline-flex; margin-inline-start: calc(var(--ds-space-8) * -1); }
  .site-header.sf-header .sf-header__search { display: flex; max-inline-size: calc(var(--ds-space-128) * 3); }
  .site-header.sf-header .site-header__cta { display: inline-flex; }
}

@container sf-header (min-width: 1024px) {
  .site-header.sf-header .sf-header__bar,
  .site-header.sf-header .sf-header__bar:has(> .sf-header__nav) {
    --sf-hl-drop: calc((var(--ds-space-64) + var(--ds-space-8) - var(--ds-size-touch)) / -2);
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "logo nav . actions";
    gap: var(--ds-space-24);
    block-size: calc(var(--ds-space-64) + var(--ds-space-8));
  }
  .site-header.sf-header .sf-header__menu,
  .site-header.sf-header .sf-header__search { display: none; }
  .site-header.sf-header .sf-header__bar > .sf-header__nav { display: flex; align-self: stretch; margin: 0; padding: 0; overflow: visible; box-shadow: none; -webkit-mask-image: none; mask-image: none; }
  .site-header.sf-header .sf-header__bar > .sf-header__nav .sf-header__link { align-self: center; }
}

@container sf-header (min-width: 1280px) {
  .site-header .sf-header__strip,
  .site-header .sf-header__bar,
  .site-header .sf-mega { --edge: max(var(--ds-layout-gutter-lg), calc((100cqi - var(--ds-layout-container)) / 2 + var(--ds-layout-gutter-lg))); }
  .site-header.sf-header .sf-header__bar,
  .site-header.sf-header .sf-header__bar:has(> .sf-header__nav) { grid-template-areas: "logo nav search actions"; }
  .site-header.sf-header .sf-header__search { display: flex; justify-self: end; inline-size: 100%; max-inline-size: calc(var(--ds-space-128) * 2 + var(--ds-space-32)); }
}

.sf-header__link.is-current { color: var(--ds-color-text-1); font-weight: var(--ds-weight-bold); }

/* The menu under «بیشتر»: the system's popover menu, its start edge on the trigger's start edge, 8 below it.
   Items keep the mouse hit size of 40 (the compact sample's 28 is for buttons, not for a list to read). */
.site-header .sf-pop-wrap { align-self: center; }
.site-more { --sf-hit: var(--ds-space-40); inline-size: calc(var(--ds-space-128) * 2); }
.site-more .sf-menu__label:first-child { padding-block-start: var(--ds-space-4); }
.site-more .sf-menu__item[aria-current="page"] { background: var(--ds-color-sunken); font-weight: var(--ds-weight-bold); }
.site-more .sf-menu__item[aria-current="page"] .icon { color: var(--ds-color-brand-ink); }
@media (pointer: coarse) { .site-more { --sf-hit: var(--ds-size-touch); } }

/* Drawer (phones and tablets): the system's drawer with the system's menu items. */
.site-drawer { --sf-hit: var(--ds-size-touch); }
.site-drawer .sf-drawer__body { display: grid; align-content: start; gap: var(--ds-space-24); padding-block-start: var(--ds-space-16); }
.site-drawer .sf-drawer__group + .sf-drawer__group { margin-block-start: 0; }
.site-drawer .sf-drawer__label { padding-inline: var(--ds-space-12); color: var(--ds-color-text-3); font-size: var(--ds-text-caption-size); line-height: var(--ds-text-caption-leading); font-weight: var(--ds-weight-semibold); }
.site-drawer .sf-drawer__group { gap: var(--ds-space-4); }
.site-drawer .sf-menu { padding: 0; }
.sf-menu__item[aria-current="page"] { background: var(--ds-color-sunken); font-weight: var(--ds-weight-bold); }
.sf-menu__item[aria-current="page"] .icon { color: var(--ds-color-brand-ink); }
.site-drawer .sf-drawer__foot > .sf-button { flex: 1 1 0; }
.site-drawer .sf-drawer__theme { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-12); padding-inline: var(--ds-space-12); color: var(--ds-color-text-2); font-size: var(--ds-text-body-sm-size); line-height: var(--ds-text-body-sm-leading); }

/* Theme switch: shows the sun in dark, the moon in light. */
[data-theme-toggle] .i-sun { display: none; }
[data-theme="dark"] [data-theme-toggle] .i-sun { display: block; }
[data-theme="dark"] [data-theme-toggle] .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) [data-theme-toggle] .i-sun { display: block; }
  :root:not([data-theme]) [data-theme-toggle] .i-moon { display: none; }
}

/* ── Sections ── */
.section { padding-block: var(--ds-space-64); }
.section--first { padding-block-start: var(--ds-space-24); }
.section--surface { background: var(--ds-color-surface); box-shadow: inset 0 var(--ds-border-hairline) 0 0 var(--ds-color-border-subtle), inset 0 calc(var(--ds-border-hairline) * -1) 0 0 var(--ds-color-border-subtle); }
/* Two canvas sections in a row share one gap; after a surface band the next section keeps its full top padding. */
.section:not(.section--surface) + .section:not(.section--surface) { padding-block-start: 0; }
@media (min-width: 1024px) {
  .section { padding-block: var(--ds-space-96); }
  .section--first { padding-block-start: var(--ds-space-32); }
}

.s-head { display: grid; justify-items: start; gap: var(--ds-space-12); max-inline-size: var(--ds-layout-measure); margin-block-end: var(--ds-space-32); }
.s-head--row { max-inline-size: none; grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 768px) {
  .s-head { margin-block-end: var(--ds-space-40); }
  .s-head--row { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--ds-space-32); }
  .s-head--row > .s-head__side { grid-row: 1 / span 3; grid-column: 2; align-self: end; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-8);
  color: var(--ds-color-brand-ink);
  font-size: var(--ds-text-label-size);
  line-height: var(--ds-text-label-leading);
  font-weight: var(--ds-text-label-weight);
}
.eyebrow::before { content: ""; flex: none; inline-size: var(--ds-space-16); block-size: var(--ds-space-2); border-radius: var(--ds-radius-full); background: var(--ds-color-brand-edge); }
.sf-stage .eyebrow { color: var(--ds-color-stage-accent); }
.sf-stage .eyebrow::before { background: var(--ds-color-stage-accent); }

.lead { color: var(--ds-color-text-2); font-size: var(--ds-text-body-lg-size); line-height: var(--ds-text-body-lg-leading); }
.muted { color: var(--ds-color-text-3); }
.text-2 { color: var(--ds-color-text-2); }

/* Grids */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-16); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) { .grid { gap: var(--ds-space-24); } }
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Four across only where a card's name and its mark still fit on one line. */
@media (min-width: 1200px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.grid > li { display: flex; min-inline-size: 0; }
.grid > li > * { flex: 1; min-inline-size: 0; }

.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-32); align-items: start; }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ds-space-64); }
  .split--wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .split--side { grid-template-columns: minmax(0, 1fr) calc(var(--ds-space-128) * 3 + var(--ds-space-32)); gap: var(--ds-space-40); }
  .split--center { align-items: center; }
  .sticky { position: sticky; inset-block-start: calc(var(--ds-space-128) + var(--ds-space-8)); }
}

/* Panel: a raised block with a hairline (the system's card frame without the media well). */
.panel {
  position: relative;
  min-inline-size: 0;
  padding: var(--ds-space-20);
  border-radius: var(--ds-radius-card);
  background: var(--ds-color-raised);
  box-shadow: inset 0 0 0 var(--ds-border-hairline) var(--ds-color-border-subtle);
}
@media (min-width: 768px) { .panel { padding: var(--ds-space-32); } }
.panel--sunken { background: var(--ds-color-sunken); }
.panel__title { margin-block-end: var(--ds-space-8); font-size: var(--ds-text-h4-size); line-height: var(--ds-text-h4-leading); font-weight: var(--ds-weight-extrabold); }
.panel__text { color: var(--ds-color-text-2); font-size: var(--ds-text-body-sm-size); line-height: var(--ds-text-body-sm-leading); }

/* Feature: an icon tile, a title and a short text. */
.feature { display: grid; align-content: start; gap: var(--ds-space-16); }
.feature__title { font-size: var(--ds-text-body-size); line-height: var(--ds-text-body-leading); font-weight: var(--ds-weight-bold); }
.feature__text { margin-block-start: calc(var(--ds-space-12) * -1); color: var(--ds-color-text-2); font-size: var(--ds-text-body-sm-size); line-height: var(--ds-text-body-sm-leading); }
.feature--num .sf-icon-tile { font-size: var(--ds-text-body-size); font-weight: var(--ds-weight-extrabold); font-variant-numeric: tabular-nums; }

/* Lists with a mark */
.ticks { display: grid; gap: var(--ds-space-12); margin: 0; padding: 0; list-style: none; }
.ticks li { display: flex; align-items: flex-start; gap: var(--ds-space-12); color: var(--ds-color-text-2); font-size: var(--ds-text-body-sm-size); line-height: var(--ds-text-body-sm-leading); }
.ticks li > .icon { flex: none; color: var(--ds-color-brand-ink); }
.ticks--no li > .icon { color: var(--ds-color-danger-fg); }
.ticks b { color: var(--ds-color-text-1); font-weight: var(--ds-weight-bold); }

.prose { display: grid; gap: var(--ds-space-16); max-inline-size: var(--ds-layout-measure); color: var(--ds-color-text-2); }
.prose h2 { margin-block-start: var(--ds-space-16); color: var(--ds-color-text-1); font-size: var(--ds-text-h3-size); line-height: var(--ds-text-h3-leading); font-weight: var(--ds-weight-extrabold); }
.prose h3 { color: var(--ds-color-text-1); font-size: var(--ds-text-h4-size); line-height: var(--ds-text-h4-leading); font-weight: var(--ds-weight-bold); }
.prose b { color: var(--ds-color-text-1); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-12); }
.actions--block > .sf-button { flex: 1 1 auto; }

/* ── Page head: breadcrumb on the canvas, then the stage ── */
.page-head { padding-block-start: var(--ds-space-16); }
.page-head .sf-breadcrumb { margin-block-end: var(--ds-space-12); margin-inline-start: calc(var(--ds-space-8) * -1); }
.page-head__stage { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--ds-space-24); padding: var(--ds-space-40) var(--ds-space-24); border-radius: var(--ds-radius-stage); }
.page-head__text { display: grid; justify-items: start; gap: var(--ds-space-12); max-inline-size: calc(var(--ds-space-128) * 5); }
.page-head__text h1 { font-size: var(--ds-text-h1-size); line-height: var(--ds-text-h1-leading); font-weight: var(--ds-weight-extrabold); text-wrap: balance; }
.page-head__text p { color: var(--ds-color-stage-ink-2); font-size: var(--ds-text-body-lg-size); line-height: var(--ds-text-body-lg-leading); }
.page-head__art { display: none; }
@media (min-width: 768px) {
  .page-head__stage { grid-template-columns: minmax(0, 1fr) auto; padding: var(--ds-space-64); }
  .page-head__art {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: calc(var(--ds-space-128) + var(--ds-space-48));
    aspect-ratio: 1;
    border-radius: var(--ds-radius-full);
    background: var(--ds-color-stage-raised);
    box-shadow: inset 0 0 0 var(--ds-border-hairline) var(--ds-color-stage-line), 0 0 0 var(--ds-space-16) var(--ds-color-stage), 0 0 0 calc(var(--ds-space-16) + var(--ds-border-hairline)) var(--ds-color-stage-line);
    color: var(--ds-color-stage-ink);
    --sf-art-hole: var(--ds-color-stage-raised);
  }
  .page-head__art .icon { inline-size: 40%; block-size: 40%; stroke-width: 1.2px; color: var(--ds-color-stage-accent); }
  /* A gold satellite on the outer ring (it orbits; see Ambient motion). */
  .page-head__art::after {
    content: "";
    position: absolute;
    inset: calc((var(--ds-space-16) + var(--ds-border-hairline) / 2 + var(--ds-space-4)) * -1);
    border-radius: var(--ds-radius-full);
    background: radial-gradient(circle at 50% var(--ds-space-4), var(--ds-color-stage-accent) 0 var(--ds-space-4), transparent calc(var(--ds-space-4) + 1px));
    pointer-events: none;
  }
}
@media (min-width: 1024px) {
  .page-head__art { inline-size: calc(var(--ds-space-128) * 2); }
}

/* ── Home hero: the link request ── */
.hero { padding-block: var(--ds-space-16) var(--ds-space-64); }
@media (min-width: 1024px) { .hero { padding-block: var(--ds-space-32) var(--ds-space-96); } }
.hero .sf-linkreq__stage { border-radius: var(--ds-radius-stage); }
.sf-linkreq__error { margin-block-start: var(--ds-space-12); color: var(--ds-color-stage-accent); font-size: var(--ds-text-caption-size); line-height: var(--ds-text-caption-leading); font-weight: var(--ds-weight-semibold); }
.sf-linkreq__error[hidden] { display: none; }

/* Trust row under the hero */
.facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-16); margin: 0; padding: 0; list-style: none; }
.facts li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--ds-space-16); row-gap: var(--ds-space-4); }
.facts li > .sf-icon-tile { grid-row: 1; }
.facts b { grid-column: 2; color: var(--ds-color-text-1); font-size: var(--ds-text-body-size); line-height: var(--ds-text-body-leading); font-weight: var(--ds-weight-bold); }
.facts li > span:last-child { grid-column: 1 / -1; color: var(--ds-color-text-2); font-size: var(--ds-text-body-sm-size); line-height: var(--ds-text-body-sm-leading); }
@media (min-width: 640px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-24); } }
@media (min-width: 1024px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* The price build (hero, how it works): the receipt grammar with formulas in place of a product. */
/* The lock note's centre sits on the page's top edge: the page starts below the stack's 12 peek (no system.js here to measure it). */
.price-build { --sf-note-edge: var(--ds-space-12); }
.price-build .sf-stack-sheet__page { display: grid; gap: var(--ds-space-16); }
.price-build .sf-leader__total, .price-build .sf-lock { margin: 0; }
.price-build .sf-lock > .sf-digits { margin-inline-start: auto; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-12); }
.sheet-head p { font-weight: var(--ds-weight-bold); }
.sheet-head .sf-badge { flex: none; }

/* ── Home promos: the air route (stage) and the live rate (brand gold) ── */
.promos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-16); }
@media (min-width: 1024px) { .promos { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--ds-space-24); } }
.promo { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--ds-radius-stage); }
.promo__title { font-size: var(--ds-text-h2-size); line-height: var(--ds-text-h2-leading); font-weight: var(--ds-weight-extrabold); text-wrap: balance; }

.promo--route { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--ds-space-8); padding: var(--ds-space-32) var(--ds-space-24) 0; }
.promo__text { display: grid; justify-items: start; gap: var(--ds-space-12); }
.promo__lead { max-inline-size: 34ch; color: var(--ds-color-stage-ink-2); }
.promo__facts { display: flex; flex-wrap: wrap; gap: var(--ds-space-24); margin: var(--ds-space-4) 0 var(--ds-space-8); padding: 0; list-style: none; }
.promo__facts li { display: grid; gap: var(--ds-space-2); }
.promo__facts b { color: var(--ds-color-stage-accent); font-size: var(--ds-text-h3-size); line-height: var(--ds-text-h3-leading); font-weight: var(--ds-weight-extrabold); }
.promo__facts span { color: var(--ds-color-stage-ink-2); font-size: var(--ds-text-caption-size); line-height: var(--ds-text-caption-leading); }
.promo__map { display: block; inline-size: 100%; block-size: auto; margin-inline: auto; }
#dots circle { fill: var(--ds-color-stage-line); }
.promo__track { fill: none; stroke: var(--ds-color-stage-line); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.promo__trail { fill: none; stroke: var(--ds-color-stage-accent); stroke-width: 2.5; stroke-linecap: round; }
#trail stop { stop-color: var(--ds-color-stage-accent); }
.promo__pin circle { fill: var(--ds-color-stage-raised); stroke: var(--ds-color-stage-accent); stroke-width: 1.5; }
.promo__pin .promo__core { fill: var(--ds-color-stage-accent); stroke: none; }
.promo__pin--from circle { stroke: var(--ds-color-stage-ink-2); }
.promo__pin--from .promo__core { fill: var(--ds-color-stage-ink-2); }
.promo__ring { fill: none !important; }
.promo__city { fill: var(--ds-color-stage-ink); font-size: 18px; font-weight: 700; text-anchor: middle; }
.promo__city--from { fill: var(--ds-color-stage-ink-2); }
.promo__plane { fill: var(--ds-color-stage-accent); }
@media (min-width: 768px) {
  .promo--route { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ds-space-16); padding: var(--ds-space-48) var(--ds-space-40); }
}

.promo--rate { display: grid; align-content: start; justify-items: start; gap: var(--ds-space-8); padding: var(--ds-space-32) var(--ds-space-24); background: var(--ds-color-brand); color: var(--ds-color-text-on-brand); }
@media (min-width: 768px) { .promo--rate { padding: var(--ds-space-48); } }
.promo__live { display: inline-flex; align-items: center; gap: var(--ds-space-8); font-size: var(--ds-text-label-size); line-height: var(--ds-text-label-leading); font-weight: var(--ds-weight-bold); }
.promo__dot { position: relative; inline-size: var(--ds-space-8); block-size: var(--ds-space-8); border-radius: var(--ds-radius-full); background: currentColor; }
.promo__dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; }
.promo__rate { display: flex; align-items: baseline; gap: var(--ds-space-8); margin-block-start: var(--ds-space-8); }
.promo__rate b { font-size: clamp(2.75rem, 2rem + 3vw, 4rem); line-height: 1.1; font-weight: var(--ds-weight-black, 900); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.promo__rate span { font-size: var(--ds-text-body-lg-size); font-weight: var(--ds-weight-bold); }
.promo__sub { font-size: var(--ds-text-body-sm-size); line-height: var(--ds-text-body-sm-leading); font-weight: var(--ds-weight-semibold); }
.promo__note { max-inline-size: 32ch; margin-block: var(--ds-space-4) var(--ds-space-16); opacity: .78; font-size: var(--ds-text-caption-size); line-height: var(--ds-text-caption-leading); }
.promo__waves { position: absolute; z-index: -1; bottom: 0; left: 0; inline-size: 200%; max-inline-size: none; /* twice the card, so the half-width drift loops seamlessly */ block-size: 46%; fill: currentColor; }
.promo__waves path { opacity: .07; }
.promo__waves path + path { opacity: .06; }

/* Ambient motion: slow, compositor-only (transform, opacity) and off for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .promo__waves { animation: site-drift 14s linear infinite; }
  .promo__dot::after { animation: site-live 2.4s var(--ds-ease-out-expo) infinite; }
  .page-head__art .icon { animation: site-float 6s ease-in-out infinite; }
  .page-head__art::after { animation: site-orbit 18s linear infinite; }
}
@keyframes site-drift { to { transform: translateX(-50%); } }
@keyframes site-float { 50% { transform: translateY(calc(var(--ds-space-8) * -1)); } }
@keyframes site-orbit { to { transform: rotate(1turn); } }

/* Home: quick estimate */
.quick { display: grid; gap: var(--ds-space-20); }
.quick .sf-leader__total { margin: 0; }

/* Real products: the system's product card with the store's own photo on white (in both themes) */
.products { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 480px) { .products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.product { block-size: 100%; }
/* Square white well; the photo (portrait, landscape or square) is contained inside a 10% margin, never cropped. */
.product__media { position: relative; display: block; aspect-ratio: 1; block-size: auto; overflow: hidden; background: var(--ref-color-white); box-shadow: inset 0 0 0 var(--ds-border-hairline) var(--ds-color-border-subtle); }
.product__media img { position: absolute; inset: 10%; inline-size: 80%; block-size: 80%; padding: 0; object-fit: contain; transition: scale var(--ds-duration-long, .5s) var(--ds-ease-out-expo); }
/* Hover: the photo leans in a little (the `scale` property, so it never fights motion.js's transform on entry). */
@media (hover: hover) { .product:hover .product__media img { scale: 1.05; } }
.product__body { display: flex; flex: 1; flex-direction: column; gap: var(--ds-space-8); padding: var(--ds-space-16) var(--ds-space-8) var(--ds-space-8); }
.product__title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-block-size: calc(var(--ds-text-body-sm-leading) * 2); font-size: var(--ds-text-body-sm-size); line-height: var(--ds-text-body-sm-leading); font-weight: var(--ds-weight-bold); text-align: start; }
.product__title bdi { line-height: inherit; }
.product__fa { color: var(--ds-color-text-3); font-size: var(--ds-text-caption-size); line-height: var(--ds-text-caption-leading); }
.product__est { color: var(--ds-color-text-3); font-size: var(--ds-text-caption-size); line-height: var(--ds-text-caption-leading); }
.product .sf-price { margin-block-start: auto; padding-block-start: var(--ds-space-8); }
.product__actions { display: grid; gap: var(--ds-space-8); margin-block-start: var(--ds-space-8); }
.product__store { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-4); min-block-size: var(--ds-size-touch); color: var(--ds-color-text-2); font-size: var(--ds-text-caption-size); line-height: var(--ds-text-caption-leading); font-weight: var(--ds-weight-semibold); text-decoration: none; }
.product__store:hover { color: var(--ds-color-link); }
.product-note { display: flex; align-items: flex-start; gap: var(--ds-space-8); margin-block-start: var(--ds-space-24); color: var(--ds-color-text-3); font-size: var(--ds-text-caption-size); line-height: var(--ds-text-caption-leading); }
.product-note .icon { margin-block-start: var(--ds-space-2); }

/* Store marks: the store's own logo on its own colour (BRANDS in build.py), in the tile that held the letter. */
.brand-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.brand--amazon { --brand-tile: #232F3E; --brand-ink: #FF9900; }
.brand--noon { --brand-tile: #FEEE00; --brand-ink: #101628; }
.brand--aliexpress { --brand-tile: #E43225; --brand-ink: #FFFFFF; }
.sf-store-badge__mark.brand, .sf-linkreq__chip i.brand, .store__mark.brand {
  overflow: hidden;
  background: var(--brand-tile);
  box-shadow: inset 0 0 0 var(--ds-border-hairline) rgb(0 0 0 / .08);
  color: var(--brand-ink);
}
.sf-store-badge--source.sf-store-badge--sm .sf-store-badge__mark.brand { inline-size: var(--ds-space-20); block-size: var(--ds-space-20); border-radius: var(--ds-space-4); }
.brand__mark { display: block; inline-size: 100%; block-size: 100%; }

/* Stores */
.store { display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: var(--ds-space-12); height: 100%; }
.store__head { display: contents; }
.store__head .sf-badge { justify-self: start; }
.store__name { white-space: nowrap; display: flex; align-items: center; gap: var(--ds-space-12); font-size: var(--ds-text-body-size); line-height: var(--ds-text-body-leading); font-weight: var(--ds-weight-bold); }
.store__mark {
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: var(--ds-space-48);
  block-size: var(--ds-space-48);
  border-radius: var(--ds-radius-control);
  background: var(--ds-color-inverse);
  color: var(--ds-color-text-inverse);
  font-size: var(--ds-text-body-size);
  line-height: 1;
  font-weight: var(--ds-weight-extrabold);
}
.store__text { margin: 0; color: var(--ds-color-text-2); font-size: var(--ds-text-body-sm-size); line-height: var(--ds-text-body-sm-leading); }

.chips { display: flex; flex-wrap: wrap; gap: var(--ds-space-8); margin: 0; padding: 0; list-style: none; }

/* Category tiles with product art */
.cat { display: grid; grid-template-columns: var(--ds-space-64) minmax(0, 1fr); align-items: center; gap: var(--ds-space-16); }
.cat__art { display: grid; place-items: center; inline-size: var(--ds-space-64); aspect-ratio: 1; border-radius: var(--ds-radius-media); background: var(--ds-color-sunken); color: var(--ds-color-text-1); }
.cat__art .sf-art { inline-size: 72%; block-size: 72%; }
.cat b { display: block; font-size: var(--ds-text-body-sm-size); line-height: var(--ds-text-body-sm-leading); font-weight: var(--ds-weight-bold); }
.cat span { display: block; color: var(--ds-color-text-3); font-size: var(--ds-text-caption-size); line-height: var(--ds-text-caption-leading); }

/* CTA stage */
.cta { display: grid; gap: var(--ds-space-24); padding: var(--ds-space-40) var(--ds-space-24); border-radius: var(--ds-radius-stage); }
.cta h2 { font-size: var(--ds-text-h2-size); line-height: var(--ds-text-h2-leading); font-weight: var(--ds-weight-extrabold); }
.cta p { margin-block-start: var(--ds-space-8); color: var(--ds-color-stage-ink-2); }
@media (min-width: 768px) { .cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--ds-space-64); } }

/* Calculator */
.calc-form { display: grid; gap: var(--ds-space-24); }
.calc-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-24); }
@media (min-width: 640px) { .calc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.calc-form .sf-segmented { inline-size: 100%; }
.field-inline { display: flex; align-items: center; gap: var(--ds-space-12); }
.field-inline .sf-input { flex: 1; }
.calc-out .sf-stack-sheet__page { display: grid; gap: var(--ds-space-16); }
.calc-out .sf-leader__total { margin: 0; }
.calc-out .actions { margin-block-start: var(--ds-space-4); }
.calc-out .sf-lock { margin: 0; }
.calc-error { display: flex; align-items: flex-start; gap: var(--ds-space-8); color: var(--ds-color-danger-fg); font-size: var(--ds-text-caption-size); line-height: var(--ds-text-caption-leading); font-weight: var(--ds-weight-semibold); }
.calc-error[hidden] { display: none; }
.calc-error .icon { margin-block-start: var(--ds-space-2); }

/* Forms */
.form { display: grid; gap: var(--ds-space-20); }
.form__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-20); }
@media (min-width: 640px) { .form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.form .sf-callout[hidden] { display: none; }
.form__fine { color: var(--ds-color-text-3); font-size: var(--ds-text-caption-size); line-height: var(--ds-text-caption-leading); }

/* Contact list */
.contact-list { display: grid; gap: var(--ds-space-4); margin: 0; padding: 0; list-style: none; }
.contact-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--ds-space-16); padding-block: var(--ds-space-12); }
.contact-list li + li { box-shadow: inset 0 var(--ds-border-hairline) 0 0 var(--ds-color-border-subtle); }
.contact-list small { display: block; color: var(--ds-color-text-3); font-size: var(--ds-text-caption-size); line-height: var(--ds-text-caption-leading); }
.contact-list a, .contact-list span { color: var(--ds-color-text-1); font-weight: var(--ds-weight-semibold); text-decoration: none; }
.contact-list a:hover { color: var(--ds-color-link); }

.hours { display: grid; gap: var(--ds-space-8); margin: 0; }
.hours div { display: flex; justify-content: space-between; gap: var(--ds-space-16); font-size: var(--ds-text-body-sm-size); line-height: var(--ds-text-body-sm-leading); }
.hours dt { color: var(--ds-color-text-2); }
.hours dd { margin: 0; font-weight: var(--ds-weight-semibold); font-variant-numeric: tabular-nums; }

/* FAQ */
.faq-tools { display: grid; gap: var(--ds-space-16); margin-block-end: var(--ds-space-32); }
.faq-group + .faq-group { margin-block-start: var(--ds-space-40); }
.faq-group__title { display: flex; align-items: center; gap: var(--ds-space-12); margin-block-end: var(--ds-space-16); font-size: var(--ds-text-h4-size); line-height: var(--ds-text-h4-leading); font-weight: var(--ds-weight-extrabold); }
.faq-group[hidden], .sf-accordion__item[hidden] { display: none; }
/* The answer starts a clear step below the question's hover/focus box, never on its edge. */
.sf-accordion__panel { padding-block-start: var(--ds-space-12); }
.faq-none[hidden] { display: none; }

/* Delivery table */
.table { inline-size: 100%; border-collapse: collapse; font-size: var(--ds-text-body-sm-size); line-height: var(--ds-text-body-sm-leading); }
.table th { padding: var(--ds-space-12) var(--ds-space-16); color: var(--ds-color-text-3); font-size: var(--ds-text-caption-size); line-height: var(--ds-text-caption-leading); font-weight: var(--ds-weight-semibold); text-align: start; }
.table td { padding: var(--ds-space-16); box-shadow: inset 0 var(--ds-border-hairline) 0 0 var(--ds-color-border-subtle); vertical-align: top; }
.table td:first-child { color: var(--ds-color-text-1); font-weight: var(--ds-weight-bold); }
.table td { color: var(--ds-color-text-2); }
.table-wrap { overflow-x: auto; margin-inline: calc(var(--ds-space-16) * -1); }
@media (max-width: 639px) {
  .table thead { display: none; }
  .table tr { display: grid; padding: var(--ds-space-12) var(--ds-space-16); box-shadow: inset 0 var(--ds-border-hairline) 0 0 var(--ds-color-border-subtle); }
  .table td { padding: 0; box-shadow: none; }
  .table td[data-label]::before { content: attr(data-label) ": "; color: var(--ds-color-text-3); }
}

/* Tracking */
.track-result[hidden] { display: none; }
.track-result { display: grid; gap: var(--ds-space-16); margin-block-start: var(--ds-space-24); }

/* Legal pages: the system's long-form layout */
.legal-wrap { padding-block: var(--ds-space-24) var(--ds-space-64); }
@media (min-width: 1024px) { .legal-wrap { padding-block: var(--ds-space-32) var(--ds-space-96); } }
.sf-legal__content a { color: var(--ds-color-link); }

/* 404 */
.lost { display: grid; justify-items: center; gap: var(--ds-space-16); padding: var(--ds-space-64) var(--ds-space-24); text-align: center; border-radius: var(--ds-radius-stage); }
.lost .page-head__art { display: grid; place-items: center; inline-size: var(--ds-space-128); aspect-ratio: 1; margin-block-end: var(--ds-space-16); border-radius: var(--ds-radius-full); background: var(--ds-color-stage-raised); box-shadow: inset 0 0 0 var(--ds-border-hairline) var(--ds-color-stage-line), 0 0 0 var(--ds-space-16) var(--ds-color-stage), 0 0 0 calc(var(--ds-space-16) + var(--ds-border-hairline)) var(--ds-color-stage-line); }
.lost .page-head__art .icon { inline-size: 40%; block-size: 40%; stroke-width: 1.2px; color: var(--ds-color-stage-accent); }
.lost h1 { font-size: var(--ds-text-h1-size); line-height: var(--ds-text-h1-leading); font-weight: var(--ds-weight-extrabold); }
.lost p { max-inline-size: calc(var(--ds-space-128) * 4); color: var(--ds-color-stage-ink-2); }
.lost .actions { justify-content: center; }

/* ── Footer: on the stage ── */
.site-footer { padding-block: var(--ds-space-64) var(--ds-space-32); background: var(--ds-color-stage); color: var(--ds-color-stage-ink-2); --ds-color-focus: var(--ds-color-stage-accent); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-40); }
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--ds-space-48); } }
.site-footer__brand { display: grid; align-content: start; gap: var(--ds-space-16); }
.site-footer__logo { --ds-color-logo-ink: var(--ds-color-stage-ink); display: inline-flex; align-items: center; gap: var(--ds-space-8); justify-self: start; color: var(--ds-color-stage-ink); text-decoration: none; }
.site-footer__logo .mark { block-size: var(--ds-space-32); inline-size: auto; aspect-ratio: 270.7 / 173.6; }
.site-footer__logo .word { block-size: var(--ds-space-24); inline-size: auto; aspect-ratio: 358 / 92.14; color: var(--ds-color-stage-ink); }
.site-footer p { font-size: var(--ds-text-body-sm-size); line-height: var(--ds-text-body-sm-leading); }
.site-footer h2 { margin-block-end: var(--ds-space-16); color: var(--ds-color-stage-ink); font-size: var(--ds-text-label-size); line-height: var(--ds-text-label-leading); font-weight: var(--ds-weight-bold); }
.site-footer ul { display: grid; gap: var(--ds-space-8); margin: 0; padding: 0; list-style: none; }
.site-footer a { color: var(--ds-color-stage-ink-2); font-size: var(--ds-text-body-sm-size); line-height: var(--ds-text-body-sm-leading); text-decoration: none; }
.site-footer a:hover { color: var(--ds-color-stage-ink); }
.site-footer__contact li { display: flex; align-items: flex-start; gap: var(--ds-space-8); font-size: var(--ds-text-body-sm-size); line-height: var(--ds-text-body-sm-leading); }
.site-footer__contact .icon { margin-block-start: var(--ds-space-4); color: var(--ds-color-stage-accent); }
.site-footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-12); margin-block-start: var(--ds-space-48); padding-block-start: var(--ds-space-24); box-shadow: inset 0 var(--ds-border-hairline) 0 0 var(--ds-color-stage-line); font-size: var(--ds-text-caption-size); line-height: var(--ds-text-caption-leading); }
.site-footer__base a { font-size: inherit; line-height: inherit; }