/* ARVO — privacy 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 */@keyframes floatDrift {
    0%   { transform: translateY(110vh) rotate(0deg); opacity: 0; }
    5%   { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; }
  }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 */.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);
  }/* 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: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 .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 .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 VISUAL: single composite image *//* 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;
  }@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; }}/* ============================================
     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)
     ============================================ */@keyframes runnowScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }/* ============================================
     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 .eyebrow{ justify-content: center; margin-bottom: 22px; }


.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 ------------------------------------------------------- */









/* ============================================
     THREE DOORS — the products
     ============================================ */.doors .container{ position: relative; z-index: 1; }/* ============================================
     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; }@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; }/* ============================================
     SECTION 7 — Final CTA
     ============================================ */
  .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 > .eyebrow{ animation-delay: .05s; }.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); }
  }/* 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.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; }.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 .wrap{max-width:1160px;margin:0 auto;text-align:center;position:relative;z-index:1}
.bstage .eyebrow{color:#67c6c7}
















/* scene */







.vb-win.w3{top:60%}





/* roof */









/* 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)}}








@keyframes vb-exit{0%,90%{opacity:1}96%,100%{opacity:0}}







/* 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)}}




/* v93.30s · mobile: static finished building (no BUILD loop on small screens) */



/* ===== 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 .eyebrow{
    margin-bottom: 12px;
    color: var(--teal-dark) !important;
    opacity: 0.7;
  }

  
.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 

/* ============================================
     LEGAL PAGE — privacy policy
     Sticky section index on the left, document on the right. Reuses the site's
     tokens only; no new colours, radii or shadows are introduced here.
     ============================================ */
.lgl-hero{ background:var(--cream); padding:clamp(52px,5.4vw,84px) 0 clamp(30px,3vw,44px); }
.lgl-hero .eyebrow{ margin-bottom:18px; }
.lgl-hero h1{
  font-size:clamp(32px,4.4vw,58px); font-weight:800; letter-spacing:-.025em;
  line-height:1.08; color:var(--teal-dark); margin:0; max-width:760px;
}
.lgl-hero p{
  margin:20px 0 0; max-width:620px; font-size:clamp(15px,1.2vw,17.5px);
  font-weight:500; line-height:1.65; color:var(--ink-soft);
}
.lgl-hero .lgl-meta{
  margin-top:clamp(26px,2.6vw,34px); padding-top:22px;
  border-top:1px solid rgba(0,61,62,.12); display:flex; flex-wrap:wrap; gap:10px 34px;
}
.lgl-hero .lgl-meta div{ font-size:12.5px; font-weight:600; color:var(--ink-mute); }
.lgl-hero .lgl-meta b{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--teal); margin-bottom:5px;
}

.lgl{ background:var(--cream); padding:clamp(34px,3.4vw,52px) 0 clamp(64px,6.4vw,104px); }
.lgl-grid{ display:grid; grid-template-columns:250px 1fr; gap:clamp(28px,3.4vw,56px);
  align-items:start; }
/* grid children default to min-width:auto, which lets the chip rail below stretch the
   column instead of scrolling inside it — this is what caused the 768/390 blowout */
.lgl-grid > *{ min-width:0; }

.lgl-toc{ position:sticky; top:96px; }
.lgl-toc b{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:14px;
}
.lgl-toc a{
  display:block; font-size:13.5px; font-weight:600; line-height:1.35;
  color:var(--ink-soft); padding:8px 0 8px 14px;
  border-left:2px solid rgba(0,61,62,.12); transition:color .2s ease, border-color .2s ease;
}
.lgl-toc a:hover{ color:var(--teal-dark); border-left-color:var(--orange); }
.lgl-toc a.is-here{ color:var(--teal-dark); border-left-color:var(--orange); }

.lgl-doc{
  background:#fff; border:1px solid rgba(0,61,62,.08); border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
  padding:clamp(32px,3.6vw,60px) clamp(24px,3.2vw,60px) clamp(36px,3.6vw,56px);
}
.lgl-doc section{ scroll-margin-top:110px; }
.lgl-doc section + section{
  margin-top:clamp(34px,3.4vw,48px); padding-top:clamp(30px,3vw,42px);
  border-top:1px solid rgba(0,61,62,.09);
}
.lgl-doc h2{
  font-size:clamp(19px,1.85vw,25px); font-weight:800; letter-spacing:-.018em;
  line-height:1.2; color:var(--teal-dark); margin:0 0 6px; text-transform:none;
}
.lgl-doc h2 + p, .lgl-doc h2 + ul, .lgl-doc h2 + ol{ margin-top:16px; }
.lgl-doc p{
  margin:0 0 15px; font-size:15px; font-weight:500; line-height:1.75; color:var(--ink-soft);
}
.lgl-doc p:last-child, .lgl-doc ul:last-child, .lgl-doc ol:last-child{ margin-bottom:0; }
.lgl-doc strong{ font-weight:700; color:var(--teal-dark); }
.lgl-doc ul, .lgl-doc ol{ margin:0 0 15px; padding-left:0; list-style:none; }
.lgl-doc li{
  position:relative; padding-left:22px; margin-bottom:10px;
  font-size:15px; font-weight:500; line-height:1.7; color:var(--ink-soft);
}
.lgl-doc ul li::before{
  content:""; position:absolute; left:2px; top:10px; width:6px; height:6px;
  border-radius:50%; background:var(--orange);
}
.lgl-doc ol{ counter-reset:lgl; }
.lgl-doc ol li{ counter-increment:lgl; }
.lgl-doc ol li::before{
  content:counter(lgl) "."; position:absolute; left:0; top:0;
  font-weight:800; color:var(--orange-deep); font-size:14px;
}
.lgl-doc a{ color:var(--teal); font-weight:600; border-bottom:1px solid rgba(0,126,127,.3); }
.lgl-doc a:hover{ color:var(--orange-deep); border-bottom-color:var(--orange); }

.lgl-ask{
  margin-top:clamp(26px,2.6vw,36px); background:var(--cream-warm);
  border:1px solid rgba(0,61,62,.09); border-radius:var(--r-md);
  padding:clamp(22px,2.4vw,30px) clamp(22px,2.6vw,34px);
}
.lgl-ask b{
  display:block; font-size:15px; font-weight:800; color:var(--teal-dark); margin-bottom:8px;
}
.lgl-ask p{ margin:0; font-size:14.5px; font-weight:500; line-height:1.7; color:var(--ink-soft); }

@media (max-width:900px){
  .lgl-grid{ grid-template-columns:1fr; gap:24px; }
  /* the index becomes a scrolling chip row rather than a tall stack above the doc */
  .lgl-toc{ position:static; min-width:0; max-width:100%; }
  .lgl-toc-rail{ display:flex; gap:8px; overflow-x:auto; max-width:100%; padding-bottom:6px;
    -webkit-overflow-scrolling:touch; }
  .lgl-toc a{ flex:none; border-left:0; background:#fff; border:1px solid rgba(0,61,62,.1);
    border-radius:999px; padding:8px 14px; white-space:nowrap; font-size:12.5px; }
  .lgl-toc a:hover, .lgl-toc a.is-here{ background:var(--orange); color:var(--teal-dark);
    border-color:var(--orange); }
}