/* ARVO — index page styles.
   Build output. Rules are in ORIGINAL SOURCE ORDER and declarations are
   byte-identical to the source pages
   (shipped separately as arvo-website-source.zip). Only provably-dead rules were cut.
   Order is load-bearing on this site — do not sort, merge or share
   these files between pages. See README.md. */

/* ============================================
     ARVO BRAND TOKENS
     ============================================ */:root{
    --teal:        #007e7f;
    --teal-light:  #00a4a5;
    --teal-dark:   #003d3e;
    --orange:      #f8a32c;
    --orange-deep: #f47a20;
    --cream:       #faf7ed;
    --peach:       #ffdeb0;
    --cream-warm:  #fdf3e3;
    --gray-50:     #f1f1f1;
    --ink:         #003d3e;
    --ink-soft:    rgba(0, 61, 62, 0.7);
    --ink-mute:    rgba(0, 61, 62, 0.55);

    /* Product accent assignments — used inside product cards & connection band */
    --aep-accent:    #00a4a5;       /* teal-light: curriculum / substance */
    --pulse-accent:  #f8a32c;       /* orange: pulse, signal */
    --ops-accent:    #003d3e;       /* teal-dark: operations / institutional */
    --stack-accent:  #003d3e;       /* dark teal: foundation */

    --r-sm: 12px;
    --r-md: 20px;
    --r-lg: 32px;
    --r-xl: 48px;

    --shadow-sm: 0 4px 16px rgba(0, 61, 62, 0.06);
    --shadow-md: 0 12px 32px rgba(0, 61, 62, 0.08);
    --shadow-lg: 0 24px 60px rgba(0, 61, 62, 0.12);

    --max: 1240px;
    --pad: clamp(20px, 4vw, 48px);
  }*{ box-sizing: border-box; margin: 0; padding: 0; }html{ scroll-behavior: smooth; }/* Floating ambient circles — subtle for institutional page */.page-floats{
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
  }.page-float{
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: floatDrift linear infinite;
  }@keyframes floatDrift {
    0%   { transform: translateY(110vh) rotate(0deg); opacity: 0; }
    5%   { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; }
  }.pf-1{ width: 14px; height: 14px; background: rgba(248,163,44,0.08); left: 10%;  animation-duration: 32s; animation-delay: 0s; }.pf-2{ width: 10px; height: 10px; background: rgba(0,126,127,0.06);  left: 25%; animation-duration: 38s; animation-delay: 6s; }.pf-3{ width: 18px; height: 18px; background: rgba(255,222,176,0.12); left: 40%; animation-duration: 34s; animation-delay: 10s; }.pf-4{ width: 8px;  height: 8px;  background: rgba(248,163,44,0.08); left: 55%; animation-duration: 30s; animation-delay: 3s; }.pf-5{ width: 12px; height: 12px; background: rgba(0,164,165,0.06);  left: 70%; animation-duration: 40s; animation-delay: 14s; }.pf-6{ width: 16px; height: 16px; background: rgba(248,163,44,0.06); left: 85%; animation-duration: 36s; animation-delay: 8s; }@media (prefers-reduced-motion: reduce) {.page-floats{ display: none; }}@media (max-width: 768px) {.pf-3, .pf-5{ display: none; }}body{
    font-family: "Poppins", sans-serif;
    background: var(--cream);
    color: var(--ink);
    font-weight: 400;
    line-height: 1.55;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }::selection{ background: var(--orange); color: var(--teal-dark); }/* TYPOGRAPHY */.display{
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    line-height: 0.95;
    color: var(--teal-dark);
  }.h1{ font-size: clamp(40px, 5.4vw, 76px); }.h2{ font-size: clamp(36px, 5vw, 68px); }.eyebrow{
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--teal);
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }.eyebrow::before{
    content: "";
    width: 28px; height: 2px;
    background: var(--orange);
  }.body-lg{
    font-size: clamp(18px, 1.4vw, 22px);
    color: var(--ink-soft);
    font-weight: 400;
    line-height: 1.55;
  }.accent{ color: var(--orange); }/* LAYOUT */.container{
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--pad);
  }section{ position: relative; }/* BUTTONS */.btn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    white-space: nowrap;
  }.btn-primary{
    background: var(--orange);
    color: var(--teal-dark);
    box-shadow: 0 6px 0 var(--orange-deep), 0 12px 24px rgba(244, 122, 32, 0.25);
  }.btn-primary:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 0 var(--orange-deep), 0 16px 28px rgba(244, 122, 32, 0.3);
  }.btn-primary:active{
    transform: translateY(4px);
    box-shadow: 0 2px 0 var(--orange-deep);
  }.btn-ghost{
    background: transparent;
    color: var(--teal-dark);
    border: 2px solid var(--teal-dark);
  }.btn-ghost:hover{
    background: var(--teal-dark);
    color: #fff;
  }.btn-arrow svg{ transition: transform .25s ease; }.btn:hover .btn-arrow svg{ transform: translateX(4px); }/* NAVIGATION */.nav{
    position: sticky;
    top: 0;
    background: rgba(250, 247, 237, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 100;
    border-bottom: 1px solid rgba(0, 61, 62, 0.06);
  }.nav-inner{
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px clamp(20px, 4vw, 48px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }.logo{
    width: 92px;
    height: 30px;
    flex-shrink: 0;
  }.logo svg{ width: 100%; height: 100%; }.logo:hover{ opacity: 0.85; }.nav-links{
    display: flex;
    gap: 32px;
    list-style: none;
    align-items: center;
  }.nav-links a{
    color: var(--teal-dark);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    position: relative;
    padding: 6px 0;
    transition: color .2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }.nav-links a:hover{ color: var(--teal); }/* Dropdown trigger — caret rotates on hover *//* Products dropdown — rich treatment with name + tagline *//* Override .nav-links a inline-flex — dropdown items must stack vertically *//* Simple dropdowns — single-line items for Plans, For Schools, etc. */.nav-cta{ display: flex; gap: 12px; align-items: center; }.nav-cta .btn{ padding: 12px 22px; font-size: 14px; }/* ============================================
     MOBILE NAV — hamburger + drawer
     ============================================ */.nav-toggle{
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--teal-dark);
  }.nav-toggle svg{
    width: 24px;
    height: 24px;
    transition: transform .2s ease;
  }.nav-toggle .icon-close{ display: none; }.nav.is-open .nav-toggle .icon-open{ display: none; }.nav.is-open .nav-toggle .icon-close{ display: block; }.mobile-drawer{
    display: none;
    background: var(--cream);
    border-bottom: 1px solid rgba(0, 61, 62, 0.08);
    padding: 8px 0 24px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }.nav.is-open .mobile-drawer{ display: block; }.mobile-drawer .container{
    display: flex;
    flex-direction: column;
    gap: 4px;
  }.md-section{
    padding: 14px 0 8px;
    border-top: 1px solid rgba(0, 61, 62, 0.08);
  }.md-section:first-of-type{ border-top: none; }.md-section-label{
    font-size: 11px;
    font-weight: 800;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 4px 14px;
    margin-bottom: 4px;
  }.md-link{
    display: block;
    padding: 12px 14px;
    color: var(--teal-dark);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    transition: background .15s ease;
  }.md-link:hover, .md-link:active{ background: var(--peach); }.md-cta{
    margin-top: 12px;
    padding: 0 14px;
  }.md-cta .btn{
    width: 100%;
    justify-content: center;
  }@media (max-width: 900px) {.nav-toggle{ display: inline-flex; }.nav-cta{ display: none; }}@media (max-width: 900px) {.nav-links{ display: none; }}/* ============================================
     SMALL MOBILE — ≤480px tuning
     ============================================ */@media (max-width: 480px) {.hero-cta{
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
    }.hero-cta .btn{
      width: 100%;
      justify-content: center;
    }/* Reduce headline letter-spacing slightly so long words don't overflow */.hero h1{
      letter-spacing: -0.015em;
    }}/* ============================================
     HERO — three orbiting product nodes around ARVO core
     ============================================ */.hero{
    position: relative;
    padding: clamp(40px, 5vw, 72px) 0 clamp(60px, 7vw, 100px);
    overflow: hidden;
  }.hero::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 600px 480px at 85% 0%, rgba(255, 222, 176, 0.4), transparent 65%),
      radial-gradient(ellipse 560px 440px at 0% 100%, rgba(0, 164, 165, 0.12), transparent 65%);
    pointer-events: none;
  }.hero-grid{
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 40px;
    align-items: center;
  }@media (max-width: 980px) {.hero-grid{ grid-template-columns: 1fr; gap: 48px; }}.hero-content{ position: relative; z-index: 2; }.hero .hero-lede{
    max-width: 540px;
    margin: 0 0 32px;
  }.hero h1{
    margin: 18px 0 22px;
    font-weight: 600;
    font-size: clamp(40px, 5vw, 64px);
    text-transform: none;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--teal-dark);
  }.hero h1 .closer-inline{
    color: var(--orange);
    font-weight: 600;
    white-space: nowrap;
  }.hero p{
    max-width: 520px;
    margin-bottom: 28px;
    font-size: clamp(16px, 1.25vw, 19px);
  }.hero-cta{ display: flex; gap: 14px; flex-wrap: wrap; }/* HERO VISUAL: single composite image */.hero-visual{
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
  }/* Hero stat band — figures owner-confirmed v92.8 */.hero-stats{
    margin-top: clamp(40px, 4.4vw, 56px);
    padding-top: clamp(26px, 2.8vw, 34px);
    border-top: 1px solid rgba(0, 61, 62, 0.12);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 18px 46px;
  }.hstat{ display: flex; align-items: baseline; gap: 9px; }.hstat-num{
    font-size: clamp(26px, 2.9vw, 34px);
    font-weight: 800;
    color: var(--teal-dark);
    letter-spacing: -0.02em;
    line-height: 1;
  }.hstat-label{
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
  }@media (max-width: 900px) {.hero-stats{ gap: 16px 30px; }}@media (max-width: 480px) {.hero-stats{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }.hstat{ flex-direction: column; align-items: flex-start; gap: 5px; }.hstat-num{ font-size: 24px; }.hstat-label{ font-size: 10px; letter-spacing: 0.1em; }}.hero-img{
    width: 100%;
    height: auto;
    display: block;
    -webkit-mask-image:
      linear-gradient(to right, black 90%, transparent 100%),
      linear-gradient(to left, black 90%, transparent 100%),
      linear-gradient(to bottom, black 88%, transparent 100%),
      linear-gradient(to top, black 90%, transparent 100%);
    -webkit-mask-composite: destination-in;
    mask-image:
      linear-gradient(to right, black 90%, transparent 100%),
      linear-gradient(to left, black 90%, transparent 100%),
      linear-gradient(to bottom, black 88%, transparent 100%),
      linear-gradient(to top, black 90%, transparent 100%);
    mask-composite: intersect;
  }@media (max-width: 980px) {.hero-visual{ max-width: 480px; }}@media (max-width: 480px) {.hero-visual{ display: none; }}/* ============================================
     SECTION 2 — School as one system (diagnosis)

  /* ============================================
     SCROLL REVEAL — shared utility
     ============================================ */.rv{
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.2,.65,.3,1), transform .7s cubic-bezier(.2,.65,.3,1);
    transition-delay: var(--rv-delay, 0s);
  }.rv.is-in{ opacity: 1; transform: none; }@media (prefers-reduced-motion: reduce) {.rv{ opacity: 1; transform: none; transition: none; }}/* ============================================
     RUNNOW — brands strip (kept from v61)
     ============================================ */.runnow{
    background: #ffffff;
    padding: 24px 0;
    border-top: 1px solid rgba(0, 61, 62, 0.1);
    border-bottom: 1px solid rgba(0, 61, 62, 0.1);
  }.runnow-inner{
    display: flex;
    align-items: center;
    gap: 28px;
  }.runnow-label{
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    flex: 0 0 auto;
    padding-right: 22px;
    border-right: 1px solid rgba(0, 61, 62, 0.14);
    white-space: nowrap;
  }.runnow-ticker{
    flex: 1 1 auto;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  }.runnow-track{
    display: flex;
    align-items: center;
    width: max-content;
    animation: runnowScroll 32s linear infinite;
  }.runnow-ticker:hover .runnow-track{ animation-play-state: paused; }.runnow-seq{
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }.runnow-item{ flex: 0 0 auto; padding: 0 24px; display:flex; align-items:center; gap: 11px; }.runnow-logo{ height: 34px; width: auto; display:block; }.runnow-name{
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--teal-dark);
    line-height: 1.3;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }.runnow-dot{
    flex: 0 0 auto;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(0, 61, 62, 0.22);
  }@keyframes runnowScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }@media (prefers-reduced-motion: reduce) {.runnow-track{ animation: none; }.runnow-ticker{ mask-image: none; -webkit-mask-image: none; }.runnow-seq.is-clone{ display: none; }.runnow-seq{ flex-wrap: wrap; row-gap: 10px; }}@media (max-width: 820px) {.runnow-inner{ flex-direction: column; align-items: stretch; gap: 14px; }.runnow-label{ border-right: 0; padding-right: 0; text-align: center; }.runnow-item, .runnow-note{ padding: 0 22px; }}/* ============================================
     LEGACY — ARVO is a project of Punjab Group (v93.81)
     Pared back: mark on top, no institution pills, no second
     signature. The figure row is the anchor and sits under a
     hairline. The "Punjab Group, today" label stays because it
     is what stops these figures reading as ARVO's own — the hero
     closes on four ARVO numerals roughly 200px above.
     ============================================ */
.lgcy{ background: var(--cream); padding: clamp(58px, 6.4vw, 96px) 0; text-align: center; }
.lgcy-mark{ height: clamp(46px, 4.6vw, 60px); width: auto; display: block; margin: 0 auto clamp(26px, 2.8vw, 36px); }
.lgcy .eyebrow{ justify-content: center; margin-bottom: 22px; }
.lgcy h2{
  font-size: clamp(27px, 3.3vw, 45px);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.13;
  text-transform: none;
  max-width: 860px;
  margin: 0 auto;
  color: var(--teal-dark);
}
.lgcy h2 em{ font-style: normal; color: var(--orange-deep); }
.lgcy > .container > .rv > p{
  margin: 20px auto 0;
  max-width: 640px;
  font-size: clamp(15px, 1.2vw, 17.5px);
  font-weight: 500;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* --- figure row ------------------------------------------------------- */
.lgcy-stats{
  max-width: 900px;
  margin: clamp(40px, 4.4vw, 60px) auto 0;
  border-top: 1px solid rgba(0,61,62,0.14);
  padding-top: clamp(26px, 2.8vw, 36px);
}
.lgcy-lbl{
  display: block; margin-bottom: clamp(20px, 2.2vw, 28px);
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-mute);
}
.lgcy-figs{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 0; }
.lgcy-figs div{ position: relative; padding: 0 clamp(10px, 1.6vw, 24px); }
.lgcy-figs div + div::before{
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 1px; background: rgba(0,61,62,0.12);
}
.lgcy-figs b{
  display: block; font-size: clamp(22px, 2.1vw, 30px); font-weight: 900;
  letter-spacing: -0.025em; color: var(--teal-dark); line-height: 1.05;
}
.lgcy-figs span{
  display: block; margin-top: 8px; font-size: 12.5px; font-weight: 500;
  color: var(--ink-mute); line-height: 1.4;
}

@media (max-width: 760px){
  .lgcy-figs{ grid-template-columns: repeat(2, 1fr); gap: 30px 0; }
  .lgcy-figs div:nth-child(3)::before{ display: none; }
}
/* ============================================
     THREE DOORS — the products
     ============================================ */.doors .container{ position: relative; z-index: 1; }.doors-head h2 .accent{ color: var(--orange); }/* ============================================
     ENGINES — an LMS is not a CMS (dark band)
     ============================================ */.engines{
    background: var(--teal-dark);
    color: var(--cream);
    padding: clamp(84px, 10vw, 130px) 0;
    position: relative;
    overflow: hidden;
  }.engines::before{
    content: "";
    position: absolute; inset: 0;
    background-image:
      radial-gradient(circle at 12% 25%, rgba(0,164,165,0.14) 0, transparent 45%),
      radial-gradient(circle at 88% 78%, rgba(248,163,44,0.10) 0, transparent 45%);
    pointer-events: none;
  }.engines .container{ position: relative; z-index: 1; }.engines-head .eyebrow{ justify-content: center; color: var(--orange); }.engines-head .eyebrow::before{ background: var(--cream); opacity: .5; }.engine{
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: var(--r-lg);
    padding: 30px 30px 26px;
  }.engine.e-lms .engine-tag{ background: rgba(248,163,44,0.16); color: var(--orange); }.engine.e-cms .engine-tag{ background: rgba(0,164,165,0.16); color: var(--teal-light); }.engine h3{
    font-size: clamp(21px, 2vw, 26px);
    font-weight: 800; line-height: 1.2;
    color: #fff; margin-bottom: 8px;
    letter-spacing: -0.01em;
  }.engine .engine-def{
    font-size: 14.5px; line-height: 1.6;
    color: rgba(250,247,237,0.75);
    margin-bottom: 20px;
  }.engine ul{ list-style: none; display: grid; gap: 10px; }.engine li{
    display: flex; align-items: center; gap: 11px;
    font-size: 14px; font-weight: 600; color: #fff;
  }.engine li .e-ic{
    flex: 0 0 auto;
    width: 30px; height: 30px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
  }.engine.e-lms li .e-ic{ background: rgba(248,163,44,0.14); color: var(--orange); }.engine.e-cms li .e-ic{ background: rgba(0,164,165,0.14); color: var(--teal-light); }.engine li .e-ic svg{ width: 15px; height: 15px; }@keyframes neqPulse {
    0%, 100% { box-shadow: 0 0 0 8px rgba(248,163,44,0.15); }
    50%      { box-shadow: 0 0 0 16px rgba(248,163,44,0.05); }
  }/* ============================================
     POWERED — puzzle assembly (peach band)
     ============================================ */.powered-band .container{ position: relative; z-index: 1; }.powered-head .eyebrow{ justify-content: center; }/* Assembly animation: three pieces slide in and lock into one bar */.assembly{
    max-width: 900px;
    margin: 0 auto clamp(44px, 5vw, 64px);
  }.assembly.is-in .asm-piece{ opacity: 1; transform: none; }.asm-plus.x1{ transition-delay: .65s; }.asm-plus.x2{ transition-delay: .8s; }.assembly.is-in .asm-plus{ opacity: 1; transform: none; }.assembly.is-in .asm-equals{ opacity: 1; transform: none; }.assembly.is-in .asm-result{ opacity: 1; transform: none; }.asm-result-txt .ar-name .accent{ color: var(--orange); }/* ============================================
     SECTION 7 — Final CTA
     ============================================ */.final-cta{
    padding: clamp(80px, 10vw, 140px) 0;
    text-align: center;
    background: #ffffff;
  }
  .final-cta-inner .eyebrow{ margin-bottom: 26px; }
  
  
  @media (max-width: 860px){
    .final-cta-inner .eyebrow{ margin-bottom: 20px; }
    
    
  }/* ============================================
     FOOTER
     ============================================ *//* ============================================
     FOOTER (canonical — all pages)
     ============================================ */footer{
    background: var(--teal-dark);
    color: rgba(250, 247, 237, 0.7);
    padding: 60px 0 32px;
    position: relative;
    overflow: visible;
  }.footer-grid{
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 36px;
    margin-bottom: 48px;
  }@media (max-width: 980px) {.footer-grid{ grid-template-columns: 1fr 1fr 1fr; }}@media (max-width: 800px) {.footer-grid{ grid-template-columns: 1fr 1fr; }}@media (max-width: 480px) {.footer-grid{ grid-template-columns: 1fr; }}.footer-social{
    display: flex;
    gap: 10px;
    margin-top: 22px;
  }.footer-social a{
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(250, 247, 237, 0.08);
    color: rgba(250, 247, 237, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
  }.footer-social a:hover{
    background: var(--orange);
    color: var(--teal-dark);
    transform: translateY(-2px);
  }footer h5{
    color: var(--cream);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 18px;
  }footer ul{ list-style: none; }footer li{ margin-bottom: 10px; }footer a{
    color: rgba(250, 247, 237, 0.7);
    text-decoration: none;
    font-size: 14px;
    transition: color .2s ease;
  }footer a:hover{ color: var(--orange); }footer .footer-product{
    display: block;
    margin-bottom: 18px;
  }footer .footer-product .fp-name{
    display: block;
    color: var(--cream);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 2px;
  }footer .footer-product .fp-tag{
    display: block;
    color: rgba(250, 247, 237, 0.5);
    font-size: 12px;
    font-style: italic;
  }footer .footer-logo{
    display: inline-block;
    margin-bottom: 16px;
    height: 36px;
  }footer .footer-logo svg{
    height: 100%;
    width: auto;
    display: block;
  }footer .footer-logo svg .lg-mark{ fill: var(--cream); }footer .footer-logo svg .lg-tick{ fill: var(--orange); }footer .footer-tag{
    font-size: 14px;
    color: rgba(250, 247, 237, 0.6);
    line-height: 1.6;
    max-width: 320px;
  }.footer-bottom{
    padding-top: 28px;
    border-top: 1px solid rgba(250, 247, 237, 0.1);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
  }
.footer-bottom a{
    color: inherit;
    border-bottom: 1px solid rgba(250, 247, 237, 0.28);
    transition: color .2s ease, border-color .2s ease;
  }
.footer-bottom a:hover{
    color: var(--orange);
    border-bottom-color: var(--orange);
  }
/* Mascot — sits in the right gutter, vertically centered with the footer columns */.footer-mascot{
    position: absolute;
    right: clamp(24px, 5vw, 80px);
    top: 50%;
    transform: translateY(-50%);
    width: 118px;
    height: auto;
    transform-origin: 50% 50%;
    animation: mascotWave 3.5s ease-in-out 0.5s infinite;
    pointer-events: none;
    z-index: 2;
  }@keyframes mascotWave {
    0%, 100%   { transform: translateY(-50%) rotate(0deg); }
    25%        { transform: translateY(-50%) rotate(-4deg); }
    75%        { transform: translateY(-50%) rotate(4deg); }
  }@media (max-width: 1100px) {.footer-mascot{ width: 92px; right: 16px; }}@media (max-width: 800px) {.footer-mascot{ display: none; }}@media (prefers-reduced-motion: reduce) {.footer-mascot{ animation: none; transform: translateY(-50%); }}.md-cat{
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink-mute);
    margin-top: 2px;
  }/* Homepage footer product links refresh */.footer-product .fp-name{ transition: color .2s ease; }/* Stat count-up gets tabular numerals so digits don't jitter */.hstat-num{ font-variant-numeric: tabular-nums; }/* Mascot peeking in from the right edge of the doors section *//* ============================================
     MOTION POLISH — subtle, best-practice layer
     ============================================ *//* Hero entrance — staggered rise on load */@keyframes riseIn {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
  }.hero-content > *{ opacity: 0; animation: riseIn .8s cubic-bezier(.2,.65,.3,1) forwards; }.hero-content > .eyebrow{ animation-delay: .05s; }.hero-content > h1{ animation-delay: .16s; }.hero-content > .hero-lede{ animation-delay: .3s; }.hero-content > .hero-cta{ animation-delay: .44s; }.hero-visual{ opacity: 0; animation: riseIn .9s cubic-bezier(.2,.65,.3,1) .3s forwards; }.hero-stats{ opacity: 0; animation: riseIn .8s ease .6s forwards; }/* Hero image — slow ambient float */@keyframes ambientFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
  }.hero-img{ animation: ambientFloat 7s ease-in-out infinite; }/* Nav — shadow appears once the page scrolls */.nav{ transition: box-shadow .3s ease; }.nav.is-scrolled{ box-shadow: 0 8px 30px rgba(0, 61, 62, 0.09); }/* Eyebrow dash draws itself when its section reveals */.rv .eyebrow::before{ transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.2,.65,.3,1) .15s; }.rv.is-in .eyebrow::before{ transform: scaleX(1); }/* Engine list items — cascade in after the duel reveals */.engines-duel .engine li{ opacity: 0; transform: translateX(-10px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.65,.3,1); }.engines-duel.is-in .engine li{ opacity: 1; transform: none; }.engines-duel.is-in .engine li:nth-child(1){ transition-delay: .25s; }.engines-duel.is-in .engine li:nth-child(2){ transition-delay: .37s; }.engines-duel.is-in .engine li:nth-child(3){ transition-delay: .49s; }.engines-duel.is-in .engine li:nth-child(4){ transition-delay: .61s; }/* Powered band — two glows drifting almost imperceptibly */@keyframes glowDrift {
    from { transform: translate(0, 0); }
    to   { transform: translate(-46px, 34px); }
  }/* Footer mascot — gentle bob */.footer-mascot{ animation: ambientFloat 6s ease-in-out infinite; }/* Stat numbers get a tiny settle-pop when counting finishes */@keyframes settlePop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }.hstat-num.is-done{ animation: settlePop .4s cubic-bezier(.34,1.56,.64,1); display: inline-block; }@media (prefers-reduced-motion: reduce) {.hero-content > *, .hero-visual, .hero-stats{ opacity: 1; animation: none; }.hero-img, .footer-mascot{ animation: none; }.rv .eyebrow::before{ transform: none; transition: none; }.engines-duel .engine li{ opacity: 1; transform: none; transition: none; }.hstat-num.is-done{ animation: none; }}/* ===== DOOR MOCKS — real product screens ===== *//* pulse layout *//* core layout *//* v92.9 — assembly & CTA breathing room */.assembly .asm-row{ margin-bottom: 0; }
/* v92.8 — products+powered merge *//* v93.2 — Option 3 card headers */.door > *:not(.door-band){ margin-left: 24px; margin-right: 24px; }
/* ============================================
   v93.27 — BUILD products section
   (three pillars rise lit -> roof lands -> unified pulse)
   ============================================ */
.bstage{position:relative;overflow:hidden;
  background:radial-gradient(90% 70% at 50% 6%, rgba(9,90,88,.85) 0%, transparent 58%),
  linear-gradient(180deg,#053836 0%, #032726 78%, #021d1c 100%);
  padding:clamp(60px,7vw,96px) 24px clamp(60px,7vw,92px)}
.bstage .wrap{max-width:1160px;margin:0 auto;text-align:center;position:relative;z-index:1}
.bstage .eyebrow{color:#67c6c7}
.bstage-h2{font-weight:700;letter-spacing:-.02em;line-height:1.06;font-size:clamp(30px,4vw,52px);color:#fff;margin:14px 0 0}
.bstage-h2 .accent{color:var(--orange)}
.b-minilinks{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:40px;position:relative;z-index:3}
.b-minilinks a{display:inline-flex;align-items:center;gap:8px;font:700 13.5px/1 Poppins;color:#bfe3e3;text-decoration:none;
  padding:11px 18px;border:1.5px solid rgba(191,227,227,.28);border-radius:100px;background:rgba(6,47,46,.5);transition:.25s}
.b-minilinks a:hover{border-color:var(--orange);color:#fff;transform:translateY(-1px)}
.b-minilinks a svg{width:13px;height:13px}
.b-cta{display:flex;justify-content:center;margin-top:24px;position:relative;z-index:3}
.b-cta a{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(180deg,#ffb64a,var(--orange));color:#3a2a08;font:800 15.5px/1 Poppins;
  padding:17px 30px;border-radius:100px;text-decoration:none;box-shadow:0 10px 30px rgba(248,163,44,.35), inset 0 1px 0 rgba(255,255,255,.35)}
.b-cta a svg{width:17px;height:17px}
.b-name{font:800 clamp(11px,1.05vw,14.5px)/1.25 Poppins;color:#eaf6f6;display:block}
.b-role{font:700 clamp(9.5px,.85vw,11px)/1.1 Poppins;letter-spacing:.16em;text-transform:uppercase;color:#579a9a;display:block;margin-top:5px}
.b-wm{position:relative;display:inline-block;margin-top:clamp(14px,1.6vw,20px);padding:4px 24px}
.b-wmglow{position:absolute;left:50%;top:50%;width:560px;height:320px;transform:translate(-50%,-50%);opacity:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,210,122,.34),rgba(255,210,122,.08) 55%,transparent 75%)}
.b-wmsub{position:relative;font:500 clamp(12.5px,1.15vw,16px)/1.5 Poppins;color:rgba(191,227,227,.15);margin-top:0;z-index:1}
.b-mascot{position:absolute;right:clamp(-118px,-9vw,-152px);bottom:-14px;height:clamp(72px,7.2vw,98px);opacity:0;transform:translateY(14px)}
.b-mascot img{height:100%;display:block;filter:drop-shadow(0 8px 18px rgba(0,0,0,.4))}
/* scene */
.vb-scene{position:relative;max-width:820px;margin:clamp(44px,4.8vw,64px) auto 0;padding-top:clamp(120px,14vw,175px);padding-bottom:6px}
.vb-ground{height:3px;background:linear-gradient(90deg,transparent,rgba(191,227,227,.28),transparent);border-radius:2px}
.vb-cols{display:flex;justify-content:center;gap:clamp(30px,5.4vw,82px);align-items:flex-end;height:clamp(150px,17vw,210px);position:relative;z-index:1}
.vb-col{width:clamp(70px,8.2vw,98px);height:100%;position:relative;transform:scaleY(0);transform-origin:bottom}
.vb-shaft{position:absolute;inset:0 8px 0 8px;border-radius:10px 10px 0 0;
  background:linear-gradient(180deg,#0b4341,#073331);border:1.5px solid rgba(191,227,227,.24);border-bottom:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.vb-cap{position:absolute;left:0;right:0;top:-12px;height:13px;border-radius:6px;
  background:linear-gradient(180deg,#0f4e4b,#0a3d3b);border:1.5px solid rgba(191,227,227,.2)}
.vb-win{position:absolute;left:50%;transform:translateX(-50%);width:38%;height:12%;border-radius:4px;background:#062f2e;border:1px solid rgba(191,227,227,.22)}
.vb-win.w1{top:16%}.vb-win.w2{top:38%}.vb-win.w3{top:60%}
.vb-colglow{position:absolute;inset:-20px;border-radius:20px;opacity:0;z-index:-1}
.vbc1{--wc:#00d3d4}.vbc2{--wc:#ffb64a}.vbc3{--wc:#9fe8e9}
.vbc1 .vb-colglow{background:radial-gradient(closest-side,rgba(0,211,212,.5),transparent 72%)}
.vbc2 .vb-colglow{background:radial-gradient(closest-side,rgba(248,163,44,.55),transparent 72%)}
.vbc3 .vb-colglow{background:radial-gradient(closest-side,rgba(159,232,233,.45),transparent 72%)}
/* roof */
.vb-roof{position:absolute;left:50%;z-index:3;opacity:0;
  width:calc(3*clamp(70px,8.2vw,98px) + 2*clamp(30px,5.4vw,82px) + 2*clamp(20px,2.2vw,28px));
  top:calc(clamp(120px,14vw,175px) - clamp(46px,5.4vw,64px) - 11px);
  transform:translate(-50%,-64px)}
.vb-beam{height:clamp(46px,5.4vw,64px);border-radius:14px;position:relative;z-index:2;
  background:linear-gradient(180deg,#11544f,#0a3f3c);border:1.5px solid rgba(191,227,227,.3);
  box-shadow:0 18px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center}
.vb-beamtext{font:800 clamp(15px,1.8vw,23px)/1 Poppins;color:#fff;letter-spacing:.01em}
.vb-beamtext .accent{color:var(--orange)}
.vb-gable{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);width:100%;height:clamp(30px,3.4vw,42px);
  clip-path:polygon(0 100%,50% 0,100% 100%);
  background:linear-gradient(180deg,#116058,#0b4341);opacity:.95}
.vb-flag{position:absolute;left:50%;bottom:calc(100% + clamp(28px,3.2vw,40px));transform:translateX(-50%);width:4px;height:26px;background:rgba(191,227,227,.35);border-radius:2px}
.vb-flag::after{content:"";position:absolute;left:4px;top:0;border-style:solid;border-width:6px 0 6px 14px;border-color:transparent transparent transparent #f8a32c}
.vb-labels{display:flex;justify-content:center;gap:clamp(30px,5.4vw,82px);margin-top:16px}
.vb-labels>div{width:clamp(70px,8.2vw,98px)}
/* timeline: 10s. rises 8/17/26, roof 34-42, ALL pulse 52-86, joint reset 92 */
@keyframes vb-rise1{0%,8%{transform:scaleY(0)}13%,100%{transform:scaleY(1)}}
@keyframes vb-rise2{0%,17%{transform:scaleY(0)}22%,100%{transform:scaleY(1)}}
@keyframes vb-rise3{0%,26%{transform:scaleY(0)}31%,100%{transform:scaleY(1)}}
@keyframes vb-glow1{0%,8%{opacity:0}13%,86%{opacity:1}92%,100%{opacity:0}}
@keyframes vb-glow2{0%,17%{opacity:0}22%,86%{opacity:1}92%,100%{opacity:0}}
@keyframes vb-glow3{0%,26%{opacity:0}31%,86%{opacity:1}92%,100%{opacity:0}}
@keyframes vb-roof-k{0%,34%{opacity:0;transform:translate(-50%,-64px)}42%,100%{opacity:1;transform:translate(-50%,0)}}
@keyframes vb-beamtext-glow{0%,44%{text-shadow:none}52%,86%{text-shadow:0 0 26px rgba(255,210,122,.6)}94%,100%{text-shadow:none}}
@keyframes vb-win-a{0%,13%{background:#062f2e;box-shadow:none}16%,50%{background:var(--wc);box-shadow:0 0 7px color-mix(in srgb,var(--wc) 60%,transparent)}54%,86%{background:var(--wc);box-shadow:0 0 18px var(--wc);filter:brightness(1.18)}92%,100%{background:#062f2e;box-shadow:none;filter:none}}
@keyframes vb-win-b{0%,22%{background:#062f2e;box-shadow:none}25%,50%{background:var(--wc);box-shadow:0 0 7px color-mix(in srgb,var(--wc) 60%,transparent)}54%,86%{background:var(--wc);box-shadow:0 0 18px var(--wc);filter:brightness(1.18)}92%,100%{background:#062f2e;box-shadow:none;filter:none}}
@keyframes vb-win-c{0%,31%{background:#062f2e;box-shadow:none}34%,50%{background:var(--wc);box-shadow:0 0 7px color-mix(in srgb,var(--wc) 60%,transparent)}54%,86%{background:var(--wc);box-shadow:0 0 18px var(--wc);filter:brightness(1.18)}92%,100%{background:#062f2e;box-shadow:none;filter:none}}
@keyframes b-wmsub-k{0%,47%{color:rgba(191,227,227,.15)}53%,86%{color:#ffdeb0}94%,100%{color:rgba(191,227,227,.15)}}
@keyframes b-wmglow-k{0%,45%{opacity:0}52%,86%{opacity:1}94%,100%{opacity:0}}
@keyframes b-mascot-k{0%,50%{opacity:0;transform:translateY(14px)}57%,86%{opacity:1;transform:translateY(0)}92%,100%{opacity:0;transform:translateY(14px)}}
.bstage.play .vbc1{animation:vb-rise1 12s cubic-bezier(.3,1.35,.5,1) infinite}
.bstage.play .vbc2{animation:vb-rise2 12s cubic-bezier(.3,1.35,.5,1) infinite}
.bstage.play .vbc3{animation:vb-rise3 12s cubic-bezier(.3,1.35,.5,1) infinite}
.bstage.play .vbc1 .vb-colglow{animation:vb-glow1 12s infinite}
.bstage.play .vbc2 .vb-colglow{animation:vb-glow2 12s infinite}
.bstage.play .vbc3 .vb-colglow{animation:vb-glow3 12s infinite}
.bstage.play .vb-roof{animation:vb-roof-k 12s cubic-bezier(.3,1.25,.5,1) infinite}
.bstage.play .vb-scene{animation:vb-exit 12s linear infinite}
@keyframes vb-exit{0%,90%{opacity:1}96%,100%{opacity:0}}
.bstage.play .vb-beamtext{animation:vb-beamtext-glow 12s infinite}
.bstage.play .vbc1 .vb-win{animation:vb-win-a 12s infinite}
.bstage.play .vbc2 .vb-win{animation:vb-win-b 12s infinite}
.bstage.play .vbc3 .vb-win{animation:vb-win-c 12s infinite}
.bstage.play .b-wmsub{animation:b-wmsub-k 12s infinite}
.bstage.play .b-wmglow{animation:b-wmglow-k 12s infinite}
.bstage.play .b-mascot{animation:b-mascot-k 12s infinite}
/* v93.52 — labels arrive with their pillars (owner: captions after the object) */
@keyframes vb-lbl1{0%,13%{opacity:0;transform:translateY(6px)}21%,86%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(6px)}}
@keyframes vb-lbl2{0%,22%{opacity:0;transform:translateY(6px)}30%,86%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(6px)}}
@keyframes vb-lbl3{0%,31%{opacity:0;transform:translateY(6px)}39%,86%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(6px)}}
.bstage.play .vb-labels>div:nth-child(1){animation:vb-lbl1 12s ease-out infinite}
.bstage.play .vb-labels>div:nth-child(2){animation:vb-lbl2 12s ease-out infinite}
.bstage.play .vb-labels>div:nth-child(3){animation:vb-lbl3 12s ease-out infinite}
@media (prefers-reduced-motion:reduce){
  .bstage.play *{animation:none!important}
  .bstage .vb-col{transform:scaleY(1)}
  .bstage .vb-roof{opacity:1;transform:translate(-50%,0)}
  .bstage .vb-win{background:var(--wc);box-shadow:0 0 12px var(--wc)}
  .bstage .vb-colglow{opacity:.7}
  .bstage .b-wmsub{color:#ffdeb0}
  .bstage .b-wmglow{opacity:1}
  .bstage .b-mascot{opacity:1;transform:none}
}
/* v93.30s · mobile: static finished building (no BUILD loop on small screens) */
@media (max-width:700px){
  .bstage.play *{animation:none!important}
  .bstage .vb-col{transform:scaleY(1)}
  .bstage .vb-roof{opacity:1;transform:translate(-50%,0)}
  .bstage .vb-win{background:var(--wc);box-shadow:0 0 12px var(--wc)}
  .bstage .vb-colglow{opacity:.7}
  .bstage .b-wmsub{color:#ffdeb0}
  .bstage .b-wmglow{opacity:1}
  .bstage .b-mascot{opacity:1;transform:none}
  .bstage .vb-beamtext{text-shadow:0 0 26px rgba(255,210,122,.6)}
}
@media (max-width:560px){
  .b-mascot{display:none}
  .vb-cols,.vb-labels{gap:16px}
}

/* ===== v93.29 · interaction layer (sitewide, conscious) =====
   Only interactive things move: links, buttons, cards that link or expand, matrix rows, tabs.
   200ms ease-out; 1-2px lifts; no blurred shadows; reduced-motion switches all of it off. */
:root{ --ix-ease:cubic-bezier(.2,.65,.3,1); --ix-t:.2s; }
a,button{ transition:color var(--ix-t) var(--ix-ease), background-color var(--ix-t) var(--ix-ease), border-color var(--ix-t) var(--ix-ease), transform var(--ix-t) var(--ix-ease), box-shadow var(--ix-t) var(--ix-ease); }
/* buttons: lift on hover, press on active */
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(3px); transition-duration:.08s; }
.btn-primary:hover{ box-shadow:0 9px 0 var(--orange-deep); }
.btn-primary:active{ box-shadow:0 5px 0 var(--orange-deep); }
.btn-ghost:hover{ background:rgba(0,61,62,.06); color:var(--teal-dark); }
/* nav links: underline grows in */
.nav a:not(.btn){ position:relative; }
.nav a:not(.btn)::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform var(--ix-t) var(--ix-ease); }
.nav a:not(.btn):hover::after, .nav a:not(.btn).active::after{ transform:scaleX(1); }
/* cards and tiles: slight lift + firmer border */

/* lift only what is clickable: expandable cards, and cards that contain a link */

/* image cards: gentle zoom on the picture only */




/* matrix rows and group headers */






/* tabs / toggles */

.au-toggle button:not(.on):hover{ background:rgba(0,61,62,.06); }
/* focus ring, consistent */
a:focus-visible, button:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; border-radius:6px; }
@media (hover:none){ .btn:hover, .au-card:hover, .plan-door:hover, .hd-card:hover, .dv-card:hover, .pp-card:hover, .fm-card:hover, .plan-card:hover, .c1-card:hover{ transform:none; } }
@media (prefers-reduced-motion:reduce){ a,button,.au-card,.ttp-card,.id-ln,.plan-door,.hd-card,.dv-card,.pp-card,.fm-card,.plan-card,.c1-card,.au-media.is-img img,.mx-row,.mx-grp,.mx-grp .chev,.nav a::after{ transition:none!important; } .btn:hover,.au-card:hover,.ttp-card:hover,.plan-door:hover,.hd-card:hover,.dv-card:hover,.pp-card:hover,.fm-card:hover,.plan-card:hover,.c1-card:hover{ transform:none; }  }
/* v93.55 — shared closing CTA (same card as powered.html) */
.cta-card{
    background: var(--orange);
    border-radius: var(--r-xl);
    padding: clamp(48px, 6vw, 80px);
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
.cta-card::before{
    content: "";
    position: absolute;
    top: -100px; right: -100px;
    width: 320px; height: 320px;
    background: var(--orange-deep);
    border-radius: 50%;
    opacity: 0.4;
    z-index: -1;
  }
.cta-card::after{
    content: "";
    position: absolute;
    bottom: -120px; left: -80px;
    width: 280px; height: 280px;
    background: var(--peach);
    border-radius: 50%;
    opacity: 0.5;
    z-index: -1;
  }
.cta-card > *{ position: relative; z-index: 1; }
.cta-card h2{
    color: var(--teal-dark);
    margin-bottom: 18px;
    font-size: clamp(32px, 4.5vw, 56px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    line-height: 1;
  }
.cta-card p{
    color: var(--teal-dark);
    font-size: 17px;
    max-width: 560px;
    margin: 0 auto 32px;
    opacity: 0.85;
    line-height: 1.6;
  }
.cta-card .eyebrow{
    margin-bottom: 12px;
    color: var(--teal-dark) !important;
    opacity: 0.7;
  }
.cta-card .cta-sub{max-width:640px;margin:0 auto 30px;font-size:clamp(15px,1.6vw,17px);line-height:1.6;color:var(--teal-dark);}
  .cta-buttons{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-card .btn-primary{
    background: var(--teal-dark);
    color: var(--cream);
    box-shadow: 0 6px 0 #002425;
  }
.cta-card .btn-primary:hover{ box-shadow: 0 8px 0 #002425; }
.cta-card .btn-ghost{
    color: var(--teal-dark);
    border-color: var(--teal-dark);
  }
.cta-card 

/* v93.46g — sitewide law: buttons center at mobile */
@media (max-width: 700px){
.btn{ display:flex; align-items:center; justify-content:center; width:max-content; max-width:100%; margin-left:auto; margin-right:auto; }
.hb-ctas .btn, .hero-cta .btn{ margin-left:0; margin-right:0; }
.md-cta{ display:flex; flex-direction:column; gap:12px; }
.md-cta .btn{ width:100%; }
}