:root{
  --bg:#0a0b0f; --card:#0f1117; --muted:#121420; --border:#1d2230;
  --text:#f6f7fb; --soft:#a9b1c6; --brand1:#6ea8fe; --brand2:#60a5fa; --brand3:#34d399;
  --radius:14px; --radius-sm:10px; --shadow:0 6px 28px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
img{max-width:100%;height:auto;display:block}

.xa-bg{background:var(--bg)}
.xa-text{color:var(--text);font:16px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial}

.xa-container{max-width:1152px;margin:0 auto;padding:0 18px}
.xa-section{padding:56px 0}
@media (min-width:768px){ .xa-section{padding:84px 0} }

/* Header / nav */
.xa-header{position:sticky;top:0;z-index:50;background:rgba(10,11,15,.6);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--border)}
.xa-nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.xa-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.xa-brand-logo{width:28px;height:28px}
.xa-brand-name{font-weight:600;letter-spacing:.2px}

.xa-link{color:var(--soft);text-decoration:none;padding:10px 12px;border-radius:10px}
.xa-link:hover{background:var(--muted);color:var(--text)}

.xa-nav-links{display:none;gap:6px;align-items:center}
.xa-cta-group{display:none;gap:8px;align-items:center}
.xa-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:600;border:1px solid var(--border);color:var(--text);background:transparent}
.xa-btn:hover{background:var(--muted)}
.xa-btn-primary{background:var(--text);color:#0b0b10;border-color:transparent}
.xa-btn-primary:hover{opacity:.9}
.xa-hamburger{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--border);border-radius:10px;background:transparent;color:var(--text)}
.xa-hamburger:active{transform:scale(.98)}
@media (min-width:900px){ .xa-nav-links,.xa-cta-group{display:flex} .xa-hamburger{display:none} }

/* Desktop dropdown using <details> */
.xa-dd{position:relative}
.xa-dd-summary{list-style:none;cursor:pointer}
.xa-dd-summary::-webkit-details-marker{display:none}
.xa-dd[open] .xa-dd-menu{opacity:1;transform:translateY(0);pointer-events:auto}
.xa-dd-menu{position:absolute;top:42px;left:0;background:var(--card);border:1px solid var(--border);border-radius:12px;min-width:240px;box-shadow:var(--shadow);padding:6px;opacity:0;transform:translateY(6px);transition:.16s ease;pointer-events:none;z-index:60}
.xa-dd-item{display:block;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--text)}
.xa-dd-item:hover{background:var(--muted)}

/* Mobile panel */
.xa-mobile-panel{display:none;border-top:1px solid var(--border);background:rgba(10,11,15,.95)}
.xa-mobile-panel.open{display:block}
.xa-mobile-grid{display:grid;gap:6px;padding:10px 0}
.xa-mobile-item{display:block;padding:12px;border-radius:10px;text-decoration:none;color:var(--text)}
.xa-mobile-item:hover{background:var(--muted)}
.xa-mobile-label{display:block;color:var(--soft);padding:4px 12px 0;font-size:12px}
.xa-mobile-sub{display:block;margin-left:12px;padding:10px;border-radius:10px;text-decoration:none;color:var(--text)}
.xa-mobile-sub:hover{background:var(--muted)}
.xa-mobile-actions{display:flex;gap:8px;padding:10px 0;border-top:1px solid var(--border)}

/* Hero */
.xa-hero{position:relative;overflow:hidden}
.xa-hero-halo{position:absolute;inset:-200px -40px auto; height:420px; pointer-events:none; filter:blur(60px);
  background:radial-gradient(800px 400px at 50% 30%, rgba(110,168,254,.25), transparent 60%),
             radial-gradient(600px 300px at 30% 10%, rgba(96,165,250,.20), transparent 60%),
             radial-gradient(600px 300px at 70% 10%, rgba(52,211,153,.18), transparent 60%);}
.xa-hero-inner{text-align:center;position:relative;z-index:1}
.xa-badge{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--border);border-radius:999px;padding:6px 10px;color:var(--soft);background:rgba(15,17,23,.6)}
.xa-dot{width:8px;height:8px;border-radius:50%;background:var(--brand3)}
.xa-h1{font-size:28px;line-height:1.1;margin:16px 0 0;font-weight:700}
.xa-lead{color:var(--soft);max-width:720px;margin:14px auto 0}
.xa-hero-ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
@media (min-width:768px){ .xa-h1{font-size:48px} .xa-lead{font-size:18px} }

.xa-grid{display:grid;gap:12px;margin-top:28px}
@media (min-width:640px){ .xa-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:992px){ .xa-grid{grid-template-columns:repeat(3,1fr)}}
.xa-card{border:1px solid var(--border);background:linear-gradient(180deg, rgba(18,20,32,.6), rgba(16,18,28,.6));border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.xa-card-title{margin:0 0 6px;font-size:16px}
.xa-card-desc{margin:0;color:var(--soft);font-size:14px}
.xa-check{color:var(--brand3);margin-right:8px}

.xa-mt-lg{margin-top:28px}

/* Split section */
.xa-split{display:grid;gap:16px;align-items:center}
@media (min-width:900px){ .xa-split{grid-template-columns:1.2fr .8fr} }
.xa-list{margin:10px 0 0;padding-left:0;list-style:none;color:var(--soft);display:grid;gap:10px}
.xa-left{justify-content:flex-start}

/* Proof card */
.xa-proof{border:1px solid var(--border);border-radius:var(--radius);padding:18px;background:var(--card)}
.xa-proof-head{font-weight:600}
.xa-quote{color:var(--soft);font-size:14px;margin-top:6px}
.xa-proof-meta{display:flex;align-items:center;gap:10px;margin-top:10px}
.xa-avatar{width:38px;height:38px;border-radius:50%;background:var(--muted)}
.xa-proof-name{font-weight:600}
.xa-proof-role{font-size:12px;color:var(--soft)}

/* CTA card */
.xa-cta{border:1px solid var(--border);border-radius:20px;padding:26px;background:
  linear-gradient(120deg, rgba(110,168,254,.08), rgba(96,165,250,.06), rgba(52,211,153,.06))}
.xa-h2{margin:0 0 8px;font-size:24px}
.xa-h3{margin:0 0 6px;font-size:20px}
.xa-muted{color:var(--soft)}
.xa-xsmall{color:var(--soft);font-size:12px}
.xa-mt-sm{margin-top:10px}

/* Footer */
.xa-footer{border-top:1px solid var(--border)}
.xa-foot-grid{display:grid;gap:18px;padding:26px 0}
@media (min-width:900px){ .xa-foot-grid{grid-template-columns:repeat(4,1fr)} }
.xa-foot-title{font-weight:600;margin-bottom:6px}
.xa-foot-links{display:grid;gap:6px}
.xa-foot-bottom{border-top:1px solid var(--border)}
.xa-foot-bottom-inner{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:14px 0}

/* Header must be above everything */
.xa-header{ z-index:10000; isolation:isolate; overflow:visible; }

/* Products hover menu */
.xa-products{ position:static; }

/* Centered fixed menu just under the header bar */
.xa-dd-menu{
  position:fixed;
  top:64px;                 /* header height */
  left:50%;
  transform:translateX(-50%);
  display:none;
  z-index:11000;            /* above page content */
  max-width:760px;
  width:clamp(280px, 80vw, 760px);
  padding:10px;
  background:linear-gradient(180deg, rgba(15,18,28,.98), rgba(12,15,22,.98));
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}

/* SHOW on hover or keyboard focus */
.xa-products:hover .xa-dd-menu,
.xa-products:focus-within .xa-dd-menu,
.xa-dd-menu:hover{ 
  display:block; 
}

/* Prevent hero layers from covering it */
.xa-hero-halo, .xa-hero-grid, .xa-noise { z-index:0 !important; }

/* Header must be above everything */
.xa-header { z-index: 10000; isolation: isolate; overflow: visible; }

/* Products host */
.xa-products { position: static; }

/* Dropdown: fixed, centered, top layer; hidden by default */
.xa-dd-menu{
  position: fixed;
  top: 64px;                 /* adjust if your header is taller */
  left: 50%;
  transform: translateX(-50%);
  max-width: 760px;
  width: clamp(280px, 80vw, 760px);
  padding: 10px;
  background: linear-gradient(180deg, rgba(15,18,28,.98), rgba(12,15,22,.98));
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.50);
  z-index: 11000;

  /* hidden state */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
  transform: translate(-50%, 6px);
}

/* Show on hover AND when host has .open (JS) */
.xa-products:hover .xa-dd-menu,
.xa-products.open .xa-dd-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity .12s ease, transform .12s ease, visibility 0s;
}

/* Make sure hero visuals never block it */
.xa-hero-halo, .xa-hero-grid, .xa-noise { z-index: 0 !important; pointer-events: none !important; }

/* ---------- Forms (dark theme, accessible contrast) ---------- */
.xa-card form.xa-form { 
  display: grid; 
  gap: 14px; 
}

/* Labels & helpers */
.xa-card form.xa-form label {
  color: #e7ecff;              /* high contrast on dark */
  font-weight: 600;
}

/* Text inputs */
.xa-card form.xa-form input[type="text"],
.xa-card form.xa-form input[type="password"],
.xa-card form.xa-form input[type="email"],
.xa-card form.xa-form input[type="search"] {
  width: 100%;
  background: #0f1320;
  border: 1px solid #2a3550;
  color: #e7ecff;
  border-radius: 12px;
  padding: 12px 14px;
}
.xa-card form.xa-form input::placeholder { color: #8ea0c2; }
.xa-card form.xa-form input:focus {
  outline: none;
  border-color: #7aa9ff;
  box-shadow: 0 0 0 3px rgba(122,169,255,.25);
}

/* Checkbox row */
.xa-card form.xa-form .xa-row { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
}
.xa-card form.xa-form input[type="checkbox"] {
  width: 16px; height: 16px; 
  accent-color: #43d9a3;      /* brand-y check color */
}

/* Submit button (no more cropping) */
.xa-card form.xa-form .xa-submit,
.xa-card form.xa-form input[type="submit"],
.xa-card form.xa-form button[type="submit"] {
  width: auto;                 /* fix cropped/tiny width */
  min-width: 120px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--text);     /* light button on dark bg */
  color: #0b0f14;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
}
.xa-card form.xa-form .xa-submit:hover { opacity: .92; }
.xa-card form.xa-form .xa-submit:active { transform: translateY(1px); }

/* Error list (if WTForms emits errors) */
.xa-card form.xa-form .errors {
  margin: 0;
  padding-left: 18px;
  color: #ff8686;
}

/* Links inside cards (Register / Reset) */
.xa-card a { color: #8bb4ff; }
.xa-card a:hover { color: #c4d7ff; }

/* Make the login title clearly visible on dark */
.xa-card h1.xa-h2,
.xa-h2 {
  color: #ffffff;
}

/* Taller, readable submit button (beats legacy styles) */
.xa-card form.xa-form .xa-submit,
.xa-card form.xa-form input[type="submit"],
.xa-card form.xa-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* size/space */
  min-height: 44px;           /* accessible tap target */
  padding: 12px 20px;
  font-size: 16px;
  line-height: 1.2;

  /* visuals */
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--text);
  color: #0b0f14;
  font-weight: 700;

  /* avoid weird clipping from old CSS */
  overflow: visible;
  white-space: nowrap;
}
.xa-card form.xa-form .xa-submit:hover { opacity: .92; }

/* Bigger logo */
.xa-brand-logo{
  width: 40px;   /* was 28px */
  height: 40px;
}

/* Hide the brand text next to the logo */
.xa-brand-name{ 
  display: none; 
}

/* Primary button hover = dark background + white text */
.xa-btn-primary:hover{
  background: var(--muted);   /* the dark hover bg you’re seeing */
  color: #ffffff;             /* readable! */
  border-color: #2a3550;      /* subtle outline so it pops */
}

/* --- HERO background: pin + cover + correct stacking --- */
.xa-hero{
  position: relative;
  overflow: hidden;
  min-height: 72vh;
  display: flex;
  align-items: center;
}
.xa-hero-bg{             /* <picture class="xa-hero-bg"> … */
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.xa-hero-bg img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
.xa-hero-overlay{ z-index: 1 !important; }
.xa-hero-grid{ z-index: 2 !important; }
.xa-noise{ z-index: 3 !important; }
.xa-hero-inner{ z-index: 4 !important; position: relative; }

/* --- Dropdown default hidden (JS adds .open) --- */
.xa-dd-menu{
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  top: 64px; /* tweak if your header height differs */
  max-width: 760px;
  width: clamp(280px, 80vw, 760px);
  padding: 10px;
  background: linear-gradient(180deg, rgba(15,18,28,.98), rgba(12,15,22,.98));
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
  z-index: 11000;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}

.xa-products.open .xa-dd-menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .14s ease, transform .14s ease, visibility 0s;
}

/* Keep header above all content */
.xa-header{ z-index: 12000; isolation: isolate; overflow: visible; }

/* Make background layers never capture hover/clicks */
.xa-hero-halo, .xa-hero-grid, .xa-noise { pointer-events: none !important; }


/* ===== Logo: square, bigger, crop bottom text inside PNG ===== */
.xa-logo-box{
  width: 48px;            /* bump size here if you want 56px, etc. */
  height: 48px;
  display: inline-block;
  overflow: hidden;       /* crop any extra height (e.g., the wordmark) */
  border-radius: 6px;     /* optional; remove if you want sharp corners */
}
.xa-brand-logo{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* fill the square */
  object-position: top;   /* keep the icon top-centered; crops off bottom text */
}
/* hide the adjacent brand text if it’s still in HTML */
.xa-brand-name{ display: none !important; }

/* ===== Dropdown: keep visible while moving to click ===== */
.xa-header { z-index: 12000; isolation: isolate; overflow: visible; }

.xa-dd-menu{
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  top: 64px;                      /* adjust if your header is taller/shorter */
  max-width: 760px;
  width: clamp(280px, 80vw, 760px);
  padding: 10px;
  background: linear-gradient(180deg, rgba(15,18,28,.98), rgba(12,15,22,.98));
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
  z-index: 13000;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}
.xa-products.open .xa-dd-menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .14s ease, transform .14s ease, visibility 0s;
}

/* Ensure hero effects can’t steal hover/clicks */
.xa-hero-halo, .xa-hero-grid, .xa-noise { pointer-events: none !important; }

/* ---------- Brand logo defaults (safe for everywhere) ---------- */
.xa-brand-logo{
  width: 32px;                 /* footer / general size */
  height: 32px;
  object-fit: contain;         /* never crop by default */
  object-position: center;
  image-rendering: auto;
}

/* Hide adjacent brand text if present */
.xa-brand-name{ display: none !important; }

/* ---------- Header-only: square, bigger, crisp ---------- */
.xa-logo-box{
  width: 72px;                 /* header size – make 64px if you want it larger */
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;            /* ignore any stray canvas in the PNG */
  border-radius: 8px;          /* remove if you want sharp corners */
  background: transparent;
}
/* Only inside the header box, let the image fill the square */
.xa-logo-box > .xa-brand-logo{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;   /* show the whole icon, no crop */
  object-position: center !important;
}

/* ---------- Footer: keep the logo modest ---------- */
footer .xa-brand .xa-brand-logo{
  width: 60px;
  height: 60px;
}

/* ---------- Mobile tweak: slightly smaller up top ---------- */
@media (max-width: 480px){
  .xa-logo-box{ width: 48px; height: 48px; }
  footer .xa-brand .xa-brand-logo{ width: 24px; height: 24px; }
}

/* 1) Kill the faint horizontal line (it's from the grid overlay) */
.xa-hero-grid{ display:none !important; }

/* 2) Make the background a touch more vague behind content */
.xa-hero-bg img{
  filter: brightness(.52) contrast(1.05) blur(1.2px);
  transform: scale(1.015);        /* avoids blur edges at borders */
}

/* 3) Add a soft glass panel behind the headline/lead/CTAs */
.xa-hero-inner{ position:relative; z-index:4; }
.xa-hero-inner::before{
  content:"";
  position:absolute;
  left:50%; transform:translateX(-50%);
  top: clamp(8px, 5vh, 40px);
  width: min(980px, calc(100% - 32px));
  height: clamp(220px, 38vh, 360px);   /* covers badge + H1 + CTAs */
  background: rgba(12,15,22,.64);      /* glassy dark */
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  box-shadow: 0 14px 46px rgba(0,0,0,.45);
  backdrop-filter: saturate(140%) blur(10px);
  z-index:0;
}

/* Ensure the actual text sits above the panel */
.xa-hero-inner > *{ position:relative; z-index:1; }

/* Slightly brighter text for extra punch */
.xa-h1{ color:#f9fbff; text-shadow:0 2px 20px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.55); }
.xa-lead{ color:#eaf0ff; text-shadow:0 1px 2px rgba(0,0,0,.45); }

/* Give feature cards a touch more separation from the panel */
@media (min-width: 768px){
  .xa-grid.xa-mt-lg{ margin-top: 28px; }
}

/* Make the outer hero panel auto-fit everything (headline + 3 cards) */
.xa-hero-inner{ position: relative; z-index: 4; }
.xa-hero-inner::before{
  content:"";
  position:absolute;
  /* center it */
  left:50%;
  transform:translateX(-50%);
  /* panel edges: from near the top badge down past the cards */
  top: clamp(8px, 5vh, 40px);
  bottom: clamp(14px, 6vh, 48px);      /* <-- auto height via bottom, not fixed height */
  /* match your container width so it can cover all 3 cards */
  width: min(1152px, calc(100% - 32px));

  /* glass look */
  background: rgba(12,15,22,.64);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  box-shadow: 0 14px 46px rgba(0,0,0,.45);
  backdrop-filter: saturate(140%) blur(10px);
  z-index: 0;   /* sit behind the content */
}

/* Ensure everything inside sits above the panel */
.xa-hero-inner > *{ position: relative; z-index: 1; }

/* Tighten spacing so cards don’t kiss the panel border */
@media (min-width: 768px){
  .xa-grid.xa-mt-lg{ margin-top: 22px; }
}


/* ===== Team v2 (scoped) ===== */
.team-page .xa-section{ padding-top: 48px; padding-bottom: 36px; }

/* hero */
.team-page .team-hero{ padding-top: 36px; padding-bottom: 6px; position:relative; overflow:hidden; }
.team-page .team-hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 20% -20%, rgba(122,169,255,.16), transparent 60%),
    radial-gradient(800px 360px at 80% -25%, rgba(67,217,163,.12), transparent 60%),
    linear-gradient(180deg, rgba(5,6,10,.08), rgba(5,6,10,.40));
  z-index:0;
}
.team-page .team-title, .team-page .team-subtitle{ position:relative; z-index:1; text-align:center; }
.team-page .team-subtitle{ color:#e6ebf8; max-width:860px; margin:10px auto 0; }

/* about grid */
.team-page .about-grid-b{
  display:grid; gap:16px;
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .team-page .about-grid-b{ grid-template-columns: 1.6fr .9fr; align-items:start; }
}

.team-page .about-card,
.team-page .facts-card{
  background: linear-gradient(180deg, rgba(20,26,40,.86), rgba(12,15,22,.86));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 10px 36px rgba(0,0,0,.42);
  backdrop-filter: saturate(140%) blur(6px);
}
.team-page .about-card h2,
.team-page .facts-card h2{ margin:0 0 10px; }
.team-page .about-card p{ color:#cfd7ec; margin:0 0 10px; }

/* facts list */
.team-page .facts-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.team-page .facts-list > li{ color:#d4dbf2; font-size:14px; }
.team-page .facts-list > li > span{ display:inline-block; width:110px; color:#9aa6c3; }
.team-page .facts-list > li > strong{ color:#f3f6ff; font-weight:700; }
.team-page .facts-pills{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 0; padding:0; list-style:none; }
.team-page .facts-pills li{
  padding:6px 10px; border-radius:999px; font-size:12px;
  color:#eaf0ff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
}

/* people */
.team-page .team-people{ padding-top: 22px; }
.team-page .team-label{ margin:0 0 12px; text-align:center; }

.team-page .person-card{
  max-width: 780px; margin: 0 auto;
  display:grid; grid-template-columns: 120px 1fr; gap:16px; align-items:center;
  position:relative; overflow:hidden;
}
.team-page .person-card::before{
  /* subtle left accent */
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background: linear-gradient(180deg, #7aa9ff, #43d9a3);
  opacity:.7;
}
.team-page .person-photo{
  width:120px; height:120px; border-radius:50%;
  object-fit:cover; object-position:center;
  border:1px solid rgba(255,255,255,.14);
}
.team-page .person-name{ margin:0; font-size:22px; color:#f2f6ff; }
.team-page .person-role{ margin-top:2px; font-size:13px; color:#a9b1c6; }
.team-page .person-bio{ margin:10px 0 0; color:#c9d2ea; font-size:15px; }
.team-page .person-links{ margin-top:10px; display:flex; gap:10px; }
.team-page .person-links a{ color:#8bb4ff; }
.team-page .person-links a:hover{ color:#cfe0ff; }
@media (max-width: 640px){
  .team-page .person-card{ grid-template-columns: 1fr; text-align:center; }
  .team-page .person-photo{ margin:0 auto; }
  .team-page .person-card::before{ display:none; }
}

/* values */
.team-page .values-grid{
  display:grid; gap:14px; justify-content:center;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.team-page .value-card{
  background: linear-gradient(180deg, rgba(20,26,40,.80), rgba(12,15,22,.80));
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
}
.team-page .value-title{ margin:0 0 6px; color:#f2f6ff; }
.team-page .value-text{ margin:0; color:#cfd7ec; }

/* section rhythm */
.team-page .team-cta .xa-cta{ margin-top: 0; }

/* ===== Contact page polish ===== */
.xa-contact-hero{ position:relative; padding-top:40px; padding-bottom:8px; overflow:hidden; }
.xa-contact-hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 20% -20%, rgba(122,169,255,.16), transparent 60%),
    radial-gradient(800px 360px at 80% -25%, rgba(67,217,163,.12), transparent 60%),
    linear-gradient(180deg, rgba(5,6,10,.10), rgba(5,6,10,.45));
  z-index:0;
}
.xa-contact-grid{
  display:grid; gap:16px;
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .xa-contact-grid{ grid-template-columns: 1.2fr .8fr; align-items:start; }
}

/* Form inputs (build on prior .xa-form rules) */
.xa-contact-form .xa-input,
.xa-contact-form input[type="text"],
.xa-contact-form input[type="email"]{
  width:100%;
  background:#0f1320;
  border:1px solid #2a3550;
  color:#e7ecff;
  border-radius:12px;
  padding:12px 14px;
}
.xa-contact-form .xa-textarea,
.xa-contact-form textarea{
  width:100%;
  min-height:140px;
  background:#0f1320;
  border:1px solid #2a3550;
  color:#e7ecff;
  border-radius:12px;
  padding:12px 14px;
  resize:vertical;
}
.xa-contact-form input:focus,
.xa-contact-form textarea:focus{
  outline:none; border-color:#7aa9ff; box-shadow:0 0 0 3px rgba(122,169,255,.25);
}
.xa-contact-form label{ color:#e7ecff; font-weight:600; }

/* Aside */
.xa-contact-aside{ display:grid; gap:12px; }
.xa-contact-list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; color:#cfd7ec; }
.xa-contact-list i{ margin-right:8px; width:16px; text-align:center; opacity:.9; }
.xa-divider{ height:1px; background:rgba(255,255,255,.08); margin:2px 0; }

/* ===== Signup page tweaks (scoped) ===== */
.xa-signup { 
  /* glassy card already from .xa-card; just ensure strong contrast */
  color: #ffffff;                         /* make text inside the card white */
}
.xa-signup .xa-h2 { color:#ffffff; }
.xa-signup p, .xa-signup .xa-muted { color:#e8edff; }

/* Labels and inputs — inherit your form system but force high contrast */
.xa-signup label { color:#ffffff; font-weight:700; }
.xa-signup .xa-input,
.xa-signup input[type="text"],
.xa-signup input[type="email"]{
  width:100%;
  background:#0f1320;
  border:1px solid #2a3550;
  color:#e7ecff;
  border-radius:12px;
  padding:12px 14px;
}
.xa-signup .xa-textarea,
.xa-signup textarea{
  width:100%;
  min-height:140px;
  background:#0f1320;
  border:1px solid #2a3550;
  color:#e7ecff;
  border-radius:12px;
  padding:12px 14px;
  resize:vertical;
}
.xa-signup input:focus,
.xa-signup textarea:focus{
  outline:none; border-color:#7aa9ff; box-shadow:0 0 0 3px rgba(122,169,255,.25);
}

/* Submit button: tall, readable, on-brand */
.xa-signup .xa-submit{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:12px 20px; font-size:16px; line-height:1.2;
  border-radius:12px; border:1px solid transparent;
  background:#ffffff; color:#0b0f14; font-weight:700;
  box-shadow:0 6px 22px rgba(0,0,0,.35);
}
.xa-signup .xa-submit:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(0,0,0,.45); }

/* Error messages */
.xa-signup .errors { margin:6px 0 0 18px; color:#ff8c8c; }

/* --- Signup form: bulletproof sizing + tidy spacing --- */
.xa-card .xa-form{
  display: grid;
  gap: 14px;
}

/* prevent ANY field from spilling outside the card */
.xa-card .xa-form input,
.xa-card .xa-form select,
.xa-card .xa-form textarea,
.xa-card .xa-form .xa-input,
.xa-card .xa-form .xa-textarea{
  box-sizing: border-box;   /* <-- key fix */
  width: 100%;
  max-width: 100%;
}

/* textarea specifics */
.xa-card .xa-form textarea,
.xa-card .xa-form .xa-textarea{
  min-height: 140px;
  resize: vertical;
}

/* labels + helper text in white for contrast */
.xa-card .xa-form label{ color:#fff; font-weight:700; }

/* card padding + edge clipping (just in case) */
.xa-card{ padding: 18px; overflow: hidden; }

/* submit button spacing */
.xa-card .xa-form .xa-submit{ margin-top: 6px; }

/* Center the signup content inside the card */
.xa-signup { text-align: center; }

.xa-signup .xa-form{
  display: grid;
  gap: 14px;
  justify-items: center;                /* center children horizontally */
}

/* Everything inside the form gets a centered max-width column */
.xa-signup .xa-form > label,
.xa-signup .xa-form > .errors,
.xa-signup .xa-form > input,
.xa-signup .xa-form > textarea,
.xa-signup .xa-form > .xa-input,
.xa-signup .xa-form > .xa-textarea,
.xa-signup .xa-form > .xa-submit{
  box-sizing: border-box;
  width: 100%;
  max-width: 560px;                     /* ← tweak this to taste (520–640px works well) */
  margin-inline: auto;
}

/* Button: centered and not too wide */
.xa-signup .xa-form > .xa-submit{
  width: min(100%, 360px);
}

/* Keep typing left-aligned inside fields (more readable) */
.xa-signup .xa-form input,
.xa-signup .xa-form textarea{
  text-align: left;
}

/* Center the small footer line (“Already registered…”) */
.xa-signup .xa-muted{ text-align: center; }

@media (max-width: 600px){
  .xa-signup .xa-form > *{ max-width: 100%; }
}

/* Center the signup form as a single column */
.xa-signup .xa-form{
  display: grid;
  justify-content: center;                 /* center the column */
  grid-template-columns: min(100%, 560px); /* <- control the width here */
  gap: 14px;
}

/* Every direct child fills that column (no random stretching) */
.xa-signup .xa-form > *{
  width: 100% !important;
  max-width: none !important;              /* override earlier generic max-width:100% */
  margin: 0;                               /* kill left/right offsets */
}

/* Keep text left-aligned inside fields */
.xa-signup .xa-form input,
.xa-signup .xa-form textarea{ text-align: left; }

/* Button a bit narrower if you prefer */
.xa-signup .xa-form .xa-submit{
  width: min(100%, 360px) !important;
  justify-self: center;
}

/* Centered single-column layout for signup */
.xa-signup .xa-form{
  display:grid;
  grid-template-columns: min(100%, 640px);   /* control the column width here */
  justify-content:center;                    /* center the column in the card */
  gap:16px;
}

/* Make every row stretch to the column width */
.xa-signup .xa-form > *{
  justify-self: stretch;                     /* <- critical */
  width: 100% !important;
  max-width: none !important;
  margin: 0;
}

/* Flatten WTForms wrappers so their children can fill the grid column */
.xa-signup .xa-form p,
.xa-signup .xa-form .form-field{
  display: contents;                         /* removes wrapper box but keeps children */
}

/* Ensure fields truly fill the row */
.xa-signup .xa-form input,
.xa-signup .xa-form .xa-input,
.xa-signup .xa-form textarea,
.xa-signup .xa-form .xa-textarea{
  display:block;
  box-sizing:border-box;
  width:100% !important;
  max-width:100% !important;
  min-width:0;
  text-align:left;                           /* keep typing left-aligned */
}

/* Button a bit narrower for balance */
.xa-signup .xa-form .xa-submit{
  width:min(100%, 380px) !important;
  justify-self:center;
}

/* Make the signup form itself wide and centered */
.xa-signup .xa-form{
  width: clamp(320px, 90vw, 720px) !important; /* <- control final width here */
  margin-inline: auto !important;

  display: grid;
  grid-template-columns: 1fr;   /* simple single column */
  gap: 16px;
}

/* If WTForms wraps fields in <p>/.form-field, flatten so width isn't capped */
.xa-signup .xa-form p,
.xa-signup .xa-form .form-field{
  display: contents;
}

/* Force every input/textarea to fill that column */
.xa-signup .xa-form input,
.xa-signup .xa-form .xa-input,
.xa-signup .xa-form textarea,
.xa-signup .xa-form .xa-textarea{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
  text-align: left;
}

/* Button a bit narrower for balance */
.xa-signup .xa-form .xa-submit{
  width: min(100%, 380px) !important;
  justify-self: center;
}

/* ===== Hero center panel: size + margins + wrap the cards ===== */

/* Comfortable max width for content + grid */
.xa-hero .xa-container,
.xa-hero-inner{
  max-width: 1320px;
}

/* Subtle inner padding so headline/lead/CTAs breathe */
.xa-hero-inner{
  position: relative;
  z-index: 4;
  padding: 20px 24px 0;
}

/* Make the glass panel cover headline, lead, CTAs AND the 3 cards */
.xa-hero-inner::before{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: clamp(16px, 3.5vh, 44px);          /* top margin inside the panel */
  bottom: clamp(10px, 4vh, 20px);         /* small bottom inset = panel reaches past cards */
  width: min(1320px, calc(100% - 40px));  /* wide panel, still respects viewport */
  border-radius: 22px;
  background: rgba(12,15,22,.64);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 46px rgba(0,0,0,.45);
  backdrop-filter: saturate(140%) blur(10px);
  z-index: 0;
}

/* Keep hero tall enough once everything is inside */
.xa-hero{ min-height: 78vh; }

/* Headline & lead scale (avoid comically huge sizes on big monitors) */
.xa-hero .xa-h1{ font-size: clamp(48px, 6.4vw, 88px); line-height: 1.05; }
.xa-hero .xa-lead{ font-size: clamp(18px, 1.6vw, 23px); max-width: 980px; }

/* Keep the cards comfortably inside the panel */
.xa-hero .xa-grid{
  max-width: 1320px;
  margin: 24px auto 0;
  padding-inline: 20px;
}
.xa-hero .xa-card{ padding: 20px 22px; position: relative; z-index: 1; }

/* Safety: header above, background layers never steal clicks */
.xa-header{ z-index: 12000; }
.xa-hero-halo, .xa-hero-grid, .xa-noise{ pointer-events: none !important; }


/* 1) Kill the old per-inner panel so we don't double-stack */
.xa-hero-inner::before{ content:none !important; }

/* 2) One unified panel that wraps headline + CTAs + the 3 cards */
.xa-hero .xa-container{
  position: relative;
  z-index: 2;                       /* above background; below header */
  padding-bottom: clamp(28px, 10vh, 140px);  /* breathing room at the bottom */
}
.xa-hero .xa-container::before{
  content:"";
  position:absolute;
  left:50%; transform:translateX(-50%);
  top: clamp(16px, 3.5vh, 44px);     /* panel top inside hero */
  bottom: clamp(16px, 6vh, 160px);   /* <-- extends past the cards */
  width: min(1440px, calc(100% - 48px));
  border-radius: 24px;
  background: rgba(12,15,22,.64);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 46px rgba(0,0,0,.45);
  backdrop-filter: saturate(140%) blur(10px);
  z-index: 0;
  pointer-events: none;              /* never block clicks */
}

/* 3) Ensure content sits above the panel */
.xa-hero-inner, .xa-hero .xa-grid{ position: relative; z-index: 3; }

/* 4) Optional: widen hero a touch so the panel feels generous */
.xa-hero .xa-container{ max-width: 1440px; }
@media (min-width: 1600px){
  .xa-hero .xa-container{ max-width: 1520px; }
  .xa-hero .xa-container::before{ width: min(1520px, calc(100% - 56px)); }
}

/* === HERO panel: single source of truth === */
:root{
  --hero-width: 1500px;   /* how wide the glass panel can be */
  --panel-gap:  8vh;      /* gap from panel bottom to container bottom (smaller = taller panel) */
}

/* Ensure we target the right element and beat older rules */
.xa-hero .xa-container{ 
  position: relative; 
  max-width: var(--hero-width) !important;
  padding-bottom: var(--panel-gap) !important;  /* space inside panel */
  z-index: 5;
}

/* Draw the panel */
.xa-hero .xa-container::before{
  content: "" !important;
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: 32px;                                    /* move panel down from the top */
  bottom: var(--panel-gap) !important;           /* <-- ADJUST THIS KNOB */
  width: min(var(--hero-width), calc(100% - 48px)) !important;  /* <-- ADJUST WIDTH KNOB */
  border-radius: 24px;
  background: rgba(12,15,22,.64);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 46px rgba(0,0,0,.45);
  backdrop-filter: saturate(140%) blur(10px);
  pointer-events: none;
  z-index: 0;
}

/* Make sure the cards sit above the panel */
.xa-hero .xa-grid{ position: relative; z-index: 1; max-width: var(--hero-width) !important; }

/* Optional: kill any old panel so it can't conflict */
.xa-hero-inner::before{ content: none !important; }


:root{
  --cards-gap: clamp(48px, 2vh, 120px);  /* space between the big box and the 3 small boxes */
}

/* push the 3-card row down */
.xa-hero .xa-grid,
.xa-hero .xa-grid.xa-mt-lg{
  margin-top: var(--cards-gap) !important;
}

/* Denser (less transparent) cards under the hero */
:root{
  --heroCardRgb: 18, 22, 30;     /* base color (R,G,B) */
  --heroCardAlpha: 0.8;         /* 0 = transparent, 1 = solid */
}

.xa-hero .xa-card{
  background: rgba(var(--heroCardRgb), var(--heroCardAlpha)) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.40);
  backdrop-filter: saturate(140%) blur(6px);   /* keep a subtle glassy feel */
}

/* Optional: bump text contrast inside the cards */
.xa-hero .xa-card .xa-card-title{ color:#f5f7ff; }
.xa-hero .xa-card .xa-card-desc{ color:#dfe6ff; }


/* Bigger padding inside the big glass box */
:root{
  /* tweak these two */
  --hero-pad-top:    clamp(40px, 6vh, 96px);
  --hero-pad-bottom: clamp(40px, 3vh, 88px);
}

/* If your big box sits behind .xa-hero-inner (recommended / current setup) */
.xa-hero-inner{
  padding-top: var(--hero-pad-top) !important;
  padding-bottom: var(--hero-pad-bottom) !important;
}

/* If you’re using the older setup where the panel is on the container (::before),
   this keeps the panel shape but adds interior padding the same way */
.xa-hero .xa-container > .xa-hero-inner{
  padding-top: var(--hero-pad-top) !important;
  padding-bottom: var(--hero-pad-bottom) !important;
}


/* Scope to the account page wrapper if you have one */
.account-page .profile-head{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.account-page .profile-title{
  display:flex; align-items:center; gap:10px;
}

/* Actions on the right, same row */
.account-page .actions-row{
  margin-left:auto;                   /* pushes actions to the right */
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}

/* Normalize both buttons (prevents tall “slab” buttons) */
.account-page .actions-row .xa-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px;
  min-height:40px; height:auto; line-height:1; white-space:nowrap;
  border-radius:12px; text-decoration:none;
}

/* Primary (Upgrade) */
.account-page .actions-row .xa-btn-primary{
  background:#fff; color:#0c1118; border:1px solid transparent;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.account-page .actions-row .xa-btn-primary:hover{ filter:brightness(.96); }

/* Secondary (Logout) */
.account-page .actions-row .button1{
  background:rgba(255,255,255,.08); color:#e8eeff;
  border:1px solid rgba(255,255,255,.14);
}
.account-page .actions-row .button1:hover{ background:rgba(255,255,255,.12); }

/* Mobile: let actions wrap neatly under the title */
@media (max-width:520px){
  .account-page .actions-row{ width:100%; margin-left:0; justify-content:flex-start; }
}

/* --- User page: align Upgrade + Logout on one row, same height --- */
.actions-row{
  display: flex;                 /* lay out side-by-side */
  justify-content: flex-end;     /* push to the right */
  align-items: center;           /* vertical alignment */
  gap: 12px;                     /* space between buttons */
  margin: 0;                     /* kill any stray margins */
}

/* normalize both buttons so heights match */
.actions-row .xa-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;                  /* consistent control height */
  padding: 0 16px;               /* horizontal padding */
  line-height: 1;                /* prevent tall line boxes */
  white-space: nowrap;           /* keep text on one line */
  border-radius: 12px;
  box-sizing: border-box;
  margin: 0;                     /* no random vertical offsets */
}

/* primary (Upgrade) */
.actions-row .xa-btn-primary{
  background: #ffffff;
  color: #0c1118;
  border: 1px solid transparent;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* secondary (Logout) */
.actions-row .button1{
  background: rgba(255,255,255,.08);
  color: #e8eeff;
  border: 1px solid rgba(255,255,255,.14);
}

/* small screens: allow wrapping neatly if needed */
@media (max-width: 520px){
  .actions-row{
    justify-content: flex-start; /* left-align when wrapped */
    flex-wrap: wrap;
  }
}

/* ================================
   Purchases table — transparent bg
   ================================ */

/* HARD RESET: strip ALL fills from the table */
table.purchase,
table.purchase thead,
table.purchase tbody,
table.purchase tr,
table.purchase th,
table.purchase td {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* If you wrapped the table, keep wrapper transparent too */
.table-wrap { background: transparent !important; }

/* Remove zebra striping or any row fills */
table.purchase tbody tr:nth-child(even) td,
table.purchase tbody tr:nth-child(odd) td {
  background: transparent !important;
}

/* Header: transparent + crisp divider + high contrast */
table.purchase thead th{
  color: #ffffff;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.14);
  backdrop-filter: none !important;   /* if a prior style applied blur */
}

/* Body cells: high contrast + fine row divider */
table.purchase td{
  color: #E6ECFF;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Optional hover (keeps transparency but highlights row) */
table.purchase tbody tr:hover td{
  background: rgba(120, 150, 255, 0.10) !important;
}

/* Comfortable edges */
table.purchase th, table.purchase td{ padding: 14px 16px; }
table.purchase th:first-child, table.purchase td:first-child{ padding-left: 20px; }
table.purchase th:last-child,  table.purchase td:last-child{  padding-right: 20px; }

/* Align numeric/date columns to the right */
table.purchase th:nth-child(2),
table.purchase td:nth-child(2),
table.purchase th:nth-child(3),
table.purchase td:nth-child(3){
  text-align: right;
  white-space: nowrap;
}

/* ========== Upgrade page ========== */
.upgrade-page .xa-container{ max-width: 1100px; }

.up-card{
  padding: 22px;
  border-radius: 18px;
  background: rgba(18,22,30,.72);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  backdrop-filter: saturate(140%) blur(8px);
}

.up-hero{ margin-bottom: 18px; }
.up-title{ margin: 0 0 6px 0; font-size: 28px; }
.up-sub{ margin: 0 0 4px 0; color:#cfd6e6; }
.up-lead{ margin: 8px 0 0 0; color:#e7ecff; }

.up-badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#eaf0ff;
}
.up-badge.premium{ background:linear-gradient(135deg,#ffc44d,#ff9f2e); color:#13161d; border-color:transparent; }
.up-badge.free{ background:rgba(255,255,255,.1); }

.plans-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: 18px;
}

.plan-card .plan-name{ margin:2px 0 8px; font-size:20px; }
.plan-price{ display:flex; align-items:flex-end; gap:10px; margin: 6px 0 10px; }
.plan-price .amount{ font-size:40px; font-weight:800; line-height:1; color:#fff; }
.plan-price .per{ color:#cfd6e6; }

.plan-features{ margin: 8px 0 16px; padding-left: 18px; color:#dfe6ff; }
.plan-features li{ margin: 6px 0; }

.plan-card.highlight{
  border-color: rgba(255,210,80,.45);
  box-shadow: 0 16px 40px rgba(255,190,70,.15), 0 10px 30px rgba(0,0,0,.35);
}

.paypal-holder{ min-height: 44px; } /* avoids layout jump before PayPal JS renders */

.up-actions{
  display:flex; justify-content:flex-end; gap:12px; flex-wrap:wrap;
}

/* Optional: make primary button look prominent if you use xa-btn-primary */
.upgrade-page .xa-btn-primary{
  background:#fff; color:#0c1118; border:1px solid transparent;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

/* Upgrade page: keep footer buttons normal size */
.up-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;      /* prevents vertical stretch */
  gap:12px;
  flex-wrap:wrap;
}

/* Normalize each button */
.up-actions a,
.up-actions .xa-btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  height:42px !important;        /* consistent control height */
  padding:0 16px !important;     /* horizontal padding */
  line-height:1;
  white-space:nowrap;
  border-radius:12px;
  box-sizing:border-box;

  /* stop flex/grid from stretching the item */
  width:auto !important;
  flex:0 0 auto !important;
  align-self:center !important;
}

/* Upgrade footer actions: align buttons together on the right */
.upgrade-page .up-actions{
  display: flex !important;
  justify-content: flex-end !important;   /* no space-between */
  align-items: center !important;
  gap: 12px;                               /* small space between buttons */
  flex-wrap: nowrap !important;            /* keep them on one line */
}

/* Make sure no button pushes itself away */
.upgrade-page .up-actions a,
.upgrade-page .up-actions .xa-btn{
  flex: 0 0 auto !important;
  margin: 0 !important;                    /* kill any auto margins */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  white-space: nowrap;
  box-sizing: border-box;
}