:root{
    --ink:#1C1830;
    --indigo-950:#170D3B;
    --indigo-800:#2B1968;
    --indigo-700:#39238A;
    --gold-500:#D6A03F;
    --gold-600:#BD8A2E;
    --paper:#FBF8F2;
    --paper-2:#F3EEE2;
    --emerald-700:#1F6B4F;
    --line:#E3DCC9;
    --line-dark:rgba(255,255,255,.14);
  }

  *{box-sizing:border-box;}

  /* ---------- No-scroll page layout (opt-in via body.no-scroll-page) ---------- */
  body.no-scroll-page{
    height:100vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  body.no-scroll-page .navbar-knqa{ flex:none; }
  body.no-scroll-page footer{ flex:none; padding:1.2rem 0; }
  body.no-scroll-page .footer-plate{ padding:.4rem .8rem; margin-bottom:1rem !important; }
  body.no-scroll-page .footer-plate img{ height:28px; }
  body.no-scroll-page .chat-fab{ display:none; }
  body.no-scroll-page .page-main{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
  }
  body.no-scroll-page .page-main > section,
  body.no-scroll-page .page-main > header{
    flex:1 1 auto;
    min-height:0;
  }

  body{
    font-family:'Public Sans', sans-serif;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3,.font-display{
    font-family:'Fraunces', serif;
    letter-spacing:-.01em;
  }

  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:.72rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    font-weight:500;
  }

  a{ text-decoration:none; }

  /* ---------- Seal motif (signature element) ---------- */
  .seal-svg circle{ vector-effect:non-scaling-stroke; }

  /* ---------- Navbar ---------- */
  .navbar-knqa{
    background:var(--indigo-950);
    padding:.9rem 0;
    border-bottom:1px solid var(--line-dark);
  }
  .brandmark{
    display:flex; align-items:center; gap:.6rem;
  }
  .brandmark img{ height:44px; width:auto; display:block; }
  .navbar-knqa .nav-link{
    color:rgba(255,255,255,.72) !important;
    font-weight:500;
    font-size:.94rem;
    padding:.5rem .9rem !important;
    transition:color .15s ease;
  }
  .navbar-knqa .nav-link.active,
  .navbar-knqa .nav-link:hover{ color:#fff !important; }
  .lang-pill{
    background:transparent;
    border:1px solid var(--line-dark);
    color:rgba(255,255,255,.75);
    font-size:.82rem;
    border-radius:100px;
    padding:.38rem .95rem;
  }
  .lang-pill:focus{ box-shadow:none; border-color:var(--gold-500); color:#fff; }
  .btn-account{
    border:1px solid var(--line-dark);
    color:#fff;
    border-radius:100px;
    font-size:.88rem;
    padding:.4rem 1rem;
  }
  .btn-account:hover{ border-color:var(--gold-500); color:var(--gold-500); }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    background:var(--indigo-950);
    overflow:hidden;
    padding:3.6rem 0 2.6rem;
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      radial-gradient(circle at 14% 20%, rgba(214,160,63,.14), transparent 40%),
      radial-gradient(circle at 88% 78%, rgba(57,35,138,.55), transparent 45%);
    pointer-events:none;
  }
  .hero-eyebrow{ color:var(--gold-500); }
  .hero h1{
    color:#fff;
    font-size:clamp(2.3rem, 4.2vw, 3.4rem);
    font-weight:600;
    line-height:1.08;
  }
  .hero h1 em{
    font-style:italic;
    font-weight:500;
    color:var(--gold-500);
  }
  .hero p.lead{
    color:rgba(255,255,255,.72);
    font-size:1.08rem;
    max-width:34rem;
    line-height:1.65;
  }
  .btn-gold{
    background:var(--gold-500);
    border:1px solid var(--gold-500);
    color:var(--indigo-950);
    font-weight:600;
    border-radius:100px;
    padding:.78rem 1.7rem;
    transition:transform .15s ease, background .15s ease;
  }
  .btn-gold:hover{ background:#fff; color:var(--indigo-950); transform:translateY(-1px); }
  .btn-ghost-light{
    border:1px solid rgba(255,255,255,.35);
    color:#fff;
    font-weight:600;
    border-radius:100px;
    padding:.78rem 1.7rem;
  }
  .btn-ghost-light:hover{ border-color:#fff; background:rgba(255,255,255,.06); color:#fff; }

  .hero-seal-wrap{
    position:relative;
    max-width:380px;
    margin:0 auto 0 auto;
    padding:0 0 2rem 2.6rem;
  }
  @media (min-width:992px){
    .hero-seal-wrap{ margin:-.6rem 0 0 auto; }
  }

  /* Alignment card: sits behind/lower-left, shows the framework mapping */
  .align-card{
    position:absolute;
    left:0; bottom:0;
    width:230px;
    background:var(--indigo-800);
    border:1px solid rgba(255,255,255,.14);
    border-radius:12px;
    padding:1.1rem 1.2rem 1.25rem;
    box-shadow:0 24px 50px -18px rgba(0,0,0,.6);
    transform:rotate(-3deg);
    z-index:1;
  }
  .align-card .align-eyebrow{ color:var(--gold-500); font-size:.64rem; }
  .align-card .align-from{ color:rgba(255,255,255,.68); font-size:.78rem; margin:.35rem 0 .7rem; }
  .align-ladder{ display:flex; align-items:flex-end; gap:3px; height:44px; }
  .align-ladder i{
    flex:1; border-radius:2px 2px 0 0;
    background:rgba(255,255,255,.16);
  }
  .align-ladder i.hit{ background:var(--gold-500); position:relative; }
  .align-ladder i.hit::after{
    content:"7";
    position:absolute; top:-18px; left:50%; transform:translateX(-50%);
    font-family:'IBM Plex Mono', monospace; font-size:.62rem; color:var(--gold-500);
  }

  /* Document card: the qualification record, sits on top */
  .hero-doc{
    position:relative;
    background:var(--paper);
    border-radius:14px;
    padding:1.9rem 1.9rem 2.1rem;
    box-shadow:0 30px 70px -20px rgba(0,0,0,.55);
    width:100%;
    margin-left:auto;
    transform:rotate(1.4deg);
    z-index:2;
  }
  .hero-doc .doc-eyebrow{ color:var(--emerald-700); }
  .hero-doc .doc-title{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:1.2rem;
    margin:.3rem 0 .9rem;
    padding-right:2.6rem;
  }
  .hero-doc .doc-row{
    display:flex; justify-content:space-between;
    font-size:.82rem; padding:.5rem 0;
    border-bottom:1px dashed var(--line);
    color:#5B5670;
  }
  .hero-doc .doc-row b{ color:var(--ink); font-weight:600; }
  .hero-doc .doc-row.status b{ color:var(--emerald-700); }

  /* Corner seal: clean validation badge, clear of all text */
  .corner-seal{
    position:absolute;
    top:-22px; right:-22px;
    width:78px; height:78px;
    z-index:3;
  }
  .corner-seal .stamp-ring{
    animation:spin 40s linear infinite;
    transform-origin:50% 50%;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){
    .corner-seal .stamp-ring{ animation:none; }
  }

  .assurance-strip{
    position:relative;
    border-top:1px solid var(--line-dark);
    margin-top:2.2rem;
    padding-top:1.4rem;
  }
  .assurance-item{
    display:flex; align-items:flex-start; gap:.7rem;
    color:rgba(255,255,255,.78);
    font-size:.9rem;
  }
  .assurance-item i{ color:var(--gold-500); font-size:1.15rem; margin-top:.1rem; }

  /* ---------- Forgery band ---------- */
  .forgery-band{
    background:var(--indigo-800);
    padding:1.7rem 0;
  }
  .forgery-band h3{
    color:#fff; font-weight:600; font-size:1.5rem; margin-bottom:.35rem;
  }
  .forgery-band p{ color:rgba(255,255,255,.68); margin:0; font-size:.94rem; }
  .btn-report{
    background:transparent;
    border:1.5px solid var(--gold-500);
    color:var(--gold-500);
    font-weight:600;
    border-radius:100px;
    padding:.72rem 1.6rem;
    white-space:nowrap;
  }
  .btn-report:hover{ background:var(--gold-500); color:var(--indigo-950); }

  /* ---------- Section shell ---------- */
  section{ padding:5.5rem 0; }
  .section-tight{ padding:4.5rem 0; }
  .kicker{
    color:var(--emerald-700);
  }
  .section-title{
    font-size:clamp(1.7rem, 2.6vw, 2.3rem);
    font-weight:600;
    margin-top:.4rem;
  }
  .rule{
    width:52px; height:2px;
    background:var(--gold-500);
    margin:1.1rem 0 1.6rem;
  }

  /* ---------- About ---------- */
  .about-wrap{ position:relative; padding-bottom:4.5rem; }
  .kicker-tick{
    display:inline-block; width:18px; height:1px;
    background:var(--emerald-700);
  }
  .about-subtitle{
    font-family:'IBM Plex Mono', monospace;
    font-size:.78rem;
    color:#8A8499;
    letter-spacing:.04em;
    margin-top:.6rem;
  }
  .about-copy{
    font-size:1.08rem; line-height:1.85; color:#3A3550;
    max-width:56rem; margin:0 auto;
  }
  .about-copy p{ margin-bottom:1.15rem; }

  .citation-strip{
    max-width:60rem;
    margin:2.6rem auto 0;
    background:var(--indigo-950);
    border-left:4px solid var(--gold-500);
    border-radius:4px 12px 12px 4px;
    padding:1.6rem 2.2rem;
    display:flex;
    align-items:center;
    gap:2rem;
    flex-wrap:wrap;
  }
  .citation-eyebrow{ color:var(--gold-500); }
  .citation-text{
    font-family:'IBM Plex Mono', monospace;
    font-size:.86rem;
    line-height:1.55;
    color:#fff;
    margin-top:.35rem;
  }
  .citation-divider{
    width:1px; align-self:stretch;
    background:rgba(255,255,255,.16);
  }
  @media (max-width: 767px){ .citation-divider{ display:none; } }
  .citation-facts{
    list-style:none; margin:0; padding:0;
    display:flex; flex-direction:column; gap:.6rem;
    flex:1; min-width:14rem;
  }
  .citation-facts li{
    display:flex; align-items:flex-start; gap:.55rem;
    font-size:.88rem; color:rgba(255,255,255,.78);
  }
  .citation-facts i{ color:var(--gold-500); margin-top:.2rem; }

  /* ---------- Requirements + Steps (side by side) ---------- */
  .section-title-sm{
    font-size:clamp(1.35rem, 1.8vw, 1.7rem);
    font-weight:600;
    margin-top:.3rem;
  }
  .col-intro{ color:#5B5670; font-size:.96rem; max-width:30rem; margin-bottom:1.8rem; }

  .req-compact-list{ display:flex; flex-direction:column; }
  .req-compact-item{
    display:flex; gap:1rem;
    padding:1.1rem 0;
    border-bottom:1px solid var(--line);
  }
  .req-compact-item:first-child{ padding-top:0; }
  .req-compact-item:last-child{ border-bottom:none; }
  .req-compact-icon{
    flex:none;
    width:2.3rem; height:2.3rem;
    border-radius:50%;
    background:#fff;
    border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold-600);
    font-size:.95rem;
  }
  .req-compact-body{ flex:1; padding-top:.1rem; }
  .req-compact-num{
    font-family:'IBM Plex Mono', monospace;
    font-size:.78rem;
    font-weight:500;
    color:var(--indigo-800);
    display:block;
    margin-bottom:.25rem;
  }
  .req-compact-body p{ margin:0; font-size:.92rem; line-height:1.55; color:#5B5670; }

  .stepper-vertical{ position:relative; margin-top:1.8rem; }
  .stepper-item{
    display:flex; gap:1.1rem;
    position:relative;
    padding-bottom:2.1rem;
  }
  .stepper-item:last-child{ padding-bottom:0; }
  .stepper-item::before{
    content:"";
    position:absolute;
    left:22px; top:46px; bottom:6px;
    width:1px;
    background-image:linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 12px);
    background-size:1px 12px;
  }
  .stepper-item:last-child::before{ display:none; }
  .stepper-marker{
    flex:none;
    width:44px; height:44px;
    border-radius:50%;
    background:#fff;
    border:1.5px solid var(--gold-500);
    display:flex; align-items:center; justify-content:center;
    color:var(--indigo-800);
    font-size:1.15rem;
    z-index:1;
  }
  .stepper-body h4{
    font-family:'Fraunces', serif;
    font-weight:600; font-size:1.05rem; margin:.15rem 0 .35rem;
  }
  .stepper-body p{ font-size:.9rem; color:#5B5670; line-height:1.55; margin:0; max-width:22rem; }

  /* ---------- CTA close ---------- */
  .cta-close{
    background:var(--paper-2);
    border-top:1px solid var(--line);
    text-align:center;
    padding:4.5rem 0;
  }
  .cta-close h3{ font-weight:600; font-size:1.9rem; }
  .cta-close p{ color:#5B5670; max-width:32rem; margin:.7rem auto 1.8rem; }
  .btn-dark-gold{
    background:var(--indigo-950);
    color:var(--gold-500);
    border:1px solid var(--indigo-950);
    font-weight:600;
    border-radius:100px;
    padding:.8rem 1.9rem;
  }
  .btn-dark-gold:hover{ background:var(--indigo-800); color:#fff; }

  /* ---------- Footer ---------- */
  footer{
    background:var(--indigo-950);
    padding:2.6rem 0 2rem;
    color:rgba(255,255,255,.6);
    font-size:.88rem;
  }
  footer a{ color:rgba(255,255,255,.75); }
  footer a:hover{ color:var(--gold-500); }
  .footer-plate{
    background:var(--paper);
    border-radius:10px;
    padding:.7rem 1.1rem;
    display:inline-block;
  }
  .footer-plate img{ height:40px; width:auto; display:block; }

  /* ---------- Chat FAB (cosmetic) ---------- */
  .chat-fab{
    position:fixed; right:1.4rem; bottom:1.4rem;
    width:54px; height:54px; border-radius:50%;
    background:var(--gold-500);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 12px 26px -8px rgba(0,0,0,.45);
    color:var(--indigo-950); font-size:1.3rem;
    z-index:1050;
  }

  :focus-visible{ outline:2px solid var(--gold-500); outline-offset:2px; }

  /* ---------- django-bootstrap4 / Bootstrap 5 compatibility shim ----------
     django-bootstrap4's show_label=False renders <label class="sr-only">,
     but Bootstrap 5 renamed that utility to .visually-hidden and dropped
     .sr-only entirely — so without this rule, "hidden" labels render fully
     visible. This restores the standard visually-hidden technique under
     the class name django-bootstrap4 actually emits. */
  .sr-only{
    position:absolute !important;
    width:1px !important; height:1px !important;
    padding:0 !important; margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
  }

  /* ---------- Global flash messages (rendered once, in base.html) ----------
     Previously each page rendered its own {% if messages %} loop, so a
     message queued before a redirect to a page without that block (e.g.
     the homepage) was silently dropped — it sat in the message store,
     unconsumed, until the person happened to land on a page that did
     render messages. Rendering this once in base.html means every page
     shows queued messages immediately. */
  .site-messages-wrap{
    position:fixed;
    left:1.1rem;
    bottom:1.1rem;
    z-index:1090;
    display:flex;
    flex-direction:column;
    gap:.6rem;
    width:min(380px, calc(100vw - 2.2rem));
    pointer-events:none;
  }
  @keyframes toastIn{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .site-alert{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:flex-start;
    gap:.65rem;
    border-radius:10px;
    border:1px solid var(--line);
    background:#fff;
    box-shadow:0 18px 40px -14px rgba(23,13,59,.32);
    font-size:.92rem;
    padding:.85rem 1rem;
    margin-bottom:0;
    pointer-events:auto;
    animation:toastIn .32s ease-out;
  }
  @keyframes toastCountdown{
    from{ transform:scaleX(1); }
    to{ transform:scaleX(0); }
  }
  .site-alert::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:3px;
    background:currentColor;
    opacity:.28;
    transform-origin:left center;
    animation:toastCountdown 6s linear forwards;
  }
  .site-alert:hover::after{ animation-play-state:paused; }
  @media (prefers-reduced-motion: reduce){
    .site-alert{ animation:none; }
    .site-alert::after{ display:none; }
  }
  .site-alert i{ flex:none; margin-top:.15rem; font-size:1rem; }
  .site-alert-text{ flex:1; }
  .site-alert.alert-success{ border-left:4px solid var(--emerald-700); }
  .site-alert.alert-success i{ color:var(--emerald-700); }
  .site-alert.alert-warning{ border-left:4px solid var(--gold-500); }
  .site-alert.alert-warning i{ color:var(--gold-600); }
  .site-alert.alert-info{ border-left:4px solid var(--indigo-700); }
  .site-alert.alert-info i{ color:var(--indigo-700); }
  .site-alert.alert-danger{ border-left:4px solid #B3453E; }
  .site-alert.alert-danger i{ color:#B3453E; }

  @media (max-width: 480px){
    .site-messages-wrap{ left:.6rem; bottom:.6rem; }
  }

  /* ---------- Terms/legal modal ---------- */
  .knqa-modal{
    border:none;
    border-radius:14px;
    overflow:hidden;
  }
  .knqa-modal-header{
    background:var(--indigo-950);
    border-bottom:none;
    padding:1.3rem 1.6rem;
  }
  .knqa-modal-header .modal-title{
    font-family:'Fraunces', serif;
    font-weight:600;
    color:#fff;
    font-size:1.2rem;
  }
  .knqa-modal-body{
    padding:1.8rem 1.8rem 1.4rem;
    color:#3A3550;
    font-size:.95rem;
    line-height:1.7;
  }
  .knqa-modal-body h3{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:1.05rem;
    color:var(--indigo-800);
    margin:1.4rem 0 .6rem;
  }
  .knqa-modal-body h3:first-child{ margin-top:0; }
  .knqa-modal-body ul{ padding-left:1.2rem; margin-bottom:0; }
  .knqa-modal-body li{ margin-bottom:.7rem; }
  .knqa-modal-body li::marker{ color:var(--gold-600); }
  .knqa-modal-footer{
    background:var(--paper-2);
    border-top:1px solid var(--line);
    padding:1rem 1.6rem;
  }
  .knqa-modal-footer .btn-gold{ padding:.55rem 1.4rem; font-size:.9rem; }