/* ==========================================================================
   BhavaniAI Inc. — Core Design System
   Tokens · Reset · Typography · Layout · Components
   Build target: WCAG 2.2 AA · Lighthouse 95+ · no framework, no build step
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Brand — deep industrial navy + signal amber */
  --ink-900: #060f1c;
  --ink-800: #0a1a2f;
  --ink-700: #0e2540;
  --ink-600: #143152;
  --ink-500: #1d4470;
  --ink-400: #2f5f93;

  --amber-500: #f5a623;
  --amber-400: #ffb84d;
  --amber-600: #d4870d;

  --paper: #ffffff;
  --paper-alt: #f5f8fc;
  --paper-tint: #eaf1f9;

  --text: #16222f;
  --text-soft: #4a5b6e;
  /* WCAG AA: 4.5:1 min on white and on --paper-alt. #5d7086 ≈ 5.3:1 */
  --text-faint: #5d7086;
  --line: #dde6f0;
  --line-strong: #c3d2e3;

  --ok: #0f7b52;
  --warn: #a35c00;
  --stop: #b3261e;

  /* Surface on dark */
  --on-dark: #ffffff;
  --on-dark-soft: #c2d2e4;
  --on-dark-faint: #8fa5bf;

  /* Fluid type scale — 320px → 1440px viewport */
  --fs-xs:    clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --fs-sm:    clamp(0.88rem, 0.85rem + 0.14vw, 0.96rem);
  --fs-base:  clamp(1.00rem, 0.96rem + 0.20vw, 1.12rem);
  --fs-md:    clamp(1.13rem, 1.06rem + 0.32vw, 1.31rem);
  --fs-lg:    clamp(1.27rem, 1.15rem + 0.55vw, 1.60rem);
  --fs-xl:    clamp(1.52rem, 1.32rem + 0.95vw, 2.13rem);
  --fs-2xl:   clamp(1.85rem, 1.50rem + 1.70vw, 3.00rem);
  --fs-3xl:   clamp(2.20rem, 1.62rem + 2.80vw, 4.20rem);

  /* Fluid space scale */
  --sp-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.31rem);
  --sp-2xs: clamp(0.50rem, 0.48rem + 0.10vw, 0.62rem);
  --sp-xs:  clamp(0.75rem, 0.72rem + 0.15vw, 0.94rem);
  --sp-sm:  clamp(1.00rem, 0.96rem + 0.20vw, 1.25rem);
  --sp-md:  clamp(1.50rem, 1.44rem + 0.30vw, 1.88rem);
  --sp-lg:  clamp(2.00rem, 1.90rem + 0.50vw, 2.50rem);
  --sp-xl:  clamp(3.00rem, 2.80rem + 1.00vw, 4.00rem);
  --sp-2xl: clamp(4.00rem, 3.50rem + 2.50vw, 6.50rem);
  --sp-3xl: clamp(5.00rem, 4.00rem + 5.00vw, 9.00rem);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(6,15,28,.06), 0 2px 8px rgba(6,15,28,.05);
  --shadow: 0 4px 12px rgba(6,15,28,.07), 0 12px 32px rgba(6,15,28,.07);
  --shadow-lg: 0 8px 24px rgba(6,15,28,.10), 0 28px 64px rgba(6,15,28,.13);
  --shadow-amber: 0 8px 28px rgba(245,166,35,.32);

  --wrap: 1200px;
  --wrap-narrow: 760px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --header-h: 76px;

  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-sm));
  /* Branded tap feedback instead of the default grey box */
  -webkit-tap-highlight-color: rgba(245, 166, 35, .18);
}

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: var(--ink-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--ink-800);
  text-wrap: balance;
}
p { text-wrap: pretty; }

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); letter-spacing: -0.014em; }
h4 { font-size: var(--fs-md); letter-spacing: -0.01em; }

/* ---------- 3. ACCESSIBILITY ---------- */
:focus-visible {
  outline: 3px solid var(--amber-500);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: var(--sp-sm);
  top: -100px;
  z-index: 999;
  background: var(--ink-800);
  color: #fff;
  padding: var(--sp-xs) var(--sp-md);
  border-radius: var(--radius-sm);
  font-weight: 700;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--sp-sm); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 4. LAYOUT ---------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }

.section { padding-block: var(--sp-2xl); }
.section--tight { padding-block: var(--sp-xl); }
.section--alt { background: var(--paper-alt); }
.section--tint { background: var(--paper-tint); }
.section--dark { background: var(--ink-800); color: var(--on-dark-soft); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }

.stack > * + * { margin-top: var(--sp-sm); }
.stack-lg > * + * { margin-top: var(--sp-md); }

.grid { display: grid; gap: var(--sp-md); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }

.split {
  display: grid;
  gap: var(--sp-xl);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
}

.section-head { max-width: 46rem; margin-bottom: var(--sp-lg); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: var(--sp-xs); color: var(--text-soft); font-size: var(--fs-md); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber-600);
  margin-bottom: var(--sp-2xs);
}
.eyebrow::before {
  content: ""; width: 1.75rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--amber-500), transparent);
}
.section--dark .eyebrow { color: var(--amber-400); }

.lede { font-size: var(--fs-md); color: var(--text-soft); }
.section--dark .lede { color: var(--on-dark-soft); }

/* ---------- 5. BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  /* WCAG 2.2 target size: min 24x24, we use 44px+ */
  min-height: 48px;
  padding: .78em 1.6em;
  border-radius: var(--radius-pill);
  font-weight: 750;
  font-size: var(--fs-sm);
  letter-spacing: .01em;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out),
              background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
/* Promote to its own layer only while pressed — a permanent will-change on
   every button forces 60 compositor layers and drops touch events on iOS. */
.btn:active { will-change: transform; transform: scale(.985); }
.btn svg { flex-shrink: 0; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn--primary { background: var(--amber-500); color: var(--ink-900); }
.btn--dark    { background: var(--ink-700); color: #fff; }
.btn--ghost   { border-color: var(--line-strong); color: var(--ink-700); background: var(--paper); }
.btn--onDark  { border-color: rgba(255,255,255,.42); color: #fff; }

/* Hover effects are gated to real pointers. On iOS, :hover sticks after a tap,
   so an unguarded translateY moves the target out from under the finger and
   leaves it displaced. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn--primary:hover { background: var(--amber-400); box-shadow: var(--shadow-amber); }
  .btn--dark:hover    { background: var(--ink-600); box-shadow: var(--shadow); }
  .btn--ghost:hover   { border-color: var(--ink-700); box-shadow: var(--shadow-sm); }
  .btn--onDark:hover  { background: rgba(255,255,255,.12); border-color: #fff; }
}

.btn--lg { min-height: 56px; padding: .95em 2em; font-size: var(--fs-base); }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4em;
  font-weight: 750; font-size: var(--fs-sm);
  color: var(--ink-600); text-decoration: none;
  min-height: 44px;              /* was 24px — too small to hit reliably */
}
.link-arrow::after { content: "→"; transition: transform .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover { color: var(--amber-600); text-decoration: underline; }
  .link-arrow:hover::after { transform: translateX(4px); }
}

/* ---------- 6. HEADER / NAV ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.86);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
}
@supports (backdrop-filter: blur(14px)) {
  /* Lighter blur + a stable compositor layer: blur(14px) on a sticky header
     re-rasterises the full viewport every scroll frame on iOS. */
  .site-header { backdrop-filter: blur(8px) saturate(140%); transform: translateZ(0); }
}
.site-header[data-scrolled="true"] {
  border-bottom-color: var(--line);
  box-shadow: 0 2px 20px rgba(6,15,28,.06);
}

.nav-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm);
  min-height: var(--header-h);
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand img, .brand svg { height: 42px; width: auto; }

.nav { display: flex; align-items: center; gap: var(--sp-md); }
.nav-list { display: flex; align-items: center; gap: var(--sp-md); }
.nav-list a {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-weight: 700; font-size: var(--fs-sm);
  color: var(--ink-700); text-decoration: none;
  transition: color .2s var(--ease);
}
.nav-list a::after {
  content: ""; position: absolute; left: 0; bottom: 12px;
  width: 0; height: 2.5px; border-radius: 2px; background: var(--amber-500);
  transition: width .28s var(--ease-out);
}
.nav-list a:hover { color: var(--ink-900); }
.nav-list a:hover::after,
.nav-list a[aria-current="page"]::after { width: 100%; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  flex-direction: column; gap: 5px;
}
.nav-toggle span {
  display: block; width: 24px; height: 2.5px; border-radius: 2px;
  background: var(--ink-800); transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 62rem) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed; inset: 0 0 0 auto;
    width: min(88vw, 22rem);
    background: var(--ink-800);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: var(--sp-sm);
    padding: calc(var(--header-h) + var(--sp-lg)) var(--sp-md) var(--sp-lg);
    transform: translateX(101%);
    /* visibility:hidden keeps the closed drawer out of the tab order and the
       accessibility tree; translateX alone leaves 7 focusable links offscreen. */
    visibility: hidden;
    pointer-events: none;
    transition: transform .34s var(--ease-out), visibility 0s linear .34s;
    overflow-y: auto;
    z-index: 99;
  }
  .nav[data-open="true"] {
    transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s;
    box-shadow: -24px 0 60px rgba(0,0,0,.4);
  }
  .nav-list { flex-direction: column; align-items: stretch; gap: var(--sp-2xs); }
  .nav-list a { color: #fff; font-size: var(--fs-md); padding-block: var(--sp-2xs); min-height: 48px; }
  .nav-list a::after { bottom: 8px; background: var(--amber-400); }
  .nav .btn { width: 100%; }
}

.nav-scrim {
  position: fixed; inset: 0; z-index: 98;
  background: rgba(6,15,28,.5);
  opacity: 0; visibility: hidden;
  /* pointer-events is NOT transitionable, so it flips the instant the menu
     closes. Relying on `visibility` timing left the scrim swallowing the first
     tap after close. This is deterministic regardless of transition state. */
  pointer-events: none;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.nav-scrim[data-open="true"] {
  opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s;
}

/* ---------- 7. CARDS ---------- */
.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-md);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .card--hover:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
}
.card h3 { margin-bottom: var(--sp-2xs); }
.card p { color: var(--text-soft); font-size: var(--fs-sm); }

.card-icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: linear-gradient(140deg, var(--ink-700), var(--ink-500));
  margin-bottom: var(--sp-sm);
  box-shadow: 0 6px 16px rgba(14,37,64,.22);
}
.card-icon svg { width: 26px; height: 26px; stroke: var(--amber-500); fill: none; stroke-width: 2; }

.tag-row { display: flex; flex-wrap: wrap; gap: var(--sp-3xs); margin-top: var(--sp-sm); }
.tag {
  display: inline-flex; align-items: center;
  padding: .32em .85em;
  border-radius: var(--radius-pill);
  background: var(--paper-alt);
  border: 1px solid var(--line);
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-600);
}

/* ---------- 8. FORMS ---------- */
.field { display: flex; flex-direction: column; gap: .45rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 750; font-size: var(--fs-sm); color: var(--ink-800); }
.field .req { color: var(--stop); }
.field .hint { font-size: var(--fs-xs); color: var(--text-faint); }

.field input,
.field select,
.field textarea {
  min-height: 50px;
  padding: .7rem .9rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  /* iOS Safari force-zooms any focused control under 16px and never zooms back
     out, which then misaligns every tap on the page. max() keeps the fluid
     scale on desktop while guaranteeing the 16px floor on phones. */
  font-size: max(16px, var(--fs-sm));
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  width: 100%;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-400); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--amber-500);
  box-shadow: 0 0 0 3px rgba(245,166,35,.22);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--stop); }
.field .error {
  font-size: var(--fs-xs); font-weight: 700; color: var(--stop);
  display: none;
}
.field .error[data-show="true"] { display: block; }

.form-grid { display: grid; gap: var(--sp-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.checkbox {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem;
  align-items: start;
  padding: var(--sp-xs);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.checkbox:hover { border-color: var(--ink-400); background: var(--paper-alt); }
.checkbox input[type="checkbox"] {
  width: 22px; height: 22px; min-height: 0;
  accent-color: var(--ink-600);
  margin-top: 2px; cursor: pointer;
}
.checkbox span { font-size: var(--fs-sm); color: var(--text); }
.checkbox--required { border-left: 3px solid var(--amber-500); }

.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  box-shadow: var(--shadow);
}

/* ---------- 9. NOTICES ---------- */
.notice {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-sm);
  padding: var(--sp-md);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper-alt);
  font-size: var(--fs-sm);
}
.notice h3 { font-size: var(--fs-md); margin-bottom: .35rem; }
.notice p + p { margin-top: .6rem; }
.notice--amber { border-color: #f3d9a4; background: #fffaf0; }
.notice--info  { border-color: #bcd5ee; background: #f2f8fe; }
.notice--ok    { border-color: #b3ded0; background: #f1faf6; }
.notice-icon { width: 26px; height: 26px; flex-shrink: 0; }

/* ---------- 10. FOOTER ---------- */
.site-footer {
  background: var(--ink-900);
  color: var(--on-dark-faint);
  font-size: var(--fs-sm);
  padding-top: var(--sp-2xl);
}
.footer-grid {
  display: grid; gap: var(--sp-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  padding-bottom: var(--sp-xl);
}
.footer-grid h3 { color: #fff; font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--sp-sm); }
.footer-grid a {
  color: var(--on-dark-faint); text-decoration: none;
  /* 44px touch target — these were 23px tall */
  display: inline-flex; align-items: center; min-height: 44px;
}
@media (hover: hover) and (pointer: fine) {
  .footer-grid a:hover { color: var(--amber-400); text-decoration: underline; }
}
.footer-brand img, .footer-brand svg { height: 40px; margin-bottom: var(--sp-sm); }

.licence-slot {
  margin-top: var(--sp-sm);
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: var(--radius-sm);
  padding: var(--sp-xs);
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.licence-slot strong { color: var(--on-dark-soft); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: var(--sp-md);
  display: flex; flex-wrap: wrap; gap: var(--sp-sm);
  justify-content: space-between; align-items: center;
  font-size: var(--fs-xs);
}
.footer-bottom a {
  color: var(--on-dark-faint);
  display: inline-flex; align-items: center; min-height: 44px;
}
.footer-bottom .cluster { gap: var(--sp-2xs) var(--sp-md); }
@media (hover: hover) and (pointer: fine) {
  .footer-bottom a:hover { color: var(--amber-400); }
}

/* ---------- 11. MOTION / REVEAL ---------- */
/* [hidden] must beat component display rules (JS filtering relies on it) */
[hidden] { display: none !important; }

.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal[data-delay="1"].is-visible { transition-delay: .08s; }
.reveal[data-delay="2"].is-visible { transition-delay: .16s; }
.reveal[data-delay="3"].is-visible { transition-delay: .24s; }
.reveal[data-delay="4"].is-visible { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}
/* No-JS safety: IntersectionObserver never runs, so never hide content */
.no-js .reveal { opacity: 1; transform: none; }

/* Inline error text for consent checkboxes (native checkbox must not be
   wrapped in .field — its input styling deforms the control) */
.checkbox .error {
  grid-column: 2;
  font-size: var(--fs-xs); font-weight: 700; color: var(--stop);
  display: none; margin-top: .35rem;
}
.checkbox .error[data-show="true"] { display: block; }
.checkbox:has(input[aria-invalid="true"]) { border-color: var(--stop); }

/* ---------- 12. LAUNCH-PHASE FEATURE FLAG ----------
   <html data-phase="prelaunch">  → pre-licence content shown
   <html data-phase="live">       → full operating content shown
   Flip ONE attribute in every HTML file to switch the whole site over.
   ------------------------------------------------------------------ */
[data-phase="prelaunch"] .when-live { display: none !important; }
[data-phase="live"] .when-prelaunch { display: none !important; }

/* ---------- 13. UTILITIES ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--sp-sm); }
.mt-md { margin-top: var(--sp-md); }
.mt-lg { margin-top: var(--sp-lg); }
.mb-0 { margin-bottom: 0; }
.muted { color: var(--text-soft); }
.small { font-size: var(--fs-sm); }
.fine { font-size: var(--fs-xs); color: var(--text-faint); line-height: 1.6; }
.flow > * + * { margin-top: 1em; }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-xs); align-items: center; }
.no-wrap { white-space: nowrap; }