/* The public website only (Stage U4).

   Scoped deliberately: `UI.md` §14 — "Keep public styling scoped so it does
   not change task screens." Nothing here is loaded by `base.html`, and
   everything is under `.site` or a class the app never uses, so the marketing
   pages cannot drift into the operational ones.

   It repeats the brand tokens rather than importing `app.css`, which would
   pull the whole application stylesheet onto a page that needs a headline and
   a form. */

:root {
  color-scheme: light;
  --surface-1: #fcfcfb;
  --plane: #faf9f5;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --border: rgba(11, 11, 11, 0.10);

  --brand-blue-ink: #024f80;
  --brand-teal: #05a9b6;
  --brand-teal-ink: #06767f;
  --brand-teal-deep: #08424a;
  --brand-green-ink: #4f8118;
  --brand-orange: #fda401;
  --on-accent: #26170a;
  --critical: #d03b3b;
  --good: #0ca30c;

  --radius-card: 14px;
  --radius-control: 10px;
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 24px;
  --gap-xl: 48px;
  --shadow-card: 0 1px 2px rgba(11, 11, 11, .05), 0 8px 24px rgba(11, 11, 11, .06);
  /* Self-hosted; see `fonts.css`. The Arabic face is selected explicitly
     below rather than trailing the Latin stack, so it cannot be reached only
     by accident. */
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* §5: roughly 1,200 px of content on a desktop. */
  --site-width: 1200px;
}

/* Every public page, not just the landing one. `registration_paused.html`
   also extends the public shell and does not load `landing.css`, so putting
   this only there left one Arabic page set in a different face from the rest
   of the site. Matches the application's stack exactly. */
html[lang="ar"], [dir="rtl"] {
  --sans: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --plane: #0d0d0d;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;
    --border: rgba(255, 255, 255, 0.10);
    --brand-blue-ink: #4aa6dd;
    --brand-teal-ink: #35c4cf;
    --brand-teal-deep: #0b2f34;
    --shadow-card: none;
  }
}

* { box-sizing: border-box; }

body.site {
  margin: 0;
  background: var(--plane);
  color: var(--text-primary);
  /* §5: body text 16–18 px. The app runs at 14; a marketing page is read at
     arm's length by somebody who has not decided to care yet. */
  font: 17px/1.65 var(--sans);
}

.site a { color: var(--brand-blue-ink); }
.site h1, .site h2, .site h3 { line-height: 1.2; margin: 0 0 var(--gap-sm); }
.site p { margin: 0 0 var(--gap-md); }
.site .muted { color: var(--text-muted); font-size: 15px; }

.skip { position: absolute; inset-inline-start: -9999px; }
.skip:focus {
  inset-inline-start: var(--gap-md); inset-block-start: var(--gap-md);
  z-index: 50; background: var(--surface-1); padding: var(--gap-sm) var(--gap-md);
  border-radius: var(--radius-control);
}
/* A visible focus ring everywhere, at AA contrast against both surfaces. */
.site :focus-visible {
  outline: 3px solid var(--brand-teal-ink); outline-offset: 2px;
}

/* ---------- header ---------- */
.siteheader {
  position: sticky; inset-block-start: 0; z-index: 20;
  background: var(--surface-1); border-block-end: 1px solid var(--border);
}
.siteheader-inner {
  max-width: var(--site-width); margin-inline: auto;
  padding: var(--gap-sm) var(--gap-md);
  display: flex; align-items: center; gap: var(--gap-md); flex-wrap: wrap;
}
.brand {
  display: flex; align-items: center; gap: var(--gap-sm);
  text-decoration: none; color: inherit;
}
/* U10 / §13 — the box is reserved by the `width`/`height`
   attributes on the tag, not here: browsers apply
   `aspect-ratio: attr(width)/attr(height)` to <img> from their own
   UA stylesheet, and typed `attr()` is not available to author
   stylesheets — written here it would be dropped silently while
   looking like it worked. `height: auto` then scales correctly
   instead of leaving the height unknown until the bytes arrive. */
.brand-mark { width: 32px; height: auto; display: block; }
.brand-name {
  font-weight: 700; font-size: 19px; color: var(--brand-blue-ink);
}
.sitenav { display: flex; gap: var(--gap-md); margin-inline-start: auto; }
.sitenav a {
  text-decoration: none; color: var(--text-secondary); font-size: 15px;
  padding: 8px 4px; min-height: 44px; display: inline-flex; align-items: center;
}
.sitenav a:hover { color: var(--brand-blue-ink); }
.siteactions { display: flex; align-items: center; gap: var(--gap-sm); }
.sitelink {
  text-decoration: none; color: var(--text-secondary); font-size: 15px;
  padding: 10px; min-height: 44px; display: inline-flex; align-items: center;
}
@media (max-width: 720px) {
  /* The in-page anchors fold away first; the two actions must survive, because
     §15 asks that a visitor find the demo action without opening a menu. */
  .sitenav { display: none; }
  .siteactions { margin-inline-start: auto; }
}

.locale { position: relative; }
.locale > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  gap: 4px; padding: 10px; min-height: 44px; font-size: 15px;
  color: var(--text-secondary);
}
.locale > summary::-webkit-details-marker { display: none; }
.locale-list {
  position: absolute; inset-block-start: calc(100% + 4px); inset-inline-end: 0;
  z-index: 30; margin: 0; padding: 4px; list-style: none; min-inline-size: 170px;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-control); box-shadow: var(--shadow-card);
}
.locale-opt {
  display: block; padding: 10px; min-height: 44px; border-radius: 8px;
  text-decoration: none; color: var(--text-primary); font-size: 15px;
}
.locale-opt:hover { background: var(--plane); }
.locale-opt.is-active { font-weight: 650; color: var(--brand-blue-ink); }

/* ---------- buttons ---------- */
.site .btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--gap-sm); font: inherit; font-size: 16px; font-weight: 600;
  padding: 12px 20px; min-height: 48px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-control);
  background: var(--surface-1); color: var(--text-primary);
  text-decoration: none;
}
/* Orange is a fill colour — 1.98:1 as ink — so anything written on it is the
   dark label, never white. */
.site .btn-accent {
  background: var(--brand-orange); border-color: transparent;
  color: var(--on-accent);
}
.site .btn-lg { font-size: 17px; padding: 14px 26px; min-height: 52px; }

/* ---------- hero ---------- */
.hero {
  max-width: var(--site-width); margin-inline: auto;
  padding: var(--gap-xl) var(--gap-md);
  display: grid; gap: var(--gap-xl);
  /* §5: roughly a 45/55 split between the words and the picture. */
  grid-template-columns: 45fr 55fr; align-items: center;
}
.hero-title {
  /* §5: 48–64 px desktop, 32–40 px mobile. `clamp` does that continuously
     rather than in two jumps. */
  font-size: clamp(32px, 5.2vw, 60px); letter-spacing: -0.015em;
}
.hero-lede { font-size: 19px; color: var(--text-secondary); max-width: 46ch; }
.hero-actions {
  display: flex; align-items: center; gap: var(--gap-md); flex-wrap: wrap;
  margin-block: var(--gap-lg) var(--gap-sm);
}
.hero-note { max-width: 46ch; }

@media (max-width: 860px) {
  /* §5: on a phone the order is headline, description, primary action,
     secondary action, then the image — the first screen has to explain the
     product and expose a usable call to action. */
  .hero { grid-template-columns: 1fr; gap: var(--gap-lg); padding-block: var(--gap-lg); }
  .hero-panel { order: 2; }
}

/* The example panel. Drawn, labelled illustrative, and carrying no customer
   data — a real capture would either expose a customer's fields or be staged
   data presented as real. */
.hero-panel { margin: 0; }
.panel {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: var(--gap-md); display: grid; gap: var(--gap-sm);
}
.panel-row {
  display: flex; align-items: center; gap: var(--gap-sm); font-size: 15px;
  padding-block: 6px;
}
.panel-head { border-block-end: 1px solid var(--border); padding-block-end: var(--gap-sm); }
.panel-dot {
  inline-size: 10px; block-size: 10px; border-radius: 50%;
  background: var(--brand-green-ink); flex: none;
}
.panel-tag {
  font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  flex: none; color: var(--on-accent);
}
.panel-tag-watch { background: #cfe6f5; color: #073a5c; }
.panel-tag-work { background: #fde3b0; color: #5c3a00; }
.panel-tag-done { background: #cdebcd; color: #14481a; }

/* ---------- bands ---------- */
.band { padding: var(--gap-xl) var(--gap-md); }
.band-inner { max-width: var(--site-width); margin-inline: auto; }
.band-narrow { max-width: 720px; }
.band-plain { background: var(--surface-1); }
/* §5: exactly one deep-teal section, so it reads as a change of pace rather
   than decoration. White on this ink is over 9:1. */
.band-demo { background: var(--brand-teal-deep); color: #f4fbfc; }
.band-demo .muted, .band-demo .band-lede { color: #cfe6ea; }
.band-demo .fieldlabel { color: #f4fbfc; }
.band-demo a { color: #bfe6ec; }
.band-title { font-size: clamp(24px, 3vw, 34px); margin-block-end: var(--gap-md); }
.band-lede { font-size: 18px; color: var(--text-secondary); max-width: 62ch; }

.steps {
  list-style: none; margin: var(--gap-lg) 0 0; padding: 0;
  display: grid; gap: var(--gap-lg); grid-template-columns: repeat(3, 1fr);
}
.step {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: var(--gap-lg);
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 32px; block-size: 32px; border-radius: 50%;
  background: var(--brand-teal-ink); color: #fff; font-weight: 700;
  margin-block-end: var(--gap-sm);
}
.cards { display: grid; gap: var(--gap-lg); grid-template-columns: repeat(3, 1fr); }
.sitecard {
  background: var(--plane); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: var(--gap-lg);
}
@media (max-width: 860px) {
  .steps, .cards { grid-template-columns: 1fr; }
}

.limits { display: grid; gap: var(--gap-md); margin: 0; }
.limits dt { font-weight: 650; }
.limits dd { margin: 0; color: var(--text-secondary); }

.faq {
  border-block-end: 1px solid var(--border); padding-block: var(--gap-md);
}
.faq > summary {
  cursor: pointer; font-weight: 600; min-height: 44px;
  display: flex; align-items: center;
}

/* ---------- the enquiry form ---------- */
.demoform { display: grid; gap: var(--gap-md); }
.formgrid { display: grid; gap: var(--gap-md); grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .formgrid { grid-template-columns: 1fr; } }
/* §12 and §5: persistent labels, never placeholder-only — a placeholder
   disappears the moment somebody starts typing, which is when they need it. */
.fieldlabel {
  display: block; font-size: 14px; font-weight: 600;
  margin-block-end: var(--gap-xs);
}
.authfield {
  inline-size: 100%; font: inherit; font-size: 16px; padding: 12px;
  min-height: 48px; border-radius: var(--radius-control);
  border: 1px solid var(--border); background: var(--surface-1);
  color: var(--text-primary);
}
/* The field at fault is marked by a border *and* named in the message above,
   so the error is never carried by colour alone. */
.authfield.is-bad { border-color: var(--critical); border-inline-start-width: 3px; }
textarea.authfield { min-height: 96px; resize: vertical; }

.notice {
  padding: var(--gap-md); border-radius: var(--radius-control);
  border: 1px solid var(--border); background: var(--surface-1);
  color: var(--text-primary);
}
.notice-good { border-inline-start: 3px solid var(--good); }
.notice-bad { border-inline-start: 3px solid var(--critical); }

/* The honeypot: out of sight, out of the tab order, out of the accessibility
   tree. Not `display: none`, which some bots skip. */
.hp {
  position: absolute; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- footer ---------- */
.sitefooter {
  background: var(--surface-1); border-block-start: 1px solid var(--border);
  padding: var(--gap-lg) var(--gap-md);
}
.sitefooter-inner { max-width: var(--site-width); margin-inline: auto; }

/* §5: restrained motion, and none at all for anyone who has asked for none. */
@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after {
    animation-duration: 0.01ms !important; transition-duration: 0.01ms !important;
  }
}

/* The hero's text column. The grid sets the 45/55 split; this keeps the words
   from running to an unreadable measure inside it. */
.hero-text { min-inline-size: 0; max-inline-size: 54ch; }

/* The language menu sits in the header row rather than on the app bar, so it
   needs no dropdown offset of its own — only the alignment. */
.sitelocale { margin-inline-start: var(--gap-xs); }

/* ---------- the two ways in ----------
   Side by side where there is room, stacked where there is not, and equal
   weight: neither path is the "real" one. The self-service card takes the
   accent button because it is the one a visitor can act on immediately. */
.pathgrid { display: grid; gap: var(--gap-md);
  grid-template-columns: 1fr; margin-block-start: var(--gap-md); }
@media (min-width: 720px) {
  .pathgrid { grid-template-columns: 1fr 1fr; gap: var(--gap-lg); }
}
.pathcard {
  padding: var(--gap-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface-1);
  display: flex; flex-direction: column; gap: var(--gap-sm);
  align-items: flex-start;
}
.pathcard h3 { margin: 0; font-size: 18px; }
.pathcard p { margin: 0; flex: 1 1 auto; }

/* Conversion journey: see the product, choose a path, explore the detail. */
.site section[id] { scroll-margin-top: 150px; }
.conversion-hero {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: none; width: 100%; margin: 0;
  padding-inline: clamp(20px, 4vw, 72px);
  display: block; min-height: 720px; padding-block: 88px;
  --hero-veil: 250, 249, 245;
}
.conversion-hero .hero-text { position: relative; z-index: 2; max-inline-size: 620px; }
.conversion-hero::after { content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--hero-veil), .98) 0%,
    rgba(var(--hero-veil), .94) 34%, rgba(var(--hero-veil), .65) 54%,
    rgba(var(--hero-veil), .12) 100%); }
[dir="rtl"] .conversion-hero::after { transform: scaleX(-1); }
.hero-value-links { list-style: none; margin: 24px 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px; }
.hero-value-links a { display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface-1); text-decoration: none;
  font-size: 14px; font-weight: 600; }
.hero-evidence-note { font-size: 12px; color: var(--text-secondary); max-width: 58ch; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .conversion-hero { --hero-veil: 13, 13, 13; }
}
/* Soft daylight colours drift behind the content without intercepting input.
   Transform-only motion avoids a canvas, image downloads or per-frame JS. */
.conversion-hero::before {
  content: ""; position: absolute; inset: -8%; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 28%, rgba(5, 169, 182, .11), transparent 48%),
    radial-gradient(ellipse at 78% 65%, rgba(253, 164, 1, .09), transparent 44%),
    radial-gradient(ellipse at 48% 85%, rgba(79, 129, 24, .06), transparent 42%);
  animation: hero-daylight 18s ease-in-out infinite alternate;
}
@keyframes hero-daylight {
  from { transform: translate3d(-1%, -1%, 0) scale(1); }
  to { transform: translate3d(2%, 2%, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .conversion-hero::before { animation: none; }
}
.hero-eyebrow { color: var(--brand-teal-ink); font-size: 14px; font-weight: 700; }
.product-preview { margin: 0; min-width: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: 20px;
  background: var(--surface-1); box-shadow: var(--shadow-card); }
.product-preview img, .tour-card img { display: block; width: 100%; height: auto; }
.preview-label { padding: 12px 18px; font-size: 14px; font-weight: 600;
  border-bottom: 1px solid var(--border); }
.preview-label span { color: var(--brand-teal-ink); margin-inline-end: 6px; }
.hero-showcase { position: absolute; inset: -12% -5%; z-index: 0;
  pointer-events: none; display: grid; align-items: center; }
/* Six real screens form one continuous plane; only the parent is tilted. */
.hero-screen-stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; direction: ltr;
  transform: perspective(1400px) rotateY(-10deg) rotateZ(-6deg) skewY(2deg);
  transform-origin: center; }
.hero-screen { min-width: 0; overflow: hidden; border-radius: 9px;
  background: var(--surface-1); box-shadow: 0 8px 24px rgba(8, 66, 74, .14); }
.hero-screen img { display: block; width: 100%; height: auto; }
@media (max-width: 720px) {
  .hero-showcase { inset: -4% -35%; }
  .hero-screen-stack { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr));
    transform: perspective(1000px) rotateY(-5deg) rotateZ(-4deg); }
  .conversion-hero::after { background: rgba(var(--hero-veil), .9); }
}
.product-preview figcaption, .tour-caption { padding: 12px 18px;
  color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
#paths { background: var(--brand-teal-deep); color: #fff; }
#paths .band-lede { color: #d6e9e9; }
#paths .pathcard { color: var(--text-primary); }
.tour-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tour-card { overflow: hidden; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 16px; }
.tour-copy { padding: 24px; }
.tour-copy h3 { font-size: 20px; }
.tour-copy p { color: var(--text-secondary); font-size: 16px; margin: 0; }
.tour-caption { padding-inline: 0; margin-block-start: 12px !important; }
.demo-optional { margin-block: 16px; }
.demo-optional summary { cursor: pointer; min-height: 48px;
  padding-block: 12px; color: var(--brand-blue-ink); }
.band-demo .demo-optional summary { color: #cfe6ea; }
.public-mobile-menu { display: none; }
@media (max-width: 1100px) {
  .sitenav { display: none; }
  .siteactions { margin-inline-start: auto; }
  .public-mobile-menu { display: block; padding: 0 16px; }
  .public-mobile-menu summary { cursor: pointer; min-height: 44px; padding-block: 8px; }
  .public-mobile-menu nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-bottom: 12px; gap: 4px; }
  .public-mobile-menu a { padding: 10px; min-height: 44px; }
}
@media (max-width: 720px) {
  .conversion-hero { padding-block: 32px; gap: 24px; }
  .siteheader-inner { gap: 8px; }
  .siteactions { flex-wrap: wrap; gap: 4px; }
  .siteactions .btn, .siteactions .sitelink, .locale > summary { font-size: 14px; padding-inline: 8px; }
  .tour-grid { grid-template-columns: minmax(0, 1fr); }
  .pathcard { padding: 24px; }
  .pathcard .btn { width: 100%; justify-content: center; }
  .hero-actions { align-items: stretch; }
}