/* ==========================================================================
   NetShell — shared design system  ("The Vault", cinematic)
   One source of truth for every page. Dark-first, chrome metal, parallax depth.
   ========================================================================== */

/* ---- Fonts (self-hosted; no CDN, SRI-clean) ---- */
@font-face{font-family:'Geist';src:url('../fonts/geist-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:'Geist Mono';src:url('../fonts/geist-mono-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;font-style:normal}

/* ---- Tokens ---- */
:root{
  --bg:#070809;            /* near-black, faint blue-graphite */
  --bg-2:#0b0d10;
  --surface:#101317;        /* graphite card */
  --surface-2:#161a1f;
  --hairline:rgba(176,196,208,.10);
  --hairline-strong:rgba(176,196,208,.18);
  --ink:#F4F8FA;            /* primary text */
  --ink-2:#AEB9C2;          /* body */
  --ink-3:#7C8893;          /* muted */
  --accent:#00D4FF;         /* single sharp accent (fills, glow) */
  --accent-press:#00acd1;
  --accent-text:#3ddcff;    /* accent used AS text — AA-safe on dark */
  --good:#00E676; --bad:#FF4D4D;
  /* chrome ramp for the metal effect */
  --chrome-1:#ffffff; --chrome-2:#eef4f7; --chrome-3:#cdd9e0; --chrome-4:#ffffff; --chrome-5:#bcc9d1;
  --font:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --maxw:1240px;
  --radius:18px; --radius-sm:12px; --radius-pill:999px;
  --nav-h:68px;
  --shadow:0 30px 80px rgba(0,0,0,.6);
  --glow:0 0 60px rgba(0,212,255,.18);
  --ease:cubic-bezier(.22,1,.36,1);
}
:root[data-theme="light"]{
  --bg:#F5F7F9; --bg-2:#eef1f4; --surface:#ffffff; --surface-2:#f1f4f7;
  --hairline:rgba(10,14,20,.10); --hairline-strong:rgba(10,14,20,.18);
  --ink:#0B1115; --ink-2:#3a444d; --ink-3:#5a6571;
  --accent:#0093b8; --accent-press:#007a9b; --accent-text:#00708c;
  --chrome-1:#5a6571; --chrome-2:#2a3138; --chrome-3:#7a8893; --chrome-4:#3a444d; --chrome-5:#1e242a;
  --shadow:0 24px 60px rgba(10,14,20,.12); --glow:0 0 50px rgba(0,147,184,.12);
}

/* ---- Reset / base ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{line-height:1.05;letter-spacing:-.03em;font-weight:800}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.mono{font-family:var(--mono)}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:#000;padding:.6rem 1rem;border-radius:0 0 8px 0;z-index:200}
.skip:focus{left:0}
.container{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-text);font-weight:600}
/* Accent text helper — AA-safe in both themes (use instead of color:var(--accent) for small text) */
.accent-text{color:var(--accent-text)}

/* ---- The METAL effect (animated chrome + specular sweep) ---- */
.metal{
  position:relative;display:inline-block;
  background:linear-gradient(176deg,var(--chrome-1) 0%,var(--chrome-2) 16%,var(--chrome-3) 36%,var(--chrome-4) 50%,var(--chrome-5) 64%,var(--chrome-2) 84%,var(--chrome-1) 100%);
  background-size:100% 240%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.3)) drop-shadow(0 2px 4px rgba(0,0,0,.7)) drop-shadow(0 8px 26px rgba(0,0,0,.55));
  animation:metalShift 7s var(--ease) infinite;
}
.metal::after{ /* moving specular streak */
  content:attr(data-text);position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.85) 48%,transparent 58%);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  mix-blend-mode:screen;animation:metalSheen 5.5s var(--ease) infinite;
}
@keyframes metalShift{0%,100%{background-position:0 0}50%{background-position:0 100%}}
@keyframes metalSheen{0%{background-position:160% 0}60%,100%{background-position:-60% 0}}
@media (prefers-reduced-motion:reduce){.metal,.metal::after{animation:none}}

/* ---- Nav (glass) ---- */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:100;display:flex;align-items:center;
  background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.nav.scrolled{border-bottom-color:var(--hairline);background:color-mix(in srgb,var(--bg) 88%,transparent)}
.nav .container{display:flex;align-items:center;gap:1.5rem;width:100%}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:800;letter-spacing:-.02em;font-size:1.05rem}
.brand svg{width:24px;height:24px}
.nav-links{display:flex;gap:1.4rem;margin-left:auto;align-items:center}
.nav-links a{font-size:.9rem;color:var(--ink-2);font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:var(--radius-pill);
  background:var(--accent);color:#001318;font-weight:700;font-size:.85rem;transition:transform .2s,box-shadow .2s}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(0,212,255,.35)}
.icon-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--hairline);
  background:transparent;color:var(--ink-2);cursor:pointer;transition:.2s}
.icon-btn:hover{color:var(--ink);border-color:var(--hairline-strong)}
.hamburger{display:none}
.mobile-menu{position:fixed;inset:var(--nav-h) 0 auto 0;z-index:99;background:color-mix(in srgb,var(--bg) 97%,transparent);
  backdrop-filter:blur(20px);border-bottom:1px solid var(--hairline);transform:translateY(-120%);transition:transform .35s var(--ease);padding:1rem 1.5rem 1.5rem}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{display:block;padding:.85rem 0;border-bottom:1px solid var(--hairline);color:var(--ink-2);font-weight:500}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;font-size:.95rem;
  padding:.85rem 1.6rem;border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s,background .2s}
.btn-primary{background:var(--accent);color:#001318}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(0,212,255,.4)}
.btn-ghost{border-color:var(--hairline-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-lg{padding:1rem 2.2rem;font-size:1.02rem}

/* ---- Section scaffold + atmosphere ---- */
.section{position:relative;padding:clamp(4.5rem,10vw,8rem) 0}
.section-head{max-width:720px;margin:0 auto clamp(2.5rem,5vw,4rem);text-align:center}
.section-head h2{font-size:clamp(2rem,5vw,3.4rem);margin:.6rem 0 1rem}
.section-head p{color:var(--ink-2);font-size:clamp(1rem,2vw,1.15rem)}
.atmo{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none;z-index:0}
.grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- Parallax stage (flying screenshots) ---- */
.stage{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.stage-bg{position:absolute;inset:0;z-index:0}
.stage-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;filter:saturate(.7) contrast(1.05)}
.stage-scrim{position:absolute;inset:0;background:
  radial-gradient(54% 46% at 50% 50%,var(--bg) 0%,color-mix(in srgb,var(--bg) 86%,transparent) 38%,transparent 72%),
  linear-gradient(180deg,color-mix(in srgb,var(--bg) 60%,transparent) 0%,var(--bg) 96%)}
.stage h1{text-shadow:0 2px 30px var(--bg)}
.stage > .container > p{text-shadow:0 1px 16px var(--bg)}
.float-layer{position:absolute;inset:0;z-index:1;pointer-events:none}
.float-screen{position:absolute;width:clamp(140px,16vw,260px);aspect-ratio:1320/2868;border-radius:22px;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow),0 0 70px rgba(255,140,40,.22);
  will-change:transform;transition:transform .12s linear;background:#1a0f06}
.float-screen img{width:100%;height:100%;object-fit:cover}
.float-screen::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(150deg,rgba(255,255,255,.14),transparent 45%);pointer-events:none}
/* Motion is GSAP-driven (assemble on load, disperse on scroll, pointer tilt) — no CSS drift loop. */

/* ---- Cards / feature scenes ---- */
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:1.75rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);border-color:var(--hairline-strong);box-shadow:var(--shadow)}
.card .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);margin-bottom:1rem}
.scene{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.scene.flip>.scene-media{order:-1}
.scene-media{position:relative;min-height:420px}
.kpi{font-family:var(--mono);font-weight:800;font-size:clamp(2.4rem,6vw,4rem);letter-spacing:-.04em;color:var(--ink)}

/* ---- Reveal ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none}}

/* ---- Footer ---- */
.footer{border-top:1px solid var(--hairline);padding:3.5rem 0 2.5rem;background:var(--bg-2)}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2.5rem}
.footer a{color:var(--ink-3);font-size:.9rem;display:block;padding:.3rem 0;transition:color .2s}
.footer a:hover{color:var(--ink)}
.footer .label{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.6rem}
.footer-bottom{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--hairline);color:var(--ink-3);font-size:.82rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}

/* ---- Responsive ---- */
@media (max-width:900px){
  .scene{grid-template-columns:1fr}.scene.flip>.scene-media{order:0}
  .scene-media{min-height:340px}
}
@media (max-width:760px){
  .nav-links{display:none}.hamburger{display:grid}
  .footer-grid{grid-template-columns:1fr 1fr;gap:1.75rem}
  .float-screen{width:clamp(96px,30vw,150px)}
}
@media (max-width:460px){.footer-grid{grid-template-columns:1fr}}

/* ---- Docs layout (sidebar + article) ---- */
.docs{display:grid;grid-template-columns:264px 1fr;gap:2.75rem;max-width:var(--maxw);margin:0 auto;padding:calc(var(--nav-h) + 2.25rem) 1.5rem 5rem}
.docs-side{position:sticky;top:calc(var(--nav-h) + 1rem);align-self:start;max-height:calc(100vh - var(--nav-h) - 2rem);overflow:auto;padding-right:.5rem}
.docs-side .group{margin-bottom:1.3rem}
.docs-side .group > .label{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 .6rem .35rem;display:block}
.docs-side a{display:block;padding:.34rem .6rem;border-radius:8px;color:var(--ink-2);font-size:.9rem;transition:.15s}
.docs-side a:hover{color:var(--ink);background:var(--surface)}
.docs-side a[aria-current="page"]{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);font-weight:600}
.docs-main{min-width:0;max-width:760px}
.docs-main .crumb{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--ink-3);margin-bottom:.75rem}
.docs-main h1{font-size:clamp(1.9rem,4vw,2.7rem);margin-bottom:1rem}
.docs-main .lede{font-size:1.12rem;color:var(--ink-2);margin-bottom:2rem}
.docs-main h2{font-size:1.35rem;margin:2.25rem 0 .8rem;letter-spacing:-.02em}
.docs-main h3{font-size:1.08rem;margin:1.5rem 0 .5rem}
.docs-main p,.docs-main li{color:var(--ink-2);margin-bottom:.7rem;line-height:1.7}
.docs-main ol,.docs-main ul{padding-left:1.3rem;margin-bottom:1.1rem}
.docs-main strong{color:var(--ink)}
.docs-main code{font-family:var(--mono);background:var(--surface);padding:.15em .42em;border-radius:6px;font-size:.88em;border:1px solid var(--hairline)}
.docs-main pre{background:var(--surface);border:1px solid var(--hairline);border-radius:12px;padding:1rem 1.15rem;overflow:auto;margin-bottom:1.3rem}
.docs-main pre code{background:none;border:0;padding:0}
.callout{border:1px solid var(--hairline);border-left:3px solid var(--accent);background:var(--surface);border-radius:10px;padding:.9rem 1.2rem;margin:1.3rem 0;font-size:.94rem}
.callout strong{color:var(--accent)}
.docs-next{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--hairline);flex-wrap:wrap}
.docs-next a{display:block;padding:.9rem 1.2rem;border:1px solid var(--hairline);border-radius:12px;flex:1;min-width:200px;transition:.2s}
.docs-next a:hover{border-color:var(--accent)}
.docs-next .label{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.docs-next strong{color:var(--ink);font-size:1rem}
@media (max-width:900px){
  .docs{grid-template-columns:1fr;gap:1.5rem}
  .docs-side{position:static;max-height:none;border:1px solid var(--hairline);border-radius:12px;padding:1rem}
}


/* ---- Fire footer: oversized logo + wordmark backdrop, glow rising up ---- */
.footer-hero{position:relative;overflow:hidden;padding-top:5.5rem;padding-bottom:0;isolation:isolate}
.footer-hero .footer-glow{position:absolute;left:50%;bottom:-46%;transform:translateX(-50%);
  width:min(1100px,140%);aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 34%,transparent) 0%,color-mix(in srgb,var(--accent) 10%,transparent) 38%,transparent 64%);
  filter:blur(50px);opacity:.55;animation:footerPulse 8s var(--ease) infinite}
@keyframes footerPulse{0%,100%{opacity:.42;transform:translateX(-50%) scale(1)}50%{opacity:.62;transform:translateX(-50%) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.footer-hero .footer-glow{animation:none}}
.footer-mark{position:absolute;right:-3%;top:42%;transform:translateY(-50%) rotate(-8deg);
  width:min(440px,46%);opacity:.06;z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle,#000 38%,transparent 72%);mask-image:radial-gradient(circle,#000 38%,transparent 72%)}
.footer-wordmark{position:absolute;left:0;right:0;bottom:-1.5vw;text-align:center;line-height:.74;
  pointer-events:none;z-index:0;opacity:.42;user-select:none}
.footer-wordmark .metal{font-size:clamp(4rem,23vw,20rem);font-weight:800;letter-spacing:-.05em}
.footer-hero .container{padding-bottom:clamp(7rem,16vw,13rem)}  /* clear space above the wordmark */
.footer-hero .footer-bottom{border-top-color:color-mix(in srgb,var(--hairline) 60%,transparent)}
@media (max-width:760px){
  .footer-mark{display:none}
  .footer-wordmark{bottom:-.5vw;opacity:.35}
  .footer-hero .container{padding-bottom:clamp(5rem,22vw,8rem)}
}

/* ---- Fire footer: lead block typography ---- */
.footer-lead{max-width:640px;margin:0 auto clamp(3rem,6vw,4.5rem);text-align:center}
.footer-head{font-size:clamp(2rem,5.5vw,3.6rem);line-height:1.04;letter-spacing:-.03em;margin:.7rem 0 1.1rem}
.footer-sub{color:var(--ink-2);font-size:clamp(1rem,2vw,1.18rem);line-height:1.7;margin:0 auto 1.8rem;max-width:46ch}
.footer-hero .footer a{color:var(--ink-2)}          /* more readable footer links */
.footer-hero .footer a:hover{color:var(--ink)}
.footer-hero .label{color:var(--ink-3)}
.footer-wordmark .metal{opacity:.9}                  /* wordmark already dimmed via .footer-wordmark opacity */

/* Light mode: the white specular streak is for chrome-on-dark; it washes out the
   dark metal text on a light background, so disable it and keep the clean gradient. */
:root[data-theme="light"] .metal::after{display:none}
:root[data-theme="light"] .metal{filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))}
:root[data-theme="light"] .stage h1{text-shadow:0 1px 2px rgba(255,255,255,.7)}

/* ---- Email capture form ---- */
.subscribe{max-width:440px;margin:1.75rem auto 0}
.subscribe-row{display:flex;gap:.6rem;flex-wrap:wrap}
.subscribe input[type=email]{flex:1;min-width:200px;padding:.85rem 1.1rem;border-radius:var(--radius-pill);
  border:1px solid var(--hairline-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:.95rem;transition:border-color .2s}
.subscribe input[type=email]::placeholder{color:var(--ink-3)}
.subscribe input[type=email]:focus{outline:none;border-color:var(--accent)}
.subscribe .btn{white-space:nowrap}
.subscribe-msg{margin-top:.6rem;font-size:.85rem}
.subscribe-sub{margin-top:.6rem;font-size:.78rem;color:var(--ink-3)}

/* ============================================================
   MOBILE PASS — hard overflow lockdown + readable hero + calm motion
   (centralized: fixes every page that uses the design system)
   ============================================================ */
html, body { overflow-x: clip; max-width: 100%; }
*, *::before, *::after { min-width: 0; }                 /* stop flex/grid children forcing overflow */
.stage, .float-layer { overflow: clip; max-width: 100vw; }
img, video, table, pre { max-width: 100%; }

@media (max-width: 820px){
  /* HERO: the flying screens cramp + overflow on small screens. Keep the
     cinematic video + scrim, drop the floating phones below tablet so the
     copy is clean and centered. (They shine on desktop; mobile stays sharp.) */
  .float-layer { display: none !important; }

  .stage { min-height: auto; padding: calc(var(--nav-h) + 2.5rem) 0 3.5rem; }
  .stage-scrim { background: linear-gradient(180deg,
      color-mix(in srgb,var(--bg) 55%,transparent) 0%, var(--bg) 80%); }
  /* inline font-size on these elements needs !important to be overridden */
  .stage h1 { font-size: clamp(1.9rem, 8.5vw, 2.7rem) !important; max-width: 100% !important; overflow-wrap: anywhere; }
  .stage .eyebrow { font-size: .62rem !important; letter-spacing: .12em; }
  .stage > .container > p { font-size: 1rem !important; max-width: 100% !important; }
  .stage .mono { font-size: .64rem !important; letter-spacing: .03em; line-height: 1.6; }
  .stage .container > div[style*="flex"] { flex-direction: column; align-items: stretch; }
  .stage .btn, .footer-lead .btn { width: 100% !important; justify-content: center; }
  .stage .btn-lg, .footer-lead .btn-lg { padding: .95rem 1.4rem; }
}

@media (max-width: 600px){
  .section { padding: clamp(3rem,12vw,4.5rem) 0; }
  .section-head h2, .footer-head { font-size: clamp(1.7rem,8vw,2.4rem); }
  /* comparison tables: shrink to fit, never force horizontal page scroll */
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { font-size: .78rem; }
  table th, table td { padding: .7rem .6rem !important; }
  /* explore / philosophy / step card grids → single column */
  #explore > .container > div,
  #philosophy .reveal[style*="grid"],
  .footer-grid { grid-template-columns: 1fr !important; }
  .footer-wordmark .metal { font-size: clamp(3rem, 20vw, 6rem); }
  .scene-media .float-screen { width: min(220px, 72%) !important; }
}

/* Hard hero-overflow containment on mobile (the container was rendering wider
   than the viewport; force it + wrap every hero text node). */
@media (max-width:820px){
  .container { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
  .stage .container { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .stage h1, .stage p, .stage .eyebrow, .stage .mono, .stage span {
    white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word; max-width: 100% !important;
  }
  .stage .container > div { max-width: 100% !important; }
  /* size overrides live HERE (trailing block reliably wins over the inline styles) */
  .stage h1 { font-size: clamp(1.85rem, 8vw, 2.6rem) !important; line-height: 1.08 !important; }
  .stage .eyebrow { font-size: .6rem !important; letter-spacing: .1em !important; }
  .stage > .container > p { font-size: 1rem !important; }
  .stage .mono { font-size: .62rem !important; letter-spacing: .02em !important; }
  .stage .container > div[style*="flex"] { flex-direction: column !important; align-items: stretch !important; }
  .stage .btn { width: 100% !important; }
}