/* Glyph-field hero (alternate). Loaded after styles.css; only adds what that page lacks. */
.glyphField { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Full bleed: the field runs to the edge of the browser, so the arm leaves by the window edge. */
.page { padding: 0; }
.heroFrame.is-glyph { background: #fff; border-radius: 0; }
.heroFrame.is-glyph .heroLockup { top: 16%; }
.heroFrame.is-glyph .heroTag { color: #0a162b; }
/* The page opens on the proposition itself; it is the same words as the learn panel's headline. */
.heroFrame.is-glyph #heroTitle { max-width: none; font-size: 32px; line-height: 40px; }
/* Closed, there are no buttons: "Join us" arrives at the end of the copy, once scrolling has opened it. */
.heroFrame:not(.is-learn) .lockActions { display: none; }
/* The scroll cue: bottom middle of the opening screen, gone while the copy is open. */
.scrollCue {
  position: absolute; left: 50%; bottom: max(28px, 4svh); translate: -50% 0; z-index: 2;
  display: flex; align-items: center; gap: 18px; padding: 8px 12px;
  border: 0; background: none; color: #0a162b; cursor: pointer;
  font: 400 14px/16px "Mona Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase;
  animation: fadeIn .6s ease 1.2s both;
  transition: opacity .3s, visibility 0s;
}
.cueArrows { display: flex; align-items: center; gap: 10px; }
.cueArrow { display: block; }
.scrollCue:focus-visible { outline: 2px solid #2a2de0; outline-offset: 2px; }
.is-learn .scrollCue { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s, visibility 0s .25s; animation: none; }
@media (max-width: 768px) {
  .heroFrame.is-glyph .heroLockup { top: max(13%, 72px); }
  .heroFrame.is-glyph #heroTitle { font-size: min(24px, calc((100vw - 32px) / 17.4)); line-height: 1.27; }
}
/* Edge to edge on an iPhone (main.js sets html.is-bleed and --bleed): the document and the field run --bleed past the
   frame at each end and the page is held scrolled by --bleed, so the field shows behind Safari's bars. The frame itself,
   and everything laid out in it, stays exactly the visible window. */
html.is-bleed, html.is-bleed body { height: auto; background: #fff; }
html.is-bleed .page { height: calc(100vh + 2 * var(--bleed)); height: calc(100svh + 2 * var(--bleed)); padding: var(--bleed) 0; }
html.is-bleed .heroFrame.is-glyph { overflow: visible; }
html.is-bleed .glyphField { top: calc(-1 * var(--bleed)); bottom: auto; height: calc(100% + 2 * var(--bleed)); }

/* Header: the logo alone, centred where the pill used to sit. */
.siteHead { position: fixed; top: 20px; left: 0; right: 0; z-index: 95; height: 60px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.siteHead .logoLink { pointer-events: auto; }
.siteHead.is-back { animation: fadeIn .45s ease .95s both; }   /* the logo, scrolled away on a phone, returns as the page is unwritten */

/* One action under the line. Sharp: no rounding, each corner cut by 8px (--c1…--c4: top left, then clockwise).
   Under a mouse the corners glitch: glitch.js squares random ones off, again and again, until the pointer leaves or presses. */
.cutBtn {
  --cut: 8px; --c1: var(--cut); --c2: var(--cut); --c3: var(--cut); --c4: var(--cut);
  pointer-events: auto; margin-top: 28px;
  display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 28px;
  background: #0a162b; color: #fff; text-decoration: none;
  font: 500 16px/24px "Mona Sans", sans-serif;
  clip-path: polygon(var(--c1) 0, calc(100% - var(--c2)) 0, 100% var(--c2), 100% calc(100% - var(--c3)), calc(100% - var(--c3)) 100%, var(--c4) 100%, 0 calc(100% - var(--c4)), 0 var(--c1));
  transition: background-color .2s;
}
.cutBtn:hover { background: #152940; }
.cutBtn:active { background: #000; }
.cutBtn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #2a2de0; }   /* an outline would be clipped with the corners */

/* The menu: one link out to Wealth, in the bottom right corner, with Meridian's small arrow up and to the right. */
.cornerNav { position: absolute; right: 10px; bottom: 24px; display: flex; pointer-events: none; }
.cornerNav a {
  display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  pointer-events: auto; background: #fff; color: #0a162b; text-decoration: none;
  font: 500 16px/24px "Mona Sans", sans-serif;
  transition: color .16s;
}
/* Hover and keyboard focus: a Meridian dotted underline in ink, 6px under the label; it fades in, nothing moves. */
.cornerNav a { text-decoration: underline dotted transparent; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-decoration-color .18s; }
.cornerNav a:hover, .cornerNav a:focus-visible { text-decoration-color: #0a162b; }
.cornerNav a:focus-visible { outline: 2px solid #2a2de0; outline-offset: -2px; }
.mIcon { flex: none; fill: currentColor; }
.cornerNav .mIcon { width: 11px; height: 11px; transition: transform .18s; }
.cornerNav a:hover .mIcon, .cornerNav a:focus-visible .mIcon { transform: translate(1px, -1px); }
@media (max-width: 768px) {
  .cutBtn { margin-top: 20px; height: 44px; padding: 0 22px; font-size: 15px; }
  .cornerNav { right: 4px; bottom: 8px; }
  .cornerNav a { font-size: 15px; padding: 0 12px; }
}

/* ---------- Learn more (asterisk/learn.js) ---------- */
/* Hidden means hidden: the display rules below would otherwise show the closed panel over the hero. */
.heroLockup [hidden] { display: none !important; }
/* The two actions, side by side. */
.lockActions { display: flex; justify-content: center; gap: 12px; margin-top: 28px; flex: none; }
.lockActions .cutBtn { margin-top: 0; }

/* Secondary: a 1px navy line that follows the cut corners: the button is the navy box, a white layer sits --line inside it. */
.cutBtn--line {
  --line: 1px;
  position: relative; isolation: isolate; display: inline-grid; place-items: center;
  border: 0; cursor: pointer; color: #0a162b; background: #0a162b; -webkit-tap-highlight-color: transparent;
}
.cutBtn--line::before {
  --k: calc(var(--line) * .4142);   /* keeps the diagonal as thick as the sides */
  --k1: max(0px, var(--c1) - var(--k)); --k2: max(0px, var(--c2) - var(--k)); --k3: max(0px, var(--c3) - var(--k)); --k4: max(0px, var(--c4) - var(--k));
  content: ""; position: absolute; inset: var(--line); z-index: -1; background: #fff;
  clip-path: polygon(var(--k1) 0, calc(100% - var(--k2)) 0, 100% var(--k2), 100% calc(100% - var(--k3)), calc(100% - var(--k3)) 100%, var(--k4) 100%, 0 calc(100% - var(--k4)), 0 var(--k1));
  transition: background-color .16s;
}
.cutBtn--line:hover { background: #0a162b; }
.cutBtn--line:active { background: #0a162b; }
.cutBtn--line:active::before { background: #d4deea; }
.cutBtn--line:focus-visible { box-shadow: none; }
.cutBtn--line:focus-visible::before { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #2a2de0; }
@media (min-width: 960px) {
  .learnBack { position: absolute; right: 100%; top: 0; margin: 0; white-space: nowrap; }   /* the panel's 24px side padding is the gap to the headline */
}

/* Learn state: the lockup runs from under the logo to above the sea band; the copy scrolls inside itself if it must. */
.heroFrame.is-learn .heroLockup { top: clamp(80px, 10%, 120px); bottom: max(14%, 88px); }
.heroTag.is-pinned { position: absolute; margin: 0; }
/* One left-aligned column: Back, headline, copy and the one action all start on the same edge. */
.learnPanel, .is-learn .lockActions { width: 100%; max-width: 736px; box-sizing: border-box; padding: 0 24px; }
.learnPanel { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: stretch; min-height: 0; pointer-events: auto; text-align: left; }
/* The column hangs from the top, so the sea gets everything under it. The one action is wide. */
.is-learn .lockActions { justify-content: flex-start; }
.lockActions .cutBtn { flex: none; min-width: 0; transition: background-color .2s, min-width .3s; }
.is-learn .lockActions .cutBtn { min-width: 280px; }
/* The menu steps aside while the copy is open. */
.cornerNav { transition: opacity .25s; }
.is-learn .cornerNav { opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.learnTitle { max-width: none; font-size: 30px; line-height: 38px; outline: none; }
.learnBody { width: 100%; min-height: 0; margin-top: 18px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; text-align: left; font: 400 16px/25px "Mona Sans", sans-serif; color: #2e4b6b; }
.learnBody p { margin: 0 0 12px; }
.learnBody p:last-child { margin-bottom: 0; }
/* When the copy has to scroll, the cut edge fades instead of slicing a line. */
.learnBody.is-clipped { -webkit-mask-image: linear-gradient(#000 calc(100% - 40px), transparent); mask-image: linear-gradient(#000 calc(100% - 40px), transparent); }
/* Kicker: body ink rather than muted, because #5e81a1 is under 4.5:1 at this size. */
.learnKicker { font: 500 12px/18px "Mona Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #2e4b6b; }
.learnBody .learnKicker { margin-bottom: 12px; }
.learnBody .learnClose { margin-bottom: 0; color: #0a162b; font-weight: 500; }
.srOnly { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; user-select: none; }

/* Cells to letters. Every character starts as a small square in its own place, flickers to a digit, then resolves;
   --d (per character, set by learn.js by distance from the asterisk) and --dur (per block) drive the clock. Paint only. */
.rv .w { white-space: nowrap; }
.rv .ch { position: relative; }
.rv .ch::before, .rv .ch::after { position: absolute; opacity: 0; pointer-events: none; }
.rv .ch::before { content: ""; left: 50%; top: 50%; width: .34em; height: .34em; margin: -.12em 0 0 -.17em; background: #5e81a1; }
.rv .ch::after { content: attr(data-g); inset: 0; display: flex; align-items: center; justify-content: center; font-size: .72em; color: #5e81a1; letter-spacing: 0; }
/* The learn text is printed by the canvas first, in the cells of its grid, behind the rain; the type then takes over
   from the cells (--d is when the rain has written a letter's place). It comes up in full ink, like the head of a
   stream, and settles to its own colour. Closing, it gives way just before the rain clears it. No squares or digits here. */
.learnPanel .ch::before, .learnPanel .ch::after { content: none; }
.learnPanel .is-in .ch { animation-name: mxIn; }
.learnPanel .is-out .ch { animation-name: mxOut; }
@keyframes mxIn { 0% { color: transparent; } 18%, 45% { color: #0a162b; } }
@keyframes mxOut { to { color: transparent; } }
/* Back and the action arrive with the copy, not before it. */
@keyframes fadeIn { from { opacity: 0; } }
/* ...and Back leaves as the rain starts to clear the page. */
@keyframes fadeOut { to { opacity: 0; } }
/* "Join us" comes with the rain: in once its row is written (--d, set by learn.js), out when the rewind reaches it. */
.lockActions.is-in { animation: fadeIn var(--dur) ease var(--d, 0s) both; }
.lockActions.is-out { animation: fadeOut var(--dur) ease var(--d, 0s) both; pointer-events: none; }
.is-in .ch { animation: chIn var(--dur) linear var(--d) both; }
.is-in .ch::before { animation: cellIn var(--dur) linear var(--d) both; }
.is-in .ch::after { animation: digitIn var(--dur) linear var(--d) both; }
.is-out .ch { animation: chOut var(--dur) linear var(--d) both; }
.is-out .ch::before { animation: cellOut var(--dur) linear var(--d) both; }
@keyframes chIn { 0%, 70% { color: transparent; } }
@keyframes cellIn { 0% { opacity: 0; transform: scale(0); } 16%, 46% { opacity: 1; transform: none; } 47%, 100% { opacity: 0; } }
@keyframes digitIn { 0%, 46% { opacity: 0; } 47%, 70% { opacity: 1; } 71%, 100% { opacity: 0; } }
@keyframes chOut { 30%, 100% { color: transparent; } }
@keyframes cellOut { 0%, 20% { opacity: 0; } 30%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0); } }

/* Short desktop windows: a little tighter so the copy scrolls less, still leaving the sea its band. */
@media (min-width: 769px) and (max-height: 800px) {
  .heroFrame.is-learn .heroLockup { top: 80px; bottom: max(12%, 72px); }
  .learnTitle { font-size: 26px; line-height: 32px; }
  .learnBody { margin-top: 12px; font-size: 15px; line-height: 23px; }
  .learnBody p { margin-bottom: 9px; }
  .lockActions { margin-top: 20px; }
}
@media (max-width: 768px) {
  .lockActions { margin-top: 20px; }
  .learnPanel, .is-learn .lockActions { padding: 0 8px; flex: none; }
  /* A phone scrolls the whole page as one: the logo (learn.js seats the header in the lockup), 32px of air, headline,
     copy, then the actions at its end, wherever the copy ends. The lockup fills the frame; the column leaves under its
     top edge and sinks into the sea, whose horizon is at 86% of the frame (sea.js): --sea is that line, and the
     padding under the actions lets them come to rest just above it. */
  .heroFrame.is-learn .heroLockup {
    --sea: 86%;
    top: 0; bottom: 0; padding-top: 92px;
    overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none; pointer-events: auto;
    -webkit-mask-image: linear-gradient(transparent, rgba(0, 0, 0, .5) 10px, #000 24px, #000 calc(var(--sea) - 12px), rgba(0, 0, 0, .8) calc(var(--sea) + 6px), rgba(0, 0, 0, .5) calc(var(--sea) + 24px), rgba(0, 0, 0, .22) calc(var(--sea) + 44px), rgba(0, 0, 0, .06) calc(var(--sea) + 66px), transparent calc(var(--sea) + 84px));
    mask-image: linear-gradient(transparent, rgba(0, 0, 0, .5) 10px, #000 24px, #000 calc(var(--sea) - 12px), rgba(0, 0, 0, .8) calc(var(--sea) + 6px), rgba(0, 0, 0, .5) calc(var(--sea) + 24px), rgba(0, 0, 0, .22) calc(var(--sea) + 44px), rgba(0, 0, 0, .06) calc(var(--sea) + 66px), transparent calc(var(--sea) + 84px));
  }
  .heroFrame.is-learn .heroLockup::-webkit-scrollbar { display: none; }
  .heroFrame.is-learn .heroLockup::after { content: ""; flex: none; height: calc(14vh + 16px); height: calc(14svh + 16px); }
  .heroLockup > .siteHead { position: absolute; }
  .learnBody { overflow: visible; }
  /* The actions: Back, small, then "Join us" taking the rest of the row. */
  .is-learn .lockActions { gap: 10px; margin-top: 24px; }
  .is-learn .lockActions .cutBtn { min-width: 0; }
  .is-learn .lockActions a.cutBtn { flex: 1 1 0; }
  .learnTitle { font-size: min(22px, calc((100vw - 48px) / 15)); line-height: 1.27; }
  .learnBody { margin-top: 16px; font-size: 15px; line-height: 24px; }
  .learnBody p { margin-bottom: 12px; }
}
/* Short phones: a touch tighter before the copy has to scroll. */
@media (max-width: 768px) and (max-height: 760px) {
  .learnBody { margin-top: 12px; line-height: 22px; }
  .learnBody p { margin-bottom: 10px; }
  .learnBody .learnKicker { margin-bottom: 8px; }
}