/* ==========================================================================
   TN JOBS — design system
   Palette lifted from the official TN Private Jobs portal so the site reads as
   part of the same family: #263bd6 royal blue, #02b44a green, #ff9000 orange,
   #ffb72f amber, #e60000 red.

   English is the default language, so Roboto leads the stack and Noto Sans
   Tamil sits behind it — Roboto has no Tamil glyphs, so Tamil text falls
   through to Noto rather than to the browser's default serif. Listing Noto
   first would let it override Roboto for Latin text too.
   ========================================================================== */

:root {
  --blue:        #263bd6;
  --blue-dark:   #1b2ba3;
  --blue-light:  #eef1ff;
  --green:       #02b44a;
  --green-light: #e8f9ef;
  --orange:      #ff9000;
  --amber:       #ffb72f;
  --amber-light: #fff6e3;
  --cyan:        #00b1f1;
  --red:         #e60000;
  --red-light:   #ffeaea;

  --ink:      #16193d;
  --ink-2:    #3c4160;
  --muted:    #6b7192;
  --line:     #e4e8f4;
  --line-2:   #eef0f7;
  --bg:       #f4f6fb;
  --card:     #ffffff;

  --radius:   12px;
  --radius-s: 8px;
  --shadow:   0 1px 2px rgba(22,25,61,.06), 0 4px 16px rgba(22,25,61,.06);
  --shadow-h: 0 2px 6px rgba(22,25,61,.08), 0 12px 28px rgba(38,59,214,.13);

  --font: Roboto, "Noto Sans Tamil", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --wrap: 1180px;
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--bg);
  overflow-x: hidden;
}

/* Tamil renders visually smaller than Latin at the same px size; nudge it up
   so a Tamil page does not look like fine print next to the English one. */
html[lang^="ta"] body { font-size: 16.5px; line-height: 1.75; }

img, svg { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { color: var(--ink); line-height: 1.3; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }
h2 { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.6rem); }
h3 { font-size: 1.12rem; }
p  { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }

/* Accessibility ---------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blue); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 4px; }

/* The honeypot must be unreachable but not display:none — some bots skip
   hidden inputs, and screen readers must not announce it either. */
.hp-field { position: absolute !important; left: -9999px !important; top: -9999px !important; height: 0; width: 0; overflow: hidden; }

/* ============================================================ header ==== */
.topbar { background: var(--blue-dark); color: rgba(255,255,255,.85); font-size: .8rem; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; flex-wrap: wrap; }
.topbar a { color: #fff; opacity: .9; }
.topbar .updated { display: inline-flex; align-items: center; gap: 6px; }
.topbar .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(2,180,74,.25); }

.site-head { background: var(--blue); color: #fff; position: sticky; top: 0; z-index: 60; box-shadow: 0 2px 14px rgba(22,25,61,.18); }
.site-head .wrap { display: flex; align-items: center; gap: 14px; min-height: 62px; }

.brand { display: inline-flex; align-items: baseline; gap: 2px; font-weight: 800; font-size: 1.35rem; letter-spacing: .4px; color: #fff; }
.brand:hover { text-decoration: none; }
.brand .dot { color: var(--amber); }
.brand small { display: block; font-size: .58rem; font-weight: 500; letter-spacing: .3px; opacity: .8; }

.nav { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.nav a {
  color: #fff; padding: 9px 13px; border-radius: var(--radius-s);
  font-size: .93rem; font-weight: 500; white-space: nowrap;
}
.nav a:hover, .nav a:focus { background: rgba(255,255,255,.14); text-decoration: none; }
.nav a.on { background: rgba(255,255,255,.2); font-weight: 700; }

.lang-switch {
  border: 1px solid rgba(255,255,255,.45); border-radius: 999px;
  padding: 5px 13px; font-size: .85rem; font-weight: 600; color: #fff;
}
.lang-switch:hover { background: #fff; color: var(--blue); text-decoration: none; }

.burger { display: none; background: none; border: 0; color: #fff; font-size: 1.5rem; cursor: pointer; padding: 6px 8px; margin-inline-start: auto; }

@media (max-width: 900px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: 62px 0 auto 0; background: var(--blue-dark);
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    /* Padding must be 0 while closed: max-height cannot collapse padding, so
       8px here leaves a dark strip hanging under the header on every page. */
    padding: 0;
    max-height: 0; overflow: hidden;
    transition: max-height .25s ease, padding .25s ease;
  }
  .nav.open { max-height: 80vh; overflow-y: auto; padding: 8px; }
  .nav a { padding: 13px 14px; border-radius: 0; }
  .nav .lang-switch { margin: 8px 6px; text-align: center; }
}

/* ============================================================== search == */
.searchbar { background: linear-gradient(135deg, var(--blue) 0%, #3548e0 55%, var(--cyan) 160%); padding: 26px 0 30px; color: #fff; }
.searchbar h1 { color: #fff; margin-bottom: 6px; }
.searchbar .sub { opacity: .9; margin-bottom: 16px; font-size: .97rem; }
.search-form { display: flex; gap: 8px; background: #fff; padding: 7px; border-radius: var(--radius); box-shadow: var(--shadow); position: relative; }

/* search autocomplete dropdown */
.ac-panel {
  position: absolute; top: calc(100% + 7px); inset-inline: 0; z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 50px rgba(16, 20, 60, .20); overflow: hidden;
}
.ac-row { display: flex; align-items: center; gap: 11px; padding: 10px 13px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line-2); }
.ac-row:last-child { border-bottom: 0; }
.ac-row:hover, .ac-row.is-active { background: var(--line-2); }
.ac-badge { flex: none; min-width: 42px; padding: 5px 6px; border-radius: 6px; background: var(--blue); color: #fff; font-size: .68rem; font-weight: 700; text-align: center; letter-spacing: .02em; }
.ac-main { display: flex; flex-direction: column; min-width: 0; }
.ac-t { font-size: .9rem; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-m { font-size: .76rem; color: var(--muted); margin-top: 1px; }
.ac-empty { padding: 14px 15px; font-size: .85rem; color: var(--muted); text-align: center; }
.search-form input[type=search], .search-form input[type=text] {
  flex: 1; border: 0; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--ink); background: transparent; min-width: 0;
}
.search-form input:focus { outline: none; }
.search-form button { flex: none; }

.stat-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.stat-chip { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 6px 15px; font-size: .87rem; }
.stat-chip b { font-weight: 800; }

/* =============================================================== buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--radius-s); border: 1.5px solid transparent;
  font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
  text-align: center; line-height: 1.25;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); box-shadow: 0 6px 18px rgba(38,59,214,.32); }
.btn-apply { background: var(--green); color: #fff; font-size: 1rem; padding: 14px 30px; }
.btn-apply:hover { background: #019c40; box-shadow: 0 6px 20px rgba(2,180,74,.35); }
.btn-amber { background: var(--amber); color: #3a2a00; }
.btn-amber:hover { background: var(--orange); color: #fff; }
.btn-ghost { background: #fff; color: var(--blue); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--blue); background: var(--blue-light); }
.btn-sm { padding: 8px 15px; font-size: .87rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .55; pointer-events: none; }

/* ================================================================= cards */
.grid { display: grid; gap: 16px; }
.grid-jobs { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.grid-schemes { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; position: relative;
  display: flex; flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card:hover { box-shadow: var(--shadow-h); transform: translateY(-2px); border-color: #cfd6f5; }

.card-head { padding: 15px 16px 0; display: flex; align-items: flex-start; gap: 10px; }
.card-body { padding: 10px 16px 14px; flex: 1; }
.card-foot {
  padding: 11px 16px; border-top: 1px solid var(--line-2); background: #fbfcfe;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}

.org-badge {
  flex: none; width: 46px; height: 46px; border-radius: 10px;
  background: var(--blue-light); color: var(--blue);
  display: grid; place-items: center; font-weight: 800; font-size: .78rem; letter-spacing: .3px;
}
.card.private .org-badge { background: var(--amber-light); color: #a05f00; }

.card-title { margin: 0 0 4px; font-size: 1.03rem; line-height: 1.4; }
.card-title a { color: var(--ink); }
.card-title a:hover { color: var(--blue); text-decoration: none; }
.card-org { font-size: .86rem; color: var(--muted); margin: 0; }

.meta-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.meta-list li { display: flex; gap: 8px; font-size: .87rem; color: var(--ink-2); }
.meta-list .k { color: var(--muted); flex: none; min-width: 96px; }
.meta-list .v { font-weight: 600; color: var(--ink); }

/* ================================================================ badges */
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .74rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  letter-spacing: .2px; white-space: nowrap;
}
.badge-govt    { background: var(--blue-light); color: var(--blue); }
.badge-private { background: var(--amber-light); color: #a05f00; }
.badge-new     { background: var(--green-light); color: #017a33; }
.badge-verified{ background: var(--green-light); color: #017a33; }
.badge-cat     { background: #f0f2f8; color: var(--ink-2); }

.deadline { font-size: .82rem; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.deadline::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.deadline.ok      { color: var(--green); }
.deadline.soon    { color: var(--orange); }
.deadline.urgent  { color: var(--red); animation: pulse 1.6s ease-in-out infinite; }
.deadline.expired { color: var(--muted); }
.deadline.muted   { color: var(--muted); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .deadline.urgent { animation: none; }
  .card:hover, .btn:hover { transform: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================== wishlist */
.wish {
  flex: none; background: none; border: 0; cursor: pointer; padding: 6px;
  color: var(--muted); line-height: 1; border-radius: 50%; transition: color .18s, background .18s;
}
.wish:hover { color: var(--red); background: var(--red-light); }
.wish[aria-pressed="true"] { color: var(--red); }
.wish svg { width: 21px; height: 21px; display: block; }

/* ============================================================== sections */
.section { padding: 30px 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.section-head h2 { margin: 0; display: flex; align-items: center; gap: 10px; }
.section-head h2::before { content: ""; width: 5px; height: 25px; border-radius: 3px; background: var(--blue); flex: none; }
.section-head.green h2::before { background: var(--green); }
.section-head.amber h2::before { background: var(--amber); }

/* ================================================================ layout */
.cols { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.panel + .panel { margin-top: 16px; }
.panel h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 12px; }

.filters { position: sticky; top: 78px; }
@media (max-width: 900px) { .filters { position: static; } }
.filter-group { margin-bottom: 16px; }
.filter-group:last-child { margin-bottom: 0; }
.filter-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.filter-list a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: var(--radius-s); color: var(--ink-2); font-size: .9rem; }
.filter-list a:hover { background: var(--blue-light); text-decoration: none; }
.filter-list a.on { background: var(--blue); color: #fff; font-weight: 700; }
.filter-list .n { color: var(--muted); font-size: .82rem; }
.filter-list a.on .n { color: rgba(255,255,255,.8); }

/* ============================================================ job detail */
.detail-head { background: #fff; border-bottom: 1px solid var(--line); padding: 22px 0; }
.crumbs { font-size: .84rem; color: var(--muted); margin-bottom: 10px; }
.crumbs a { color: var(--muted); }
.crumbs span { margin: 0 6px; opacity: .6; }

.detail-title { margin: 0 0 8px; }
.detail-org { font-size: 1rem; color: var(--ink-2); margin: 0 0 12px; font-weight: 600; }

.overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 18px 0; }
.overview div { background: #fff; padding: 13px 15px; }
.overview .k { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; }
.overview .v { font-weight: 700; color: var(--ink); font-size: .97rem; }
.overview .v.hot { color: var(--red); }

.prose { color: var(--ink-2); }
.prose h2, .prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-inline-start: 22px; }
.prose li { margin-bottom: .4em; }
.prose table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .93rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: start; }
.prose th { background: var(--blue-light); color: var(--ink); }
.prose pre { white-space: pre-wrap; word-break: break-word; font-family: inherit; margin: 0; }

.apply-box { background: linear-gradient(135deg, var(--green-light), #fff); border: 1.5px solid #bfeacf; border-radius: var(--radius); padding: 20px; text-align: center; }
.apply-box .note { font-size: .84rem; color: var(--muted); margin: 10px 0 0; }
.apply-box .host { font-weight: 700; color: var(--ink); word-break: break-all; }

.doc-links { display: grid; gap: 8px; margin-top: 12px; }
.doc-link {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-s); background: #fff; color: var(--ink);
}
.doc-link:hover { border-color: var(--blue); background: var(--blue-light); text-decoration: none; }
.doc-link .ico { flex: none; width: 34px; height: 34px; border-radius: 7px; background: var(--red-light); color: var(--red); display: grid; place-items: center; font-size: .68rem; font-weight: 800; }
.doc-link .ico.html { background: var(--blue-light); color: var(--blue); }
.doc-link .t { font-weight: 600; font-size: .92rem; }
.doc-link .s { font-size: .78rem; color: var(--muted); }

.notice { border-radius: var(--radius); padding: 14px 16px; margin: 16px 0; font-size: .92rem; border: 1px solid; }
.notice-warn { background: var(--amber-light); border-color: #ffdb99; color: #7a4d00; }
.notice-error { background: var(--red-light); border-color: #ffc4c4; color: #a30000; }
.notice-ok { background: var(--green-light); border-color: #bfeacf; color: #016b2d; }
.notice-info { background: var(--blue-light); border-color: #ccd4fb; color: #1b2ba3; }

/* ================================================================= forms */
.form { max-width: 460px; margin: 0 auto; }
.form-wide { max-width: 620px; }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: .89rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.field .req { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: var(--radius-s);
  font: inherit; font-size: .97rem; color: var(--ink); background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(38,59,214,.14); }
.field.has-error input, .field.has-error select { border-color: var(--red); }
.field .err { color: var(--red); font-size: .82rem; margin-top: 5px; }
.field .hint { color: var(--muted); font-size: .82rem; margin-top: 5px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

/* ============================================================ pagination */
.pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 26px 0 6px; flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--radius-s);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2); font-size: .92rem; font-weight: 600;
}
.pager a:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.pager .on { background: var(--blue); border-color: var(--blue); color: #fff; }
.pager .gap { border: 0; background: none; }

/* ================================================================= a-to-z */
.az { display: flex; flex-wrap: wrap; gap: 5px; }
.az a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius-s); border: 1px solid var(--line); background: #fff; font-weight: 700; font-size: .88rem; color: var(--ink-2); }
.az a:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.az a.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.az a.off { opacity: .35; pointer-events: none; }

/* =================================================================== ads */
/* No reserved height and no label until AdSense reports the unit filled —
   otherwise every position that goes unsold leaves a labelled empty box. */
.ad-wrap { margin: 22px 0; text-align: center; }
.ad-label { display: none; font-size: .66rem; letter-spacing: 1.2px; text-transform: uppercase; color: #a8adc4; margin-bottom: 5px; }
.ad-wrap:has(ins[data-ad-status="filled"]) .ad-label { display: block; }
.ad-wrap ins[data-ad-status="unfilled"] { display: none !important; }

/* ================================================================ footer */
.site-foot { background: #14173a; color: rgba(255,255,255,.72); margin-top: 40px; padding: 34px 0 0; font-size: .9rem; }
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 26px; padding-bottom: 26px; }
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.site-foot h4 { color: #fff; font-size: .95rem; margin-bottom: 12px; }
.site-foot a { color: rgba(255,255,255,.72); }
.site-foot a:hover { color: #fff; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-bar { border-top: 1px solid rgba(255,255,255,.12); padding: 15px 0; font-size: .82rem; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.disclaimer { background: rgba(255,255,255,.05); border-radius: var(--radius-s); padding: 13px 15px; font-size: .82rem; line-height: 1.65; }
.disclaimer b { color: var(--amber); }

/* ================================================================= empty */
.empty { text-align: center; padding: 46px 20px; color: var(--muted); }
.empty .big { font-size: 2.6rem; margin-bottom: 10px; opacity: .5; }

.toast {
  position: fixed; inset-inline: 16px; bottom: 20px; margin-inline: auto; max-width: 380px; z-index: 300;
  background: var(--ink); color: #fff; padding: 13px 18px; border-radius: var(--radius);
  box-shadow: var(--shadow-h); font-size: .92rem; text-align: center;
  opacity: 0; transform: translateY(12px); transition: opacity .22s, transform .22s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* Wide content must scroll inside itself, never widen the page. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ====================================================== hero + how-it-works
   The homepage hero splits in two: the real search on the left, and on the
   right a mock of the site doing the one journey a first-time visitor gets
   wrong — search, open a listing, then apply on the *recruiter's* site rather
   than here. It is CSS and markup rather than a video so it can show today's
   real listings, weigh nothing on a phone connection, and never fall out of
   date with the design.
   ========================================================================== */
.hero { padding: 30px 0 34px; }
.hero-grid { display: grid; gap: 26px; align-items: center; }
.hero-grid.has-demo { grid-template-columns: minmax(0, 1fr) minmax(0, 452px); }
.hero-copy { min-width: 0; }
@media (max-width: 980px) { .hero-grid.has-demo { grid-template-columns: 1fr; } }

.hero-demo { min-width: 0; }

.demo-frame {
  position: relative; background: #fff; border-radius: 14px; overflow: hidden;
  color: var(--ink); box-shadow: 0 20px 54px rgba(8, 11, 44, .34), 0 2px 6px rgba(8, 11, 44, .2);
}
.demo-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #f2f4fa; border-bottom: 1px solid var(--line); }
.demo-dots { display: inline-flex; gap: 5px; flex: none; }
.demo-dots i { width: 9px; height: 9px; border-radius: 50%; background: #d3d8e8; }
.demo-url { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: .72rem; color: var(--muted); text-align: center; }

/* Fixed height: the panes are absolutely positioned inside it, so the demo
   can never reflow the hero as it animates. */
.demo-screen { position: relative; height: 304px; }
@media (max-width: 520px) { .demo-screen { height: 288px; } }
.demo-pane { position: absolute; inset: 0; padding: 14px; }

.demo-search { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.demo-frame[data-step="1"] .demo-search { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(38, 59, 214, .13); }
.demo-search svg { width: 17px; height: 17px; flex: none; color: var(--muted); }
.demo-typed { font-size: .95rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; }
.demo-caret { flex: none; width: 2px; height: 17px; background: var(--blue); animation: demo-blink 1s steps(1) infinite; }
@keyframes demo-blink { 50% { opacity: 0; } }

.demo-results {
  margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
  box-shadow: var(--shadow); overflow: hidden;
  opacity: 0; transform: translateY(-7px); transition: opacity .28s ease, transform .28s ease;
}
.demo-frame[data-step="2"] .demo-results,
.demo-frame[data-step="3"] .demo-results { opacity: 1; transform: none; }
.demo-reshead { padding: 8px 12px 6px; font-size: .64rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.demo-row {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-top: 1px solid var(--line-2);
  opacity: 0; transform: translateY(5px);
  transition: opacity .24s ease, transform .24s ease, background .2s ease;
}
.demo-frame[data-step="2"] .demo-row,
.demo-frame[data-step="3"] .demo-row { opacity: 1; transform: none; }
.demo-row[data-row="1"] { transition-delay: .08s; }
.demo-row[data-row="2"] { transition-delay: .16s; }
.demo-row.is-hit { background: var(--blue-light); }
.demo-chip { flex: none; min-width: 46px; padding: 5px 6px; text-align: center; border-radius: 6px; background: var(--blue-light); color: var(--blue); font-size: .62rem; font-weight: 800; letter-spacing: .3px; }
.demo-rowmain { flex: 1; min-width: 0; }
.demo-rowt, .demo-rowm { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-rowt { font-size: .82rem; font-weight: 600; color: var(--ink); }
.demo-rowm { font-size: .7rem; color: var(--muted); }
.demo-tick { flex: none; color: var(--green); font-size: .82rem; opacity: 0; transition: opacity .2s; }
.demo-row.is-hit .demo-tick { opacity: 1; }

.demo-pane-detail {
  background: #fff; display: flex; flex-direction: column; gap: 10px;
  transform: translateX(101%); transition: transform .42s cubic-bezier(.22, .7, .28, 1);
}
.demo-frame[data-step="4"] .demo-pane-detail,
.demo-frame[data-step="5"] .demo-pane-detail { transform: none; }
.demo-dtag { align-self: flex-start; padding: 4px 9px; border-radius: 999px; background: var(--blue-light); color: var(--blue); font-size: .62rem; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.demo-dtitle { font-size: .95rem; font-weight: 700; color: var(--ink); line-height: 1.4; }
.demo-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.demo-facts div { background: #fff; padding: 8px 9px; min-width: 0; }
.demo-facts span { display: block; font-size: .58rem; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-facts b { font-size: .78rem; color: var(--ink); }
.demo-apply { margin-top: auto; padding: 11px; border-radius: 9px; background: var(--green); color: #fff; font-size: .9rem; font-weight: 700; text-align: center; }
.demo-frame[data-step="5"] .demo-apply { animation: demo-pulse 1.15s ease-in-out infinite; }
@keyframes demo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(2, 180, 74, .5); }
  55%      { box-shadow: 0 0 0 12px rgba(2, 180, 74, 0); }
}
.demo-target {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 10px; border: 1px solid #bfeacf; border-radius: 8px; background: var(--green-light);
  font-size: .72rem; color: var(--ink-2); text-align: center;
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s;
}
.demo-frame[data-step="5"] .demo-target { opacity: 1; transform: none; }
.demo-target b { color: #016b2d; word-break: break-all; }

.demo-cursor {
  position: absolute; left: 0; top: 0; width: 17px; height: 17px; z-index: 5;
  pointer-events: none; opacity: 0;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 9-6.2 1.2 3.2 6.6-2.7 1.3-3.2-6.7L5 17z' fill='%23161939' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform .5s cubic-bezier(.4, .1, .2, 1), opacity .25s;
}
.demo-cursor.is-on { opacity: 1; }
.demo-cursor::after { content: ""; position: absolute; inset: -7px; border: 2px solid var(--blue); border-radius: 50%; opacity: 0; }
.demo-cursor.is-click::after { animation: demo-ripple .5s ease-out; }
@keyframes demo-ripple {
  from { opacity: .9; transform: scale(.3); }
  to   { opacity: 0;  transform: scale(1.8); }
}

/* The written steps are the real explanation — they carry the message with no
   JS, no motion and for screen readers; the frame above only illustrates it. */
.demo-steps { list-style: none; margin: 15px 0 0; padding: 0; display: grid; gap: 7px; }
.demo-steps li { display: flex; align-items: flex-start; gap: 9px; font-size: .84rem; color: rgba(255, 255, 255, .74); transition: color .25s; }
.demo-steps li b { flex: none; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, .17); color: #fff; font-size: .68rem; display: grid; place-items: center; transition: background .25s, color .25s; }
.demo-steps li.is-on { color: #fff; }
.demo-steps li.is-on b { background: var(--amber); color: #3a2a00; }

@media (prefers-reduced-motion: reduce) {
  .demo-frame *, .demo-frame { transition: none !important; animation: none !important; }
  .demo-results, .demo-row { opacity: 1 !important; transform: none !important; }
  .demo-cursor { display: none; }
  .demo-steps li { color: #fff; }
}

/* ====================================================== subscribe bottom bar */
.subbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 250;
  background: #fff; border-top: 3px solid var(--amber);
  box-shadow: 0 -8px 30px rgba(16, 20, 60, .18);
  transform: translateY(105%); transition: transform .38s cubic-bezier(.22, .7, .28, 1);
}
.subbar.is-on { transform: none; }
.subbar-in { max-width: var(--wrap); margin: 0 auto; padding: 12px 48px 12px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.subbar-ico { flex: none; font-size: 1.5rem; line-height: 1; }
.subbar-copy { flex: 1 1 240px; min-width: 180px; line-height: 1.35; }
.subbar-copy b { display: block; color: var(--ink); font-size: .95rem; }
.subbar-copy span { font-size: .82rem; color: var(--muted); }
.subbar-form { display: flex; gap: 8px; flex: 1 1 330px; min-width: 0; }
.subbar-form input[type=email] { flex: 1; min-width: 0; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-s); font: inherit; font-size: .92rem; color: var(--ink); }
.subbar-form input[type=email]:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(38, 59, 214, .14); }
.subbar-note { flex-basis: 100%; margin: 0; font-size: .75rem; color: var(--muted); }
.subbar-note.is-ok  { color: #017a33; font-weight: 600; }
.subbar-note.is-err { color: var(--red); font-weight: 600; }
.subbar-x { position: absolute; top: 8px; inset-inline-end: 10px; padding: 3px 9px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.subbar-x:hover { background: var(--line-2); color: var(--ink); }
@media (max-width: 640px) {
  .subbar-in { padding: 12px 40px 12px 14px; gap: 10px; }
  .subbar-ico { display: none; }
}
/* Keep the toast clear of the bar while it is up. */
body.has-subbar .toast { bottom: 108px; }

/* ========================================================= ad-block notice */
.ab-veil {
  position: fixed; inset: 0; z-index: 400; padding: 18px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 15, 45, .74); opacity: 0; transition: opacity .25s;
}
/* The [hidden] attribute alone loses to the display:flex above, which left an
   invisible full-screen veil (opacity:0) swallowing every click — dead search
   box, dead subscribe-close. Honour hidden so it is only laid out when shown. */
.ab-veil[hidden] { display: none; }
.ab-veil.is-on { opacity: 1; }
.ab-box { width: 100%; max-width: 440px; padding: 26px 24px; border-radius: 14px; background: #fff; text-align: center; box-shadow: 0 24px 70px rgba(0, 0, 0, .42); }
.ab-ico { font-size: 2.4rem; line-height: 1; margin-bottom: 8px; }
.ab-box h2 { margin: 0 0 8px; font-size: 1.2rem; }
.ab-box p { margin: 0 0 14px; font-size: .92rem; color: var(--ink-2); }
.ab-how { margin: 0 0 18px; padding-inline-start: 20px; text-align: start; display: grid; gap: 5px; font-size: .87rem; color: var(--ink-2); }
.ab-acts { display: grid; gap: 9px; justify-items: center; }