/* ARVO — publications 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 */.h2{ font-size: clamp(36px, 5vw, 68px); }.h3{ font-size: clamp(28px, 3.4vw, 44px); }.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); }.nav-links a.active{ color: var(--teal); font-weight: 600; }/* 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
     ============================================ *//* ============================================
     SHARED — reveal, tick bullets, polish
     ============================================ */.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; }.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); }.nav{ transition: box-shadow .3s ease; }.nav.is-scrolled{ box-shadow: 0 8px 30px rgba(0, 61, 62, 0.09); }@keyframes riseIn{ from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }@keyframes pulseDot{ 0%,100%{ transform:scale(1); opacity:1;} 50%{ transform:scale(1.45); opacity:.6;} }@keyframes settlePop{ 0% { opacity:0; transform: translateY(10px) scale(.92) rotate(var(--stick-r,0deg)); } 70% { opacity:1; transform: translateY(-2px) scale(1.03) rotate(var(--stick-r,0deg)); } 100% { opacity:1; transform: rotate(var(--stick-r,0deg)); } }@keyframes coverRise{ 0% { opacity:0; transform: translateX(var(--cfx,-50%)) rotate(var(--cfr,0deg)) translateY(34px) scale(.94); } 100% { opacity:1; transform: translateX(var(--cfx,-50%)) rotate(var(--cfr,0deg)) translateY(0) scale(1); } }@keyframes ambientFloat{ 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }section h2.sec-h{ text-transform: none; font-weight: 700; letter-spacing: -0.02em; line-height: 1.07; font-size: clamp(31px, 4vw, 52px); color: var(--teal-dark); margin: 18px 0 18px; }section h2.sec-h .accent{ color: var(--orange); }@media (prefers-reduced-motion: reduce){.rv{ opacity: 1; transform: none; transition: none; }.rv .eyebrow::before{ transform: none; transition: none; }}/* ============================================
     HERO-B — product-page family hero (shared grammar)
     Publications expression: AEP lockup + book-cover fan
     ============================================ */.hero-b{ position:relative; overflow:hidden; text-align:center; padding: clamp(48px,5vw,72px) 0 0; background:
     radial-gradient(circle at 12% 18%, rgba(248,163,44,0.18) 0%, transparent 30%),
     radial-gradient(circle at 88% 72%, rgba(0,164,165,0.16) 0%, transparent 32%), var(--cream); }/* AEP lockup — Publications-only, sits above the family badge */.aep-logo-hero{ height: clamp(46px, 5vw, 66px); width: auto; display:block; margin: 0 auto 16px; }/* family badge */@media (max-width: 700px){.aep-logo-hero{ margin-bottom: 24px; }.hero-b h1{ margin-bottom: 4px; }.hero-b .hb-sub{ margin: 22px auto 36px; }.hb-ctas{ gap: 16px; margin-bottom: 44px; }}.hero-b h1{ font-size: clamp(42px, 6.4vw, 84px); font-weight:900; letter-spacing:-0.03em; line-height:0.98; color:var(--teal-dark); }.hero-b h1 .pop{ color:var(--orange); display:inline-block; }.hero-b .hb-sub{ font-size: clamp(15px,1.5vw,17.5px); font-weight:500; color:var(--ink-soft); max-width:600px; margin:18px auto 30px; line-height:1.65; }.hb-ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:36px; }/* the fan — Publications fans book covers instead of tag cards */.hb-fan{ position:relative; height: clamp(150px, 17vw, 230px); margin-top:6px; }.hb-fan .cf{ position:absolute; bottom:-70px; left:50%; width: clamp(118px, 12vw, 172px); border-radius:10px;
     box-shadow: 0 8px 0 rgba(0,61,62,0.12), 0 24px 40px -16px rgba(0,36,37,0.42); }.hb-fan .c1{ transform: translateX(-236%) rotate(-9deg); }.hb-fan .c2{ transform: translateX(-143%) rotate(-4.5deg); z-index:2; }.hb-fan .c3{ transform: translateX(-50%) rotate(0deg); z-index:3; bottom:-56px; }.hb-fan .c4{ transform: translateX(43%) rotate(4.5deg); z-index:2; }.hb-fan .c5{ transform: translateX(136%) rotate(9deg); }@media (prefers-reduced-motion: no-preference){.hb-fan .cf{ opacity: 0; }.hb-fan.is-in .c1{ --cfx:-236%; --cfr:-9deg; animation: coverRise .6s cubic-bezier(.2,.75,.25,1) .05s both; }.hb-fan.is-in .c2{ --cfx:-143%; --cfr:-4.5deg; animation: coverRise .6s cubic-bezier(.2,.75,.25,1) .14s both; }.hb-fan.is-in .c3{ --cfx:-50%; --cfr:0deg; animation: coverRise .6s cubic-bezier(.2,.75,.25,1) .23s both; }.hb-fan.is-in .c4{ --cfx:43%; --cfr:4.5deg; animation: coverRise .6s cubic-bezier(.2,.75,.25,1) .32s both; }.hb-fan.is-in .c5{ --cfx:136%; --cfr:9deg; animation: coverRise .6s cubic-bezier(.2,.75,.25,1) .41s both; }.rv.is-in .hb-stickers .stick, .hb-stickers.is-in .stick{ animation: settlePop .5s cubic-bezier(.25,1.1,.35,1) both; }}@media (max-width: 980px){.hb-fan .c1, .hb-fan .c5{ display: none; }.hb-fan .c2{ transform: translateX(-122%) rotate(-6deg); }.hb-fan .c4{ transform: translateX(24%) rotate(6deg); }}@media (max-width: 640px){.hb-fan{ height: 150px; }.hb-fan .cf{ width: clamp(104px, 30vw, 132px); bottom: -58px; }.hb-fan .c2{ transform: translateX(-104%) rotate(-7deg); }.hb-fan .c3{ bottom: -48px; }.hb-fan .c4{ transform: translateX(6%) rotate(7deg); }}/* ============================================
     HERO — the ARVO Education Press reveal
     ============================================ *//* The AEP lockup — badge + wordmark, prominent *//* ============================================
     VIDEO STAGE — dark band
     ============================================ */.vband .container{ position: relative; }@keyframes sparkPulse{ 0%,100% { box-shadow: 0 4px 0 var(--orange-deep), 0 0 0 10px rgba(248,163,44,0.18); } 50% { box-shadow: 0 4px 0 var(--orange-deep), 0 0 0 18px rgba(248,163,44,0.07); } }/* ============================================
     GALLERY — the books, tabbed by level
     ============================================ */.gallery{ background: #fff; padding: clamp(84px, 10vw, 130px) 0; position: relative; overflow: hidden; }.gallery::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 620px 460px at 0% 0%, rgba(0,164,165,0.07), transparent 60%); pointer-events: none; }.gallery .container{ position: relative; }.gal-head{ max-width: 760px; margin-bottom: 30px; }.gal-tabs{ display: inline-flex; gap: 6px; background: var(--cream); border-radius: 999px; padding: 6px; margin-bottom: 34px; }.gal-tab{ border: 0; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); background: transparent; padding: 10px 22px; border-radius: 999px; transition: all .25s ease; display: inline-flex; align-items: center; gap: 8px; }.gal-tab .gt-count{ font-size: 10.5px; font-weight: 800; background: rgba(0,61,62,0.1); border-radius: 999px; padding: 2px 8px; }.gal-tab.active{ background: var(--teal-dark); color: var(--cream); box-shadow: 0 4px 0 #01292a; }.gal-tab.active .gt-count{ background: rgba(250,247,237,0.18); }.gal-tab:not(.active):hover{ color: var(--teal-dark); }@media (max-width: 480px){.gal-tabs{ width:100%; justify-content:space-between; padding:5px; gap:3px; }.gal-tab{ font-size:12px; padding:8px 10px; gap:5px; }.gal-tab .gt-count{ font-size:9.5px; padding:2px 6px; }}.gal-panel{ display: none; }.gal-panel.active{ display: block; }.gal-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }@media (max-width: 1020px){.gal-grid{ grid-template-columns: repeat(2, 1fr); }}@media (max-width: 640px){.gal-grid{ grid-template-columns: 1fr; }}.book{ background: var(--cream); border-radius: var(--r-md); overflow: hidden; box-shadow: 0 5px 0 rgba(0,61,62,0.08); transition: transform .3s cubic-bezier(.2,.65,.3,1), box-shadow .3s ease; opacity: 0; transform: translateY(18px); }.gal-panel.active .book{ animation: riseIn .55s cubic-bezier(.2,.65,.3,1) forwards; animation-delay: calc(var(--i) * 70ms); }.book:hover{ transform: translateY(-6px) !important; box-shadow: 0 7px 0 rgba(0,61,62,0.12), 0 18px 34px rgba(0,61,62,0.12); }.book-img{ background: linear-gradient(160deg, var(--cream-warm), var(--peach)); padding: 18px 18px 0; }.book-img img{ width: 100%; height: auto; display: block; border-radius: 10px 10px 0 0; box-shadow: 0 -6px 24px rgba(0,61,62,0.12); }.book-body{ padding: 16px 18px 18px; }.book-sub{ display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--teal); background: rgba(0,164,165,0.12); border-radius: 999px; padding: 4px 11px; margin-bottom: 9px; }.book-body h4{ font-size: 16.5px; font-weight: 800; color: var(--teal-dark); letter-spacing: -0.01em; margin-bottom: 4px; }.book-grades{ font-size: 11.5px; font-weight: 700; color: var(--orange-deep); margin-bottom: 8px; }.book-body p{ font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }@media (prefers-reduced-motion: reduce){.gal-panel.active .book{ animation: none; opacity: 1; transform: none; }}/* ============================================
     UNIVERSE — the ideology (dark band)
     ============================================ *//* ============================================
     FRIENDS × FIVE WAYS — interactive selector
     ============================================ *//* ============================================
     TEACHERS — the six tools + certification
     ============================================ */.teachers{ background: #fff; padding: clamp(84px, 10vw, 130px) 0; position: relative; overflow: hidden; }.teachers::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 560px 420px at 100% 0%, rgba(255,222,176,0.3), transparent 60%); pointer-events: none; }.teachers .container{ position: relative; }/* ============================================
     FLAGSHIP — the LMS comes with the books
     ============================================ */.flagship-band{ background: linear-gradient(165deg, var(--cream-warm) 0%, var(--peach) 100%); padding: clamp(88px, 11vw, 140px) 0; position: relative; overflow: hidden; }.flagship-band::before, .flagship-band::after{ content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; pointer-events: none; filter: blur(10px); }.flagship-band::before{ background: radial-gradient(circle, rgba(248,163,44,0.14) 0, transparent 65%); top: -160px; right: -120px; animation: glowDrift 18s ease-in-out infinite alternate; }.flagship-band::after{ background: radial-gradient(circle, rgba(0,164,165,0.1) 0, transparent 65%); bottom: -180px; left: -140px; animation: glowDrift 22s ease-in-out infinite alternate-reverse; }.plan-doors{ max-width:940px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:18px; }.plan-door{ background:#fff; border:1px solid rgba(0,61,62,.12); border-radius:20px; padding: clamp(26px,3.2vw,36px); }.plan-door .pd-who{ display:inline-block; font-size:10.5px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:10px; }.plan-door h3{ font-size: clamp(19px,2vw,23px); font-weight:900; color:var(--teal-dark); line-height:1.2; }.plan-door p{ font-size:13.5px; line-height:1.65; color:var(--ink-soft); margin:10px 0 20px; }@media (max-width: 860px){.plan-doors{ grid-template-columns:1fr; }}@keyframes glowDrift{ from { transform: translate(0,0); } to { transform: translate(-46px,34px); } }@media (prefers-reduced-motion: reduce){.flagship-band::before, .flagship-band::after{ animation: none; }}.flagship-band .container{ position: relative; z-index: 1; }.flag-head{ max-width: 780px; margin: 0 auto clamp(38px, 4.4vw, 52px); text-align: center; }.flag-head .eyebrow{ justify-content: center; }.flagship{ max-width: 940px; margin: 0 auto; background: #fff; border-radius: var(--r-lg); padding: clamp(30px, 4vw, 48px); box-shadow: 0 8px 0 var(--orange-deep), 0 26px 54px rgba(244,122,32,0.22); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 4vw, 52px); align-items: center; }@media (max-width: 900px){.flagship{ grid-template-columns: 1fr; }}.flagship h3{ font-size: clamp(23px, 2.5vw, 31px); font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; color: var(--teal-dark); margin-bottom: 14px; }.flagship h3 .accent{ color: var(--orange-deep); }.flagship > div > p{ font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); margin-bottom: 20px; }/* Plan block *//* ============================================
     CROSS-SELL — one piece of the puzzle
     ============================================ *//* ============================================
     SECTION 7 — Final CTA
     ============================================ *//* ============================================
     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;
  }.footer-mascot{ animation: ambientFloat 6s ease-in-out infinite; }@media (prefers-reduced-motion: reduce){.footer-mascot{ animation: none; }}/* Each mode section *//* The selector — small character row that picks who's featured *//* Featured character card *//* Inline SVG portraits (replacement for img during placeholder phase) *//* Decorative sparkles in the portrait *//* Staggered pulse animations for portrait decorations *//* Bubble-outline name — white fill, thick teal outline, like the original card art *//* "Personality Traits:" with dashed rules either side, like the art *//* Candy 3D pills — gradient sheen, chunky bottom shadow, bubble text *//* ===== FIVE WAYS — staged tabs (v63.3) ===== *//* ===== ARTIFACT STAGE — teachers (v63.3) ===== *//* Subject filter row (below level tabs) */.gal-subjects{ display: flex; flex-wrap: wrap; gap: 8px; margin: -18px 0 30px; }.gs-chip{ border: 0; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700;
    color: var(--ink-soft); background: var(--cream); border-radius: 999px; padding: 8px 16px;
    box-shadow: inset 0 0 0 1.5px rgba(0,61,62,.12); transition: all .22s ease; }.gs-chip:hover{ color: var(--teal-dark); box-shadow: inset 0 0 0 1.5px rgba(0,61,62,.3); }.gs-chip.active{ background: var(--teal); color: #fff; box-shadow: 0 3px 0 var(--teal-dark); }.book.gs-hide{ display: none; }/* Prominent bookshop band */.shopband{ margin-top: 34px; background: var(--teal-dark); border-radius: var(--r-lg);
    padding: clamp(24px, 3vw, 36px) clamp(24px, 3.4vw, 42px); display: flex; align-items: center;
    justify-content: space-between; gap: 22px; flex-wrap: wrap; position: relative; overflow: hidden;
    box-shadow: 0 8px 0 #01292a, 0 22px 44px rgba(0,61,62,.25); }.shopband::before{ content: ""; position: absolute; inset: 0; pointer-events: none; background:
      radial-gradient(circle at 88% 18%, rgba(248,163,44,.22) 0, transparent 50%),
      radial-gradient(circle at 6% 90%, rgba(0,164,165,.18) 0, transparent 50%); }.shopband > *{ position: relative; }.shopband h4{ color: var(--cream); font-size: clamp(18px, 1.9vw, 24px); font-weight: 800; letter-spacing: -.015em; margin-bottom: 4px; }.shopband h4 .accent{ color: var(--orange); }.shopband p{ color: rgba(250,247,237,.72); font-size: 13.5px; }.shopband .sb-mascot{ width: clamp(56px, 5.4vw, 78px); flex: 0 0 auto; }.shopband .sb-mascot img{ width: 100%; height: auto; display: block; }.shopband .sb-left{ display: flex; align-items: center; gap: 18px; }/* ============================================
     AN SLO'S JOURNEY
     ============================================ *//* the anchor SLO card *//* layout: rail left, stage right *//* audience tabs *//* stop rails *//* the stage *//* placeholder stage — reserved, intentional *//* ===== OPENS — apps & portals (ported v61) ===== *//* Every book opens into an app — device cluster *//* opens — real phones + content shell highlight *//* content-shell tabs */.st-tab{ border: none; cursor: pointer; background: transparent; color: var(--ink-soft); font-family: inherit; font-size: 12.5px; font-weight: 800; padding: 8px 16px; border-radius: 999px; transition: background .2s ease, color .2s ease; }.st-tab.active{ background: var(--teal-dark); color: var(--cream); box-shadow: 0 3px 0 rgba(0,0,0,0.18); }/* content shell pair kit (ported from lms A1 grammar) */.shell-pane{ display:none; width:100%; }.shell-pane.on{ display:block; }.brw{ background:#fff; border-radius:18px; overflow:hidden; box-shadow:none; border:1px solid rgba(0,61,62,0.14); }.brw .brw-bar{ display:flex; align-items:center; gap:6px; background:#fff; border-bottom:1px solid rgba(0,61,62,0.12); padding:9px 13px; }.brw .brw-bar span{ margin-left:8px; font-size:10.5px; font-weight:600; color:var(--teal-dark); background:rgba(0,61,62,0.08); border-radius:6px; padding:3px 34px 3px 10px; }.brw img{ display:block; width:100%; }/* suite stage — portal + phone overlap *//* ============ TEACHER TRAININGS — in the app ============ */.tt-tabs button.active{ background: var(--teal-dark); color: #fff; box-shadow: 0 3px 0 rgba(0,61,62,0.25); }/* ============ AEP TEACHER TRAINING PROGRAM — in person, distinct section ============ */.ttp-band{ padding: clamp(64px, 8vw, 100px) 0; background:
     radial-gradient(circle at 85% 15%, rgba(248,163,44,0.14) 0%, transparent 36%),
     radial-gradient(circle at 8% 80%, rgba(0,164,165,0.10) 0%, transparent 34%), var(--cream-warm); }



.tt3-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(32px,4vw,56px); align-items:start; }
.tt3-left h2{ margin-bottom:0; }
.tt3-left .tt2-tabs{ margin:22px 0 18px; }
.tt3-pane{ display:none; }
.tt3-pane.on{ display:block; animation:tt3In .3s ease; }
@keyframes tt3In{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.tt3-right{ display:flex; flex-direction:column; gap:16px; }
.tt3-right .tt2-figs{ justify-content:flex-end; }
.tt3-foot{ display:flex; align-items:center; gap:18px; border-top:1px solid rgba(0,61,62,.12); margin-top:clamp(28px,3.5vw,44px); padding-top:clamp(20px,2.5vw,28px); }
.tt3-mascot{ height:88px; width:auto; flex:none; }
.tt3-contact{ font-size:13px; color:var(--ink-soft); }
.tt3-contact a{ color:var(--teal); font-weight:600; text-decoration:none; white-space:nowrap; }
.tt3-foot .ttp-staff-link{ margin-left:auto; }
@media (max-width:860px){
  .tt3-grid{ grid-template-columns:1fr; gap:24px; }
  .tt3-right .tt2-figs{ justify-content:flex-start; }
  .tt3-foot{ flex-direction:column; align-items:center; text-align:center; gap:14px; }
  .tt3-foot .ttp-staff-link{ margin-left:0; }
}
.tt2-sub{ font-size:14.5px; line-height:1.65; color:var(--ink-soft); max-width:430px; margin-top:12px; }
.tt2-figs{ display:flex; gap:30px; }
.tt2-figs div b{ display:block; font-size:clamp(22px,2vw,28px); font-weight:800; color:var(--teal-dark); letter-spacing:-.02em; }
.tt2-figs div:nth-child(2) b{ color:var(--orange-deep); }
.tt2-figs div span{ font-size:10.5px; font-weight:600; color:var(--ink-mute); text-transform:uppercase; letter-spacing:.04em; }
.tt2-tabs{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.tt2-tab{ font-family:inherit; font-size:14px; font-weight:700; padding:11px 22px; border-radius:999px; border:none; cursor:pointer; background:rgba(0,61,62,.07); color:var(--ink-soft); transition:all .2s ease; }
.tt2-tab.on{ background:var(--orange); color:var(--teal-dark); box-shadow:0 4px 0 var(--orange-deep); }

.tt2-open{ font-style:italic; font-size:13px; color:var(--ink-mute); margin-bottom:10px; }
.tt2-body{ font-size:14.5px; line-height:1.7; color:var(--ink-soft); max-width:520px; }
.tt2-clients{ font-size:13px; color:var(--ink-soft); margin-top:12px; }
.tt2-clients b{ color:var(--teal-dark); font-weight:800; }
@media (max-width:700px){
  .tt2-tabs{ flex-wrap:nowrap; }
  .tt2-tab{ flex:1; font-size:12px; padding:10px 8px; white-space:nowrap; text-align:center; }
  .gal-tabs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .gal-tabs::-webkit-scrollbar{ display:none; }
  .gal-tab{ flex:none; white-space:nowrap; font-size:12px; }
}
@media (max-width:860px){
  .tt2-figs{ gap:22px; }
}
.tr-slider{ margin-top:auto; }
.tr-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; border-radius:12px; }
.tr-track::-webkit-scrollbar{ display:none; }
.tr-slide{ flex:0 0 100%; min-width:0; box-sizing:border-box; scroll-snap-align:center; aspect-ratio:16/9; border:1.5px dashed rgba(0,61,62,.28); border-radius:12px; background:var(--cream); display:grid; place-items:center; }.tr-slide.has-img{ border:none; background:none; }.tr-slide.has-img img{ width:100%; height:100%; object-fit:cover; border-radius:12px; display:block; }
.tr-slide img{ width:100%; height:100%; object-fit:cover; border-radius:12px; }
.tr-slide span{ font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-mute); }
.tr-dots{ display:flex; justify-content:center; gap:8px; padding:10px 0 0; }
.tr-dots i{ width:8px; height:8px; border-radius:50%; background:rgba(0,61,62,.18); cursor:pointer; border:5px solid transparent; box-sizing:content-box; background-clip:padding-box; }
.tr-dots i.on{ background:var(--orange); background-clip:padding-box; }







.ttp-ix .ix-row.last{ border-bottom:1px solid rgba(0,61,62,.18); }




.ttp-head h2 .accent{ color: var(--orange); }.ttp-staff-link{ display:inline-block; background:var(--orange); color:var(--teal-dark); border-radius:999px; padding:14px 28px; font-size:14px; font-weight:800; text-decoration:none; box-shadow:0 4px 0 var(--orange-deep); transition:transform .2s ease; }.ttp-staff-link:hover{ transform:translateY(-2px); }.ttp-staff-link:hover{ border-bottom-color: var(--orange-deep); }/* ============================================
   WHO GETS WHAT — stakeholder roll-call (v92.3)
   ============================================ */.swx{ padding: clamp(84px, 10vw, 128px) 0 clamp(64px, 8vw, 100px); }.swx-band{ background:#fff; border:1px solid rgba(0,61,62,0.14); border-radius:20px; overflow:hidden; scroll-margin-top:84px; }.swx-head{ width:100%; display:flex; align-items:center; gap:12px; padding:16px 20px; border:0; font-family:inherit; cursor:pointer; text-align:left; color:#fff; }.swx-sp .swx-head{ background: var(--teal-light); }.swx-tc .swx-head{ background: var(--orange-deep); }.swx-ad .swx-head{ background: var(--teal); }.swx-ow .swx-head{ background: var(--teal-dark); }.swx-head:focus-visible{ outline:3px solid var(--orange); outline-offset:-3px; }.swx-band.open .swx-arrow{ transform:rotate(180deg); background:#fff; color:var(--teal-dark); border-color:#fff; }.swx-band.open .swx-chips{ display:none; }.swx-band.open .swx-body{ display:block; }@media (max-width: 860px){.swx-head{ padding:15px 16px; }}/* v93.3: hero stat panel (Option A, approved) */.hb-sub .aud{color:var(--orange-deep);font-weight:700} @media (max-width:480px){  .hb-statstrip .st{border-right:none;padding:2px 0} .hb-statstrip .st + .st{border-top:1px solid rgba(0,61,62,.10);padding-top:12px} }.hb-statstrip .st{ flex:1 1 150px; padding: 4px clamp(10px,1.6vw,26px); border-right:1px solid rgba(0,61,62,.10); }.hb-statstrip .st:last-child{ border-right:none; }.hb-statstrip .st:nth-child(even) b{ color:var(--orange-deep); }@media(max-width:640px){.hb-statstrip .st{ flex:1 1 44%; border-right:none; padding:10px 6px; } }/* v93.3: included-with-adoption band (Option C, approved) *//* v93.4: wide LMS card with portal+app composite *//* v93.5: included-with-adoption — shelf build (approved V2) */.shelfsec{ background:var(--teal-dark); overflow:hidden; padding: clamp(80px,10vw,120px) 0; }.shelfsec .sh-head{ text-align:center; max-width:680px; margin:0 auto 60px; }.shelfsec .sh-eyebrow{ display:inline-block; font-size:13px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); margin-bottom:14px; }.shelfsec .sh-h{ font-size: clamp(30px,4vw,50px); font-weight:900; letter-spacing:-1px; line-height:1.08; color:#fff; margin:0; }.shelfsec .sh-h .acc{ color:var(--orange); }.shelfsec .sh-case{ max-width:1020px; margin:0 auto; }.shelfsec .sh-row{ position:relative; }.shelfsec .sh-items{ position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:center; gap:14px; padding:0 10px; }.shelfsec .sh-cap{ position:absolute; left:14px; top:-8px; font-size:11.5px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); }.shelfsec .sh-plk{ position:relative; z-index:1; height:22px; background:linear-gradient(180deg,var(--orange) 0 62%,var(--orange-deep) 62% 100%); border-radius:7px; }.shelfsec .sh-books .sh-items{ min-height:156px; }.shelfsec .sh-books img{ height:140px; border-radius:4px; border:1px solid rgba(0,42,43,.55); display:block; }.shelfsec .sh-lms{ margin-top:56px; }.shelfsec .sh-lms .sh-items{ min-height:346px; gap:30px; }.shelfsec .sh-glow{ z-index:0; position:absolute; left:50%; bottom:16px; transform:translateX(-50%); width:92%; height:200%; background:radial-gradient(ellipse at center bottom,rgba(248,163,44,.22) 0%,rgba(0,164,165,.12) 50%,transparent 72%); pointer-events:none; }.shelfsec .sh-freechip{ position:absolute; left:50%; top:-18px; transform:translateX(-50%); z-index:3; display:inline-flex; background:var(--orange-deep); color:#fff; font-size:12.5px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; border-radius:100px; padding:9px 18px; white-space:nowrap; }.shelfsec .sh-brw{ background:#fff; border-radius:16px; overflow:hidden; border:1px solid rgba(0,61,62,.2); width: clamp(480px,52%,640px); }.shelfsec .sh-brw .bar{ display:flex; align-items:center; gap:6px; background:var(--cream); border-bottom:1px solid rgba(0,61,62,.12); padding:9px 13px; }.shelfsec .sh-brw .bar i{ width:9px; height:9px; border-radius:50%; }.shelfsec .sh-brw .bar i:nth-child(1){ background:var(--orange); }.shelfsec .sh-brw .bar i:nth-child(2){ background:#00a4a5; }.shelfsec .sh-brw .bar i:nth-child(3){ background:#58b784; }.shelfsec .sh-brw .bar span{ margin-left:8px; font-size:10.5px; font-weight:600; color:var(--teal-dark); background:rgba(0,61,62,.07); border-radius:6px; padding:3px 34px 3px 10px; }.shelfsec .sh-brw img{ display:block; width:100%; }.shelfsec .sh-phone{ width: clamp(170px,19%,216px); border-radius:18px; padding:0; background:#fff; border:1px solid rgba(0,61,62,.2); overflow:hidden; }.shelfsec .sh-phone img{ display:block; width:100%; }.shelfsec .sh-stats{ margin-top:52px; }.shelfsec .sh-stats .sh-items{ min-height:140px; }.shelfsec .sh-end{ height:104px; min-width:150px; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:10px 14px; }.shelfsec .sh-end.or{ background:var(--orange-deep); }.shelfsec .sh-end.cr{ background:var(--cream); }.shelfsec .sh-end b{ font-size:22px; font-weight:900; color:#fff; }.shelfsec .sh-end.cr b{ color:var(--teal-dark); }.shelfsec .sh-end span{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:rgba(255,255,255,.85); margin-top:2px; }.shelfsec .sh-end.cr span{ color:var(--ink-mute); }@media (max-width: 860px){.shelfsec .sh-books .sh-items{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding-bottom:6px; scrollbar-width:none; }.shelfsec .sh-books .sh-items::-webkit-scrollbar{ display:none; }.shelfsec .sh-lms .sh-items{ flex-direction:column; align-items:center; min-height:0; gap:22px; padding-top:56px; }.shelfsec .sh-brw{ width:100%; max-width:520px; }.shelfsec .sh-phone{ width: clamp(180px,52%,220px); }.shelfsec .sh-freechip{ white-space:normal; text-align:center; max-width:88%; }.shelfsec .sh-stats .sh-items{ flex-wrap:wrap; min-height:0; gap:10px; padding:22px 4px 10px; }.shelfsec .sh-end{ flex:1 1 44%; min-width:0; height:92px; }
}/* v93.14: shelf settle animation */
.shelfsec .sh-books .sh-items img{ opacity:0; transform:translateY(24px); transition:opacity .5s cubic-bezier(.2,.65,.3,1), transform .5s cubic-bezier(.2,.65,.3,1); }
.shelfsec .sh-books.is-in .sh-items img{ opacity:1; transform:none; }
.shelfsec .sh-books .sh-items img:nth-child(1){ transition-delay:.05s; }.shelfsec .sh-books .sh-items img:nth-child(2){ transition-delay:.11s; }.shelfsec .sh-books .sh-items img:nth-child(3){ transition-delay:.17s; }.shelfsec .sh-books .sh-items img:nth-child(4){ transition-delay:.23s; }.shelfsec .sh-books .sh-items img:nth-child(5){ transition-delay:.29s; }.shelfsec .sh-books .sh-items img:nth-child(6){ transition-delay:.35s; }.shelfsec .sh-books .sh-items img:nth-child(7){ transition-delay:.41s; }
.shelfsec .sh-lms .sh-brw, .shelfsec .sh-lms .sh-phone{ opacity:0; transform:translateY(28px); transition:opacity .6s cubic-bezier(.2,.65,.3,1), transform .6s cubic-bezier(.2,.65,.3,1); }
.shelfsec .sh-lms.is-in .sh-brw, .shelfsec .sh-lms.is-in .sh-phone{ opacity:1; transform:none; }
.shelfsec .sh-lms .sh-phone{ transition-delay:.12s; }
.shelfsec .sh-lms .sh-freechip{ opacity:0; transform:translateX(-50%) translateY(8px) scale(.94); transition:opacity .45s cubic-bezier(.25,1.1,.35,1) .3s, transform .45s cubic-bezier(.25,1.1,.35,1) .3s; }
.shelfsec .sh-lms.is-in .sh-freechip{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
.shelfsec .sh-stats .sh-items .sh-end{ opacity:0; transform:translateY(18px) scale(.95); transition:opacity .45s cubic-bezier(.25,1.1,.35,1), transform .45s cubic-bezier(.25,1.1,.35,1); }
.shelfsec .sh-stats.is-in .sh-items .sh-end{ opacity:1; transform:none; }
.shelfsec .sh-stats .sh-items .sh-end:nth-child(1){ transition-delay:.05s; }.shelfsec .sh-stats .sh-items .sh-end:nth-child(2){ transition-delay:.13s; }.shelfsec .sh-stats .sh-items .sh-end:nth-child(3){ transition-delay:.21s; }.shelfsec .sh-stats .sh-items .sh-end:nth-child(4){ transition-delay:.29s; }.shelfsec .sh-stats .sh-items .sh-end:nth-child(5){ transition-delay:.37s; }
@media (prefers-reduced-motion: reduce){ .shelfsec .sh-books .sh-items img, .shelfsec .sh-lms .sh-brw, .shelfsec .sh-lms .sh-phone, .shelfsec .sh-lms .sh-freechip, .shelfsec .sh-stats .sh-items .sh-end{ opacity:1; transform:none; transition:none; } .shelfsec .sh-lms .sh-freechip{ transform:translateX(-50%); } }
/* v93.6: audiences section — tabbed features-with-examples (Option B) + eight trainings */.audsec{ padding: clamp(80px,10vw,120px) 0; background:var(--cream); overflow:hidden; }.audsec .au-head{ text-align:center; max-width:720px; margin:0 auto 36px; }.audsec .au-eyebrow{ display:inline-block; font-size:13px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--orange-deep); margin-bottom:14px; }.audsec .au-h{ font-size:clamp(28px,3.8vw,46px); font-weight:900; letter-spacing:-1px; line-height:1.1; color:var(--teal-dark); margin:0; }.audsec .au-h .acc{ color:var(--orange-deep); }.audsec .au-sub{ font-size:15.5px; line-height:1.65; color:var(--ink-soft); margin-top:12px; }.audsec .au-toggle{ display:flex; justify-content:center; gap:0; margin:0 auto 44px; background:#fff; border:1px solid rgba(0,61,62,.15); border-radius:100px; padding:6px; width:max-content; }.audsec .au-toggle button{ font-family:inherit; font-size:15px; font-weight:800; color:var(--teal-dark); background:transparent; border:none; border-radius:100px; padding:13px 34px; cursor:pointer; }.audsec .au-toggle button.on{ background:var(--teal-dark); color:#fff; }.audsec .au-toggle button.on em{ font-style:normal; color:var(--orange); }.audsec .au-panel{ display:none; }.audsec .au-panel.on{ display:block; }.audsec .au-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.audsec .au-card{ background:#fff; border:1px solid rgba(0,61,62,.12); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; }.audsec .au-media{ height:190px; position:relative; background:var(--teal-dark); }.audsec .au-media iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }.audsec .au-media.is-img{ background:#fff; border-bottom:1px solid rgba(0,61,62,.1); }.audsec .au-media.is-img img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }.audsec .au-tx{ padding:16px 18px 18px; }.audsec .au-tx b{ display:block; font-size:15.5px; font-weight:900; color:var(--teal-dark); }.audsec .au-tx p{ font-size:12.5px; font-weight:600; color:var(--ink-soft); line-height:1.5; margin-top:5px; }.audsec .au-trblock{ margin-top:46px; background:var(--teal-dark); border-radius:26px; padding:36px 38px; }.audsec .au-trblock .tr-h{ color:#fff; font-size:20px; font-weight:900; letter-spacing:-.3px; }.audsec .au-trblock .tr-h em{ font-style:normal; color:var(--orange); }.audsec .au-trblock .tr-sub{ color:rgba(255,255,255,.7); font-size:13.5px; margin-top:6px; max-width:640px; line-height:1.55; }.audsec .au-trgrid{ counter-reset:autr; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:22px; }.audsec .au-trgrid span{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff; font-size:12.5px; font-weight:700; border-radius:12px; padding:13px 14px; line-height:1.4; }.audsec .au-trgrid span::before{ content:counter(autr, decimal-leading-zero) "  "; counter-increment:autr; color:var(--orange); font-weight:900; }.audsec .tr-badge{ margin-top:18px; font-size:13px; font-weight:800; color:rgba(255,255,255,.85); }.audsec .tr-badge b{ color:var(--orange); }.audsec .au-quote{ margin-top:20px; background:#fff; border:1px solid rgba(0,61,62,.12); border-radius:18px; padding:22px 26px; max-width:720px; margin-left:auto; margin-right:auto; }.audsec .au-quote p{ font-size:13.5px; line-height:1.65; color:var(--ink); font-style:italic; }.audsec .auq-who{ display:flex; align-items:center; gap:12px; margin-top:14px; }.audsec .auq-av{ width:38px; height:38px; border-radius:50%; background:var(--teal); color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; }.audsec .auq-who b{ display:block; font-size:13px; color:var(--teal-dark); }.audsec .auq-who div span{ display:block; font-size:11px; color:var(--ink-mute); }@media (max-width: 900px){.audsec .au-grid{ grid-template-columns:repeat(2,1fr); }.audsec .au-trgrid{ grid-template-columns:repeat(2,1fr); }
}@media (max-width: 560px){.audsec .au-grid{ grid-template-columns:1fr; }.audsec .au-toggle button{ padding:12px 22px; font-size:14px; }.audsec .au-trgrid{ grid-template-columns:1fr; }.audsec .au-trblock{ padding:26px 22px; }
}/* ============================================
   IDENTITY — What is ARVO Education Press (M2, v93.7)
   ============================================ */.idsec{ background: linear-gradient(165deg, var(--cream-warm), var(--peach)); padding: clamp(84px, 10vw, 124px) 0; overflow: hidden; }.id-grid{ display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 4.5vw, 56px); align-items: center; }.idsec .eyebrow{ color: var(--orange-deep); margin-bottom: 18px; }.id-h{ font-size: clamp(32px, 4.4vw, 56px); font-weight: 900; letter-spacing: -1.6px; line-height: 1.08; color: var(--teal-dark); }.id-h em{ font-style: normal; color: var(--orange-deep); }.id-lede{ margin-top: 22px; max-width: 620px; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.75; color: rgba(0,61,62,.7); font-weight: 500; }.id-lines{ margin-top: clamp(26px, 3.4vw, 38px); max-width: 640px; }.id-ln{ display: flex; gap: 26px; align-items: baseline; padding: 20px 0; border-top: 1px solid rgba(0,61,62,.15); }.id-ln:last-child{ border-bottom: 1px solid rgba(0,61,62,.15); }.id-ln b{ flex: 0 0 clamp(120px, 14vw, 200px); font-size: 14px; font-weight: 900; color: var(--teal-dark); letter-spacing: .02em; }.id-ln span{ font-size: 15px; font-weight: 600; color: rgba(0,61,62,.7); line-height: 1.6; }.id-img img{ width: 112%; margin-left: -6%; display: block; }@media (max-width: 940px){.id-grid{ grid-template-columns: 1fr; gap: 10px; }.id-img{ order: 2; }.id-img img{ width: 104%; margin-left: -2%; }.id-ln{ flex-direction: column; gap: 6px; padding: 16px 0; }.id-ln b{ flex: none; }
}

/* v93.28b · publications edits */
.final-cta-inner .eyebrow{margin-bottom:18px}



.ttp-band{background:#fdf3e3}










.au-media.is-img{cursor:zoom-in}
.au-expand{position:absolute;right:10px;bottom:10px;font:600 11px/1 Poppins;letter-spacing:.06em;text-transform:uppercase;color:#003d3e;background:#fff;border:1px solid rgba(0,61,62,.18);border-radius:999px;padding:7px 11px;cursor:pointer}
/* v93.74 — backdrop raised from .82 and blurred: a Vimeo card behind read as a hard dark rectangle through the scrim. */
.au-lb{position:fixed;inset:0;background:rgba(0,36,37,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;z-index:1000;padding:24px}
.au-lb.on{display:flex}
.au-lb img{max-width:min(1100px,96vw);max-height:92vh;width:auto;height:auto;border-radius:12px;background:#fff}
.au-lb-x{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;background:#fff;border:0;font:700 18px/42px Poppins;color:#003d3e;cursor:pointer}
/* v93.73 — document pager. Only shown when data-full carries >1 page. */
.au-lb-stage{position:relative;display:inline-flex;max-width:100%}
.au-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:#fff;border:0;font:700 21px/44px Poppins;color:#003d3e;cursor:pointer;display:none;padding:0}
.au-lb.multi .au-lb-nav{display:block}
.au-lb-nav.prev{left:-62px}.au-lb-nav.next{right:-62px}
.au-lb-nav[disabled]{opacity:.3;cursor:default}
.au-lb-count{position:absolute;bottom:-46px;left:50%;transform:translateX(-50%);background:#fff;border-radius:999px;padding:8px 15px;font:700 12px/1 Poppins;letter-spacing:.1em;color:#003d3e;display:none;white-space:nowrap}
.au-lb.multi .au-lb-count{display:block}
.au-lb.multi img{max-width:min(1000px,74vw);max-height:80vh}
@media(max-width:820px){.au-lb.multi img{max-width:min(1000px,86vw);max-height:76vh}.au-lb-nav{top:auto;bottom:-56px;transform:none;width:40px;height:40px;font:700 19px/40px Poppins}.au-lb-nav.prev{left:calc(50% - 78px)}.au-lb-nav.next{right:calc(50% - 78px)}.au-lb-count{bottom:-51px}}

/* v93.28c · LMS-included band: portal and phone same height; chip static on mobile */
.shelfsec .sh-lms .sh-items{ align-items:stretch; height:400px; min-height:0; gap:26px; }
.shelfsec .sh-brw{ display:flex; flex-direction:column; height:100%; width:auto; flex:0 1 640px; max-width:640px; }
.shelfsec .sh-brw img{ flex:1; min-height:0; width:100%; height:100%; object-fit:cover; object-position:top left; }
.shelfsec .sh-phone{ height:100%; width:auto; aspect-ratio:780/1592; flex:0 0 auto; }
.shelfsec .sh-phone img{ width:100%; height:100%; object-fit:cover; object-position:top; }
@media (max-width: 860px){
  .shelfsec .sh-lms .sh-freechip{ position:static; transform:none; display:block; width:fit-content; max-width:100%; margin:0 auto 16px; white-space:normal; text-align:center; border-radius:12px; padding:9px 14px; font-size:11px; line-height:1.4; }
  .shelfsec .sh-lms.is-in .sh-freechip{ transform:none; }
  .shelfsec .sh-lms .sh-items{ flex-direction:row; align-items:stretch; justify-content:center; height:236px; gap:12px; padding-top:0; }
  .shelfsec .sh-brw{ flex:1 1 auto; max-width:none; min-width:0; }
  .shelfsec .sh-phone{ width:auto; flex:0 0 auto; }
}
@media (max-width: 400px){ .shelfsec .sh-lms .sh-items{ height:210px; } }

/* v93.28d · digital library tiles: one colour */
.shelfsec .sh-end, .shelfsec .sh-end.or{ background:var(--cream); }
.shelfsec .sh-end b, .shelfsec .sh-end.or b{ color:var(--teal-dark); }
.shelfsec .sh-end span, .shelfsec .sh-end.or span{ color:var(--ink-mute); }
@media (max-width: 860px){ .shelfsec .sh-end:last-child{ flex:0 1 44%; } }

/* v93.28g · eight trainings block */
.au-trblock{ display:grid; grid-template-columns:1fr 1.15fr; gap:40px; align-items:start; padding:40px 42px; }
.tr-kick{ display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); margin-bottom:12px; }
.au-trblock .tr-h{ font-size:clamp(22px,2.2vw,30px); font-weight:700; letter-spacing:-.4px; line-height:1.15; }
.au-trblock .tr-sub{ margin-top:14px; font-size:14px; }
.tr-list{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(191,227,227,.18); }
.tr-list li{ display:grid; grid-template-columns:44px 1fr; gap:12px; align-items:baseline; padding:13px 0; border-bottom:1px solid rgba(191,227,227,.18); }
.tr-list .tn{ font-size:13px; font-weight:700; color:var(--orange); letter-spacing:.06em; }
.tr-list .tt{ font-size:15px; font-weight:600; color:#fff; line-height:1.35; }
@media (max-width: 900px){ .au-trblock{ grid-template-columns:1fr; gap:26px; padding:28px 22px; } }

/* v93.28h · matrix heading on one line at desktop */
.mxs .mxh{ max-width:1100px; }
.mxs h2{ font-size:clamp(26px,3.4vw,44px); }
@media (min-width: 1100px){ .mxs h2{ white-space:nowrap; } }

/* v93.29c · LMS-included chip sits above the frames, never over them (desktop too) */
.shelfsec .sh-lms .sh-freechip{ position:static; transform:none; display:block; width:fit-content; margin:0 auto 18px; }
.shelfsec .sh-lms.is-in .sh-freechip{ transform:none; }

/* v93.20 master-matrix swx */
.mxs{padding:clamp(56px,6.5vw,92px) 24px;background:var(--cream-warm,#fdf3e3);}
.mxs .mxh{text-align:center;max-width:780px;margin:0 auto clamp(24px,3vw,38px);}
.mxs .mxk{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#007e7f;margin-bottom:14px;}
.mxs .mxk::before{content:"";width:26px;height:3px;background:#f8a32c;border-radius:2px;}
.mxs h2{font-size:clamp(26px,3.8vw,46px);font-weight:900;letter-spacing:-.025em;line-height:1.06;color:#003d3e;}
.mxs h2 .mxpop{color:#f8a32c;}
.mxs .mxsub{font-size:clamp(13px,1.45vw,16px);color:rgba(0,61,62,.7);font-weight:500;margin-top:12px;}
.mx{max-width:980px;margin:0 auto;background:#fff;border:1px solid rgba(0,61,62,.12);border-radius:22px;overflow:hidden;}
.mx-hdr{display:grid;grid-template-columns:2fr repeat(2,1fr);background:#003d3e;}
.mx-hdr .c{color:#fff;font-weight:900;font-size:12px;text-align:center;padding:14px 8px;display:flex;flex-direction:column;gap:4px;align-items:center;}
.mx-hdr .c i{width:22px;height:5px;border-radius:3px;font-style:normal;}
.mx-hdr .c:first-child{align-items:flex-start;padding-left:18px;font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.6);}
.mx .i-sp{background:#00a4a5;} .mx .i-t{background:#f47a20;} .mx .i-a{background:#4cc9ca;}
.mx-grp{display:flex;align-items:center;justify-content:space-between;background:#fdf3e3;border-bottom:1px solid rgba(0,61,62,.10);width:100%;border-left:none;border-right:none;border-top:none;font-family:inherit;cursor:pointer;}
.mx-grp .g{font-size:11.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#003d3e;padding:14px 18px;text-align:left;}
.mx-grp .n{font-size:11px;font-weight:800;color:rgba(0,61,62,.55);padding-right:16px;display:flex;align-items:center;gap:8px;}
.mx-grp .chev{width:24px;height:24px;border-radius:50%;background:#003d3e;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;}
.mx-body[hidden]{display:none;}
.mx-row{display:grid;grid-template-columns:2fr repeat(2,1fr);align-items:center;border-bottom:1px solid rgba(0,61,62,.07);}
.mx-row:last-child{border-bottom:none;}
.mx-row .f{padding:11px 18px;font-size:12.5px;font-weight:800;color:#003d3e;}
.mx-row .d{text-align:center;}
.mx-row .d i{display:inline-block;width:10px;height:10px;border-radius:50%;font-style:normal;}
.mx-row .d .no{display:inline-block;width:14px;height:2px;border-radius:2px;background:rgba(0,61,62,.12);}
.mx .d-sp{background:#00a4a5;} .mx .d-t{background:#f47a20;} .mx .d-a{background:#007e7f;}
@media (max-width:760px){
.mx-hdr .c{font-size:10px;padding:12px 4px;}
.mx-row .f{font-size:11.5px;padding:10px 12px;}
}
/* ===== 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 */
.au-card, .ttp-card, .id-ln, .plan-door, .hd-card, .dv-card, .pp-card, .fm-card, .plan-card, .c1-card, .sd-chip, .b-chip{ transition:transform var(--ix-t) var(--ix-ease), border-color var(--ix-t) var(--ix-ease), background-color var(--ix-t) var(--ix-ease); }
/* lift only what is clickable: expandable cards, and cards that contain a link */
.au-card:hover, .plan-door:has(a):hover, .hd-card:has(a):hover, .dv-card:has(a):hover, .pp-card:has(a):hover, .fm-card:has(a):hover, .plan-card:has(a):hover, .c1-card:has(a):hover{ transform:translateY(-3px); border-color:rgba(0,61,62,.3); }
/* image cards: gentle zoom on the picture only */
.au-media.is-img img{ transition:transform .35s var(--ix-ease); }
.au-card:hover .au-media.is-img img{ transform:scale(1.03); }
.au-expand{ transition:background-color var(--ix-t) var(--ix-ease), color var(--ix-t) var(--ix-ease); }
.au-card:hover .au-expand{ background:var(--orange); border-color:var(--orange); }
/* matrix rows and group headers */
.mx-row{ transition:background-color var(--ix-t) var(--ix-ease); }
.mx-row:hover{ background:rgba(248,163,44,.08); }
.mx-grp{ transition:background-color var(--ix-t) var(--ix-ease); }
.mx-grp:hover{ background:#fbe9cf; }
.mx-grp .chev{ transition:transform var(--ix-t) var(--ix-ease); }
.mx-grp:hover .chev{ transform:translateY(1px); }
/* tabs / toggles */
.au-toggle button{ transition:background-color var(--ix-t) var(--ix-ease), color var(--ix-t) var(--ix-ease); }
.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; } .au-card:hover .au-media.is-img img{ transform:none; } }


.hx1-kick{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:14px;}
.hx1-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4vw,64px);align-items:center;padding-top:clamp(30px,4vw,60px);padding-bottom:clamp(40px,5vw,80px);}
.hx1-copy{text-align:left;}
.hero-b.hx1 h1{font-size:clamp(42px,4.6vw,68px);}
.hx1-sub{font-size:clamp(15px,1.5vw,17.5px);font-weight:500;color:var(--ink-soft);line-height:1.65;margin:18px 0 30px;max-width:480px;}
.hero-b.hx1 .hb-ctas{justify-content:flex-start;margin-bottom:26px;}

/* v93.71 — hero figure row: figure large, qualifier small */
.hx1-figs{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline;}
.hx1-figs span{display:flex;align-items:baseline;gap:5px;}
.hx1-figs b{font-size:18.5px;font-weight:900;color:var(--teal-dark);letter-spacing:-.02em;white-space:nowrap;}
.hx1-figs em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--ink-soft);white-space:nowrap;}
@media (max-width:1024px){.hx1-figs{justify-content:center;}}
@media (max-width:560px){.hx1-figs{gap:10px;}.hx1-figs b{font-size:17px;}.hx1-figs em{font-size:11px;}}
.hx1-stage{position:relative;}






@media (max-width:1024px){
.hx1-grid{grid-template-columns:1fr;gap:34px;}
.hx1-copy{text-align:center;}
.hx1-sub{margin:18px auto 28px;}
.hero-b.hx1 .hb-ctas{justify-content:center;}


}



/* v93.77 — publications on hx1. The fan was built to spread from the centre of
   a full-bleed section (+/-236% of a card width); inside the right column that
   overflows by ~240px at 1440. Position is driven by --cfx, which the coverRise
   animation reads: override the variable, never `transform`, or the declaration
   loses to the running animation and the covers land in the wrong place. */
.hx1 .aep-logo-hero{ margin: 0 0 16px; }
.hx1-stage.is-fan{ display:flex; align-items:center; justify-content:center; }
.hx1 .hb-fan{ position:relative; width:100%; height: clamp(240px, 27vw, 360px); margin-top:0; }
.hx1 .hb-fan .cf{ position:absolute; bottom:12%; left:50%; width: clamp(104px, 11vw, 152px); }
.hx1 .hb-fan .c1,.hx1 .hb-fan.is-in .c1{ --cfx:-174%; --cfr:-9deg; }
.hx1 .hb-fan .c2,.hx1 .hb-fan.is-in .c2{ --cfx:-112%; --cfr:-4.5deg; }
.hx1 .hb-fan .c3,.hx1 .hb-fan.is-in .c3{ --cfx:-50%;  --cfr:0deg; }
.hx1 .hb-fan .c4,.hx1 .hb-fan.is-in .c4{ --cfx:12%;   --cfr:4.5deg; }
.hx1 .hb-fan .c5,.hx1 .hb-fan.is-in .c5{ --cfx:74%;   --cfr:9deg; }
.hx1 .hb-fan .cf{ transform: translateX(var(--cfx,-50%)) rotate(var(--cfr,0deg)); }
@media (max-width:1024px){
  .hx1 .aep-logo-hero{ margin: 0 auto 16px; }
  .hx1 .hb-fan{ height: clamp(230px, 34vw, 310px); }
  /* the old centred hero hid c1/c5 under 980px because the fan sat beneath a
     full-width copy block. Stacked hx1 gives the fan the whole width, so all
     five covers can stay. */
  .hx1 .hb-fan .c1, .hx1 .hb-fan .c5{ display: block; }
}
@media (max-width:560px){
  .hx1 .hb-fan{ height: 208px; }
  .hx1 .hb-fan .cf{ width: clamp(82px, 21vw, 106px); }
  .hx1 .hb-fan .c1,.hx1 .hb-fan.is-in .c1{ --cfx:-160%; }
  .hx1 .hb-fan .c2,.hx1 .hb-fan.is-in .c2{ --cfx:-105%; }
  .hx1 .hb-fan .c4,.hx1 .hb-fan.is-in .c4{ --cfx:5%; }
  .hx1 .hb-fan .c5,.hx1 .hb-fan.is-in .c5{ --cfx:60%; }
}

/* 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%; }
}