/* ==========================================================================
   Aroma IPTV — aromatv.shop
   "Ember on Paper / جمر على ورق" — the site's only stylesheet.
   Hand-written CSS. No build step, no preprocessor, no framework.

   Reading order
     00  Design tokens (light) + dark token swap
     01  Reset & the Arabic typography contract
     02  Layout primitives: container, sections, bands, rules
     03  Buttons, pills, tags, links, focus
     04  Header + mobile nav
     05  Hero + the CSS status panel
     06  Stats strip
     07  Why-us cards
     08  Pricing: the includes band, the grid, the cards
     09  Devices
     10  Steps
     11  Reviews
     12  Reseller band
     13  FAQ
     14  SEO article
     15  Final CTA band
     16  Footer
     17  Utilities, motion, print

   RTL: everything is written with logical properties (inline-start/end,
   block-start/end, margin-inline, padding-inline). The only physical
   properties left are on shapes that must NOT mirror — the rotated check
   glyph and the centred +/- of the FAQ — which are marked where they occur.
   ========================================================================== */

/* ==========================================================================
   00  TOKENS
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- Brand: one ember, and only one. -----------------------------------
     Non-text uses keep the specified ramp exactly. Text uses (links, pills,
     numerals on tint) and text-on-fill use --brand-700 / --btn-* because
     #D9451D with white text is 4.36:1 and misses WCAG AA. */
  --brand-800: #8E2B10;   /* pressed */
  --brand-700: #B23716;   /* brand-coloured TEXT on light surfaces (5.8:1 on paper) */
  --brand-600: #D9451D;   /* identity: hairlines, focus outline, marks — never text */
  --brand-500: #F05A28;   /* decorative accent */
  --brand-200: #FFD3C2;   /* focus halo, popular card border */
  --brand-050: #FFF1EB;   /* badge fill, final-CTA band, step numerals */

  --btn-bg: #B23716;      /* solid primary  (white on it = 6.1:1) */
  --btn-bg-hover: #C63D19;/* hover          (white on it = 5.1:1) */
  --btn-bg-active: #8E2B10;
  --btn-fg: #FFFFFF;

  /* --- Warm neutrals ---------------------------------------------------- */
  --ink-900: #14110F;     /* headings */
  --ink-700: #2B2724;     /* body */
  --ink-500: #6E6660;     /* secondary text, eyebrows, captions, fine print (5.0:1+) */
  --ink-400: #8B837C;     /* NON-TEXT ONLY: dashed connectors, decorative marks */
  --line: #E9E5E1;
  --line-soft: rgba(28, 26, 24, .07);
  --surface: #FFFFFF;
  --surface-blur: rgba(255, 255, 255, .82);
  --paper: #FAF8F6;
  --paper-2: #F3F0EC;

  /* --- One semantic colour, used at 8–16px only ------------------------- */
  --ok: #157F52;

  /* --- Depth is shadows + hairlines. No glow, no gradient, no glass. ---- */
  --sh-1: 0 1px 2px rgba(28, 26, 24, .05);
  --sh-2: 0 1px 2px rgba(28, 26, 24, .04), 0 10px 28px -14px rgba(28, 26, 24, .18);
  --sh-pop: 0 1px 2px rgba(28, 26, 24, .04), 0 18px 40px -18px rgba(178, 55, 22, .30);
  --sh-btn: 0 1px 2px rgba(20, 17, 15, .10), 0 8px 18px -8px rgba(217, 69, 29, .45);
  --card-inset: 0 0 transparent;

  /* --- Radii ------------------------------------------------------------ */
  --r-8: 8px;
  --r-12: 12px;
  --r-16: 16px;
  --r-24: 24px;
  --r-pill: 999px;

  /* --- Spacing: 8px base, 4px half-step. Legal values only. ------------- */
  --s-4: 4px;   --s-8: 8px;   --s-12: 12px; --s-16: 16px; --s-20: 20px;
  --s-24: 24px; --s-32: 32px; --s-48: 48px; --s-64: 64px; --s-80: 80px;
  --s-120: 120px;

  --section-pad: clamp(4rem, 8vw, 7.5rem);
  --font: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, "Segoe UI", Tahoma, Arial, sans-serif;
}

/* --- Dark mode: a token swap. Same layout, same everything else. -------- */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0E0D0C;
    --paper-2: #141211;
    --surface: #1A1715;
    --surface-blur: rgba(26, 23, 21, .82);
    --line: #2A2521;
    --line-soft: rgba(255, 255, 255, .08);

    --ink-900: #F7F4F1;
    --ink-700: #D8D2CC;
    --ink-500: #A29A93;
    --ink-400: #7C736C;

    --brand-700: #FF8A63;          /* brand text, lifted for AA on dark */
    --brand-600: #FF6B3D;
    --brand-500: #FF6B3D;
    --brand-200: rgba(255, 107, 61, .35);
    --brand-050: rgba(255, 107, 61, .10);

    /* Accent as a FILL with near-black text — never glowing light text. */
    --btn-bg: #FF6B3D;
    --btn-bg-hover: #FF8355;
    --btn-bg-active: #E2551F;
    --btn-fg: #14110F;

    --ok: #3FBF84;

    --sh-1: 0 1px 2px rgba(0, 0, 0, .50);
    --sh-2: 0 1px 2px rgba(0, 0, 0, .50), 0 10px 28px -14px rgba(0, 0, 0, .70);
    --sh-pop: 0 1px 2px rgba(0, 0, 0, .50), 0 18px 40px -18px rgba(0, 0, 0, .80);
    --sh-btn: 0 1px 2px rgba(0, 0, 0, .50), 0 8px 18px -8px rgba(0, 0, 0, .60);
    --card-inset: inset 0 1px 0 rgba(255, 255, 255, .04);
  }
}

/* ==========================================================================
   01  RESET + THE ARABIC TYPOGRAPHY CONTRACT
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  /* Arabic is a joined script: positive tracking breaks the joins.
     This is a hard global guard — only .latin may override it. */
  letter-spacing: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 88px;   /* sticky header + breathing room */
  /* A fallback face must never fake a bold or an italic Arabic. */
  font-synthesis: none;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-700);
  font-family: var(--font);
  font-size: 1.0625rem;   /* 17px — Arabic reads optically smaller than Latin */
  line-height: 1.85;
  font-weight: 400;
  word-spacing: .02em;    /* airiness lives here, never in letter-spacing */
  text-align: start;      /* justify is banned: no kashida => rivers */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink-900);
  font-weight: 700;
  text-wrap: balance;
  word-spacing: 0;
}

h1 {
  font-size: clamp(2rem, 1.35rem + 3vw, 3.25rem);
  line-height: 1.32;      /* raised from 1.22: Arabic ascenders/descenders need it */
}

h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
  line-height: 1.38;
}

h3 {
  font-size: 1.3125rem;
  line-height: 1.45;
  font-weight: 600;
}

p {
  margin: 0;
  max-width: 38em;        /* ~68ch of Arabic */
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--brand-700);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

a:hover { color: var(--brand-800); }

img, svg { max-width: 100%; height: auto; display: block; }

button { font: inherit; color: inherit; }

hr { border: 0; margin: 0; }

/* --- The isolation rules. This is the whole trick. ---------------------
   Every numeric run and every Latin token in Arabic text is wrapped and
   isolated, so "$10" can never render as "10$" and the price column stays
   optically aligned down the plan grid. */
.num,
bdi.num {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

.latin {
  direction: ltr;
  unicode-bidi: isolate;
  letter-spacing: -.015em;   /* the ONLY negative tracking on the page */
  font-weight: 600;
}

.latin-label {                /* 13px Latin device names */
  direction: ltr;
  unicode-bidi: isolate;
  letter-spacing: .02em;      /* legal: Latin only, never Arabic */
  font-weight: 600;
}

/* Western/ASCII digits site-wide — never Eastern Arabic digits. */

/* ==========================================================================
   02  LAYOUT PRIMITIVES
   ========================================================================== */

.wrap {
  width: min(71.25rem, 100% - 2.5rem);
  margin-inline: auto;
}

@media (max-width: 25rem) {
  .wrap { width: min(71.25rem, 100% - 2rem); }
}

.section {
  padding-block: var(--section-pad);
}

.band-paper   { background: var(--paper); }
.band-paper-2 { background: var(--paper-2); }
.band-surface { background: var(--surface); }

/* Where two same-colour bands meet, a fading hairline instead of a border. */
.rule {
  block-size: 1px;
  background: linear-gradient(to left, transparent, var(--line), transparent);
}

.section-head {
  margin-block-end: var(--s-48);
  max-width: 44rem;
}

.eyebrow {
  margin-block-end: var(--s-12);
  color: var(--ink-500);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.35;
}

.section-head h2 + .lead,
.section-head h2 + p {
  margin-block-start: var(--s-16);
}

.lead {
  font-size: 1.1875rem;
  line-height: 1.85;
  color: var(--ink-700);
}

.muted { color: var(--ink-500); }

.small { font-size: .9375rem; line-height: 1.7; }

/* ==========================================================================
   03  BUTTONS, PILLS, TAGS, FOCUS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  min-block-size: 48px;
  padding-inline: var(--s-24);
  padding-block: var(--s-12);
  border: 1px solid transparent;
  border-radius: var(--r-12);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
}

.btn-primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--sh-btn);
}

.btn-primary:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }
.btn-primary:active { background: var(--btn-bg-active); }

.btn-ghost {
  background: var(--surface);
  /* --line is 1.18:1 against the bands this sits on, so the button did not
     read as a control at all. --ink-500 is 5.3:1, well over the 3:1 floor. */
  border-color: var(--ink-500);
  color: var(--ink-900);
  box-shadow: var(--sh-1);
}

.btn-ghost:hover { border-color: var(--ink-400); color: var(--ink-900); }

.btn-lg { min-block-size: 52px; padding-inline: var(--s-32); }
.btn-sm { min-block-size: 40px; padding-inline: var(--s-20); font-size: 1rem; }
.btn-block { inline-size: 100%; }

/* A real focus state on every interactive element. Never outline:none. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--brand-200);
  /* No border-radius here: :where() is zero-specificity, so this tied with
     .btn and won on source order, inheriting the parent's radius and
     squaring off focused buttons. Outlines already follow the element's own
     radius in every current browser. */
}

.pill {
  display: inline-flex;
  align-items: center;
  min-block-size: 26px;
  padding-inline: var(--s-12);
  border-radius: var(--r-pill);
  background: var(--brand-050);
  color: var(--brand-700);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--s-8);
  border: 1px solid var(--line);
  border-radius: var(--r-8);
  color: var(--ink-500);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

/* The check glyph: two borders rotated 45deg. No icon font, no SVG file.
   PHYSICAL borders on purpose — a rotated shape must not mirror in RTL. */
.chk {
  flex: 0 0 auto;
  display: inline-block;
  inline-size: 8px;
  block-size: 14px;
  margin-block-start: 5px;
  border-right: 2px solid var(--ok);
  border-bottom: 2px solid var(--ok);
  transform: rotate(45deg);
}

/* ==========================================================================
   04  HEADER + MOBILE NAV
   ========================================================================== */

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--s-16);
  z-index: 100;
  padding: var(--s-12) var(--s-16);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-8);
  color: var(--ink-900);
  text-decoration: none;
}

.skip-link:focus { inset-block-start: var(--s-8); }

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--surface-blur);
  border-block-end: 1px solid var(--line);
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .site-header {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

.header-inner {
  min-block-size: 64px;
  display: flex;
  align-items: center;
  gap: var(--s-16);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-12);
  margin-inline-end: auto;
  text-decoration: none;
  color: var(--ink-900);
}

.brand-mark {
  inline-size: 12px;
  block-size: 12px;
  border-radius: 4px;
  background: var(--brand-600);
  box-shadow: 0 0 0 4px var(--brand-050);
}

.brand-text { display: flex; align-items: baseline; gap: var(--s-8); }

.brand-ar { font-size: 1.1875rem; font-weight: 700; line-height: 1.2; }

.brand .latin { font-size: .8125rem; color: var(--ink-500); font-weight: 600; }

.site-nav { display: flex; align-items: center; gap: var(--s-24); }

.nav-links { display: flex; align-items: center; gap: var(--s-24); }

.nav-links a {
  color: var(--ink-700);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
}

.nav-links a:hover { color: var(--brand-700); }

.nav-toggle {
  display: none;
  inline-size: 44px;
  block-size: 44px;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  cursor: pointer;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  inline-size: 18px;
  block-size: 2px;
  background: var(--ink-900);
  border-radius: 2px;
}

.nav-toggle-bars { position: relative; }

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
}

.nav-toggle-bars::before { inset-block-start: -6px; }
.nav-toggle-bars::after  { inset-block-start: 6px; }

@media (max-width: 63.999rem) {
  .nav-toggle { display: inline-flex; }

  /* Full-bleed panel: it is positioned against the sticky header, not the
     container, so it spans the whole width under the 64px bar. */
  .site-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* 16px, not 20px: .wrap switches to 16px gutters under 25rem, and the open
       nav sat 4px inboard of the logo it drops beneath. */
    padding: var(--s-8) max(var(--s-16), calc((100% - 71.25rem) / 2)) var(--s-20);
    background: var(--surface);
    border-block-end: 1px solid var(--line);
    box-shadow: var(--sh-2);
  }

  .site-nav.is-open { display: flex; }

  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }

  .nav-links a {
    display: block;
    padding-block: var(--s-16);
    border-block-end: 1px solid var(--line-soft);
  }

  .site-nav .btn { inline-size: 100%; margin-block-start: var(--s-16); }
}

/* ==========================================================================
   05  HERO
   ========================================================================== */

.hero { padding-block: clamp(3rem, 6vw, 5rem) var(--section-pad); }

.hero-grid { display: grid; gap: var(--s-48); }

@media (min-width: 64rem) {
  .hero-grid {
    grid-template-columns: 1.05fr .95fr;
    gap: var(--s-64);
    align-items: center;
  }
}

.hero h1 { margin-block-end: var(--s-24); }

.hero .lead { margin-block-end: var(--s-32); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-12);
  margin-block-end: var(--s-20);
}

.hero-micro {
  color: var(--ink-500);
  font-size: .9375rem;
  line-height: 1.7;
}

/* Full-width thumb targets on phones. */
@media (max-width: 38.999rem) {
  .hero-actions .btn,
  .cta-actions .btn,
  .reseller-actions .btn { inline-size: 100%; }
}

/* --- The CSS-only product panel. No images. ---------------------------- */
.hero-panel { max-width: 26rem; }

@media (min-width: 64rem) {
  .hero-panel { max-width: none; justify-self: stretch; }
}

.status-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-24);
  padding: var(--s-24);
  box-shadow: var(--sh-2), var(--card-inset);
}

.status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  padding-block-end: var(--s-16);
  border-block-end: 1px solid var(--line-soft);
}

.status-title { font-size: 1rem; font-weight: 600; color: var(--ink-900); }

.status-state {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  color: var(--ok);
  font-size: .9375rem;
  font-weight: 600;
}

.status-dot {
  inline-size: 10px;
  block-size: 10px;
  border-radius: var(--r-pill);
  background: var(--ok);
}

.status-rows { margin-block: var(--s-8) var(--s-16); }

.status-rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  padding-block: var(--s-12);
  border-block-end: 1px solid var(--line-soft);
  font-size: .9375rem;
}

.status-rows li:last-child { border-block-end: 0; }

.status-key { color: var(--ink-500); font-style: normal; }

.status-val { color: var(--ink-900); font-weight: 600; text-align: end; }

.status-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  padding: var(--s-12) var(--s-16);
  background: var(--paper-2);
  border-radius: var(--r-12);
  font-size: .9375rem;
}

.status-code .num { color: var(--ink-900); font-weight: 600; }

.status-caption {
  margin-block-start: var(--s-12);
  color: var(--ink-500);
  font-size: .8125rem;
  line-height: 1.6;
}

/* ==========================================================================
   06  STATS STRIP
   ========================================================================== */

.stats-section { padding-block: var(--s-48); }

.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.stats li { padding-block: var(--s-20); }

.stats li + li { border-block-start: 1px solid var(--line); }

@media (min-width: 48rem) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stats li { padding-block: 0; padding-inline: var(--s-24); }
  .stats li:first-child { padding-inline-start: 0; }
  .stats li:last-child { padding-inline-end: 0; }
  .stats li + li { border-block-start: 0; border-inline-start: 1px solid var(--line); }
}

.stat-value {
  display: block;
  color: var(--ink-900);
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.4;
}

.stat-caption {
  display: block;
  margin-block-start: var(--s-4);
  color: var(--ink-500);
  font-size: .9375rem;
  line-height: 1.6;
}

/* ==========================================================================
   07  WHY-US CARDS
   ========================================================================== */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--s-20);
}

.card-soft {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-16);
  padding: var(--s-24);
  box-shadow: var(--sh-1), var(--card-inset);
}

.card-soft h3 { margin-block-end: var(--s-8); }

.card-soft p { color: var(--ink-700); font-size: 1rem; }

/* ==========================================================================
   08  PRICING — the centre of gravity
   ========================================================================== */

/* The four identical features, stated once. Never repeated per card. */
.includes {
  margin-block-end: var(--s-32);
  padding: var(--s-24);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-16);
  box-shadow: var(--sh-1), var(--card-inset);
}

.includes-title {
  margin-block-end: var(--s-16);
  color: var(--ink-900);
  font-size: 1.0625rem;
  font-weight: 700;
}

.includes-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--s-12) var(--s-24);
}

.includes-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-12);
  color: var(--ink-700);
  font-size: 1rem;
  line-height: 1.6;
}

.includes-note {
  margin-block-start: var(--s-16);
  padding-block-start: var(--s-16);
  border-block-start: 1px solid var(--line-soft);
  color: var(--ink-500);
  font-size: .9375rem;
  line-height: 1.7;
  max-width: none;
}

/* --- The grid: 4-up >=64rem, 2-up >=39rem, 1-up below ------------------ */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: var(--s-20);
}

@media (max-width: 38.999rem) {
  .plans-grid { grid-template-columns: 1fr; }
}

.plan {
  display: flex;
  flex-direction: column;
  padding: var(--s-24);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-16);
  box-shadow: var(--sh-2), var(--card-inset);
  position: relative;
}

/* Popular: a 2px ember hairline on the top edge. No transform:scale —
   scaling would break row alignment the moment the grid reflows. */
.plan--pop {
  border-color: var(--brand-200);
  box-shadow: var(--sh-pop), var(--card-inset);
}

.plan--pop::before {
  content: "";
  position: absolute;
  inset-inline: -1px;
  inset-block-start: -1px;
  block-size: 2px;
  background: var(--brand-600);
  border-start-start-radius: var(--r-16);
  border-start-end-radius: var(--r-16);
}

.plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-8);
  min-block-size: 26px;
  margin-block-end: var(--s-12);
}

.plan-eyebrow {
  color: var(--ink-500);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.35;
}

.plan-name {
  margin-block-end: var(--s-16);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-900);
}

/* From 2-up onward, reserve two lines for the name so every price in the
   row sits on the same baseline whatever the plan is called. */
@media (min-width: 39rem) {
  .plan-name { min-block-size: calc(2 * 1.45em); }
}

.plan-price {
  color: var(--ink-900);
  font-size: clamp(2.25rem, 1.9rem + 1.4vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
}

.plan-price .cur {
  font-size: .55em;
  font-weight: 600;
  color: var(--ink-500);
  margin-inline-end: .06em;
}

/* Normal inline flow, not flex: the number, the Arabic word and the tag are
   one sentence and must wrap like one. */
.plan-rate {
  margin-block-start: var(--s-12);
  color: var(--ink-500);
  font-size: .9375rem;
  line-height: 1.6;
}

.plan-rate .tag {
  margin-inline-start: var(--s-8);
  border-color: var(--brand-200);
  color: var(--brand-700);
  background: var(--brand-050);
}

.plan-div {
  block-size: 1px;
  background: var(--line-soft);
  margin-block: var(--s-20);
}

.plan-note {
  color: var(--ink-700);
  font-size: .9375rem;
  line-height: 1.7;
  margin-block-end: var(--s-20);
}

.plan-extras { display: grid; gap: var(--s-8); margin-block-end: var(--s-20); }

.plan-extras li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-12);
  color: var(--ink-700);
  font-size: .9375rem;
  line-height: 1.6;
}

/* All eight buttons land on one line. */
.plan-btn { margin-block-start: auto; inline-size: 100%; }

/* The hand-written eighth cell — no orphan row. */
.plan--ask {
  background: transparent;
  border-style: dashed;
  /* 3.0:1 against the pricing band; --line was invisible at 1.10:1. */
  border-color: var(--ink-400);
  box-shadow: none;
}

.plan--ask .plan-name { min-block-size: 0; }

.plans-foot {
  margin-block-start: var(--s-24);
  color: var(--ink-500);
  font-size: .9375rem;
  line-height: 1.7;
  max-width: 46em;
}

/* ==========================================================================
   09  DEVICES
   ========================================================================== */

.devices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-12);
}

.device {
  flex: 1 1 10rem;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-16) var(--s-20);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-16);
  box-shadow: var(--sh-1), var(--card-inset);
  text-align: center;
}

.device-name {
  font-size: .9375rem;
  color: var(--ink-900);
}

.device-caption {
  color: var(--ink-500);
  font-size: .8125rem;
  line-height: 1.5;
}

/* ==========================================================================
   10  STEPS
   ========================================================================== */

.steps {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-32);
}

@media (min-width: 56rem) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-32); }

  /* dashed connector, desktop only. A horizontal line does not mirror. */
  .steps::before {
    content: "";
    position: absolute;
    inset-block-start: 28px;
    inset-inline: 12%;
    block-size: 1px;
    background-image: repeating-linear-gradient(to left,
      var(--ink-400) 0 6px, transparent 6px 14px);
    opacity: .6;
  }
}

.step { position: relative; }

.step-num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 56px;
  block-size: 56px;
  margin-block-end: var(--s-16);
  border-radius: var(--r-pill);
  background: var(--brand-050);
  color: var(--brand-700);
  font-size: 1.3125rem;
  font-weight: 700;
  box-shadow: 0 0 0 6px var(--paper-2);
}

.step h3 { margin-block-end: var(--s-8); }

.step p { color: var(--ink-700); font-size: 1rem; }

/* ==========================================================================
   11  REVIEWS
   ========================================================================== */

.review {
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
  padding: var(--s-24);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-16);
  box-shadow: var(--sh-1), var(--card-inset);
}

.review blockquote { margin: 0; color: var(--ink-700); font-size: 1rem; }

.review figcaption {
  margin-block-start: auto;
  padding-block-start: var(--s-16);
  border-block-start: 1px solid var(--line-soft);
  color: var(--ink-500);
  font-size: .9375rem;
}

.review-name { display: block; color: var(--ink-900); font-weight: 600; }

/* ==========================================================================
   12  RESELLER BAND
   ========================================================================== */

.reseller {
  display: grid;
  gap: var(--s-24);
  padding: var(--s-32);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-24);
  box-shadow: var(--sh-2), var(--card-inset);
}

@media (min-width: 56rem) {
  .reseller {
    grid-template-columns: 1.4fr .6fr;
    align-items: center;
    gap: var(--s-48);
    padding: var(--s-48);
  }
}

.reseller h2 { margin-block-end: var(--s-16); }

.reseller-actions { display: flex; flex-wrap: wrap; gap: var(--s-12); }

/* ==========================================================================
   13  FAQ  — native <details>, zero JS
   ========================================================================== */

.faq-list {
  border-block-start: 1px solid var(--line);
  max-width: 52rem;
}

.faq-item { border-block-end: 1px solid var(--line); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  padding-block: var(--s-20);
  color: var(--ink-900);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

/* +/- drawn in CSS. Grid-stacked so it centres identically in RTL and LTR. */
.faq-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 22px;
  block-size: 22px;
}

.faq-ico::before,
.faq-ico::after {
  content: "";
  grid-area: 1 / 1;
  background: var(--ink-700);
  border-radius: 1px;
}

.faq-ico::before { inline-size: 14px; block-size: 2px; }

.faq-ico::after {
  inline-size: 2px;
  block-size: 14px;
  transition: transform .18s ease;
}

.faq-item[open] .faq-ico::after { transform: scaleY(0); }

.faq-item[open] summary { color: var(--brand-700); }

.faq-body {
  padding-block-end: var(--s-24);
  color: var(--ink-700);
  font-size: 1rem;
}

.faq-body p + p { margin-block-start: var(--s-12); }

/* ==========================================================================
   14  SEO ARTICLE
   ========================================================================== */

.article { max-width: 46rem; }

.article h2 { margin-block-end: var(--s-20); }

.article h3 { margin-block: var(--s-32) var(--s-12); }

.article p + p { margin-block-start: var(--s-16); }

.article p { color: var(--ink-700); }

/* ==========================================================================
   15  FINAL CTA BAND
   ========================================================================== */

.cta-band {
  display: grid;
  gap: var(--s-24);
  padding: var(--s-32);
  background: var(--brand-050);
  border: 1px solid var(--brand-200);
  border-radius: var(--r-24);
  text-align: start;
}

@media (min-width: 56rem) {
  .cta-band {
    grid-template-columns: 1.4fr .6fr;
    align-items: center;
    gap: var(--s-48);
    padding: var(--s-48);
  }
}

.cta-band h2 { margin-block-end: var(--s-12); }

.cta-band p { color: var(--ink-700); }

.cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-12); }

/* ==========================================================================
   16  FOOTER
   ========================================================================== */

.site-footer {
  background: var(--paper-2);
  border-block-start: 1px solid var(--line);
  padding-block: var(--s-64) var(--s-32);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-32);
}

@media (min-width: 48rem) {
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--s-48); }
}

.footer-title {
  margin-block-end: var(--s-16);
  color: var(--ink-900);
  font-size: 1rem;
  font-weight: 700;
}

.footer-links li + li { margin-block-start: var(--s-12); }

.footer-links a {
  color: var(--ink-700);
  text-decoration: none;
  font-size: 1rem;
}

.footer-links a:hover { color: var(--brand-700); text-decoration: underline; }

.footer-about p { color: var(--ink-500); font-size: .9375rem; line-height: 1.75; }

.footer-brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-8);
  margin-block-end: var(--s-12);
  color: var(--ink-900);
  font-size: 1.1875rem;
  font-weight: 700;
}

.footer-pay {
  margin-block-start: var(--s-32);
  padding-block-start: var(--s-24);
  border-block-start: 1px solid var(--line);
  color: var(--ink-500);
  font-size: .9375rem;
  line-height: 1.7;
  max-width: none;
}

.footer-fine {
  margin-block-start: var(--s-12);
  color: var(--ink-500);
  font-size: .8125rem;
  line-height: 1.7;
  max-width: none;
}

/* ==========================================================================
   17  UTILITIES, MOTION, PRINT
   ========================================================================== */

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.stack-16 > * + * { margin-block-start: var(--s-16); }
.stack-24 > * + * { margin-block-start: var(--s-24); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .plan, .card-soft, .device, .review, .status-card { border: 1px solid CanvasText; }
  .btn-primary { border-color: CanvasText; }
}

@media print {
  .site-header, .nav-toggle, .cta-band, .hero-actions, .plan-btn { display: none !important; }
  body { background: #fff; color: #000; }
  .plan, .card-soft { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   Empty-catalogue fallback. Not part of the original design: the plan loop can
   now bail to a WhatsApp CTA when $packages is empty, and that state needed
   somewhere to live rather than inheriting nothing.
   -------------------------------------------------------------------------- */
.plans-empty {
  margin-block: var(--s-32);
  padding: var(--s-32);
  border: 1px dashed var(--ink-400);
  border-radius: var(--r-16);
  background: var(--surface);
  text-align: center;
}
.plans-empty p { margin: 0 0 var(--s-20); color: var(--ink-700); }
/* ==========================================================================
   Inner pages — compatibility layer
   --------------------------------------------------------------------------
   The homepage was redesigned; the other pages (contact, downloads, terms,
   privacy, login, order) still carry the previous markup. Swapping the single
   stylesheet left their containers, the downloads cards and — on every page —
   the floating WhatsApp button with no rules at all.

   Rather than restyle six pages by hand, their class names are mapped onto the
   new design tokens. Same spacing scale, same surfaces, same radii, so the
   chrome and the content agree even though the markup predates the design.
   These can be deleted page by page as each one is rebuilt.
   ========================================================================== */

/* --- containers ---------------------------------------------------------- */
.shell {
  width: min(100% - 3rem, 71.25rem);
  margin-inline: auto;
}
@media (max-width: 25rem) {
  .shell { width: calc(100% - 2rem); }
}

.page-shell {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

/* Old pages set their headings inline; give them the same rhythm as the new
   sections so a legal page does not read as a different website. */
.page-shell h1 { font-size: clamp(1.875rem, 4vw, 2.75rem); margin-block-end: var(--s-16); }
.page-shell h2 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); margin-block: var(--s-32) var(--s-12); }
.page-shell p,
.page-shell li { color: var(--ink-700); }
.page-shell a { color: var(--brand-700); }

.flash {
  margin-block: var(--s-16);
  padding: var(--s-12) var(--s-16);
  border-radius: var(--r-12);
  border: 1px solid var(--line);
  background: var(--surface);
}
.flash.ok  { border-color: var(--ok); }
.flash.bad { border-color: var(--brand-600); }

/* --- downloads page ------------------------------------------------------ */
.download-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  padding: var(--s-24);
  border: 1px solid var(--line);
  border-radius: var(--r-16);
  background: var(--surface);
  box-shadow: var(--sh-1), var(--card-inset);
}
.download-thumb { max-width: 72px; border-radius: var(--r-12); }
.download-meta { color: var(--ink-500); font-size: .9375rem; }
.download-platform { font-weight: 600; color: var(--ink-900); }
.downloader-code-badge {
  display: inline-block;
  padding: var(--s-4) var(--s-12);
  border-radius: var(--r-pill);
  background: var(--brand-050);
  color: var(--brand-700);
  font-weight: 600;
  /* A Downloader code is digits: keep it LTR inside Arabic text. */
  direction: ltr;
  unicode-bidi: isolate;
}
.download-card-actions { display: flex; flex-wrap: wrap; gap: var(--s-12); margin-block-start: auto; }

/* --- the floating WhatsApp button, present on every page ----------------- */
.whatsapp-float {
  position: fixed;
  inset-inline-start: var(--s-20);
  inset-block-end: var(--s-20);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-12) var(--s-16);
  border-radius: var(--r-pill);
  background: #1FA855;              /* WhatsApp green — a recognised mark, not brand colour */
  color: #FFFFFF;                   /* 3.6:1; the label is 15px/600 so it clears AA for large text */
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .45);
}
.whatsapp-float:hover { background: #178F47; }
.whatsapp-icon svg { width: 26px; height: 26px; display: block; fill: currentColor; }
.whatsapp-copy { display: flex; flex-direction: column; line-height: 1.25; }
.whatsapp-title { font-size: .9375rem; }
.whatsapp-subtitle { font-size: .75rem; opacity: .9; }

/* On a phone the label costs more than it earns; keep the mark only. */
@media (max-width: 30rem) {
  .whatsapp-copy { display: none; }
  .whatsapp-float { padding: var(--s-12); }
}

@media (prefers-reduced-motion: no-preference) {
  .whatsapp-float { transition: background-color .16s ease, transform .16s ease; }
  .whatsapp-float:hover { transform: translateY(-1px); }
}

/* ==========================================================================
   aromatv.shop — visual upgrade
   --------------------------------------------------------------------------
   The first pass was structurally right but read as a wireframe: no imagery, a
   hero that was text beside a plain list, cards whose borders barely resolved,
   and one flat surface from top to bottom. Nothing anchored the eye.

   This layer adds the three things it was missing — an illustration to land on,
   real depth instead of hairlines, and light that changes down the page so the
   sections stop looking identical. It is appended after the base stylesheet, so
   every token above still applies and none of the layout work is thrown away.
   ========================================================================== */

/* --- 1. The page is lit, not flat -----------------------------------------
   Two very soft ember washes behind the top of the document. Fixed and
   pointer-transparent, so they cost nothing and never interfere. */
body::before {
  content: "";
  position: fixed;
  inset-block-start: -18rem;
  inset-inline-end: -14rem;
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 90, 40, .13), transparent 68%);
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: "";
  position: fixed;
  inset-block-start: 16rem;
  inset-inline-start: -20rem;
  width: 38rem;
  height: 38rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(178, 55, 22, .10), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.site-header, main, .site-footer, footer { position: relative; z-index: 1; }

/* --- 2. Hero: give it a stage -------------------------------------------- */
.hero {
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand-050) 60%, transparent), transparent 74%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 62rem) {
  .hero-grid { grid-template-columns: 1fr; }
}

.hero-copy h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  line-height: 1.15;
  margin-block-end: var(--s-20);
}
.hero-copy .lead { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); max-width: 34rem; }

/* The primary action should look like the most important thing on the screen. */
.hero-actions .btn-primary {
  box-shadow: var(--sh-btn);
  padding-inline: 1.6rem;
}

/* --- 3. The illustration and the card that sits on it -------------------- */
.hero-panel { position: relative; }
/* The card hangs outside the panel, so nothing may clip it. */
.hero-panel, .hero-grid { overflow: visible; }
.hero-art { margin-inline-start: 1.5rem; }

.hero-art {
  position: relative;
  filter: drop-shadow(0 26px 50px rgba(28, 20, 16, .22));
}
.hero-art svg { width: 100%; height: auto; display: block; }

/* The sample card overlaps the artwork's lower corner — the composition that
   makes a hero read as designed rather than as two things side by side. */
.hero-panel .status-card {
  position: absolute;
  inset-block-end: -2.25rem;
  inset-inline-start: -2.5rem;
  /* Deliberately small and pushed into the corner. At 78% it covered the
     television almost entirely, including the phone, so the illustration was
     doing no work at all - the card has to overlap a corner, not sit on top. */
  width: min(17rem, 56%);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--brand-200) 55%, var(--line));
  border-radius: var(--r-16);
  box-shadow: 0 24px 48px -20px rgba(28, 20, 16, .38), var(--card-inset);
  padding: var(--s-20);
}
@media (max-width: 62rem) {
  /* Stacked, the overlap has nothing to overlap — put it back in the flow. */
  .hero-panel .status-card {
    position: static;
    width: 100%;
    margin-block-start: var(--s-24);
    backdrop-filter: none;
  }
  .hero-art { max-width: 34rem; margin-inline: auto; }
}
.status-card .status-caption { font-size: .8125rem; color: var(--ink-500); margin-block-end: 0; }

/* --- 4. Stats: make them read as facts, not a sentence ------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--s-16);
  list-style: none;
  margin: 0;
  padding: 0;
}
.stats li {
  padding: var(--s-20);
  border-radius: var(--r-12);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1), var(--card-inset);
}
.stat-value {
  display: block;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ink-900);
  margin-block-end: var(--s-4);
}
.stat-value .num { color: var(--brand-700); font-size: 1.375rem; }
.stat-caption { display: block; font-size: .875rem; color: var(--ink-500); line-height: 1.6; }

/* --- 5. Cards: depth, and a border that actually resolves ---------------- */
.card-soft, .plan, .device, .review, .reseller, .includes {
  border-color: color-mix(in srgb, var(--line) 82%, var(--ink-400));
}
.card-soft { transition: transform .16s ease, box-shadow .16s ease; }
@media (prefers-reduced-motion: no-preference) {
  .card-soft:hover { transform: translateY(-2px); box-shadow: var(--sh-2), var(--card-inset); }
}

/* The popular plan should be unmistakable without a garish ribbon. */
.plan--pop {
  border-color: var(--brand-500);
  box-shadow: 0 22px 44px -22px rgba(178, 55, 22, .42), var(--card-inset);
}
.plan--pop::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 3px;
  border-start-start-radius: var(--r-16);
  border-start-end-radius: var(--r-16);
  background: linear-gradient(90deg, var(--brand-500), var(--brand-700));
}
.plan { position: relative; }

/* --- 6. Alternating sections, so the page has rhythm --------------------- */
.band-paper-2 { background: linear-gradient(180deg, var(--paper-2), color-mix(in srgb, var(--paper-2) 55%, var(--paper))); }
.section-head .eyebrow {
  display: inline-block;
  padding: .25rem .7rem;
  border-radius: var(--r-pill);
  background: var(--brand-050);
  color: var(--brand-700);
  font-weight: 600;
  font-size: .8125rem;
  margin-block-end: var(--s-12);
}

/* --- 7. Dark mode: the illustration must not glow on a dark ground ------- */
@media (prefers-color-scheme: dark) {
  body::before { background: radial-gradient(circle, rgba(255, 107, 61, .10), transparent 68%); }
  body::after  { background: radial-gradient(circle, rgba(255, 107, 61, .07), transparent 70%); }
  .hero-art { filter: drop-shadow(0 26px 50px rgba(0, 0, 0, .6)); }
  .hero-panel .status-card { box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .75), var(--card-inset); }
}
/* ==========================================================================
   aromatv.shop — the inner pages
   --------------------------------------------------------------------------
   The homepage was rebuilt; order, checkout, contact, downloads, the account
   area and the legal pages still carry the previous markup. Replacing the
   stylesheet left their entire class vocabulary undefined, so the order page -
   the one page that takes money - was rendering as unstyled inputs on a blank
   background.

   Rather than rewrite six templates, their existing classes are given real
   styling from the same tokens the homepage uses. Same surfaces, same radii,
   same spacing scale, so a customer moving from the homepage into checkout
   stays on one website.

   Written RTL-first with logical properties throughout.
   ========================================================================== */

/* --- layout primitives --------------------------------------------------- */
.container {
  width: min(100% - 3rem, 71.25rem);
  margin-inline: auto;
}
@media (max-width: 25rem) { .container { width: calc(100% - 2rem); } }

.band { padding-block: clamp(2.25rem, 5vw, 4rem); }
.band.white { background: var(--surface); }
.band.teal, .band.gold { background: var(--paper-2); }

.section-head { margin-block-end: var(--s-24); }
.section-head h1, .section-head h2 { margin-block: 0 var(--s-12); }
.section-head p { color: var(--ink-500); max-width: 46rem; margin-block-end: 0; }

.eyebrow {
  display: inline-block;
  padding: .25rem .7rem;
  border-radius: var(--r-pill);
  background: var(--brand-050);
  color: var(--brand-700);
  font-weight: 600;
  font-size: .8125rem;
  margin-block-end: var(--s-12);
}

.grid { display: grid; gap: var(--s-20); }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

/* The order page: form beside the running total. */
.two-col {
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (max-width: 60rem) { .two-col { grid-template-columns: 1fr; } }

/* --- cards --------------------------------------------------------------- */
.card {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r-16);
  background: var(--surface);
  box-shadow: var(--sh-1), var(--card-inset);
}
.card h2, .card h3 { margin-block-start: 0; }
.card > :last-child { margin-block-end: 0; }

/* --- text ---------------------------------------------------------------- */
.muted, .small, .note { color: var(--ink-500); }
.small, .note { font-size: .875rem; line-height: 1.65; }
.note {
  padding: var(--s-12) var(--s-16);
  border-inline-start: 3px solid var(--brand-500);
  background: var(--brand-050);
  border-radius: 0 var(--r-8) var(--r-8) 0;
}

.metric { display: flex; flex-direction: column; gap: .15rem; }
.metric strong, .metric .price { font-size: 1.5rem; font-weight: 700; color: var(--ink-900); }
.price { font-weight: 700; color: var(--ink-900); }
.plan-label { font-weight: 600; color: var(--ink-900); }

/* --- forms: the part that was completely unstyled ----------------------- */
.form { display: grid; gap: var(--s-16); }

.field-row,
.form > div {
  display: grid;
  gap: var(--s-8);
}

label {
  font-weight: 600;
  font-size: .9375rem;
  color: var(--ink-900);
}

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], select, textarea {
  inline-size: 100%;
  padding: .7rem .9rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink-900);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--line) 70%, var(--ink-400));
  border-radius: var(--r-12);
  box-shadow: var(--card-inset);
  transition: border-color .14s ease, box-shadow .14s ease;
}
textarea { min-block-size: 8rem; resize: vertical; line-height: 1.7; }

/* A select needs its own arrow once the native appearance is replaced, and in
   RTL it belongs on the left. */
select {
  appearance: none;
  padding-inline-end: 2.4rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-500) 50%),
                    linear-gradient(135deg, var(--ink-500) 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  background-position: left 1.05rem top 55%, left 0.7rem top 55%;
}
[dir="rtl"] select { background-position: left 1.05rem top 55%, left 0.7rem top 55%; }

input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-200);
}
input::placeholder, textarea::placeholder { color: var(--ink-400); }
input:disabled, select:disabled, textarea:disabled { opacity: .6; cursor: not-allowed; }

/* Numeric and code entry reads left-to-right even inside an Arabic form. */
input[inputmode="numeric"], input[name*="otp" i], input[name*="mac" i] {
  direction: ltr;
  text-align: start;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* --- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--r-12);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--sh-btn);
}
.btn:hover { background: var(--btn-bg-hover); }
.btn:active { background: var(--btn-bg-active); }
.btn.secondary, .btn.ghost {
  background: var(--surface);
  color: var(--ink-900);
  border-color: var(--ink-500);
  box-shadow: var(--sh-1);
}
.btn.secondary:hover, .btn.ghost:hover { background: var(--paper-2); }
.btn.small { padding: .5rem .9rem; font-size: .875rem; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* --- tables (orders, subscriptions, payments) ---------------------------- */
table { inline-size: 100%; border-collapse: collapse; font-size: .9375rem; }
th, td { text-align: start; padding: .65rem .75rem; border-block-end: 1px solid var(--line); vertical-align: top; }
th { font-weight: 650; color: var(--ink-900); background: var(--paper-2); }
tbody tr:last-child td { border-block-end: 0; }
.table-wrap { overflow-x: auto; }

/* --- summary rows (order total, estimate) -------------------------------- */
.row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-16);
  padding-block: .55rem;
  border-block-end: 1px solid var(--line);
}
.row:last-child { border-block-end: 0; }
.row strong { color: var(--ink-900); }

/* --- downloads / install steps ------------------------------------------- */
.install-steps { padding-inline-start: 1.2rem; }
.install-steps li { margin-block-end: .6rem; }
.features { list-style: none; padding: 0; margin: 0; }
.features li { padding-inline-start: 1.5rem; position: relative; margin-block-end: .45rem; }
.features li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .55em;
  inline-size: .5rem;
  block-size: .5rem;
  border-radius: 50%;
  background: var(--brand-500);
}

/* --- modal --------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: var(--s-20);
  background: rgba(12, 10, 9, .55);
  backdrop-filter: blur(3px);
}
.modal-inner, .install-dialog-inner {
  inline-size: min(38rem, 100%);
  max-block-size: 86vh;
  overflow: auto;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--r-16);
  background: var(--surface);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5);
}

/* --- flash --------------------------------------------------------------- */
.flash {
  margin-block: var(--s-16);
  padding: .8rem 1.1rem;
  border-radius: var(--r-12);
  border: 1px solid var(--line);
  background: var(--surface);
  font-weight: 500;
}
.flash.ok  { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, var(--surface)); }
.flash.bad { border-color: var(--brand-600); background: var(--brand-050); }

/* --- page shell ---------------------------------------------------------- */
.page-shell { padding-block: clamp(2rem, 5vw, 3.5rem); }
.page-shell h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); margin-block-end: var(--s-16); }

/* --- .row is overloaded, so disambiguate it -----------------------------
   The templates use .row for two different things: a two-column row of form
   fields (each child a div holding a label and its control), and a
   label/value line in the order summary. Styling it only as the latter left
   every field on the order page stacked and misaligned.

   :has() tells them apart by what is inside, so neither template needs
   touching. Browsers without :has() fall back to the summary treatment,
   which is the safer of the two to get wrong. */
.row:has(label) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--s-16);
  padding-block: 0;
  border-block-end: 0;
}
.row:has(label) > div { display: grid; gap: var(--s-8); align-content: start; }

/* The country box is rendered with an inline style carrying a hardcoded light
   background, which is invisible text in dark mode. Overridden here rather
   than edited in the template, so the fix survives a template change. */
.row div[style*=background] {
  background: var(--paper-2) !important;
  border-color: color-mix(in srgb, var(--line) 70%, var(--ink-400)) !important;
  border-radius: var(--r-12) !important;
  color: var(--ink-900);
  min-block-size: 2.9rem !important;
  padding: .7rem .9rem !important;
}

/* Give the form's actions room and put the primary action first in reading
   order for RTL. */
.form .btn, form .btn { margin-block-start: var(--s-8); }
/* ==========================================================================
   Form controls — the modern pass
   --------------------------------------------------------------------------
   The first styling pass made the fields visible; this makes them feel built.
   Four concrete defects it left behind:

     * Fields in a two-column row stretched to match the tallest cell, so the
       email input rendered nearly twice the height of the name input beside it
       purely because the column opposite carried a line of helper text.
     * The select arrow was drawn with two rotated gradient wedges. That trick
       renders as a smudge at some zoom levels and cannot be made crisp; a real
       chevron is one inline SVG and always looks the same.
     * The read-only country box carries hardcoded inline styles, so it sat at a
       different height, radius and colour from every real input next to it.
     * No hover state, and a focus ring that did not read as one.

   Everything is sized from one variable so the row lines up by construction
   rather than by coincidence.
   ========================================================================== */

:root {
  --field-h: 3.125rem;          /* 50px: comfortable on a phone, not chunky */
  --field-radius: 12px;
}

/* Stop equal-height stretching: each field sits at its own natural height and
   aligns to the top of its row. */
.row:has(label) { align-items: start; }
.row:has(label) > div { align-content: start; }

/* --- the controls themselves -------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], input:not([type]), select, textarea {
  display: block;
  inline-size: 100%;
  min-block-size: var(--field-h);
  padding: .8rem 1rem;
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink-900);
  background: var(--surface);
  border: 1.5px solid color-mix(in srgb, var(--line) 55%, var(--ink-400));
  border-radius: var(--field-radius);
  box-shadow: 0 1px 2px rgba(20, 17, 15, .04);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  appearance: none;
}
textarea { min-block-size: 8.5rem; line-height: 1.7; resize: vertical; }

input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--brand-500) 45%, var(--ink-400));
}

input:focus-visible, select:focus-visible, textarea:focus-visible,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-500) 18%, transparent);
  background: var(--surface);
}

input::placeholder, textarea::placeholder { color: var(--ink-400); opacity: 1; }
input:disabled, select:disabled, textarea:disabled {
  background: var(--paper-2);
  color: var(--ink-500);
  cursor: not-allowed;
}

/* --- select: one real chevron, on the correct side for RTL --------------- */
select {
  padding-inline-end: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%236E6660' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1.05rem center;
  background-size: 14px 9px;
  cursor: pointer;
}
/* In an LTR context the chevron belongs on the right instead. */
[dir="ltr"] select {
  padding-inline-end: 2.75rem;
  background-position: right 1.05rem center;
}
@media (prefers-color-scheme: dark) {
  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%23A29A93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

/* --- the read-only country box ------------------------------------------
   Rendered with inline styles in the template, so it needs !important to be
   brought in line. Styled as a field that is deliberately not editable: same
   geometry as its neighbours, a flatter surface, and no focus affordance. */
.row div[style*="background"] {
  display: flex !important;
  align-items: center !important;
  min-block-size: var(--field-h) !important;
  padding: .8rem 1rem !important;
  background: var(--paper-2) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--field-radius) !important;
  color: var(--ink-900) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* --- labels -------------------------------------------------------------- */
label {
  display: block;
  margin-block-end: .45rem;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--ink-900);
  letter-spacing: 0;
}

/* Helper text under a control should read as secondary, and must not push the
   control opposite it out of alignment. */
.row small, .row .muted, .form small {
  display: block;
  margin-block-start: .4rem;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--ink-500);
}

/* --- buttons in a form --------------------------------------------------- */
.form-actions, .row:has(.btn) { display: flex; flex-wrap: wrap; gap: var(--s-12); }
.btn { min-block-size: var(--field-h); }

@media (prefers-reduced-motion: reduce) {
  input, select, textarea { transition: none; }
}

/* The country box carries its own inline min-height and padding, so a
   min-block-size override still let it grow past its neighbours (59px against
   their 50px). Pinning the height makes the row line up exactly. */
.row div[style*="background"] {
  block-size: var(--field-h) !important;
  min-block-size: var(--field-h) !important;
  line-height: 1.2 !important;
}