/* ARVO — cms 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 *//* 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 ambientFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }@media (prefers-reduced-motion: reduce) {.rv{ opacity: 1; transform: none; transition: none; }.rv .eyebrow::before{ transform: none; transition: none; }}/* ============================================
     SECTION 7 — Final CTA
     ============================================ */.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 .btn-ghost:hover{
    background: var(--teal-dark);
    color: #fff;
  }/* ============================================
     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; }}/* ============================================
     LMS HERO — the ARVO Pulse reveal
     ============================================ */@keyframes pulseDot { 0%,100%{ transform:scale(1); opacity:1;} 50%{ transform:scale(1.45); opacity:.6;} }/* Live lesson card — the dark candy stage */@keyframes ecgDraw { 0% { stroke-dashoffset: 900; } 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }/* ============================================
     DIAGNOSIS — dark turn, the parts problem
     ============================================ *//* ============================================
     RHYTHM — the six-beat relay loop
     ============================================ */@keyframes relayRun { 0%{ left:4%; } 15%{ left:20%; } 30%{ left:36%; } 48%{ left:52%; } 65%{ left:68%; } 82%{ left:84%; } 95%,100%{ left:92%; opacity:1; } }/* ============================================
     ENGINE ROOM — generators + calendar
     ============================================ *//* ============================================
     FOUR VIEWS — intro strip
     ============================================ *//* Shared view section chrome *//* Teachers — classroom card + app/portal duo *//* Students — progress stage *//* Parents — three moments *//* Leaders — the Console *//* ============================================
     PAYOFF — two doors + the plan (peach)
     ============================================ */.payoff{ background: linear-gradient(165deg, var(--cream-warm) 0%, var(--peach) 100%); padding: clamp(88px, 11vw, 140px) 0; position:relative; overflow:hidden; }.doors{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: clamp(36px, 4.5vw, 54px); }.door{ background: #fff; border-radius: var(--r-lg); padding: clamp(26px, 3vw, 38px); box-shadow: 0 8px 0 rgba(0,61,62,0.14); position:relative; }.door .pill-tag{ margin-bottom: 16px; }.door.d1 .pill-tag{ background: rgba(248,163,44,0.16); color: var(--orange-deep); }.door.d2 .pill-tag{ background: rgba(0,126,127,0.09); color: var(--teal); }.door h3{ font-size: clamp(21px, 2.2vw, 29px); font-weight: 800; letter-spacing: -0.015em; line-height: 1.15; color: var(--teal-dark); margin-bottom: 12px; }.door p{ font-size: 14.5px; color: var(--ink-soft); line-height: 1.65; margin-bottom: 16px; }.door .best-for{ font-size: 12.5px; color: var(--ink); background: var(--cream); border-radius: 12px; padding: 11px 14px; }.door .best-for b{ color: var(--teal-dark); }.door .bill-chip{ font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-dark); background: var(--peach); border-radius: 999px; padding: 6px 13px; }.included{ margin-bottom: clamp(36px, 4.5vw, 54px); }.included .con-label{ color: rgba(0,61,62,0.55); }.included .tick-list{ grid-template-columns: repeat(3, 1fr); gap: 12px 22px; }/* ============================================
     XSELL — the exam handshake
     ============================================ *//* Placeholder slots — honest stand-ins until real product screens arrive *//* ============================================
     TAGGED — the spine thesis (dark)
     ============================================ */.tagged .lead{ color: rgba(250,247,237,0.72); max-width: 680px; }.tag-pills{ display:flex; flex-wrap:wrap; gap: 7px; }/* BEND — bespoke fit rows */.b-chip{ font-size:10.5px; font-weight:800; letter-spacing:0.04em; color:var(--teal-dark); background:rgba(0,126,127,0.10); border-radius:999px; padding:6px 12px; }.b-chip.off{ background: transparent; border: 2px dashed rgba(0,61,62,0.22); color: var(--ink-mute); text-decoration: line-through; }/* candy bricks (split/merge) *//* content faders (choose) — interactive */.check{ display:flex; align-items:center; gap:12px; cursor:pointer; border:0; background:none; font-family:inherit; padding:0; text-align:left; }.check .cbox{ width:30px; height:30px; flex:none; border-radius:10px; background:#fff; box-shadow: 0 4px 0 rgba(0,0,0,0.25); display:grid; place-items:center; font-size:15px; font-weight:900; color:transparent; transition: background .15s; }.check.on .cbox{ background: var(--orange); color: var(--teal-dark); box-shadow: 0 4px 0 var(--orange-deep); }.check .clab{ font-size:14px; font-weight:800; color: var(--cream); }.check:not(.on) .clab{ color: rgba(250,247,237,0.45); text-decoration: line-through; }/* ============================================
     STAR FEATURES — rail & stage
     ============================================ */.star-feats{ background: var(--cream-warm); padding: clamp(80px, 10vw, 126px) 0; position: relative; overflow: clip; }.star-feats::before{ content:""; position:absolute; top:-170px; right:-150px; width:520px; height:520px; border-radius:50%;
     background: radial-gradient(circle, rgba(248,163,44,0.12) 0%, transparent 65%); pointer-events:none; }.sf-head{ max-width: 720px; margin-bottom: clamp(38px, 4.5vw, 56px); position:relative; z-index:1; }.sf-rail{ display: grid; gap: 12px; position: sticky; top: 96px; }.sf-stop{ display: flex; gap: 14px; align-items: flex-start; text-align: left; font-family: inherit; border: 0; cursor: pointer;
     background: #fff; border-radius: 18px; padding: 15px 17px; box-shadow: 0 6px 0 rgba(0,61,62,0.12); transition: transform .18s ease; }.sf-stop:hover{ transform: translateY(-2px); }.sf-stop .n{ width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--cream); color: var(--teal-dark);
     display: grid; place-items: center; font-size: 12px; font-weight: 900; }.sf-stop b{ display: block; font-size: 15px; font-weight: 800; color: var(--teal-dark); margin-bottom: 3px; }.sf-stop span:not(.n){ font-size: 12px; color: var(--ink-mute); line-height: 1.45; display: block; }.sf-stop.active{ background: var(--teal-dark); box-shadow: 0 6px 0 #002425; }.sf-stop.active .n{ background: var(--orange); }.sf-stop.active b{ color: var(--cream); }.sf-stop.active span:not(.n){ color: rgba(250,247,237,0.65); }.sf-stage{ min-width: 0; }.sf-rail .sf-mascot{ width: clamp(130px, 12vw, 185px); justify-self: center; margin-top: clamp(18px, 2.5vw, 34px); animation: ambientFloat 5s ease-in-out infinite; }@media (prefers-reduced-motion: reduce){.sf-rail .sf-mascot{ animation: none; }}.sf-panel[hidden]{ display: none !important; }.sf-copy{ margin-bottom: 22px; }.sf-copy h3{ font-size: clamp(22px, 2.3vw, 32px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.1; color: var(--teal-dark); margin-bottom: 12px; }.sf-copy h3 .accent{ color: var(--orange); }.sf-copy p{ font-size: 15px; color: var(--ink-soft); line-height: 1.65; margin-bottom: 14px; max-width: 560px; }.sf-copy .tick-list{ max-width: 520px; }@media (max-width: 980px) {.sf-rail{ position: static; display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }.sf-stop{ flex: 0 0 auto; min-width: 210px; }.sf-rail .sf-mascot{ display: none; }}/* ============================================
     MOTION POLISH — industry-standard micro-interactions
     ============================================ */@media (prefers-reduced-motion: no-preference) {/* panel & state switches: fade-rise */@keyframes panelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }.sf-panel.enter{ animation: panelIn .34s cubic-bezier(.2,.7,.25,1) both; }/* rail stops: smooth state change */.sf-stop{ transition: transform .18s ease, background-color .22s ease, box-shadow .22s ease; }.sf-stop b, .sf-stop span:not(.n), .sf-stop .n{ transition: color .22s ease, background-color .22s ease; }/* checkbox tick pop */@keyframes tickPop { 0% { transform: scale(.8); } 55% { transform: scale(1.14); } 100% { transform: scale(1); } }.check .cbox{ transition: background-color .18s ease, box-shadow .18s ease; }.check.pop .cbox{ animation: tickPop .28s cubic-bezier(.3,1.4,.5,1); }/* tag pills soft entrance */@keyframes chipIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }/* hero fan: staggered rise-settle once revealed */@keyframes fanRise1 { from { opacity:0; transform: translateX(-158%) translateY(46px) rotate(-11deg); } to { opacity:1; transform: translateX(-158%) rotate(-7deg); } }@keyframes fanRise2 { from { opacity:0; transform: translateX(-50%) translateY(52px) rotate(6deg); } to { opacity:1; transform: translateX(-50%) rotate(2deg); } }@keyframes fanRise3 { from { opacity:0; transform: translateX(58%) translateY(46px) rotate(12deg); } to { opacity:1; transform: translateX(58%) rotate(7deg); } }.hb-fan.is-in .f1{ animation: fanRise1 .65s cubic-bezier(.2,.75,.25,1) .05s both; }.hb-fan.is-in .f2{ animation: fanRise2 .65s cubic-bezier(.2,.75,.25,1) .18s both; }.hb-fan.is-in .f3{ animation: fanRise3 .65s cubic-bezier(.2,.75,.25,1) .31s both; }/* hero stickers: settle pop */@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)); } }.rv.is-in .hb-stickers .stick, .hb-stickers.is-in .stick{ animation: settlePop .5s cubic-bezier(.25,1.1,.35,1) both; }/* buttons: press feel */.btn, .sf-stop{ will-change: transform; }.btn:active, .sf-stop:active{ transform: translateY(2px); }}/* Tag Explorer demo (Feature 01) *//* ============================================
     FEATURE SECTIONS — calendar / generators / tutor
     ============================================ *//* ============================================
     WINDOWS — every role gets its view
     ============================================ *//* featured pair card — real portal + mobile test *//* ============================================
     CONSOLE SECTION — the investment view (dark)
     ============================================ *//* ============================================
     DIRECTION B SKIN — centered hero + candy doubled
     ============================================ */.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); }.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; }.hb-fan .f2{ transform: translateX(-50%) rotate(2deg); z-index:2; }/* level badges for features *//* browser-chrome window inside candy stages *//* tagged specimen *//* ============================================
     LMS RESPONSIVE
     ============================================ */@media (max-width: 980px) {.doors{ grid-template-columns: 1fr; }.included .tick-list{ grid-template-columns: 1fr 1fr; }}@media (max-width: 560px) {.included .tick-list{ grid-template-columns: 1fr; }}/* ============================================
     CORE PAGE — spine / vendor / fit / risks
     ============================================ */.fit-card.wide{ grid-column: 1 / -1; display: grid; grid-template-columns: 1.05fr 1fr; grid-template-rows: auto auto 1fr; column-gap: clamp(20px, 3vw, 40px); row-gap: 0; align-content: center; }.fit-card.wide > .pill-tag{ grid-column: 1; }.fit-card.wide h3, .fit-card.wide > p{ grid-column: 1; align-self: start; }.wl-sw-row{ display: flex; gap: 10px; justify-content: center; }.wl-sw{ width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer; background: var(--sw); box-shadow: 0 3px 0 rgba(0,0,0,0.18); transition: transform .18s ease; }.wl-sw:hover{ transform: scale(1.12); }.wl-sw.active{ outline: 3px solid var(--orange); outline-offset: 2px; }.wl-sw:focus-visible{ outline: 3px solid var(--orange); outline-offset: 2px; }.door-cta .btn{ width:100%; justify-content:center; }@media (max-width: 960px) {.fit-card.wide{ grid-template-columns: 1fr; }}/* ============ THE PLAN ============ *//* ============================================
   WHO GETS WHAT — stakeholder roll-call (v92.1)
   ============================================ */.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; }}

:root{
  --teal:#007e7f; --teal-light:#00a4a5; --teal-dark:#003d3e;
  --orange:#f8a32c; --orange-deep:#f47a20;
  --cream:#faf7ed; --peach:#ffdeb0; --cream-warm:#fdf3e3;
  --ink:#003d3e; --ink-soft:rgba(0,61,62,.7); --ink-mute:rgba(0,61,62,.55);
  --max:1240px; --pad:clamp(20px,4vw,48px);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:"Poppins",sans-serif;background:var(--cream);color:var(--ink);font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad);}
.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:.02em;text-decoration:none;border:none;cursor:pointer;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,.25);}
.btn-ghost{background:transparent;color:var(--teal-dark);border:2px solid var(--teal-dark);}




/* ============ HERO (final — Direction A, feature-name strip) ============ */
.hero-b{position:relative;overflow:hidden;text-align:center;
  padding:clamp(64px,7vw,104px) 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);}
.hero-b h1{font-size:clamp(38px,5.2vw,66px);font-weight:900;letter-spacing:-.03em;line-height:.98;color:var(--teal-dark);margin-bottom:clamp(28px,3.2vw,40px);}
.hero-b h1 .pop{color:var(--orange);display:inline-block;}
.hero-b h1 .l2{display:block;font-size:clamp(24px,3vw,40px);letter-spacing:-.02em;margin-top:8px;}
.hb-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:clamp(44px,4.8vw,68px);}






.bw{border-radius:16px 16px 0 0;overflow:hidden;border:1px solid rgba(0,61,62,.16);border-bottom:none;background:#fff;}
.bw-bar{display:flex;align-items:center;gap:8px;background:var(--cream-warm);border-bottom:1px solid rgba(0,61,62,.10);padding:10px 16px;}
.bw-bar i{width:10px;height:10px;border-radius:50%;}
.bw-bar i:nth-child(1){background:#f47a20;}
.bw-bar i:nth-child(2){background:#f8a32c;}
.bw-bar i:nth-child(3){background:#00a4a5;}
.bw-bar span{flex:1;text-align:center;font-size:12px;font-weight:800;color:var(--ink-mute);letter-spacing:.04em;}
.bw img{display:block;width:100%;height:auto;}


/* ============ WHATIS (L2 split; six-systems fold left) ============ */


.wi-kick{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:18px;}
.wi-kick::before{content:"";width:26px;height:3px;background:var(--orange);border-radius:2px;}

.whatis h2 .pop{color:var(--orange);}






/* six-systems fold — left column */









/* stat candidates band */










/* ============ STAR-FEATS (S1, 3 pillars) ============ */
.star-feats{background:var(--cream);padding:clamp(64px,7.5vw,104px) 24px;}
.sf-head{max-width:1120px;margin:0 auto 30px;text-align:center;}
.sf-head h2{font-size:clamp(30px,4.2vw,54px);font-weight:900;letter-spacing:-.025em;line-height:1.06;color:var(--teal-dark);}
.sf-head h2 .pop{color:var(--orange);}
.sf-lead{max-width:640px;margin:16px auto 0;font-size:clamp(15px,1.6vw,18px);line-height:1.7;color:rgba(0,61,62,.7);font-weight:500;}
.sf-tabs{display:flex;justify-content:center;gap:10px;margin:0 auto 34px;flex-wrap:wrap;}
.sf-tab{border-radius:999px;padding:13px 26px;font-size:14px;font-weight:800;border:2px solid rgba(0,61,62,.14);background:#fff;color:var(--teal-dark);cursor:pointer;font-family:inherit;}
.sf-tab .n{color:var(--orange);margin-right:8px;font-weight:900;}
.sf-tab.on{background:var(--teal-dark);border-color:var(--teal-dark);color:#fff;}
.sf-stage{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,3vw,48px);align-items:center;background:var(--cream-warm);border:1px solid rgba(0,61,62,.10);border-radius:26px;padding:clamp(22px,2.6vw,40px);}
.sf-stage[hidden]{display:none;}
.sf-stage .bw{border-radius:16px;border-bottom:1px solid rgba(0,61,62,.16);}
.sf-copy .pl{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:10px;}
.sf-copy h3{font-size:clamp(22px,2.6vw,32px);font-weight:900;color:var(--teal-dark);margin-bottom:8px;letter-spacing:-.02em;}
.frow{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid rgba(0,61,62,.12);align-items:baseline;}
.frow:last-child{border-bottom:none;}
.frow .no{font-size:12px;font-weight:900;color:var(--orange-deep);min-width:26px;}
.frow div b{display:block;font-size:16px;font-weight:900;color:var(--teal-dark);}
.frow div p{font-size:13.5px;line-height:1.55;color:rgba(0,61,62,.7);font-weight:500;margin-top:3px;}
@media (max-width:640px){ .sf-stage{grid-template-columns:1fr;} }

/* ================= WHATIS FINAL (W1 trimmed) ================= */
.w1{background:var(--cream-warm);padding:clamp(64px,7.5vw,104px) 24px;text-align:center;}
.w1 .head{max-width:840px;margin:0 auto;}
.w1 h2{font-size:clamp(30px,4.2vw,54px);font-weight:900;letter-spacing:-.025em;line-height:1.06;color:var(--teal-dark);}
.w1 h2 .pop{color:var(--orange);}
.w1 .def{font-size:clamp(16px,1.7vw,19px);line-height:1.7;color:rgba(0,61,62,.7);font-weight:600;margin-top:18px;}
.conv{max-width:980px;margin:clamp(38px,4.5vw,58px) auto 0;position:relative;}
.conv .funnel svg{display:block;width:100%;height:100%;}
.conv .rowchips{display:flex;justify-content:center;gap:clamp(8px,1.4vw,18px);flex-wrap:wrap;position:relative;z-index:2;}
.conv .rowchips span{background:#fff;border:1.5px dashed rgba(0,61,62,.30);border-radius:14px;padding:12px 18px;font-size:13px;font-weight:800;color:var(--ink-soft);}
.conv .rowchips span:nth-child(1){}
.conv .rowchips span:nth-child(2){}
.conv .rowchips span:nth-child(3){}
.conv .rowchips span:nth-child(4){}
.conv .rowchips span:nth-child(5){}
.conv .rowchips span:nth-child(6){}
.conv .funnel{height:clamp(64px,8vw,100px);position:relative;z-index:1;}
.conv .corebar{position:relative;z-index:2;background:var(--teal-dark);border-radius:20px;padding:26px 30px;color:#fff;max-width:560px;margin:0 auto;}
.conv .corebar b{display:block;font-size:clamp(19px,2vw,24px);font-weight:900;}
.conv .corebar p{font-size:13.5px;font-weight:600;color:rgba(255,255,255,.78);margin-top:4px;}


.payoff-x{background:var(--cream-warm,#fdf3e3);padding:clamp(64px,7.5vw,104px) 24px clamp(40px,5vw,64px);}
    .f2-head{max-width:1000px;margin:0 auto 30px;text-align:center;}
    .f2-head h2{font-size:clamp(28px,4vw,50px);font-weight:900;letter-spacing:-0.025em;line-height:1.08;color:var(--teal-dark);}
    .f2-head h2 .pop{color:var(--orange);}
    .f2-lead{max-width:620px;margin:14px auto 0;font-size:clamp(15px,1.5vw,17px);line-height:1.7;color:rgba(0,61,62,.7);font-weight:500;}
    .f2-tbl{max-width:1000px;margin:0 auto;background:#fff;border:1px solid rgba(0,61,62,.14);border-radius:24px;overflow:hidden;}
    .f2-row{display:grid;grid-template-columns:.9fr 1fr 1fr;border-bottom:1px solid rgba(0,61,62,.10);}
    .f2-row:last-child{border-bottom:none;}
    .f2-cell{padding:18px 22px;font-size:13.5px;line-height:1.55;color:rgba(0,61,62,.7);font-weight:500;}
    .f2-row .f2-cell:nth-child(2){background:rgba(0,126,127,.06);border-left:1px solid rgba(0,61,62,.10);border-right:1px solid rgba(0,61,62,.10);}
    .f2-hdr .f2-cell{padding-top:24px;}
    .f2-hdr b{display:block;font-size:17px;font-weight:900;color:var(--teal-dark);}
    .f2-hdr .pr{font-size:12px;font-weight:800;color:var(--orange-deep);}
    .f2-side{font-weight:800;color:var(--teal-dark);}
    .f2-both{background:var(--teal-dark);}
    .f2-both .f2-cell{color:rgba(255,255,255,.85);}
    .f2-both .f2-side{color:#fff;}
    .f2-both .f2-cell:nth-child(2){background:transparent;border-left:none;border-right:none;}
    .f2-span{grid-column:2/4;}
    
    .final-x{background:var(--cream-warm,#fdf3e3);padding:0 24px clamp(72px,8vw,116px);}
    .fx-band{max-width:1000px;margin:0 auto;background:var(--peach,#ffdeb0);border-radius:26px;padding:clamp(24px,3vw,38px) clamp(24px,3.4vw,44px);display:flex;align-items:center;gap:clamp(18px,2.6vw,36px);}
    .fx-mascot{width:clamp(72px,7vw,104px);flex:0 0 auto;transform:rotate(4deg);}
    .fx-copy{flex:1;}
.fx-copy .fx-sub{margin:10px 0 0;font-size:clamp(14px,1.5vw,16px);line-height:1.55;color:var(--ink-mute,#4b5b5b);}
    .fx-copy h2{font-size:clamp(21px,2.6vw,32px);font-weight:900;letter-spacing:-0.02em;line-height:1.12;color:var(--teal-dark);}
    .fx-copy h2 .pop{color:var(--orange-deep);}
    .fx-copy p{font-size:13.5px;line-height:1.6;color:rgba(0,61,62,.7);font-weight:500;margin-top:8px;}
    .btn-dark{background:var(--teal-dark);color:#fff;box-shadow:0 6px 0 #01201f;flex:0 0 auto;}
    @media (max-width:640px){
      .f2-row{grid-template-columns:1fr;}
      .f2-hdr{display:none;}
      .f2-row .f2-cell:nth-child(2){border-left:none;border-right:none;}
      .f2-side{padding-bottom:4px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;border-bottom:none;}
      .f2-cell[data-door]::before{content:attr(data-door) " · ";font-weight:900;color:var(--teal);}
      .f2-cell[data-door]{padding-top:8px;}
      .f2-span{grid-column:auto;}
      .fx-band{flex-direction:column;text-align:center;}
    }

  
    /* mobile door-grouped stack */
    .f2-mstack{display:none;}
    @media (max-width:640px){
      .f2-tbl{display:none;}
      .f2-mstack{display:flex;flex-direction:column;gap:14px;max-width:520px;margin:0 auto;}
      .f2-mdoor{border-radius:20px;padding:22px 20px;}
      .f2-mdoor{background:#fff;border:1px solid rgba(0,61,62,.14);}
      .f2-mdoor.md1{background:#fff;border:2px solid var(--teal);}
      .f2-mdoor.mboth{background:var(--teal-dark);border-color:var(--teal-dark);}
      .f2-mdoor .dk{display:block;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-dark);margin-bottom:2px;}
      .f2-mdoor .pr{display:inline-block;font-size:12px;font-weight:800;color:var(--orange-deep);margin-bottom:10px;}
      .f2-mdoor p{font-size:13.5px;line-height:1.6;font-weight:500;color:rgba(0,61,62,.7);margin-top:8px;}
      .f2-mdoor p b{font-weight:900;color:var(--teal-dark);}
      .f2-mdoor.mboth .dk{color:#fff;}
      .f2-mdoor.mboth p{color:rgba(255,255,255,.85);}.f2-mdoor.mboth p b{color:#fff;}
    }

  
.f2-wl .f2-cell:nth-child(2){background:transparent;border-left:none;border-right:none;} .f2-wl .f2-cell{padding-top:14px;padding-bottom:14px;} @media (max-width:640px){.f2-wl{display: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(3,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(3,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, .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 */

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




/* 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: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; }  }
@media (max-width:700px){
  .sf-tabs{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; }
  .sf-tabs::-webkit-scrollbar{ display:none; }
  .sf-tab{ flex:none; white-space:nowrap; font-size:12px; }
}


.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;}
.hx1-main{margin:0;}
.hx1-card{position:absolute;background:#fff;border:1px solid rgba(0,61,62,.12);border-radius:16px;padding:14px 18px;box-shadow:0 5px 0 rgba(0,61,62,.14);}
.hx1-card b{display:block;font-size:14px;font-weight:800;color:var(--teal-dark);}
.hx1-card span{font-size:12.5px;font-weight:600;color:var(--ink-soft);}
.hx1-c1{top:-18px;right:-14px;}
.hx1-c2{bottom:-20px;left:-16px;}
@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;}
.hx1-c1{top:-14px;right:6px;}
.hx1-c2{bottom:-16px;left:6px;}
}
@media (max-width:640px){
.hx1-card{padding:10px 14px;border-radius:13px;}
.hx1-card b{font-size:12.5px;}
.hx1-card span{font-size:11px;}
.hx1-c1{top:-12px;right:0;}
.hx1-c2{bottom:-14px;left:0;}
}

/* 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%; }
}
/* v93.46j — CMS hero module strip: even 2x2 at mobile */
/* v93.57 — hero peek: zoomed detail (direction D) */