/* #multichain, #send, #signup. Prefix every selector with the section id. */

/* ------------------------------------------------------------------ #multichain ------------------------------------------------------------------ */
#multichain{padding-bottom:clamp(64px,7vw,112px)}
#multichain .mc-intro{position:relative;z-index:1;padding-block:clamp(56px,6vw,96px) clamp(28px,3.4vw,48px)}
#multichain .mc-lead{max-width:31em;margin-top:clamp(20px,2vw,28px)}

/* The networks as type. No tiles, no rows of boxes: one rule above the list and then only names. */
#multichain .mc-nets{position:relative;padding-top:clamp(12px,1.4vw,20px);border-top:1px solid var(--ink-soft);list-style:none}
#multichain .mc-net{display:flex;align-items:baseline;justify-content:space-between;gap:clamp(16px,3vw,48px)}
#multichain .mc-name{min-width:0;font-family:var(--font-display);font-optical-sizing:auto;font-size:clamp(36px,5vw,80px);font-weight:400;line-height:1.08;letter-spacing:-.025em;transition:transform var(--hover-out) var(--ease-out)}
#multichain .mc-end{white-space:nowrap}
#multichain .mc-soon{flex:none;font-size:var(--size-body);line-height:1.3;font-weight:500;color:var(--fg-2);text-align:right}
/* A logo stands on the baseline at about cap height (Newsreader's caps run .7em). Points overshoot, as they do in type. */
#multichain .mc-logo{display:inline-block;width:auto;max-width:none;height:.7em;margin-left:.2em;vertical-align:baseline}
#multichain .mc-logo-eth{height:.84em;margin-bottom:-.07em;vertical-align:-.07em}
#multichain .mc-logo-base{height:.5em}   /* a flat square at cap height reads as a missing image, and as the loudest thing on the page */
#multichain .mc-logo-solana{height:.58em;margin-left:.22em}
#multichain .mc-logo-robinhood{height:.8em}

/* Every live network at full Paper; only the one still to come is dimmed, with its note beside it. */
#multichain .mc-net-soon{justify-content:flex-start}
#multichain .mc-net-soon .mc-name{opacity:.45}
@media (hover:hover) and (pointer:fine){
  #multichain .mc-net:hover .mc-name{transform:translateX(10px);transition-duration:var(--hover-in)}
}
@media (max-width:640px){
  /* The detail under the name, so the list keeps one rhythm. */
  #multichain .mc-net{display:block;padding-bottom:6px}
  #multichain .mc-name{display:block;line-height:1.02}
  #multichain .mc-soon{display:block;margin-top:2px;text-align:left}
}

/* ------------------------------------------------------------------ #send ------------------------------------------------------------------ */
/* The original site's send demo straight on the page's Paper: no box, no picture. Rules and type do the work. */
#send{--address:clamp(16px,1.25vw,18px);--panel:minmax(0,min(600px,54%));padding-block:clamp(72px,8vw,128px) clamp(56px,6vw,96px)}
#send .sd-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--panel);align-items:start;gap:clamp(32px,5vw,96px)}
#send .sd-intro{display:flex;flex-direction:column;gap:clamp(20px,2vw,28px)}
#send .sd-intro p{max-width:25em}

#send .sd-pane[hidden]{display:none}
#send .sd-label{display:block;margin-bottom:10px;font-size:16px;line-height:22px;font-weight:600;color:var(--ink)}
#send .sd-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:clamp(24px,2.4vw,32px)}
#send .sd-label-row>span{font-size:15px;line-height:22px;color:var(--muted)}

#send .sd-amount-field{display:flex;align-items:center;gap:12px;min-height:64px;padding-block:6px;box-shadow:inset 0 -1px 0 var(--ink);transition:box-shadow var(--hover-out) var(--ease-out)}
#send .sd-amount-field:focus-within{box-shadow:inset 0 -2px 0 var(--ink);transition-duration:var(--hover-in)}
#send .sd-amount-field input{flex:1 1 0;min-width:0;min-height:48px;padding:0;border:0;border-radius:0;background:none;color:var(--ink);caret-color:var(--ink);font-family:var(--font-mono);font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;outline:none}
#send .sd-unit{flex:none;display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}
#send .sd-unit img,#send .sd-big img{width:24px;height:24px;flex:none}
#send .sd-max{flex:none;min-height:44px;min-width:44px;padding:0 14px;border-radius:8px;background:var(--line);color:var(--ink);font-size:15px;line-height:20px;font-weight:500;touch-action:manipulation}
#send .sd-amount-error{min-height:20px;margin-top:6px;font-size:15px;line-height:20px;font-weight:500;color:#A84735}
#send .sd-row{display:flex;justify-content:space-between;gap:12px;margin-top:4px;font-size:15px;line-height:22px;color:var(--muted)}
#send .sd-row span:last-child{color:var(--ink);font-weight:500}
#send .sd-primary{width:100%;margin-top:16px}
#send .sd-primary:disabled{opacity:.4;cursor:not-allowed}
#send .sd-text-button{display:block;min-height:44px;margin:6px 0 0;font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:4px;color:var(--ink)}

#send .sd-big{display:flex;align-items:center;gap:12px;font-size:clamp(28px,3vw,38px);line-height:1.2;color:var(--ink)}
#send .sd-big b{font-family:var(--font-mono);font-weight:400;letter-spacing:-.03em}
#send .sd-big img{width:36px;height:36px}
#send .sd-list{margin-top:16px;border-top:1px solid var(--line)}
#send .sd-list>div{display:flex;justify-content:space-between;gap:16px;padding-block:12px;border-bottom:1px solid var(--line);font-size:15px;line-height:22px}
#send .sd-list dt{color:var(--muted)}
#send .sd-list dd{font-weight:500;color:var(--ink);text-align:right}
#send .sd-list code{font-family:var(--font-mono);font-size:15px;overflow-wrap:anywhere}
#send .sd-total dd{font-weight:600}
#send .sd-note{margin-top:14px;font-size:15px;line-height:22px;color:var(--muted)}
#send .sd-done{display:flex;flex-direction:column;align-items:flex-start;padding-block:8px}
#send .sd-done-tick{width:48px;height:48px;color:var(--ink);stroke-width:1.5}
#send .sd-done-title{margin-top:12px;font-family:var(--font-display);font-size:32px;line-height:1.15;color:var(--ink)}
#send .sd-big-line{margin-top:6px;font-family:var(--font-mono);font-size:18px;color:var(--ink)}

/* Three layers in one cell, all on the same metrics so they wrap identically. The textarea is the real field; the
   marks layer above it paints only the wrong character; the measure keeps room for a whole address so filling never
   moves what is below. The marks layer also grows the cell for anything longer than an address. */
#send .sd-field{position:relative;display:grid;padding-bottom:4px;box-shadow:inset 0 -1px 0 var(--ink);transition:box-shadow var(--hover-out) var(--ease-out);font-family:var(--font-mono);font-size:var(--address);font-weight:400}
#send .sd-text{grid-area:1/1;display:block;width:100%;margin:0;padding:.14em 0 .46em;border:0;border-radius:0;background:none;font:inherit;line-height:1.5;letter-spacing:0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal}
#send .sd-measure{visibility:hidden}
#send .sd-marks{position:relative;z-index:1;color:transparent;pointer-events:none;user-select:none;-webkit-user-select:none}
#send .sd-marks mark{background:#A84735;color:#fff;animation:sd-mark 200ms var(--ease-out)}
@keyframes sd-mark{from{opacity:0}}
#send .sd-address{position:absolute;inset:0 0 4px;width:100%;height:calc(100% - 4px);overflow:hidden;color:var(--ink);caret-color:var(--ink);resize:none;outline:none;appearance:none;-webkit-appearance:none}
#send .sd-field:focus-within{box-shadow:inset 0 -2px 0 var(--ink);transition-duration:var(--hover-in)}
#send .sd-field:has([aria-invalid="true"]){box-shadow:inset 0 -2px 0 #A84735}
#send .sd-field.is-nudging{animation:sd-nudge 280ms linear}
/* transitions.dev's error shake (recipe 12): 80, 60, 80, 60ms, each leg on --ease-drop. Written out, because var() in a keyframe's timing function falls back to linear. */
@keyframes sd-nudge{
  0%{transform:translateX(0);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  28.57%{transform:translateX(6px);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  57.14%{transform:translateX(-6px);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  78.57%{transform:translateX(4px);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  100%{transform:translateX(0)}
}

/* The verdict. The ghost holds the height of the longest usual verdict, so a swap moves nothing below it. */
#send .sd-verdict{display:grid;margin-top:12px}
#send .sd-v{grid-area:1/1;display:flex;flex-direction:column;gap:2px;min-width:0}
#send .sd-v-ghost{visibility:hidden}
#send .sd-v-title{display:flex;align-items:center;gap:8px;font-size:18px;line-height:26px;font-weight:600;color:#376875}
#send .sd-v:is([data-tone="error"],[data-tone="warn"]) .sd-v-title{color:#A84735}
#send .sd-warning{flex:none;stroke-width:1.75}
#send .sd-v-detail{font-size:15px;line-height:22px;color:var(--muted);overflow-wrap:anywhere}
#send .sd-tick{stroke-width:2.25;stroke-dasharray:21}
#send .sd-v.is-entering{animation:sd-swap-in 200ms var(--ease-in-out) both}
#send .sd-v.is-leaving{animation:sd-swap-out 200ms var(--ease-in-out) both;pointer-events:none}
#send .sd-v.is-entering .sd-tick{animation:sd-draw 420ms var(--ease-out) 60ms both}
@keyframes sd-swap-in{from{opacity:0;filter:blur(4px)}}
@keyframes sd-swap-out{to{opacity:0;filter:blur(4px)}}
@keyframes sd-draw{from{stroke-dashoffset:21}to{stroke-dashoffset:0}}

/* The three examples, as the original's chips: they have to look pressable. */
#send .sd-fills{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
#send .sd-try{margin-right:4px;font-size:15px;font-weight:500;color:var(--muted)}
#send .sd-fill{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:8px;background:var(--paper-soft);font-size:15px;font-weight:500;line-height:20px;color:var(--ink);touch-action:manipulation;transition:transform var(--press) var(--ease-out),background-color var(--hover-out) var(--ease-out),color var(--hover-out) var(--ease-out)}
#send .sd-fill[aria-pressed="true"]{background:var(--ink);color:var(--paper);box-shadow:none}
#send .sd-fill:active{transform:scale(.97)}
#send .sd-fill:disabled{pointer-events:none}
@media (hover:hover) and (pointer:fine){
  #send .sd-fill:not([aria-pressed="true"]):hover{background:var(--line);transition-duration:var(--hover-in)}
  #send .sd-max:hover{background:var(--mineral)}
}

@media (max-width:1000px){
  #send{--panel:minmax(0,1fr)}
  #send .sd-layout{grid-template-columns:minmax(0,1fr);max-width:680px;margin-inline:auto}
}
/* Phones: the label takes its own line, so the three examples sit in one row under it instead of leaving one behind. */
@media (max-width:480px){
  #send .sd-try{flex:0 0 100%;margin:0}
  #send .sd-fills{gap:6px}
  #send .sd-fill{flex:1 1 auto;justify-content:center;padding-inline:10px;white-space:nowrap}
}
@media (max-width:380px){
  #send .sd-amount-field{flex-wrap:wrap}
  #send .sd-amount-field input{flex:1 0 100%}
  #send .sd-max{margin-left:auto}
  #send .sd-fill{padding-inline:8px}
}

/* ------------------------------------------------------------------ #signup ------------------------------------------------------------------ */
#signup{--door:clamp(600px,60vw,1120px);padding-block:clamp(40px,5vw,80px) calc(220 * var(--art-px) + 48px)}   /* room for the dusk #keys hangs over this section */
#signup .su-door{position:absolute;top:clamp(40px,5vw,80px);left:max(calc(var(--door) * -.14),calc(50vw - 720px - var(--door) * .34));width:var(--door);max-width:none;pointer-events:none}
#signup .su-layout{position:relative;display:flex;align-items:center;justify-content:flex-end;min-height:calc(var(--door) * .92)}
#signup .su-copy{flex:none;width:calc(50vw - var(--gutter) + 30px);max-width:760px}
#signup .su-copy>p.type-2nd{margin-top:clamp(20px,2vw,28px)}
#signup .su-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3vw,40px)}
#signup .su-button{min-width:248px}
#signup .su-button:disabled{pointer-events:none}
#signup .button-soft{box-shadow:inset 0 0 0 1px var(--muted)}   /* Paper soft alone barely leaves the Paper ground */

/* A button holds three faces at once, so it keeps its width and every swap is a CSS transition that can be interrupted. */
#signup .su-glyph{position:relative;display:grid;place-items:center;width:24px;height:24px;flex:none}
#signup .su-glyph>*{grid-area:1/1;transition:opacity 200ms var(--ease-in-out),filter 200ms var(--ease-in-out)}
#signup .su-labels{display:grid;justify-items:start}
#signup .su-label{grid-area:1/1;transition:opacity 200ms var(--ease-in-out),filter 200ms var(--ease-in-out)}
#signup .su-label-opening,#signup .su-label-ready,#signup .su-spinner,#signup .su-tick{opacity:0;filter:blur(4px)}
#signup .su-button[data-state="opening"] .su-label-opening,#signup .su-button[data-state="opening"] .su-spinner,
#signup .su-button[data-state="ready"] .su-label-ready,#signup .su-button[data-state="ready"] .su-tick{opacity:1;filter:none}
#signup .su-button:not([data-state="rest"]) .su-label-rest,#signup .su-button:not([data-state="rest"]) .su-logo{opacity:0;filter:blur(4px)}
#signup .su-spinner{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round}
#signup .su-button[data-state="opening"] .su-spinner{animation:su-spin 700ms linear infinite}
@keyframes su-spin{to{transform:rotate(360deg)}}
/* transitions.dev's success check (recipe 10): its fade and stroke draw. Its overshooting bob is left out: the page bans overshoot. */
#signup .su-tick{stroke-width:2.25;stroke-dasharray:21;stroke-dashoffset:21;transition:opacity 200ms var(--ease-in-out),filter 200ms var(--ease-in-out),stroke-dashoffset 0s linear 200ms}
#signup .su-button[data-state="ready"] .su-tick{stroke-dashoffset:0;transition:opacity 200ms var(--ease-in-out),filter 200ms var(--ease-in-out),stroke-dashoffset 420ms var(--ease-out) 60ms}

#signup .su-note{margin-top:16px;font-size:15px;line-height:22px;color:var(--muted)}
#signup .su-address{max-width:39.2ch;margin-top:clamp(14px,1.4vw,20px);font-family:var(--font-mono);font-size:clamp(16px,1.3vw,18px);line-height:1.5;color:var(--muted);overflow-wrap:anywhere;opacity:0;filter:blur(4px);visibility:hidden;transition:opacity 200ms var(--ease-in-out),filter 200ms var(--ease-in-out),visibility 0s linear 200ms}
#signup .su-address.is-on{opacity:1;filter:none;visibility:visible;transition-delay:0s}

@media (max-width:1000px){
  #signup{--door:min(112vw,760px);padding-block:0 calc(220 * var(--art-px) + 48px)}
  #signup .su-door{position:static;display:block;margin:0 0 clamp(4px,2vw,16px) calc(var(--door) * -.14)}
  #signup .su-layout{display:block;min-height:0}
  #signup .su-copy{width:auto;max-width:none}
}
/* Over 1000 wide the door stands on the page's axis, as the hero's arch does: the doorway is the invitation, not one more picture. */
@media (min-width:1001px){
  #signup .su-door{position:static;display:block;width:min(52vw,max(300px,calc(100svh - 370px)),1400px);margin:0 auto -1%}
  #signup .su-layout{justify-content:center;min-height:0}
  #signup .su-copy{width:auto;max-width:none;text-align:center}
  #signup .su-buttons{justify-content:center}
  #signup .su-address{margin-inline:auto}
}
@media (max-width:480px){
  #signup .su-buttons{flex-direction:column;align-items:stretch;width:min(100%,340px)}
  #signup .su-button{width:100%}
}

/* Reduced motion: opacity only. No blur, no travel, no spin, no shake, nothing to draw. */
@media (prefers-reduced-motion:reduce){
  #send .sd-field.is-nudging{animation:none}
  #send .sd-fill{transition:none}
  #send .sd-fill:active{transform:none}
  #send .sd-v.is-entering{animation-name:sd-fade-in}
  #send .sd-v.is-leaving{animation-name:sd-fade-out}
  #send .sd-v.is-entering .sd-tick{animation:none}
  #multichain .mc-name{transition:none}
  #multichain .mc-net:hover .mc-name{transform:none}
  #signup .su-label-opening,#signup .su-label-ready,#signup .su-spinner,#signup .su-tick,#signup .su-address,
  #signup .su-button:not([data-state="rest"]) .su-label-rest,#signup .su-button:not([data-state="rest"]) .su-logo{filter:none}
  #signup .su-button[data-state="opening"] .su-spinner{animation:none}
  #signup .su-tick{stroke-dashoffset:0;transition:opacity 200ms linear}
  #signup .su-button[data-state="ready"] .su-tick{transition:opacity 200ms linear}
}
@media (min-width:2400px){
  #multichain .mc-name{font-size:clamp(80px,3.667vw,142px)}
  #send{--panel:minmax(0,clamp(640px,30vw,1100px));--address:clamp(18px,.8vw,24px)}
  /* The panel is zoomed as one piece, so its submit is sized back down to stand at the same height as every other button. */
  #send .sd-panel{--z:1.2;zoom:var(--z)}
  #send .sd-primary{min-height:calc(clamp(56px,2.566vw,99px) / var(--z));padding-inline:calc(clamp(24px,1.1vw,42px) / var(--z));font-size:calc(clamp(17px,.779vw,30px) / var(--z))}
}
@keyframes sd-fade-in{from{opacity:0}}
@keyframes sd-fade-out{to{opacity:0}}
@media (min-width:3000px){
  #send .sd-panel{--z:1.5}
}
@media (min-width:3600px){
  #send .sd-panel{--z:1.75}
}