/* InboxGrids landing — styles (assets/styles.css) */
html{scroll-behavior:smooth}
body{margin:0;background:#f4efe6;color:#3a352d;font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#0b4a45}a:hover{color:#083a36}
::selection{background:#f6c9a8;color:#14120f}

.ig-scene{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0;pointer-events:none;display:block}
.ig-veil-side{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(244,239,230,.95) 0%,rgba(244,239,230,.82) 34%,rgba(244,239,230,.25) 56%,rgba(244,239,230,0) 70%)}
.ig-veil-full{position:fixed;inset:0;z-index:1;pointer-events:none;background:#f4efe6;opacity:0}
.ig-veil-edge{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(244,239,230,.9) 0%,rgba(244,239,230,0) 16%,rgba(244,239,230,0) 86%,rgba(244,239,230,.8) 100%)}
.ig-labels{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.lbl{position:absolute;top:0;left:0;opacity:0;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:rgba(255,253,249,.95);border:1px solid rgba(20,18,15,.12);box-shadow:0 12px 26px -14px rgba(20,18,15,.45);font:600 12.5px/1.15 'IBM Plex Sans',system-ui,sans-serif;color:#14120f;white-space:nowrap;will-change:transform,opacity}
.lbl-col{display:flex;flex-direction:column;gap:4px}
.lbl small{font:500 10.5px/1 'JetBrains Mono',monospace;color:#5d574c}
.lbl .dot{width:9px;height:9px;border-radius:99px;flex:none}
.lbl-stack{padding:6px 10px;border-radius:9px}

.sec{position:relative;z-index:2}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px;box-sizing:border-box}
.glass{background:rgba(255,253,249,.82);-webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);border:1px solid rgba(20,18,15,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(20,18,15,.05),0 18px 36px -20px rgba(20,18,15,.28)}
.card{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease,border-color .45s ease}
.card:hover{transform:translateY(-6px);border-color:rgba(15,118,110,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 30px 50px -26px rgba(11,74,69,.45)}
.eyebrow{font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.22em;text-transform:uppercase}
.disp{font-family:'Bricolage Grotesque','IBM Plex Sans',system-ui,sans-serif;letter-spacing:-.035em;color:#14120f}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.btn-p{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:14px;background:#0b4a45;color:#fff;font-weight:600;font-size:15px;text-decoration:none;box-shadow:0 3px 0 #062e2b,0 18px 32px -14px rgba(11,74,69,.75);transition:transform .3s cubic-bezier(.2,.7,.2,1),background .3s}
.btn-p:hover{color:#fff;background:#0d5c56;transform:translateY(-2px)}
.btn-g{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:14px;color:#14120f;font-weight:600;font-size:15px;text-decoration:none;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.btn-g:hover{color:#14120f;transform:translateY(-2px)}
.btn-sm{min-height:44px;padding:0 18px;font-size:14px;border-radius:12px;white-space:nowrap}
.navlink{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;color:#5d574c;text-decoration:none;font-size:14px;font-weight:500}
.navlink:hover{color:#14120f;background:rgba(20,18,15,.05)}

.g-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:center}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.g-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:stretch}
.g-int{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}

.marquee{display:flex;width:max-content;gap:56px;padding-right:56px;animation:ig-slide 36s linear infinite}
@keyframes ig-slide{to{transform:translateX(-50%)}}
@keyframes ig-pulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
@keyframes ig-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes ig-spin{to{transform:rotate(360deg)}}

@supports (animation-timeline: view()) {
  .rv{animation:ig-rv linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  @keyframes ig-rv{from{opacity:0;transform:translateY(46px) scale(.98)}to{opacity:1;transform:none}}
}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;outline:none;cursor:grab;margin:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:6px solid #0b4a45;box-shadow:0 6px 16px -4px rgba(11,74,69,.6)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:6px solid #0b4a45}
input[type=range]:focus-visible{box-shadow:0 0 0 4px rgba(15,118,110,.25)}

details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
.fq-i{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
details[open] .fq-i{transform:rotate(45deg)}

table.cmp{width:100%;min-width:720px;border-collapse:collapse;font-size:14px}
table.cmp th,table.cmp td{padding:15px 22px;text-align:left;border-bottom:1px solid rgba(20,18,15,.08)}
table.cmp tbody tr:hover{background:rgba(255,255,255,.5)}
.yes{color:#0f766e;font-weight:700}
.no{color:#a39a8a}

@media (max-width:1000px){
  .g-hero,.g2,.g-calc{grid-template-columns:minmax(0,1fr)}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .navlinks{display:none !important}
  .hero-console{margin-top:24px !important}
  .ig-veil-side{background:linear-gradient(180deg,rgba(244,239,230,.9),rgba(244,239,230,.72))}
  .calc-window{min-height:300px}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .g3,.g4{grid-template-columns:minmax(0,1fr)}
  .g-int{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hide-s{display:none !important}
  .lbl small{display:none}
  .lbl{font-size:11px;padding:6px 9px}
}
@media (prefers-reduced-motion: reduce){
  .marquee{animation:none}
  .rv{animation:none !important}
  .card,.btn-p,.btn-g{transition:none}
}

/* ---------- mobile menu ---------- */
.nav-toggle{display:none;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:#14120f;cursor:pointer}
.nav-toggle:hover{background:rgba(20,18,15,.05)}
.mobile-menu{margin-top:8px;padding:8px;border-radius:16px;display:flex;flex-direction:column;gap:2px}
.mobile-menu[hidden]{display:none}
@media (max-width:1000px){ .nav-toggle{display:grid} }
@media (min-width:1001px){ .mobile-menu{display:none !important} }

/* ---------- no-WebGL fallback: drop the 3D layers, keep a soft backdrop ---------- */
.no-webgl .ig-scene,.no-webgl .ig-labels,.no-webgl .ig-veil-side,.no-webgl .ig-veil-full{display:none}
.no-webgl body{background:radial-gradient(60% 50% at 20% 8%,rgba(13,92,86,.10),transparent 70%),radial-gradient(55% 55% at 84% 18%,rgba(29,78,216,.08),transparent 72%),#f4efe6}

/* ---------- 3D reserved bands: viewport-relative on small screens ---------- */
/* The delivery band and the infra column are sized for desktop framing; on a
   phone that leaves a tall empty gap under the scene, so scale them down. */
@media (max-width:1000px){
  [data-kf="delivery"]{ height: 46vh !important; min-height: 300px; }
  #infra .g2 > div[aria-hidden="true"]{ min-height: 46vh !important; }
  #calc .calc-window{ min-height: 320px; }
}
@media (max-width:640px){
  [data-kf="delivery"]{ height: 40vh !important; min-height: 260px; }
  #infra .g2 > div[aria-hidden="true"]{ min-height: 40vh !important; }
  #calc .calc-window{ min-height: 260px; }
}