/* Ported from the second production handoff (adio-home-standalone.html, the
 * Vite build of the redesigned landing page). The handoff ships one .home-copy
 * block; this page keeps the intro/receiver/more split introduced by ADIO-696
 * so the grid can reorder to headline, control, sub+cta on phones. */

@font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/montserrat/Montserrat-Light.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/montserrat/Montserrat-Regular.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/montserrat/Montserrat-Medium.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/montserrat/Montserrat-SemiBold.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/montserrat/Montserrat-Bold.woff2) format('woff2')}

:root{
  --navy-2:#151c32;
  --navy-3:#1a2444;
  --navy-4:#010b2c;
  --navy-6:#00134f;
  --navy-7:#002cb5;
  --cyan:#27e0cf;
  --cyan-hot:#2ee0c9;
  --accent:#2f5bea;
  --blue:#2196f3;
  --sky:#29bfe3;
  --fg:#ffffff;
  --ice:#fafafa;
  --mute:#8b96b8;
  --line:rgba(255,255,255,.1);
  /* One brand ramp now. The previous build had separate --grad-cta and
     --grad-pill; the handoff collapsed both into this. */
  --grad-brand:linear-gradient(100deg,#2ee0c9 0%,#29bfe3 45%,#2196f3 100%);
  --grad-auth:linear-gradient(90deg,var(--navy-6),var(--navy-7));
  /* The register button and the CTA share a second, steeper ramp. */
  --grad-action:linear-gradient(51deg,rgba(30,198,201,.9) 0%,rgb(32,107,239) 104%);
  --font:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-ko:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  /* Page gutter. Content stops growing at 1200px and the rest becomes margin. */
  --edge:max(24px,calc((100vw - 1200px)/2));
  --radius-pill:100px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --duration-press:.12s;
  --duration-fade:.18s;
  --duration-move:.22s
}

*,*:before,*:after{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--fg);
  background:var(--navy-2);
  -webkit-font-smoothing:antialiased
}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
img{max-width:100%;display:block}
:focus{outline:none}
:focus-visible{outline:3px solid #ffffff;outline-offset:3px}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

/* The tag is mounted to drive the receiver and to borrow its
 * New Messages/History panel; its own widget is hidden from inside the
 * shadow root (see adio-one.js). adio-one.js moves this host into #rx-anchor
 * (inside .home-main, above the header and footer); the panel itself is a
 * fixed sidebar laid out by rx.js. Not display:none — the widget still has
 * to lay itself out and run. z-index outranks .on-air, which comes later in
 * the document. */
#ouio,.ouio{
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:0;
  z-index:2
}

.home{
  --home-inset:var(--edge);
  --landing-bg:#151c32;
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  /* 100vh first: Safari below 15.4 and Chrome below 108 drop the dvh rule. */
  min-height:100vh;
  min-height:100dvh;
  color:#fff;
  font-family:var(--font);
  background-color:var(--landing-bg);
  background-image:none
}
.home img{max-width:none}

/* Three layers, back to front: the flat --landing-bg, two drifting blurred
   gradient circles, and the radial bloom on :after. .adio-hero-field sits on
   top and is filled by a WebGL canvas; when that bails these layers are the
   designed fallback, so none of them is conditional on it. */
.home-atmosphere{
  position:absolute;
  inset:0;
  display:block;
  overflow:hidden;
  pointer-events:none;
  background:var(--landing-bg);
  z-index:0
}
.home-atmosphere:after{
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  top:36%;
  height:36%;
  background:radial-gradient(60% 100% at 42% 50%,rgba(33,150,243,.4) 0%,rgba(36,187,225,.25) 38%,rgba(39,224,207,.14) 58%,rgba(39,224,207,.05) 68%,transparent 80%);
  filter:blur(34px);
  pointer-events:none
}
.hero-blob{
  position:absolute;
  width:56vw;
  height:56vw;
  max-width:900px;
  max-height:900px;
  border-radius:50%;
  filter:blur(70px);
  pointer-events:none;
  opacity:.55
}
.hero-blob.b1{
  top:6%;
  left:-14%;
  background:radial-gradient(circle at 35% 40%,rgba(47,91,234,.6) 0%,rgba(47,91,234,.32) 34%,rgba(47,91,234,.12) 52%,transparent 70%)
}
.hero-blob.b2{
  right:-12%;
  bottom:-8%;
  background:radial-gradient(circle at 60% 55%,rgba(39,224,207,.4) 0%,rgba(39,224,207,.22) 34%,rgba(39,224,207,.09) 52%,transparent 70%)
}
@keyframes homeBlobDrift{to{transform:translate3d(9vw,-6vh,0) scale(1.18)}}
@media(prefers-reduced-motion:no-preference){
  .hero-blob.b1{animation:homeBlobDrift 16s ease-in-out infinite alternate}
  .hero-blob.b2{animation:homeBlobDrift 19s ease-in-out infinite alternate-reverse}
}
/* Filled by adio-hero-field.js. Empty until then, and permanently empty when
   the WebGL guards refuse to run. */
.adio-hero-field{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none
}
.adio-hero-field canvas{display:block;width:100%;height:100%}

.home-top,.home-foot{position:relative;width:100%;margin:0;z-index:1}
/* Above .home-foot, not level with it. Both are positioned with a z-index, so
   each is its own stacking context and #ouio's z-index cannot reach out of this
   one — a tie here would leave the activity panel painted under the footer bar,
   which is where it landed. Only the panel overhangs that far. */
.home-main{position:relative;width:100%;margin:0;z-index:2}

.home-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:72px;
  padding:calc(18px + env(safe-area-inset-top,0px)) var(--home-inset) 0
}
.home-logo{display:flex;align-items:center;flex-shrink:0;width:133px;height:44px}
.home-logo img{width:133px;height:47px;object-fit:contain;object-position:left center}

.home-nav{display:flex;flex:0 0 auto;align-items:center}
.home-nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:44px;
  padding:10px 20px;
  border:1px solid rgba(40,242,246,.35);
  border-radius:12px;
  background-image:var(--grad-action);
  background-size:170% 100%;
  background-position:0% 0;
  color:#fff;
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
  text-decoration:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:background-position .4s var(--ease-out),transform .15s var(--ease-out),border-color .25s var(--ease-out),box-shadow .25s var(--ease-out)
}
.home-nav-cta svg{width:16px;height:16px;flex-shrink:0}
.home-nav-cta:hover{
  background-position:95% 0;
  border-color:rgba(40,242,246,.85);
  box-shadow:0 10px 28px rgba(32,107,239,.35);
  transform:translateY(-1px)
}
.home-nav-cta:active{transform:scale(.98)}
.home-nav-cta:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* Named areas, not source order: side by side on desktop, the receiver column
   spans both text rows. At <=1100px it stacks as headline, sub+steps, control. */
.home-main{
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,min(640px,46vw)) minmax(300px,420px);
  grid-template-areas:
    "intro rx"
    "more  rx";
  align-items:center;
  justify-content:space-between;
  align-content:center;
  column-gap:clamp(36px,4vw,80px);
  padding:28px var(--home-inset) 48px
}
.home-intro{grid-area:intro;min-width:0}
.home-more{grid-area:more;min-width:0}
.home-receiver{grid-area:rx;min-width:0}

.home-intro h1{
  margin:0;
  max-width:12ch;
  font-family:var(--font);
  font-size:clamp(2.75rem,5.4vw,4.75rem);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.038em;
  text-wrap:balance;
  color:#fff
}
.home-intro h1 span{display:block}
.home-sub{
  max-width:34rem;
  margin:20px 0 32px;
  color:#ffffffdb;
  font-size:clamp(1.0625rem,1.35vw,1.25rem);
  font-weight:400;
  line-height:1.55;
  text-wrap:pretty;
  /* The headline sits over the aurora; the shadow keeps it legible on the
     brightest frames. */
  text-shadow:0 1px 14px rgba(21,28,50,.85)
}
/* How it works. is-current is the step the switch is on; earlier steps are
   is-done. Driven by setStatus() in adio-one.js. */
.journey{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:34rem;margin:0;padding:0;list-style:none}
.journey-step{display:flex;align-items:flex-start;gap:10px;min-width:0}
.journey-dot{flex-shrink:0;width:8px;height:8px;margin-top:6px;border-radius:50%;background:#8b96b873;transition:background .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.journey-step.is-current .journey-dot{background:var(--cyan);box-shadow:0 0 12px #27e0cfe6}
.journey-step.is-done .journey-dot{background:#27e0cf8c}
.journey-step:not(.is-current):not(.is-done) .journey-dot{opacity:.5}
.journey-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.journey-text strong{font-size:.9375rem;font-weight:600;color:#fff;white-space:nowrap;transition:color .2s var(--ease-out)}
.journey-text span{font-size:.8rem;line-height:1.45;color:var(--mute)}
.journey-step.is-current .journey-text strong{color:var(--cyan)}

/* KO view (/kr/, <html lang="ko">). Montserrat stays first so Latin runs
   ("ADIO", "Tag") keep the brand face and only Hangul falls through to Noto
   Sans KR. */
html:lang(ko){--font:"Montserrat",var(--font-ko)}
html:lang(ko) .home{word-break:keep-all}
html:lang(ko) .home-intro h1{font-family:var(--font-ko);font-weight:700;letter-spacing:-.02em}
html:lang(ko) .home-intro h1 span{color:var(--cyan)}
html:lang(ko) .home-sub{font-weight:400}
html:lang(ko) .home-nav-cta,
html:lang(ko) .rx2-status,
html:lang(ko) .tones-entry,
html:lang(ko) .on-air-badge{letter-spacing:0}

.home-receiver{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:100%;
  max-width:420px;
  justify-self:end;
  text-align:center
}

/* The control. One button in two states; the thumb slides between the two
   halves of the track. */
.rx2{
  --rx2-spring:cubic-bezier(.32,.72,0,1);
  width:100%;
  padding:0;
  border:0;
  border-radius:44px;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation
}
/* Server-rendered disabled so no-JS visitors never press a dead control;
   adio-one.js enables it once the tag is wired. Nothing is dimmed — the
   control is the hero visual either way. */
.rx2:disabled{cursor:default}
.rx2:focus{outline:none}
.rx2:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.rx2-shell{
  display:block;
  padding:8px;
  border:1px solid var(--line);
  border-radius:44px;
  background:linear-gradient(180deg,#ffffff12,#ffffff05);
  box-shadow:inset 0 1px #ffffff1f,0 24px 60px #01081f8c;
  transition:border-color .2s var(--ease-out)
}
/* Proxies the tag's own inbox button, which sits inside the hidden .ouioWidget.
   Shown only while live; display:inline-flex would beat the UA's
   [hidden]{display:none}, so the attribute gets a rule of its own. */
.rx-details{position:relative}
.tones-entry{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:48px;
  margin:18px 0 0;
  padding:10px 18px;
  border:1px solid rgba(40,242,246,.35);
  border-radius:12px;
  background:#07122f8c;
  color:#fff;
  font-family:var(--font);
  font-size:15px;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s var(--ease-out),border-color .2s var(--ease-out)
}
.tones-entry[hidden]{display:none}
.tones-entry:hover{border-color:#28f2f699;transform:translateY(-1px)}
.tones-entry:active{transform:scale(.98)}
.tones-entry:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.tones-entry-icon{width:20px;height:20px;flex-shrink:0;color:var(--cyan)}
/* Tones since the panel was last opened, mirrored from the tag. */
.tones-entry-badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;border-radius:var(--radius-pill);background:var(--cyan);color:var(--navy-4);font-size:13px;font-weight:700;animation:tones-badge 1.6s var(--ease-out) infinite}
.tones-entry-badge[hidden]{display:none}
@keyframes tones-badge{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
/* Zero-size anchor. #ouioApp is pinned to its origin from inside the shadow
   root, so the panel hangs from the centre of the button's bottom edge.
   text-align inherits through the shadow boundary; without the reset the panel
   picks up .home-receiver's centring and every tab renders centred. */
.rx-anchor{position:absolute;left:50%;top:100%;width:0;height:0;text-align:left}

.rx2-track{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  border-radius:36px;
  background:linear-gradient(180deg,var(--navy-4),var(--navy-3));
  box-shadow:inset 0 2px 14px #00000080
}
/* The two halves are the unselected labels. They never move; the thumb slides
   over whichever one is active. */
.rx2-half{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:148px;
  padding:20px 0 16px;
  color:#ffffff9e
}
.rx2-ghost{width:30px;height:30px}
.rx2-word{font-size:15px;font-weight:600;line-height:1.25}
.rx2-thumb{
  position:absolute;
  top:8px;
  bottom:8px;
  left:8px;
  /* Grid rather than a flex column so both words can share one cell: they
     cross-fade in the same spot and the thumb never changes height. */
  display:grid;
  grid-template-areas:"orb" "word";
  justify-items:center;
  align-content:center;
  row-gap:8px;
  width:calc(50% - 8px);
  border-radius:28px;
  background-image:var(--grad-brand);
  box-shadow:inset 0 1px #ffffff59,0 8px 24px #29bfe359;
  /* Starts over the Off half. */
  transform:translate(100%);
  transition:transform .48s var(--rx2-spring)
}
.rx2.is-on .rx2-thumb{transform:translate(0)}
.rx2:active .rx2-thumb{scale:.98}
.rx2-orb{
  position:relative;
  display:block;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#010b2cb8;
  box-shadow:inset 0 1px #ffffff47,0 2px 10px #01081f59
}
.rx2-ticon{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:13px;
  color:#fff;
  transition:opacity var(--duration-fade) var(--ease-out)
}
.rx2-ticon.is-mic,.rx2-tword.is-mic{opacity:0}
.rx2-ticon.is-mute,
.rx2-tword.is-mute,
.rx2.is-on .rx2-ticon.is-mic,
.rx2.is-on .rx2-tword.is-mic{opacity:1}
.rx2.is-on .rx2-ticon.is-mute,
.rx2.is-on .rx2-tword.is-mute{opacity:0}
.rx2-tword{
  color:#fff;
  font-size:15px;
  font-weight:700;
  line-height:1.25;
  transition:opacity var(--duration-fade) var(--ease-out)
}
.rx2-orb{grid-area:orb}
.rx2-tword{grid-area:word}

.rx2-status{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:30px 0 0;
  color:#ffffffeb;
  font-size:1rem;
  font-weight:500;
  line-height:1.4
}
.rx2-status strong{font-weight:700;color:var(--cyan)}
.rx2-dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:#8b96b899}
.rx2-dot.is-live{
  background:var(--cyan);
  box-shadow:0 0 12px #27e0cfe6;
  animation:rx2-pulse 1.6s var(--ease-out) infinite
}
@keyframes rx2-pulse{0%,to{opacity:1}50%{opacity:.45}}
/* Server-rendered next to the dot and unhidden by adio-one.js while the
   receiver is live. [hidden] has to be restated: the display below outranks
   the user-agent rule for it. */
.rx2-eq{display:inline-flex;align-items:flex-end;gap:3px;height:18px}
.rx2-eq[hidden]{display:none}
.rx2-eq i{width:3px;border-radius:2px;background:var(--cyan);transform-origin:bottom;animation:rx2-eq .9s ease-in-out infinite}
.rx2-eq i:nth-child(1){height:60%;animation-delay:0ms}
.rx2-eq i:nth-child(2){height:100%;animation-delay:.15s}
.rx2-eq i:nth-child(3){height:45%;animation-delay:.3s}
.rx2-eq i:nth-child(4){height:75%;animation-delay:.45s}
@keyframes rx2-eq{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}

.rx-error{margin:12px 0 0;color:#ffb4b4;font-size:14px}

.on-air{
  position:relative;
  align-self:center;
  width:min(200px,60%);
  aspect-ratio:200 / 112;
  margin-top:34px
}
.on-air:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;
  background:#010b2c73
}
/* Crops the "A Datavault AI Company" tagline out of logo-white.png. */
.on-air-logo{
  position:absolute;
  left:50%;
  top:16%;
  z-index:1;
  width:56%;
  height:34%;
  overflow:hidden;
  transform:translate(-50%)
}
.on-air-logo img{width:100%;height:100%;object-fit:contain;object-position:center}
.on-air-badge{
  position:absolute;
  left:50%;
  bottom:12%;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  max-width:88%;
  color:#ffffffd9;
  font-size:14px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  transform:translate(-50%)
}
.on-air-badge img{width:14px;height:14px;opacity:.85}

.rx-hint{
  max-width:26rem;
  margin:22px auto 0;
  color:#ffffffbd;
  font-size:.9375rem;
  font-weight:400;
  line-height:1.5;
  text-shadow:0 1px 12px rgba(21,28,50,.8)
}

.home-foot{
  display:flex;
  align-items:center;
  min-height:59px;
  padding:0 var(--home-inset) env(safe-area-inset-bottom,0px);
  background:#010b2c;
  color:#fff;
  font-family:var(--font);
  font-size:12px;
  font-weight:400;
  letter-spacing:.5px;
  text-transform:capitalize
}
.home-foot nav{display:flex;align-items:center;gap:20px}
.home-foot a{
  display:flex;
  align-items:center;
  min-height:48px;
  color:#fff;
  white-space:nowrap;
  text-decoration:none
}
.home-foot a:hover{text-decoration:underline;text-underline-offset:3px}
.home-foot a:focus-visible{outline:2px solid var(--cyan-hot);outline-offset:3px}
.home-foot .dot{width:4px;height:4px;border-radius:50%;background:rgba(139,150,184,.6)}

@media(hover:hover) and (pointer:fine){
  .rx2:not(:disabled):hover .rx2-shell{border-color:#ffffff29}
}

@media(max-width:1100px){
  .home-top{align-items:center;padding:calc(20px + env(safe-area-inset-top,0px)) 20px 0}
  .home-main{
    grid-template-columns:1fr;
    grid-template-areas:
      "intro"
      "more"
      "rx";
    justify-items:center;
    row-gap:40px;
    padding:28px 20px 48px
  }
  .home-intro,.home-more{width:100%;max-width:42rem;text-align:center}
  .home-intro h1,.home-sub{max-width:none;margin-left:auto;margin-right:auto}
  .journey{margin-inline:auto}
  .home-receiver{justify-self:center}
  .home-foot{justify-content:center;padding:0 20px env(safe-area-inset-bottom,0px)}
}

@media(max-width:640px){
  /* The blobs are wider than the viewport by design; clip rather than scroll. */
  .home{overflow-x:clip}
  /* Logo and the single nav button share one row. */
  .home-top{gap:8px;padding:calc(14px + env(safe-area-inset-top,0px)) 16px 0}
  .home-logo,.home-logo img{width:100px;height:35px}
  .home-nav-cta{padding:9px 14px;gap:8px}
  .home-nav-cta svg{width:14px;height:14px}
  /* Headline and sub sit close together; the control keeps its 32px. */
  .home-main{row-gap:16px}
  .home-receiver{margin-top:16px}
  .home-intro h1{font-size:clamp(2.25rem,11vw,3.25rem)}
  .home-sub{margin:0 0 28px;font-size:1.0625rem}
  .journey{gap:8px}
  .journey-step{flex-direction:column;align-items:center;gap:6px;text-align:center}
  .journey-dot{margin-top:0}
  .journey-text strong{font-size:.8125rem}
  .journey-text span{font-size:.72rem}
  .home-foot{justify-content:center;padding:0 16px env(safe-area-inset-bottom,0px)}
  /* The nav's own gap:20px already spaces the dots; this margin doubled it. */
  .home-foot .dot{margin:0}
}

@media(max-width:420px){
  .home-logo,.home-logo img{width:88px;height:31px}
  .home-nav-cta{padding:8px 10px;font-size:12px}
  /* The receiver column is narrow enough here that the default 148px leaves the
     track almost square. Shorter keeps it reading as a track, not a pad. */
  .rx2-half{min-height:120px;padding:16px 0 14px}
}

@media(forced-colors:active){
  .home-nav-cta{outline:1px solid CanvasText}
}

@media(prefers-reduced-motion:reduce){
  .hero-blob{animation:none}
  .rx2-thumb,.rx2-ticon,.rx2-tword{transition:none}
  .rx2:active .rx2-thumb{scale:1}
  .rx2-dot.is-live,.rx2-eq i{animation:none}
  /* Frozen mid-bounce so the bars still read as a level meter. */
  .rx2-eq i{transform:scaleY(.7)}
  .home-nav-cta,.journey-dot,.journey-text strong,.tones-entry{transition:none}
  .home-nav-cta:hover,.tones-entry:hover{transform:none}
  .tones-entry-badge{animation:none}
}

/* /terms and /privacy (views/legal.ejs). Ported from the handoff, which scopes
 * these to a .legal body. The handoff's --stroke is byte-identical to --line,
 * so the border below reuses --line rather than adding a duplicate token. */
.legal{min-height:100dvh;background:var(--navy-2);padding:40px var(--edge) 80px}
.legal header{display:flex;justify-content:space-between;align-items:center;margin-bottom:56px}
.legal header img{height:36px;width:auto}
.legal header a:last-child{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.legal main{max-width:760px}
.eyebrow{margin:0 0 16px;color:var(--cyan);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.legal h1{margin:0 0 16px;font-family:var(--font);font-size:clamp(40px,6vw,64px);font-weight:600;letter-spacing:-.02em;text-wrap:balance}
.legal-lede,.legal p{color:#c9d2ea;line-height:1.65}
.legal article{margin-top:32px}
.legal article+article{margin-top:28px;padding-top:28px;border-top:1px solid var(--line)}
.legal h2{margin:0 0 8px;font-size:22px}
.legal-doc{margin-top:40px}
.text-link{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}