/* ==========================================================================
   AdSure brand tokens — the ONE place brand lives.
   Same values as www.adsure.in. Change a colour or font here and every
   screen in the app follows. Components below only ever use these tokens.
   The app also loads https://www.adsure.in/brand.css after this file, so once
   this file is uploaded to the landing site too, editing it there updates both.
   ========================================================================== */
:root{
  /* Colours */
  --cream:#F4F1EB;        /* page background */
  --paper:#FFFDF8;        /* cards, inputs */
  --ink:#111014;          /* text, dark sections, primary button */
  --ink-2:#1D1C22;
  --ink-3:#2A2930;
  --lime:#CBEF2F;         /* accent */
  --lime-hover:#D9F75A;
  --lime-soft:#EEF8C4;
  --line:#DDD7CA;         /* borders */
  --muted:#5E5A52;        /* secondary text on cream */
  --muted-on-ink:#A9A6A0; /* secondary text on ink */
  --red:#D9483B;          /* problems */
  --red-soft:#FBE3DF;
  --amber:#C98A12;
  --amber-soft:#FBF0D6;
  --green:#2DB55D;        /* live / passed */
  --green-soft:#DFF3E5;

  /* Type */
  --head:"Outfit","Segoe UI",system-ui,-apple-system,sans-serif;
  --body:"DM Sans","Segoe UI",system-ui,-apple-system,sans-serif;

  /* Shape */
  --r-lg:28px; --r-md:18px; --r-sm:12px; --r-xs:8px; --r-pill:999px;
  --wrap:1180px;

  /* Logos (served from the main site, so a new logo there shows here too) */
  --logo-dark:url("https://www.adsure.in/assets/logo-dark.png");
  --logo-light:url("https://www.adsure.in/assets/logo-light.png");
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.on-ink :focus-visible{outline-color:var(--lime)}
h1,h2,h3,h4{font-family:var(--head);line-height:1.08;letter-spacing:-.03em;margin:0;font-weight:800}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Kicker: small label with the lime pill, same as the landing page */
.kicker{font-family:var(--head);font-weight:600;font-size:.95rem;color:var(--muted);letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:22px;height:8px;border-radius:8px;background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--ink)}
.on-ink .kicker{color:var(--muted-on-ink)}
.on-ink .kicker::before{box-shadow:none}

/* Buttons, same as the landing page */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:var(--r-pill);padding:14px 24px;font-family:var(--head);font-weight:700;font-size:1rem;letter-spacing:-.01em;text-decoration:none;cursor:pointer;transition:transform .15s ease,background .15s ease;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-lime{background:var(--lime);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn-lime:hover{background:var(--lime-hover)}
.btn-ink{background:var(--ink);color:var(--cream)}
.btn-ink:hover{background:var(--ink-3)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn-ghost:hover{background:rgba(17,16,20,.06)}
.on-ink .btn-ghost{color:var(--cream);box-shadow:inset 0 0 0 2px var(--cream)}
.btn-sm{padding:9px 16px;font-size:.92rem}

/* Wordmark fallback if the logo image can't load */
.wordmark{font-family:var(--head);font-weight:800;font-size:1.6rem;letter-spacing:-.05em;line-height:1;display:inline-flex;align-items:baseline}
.wordmark::after{content:"";width:.32em;height:.32em;border-radius:50%;background:var(--lime);margin-left:2px;box-shadow:inset 0 0 0 1.5px currentColor}