/* --------------------------------------------------------------- switch.css
   The audience switch.

   There are two India pages: one for institutions deciding whether to bring a
   Lythous node in, one for a person who scanned a QR code or was invited by an
   Ambassador. Someone will always land on the wrong one, so each page says in
   its first line who it is for and offers the other in one click.

   Sits above the sticky header, scrolls away with the page. It is wayfinding,
   not navigation, so it does not need to follow the reader down. */

.aud-switch{
  background:var(--night);
  color:#D2C7B7;
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:.06em;
  line-height:1.45;
}

.aud-switch-in{
  max-width:1240px;
  margin:0 auto;
  padding:11px var(--pad);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 18px;
}

.aud-switch b{
  font-weight:400;
  color:#8C7C68;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.aud-switch a{
  color:#CFA267;
  text-decoration:none;
  border-bottom:1px solid rgba(207,162,103,.4);
  transition:border-color .25s ease;
  margin-left:auto;
}
.aud-switch a:hover{border-bottom-color:#CFA267}
.aud-switch a::after{content:" \2192";letter-spacing:0}

@media(max-width:640px){
  .aud-switch a{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  .aud-switch a{transition:none}
}


/* -------------------------------------------------- footer legal column
   Geneura AI's own policies govern geneura.ai, not this deployment, so they
   are grouped under their owner's name rather than listed as if they were
   this site's. The panels above them are the ones that describe this page. */

.site-foot .foot-note{
  display:block;
  margin:18px 0 8px;
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8C7C68;
}
.site-foot a[target="_blank"]::after{
  content:" ↗";
  letter-spacing:0;
  opacity:.7;
}

/* ------------------------------------------------------------- say hello
   The one thing this page is for, following the reader down it. It is the
   real .btn .btn-solid rather than a lookalike, so it cannot drift from the
   button in the hero that now makes the same ask. Everything here is about
   floating and appearing; the look comes from a4.css. See hello.js. */

.hello{
  position:fixed;
  right:clamp(16px,2.4vw,32px);
  bottom:clamp(16px,2.4vw,32px);
  z-index:70;
  padding:14px 24px;
  font-size:15px;
  box-shadow:0 16px 34px -14px rgba(42,33,22,.55);
  opacity:0;
  visibility:hidden;
  transform:translateY(14px) scale(.96);
  transition:opacity .4s ease,
             transform .4s cubic-bezier(.16,.8,.24,1),
             visibility .4s,
             background .3s ease, color .3s ease, border-color .3s ease;
}

.hello.on{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

.hello .wave{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media (prefers-reduced-motion:reduce){
  .hello{transition:opacity .2s ease, visibility .2s;transform:none}
  .hello.on{transform:none}
}

/* ---------------------------------------------------- the floating pair
   Two asks, stacked. "I need help now" is always there, because somebody in
   trouble should never have to scroll to find it, and it does not wait for
   the hero to pass the way the softer one does. */

.float-cta{
  position:fixed;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
  transition:opacity .4s ease,
             transform .4s cubic-bezier(.16,.8,.24,1),
             visibility .4s;
  right:clamp(16px,2.4vw,32px);
  bottom:clamp(16px,2.4vw,32px);
  z-index:70;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

.float-cta .hello{
  position:static;
  right:auto;
  bottom:auto;
}

.float-help{
  padding:14px 24px;
  font-size:15px;
  box-shadow:0 16px 34px -14px rgba(42,33,22,.55);
}


/* the pair reveals as one; .hello keeps its own reveal for the case where it
   is used without the container */
.float-cta.on{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.float-cta .hello{opacity:1;visibility:visible;transform:none}

.float-help .ring{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
}

@media (prefers-reduced-motion:reduce){
  .float-cta{transition:opacity .2s ease, visibility .2s;transform:none}
  .float-cta.on{transform:none}
}

/* the hero pair and the floating pair are the same two asks, so they carry
   the same marks and the same order of emphasis. On the hero's dark ground
   "I need help now" was the solid one, which made it shout over "Say hello";
   floating, it is the quieter of the two. Matched to that. */

.hero-cta .btn-help{
  background:transparent;
  border-color:rgba(232,185,106,.75);
  color:#E8B96A;
}
.hero-cta .btn-help:hover{
  background:var(--ochre);
  border-color:var(--ochre);
  color:#fff;
}
.hero-cta .wave,.hero-cta .ring{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* the audience switch banner is gone from the student page, so the route to
   the other one lives in the nav instead. Set apart from the section links
   because it leaves the page rather than moving down it. */
.site-nav .nav-alt{
  color:var(--ochre);
  margin-left:6px;
  padding-left:16px;
  border-left:1px solid var(--rule);
}
.site-nav .nav-alt::after{content:" →";letter-spacing:0}