/* =====================================================================
   Shared topbar for every page: logo · Students / Parents / Counselors · one action.
   No bar behind them: each piece floats on its own and takes its tone from
   what is under it (light over photos and dark bands, deeper over the paper).
   On phones the island folds into a glass Menu that drops down.
   Self-contained (ut- prefix) so it never collides with styles.css.
   ===================================================================== */
.ut{
  position:fixed;top:0;left:0;right:0;z-index:1000;padding:14px 18px;pointer-events:none;
  font-family:'Geist',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
.ut-in{
  max-width:1240px;margin:0 auto;height:64px;padding:0 8px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
}
.ut-in > *{pointer-events:auto}

/* logo: the cream lockup over dark, the ink one over paper, crossfaded */
.ut-logo{position:relative;display:flex;align-items:center;min-height:44px;justify-self:start;margin-left:4px;text-decoration:none}
.ut-logo img{height:48px;width:auto;display:block;transition:opacity .6s ease}
.ut-logo .ut-logo-ink{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0}
/* a soft shadow keeps the cream logo apart from cream headlines and bright patches; invisible over dark green */
.ut:not(.lt-logo) .ut-logo-light{filter:drop-shadow(0 1px 10px rgba(8,22,15,0.55)) drop-shadow(0 0 2px rgba(8,22,15,0.35))}
.ut.lt-logo .ut-logo-light{opacity:0}
.ut.lt-logo .ut-logo-ink{opacity:1}
.ut-right{display:flex;align-items:center;gap:8px;justify-self:end;margin-right:-4px}

/* the island: glass over photos, deeper green glass over the paper */
/* liquid glass: clear and blurred, a light rim that is brightest top-left and bottom-right,
   a soft sheen across the top. Clear over photos and dark bands; over the paper it turns
   into light glass with dark labels (like Apple's segmented control), never a solid colour */
.ut-aud,.ut-menu-btn{
  position:relative;isolation:isolate;border:none;
  background:linear-gradient(180deg,rgba(255,255,255,0.16),rgba(255,255,255,0.06)),rgba(12,32,22,0.2);
  backdrop-filter:blur(16px) saturate(135%);-webkit-backdrop-filter:blur(16px) saturate(135%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.34),
    inset 0 -10px 18px -14px rgba(255,255,255,0.3),
    0 12px 32px -16px rgba(0,0,0,0.45),
    0 2px 6px -2px rgba(10,25,18,0);
  transition:box-shadow .8s ease,color .6s ease,transform .15s ease;
}
/* the light rim: brightest top-left and bottom-right */
.ut-aud::before,.ut-menu-btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,0.7),rgba(255,255,255,0.13) 32%,rgba(255,255,255,0.02) 58%,rgba(255,255,255,0.38));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
/* over the paper the glass smokes over: a second layer fades in, so the change is a slow
   crossfade (gradients can't be animated directly, opacity can) */
.ut-aud::after,.ut-menu-btn::after{
  content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(54,72,62,0.6),rgba(24,40,32,0.72));
  opacity:0;transition:opacity .8s ease;
}
.ut.lt-mid .ut-aud::after,.ut.lt-mid .ut-menu-btn::after{opacity:1}
.ut.lt-mid .ut-aud,.ut.lt-mid .ut-menu-btn{
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.3),
    inset 0 -10px 18px -14px rgba(255,255,255,0.2),
    0 14px 34px -16px rgba(10,25,18,0.5),
    0 2px 6px -2px rgba(10,25,18,0.18);
  color:#fff7e2;
}
.ut-aud{position:relative;inset:auto;z-index:auto;display:flex;gap:2px;padding:4px;border-radius:999px}
.ut-aud a{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-height:42px;padding:0 20px;border-radius:999px;
  font-size:16px;font-weight:600;letter-spacing:-0.005em;color:rgba(255,255,255,0.86);text-decoration:none;white-space:nowrap;transition:color .35s ease;
}
.ut-aud a:hover{color:#fff}
.ut-aud a[aria-current="page"]{color:#143d2c}
/* without the script there is no sliding pill: the current tab gets its own white fill */
.ut-aud:not(.ready) a[aria-current="page"]{background:#fff7e2}
/* with it, the dark label follows the pill (hover included), never white on white */
.ut-aud.ready a{color:rgba(255,255,255,0.86)}
.ut-aud.ready a:hover{color:#fff}
.ut-aud.ready a.on,.ut-aud.ready a.on:hover{color:#143d2c}
.ut-ind{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:999px;background:linear-gradient(180deg,#fffaec,#fff7e2 55%,#fbefd0);
  box-shadow:0 6px 18px -6px rgba(0,0,0,0.35),0 1px 2px rgba(0,0,0,0.08),inset 0 -1px 1px rgba(20,61,44,0.06);
  transition:transform .55s cubic-bezier(.25,1,.5,1),width .55s cubic-bezier(.25,1,.5,1)}

/* the one action */
.ut-cta{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;border:none;cursor:pointer;
  background:#ffba00;color:#143d2c;font:600 16px/1 'Geist',-apple-system,sans-serif;letter-spacing:-0.01em;text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.55),inset 0 -2px 6px -2px rgba(160,100,0,0.25),0 10px 24px -12px rgba(20,61,44,0.45);
  transition:transform .15s cubic-bezier(.22,.8,.2,1),background-color .25s ease;-webkit-tap-highlight-color:transparent;
}
.ut-cta:hover{background:#ffc62e}
.ut-cta:active{transform:scale(.97)}
.ut :focus-visible,.ut-menu :focus-visible{outline:2px solid #ffba00;outline-offset:3px}
.ut.lt-mid .ut-menu-btn:focus-visible,.ut.lt-logo .ut-logo:focus-visible{outline-color:#143d2c}
.ut-cta:focus-visible{outline:2px solid #143d2c;outline-offset:2px;box-shadow:0 0 0 2px #fff7e2,0 10px 24px -12px rgba(20,61,44,0.45)}

/* rolling label: the word slides up and its twin rolls in */
.ut-roll{position:relative;display:inline-block;overflow:hidden;vertical-align:top;line-height:1.3}
.ut-roll > span{display:block;transition:transform .5s cubic-bezier(.25,1,.5,1)}
.ut-roll > span + span{position:absolute;left:0;top:100%}
a:hover > .ut-roll > span,button:hover > .ut-roll > span,a:focus-visible > .ut-roll > span{transform:translateY(-100%)}

/* ---------- phones: Menu button + glass dropdown ---------- */
.ut-menu-btn{
  display:none;align-items:center;gap:10px;height:44px;padding:0 16px 0 18px;border-radius:999px;cursor:pointer;
  color:#fff;font:600 15px/1 'Geist',-apple-system,sans-serif;letter-spacing:-0.005em;-webkit-tap-highlight-color:transparent;
}
.ut-menu-btn:active{transform:scale(.97)}
/* "Menu" ⇄ "Close" share one cell, so the button never changes width */
.ut-ml{display:inline-grid;justify-items:center;overflow:hidden;line-height:1.25;padding-block:.1em;margin-block:-.1em}
.ut-ml > span{grid-area:1/1;transition:transform .55s cubic-bezier(.25,1,.5,1),opacity .35s ease}
.ut-ml-b{transform:translateY(105%);opacity:0}
.ut-menu-btn[aria-expanded="true"] .ut-ml-a{transform:translateY(-105%);opacity:0}
.ut-menu-btn[aria-expanded="true"] .ut-ml-b{transform:none;opacity:1}
.ut-dots{display:inline-flex;gap:3px;flex:none;transition:transform .45s cubic-bezier(.25,1,.5,1)}
.ut-dots::before,.ut-dots::after{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.ut-menu-btn[aria-expanded="true"] .ut-dots{transform:rotate(90deg)}

.ut-menu{
  position:fixed;z-index:999;top:70px;right:12px;width:min(340px,calc(100vw - 24px));padding:8px;border-radius:26px;
  /* the same smoked glass as the Menu button, a touch denser so it reads over anything */
  background:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.04)),linear-gradient(180deg,rgba(40,60,50,0.78),rgba(18,34,26,0.86));
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  border:none;isolation:isolate;
  box-shadow:0 30px 70px -24px rgba(4,18,13,0.6),inset 0 1px 1px rgba(255,255,255,0.3),inset 0 -14px 24px -18px rgba(255,255,255,0.18);
  transform-origin:calc(100% - 40px) 0;opacity:0;transform:translateY(-8px) scale(.96);
  transition:opacity .22s ease,transform .45s cubic-bezier(.25,1,.5,1);
}
.ut-menu[hidden]{display:none}
.ut-menu::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,0.65),rgba(255,255,255,0.13) 30%,rgba(255,255,255,0.02) 60%,rgba(255,255,255,0.36));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
.ut-menu.open{opacity:1;transform:none}
.ut-menu nav{position:static;inset:auto;z-index:auto;padding:0;transition:none;display:grid;gap:2px}
.ut-menu nav a{
  display:flex;align-items:center;min-height:54px;padding:0 16px;border-radius:18px;
  font-size:22px;font-weight:600;letter-spacing:-0.02em;color:#fff7e2;text-decoration:none;
  opacity:0;transform:translateY(-4px);
  transition:background-color .25s ease,opacity .3s ease,transform .45s cubic-bezier(.25,1,.5,1);
}
.ut-menu.open nav a{opacity:1;transform:none}
.ut-menu.open nav a:nth-child(2){transition-delay:0s,.04s,.04s}
.ut-menu.open nav a:nth-child(3){transition-delay:0s,.08s,.08s}
/* the arrow slides in on the item under the finger, like the buttons on AgentDesk */
.ut-menu nav a::before{
  content:"";width:0;height:14px;margin-right:0;flex:none;opacity:0;background:currentColor;
  -webkit-mask:left center / 18px 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h15.5M10.5 1l6 6-6 6'/%3E%3C/svg%3E");
  mask:left center / 18px 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h15.5M10.5 1l6 6-6 6'/%3E%3C/svg%3E");
  transition:width .4s cubic-bezier(.25,1,.5,1),margin .4s cubic-bezier(.25,1,.5,1),opacity .25s ease;
}
.ut-menu nav a:hover,.ut-menu nav a:focus-visible{background:rgba(255,255,255,0.08);outline:none}
.ut-menu nav a:hover::before,.ut-menu nav a:focus-visible::before{width:18px;margin-right:12px;opacity:1}
/* where you are: a quiet selected row, no extra marks */
.ut-menu nav a[aria-current="page"]{background:rgba(255,255,255,0.1)}
.ut-menu-foot{margin-top:8px}
.ut-menu .ut-cta{width:100%;min-height:52px;font-size:16px;border-radius:18px}  /* panel 26px − 8px padding: same curve as the rows */

.ut-toast{position:fixed;left:50%;bottom:24px;z-index:1100;max-width:calc(100% - 32px);transform:translate(-50%,16px);opacity:0;pointer-events:none;
  background:#143d2c;color:#fff7e2;border-radius:999px;padding:13px 22px;font:500 15px/1.35 'Geist',sans-serif;text-align:center;
  box-shadow:0 20px 50px -20px rgba(4,18,13,0.6);transition:opacity .25s ease,transform .45s cubic-bezier(.25,1,.5,1)}
.ut-toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.ut-toast .url{user-select:all;-webkit-user-select:all;font-weight:600;color:#ffba00}

/* switching audience: the page under the bar fades out and back in, the bar itself never moves */
main,footer{transition:opacity .34s ease}
html.ut-leaving main,html.ut-leaving footer{opacity:0;transition:opacity .17s ease}
.ut-cta.ut-fresh{animation:utFresh .45s cubic-bezier(.25,1,.5,1) both}
@keyframes utFresh{from{opacity:0;transform:scale(.94)}}

/* ---------- the side scrollbar (desktop): the browser's own is hidden ---------- */
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
.ut-scrollbar{
  position:fixed;z-index:990;right:14px;top:50%;width:6px;height:180px;margin-top:-90px;border-radius:3px;
  background:rgba(20,61,44,0.14);cursor:pointer;touch-action:none;transition:background-color .6s ease;
}
.ut-scrollbar::before{content:"";position:absolute;inset:-10px -12px}
.ut-scrollbar i{position:absolute;left:0;top:0;width:6px;height:36px;border-radius:3px;background:#143d2c;transition:background-color .6s ease,width .2s ease;will-change:transform}
.ut-scrollbar.inv{background:rgba(255,247,226,0.2)}
.ut-scrollbar.inv i{background:#fff7e2}
.ut-scrollbar:hover i,.ut-scrollbar.drag i{background:#ffba00}
@media (max-width:760px),(pointer:coarse){.ut-scrollbar{display:none}}
@media (max-width:900px){.lang-switch{gap:0 14px;margin-bottom:8px}.lang-switch a{min-height:32px}}

/* ---------- language: footer switcher + the first-visit offer ---------- */
.footer-bottom{flex-wrap:wrap}
.lang-switch{position:static;inset:auto;z-index:auto;padding:0;transition:none;flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:2px 16px;margin-bottom:14px;font-size:13.5px}
.lang-switch svg{width:15px;height:15px;color:rgba(247,236,213,0.5);margin-right:2px}
.lang-switch a{display:inline-flex;align-items:center;min-height:36px;color:rgba(247,236,213,0.6);text-decoration:none;transition:color .2s}
.lang-switch a:hover{color:#f7ecd5}
.lang-switch a[aria-current]{color:#ffba00}
.ut-lang{
  position:fixed;left:50%;bottom:22px;z-index:1050;max-width:calc(100% - 24px);
  display:flex;align-items:center;gap:14px;padding:8px 8px 8px 22px;border-radius:999px;isolation:isolate;
  background:linear-gradient(180deg,rgba(54,72,62,0.7),rgba(24,40,32,0.8));color:#fff7e2;
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.3),0 24px 60px -24px rgba(4,18,13,0.6);
  opacity:0;transform:translate(-50%,16px);transition:opacity .35s ease,transform .55s cubic-bezier(.25,1,.5,1);
}
.ut-lang::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,0.6),rgba(255,255,255,0.12) 32%,rgba(255,255,255,0.02) 58%,rgba(255,255,255,0.34));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
.ut-lang.on{opacity:1;transform:translate(-50%,0)}
.ut-lang-q{margin:0;font-size:15.5px;font-weight:500;white-space:nowrap}
.ut-lang-actions{display:flex;align-items:center;gap:4px}
.ut-lang .ut-cta{min-height:42px;padding:0 20px;font-size:15px}
.ut-lang-stay{min-height:42px;padding:0 14px;border:none;border-radius:999px;background:none;cursor:pointer;
  font:500 14.5px/1 'Geist',-apple-system,sans-serif;color:rgba(255,247,226,0.75)}
.ut-lang-stay:hover{color:#fff7e2;background:rgba(255,255,255,0.08)}
@media (max-width:560px){
  .ut-lang{left:12px;right:12px;bottom:12px;max-width:none;flex-direction:column;align-items:stretch;gap:10px;padding:16px;border-radius:24px;transform:translateY(16px)}
  .ut-lang.on{transform:none}
  .ut-lang-q{white-space:normal;text-align:center}
  .ut-lang-actions{flex-direction:column}
  .ut-lang .ut-cta,.ut-lang-stay{width:100%}
}
@media (prefers-reduced-motion:reduce){.ut-lang{transition:opacity .2s}}

/* the hero sits under a 92px bar */
.ut ~ main .hero .hero-content{padding-top:120px}
html:has(.ut){scroll-padding-top:104px}


@media (min-width:901px){
  .ut-menu{display:none!important}
  /* the pinned product panel keeps its heading clear of the floating logo */
  body:has(.ut) .product{padding-top:100px;padding-bottom:24px}
  body:has(.ut) .product-head{margin-bottom:24px}
  body:has(.ut) .product-inner{margin-top:12px}
}
@media (min-width:901px) and (max-height:900px){
  body:has(.ut) .product-head{margin-bottom:16px}
  body:has(.ut) .chapter{padding:9px 0}
}
/* laptops: give back what the clearance took, so the tour's button stays on screen */
@media (min-width:901px) and (max-height:820px){
  body:has(.ut) .product{padding-top:84px}
  body:has(.ut) .product-head{margin-bottom:8px}
  body:has(.ut) .product-inner{margin-top:0}
}
@media (min-width:901px) and (max-height:740px){
  body:has(.ut) .chapter{padding:6px 0}
  body:has(.ut) .product-head .sec-title{font-size:38px}
}
@media (max-width:900px){
  .ut{padding:10px 12px}
  .ut-in{height:52px;grid-template-columns:auto 1fr;padding:0 0 0 6px}
  .ut-logo img{height:40px}
  .ut-aud,.ut-right > .ut-cta{display:none}
  .ut-menu-btn{display:inline-flex}
  .ut-right{grid-column:2}
  .ut ~ main .hero .hero-content{padding-top:112px}
  html:has(.ut){scroll-padding-top:84px}
}
@media (prefers-reduced-motion:reduce){
  .ut-ind,.ut-roll > span,.ut-ml > span,.ut-dots,.ut-menu,.ut-menu nav a{transition:none}
}
@media (prefers-reduced-transparency:reduce){
  .ut-aud,.ut-menu-btn{background:#143d2c;backdrop-filter:none;-webkit-backdrop-filter:none}
  .ut-menu{background:#183a2a;backdrop-filter:none;-webkit-backdrop-filter:none}
}