/* ============================================================
   VERABLE — DESIGN TOKENS (locked)
   verified/failed = validator-authored states ONLY.
   Verable never colours its own claims.
   ============================================================ */
:root{
  --field:#F1F5F6;
  --surface:#FFFFFF;
  --ink:#16181C;
  --ink-2:#5C6069;
  --ink-3:#9A9EA8;
  --line:#E2E7EA;

  /* PRUSSIAN = Verable speaking: identity, actions, work in progress */
  --blue:#0F3A50;
  --blue-lift:#11405A;
  --blue-deep:#0A2838;
  --b-06:rgba(15,58,80,.06);
  --b-14:rgba(15,58,80,.14);
  --b-26:rgba(15,58,80,.26);

  --verified:#34715A;
  --v-06:rgba(52,113,90,.06);
  --v-14:rgba(52,113,90,.14);
  --v-26:rgba(52,113,90,.26);

  --failed:#B04A3F;
  --f-08:rgba(176,74,63,.08);
  --f-24:rgba(176,74,63,.24);

  --spring:linear(0,.008,.032 2.1%,.13 4.3%,.44 8.4%,.694 11.3%,.847 13.5%,.955 15.6%,1.021 17.5%,1.06 19.4%,1.078 21.4%,1.077 24.2%,1.05 28.7%,1.007 35.5%,.99 42%,.994 53%,1.001 70%,1 100%);
  --spring-soft:linear(0,.06 3.2%,.24 6.8%,.53 11.5%,.77 15.8%,.92 19.8%,1.005 24%,1.035 28.5%,1.03 33%,1.01 40%,.998 50%,1 100%);

  --sh-1:0 1px 1px rgba(26,26,29,.05),0 6px 16px -4px rgba(26,26,29,.10),0 24px 52px -16px rgba(26,26,29,.18);
  --sh-2:0 2px 4px rgba(26,26,29,.08),0 14px 32px -8px rgba(26,26,29,.16),0 40px 88px -20px rgba(26,26,29,.22),0 76px 150px -44px rgba(26,26,29,.18);
}

/* ============================================================
   SELF-HOSTED FONTS — replaces the Google Fonts <link>. Google's
   own CSS2 API output, just with url() rewritten to local /fonts/
   paths so nothing round-trips to fonts.googleapis.com/gstatic.com.
   ============================================================ */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-normal-600-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-normal-600-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-normal-600-greek-ext.woff2") format("woff2");unicode-range:U+1F00-1FFF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-normal-600-greek.woff2") format("woff2");unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-normal-600-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-normal-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-normal-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:450;font-display:swap;src:url("/fonts/inter-normal-600-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Inter';font-style:normal;font-weight:450;font-display:swap;src:url("/fonts/inter-normal-600-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:450;font-display:swap;src:url("/fonts/inter-normal-600-greek-ext.woff2") format("woff2");unicode-range:U+1F00-1FFF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:450;font-display:swap;src:url("/fonts/inter-normal-600-greek.woff2") format("woff2");unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:450;font-display:swap;src:url("/fonts/inter-normal-600-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Inter';font-style:normal;font-weight:450;font-display:swap;src:url("/fonts/inter-normal-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:450;font-display:swap;src:url("/fonts/inter-normal-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/inter-normal-600-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/inter-normal-600-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/inter-normal-600-greek-ext.woff2") format("woff2");unicode-range:U+1F00-1FFF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/inter-normal-600-greek.woff2") format("woff2");unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/inter-normal-600-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/inter-normal-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/inter-normal-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-normal-600-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-normal-600-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-normal-600-greek-ext.woff2") format("woff2");unicode-range:U+1F00-1FFF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-normal-600-greek.woff2") format("woff2");unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-normal-600-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-normal-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-normal-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/inter-normal-600-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/inter-normal-600-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/inter-normal-600-greek-ext.woff2") format("woff2");unicode-range:U+1F00-1FFF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/inter-normal-600-greek.woff2") format("woff2");unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/inter-normal-600-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/inter-normal-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/inter-normal-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:500;font-display:swap;src:url("/fonts/newsreader-italic-500-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:500;font-display:swap;src:url("/fonts/newsreader-italic-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:500;font-display:swap;src:url("/fonts/newsreader-italic-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/sora-normal-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/sora-normal-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Sora';font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/sora-normal-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Sora';font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/sora-normal-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/sora-normal-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/sora-normal-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body{
  font-family:"Inter",-apple-system,system-ui,sans-serif;
  font-size:16px;letter-spacing:-.008em;
  background:var(--field);color:var(--ink);
  min-height:100vh;overflow-x:hidden;
}
::selection{background:rgba(26,26,29,.1)}
.display{font-family:"Sora",sans-serif}

/* ---------- shared surface material ---------- */
.surface{
  position:relative;
  background:linear-gradient(180deg,#FFFFFF 0%,#FDFDFD 45%,#F8F9F8 100%);
  border:1px solid var(--line);border-top-color:#F2F4F2;
  border-radius:18px;box-shadow:var(--sh-1);
}
.surface::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),inset 0 -1px 0 rgba(26,26,29,.02);
}

/* ============================================================
   NAV
   ============================================================ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,5vw,56px);
  transition:background .5s ease,box-shadow .5s ease,padding .5s var(--spring-soft),
             -webkit-backdrop-filter .5s ease,backdrop-filter .5s ease;
}
nav.scrolled{
  background:rgba(244,245,244,.82);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 1px 0 var(--line);
  padding-top:12px;padding-bottom:12px;
}
.wordmark{display:inline-flex;align-items:baseline;gap:7px;text-decoration:none;color:var(--ink)}
.wordmark svg{width:12.6px;height:15.8px;color:var(--blue);flex-shrink:0;transform:none}
.wordmark .wm{font-family:"Inter",system-ui,sans-serif;font-weight:700;font-size:21px;letter-spacing:-.032em;line-height:1}
/* Nav wordmark only, scaled ~20% up from the base lockup above for more
   presence as the first thing visitors see; same ratios, just bigger. */
#nav .wordmark{gap:8.4px}
#nav .wordmark svg{width:15.1px;height:19px}
#nav .wordmark .wm{font-size:25px}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;transition:color .3s ease}
.nav-links a:hover{color:var(--ink)}
.nav-cta{
  font-size:14px;font-weight:500;color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:9px 18px;text-decoration:none;
  background:linear-gradient(180deg,#FFF 0%,#F8F9F8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(26,26,29,.04);
  transition:transform .5s var(--spring),border-color .3s ease,opacity .3s ease;
}
/* Homepage only (app.js toggles this via #navCta - the article pages'
   own copy of .nav-cta has no id and no app.js, so it's never touched,
   always visible there, exactly as before): hidden while the central
   upload card is still on screen, since that card already offers the
   same "fix a PDF" action - showing both at once in the same initial
   view is redundant. Reappears once the card has scrolled out of view.
   Opacity, not display:none, so the rest of nav-links never reflows. */
.nav-cta.nav-cta-hidden{opacity:0;pointer-events:none}
.nav-cta:hover{transform:translateY(-1.5px);border-color:var(--ink-3)}
.nav-signin{font-weight:600!important;color:var(--ink)!important}
@media(max-width:660px){.nav-links a:not(.nav-cta):not(.nav-signin){display:none}}

/* ============================================================
   SCAFFOLD
   ============================================================ */
section{padding:clamp(90px,13vh,140px) 24px}
.wrap{max-width:1020px;margin:0 auto}
.wrap-narrow{max-width:720px;margin:0 auto}

.eyebrow{
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;
}
.eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--blue);display:inline-block}

h2{
  font-family:"Sora",sans-serif;font-weight:600;
  font-size:clamp(27px,4.1vw,38px);letter-spacing:-.035em;line-height:1.13;
  margin-bottom:20px;text-wrap:balance;
}
.section-sub{font-size:17px;line-height:1.65;color:var(--ink-2);max-width:560px;text-wrap:pretty}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--spring-soft),transform .9s var(--spring)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.18s}
.reveal.d3{transition-delay:.28s}.reveal.d4{transition-delay:.38s}

/* ============================================================
   DRAG WELCOME — whole page reacts
   ============================================================ */
.recede{transition:opacity .6s var(--spring-soft),transform .6s var(--spring-soft)}
body.drag-active .recede{opacity:.32;transform:scale(.985)}
body.drag-active .hero{background:radial-gradient(1100px 560px at 50% 32%,rgba(27,79,176,.07),transparent 70%)}
body.drag-active .page-card{transform:translateY(-8px) scale(1.025);border-color:var(--blue);box-shadow:var(--sh-2),0 0 0 6px var(--b-06)}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding-top:clamp(126px,18vh,186px);text-align:center;transition:background .5s ease}
.rise{opacity:0;transform:translateY(22px);animation:rise .9s var(--spring) forwards}
.rise:nth-child(1){animation-delay:.05s}.rise:nth-child(2){animation-delay:.14s}
.rise:nth-child(3){animation-delay:.23s}.rise:nth-child(4){animation-delay:.34s}
.rise:nth-child(5){animation-delay:.46s}
@keyframes rise{to{opacity:1;transform:translateY(0)}}

h1{
  font-family:"Sora",sans-serif;font-weight:600;
  font-size:clamp(38px,5.8vw,58px);letter-spacing:-.042em;line-height:1.05;
  margin-bottom:26px;text-wrap:balance;
}
h1 .quiet{color:var(--ink-2)}
.hero-sub{font-size:17.5px;line-height:1.62;color:var(--ink-2);max-width:490px;margin:0 auto 54px;text-wrap:pretty}
.hero-sub strong{color:var(--ink);font-weight:500}

/* ============================================================
   THE FLOATING PAGE
   ============================================================ */
.page-card{
  position:relative;max-width:640px;margin:0 auto;
  background:linear-gradient(180deg,#FFFFFF 0%,#FDFDFD 50%,#F8F9F8 100%);
  border:1px solid var(--line);border-top-color:#F2F4F2;
  border-radius:20px;box-shadow:var(--sh-1);
  padding:54px 40px;cursor:pointer;overflow:hidden;text-align:center;outline:none;
  transition:transform .7s var(--spring),box-shadow .7s var(--spring),border-color .4s ease;
}
.page-card:hover,.page-card:focus-visible{transform:translateY(-4px);box-shadow:var(--sh-2)}
.page-card:focus-visible{border-color:var(--blue);box-shadow:var(--sh-2),0 0 0 4px var(--b-26)}
.page-card.busy{cursor:default}
.page-card.busy:hover{transform:none;box-shadow:var(--sh-1)}
.page-card .hl{position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.92)}
/* cursor spotlight */
.page-card .spot{
  position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(27,79,176,.075),transparent 70%);
}
.page-card:hover .spot{opacity:1}
.page-card.busy .spot{opacity:0}

.state{position:relative;display:grid;gap:18px;justify-items:center}
.state[hidden]{display:none}

/* idle */
.doc-glyph{width:44px;height:56px;border:1.5px solid var(--ink-3);border-radius:6px;position:relative;transition:transform .7s var(--spring),border-color .4s ease}
.doc-glyph::before{content:"";position:absolute;left:9px;right:9px;top:12px;height:1.5px;background:var(--ink-3);box-shadow:0 8px 0 var(--ink-3),0 16px 0 var(--ink-3);transition:background .4s ease,box-shadow .4s ease}
.page-card:hover .doc-glyph,body.drag-active .doc-glyph{transform:translateY(-3px);border-color:var(--blue)}
.page-card:hover .doc-glyph::before,body.drag-active .doc-glyph::before{background:var(--blue);box-shadow:0 8px 0 var(--blue),0 16px 0 var(--blue)}

.drop-title{font-family:"Sora",sans-serif;font-size:17px;font-weight:600;letter-spacing:-.025em}
.drop-hint{font-size:14px;color:var(--ink-2)}
.drop-hint .divider{color:var(--ink-3);padding:0 8px}
.privacy{font-size:13px;color:var(--ink-3);margin-top:8px}

/* sign-in gate + credit top-up — same shared "status text under a form"
   treatment (.auth-error) for signup errors, email-report status, and
   top-up errors alike */
.auth-form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px;width:100%}
.email-input{
  font-family:inherit;font-size:15px;letter-spacing:-.006em;
  color:var(--ink);background:var(--surface);
  border:1.5px solid var(--line);border-radius:999px;
  padding:12px 18px;min-width:240px;flex:1 1 240px;
  outline:none;transition:border-color .3s ease;
}
.email-input:focus{border-color:var(--blue)}
.auth-error{font-size:13.5px;color:var(--ink-2);margin-top:10px;max-width:360px;margin-left:auto;margin-right:auto}

.btn-google{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:"Inter",sans-serif;font-size:15px;font-weight:500;letter-spacing:-.01em;
  color:var(--ink);border:1.5px solid var(--line);border-radius:999px;padding:12px 26px;cursor:pointer;outline:none;
  background:linear-gradient(180deg,#FFF 0%,#F8F9F8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(26,26,29,.04);
  width:100%;max-width:320px;
  transition:transform .55s var(--spring),border-color .3s ease;
}
.btn-google:hover{transform:translateY(-1.5px);border-color:var(--ink-3)}
.btn-google:active{transform:translateY(1px)}
.btn-google:focus-visible{border-color:var(--blue);box-shadow:0 0 0 4px var(--b-26)}

.auth-divider{display:flex;align-items:center;gap:12px;width:100%;max-width:320px;color:var(--ink-3);font-size:13px}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)}

.auth-links{margin:0}
.link-btn{
  font-family:inherit;font-size:13.5px;color:var(--ink-2);background:none;border:none;
  padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px;
  transition:color .3s ease;
}
.link-btn:hover{color:var(--blue)}

.topup-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:14px}
.topup-label{font-size:13.5px;color:var(--ink-2)}
.topup-input{
  font-family:inherit;font-size:15px;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--line);border-radius:10px;
  padding:10px 12px;width:72px;text-align:center;
  outline:none;transition:border-color .3s ease;
}
.topup-input:focus{border-color:var(--blue)}

/* buttons */
.btn{
  position:relative;font-family:"Inter",sans-serif;
  font-size:15px;font-weight:500;letter-spacing:-.01em;
  color:#fff;border:none;border-radius:999px;padding:13px 28px;cursor:pointer;overflow:hidden;outline:none;
  background:linear-gradient(180deg,#1B5C7D 0%,#0A2838 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.28),inset 0 -10px 16px -12px rgba(0,0,0,.35),0 2px 4px rgba(10,44,62,.28),0 16px 34px -12px rgba(10,44,62,.55);
  transition:transform .55s var(--spring),box-shadow .55s var(--spring);
}
.btn .sheen{
  position:absolute;inset:0;opacity:0;transition:opacity .4s ease;pointer-events:none;
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.2),transparent 70%);
}
.btn:hover{transform:translateY(-1.5px);background:linear-gradient(180deg,#226D93 0%,#0E3648 100%);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.32),inset 0 -10px 16px -12px rgba(0,0,0,.3),0 3px 6px rgba(10,44,62,.24),0 20px 38px -14px rgba(10,44,62,.6)}
.btn:hover .sheen{opacity:1}
.btn:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(10,44,62,.26)}
.btn:focus-visible{box-shadow:0 0 0 4px var(--b-26)}

.btn-quiet{
  font-family:"Inter",sans-serif;font-size:15px;font-weight:500;letter-spacing:-.01em;
  color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:13px 26px;cursor:pointer;outline:none;
  background:linear-gradient(180deg,#FFF 0%,#F8F9F8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(26,26,29,.04),0 6px 16px -6px rgba(26,26,29,.08);
  transition:transform .55s var(--spring),border-color .3s ease;
}
.btn-quiet:hover{transform:translateY(-1.5px);border-color:var(--ink-3)}
.btn-quiet:active{transform:translateY(1px)}
.btn-quiet:focus-visible{border-color:var(--blue);box-shadow:0 0 0 4px var(--b-26)}

/* ---------- processing: named stages ---------- */
.glide{opacity:0;transform:translateY(16px);animation:rise .8s var(--spring) forwards}

.scan-doc{width:64px;height:82px;background:#fff;border:1.5px solid var(--line);border-radius:8px;position:relative;overflow:hidden;box-shadow:0 8px 24px -6px rgba(26,26,29,.10)}
.scan-doc .lines{position:absolute;left:12px;right:12px;top:16px;height:1.5px;background:var(--line);box-shadow:0 10px 0 var(--line),0 20px 0 var(--line),0 30px 0 var(--line),0 40px 0 var(--line)}
.scan-beam{
  position:absolute;left:0;right:0;height:34px;top:-34px;
  background:linear-gradient(to bottom,transparent,var(--b-06) 55%,var(--b-14) 85%,transparent);
  border-bottom:1px solid var(--blue);
  animation:sweep 2.6s cubic-bezier(.45,0,.25,1) infinite;
}
@keyframes sweep{0%{transform:translateY(0);opacity:0}8%{opacity:1}78%{transform:translateY(116px);opacity:1}92%{opacity:0}100%{transform:translateY(116px);opacity:0}}

.proc-file{font-size:13.5px;font-weight:500;color:var(--ink-2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proc-hint{font-size:12.5px;color:var(--ink-3);margin-top:-8px}

.stages{list-style:none;display:grid;width:100%;max-width:360px;text-align:left;margin-top:4px}
.stage{
  display:grid;grid-template-columns:24px 1fr;align-items:center;gap:13px;
  font-size:14.5px;color:var(--ink-3);overflow:hidden;
  max-height:0;opacity:0;transform:translateY(12px);
  transition:max-height .55s var(--spring-soft),opacity .55s var(--spring-soft),
             transform .7s var(--spring),color .4s ease;
}
.stage.visible{max-height:48px;opacity:1;transform:translateY(0);padding:9px 0}
.stage.visible+.stage.visible{border-top:1px solid rgba(229,231,229,.7)}
.stage.active{color:var(--ink)}
.stage.done{color:var(--ink-2)}
.node{position:relative;width:20px;height:20px;display:grid;place-items:center}
.ring{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--line);transition:border-color .5s,background .5s}
.stage.active .ring{border-color:var(--b-26);background:var(--b-06)}
.stage.active .ring::after{content:"";position:absolute;inset:0;margin:auto;width:6px;height:6px;border-radius:50%;background:var(--blue);animation:breathe 1.5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.7);opacity:.45}50%{transform:scale(1);opacity:1}}
/* GREEN APPEARS HERE — a stage tick means that stage genuinely finished */
.stage.done .ring{border-color:var(--v-26);background:var(--v-14)}
.node svg{position:absolute;inset:0;margin:auto;display:none}
.stage.done .node svg{display:block}
.stage.done .node svg path{stroke:var(--verified);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:18;stroke-dashoffset:18;animation:draw .55s var(--spring-soft) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- success ---------- */
.bloom-wrap{position:relative;width:84px;height:84px;display:grid;place-items:center}
.bloom{position:absolute;inset:0;border-radius:50%;background:var(--v-14);animation:bloom 1.4s var(--spring-soft) forwards}
@keyframes bloom{0%{transform:scale(.3);opacity:0}30%{opacity:1}100%{transform:scale(2.3);opacity:0}}
.big-check{width:72px;height:72px;border-radius:50%;background:var(--v-06);border:1px solid var(--v-26);display:grid;place-items:center;transform:scale(.4);animation:settle .9s var(--spring) forwards}
@keyframes settle{to{transform:scale(1)}}
.big-check path{stroke:var(--verified);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:34;stroke-dashoffset:34;animation:draw .7s var(--spring-soft) .3s forwards}
.success-title{font-family:"Sora",sans-serif;font-size:22px;font-weight:600;letter-spacing:-.03em}
.success-sub{font-size:14.5px;color:var(--ink-2);max-width:400px}
.success-sub .fn{font-weight:500;color:var(--ink)}
.action-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:4px}

/* ---------- post-job feedback widget ----------
   Neutral ink/blue only - verified/failed are validator-authored states
   ONLY (see the tokens block up top), never reused for Verable's own UI. */
.feedback-widget{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:center}
.feedback-widget[hidden]{display:none}
.feedback-prompt{font-size:13.5px;color:var(--ink-2);margin-bottom:10px}
.feedback-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.feedback-vote{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);cursor:pointer;padding:0;
  color:var(--ink-2);transition:border-color .3s ease,color .3s ease,transform .3s ease;
}
.feedback-vote svg{width:16px;height:16px}
.feedback-vote:hover{border-color:var(--ink-3);transform:translateY(-1px)}
.feedback-vote:focus-visible{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--b-26)}
.feedback-vote.selected{border-color:var(--blue);color:var(--blue);background:var(--b-06)}
.feedback-comment-toggle{
  font-family:"Inter",sans-serif;font-size:13.5px;color:var(--ink-2);background:none;border:none;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);cursor:pointer;padding:0;
}
.feedback-comment-toggle:hover{text-decoration-color:var(--ink-3)}
.feedback-comment-box{margin-top:12px;display:flex;flex-direction:column;gap:8px;max-width:420px;width:100%}
.feedback-comment-box[hidden]{display:none}
.feedback-comment-input{
  font-family:"Inter",sans-serif;font-size:14px;color:var(--ink);padding:10px 12px;
  border:1px solid var(--line);border-radius:10px;resize:vertical;min-height:64px;background:var(--surface);
}
.feedback-comment-input:focus-visible{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--b-26)}
.feedback-comment-send{align-self:flex-start;padding:9px 18px;font-size:13.5px}
.feedback-thanks{font-size:13.5px;color:var(--ink-2);margin-top:10px}

/* ---------- report ---------- */
.report{
  max-width:640px;margin:36px auto 0;text-align:left;
  background:linear-gradient(180deg,#FFFFFF 0%,#FDFDFD 50%,#F8F9F8 100%);
  border:1px solid var(--line);border-top-color:#F2F4F2;
  border-radius:22px;box-shadow:var(--sh-1);padding:40px 40px 34px;
  opacity:0;transform:translateY(28px);
}
.report.enter{animation:rise 1s var(--spring) forwards}
.report[hidden]{display:none}
.report-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.report h3{font-family:"Sora",sans-serif;font-size:18px;font-weight:600;letter-spacing:-.028em}
.report-meta{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.report-intro{font-size:14px;color:var(--ink-2);margin:6px 0 26px}

.fix-list{list-style:none;display:grid}
.fix{
  display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:center;
  border-bottom:1px solid var(--line);overflow:hidden;
  max-height:0;opacity:0;transform:translateY(14px);
  transition:max-height .6s var(--spring-soft),opacity .6s var(--spring-soft),transform .75s var(--spring),padding .6s var(--spring-soft);
}
.fix.visible{max-height:92px;opacity:1;transform:translateY(0);padding:15px 0}
.fix:last-of-type{border-bottom:none}
.fix .count{font-family:"Sora",sans-serif;font-size:21px;font-weight:600;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.fix .what{font-size:14.5px;color:var(--ink)}
.fix .what small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}

.review-flag{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;
  background:var(--field);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-top:22px;
  opacity:0;transform:translateY(14px);
}
.review-flag.visible{animation:rise .8s var(--spring) forwards}
.review-flag .tag{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--ink-3);border-radius:5px;padding:3px 7px}
.review-flag p{font-size:13.5px;color:var(--ink-2)}
.review-flag p strong{color:var(--ink);font-weight:500}

/* validator certificate — the one place green carries a result */
.validator{background:var(--field);border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin-top:14px;opacity:0;transform:translateY(14px)}
.validator.visible{animation:rise .8s var(--spring) .15s forwards}
.vtitle{font-size:13.5px;font-weight:600;letter-spacing:-.015em;color:var(--ink);padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.vrow{display:grid;grid-template-columns:104px 1fr;gap:16px;padding:7px 0;font-size:13px;font-variant-numeric:tabular-nums}
.vrow[hidden]{display:none}
.vlabel{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);padding-top:2px}
.vval{color:var(--ink-2);overflow-wrap:anywhere}
.vval.pass{color:var(--verified);font-weight:600}

.verify-row{margin-top:20px;font-size:13.5px;color:var(--ink-2);opacity:0;transform:translateY(14px)}
.verify-row.visible{animation:rise .8s var(--spring) .3s forwards}
.link{color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);transition:text-decoration-color .3s ease}
.link{color:var(--blue)}.link:hover{text-decoration-color:var(--blue)}
.reset-row{text-align:center;margin-top:28px}
.reset-link{font-size:13px;color:var(--ink-2);background:none;border:none;font-family:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);transition:color .3s ease}
.reset-link:hover{color:var(--ink)}
.sample-row{margin-top:26px;font-size:14px;color:var(--ink-2);text-align:center}
input[type="file"]{display:none}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.head-c{text-align:center}
.head-c .section-sub{margin:0 auto}
.flow{display:grid;grid-template-columns:1fr 34px 1fr 34px 1fr;align-items:stretch;gap:8px;margin-top:74px}
@media(max-width:860px){.flow{grid-template-columns:1fr;gap:4px}}
.flow-block{position:relative;border-radius:18px;padding:32px 28px 34px;overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF 0%,#FCFCFC 50%,#F7F8F7 100%);
  border:1px solid var(--line);border-top-color:#F2F4F2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),var(--sh-1);
  transition:transform .7s var(--spring),box-shadow .7s var(--spring);
}
.flow-block:hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.92),var(--sh-2)}
.flow-block::after{
  content:"";position:absolute;top:-60%;bottom:-60%;width:45%;left:-70%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.7) 50%,transparent);
  transform:skewX(-18deg);transition:left 1s var(--spring-soft);pointer-events:none;
}
.flow-block:hover::after{left:135%}
.flow-chip{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--blue);background:var(--b-06);border-radius:6px;padding:5px 10px;display:inline-block;margin-bottom:20px}
.flow-block h3{font-family:"Sora",sans-serif;font-size:18px;font-weight:600;letter-spacing:-.028em;margin-bottom:11px}
.flow-block p{font-size:14.5px;line-height:1.64;color:var(--ink-2)}
.flow-block .kicker{font-weight:500;color:var(--ink)}
.flow-arrow{display:grid;place-items:center;color:var(--blue);opacity:.7}
.flow-arrow path{stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:860px){.flow-arrow{padding:12px 0}.flow-arrow svg{transform:rotate(90deg)}}

/* ============================================================
   WHY NOW
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:72px}
@media(max-width:800px){.stats{grid-template-columns:1fr}}
.stat{border-top:2px solid var(--blue);padding-top:24px}
.stat .num{font-family:"Sora",sans-serif;font-size:clamp(38px,5vw,52px);font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.stat p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin-top:14px;max-width:280px}
.stats-note{font-size:12.5px;color:var(--ink-3);margin-top:44px}

/* ============================================================
   COMPARE — ticks are graphite: these are OUR claims, not a validator's
   ============================================================ */
.compare-scroll{overflow-x:auto;margin-top:74px;padding:28px 8px 44px}
.compare-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr 1.3fr;min-width:840px;position:relative;align-items:stretch}
.us-card{
  position:absolute;top:-22px;bottom:-22px;right:-10px;width:calc(23.8532% + 20px);
  background:linear-gradient(180deg,#FFFFFF 0%,#FCFCFC 60%,#F8F9F8 100%);
  border:1px solid var(--line);border-top-color:#F2F4F2;border-radius:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),var(--sh-2);z-index:0;
}
.cg{position:relative;z-index:1;padding:21px 22px;font-size:14px;color:var(--ink-3);border-bottom:1px solid var(--line);display:flex;align-items:center}
.cg.crit{font-weight:500;color:var(--ink);font-size:14.5px}
.cg.head{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);align-items:flex-end;padding-bottom:17px}
.cg.us{color:var(--ink);font-weight:500;padding-left:28px;padding-right:28px}
.cg.us.head{font-family:"Inter",system-ui,sans-serif;color:var(--ink);font-size:18px;font-weight:700;letter-spacing:-.032em;text-transform:none;gap:6px;align-items:baseline}
.cg.us.head svg{width:10.8px;height:13.5px;color:var(--blue);transform:none}
.cg-last{border-bottom:none!important}
.tick{display:inline-grid;place-items:center;width:17px;height:17px;margin-right:10px;flex-shrink:0}
.tick path{stroke:var(--blue);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   STATEMENT
   ============================================================ */
.statement{max-width:760px;margin:0 auto;text-align:center}
.statement .rule{width:40px;height:2px;background:var(--blue);margin:0 auto 38px}
.statement .line{
  font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:500;font-optical-sizing:auto;
  font-size:clamp(26px,3.8vw,37px);line-height:1.25;letter-spacing:-.015em;
  margin-bottom:30px;text-wrap:balance;
}
.statement .body{font-size:16px;line-height:1.75;color:var(--ink-2);max-width:620px;margin:0 auto}
.statement .body strong{color:var(--ink);font-weight:500}

/* ============================================================
   CLOSE
   ============================================================ */
.closing{background:radial-gradient(900px 500px at 50% -10%,rgba(27,80,105,.45),transparent 62%),var(--blue-deep);color:#fff;padding:clamp(90px,13vh,140px) 24px 0;margin-top:32px}
.closing-inner{max-width:720px;margin:0 auto;text-align:center}
.closing .eyebrow{color:rgba(255,255,255,.5)}
.closing .eyebrow .dot{background:rgba(255,255,255,.5)}
.closing h2{color:#fff}
.closing .section-sub{color:rgba(255,255,255,.62);margin:0 auto}
.btn-light{
  position:relative;font-family:"Inter",sans-serif;font-size:15.5px;font-weight:500;letter-spacing:-.01em;
  color:var(--blue-deep);background:linear-gradient(180deg,#FFFFFF 0%,#F1F5F6 100%);
  border:none;border-radius:999px;padding:16px 36px;margin-top:38px;cursor:pointer;outline:none;
  box-shadow:0 2px 0 rgba(0,0,0,.3),0 16px 40px -8px rgba(0,0,0,.45);
  transition:transform .5s var(--spring),box-shadow .5s var(--spring);
}
.btn-light:hover{transform:translateY(-1.5px)}
.btn-light:active{transform:translateY(2px);box-shadow:0 0 0 rgba(0,0,0,.3),0 6px 16px -6px rgba(0,0,0,.45)}
.btn-light:focus-visible{box-shadow:0 0 0 4px rgba(255,255,255,.28)}

.closing footer{border-top:1px solid rgba(255,255,255,.12);margin-top:clamp(72px,11vh,120px);padding:44px 0 52px}
.foot-wrap{max-width:1020px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap;text-align:left}
.closing .wordmark{color:#fff}
.closing .wordmark svg{color:#fff}
.foot-promise{font-size:13.5px;color:rgba(255,255,255,.6);max-width:420px;line-height:1.68;margin-top:14px}
.foot-promise strong{color:rgba(255,255,255,.9);font-weight:500}
.foot-links{display:grid;gap:10px;font-size:13.5px}
.foot-links a{color:rgba(255,255,255,.6);text-decoration:none;transition:color .3s ease}
.foot-links a:hover{color:#fff}
.foot-meta{font-size:11.5px;font-weight:500;letter-spacing:.08em;color:rgba(255,255,255,.32);margin-top:36px;text-align:center;width:100%}


/* ============================================================
   PROCESSING EXPERIENCE
   ============================================================ */
.px-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;width:100%;padding-bottom:18px;border-bottom:1px solid var(--line);text-align:left}
.px-name{font-size:15px;font-weight:500;letter-spacing:-.012em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.px-meta{font-size:12.5px;color:var(--ink-3);margin-top:3px;font-variant-numeric:tabular-nums}
.px-el{text-align:right;flex-shrink:0}
.px-time{font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.px-range{font-size:12px;color:var(--ink-3);margin-top:3px}

.px-doc{position:relative;width:96px;height:124px;border-radius:9px;background:linear-gradient(180deg,#FFF,#FCFDFD);border:1px solid var(--line);box-shadow:0 2px 5px rgba(22,24,28,.05),0 14px 34px -12px rgba(22,24,28,.16);overflow:hidden;animation:pxbreathe 6s ease-in-out infinite}
@keyframes pxbreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.012)}}
.px-doc .ln{position:absolute;left:16px;height:2px;border-radius:2px;background:#E9EEEF;transition:background .8s ease}
.px-doc .ln.hit{background:var(--b-26)}
.px-beam{position:absolute;left:0;right:0;height:44px;top:-44px;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--b-06) 50%,var(--b-14) 86%,transparent);border-bottom:1px solid var(--b-26);animation:pxsweep 5.2s cubic-bezier(.42,0,.3,1) infinite}
@keyframes pxsweep{0%{transform:translateY(0);opacity:0}10%{opacity:1}72%{transform:translateY(168px);opacity:1}88%{opacity:0}100%{transform:translateY(168px);opacity:0}}
.px-doc.settled{animation:none;transform:none}
.px-doc.settled .px-beam{animation:none;opacity:0}

.px-counts{display:flex;gap:30px;flex-wrap:wrap;justify-content:center}
.px-ct{display:grid;justify-items:center;gap:3px}
.px-ctn{font-family:"Sora",sans-serif;font-size:22px;font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.px-ctl{font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}

.px-stages{list-style:none;display:grid;width:100%;border-top:1px solid var(--line);padding-top:4px;text-align:left}
.px-st{display:grid;grid-template-columns:24px 1fr;gap:14px;align-items:start;padding:13px 0;font-size:15px;color:var(--ink-3);border-top:1px solid rgba(226,231,234,.75);transition:color .6s ease}
.px-st:first-child{border-top:none}
.px-st.active{color:var(--ink)}
.px-st.done{color:var(--ink-2)}
.px-node{position:relative;width:20px;height:20px;display:grid;place-items:center;margin-top:1px}
.px-ring{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--line);transition:border-color .6s,background .6s}
.px-st.active .px-ring{border-color:var(--b-26);background:var(--b-06)}
.px-st.active .px-ring::after{content:"";position:absolute;inset:0;margin:auto;width:6px;height:6px;border-radius:50%;background:var(--blue);animation:pxpulse 2.6s ease-in-out infinite}
@keyframes pxpulse{0%,100%{transform:scale(.62);opacity:.35}50%{transform:scale(1);opacity:.95}}
.px-st.done .px-ring{border-color:var(--v-26);background:var(--v-14)}
.px-node svg{position:absolute;inset:0;margin:auto;display:none}
.px-st.done .px-node svg{display:block}
.px-st.done .px-node svg path{stroke:var(--verified);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:18;stroke-dashoffset:18;animation:draw .6s var(--spring-soft) forwards}
.px-st>span:last-child{display:block}
.px-title{letter-spacing:-.012em}
.px-why{display:block;font-size:13px;color:var(--ink-3);line-height:1.5;max-height:0;opacity:0;overflow:hidden;transition:max-height .7s var(--spring-soft),opacity .6s ease,margin .7s var(--spring-soft)}
.px-st.active .px-why{max-height:70px;opacity:1;margin-top:5px}

.px-feed{width:100%;border-top:1px solid var(--line);margin-top:6px;padding-top:18px;text-align:left}
.px-feedhead{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.px-items{list-style:none;display:grid}
.px-it{display:grid;grid-template-columns:16px 1fr auto;gap:12px;align-items:baseline;font-size:14px;color:var(--ink-2);max-height:0;opacity:0;transform:translateY(10px);overflow:hidden;transition:max-height .65s var(--spring-soft),opacity .6s ease,transform .8s var(--spring),padding .65s var(--spring-soft)}
.px-it.in{max-height:64px;opacity:1;transform:none;padding:9px 0}
.px-it+.px-it.in{border-top:1px solid rgba(226,231,234,.65)}
.px-dot{width:5px;height:5px;border-radius:50%;background:var(--b-26);margin-top:7px}
.px-it.flag .px-dot{background:var(--ink-3)}
.px-itt{line-height:1.45}
.px-itt b{color:var(--ink);font-weight:500}
.px-itm{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}

/* reassurance — centred */
.px-calm{width:100%;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);display:grid;justify-items:center;gap:13px;text-align:center}
.px-calmtext{font-size:13px;color:var(--ink-3);line-height:1.55;max-width:380px}
.px-notify{font-family:inherit;font-size:13px;font-weight:500;color:var(--ink);background:linear-gradient(180deg,#FFF,#F7FAFA);border:1px solid var(--line);border-radius:999px;padding:9px 18px;cursor:pointer;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(22,24,28,.04);transition:transform .5s var(--spring),border-color .3s}
.px-notify:hover{transform:translateY(-1.5px);border-color:var(--ink-3)}
.px-notify:active{transform:translateY(1px)}
.px-notify.set{color:var(--verified);border-color:var(--v-26);background:var(--v-06)}
@media(max-width:560px){.px-doc{width:84px;height:110px}.px-counts{gap:22px}}


/* ============================================================
   FAILURE / PARTIAL / ERROR STATES
   Red is validator-authored, exactly like green.
   ============================================================ */
.px-verdict{display:grid;justify-items:center;gap:14px;text-align:center}
.vr-ring{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--f-24);background:var(--f-08);box-shadow:0 2px 8px rgba(176,74,63,.10),0 14px 30px -14px rgba(176,74,63,.22)}
.vr-ring svg path{stroke:var(--failed);stroke-width:3.6;fill:none;stroke-linecap:round}
.vr-ring svg circle{fill:var(--failed);stroke:none}
.vr-title{font-family:"Sora",sans-serif;font-size:22px;font-weight:600;letter-spacing:-.03em}
.vr-sub{font-size:14.5px;color:var(--ink-2);max-width:430px;line-height:1.6}
.vr-sub b{color:var(--ink);font-weight:500}

.issues{list-style:none;width:100%;max-width:430px;text-align:left;border-top:1px solid var(--line);margin-top:4px}
.issue{display:grid;grid-template-columns:16px 1fr;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.issue .d{width:5px;height:5px;border-radius:50%;background:var(--failed);margin-top:7px}
.issue b{color:var(--ink);font-weight:500}
.issue small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}

.vr-note{font-size:13px;color:var(--ink-3);line-height:1.6;max-width:430px}

/* upload error */
.err{display:grid;justify-items:center;gap:14px;text-align:center}
.err-ring{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--field);box-shadow:0 2px 6px rgba(26,26,29,.05),0 12px 24px -12px rgba(26,26,29,.12)}
.err-ring svg path{stroke:var(--ink-2);stroke-width:3.2;fill:none;stroke-linecap:round}
.err-ring svg circle{fill:var(--ink-2);stroke:none}
.err-t{font-family:"Sora",sans-serif;font-size:18px;font-weight:600;letter-spacing:-.028em}
.err-s{font-size:14px;color:var(--ink-2);max-width:380px;line-height:1.6}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:760px;margin:0 auto}
.faq-list{margin-top:44px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  font-family:"Sora",sans-serif;font-size:16.5px;font-weight:600;letter-spacing:-.024em;color:var(--ink);
  background:none;border:none;text-align:left;padding:20px 0;cursor:pointer;
}
.faq-q .pm{position:relative;width:14px;height:14px;flex-shrink:0;margin-top:5px}
.faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;background:var(--ink-3);border-radius:1px;transition:transform .5s var(--spring),background .3s}
.faq-q .pm::before{top:6px;left:0;width:14px;height:2px}
.faq-q .pm::after{top:0;left:6px;width:2px;height:14px}
.faq-item.open .faq-q .pm::after{transform:scaleY(0)}
.faq-item.open .faq-q .pm::before{background:var(--blue)}
.faq-a{max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--spring-soft),opacity .5s ease,padding .6s var(--spring-soft)}
.faq-item.open .faq-a{max-height:260px;opacity:1;padding-bottom:22px}
.faq-a p{font-size:15px;line-height:1.7;color:var(--ink-2);max-width:640px}
.faq-a p+p{margin-top:12px}
.faq-a b{color:var(--ink);font-weight:500}

@media(prefers-reduced-motion:reduce){
  .rise,.glide,.bloom,.big-check,.report.enter,.review-flag.visible,.validator.visible,.verify-row.visible{animation:none;opacity:1;transform:none}
  .reveal{opacity:1;transform:none;transition:none}
  .scan-beam,.stage.active .ring::after,.flow-block::after{animation:none;display:none}
  .stage.done .node svg path,.big-check path{animation:none;stroke-dashoffset:0}
  *{transition-duration:.01ms!important}
}
@media(max-width:560px){.page-card{padding:42px 22px}.report{padding:30px 22px 26px}}