/* Hero top strip — keep compact at all sizes */
.hero-top{font-size:11.5px; align-items:center}
.hero-top > *{display:flex; align-items:center}
.hero-top .center{justify-content:center}
.hero-top .right{justify-content:flex-end}
@media (max-width: 1100px){
  .hero-top{
    grid-template-columns:1fr auto !important;
    gap:12px !important;
    padding:10px 28px !important;
    font-size:10.5px !important;
  }
  .hero-top .center{display:none}
  .hero-top .right{text-align:right}
}
@media (max-width: 640px){
  .hero-top{
    grid-template-columns:1fr !important;
    padding:7px 20px !important;
    font-size:9.5px !important;
    letter-spacing:.03em !important;
    gap:0 !important;
    line-height:1.35 !important;
  }
  .hero-top .center, .hero-top .right{display:none !important}
  .hero-top .left{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

/* ============================================================
   BuildFi · Mobile Responsive Overrides
   Loads AFTER buildfi.css + pages.css so it wins cascade.
   ============================================================ */

/* ===== Tablet (≤ 1040px) ===== */
@media (max-width: 1040px){
  .wrap{padding-left:28px; padding-right:28px}

  /* Nav */
  .nav-links{display:none}
  .nav-inner{gap:16px}
  .nav-cta .btn.ghost{display:none}

  /* Hero */
  .hero{padding:16px 0 40px !important}
  .hero-main{padding:32px 28px 24px !important}
  .hero-display{font-size:clamp(64px, 14vw, 120px) !important; line-height:.94 !important}
  .hero-sub, .hero-sub-grid{grid-template-columns:1fr !important; gap:20px !important}

  /* Two-col layouts */
  .problem-grid, .ade-grid, .audiences, .gap-visual,
  .how-grid, .signals-grid, .prod-feature{
    grid-template-columns:1fr !important;
    gap:36px !important;
  }

  /* Grids -> 2 col */
  .metrics{grid-template-columns:repeat(2, 1fr) !important}
  .product-grid{grid-template-columns:1fr !important; gap:20px !important}
  .how-steps{grid-template-columns:repeat(2, 1fr) !important}
  .secured-grid{grid-template-columns:repeat(2, 1fr) !important}
  .rm-track{grid-template-columns:repeat(2, 1fr) !important; border-top:1px solid var(--ink)}
  .rm-col{border-right:0 !important; border-bottom:1px solid var(--rule-2)}

  /* Ticker still full width — just reduce padding */
  .ticker{font-size:14px}

  /* Section heads stack */
  .section-head{grid-template-columns:1fr !important; gap:16px !important}
  .section-head h2{font-size:clamp(32px, 5vw, 52px) !important}
  .section-head .num{font-size:18px !important}
}

/* ===== Mobile (≤ 720px) ===== */
@media (max-width: 720px){
  :root{
    --wrap-pad: 20px;
  }
  .wrap{padding-left:20px; padding-right:20px}

  /* ---------- Nav ---------- */
  .nav{padding:0}
  .nav-inner{padding:14px 20px; gap:12px}
  .brand{font-size:15px}
  .brand-mark{width:18px; height:18px}
  .nav-cta{gap:6px}
  .nav-cta .btn{padding:9px 14px; font-size:12px}
  .nav-cta .btn.accent .arr{display:none}

  /* ---------- Hero ---------- */
  .hero{padding:0 0 32px !important}
  .hero-main{padding:40px 20px 20px !important}
  .hero-kicker{margin-bottom:20px !important; gap:8px !important; margin-top:8px !important}
  .hero-inner{display:block}
  .hero-display{
    font-size:clamp(54px, 16vw, 96px) !important;
    line-height:.92 !important;
    letter-spacing:-.035em !important;
    margin:0 0 28px !important;
  }
  .hero-eyebrow{font-size:10px !important; margin-bottom:20px !important}
  .hero-sub{grid-template-columns:1fr !important; gap:18px !important; margin-top:28px !important; padding-top:28px !important}
  .hero-sub p{font-size:15.5px !important; line-height:1.55 !important}
  .hero-actions{flex-wrap:wrap; gap:8px}
  .hero-actions .btn{flex:1 1 auto; justify-content:center}

  /* ---------- Sections global ---------- */
  section{padding:56px 0 !important}
  .section-head{margin-bottom:32px !important}
  .section-head h2{font-size:clamp(30px, 8vw, 44px) !important; line-height:1.02 !important}
  .eyebrow{font-size:10px !important; letter-spacing:.1em !important}

  /* ---------- Problem / Gap diagram ---------- */
  .problem-grid{gap:28px !important}
  .problem-copy p{font-size:15.5px !important}
  .gap-diagram{padding:20px 16px !important; overflow:hidden}
  .tl-scale, .tl-ticks{font-size:9px !important}
  .tl-bar{font-size:9.5px !important; padding:4px 6px !important; white-space:nowrap !important; color:transparent !important}
  .tl-bar::after{
    content:attr(data-label-mobile) !important;
    position:absolute; top:50%; transform:translateY(-50%);
    color:var(--ink-2) !important;
    font-family:"JetBrains Mono", monospace; font-size:9.5px !important; letter-spacing:.04em; text-transform:uppercase;
    white-space:nowrap; pointer-events:none;
  }
  /* short bars (fact, bf): label to the right */
  .tl-bar.fact::after, .tl-bar.bf::after{left:calc(100% + 6px)}
  /* wide trad bar: label above it on mobile */
  .tl-bar.trad{overflow:visible !important}
  .tl-bar.trad::after{top:-14px !important; left:0 !important; transform:none !important}
  .tl-legend{grid-template-columns:1fr !important; gap:6px !important; font-size:11px !important}

  /* ---------- How / Flow ---------- */
  .how-steps{grid-template-columns:1fr !important; gap:16px !important}
  .step{padding:24px 20px 28px !important; min-height:auto !important}
  .step-diagram{height:140px !important}
  .step h3{font-size:22px !important}
  .step p{font-size:13.5px !important}

  /* ---------- Products ---------- */
  .product-grid{grid-template-columns:1fr !important; gap:16px !important}
  .prod{padding:24px 20px !important; min-height:auto !important}
  .prod-visual{height:auto !important; min-height:100px !important; padding:16px !important}
  .prod h3{font-size:26px !important}
  .prod .desc{font-size:14px !important}
  .prod .specs .row{grid-template-columns:1fr auto !important; gap:12px !important}

  /* ---------- ADE / Underwriting ---------- */
  .ade-grid{grid-template-columns:1fr !important; gap:28px !important}
  .ade-right{padding:20px !important; font-size:11px !important}
  .scr-row{grid-template-columns:90px 1fr auto !important; gap:10px !important; font-size:10px !important}
  .ade-decision{padding:16px !important}
  .ade-decision .decide .verdict{font-size:22px !important}
  .signals{grid-template-columns:1fr 1fr !important; gap:12px !important}
  .signal{padding:16px !important}

  /* ---------- Metrics ---------- */
  .metrics{grid-template-columns:1fr 1fr !important; gap:0 !important; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink)}
  .metric{padding:22px 16px !important; border-right:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2)}
  .metric:nth-child(2n){border-right:0}
  .metric:nth-last-child(-n+2){border-bottom:0}
  .metric .val{font-size:clamp(32px, 9vw, 52px) !important; letter-spacing:-.02em !important}
  .metric .val small{font-size:.55em !important}
  .metric .lbl{font-size:10px !important; letter-spacing:.08em !important}
  .metric .cap{font-size:11px !important; line-height:1.4 !important}

  /* ---------- Secured / Structure ---------- */
  .secured-grid{grid-template-columns:1fr !important; gap:12px !important}
  .sec-card{padding:20px !important; min-height:auto !important}
  .sec-card h4{font-size:20px !important}
  .sec-card p{font-size:13.5px !important}

  /* ---------- Roadmap ---------- */
  .rm-track{grid-template-columns:1fr !important}
  .rm-col{padding:20px 0 24px !important; border-bottom:1px solid var(--rule-2)}
  .rm-col:last-child{border-bottom:0}
  .rm-col h4{font-size:20px !important}

  /* ---------- Partners ticker ---------- */
  .ticker{font-size:13px}
  .ticker-track{animation-duration:14s !important}

  /* ---------- Partners rows ---------- */
  .partners{padding:40px 0 !important}
  .p-row{
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding:18px 0 !important;
    align-items:flex-start !important;
  }
  .p-row .label{font-size:10px !important; letter-spacing:.1em !important}
  .logo-strip{gap:10px 20px !important; row-gap:8px !important}
  .logo-strip .logo{
    font-size:16px !important;
    padding:2px 0 !important;
  }
  .logo-strip .logo.mono{font-size:11px !important; letter-spacing:.08em !important}

  /* ---------- Audiences (For SMEs / For Distributors) ---------- */
  .audiences{grid-template-columns:1fr !important; gap:20px !important}
  .aud-card{padding:32px 24px !important; min-height:auto !important}
  .aud-card h3{font-size:32px !important; line-height:1 !important}
  .aud-card p{font-size:15px !important}
  .aud-card ul li{font-size:14px !important}
  .aud{padding:28px 22px !important; min-height:auto !important}
  .aud h3{font-size:30px !important; line-height:1.05 !important}
  .aud .cta{flex-direction:column !important; gap:8px !important; width:100% !important}
  .aud .cta .btn{
    width:100% !important;
    justify-content:center !important;
    padding:14px 18px !important;
    font-size:13px !important;
    white-space:nowrap !important;
  }

  /* ---------- Footer ---------- */
  footer{padding:56px 0 40px !important}
  .ft-word{font-size:clamp(48px, 14vw, 80px) !important; line-height:.95 !important; margin-bottom:36px !important}
  .ft-grid{grid-template-columns:1fr 1fr !important; gap:28px 20px !important}
  .ft-col:first-child{grid-column:1/-1}
  .ft-col h5{font-size:11px !important}
  .ft-col a, .ft-col p{font-size:13px !important}
  .ft-bot{grid-template-columns:1fr !important; gap:12px !important; font-size:10px !important; padding-top:24px !important}

  /* ---------- SUB-PAGE SPECIFIC ---------- */
  .page-hero{padding:48px 0 32px !important}
  .page-hero h1{font-size:clamp(44px, 13vw, 80px) !important; line-height:.95 !important}
  .page-hero .dek{font-size:17px !important; line-height:1.35 !important}
  .page-hero .crumbs{font-size:10px !important; margin-bottom:20px !important}
  .page-hero .meta-row{gap:12px 20px !important; margin-top:28px !important; padding-top:20px !important; font-size:10px !important}

  .page-sect{padding:56px 0 !important}
  .two-col{grid-template-columns:1fr !important; gap:32px !important}
  .two-col h2{font-size:clamp(28px, 8vw, 44px) !important}
  .two-col p{font-size:15.5px !important}

  .card-grid-3, .card-grid-2{grid-template-columns:1fr !important; gap:12px !important}
  .card{padding:22px !important; min-height:auto !important}
  .card h4{font-size:22px !important}

  .spec-table .row{grid-template-columns:1fr !important; gap:4px !important; padding:12px 0 !important}
  .spec-table .row .k{font-size:10px !important}
  .spec-table .row .v{font-size:13.5px !important}

  .cta-band{padding:48px 0 !important}
  .cta-band .inner{grid-template-columns:1fr !important; gap:24px !important}
  .cta-band h3{font-size:clamp(28px, 7vw, 40px) !important}
  .cta-band .cta-actions{flex-direction:column; width:100%}
  .cta-band .cta-actions .btn{width:100%; justify-content:center}

  /* Careers jobs list */
  .job{grid-template-columns:32px 1fr auto !important; gap:12px !important; padding:18px 4px !important}
  .job .ttl{font-size:17px !important; line-height:1.2 !important}
  .job .meta{display:none !important}
  .job:hover{padding-left:8px !important; padding-right:8px !important}
  .job .num{font-size:10px !important}
  .job .arrow{font-size:22px !important}

  /* Press rows */
  .press-row{grid-template-columns:1fr !important; gap:4px !important; padding:18px 0 !important}
  .press-row .src, .press-row .read{display:none !important}
  .press-row .date{font-size:10px !important}
  .press-row .head{font-size:17px !important; line-height:1.25 !important}

  /* Team */
  .team-grid{grid-template-columns:1fr 1fr !important; gap:12px !important}
  .member{padding:16px !important}
  .member h5{font-size:18px !important}
  .member .role{font-size:10px !important}
  .member p{font-size:12px !important}
  .member .avatar{font-size:32px !important}

  /* Architecture diagram */
  .arch-diagram{padding:20px !important; min-height:auto !important}
  .arch-layer.l1{grid-template-columns:1fr 1fr !important}
  .arch-node{padding:10px 12px !important; font-size:10px !important}
  .arch-node .val{font-size:14px !important}
  .arch-divider{font-size:9px !important}

  /* Sharia TOC */
  .legal-grid{grid-template-columns:1fr !important; gap:32px !important}
  .toc{position:static !important; padding:16px !important}
  .toc h5{font-size:10px !important}
  .toc a{font-size:13px !important}
  .legal-body h3{font-size:24px !important; margin-top:36px !important}
  .legal-body p{font-size:15px !important; line-height:1.6 !important}
  .legal-body blockquote{font-size:17px !important; padding:14px 18px !important}

  /* Press source & read hidden, already done */

  /* Code block on embedded API page */
  pre{font-size:10.5px !important; padding:16px !important; line-height:1.55 !important}
}

/* ===== Small mobile (≤ 400px) ===== */
@media (max-width: 400px){
  .wrap{padding-left:16px; padding-right:16px}
  .metrics{grid-template-columns:1fr !important}
  .metric{border-right:0 !important; border-bottom:1px solid var(--rule-2) !important}
  .signals{grid-template-columns:1fr !important}
  .ft-grid{grid-template-columns:1fr !important}
  .team-grid{grid-template-columns:1fr !important}
  .nav-cta .btn{padding:8px 12px !important; font-size:11px !important}
  .brand span:not(.brand-mark){font-size:14px}
}

/* ===== Mobile motion taming ===== */
@media (max-width: 720px){
  /* Shorter transforms & lower distance so it feels snappy on mobile */
  .reveal{transform:translateY(12px)}
  /* Disable hero parallax on mobile — set via script? just cancel here */
  .hero-display{transform:none !important}
  /* Disable magnetic buttons on touch */
  @media (hover: none){
    .btn{transform:none !important}
  }
}


/* ============ Mobile nav burger + sheet ============ */
.nav-burger{display:none; background:none; border:0; padding:8px; cursor:pointer; gap:4px; flex-direction:column; width:36px; height:36px; justify-content:center; align-items:center}
.nav-burger span{display:block; width:20px; height:1.5px; background:var(--ink); transition:transform .25s, opacity .2s}
body.nav-open .nav-burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
body.nav-open .nav-burger span:nth-child(2){opacity:0}
body.nav-open .nav-burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.nav-sheet{
  position:fixed; inset:64px 0 0 0; z-index:40;
  background:var(--paper);
  padding:32px 24px 40px;
  display:flex; flex-direction:column; gap:24px;
  transform:translateY(-100%); opacity:0; pointer-events:none;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s;
  border-top:1px solid var(--rule);
}
body.nav-open .nav-sheet{transform:translateY(0) !important; opacity:1 !important; pointer-events:auto !important}
.nav-sheet-links{display:flex; flex-direction:column; gap:2px}
.nav-sheet-links a{
  font-family:"Instrument Serif", serif; font-size:32px; letter-spacing:-.015em;
  color:var(--ink); padding:10px 0; border-bottom:1px solid var(--rule);
}
.nav-sheet-links a:last-child{border-bottom:0}
.nav-sheet-cta{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.nav-sheet-cta .btn{justify-content:space-between; padding:14px 20px; font-size:13px}
body.nav-open{overflow:hidden}

@media (max-width: 1040px){
  .nav-burger{display:flex}
  .nav-cta{display:none}
}
@media (min-width: 1041px){
  .nav-burger, .nav-sheet{display:none !important}
}

/* ============================================================
   Additional safety overrides — prevent overflow / overlap
   ============================================================ */

/* Universal overflow guards */
html, body{max-width:100vw; overflow-x:hidden}
img, svg, video{max-width:100%; height:auto}
pre{overflow-x:auto; max-width:100%}
table{max-width:100%}

/* System font fallback while Google Fonts loads */
body{font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}

/* Avoid sticky-nav cutting into anchor scroll on mobile */
@media (max-width: 720px){
  html{scroll-padding-top: 110px}
  /* Reduce hero kicker tag wrapping mess */
  .hero-kicker .tag{font-size:9.5px !important; padding:5px 10px !important; letter-spacing:.06em !important}
  .hero-kicker{margin-bottom:18px !important; gap:6px !important}

  /* Hero ticker: trim padding so it doesn't dominate */
  .ticker{margin-top:24px !important}
  .ticker-track{padding:10px 0 !important; gap:36px !important}

  /* Problem grid 12-col → stack */
  .problem-grid{grid-template-columns:1fr !important; gap:24px !important}
  .problem-lead{grid-column:1/-1 !important; font-size:clamp(26px, 6.8vw, 38px) !important}
  .problem-side{grid-column:1/-1 !important; font-size:14px !important}
  .gap-diagram{padding:18px 14px !important; margin-top:24px !important}
  .gap-head{flex-direction:column; align-items:flex-start; gap:6px}
  .gap-head .title{font-size:18px !important}

  /* Eight-pillar legal grid: confirm 1-col stack with smaller padding */
  .secured{padding:48px 0 !important}
  .sec-card .sym{width:32px !important; height:32px !important; font-size:12px !important}

  /* Roadmap stays single column with tighter card */
  .rm-col{padding:18px 18px 22px !important}
  .rm-col .rm-phase{font-size:10px !important}
  .rm-col .rm-when{font-size:10px !important}
  .rm-col .rm-title{font-size:18px !important}
  .rm-col .rm-body{font-size:13px !important}
  .rm-col .rm-list li{font-size:12px !important}

  /* Forecast grid 2-col on mobile */
  .forecast-grid{grid-template-columns:repeat(2, 1fr) !important}
  .forecast-grid .fc{padding:16px 14px !important}
  .forecast-grid .o, .forecast-grid .r{font-size:22px !important}
  .forecast-head{flex-direction:column; gap:4px}
  .forecast-legend{flex-direction:column !important; gap:6px !important; font-size:9px !important}

  /* Unit-economics bars */
  .ue{padding:48px 0 !important}
  .ue-grid{grid-template-columns:1fr !important; gap:24px !important}
  .ue-bar{grid-template-columns: 1.2fr 1fr 70px !important; gap:10px !important; padding:10px 0 !important}
  .ue-bar .k{font-size:11px !important}
  .ue-bar .v{font-size:11px !important}
  .ue-left h3{font-size:24px !important; max-width:none !important}
  .ue-left p.ue-lede{font-size:14px !important}
  .be-card{padding:22px 20px !important}
  .be-value{font-size:64px !important}
  .be-value .sm{font-size:32px !important}

  /* Hero sub: keep readable */
  .hero-grid{grid-template-columns:1fr !important; gap:24px !important; margin-top:24px !important; padding-top:20px !important}
  .hero-right{margin-left:0 !important; max-width:100% !important}

  /* Hero scale on small mobile; descenders drape into next line — intentional */
  .hero-display{font-size:clamp(54px, 14vw, 96px) !important; line-height:.96 !important}
}

/* Small mobile (≤ 380px) extra tightening */
@media (max-width: 380px){
  .wrap{padding-left:14px !important; padding-right:14px !important}
  .nav-inner{padding:14px 14px !important}
  .nav-cta .btn{padding:7px 10px !important; font-size:10.5px !important}
  .ue-bar{grid-template-columns:1fr 60px !important}
  .ue-bar .bar{display:none}
  .forecast-grid{grid-template-columns:1fr !important}
  .reg-bar-link{display:none}
}