/* Nasdaq Strategy. The composition and the surface are the reference site's:
   a grey engineered ground with a 50px grid, a page shell that is one shade
   lighter, hairlines everywhere, light grotesk headings with an italic serif
   punch, cells of colour alive on a canvas. The accent moves from teal to a
   Nasdaq blue; everything else keeps the reference's restraint. */

:root{
  --sans:'Geist','Helvetica Neue',Helvetica,Arial,sans-serif;
  --serif:'Bitter',Georgia,serif;
  --mono:'Geist Mono','SF Mono',ui-monospace,monospace;
  --bg0:#ededed;
  --bg1:#e5e5e5;
  --bg2:#d6d6d6;
  --ground:#d8d8d8;
  --inverse:#353535;
  --border:#c8c8c8;
  --accent:#17507F;        /* 6.7:1 on --bg1; brand blue below is for large or decorative use */
  --accent-brand:#1B5FA0;
  --accent-light:#2C79C4;
  --sky:#5CB8F0;           /* the reference's mint role: highlights on dark */
  --text:#353535;
  --text-2:#5e5e5e;
  --text-3:#6b6b6b;
  --ok:#2F9E6B;
  --warn:#B7791F;
  --ease:cubic-bezier(.25,.1,.25,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
body{
  margin:0;
  font:400 15px/1.6 var(--sans);
  color:var(--text);
  background:var(--ground);
  background-image:
    linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px);
  background-size:50px 50px;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:var(--bg1)}
a{color:inherit;text-decoration:none}
img,svg,canvas{display:block;max-width:100%}
[hidden]{display:none!important}
:where(a,button):focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
:where(a,button,[role="button"]){cursor:pointer}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
.skip{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--inverse);color:#fff;padding:8px 14px;font:500 13px/1 var(--sans)}
.skip:focus{left:0}
.mono{font-family:var(--mono);font-size:.94em}
.num{font-variant-numeric:tabular-nums}
.no-js .anim{opacity:1!important;transform:none!important}

/* ---- page shell ---- */
.page{
  max-width:1440px;margin:0 auto;background:var(--bg1);min-height:100vh;
  box-shadow:-1px 0 0 var(--border),1px 0 0 var(--border);
}

/* ---- navbar ---- */
.nav{display:flex;align-items:center;gap:8px;padding:16px 32px;border-bottom:1px solid var(--border);position:relative}
.nav-logo{display:flex;align-items:center;gap:10px;font:500 13px/1 var(--sans);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.nav-logo img{height:28px;width:28px;border-radius:0;box-shadow:0 0 0 1px rgba(0,0,0,.08)} /* a white tile needs a hairline to read on the grey page */
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{font:500 13px/1 var(--sans);padding:10px 16px;border-radius:4px;transition:background .2s ease}
.nav-links a:hover{background:rgba(0,0,0,.04)}
.nav-links a.is-current{background:rgba(0,0,0,.05)}
.nav-right{display:flex;align-items:center;gap:4px}
.nav-social{display:flex;align-items:center;gap:4px}
.nav-social a{
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:4px;
  color:var(--text-3);transition:color .2s ease,background .2s ease;position:relative;
}
.nav-social a::after{content:"";position:absolute;inset:-6px} /* 44px hit area */
.nav-social a:hover{color:var(--text);background:rgba(0,0,0,.04)}
.nav-cta{
  font:500 12px/1 var(--sans);padding:10px 20px;background:var(--accent);color:#fff;border-radius:4px;
  letter-spacing:.03em;transition:background .2s ease;white-space:nowrap;
}
.nav-cta:hover{background:var(--accent-light)}
.nav-toggle{display:none;width:40px;height:40px;flex-direction:column;justify-content:center;align-items:center;gap:5px;border-radius:4px}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--text);transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---- section primitives ---- */
.section{padding:104px 56px;border-top:1px solid var(--border);position:relative}
.section--dark{background:var(--inverse);border-top-color:rgba(255,255,255,.08);color:rgba(255,255,255,.9)}
.section--alu{background:var(--bg2)}
.section--dark::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:50px 50px;
}
.section--dark>*{position:relative;z-index:1}

.eyebrow{font:500 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin:0 0 20px}
.section--dark .eyebrow{color:var(--sky)}
.heading{font:300 clamp(30px,3.5vw,42px)/1.15 var(--sans);letter-spacing:-.02em;color:var(--text);margin:0 0 14px}
.section--dark .heading{color:rgba(255,255,255,.95)}
.punch{font-family:var(--serif);font-weight:500;font-style:italic}
.heading em{
  font-style:inherit;font-weight:700;font-size:calc(1em + 2px);letter-spacing:-.035em;
  background:linear-gradient(to bottom,var(--accent),var(--text));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.section--dark .heading em{
  font-family:var(--sans);font-style:normal;font-weight:300;font-size:inherit;letter-spacing:inherit;
  background:none;-webkit-text-fill-color:var(--sky);color:var(--sky);
}
.subtitle{font:400 16px/1.6 var(--sans);letter-spacing:.01em;color:var(--text-2);max-width:600px;margin:0 0 40px;text-wrap:balance}
.section--dark .subtitle{color:rgba(255,255,255,.78)}
.section-hdr{display:flex;align-items:center;gap:24px;margin-bottom:44px}
.section-hdr .eyebrow{margin:0;padding:10px 16px;border:1px solid var(--border);border-radius:4px}
.section--dark .section-hdr .eyebrow{border-color:rgba(255,255,255,.12)}
.section-hdr::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)}
.section--dark .section-hdr::after{background:linear-gradient(90deg,rgba(255,255,255,.1),transparent)}

/* ---- hero ---- */
.hero{display:grid;grid-template-columns:1.25fr 2fr;border-top:1px solid var(--border)}
.hero-left{
  padding:clamp(40px,6vw,80px);display:flex;flex-direction:column;justify-content:center;
  align-items:flex-end;text-align:right;border-right:1px solid var(--border);
}
.hero-title{font:300 clamp(26px,3.2vw,36px)/1.08 var(--sans);letter-spacing:-.01em;color:var(--text-2);margin:0}
.hero-title span{
  display:block;font-family:var(--serif);font-weight:700;font-style:italic;
  font-size:clamp(38px,4.6vw,58px);line-height:1;white-space:nowrap;margin-top:6px;letter-spacing:-.03em;
  padding:.06em .1em .12em .06em;color:var(--text);
  background:linear-gradient(to bottom,var(--accent),var(--text) 75%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-desc{font:400 15px/1.55 var(--sans);max-width:540px;margin:20px 0 24px;color:var(--text-2)}
.hero-cta{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--sans);text-transform:uppercase;letter-spacing:.05em;
  padding:13px 24px;border-radius:4px;transition:all .2s ease;white-space:nowrap;
}
.btn-dark{background:var(--inverse);color:var(--bg1)}
.btn-dark:hover{background:var(--accent)}
.btn-line{border:1px solid var(--border);background:var(--bg0);color:var(--text)}
.btn-line:hover{background:var(--bg2)}
.btn-blue{background:var(--accent);color:#fff}
.btn-blue:hover{background:var(--accent-light)}
.btn-light{background:var(--bg1);color:var(--inverse)}
.btn-light:hover{background:#fff}
.btn-ghost{border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.85)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn svg{width:11px;height:11px}
.hero-right{position:relative;min-height:clamp(300px,50vh,500px);background:var(--bg1);overflow:hidden}
.hero-right::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.25;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:50px 50px;
}
.hero-right canvas{position:absolute;top:0;left:0;width:100%!important;height:100%!important}
.hero-note{
  position:absolute;right:16px;bottom:12px;z-index:2;font:500 10px/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3);
}

/* ---- runs-on strip (the reference's logo strip, as words: these are the
   components the product is built from, not endorsements) ---- */
.strip{
  display:flex;align-items:center;justify-content:center;gap:40px;padding:22px 56px;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg0);flex-wrap:wrap;
}
.strip-label{font:500 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);white-space:nowrap}
.strip-items{display:flex;align-items:center;gap:36px;flex-wrap:wrap;justify-content:center}
.strip-items span{font:300 17px/1 var(--sans);letter-spacing:-.01em;color:var(--text-2);white-space:nowrap}
.strip-items span b{font-weight:500;color:var(--text)}
.strip-items i{width:4px;height:4px;border-radius:50%;background:var(--border);display:inline-block}

/* ---- vision ---- */
.vision{padding:88px 56px}
.vision-text{
  font:300 clamp(22px,2.6vw,32px)/1.35 var(--sans);letter-spacing:-.015em;color:var(--text);max-width:980px;margin:0;
}
.vision-text em{font-family:var(--serif);font-weight:500;font-style:italic;color:var(--accent)}

/* ---- pillars (accordion) ---- */
.pillars{display:flex;flex-direction:column;gap:8px}
.pillar{
  display:grid;grid-template-columns:64px 1fr 28px;gap:22px;align-items:start;
  padding:22px 24px;border:1px solid var(--border);border-radius:6px;background:var(--bg0);
  transition:border-color .25s ease,background .25s ease;
}
.pillar:hover{border-color:rgba(27,95,160,.25)}
.pillar-icon{width:64px;height:64px;opacity:.9;transition:opacity .25s ease}
.pillar-icon canvas{width:64px;height:64px}
.pillar h3{font:500 17px/1.3 var(--sans);letter-spacing:-.01em;margin:0 0 6px;transition:color .25s ease}
.pillar:hover h3{color:var(--accent)}
.pillar-short{margin:0;font:400 14.5px/1.55 var(--sans);color:var(--text-2);transition:height .3s ease,opacity .3s ease;overflow:hidden}
.pillar.is-open .pillar-short{height:0;opacity:0}
.pillar-full{margin:0;font:400 14.5px/1.6 var(--sans);color:var(--text-2);height:0;opacity:0;overflow:hidden;transition:opacity .35s ease}
.pillar.is-open .pillar-full{height:auto;opacity:1}
.pillar-toggle{font:300 24px/1 var(--sans);color:var(--text-3);transition:transform .3s ease,color .25s ease;justify-self:end}
.pillar:hover .pillar-toggle{color:var(--accent)}
.pillar.is-open{background:var(--inverse);border-color:var(--inverse);color:#fff}
.pillar.is-open h3{color:var(--sky)}
.pillar.is-open .pillar-full{color:rgba(255,255,255,.8)}
.pillar.is-open .pillar-toggle{transform:rotate(45deg);color:var(--sky)}
.pillar.is-open .pillar-icon{opacity:1}

/* ---- metrics ---- */
.metrics{display:flex;align-items:center;justify-content:center;margin-top:56px;padding:34px 0 0;border-top:1px solid var(--border);flex-wrap:wrap;gap:18px 0}
.metric{text-align:center;min-width:150px}
.metric-val{font:300 clamp(28px,3vw,40px)/1 var(--sans);letter-spacing:-.03em;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.metric-val.tick{animation:tick .5s var(--ease)}
@keyframes tick{from{opacity:.3}to{opacity:1}}
.metric-lbl{margin-top:10px;font:500 10.5px/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
.metric-sep{width:1px;height:48px;background:var(--border);flex-shrink:0;margin:0 32px}
.section--dark .metric-val{color:#fff}
.section--dark .metric-lbl{color:rgba(255,255,255,.4)}
.section--dark .metric-sep{background:rgba(255,255,255,.08)}

/* ---- carousel (dark) ---- */
.carousel{display:flex;gap:6px;height:380px}
.carousel-panel{
  flex:0 0 76px;position:relative;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);
  border-radius:8px;overflow:hidden;cursor:pointer;
  transition:flex .55s cubic-bezier(.4,0,.2,1),background .3s ease,border-color .3s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.carousel-panel.is-active{flex:1 1 0;cursor:default;background:rgba(255,255,255,.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.carousel-panel.is-active::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent-brand),var(--sky));opacity:.6;z-index:1}
.carousel-panel:not(.is-active){border-left:2px solid rgba(44,121,196,.3)}
.carousel-panel:not(.is-active):hover{background:rgba(255,255,255,.045);border-color:rgba(44,121,196,.4);border-left-color:rgba(44,121,196,.7)}
.carousel-label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;
  writing-mode:vertical-rl;transform:rotate(180deg);font:300 24px/1 var(--sans);color:#fff;padding:24px 0;
  transition:opacity .25s ease,color .25s ease;letter-spacing:-.01em;
}
.carousel-label::after{content:"+";font:300 20px/1 var(--sans);color:rgba(255,255,255,.45)}
.carousel-panel:not(.is-active):hover .carousel-label::after{color:var(--sky)}
.carousel-panel.is-active .carousel-label{opacity:0;pointer-events:none}
.carousel-content{padding:32px 36px;opacity:0;transition:opacity .35s ease;pointer-events:none;height:100%;display:flex;flex-direction:column}
.carousel-panel.is-active .carousel-content{opacity:1;pointer-events:auto;transition-delay:.2s}
.carousel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-shrink:0}
.carousel-num{font:500 12px/1 var(--mono);color:rgba(92,184,240,.5);letter-spacing:.04em}
.carousel-tag{font:500 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.4)}
.carousel-body{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;flex:1;min-height:0;align-items:center}
.carousel-text h4{font:300 clamp(20px,2vw,26px)/1.2 var(--sans);letter-spacing:-.02em;color:#fff;margin:0 0 14px}
.carousel-text p{font:400 14.5px/1.6 var(--sans);color:rgba(255,255,255,.72);margin:0;max-width:44ch}
.carousel-visual{display:flex;align-items:center;justify-content:center;min-height:0}
.carousel-visual canvas{width:180px;height:180px}
.carousel-mobile{display:none}

/* ---- quote ---- */
.quote{margin:0;padding:104px 56px;border-top:1px solid var(--border);text-align:center}
.quote-rule{width:48px;margin:0 auto 40px;border:0;border-top:1px solid var(--border)}
.quote blockquote{margin:0;font:300 clamp(22px,2.8vw,34px)/1.3 var(--sans);letter-spacing:-.02em;color:var(--text-2)}
.quote-punch{color:var(--text)}
.quote em{font-family:var(--serif);font-weight:700;font-style:italic;color:var(--accent);font-size:calc(1em + 2px)}

/* ---- cta ---- */
.cta{
  padding:104px 56px;background:var(--inverse);color:#fff;text-align:center;position:relative;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.08);
}
.cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:50px 50px;
}
.cta>*{position:relative;z-index:1}
.cta h2{font:300 clamp(32px,4vw,52px)/1.1 var(--sans);letter-spacing:-.025em;margin:0 0 14px}
.cta h2 em{font-family:var(--serif);font-weight:700;font-style:italic;color:var(--sky)}
.cta>p{font:400 16px/1.6 var(--sans);color:rgba(255,255,255,.7);margin:0 auto 44px;max-width:520px}
.cta-tracks{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:920px;margin:0 auto;text-align:left}
.cta-card{
  padding:30px 32px;border-radius:8px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:16px;min-height:220px;transition:background .3s ease,border-color .3s ease;
}
.cta-card:hover{background:rgba(255,255,255,.055);border-color:rgba(92,184,240,.3)}
.cta-card h3{font:500 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--sky);margin:0 0 8px}
.cta-teaser{font:300 22px/1.25 var(--sans);letter-spacing:-.02em;color:#fff}
.cta-card p{font:400 14px/1.6 var(--sans);color:rgba(255,255,255,.68);margin:0;flex:1}
.cta-card a{font:500 12px/1 var(--sans);text-transform:uppercase;letter-spacing:.06em;color:#fff;display:inline-flex;align-items:center;gap:8px}
.cta-card a:hover{color:var(--sky)}
.cta-ca{margin-top:40px;display:inline-flex;flex-direction:column;gap:8px;align-items:center}
.cta-ca .eyebrow{color:rgba(255,255,255,.45);margin:0}
.ca-line{font:400 13px/1 var(--mono);color:rgba(255,255,255,.8);padding:12px 18px;border:1px solid rgba(255,255,255,.12);border-radius:4px;background:rgba(0,0,0,.2);cursor:copy;position:relative;word-break:break-all;max-width:100%}
.ca-line[data-copied]::after{content:"copied";position:absolute;right:0;top:-20px;font:500 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sky)}

/* ---- footer ---- */
.footer{padding:56px 56px 32px;border-top:1px solid var(--border)}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px;margin-bottom:36px}
.footer-brand{display:flex;flex-direction:column;gap:10px}
.footer-brand-name{display:flex;align-items:center;gap:10px;font:500 13px/1 var(--sans);color:var(--text-2);text-transform:uppercase;letter-spacing:.04em}
.footer-brand-name img{width:22px;height:22px;border-radius:0;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.footer-brand p{font:400 12px/1.5 var(--sans);color:var(--text-3);max-width:280px;margin:0}
.footer-col h5{font:500 10px/1 var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin:0 0 14px}
.footer-col a{display:block;font:400 12px/1 var(--sans);color:var(--text-2);padding:5px 0;transition:color .2s ease}
.footer-col a:hover{color:var(--text)}
.footer-bottom{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding-top:24px;border-top:1px solid var(--border);flex-wrap:wrap}
.footer-copy{font:400 11px/1.5 var(--sans);color:var(--text-3);max-width:70ch;margin:0}
.footer-legal{display:flex;gap:16px}
.footer-legal a{font:400 10px/1 var(--sans);color:var(--text-3)}
.footer-legal a:hover{color:var(--text-2)}

/* ---- scroll reveal ---- */
.anim{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.anim.vis{opacity:1;transform:none}

/* ================= inner pages ================= */
.page-head{padding:72px 56px 44px;border-top:1px solid var(--border)}
.page-head .heading{max-width:20ch}
.page-head .subtitle{margin-bottom:0}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.grid+.grid{margin-top:10px}
.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}
.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-9{grid-column:span 9}.span-12{grid-column:1/-1}
.card{
  border:1px solid var(--border);border-radius:6px;background:var(--bg0);padding:26px 28px;
  display:flex;flex-direction:column;min-width:0;
}
.card .eyebrow{margin-bottom:16px}
.card p{font:400 14px/1.6 var(--sans);color:var(--text-2);margin:0 0 .8em}
.card p:last-child{margin-bottom:0}
.card h3{font:300 22px/1.2 var(--sans);letter-spacing:-.02em;margin:0 0 10px;color:var(--text)}
.card.dark{background:var(--inverse);border-color:var(--inverse);color:#fff}
.card.dark .eyebrow{color:var(--sky)}
.card.dark p{color:rgba(255,255,255,.72)}
.card.dark h3{color:#fff}
.card.alu{background:var(--bg2)}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.card-top .eyebrow{margin:0}
.live{display:inline-flex;align-items:center;gap:7px;font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.live i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:ping 2.4s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(47,158,107,.55)}70%{box-shadow:0 0 0 8px rgba(47,158,107,0)}100%{box-shadow:0 0 0 0 rgba(47,158,107,0)}}
.card.dark .live{color:rgba(255,255,255,.55)}
.kv{margin:0;display:grid}
.kv div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--border);font:400 13.5px/1.4 var(--sans)}
.kv div:first-child{border-top:0;padding-top:0}
.kv dt{color:var(--text-3)}
.kv dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums;text-align:right;color:var(--text)}
.card.dark .kv div{border-color:rgba(255,255,255,.12)}
.card.dark .kv dt{color:rgba(255,255,255,.5)}
.card.dark .kv dd{color:#fff}
.fine{font:400 12px/1.55 var(--sans);color:var(--text-3)}
.card.dark .fine{color:rgba(255,255,255,.5)}
.big{font:300 clamp(26px,2.6vw,36px)/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.big.tick{animation:tick .5s var(--ease)}
.card.dark .big{color:#fff}
.big+.fine{margin-top:8px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ledger table */
.table{width:100%;border-collapse:collapse;font:400 13px/1.4 var(--sans)}
.table th{font:500 10px/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);text-align:left;padding:0 12px 12px 0;border-bottom:1px solid var(--border)}
.table td{padding:12px 12px 12px 0;border-bottom:1px solid var(--border);vertical-align:top;font-variant-numeric:tabular-nums}
.table td.mono,.table th.mono{font-family:var(--mono);font-size:12px}
.table tr:last-child td{border-bottom:0}
.table a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.table-wrap{overflow-x:auto}
.empty{padding:26px 0 8px;font:300 18px/1.4 var(--sans);color:var(--text-2)}

/* forms (launch page and the calculator) */
.field{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.field label{font:500 12.5px/1 var(--sans)}
.input{
  width:100%;padding:11px 13px;border-radius:4px;border:1px solid var(--border);background:#fff;
  font:400 14px/1.4 var(--sans);color:var(--text);outline:none;transition:border-color .2s ease,box-shadow .2s ease;
}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(27,95,160,.12)}
.help{font:400 12px/1.5 var(--sans);color:var(--text-3);margin:2px 0 0}
.card.dark .input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff}
.card.dark .input:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(92,184,240,.15)}
.card.dark .help{color:rgba(255,255,255,.5)}
.notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:4px;background:#F6E9E6;border:1px solid #E5C4BC;color:#8A2E20;font:400 13px/1.5 var(--sans)}
.notice.info{background:var(--bg2);border-color:var(--border);color:var(--text-2)}
.notice svg{flex:0 0 15px;margin-top:2px}
.notice a{color:inherit;text-decoration:underline}
.card.dark .notice.info{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.8)}
.wallet-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;min-height:44px}
.wallet-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:4px;font:400 12px/1 var(--mono);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff}
.toggle{width:40px;height:24px;border-radius:999px;background:#c2c2c2;position:relative;flex:0 0 40px;transition:background .2s}
.toggle i{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s ease}
.toggle[data-on="true"]{background:var(--accent)}
.toggle[data-on="true"] i{transform:translateX(16px)}
.mod{display:flex;gap:14px;align-items:flex-start;text-align:left;padding:14px;border-radius:4px;border:1px solid var(--border);background:#fff;margin-top:16px;width:100%}
.mod-body b{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.1em}
.mod-body span{display:block;font:400 12.5px/1.5 var(--sans);color:var(--text-3);margin-top:4px}
.ca-box{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:4px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.ca-box .eyebrow{margin:0;color:rgba(255,255,255,.5)}
.ca-value{font:400 12.5px/1.5 var(--mono);word-break:break-all;color:#fff}
.copy-me{cursor:copy;position:relative}
.copy-me[data-copied]::after{content:"copied";position:absolute;right:0;top:-18px;font:500 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sky)}
.pad{padding:0 56px 56px}

/* ---- responsive ---- */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr}
  .hero-left{align-items:flex-start;text-align:left;border-right:0;border-bottom:1px solid var(--border)}
  .hero-cta{justify-content:flex-start}
  .section,.quote,.cta,.vision{padding:80px 40px}
  .strip{padding:20px 40px;gap:24px}
  .page-head{padding:56px 40px 36px}
  .pad{padding:0 40px 40px}
  .footer{padding:48px 40px 28px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .span-3,.span-4{grid-column:span 6}
  .span-5,.span-7,.span-8,.span-9{grid-column:1/-1}
  .carousel-body{grid-template-columns:1fr}
  .carousel-visual{display:none}
}
@media (max-width:760px){
  .nav{padding:12px 16px}
  .nav-links{
    display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:var(--bg0);border-bottom:1px solid var(--border);padding:8px;z-index:50;
  }
  .nav-links.is-open{display:flex}
  .nav-links a{padding:14px 12px;font-size:15px}
  .nav-toggle{display:flex}
  .nav-right{margin-left:auto}
  .nav-cta{padding:10px 14px}
  .section,.quote,.cta,.vision{padding:64px 20px}
  .strip{padding:18px 20px;gap:14px}
  .strip-items{gap:14px}
  .page-head{padding:44px 20px 28px}
  .pad{padding:0 20px 32px}
  .footer{padding:40px 20px 24px}
  .footer-grid{grid-template-columns:1fr}
  .hero-title span{white-space:normal}
  .pillar{grid-template-columns:48px 1fr 24px;gap:14px;padding:18px}
  .pillar-icon,.pillar-icon canvas{width:48px;height:48px}
  .metrics{flex-direction:column;gap:22px}
  .metric-sep{display:none}
  .carousel{display:none}
  .carousel-mobile{display:flex;flex-direction:column;gap:8px}
  .carousel-mobile div{padding:20px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(255,255,255,.03)}
  .carousel-mobile b{display:block;font:500 11px/1 var(--mono);color:rgba(92,184,240,.7);margin-bottom:10px;letter-spacing:.06em}
  .carousel-mobile h4{font:300 20px/1.2 var(--sans);letter-spacing:-.02em;margin:0 0 8px;color:#fff}
  .carousel-mobile p{font:400 14px/1.6 var(--sans);color:rgba(255,255,255,.7);margin:0}
  .cta-tracks{grid-template-columns:1fr}
  .grid>*{grid-column:1/-1!important}
  .input{font-size:16px}
}

/* ---- board (tokens.html) ---- */
.table.board td{vertical-align:middle}
.table.board .thumb{width:40px;padding-right:8px}
.table.board .thumb img{width:32px;height:32px;border-radius:4px;object-fit:cover;background:var(--bg2)}
.thumb-empty{display:block;width:32px;height:32px;border-radius:4px;background:var(--bg2);border:1px solid var(--border)}
.table.board b{font-weight:500;color:var(--text)}
.mute{color:var(--text-3)}
.table.board .curve{min-width:150px}
.bar{display:inline-block;vertical-align:middle;width:70px;height:6px;border-radius:3px;background:var(--bg2);border:1px solid var(--border);margin-right:8px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent-brand),var(--sky))}
.pill{display:inline-block;font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:4px;border:1px solid var(--border);color:var(--text-2)}
.pill.ok{color:var(--ok);border-color:rgba(47,158,107,.4)}
.table.board .links a{color:var(--accent);text-decoration:none}
.table.board .links a:hover{text-decoration:underline}
.table.board .copy-me{cursor:copy}
.table.board .copy-me[data-copied]::after{top:-16px;right:auto;left:0}

/* ---- picture drop (launch.html) ---- */
.drop{
  display:flex;align-items:center;gap:16px;padding:16px;border:1px dashed var(--border);border-radius:4px;background:#fff;
  cursor:pointer;margin-top:14px;transition:border-color .2s ease,background .2s ease;
}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--bg0)}
.drop img{width:56px;height:56px;border-radius:4px;object-fit:cover;background:var(--bg2)}
.drop .ph{width:56px;height:56px;border-radius:4px;background:var(--bg2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-3)}
.drop .ph svg{width:20px;height:20px}
.drop b{display:block;font:500 13px/1.3 var(--sans)}
.drop small{display:block;font:400 12px/1.5 var(--sans);color:var(--text-3);margin-top:3px}

/* ---- connect wallet: a nav link, not a button block ---- */
.nav-connect{font:500 13px/1 var(--sans);padding:10px 14px;border-radius:4px;color:var(--text-2);border:1px solid var(--border);background:transparent;transition:background .2s ease,color .2s ease;white-space:nowrap}
.nav-connect:hover{background:rgba(0,0,0,.04);color:var(--text)}
.nav-connect.is-on{font-family:var(--mono);font-size:12px;color:var(--text)}
.wallet-menu{position:absolute;z-index:120;min-width:200px;background:var(--bg0);border:1px solid var(--border);border-radius:4px;padding:6px;box-shadow:0 12px 30px -12px rgba(0,0,0,.3)}
.wallet-menu button{display:block;width:100%;text-align:left;font:500 13px/1 var(--sans);padding:10px 12px;border-radius:4px}
.wallet-menu button:hover{background:rgba(0,0,0,.05)}
@media (max-width:760px){ .nav-connect{padding:8px 10px;font-size:12px} }