/* Oncera Plus — shared design tokens + components (redesign pass) */

:root{
  --ink:#111114; --body:#6A6F7A; --faint:#9AA0AB;
  --page:#F4F5F7; --card:#FFFFFF; --line:#E7E9EE;
  --indigo:#5B5FD6; --indigo-700:#4044B8; --indigo-300:#A7AAEE; --peri:#8E92E8; --tint:#EEF1FE;
  --teal:#3E9E9B; --sky:#4E86D8;
  --sh-sm:0 1px 2px rgba(17,17,20,.05);
  --sh-md:0 8px 24px rgba(17,17,20,.07);
  --sh-lg:0 22px 60px rgba(17,17,20,.11);
  --radius-card:22px;
  --radius-pill:999px;
}

body{
  background:var(--page);
  color:var(--ink);
  font-family:"Instrument Sans",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.public-white-page{background:#fff}

h1,h2,h3,h4{
  font-family:"Instrument Sans",system-ui,-apple-system,sans-serif;
  font-weight:600;
  letter-spacing:-.02em;
}

em, .accent{
  font-family:"Instrument Serif",Georgia,serif;
  font-style:italic;
  font-weight:400;
}

a{ transition:color .2s ease; }

/* Buttons */
.btn-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 26px;
  border-radius:var(--radius-pill);
  font-size:14.5px;
  font-weight:500;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
  white-space:nowrap;
}
.btn-pill-dark{ background:var(--ink); color:#fff; }
.btn-pill-dark:hover{ background:var(--indigo); color:#fff; transform:translateY(-2px); box-shadow:0 12px 28px rgba(91,95,214,.32); }
.btn-pill-light{ background:#fff; color:var(--ink); border:1px solid var(--line); }
.btn-pill-light:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); }
.btn-pill-indigo{ background:var(--indigo); color:#fff; }
.btn-pill-indigo:hover{ background:var(--indigo-700); transform:translateY(-2px); box-shadow:0 12px 28px rgba(91,95,214,.32); }
.btn-pill-ghost{ padding:10px 18px; color:var(--body); }
.btn-pill-ghost:hover{ background:var(--tint); color:var(--indigo-700); }
.btn-pill-ghost.active{ background:var(--tint); color:var(--indigo-700); }

/* Cards */
.card{
  background:var(--card);
  border-radius:var(--radius-card);
  box-shadow:var(--sh-sm);
  overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s cubic-bezier(.2,.7,.2,1);
}
.card-hover:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); }
.card-hover img{ transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.card-hover:hover img{ transform:scale(1.06); }

/* Predict page */
.predict-page,
.predict-page h1,
.predict-page h2,
.predict-page h3,
.predict-page h4,
.predict-page input,
.predict-page select,
.predict-page button{
  font-family:"Instrument Sans",system-ui,-apple-system,sans-serif;
}
.predict-page .help-icon{
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:block;
  background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAA6FJREFUeAHNmE9ME0EUxt+UGgohAWkTQAi0ESMHQe1BDpLIicSTyBEPasJVgZsngRsmHggmXiSRixwJnEy4WBIukvgHExKMmBYCggkoJtqWiIzvm+02LbTboV1gf8l2t7uzs9++mffm7RNkQTgsK1we6pVE7fzXn9gKR9AOSfooBU3zfipQIyLZm2YStiH9fOElGcKOHX7W+D7RUCahroMnVjZlrxD0gU5IHOARuodnhr/JvoPX0iy4siEHuPEgnSIsaLChRgyl/DeA5aSkEXIArKM/cE4oLUqgmnMYVkkV5ATYiVjkVcxJNQf5Z8Ax4gBrSTgpiYTHhsmByDiddbE5O8mpeKjPLSTdojzY+hFX+2hsT23Z8FV60vZHgUf2hpt/ryAQ6TD1eoXm5jdpaztO+VBfV0Zt16qpo71W9xa/iGxILXkTk19pJrRGTRfKqamxgnxewyKlJW61ZcO0NF5qdf03vf+0TW2t1dRz5yLp4NZptLS8o8R13mzgzU+FMDG5zH2tsyWr+GVzBw4XabD0ZUftrcThJUbHFmn42QLNvd3M2s7sA+110LIghslqkkPQ2KvPVFpqDDeO0T6ThXDdV1nMfe6SDloWhJfi4VkFzn9Xc/L58HV6OtCqRMzMrpEdaFkwGvvHDy3Kej3Y7E37D4GWocdbwhaMkW0Cc9HRXpc8fvzknZoScCg70BpiXeDpCCXdXedVKLEDWwXCMxEnUy1aKLYMsUl3V6Nl0M4HLQvCQba2dzXaWTuHSTS6p/0imgL1OoODYMtFNPaX+zxDOmg9GQLhmSoeWogNtni1shYEaQRrHbQsGGz2qT3WUCswB3M5CDIioLMOAy0LorO21iruPGJ4amN5MptRmU2K1WDpTLkispml5V9qXUe6hft00E63AOIc8sHVtT/JcxjWhz2X1LGZkmXD5y1W+eBRMqIjCUwFVhp9schrdJESODy6oII0rBNsMaZEaq6YT0ZdkECA1EoNJ/cQje9R9237VhATOEmE8gRJgkr/+ePh0YPLtovD9zEs+IYKqMPAaepry2xfQRKEXDw6s1QA8MZjEocSyLRADVB46Cc5EDZewBUICHwchMhhoGaYrM2w0vuq6ukUWAsKmjhUAqFU7tMQOQRoMautybUY9ThJpy8SGszaIDhUo0YZVrhOoRxn1AT72XLj6aczgJIc7wb54l06GULwg0xFdGF1lxLK5TlVATOKTHZZNYJNxeA4jSQiSUb+Aym2a+Yhrt6tAAAAAElFTkSuQmCC");
  background-position:center;
  background-repeat:no-repeat;
  background-size:40px 40px;
}
.predict-page .help-copy,
.predict-page .help-answer{
  color:var(--body);
  font-size:13px;
  line-height:1.55;
}
.predict-page .help-answer{margin-top:14px}
.predict-page .help-answer strong{color:var(--ink);font-weight:600}
.predict-page .required-marker{color:#DC2626;font-weight:700}
.predict-page .validation-banner{border:1px solid rgba(220,38,38,.2);border-radius:18px;background:#fff1f2;color:#b91c1c;padding:13px 15px;font-size:13.5px;font-weight:650}
.predict-page .consent-box{border:1px solid var(--line);border-radius:18px;padding:16px 18px;display:grid;gap:12px;background:#fbfcfe}
.predict-page .consent-box legend{float:left;width:100%;padding:0;margin:0;font-weight:600;color:var(--ink)}
.predict-page .consent-row{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.5;color:var(--ink);cursor:pointer}
.predict-page .consent-row input{margin-top:3px;width:16px;height:16px;flex-shrink:0;accent-color:var(--indigo-700)}
.predict-page .consent-box a{color:var(--indigo-700);font-weight:500}
.predict-page .consent-note{font-size:12px;line-height:1.55;color:var(--faint);margin:0}
.predict-page .proxy-fields{display:grid;gap:10px;margin-left:26px;padding-left:14px;border-left:2px solid var(--line)}
.predict-page .proxy-fields[hidden]{display:none}
.predict-page .field-error{color:#b91c1c;font-size:12.5px;margin:-4px 0 0}
.predict-page .predict-title{
  margin:0;
  font-family:"Instrument Sans",system-ui,sans-serif;
  font-size:clamp(32px,4vw,52px);
  font-style:normal;
  font-weight:650;
  letter-spacing:-.045em;
  line-height:1.05;
  color:#070b12;
}
.prediction-loading[hidden]{display:none}
.prediction-loading{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;background:rgba(246,247,249,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);animation:prediction-fade-in .22s ease both}
.prediction-loading-card{width:min(430px,100%);padding:46px 38px 40px;border:1px solid rgba(255,255,255,.8);border-radius:30px;background:rgba(255,255,255,.94);box-shadow:0 28px 80px rgba(30,35,58,.14);text-align:center}
.prediction-loading-mark{position:relative;width:54px;height:54px;margin:0 auto 22px;border:2px solid #e4e6f2;border-radius:50%}
.prediction-loading-mark::before{content:"";position:absolute;inset:-2px;border:2px solid transparent;border-top-color:var(--indigo);border-radius:50%;animation:prediction-spin .8s linear infinite}
.prediction-loading-mark span{position:absolute;inset:17px;border-radius:50%;background:var(--indigo);animation:prediction-pulse 1.2s ease-in-out infinite}
.prediction-loading-kicker{margin:0 0 8px;color:var(--indigo-700);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.prediction-loading-card h2{margin:0;font-size:28px;letter-spacing:-.035em}
.prediction-loading-card>p:not(.prediction-loading-kicker){max-width:310px;margin:12px auto 0;color:var(--body);font-size:14px;line-height:1.55}
.prediction-loading-line{height:4px;margin-top:28px;overflow:hidden;border-radius:99px;background:#eceef4}
.prediction-loading-line span{display:block;width:42%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--indigo),var(--peri));animation:prediction-line 1.25s ease-in-out infinite}
body.is-preparing-prediction{overflow:hidden}
@keyframes prediction-fade-in{from{opacity:0}to{opacity:1}}
@keyframes prediction-spin{to{transform:rotate(360deg)}}
@keyframes prediction-pulse{0%,100%{opacity:.55;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@keyframes prediction-line{0%{transform:translateX(-110%)}100%{transform:translateX(350%)}}
@media(prefers-reduced-motion:reduce){.prediction-loading,.prediction-loading-mark::before,.prediction-loading-mark span,.prediction-loading-line span{animation:none}.prediction-loading-line span{width:100%}}
.card-tint{ background:var(--tint); }

/* Pricing page */
.pricing-page{color:var(--ink)}
.pricing-heading{max-width:680px;margin:0 0 42px;text-align:left}
.pricing-eyebrow{margin-bottom:10px;color:var(--indigo-700);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.pricing-heading h1{margin:0;color:#070b12;font-size:clamp(36px,5vw,64px);font-weight:650;line-height:1.02;letter-spacing:-.055em}
.pricing-heading>p:last-child{max-width:520px;margin:14px 0 0;color:var(--body);font-size:15px;line-height:1.55}
.pricing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch}
.pricing-plan{display:flex;min-height:370px;flex-direction:column;border:1px solid rgba(17,17,20,.06);border-radius:28px;background:rgba(255,255,255,.92);padding:32px;box-shadow:0 18px 55px rgba(24,31,46,.075)}
.pricing-plan.is-featured{background:linear-gradient(150deg,var(--peri),var(--indigo));color:#fff;box-shadow:0 24px 70px rgba(91,95,214,.25)}
.pricing-plan-kicker{margin:0 0 10px;color:var(--faint);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.pricing-plan.is-featured .pricing-plan-kicker{color:rgba(255,255,255,.7)}
.pricing-plan h2{margin:0;color:inherit;font-size:24px;font-weight:650;letter-spacing:-.03em}
.pricing-amount{display:flex;align-items:flex-end;gap:7px;margin-top:24px}
.pricing-amount span{font-size:clamp(40px,5vw,58px);font-weight:650;line-height:.95;letter-spacing:-.055em}
.pricing-amount small{padding-bottom:6px;color:var(--faint);font-size:14px}
.pricing-plan.is-featured .pricing-amount small{color:rgba(255,255,255,.72)}
.pricing-allowance{margin:18px 0 0;color:var(--body);font-size:14px;line-height:1.5}
.pricing-plan.is-featured .pricing-allowance{color:rgba(255,255,255,.86)}
.pricing-features{display:grid;gap:15px;margin:30px 0 0;padding:0;list-style:none;color:var(--body);font-size:13.5px}
.pricing-plan.is-featured .pricing-features{color:rgba(255,255,255,.9)}
.pricing-features li{display:flex;align-items:center;gap:12px}
.pricing-features span{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;flex:0 0 24px;border-radius:50%;background:var(--tint);color:var(--indigo-700);font-size:12px;font-weight:700}
.pricing-plan.is-featured .pricing-features span{background:rgba(255,255,255,.2);color:#fff}
@media(max-width:800px){.pricing-grid{grid-template-columns:1fr}.pricing-plan{min-height:auto}}

/* Light sheen that sweeps across a card on hover */
.card-hover{ position:relative; overflow:hidden; }
.card-hover::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(91,95,214,.10) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .7s ease;
  pointer-events:none;
}
.card-hover:hover::before{ transform:translateX(120%); }

/* Icon badges: pop in once their card reveals, then react on hover */
.icon-badge{ transition:transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease; }
[data-reveal] .icon-badge{ opacity:0; transform:scale(.4) rotate(-12deg); }
[data-reveal].is-visible .icon-badge{
  animation:onc-icon-pop .55s cubic-bezier(.34,1.56,.64,1) forwards,
            onc-icon-breathe 4s ease-in-out infinite;
  animation-delay:calc(var(--reveal-delay,0ms) + 220ms), calc(var(--reveal-delay,0ms) + 900ms);
}
.card-hover:hover .icon-badge{ transform:scale(1.14) rotate(-8deg); box-shadow:0 12px 24px rgba(17,17,20,.22); }
@keyframes onc-icon-pop{
  0%{ opacity:0; transform:scale(.4) rotate(-12deg); }
  70%{ opacity:1; transform:scale(1.14) rotate(5deg); }
  100%{ opacity:1; transform:scale(1) rotate(0deg); }
}
@keyframes onc-icon-breathe{
  0%,100%{ box-shadow:0 4px 10px rgba(17,17,20,.08); }
  50%{ box-shadow:0 9px 20px rgba(17,17,20,.18); }
}
@media (prefers-reduced-motion: reduce){
  .card-hover::before{ display:none; }
  [data-reveal] .icon-badge, [data-reveal].is-visible .icon-badge{ opacity:1; transform:none; animation:none; }
}

/* Scroll-reveal: fade + rise as elements enter the viewport */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--reveal-delay,0ms);
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }

/* Directional reveal variants: cards converge in from either side */
[data-reveal-left]{ opacity:0; transform:translateX(-40px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:var(--reveal-delay,0ms); }
[data-reveal-left].is-visible{ opacity:1; transform:translateX(0); }
[data-reveal-right]{ opacity:0; transform:translateX(40px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:var(--reveal-delay,0ms); }
[data-reveal-right].is-visible{ opacity:1; transform:translateX(0); }
@media (prefers-reduced-motion: reduce){
  [data-reveal-left], [data-reveal-right]{ opacity:1; transform:none; transition:none; }
}
/* Auto-stagger reveal children of any grid, so a bare data-reveal attribute
   cascades nicely without hand-setting a delay on every card. */
.grid > [data-reveal]:nth-child(1){ --reveal-delay:0ms; }
.grid > [data-reveal]:nth-child(2){ --reveal-delay:80ms; }
.grid > [data-reveal]:nth-child(3){ --reveal-delay:160ms; }
.grid > [data-reveal]:nth-child(4){ --reveal-delay:240ms; }
.grid > [data-reveal]:nth-child(5){ --reveal-delay:320ms; }
.grid > [data-reveal]:nth-child(6){ --reveal-delay:400ms; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* Gentle floating drift, used on decorative hero graphics */
@keyframes onc-float{
  0%,100%{ transform:translateY(0) translateX(0); }
  50%{ transform:translateY(-14px) translateX(6px); }
}
@keyframes onc-float-slow{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(10px); }
}
.onc-floating{ animation:onc-float 7s ease-in-out infinite; }
.onc-floating-slow{ animation:onc-float-slow 9s ease-in-out infinite; }
.onc-floating-delay{ animation-delay:1.4s; }
@media (prefers-reduced-motion: reduce){
  .onc-floating, .onc-floating-slow{ animation:none; }
}

/* Mock gauge arc + growing bars, used on the illustrative "report" card */
[data-gauge]{ stroke-dasharray:0 258; transition:stroke-dasharray 1.1s cubic-bezier(.2,.7,.2,1); }
[data-gauge].is-visible{ stroke-dasharray:var(--gauge-target,168 258); }
[data-grow]{ transform:scaleX(.04); transform-origin:left; transition:transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:var(--grow-delay,0ms); display:block; }
[data-grow].is-visible{ transform:scaleX(1); }
@media (prefers-reduced-motion: reduce){
  [data-gauge]{ transition:none; stroke-dasharray:var(--gauge-target,168 258); }
  [data-grow]{ transition:none; transform:scaleX(1); }
}

/* Gradient CTA blocks */
.grad-card{ border-radius:var(--radius-card); padding:clamp(28px,3.4vw,42px); color:#fff; box-shadow:var(--sh-md); transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s cubic-bezier(.2,.7,.2,1); }
.grad-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); }
.grad-card-indigo{ background:linear-gradient(150deg,var(--peri),var(--indigo)); }

/* Slow-drifting glow blob, used inside otherwise-plain tint cards */
@keyframes onc-drift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(18px,-14px) scale(1.12); }
}
.onc-glow{
  position:absolute; border-radius:999px; pointer-events:none;
  background:radial-gradient(circle, rgba(91,95,214,.28), transparent 70%);
  filter:blur(6px);
  animation:onc-drift 10s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .onc-glow{ animation:none; } }

/* Sticky pill nav */
.pill-nav-wrap{
  position:sticky; top:0; z-index:60;
  padding:14px 20px 0;
  background:linear-gradient(var(--page) 62%, rgba(244,245,247,0));
  transition:background .28s ease, padding .28s ease;
}
.pill-nav{
  max-width:1200px; margin:0 auto;
  background:var(--card);
  border-radius:var(--radius-pill);
  box-shadow:var(--sh-md);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:11px 12px 11px 26px;
  flex-wrap:wrap;
  transition:max-width .32s cubic-bezier(.2,.7,.2,1), background .32s ease, box-shadow .32s ease, backdrop-filter .32s ease, -webkit-backdrop-filter .32s ease, padding .32s ease;
}
body.public-white-page .pill-nav-wrap{background:linear-gradient(#fff 62%, rgba(255,255,255,0))}
body.nav-scrolled .pill-nav-wrap{padding-top:10px;background:linear-gradient(rgba(244,245,247,.72),rgba(244,245,247,0));}
body.nav-scrolled .pill-nav{max-width:1080px;background:rgba(255,255,255,.68);box-shadow:0 12px 36px rgba(17,17,20,.12);-webkit-backdrop-filter:blur(18px) saturate(1.12);backdrop-filter:blur(18px) saturate(1.12);padding:9px 10px 9px 22px}
body.public-white-page.nav-scrolled .pill-nav-wrap{background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,0))}
.pill-nav a.brand{ font-size:19px; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.pill-nav nav a{ padding:9px 14px; border-radius:999px; font-size:13.5px; font-weight:500; color:var(--body); transition:background .2s ease, color .2s ease; }
.pill-nav-wrap a:hover{ text-decoration:none; }
.pill-nav nav a:hover{ background:var(--tint); color:var(--indigo-700); text-decoration:none; }
.pill-nav nav a.active{ background:var(--tint); color:var(--indigo-700); }

/* Chips / tiles */
.chip{ background:#F7F8FB; border-radius:14px; padding:14px 16px; transition:background .22s ease; }
.chip:hover{ background:var(--tint); }
.kpi{ background:var(--card); border-radius:18px; padding:22px; box-shadow:var(--sh-sm); transition:transform .3s ease, box-shadow .3s ease, background .3s ease; }
.kpi:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); background:var(--tint); }
.kpi-label{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin:0 0 9px; }
.kpi-value{ font-size:28px; font-weight:600; letter-spacing:-.02em; margin:0; }

/* Bars */
.bar-track{ position:relative; height:9px; border-radius:99px; background:#F1F3F8; display:block; }
.bar-fill{ height:100%; border-radius:99px; background:var(--indigo); display:block; transition:width .45s cubic-bezier(.2,.7,.2,1); }

/* Inputs */
.field-label{ font-size:12.5px; font-weight:500; color:var(--body); }
.field-input{
  background:#F7F8FB; border:1px solid var(--line); border-radius:12px;
  padding:11px 13px; font-size:14.5px; color:var(--ink); outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
  width:100%;
}
.field-input:focus{ border-color:var(--indigo); box-shadow:0 0 0 3px rgba(91,95,214,.15); }

/* Section rhythm */
.section{ padding:clamp(56px,7vw,100px) 20px 0; }
.section-inner{ max-width:1200px; margin:0 auto; }

/* Footer */
.site-footer{ padding:clamp(56px,7vw,100px) 20px 24px; }
.site-footer .footer-card{ max-width:1200px; margin:0 auto; background:var(--card); border-radius:26px; padding:clamp(28px,4vw,44px); box-shadow:var(--sh-sm); }
.site-footer a{ color:var(--body); }
.site-footer a:hover{ color:var(--indigo-700); }

/* ------------------------------------------------------------------ */
/* Global retarget layer                                              */
/* The rest of the site (home, predict, results, pricing, account,    */
/* contact, auth) is built with Tailwind's default blue/slate palette */
/* and small radii. Rather than rewrite every class attribute, remap  */
/* the utility classes actually in use to the new tokens so every     */
/* page picks up the redesign automatically. Template logic, form     */
/* fields and {% url %} bindings are untouched — only paint changes.  */
/* ------------------------------------------------------------------ */

/* Accent color: blue-* -> indigo */
.bg-blue-600, .bg-blue-700{ background-color:var(--indigo) !important; }
.hover\:bg-blue-700:hover, .hover\:bg-blue-600:hover{ background-color:var(--indigo-700) !important; }
.text-blue-600, .text-blue-700{ color:var(--indigo-700) !important; }
.hover\:text-blue-600:hover, .hover\:text-white:hover{ color:var(--indigo-700) !important; }
.border-blue-600, .border-blue-500{ border-color:var(--indigo) !important; }
.bg-blue-50, .bg-blue-100{ background-color:var(--tint) !important; }
.text-blue-100{ color:var(--tint) !important; }
.ring-blue-500, .focus\:ring-blue-500:focus{ --tw-ring-color:var(--indigo) !important; }
.from-blue-600, .from-blue-700, .from-blue-900{ --tw-gradient-from:var(--indigo) !important; }
.to-blue-600, .to-blue-700, .via-blue-800{ --tw-gradient-to:var(--peri) !important; }
.from-purple-900, .to-purple-900{ --tw-gradient-to:var(--peri) !important; }

/* Soft tinted hero/card gradients: blue-50/indigo-50/purple-50 -> the new tint */
.from-blue-50, .from-indigo-50{ --tw-gradient-from:var(--tint) !important; }
.to-blue-50, .to-purple-50, .to-indigo-50{ --tw-gradient-to:var(--tint) !important; }
.via-white{ --tw-gradient-to:#fff !important; }
.bg-indigo-100{ background-color:var(--tint) !important; }
.text-indigo-600, .text-indigo-700{ color:var(--indigo-700) !important; }
.border-indigo-500, .border-indigo-600{ border-color:var(--indigo) !important; }
.focus\:ring-indigo-500:focus{ --tw-ring-color:var(--indigo) !important; }

/* Neutrals: slate-* -> ink/body/faint/line/page */
.text-slate-900{ color:var(--ink) !important; }
.text-slate-700, .text-slate-600{ color:var(--body) !important; }
.text-slate-500, .text-slate-400, .text-slate-300{ color:var(--faint) !important; }
.bg-slate-50, .bg-slate-100{ background-color:var(--page) !important; }
.border-slate-200, .border-slate-100{ border-color:var(--line) !important; }

/* Radii: nudge toward the larger, softer shapes used in the redesign */
.rounded-md, .rounded-lg{ border-radius:14px !important; }
.rounded-xl{ border-radius:18px !important; }
.rounded-2xl, .rounded-3xl{ border-radius:var(--radius-card) !important; }

/* Shadows: replace flat Tailwind shadows with the layered card shadows */
.shadow, .shadow-sm{ box-shadow:var(--sh-sm) !important; }
.shadow-md{ box-shadow:var(--sh-md) !important; }
.shadow-lg, .shadow-xl, .shadow-2xl{ box-shadow:var(--sh-lg) !important; }

/* Buttons built from raw utility classes: give them the pill treatment
   and a lift-on-hover so they match .btn-pill without needing a class swap. */
a.bg-blue-600, a.bg-blue-700, button.bg-blue-600, button.bg-blue-700{
  border-radius:var(--radius-pill) !important;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease !important;
}
a.bg-blue-600:hover, a.bg-blue-700:hover, button.bg-blue-600:hover, button.bg-blue-700:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(91,95,214,.32);
}

/* Cards: any white surface with a shadow gets the hover lift used throughout the reference */
.bg-white.shadow, .bg-white.shadow-sm, .bg-white.shadow-md, .bg-white.shadow-lg, .bg-white.shadow-xl{
  transition:transform .3s ease, box-shadow .3s ease !important;
}
.bg-white.shadow:hover, .bg-white.shadow-sm:hover, .bg-white.shadow-md:hover, .bg-white.shadow-lg:hover, .bg-white.shadow-xl:hover{
  transform:translateY(-4px);
}

/* Legal pages (terms, privacy, cookies) */
.legal-page a{color:var(--indigo-700);font-weight:500}
.legal-page .legal-body h2{font-size:17px;font-weight:600;color:var(--ink);margin:0 0 10px;scroll-margin-top:110px}
.legal-page .legal-body h3{font-size:14.5px;font-weight:600;color:var(--ink);margin:14px 0 6px}
.legal-page .legal-body p{margin:0 0 10px}
.legal-page .legal-body ul{list-style:disc;padding-left:20px;margin:0 0 10px}
.legal-page .legal-body li{margin-bottom:6px}
.legal-page .legal-body section{scroll-margin-top:110px}
.legal-page .legal-toc ol{list-style:decimal;padding-left:20px;columns:2;column-gap:28px;margin:0}
.legal-page .legal-toc li{margin-bottom:4px;break-inside:avoid}
@media(max-width:640px){.legal-page .legal-toc ol{columns:1}}

/* Mobile: easier tapping and no iOS zoom-on-focus */
input[type=checkbox]{width:18px;height:18px;flex-shrink:0;accent-color:var(--indigo-700)}
label.flex input[type=checkbox]{margin-top:1px}
.predict-page .consent-row input{width:18px;height:18px;margin-top:2px}
.legal-page .legal-toc ol{padding-left:30px}
@media (max-width:640px){
  .field-input, select.field-input, textarea.field-input{font-size:16px}
  .predict-page .proxy-fields{margin-left:4px;padding-left:12px}
  .predict-page .consent-box{padding:14px}
  label.flex{gap:12px}
}

/* Hindi: Devanagari glyphs for the site fonts (only downloaded when a page contains Hindi) */
@font-face{font-family:"Instrument Sans";src:url("../fonts/NotoSansDevanagari-Regular.ttf") format("truetype");font-weight:100 550;font-display:swap;unicode-range:U+0900-097F,U+1CD0-1CFF,U+200C-200D,U+20B9,U+25CC,U+A8E0-A8FF}
@font-face{font-family:"Instrument Sans";src:url("../fonts/NotoSansDevanagari-Bold.ttf") format("truetype");font-weight:551 900;font-display:swap;unicode-range:U+0900-097F,U+1CD0-1CFF,U+200C-200D,U+20B9,U+25CC,U+A8E0-A8FF}
@font-face{font-family:"Instrument Serif";src:url("../fonts/NotoSansDevanagari-Regular.ttf") format("truetype");font-weight:100 900;font-display:swap;unicode-range:U+0900-097F,U+1CD0-1CFF,U+200C-200D,U+20B9,U+25CC,U+A8E0-A8FF}
html[lang="hi"] body{line-height:1.6}
html[lang="hi"] h1,html[lang="hi"] h2,html[lang="hi"] h3{line-height:1.3;letter-spacing:0}

/* Language dropdown (users/_language_menu.html) */
.lang-menu{position:relative}
.lang-menu>summary{list-style:none}
.lang-menu>summary::-webkit-details-marker{display:none}
.lang-menu-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none;padding:8px 12px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--ink);transition:background .2s ease}
.lang-menu-btn:hover,.lang-menu[open]>.lang-menu-btn{background:var(--tint)}
.lang-menu-btn:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
.lang-menu-globe{width:17px;height:17px;flex-shrink:0;opacity:.8}
.lang-menu-chevron{width:14px;height:14px;flex-shrink:0;transition:transform .2s ease}
.lang-menu[open] .lang-menu-chevron{transform:rotate(180deg)}
.lang-menu-list{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:168px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px rgba(17,17,20,.12);display:grid;gap:2px}
.lang-menu-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:10px 12px;border-radius:11px;font-size:14px;color:var(--ink);text-align:left;background:none;border:0;cursor:pointer}
.lang-menu-item:hover,.lang-menu-item:focus-visible{background:var(--tint);outline:none}
.lang-menu-item.is-current{font-weight:600;color:var(--indigo-700)}
.lang-menu-item svg{width:16px;height:16px;flex-shrink:0}
/* inside the mobile menu: full width, list opens in place */
.lang-menu--block .lang-menu-btn{width:100%;padding:12px;border-radius:12px;font-size:15px}
.lang-menu--block .lang-menu-chevron{margin-left:auto}
.lang-menu--block .lang-menu-list{position:static;box-shadow:none;margin-top:4px;min-width:0}