/* ==========================================================================
   TALNTD design system
   --------------------------------------------------------------------------
   One stylesheet for every page. The old site inlined its CSS into each
   file, which is how the homepage drifted into a single mega-page and why
   the legal pages look like a different product. Everything shared lives
   here now.

   Colours are taken from the Flutter app (lib/core/theme/app_theme.dart) so
   the site and the product read as one brand. The old site used #2ECC71,
   which was never the app's anchor green.

   Layout uses logical properties (inline-start / inline-end) rather than
   left / right throughout, so an Arabic mirror of this site is a matter of
   setting dir="rtl" rather than rewriting the CSS.
   ========================================================================== */

:root {
  /* Brand, matched to AppTheme */
  --green: #1DB954;          /* primaryGreen, the anchor */
  --green-hi: #2EE57F;       /* primaryHi, gradients and hovers */
  --green-dim: #14803a;
  --green-glow: rgba(29, 185, 84, 0.18);
  --gold: #E8B65A;           /* premium accent: trust, verification, ratings */

  /* Surfaces, darkest to lightest */
  --bg: #0B0E10;             /* darkBg */
  --bg-2: #0F1417;
  --surface: #141B1F;
  --surface-2: #1A2328;
  --elevated: #232A30;       /* darkElevated */

  --border: #1F2A2E;
  --border-2: #2C3A40;
  --border-glow: rgba(46, 229, 127, 0.28);

  --text: #EAF3EE;
  --text-2: #A8BCB2;
  --muted: #7D9188;
  --muted-2: #57685F;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --sidebar-w: 264px;
  --content-max: 1080px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 24px 60px rgba(0, 0, 0, 0.55);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
          Arial, "Noto Sans", "Noto Sans Arabic", sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

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

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

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

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

/* Inline links inside body copy.
   The reset above kills colour and underline, which is right for nav links,
   buttons and whole-card links, but it makes a link inside a sentence
   completely invisible: same colour as the text, no underline, no cue at all.
   Body copy therefore has to opt back in. Scoped by container rather than
   applied globally so it can never hit .nav-link, .btn, a.card or .footer a. */
main p a:not(.btn),
main li a:not(.btn),
.faq-body a:not(.btn),
.callout a:not(.btn),
.card p a:not(.btn),
.step p a:not(.btn) {
  color: var(--green-hi);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
main p a:not(.btn):hover,
main li a:not(.btn):hover,
.faq-body a:not(.btn):hover,
.callout a:not(.btn):hover { color: var(--green); }

/* Visible focus for keyboard users. The old site had none, so tabbing
   through it was invisible. */
:focus-visible {
  outline: 2px solid var(--green-hi);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link: first stop for a screen reader or keyboard user. */
.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 200;
  background: var(--green);
  color: #06231a;
  padding: 12px 20px;
  font-weight: 700;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { inset-inline-start: 0; }

/* ==========================================================================
   Layout: persistent sidebar + content
   ========================================================================== */

.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 16px;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  border-inline-end: 1px solid var(--border);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 8px 20px;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.14em;
}

.brand-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 9px;
  background: linear-gradient(140deg, var(--green-hi), var(--green));
  color: #05271a;
  display: grid;
  place-items: center;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 6px 18px var(--green-glow);
}

.nav-group { margin-bottom: 20px; }

.nav-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 0 10px 8px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 14.5px;
  font-weight: 500;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
  position: relative;
}

.nav-link:hover { background: var(--surface); color: var(--text); }

.nav-link[aria-current="page"] {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
}

/* Active marker on the leading edge, mirrors correctly under dir="rtl". */
.nav-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--green-hi), var(--green));
}

.nav-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  opacity: 0.85;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-foot { margin-top: auto; padding-top: 20px; }

.sidebar-cta {
  display: block;
  text-align: center;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--green), var(--green-dim));
  color: #05271a;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 6px 20px var(--green-glow);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.sidebar-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px var(--green-glow);
}

.sidebar-note {
  font-size: 11.5px;
  color: var(--muted-2);
  text-align: center;
  padding-top: 12px;
  line-height: 1.5;
}

/* ==========================================================================
   Mobile top bar + drawer
   ========================================================================== */

.topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 60;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(11, 14, 16, 0.82);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border-bottom: 1px solid var(--border);
}

.menu-btn {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--border-2);
  color: var(--text);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--ease);
}
body.nav-open .scrim { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   Content
   ========================================================================== */

.main { min-width: 0; }

.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 32px;
}

.section { padding: 84px 0; }
.section + .section { border-top: 1px solid var(--border); }
.section-tight { padding: 56px 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-hi);
  margin-bottom: 16px;
}

h1, h2, h3, h4 { line-height: 1.18; margin: 0 0 16px; letter-spacing: -0.02em; }
h1 { font-size: clamp(34px, 5.2vw, 56px); font-weight: 800; }
h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 750; }
h3 { font-size: 20px; font-weight: 700; }
h4 { font-size: 16.5px; font-weight: 700; margin-bottom: 8px; }

p { margin: 0 0 16px; color: var(--text-2); }
.lede { font-size: clamp(16.5px, 1.7vw, 19px); color: var(--text-2); max-width: 62ch; }
.small { font-size: 13.5px; color: var(--muted); }

.section-head { max-width: 64ch; margin-bottom: 44px; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  padding: 104px 0 88px;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  top: -240px;
  width: 760px;
  height: 560px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--green-glow), transparent 72%);
  pointer-events: none;
  filter: blur(12px);
}

.hero > * { position: relative; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  min-height: 48px;
  border-radius: var(--radius-sm);
  font-weight: 650;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.16s var(--ease), background 0.16s var(--ease),
              border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

.btn-primary {
  background: linear-gradient(135deg, var(--green-hi), var(--green));
  color: #05271a;
  box-shadow: 0 8px 24px var(--green-glow);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px var(--green-glow); }

.btn-secondary {
  background: var(--surface);
  border-color: var(--border-2);
  color: var(--text);
}
.btn-secondary:hover { background: var(--surface-2); border-color: var(--border-glow); }

.btn-ghost { color: var(--text-2); padding-inline: 8px; }
.btn-ghost:hover { color: var(--text); }

/* ==========================================================================
   Cards
   ========================================================================== */

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  position: relative;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-1);
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease),
              box-shadow 0.18s var(--ease);
}

a.card:hover,
.card-interactive:hover {
  border-color: var(--border-glow);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.card h3, .card h4 { color: var(--text); }
.card p:last-child { margin-bottom: 0; }

.card-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  background: rgba(29, 185, 84, 0.12);
  border: 1px solid rgba(46, 229, 127, 0.2);
  color: var(--green-hi);
}
.card-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.card-gold .card-icon {
  background: rgba(232, 182, 90, 0.12);
  border-color: rgba(232, 182, 90, 0.24);
  color: var(--gold);
}

/* Role cards on the home page get a heavier presence. */
.role-card { padding: 30px; }
.role-card .pill { margin-bottom: 14px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(29, 185, 84, 0.1);
  border: 1px solid rgba(46, 229, 127, 0.22);
  color: var(--green-hi);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pill-gold {
  background: rgba(232, 182, 90, 0.1);
  border-color: rgba(232, 182, 90, 0.24);
  color: var(--gold);
}
.pill-muted {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--muted);
}

/* ==========================================================================
   Steps
   ========================================================================== */

.steps { counter-reset: step; display: grid; gap: 14px; }

.step {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.step-num {
  counter-increment: step;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 17px;
  color: var(--green-hi);
  background: rgba(29, 185, 84, 0.1);
  border: 1px solid rgba(46, 229, 127, 0.2);
}
.step-num::before { content: counter(step); }
.step h4 { margin-bottom: 6px; }
.step p { margin-bottom: 0; font-size: 14.5px; }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { display: grid; gap: 10px; }

.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.18s var(--ease);
}
.faq details[open] { border-color: var(--border-2); }

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 19px 24px;
  font-weight: 620;
  font-size: 15.5px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-inline-end: 2px solid var(--muted);
  border-block-end: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }

.faq .faq-body { padding: 0 24px 20px; color: var(--text-2); font-size: 14.8px; }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Callout
   ========================================================================== */

.callout {
  display: flex;
  gap: 16px;
  padding: 22px 24px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--green);
}
.callout-gold { border-inline-start-color: var(--gold); }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band {
  position: relative;
  margin: 0;
  padding: 64px 0;
  background:
    radial-gradient(80% 140% at 50% 0%, rgba(29, 185, 84, 0.14), transparent 70%),
    var(--bg-2);
  border-top: 1px solid var(--border);
  text-align: center;
}
.cta-band .container { max-width: 720px; }
.cta-band .hero-actions { justify-content: center; }

/* ==========================================================================
   Prose, used by the legal and support pages
   ========================================================================== */

.prose { max-width: 74ch; }
.prose h2 {
  font-size: 23px;
  margin-top: 44px;
  padding-top: 4px;
  scroll-margin-top: 90px;
}
.prose h3 { font-size: 17px; margin-top: 28px; color: var(--text); }
.prose ul, .prose ol { padding-inline-start: 22px; margin: 0 0 16px; color: var(--text-2); }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--text); }
.prose a { color: var(--green-hi); text-decoration: underline; text-underline-offset: 3px; }

.toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 36px;
}
.toc h4 { margin-bottom: 12px; }
.toc ol { margin: 0; padding-inline-start: 20px; }
.toc a { color: var(--text-2); text-decoration: none; }
.toc a:hover { color: var(--green-hi); }

.doc-meta {
  font-size: 13.5px;
  color: var(--muted);
  padding-bottom: 20px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  border-top: 1px solid var(--border);
  padding: 52px 0 40px;
  background: var(--bg-2);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 36px;
  margin-bottom: 36px;
}
.footer h5 {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 14px;
  font-weight: 700;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 9px; }
.footer a { color: var(--text-2); font-size: 14.5px; }
.footer a:hover { color: var(--green-hi); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted-2);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1000px) {
  .layout { grid-template-columns: 1fr; }
  .topbar { display: flex; }

  .sidebar {
    position: fixed;
    z-index: 80;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(86vw, var(--sidebar-w));
    transform: translateX(-102%);
    transition: transform 0.26s var(--ease);
    box-shadow: var(--shadow-3);
  }
  body.nav-open .sidebar { transform: translateX(0); }

  .container { padding: 0 20px; }
  .section { padding: 60px 0; }
  .hero { padding: 56px 0 52px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* The sidebar slides from the inline-start edge, which is the right side in
   RTL, so the off-screen transform has to flip with it. */
[dir="rtl"] .sidebar { transform: translateX(102%); }
[dir="rtl"] body.nav-open .sidebar { transform: translateX(0); }

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .step { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 18px; }
  .step-num { width: 38px; height: 38px; font-size: 15px; border-radius: 11px; }
}

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

/* Print: drop the chrome so the legal pages print cleanly, which reviewers
   and lawyers actually do. */
@media print {
  .sidebar, .topbar, .footer, .cta-band, .skip-link { display: none !important; }
  .layout { display: block; }
  body { background: #fff; color: #111; }
  .prose a { color: #111; }
}