:root {
  --wf-forest-950:#071b12;
  --wf-forest-900:#0b2b1e;
  --wf-forest-700:#155c40;
  --wf-gold-500:#d5aa47;
  --wf-paper:#f8f6ef;
  --wf-surface:#ffffff;
  --wf-line:rgba(13,55,38,.13);
  --wf-text:#10261c;
  --wf-muted:#607168;
  --wf-shadow-sm:0 8px 24px rgba(11,43,30,.07);
  --wf-shadow-lg:0 24px 70px rgba(11,43,30,.12);
  --wf-radius:20px;
}

html { scroll-behavior:smooth; background:var(--wf-paper); }
body { color:var(--wf-text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body,button,input,textarea,select { font-family:'Tajawal',system-ui,-apple-system,sans-serif; }
::selection { background:rgba(213,170,71,.28); color:var(--wf-forest-950); }

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible {
  outline:3px solid rgba(213,170,71,.72) !important;
  outline-offset:3px !important;
}
:where(button,a,[role="button"]) { -webkit-tap-highlight-color:transparent; }
:where(button):not(:disabled) { cursor:pointer; }
:where(button):disabled { cursor:not-allowed; opacity:.62; }

/* A consistent, calmer surface language across the public site and workspaces. */
:where(.bg-white,.profile-card,.match-form,.match-result,.analysis-upload-card) {
  border-color:var(--wf-line) !important;
  box-shadow:var(--wf-shadow-sm);
}
:where(input,textarea,select) {
  accent-color:var(--wf-forest-700);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
:where(input,textarea,select):focus {
  border-color:rgba(21,92,64,.62) !important;
  box-shadow:0 0 0 4px rgba(21,92,64,.09) !important;
}

[data-screen-label] { min-height:100dvh; }
[data-screen-label] > main { width:100%; }
[data-screen-label] :where(h1,h2,h3) { text-wrap:balance; }
[data-screen-label] :where(p) { text-wrap:pretty; }
[data-screen-label] :where(button,a) { transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease; }
[data-screen-label] :where(button,a):not(:disabled):active { transform:translateY(1px) scale(.99); }

/* Readability pass: stronger secondary text in light mode, and true dark chips in dark mode. */
.thL {
  --muted:#496054 !important;
  --ink2:#293f34 !important;
  --apple-muted:#496054 !important;
}
.thL .w-apple-nav nav :where(a,button),
.thL .w-apple-nav > div:last-child > button:not(.w-cta) { color:#365345 !important; }
.thL .w-apple-section-lead,
.thL .w-apple-step p,
.thL .w-apple-feature p,
.thL .w-apple-story p,
.thL .w-apple-jobs > div:first-child > span { color:#435c4f !important; }
.thL .w-apple-jobs > div:nth-of-type(2) > span { color:#173c2a !important; }
.thL .w-apple-jobs > div:nth-of-type(2) > span > span:last-child { color:#50685b !important; }
.thL .wf-trial-strip__intro small,
.thL .wf-trial-item span { color:#4d6256 !important; }
.thL [data-screen-label] [style*="color:var(--muted)"],
.thL [data-screen-label] [style*="color: var(--muted)"],
.thL .w-apple-landing [style*="color:#8A968D"],
.thL .w-apple-landing [style*="color: #8A968D"] { color:#4d6457 !important; }

.thD .w-apple-jobs > div:nth-of-type(2) > span {
  background:rgba(22,52,35,.9) !important;
  border-color:rgba(233,244,235,.16) !important;
  color:#eef5ef !important;
}
.thD .w-apple-jobs > div:nth-of-type(2) > span > span:last-child { color:#bfd0c4 !important; }

.wf-trial-strip {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) repeat(2,minmax(190px,.65fr));
  gap:12px;
  align-items:center;
  width:min(1180px,calc(100% - 40px));
  margin:-30px auto 0;
  padding:14px;
  border:1px solid rgba(213,170,71,.32);
  border-radius:24px;
  background:rgba(255,255,255,.94);
  box-shadow:var(--wf-shadow-lg);
  backdrop-filter:blur(16px);
  z-index:4;
}
.wf-trial-strip__intro { padding:8px 12px; }
.wf-trial-strip__eyebrow { display:block;color:#8a6410;font-size:12px;font-weight:800;margin-bottom:4px; }
.wf-trial-strip__intro strong { display:block;font-family:'Cairo','Tajawal',sans-serif;font-size:18px;color:var(--wf-forest-950); }
.wf-trial-strip__intro small { display:block;color:var(--wf-muted);font-size:13px;line-height:1.65;margin-top:3px; }
.wf-trial-item { min-height:76px;display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--wf-line);border-radius:17px;background:#fbfcf9; }
.wf-trial-item__icon { width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto;border-radius:13px;background:var(--wf-forest-900);color:#f0d28a;font-size:18px; }
.wf-trial-item strong { display:block;font-size:14px;color:var(--wf-text); }
.wf-trial-item span { display:block;font-size:12px;color:var(--wf-muted);margin-top:2px; }

/* Standalone authentication, dashboard, legacy analysis and admin pages. */
body > .flex.min-h-screen { background:radial-gradient(circle at 84% 0%,rgba(213,170,71,.12),transparent 31rem),linear-gradient(145deg,#fbfaf5,#edf4f0); }
body > .flex.min-h-screen form,
body > main,
body > .container { isolation:isolate; }
.gradient-bg { background:radial-gradient(circle at 18% 10%,rgba(213,170,71,.18),transparent 25rem),linear-gradient(145deg,var(--wf-forest-950),#144b35) !important; }
.btn-hover:hover { transform:translateY(-1px) !important; box-shadow:0 12px 28px rgba(11,43,30,.22) !important; }

@media (max-width:900px) {
  .wf-trial-strip { grid-template-columns:1fr 1fr;margin-top:-18px; }
  .wf-trial-strip__intro { grid-column:1/-1; }
  [data-screen-label] > header:not(.cv-toolbar) { min-height:62px !important;height:auto !important; }
}

@media (max-width:620px) {
  :root { --wf-radius:16px; }
  .wf-trial-strip { width:calc(100% - 24px);grid-template-columns:1fr;padding:11px;border-radius:20px; }
  .wf-trial-strip__intro { grid-column:auto;padding:7px 8px; }
  .wf-trial-item { min-height:68px; }
  [data-screen-label] > main { padding-inline:14px !important; }
  :where(button,a[role="button"]) { min-height:44px; }
}

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

@keyframes wfHeroIn { from { opacity:0;transform:translateY(24px) } to { opacity:1;transform:none } }
@keyframes wfStageIn { from { opacity:0;transform:translate3d(-24px,18px,0) scale(.97) } to { opacity:1;transform:none } }
@keyframes wfAura { 0%,100% { transform:translate3d(0,0,0) scale(1) } 50% { transform:translate3d(-18px,14px,0) scale(1.06) } }
@keyframes wfFloat { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-7px) } }
@keyframes wfShimmer { from { transform:translateX(120%) rotate(18deg) } to { transform:translateX(-260%) rotate(18deg) } }

.w-apple-hero .w-animate { animation:wfHeroIn .8s cubic-bezier(.2,.72,.22,1) both; }
.w-apple-stage { animation:wfStageIn .9s .12s cubic-bezier(.2,.72,.22,1) both; }
.w-apple-hero > div[style*="radial-gradient"] { animation:wfAura 11s ease-in-out infinite !important; }
.w-apple-panel-member:nth-child(3n+1) { animation:wfFloat 5.5s ease-in-out infinite; }
.w-apple-panel-member:nth-child(3n+2) { animation:wfFloat 5.5s .7s ease-in-out infinite; }
.w-apple-panel-member:nth-child(3n+3) { animation:wfFloat 5.5s 1.4s ease-in-out infinite; }
.wf-trial-strip { overflow:hidden; }
.wf-trial-strip::after { content:"";position:absolute;inset:-80% auto -80% 0;width:90px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);transform:translateX(120%) rotate(18deg);animation:wfShimmer 5.8s 1.2s ease-in-out infinite;pointer-events:none; }
.wf-reveal { opacity:0;transform:translateY(26px) scale(.985);transition:opacity .65s cubic-bezier(.2,.72,.22,1) var(--wf-reveal-delay,0ms),transform .65s cubic-bezier(.2,.72,.22,1) var(--wf-reveal-delay,0ms); }
.wf-reveal.wf-revealed { opacity:1;transform:none; }

.wf-line-icon { width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round; }
.wf-trial-item__icon { transition:transform .22s ease,background .22s ease; }
.wf-trial-item:hover .wf-trial-item__icon { transform:translateY(-2px) rotate(-3deg);background:#155c40; }

/* ══════════════════════════════════════════════════════════════════════════
   Structure pass — scrolling, mobile navigation, hero order.
   ══════════════════════════════════════════════════════════════════════════ */

/* The document owns the scroll again. `html,body{height:100%}` together with
   `overflow-x:hidden` had promoted <body> to the scroll container, which froze
   window.scrollY at 0, kept `scroll-behavior:smooth` (declared on <html>) from
   ever applying to the in-page anchors, and stopped the sticky mobile action
   bar from pinning to the viewport. */
html { overflow-x: hidden; }
html, body { height: auto !important; min-height: 100%; }
body { overflow: visible !important; }

/* `overflow-x:hidden` coerces overflow-y from visible to auto, which had also
   turned .app-root into a scrollport — that is why the pinned mobile action bar
   never stuck to the viewport. `clip` clips without creating one. */
.app-root { overflow-x: clip !important; overflow-y: visible !important; }

/* Anchor targets clear the sticky header instead of hiding beneath it. */
html { scroll-padding-top: 84px; }

@media (max-width: 1024px) {
  /* Phones lost every header affordance except the theme switch: the section
     links, the language switch and — most importantly — sign-in were all
     display:none with nothing replacing them. The pinned bottom bar already
     carries the primary action, so the header can stop competing for the
     viewport and hand its space back to navigation. */
  .w-apple-nav {
    position: static !important;
    flex-wrap: wrap !important;
    row-gap: 0 !important;
    padding-bottom: 0 !important;
  }
  .w-apple-nav > div:last-child > .w-cta { display: none !important; }
  .w-apple-nav > div:last-child > button.w-redesign-hide {
    display: inline-flex !important;
    align-items: center;
    min-height: 40px;
  }
  .w-apple-nav > nav.w-redesign-hide {
    display: flex !important;
    order: 3;
    width: 100%;
    gap: 20px !important;
    margin: 0 calc(-1 * clamp(20px, 4vw, 54px));
    padding: 0 clamp(20px, 4vw, 54px) 11px;
    font-size: 14.5px !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .w-apple-nav > nav.w-redesign-hide::-webkit-scrollbar { display: none; }
  .w-apple-nav > nav.w-redesign-hide > * { flex: 0 0 auto; white-space: nowrap; }

  /* The mobile header height is pinned by a bundle rule at
     `[data-screen-label] > header:not(.cv-toolbar)`, so the second row needs a
     selector that outranks it. */
  .w-apple-landing header.w-apple-nav.w-apple-nav {
    height: auto !important;
    min-height: 64px !important;
    align-items: center;
  }

  /* The avatar panel was rendering above the headline, so a phone visitor met
     six portraits before learning what the product does. */
  .w-apple-hero .w-redesign-hero > .w-apple-stage { order: 2 !important; }

  /* Keep the last section clear of the pinned action bar. */
  .w-apple-footer { padding-bottom: 96px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Dark-mode surfaces that were never exercised.
   The dark palette had no effect before (it was scoped to selectors this app
   never sets), so these components were authored with hardcoded light fills
   while their text used the theme tokens. With the palette live, the text
   inverted and the fills did not — these give them their dark counterparts.
   ══════════════════════════════════════════════════════════════════════════ */

.thD .wf-trial-strip {
  background: rgba(16, 30, 23, .94);
  border-color: rgba(213, 170, 71, .30);
}
.thD .wf-trial-strip__eyebrow { color: #f0d28a; }
.thD .wf-trial-strip__intro strong { color: #eef7f1; }
.thD .wf-trial-strip__intro small { color: #a6b7ad; }
.thD .wf-trial-item {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(191, 221, 203, .16);
}
.thD .wf-trial-item strong { color: #eef7f1; }
.thD .wf-trial-item span { color: #a6b7ad; }
.thD .wf-trial-item__icon { background: rgba(240, 210, 138, .12); color: #f0d28a; }
.thD .wf-trial-item:hover .wf-trial-item__icon { background: rgba(240, 210, 138, .2); }
.thD .wf-trial-strip::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .10), transparent);
}