/* Octi — the language. Tokens, grounds, type, controls, navigation, footer.
   Every page links this. Nothing here belongs to one page. */

    :root{
    --bg:#0D0733; --panel:#140B4A;
    --ink:#FFFFFF; --ink-1:rgba(214,213,235,.88); --ink-2:rgba(214,213,235,.62); --ink-3:rgba(214,213,235,.36);
    --axis:#FF7A3D;
    --hair:rgba(197,199,227,.18);
    --mark:#C5C7E3;
    --accent:#FF7A3D; --btn-bg:#FFFFFF; --btn-fg:#17075D;
    --btn-hover:#E6E5F4; --btn-shade:rgba(0,0,0,.34);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    background:var(--bg);color:var(--ink);
    font-family:'Public Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;
    overflow-x:hidden;transition:background .25s ease,color .25s ease;
  }
  .mono{font-family:'JetBrains Mono',monospace;letter-spacing:-.03em;font-feature-settings:'tnum'}
  button{font-family:inherit}
  button:focus,button:focus-visible{outline:none}
  .ovl{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
  /* the glow rides on the body's own background, no overlay element to composite */
  body{
    background-image:
      radial-gradient(58% 42% at 88% -14%, rgba(78,64,196,.30), transparent 60%),
      radial-gradient(50% 38% at 0% 110%, rgba(49,42,128,.20), transparent 62%);
    background-attachment:fixed;
  }

  nav{display:flex;align-items:center;justify-content:space-between;padding:24px 56px}
  .brand{display:flex;align-items:center;gap:14px}
  .brand svg{width:74px;height:74px;display:block;margin:-8px 0}
  .brand span{font-family:'Fraunces',Georgia,serif;font-weight:600;
    font-size:26px;letter-spacing:-.025em}
  .navlinks{display:flex;gap:32px;font-size:14px;color:var(--ink-2)}
  .navlinks a{text-decoration:none;color:inherit;padding-bottom:3px;
              border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
  .navlinks a:hover{color:var(--ink)}
  .navlinks a.here{color:var(--ink);border-bottom-color:var(--accent)}
  .brand{text-decoration:none;color:inherit}
  .navcta{font-size:14px;font-weight:600;padding:11px 24px;border-radius:100px;background:var(--btn-bg);color:var(--btn-fg)}
  .btn{background:var(--btn-bg);color:var(--btn-fg);border:0;cursor:pointer;font-size:15px;
       font-weight:600;padding:15px 32px;border-radius:100px;display:inline-block;
       text-decoration:none;line-height:1.2;
       transition:background .2s ease, transform .18s ease, box-shadow .24s ease}
  .btn:hover{background:var(--btn-hover);transform:translateY(-2px);
             box-shadow:0 12px 28px var(--btn-shade)}
  .btn:active{transform:translateY(0)}
  .navcta{text-decoration:none;transition:background .2s ease, transform .18s ease}
  .navcta:hover{background:var(--btn-hover);transform:translateY(-1px)}
  /* an inline link that leaves this page for a deeper one */
  .go{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
      font-size:15px;font-weight:600;color:var(--accent);
      border-bottom:1px solid transparent;transition:gap .2s ease, border-color .2s ease}
  .go .arw{transition:transform .22s cubic-bezier(.2,.7,.2,1)}
  .go:hover{gap:13px;border-color:currentColor}
  .go:hover .arw{transform:translateX(3px)}
  .btn-ghost{background:none;border:0;cursor:pointer;font-size:13px;color:var(--ink-3)}
  .btn-ghost:hover{color:var(--accent)}
  .badges{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
  .badges li{font-size:14px;color:var(--ink-1);border:1px solid rgba(197,199,227,.30);
             background:rgba(197,199,227,.07);
             border-radius:100px;padding:11px 20px}


  /* ================= light sections ================= */
  /* Scoped variables, plus an explicit colour on the section itself, because
     descendants inherit a computed colour and would otherwise stay white. */
  section.light{
    --panel:#FFFFFF; --ink:#17075D; --ink-1:rgba(23,7,93,.84); --ink-2:rgba(23,7,93,.62); --ink-3:rgba(23,7,93,.40);
    --axis:#E1541C;
    --hair:rgba(23,7,93,.13); --accent:#E1541C; --btn-bg:#17075D; --btn-fg:#FFFFFF;
    --btn-hover:#312A80; --btn-shade:rgba(23,7,93,.26);
    background:#FFFFFF; color:var(--ink);
  }

  /* ================= the warm ground ================= */
  /* Our orange, #E1541C, carrying white. One section only, on the argument's peak. */
  section.warm{
    --panel:rgba(255,255,255,.10);
    --ink:#FFFFFF; --ink-1:rgba(255,255,255,.94); --ink-2:rgba(255,255,255,.86); --ink-3:rgba(255,255,255,.62);
    --hair:rgba(23,7,93,.30);
    /* the accent is what marks the mechanism. On the other two grounds that is the
       orange; here the orange is the ground, so deep purple takes the job over.
       #0D0733 on #E1541C is 5:1, and it closes the loop with the dark ground. */
    /* every written thing is white. The purple is reserved for one object:
       the amount descending the track, from $4,820 down onto the 61%. */
    --accent:#FFFFFF; --axis:#0D0733; --btn-bg:#0D0733; --btn-fg:#FFFFFF;
    --btn-hover:#17075D; --btn-shade:rgba(13,7,51,.34);
    background:#E1541C; color:var(--ink);
  }
  /* white on orange is 3.8:1, so the running text carries a little more size and
     weight here than it does on the other two grounds */
  section.warm .step .does{font-size:17.5px;font-weight:420;color:var(--ink-2)}
  section.warm .step .prob{color:var(--ink-2);font-weight:450}
  section.warm .step .k{color:var(--ink-2)}
  section.warm .payoff .cap{color:var(--ink-2)}

  /* the descent, and only the descent. Dark type on a saturated ground loses
     apparent weight, so each of these is carried a step heavier. */
  section.warm .rail{background:rgba(13,7,51,.34);width:2px}
  section.warm .runner .n{color:var(--axis);font-weight:600}
  section.warm .runner .dot{background:var(--axis);width:14px;height:14px}
  section.warm .payoff .big{color:var(--axis);font-weight:600;letter-spacing:-.06em}
  h2.wide{max-width:22ch}
  .band{max-width:1500px;margin:0 auto;padding:126px 56px}

  /* two-column band */
  .band.two{display:grid;grid-template-columns:1fr 1fr;gap:84px;align-items:center}

  /* a real control, not a hyperlink, and it sits under the quote where the column
     was running out into empty ground */
  .btn-line{display:inline-block;margin-top:46px;text-decoration:none;
            font-size:15px;font-weight:600;color:var(--ink);
            border:1px solid var(--hair);border-radius:100px;padding:14px 30px;
            transition:background .22s ease, border-color .22s ease, color .22s ease,
                       transform .18s ease}
  .btn-line:hover{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg);
                  transform:translateY(-2px)}

  /* ---------------- footer ---------------- */
  .foot{background:var(--bg);color:var(--ink);max-width:1500px;margin:0 auto;
        padding:96px 56px 54px}
  .footlead{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
  .footmk{width:56px;height:64px;flex:none;display:block}
  .foottag{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:25px;
           line-height:1.26;letter-spacing:-.02em;color:var(--ink);flex:1;min-width:280px}
  .footmap{display:grid;grid-template-columns:repeat(5,1fr);gap:36px;margin-top:78px}
  .fcol h4{font-family:'Public Sans',system-ui,sans-serif;font-size:13.5px;font-weight:600;
           color:var(--ink-2);margin-bottom:18px}
  .fcol a{display:block;text-decoration:none;font-size:15px;line-height:1.5;
          color:var(--ink-1);margin-top:11px;width:fit-content;
          border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease}
  .fcol a:hover{color:var(--accent);border-color:currentColor}
  .fcol.addr p{font-size:15px;line-height:1.5;color:var(--ink-2);margin-top:11px}
  .footrule{height:1px;background:var(--hair);margin-top:70px}
  .footbase{display:flex;align-items:center;justify-content:space-between;
            gap:24px;flex-wrap:wrap;padding-top:26px}
  .badge{font-size:13px;color:var(--ink-2);
         border:1px solid var(--hair);border-radius:100px;padding:8px 16px}
  .fcopy{font-size:13px;color:var(--ink-3)}
@media (max-width:1080px){
  nav{padding:20px 24px}
  .navlinks{display:none}
  .footmap{grid-template-columns:1fr 1fr;gap:34px}
  .band{padding:80px 24px}
  .foot{padding:72px 24px 44px}
}