/* The home page's own sections, and .not-found for 404.html. Every selector is prefixed with its section. */

/* #hero. --s is one art pixel of bay-night. Its bottom never ends above the window, and --hills is where its dark land starts, so the
   words and the form sit in the sky just above the bridge, not at the top of the screen. */
#hero{--s:calc(100vw / 1400);--hills:clamp(470px,62svh,calc(100svh - 240px));--plate-top:max(calc(100svh - 788 * var(--s)),calc(var(--hills) - 460 * var(--s)));--ui:clamp(380px,34.7vw,500px);--edge:max(var(--gutter),calc((100vw - var(--wrap)) / 2));--col-gap:clamp(32px,4vw,64px);position:relative}
#hero .bay-track{display:contents}
#hero .bay{position:relative;overflow:hidden;background:var(--ink)}
#hero .bay-world{position:absolute;left:0;top:var(--plate-top);width:calc(1400 * var(--s));height:calc(788 * var(--s))}
#hero .hero-plate{position:absolute;inset:0;width:100%;height:100%;max-width:none;image-rendering:pixelated}
#hero .bay-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#hero .bay-moon{fill:var(--ink)}
#hero .bay-lit{fill:none;stroke:var(--paper);stroke-width:2}
#hero .bay-pearl image{image-rendering:pixelated}
#hero .bay-end{position:absolute;display:inline-flex;align-items:center;gap:7px;padding:3px 8px;border-radius:6px;background:var(--ink);font-size:15px;line-height:22px;font-weight:600;white-space:nowrap}
#hero .bay-end-pearl{left:calc(120 * var(--s));top:calc(585 * var(--s));transform:translateY(-100%)}
#hero .bay-end-eth{right:calc(14 * var(--s));top:calc(585 * var(--s));transform:translateY(-100%)}
#hero .bay-logo{width:auto;height:.86em;fill:var(--paper)}
#hero .bay-logo-eth{height:1.1em}
#hero .hero-front{position:relative;z-index:2}
#hero .hero-columns{display:grid;grid-template-columns:minmax(0,1fr) var(--ui);gap:var(--col-gap);align-items:center;padding-inline:var(--edge)}
#hero h1{font-size:min(var(--size-hero),calc((100vw - 2 * var(--edge) - var(--ui) - var(--col-gap)) / 6.6))}
#hero h1 br{display:none}
#hero .hero-lede{max-width:30em;margin-top:clamp(12px,2svh,20px);font-size:clamp(18px,1.45vw,22px);line-height:1.4;color:var(--fg-2);text-wrap:balance}
#hero .hero-line{display:block;overflow:clip;padding-bottom:.16em;margin-bottom:-.16em;white-space:nowrap}
#hero .hero-line>span{display:block;width:fit-content}
/* The two calls to action, side by side at their own widths. Sign up opens its email field in the same space, so nothing moves. */
#hero .hero-actions{width:min(100%,520px);margin-top:clamp(20px,3svh,32px)}
#hero .cta-body{display:grid}
#hero :is(.cta-row,.cta-form){grid-area:1/1;min-width:0}
#hero .cta-row{display:flex;flex-wrap:wrap;gap:8px}
#hero .cta-row a.cta-button{background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 1px rgb(244 242 236 / .5)}
@media (hover:hover) and (pointer:fine){#hero .cta-row a.cta-button:hover{background:var(--ink-soft)}}
html:not(.js) #hero .cta-row a.cta-button{background:var(--paper);color:var(--ink);box-shadow:none}
#hero .cta-button{gap:10px}
#hero .cta-button svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#hero .cta.is-open .cta-row{visibility:hidden}
#hero .cta-form{display:flex;align-items:stretch;gap:8px;animation:cta-in 180ms var(--ease-out)}
#hero .cta-form[hidden]{display:none}
@keyframes cta-in{from{opacity:0}}
#hero .cta-input{flex:1 1 0;min-width:0;min-height:56px;padding:12px 16px;border:0;border-radius:8px;background:var(--ink);box-shadow:inset 0 0 0 1px rgb(244 242 236 / .5);color:var(--paper);caret-color:var(--paper);font-size:17px;line-height:24px;appearance:none;-webkit-appearance:none;transition:box-shadow var(--hover-out) var(--ease-out)}
#hero .cta-input::placeholder{color:var(--paper-72);opacity:1}
#hero .cta-input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--paper);transition-duration:var(--hover-in)}
#hero .cta-input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--mineral)}
#hero .cta-submit{flex:none;padding-inline:20px}
#hero .cta-close{flex:none;display:grid;place-items:center;width:44px;border-radius:8px;color:var(--paper);background:var(--ink)}
#hero .cta-close .icon{transform:rotate(45deg)}
#hero .cta-status{margin-top:8px;font-size:16px;line-height:22px;font-weight:500;color:var(--paper);text-wrap:balance}
#hero .cta-status:empty{display:none}
#hero .label-short{display:none}
@media (max-width:420px){
  #hero .label-long{display:none}
  #hero .label-short{display:inline}
}
@media (max-width:560px){
  #hero .cta-button{flex:1 1 0;padding-inline:12px}
}
@media (max-width:340px){
  #hero .cta-button svg{display:none}
}
html:not(.js) #hero .cta-signup{display:none}
#hero .hero-front :is(a,button,input){scroll-margin:0}

/* The bridge UI: the same layout, look and spacing as the app's bridge screen. No card. */
#hero .hb{width:var(--ui);--amount-h:clamp(52px,8svh,68px)}
#hero .hb-top{display:flex;align-items:center;gap:10px;min-height:24px;font-size:15px;line-height:24px;color:var(--fg-2)}
#hero .hb-label{min-width:40px;font-weight:500}
#hero .hb-chain{display:inline-flex;align-items:baseline;gap:7px;color:var(--fg);font-weight:600}
#hero .hb-logo{display:inline-block;flex:none;width:auto;height:.86em;vertical-align:-.06em}
#hero .hb-logo-pearl{fill:var(--paper)}
#hero .hb-logo-eth{height:1.04em;align-self:center}
#hero .hb-logo-wp{width:1.08em;height:1.08em;align-self:center}
#hero .hb-row{position:relative;display:flex;align-items:baseline;gap:14px;margin-top:2px}
#hero .hb-row-in::after{content:'';position:absolute;inset:auto 0 0;height:4px;background:var(--fg);transform:scaleY(.5);transform-origin:bottom;transition:transform var(--hover-out) var(--ease-out);pointer-events:none}
#hero .hb-row-in:focus-within::after{transform:none;transition-duration:var(--hover-in)}
#hero .hb-amount{flex:1;display:block;min-width:0;width:100%;height:var(--amount-h);padding:0;border:0;border-radius:0;background:none;color:var(--fg);caret-color:var(--fg);font-family:var(--font-display);font-optical-sizing:auto;font-size:min(clamp(40px,3.9vw,56px),calc(var(--amount-h) * .9));font-weight:400;line-height:var(--amount-h);letter-spacing:-.025em;font-variant-numeric:lining-nums;outline:none;appearance:none;-webkit-appearance:none}
#hero .hb-amount::placeholder{color:var(--fg-2);opacity:1}
#hero output.hb-amount{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hero .hb-amount.is-zero{color:var(--fg-2)}
#hero .hb-token{display:inline-flex;align-items:baseline;gap:8px;flex:none;font-family:var(--font-display);font-optical-sizing:auto;font-size:clamp(22px,1.8vw,26px);line-height:1;letter-spacing:-.02em}
#hero .hb-side+.hb-side{margin-top:clamp(8px,1.6svh,16px)}
#hero .hb-rate{display:flex;align-items:center;min-height:clamp(32px,4.8svh,44px);font-size:15px;line-height:24px;color:var(--fg-2)}
#hero .hb-cta{width:100%}

/* The entrance, once. Only the words arrive; the art is simply there. */
html.js:not(.rm) #hero .hero-line>span{transition:transform 700ms var(--ease-out)}
html.js:not(.rm) #hero .hero-line:last-of-type>span{transition-delay:90ms}
html.js:not(.rm) #hero :is(.hero-lede,.hero-actions,.hb){transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
html.js:not(.rm) #hero .hero-lede{transition-delay:120ms}
html.js:not(.rm) #hero .hero-actions{transition-delay:160ms}
html.js:not(.rm) #hero .hb{transition-delay:220ms}
html.js:not(.rm) #hero:not(.is-entered) .hero-line>span{transform:translateY(128%)}
html.js:not(.rm) #hero:not(.is-entered) :is(.hero-lede,.hero-actions,.hb){opacity:0;transform:translateY(10px)}
html.js:not(.rm) #hero.no-entrance :is(.hero-line>span,.hero-lede,.hero-actions,.hb){transition:none}

/* The steps, in the flow: reduced motion, no JS, or a failed module. */
#crossing{position:relative;z-index:1}
#crossing h2{font-size:clamp(40px,min(6vw,9svh),96px)}
#crossing h3{font-family:var(--font-display);font-optical-sizing:auto;font-weight:400;letter-spacing:-.02em;line-height:1.04;font-size:clamp(30px,2.8vw,48px)}
#crossing p{color:var(--fg-2)}
html:not(.js) #hero,html.rm #hero{padding-top:calc(var(--header-clear) + 16px)}
html:not(.js) #hero{display:flex;flex-direction:column}
html.rm #hero{display:flex;flex-direction:column}
html:not(.js) #hero .hero-front,html.rm #hero .hero-front{order:0}
html:not(.js) #hero .bay,html.rm #hero .bay{order:1;height:calc(290 * var(--s));margin-top:24px}
html:not(.js) #hero .bay-world,html.rm #hero .bay-world{top:calc(-490 * var(--s))}
html:not(.js) #hero :is(.bay-line,.bay-end),html.rm #hero :is(.bay-line,.bay-end){display:none}
html:not(.js) #crossing,html.rm #crossing{order:2;padding:clamp(32px,5vw,72px) max(var(--gutter),calc((100vw - var(--wrap)) / 2)) clamp(72px,9vw,120px)}
html:not(.js) .crossing-steps,html.rm .crossing-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin-top:clamp(24px,3vw,40px)}
html:not(.js) .crossing-steps p,html.rm .crossing-steps p{margin-top:8px}

/* Scrolling: the bridge stays while the words go up off it, and the steps come up onto it. It is one still picture: nothing zooms. */
html.js:not(.rm) #hero .bay-track{display:block;position:absolute;inset:0;z-index:0}
html.js:not(.rm) #hero .bay{position:sticky;top:0;height:100svh}
html.js:not(.rm) #hero .hero-front{display:flex;align-items:flex-start;height:100svh;padding-top:72px}
html.js:not(.rm) #hero .hero-columns{width:100%;min-height:calc(var(--hills) - 88px)}
html.js:not(.rm) #hero .bay-world{will-change:transform}
html.js:not(.rm) #hero .bay-lit{stroke-dasharray:1 1}
html.js:not(.rm) #hero .bay-pearl{opacity:0}
html.js:not(.rm) #hero .bay-wp{opacity:0}
html.js:not(.rm) #crossing{height:330svh}
html.js:not(.rm) .crossing-pin{--steps-top:max(236px,calc(var(--hills) - 190px),calc(var(--plate-top) + 204 * var(--s)));position:sticky;top:0;height:100svh;overflow:clip;pointer-events:none;opacity:0}
html.js:not(.rm) #crossing h2{position:absolute;left:max(var(--gutter),calc((100vw - var(--wrap)) / 2));top:clamp(72px,10svh,96px)}
html.js:not(.rm) .crossing-steps li{position:absolute;left:calc(var(--x) * var(--s));top:var(--steps-top);width:calc(222 * var(--s));height:calc(var(--plate-top) + var(--y) * var(--s) - var(--steps-top));padding-left:12px;color:var(--mineral);transition:color 200ms var(--ease-out)}
html.js:not(.rm) .crossing-steps li::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1.5px;background:var(--paper);transform:scaleY(0);transform-origin:bottom;transition:transform 300ms var(--ease-out)}
html.js:not(.rm) .crossing-steps li p{margin-top:6px;padding-right:12px;font-size:clamp(15px,1.2vw,20px);line-height:1.4;color:var(--paper-72);opacity:0;transform:translateY(6px);transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out)}
html.js:not(.rm) .crossing-steps li.is-reached{color:var(--paper)}
html.js:not(.rm) .crossing-steps li.is-reached::before{transform:none}
html.js:not(.rm) .crossing-steps li.is-reached p{opacity:1;transform:none}

/* Stacked: phones, narrow windows and short ones. The words and form are an opaque sheet that scrolls off the bridge. The bridge is
   wider than the window here, so it pans with the pearl, and one step shows at a time. */
@media (max-width:899px),(max-height:480px){
  #hero{--s:max(calc(100vw / 700),1.25px);--ui:100%;--hills:0px;--plate-top:max(calc(66svh - 560 * var(--s)),calc(100svh - 788 * var(--s)))}
  #hero .hero-columns{display:block;padding-inline:var(--gutter)}
  #hero h1{font-size:clamp(40px,calc((100vw - 2 * var(--gutter)) / 6.6),80px)}
  #hero .hb{max-width:560px;margin-top:clamp(20px,3svh,32px);--amount-h:clamp(52px,7svh,64px)}
  #hero .hb-amount{font-size:min(clamp(40px,12vw,52px),calc(var(--amount-h) * .9))}
  #hero .hb-token{font-size:clamp(20px,5.6vw,24px)}
  #hero .hero-actions{width:min(100%,560px)}
  html:not(.js) #hero .bay,html.rm #hero .bay{height:calc(290 * var(--s))}
  html:not(.js) #hero .bay-world,html.rm #hero .bay-world{left:calc(50vw - 760 * var(--s))}
  html:not(.js) .crossing-steps,html.rm .crossing-steps{grid-template-columns:minmax(0,1fr)}
  html.js:not(.rm) #hero .hero-front{height:auto;padding-block:clamp(72px,10svh,96px) 32px;background:var(--ink)}
  html.js:not(.rm) #hero .hero-columns{min-height:0}
  html.js:not(.rm) #hero .hero-front::after{content:'';position:absolute;inset-inline:0;top:calc(100% - 1px);height:calc(80 * var(--art-px));background:url('../art/edge-ink.webp') repeat-x 0 100% / calc(512 * var(--art-px)) 100%;image-rendering:pixelated;transform:scaleY(-1);pointer-events:none}
  html.js:not(.rm) .crossing-pin{--steps-top:0px}
  html.js:not(.rm) #crossing h2{left:var(--gutter);top:clamp(68px,9svh,88px);font-size:clamp(30px,8.4vw,48px)}
  html.js:not(.rm) .crossing-steps li{left:var(--gutter);right:var(--gutter);top:calc(clamp(68px,9svh,88px) + clamp(84px,22vw,116px));width:auto;height:auto;padding-left:0;opacity:0;transition:opacity 200ms var(--ease-out)}
  html.js:not(.rm) .crossing-steps li::before{display:none}
  html.js:not(.rm) .crossing-steps li.is-now{opacity:1}
  html.js:not(.rm) .crossing-steps li p{max-width:30em;font-size:17px}
  html.js:not(.rm) .crossing-steps li h3{font-size:clamp(34px,9.6vw,52px)}
}
@media (max-height:480px){
  html.js:not(.rm) #crossing h2{display:none}
  html.js:not(.rm) .crossing-steps li{top:60px}
  #hero{--plate-top:calc(74svh - 560 * var(--s))}
}

/* With no JS the header's links wrap on a phone and need the room. */
@media (max-width:700px){
  html:not(.js) #hero{padding-top:132px}
}


/* #perspective. The sky is the page's ground, and the words sit in it. */
#perspective .persp-stage{position:relative;display:flex;flex-direction:column;min-height:100svh;overflow:clip}
#perspective .persp-copy{position:relative;z-index:1;padding-block:clamp(88px,15svh,176px) 24px}
#perspective h2{line-height:1.02}
#perspective .persp-lede{max-width:37em;margin-top:clamp(16px,2svh,24px);font-size:clamp(18px,1.45vw,22px);line-height:1.45;color:var(--fg-2)}
#perspective .persp-go{margin-top:clamp(24px,3svh,32px)}
@media (max-width:900px){
  /* One column: the words on flat Ink, then the doorway under them, so no sentence runs across the trees. */
  #perspective .persp-stage{min-height:0}
  #perspective .persp-copy{padding-block:clamp(72px,14vw,112px) 0}
  #perspective h2{font-size:min(var(--size-section),calc((100vw - 2 * var(--gutter)) / 9.3))}
  #perspective :is(h2,.persp-lede) span{background:none}
}
#perspective :is(h2,.persp-lede) span{background:var(--ink);-webkit-box-decoration-break:clone;box-decoration-break:clone}   /* hides the plate's stars behind the words */
@media (min-aspect-ratio:2/1) and (min-width:1600px){
  /* Ultrawide: the hills come up behind the words, where a box would cut notches out of them. A soft ink glow instead. */
  #perspective :is(h2,.persp-lede) span{background:none;text-shadow:0 0 .12em var(--ink),0 0 .3em var(--ink),0 0 .6em var(--ink)}
}
#perspective .persp-art{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--ink)}
#perspective .persp-plate{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:78% 100%;image-rendering:pixelated;transform-origin:0 0}
@media (max-width:900px){
  #perspective .persp-plate{object-position:86% 100%}
  #perspective .persp-art{position:relative;inset:auto;order:2;height:clamp(300px,92vw,640px);margin-top:clamp(8px,3vw,24px)}
}

/* #family. By day, on the pavilion plate. Its sky is the page's paper and the words sit in it. The real wallet is top to bottom of the window, as on the wallet site. --ph is the whole device. */
#family{--ph:min(1040px,95svh,calc((50vw - var(--gutter) - 12px) / .488));--bz:calc(var(--ph) * .0095);--sh:calc(var(--ph) * .913);--sw:calc(var(--sh) * .5142857);--pw:calc(var(--sw) + 2 * var(--bz));padding-block:clamp(16px,2.5svh,40px) calc(80 * var(--art-px) + 24px)}
#family .family-art{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#family .family-art img{position:absolute;left:0;top:max(calc(100% - 56.28vw),0px);width:100%;height:auto;max-width:none;image-rendering:pixelated}   /* its foot on the section's foot, but on an ultrawide screen the whole sky stays above the words' depth and the water is what's cut */
#family .family-stage{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:clamp(24px,4vw,64px)}
#family .family-copy{position:relative;z-index:1;width:auto;margin:0;padding-top:clamp(64px,10svh,128px);padding-left:max(var(--gutter),calc((100vw - var(--wrap)) / 2))}
#family h2{font-size:min(var(--size-section),calc(((100vw - 64px) / 2 - max(var(--gutter),(100vw - var(--wrap)) / 2)) / 8.3))}
#family .family-lede{max-width:26em;margin-top:clamp(16px,2svh,24px);font-size:clamp(18px,1.45vw,22px);line-height:1.45;color:var(--fg-2)}
#family .family-go{margin-top:clamp(24px,3svh,32px)}
/* The art rises 29.8vw above the section's foot (the cypress over the words' left edge), so the words' column is at least that much
   taller than the words, less the section's own foot padding. The phone stays at the top. */
#family .family-copy{padding-bottom:calc(24.1vw + 16px)}
#family .family-scene{position:relative;display:flex;justify-content:center;align-items:center;padding-right:max(var(--gutter),calc((100vw - var(--wrap)) / 2))}
#family .family-device{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px}
#family .family-phone{width:var(--pw);height:var(--ph)}
#family .family-phone-body{width:100%;height:100%;padding:var(--bz);border-radius:calc(var(--ph) * .064);background:var(--ink-soft);box-shadow:inset 0 0 0 1px rgb(141 177 193 / .45),0 calc(var(--ph) * .03) calc(var(--ph) * .08) rgb(27 43 65 / .32)}
#family .family-phone-screen{display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;border-radius:calc(var(--ph) * .0545);background:var(--ink)}
#family .family-phone-status{position:relative;flex:none;display:flex;align-items:center;justify-content:space-between;height:calc(var(--ph) * .042);padding:calc(var(--ph) * .006) calc(var(--ph) * .036) 0;color:var(--paper);font-size:calc(var(--ph) * .0174);line-height:1;font-weight:600;font-variant-numeric:tabular-nums}
#family .family-phone-island{position:absolute;left:50%;top:calc(var(--ph) * .0085);width:calc(var(--ph) * .112);height:calc(var(--ph) * .028);margin-left:calc(var(--ph) * -.056);border-radius:999px;background:var(--ink-soft)}
#family .family-phone-signal{display:flex;align-items:center;gap:calc(var(--ph) * .005)}
#family .family-phone-signal svg{width:calc(var(--ph) * .022);height:auto;fill:currentColor}
#family .family-phone-window{position:relative;flex:none;width:var(--sw);height:var(--sh);overflow:hidden;background:var(--ink)}
#family .family-phone-window iframe{position:absolute;inset:0 auto auto 0;display:block;width:360px;height:700px;border:0;overflow:hidden;color-scheme:dark;transform:scale(var(--phone-scale,1));transform-origin:0 0}
#family .family-phone-poster{position:absolute;inset:0;z-index:1;width:100%;height:100%;max-width:none;transition:opacity 200ms linear}
#family .family-phone-poster.is-gone{opacity:0;pointer-events:none}
#family .family-phone-home{flex:none;display:grid;place-items:center;height:calc(var(--ph) * .026)}
#family .family-phone-home>span{width:calc(var(--ph) * .14);height:calc(var(--ph) * .0056);border-radius:999px;background:var(--paper)}
#family .family-phone-window:has(iframe:focus-visible){outline:2px solid var(--paper);outline-offset:-2px}
@media (max-width:900px),(max-height:480px){
  /* One column: the words, the phone, then the pavilion, which the next section dissolves over. */
  #family{--ph:min(1040px,max(95svh,600px),calc((100vw - 2 * var(--gutter)) / .488));padding-block:clamp(56px,10vw,96px) 0}
  #family .family-stage{display:block}
  #family .family-copy{padding:0 var(--gutter)}
  #family h2{font-size:min(var(--size-section),calc((100vw - 2 * var(--gutter)) / 8.3))}
  #family .family-art{position:relative;inset:auto;height:clamp(260px,78vw,560px);margin-top:clamp(24px,5vw,48px)}
  #family .family-art img{position:static;height:100%;object-fit:cover;object-position:14% 100%}
  #family .family-scene{min-height:0;justify-content:center;margin-top:clamp(40px,8vw,64px);padding:0 0 12px}
  }

/* The bridge sheet in the phone. --pu is 1/360 of the phone's screen, the app's own width, so it scales with the app behind it. */
#family .pb{--pu:calc(var(--sw) / 360);position:absolute;inset:auto 0 0;z-index:2;padding:calc(10 * var(--pu)) calc(20 * var(--pu)) calc(20 * var(--pu));border-radius:calc(20 * var(--pu)) calc(20 * var(--pu)) 0 0;background:var(--ink-soft);box-shadow:0 calc(-1 * var(--pu)) 0 rgb(141 177 193 / .45);color:var(--paper)}
#family .pb-grip{display:block;width:calc(40 * var(--pu));height:calc(4 * var(--pu));margin:0 auto calc(12 * var(--pu));border-radius:99px;background:var(--mineral)}
#family .pb-title{font-size:calc(20 * var(--pu));line-height:1.2;font-weight:600}
#family .pb-side{margin-top:calc(12 * var(--pu))}
#family .pb-top{display:flex;align-items:center;gap:calc(8 * var(--pu));font-size:calc(14 * var(--pu));line-height:1.5;color:var(--paper-72)}
#family .pb-top label,#family .pb-top>span:first-child:not(:last-child){min-width:calc(38 * var(--pu))}
#family .pb-top>span:last-child{display:inline-flex;align-items:center;gap:calc(6 * var(--pu));color:var(--paper);font-weight:600}
#family .bay-logo{width:auto;height:calc(12 * var(--pu));fill:var(--paper)}
#family .bay-logo-eth{height:calc(15 * var(--pu))}
#family .pb-row{display:flex;align-items:center;gap:calc(10 * var(--pu));height:calc(46 * var(--pu))}
#family .pb-row-in{box-shadow:inset 0 calc(-2 * var(--pu)) 0 var(--paper)}
#family .pb-amount{flex:1;display:block;min-width:0;width:100%;padding:0;border:0;background:none;color:var(--paper);caret-color:var(--paper);font-family:var(--font-display);font-size:calc(34 * var(--pu));line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#family .pb-amount::placeholder{color:var(--paper-72);opacity:1}
#family .pb-amount:focus{outline:none}
#family .pb-amount.is-zero{color:var(--paper-72)}
#family .pb-token{display:inline-flex;align-items:center;gap:calc(6 * var(--pu));flex:none;font-family:var(--font-display);font-size:calc(20 * var(--pu))}
#family .pb-wp{width:calc(20 * var(--pu));height:calc(20 * var(--pu))}
#family .pb-cta{width:100%;min-height:max(44px,calc(48 * var(--pu)));margin-top:calc(16 * var(--pu));padding-block:0;font-size:calc(16 * var(--pu))}

/* #questions. */
#questions{padding-block:clamp(72px,9vw,144px) clamp(24px,3vw,48px)}
#questions .questions-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);align-items:start}
#questions .questions-art{position:sticky;top:max(24px,calc(50svh - 21vw));margin-top:-3vw}
#questions .questions-art img{width:100%}
#questions .questions-more{margin-block:clamp(8px,1vw,12px) clamp(20px,2.4vw,32px)}
#questions details+details{border-top:1px solid var(--ink-soft)}
#questions summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;padding-block:clamp(14px,1.4vw,20px);font-family:var(--font-display);font-optical-sizing:auto;font-size:clamp(22px,1.95vw,30px);font-weight:400;line-height:1.15;letter-spacing:-.015em;cursor:pointer;list-style:none;transition:color var(--hover-out) var(--ease-out)}
#questions summary::-webkit-details-marker{display:none}
#questions summary .icon{width:24px;height:24px;stroke-width:1.46;transition:transform 200ms var(--ease-out)}
#questions details[open] summary .icon{transform:rotate(45deg)}
@media (hover:hover) and (pointer:fine){
  #questions summary:hover{color:var(--mineral);transition-duration:var(--hover-in)}
}
/* Height on grid rows, so nothing is measured. Where ::details-content is missing the answer simply appears. */
#questions details{interpolate-size:allow-keywords}
#questions details::details-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows 250ms var(--ease-drop),content-visibility 250ms allow-discrete}
#questions details[open]::details-content{grid-template-rows:1fr}
#questions .questions-answer{min-height:0;overflow:hidden;opacity:0;transition:opacity 250ms var(--ease-drop)}
#questions details[open] .questions-answer{opacity:1}
#questions .questions-answer p{max-width:38em;padding-bottom:clamp(20px,2vw,28px);color:var(--fg-2)}
@media (max-width:860px){
  #questions .questions-grid{display:block}
  #questions .questions-art{position:static;width:min(100%,520px);margin:-6vw auto 0}
  #questions h2{margin-top:-6vw}
}


/* 404.html. */
.not-found{position:relative;display:flex;align-items:center;min-height:100svh;padding-block:112px 64px;overflow:clip}
.not-found>img{position:absolute;top:50%;right:max(-8vw,calc(50vw - 900px));width:min(62vw,900px);height:auto;transform:translateY(-50%);pointer-events:none}
.not-found .wrap{position:relative;z-index:1}
.not-found h1{margin-bottom:clamp(8px,1vw,16px)}
@media (max-width:760px){
  .not-found{flex-direction:column;align-items:stretch;justify-content:center}
  .not-found>img{position:static;width:min(100%,460px);margin:0 auto -12px;transform:none}
}

@media (min-width:2400px){
  #hero .hb{--amount-h:clamp(68px,2.9vw,120px)}
  #hero .hb-amount{font-size:min(clamp(56px,2.4vw,96px),calc(var(--amount-h) * .9))}
  #hero .hb-token{font-size:clamp(26px,1.1vw,40px)}
  #hero .hb-top,#hero .hb-rate{font-size:clamp(15px,.7vw,24px);line-height:1.5}
  #hero .cta-input{min-height:clamp(56px,2.566vw,99px);font-size:clamp(17px,.779vw,30px)}
  #hero .cta-button svg{width:clamp(20px,.9vw,30px);height:clamp(20px,.9vw,30px)}
  #family{--ph:min(1800px,95svh)}
  #hero{--ui:clamp(620px,26vw,1000px)}
  #hero .hero-actions{width:min(100%,clamp(520px,24vw,880px))}
  #hero .hero-lede{font-size:clamp(22px,.95vw,34px)}
  #hero .bay-end{padding:.2em .55em;font-size:clamp(15px,.62vw,24px);line-height:1.45}
  html.js:not(.rm) .crossing-steps li p{font-size:clamp(20px,.8vw,30px)}
  #crossing h3{font-size:clamp(48px,1.9vw,72px)}
  #perspective .persp-lede,#family .family-lede{font-size:clamp(22px,.95vw,34px)}
  #questions summary{font-size:clamp(30px,1.25vw,44px)}
}
@media (prefers-reduced-motion:reduce){
  #questions details::details-content,#questions .questions-answer,#questions summary .icon{transition:none}
}