/* ==========================================================================
   TRACELY MARKETING SITE — one design system for every public page.

   This file is the single source of truth for the marketing site's look.
   It deliberately mirrors the product's own tokens (app/src/styles.css) so the
   website and the app read as one thing.

   RULES
   - After changing this file (or site.js / i18n.js), bump the ?v= number on
     the asset links in ALL seven pages, or browsers keep the old file for up
     to an hour and the deploy looks broken. A test enforces they match.
   - Never hardcode a colour, size, radius or spacing below. Use the tokens.
   - Headings are Fredoka and never go above weight 600. Body is Inter.
     Weights above 700 are not loaded and render as ugly fake bold.
   - A page title is the same size on every page. A section title is the same
     size on every page. Do not introduce a per-page scale.
   ========================================================================== */

:root {
  /* ---- Type ---- */
  --font-display: "Fredoka", "Inter", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-arabic: "Cairo", sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-display: clamp(2rem, 1.45rem + 2.2vw, 3rem);       /* page titles: 32 → 48 */
  --fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);           /* section titles: 24 → 32 */
  --fs-h3: 1.25rem;                                        /* 20 — card titles */
  --fs-h4: 1.0625rem;                                      /* 17 */
  --fs-lead: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);   /* 17 → 19 hero body */
  --fs-body: 1.0625rem;                                    /* 17 */
  --fs-sm: 0.9375rem;                                      /* 15 */
  --fs-meta: 0.8125rem;                                    /* 13 */
  --fs-eyebrow: 0.75rem;                                   /* 12 */

  --lh-tight: 1.12;
  --lh-heading: 1.25;
  --lh-body: 1.65;

  /* ---- Surfaces & ink ---- */
  --bg: #fffdfb;
  --paper: #faf8f6;
  --soft: #f6f3ef;
  --card: #ffffff;
  --ink: #171512;
  --muted: #6b655d;
  --line: #e8e3dc;
  --line-soft: #f0ece6;

  /* ---- Brand: orange primary, dark green secondary ----

     THREE oranges, and the difference matters. Same brand colour, three jobs:

       --orange       #fe5c24  the brand orange. Icons, glows, tinted panels,
                               borders, big display headings. Unchanged. This
                               is the colour of the product.
       --orange-ink   #bd3b07  the SAME orange darkened until small text on a
                               cream or white background is legible. The bright
                               orange only reaches 3.1:1 against white and
                               2.8:1 inside a tinted pill; readable body text
                               needs 4.5:1. Use this for any orange WORD.
       --orange-solid #d1440a  the same orange darkened until WHITE text sitting
                               on top of it is legible. Used for the primary
                               button fill.

     Rule of thumb: an orange ICON or shape can stay --orange (graphics only
     need 3:1, which it clears). An orange WORD cannot. */
  --orange: #fe5c24;
  --orange-ink: #bd3b07;
  --orange-solid: #d1440a;
  --orange-solid-hover: #b83c08;
  --orange-hover: #e84c16;
  --orange-tint: #fff0e9;
  --orange-paper: #fff8f4;
  --orange-ring: rgba(254, 92, 36, .13);
  --green: #327a68;
  --green-deep: #23574a;
  --green-tint: #eaf6f1;
  /* Used only as small icon accents so orange and green remain dominant. */
  --gold: #a86512;
  --gold-tint: #fff6dc;
  --blue: #47718a;
  --blue-tint: #eef6fa;
  --on-dark: #fffdfb;
  --on-dark-muted: #dcebe6;
  --on-dark-line: rgba(255, 253, 251, .2);

  /* ---- Shape ---- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-card: 20px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* ---- Rhythm ---- */
  --container: 1120px;
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --section-y: clamp(4rem, 7vw, 7.5rem);
  --nav-h: 72px;

  /* ---- Depth (soft, never hard drop shadows) ---- */
  --shadow-sm: 0 1px 2px rgba(23, 21, 18, .04);
  --shadow-card: 0 2px 4px rgba(23, 21, 18, .03), 0 12px 28px -18px rgba(23, 21, 18, .18);
  --shadow-lift: 0 4px 8px rgba(23, 21, 18, .04), 0 22px 44px -22px rgba(23, 21, 18, .28);
  --shadow-orange: 0 8px 20px -10px rgba(254, 92, 36, .55);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: 0;
  margin: 0;
  color: var(--ink);
}

p { margin: 0; }
img, svg { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--orange-tint); color: var(--ink); }

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: var(--fs-sm);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

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

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: 780px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 4vw, 4rem); }

/* Section heading block. Same on every page. */
.section-head {
  max-width: 660px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2rem, 3.5vw, 3.25rem);
}
.section-head h2 { font-size: var(--fs-h2); }
.section-head p {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: var(--fs-body);
}

/* Plain lettered eyebrow. No pill behind it: typography, not another box. */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin-bottom: 1.1rem;
}

/* Quiet part of a two-tone heading. Large text only, and never on the
   clause that carries the point: the quiet tone recedes, the ink leads. */
.t-dim { color: #857a68; }

.lead {
  font-size: var(--fs-lead);
  color: var(--muted);
  line-height: var(--lh-body);
  max-width: 56ch;
}


.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding-inline: 24px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--orange);
  color: var(--card);
  box-shadow: var(--shadow-orange);
}
.btn-primary:hover { background: var(--orange-hover); box-shadow: 0 10px 24px -10px rgba(254, 92, 36, .65); }

.btn-ghost {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { border-color: #d9d2c8; box-shadow: var(--shadow-card); }

.btn-quiet {
  background: none;
  color: var(--ink);
  padding-inline: 14px;
}
.btn-quiet:hover { color: var(--orange-ink); }

.btn-sm { height: 44px; padding-inline: 18px; font-size: var(--fs-meta); }
.btn-block { width: 100%; }

.btn .ico { width: 18px; height: 18px; flex: none; }

/* Directional icons respond to intent. Other button icons stay still, which
   keeps the interface calm and avoids turning every control into decoration. */
.btn .ico--arrow-right,
.ct-link .ico--arrow-right,
.card-link .ico--arrow-right {
  transition: transform .22s var(--ease);
}
.btn:hover .ico--arrow-right,
.ct-link:hover .ico--arrow-right,
.card-link:hover .ico--arrow-right { transform: translateX(3px); }
[dir="rtl"] .btn:hover .ico--arrow-right,
[dir="rtl"] .ct-link:hover .ico--arrow-right,
[dir="rtl"] .card-link:hover .ico--arrow-right { transform: translateX(-3px); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 253, 251, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 20px -12px rgba(23, 21, 18, .35);
}

.nav {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  margin-inline-end: auto;
}
/* The logo PNG already contains the wordmark. Never redraw it in markup. */
.nav-logo img { height: 30px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-link {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--muted);
  /* Tap target, not decoration: 10px either side clears 44px total. */
  padding-block: 10px;
  transition: color .18s var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s var(--ease);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(.55); }
.nav-link.is-active { color: var(--orange-ink); }
.nav-link.is-active::after { transform: scaleX(1); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 3px;
}
.lang-switch button {
  position: relative;
  border: 0;
  background: none;
  border-radius: var(--r-pill);
  padding: 7px 13px;
  min-width: 44px;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--muted);
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
/* The pill has to stay compact in the header, so the tap area is extended
   past the visible button instead of growing it. 44px tall either way. */
.lang-switch button::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
.lang-switch button.is-active {
  background: var(--card);
  color: var(--orange-ink);
  box-shadow: var(--shadow-sm);
}

.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  cursor: pointer;
}
.nav-burger .ico { width: 20px; height: 20px; }

.mobile-menu {
  display: none;
  border-top: 1px solid var(--line-soft);
  background: var(--bg);
  padding: 1rem var(--gutter) 1.5rem;
}
.mobile-menu.is-open { display: block; }
/* :not(.btn) matters — a bare `.mobile-menu a` beats `.btn` on specificity
   and would turn the two buttons into left-aligned blocks. */
.mobile-menu a:not(.btn) {
  display: block;
  padding: 13px 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  border-bottom: 1px solid var(--line-soft);
}
.mobile-menu a.is-active { color: var(--orange-ink); }
.mobile-menu .btn-row { margin-top: 1.25rem; }
.mobile-menu .btn { flex: 1; }

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

/* The hero sits on the page background. The whole page is one colour;
   structure comes from type and space, not from banded backgrounds. */
.hero {
  padding-block: clamp(4rem, 8vw, 6.5rem) clamp(4rem, 7vw, 6rem);
  position: relative;
  overflow: hidden;
}
.hero h1 {
  font-size: clamp(2.3rem, 1.35rem + 2.9vw, 3.7rem);
  line-height: 1.08;
  max-width: 16ch;
  text-wrap: balance;
}
.hero .lead { margin-top: 1.3rem; }
.hero .btn-row { margin-top: 2rem; }

/* Hero entrance: each block rises into place once, on load. Runs in CSS so a
   script failure can never leave the page blank. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
[data-rise] {
  animation: rise-in .8s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity;
}
[data-rise="2"] { animation-delay: .08s; }
[data-rise="3"] { animation-delay: .16s; }
[data-rise="4"] { animation-delay: .24s; }
[data-rise="5"] { animation-delay: .34s; }

/* Small reassurance row under a hero. */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
  padding: 0;
  list-style: none;
}
.trust-row li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
/* Green means verified everywhere on the site; orange is for action. */
.trust-row .ico { width: 18px; height: 18px; color: var(--green); flex: none; }

/* Faint decorative arc behind hero product shots. */
.hero-glow {
  position: absolute;
  inset-inline-end: -8%;
  top: -22%;
  width: 52rem;
  height: 52rem;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(254, 92, 36, .13), rgba(254, 92, 36, .04) 38%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.hero > .container { position: relative; z-index: 1; }

/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card--hover:hover {
  transform: translateY(-3px);
  border-color: #ded7cd;
  box-shadow: var(--shadow-lift);
}
.card h3 { font-size: var(--fs-h3); }
.card p {
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* Bare icons. No tinted tile behind them anywhere on the site. */
.card-icon {
  display: block;
  color: var(--orange);
  margin-bottom: 1rem;
}
.card-icon .ico { width: 26px; height: 26px; stroke-width: 1.75; }
.card-icon--green { color: var(--green-deep); }

/* Bulleted benefit list inside a card. */
.tick-list {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.tick-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.tick-list .ico {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 3px;
  color: var(--green);
}
.tick-list--cross .ico { color: #c4705c; }

/* Two open columns setting one thing against another.

   SHARED, not home-only. It used to live inside the home page's section of
   this file, which meant rebuilding the home page silently stripped the
   styling off the security page's "It does / It does not" block. It lives
   here now. Check web/security.html before touching it. */
.contrast-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(2rem, 3.5vw, 3rem);
}

.contrast-col {
  position: relative;
  padding-top: 1.6rem;
}
.contrast-col::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 54px;
  height: 3px;
  border-radius: 3px;
  background: #d9d2c8;
}
.contrast-col--good::before { background: var(--green); }

.contrast-tag {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.contrast-col--good .contrast-tag { color: var(--green-deep); }

.contrast-col p {
  margin-top: .9rem;
  color: var(--muted);
  font-size: clamp(1.02rem, 1rem + .2vw, 1.15rem);
  line-height: 1.7;
  max-width: 46ch;
}
.contrast-col--good p { color: var(--ink); }

@media (max-width: 900px) {
  .contrast-duo { grid-template-columns: minmax(0, 1fr); }
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--orange-ink);
}
.card-link .ico { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.card-link:hover .ico { transform: translateX(3px); }
[dir="rtl"] .card-link .ico { transform: scaleX(-1); }
[dir="rtl"] .card-link:hover .ico { transform: scaleX(-1) translateX(3px); }

/* ==========================================================================
   PRODUCT MOCKUPS — these mirror the real Tracely interface.
   Sidebar is white with orange active state, exactly like the app.
   ========================================================================== */

.app-frame {
  --af-side: 152px;
  display: grid;
  grid-template-columns: var(--af-side) minmax(0, 1fr);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
  /* visible, not hidden: floating callout cards deliberately hang off the
     edge. The sidebar rounds its own corners instead. */
  overflow: visible;
  font-size: var(--fs-meta);
  position: relative;
}
.app-frame--compact { --af-side: 0px; grid-template-columns: minmax(0, 1fr); }
.app-frame--compact .af-side { display: none; }

.af-side {
  background: var(--card);
  border-inline-end: 1px solid var(--line);
  border-start-start-radius: var(--r-md);
  border-end-start-radius: var(--r-md);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.af-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px 12px;
}
.af-brand img { height: 18px; width: auto; }
.af-brand b {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 12px;
}
.af-side-label {
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* 9px text needs the full 4.5:1; the old #9c968d measured 2.77:1. */
  color: var(--muted);
  padding: 8px 6px 5px;
}
.af-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-xs);
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--fw-medium);
}
.af-nav .ico { width: 13px; height: 13px; flex: none; }
/* The darker orange, not --orange: 11px text on the tint needs 4.5:1. */
.af-nav.is-active { background: var(--orange-tint); color: var(--orange-ink); }

.af-main { padding: 14px 16px 18px; min-width: 0; }
.af-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 12px;
}
.af-head h4 { font-size: 14px; font-weight: var(--fw-semibold); }
.af-head > h4,
.af-head > div:first-child { margin-inline-end: auto; }
.af-meta { color: var(--muted); font-size: 10px; margin-top: 2px; }

.ico-tiny { width: 11px; height: 11px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: 10px;
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.pill--green { background: var(--green-tint); color: var(--green-deep); }
.pill--orange { background: var(--orange-tint); color: var(--orange-ink); }
.pill--grey { background: var(--soft); color: var(--muted); }
.pill--solid { background: var(--orange-solid); color: #fff; }

.af-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line-soft);
  background: var(--card);
  margin-bottom: 6px;
}
.af-step-num {
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  background: var(--soft);
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: var(--fw-medium);
  flex: none;
}
.af-step.is-done .af-step-num { background: var(--green-tint); color: var(--green-deep); }
.af-step.is-current { border-color: #ffd6c4; background: var(--orange-paper); }
.af-step.is-current .af-step-num { background: var(--orange); color: #fff; }
.af-step-text { min-width: 0; }
.af-step-text b { font-size: 11px; font-weight: var(--fw-medium); display: block; }
.af-step-text span { font-size: 10px; color: var(--muted); }
.af-step .ico { width: 14px; height: 14px; color: #8f887e; flex: none; margin-inline-start: auto; }

/* A branching decision, drawn the way the builder draws it. */
.af-decision {
  border: 1px dashed #ded7cd;
  border-radius: var(--r-xs);
  padding: 10px;
  margin-bottom: 6px;
  background: var(--paper);
}
.af-decision > span {
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.af-decision b { display: block; font-size: 11px; font-weight: var(--fw-medium); margin: 3px 0 8px; }
.af-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.af-branch {
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--card);
  padding: 6px 8px;
}
.af-branch i {
  font-style: normal;
  font-size: 10px;
  font-weight: var(--fw-medium);
  display: flex;
  align-items: center;
  gap: 5px;
}
.af-branch i::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.af-branch--no i::before { background: var(--orange); }
.af-branch span { font-size: 9px; color: var(--muted); }

/* Floating callout that overlaps the frame. */
.af-float {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lift);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 220px;
}
.af-float .ico { width: 18px; height: 18px; color: var(--green); flex: none; }
.af-float b { font-size: 11px; font-weight: var(--fw-medium); display: block; }
.af-float span { font-size: 10px; color: var(--muted); }
.af-float--br { inset-block-end: 14px; inset-inline-end: -18px; }
.af-float--tr { inset-block-start: 46px; inset-inline-end: -24px; }

/* Progress bar used in task mockups. */
.af-bar {
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--soft);
  overflow: hidden;
  width: 74px;
  flex: none;
}
.af-bar i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--green);
  width: 0;
  transition: width 1.1s var(--ease);
}
.is-revealed .af-bar i { width: var(--fill, 40%); }

/* Browser window mockup used for the recording demo. */
.browser-frame {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  position: relative;
}
.bf-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}
.bf-dots { display: flex; gap: 5px; }
.bf-dots i { width: 9px; height: 9px; border-radius: 50%; background: #ded7cd; }
.bf-url {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  padding: 3px 12px;
  font-size: 10px;
  color: var(--muted);
  text-align: center;
}
.bf-body { padding: 18px; display: grid; gap: 10px; }
.bf-line { height: 9px; border-radius: var(--r-pill); background: var(--soft); }
.bf-line--w70 { width: 70%; }
.bf-line--w45 { width: 45%; }
.bf-btn {
  width: 104px;
  height: 30px;
  border-radius: var(--r-xs);
  background: var(--orange-tint);
  border: 1px solid #ffd6c4;
  position: relative;
}

/* A cursor that clicks, with a ripple. Used to show capture happening. */
.demo-cursor {
  position: absolute;
  width: 20px;
  height: 20px;
  z-index: 3;
  pointer-events: none;
  color: var(--ink);
  filter: drop-shadow(0 2px 4px rgba(23, 21, 18, .3));
}
.ripple {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--orange);
  transform: translate(-50%, -50%) scale(.4);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.ripple.is-firing { animation: ripple-out 1s var(--ease); }
@keyframes ripple-out {
  0% { transform: translate(-50%, -50%) scale(.4); opacity: .9; }
  100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; }
}

/* Hero demonstration: the browser being recorded, with the guide it produces
   overlapping it. Together they are the whole product story in one picture. */
.hero-demo { position: relative; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.hero-demo .browser-frame { margin-inline-end: clamp(0px, 4vw, 3rem); }
.hero-demo-guide {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: min(68%, 268px);
  z-index: 2;
}
.hero-demo-guide .af-main { padding: 12px 13px 14px; }
.hero-demo-guide .af-head { padding-bottom: 9px; margin-bottom: 9px; }
/* Steps sit faint until the demo captures them, so the card never looks empty. */
.hero-demo-guide .af-step { transition: opacity .4s var(--ease), transform .4s var(--ease); }
@media (max-width: 700px) {
  .hero-demo { padding-bottom: 0; }
  /* On a phone the skeleton browser costs a full screen of scroll and says
     nothing on its own. Only the captured guide card is shown. */
  .hero-demo .browser-frame,
  .hero-demo .demo-cursor,
  .hero-demo .ripple { display: none; }
  .hero-demo-guide { position: static; width: 100%; animation: none; }
}

/* Extension recorder chip. */
.recorder-chip {
  position: absolute;
  inset-block-start: 42px;
  inset-inline-end: 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-lift);
  padding: 9px;
  width: 122px;
}
.recorder-chip--corner {
  inset-block-start: auto;
  inset-block-end: 12px;
  inset-inline-end: 12px;
}
.recorder-chip .rc-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: var(--fw-medium);
  margin-bottom: 6px;
}
.recorder-chip .rc-head::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  animation: rec-blink 1.6s infinite;
}
@keyframes rec-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.recorder-chip .rc-time {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  margin-bottom: 6px;
}
.recorder-chip .rc-stop {
  height: 22px;
  border-radius: var(--r-xs);
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  display: grid;
  place-items: center;
}

/* Gentle drift for the floating guide card in the hero demonstration. */
@keyframes card-drift {
  from { transform: translateY(0); }
  to { transform: translateY(-7px); }
}
.hero-demo-guide { animation: card-drift 5.2s 1.2s ease-in-out infinite alternate; }

/* ==========================================================================
   SOLUTIONS PAGE

   Built to a design Momtaz supplied as an image: hero with the product shot,
   a row of four reasons split by hairlines, one bordered table of four
   departments, and a soft closing bar. No dark panel on this page.
   ========================================================================== */

/* The headline is set to a narrow measure so it breaks into the four short
   lines the design draws, instead of running wide beside the product shot. */
.sol-hero-copy h1 { max-width: 16ch; }

.sol-h2 {
  text-align: center;
  font-size: clamp(1.45rem, 1.15rem + 1.2vw, 1.95rem);
}
.sol-sub {
  margin-top: .7rem;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* Gentle float on the product shot. Slow enough to read as depth, not motion. */
.sol-hero-shot { animation: shot-drift 7s 1s ease-in-out infinite alternate; }
@keyframes shot-drift {
  from { transform: translateY(0); }
  to { transform: translateY(-8px); }
}

/* ---- Why teams choose Tracely ---- */

/* Four open columns. No tile behind the icon and no rules between them: the
   icon sits above its text so each column gets its full width, which is what
   lets the type be big enough to read. */
.why-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.why-item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.why-tile { display: block; }
.why-tile .ico { width: 30px; height: 30px; stroke-width: 1.6; }
.why-tile--orange { color: var(--orange); }
.why-tile--green { color: var(--green-deep); }

.why-item h3 { font-size: var(--fs-h4); }
.why-item p {
  margin-top: .5rem;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* ---- Built for every team: four open blocks, two to a row ---- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.25rem) clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.team-block { min-width: 0; }

.team-dept {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Bare icon. The tinted tile and the ruled table around all this made the
   section read as a spreadsheet. */
.team-tile { display: block; color: var(--orange); }
.team-tile .ico { width: 30px; height: 30px; stroke-width: 1.6; }
.team-block:nth-child(even) .team-tile { color: var(--green-deep); }

.team-dept h3 {
  font-size: 1.15rem;
  max-width: none;
}

.team-block > p {
  margin-top: .9rem;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.75;
  max-width: 46ch;
}

.team-block .tick-list { margin-top: 1.1rem; gap: 12px; }
.team-block .tick-list li { font-size: var(--fs-sm); color: var(--ink); }
.team-block .tick-list .ico { color: var(--green); }

/* ---- Closing bar ---- */

.sol-cta {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.5rem, 3.2vw, 2.25rem);
  border-radius: var(--r-card);
  background: var(--orange-paper);
  border: 1px solid #f6e7dc;
}
.sol-cta > .ico {
  flex: none;
  width: 30px;
  height: 30px;
  stroke-width: 1.6;
  color: var(--orange);
}
.sol-cta-text { flex: 1 1 auto; min-width: 0; }
.sol-cta h2 { font-size: 1.2rem; }
.sol-cta p {
  margin-top: .35rem;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.sol-cta .btn { flex: none; }

@media (max-width: 900px) {
  .sol-hero-copy h1 { max-width: 100%; }
  .why-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  /* Two department blocks side by side get cramped below this. */
  .team-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .why-row { grid-template-columns: minmax(0, 1fr); }
  .sol-cta { flex-wrap: wrap; }
  .sol-cta .btn { width: 100%; }
}

/* ==========================================================================
   PRICING

   Built to a design Momtaz supplied as an image. Centred hero with two
   actions and a trust line, three equal-height plan cards whose dividers and
   buttons all sit on the same lines, then a boxed FAQ. No closing panel:
   the page ends on the questions, as drawn.
   ========================================================================== */

.pr-hero {
  padding-block: clamp(2.75rem, 5vw, 4.25rem) clamp(1.5rem, 2.5vw, 2rem);
}
.pr-hero-text {
  max-width: 760px;
  text-align: center;
}
.pr-hero-text h1 {
  font-size: clamp(2.15rem, 1.3rem + 2.7vw, 3.35rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  max-width: 16ch;
  margin-inline: auto;
  text-wrap: balance;
}
.pr-hero-text .lead {
  margin: 1.15rem auto 0;
  max-width: 52ch;
}
.pr-actions {
  justify-content: center;
  margin-top: 2rem;
}
.pr-hero-text .note-line { margin-top: 1.5rem; }

/* Secondary action on this page carries a warm border rather than the plain
   hairline, matching the supplied design. */
.btn-ghost--warm { border-color: #f4d8c6; }
.btn-ghost--warm:hover { border-color: #eebfa3; }

/* ---- Plan cards ---- */

/* Cards stretch to one height so all three calls to action share a baseline. */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.75rem);
  align-items: stretch;
}
.plan {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.plan:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.plan--featured {
  border: 1.5px solid var(--orange);
  box-shadow: var(--shadow-card);
}

.plan-flag {
  position: absolute;
  top: -13px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--orange);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
[dir="rtl"] .plan-flag { transform: translateX(50%); }

/* Icon and plan name share a line. */
.plan-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: .35rem;
}
.plan-head .ico {
  width: 30px;
  height: 30px;
  flex: none;
  stroke-width: 1.6;
  color: var(--green-deep);
}
.plan--featured .plan-head .ico { color: var(--orange); }
.plan-head h2 {
  font-size: 1.35rem;
  line-height: 1.2;
}

.plan-sub {
  margin-top: .5rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--orange-ink);
}
.plan-desc {
  margin-top: 1rem;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* The divider above the feature list. Every card carries the same top margin
   so the three rules line up across the row. */
.plan-includes {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
}
.plan-includes > span {
  display: block;
  margin-bottom: .9rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
}
.plan-includes .tick-list { gap: 12px; }
.plan-includes .tick-list li { align-items: center; }
.plan-includes .tick-list .ico {
  width: 18px;
  height: 18px;
  margin-top: 0;
  color: var(--green-deep);
}
.plan--featured .plan-includes .tick-list .ico { color: var(--orange); }
.plan-includes .tick-list span { color: var(--ink); }

/* Pinned to the card foot: every plan's button sits on the same line.
   Do not add a later `margin-top` for the button anywhere below — it beats
   `auto` on equal specificity and the three buttons stop lining up. */
.plan .btn { margin-top: auto; }
/* Clear space above the button even when a card's list runs long. */
.plan-includes { margin-bottom: 2rem; }

.plans-note {
  margin-top: 1.6rem;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.note-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 2rem;
  font-size: var(--fs-sm);
  color: var(--muted);
  text-align: center;
}
.note-line .ico { width: 18px; height: 18px; color: var(--orange); flex: none; }

/* ---- FAQ ---- */

.pr-faq-wrap { max-width: 820px; }
.pr-faq-title {
  text-align: center;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 1.9rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

@media (max-width: 980px) {
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; }
  .plan--featured { margin-top: 1rem; }
}

@media (max-width: 600px) {
  .pr-actions .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   ACCORDION (FAQ)
   ========================================================================== */

/* Open rows divided by hairlines, not a stack of boxes. */
.faq { display: grid; gap: 0; border-block: 1px solid var(--line-soft); }

/* Boxed variant: the same rows held inside one bordered card. Used on the
   pricing page, where the supplied design draws the questions as a panel. */
.faq--boxed {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  overflow: hidden;
}
.faq--boxed /* The question is a heading wrapping a button; the h3 must not add its own
   type scale or spacing. */
.faq-h { margin: 0; font: inherit; }
.faq--boxed .faq-a p { padding-inline: clamp(1.1rem, 2.4vw, 1.6rem); }
.faq-item {
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.faq-item:last-child { border-bottom: 0; }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 21px 2px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: start;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  transition: color .18s var(--ease);
}
/* Keep boxed rows away from both card edges. This must come after the generic
   padding above so its horizontal spacing cannot be reset to 2px. */
.faq--boxed .faq-q {
  padding-inline: clamp(1.25rem, 3vw, 2rem);
}
.faq-q:hover { color: var(--orange-ink); }
.faq-q span { flex: 1; }
.faq-q .ico {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--muted);
  transition: transform .25s var(--ease), color .25s var(--ease);
}
.faq-item.is-open .faq-q .ico { transform: rotate(180deg); color: var(--orange); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
/* Collapsing to 0fr hides the answer visually but leaves it readable by screen
   readers and keeps the link inside it in the tab order — so the button says
   aria-expanded="false" while the answer is still announced, and a keyboard
   user lands on an invisible link. visibility:hidden fixes both and keeps the
   open/close animation, because it is delayed until the transition finishes. */
.faq-a > div { overflow: hidden; visibility: hidden; transition: visibility 0s .3s; }
.faq-item.is-open .faq-a > div { visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .faq-a > div { transition-delay: 0s; } }
.faq-a p {
  padding: 0 2px 21px;
  color: var(--muted);
  font-size: var(--fs-sm);
  max-width: 62ch;
}

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

.site-footer {
  /* A slightly deeper warm tone than the page, never a cool grey. */
  background: #f7f2ec;
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.footer-brand .nav-logo { margin: 0 0 0.9rem; }
.footer-brand p { color: var(--muted); font-size: var(--fs-sm); }
.footer-col h4 {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.footer-col a {
  display: block;
  font-size: var(--fs-sm);
  color: var(--muted);
  /* 10px either side of a 15px line puts every footer link over the 44px
     minimum a finger needs. Do not trim this back to tighten the footer. */
  padding-block: 10px;
  transition: color .18s var(--ease);
}
.footer-col a:hover { color: var(--orange-ink); }
.footer-base {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-meta);
  color: var(--muted);
}

/* ==========================================================================
   PROSE — legal and long-form pages
   ========================================================================== */

.prose { max-width: 72ch; }
.prose h2 {
  font-size: var(--fs-h3);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--muted); font-size: var(--fs-sm); }
.prose p + p { margin-top: 0.9rem; }
.prose ul { margin: 0.9rem 0 0; padding-inline-start: 1.25rem; display: grid; gap: 8px; }
.prose a { color: var(--orange-ink); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { font-weight: var(--fw-semibold); color: var(--ink); }
.prose-updated {
  font-size: var(--fs-meta);
  color: var(--muted);
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line-soft);
  line-height: 1.8;
}

/* A legal page is a title followed immediately by a document — there is no lead
   paragraph or button row to fill the hero. With the standing hero padding
   (96px below the title) plus the section's own 58px above the text, that left
   a ~154px void between "Privacy Policy" and the first line, which read as a
   broken page rather than as breathing room. These two rules close it from both
   sides; the space above the title is untouched. */
.hero--legal { padding-block-end: clamp(1.25rem, 2.5vw, 2rem); }
.hero--legal + .section { padding-block-start: clamp(1.25rem, 2.5vw, 2rem); }

/* Long legal documents: a two-column contents list, and anchor targets that
   land below the sticky header instead of underneath it. */
.legal-toc {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  columns: 2;
  column-gap: 2rem;
}
.legal-toc li { break-inside: avoid; }
.legal-toc a {
  display: block;
  padding-block: 5px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.legal-toc a:hover { color: var(--orange-ink); }
/* Anything an in-page link can land on has to clear the sticky header, or the
   heading it jumped to sits underneath it. The contact form (#send) and the
   department blocks on Solutions are the live cases. */
.prose h2[id],
.ct-panel[id],
.team-block[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
@media (max-width: 600px) {
  .legal-toc { columns: 1; }
}

/* ==========================================================================
   CONTACT PAGE

   Built to a design Momtaz supplied as an image. Keep it matching that image:
   centred hero with a two-tone headline and a dashed path motif behind it,
   two entry cards with tinted icon tiles, one panel holding the form and a
   reassurance strip, and a help strip underneath.

   The page is narrower than the rest of the site on purpose. The cards sit on
   a slightly wider measure than the form panel, exactly as drawn.
   ========================================================================== */

.ct-hero {
  position: relative;
  padding-block: clamp(2.75rem, 5vw, 4.25rem) clamp(1.75rem, 3vw, 2.5rem);
  overflow: hidden;
}

/* The dashed routes sweeping behind the heading. Decorative only. */
.ct-paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  fill: none;
  stroke: #e8e1d7;
  stroke-width: 1.5;
  stroke-dasharray: 7 9;
  stroke-linecap: round;
  /* Faint on purpose: they run behind the words and must never compete
     with them. Anything stronger reads as a line through the headline. */
  opacity: .55;
}

.ct-hero-text {
  position: relative;
  z-index: 1;
  max-width: 720px;
  text-align: center;
}
.ct-hero-text h1 {
  font-size: clamp(2rem, 1.25rem + 2.4vw, 2.9rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  /* Wide enough for "Let's talk about your" to hold the first line, so the
     headline breaks into the two lines the design calls for. */
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}
/* The clause carrying the invitation is the one in brand orange. */
.ct-accent { color: var(--orange); }

.ct-hero-text .lead {
  margin: 1.1rem auto 0;
  max-width: 46ch;
}

/* Paper plane tucked against the end of the headline. */
.ct-plane {
  position: absolute;
  inset-inline-end: 2%;
  top: 46%;
  width: 30px;
  height: 30px;
  color: var(--orange);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(12deg);
}
[dir="rtl"] .ct-plane { transform: rotate(12deg) scaleX(-1); }

/* ---- Measures. Cards sit wider than the panel below them. ---- */
.ct-wrap { max-width: 940px; }
.ct-inner {
  max-width: 872px;
  /* The help card is the final block on this page. Give it the same breathing
     room before the footer that every section-based page already has. */
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* ---- The two entry cards ---- */

.ct-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 6vw, 4.5rem);
  padding-block: clamp(.5rem, 1vw, 1rem);
}

.ct-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 1.25rem;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: clamp(1rem, 2vw, 1.5rem) 0;
  box-shadow: none;
}
.ct-card + .ct-card {
  border-inline-start: 1px solid var(--line);
  padding-inline-start: clamp(2rem, 6vw, 4.5rem);
}
.ct-card h2 { font-size: 1.2rem; }
.ct-card p {
  margin-top: .55rem;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

/* Large line icons keep the two choices distinct without adding another
   card-inside-card layer. */
.ct-tile {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ct-tile .ico { width: 34px; height: 34px; stroke-width: 1.75; margin: auto; }
.ct-tile--orange { color: var(--orange); }
.ct-tile--green { color: var(--green-deep); }

/* Orange text link with an arrow that steps forward on hover. */
.ct-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--orange-ink);
}
.ct-link .ico { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.ct-link:hover .ico { transform: translateX(3px); }
[dir="rtl"] .ct-link .ico { transform: scaleX(-1); }
[dir="rtl"] .ct-link:hover .ico { transform: scaleX(-1) translateX(3px); }

.ct-mail {
  display: inline-block;
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--orange-ink);
  word-break: break-word;
}
.ct-mail:hover { color: var(--orange-solid-hover); }

/* ---- The form panel ---- */

.ct-panel {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.ct-panel h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--green-deep);
}
.ct-sub {
  margin-top: .45rem;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.contact-form {
  display: grid;
  gap: 1.15rem;
  margin-top: 1.6rem;
}
.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}
.field { display: grid; gap: 8px; }
.field label {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
}

/* Honeypot: parked off-screen, never display:none — bots skip hidden fields. */
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.form-status.is-ok { color: var(--green-deep); }
.form-status.is-error { color: #b3452a; }
.form-status a { color: var(--orange-ink); font-weight: var(--fw-medium); }

.field-error {
  display: block;
  min-height: 0;
  margin-top: 6px;
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: #b3452a;
}
.field-error:empty { display: none; }

.form-pre-note {
  margin: 0 0 1.25rem;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--orange-paper);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--muted);
}
.form-pre-note a { color: var(--orange-ink); font-weight: var(--fw-medium); }

/* Required marker sits beside the label, in the brand accent. */
.ct-panel .field label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  color: var(--ink);
}
.ct-panel .field label b {
  color: var(--orange-ink);
  font-weight: var(--fw-medium);
  line-height: 1;
}

/* Input with an icon parked inside its leading edge. */
.ct-input {
  position: relative;
  display: block;
}
.ct-input .ico {
  position: absolute;
  inset-inline-start: 17px;
  top: 50%;
  width: 21px;
  height: 21px;
  color: var(--green-deep);
  transform: translateY(-50%);
  pointer-events: none;
  transition: color .18s var(--ease);
}
.ct-input--area .ico {
  top: 18px;
  transform: none;
}
.ct-input--orange .ico { color: var(--orange); }
.ct-input--green .ico { color: var(--green-deep); }

.ct-input input,
.ct-input textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  padding: 15px 16px;
  padding-inline-start: 46px;
  font-size: var(--fs-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.ct-input textarea { resize: vertical; min-height: 132px; display: block; }
.ct-input input:focus,
.ct-input textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-ring);
}
.ct-input--orange:focus-within .ico { color: var(--orange-hover); }
.ct-input--green:focus-within .ico { color: var(--green); }
.ct-input input.is-invalid,
.ct-input textarea.is-invalid { border-color: #c4705c; }

.ct-panel .btn-row { margin-top: .35rem; }
.ct-panel .btn .ico { width: 17px; height: 17px; }

/* Reassurance strip closing the panel. */
.ct-safe {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 2rem;
  padding: 1rem 0;
  background: transparent;
  border: none;
}
.ct-safe-icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--green-deep);
}
.ct-safe-icon .ico { width: 26px; height: 26px; margin: auto; }
.ct-safe b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--green-deep);
}
.ct-safe > div > span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-sm);
}

@media (max-width: 820px) {
  .ct-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .ct-card + .ct-card {
    border-inline-start: none;
    border-top: 1px solid var(--line);
    padding-inline-start: 0;
  }
  .ct-plane { display: none; }
}

@media (max-width: 600px) {
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .contact-form .btn-row { flex-direction: column; align-items: stretch; }
  .ct-card { grid-template-columns: auto minmax(0, 1fr); gap: 1rem; }
  .ct-card .ct-tile { width: 38px; height: 38px; }
  .ct-card .ct-tile .ico { width: 30px; height: 30px; }
}
/* ==========================================================================
   SCROLL REVEAL — subtle, and switched off for reduced motion.
   ========================================================================== */

/* Content is visible before and after the enhancement runs. The animation is
   applied only when a section is revealed, so a missed observer callback or
   a background browser tab can never leave real content blank. */
.js-anim .reveal {
  opacity: 1;
  transform: none;
}
.js-anim .reveal.is-revealed {
  animation: reveal-in .6s var(--ease) both;
}
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.reveal[data-delay="1"] { animation-delay: .08s; }
.reveal[data-delay="2"] { animation-delay: .16s; }
.reveal[data-delay="3"] { animation-delay: .24s; }
.reveal[data-delay="4"] { animation-delay: .32s; }

/* ==========================================================================
   ARABIC / RTL
   ========================================================================== */

body.is-arabic {
  font-family: var(--font-arabic);
  --fs-body: 1.0625rem;
}
body.is-arabic h1,
body.is-arabic h2,
body.is-arabic h3,
body.is-arabic h4,
body.is-arabic .btn,
body.is-arabic .eyebrow,
body.is-arabic .plan-price,
body.is-arabic .faq-q,
body.is-arabic .nav-logo span {
  font-family: var(--font-arabic);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
}
body.is-arabic .lead,
body.is-arabic p { line-height: 1.85; }

[dir="rtl"] .hero-glow { transform: scaleX(-1); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  /* Both header buttons move into the burger menu. Keeping them here
     overflows the bar on a phone and pushes the menu button off screen. */
  .nav-actions > .btn { display: none; }
  .nav-burger { display: flex; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audience-intro { max-width: 680px; }
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin-inline: auto; }
  .plan--featured { margin-top: 1rem; }
}

@media (max-width: 700px) {
  :root { --nav-h: 64px; }
  .grid-3, .grid-4, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .solution-item {
    grid-template-columns: minmax(0, 1fr);
  }
  .solution-item > .card-icon,
  .solution-item > h3,
  .solution-item > p,
  .solution-item > .tick-list { grid-column: 1; }
  .app-frame { --af-side: 0px; grid-template-columns: minmax(0, 1fr); }
  .app-frame .af-side { display: none; }
  .af-float { display: none; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn-row .btn { flex: 1 1 100%; }
  .hero .btn-row .btn { flex: 1 1 auto; }
}

@media (max-width: 460px) {
  .af-branches { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .af-bar i { width: var(--fill, 40%); }
}

@media print {
  .site-header, .site-footer, .cta-linear { display: none; }
}

/* ==========================================================================
   HOME PAGE

   Built to a design Momtaz supplied as an image. Section order is fixed:
   hero, why join the pilot, how it works, documentation comparison, teams,
   what the pilot includes, closing panel.

   Everything here is prefixed `hp-` so it cannot collide with the shared
   patterns above. The page uses the same tokens as every other page; no new
   colours, radii or type sizes are invented below.
   ========================================================================== */

.hp-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 4.5vw, 3.75rem) clamp(2rem, 3.5vw, 3rem);
}
.hp-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: clamp(2rem, 3.5vw, 3rem);
  align-items: center;
}

/* Eyebrow and the pilot pill share one line. */
.hp-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.hp-eyebrow .eyebrow { margin-bottom: 0; }

.hp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--orange-tint);
  color: var(--orange-ink);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.hp-pill .ico { width: 13px; height: 13px; }

.hp-hero-copy h1 {
  /* Sized so the headline settles into three lines inside its column. The
     column width governs the wrap, not the max-width below, so this scale is
     what actually controls the line count. */
  font-size: clamp(1.85rem, 1.1rem + 1.95vw, 2.5rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  /* Wide enough for the headline to settle into the three lines the design
     draws. Narrower and it breaks into four. */
  max-width: 21ch;
  text-wrap: balance;
}
.hp-hero-copy .lead { margin-top: 1.15rem; max-width: 46ch; }
.hp-hero-copy .btn-row { margin-top: 1.9rem; }
.hp-hero-copy .btn .ico { width: 17px; height: 17px; }

/* Three short reassurances under the buttons. */
.hp-trust {
  display: flex;
  flex-wrap: wrap;
  /* Measured to fit on one line inside the hero column at desktop widths:
     the three items come to ~480px in a ~514px column. It still wraps
     cleanly if a translation runs longer. */
  gap: .6rem .75rem;
  margin: 1.9rem 0 0;
  padding: 0;
  list-style: none;
}
.hp-trust li {
  display: flex;
  align-items: center;
  gap: 7px;
  /* Small enough that all three sit on one line beside the product shot. */
  font-size: var(--fs-meta);
  color: var(--muted);
  white-space: nowrap;
}
/* Green means verified everywhere on this site; orange is for action. */
.hp-trust .ico { width: 15px; height: 15px; color: var(--green); flex: none; }

/* ---- Hero product shot ---- */

.hp-shot { position: relative; }
.hp-shot .browser-frame { overflow: visible; border-radius: var(--r-md); }
.hp-shot .bf-bar { border-start-start-radius: var(--r-md); border-start-end-radius: var(--r-md); }

/* The app sits flush inside the browser chrome rather than as a second card. */
.app-frame--flush {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-end-start-radius: var(--r-md);
  border-end-end-radius: var(--r-md);
}
.app-frame--flush .af-side {
  border-start-start-radius: 0;
  border-end-start-radius: var(--r-md);
}

/* Recording panel, pinned over the top-right corner of the shot. */
.recorder-chip--shot {
  inset-block-start: 52px;
  inset-inline-end: -22px;
  z-index: 3;
}

/* Assignment callout, hanging off the bottom-right. */
.hp-shot-float {
  inset-block-end: -18px;
  inset-inline-end: -20px;
  z-index: 3;
}

@media (prefers-reduced-motion: no-preference) {
  /* The main frame settles once. Only its small status elements continue to
     move, so the preview feels active without making the page restless. */
  .hp-shot { animation: shot-settle 1s .15s var(--ease) both; }
  @keyframes shot-settle {
    from { opacity: 0; transform: translateY(18px) scale(.985); }
    to { opacity: 1; transform: none; }
  }

  .hp-shot-float { animation: preview-callout-drift 5.8s 1.2s ease-in-out infinite alternate; }
  .recorder-chip--shot { animation: preview-recorder-drift 7.2s 1.8s ease-in-out infinite alternate; }
  [data-product-preview] .af-step.is-current .af-step-num {
    animation: preview-step-pulse 4.8s 1.6s ease-out infinite;
  }

  @keyframes preview-callout-drift {
    from { transform: translateY(0); }
    to { transform: translateY(-5px); }
  }
  @keyframes preview-recorder-drift {
    from { transform: translateY(0); }
    to { transform: translateY(3px); }
  }
  @keyframes preview-step-pulse {
    0%, 68%, 100% { box-shadow: 0 0 0 0 transparent; }
    78% { box-shadow: 0 0 0 5px var(--orange-ring); }
    90% { box-shadow: 0 0 0 8px transparent; }
  }
}

/* ---- Shared section furniture for this page ---- */

.hp-h2 {
  text-align: center;
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.85rem);
  text-wrap: balance;
}
.hp-sub {
  margin-top: .6rem;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* Each home section has its own visual rhythm. The extra space is deliberate:
   these are separate ideas, not one continuous grid of cards. */
.hp-section.section--tight {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(5rem, 8vw, 7rem);
}
.hp-section > .container { position: relative; z-index: 1; }

/* Benefits float over two very soft pools of colour. */
.hp-section--why {
  background:
    radial-gradient(circle at 8% 28%, var(--orange-tint), transparent 25%),
    radial-gradient(circle at 92% 72%, var(--blue-tint), transparent 23%);
}
.hp-section--why .hp-card:nth-child(1),
.hp-section--why .hp-card:nth-child(3) { transform: translateY(1rem); }
.hp-section--why .hp-card:nth-child(1):hover,
.hp-section--why .hp-card:nth-child(3):hover { transform: translateY(calc(1rem - 4px)); }

/* The product flow: three rounded cards threaded on one animated line.
   The cards are opaque, so the line only shows in the gaps between them —
   three beads on a single string. */
.hp-section--flow {
  background: var(--bg);
  color: var(--ink);
}
.hp-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
}
.hp-flow::before {
  content: "";
  position: absolute;
  z-index: 0;
  /* Card padding plus half the tile height: the line runs through the
     centre of the icon tiles. */
  inset-block-start: calc(clamp(1.25rem, 2.2vw, 1.6rem) + 27px);
  inset-inline: 2%;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--gold), var(--green-deep), var(--orange));
  background-size: 220% 100%;
  opacity: .55;
}
.hp-flow-card {
  position: relative;
  z-index: 1;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(1.25rem, 2.2vw, 1.6rem);
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.hp-flow-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.hp-flow-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}
.hp-flow-top .hp-tile { width: 54px; height: 54px; border-radius: 15px; }
.hp-flow-top .hp-tile .ico { width: 25px; height: 25px; }
.hp-flow-num {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-meta);
  letter-spacing: .08em;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: var(--orange-tint);
  color: var(--orange-ink);
}
.hp-flow-card:nth-child(2) .hp-flow-num { background: var(--green-tint); color: var(--green-deep); }
.hp-flow-card:nth-child(3) .hp-flow-num { background: var(--gold-tint); color: var(--gold); }
.hp-flow-card h3 { font-size: var(--fs-h4); }
.hp-flow-card p {
  margin-top: .45rem;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

/* Teams sit on a quiet paper band so the open columns read as one group. */
.hp-section--teams { background: var(--paper); }
.hp-section--teams .hp-teams { align-items: start; }
.hp-section--teams .hp-teams-head {
  border-inline-start: 4px solid var(--orange);
  padding-inline-start: 1.15rem;
  /* Pull the rule out into the gutter so the TEXT, not the rule, lines up with
     everything else in the container. */
  margin-inline-start: calc(-1.15rem - 4px);
}
.hp-section--teams .hp-card--stack .hp-tile {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px dashed currentColor;
  border-radius: 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .hp-flow::before { animation: hp-trace 5s linear infinite; }
  @keyframes hp-trace { to { background-position: -220% 0; } }

  .hp-section--why .hp-tile { animation: hp-icon-float 3.8s ease-in-out infinite alternate; }
  .hp-section--why .hp-card:nth-child(2) .hp-tile { animation-delay: -.9s; }
  .hp-section--why .hp-card:nth-child(3) .hp-tile { animation-delay: -1.8s; }
  @keyframes hp-icon-float { to { transform: translateY(-5px) rotate(2deg); } }
}

/* ---- Card rows ---- */

.hp-cards {
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.4rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.hp-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hp-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.hp-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: clamp(1.1rem, 2vw, 1.4rem) 0 0;
  transition: transform .22s var(--ease);
}
.hp-card:hover {
  transform: translateY(-2px);
}
/* The team columns are not cards. No box, no tinted tile behind the icon:
   structure comes from the grid and the space around it. Written explicitly
   against `.hp-card` so the shared card rules above cannot win. */
.hp-card--stack { flex-direction: column; gap: 1.1rem; }
.hp-card--stack p { font-size: var(--fs-meta); line-height: 1.7; }

.hp-card.hp-card--stack {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.hp-card.hp-card--stack:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}
/* Bare icon, sitting straight on the page at its brand colour. */
.hp-card--stack .hp-tile {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  display: block;
}
.hp-card--stack .hp-tile .ico { width: 28px; height: 28px; stroke-width: 1.6; }

.hp-card h3 { font-size: var(--fs-h4); }
.hp-card p {
  margin-top: .45rem;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

/* Tinted tile behind an icon. Orange and green alternate so neither floods
   the page; the brief keeps green to a supporting role. */
.hp-tile {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  transition: transform .22s var(--ease);
}
.hp-tile .ico { width: 23px; height: 23px; stroke-width: 1.75; }
.hp-tile--orange { background: var(--orange-tint); color: var(--orange); }
.hp-tile--green { background: var(--green-tint); color: var(--green-deep); }
.hp-tile--gold { background: var(--gold-tint); color: var(--gold); }
.hp-tile--blue { background: var(--blue-tint); color: var(--blue); }
.hp-card:hover .hp-tile { transform: translateY(-2px); }

/* ---- Documentation vs Tracely ---- */

.hp-vs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  align-items: stretch;
}
.hp-vs-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border-radius: 0;
  padding: 0 0 0 clamp(1.15rem, 2vw, 1.6rem);
  border: 0;
  border-inline-start: 3px solid;
}
.hp-vs-card--bad { background: transparent; border-color: var(--orange); }
.hp-vs-card--good { background: transparent; border-color: var(--green-deep); }
.hp-vs-card h3 { font-size: var(--fs-h4); }
.hp-vs-card .hp-tile { transition: transform .25s var(--ease); }
.hp-vs-card:hover .hp-tile { transform: rotate(-4deg) scale(1.06); }

.hp-list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}
.hp-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.hp-list .ico {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 3px;
  color: var(--green);
}
.hp-list--cross .ico { color: #d2643f; }

/* ---- Teams: heading on the left, four cards on the right ---- */

/* The heading column needs a REAL minimum, not just a fraction: at .52fr of a
   1120px container it resolved to ~277px, which is narrower than the heading's
   own two nowrap lines — so the words ran straight over the first card. The
   min below is sized to the largest the type can get; the breakpoint that
   stacks this band is set to match it. */
.hp-teams {
  display: grid;
  grid-template-columns: minmax(400px, .5fr) minmax(0, 1.5fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}
/* The heading anchors the whole band, so it carries real weight and sits hard
   against the container's left edge rather than floating in a wide column. */
.hp-teams-head {
  text-align: start;
  font-size: clamp(1.55rem, 1rem + 1.7vw, 2.15rem);
  line-height: 1.15;
  max-width: none;
  text-wrap: balance;
  margin-inline-start: 0;
}
.hp-teams-head span { display: block; white-space: nowrap; }
.hp-teams .hp-cards { margin-top: 0; }

/* Pilot inclusions use large quiet numbers instead of cards or dividers.
   They sit right under the "why join" cards as one continuous pitch, so the
   two sections share a tightened seam; the security promise and the closing
   panel pair up the same way at the foot of the page. */
.hp-section--get .hp-cards { counter-reset: pilot-benefit; }
.hp-section.hp-section--why { padding-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.hp-section.hp-section--get { padding-top: clamp(2.25rem, 4vw, 3.5rem); }
.hp-section.hp-section--sec { padding-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.hp-section.hp-section--close { padding-top: clamp(2.25rem, 4vw, 3.5rem); }
.hp-section--get .hp-card {
  counter-increment: pilot-benefit;
  min-height: 9rem;
  padding-top: 2.25rem;
}
.hp-section--get .hp-card::before {
  content: "0" counter(pilot-benefit);
  position: absolute;
  inset-block-start: -.35rem;
  inset-inline-end: 0;
  z-index: -1;
  color: var(--orange-tint);
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 8vw, 6.75rem);
  font-weight: var(--fw-semibold);
  line-height: 1;
}
.hp-section--get .hp-card:nth-child(even)::before { color: var(--green-tint); }
.hp-section--get .hp-card:nth-child(3)::before { color: var(--gold-tint); }

/* ---- Extension security: what the recorder does and does not do ----
   Reuses the comparison cards so the promise reads in the same voice as the
   documentation section above it, over soft pools echoing the top of page. */
.hp-section--sec {
  background:
    radial-gradient(circle at 92% 24%, var(--green-tint), transparent 24%),
    radial-gradient(circle at 6% 78%, var(--orange-tint), transparent 22%);
}
.hp-sec-more {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: var(--fs-sm);
}
.hp-sec-more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--orange-ink);
  font-weight: var(--fw-medium);
}
.hp-sec-more a:hover { color: var(--orange-solid); }
.hp-sec-more .ico { width: 17px; height: 17px; }
[dir="rtl"] .hp-sec-more .ico { transform: scaleX(-1); }

/* ---- Closing panel ---- */

.hp-close {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
  /* No panel and no disc behind the icon. The one hairline between the two
     halves carries the structure. */
  padding-block: clamp(.5rem, 1.5vw, 1rem);
}
.hp-close-left {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}
.hp-close-icon {
  flex: none;
  color: var(--orange);
  display: block;
  padding-top: 2px;
}
.hp-close-icon .ico { width: 38px; height: 38px; stroke-width: 1.5; }

.hp-close h2 { font-size: 1.2rem; }
.hp-close p {
  margin-top: .6rem;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
/* A hairline between the two halves, drawn only where there is room. */
.hp-close-right { border-inline-start: 1px solid var(--line); padding-inline-start: clamp(1.75rem, 4vw, 3.25rem); }
.hp-close-right .btn { margin-top: 1.4rem; }

.hp-close-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 1.1rem;
  color: var(--muted);
  font-size: var(--fs-meta);
  line-height: 1.6;
}
.hp-close-note .ico { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--green-deep); }

/* ==========================================================================
   HOME: RESPONSIVE
   ========================================================================== */

/* Stack the teams band before the heading column hits its 400px minimum,
   otherwise the grid overflows and the heading sits on top of the first card. */
@media (max-width: 1100px) {
  .hp-teams { grid-template-columns: minmax(0, 1fr); }
  .hp-teams-head { max-width: 100%; }
}

@media (max-width: 1000px) {
  .hp-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .hp-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hp-hero-copy h1 { max-width: 100%; }
  .hp-cards--3 { grid-template-columns: minmax(0, 1fr); }
  .hp-vs { grid-template-columns: minmax(0, 1fr); }

  /* Stacked, the order of the cards says what the connecting line said. */
  .hp-flow { grid-template-columns: minmax(0, 1fr); }
  .hp-flow::before { display: none; }

  .hp-close { grid-template-columns: minmax(0, 1fr); }
  .hp-close-right { border-inline-start: 0; padding-inline-start: 0; }
  .hp-section--why .hp-card:nth-child(1),
  .hp-section--why .hp-card:nth-child(3),
  .hp-section--why .hp-card:nth-child(1):hover,
  .hp-section--why .hp-card:nth-child(3):hover { transform: none; }
}

@media (max-width: 700px) {
  /* Stacked with no card padding to separate them, the team columns need the
     gap to do that work instead. */
  .hp-cards--4 { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .hp-shot .recorder-chip--shot { inset-inline-end: 8px; }
  .hp-shot-float { display: none; }
  .hp-close-left { flex-direction: column; gap: .9rem; }
  .hp-close-icon .ico { width: 32px; height: 32px; }
  .hp-hero-copy .btn-row .btn { flex: 1 1 100%; }
  .hp-close-right .btn { width: 100%; }
  .hp-teams-head span { white-space: normal; }
}

/* ==========================================================================
   MOTION LAYER — the polish pass.

   Everything here is decoration on top of a page that already works. Three
   rules keep it from becoming noise:

   1. Nothing moves more than a few pixels, and nothing moves for longer than
      about half a second. Motion points at what changed; it is not the point.
   2. Nothing here may hide content. Entrances animate a class the reveal
      script adds; if that script never runs, the content is simply there.
   3. The reduced-motion block earlier in this file flattens every animation
      and transition with !important, so all of this switches off for anyone
      who has asked their system for less movement.
   ========================================================================== */

/* ---- Entrances -----------------------------------------------------------
   A softer curve than a plain ease: it overshoots very slightly and settles,
   which reads as "placed" rather than "slid in". */
.js-anim .reveal.is-revealed {
  animation: reveal-in .62s cubic-bezier(0.22, 1, 0.28, 1) both;
}

/* Cards and list items in a row cascade instead of arriving as a block. This
   is done by position rather than by hand-written data-delay attributes, so
   every grid on every page gets it and none can be forgotten. An explicit
   data-delay still wins — the rules above are more specific. */
.js-anim .hp-cards > .reveal:nth-child(2),
.js-anim .grid-3 > .reveal:nth-child(2),
.js-anim .grid-4 > .reveal:nth-child(2),
.js-anim .hp-flow > .reveal:nth-child(2) { animation-delay: .07s; }
.js-anim .hp-cards > .reveal:nth-child(3),
.js-anim .grid-3 > .reveal:nth-child(3),
.js-anim .grid-4 > .reveal:nth-child(3),
.js-anim .hp-flow > .reveal:nth-child(3) { animation-delay: .14s; }
.js-anim .hp-cards > .reveal:nth-child(4),
.js-anim .grid-4 > .reveal:nth-child(4) { animation-delay: .21s; }
.js-anim .hp-cards > .reveal:nth-child(n + 5),
.js-anim .grid-4 > .reveal:nth-child(n + 5) { animation-delay: .28s; }

/* ---- Icon tiles ----------------------------------------------------------
   The tile is the one element in a card that can afford personality, so it
   picks up a little scale when the card is hovered. The card's own lift is
   defined with the card; this only adds the tile's part. */
.card .card-icon,
.hp-card .hp-tile,
.solution-item .card-icon {
  transition: transform .28s cubic-bezier(0.22, 1, 0.28, 1);
}
.card:hover .card-icon,
.hp-card:hover .hp-tile,
.solution-item:hover .card-icon { transform: translateY(-2px) scale(1.05); }

/* ---- Links ---------------------------------------------------------------
   Body links draw their underline rather than simply having one. Uses a
   background image so the text itself never shifts. */
.prose a,
.footer-col a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size .28s cubic-bezier(0.22, 1, 0.28, 1), color .18s var(--ease);
}
.prose a { background-size: 100% 1px; }
.prose a:hover { color: var(--orange); }
.footer-col a:hover,
.footer-col a:focus-visible { background-size: 100% 1px; }

/* ---- The process timeline ------------------------------------------------
   Each tile settles as its card is revealed, so the row reads left to right
   the way the process does. (The old per-step connector-draw animation went
   with the per-step connectors; the flow cards share one line behind them.) */
.js-anim .hp-flow > .reveal.is-revealed .hp-tile {
  animation: tile-settle .5s .12s cubic-bezier(0.22, 1, 0.28, 1) both;
}
@keyframes tile-settle {
  from { opacity: 0; transform: scale(.82) rotate(-6deg); }
  to { opacity: 1; transform: none; }
}

/* ---- Ambient --------------------------------------------------------------
   The hero's colour wash breathes very slowly. Long enough that it is never
   caught moving; short enough that the page is not completely static. */
@media (prefers-reduced-motion: no-preference) {
  .hero-glow { animation: glow-drift 18s ease-in-out infinite alternate; }
  @keyframes glow-drift {
    from { transform: translate3d(0, 0, 0) scale(1); opacity: .9; }
    to { transform: translate3d(2%, -1.5%, 0) scale(1.06); opacity: 1; }
  }
  [dir="rtl"] .hero-glow { animation-name: glow-drift-rtl; }
  @keyframes glow-drift-rtl {
    from { transform: scaleX(-1) translate3d(0, 0, 0) scale(1); opacity: .9; }
    to { transform: scaleX(-1) translate3d(2%, -1.5%, 0) scale(1.06); opacity: 1; }
  }
}

/* ---- Pressed states -------------------------------------------------------
   A control that can be pressed should feel pressed. */
.card-link:active .ico--arrow-right { transform: translateX(2px) scale(.94); }
.faq-q:active { transform: scale(.995); }