/* ============================================================================
   ViTViT — sign-up / sign-in surface
   ----------------------------------------------------------------------------
   Shared by /enskri/*, /konekte/* and /kont. Loaded as an external stylesheet
   rather than inlined per page: the wizard shell is identical across ~30 step
   URLs, so one cached download beats inlining the same 20 KB thirty times.
   The homepage's single-file rule exists to protect first paint on 3G; here
   the same goal is served by caching, and by keeping this file small.

   Three surface languages, all built on the tokens index.html already ships:
     · NEUMORPHIC — inputs, PIN pad, doc tiles. Same formula as the apps
       (docs/design-mockups/2026-05-08-driver-registration-form-v3.html).
     · GLASS      — the sticky progress header only. One glass element per
       screen; more than that and nothing reads as foreground.
     · CLAY       — primary actions and choice tiles. New here. Thick, soft,
       squeezable. This is what makes the page feel physical rather than flat.
   ========================================================================== */

@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/fraunces-400-700-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:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/fraunces-400-700-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:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/plusjakartasans-400-700-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:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/plusjakartasans-400-700-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:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/jetbrainsmono-400-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;}

:root{
  /* Identical to index.html — never fork these. */
  --brand-navy:#042C53; --brand-navy-deep:#021a35; --brand-navy-soft:#0A3A6B;
  --sig:#378ADD; --sig-soft:#5A9BE5; --sig-deep:#185FA5;
  --mist:#B5D4F4; --brand-green:#00C853;
  --surface:#E4EBF5; --surface-raised:#EBF1F9; --surface-sunken:#D5DFF0;
  --surface-hi:#F5F8FD; --surface-lo:#A0B4CF;
  --ink:#0A1E35; --ink-soft:#1E3A5C; --ink-dim:#3A5A7C; --ink-faint:#47678A;
  --success:#1D9E75; --warning:#F57C00; --danger:#A32D2D; --gold:#FFB800;
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:9999px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* NEUMORPHIC — the apps' formula, unchanged. */
  --nm-raised:6px 6px 14px var(--surface-lo),-6px -6px 14px var(--surface-hi);
  --nm-raised-sm:3px 3px 8px var(--surface-lo),-3px -3px 8px var(--surface-hi);
  --nm-inset:inset 3px 3px 6px var(--surface-lo),inset -3px -3px 6px #fff;
  --nm-inset-deep:inset 5px 5px 10px var(--surface-lo),inset -5px -5px 10px #fff;

  /* GLASS — header only. */
  --glass-bg:rgba(240,246,255,.72);
  --glass-brd:rgba(255,255,255,.78);

  /* CLAY — soft body, light rim on top, weight underneath. */
  --clay-face:linear-gradient(145deg,#fdfeff,#dae3f1);
  --clay-shadow:0 16px 28px -12px rgba(4,44,83,.30),
                inset 0 -6px 11px rgba(4,44,83,.10),
                inset 0 6px 10px rgba(255,255,255,.95);
  --clay-shadow-press:0 5px 12px -8px rgba(4,44,83,.34),
                inset 0 5px 12px rgba(4,44,83,.16),
                inset 0 -3px 7px rgba(255,255,255,.7);
  --clay-navy:linear-gradient(145deg,#26538f,#042C53);
  --clay-navy-shadow:0 16px 26px -10px rgba(4,44,83,.55),
                     inset 0 -6px 12px rgba(0,0,0,.26),
                     inset 0 6px 11px rgba(255,255,255,.20);
  --focus:0 0 0 3px rgba(55,138,221,.45);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.ens{
  min-height:100dvh; background:var(--surface); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  display:flex; flex-direction:column;
}
/* The same ambient wash as the homepage, so the funnel feels like the site. */
body.ens::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 12% 4%,rgba(55,138,221,.09),transparent 52%),
    radial-gradient(ellipse at 88% 92%,rgba(4,44,83,.10),transparent 55%);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:none;box-shadow:var(--focus)!important}
.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}
.sr-only:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;clip:auto;padding:10px 16px;background:var(--brand-navy);color:#fff;border-radius:var(--r-full);z-index:100;font-weight:700}

/* ── Top bar — the only glass element ─────────────────────────────────────── */
.ens-top{
  position:sticky; top:0; z-index:20;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5);
  border-bottom:1px solid var(--glass-brd);
}
.ens-top__row{
  max-width:560px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; gap:12px;
}
.ens-brand{display:flex;align-items:center;gap:9px;margin-right:auto;min-width:0}
.ens-brand img{width:30px;height:30px;border-radius:9px}
.ens-brand b{font-family:var(--font-display);font-size:16px;letter-spacing:-.2px;color:var(--brand-navy)}
.ens-brand span{display:block;font-size:9.5px;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-faint);font-weight:600;line-height:1}

.ens-lang{display:flex;gap:2px;padding:3px;border-radius:var(--r-sm);background:var(--surface);box-shadow:var(--nm-inset)}
.ens-lang a,.ens-lang button{padding:4px 8px;border-radius:7px;font-size:11px;font-weight:600;color:var(--ink-faint);line-height:1.3;
  border:0;background:transparent;font-family:inherit;cursor:pointer}
.ens-lang a[aria-current],.ens-lang button[aria-current]{background:#fff;color:var(--brand-navy-soft);box-shadow:var(--nm-raised-sm)}

/* Progress — a hairline, not a dashboard. */
.ens-prog{max-width:560px;margin:0 auto;padding:0 16px 10px}
.ens-prog__meta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.ens-prog__step{font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;font-weight:700;color:var(--ink-faint)}
.ens-prog__saved{font-size:10.5px;font-weight:600;color:var(--success);display:none;align-items:center;gap:5px}
.ens-prog__saved.on{display:flex}
.ens-prog__saved::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--success)}
.ens-prog__track{height:5px;border-radius:var(--r-full);background:var(--surface);box-shadow:var(--nm-inset);overflow:hidden}
.ens-prog__fill{height:100%;border-radius:var(--r-full);background:linear-gradient(90deg,var(--brand-navy-soft),var(--sig));transition:width .45s var(--ease)}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.ens-main{position:relative;z-index:1;flex:1;width:100%;max-width:560px;margin:0 auto;padding:22px 16px 132px}
.ens-head{margin-bottom:20px}
.ens-eyebrow{font-size:11px;letter-spacing:1.1px;text-transform:uppercase;font-weight:700;color:var(--sig-deep);margin-bottom:7px}
.ens-h1{font-family:var(--font-display);font-size:clamp(25px,7vw,33px);line-height:1.12;letter-spacing:-.6px;color:var(--brand-navy);font-weight:600}
/* text-wrap:balance stops a lede ending with a one-word orphan on its own
   line — the download pages were rendering "…pou ou / a." with the last two
   characters stranded. Balance evens the lines instead of filling greedily.
   Unsupported browsers ignore it and fall back to normal wrapping, so this
   costs nothing on an older Android. */
.ens-lede{margin-top:9px;color:var(--ink-dim);font-size:15px;max-width:44ch;text-wrap:balance}

.ens-card{background:var(--surface-raised);border-radius:var(--r-xl);padding:20px 18px;box-shadow:var(--nm-raised);margin-bottom:14px}
.ens-card--flat{background:transparent;box-shadow:none;padding:0}

/* ── Fields — neumorphic, exactly as the apps ─────────────────────────────── */
.f{margin-bottom:16px}
.f__label{display:block;font-size:11px;letter-spacing:.6px;text-transform:uppercase;font-weight:700;color:var(--ink-faint);margin-bottom:7px}
.f__req{color:var(--danger);margin-left:3px}
.f__hint{margin-top:7px;font-size:12.5px;color:var(--ink-faint);line-height:1.45}
.f__err{margin-top:7px;font-size:13px;color:var(--danger);font-weight:600;display:none}
.f.is-bad .f__err{display:block}
.f.is-bad .inp,.f.is-bad .phone{box-shadow:var(--nm-inset),0 0 0 2px rgba(163,45,45,.5)}

/* 16px keeps iOS from zooming the viewport on focus. */
.inp{
  width:100%; font:500 16px/1.4 var(--font-body); color:var(--ink);
  background:#fff; border:0; border-radius:var(--r-md); padding:14px 15px;
  box-shadow:var(--nm-inset); outline:none;
  transition:box-shadow .2s var(--ease);
}
.inp::placeholder{color:#9BA7B8;font-weight:400}
.inp:focus{box-shadow:var(--nm-inset),var(--focus)}
textarea.inp{min-height:88px;resize:vertical}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233A5A7C' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:42px}
.f__row{display:flex;gap:10px}
.f__row>*{flex:1;min-width:0}

/* Phone — the country code is fixed; Haiti is the only market. */
.phone{display:flex;align-items:stretch;background:#fff;border-radius:var(--r-md);box-shadow:var(--nm-inset);overflow:hidden}
.phone__cc{display:flex;align-items:center;gap:7px;padding:0 12px 0 15px;font-weight:700;font-size:15px;color:var(--ink-soft);border-right:1px solid rgba(160,180,207,.35);white-space:nowrap}
.phone__cc svg{width:20px;height:14px;border-radius:2px;flex:none}
.phone input{flex:1;min-width:0;border:0;outline:none;background:transparent;padding:14px 15px;font:600 17px/1.4 var(--font-mono);letter-spacing:.5px;color:var(--ink)}
.phone:focus-within{box-shadow:var(--nm-inset),var(--focus)}

/* ── OTP boxes ────────────────────────────────────────────────────────────── */
.otp{display:flex;gap:8px;justify-content:space-between;direction:ltr}
.otp input{
  flex:1; min-width:0; aspect-ratio:3/4; max-width:56px;
  text-align:center; font:700 24px/1 var(--font-mono); color:var(--brand-navy);
  background:#fff; border:0; border-radius:var(--r-md); box-shadow:var(--nm-inset);
  outline:none; padding:0;
}
.otp input:focus{box-shadow:var(--nm-inset),var(--focus)}
.otp input.filled{background:linear-gradient(145deg,#fff,#eef4fc)}

/* ── PIN — dots + a real keypad, same as the app ──────────────────────────── */
.pin-dots{display:flex;gap:13px;justify-content:center;margin:6px 0 26px}
.pin-dots i{width:15px;height:15px;border-radius:50%;background:var(--surface);box-shadow:var(--nm-inset);transition:transform .2s var(--ease-spring),background .2s}
.pin-dots i.on{background:linear-gradient(145deg,var(--sig),var(--sig-deep));box-shadow:0 3px 8px rgba(24,95,165,.45);transform:scale(1.16)}
.pin-dots.bad i{background:var(--danger);box-shadow:none;animation:shake .4s}
@keyframes shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}50%{transform:translateX(-4px)}}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;max-width:310px;margin:0 auto}
.pad button{
  aspect-ratio:1.45/1; border:0; cursor:pointer; font:600 25px/1 var(--font-body); color:var(--brand-navy);
  background:var(--clay-face); border-radius:var(--r-lg); box-shadow:var(--clay-shadow);
  transition:box-shadow .12s var(--ease),transform .12s var(--ease);
}
.pad button:active{box-shadow:var(--clay-shadow-press);transform:translateY(2px)}
.pad button.ghost{background:transparent;box-shadow:none}
.pad button svg{margin:0 auto;stroke:var(--ink-soft)}

/* ── Clay choice tiles — roles, vehicles, sectors, services ───────────────── */
.tiles{display:grid;gap:12px}
.tiles--3{grid-template-columns:repeat(3,1fr)}
.tile{
  position:relative; width:100%; text-align:left; cursor:pointer; border:0;
  font-family:inherit; color:var(--ink);
  background:var(--clay-face); border-radius:var(--r-xl); padding:16px;
  box-shadow:var(--clay-shadow);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.tile:hover{transform:translateY(-3px)}
.tile:active{box-shadow:var(--clay-shadow-press);transform:translateY(1px)}
.tile[aria-pressed="true"],.tile.sel{
  background:var(--clay-navy); color:#fff; box-shadow:var(--clay-navy-shadow);
}
.tile[aria-pressed="true"] .tile__sub,.tile.sel .tile__sub{color:var(--mist)}
.tile[aria-pressed="true"] .tile__ico,.tile.sel .tile__ico{background:rgba(255,255,255,.16);color:#fff}
.tile__ico{
  width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,var(--brand-navy-soft),var(--sig));color:#fff;margin-bottom:11px;
  box-shadow:0 7px 14px -5px rgba(31,70,131,.5);
}
.tiles--3 .tile{padding:14px 9px;text-align:center}
.tiles--3 .tile__ico{margin:0 auto 8px;width:40px;height:40px;border-radius:12px}
.tile__name{font-weight:700;font-size:15.5px;letter-spacing:-.2px;display:block}
.tiles--3 .tile__name{font-size:13.5px}
.tile__sub{display:block;font-size:12.5px;color:var(--ink-faint);margin-top:3px;line-height:1.4}
.tiles--3 .tile__sub{font-size:10.5px}
.tile__check{position:absolute;top:12px;right:12px;opacity:0;transform:scale(.6);transition:.25s var(--ease-spring)}
.tile[aria-pressed="true"] .tile__check,.tile.sel .tile__check{opacity:1;transform:scale(1)}

/* Exploded deck — the three role cards on /enskri, and the vehicle picker.
   Layers separate along Z on entry, then settle. Same idea as /veyikil. */
/* The entry motion animates POSITION ONLY. Opacity is never animated, so the
   tiles are readable no matter what the animation does.

   Two attempts got this wrong. First the reveal was a class added inside
   requestAnimationFrame, which does not run while a document is not being
   rendered — a background tab or a webview that never paints showed an EMPTY
   card where the choices should be. Replacing it with a CSS animation did NOT
   fix it: measured 05/09/2026, a keyframe with `both` fill strands the element
   on its invisible `from` state for exactly the same reason, because the
   animation timeline has not started either.

   So visibility is not something to animate. The worst case here is a tile
   sitting 22px low — legible, tappable, merely un-animated — instead of a
   blank card. Content must never need anything to run in order to be seen. */
.explode>*{animation:explodeIn .5s var(--ease-spring) both}
.explode>*:nth-child(1){animation-delay:.04s}
.explode>*:nth-child(2){animation-delay:.13s}
.explode>*:nth-child(3){animation-delay:.22s}
.explode>*:nth-child(4){animation-delay:.31s}
@keyframes explodeIn{
  from{transform:translateY(22px) scale(.96)}
  to{transform:none}
}

/* ── Document / photo capture tiles ───────────────────────────────────────── */
.docs{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.doc{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  min-height:118px;padding:13px 10px;cursor:pointer;border:0;font-family:inherit;text-align:center;
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--nm-inset);color:var(--ink-soft);
  transition:box-shadow .25s var(--ease)
}
.doc input{position:absolute;inset:0;opacity:0;cursor:pointer}
.doc__name{font-size:12.5px;font-weight:700;line-height:1.3}
.doc__state{font-size:10.5px;color:var(--ink-faint)}
.doc svg{stroke:var(--sig-deep)}
.doc.has{box-shadow:var(--nm-raised-sm),inset 0 0 0 2px var(--success)}
.doc.has .doc__state{color:var(--success);font-weight:700}
.doc.busy{opacity:.6;pointer-events:none}
.doc__thumb{position:absolute;inset:0;border-radius:var(--r-lg);object-fit:cover;width:100%;height:100%;opacity:.22}

/* ── Avatar picker ────────────────────────────────────────────────────────── */
.avatar{position:relative;width:110px;height:110px;margin:0 auto 8px;border-radius:50%;background:var(--surface);box-shadow:var(--nm-inset-deep);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden}
.avatar input{position:absolute;inset:0;opacity:0;cursor:pointer}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avatar__badge{position:absolute;right:2px;bottom:6px;width:32px;height:32px;border-radius:50%;background:var(--clay-navy);box-shadow:var(--clay-navy-shadow);display:flex;align-items:center;justify-content:center;color:#fff}

/* ── Checkbox rows (terms, services) ──────────────────────────────────────── */
.check{display:flex;gap:11px;align-items:flex-start;cursor:pointer;padding:3px 0;margin-bottom:9px}
.check input{position:absolute;opacity:0;width:0;height:0}
.check__box{flex:none;width:23px;height:23px;border-radius:7px;background:#fff;box-shadow:var(--nm-inset);display:flex;align-items:center;justify-content:center;margin-top:1px;transition:.2s var(--ease)}
.check__box svg{opacity:0;transform:scale(.5);transition:.2s var(--ease-spring);stroke:#fff}
.check input:checked+.check__box{background:var(--clay-navy);box-shadow:0 4px 10px -3px rgba(4,44,83,.5)}
.check input:checked+.check__box svg{opacity:1;transform:scale(1)}
.check input:focus-visible+.check__box{box-shadow:var(--focus)}
.check__txt{font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.check__txt a{color:var(--sig-deep);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* ── Notes ────────────────────────────────────────────────────────────────── */
.note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);font-size:13px;line-height:1.5;margin-bottom:14px}
.note svg{flex:none;margin-top:1px}
.note--info{background:rgba(55,138,221,.09);color:var(--sig-deep);border:1px solid rgba(55,138,221,.2)}
.note--warn{background:rgba(245,124,0,.10);color:#8a5200;border:1px solid rgba(245,124,0,.26)}
.note--bad{background:rgba(163,45,45,.09);color:var(--danger);border:1px solid rgba(163,45,45,.24)}
.note--ok{background:rgba(29,158,117,.10);color:#0F6E56;border:1px solid rgba(29,158,117,.26)}

/* ── Docked actions ───────────────────────────────────────────────────────── */
.ens-dock{
  position:fixed;left:0;right:0;bottom:0;z-index:15;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--surface) 62%,rgba(228,235,245,0));
}
.ens-dock__in{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:9px}
.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  min-height:54px;padding:15px 20px;border:0;cursor:pointer;
  font:700 16px/1 var(--font-body);letter-spacing:-.1px;
  border-radius:var(--r-lg);transition:box-shadow .14s var(--ease),transform .14s var(--ease)
}
.btn--go{background:var(--clay-navy);color:#fff;box-shadow:var(--clay-navy-shadow)}
.btn--go:active{box-shadow:var(--clay-shadow-press);transform:translateY(2px)}
.btn--ghost{background:transparent;color:var(--ink-dim);box-shadow:none;min-height:44px;font-size:14px;font-weight:600}
.btn--ghost:hover{color:var(--brand-navy)}
.btn--soft{background:var(--clay-face);color:var(--brand-navy);box-shadow:var(--clay-shadow)}
.btn--soft:active{box-shadow:var(--clay-shadow-press);transform:translateY(2px)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn__spin{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none}
.btn.busy .btn__spin{display:block}
.btn.busy .btn__txt{opacity:.75}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Result screens ───────────────────────────────────────────────────────── */
.seal{width:104px;height:104px;margin:4px auto 18px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--clay-navy);box-shadow:var(--clay-navy-shadow);color:#fff;animation:inflate .6s var(--ease-spring) both}
.seal--ok{background:linear-gradient(145deg,#2fbf94,#0F6E56);box-shadow:0 16px 26px -10px rgba(15,110,86,.55),inset 0 -6px 12px rgba(0,0,0,.2),inset 0 6px 11px rgba(255,255,255,.25)}
.seal--wait{background:linear-gradient(145deg,#ffa640,#d96b00);box-shadow:0 16px 26px -10px rgba(217,107,0,.5),inset 0 -6px 12px rgba(0,0,0,.18),inset 0 6px 11px rgba(255,255,255,.28)}
@keyframes inflate{from{transform:scale(.55);opacity:0}to{transform:scale(1);opacity:1}}
.seal--wait::after{content:'';position:absolute;width:104px;height:104px;border-radius:50%;border:2px solid rgba(217,107,0,.32);animation:ring 2.2s ease-out infinite}
@keyframes ring{from{transform:scale(.92);opacity:.9}to{transform:scale(1.45);opacity:0}}

.idcard{background:var(--clay-navy);box-shadow:var(--clay-navy-shadow);border-radius:var(--r-xl);padding:20px;text-align:center;color:#fff;margin-bottom:16px}
.idcard__lbl{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;opacity:.8;font-weight:700}
.idcard__val{font:700 27px/1.2 var(--font-mono);letter-spacing:1.5px;margin:7px 0 5px}
.idcard__foot{font-size:12.5px;opacity:.85}

/* ── Checklist (the /kont portal) ─────────────────────────────────────────── */
.list{display:flex;flex-direction:column;gap:10px}
.item{display:flex;gap:13px;align-items:center;padding:14px 15px;background:var(--surface-raised);border-radius:var(--r-lg);box-shadow:var(--nm-raised-sm);color:inherit}
a.item:hover{box-shadow:var(--nm-raised)}
.item__ico{flex:none;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--surface);box-shadow:var(--nm-inset);color:var(--ink-faint)}
.item.done .item__ico{background:linear-gradient(145deg,#2fbf94,#0F6E56);color:#fff;box-shadow:0 5px 11px -4px rgba(15,110,86,.5)}
.item__mid{flex:1;min-width:0}
.item__t{display:block;font-weight:700;font-size:14.5px;line-height:1.35}
.item__s{display:block;font-size:12.5px;color:var(--ink-faint);margin-top:3px;line-height:1.4}
.pill{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:4px 9px;border-radius:var(--r-full);white-space:nowrap}
.pill--done{background:rgba(29,158,117,.15);color:#0F6E56}
.pill--todo{background:rgba(55,138,221,.14);color:var(--sig-deep)}
.pill--wait{background:rgba(245,124,0,.16);color:#8a5200}

.meter{height:9px;border-radius:var(--r-full);background:var(--surface);box-shadow:var(--nm-inset);overflow:hidden;margin:10px 0 6px}
.meter i{display:block;height:100%;border-radius:var(--r-full);background:linear-gradient(90deg,var(--brand-navy-soft),var(--sig));transition:width .8s var(--ease)}

/* ── Turnstile ──────────────────────────────────────────────────────────────
   One visible widget per step that can send an OTP, torn down with the step.
   It must never be hidden or off-screen: Turnstile will not solve a challenge
   it cannot see, which is how an earlier "park it off-screen so it survives
   navigation" design failed — it survived, then never produced another token. */
.cf{margin:4px 0 14px;min-height:0}
/* The widget must be VISIBLE — Turnstile refuses to solve a challenge it
   cannot see, which is how the previous off-screen design failed. */
.cf{display:flex;justify-content:center}
.cf:empty{display:none}

/* ── Step transitions ─────────────────────────────────────────────────────── */
.step-in{animation:stepIn .38s var(--ease) both}
@keyframes stepIn{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}


@media (max-width:359px){
  .otp{gap:5px}
  .pad{gap:8px}
  .tiles--3{gap:7px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .explode>*{transform:none;animation:none}
}

/* ── Utilities ─────────────────────────────────────────────────────────────
   These exist because the sign-up pages ship `style-src 'self'` with NO
   'unsafe-inline' (see the CSP in build-signup-pages.py). That is a
   deliberately stronger policy than the marketing pages carry, because these
   pages hold session tokens — so every style attribute that would normally be
   written inline lives here as a class instead. Dynamic values (progress
   width, score meter) are set through CSSOM, which CSP permits.
   ------------------------------------------------------------------------ */
.u-center{text-align:center}
.u-link{color:var(--sig-deep);font-weight:700}
.u-pt0{padding-top:0}
.u-pb0{padding-bottom:0}
.u-mb22{margin-bottom:22px}
.u-mb18{margin-bottom:18px}
.u-mt14{margin-top:14px}
.u-mt20{margin-top:20px}
.u-mb9{margin-bottom:9px}
.sp-14{height:14px}
.sp-16{height:16px}
.sp-20{height:20px}

.tile__time{display:block;font-size:12px;margin-top:7px;font-weight:700;color:var(--ink-dim)}
.tile[aria-pressed="true"] .tile__time{color:var(--mist)}

.points{list-style:none;font-size:14.5px;line-height:1.5}
.points li{display:flex;gap:11px;align-items:flex-start;margin-bottom:11px}
.points li:last-child{margin-bottom:0}
.points li>span:first-child{flex:none;margin-top:3px;color:var(--sig-deep)}

.ens-prog__fill{width:0}
.meter i{width:0}

.score-row{display:flex;justify-content:space-between;align-items:baseline}
.score-row .f__label{margin:0}
.score-val{font:700 17px/1 var(--font-mono);color:var(--brand-navy)}

.lede--tight{margin:10px auto 22px}
.avatar-hint{text-align:center;margin-bottom:18px}
.resend-wrap{text-align:center;margin-top:16px}
.hidden{display:none}

/* ── App cards (/telechaje/apple, /telechaje/google) ───────────────────────
   Same clay surface as the funnel's choice tiles, but these are content, not
   controls: the whole card is not clickable, because a card can carry either a
   real download link or a "not yet — sign up on the web" pair, and a card that
   is itself a link cannot hold two destinations honestly.
   ------------------------------------------------------------------------ */
.apps{display:flex;flex-direction:column;gap:14px;margin-bottom:22px}
.appcard{
  background:var(--clay-face); border-radius:var(--r-xl); padding:18px;
  box-shadow:var(--clay-shadow);
}
.appcard__top{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
/* App icons: a rounded square on BOTH platforms.
   The circle mask tried earlier was technically how a Pixel launcher renders
   an adaptive icon, but it cropped the mark tighter than either store shows
   it and made the three icons read as three different shapes on one page.
   One squircle everywhere is calmer and is what both store listings actually
   display. The hairline ring matters: the client icon is white artwork on a
   white background, and without an edge it dissolves into the card. */
.appcard__ico{
  flex:none;width:76px;height:76px;border-radius:23%;
  background:var(--surface-raised);
  box-shadow:
    0 6px 14px -5px rgba(4,44,83,.30),
    0 0 0 1px rgba(4,44,83,.09);
}
.appcard__ico--apple,.appcard__ico--google{border-radius:23%}
.appcard__body{flex:1;min-width:0}
.appcard__who{
  display:block;font-size:11px;letter-spacing:.9px;text-transform:uppercase;
  font-weight:700;color:var(--sig-deep);margin-bottom:3px;
}
.appcard__name{
  font-family:var(--font-display);font-size:21px;line-height:1.15;
  letter-spacing:-.3px;color:var(--brand-navy);font-weight:600;margin-bottom:5px;
}
.appcard__sub{font-size:14px;line-height:1.45;color:var(--ink-dim)}
.appcard__note{
  font-size:13px;line-height:1.5;color:#8a5200;
  background:rgba(245,124,0,.10);border:1px solid rgba(245,124,0,.26);
  border-radius:var(--r-md);padding:11px 13px;margin-bottom:12px;
}
.appcard__head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.appcard .btn{min-height:50px}
.appcard--soon{background:linear-gradient(145deg,#fdfeff,#e6ecf6)}

.dl-foot{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;margin-top:6px}
.dl-foot a{font-weight:700;color:var(--sig-deep)}
.dl-note{font-size:13px;color:var(--ink-faint)}

@media (min-width:640px){
  .appcard__ico{width:84px;height:84px}
}

/* ══ DESKTOP ═══════════════════════════════════════════════════════════════
   Mobile-first does not mean mobile-only. Below, three things stop behaving
   like a phone screen that happened to be opened on a laptop:

   1. THE ACTION RETURNS TO THE FORM. On a phone the primary button is docked
      to the bottom of the viewport, which is correct — it sits under the
      thumb. On a 900px-tall desktop window that same rule stranded "Kontinye"
      hundreds of pixels below the field it submits, with dead space between
      them. From 640px up the dock is a normal row directly beneath the card.

   2. BUTTONS ARE SIZED TO THEIR LABEL. A full-width button is right on a
      360px phone and absurd at 528px wide for a 23-character label. From
      640px they size to content and sit on one row, primary first.

   3. CHOICES SPREAD, FORMS DO NOT. A set of options (roles, apps) should use
      the width it is given; a form field should not. `data-layout` says which
      kind of page this is, so the hub and the download pages open into a grid
      while the wizard stays a readable column — a 1000px-wide text input is
      worse, not better.
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width:640px){
  .ens-main{padding:36px 24px 24px}
  body.ens{padding-bottom:0}
  .docs{grid-template-columns:repeat(3,1fr)}

  /* 1 — the dock rejoins the page.
     body.ens is a column flexbox and .ens-main carries flex:1, which on a
     phone is what pins the dock to the bottom of the screen — correct there.
     On a tall desktop window that same rule pushed the button hundreds of
     pixels below the form. Main stops growing here; content sits at the top
     and the action follows it immediately. */
  .ens-main{flex:0 0 auto}
  .ens-dock{position:static;background:none;padding:0 24px 40px}
  .ens-dock__in{flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap}

  /* 2 — buttons fit their label */
  .btn{width:auto;min-width:210px;padding:15px 30px}
  .btn--ghost{min-width:0;padding:12px 16px}
  .btn--soft{min-width:190px}
  /* The primary leads; secondary actions follow it, never stacked below. */
  .ens-dock__in .btn--go{order:0}
  .ens-dock__in .btn--ghost{order:1}
}

/* 3 — pages that are a set of CHOICES get room to breathe.
   Two columns first: three across a 768px tablet wraps every button label
   onto two lines, which looks accidental. Three only once there is room. */
@media (min-width:720px){
  body[data-layout="grid"] .ens-main{max-width:1060px}
  /* A one-sentence lede introducing a row of cards should sit on one line
     when the row is that wide; 44ch would break it in half for no reason. */
  body[data-layout="grid"] .ens-lede{max-width:none}
  body[data-layout="grid"] .tiles:not(.tiles--3){grid-template-columns:repeat(2,1fr);align-items:stretch}
  body[data-layout="grid"] .tile{display:flex;flex-direction:column}
  body[data-layout="grid"] .tile__sub{flex:1}
  .apps{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:stretch}
  /* Three cards in two columns leaves the third stranded beside an empty half.
     An odd last card spans the row instead, so the grid always looks decided
     rather than short one item. Same for the role tiles on /enskri. */
  .apps>:last-child:nth-child(odd){grid-column:1/-1}
  body[data-layout="grid"] .tiles:not(.tiles--3)>:last-child:nth-child(odd){grid-column:1/-1}
  .appcard{display:flex;flex-direction:column}
  .appcard__top{flex-direction:column;gap:12px;flex:1}
  .appcard__sub{flex:1}
  /* The three calls to action line up along the bottom of the row even though
     one card carries an extra explanatory note. Ragged CTAs read as an
     accident; a straight line reads as a decision. */
  /* "Telechaje sou Google Play" is four characters longer than the App Store
     label and wrapped to two lines inside a third of the row, which left the
     three buttons ragged. Tighter side padding keeps every label on one line
     in all three languages. */
  .appcard .btn{width:100%;min-width:0;margin-top:auto;padding-left:14px;padding-right:14px;font-size:15px}
  .appcard__ico{width:88px;height:88px}
}

@media (min-width:980px){
  body[data-layout="grid"] .tiles:not(.tiles--3){grid-template-columns:repeat(3,1fr)}
  .apps{grid-template-columns:repeat(3,1fr);gap:24px}
  /* Three columns hold three cards exactly — the orphan span above would now
     stretch the last card across the whole row for no reason. */
  .apps>:last-child:nth-child(odd),
  body[data-layout="grid"] .tiles:not(.tiles--3)>:last-child:nth-child(odd){grid-column:auto}
}

/* The landing pages put the pitch beside the form instead of a metre above it.
   Kept to one wide breakpoint: below this, stacked is genuinely better. */
@media (min-width:1000px){
  body.ens[data-hero="1"][data-view="entry"]{
    max-width:1140px;margin:0 auto;
    display:grid;grid-template-columns:1.05fr .95fr;
    column-gap:56px;align-content:start;grid-template-rows:auto auto 1fr;
  }
  body.ens[data-hero="1"][data-view="entry"] > .ens-top{grid-column:1/-1}
  /* The pitch spans both content rows so the form and its button stack tightly
     in the right column. Without the span, row 2 stretches to the height of
     the taller left column and drops the button ~100px below the field it
     submits — the same "where did the button go" problem the fixed dock had
     on desktop, reintroduced by the grid. */
  body.ens[data-hero="1"][data-view="entry"] > #ensHero{grid-column:1;grid-row:2/span 2;padding-right:0}
  body.ens[data-hero="1"][data-view="entry"] > #ensMain{grid-column:2;grid-row:2;padding-top:36px;padding-bottom:0}
  body.ens[data-hero="1"][data-view="entry"] > .ens-dock{grid-column:2;grid-row:3;padding-top:14px;align-self:start}
  body.ens[data-hero="1"][data-view="entry"] .ens-h1{font-size:clamp(30px,3.1vw,42px)}
  body.ens[data-hero="1"][data-view="entry"] .ens-lede{font-size:16px}
}