/* Deployment Registry.
 *
 * The design brief is "institutional, not startup": someone arrives here worried
 * they are about to be defrauded, and the page has to read as a record office
 * rather than a product landing page.
 *
 * So the palette is monochrome and the ONLY saturated colour in the entire
 * interface is the verdict. Nothing competes with the one thing a visitor came for.
 * No external fonts, no scripts, no network dependencies of any kind.
 */

:root {
  color-scheme: light dark;

  /* Neutral ramp — light */
  --bg:         #ffffff;
  --bg-sunk:    #fbfbfc;
  --surface:    #ffffff;
  --surface-2:  #f7f8f9;
  --line:       #e7e8ec;
  --line-soft:  #eef0f3;
  --ink:        #0d0f12;
  --ink-2:      #40454e;
  --ink-3:      #767d89;

  /* Verdicts — the only chroma in the system */
  --ok:         #0f8a52;
  --ok-bg:      #eaf7f0;
  --ok-line:    #b7e3cc;
  --warn:       #8a6212;
  --warn-bg:    #fdf5e6;
  --warn-line:  #ecd6a4;
  --bad:        #c1272f;
  --bad-bg:     #fdeeee;
  --bad-line:   #f2c4c6;

  --radius:     10px;
  --radius-lg:  16px;
  --shell:      1080px;
  --measure:    68ch;

  --shadow-sm:  0 1px 2px rgba(13, 15, 18, .05);
  --shadow-lg:  0 1px 3px rgba(13, 15, 18, .06), 0 18px 40px -24px rgba(13, 15, 18, .22);

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:         #08090b;
    --bg-sunk:    #060709;
    --surface:    #0e1014;
    --surface-2:  #141720;
    --line:       #1e222b;
    --line-soft:  #171a21;
    --ink:        #f3f5f8;
    --ink-2:      #a8b0bd;
    --ink-3:      #6d7684;

    --ok:         #40cf8e;
    --ok-bg:      #0c2119;
    --ok-line:    #1d4735;
    --warn:       #e0b13f;
    --warn-bg:    #221b0c;
    --warn-line:  #4a3b16;
    --bad:        #f0666e;
    --bad-bg:     #241013;
    --bad-line:   #4d2126;

    --shadow-sm:  0 1px 2px rgba(0, 0, 0, .5);
    --shadow-lg:  0 1px 3px rgba(0, 0, 0, .6), 0 24px 56px -28px rgba(0, 0, 0, .9);
  }
}

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

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.62;
  font-feature-settings: "kern" 1, "liga" 1, "cv05" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ chrome */

header.site {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 28px; height: 62px;
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14.5px; font-weight: 620; letter-spacing: -.015em;
  text-decoration: none; color: var(--ink);
}
.brand img { display: block; border-radius: 6px; }
header.site nav { display: flex; align-items: center; gap: 4px; }
header.site nav a {
  padding: 7px 12px; border-radius: 7px;
  font-size: 13.5px; font-weight: 500; color: var(--ink-3); text-decoration: none;
  transition: color .13s ease, background-color .13s ease;
}
header.site nav a:hover { color: var(--ink); background: var(--surface-2); }

main { flex: 1; width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 28px; }

footer.site {
  margin-top: 88px;
  border-top: 1px solid var(--line);
  background: var(--bg-sunk);
  padding: 26px 28px 34px;
}
.disclaimer {
  max-width: var(--shell); margin: 0 auto;
  font-size: 12.5px; line-height: 1.7; color: var(--ink-3);
  max-inline-size: 92ch;
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  padding: 92px 0 68px;
  text-align: center;
}
/* A single soft spotlight. Sits behind content, never over it. */
.hero::before {
  content: "";
  position: absolute; inset: -40px -60px auto; height: 380px; z-index: -1;
  background: radial-gradient(60% 100% at 50% 0%, color-mix(in oklab, var(--ink) 7%, transparent), transparent 72%);
  pointer-events: none;
}
.hero h1 {
  font-size: clamp(2rem, 1.15rem + 3.4vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 620;
  text-wrap: balance;
}
.lede {
  margin: 18px auto 0; max-width: 54ch;
  font-size: 16.5px; line-height: 1.6; color: var(--ink-2);
  text-wrap: pretty;
}
.hint { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); }

/* ------------------------------------------------------------------ lookup */

.lookup {
  display: flex; gap: 8px; align-items: stretch;
  margin: 32px auto 0; max-width: 560px;
}
.field { position: relative; flex: 1; display: flex; align-items: center; }
.field svg {
  position: absolute; left: 15px; width: 17px; height: 17px;
  color: var(--ink-3); pointer-events: none;
}
.field input {
  width: 100%; height: 50px; padding: 0 16px 0 42px;
  font-family: var(--mono); font-size: 15px; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.field input::placeholder { color: var(--ink-3); font-family: var(--mono); }
.field input:focus {
  outline: none;
  border-color: color-mix(in oklab, var(--ink) 42%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ink) 8%, transparent);
}
.lookup button {
  height: 50px; padding: 0 24px; flex: none;
  font: inherit; font-size: 14.5px; font-weight: 600; letter-spacing: -.005em;
  color: var(--bg); background: var(--ink);
  border: 0; border-radius: var(--radius); cursor: pointer;
  transition: opacity .14s ease, transform .08s ease;
}
.lookup button:hover { opacity: .88; }
.lookup button:active { transform: translateY(1px); }

/* ------------------------------------------------------------------ stat */

.stat {
  display: inline-flex; align-items: baseline; gap: 8px;
  margin-top: 30px; padding: 7px 15px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font-size: 12.5px; color: var(--ink-3);
}
.stat b {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ink);
}

/* ------------------------------------------------------------------ cards */

.cards {
  display: grid; gap: 1px; margin-top: 76px;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cards article { padding: 26px 24px 28px; background: var(--surface); }
.cards .ico {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-bottom: 15px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2); color: var(--ink-2);
}
.cards .ico svg { width: 16px; height: 16px; }
.cards h2 { font-size: 14.5px; font-weight: 620; letter-spacing: -.012em; margin-bottom: 7px; }
.cards p { font-size: 13.5px; line-height: 1.62; color: var(--ink-3); }
.cards a { color: var(--ink-2); text-underline-offset: 3px; }

/* ------------------------------------------------------------------ verdict */

.result {
  position: relative; overflow: hidden;
  margin-top: 56px; padding: 40px 40px 36px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
/* A hairline of verdict colour along the top edge — enough to read the state
   from a glance at the page shape, without tinting the whole card. */
.result::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
}
.tone-ok::before   { background: var(--ok); }
.tone-warn::before { background: var(--warn); }
.tone-bad::before  { background: var(--bad); }

.crest {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 22px;
  border-radius: 12px; border: 1px solid;
}
.crest svg { width: 23px; height: 23px; }
.tone-ok   .crest { color: var(--ok);   background: var(--ok-bg);   border-color: var(--ok-line); }
.tone-warn .crest { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.tone-bad  .crest { color: var(--bad);  background: var(--bad-bg);  border-color: var(--bad-line); }

.subject {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: clamp(1.35rem, .9rem + 1.8vw, 2.05rem);
  font-weight: 600; letter-spacing: -.028em; line-height: 1.15;
  overflow-wrap: anywhere;
}
.verdict {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: 14px; font-weight: 620; letter-spacing: -.005em;
}
.verdict .pip { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tone-ok   .verdict { color: var(--ok); }
.tone-warn .verdict { color: var(--warn); }
.tone-bad  .verdict { color: var(--bad); }

.blurb { margin-top: 14px; max-width: 58ch; font-size: 14.5px; color: var(--ink-2); text-wrap: pretty; }

.facts {
  display: flex; flex-wrap: wrap; gap: 0 44px;
  margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line-soft);
}
.fact dt { font-size: 11px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); }
.fact dd { margin-top: 5px; font-size: 15px; font-weight: 550; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ follow-up */

.followup { margin-top: 22px; }
.check-yourself {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
}
.check-yourself svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--ink-3); }
.check-yourself strong { color: var(--ink); font-weight: 620; }
.check-yourself code {
  font-family: var(--mono); font-size: .93em;
  padding: 1px 5px; border-radius: 4px;
  background: var(--bg); border: 1px solid var(--line);
}
.actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 19px;
  font-size: 14px; font-weight: 600; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  color: var(--bg); background: var(--ink);
  border: 1px solid transparent; border-radius: var(--radius);
  transition: opacity .14s ease;
}
.btn:hover { opacity: .88; }
.btn.ghost { color: var(--ink); background: var(--surface); border-color: var(--line); }
.btn.ghost:hover { background: var(--surface-2); opacity: 1; }

/* ------------------------------------------------------------------ prose */

.prose { max-width: var(--measure); padding-top: 62px; }
.prose.narrow { max-width: 54ch; }
.prose h1 {
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.55rem);
  letter-spacing: -.032em; line-height: 1.1; font-weight: 620; text-wrap: balance;
}
.prose > .lede { margin: 18px 0 0; text-align: left; font-size: 17px; }
.prose h2 {
  margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line-soft);
  font-size: 17px; font-weight: 620; letter-spacing: -.016em;
}
.prose p { margin-top: 14px; color: var(--ink-2); text-wrap: pretty; }
.prose p strong { color: var(--ink); font-weight: 620; }
.prose code {
  font-family: var(--mono); font-size: .9em;
  padding: 2px 6px; border-radius: 5px;
  background: var(--surface-2); border: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.prose .cta { margin-top: 40px; }

.steps { margin-top: 20px; display: grid; gap: 3px; counter-reset: s; list-style: none; }
.steps li {
  position: relative; counter-increment: s;
  padding: 15px 18px 15px 54px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  color: var(--ink-2); font-size: 14px;
}
.steps li::before {
  content: counter(s);
  position: absolute; left: 17px; top: 15px;
  display: flex; align-items: center; justify-content: center;
  width: 23px; height: 23px; border-radius: 7px;
  background: var(--ink); color: var(--bg);
  font-family: var(--mono); font-size: 12px; font-weight: 600;
}
.steps strong { color: var(--ink); font-weight: 620; }

/* ------------------------------------------------------------------ forms */

.stack { display: grid; gap: 17px; margin-top: 28px; }
.stack label { display: grid; gap: 7px; }
.stack label > span { font-size: 13.5px; font-weight: 600; }
.stack label em { font-weight: 400; font-style: normal; color: var(--ink-3); }
.stack input, .stack textarea {
  width: 100%; padding: 11px 14px;
  font-family: var(--sans); font-size: 14.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); resize: vertical;
}
.stack input { font-family: var(--mono); }
.stack textarea { font-family: var(--sans); }
.stack input:focus, .stack textarea:focus {
  outline: none; border-color: color-mix(in oklab, var(--ink) 42%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ink) 8%, transparent);
}
.stack .btn { justify-self: start; }

.errors {
  margin-top: 20px; padding: 13px 17px 13px 34px;
  list-style: disc; font-size: 13.5px;
  color: var(--bad); background: var(--bad-bg);
  border: 1px solid var(--bad-line); border-radius: var(--radius);
}

/* ------------------------------------------------------------------ embed */

.badge-stage {
  display: flex; align-items: center; justify-content: center;
  margin-top: 16px; padding: 46px 24px;
  background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 22px 22px;
}
.badge-stage iframe { border: 0; display: block; }

.snippet {
  margin-top: 14px; padding: 16px 18px; overflow-x: auto;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.snippet code {
  display: block; padding: 0; border: 0; background: none;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
  color: var(--ink-2); white-space: pre;
}

/* ------------------------------------------------------------------ small */

@media (max-width: 620px) {
  header.site { padding: 0 18px; }
  header.site nav a { padding: 7px 9px; }
  main { padding: 0 18px; }
  .hero { padding: 60px 0 48px; }
  .lookup { flex-direction: column; }
  .result { padding: 30px 22px 28px; }
  .prose { padding-top: 46px; }
  .facts { gap: 0 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   MOTION
   ==========================================================================
   Everything here is decoration, and every rule that moves sits inside a
   `prefers-reduced-motion: no-preference` guard, so a visitor who has asked for
   stillness gets the finished state immediately rather than a degraded one.

   The restraint is deliberate. This page is read by people who think they may be
   about to be defrauded, and motion that draws attention to itself reads as a
   marketing site — the opposite of what a registry needs to be. So: one entrance,
   one moment of emphasis on the verdict, and nothing that loops forever in the
   corner of someone's eye.

   Nothing animates layout. Only opacity, transform and stroke offsets, so none of
   it can shift text under a reader mid-sentence or cost a frame during scroll.
   ========================================================================== */

@property --reg-n {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

/* The counter reads the registered total from a nonce'd <style> in the head.
   Where @property is unsupported the value never interpolates and the final
   number simply shows from the first frame — the fallback is the right answer. */
.stat .count { counter-reset: reg-n var(--reg-n, 0); }
.stat .count::after { content: counter(reg-n); }

@media (prefers-reduced-motion: no-preference) {

  @keyframes reg-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes reg-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes reg-pop {
    0%   { opacity: 0; transform: scale(.82); }
    60%  { transform: scale(1.04); }
    100% { opacity: 1; transform: scale(1); }
  }
  @keyframes reg-draw  { to { stroke-dashoffset: 0; } }
  @keyframes reg-sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes reg-count { from { --reg-n: 0; } }

  /* One slow pass of the halo, then it stops. A verdict that pulses forever stops
     meaning anything and starts being a distraction. */
  @keyframes reg-halo {
    0%   { opacity: .5; transform: scale(1); }
    100% { opacity: 0;  transform: scale(1.85); }
  }

  /* The hero light drifts, slowly and slightly. It should read as depth, not as
     an animation anyone can point at. */
  @keyframes reg-drift {
    0%   { transform: translate3d(-2%, 0, 0) scale(1); }
    100% { transform: translate3d(2%, 1.5%, 0) scale(1.08); }
  }

  /* ------------------------------------------------------------- entrance */

  .hero > *      { animation: reg-rise .62s cubic-bezier(.16, .84, .34, 1) backwards; }
  .hero h1       { animation-delay: .02s; }
  .hero .lede    { animation-delay: .09s; }
  .hero .lookup  { animation-delay: .16s; }
  .hero .hint    { animation-delay: .23s; }
  .hero .stat    { animation-delay: .30s; }

  .cards         { animation: reg-fade .7s .30s ease backwards; }
  .cards article { animation: reg-rise .6s cubic-bezier(.16, .84, .34, 1) backwards; }
  .cards article:nth-child(1) { animation-delay: .34s; }
  .cards article:nth-child(2) { animation-delay: .41s; }
  .cards article:nth-child(3) { animation-delay: .48s; }

  .prose > *     { animation: reg-rise .55s cubic-bezier(.16, .84, .34, 1) backwards; }
  .prose h1      { animation-delay: .02s; }
  .prose > .lede { animation-delay: .08s; }
  .steps li      { animation: reg-rise .5s cubic-bezier(.16, .84, .34, 1) backwards; }
  .steps li:nth-child(1) { animation-delay: .14s; }
  .steps li:nth-child(2) { animation-delay: .21s; }
  .steps li:nth-child(3) { animation-delay: .28s; }

  .hero::before  { animation: reg-drift 22s ease-in-out infinite alternate; }

  /* ---------------------------------------------------------- the verdict */

  .result          { animation: reg-rise .6s cubic-bezier(.16, .84, .34, 1) backwards; }
  .result::before  { transform-origin: left; animation: reg-sweep .8s .18s cubic-bezier(.16, .84, .34, 1) backwards; }
  .result .eyebrow { animation: reg-fade .5s .34s ease backwards; }
  .result .subject { animation: reg-rise .55s .30s cubic-bezier(.16, .84, .34, 1) backwards; }
  .result .verdict { animation: reg-rise .5s .42s cubic-bezier(.16, .84, .34, 1) backwards; }
  .result .blurb   { animation: reg-rise .5s .50s cubic-bezier(.16, .84, .34, 1) backwards; }
  .result .facts   { animation: reg-fade .6s .60s ease backwards; }
  .followup        { animation: reg-rise .55s .55s cubic-bezier(.16, .84, .34, 1) backwards; }

  .crest { animation: reg-pop .5s .1s cubic-bezier(.34, 1.4, .5, 1) backwards; }

  /* The glyph draws itself on. pathLength="1" on every shape (set in reg_icon)
     makes one offset rule draw a shield, a circle or a cross at the same rate. */
  .crest svg > * {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: reg-draw .75s cubic-bezier(.5, 0, .3, 1) forwards;
  }
  .crest svg > *:nth-child(1) { animation-delay: .28s; }
  .crest svg > *:nth-child(2) { animation-delay: .60s; }
  .crest svg > *:nth-child(3) { animation-delay: .78s; }

  /* Halo on a positive verdict only — the one state worth marking. */
  .tone-ok .crest { position: relative; }
  .tone-ok .crest::after {
    content: "";
    position: absolute; inset: -1px;
    border-radius: inherit;
    border: 1px solid var(--ok);
    animation: reg-halo 1.5s 1s cubic-bezier(.2, .7, .3, 1) forwards;
    pointer-events: none;
  }

  .stat .count { animation: reg-count 1.7s .45s cubic-bezier(.12, .78, .28, 1) backwards; }

  /* ------------------------------------------------------------ interaction */

  .cards article { transition: background-color .22s ease, transform .22s cubic-bezier(.16, .84, .34, 1); }
  .cards article:hover { background: var(--surface-2); transform: translateY(-2px); }
  .cards article .ico { transition: color .22s ease, border-color .22s ease, transform .28s cubic-bezier(.34, 1.4, .5, 1); }
  .cards article:hover .ico { color: var(--ink); border-color: var(--ink-3); transform: scale(1.06); }

  /* A single sheen across a primary button, on hover only. */
  .lookup button, .btn { position: relative; overflow: hidden; }
  .lookup button::after, .btn:not(.ghost)::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .22) 50%, transparent 62%);
    transform: translateX(-120%);
    transition: transform .62s cubic-bezier(.3, .7, .3, 1);
  }
  .lookup button:hover::after, .btn:not(.ghost):hover::after { transform: translateX(120%); }

  .brand img { transition: transform .3s cubic-bezier(.34, 1.4, .5, 1); }
  .brand:hover img { transform: rotate(-6deg) scale(1.07); }

  .field input { transition: border-color .18s ease, box-shadow .24s cubic-bezier(.16, .84, .34, 1); }
  .field svg   { transition: color .18s ease; }
  .field:focus-within svg { color: var(--ink); }
}