/* Symphoria main site. Tokens: E-Discovery neutrals + socrash.ai mint. Inter on the web (Neue Haas waits for a web licence).
   Rules from the design reviews: nothing to the left of a heading; one big piece per screen; photos alternate with black
   screens (schemes, live interface, logos); words never sit on the subject of a picture. */
:root{--f:Inter,system-ui,sans-serif;--m:RMono,ui-monospace,monospace;--bg:#080808;--p1:#0f0f0f;--p2:#151515;--tx:#F6F6F6;--dim:#8a8a8a;--fnt:#5c5c5c;
  --line:#242424;--line2:#333;--t:#21DDA7;--t2:rgba(33,221,167,.12);--on:#04140E;--red:#FF5151;--amb:#E8C15A;--tbd:#FFD66B;
  --ease:cubic-bezier(.2,.7,.1,1);--gut:clamp(16px,4vw,64px)}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:400 18px/1.45 var(--f);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%;height:auto}
.wrap{padding:0 var(--gut)}
.k{font:700 12px/1.2 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--t)}
.k i{font-style:normal;color:var(--dim)}
h1,h2,h3{margin:0;font-weight:300;letter-spacing:-.028em}
.mega{font-size:clamp(64px,15vw,260px);line-height:.9;letter-spacing:-.045em}
h1{font-size:clamp(44px,6.4vw,104px);line-height:1}
h2{font-size:clamp(34px,4.8vw,76px);line-height:1.03}
h3{font-size:clamp(24px,2.4vw,36px);line-height:1.1;letter-spacing:-.02em}
.lead{font-size:clamp(18px,1.7vw,24px);color:#bdbdbd;max-width:40ch;margin:.8em 0 0}
.small{font-size:15px;color:var(--dim)}
.tbd{color:var(--tbd);box-shadow:inset 0 -1px var(--tbd)}
sup.s,.s{font:600 .62em var(--m);color:var(--t);vertical-align:super;line-height:0}
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;background:var(--t);color:var(--on);font:600 16px var(--f);white-space:nowrap;transition:transform .3s var(--ease),box-shadow .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(33,221,167,.25)}
.btn.g{background:transparent;color:var(--tx);box-shadow:inset 0 0 0 1px #555}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.more{display:inline-flex;gap:10px;align-items:center;margin-top:28px;font-weight:500;color:var(--tx);border-bottom:1px solid var(--t);padding-bottom:4px}
.more:after{content:"→";color:var(--t);transition:transform .3s var(--ease)}
.more:hover:after{transform:translateX(4px)}

/* header */
.top{position:fixed;z-index:50;left:0;right:0;top:0;height:64px;display:flex;align-items:center;gap:28px;padding:0 var(--gut);background:linear-gradient(rgba(8,8,8,.92),rgba(8,8,8,.0));transition:background .3s}
.top.solid{background:rgba(8,8,8,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{display:flex;gap:9px;align-items:center;font:600 15px var(--f);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.logo i{width:18px;height:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:3px;border:1.4px solid currentColor}
.logo i b{background:currentColor;border-radius:50%}
.menu{display:flex;gap:22px;font-size:14.5px;color:#c4c4c4}
.menu a:hover,.menu a.on{color:var(--tx)}
.menu a.on{box-shadow:inset 0 -1px var(--t)}
.top .sp{flex:1}
.top .btn{height:40px;padding:0 16px;font-size:14px}
.burger{display:none;background:none;border:0;color:var(--tx);font:500 14px var(--f);padding:8px 0}

/* motion */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.kb{overflow:hidden}.kb img{transform:scale(1.1);transition:transform 9s cubic-bezier(.15,.6,.2,1)}.kb.in img{transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.kb img{transform:none;transition:none}}

/* screens */
.scr{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px var(--gut)}
.scr.auto{min-height:auto;padding:140px var(--gut)}
.black{background:var(--bg)}
.rule{border-top:1px solid var(--line)}
/* product hero: the product name, huge */
.phero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px var(--gut) 64px;position:relative}
.phero .mega{position:relative;z-index:2}
.phero .row{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:24px;flex-wrap:wrap}
.phero .row .lead{margin:0}
/* full-bleed photo with the words on the dark side */
.photo{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:0 var(--gut) 80px;overflow:hidden}
.photo .pic{position:absolute;inset:0}
.photo .pic img{width:100%;height:100%;object-fit:cover}
.photo:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(transparent 55%,rgba(8,8,8,.92))}
.photo.left .pic{left:34%}
.photo.left:before{background:linear-gradient(90deg,var(--bg) 34%,rgba(8,8,8,0) 52%)}
.photo.left{align-items:center}
.photo .txt{position:relative;z-index:2;max-width:min(620px,40vw)}
.photo.top{align-items:flex-start;padding-top:140px}
.photo.top:before{background:linear-gradient(rgba(8,8,8,.9),transparent 45%)}
.photo.top .txt,.photo:not(.left) .txt{max-width:900px}
/* two columns: words and one big live piece */
.duo{display:grid;grid-template-columns:minmax(280px,.8fr) 1.5fr;gap:clamp(32px,5vw,80px);align-items:center}
.duo.r{grid-template-columns:1.5fr minmax(280px,.8fr)}.duo.r>.txt{order:2}
.cap{font:12px var(--m);color:var(--fnt);margin-top:12px;letter-spacing:.03em}

/* the app panels, live HTML (real data, every fact numbered) */
.app{background:var(--p1);border:1px solid var(--line2);border-radius:4px;box-shadow:0 40px 120px rgba(0,0,0,.7);overflow:hidden;font:13.5px/1.45 var(--f)}
.app .bar{display:flex;align-items:center;gap:12px;height:42px;padding:0 14px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--dim)}
.app .bar b{color:var(--tx);font-weight:500}
.app .bar .pill{margin-left:auto;display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;border:1px solid var(--line2);border-radius:12px;color:var(--tx);white-space:nowrap}
.app .bar .pill i{width:6px;height:6px;border-radius:50%;background:var(--t)}
.app .body{position:relative}
.g svg{display:block;width:100%;height:auto}
.g .n rect,.g .n circle{fill:var(--bg);stroke:var(--tx);stroke-width:1.6}
.g .n.f rect,.g .n.f circle{stroke:var(--t)}
.g .n text{fill:var(--tx);font:500 13px var(--f)}
.g .n text.t{fill:var(--dim);font:10.5px var(--m)}
.g .e line,.g .e path{stroke:#3c3c3c;stroke-width:1.3;fill:none}
.g .e.t line,.g .e.t path{stroke:var(--t);stroke-dasharray:5 4}
.g .e.r line,.g .e.r path{stroke:var(--red);stroke-dasharray:5 4}
.g .e text{fill:#8d8d8d;font:10px var(--m);letter-spacing:.05em}
.g .e.t text{fill:var(--t)}.g .e.r text{fill:var(--red)}
.g .lab{paint-order:stroke;stroke:var(--p1);stroke-width:5px}
.g [data-s]{opacity:0;transition:opacity .8s var(--ease)}
.g [data-s].on{opacity:1}
.find{padding:14px 16px;border-top:1px solid var(--line);display:grid;grid-template-columns:22px 1fr;gap:10px}
.find:first-child{border-top:0}
.find .ic{width:20px;height:20px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;font:600 11px var(--f)}
.find b{font-weight:500;display:block}
.find p{margin:4px 0 0;color:#b8b8b8}
.chip{display:inline-block;margin-top:8px;font:600 10.5px var(--f);letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:2px}
.chip.r{color:var(--red);background:rgba(255,81,81,.12)}.chip.t{color:var(--t);background:var(--t2)}.chip.g{color:var(--dim);background:#1d1d1d}
.find.r{color:var(--red)}.find.t{color:var(--t)}.find.g{color:var(--dim)}
.find b,.find p{color:var(--tx)}.find p{color:#b8b8b8}
.arc{padding:22px 26px;font-size:15.5px;line-height:1.6;color:#d9d9d9}
.arc h4{margin:0 0 12px;font-weight:300;font-size:26px;letter-spacing:-.02em;color:var(--tx)}
.arc p{margin:0 0 12px}
.arc .hl{background:var(--t2);box-shadow:inset 0 -1px var(--t);color:var(--tx)}
.led{font:12.5px/1.9 var(--m);padding:14px 16px;color:#c9c9c9}
.led .row{display:grid;grid-template-columns:60px 1fr auto;gap:12px;border-bottom:1px solid var(--line);padding:6px 0}
.led .row span:first-child{color:var(--t)}.led .ok{color:var(--t)}
.term{font:13px/1.9 var(--m);padding:16px 18px;color:#cfcfcf;background:#0a0a0a;white-space:pre-wrap}
.term .ok{color:var(--t)}.term .d{color:var(--fnt)}
.stage-in [data-i]{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*.35s + .2s)}
.stage-in.in [data-i]{opacity:1;transform:none}

/* sources list */
.srcs{margin:28px 0 0;padding:0;list-style:none;font-size:14px;color:var(--dim);columns:2;column-gap:40px}
.srcs li{break-inside:avoid;margin:0 0 8px;display:grid;grid-template-columns:30px 1fr}
.srcs li b{font:500 12px var(--m);color:var(--t)}
.srcs a{box-shadow:inset 0 -1px #444}
.srcs a:hover{color:var(--tx)}

/* pinned scroll scene (home): the stage holds, the story moves */
.pin{position:relative}
.pin .stick{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(300px,.75fr) 1.5fr;gap:clamp(24px,4vw,64px);align-items:center;padding:80px var(--gut) 40px;overflow:hidden}
.pin .steps{position:relative;height:60vh}
.pin .step{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .7s var(--ease);pointer-events:none}
.pin .step.on{opacity:1;transform:none;pointer-events:auto}
.pin .step h2{font-size:clamp(30px,3.6vw,58px)}
.pin .prog{position:absolute;left:var(--gut);right:var(--gut);bottom:24px;height:2px;background:var(--line)}
.pin .prog i{position:absolute;left:0;top:0;bottom:0;background:var(--t);width:0}
.pin .panel{position:relative}
.pin .over{position:absolute;right:16px;bottom:16px;width:min(360px,70%);transition:opacity .6s var(--ease),transform .7s var(--ease);opacity:0;transform:translateY(16px)}
.pin .over.on{opacity:1;transform:none}

/* horizontal product rail (pinned) */
.rail{position:relative}
.rail .stick{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.rail .head{padding:0 var(--gut) 36px}
.rail .track{display:flex;gap:24px;padding:0 var(--gut);will-change:transform}
.card{flex:0 0 min(78vw,980px);height:min(62vh,600px);position:relative;border:1px solid var(--line2);overflow:hidden;background:var(--p1);display:flex;flex-direction:column;justify-content:flex-end;padding:32px}
.card .pic{position:absolute;inset:0}
.card .pic img,.card .pic video{width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform 1.2s var(--ease)}
.card:hover .pic img{transform:scale(1.03)}
.card:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(transparent 40%,rgba(8,8,8,.95))}
.card>*:not(.pic){position:relative;z-index:2}
.card h3{font-size:clamp(30px,3.2vw,52px)}

/* logos: sources and standards as a slow marquee of wordmarks */
.logos{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:42px 0}
.logos .row{display:flex;gap:64px;width:max-content;animation:mq 50s linear infinite}
.logos .row span{font:500 clamp(20px,2vw,30px) var(--f);color:#9b9b9b;letter-spacing:-.01em;white-space:nowrap;display:flex;align-items:center;gap:12px}
.logos .row span i{font:500 11px var(--m);color:var(--fnt);letter-spacing:.06em;text-transform:uppercase}
@keyframes mq{to{transform:translateX(-50%)}}

/* a list of facts (black screens between photos) */
.facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:56px}
.facts>div{padding:28px 28px 0 0}
.facts>div+div{padding-left:28px;border-left:1px solid var(--line)}
.facts b{display:block;font-weight:300;font-size:clamp(40px,4.4vw,72px);letter-spacing:-.035em;line-height:1}
.facts span{display:block;color:var(--dim);margin-top:10px;font-size:16px;max-width:30ch}
/* chain scheme */
.chain{display:flex;align-items:center;gap:0;margin-top:56px;overflow-x:auto;padding-bottom:8px}
.chain .blk{flex:0 0 auto;border:1px solid var(--line2);background:var(--p1);padding:16px 18px;min-width:190px;font:12px/1.7 var(--m);color:#bdbdbd}
.chain .blk b{display:block;font:500 15px var(--f);color:var(--tx);margin-bottom:4px}
.chain .lnk{flex:0 0 48px;height:1.5px;background:var(--t);position:relative}
.chain .lnk:after{content:"";position:absolute;right:-1px;top:-4px;border:4.5px solid transparent;border-left:7px solid var(--t)}
.chain .btc{border-color:var(--t);color:var(--t)}
/* pricing */
.plans{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:48px}
.plans>div{padding:28px 24px 28px 0}
.plans>div+div{padding-left:24px;border-left:1px solid var(--line)}
.plans b{display:block;font-weight:300;font-size:clamp(44px,4.6vw,72px);letter-spacing:-.04em;line-height:1;margin:14px 0}
.plans b small{font-size:.28em;color:var(--dim);letter-spacing:0}
.plans ul{margin:12px 0 0;padding:0;list-style:none;color:#bbb;font-size:15px}
.plans li{padding:5px 0}
/* faq */
.qa{border-top:1px solid var(--line);margin-top:48px}
.qa details{border-bottom:1px solid var(--line);padding:22px 0}
.qa summary{cursor:pointer;font-size:clamp(20px,2vw,28px);font-weight:300;letter-spacing:-.015em;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary:after{content:"+";float:right;color:var(--t)}
.qa details[open] summary:after{content:"−"}
.qa p{color:#bdbdbd;max-width:70ch;margin:14px 0 0}
/* live board */
.live{position:relative;overflow:hidden;aspect-ratio:16/10;border:1px solid var(--line2);box-shadow:0 40px 120px rgba(0,0,0,.7);background:var(--bg)}
.live iframe{position:absolute;left:0;top:0;width:1440px;height:900px;border:0;transform-origin:0 0;pointer-events:none}
.live .tag{position:absolute;right:12px;top:12px;z-index:2;font:700 10px var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--on);background:var(--t);padding:5px 8px}
/* lens plate */
.plate{position:absolute;z-index:3;background:rgba(6,12,11,.84);border:1px solid rgba(33,221,167,.6);padding:16px 18px;font:13.5px/1.5 var(--m);color:#DFFBF8;backdrop-filter:blur(6px);width:min(400px,86vw)}
.plate .pk{display:flex;justify-content:space-between;font:700 10.5px var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--t)}
.plate .pk i{font-style:normal;color:var(--dim)}
.plate b{display:block;font:500 20px/1.25 var(--f);color:#fff;margin:10px 0 6px}
.offer{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:48px}
.offer>div{padding:32px 32px 0 0}.offer>div+div{padding-left:32px;border-left:1px solid var(--line)}
.offer b{display:block;font-weight:300;font-size:clamp(48px,5vw,84px);letter-spacing:-.04em;line-height:1;margin:16px 0}
.offer b small{font-size:.25em;color:var(--dim);letter-spacing:0}
/* footer */
footer{border-top:1px solid var(--line);padding:56px var(--gut) 40px;display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:32px;font-size:14px;color:var(--dim)}
footer h5{margin:0 0 12px;font:700 11px var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--tx)}
footer a{display:block;padding:4px 0}footer a:hover{color:var(--tx)}
footer .fine{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--fnt);font-size:13px}

@media (max-width:900px){
  .menu{display:none}.menu.open{display:flex;position:fixed;top:64px;left:0;right:0;bottom:0;flex-direction:column;gap:0;background:var(--bg);padding:16px var(--gut);font-size:28px;font-weight:300}
  .menu.open a{padding:14px 0;border-bottom:1px solid var(--line)}
  .burger{display:block}
  .top .btn{display:none}
  .scr{padding:96px var(--gut);min-height:auto}
  .duo,.duo.r{grid-template-columns:1fr}.duo.r>.txt{order:0}
  .photo{min-height:92svh;padding-bottom:40px}
  .photo.left .pic{left:0;bottom:38%}
  .photo.left:before{background:linear-gradient(transparent 30%,var(--bg) 62%)}
  .photo.left{align-items:flex-end}
  .photo .txt{max-width:none}
  .pin .stick{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start;padding-top:76px;gap:12px}
  .pin .steps{height:34vh;order:2}
  .pin .panel{order:1}
  .pin .over{display:none}
  .pin .panel .app{overflow:hidden}.pin .panel .g svg{width:170%;max-width:none;margin-left:-38%}
  .rail .stick{position:static;height:auto;padding:96px 0}
  .rail{height:auto!important}
  .rail .track{flex-direction:column;transform:none!important}
  .card{flex:none;width:100%;height:68vh}
  .facts,.plans,.offer{grid-template-columns:1fr}
  .facts>div+div,.plans>div+div,.offer>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .srcs{columns:1}
  footer{grid-template-columns:1fr 1fr}
  .live{aspect-ratio:4/5}
}

/* hero: floating interface cards over the photo (in its darker zones), one by one, then a slow drift */
.floats{position:absolute;inset:0;z-index:2;pointer-events:none}
.fl{position:absolute;width:min(270px,22vw);background:rgba(15,15,15,.88);border:1px solid #2f2f2f;border-radius:4px;box-shadow:0 24px 60px rgba(0,0,0,.6);backdrop-filter:blur(8px);font:12.5px/1.45 var(--f);color:#d6d6d6;
  opacity:0;transform:translateY(24px) scale(.97);animation:flIn 1s var(--ease) forwards,drift var(--dur,7s) ease-in-out infinite alternate;animation-delay:var(--d,0s),calc(var(--d,0s) + 1s)}
.fl .h{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid #242424;font:600 10px var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.fl .h i{width:6px;height:6px;border-radius:50%;background:var(--t)}
.fl .h .x{margin-left:auto;font:500 10px var(--m);letter-spacing:0;text-transform:none;color:var(--fnt)}
.fl .b{padding:10px 11px}
.fl b{display:block;color:var(--tx);font-weight:500;font-size:13.5px}
.fl .m{font:11px var(--m);color:var(--fnt);margin-top:4px}
.fl .bar2{display:flex;height:6px;margin-top:9px;border-radius:2px;overflow:hidden}
.fl .bar2 span{display:block}
.fl.r{border-color:rgba(255,81,81,.45)}.fl.r .h i{background:var(--red)}.fl.r .h{color:var(--red)}
.fl.q:before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;background:var(--t);border-radius:4px 0 0 4px}
.fl img{display:block;width:100%;height:auto;border-bottom:1px solid #242424}
.fl .ok{color:var(--t)}
@keyframes flIn{to{opacity:1;transform:none}}
@keyframes drift{from{translate:0 0}to{translate:0 -10px}}
@media (prefers-reduced-motion:reduce){.fl{animation:none;opacity:1;transform:none}}
@media (max-width:900px){.floats{inset:56px 0 40% 0}.fl{width:min(220px,58vw);font-size:11.5px}.fl.mh{display:none}.fl.r{top:auto!important;bottom:4%}.fl:first-child{left:auto!important;right:3%}}

/* density pass: sections size to their content; text sections always carry a picture */
.scr{min-height:auto;padding:110px var(--gut)}
.scr.auto{padding:90px var(--gut)}
.phero{min-height:84svh;overflow:hidden}
.phero .pic{position:absolute;inset:0 0 0 38%;z-index:0}
.phero .pic img{width:100%;height:100%;object-fit:cover;opacity:.9}
.phero .pic:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg),rgba(8,8,8,0) 45%),linear-gradient(transparent 60%,var(--bg))}
.phero>.k{position:relative;z-index:2}
/* asymmetry scheme: who sees whom */
.asym{display:grid;gap:14px}
.asym .ln{display:grid;grid-template-columns:150px 1fr 150px;align-items:center;gap:14px;padding:22px;border:1px solid var(--line2);background:var(--p1);border-radius:4px}
.asym .bx{border:1px solid #444;padding:12px 10px;text-align:center;font-size:14px;border-radius:3px}
.asym .bx.p{border-radius:40px}
.asym .ar{position:relative;height:1.5px;background:#555}
.asym .ar:after{content:"";position:absolute;right:-1px;top:-4px;border:4.5px solid transparent;border-left:7px solid #555}
.asym .ar span{position:absolute;left:0;right:0;top:-26px;text-align:center;font:11px var(--m);color:var(--dim);letter-spacing:.04em}
.asym .ln.us{border-color:rgba(33,221,167,.5);background:rgba(33,221,167,.05)}
.asym .ln.us .ar{background:var(--t)}.asym .ln.us .ar:after{border-left-color:var(--t)}.asym .ln.us .ar span{color:var(--t)}
.asym .ln.us .bx{border-color:var(--t)}
.asym .cap2{grid-column:1/-1;font-size:13px;color:var(--dim);margin-top:4px}
/* mini illustrations above facts */
.facts .il{height:120px;margin-bottom:22px;border:1px solid var(--line);background:var(--p1);border-radius:3px;position:relative;overflow:hidden}
.facts .il img{width:100%;height:100%;object-fit:cover;opacity:.85}
.mini-note{position:absolute;left:14px;top:14px;right:30px;background:#121212;border:1px solid #2a2a2a;border-left:3px solid var(--t);padding:8px 10px;font-size:12.5px;color:#ddd}
.mini-note small{display:block;font:10px var(--m);color:var(--fnt);margin-top:4px}
@media (max-width:900px){.phero .pic{inset:0;opacity:.45}.asym .ln{grid-template-columns:90px 1fr 90px;padding:16px}.scr{padding:72px var(--gut)}}

/* hero hub: the address in the middle, owners radiating out, data cards linked to it */
.links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.links line{stroke:rgba(33,221,167,.35);stroke-width:1;stroke-dasharray:3 5;opacity:0;animation:fadeIn 1s forwards;animation-delay:var(--d,3s)}
.hub{position:absolute;left:67%;top:50%;width:520px;height:400px;transform:translate(-50%,-50%)}
.hub .rays{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hub .rays line{stroke:var(--t);stroke-width:1.3;fill:none}
.hub .rays .ring{fill:none;stroke:var(--t);stroke-width:1;opacity:.6;transform-origin:0 0;animation:ring 3s ease-out infinite}
.core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px 14px 10px 34px;background:rgba(8,8,8,.86);border:1px solid var(--t);border-radius:3px;white-space:nowrap;
  opacity:0;animation:flIn 1s var(--ease) forwards;animation-delay:var(--d,.4s);box-shadow:0 0 40px rgba(33,221,167,.25)}
.core i{position:absolute;left:12px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--t);box-shadow:0 0 0 4px rgba(33,221,167,.2)}
.core b{display:block;font:500 15px var(--f);color:#fff}
.core span{display:block;font:11px var(--m);color:var(--dim)}
.own{position:absolute;transform:translate(-50%,-50%);padding:7px 10px;background:rgba(12,12,12,.88);border:1px solid #333;border-radius:3px;white-space:nowrap;backdrop-filter:blur(6px);
  opacity:0;animation:flIn .9s var(--ease) forwards,drift var(--dur,6s) ease-in-out infinite alternate;animation-delay:var(--d,1s),calc(var(--d,1s) + 1s)}
.own b{display:block;font:500 12.5px var(--f);color:var(--tx)}
.own span{display:block;font:10.5px var(--m);color:var(--t)}
@keyframes ring{from{transform:scale(.4);opacity:.7}to{transform:scale(2.6);opacity:0}}
@keyframes fadeIn{to{opacity:1}}
@media (max-width:900px){.links{display:none}.hub{left:50%;top:50%;transform:translate(-50%,-50%) scale(.52)}.own b{font-size:14px}.own span{font-size:12px}}
@media (prefers-reduced-motion:reduce){.core,.own,.links line{animation:none;opacity:1}}