/* ============ Design tokens — matched to the Kikof app UI ============
     ink       #0B3540  — deep teal-navy, base background (main app panel)
     panel     #123F4B  — raised surface (card/backdrop)
     panel-2   #17515F  — lighter raised surface / hover state
     teal      #2E9BAE  — accent teal, primary highlight
     teal-dim  #1B4A54  — muted teal, used sparingly
     gold      #F4B400  — warm gold, secondary accent (jersey-number gold)
     chalk     #F2F6F5  — cool off-white, primary text
     muted     #9FB7BD  — secondary text

     Every selector below is scoped under .kikof-dl-page — this is what
     stops these rules (especially the old bare `a`, `h1`, `footer`,
     `body`, `*` selectors) from leaking onto the sidebar and the rest
     of the site.
  ======================================================================= */

  .kikof-dl-page{
    --ink:#0B3540;
    --panel:#123F4B;
    --panel-2:#17515F;
    --zellige:#2E9BAE;
    --zellige-dim:#1B4A54;
    --marigold:#F4B400;
    --chalk:#F2F6F5;
    --muted:#9FB7BD;
    --line:rgba(242,246,245,0.10);

    background:var(--ink);
    color:var(--chalk);
    font-family:'Inter', sans-serif;
    min-height:100vh;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    position:relative;
  }

  .kikof-dl-page *{ box-sizing:border-box; }

  @media (prefers-reduced-motion: reduce){
    .kikof-dl-page *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

  .kikof-dl-page a{ color:inherit; text-decoration:none; }

  /* ---------- background zellige field ---------- */
  .kikof-dl-page .star-field{
    position:absolute; inset:0; z-index:0;
    opacity:0.05;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23F2F6F5' stroke-width='1'%3E%3Cpath d='M42 4 L52 20 L70 22 L58 36 L62 54 L42 46 L22 54 L26 36 L14 22 L32 20 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size:84px 84px;
    pointer-events:none;
  }

  /* ---------- top bar ---------- */
  .kikof-dl-page .topbar{
    position:relative; z-index:2;
    display:flex; align-items:center; justify-content:center;
    gap:10px;
    padding:22px 24px 0;
  }
  .kikof-dl-page .topbar .mark{ width:26px; height:26px; flex-shrink:0; }
  .kikof-dl-page .topbar .word{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:1.05rem;
    letter-spacing:0.01em;
  }

  /* ---------- hero ---------- */
  .kikof-dl-page .hero{
    position:relative; z-index:2;
    max-width:480px;
    margin:0 auto;
    padding:36px 24px 20px;
    text-align:center;
  }

  .kikof-dl-page .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'JetBrains Mono', monospace;
    font-size:0.7rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--zellige);
    background:rgba(46,155,174,0.10);
    border:1px solid rgba(46,155,174,0.30);
    padding:6px 14px;
    border-radius:100px;
    margin-bottom:28px;
  }
  .kikof-dl-page .eyebrow .dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--zellige);
    box-shadow:0 0 0 0 rgba(46,155,174,0.6);
    animation:kikofDlPulseDot 2.2s ease-out infinite;
  }
  @keyframes kikofDlPulseDot{
    0%{ box-shadow:0 0 0 0 rgba(46,155,174,0.55);}
    70%{ box-shadow:0 0 0 8px rgba(46,155,174,0);}
    100%{ box-shadow:0 0 0 0 rgba(46,155,174,0);}
  }

  /* ---------- signature: rotating star badge behind app icon ---------- */
  .kikof-dl-page .badge-wrap{
    position:relative;
    width:168px; height:168px;
    margin:0 auto 30px;
    display:flex; align-items:center; justify-content:center;
  }
  .kikof-dl-page .badge-star{
    position:absolute; inset:0;
    animation:kikofDlSpinSlow 40s linear infinite;
  }
  @keyframes kikofDlSpinSlow{ to{ transform:rotate(360deg);} }

  .kikof-dl-page .app-icon{
    position:relative; z-index:2;
    width:92px; height:92px;
    border-radius:24px;
    background:linear-gradient(160deg, var(--panel-2), var(--panel));
    border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 18px 40px -12px rgba(0,0,0,0.6);
  }
  .kikof-dl-page .app-icon svg{ width:46px; height:46px; }

  .kikof-dl-page h1{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:2.15rem;
    line-height:1.12;
    letter-spacing:-0.01em;
    margin-bottom:14px;
  }
  .kikof-dl-page h1 em{
    font-style:italic;
    color:var(--marigold);
  }

  .kikof-dl-page .sub{
    color:var(--muted);
    font-size:1.02rem;
    line-height:1.55;
    max-width:360px;
    margin:0 auto 34px;
  }

  /* ---------- download button ---------- */
  .kikof-dl-page .download-btn{
    position:relative;
    display:inline-flex; align-items:center; justify-content:center;
    gap:12px;
    width:100%; max-width:340px;
    padding:18px 28px;
    background:var(--marigold);
    color:#1D1400;
    font-family:'Inter', sans-serif;
    font-weight:700;
    font-size:1.05rem;
    border-radius:16px;
    box-shadow:0 14px 30px -10px rgba(244,180,0,0.45);
    transition:transform 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .kikof-dl-page .download-btn:active{
    transform:scale(0.97);
    box-shadow:0 8px 18px -8px rgba(244,180,0,0.4);
  }
  .kikof-dl-page .download-btn svg{ width:20px; height:20px; flex-shrink:0; }

  .kikof-dl-page .meta-row{
    display:flex; align-items:center; justify-content:center;
    gap:16px;
    margin-top:16px;
    font-family:'JetBrains Mono', monospace;
    font-size:0.74rem;
    color:var(--muted);
  }
  .kikof-dl-page .meta-row span{ display:flex; align-items:center; gap:6px; }
  .kikof-dl-page .meta-row .sep{ opacity:0.4; }

  .kikof-dl-page .download-status{
    margin-top:14px;
    font-size:0.85rem;
    color:var(--zellige);
    min-height:1.2em;
    opacity:0;
    transition:opacity 0.25s ease;
  }
  .kikof-dl-page .download-status.show{ opacity:1; }

  /* ---------- section divider ---------- */
  .kikof-dl-page .divider{
    max-width:480px; margin:8px auto 0; padding:0 24px;
    position:relative; z-index:2;
  }
  .kikof-dl-page .divider hr{
    border:none; height:1px;
    background:var(--line);
  }

  /* ---------- install steps ---------- */
  .kikof-dl-page .steps{
    position:relative; z-index:2;
    max-width:480px; margin:0 auto;
    padding:40px 24px 20px;
  }
  .kikof-dl-page .steps-title{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:1.3rem;
    margin-bottom:22px;
    text-align:center;
  }
  .kikof-dl-page .step{
    display:flex; gap:16px;
    padding:16px 0;
    border-top:1px solid var(--line);
  }
  .kikof-dl-page .step:last-child{ border-bottom:1px solid var(--line); }
  .kikof-dl-page .step-num{
    flex-shrink:0;
    width:32px; height:32px;
    border-radius:50%;
    background:var(--panel-2);
    border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    font-family:'JetBrains Mono', monospace;
    font-size:0.78rem;
    color:var(--zellige);
  }
  .kikof-dl-page .step-text h3{
    font-size:0.95rem;
    font-weight:600;
    margin-bottom:3px;
  }
  .kikof-dl-page .step-text p{
    font-size:0.86rem;
    color:var(--muted);
    line-height:1.5;
  }

  /* ---------- trust strip ---------- */
.kikof-dl-page .trust{
    position:relative; z-index:2;
    max-width:480px; margin:0 auto;
    padding:28px 24px 56px;
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
}

  .kikof-dl-page .trust-card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:14px;
    padding:16px;
  }
  .kikof-dl-page .trust-card .n{
    font-family:'Fraunces', serif;
    font-size:1.3rem;
    font-weight:600;
    color:var(--zellige);
    margin-bottom:2px;
  }
  .kikof-dl-page .trust-card .l{
    font-size:0.78rem;
    color:var(--muted);
    line-height:1.4;
  }

  .kikof-dl-page .dl-footer{
    position:relative; z-index:2;
    text-align:center;
    padding:0 24px 40px;
    font-size:0.75rem;
    color:var(--muted);
  }
  .kikof-dl-page .dl-footer a{ color:var(--zellige); text-decoration:none; }

  @media (min-width:520px){
    .kikof-dl-page h1{ font-size:2.5rem; }
  }



  @media (max-width: 767px) {
    .eyebrow {
        margin-top: 100px;
    }
  }