:root{--paper:#E7EAE9;--ink:#101413;--ink-2:#535D59;--rule:#C9CFCD;--hair:#D9DEDC;--seal:#1F3D33;--lime:#BCED62;--white:#fff}
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:"IBM Plex Sans",sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1120px;margin:0 auto;padding:0 40px}
  a{color:inherit}
  :focus-visible{outline:2px solid var(--seal);outline-offset:4px}
  h1,h2,h3{font-family:"Newsreader",serif;font-weight:300;letter-spacing:-.025em;margin:0;line-height:1.05}
  .eyebrow{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
  .btn{display:inline-block;font:500 15px/1 "IBM Plex Sans",sans-serif;padding:15px 24px;border-radius:2px;text-decoration:none;border:1px solid var(--ink);color:var(--paper);background:var(--ink);transition:background .2s,border-color .2s}
  .btn:hover{background:var(--seal);border-color:var(--seal)}
  .btn.ghost{background:transparent;color:var(--ink)}
  .btn.ghost:hover{background:var(--seal);color:var(--paper)}
  .sec{padding:110px 0}

  /* header */
  header{position:sticky;top:0;z-index:60;background:rgba(231,234,233,.92);backdrop-filter:blur(10px)}
  header{border-bottom:1px solid transparent;transition:border-color .25s ease}
  header.scrolled{border-bottom-color:var(--rule)}
  .nav{display:flex;align-items:center;gap:34px;padding:14px 40px;transition:padding .25s ease}
  .brand{margin-right:auto;display:flex;align-items:center}
  .brand img{height:15px;width:auto;display:block}
  .nav a.lk{font-size:15px;color:var(--ink-2);text-decoration:none}
  .nav a.lk:hover{color:var(--ink)}
  .nav .btn{padding:11px 18px;font-size:14px}
  .dd{position:relative}
  .dd-t{display:inline-flex;align-items:center;gap:7px}
  .dd-t svg{transition:transform .2s;opacity:.7}
  .dd:hover .dd-t{color:var(--ink)}
  .dd:hover .dd-t svg{transform:rotate(180deg)}
  .dd-p{position:absolute;top:100%;left:-18px;margin-top:12px;width:352px;background:var(--white);border:1px solid var(--rule);border-radius:4px;box-shadow:0 24px 54px -26px rgba(16,20,19,.42);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s}
  .dd::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px}
  .dd:hover .dd-p,.dd:focus-within .dd-p{opacity:1;visibility:visible;transform:none}
  .dd-shut .dd-p{opacity:0!important;visibility:hidden!important}
  /* resources dropdown — 3-column grid, icon animations */
  .dd-p.dd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;width:480px;left:auto;right:-40px;padding:10px}
  .dd-grid .dd-i{align-items:center;gap:12px;padding:14px;position:relative}
  .dd-grid .dd-g{margin:0}
  .dd-grid .dd-a{position:absolute;top:12px;right:12px}
  .dd-grid .dd-x em{font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* documentation — bookmark outline draws in */
  .dd-i.dd-doc:hover .dd-g svg path{stroke-dasharray:100;stroke-dashoffset:100;animation:dd-draw 1.3s cubic-bezier(.4,0,.2,1) forwards}
  @keyframes dd-draw{to{stroke-dashoffset:0}}
  /* research — page folds, then the text lines draw */
  .dd-i.dd-res:hover .dd-g svg path{stroke-dasharray:100;stroke-dashoffset:100;animation:dd-draw 1.1s cubic-bezier(.4,0,.2,1) forwards}
  .dd-i.dd-res:hover .dd-g svg path:nth-child(3){animation-delay:.5s}
  /* agentic alpha — the chart line draws upward and the peak dot pops */
  .dd-i.dd-alpha:hover .dd-g svg path{stroke-dasharray:100;stroke-dashoffset:100;animation:dd-draw 1.2s cubic-bezier(.4,0,.2,1) forwards}
  .dd-i.dd-alpha:hover .dd-g svg circle{transform-box:fill-box;transform-origin:center;animation:dd-pop .8s cubic-bezier(.34,1.56,.64,1) .8s both}
  @keyframes dd-pop{0%{transform:scale(0)}100%{transform:scale(1)}}
  /* team — hard hat drops in with a bounce */
  @keyframes dd-hat{0%{transform:translateY(-7px);opacity:0}55%{transform:translateY(1.5px);opacity:1}100%{transform:translateY(0)}}
  .dd-i.dd-team:hover .dd-g svg{animation:dd-hat 2.4s cubic-bezier(.34,1.56,.64,1)}
  /* partners — the two figures lean together */
  @keyframes dd-lean{50%{transform:translateX(var(--lean,3.2px))}}
  .dd-i.dd-partners:hover .dd-g svg circle:first-of-type{transform-box:fill-box;animation:dd-lean 1.6s ease;--lean:3.2px}
  .dd-i.dd-partners:hover .dd-g svg circle:last-of-type{transform-box:fill-box;animation:dd-lean 1.6s ease;--lean:-3.2px}

  .dd-i{display:grid;grid-template-columns:38px 1fr 16px;align-items:center;gap:14px;padding:15px 14px;border-radius:3px;text-decoration:none;transition:background .16s}
  .dd-i:hover{background:var(--paper)}
  .dd-g{width:38px;height:38px;border-radius:3px;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;color:var(--seal);transition:background .25s,border-color .25s,color .25s}
  .dd-g svg{transition:transform 1s cubic-bezier(.34,1.56,.64,1)}
  .dd-g .chk{stroke-dasharray:17}
  .dd-i:hover .dd-g{background:var(--seal);border-color:var(--seal);color:var(--lime)}
  .dd-i:nth-child(1):hover .dd-g svg{transform:rotateY(360deg)}
  .dd-i:nth-child(2):hover .dd-g svg{animation:shield-pop 1s cubic-bezier(.34,1.56,.64,1)}
  .dd-i:nth-child(2):hover .dd-g .chk{animation:chk-draw .9s ease .18s both}
  @keyframes shield-pop{35%{transform:scale(1.16) rotate(-7deg)}}
  @keyframes chk-draw{from{stroke-dashoffset:17}to{stroke-dashoffset:0}}
  .dd-x b{display:block;font:500 15px/1.2 "IBM Plex Sans",sans-serif;color:var(--ink)}
  .dd-x em{display:block;font-style:normal;font-size:13px;color:var(--ink-2);margin-top:4px;line-height:1.45}
  .dd-s{font-style:normal;font:500 9px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--rule);border-radius:2px;padding:3px 5px;margin-left:8px;vertical-align:2px}
  .dd-a{color:var(--ink-2);font-size:15px;opacity:0;transform:translateX(-4px);transition:opacity .16s,transform .16s}
  .dd-a.dd-ext{font-weight:700}
  .dd-i:hover .dd-a{opacity:1;transform:none;color:var(--seal)}

  /* hero */
  .hero{padding:56px 0 0}
  .hero-eyebrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
  .hero-eyebrow em{font-style:normal;color:var(--seal);border:1px solid var(--seal);border-radius:2px;padding:4px 8px;font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.14em}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start;margin-top:44px}
  .hero-art{position:relative;color:var(--ink)}
  .hero-art svg{width:114%;max-width:none;height:auto;display:block;max-height:570px;margin-top:-312px;margin-left:-7%}
  .hero-copy{margin-top:-14px}
  .hero-art .field circle{fill:currentColor}
  .hero-art .field{animation:drift 46s linear infinite;transform-origin:280px 280px}
  @keyframes drift{to{transform:rotate(360deg)}}
  .hero-art .spokes line{stroke-dasharray:260;stroke-dashoffset:260;animation:draw 2.7s cubic-bezier(.2,.7,.3,1) forwards}
  .hero-art .spokes line:nth-child(2n){animation-delay:.28s}
  .hero-art .spokes line:nth-child(3n){animation-delay:.56s}
  .hero-art .spokes line:nth-child(5n){animation-delay:.84s}
  @keyframes draw{to{stroke-dashoffset:0}}
  .hero-art .nd{fill:var(--ink);animation:breathe 5.4s ease-in-out infinite}
  @keyframes breathe{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.14)}}
  .hero-art .nodes{transform-box:fill-box}
  .hero-art .nd{transform-box:fill-box;transform-origin:center}
  h1{font-size:clamp(40px,6.4vw,82px);line-height:1.02;max-width:15ch;margin:26px 0 0}
  h1 i{font-style:italic;color:var(--seal)}
  .hero .lede{font-size:18px;line-height:1.65;color:var(--ink-2);max-width:46ch;margin:0}
  .stats{display:flex;flex-wrap:nowrap;gap:0 30px;margin-top:30px}
  .stat{display:flex;flex-direction:column;gap:8px;font:500 10px/1.3 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
  .stat b{font-family:"Newsreader",serif;font-weight:400;font-size:28px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
  .cta-row{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
  .note{margin-top:18px;font:400 12px/1.5 "IBM Plex Mono",monospace;color:var(--ink-2)}

  /* hero — full-bleed video, inspired by offx.tech's centered
     immersive hero, kept in this file's own type/colour system */
  .hero-video{position:relative;margin-top:calc(-1 * var(--hdr-h, 81px));height:auto;min-height:calc(100svh + var(--hdr-h, 73px) - 72px);padding-bottom:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;isolation:isolate;background:var(--ink)}
  .hero-video-media{position:absolute;left:0;right:0;top:-60px;bottom:0;z-index:0}
  .hero-video-media video{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05)}
  .hero-video-scrim{position:absolute;inset:0;background:
    radial-gradient(120% 90% at 50% 8%,rgba(16,20,19,.18) 0%,rgba(16,20,19,.58) 58%,rgba(16,20,19,.86) 100%),
    linear-gradient(180deg,transparent 55%,rgba(16,20,19,.55) 100%)}
  .hero-video-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:calc(var(--hdr-h, 73px) + 28px) 40px 14px;max-width:1120px;width:100%;margin:0 auto}
  .hero-video .hero-eyebrow .eyebrow{color:#c7c7c7}
  .hero-video .hero-eyebrow em{color:var(--lime);border-color:rgba(188,237,98,.55);background:rgba(255,255,255,.06);backdrop-filter:blur(6px)}
  .hero-video h1{color:#fff;margin-top:18px;text-align:left;line-height:.98}
  .hero-video h1 i{color:var(--lime)}
  .hero-video .lede{color:rgba(255,255,255,.82);margin:12px 0 0;text-align:left;max-width:46ch}
  .hero-video .stats{justify-content:flex-start;flex-wrap:wrap;row-gap:14px}
  .hero-video .cta-row{justify-content:flex-start;margin-top:32px}
  @media (max-width:960px){ .hero-video-inner{ padding-inline:22px; } }
  .hero-video .stat{color:rgba(255,255,255,.66)}
  .hero-video .stat b{color:#fff}
  .hero-video .btn{background:#1f3d34;border-color:#1f3d34;color:#bced62}
  .hero-video .btn:hover{background:#2b5547;border-color:#2b5547;color:#bced62}
  .hero-video .btn.ghost{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.38);color:#fff}
  .hero-video .btn.ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

  /* header transparent at top, subtle dark glass once scrolling, solid past the hero */
  header.on-video{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
  header.on-video.scrolled{background:rgba(16,20,19,.025);border-bottom-color:rgba(255,255,255,.05);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px)}
  header.on-video .brand img{filter:brightness(0) invert(1)}
  header.on-video .nav a.lk{color:rgba(255,255,255,.82)}
  header.on-video .nav a.lk:hover{color:#fff}
  header.on-video .dd-t svg{opacity:.85}
  header.on-video .nav .btn{background:#1f3d34;border-color:#1f3d34;color:#bced62}
  header.on-video .nav .btn:hover{background:#2b5547;border-color:#2b5547}
  header.on-video .burger{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35)}
  header.on-video .burger i{background:#fff}

  header.on-video.past-hero{background:rgba(231,234,233,.92);backdrop-filter:blur(10px);border-bottom-color:var(--rule)}
  header.on-video.past-hero .brand img{filter:none}
  header.on-video.past-hero .nav a.lk{color:var(--ink-2)}
  header.on-video.past-hero .nav a.lk:hover{color:var(--ink)}
  header.on-video.past-hero .nav .btn{background:var(--ink);border-color:var(--ink);color:var(--paper)}
  header.on-video.past-hero .nav .btn:hover{background:var(--seal);border-color:var(--seal)}
  header.on-video.past-hero .burger{background:var(--white);border-color:var(--rule)}
  header.on-video.past-hero .burger i{background:var(--ink)}

  .trust-strip{padding:38px 0 46px;background:var(--paper)}
  /* "Building with" rides at the foot of the hero video, over the scrim's
     paper fade, so it is visible on the first screen */
  .hero-video .trust-strip{position:relative;width:100%;z-index:1;padding:25px 0 22px;background:transparent}
  .hero-video .trust-strip .lbl{text-align:left;color:rgba(255,255,255,.78)}
  .hero-video .trust-strip .marquee .mk img{filter:grayscale(1) invert(1) brightness(2);opacity:1;border-radius:0}
  .hero-video .trust-strip .marquee .mk img[src="logos/sherlock-icon.png"]{height:19px}
  .hero-video .trust-strip .marquee .mk em{color:#fff}
  .hero-video .trust-strip .marquee .mk:hover img{filter:grayscale(1) invert(1) brightness(2.4)}
  @media (max-width:960px){
    .hero-video-inner{padding-top:calc(var(--hdr-h, 64px) + 36px)}
  }

  /* partner marquee */
  .trust{margin:0;padding:16px 0;overflow:hidden}
  .trust .mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
  .trust .lbl{font:500 10px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-bottom:12px}
  .marquee{display:flex;width:max-content;animation:slide 38s linear infinite}
  .marquee:hover{animation-play-state:paused}
  .marquee .mk{display:inline-flex;align-items:center;gap:10px;padding:0 22px;white-space:nowrap}
  .marquee .mk img{height:26px;width:auto;max-width:110px;object-fit:contain;border-radius:6px;filter:grayscale(1);opacity:.66;transition:opacity .2s,filter .2s}
  .marquee .mk img[src="logos/surfliquid.png"],.marquee .mk img[src="logos/yieldseeker.png"]{height:31px}
  .marquee .mk em{font-family:"Newsreader",serif;font-style:normal;font-size:18px;color:var(--ink-2);transition:color .2s}
  .marquee .mk:hover img{filter:none;opacity:1}
  .marquee .mk:hover em{color:var(--ink)}
  @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* section head */
  .head h2{font-size:clamp(34px,4.6vw,56px);max-width:16ch}
  .head p{margin-top:20px;max-width:44ch;color:var(--ink-2)}

  /* products */
  .products{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:68px}

  /* earn-section flow: a fine dashed rail links the two cards while two
     small dots travel in opposite directions — capital out, yield back.
     Motion is transform-only (container-query units) so it stays on the
     compositor; the rail reuses the "march" keyframes from how-it-works. */
  .earn-flow{position:absolute;left:0;right:0;top:-34px;height:1px;pointer-events:none;z-index:0}
  .ef-line{position:absolute;inset:0;container-type:inline-size}
  .ef-rail{position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--rule) 0 5px,transparent 5px 12px);opacity:.9}
  .products.in .ef-rail{animation:march 2.4s linear infinite}
  .ef-dot{position:absolute;top:50%;left:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--seal);opacity:0}
  .products.in .ef-dot-a{animation:ef-out 8s cubic-bezier(.45,0,.55,1) infinite}
  .products.in .ef-dot-b{animation:ef-back 8s cubic-bezier(.45,0,.55,1) 4s infinite}
  @keyframes ef-out{
    0%{transform:translateX(0);opacity:0}
    8%{opacity:1}
    86%{opacity:1}
    100%{transform:translateX(100cqw);opacity:0}
  }
  @keyframes ef-back{
    0%{transform:translateX(100cqw);opacity:0}
    8%{opacity:1}
    86%{opacity:1}
    100%{transform:translateX(0);opacity:0}
  }
  .ef-caption{position:absolute;top:12px;font:500 10px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);opacity:0;transition:opacity .6s ease .5s;white-space:nowrap}
  .products.in .ef-caption{opacity:1}
  .ef-caption-a{left:0}
  .ef-caption-b{right:0}
  @media (max-width:960px){.earn-flow{display:none}}

  .products .product.enter-left,
  .products .product.enter-right{opacity:0;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
  .products .product.enter-left{transform:translateX(-28px)}
  .products .product.enter-right{transform:translateX(28px);transition-delay:.14s}
  .products.in .product.enter-left,
  .products.in .product.enter-right{opacity:1;transform:translateX(0)}

  .product{background:var(--white);border:1px solid var(--rule);border-radius:3px;padding:34px 32px;position:relative;transition:border-color .3s,transform .3s,box-shadow .3s;display:flex;flex-direction:column}
  .product:hover{border-color:var(--seal);transform:translateY(-4px);box-shadow:0 30px 48px -32px rgba(16,20,19,.38)}
  .product .glyph{transition:color .3s}
  .product:hover .glyph{color:var(--seal)}
  .product.enter-left:hover .glyph{animation:flip-spin 1s cubic-bezier(.34,1.56,.64,1)}
  .product.enter-right:hover .glyph{animation:shield-pop 1s cubic-bezier(.34,1.56,.64,1)}
  .product.enter-right .glyph .chk{stroke-dasharray:17}
  .product.enter-right:hover .glyph .chk{animation:chk-draw .9s ease .18s both}
  @keyframes flip-spin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
  .product a.go{transition:color .2s,border-color .2s,padding-right .25s}
  .product:hover a.go{color:var(--ink);border-color:var(--ink)}
  .product h3{font-size:40px;margin-top:20px}
  .product .sub{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--seal);margin-top:14px}
  .p-top{display:flex;align-items:center;gap:14px}
  .p-top .sub,.p-top .tag{margin-top:0;position:relative;top:-1px}
  .product .tag{font:400 13px/1 "IBM Plex Mono",monospace;color:var(--ink-2);margin-top:12px}
  .product p{color:var(--ink-2);margin:20px 0 24px;font-size:16px;max-width:34ch}
  .product a.go{display:inline-block;margin-top:auto;font-size:15px;color:var(--seal);text-decoration:none;border-bottom:1px solid var(--seal);padding-bottom:3px;align-self:flex-start;cursor:pointer}
  .product.halo{border-color:#1F3D33;box-shadow:0 0 0 2px rgba(31,61,51,.22)}
  .soon{position:absolute;top:24px;right:24px;font:500 10px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--rule);border-radius:2px;padding:6px 9px}
  @property --soon-a{syntax:'<angle>';initial-value:0deg;inherits:false}
  .soon::after{content:"";position:absolute;inset:-1px;border-radius:3px;padding:2px;pointer-events:none;background:conic-gradient(from var(--soon-a),transparent 0 62%,var(--seal) 78%,var(--lime) 90%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:soon-orbit 3.6s linear infinite}
  @keyframes soon-orbit{to{--soon-a:360deg}}
  .glyph{color:var(--seal)}

  /* how it works */
  .flow{margin-top:56px;background:var(--white);border:1px solid var(--rule);border-radius:3px;padding:48px 40px 44px}
  .wave{width:100%;height:auto;display:block;margin:0 0 6px}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
  .step{padding:0 18px;text-align:center}
  .track{position:absolute;left:calc(50% + 30px);right:calc(-50% + 30px);top:50%;height:1.5px;background:repeating-linear-gradient(90deg,var(--rule) 0 5px,transparent 5px 12px);background-size:12px 1.5px;animation:march 1.6s linear infinite}
  @keyframes march{to{background-position:12px 0}}
  .dot{width:8px;height:8px;border-radius:50%;background:var(--lime);opacity:0;animation:blip 5.4s ease-in-out infinite}
  .ring.solid .dot{background:var(--lime)}
  .d2{animation-delay:1.8s}
  .d3{animation-delay:3.6s}
  @keyframes blip{0%{opacity:0;transform:scale(.4)}6%{opacity:1;transform:scale(1)}28%{opacity:1;transform:scale(1)}36%{opacity:0;transform:scale(.4)}100%{opacity:0}}
  .step p{color:var(--ink-2);font-size:16px;margin-top:8px;max-width:24ch;margin-left:auto;margin-right:auto;min-height:3.3em}

  /* assurances */
  .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:52px}
  .tile{background:var(--white);border:1px solid var(--rule);border-radius:3px;padding:34px 28px;position:relative;overflow:hidden;transition:border-color .45s,transform .45s,box-shadow .45s}
  .tile::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:0;background:linear-gradient(90deg,var(--seal),var(--lime));z-index:2}
  .tile>*{position:relative;z-index:1}
  .tile .soon{position:absolute;top:18px;right:18px}
  .tiles.in .tile{animation:tile-dim 13s ease infinite}
  .tiles.in .tile::after{animation:tile-sweep 13s linear infinite}
  .tiles.in .tile:nth-child(1),.tiles.in .tile:nth-child(1)::after{animation-delay:0s}
  .tiles.in .tile:nth-child(2),.tiles.in .tile:nth-child(2)::after{animation-delay:3.25s}
  .tiles.in .tile:nth-child(3),.tiles.in .tile:nth-child(3)::after{animation-delay:6.5s}
  .tiles.in .tile:nth-child(4),.tiles.in .tile:nth-child(4)::after{animation-delay:9.75s}
  @keyframes tile-dim{0%{border-color:var(--seal);transform:translateY(-3px);box-shadow:0 14px 30px -22px rgba(31,61,51,.6)}
    22%{border-color:var(--seal);transform:translateY(-3px);box-shadow:0 14px 30px -22px rgba(31,61,51,.6)}
    32%,100%{border-color:var(--rule);transform:none;box-shadow:none}}
  @keyframes tile-sweep{0%{width:0}25%{width:100%}30%{width:100%;opacity:1}34%,100%{width:100%;opacity:0}}
  .tile h3{font-size:22px;margin-top:16px}
  .tile p{color:var(--ink-2);font-size:15px;margin-top:10px}

  /* ratings table */
  .agents{width:100%;border-collapse:collapse;margin-top:52px;background:var(--white);border:1px solid var(--rule);border-radius:3px;overflow:hidden}
  .agents th{text-align:left;font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding:15px 20px;border-bottom:1px solid var(--rule);font-weight:500}
  .agents td{padding:16px 20px;border-bottom:1px solid var(--hair);font-size:16px}
  .agents tr:last-child td{border-bottom:0}
  .agents td.n{font-family:"IBM Plex Mono",monospace;font-weight:500}
  .agents td.m{font-family:"IBM Plex Mono",monospace;color:var(--ink-2);font-size:14px}
  .dot-c{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:11px;vertical-align:1px}
  .agents td.n em{font-style:normal;color:var(--ink-2);font-size:12px;margin-left:2px}
  .chains{white-space:nowrap;font-size:0}
  .cx{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font:600 11px/1 "IBM Plex Sans",sans-serif;color:#fff;font-style:normal;vertical-align:middle;box-shadow:0 0 0 2px var(--white);margin-left:-8px;position:relative}
  .cx:first-child{margin-left:0}
  .cx:nth-child(1){z-index:5}
  .cx:nth-child(2){z-index:4}
  .cx:nth-child(3){z-index:3}
  .cx:nth-child(4){z-index:2}
  .cx:nth-child(5){z-index:1}
  .cx>span{position:relative;z-index:1}
  .cx>img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;background:#fff;z-index:2}
  .agents .cx.arb>img{filter:none}
  .agents .ag{width:22px;height:22px;border-radius:50%;object-fit:cover;margin-right:10px;vertical-align:-6px}
  .agents .ag[src="logos/surfliquid.png"],.agents .ag[src="logos/yieldseeker.png"]{width:26px;height:26px}
  .agents .ag-mono{display:inline-block;line-height:22px;text-align:center;background:var(--seal);color:var(--paper);font:600 11px/22px "IBM Plex Mono",monospace}
  .cx.pol{background:#8247E5}
  .cx.op{background:#FF0420}
  .cx.meg{background:#E8E8E8;color:#101413}
  .cx.rbh{background:#C1FF00;color:#101413}
  .cx.base{background:#0052FF}
  .cx.arb{background:#12AAFF}
  .cx.eth{background:#627EEA}
  .cx.son{background:#FE9A4D}
  .cx.pla{background:#1F3D33}
  .cx.xdc{background:#2E5AAC}
  .cx.stellar{background:#0B0B0B}

  /* partners */
  .partners{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:52px}
  .p-card{grid-column:span 2;background:var(--white);border:1px solid var(--rule);border-radius:3px;padding:30px 28px;display:flex;flex-direction:column;justify-content:flex-start;min-height:158px;transition:border-color .2s,transform .2s}
  .p-card:hover{border-color:var(--seal);transform:translateY(-2px)}
  .p-card h3{font-size:25px;margin-top:12px}
  .p-card .sec-logo{display:block;height:16px;width:auto;margin-top:14px}
  .p-card .sec-logo-aragon{height:30px;margin-top:6px}
  .p-card .sec-logo-aragon path{fill:var(--ink)}
  .p-card .sec-logo-cork{display:flex;align-items:center;gap:10px;height:auto;margin-top:6px;color:var(--ink);text-decoration:none}
  .p-card .sec-logo-cork svg{height:34px;width:34px;display:block}
  .p-card .sec-logo-cork b{font:700 21px/1 "IBM Plex Sans",sans-serif;letter-spacing:.14em}
  .p-card p{color:var(--ink-2);font-size:15px;margin-top:22px}
  .p-logo-row{display:flex;align-items:center;gap:16px;margin-top:20px}
  .p-logo-row .cx{margin-left:0;box-shadow:none;width:38px;height:38px;background:transparent;border:none}
  .p-logo-row .cx>img{filter:grayscale(1) brightness(0);background:transparent;border-radius:0}
  .p-logo-row .cx.arb,.p-logo-row .cx.base{background:transparent}
  .p-logo-row .cx>img{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
  .p-logo-row .cx:hover>img{transform:scale(1.15)}
  .p-ag{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
  .p-agw{position:relative;display:inline-flex}
  .p-agw:hover .p-ag{transform:scale(1.15)}
  .p-logo-row .cx::after,.p-agw::after{content:attr(data-name);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);font:500 10px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);font-weight:600;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap;z-index:3}
  .p-logo-row .cx::after{content:attr(title)}
  .p-logo-row .cx:hover::after,.p-agw:hover::after{opacity:1}
  .p-logo-row .cx.base{border-radius:6%}
  .p-logo-row .cx+.cx{margin-left:14px;box-shadow:none}
  .p-logo-row .p-more{font-size:16px;color:var(--ink-2);font-style:italic;margin-left:8px}
  .p-ag{width:50px;height:50px;border-radius:50%;object-fit:cover;filter:grayscale(1) brightness(0)}
  .p-ag-big{width:58px;height:58px}
  .p-agw[data-name="YieldSeeker"] .p-ag{width:58px;height:58px}
  .p-ag-mono{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:var(--paper);font:600 20px/1 "IBM Plex Mono",monospace}
  .p-wide{grid-column:span 3}
  .p-accent{background:var(--seal);border-color:var(--seal)}
  .p-accent .eyebrow{color:#A9BEB4}
  .p-accent h3{color:var(--paper)}

  /* rank swap animation */
  .agents tbody tr{transition:background .3s}
  .agents.in .r-ys{animation:swap-down 9s cubic-bezier(.5,0,.2,1) 1.2s infinite}
  .agents.in .r-zyfi{animation:swap-up 9s cubic-bezier(.5,0,.2,1) 1.2s infinite}
  @keyframes swap-up{
    0%,8%{transform:translateY(0);background:transparent}
    16%{background:rgba(0,209,128,.10)}
    30%,64%{transform:translateY(-100%);background:rgba(0,209,128,.10)}
    78%{transform:translateY(-100%);background:transparent}
    92%,100%{transform:translateY(0);background:transparent}
  }
  @keyframes swap-down{
    0%,8%{transform:translateY(0)}
    30%,64%{transform:translateY(100%)}
    92%,100%{transform:translateY(0)}
  }

  /* how it works — kicker dash + step circles */
  .head .eyebrow{display:inline-flex;align-items:center;gap:12px}
  .head .eyebrow::before{content:"";width:26px;height:1px;background:var(--rule)}
  .step-icon{width:74px;height:74px;margin:0 auto 24px;border-radius:50%;background:var(--white);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;position:relative;color:var(--seal);transition:transform .55s cubic-bezier(.19,1,.22,1),background .55s cubic-bezier(.19,1,.22,1),border-color .55s cubic-bezier(.19,1,.22,1)}
  .step-num{position:absolute;top:-7px;right:-7px;width:24px;height:24px;border-radius:50%;background:var(--seal);color:var(--paper);font:500 10px/24px "IBM Plex Mono",monospace;text-align:center;transition:background .55s cubic-bezier(.19,1,.22,1),transform .55s cubic-bezier(.34,1.56,.64,1),color .55s}
  .step h3{font-family:"Newsreader",serif;font-weight:400;font-size:26px;letter-spacing:-.01em}
  @keyframes step-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
  .flow.in .s1 .step-icon svg path{stroke-dasharray:100;stroke-dashoffset:100;animation:step-draw .9s cubic-bezier(.4,0,.2,1) .1s both}
  .flow.in .s2 .step-icon svg path{stroke-dasharray:100;stroke-dashoffset:100;animation:step-draw .9s cubic-bezier(.4,0,.2,1) .55s both}
  .flow.in .s3 .step-icon svg path{stroke-dasharray:100;stroke-dashoffset:100;animation:step-draw .9s cubic-bezier(.4,0,.2,1) 1s both}
  /* auto-hover loop: step 1 lifts, then 2, then 3 — phase-shifted with negative delays */
  @keyframes step-a{0%,8%{transform:translateY(0);background:var(--white);border-color:var(--rule)}10.5%,16%{transform:translateY(-6px);background:rgba(188,237,98,.16);border-color:var(--lime)}18.5%,100%{transform:translateY(0);background:var(--white);border-color:var(--rule)}}
  @keyframes step-a-badge{0%,8%{transform:none;background:var(--seal);color:var(--paper)}10.5%,16%{transform:rotate(-12deg) scale(1.1);background:var(--lime);color:var(--ink)}18.5%,100%{transform:none;background:var(--seal);color:var(--paper)}}
  @keyframes step-b{0%,24%{transform:translateY(0);background:var(--white);border-color:var(--rule)}26.5%,32%{transform:translateY(-6px);background:rgba(188,237,98,.16);border-color:var(--lime)}34.5%,100%{transform:translateY(0);background:var(--white);border-color:var(--rule)}}
  @keyframes step-b-badge{0%,24%{transform:none;background:var(--seal);color:var(--paper)}26.5%,32%{transform:rotate(-12deg) scale(1.1);background:var(--lime);color:var(--ink)}34.5%,100%{transform:none;background:var(--seal);color:var(--paper)}}
  @keyframes step-c{0%,40%{transform:translateY(0);background:var(--white);border-color:var(--rule)}42.5%,48%{transform:translateY(-6px);background:rgba(188,237,98,.16);border-color:var(--lime)}50.5%,100%{transform:translateY(0);background:var(--white);border-color:var(--rule)}}
  @keyframes step-c-badge{0%,40%{transform:none;background:var(--seal);color:var(--paper)}42.5%,48%{transform:rotate(-12deg) scale(1.1);background:var(--lime);color:var(--ink)}50.5%,100%{transform:none;background:var(--seal);color:var(--paper)}}
  .flow.in .s1 .step-icon{animation:step-a 9s ease-in-out 2s infinite}
  .flow.in .s1 .step-num{animation:step-a-badge 9s ease-in-out 2s infinite}
  .flow.in .s2 .step-icon{animation:step-b 9s ease-in-out 2s infinite}
  .flow.in .s2 .step-num{animation:step-b-badge 9s ease-in-out 2s infinite}
  .flow.in .s3 .step-icon{animation:step-c 9s ease-in-out 2s infinite}
  .flow.in .s3 .step-num{animation:step-c-badge 9s ease-in-out 2s infinite}
  .step-tag{display:inline-block;margin-top:16px;font:500 10px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--seal);background:rgba(188,237,98,.16);padding:7px 13px;border-radius:999px}

  /* numbers */
  .record{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:52px;border-top:1px solid var(--rule);padding-top:34px}
  .record .v{font-family:"Newsreader",serif;font-size:clamp(36px,4.4vw,54px);line-height:1;letter-spacing:-.035em}
  .record .l{font:400 12px/1.6 "IBM Plex Mono",monospace;color:var(--ink-2);margin-top:12px}
  .more{margin-top:34px;display:inline-block;font-size:15px;color:var(--seal);text-decoration:none;border-bottom:1px solid var(--seal);padding-bottom:3px}

  /* research */
  .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px}
  .post{background:var(--white);border:1px solid var(--rule);border-radius:3px;padding:0 0 28px;text-decoration:none;display:block;overflow:hidden;transition:border-color .2s,transform .2s}
  .post .cov{display:block;width:100%;height:150px;border-bottom:1px solid var(--rule);margin-bottom:26px}
  .post .eyebrow,.post h3,.post p,.post .d{padding:0 26px}
  .post:hover{border-color:var(--seal);transform:translateY(-2px)}
  .post h3{font-size:23px;margin-top:14px;line-height:1.22}
  .post p{color:var(--ink-2);font-size:15px;margin-top:12px}
  .post .d{font:400 11px/1 "IBM Plex Mono",monospace;color:var(--ink-2);margin-top:22px}

  /* faq */
  .faq{margin-top:44px;border-top:1px solid var(--rule)}
  details{border-bottom:1px solid var(--hair)}
  summary{cursor:pointer;padding:22px 0;font-family:"Newsreader",serif;font-size:23px;font-weight:400;letter-spacing:-.015em;list-style:none;display:flex;justify-content:space-between;gap:20px}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+";font-family:"IBM Plex Mono",monospace;font-size:19px;color:var(--ink-2)}
  details[open] summary::after{content:"\2013"}
  details p{margin:0 0 24px;color:var(--ink-2);font-size:16px;max-width:62ch}

  /* close */
  .close{background:var(--seal);color:var(--paper);padding:44px 0}
  .close-grid{display:grid;grid-template-columns:1fr 1.06fr;gap:64px;align-items:center}
  .close .show{margin-top:0;width:100%;justify-self:end}
  .show{background:rgba(255,255,255,.045);border:1px solid #365B4D;border-radius:4px;padding:22px 24px 18px}
  .show-hd{display:flex;justify-content:space-between;font:500 10px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:#A9BEB4}
  .show-live{display:flex;align-items:center;gap:7px;color:var(--lime)}
  .show-live i{width:5px;height:5px;border-radius:50%;background:var(--lime);animation:pulse 2.6s ease-in-out infinite}
  .show-sub{font:400 12px/1 "IBM Plex Mono",monospace;color:#8FA79B;margin:16px 0 4px;padding-bottom:14px;border-bottom:1px solid #2E4E42}
  .sr{display:grid;grid-template-columns:78px 1fr 52px 34px;align-items:center;gap:12px;padding:11px 0}
  .sr .nm{font-size:13px;color:var(--paper)}
  .sr .bw{height:7px;background:#2E4E42;border-radius:4px;overflow:hidden}
  .sr .bw i{display:block;height:100%;width:0;border-radius:4px;background:var(--lime);opacity:.92}
  .close.in .sr .bw i{animation:grow-b 1.2s cubic-bezier(.2,.7,.3,1) forwards}
  .close.in .sr:nth-child(2) .bw i{animation-delay:.08s}
  .close.in .sr:nth-child(3) .bw i{animation-delay:.16s}
  .close.in .sr:nth-child(4) .bw i{animation-delay:.24s}
  .close.in .sr:nth-child(5) .bw i{animation-delay:.32s}
  .sr .pc{font:500 12px/1 "IBM Plex Mono",monospace;text-align:right;color:var(--paper)}
  .sr .bs{font:400 11px/1 "IBM Plex Mono",monospace;text-align:right;color:#8FA79B}
  .show-ft{display:flex;justify-content:space-between;margin-top:14px;padding-top:13px;border-top:1px solid #2E4E42;font:400 10px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:#8FA79B}
  .eyebrow.light{color:#A9BEB4}
  .crecord{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 32px;margin-top:36px;border-top:1px solid #365B4D;padding-top:26px}
  .crecord .v{font-family:"Newsreader",serif;font-weight:300;font-size:clamp(26px,2.4vw,32px);line-height:1;letter-spacing:-.03em;color:var(--paper)}
  .crecord .l{font:400 11px/1.5 "IBM Plex Mono",monospace;color:#A9BEB4;margin-top:10px}
  .close h2{color:var(--paper);font-size:clamp(30px,3.1vw,40px);margin-top:16px;letter-spacing:-.01em;line-height:1.12}
  .close h2 em{font-style:italic;color:var(--lime)}
  .close-sub{color:#A9BEB4;font-size:15px;line-height:1.6;max-width:34ch;margin-top:20px}
  .close .cta-row{margin-top:26px}
  .show-ft a{color:var(--lime);text-decoration:none;letter-spacing:.12em;text-transform:uppercase}
  .show-ft a:hover{text-decoration:underline}
  .btn.ghost.light{background:transparent;color:var(--paper);border-color:#4C6A5E}
  .btn.ghost.light:hover{background:var(--paper);color:var(--seal);border-color:var(--paper)}
  .close .btn{background:var(--lime);border-color:var(--lime);color:#25320E;margin-top:14px}
  .close .btn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

  /* footer */
  footer{background:var(--ink);color:#98A29E;padding:44px 0 24px}
  .f-top{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:30px}
  .f-brand img{height:22px;width:auto;display:block;margin-bottom:16px}
  .f-brand p{font-size:15px;max-width:30ch;margin:0}
  .f-col h5{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);margin:0 0 18px}
  .f-col a{display:block;font-size:15px;color:#98A29E;text-decoration:none;padding:6px 0}
  .f-col a:hover{color:var(--paper)}
  .f-legal{max-width:74ch;font-size:10.5px;line-height:1.7;margin:28px 0 0;color:#6E7773}
  .f-bot{margin-top:16px;border-top:1px solid #2A302E;padding-top:16px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font:400 12px/1.7 "IBM Plex Mono",monospace}
  .f-soc{display:inline-flex;gap:14px;align-items:center}
  .f-soc a{display:inline-flex;align-items:center;color:var(--ink-2);transition:color .2s;line-height:1}
  .f-soc a:hover{color:var(--ink)}
  .f-bot a{color:inherit;text-decoration:none}
  .f-bot a:hover{color:var(--paper)}

  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
  @keyframes grow-b{to{width:var(--w)}}
  .rise{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
  .rise.in{opacity:1;transform:none}


  /* mobile nav */
  .burger{display:none;width:38px;height:38px;background:var(--white);border:1px solid var(--rule);border-radius:3px;position:relative;flex-shrink:0;padding:0}
  .burger i{position:absolute;left:10px;right:10px;height:1.6px;background:var(--ink);transition:transform .25s,opacity .2s,top .25s}
  .burger i:nth-child(1){top:13px}
  .burger i:nth-child(2){top:18.2px}
  .burger i:nth-child(3){top:23.4px}
  .burger.x i:nth-child(1){top:18.2px;transform:rotate(45deg)}
  .burger.x i:nth-child(2){opacity:0}
  .burger.x i:nth-child(3){top:18.2px;transform:rotate(-45deg)}
  .mnav{display:none}
  html,body{overflow-x:clip}

  @media (max-width:960px){
    .burger{display:block}
    .mnav{position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--rule);box-shadow:0 34px 44px -34px rgba(16,20,19,.35);padding:6px 22px 14px;flex-direction:column}
    .mnav.open{display:flex}
    .mnav a{display:block;padding:14px 0;font-size:16px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair)}
    .mnav a:last-child{border-bottom:none}
    .mnav a:active{color:var(--seal)}
  }

  @media (max-width:960px){
    .wrap{padding:0 22px}
    .nav{padding:12px 22px}
      .sec{padding:72px 0}
    .nav a.lk{display:none}
    .dd{display:none}
    .products,.tiles,.record,.f-top{grid-template-columns:1fr}
    .flow{padding:32px 16px 28px}
    .step{padding:0 8px}
    .step h3{font-size:19px}
    .step p{font-size:13px}
    .partners,.posts{grid-template-columns:1fr}
    .p-card,.p-wide{grid-column:span 1;min-height:0}
    .step{padding-right:0}
    .agents-wrap{margin:0 -22px;padding:0 22px;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .tiles,.record{gap:1px}
    .record{grid-template-columns:1fr 1fr;gap:30px}
    .f-top{grid-template-columns:1fr 1fr;gap:30px}
    .crecord{grid-template-columns:1fr 1fr;gap:26px}
    .stats{flex-wrap:wrap;gap:18px 30px}
    .hero-grid{grid-template-columns:1fr;gap:36px;margin-top:36px}
    .hero-art svg{width:100%;margin-left:0;margin-top:-24px;max-height:340px}
    .hero-copy{margin-top:0}
    .close-grid{grid-template-columns:1fr;gap:40px}
    .hero-art{order:-1;max-width:300px;margin:0 auto}
  }
  @media (prefers-reduced-motion:reduce){
    .marquee,.dash,.pip{animation:none}
    .close.in .sr .bw i{animation:none}
    .sr .bw i{width:var(--w)}
    .tiles.in .tile,.tiles.in .tile::after{animation:none}
    .hero-art .field,.hero-art .nd{animation:none}
    .hero-art .spokes line{animation:none;stroke-dashoffset:0}
    .agents.in .r-ys,.agents.in .r-zyfi{animation:none}
    .rise{opacity:1;transform:none;transition:none}
    .flow.in .step-icon svg path{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
    .flow.in .step-num{animation:none}
    .flow.in .step-icon{animation:none}
    .products.in .ef-rail{animation:none}
    .products.in .ef-dot-a,.products.in .ef-dot-b{animation:none;opacity:0}
    .products .product.enter-left,.products .product.enter-right{opacity:1;transform:none;transition:none}
  }

  /* modal */
  .ov{position:fixed;inset:0;z-index:200;background:rgba(16,20,19,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .2s}
  .ov.open{opacity:1}
  .ov[hidden]{display:none}
  .md{position:relative;background:var(--paper);border:1px solid var(--ink);border-radius:4px;width:100%;max-width:520px;max-height:90vh;overflow:auto;padding:40px 40px 34px;transform:translateY(10px) scale(.99);transition:transform .22s cubic-bezier(.2,.7,.3,1)}
  .ov.open .md{transform:none}
  .ov.done .md{overflow:visible;max-height:none}
  .ov.done .md-x{top:31px}
  .md h3{font-family:"Newsreader",serif;font-weight:300;font-size:36px;letter-spacing:-.025em;margin:14px 0 0}
  .md-s{color:var(--ink-2);font-size:16px;margin:14px 0 0}
  .md-x{position:absolute;top:31px;right:26px;background:none;border:0;font-size:26px;line-height:1;color:var(--ink-2);cursor:pointer;padding:6px}
  .md-x:hover{color:var(--ink)}
  .md-f{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
  .md-f label{display:flex;flex-direction:column;gap:8px;font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
  .md-f .full,.md-f .md-e,.md-f .md-go,.md-f .md-p{grid-column:1/-1}
  .md-f input,.md-f select,.md-f textarea{font:400 15px/1.4 "IBM Plex Sans",sans-serif;color:var(--ink);background:var(--white);border:1px solid var(--rule);border-radius:2px;padding:12px 13px;width:100%;resize:vertical}
  .md-f input:focus,.md-f select:focus,.md-f textarea:focus{outline:none;border-color:var(--seal);box-shadow:0 0 0 2px rgba(31,61,51,.14)}
  .md-f input.bad{border-color:#B4483F}
  .md-e{font:400 13px/1.4 "IBM Plex Sans",sans-serif;color:#B4483F;text-transform:none;letter-spacing:0}
  .md-go{width:100%;cursor:pointer;margin-top:2px}
  .md-p{font:400 12px/1.5 "IBM Plex Mono",monospace;color:var(--ink-2);margin:0}
  .md-ok{text-align:center;padding:18px 0 6px}
  .md-tick{width:56px;height:56px;border-radius:50%;background:var(--seal);color:var(--lime);display:flex;align-items:center;justify-content:center;margin:0 auto 6px}
  .md-ok .btn{margin-top:26px}
  @media (max-width:600px){.md{padding:32px 24px 26px}.md-f{grid-template-columns:1fr}}