/* 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 $2,417 down onto the 41%. */
    --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)}
/* the toggle exists only below the desktop breakpoint */
.navtoggle{display:none}
.navscrim{display:none}

@media (max-width:1080px){
  nav{padding:16px 20px;position:relative;gap:12px}
  /* the mark still has to read as strokes, which is the source of the whole
     language, so it shrinks rather than disappears */
  .brand svg{width:54px;height:54px;margin:-6px 0}
  .brand span{font-size:22px}
  .navcta{font-size:13px;padding:10px 16px}

  .navtoggle{display:flex;flex-direction:column;justify-content:center;gap:5px;
             width:40px;height:40px;padding:0 9px;background:none;border:0;cursor:pointer;
             flex:none;z-index:90}
  .navtoggle span{display:block;width:22px;height:1.5px;background:var(--ink);border-radius:2px;
                  transition:transform .22s ease,opacity .16s ease}
  nav.open .navtoggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  nav.open .navtoggle span:nth-child(2){opacity:0}
  nav.open .navtoggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

  .navscrim{display:block;position:fixed;inset:0;background:rgba(11,7,48,.62);
            opacity:0;visibility:hidden;transition:opacity .26s ease,visibility .26s;z-index:70}
  nav.open .navscrim{opacity:1;visibility:visible}

  /* the same element as on desktop, moved into a panel rather than rebuilt */
  .navlinks{display:block;position:fixed;top:0;right:0;bottom:0;
            width:min(400px,86vw);background:#140B4A;
            border-left:1px solid rgba(197,199,227,.18);
            padding:84px 24px 40px;overflow-y:auto;z-index:80;
            font-size:17px;color:rgba(255,255,255,.82);
            transform:translateX(100%);
            transition:transform .3s cubic-bezier(.2,.75,.2,1)}
  nav.open .navlinks{transform:none}
  .navlinks > a{display:block;padding:15px 2px;border-bottom:1px solid rgba(197,199,227,.12)}
  .navlinks a.here{border-bottom-color:var(--accent)}
  .navdrop{border-bottom:1px solid rgba(197,199,227,.12)}
  .navtop{width:100%;justify-content:space-between;padding:15px 2px;font-size:17px}
  .navmenu{padding:0 0 10px}
  .navmenu a{padding:12px 0 14px}
  .navmenu b{margin-top:10px;font-size:18px}

  .footmap{grid-template-columns:1fr 1fr;gap:34px}
  .band{padding:80px 24px}
  .foot{padding:72px 24px 44px}
}

@media (max-width:720px){
  /* The bar pins itself and steps out of the way while the reader goes down the page,
     then comes back the moment they go up. Sticky rather than fixed, so it still takes
     its row at the top and the hero does not jump underneath it on load. */
  nav{position:sticky;top:0;z-index:75;
      transition:transform .3s cubic-bezier(.2,.75,.2,1)}
  /* Both a transform AND a backdrop-filter make an element the containing block for its
     position:fixed descendants, and the menu panel and the scrim are exactly that. So
     the blur lives on a pseudo-element behind the bar rather than on the bar, and the
     transform is never present while the menu is open: the script clears the hidden
     state before opening, and the selector refuses to apply it anyway. */
  nav::before{content:"";position:absolute;inset:0;z-index:-1;
              background:rgba(13,7,51,.92);
              backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  nav.hide:not(.open){transform:translateY(-100%)}

  .band{padding:56px 20px}
  .foot{padding:56px 20px 36px}
  .footmap{gap:26px 20px}
}

  /* ---- the rolling counter (octi-counter.js) ---- */
  [data-roll]{display:inline-flex;align-items:flex-start}
  [data-roll] .rl-d{display:block;height:1em;overflow:hidden}
  [data-roll] .rl-reel{display:block}
  [data-roll] .rl-reel b{display:block;font-weight:inherit;line-height:1}
  [data-roll] .rl-s{display:block;height:1em;line-height:1}

/* ── the audience menu ─────────────────────────────────────────────────────
   Four audiences on a 2x2, each marked by the bar and each carrying the line that
   tells a reader it is for them without opening the page. */
.navdrop{position:relative}
.navtop{display:inline-flex;align-items:center;gap:8px;font:inherit;color:inherit;
        background:none;border:0;padding:0;cursor:pointer}
.navchev{width:6px;height:6px;border:solid currentColor;border-width:0 1.4px 1.4px 0;
         transform:rotate(45deg) translate(-1px,-1px);opacity:.7;
         transition:transform .2s ease}
.navtop[aria-expanded="true"] .navchev{transform:rotate(-135deg) translate(-2px,-2px)}

.navmenu{position:absolute;top:calc(100% + 20px);left:50%;margin-left:-330px;width:660px;
         z-index:60;display:grid;grid-template-columns:1fr 1fr;gap:6px;
         background:#140B4A;border:1px solid rgba(197,199,227,.18);border-radius:22px;
         padding:16px;box-shadow:0 40px 90px rgba(0,0,0,.55);
         opacity:0;visibility:hidden;transform:translateY(-8px);
         transition:opacity .2s ease,transform .2s ease,visibility .2s}
.navtop[aria-expanded="true"] + .navmenu{opacity:1;visibility:visible;transform:none}
/* a bridge, so the pointer can cross the gap without the menu closing under it */
.navmenu::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}

.navmenu a{display:block;padding:18px 20px 20px;border-radius:16px;text-decoration:none;
           border:1px solid transparent;
           transition:background .18s ease,border-color .18s ease}
.navmenu a:hover{background:rgba(255,255,255,.07);border-color:rgba(255,122,61,.34)}
.navmenu .nmk{display:block;width:26px;height:10px;overflow:hidden;
              transition:width .34s cubic-bezier(.2,.7,.2,1)}
.navmenu .nmk svg{display:block;width:64px;height:10px;overflow:visible}
.navmenu a:hover .nmk{width:64px}
.navmenu b{display:block;margin-top:14px;font-family:'Fraunces',Georgia,serif;
           font-weight:500;font-size:20px;letter-spacing:-.02em;color:#FFFFFF}
.navmenu i{display:block;margin-top:6px;font-style:normal;font-size:13.5px;
           line-height:1.45;color:rgba(255,255,255,.70)}
/* Five entries on two columns leave one cell empty at the end. Stretching the fifth
   across the row to fill it made Plans read as a banner rather than as one of five
   equal audiences, which is not what it is. The empty cell is the smaller problem. */

@media (max-width:1080px){
  .navmenu{position:static;margin-left:0;width:auto;grid-template-columns:1fr;
           opacity:1;visibility:visible;transform:none;box-shadow:none;background:none;
           border:0;padding:0;display:none}
  .navtop[aria-expanded="true"] + .navmenu{display:block}
}