:root{
      --bg:#ffffff;
      --text:#111827;
      --muted:#4b5563;
      --border:#e5e7eb;
      --soft:#f9fafb;
      --accent:#db143c; /* primary */
      --accentSoft:#fde7ec; /* tint */
      --ok:#0f766e;
      --warn:#a16207;
      --err:#b91c1c;
      --radius:14px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

      --endorse-h: 72px;
      --endorse-gap: 10px;
      --endorse-pad: 10px;
      --endorse-max: 980px;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }

    body{
      margin:0;
      font-family:var(--sans);
      background:var(--bg);
      color:var(--text);
      line-height:1.45;

      padding-bottom: calc(var(--endorse-h) + 22px);
    }

    /* Top progress bar */
    .top-progress{
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 8px;
      background: var(--soft);
      border-bottom: 1px solid var(--border);
      z-index: 9999;
    }
    .top-progress > div{
      height: 100%;
      width: 0%;
      background: var(--accent);
      transition: width .25s ease;
    }
    @media (prefers-reduced-motion: reduce){
      .top-progress > div{ transition:none; }
    }

    /* Centered layout */
    .shell{
      min-height: 100vh;
      display:flex;
      justify-content:center;
      padding: 24px 18px;
      padding-top: calc(24px + 8px);
    }
    .shell.center-if-possible{ align-items:center; }
    @media (max-height: 720px){
      .shell.center-if-possible{ align-items:flex-start; }
    }
    main{
      width: min(920px, 100%);
      display:flex;
      flex-direction:column;
      gap: 16px;
      margin: 0 auto;
    }

    /* Pages in normal flow */
    .pages{ display:block; }
    .page[hidden]{ display:none !important; }

    /* Fade animations */
    .page.fade-in{ animation: fadeIn .20s ease-out both; }
    .page.fade-out{ animation: fadeOut .16s ease-in both; }
    @keyframes fadeIn{
      from{ opacity:0; transform: translateY(6px); }
      to{ opacity:1; transform: translateY(0); }
    }
    @keyframes fadeOut{
      from{ opacity:1; transform: translateY(0); }
      to{ opacity:0; transform: translateY(-4px); }
    }
    @media (prefers-reduced-motion: reduce){
      .page.fade-in, .page.fade-out{ animation:none; }
    }

    h1,h2{ margin: 0 0 10px; line-height:1.2; }
    h1{ font-size: 1.65rem; letter-spacing:.2px; }
    h2{ font-size: 1.18rem; }
    p{ margin: 0 0 12px; color: var(--muted); max-width: 85ch; }
    .content-block{ max-width: 85ch; }

    ul.bullets{
      margin: 10px 0 0;
      padding-left: 0;
      list-style: none;
      color: var(--muted);
      max-width: 85ch;
    }
    ul.bullets li{
      margin: 8px 0;
      display:flex;
      gap:10px;
      align-items:flex-start;
    }
    .icon{
      width: 22px;
      display:inline-flex;
      justify-content:center;
      margin-top: 1px;
    }

    .note{
      border: 1px solid var(--border);
      background: var(--soft);
      border-radius: var(--radius);
      padding: 12px 12px;
      margin: 14px 0;
      color: var(--muted);
      max-width: 85ch;
    }
    .note strong{ color: var(--text); }

    .grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin: 12px 0;
      max-width: 85ch;
    }
    @media (max-width: 820px){
      .grid{ grid-template-columns: 1fr; }
    }

    label.field{
      display:block;
      font-size: .92rem;
      color: var(--text);
      margin-bottom: 6px;
      font-weight: 900;
    }
    input[type="text"], input[type="email"]{
      width:100%;
      padding: 11px 12px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: #fff;
      color: var(--text);
      outline: none;
    }
    input::placeholder{ color: #94a3b8; }
    input:focus{
      border-color: color-mix(in srgb, var(--accent) 35%, #ffffff);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
    }
    .mini{
      color: var(--muted);
      font-size: .88rem;
      margin-top: 6px;
    }

    /* Checkbox labels */
    .checks{
      display:flex;
      flex-direction:column;
      gap:10px;
      margin-top: 10px;
      max-width: 85ch;
    }
    label.check{
      display:flex;
      gap:10px;
      align-items:flex-start;
      padding: 10px 10px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: #fff;
      color: var(--muted);
      cursor:pointer;
    }
    label.check input{ margin-top: 3px; }
    label.check strong{ color: var(--text); }
    label.check:focus-within{
      border-color: color-mix(in srgb, var(--accent) 35%, #ffffff);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
    }

    .filebox{
      border: 1px dashed #cbd5e1;
      border-radius: var(--radius);
      padding: 14px;
      background: #fff;
      display:flex;
      flex-direction:column;
      gap:10px;
      max-width: 85ch;
    }
    input[type="file"]{
      width:100%;
      padding: 10px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: #fff;
      color: var(--muted);
    }
    .filemeta{
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
      color: var(--muted);
      font-size: .92rem;
      margin-top: 2px;
      align-items:center;
    }
    .pill{
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--soft);
      color: var(--muted);
    }

    .btn{
      border: 1px solid var(--border);
      background: #fff;
      color: var(--text);
      border-radius: 12px;
      padding: 10px 12px;
      font-weight: 900;
      cursor:pointer;
      transition: background .12s ease, transform .06s ease;
      white-space: nowrap;
    }
    .btn:hover{ background: var(--soft); }
    .btn:active{ transform: translateY(1px); }
    .btn.accent{
      border-color: color-mix(in srgb, var(--accent) 35%, #ffffff);
      background: color-mix(in srgb, var(--accentSoft) 60%, #ffffff);
    }

    /* Status */
    .status{
      margin-top: 12px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--soft);
      color: var(--muted);
      max-width: 85ch;
    }
    .status[hidden]{ display:none !important; }
    .status.ok{
      border-color: rgba(15, 118, 110, .35);
      background: rgba(15, 118, 110, .08);
      color: #0f3b37;
    }
    .status.warn{
      border-color: color-mix(in srgb, var(--accent) 25%, #e5e7eb);
      background: color-mix(in srgb, var(--accentSoft) 70%, #ffffff);
      color: #4b1020;
    }
    .status.err{
      border-color: rgba(185, 28, 28, .35);
      background: rgba(185, 28, 28, .08);
      color: #5f1212;
    }

    /* Preview wrap */
    .preview-wrap{
      max-width: 85ch;
      margin: 12px auto 0;
    }
    pre{
      margin: 0;
      padding: 14px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: #0b1020;
      color: #e5e7eb;
      overflow:auto;
      max-height: 380px;
      font-family: var(--mono);
      font-size: .90rem;
      width: 100%;
    }

    /* Visual view */
    .visual{
      border: 1px solid var(--border);
      background: #fff;
      border-radius: var(--radius);
      padding: 12px;
      width: 100%;
      color: var(--text);
    }

    /* Expandable sections */
    details{
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fff;
      margin-top: 10px;
      overflow:hidden;
    }
    details > summary{
      list-style:none;
      cursor:pointer;
      padding: 12px 12px;
      background: var(--soft);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      font-weight: 950;
      color: var(--text);
    }
    details > summary::-webkit-details-marker{ display:none; }
    .summary-meta{
      color: var(--muted);
      font-weight: 900;
      font-size: .9rem;
    }
    .details-body{
      padding: 12px;
      overflow-y: scroll;
    }

    .kv{
      display:grid;
      grid-template-columns: 160px 1fr;
      gap: 8px 12px;
      align-items:start;
      margin-bottom: 10px;
    }
    .k{ color: var(--muted); font-weight: 950; }
    .v{ color: var(--text); }

    /* Tables */
    table{
      width:100%;
      border-collapse: collapse;
      border-radius: 10px;
      overflow:hidden;
    }
    th, td{
      border-top: 1px solid var(--border);
      padding: 10px 10px;
      text-align:left;
      font-size: .95rem;
      vertical-align: top;
    }
    th{
      background: var(--soft);
      color: var(--muted);
      font-weight: 950;
    }
    .reqs{
      color: var(--muted);
      font-weight: 800;
      font-size: .92rem;
    }

    .outcome{
      color: #6b7280;
      font-weight: 900;
      display:inline-flex;
      align-items:center;
      gap:8px;
      white-space:nowrap;
    }
    .dot{
      width: 8px; height: 8px;
      border-radius: 999px;
      background: #cbd5e1;
      flex: 0 0 auto;
    }
    .dot.bad{ background: #e5b4bf; } /* soft */
    .dot.good{ background: #cbd5e1; } /* neutral */

    /* Mode switcher: pill */
    .mode-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin: 10px auto 10px;
      max-width: 85ch;
    }
    .mode-row .label{
      color: var(--muted);
      font-weight: 900;
      font-size: .95rem;
    }
    .pill-switch{
      display:inline-flex;
      border: 1px solid var(--border);
      background: var(--soft);
      border-radius: 999px;
      padding: 4px;
      gap: 4px;
    }
    .pill-switch input{
      position:absolute;
      opacity:0;
      width:1px; height:1px;
      pointer-events:none;
    }
    .pill-switch label{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 8px 12px;
      border-radius: 999px;
      cursor:pointer;
      font-weight: 950;
      color: var(--muted);
      user-select:none;
      border: 1px solid transparent;
      background: transparent;
      min-width: 92px;
    }
    .pill-switch input:checked + label{
      background: #fff;
      color: var(--text);
      border-color: color-mix(in srgb, var(--accent) 25%, #e5e7eb);
      box-shadow: 0 1px 0 rgba(0,0,0,.03);
    }
    .pill-switch input:focus-visible + label{
      outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
      outline-offset: 2px;
    }

    /* Controls row */
    .controls{
      display:flex;
      justify-content:center;
      align-items:center;
      gap: 10px;
      padding: 6px 0 24px;
      flex-wrap: wrap;
    }

    /* Progress-fill Next button */
    .progress-btn{
      --fill: 0%;
      position: relative;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--accent) 35%, #ffffff);
      background: #fff;
      color: var(--text);
      border-radius: 999px;
      padding: 12px 18px;
      font-weight: 950;
      cursor:pointer;
      min-width: min(420px, 90vw);
      text-align:center;
      user-select:none;
      transition: transform .06s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
    }
    .progress-btn::before{
      content:"";
      position:absolute;
      inset:0;
      width: var(--fill);
      background: var(--accentSoft);
      transition: width .20s linear;
    }
    .progress-btn > span{
      position: relative;
      z-index: 1;
      display:inline-flex;
      align-items:center;
      gap:10px;
      justify-content:center;
    }
    .progress-btn:hover{ background: var(--soft); }
    .progress-btn:active{ transform: translateY(1px); }
    .progress-btn[aria-disabled="true"]{
      opacity: .60;
      cursor:not-allowed;
    }

    /* Focus rings only for keyboard users */
    body.no-kbd :focus{ outline:none; }
    :focus-visible{
      outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
      outline-offset: 2px;
      border-radius: 999px;
    }

    .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;
    }

    .endorsement-wrap{
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: 10px;
      width: calc(100% - 20px);
      max-width: var(--endorse-max);
      z-index: 9998; /* below top progress, above content */
      pointer-events: none; /* only inner links clickable */
    }

    .endorsement{
      pointer-events: auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      min-height: var(--endorse-h);
      padding: var(--endorse-pad) 12px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--border) 75%, #ffffff);
      background: color-mix(in srgb, #ffffff 88%, var(--soft));
      box-shadow: 0 10px 30px rgba(17, 24, 39, .10);
      backdrop-filter: blur(10px);
    }

    .endorsement-left{
      display:flex;
      align-items:center;
      gap: 12px;
      min-width: 0;
    }

    .avatar-row{
      display:flex;
      align-items:center;
      gap: 10px;
      flex: 0 0 auto;
    }

    .avatar{
      width: 52px;
      height: 52px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--border) 70%, #ffffff);
      box-shadow: 0 1px 0 rgba(0,0,0,.04);
      background: var(--soft);
      overflow:hidden;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      flex: 0 0 auto;
    }

    .avatar img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display:block;
    }

    .endorsement-text{
      display:flex;
      flex-direction:column;
      gap: 2px;
      min-width: 0;
    }

    .endorsement-title{
      font-weight: 950;
      font-size: .95rem;
      color: var(--text);
      line-height: 1.15;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .endorsement-sub{
      font-size: .86rem;
      color: var(--muted);
      line-height: 1.15;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .endorsement-sub b{
      color: var(--text);
      font-weight: 900;
    }

    .endorsement-right{
      display:flex;
      align-items:center;
      gap: 10px;
      flex: 0 0 auto;
    }

    .endorsement a{
      color: var(--text);
      text-decoration: none;
      font-weight: 900;
      font-size: .88rem;
      /*border: 1px solid var(--border);
      padding: 8px 12px;
      border-radius: 999px;
      background: #fff;
      transition: background .12s ease, transform .06s ease, border-color .12s ease;
      white-space: nowrap;*/
    }

    .endorsement a:hover{
      background: var(--soft);
      border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
    }

    .endorsement a:active{ transform: translateY(1px); }

    .endorsement .chip{
      border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
      background: color-mix(in srgb, var(--accentSoft) 55%, #ffffff);
    }

    @media (max-width: 640px){
      :root{ --endorse-h: 84px; }
      body{ padding-bottom: calc(var(--endorse-h) + 26px); }

      .endorsement{
        border-radius: 18px;
        padding: 10px 12px;
      }
      .endorsement-title{
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
      }
      .endorsement-sub{
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
      }
      .endorsement-right a{
        padding: 8px 10px;
      }
    }

    @media (prefers-reduced-transparency: reduce){
      .endorsement{ backdrop-filter: none; }
    }

.endorsement-wrap{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* Respect iOS safe-area inset */
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  width: calc(100% - 20px);
  max-width: var(--endorse-max);
  z-index: 9998;
  pointer-events: none;
}

.endorsement{
  pointer-events: auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;

  min-height: var(--endorse-h);
  padding: var(--endorse-pad) 12px;

  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, #ffffff);
  background: color-mix(in srgb, #ffffff 88%, var(--soft));
  box-shadow: 0 10px 30px rgba(17, 24, 39, .10);
  backdrop-filter: blur(10px);
}

.endorsement-left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}

.avatar-row{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}

.avatar{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, #ffffff);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  background: var(--soft);
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

.avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Text */
.endorsement-text{
  display:flex;
  flex-direction:column;
  gap: 2px;
  min-width: 0;
}

.endorsement-name{
  font-weight: 950;
}

.endorsement-title{
  font-weight: 950;
  font-size: .95rem;
  color: var(--text);
  line-height: 1.15;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.endorsement-sub{
  font-size: .86rem;
  color: var(--muted);
  line-height: 1.15;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.endorsement-sub b{
  color: var(--text);
  font-weight: 900;
}

.endorsement-sep{
  margin: 0 6px;
  opacity: .75;
}

/* Links */
.endorsement-right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}

.endorsement a,
.endorsement-link{
  color: var(--text);
  text-decoration: none;
  font-weight: 900;
  font-size: .88rem;
}
.endorsement-link {
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  transition: background .12s ease, transform .06s ease, border-color .12s ease;
  white-space: nowrap;
}

.endorsement a:hover,
.endorsement-link:hover{
  background: var(--soft);
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
}
.endorsement a:active,
.endorsement-link:active{ transform: translateY(1px); }

.endorsement .chip{
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  background: color-mix(in srgb, var(--accentSoft) 55%, #ffffff);
}

/* Mobile-only trust line (hidden by default) */
.endorsement-sub-mobile{
  display: none;
  font-size: .86rem;
  color: var(--muted);
  line-height: 1.15;
}

/* Ensure page content never gets covered by footer, incl safe-area */
body{
  padding-bottom: calc(var(--endorse-h) + 22px + env(safe-area-inset-bottom, 0px));
}

/* ----------------------------
   MOBILE BREAKPOINTS
   ---------------------------- */

/* Small screens: make it a 2-row layout + hide links if needed */
@media (max-width: 660px){
  :root{ --endorse-h: 86px; }

  .endorsement{
    border-radius: 18px;
    padding: 10px 12px;

    /* switch to grid so text can wrap nicely */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: 8px;
    align-items: start;
  }

  .endorsement-left{
    width: 100%;
  }

  .endorsement-title{
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  /* Hide long verify + source links on small screens */
  .endorsement-sub{
    display: none;
  }
  .endorsement-right{
    display: none;
  }

  /* Replace with a compact, non-link trust line */
  .endorsement-sub-mobile{
    display: block;
  }
}

/* Very small screens: tighten avatar sizes slightly */
@media (max-width: 380px){
  .avatar{ width: 48px; height: 48px; }
}

/* Reduce transparency settings */
@media (prefers-reduced-transparency: reduce){
  .endorsement{ backdrop-filter: none; }
}

/* ============================================================
   Guarantee the fixed endorsement bar never covers controls
   ============================================================ */

/* One source of truth for the bottom "no-cover" zone */
:root{
  /* footer height + gap + iOS safe-area inset */
  --bottom-safe: calc(var(--endorse-h) + 18px + env(safe-area-inset-bottom, 0px));
}

/* Keep page content scrollable above the footer */
body{
  padding-bottom: calc(var(--bottom-safe) + 12px);
}

/* IMPORTANT:
   When the wizard is vertically centered (center-if-possible),
   add extra bottom padding to the shell so the centered main
   never lands behind the fixed footer. */
.shell{
  padding-bottom: calc(24px + var(--bottom-safe));
}

/* Extra belt-and-suspenders:
   Push the controls row upward by adding safe padding below it. */
.controls{
  padding-bottom: calc(24px + var(--bottom-safe));
}