/* Prime Traders art kit (pt-art.js): colours for the glass, chrome and lime drawings.
   BRAND block: the theme lime is the same #B8F500 as --pt-lime in app.css and --brand-lime on the site. */
:root{--art-lime:#B8F500;--art-ink:#101810;--art-paper:#F7F8F5}

/* Dark surfaces only: bright lime, white glass, light chrome. */
.pt-svg,.pt-divider{
 --a-lime:var(--art-lime);--a-lime-top:color-mix(in srgb,var(--art-lime) 55%,var(--art-paper));--a-lime-side:color-mix(in srgb,var(--art-lime) 62%,var(--art-ink));
 --a-glass:var(--art-paper);--a-text:var(--art-paper);--a-edge-lime:color-mix(in srgb,var(--art-lime) 70%,var(--art-paper));--a-edge-glass:color-mix(in srgb,var(--art-paper) 48%,transparent);
 --a-hl:color-mix(in srgb,var(--art-paper) 70%,transparent);--a-chrome-hi:var(--art-paper);--a-chrome-lo:color-mix(in srgb,var(--art-paper) 26%,var(--art-ink));
 --a-folder-hi:color-mix(in srgb,var(--art-paper) 18%,var(--art-ink));--a-folder-lo:var(--art-ink);
 --a-tile-hi:color-mix(in srgb,var(--art-paper) 13%,var(--art-ink));--a-tile-lo:color-mix(in srgb,var(--art-paper) 3%,var(--art-ink));--a-tile-line:color-mix(in srgb,var(--art-paper) 16%,transparent);
 --a-icon:var(--art-lime);--a-icon-shadow:var(--art-ink);--a-glow-alpha:.5;--a-grain-alpha:.14}

.pt-svg{display:block;width:100%;height:auto;overflow:visible}
.pt-svg .pa-glow{fill:var(--a-lime);opacity:var(--a-glow-alpha)}
.pt-svg .pa-grid{stroke:var(--a-edge-glass);stroke-width:1;stroke-dasharray:2 7;opacity:.55;fill:none}
.pt-svg .pa-edge-lime,.pt-divider .pa-edge-lime{stroke:var(--a-edge-lime);stroke-width:1}
.pt-svg .pa-edge-clear,.pt-divider .pa-edge-clear{stroke:var(--a-edge-glass);stroke-width:1}
.pt-svg .pa-top-lime{fill:var(--a-lime-top);stroke:var(--a-edge-lime);stroke-width:1}
.pt-svg .pa-top-clear{fill:color-mix(in srgb,var(--a-glass) 30%,transparent);stroke:var(--a-edge-glass);stroke-width:1}
.pt-svg .pa-hl{stroke:var(--a-hl);stroke-width:2;stroke-linecap:round;fill:none}
.pt-svg .pa-facet-clear{stroke:var(--a-edge-glass);stroke-width:1;fill:none}
.pt-svg .pa-facet-lime{stroke:var(--a-edge-lime);stroke-width:1;fill:none;opacity:.6}
.pt-svg text{font-family:var(--font,"Manrope",sans-serif);font-weight:600;font-size:30px;letter-spacing:-.02em}
.pt-svg .pa-key-clear{fill:var(--a-text)}.pt-svg .pa-key-lime{fill:var(--art-ink)}
.pt-svg .pa-sheet{fill:var(--a-lime)}.pt-svg .pa-sheet-line{stroke:color-mix(in srgb,var(--art-ink) 45%,transparent);stroke-width:5;stroke-linecap:round}
.pt-svg .pa-dot{fill:var(--a-lime)}
.pt-svg .pa-coin-edge{stroke:var(--a-hl);stroke-width:1.5}.pt-svg .pa-coin-inner{fill:none;stroke:color-mix(in srgb,var(--art-ink) 28%,transparent);stroke-width:2}
.pt-svg .pa-arrow-grid{stroke:color-mix(in srgb,var(--art-ink) 30%,transparent);stroke-width:1;fill:none}
.pt-svg .pa-wick,.pt-divider .pa-wick{stroke:var(--a-edge-glass);stroke-width:2;stroke-linecap:round}
.pt-svg .pa-wick-up{stroke:var(--a-edge-lime);stroke-width:2;stroke-linecap:round}
.pt-svg .pa-body{fill:color-mix(in srgb,var(--a-glass) 22%,transparent);stroke:var(--a-edge-glass)}
.pt-svg .pa-body-up{fill:var(--a-lime);stroke:var(--a-edge-lime)}
.pt-svg .pa-tile-edge{stroke:var(--a-tile-line);stroke-width:1}
.pt-svg .pa-grain{opacity:var(--a-grain-alpha)}
.pt-svg .pa-icon,.pt-svg .pa-icon-shadow{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pt-svg .pa-icon{stroke:var(--a-icon)}.pt-svg .pa-icon-shadow{stroke:var(--a-icon-shadow);opacity:.8}

/* Keycap pair: clear key behind, lime key in front. */
.pa-pair{display:grid;grid-template-columns:1fr 1fr;align-items:center}.pa-pair>span:first-child{transform:translate(12%,-14%) scale(.9)}.pa-pair>span:last-child{transform:translate(-10%,16%)}

/* Hero placement. Desktop: a large object in the right half, vertically centred on the text.
   Phone: the object leaves the corner and becomes the closing row of the hero, full size, in flow. */
.hero.has-art{position:relative;overflow:hidden}.hero.has-art .wrap{position:relative;z-index:1}
.pt-hero-art{position:absolute;z-index:0;pointer-events:none;right:max(24px,calc((100vw - 1100px)/2));top:calc(50% + 24px);transform:translateY(-50%);width:min(34vw,400px)}
.pt-hero-art--home,.pt-hero-art--landing{width:min(40vw,500px)}
@media(min-width:761px){.hero.has-art .wrap>*{max-width:min(600px,56%)}}
.pt-hero-art .pa-candle,.pt-hero-art>svg,.pt-hero-art .pa-pair>span{animation:pa-rise .7s var(--ease-out,ease-out) both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes pa-rise{from{opacity:0;translate:0 14px}}
@media(max-width:760px){
 .hero.has-art{padding-bottom:28px}
 .pt-hero-art{position:relative;top:auto;right:auto;transform:none;width:min(72%,280px);margin:4px auto 0}
 .pt-hero-art--home,.pt-hero-art--landing{width:var(--shell);max-width:460px;margin:12px auto 0}
 .pt-hero-art--profile,.pt-hero-art--bot{width:min(84%,320px);margin-bottom:28px}
}

/* Divider between two plain sections. */
.pt-divider{display:flex;align-items:center;gap:16px;margin:-8px 0 36px}.pt-divider i{flex:1;height:1px;background:var(--line,var(--a-edge-glass))}.pt-divider svg{width:84px;height:auto;flex:none}

/* Tile next to a heading or a list item. */
.pt-tile{display:block;width:56px;height:56px;margin:0 0 14px}.pt-tile .pt-svg{width:100%;height:100%}
@media(prefers-reduced-motion:reduce){.pt-hero-art *{animation:none!important}}

/* Static slots on site pages (data-pt-art). */
.pt-side-art{width:min(100%,230px);margin-top:44px}
.pt-brief-art{width:240px;justify-self:center;margin-bottom:8px}
.pt-divider-slot .pt-divider{margin:0 0 48px}
@media(max-width:760px){.pt-side-art{width:132px;margin-top:24px}.pt-brief-art{width:150px;justify-self:start}.pt-divider-slot .pt-divider{margin-bottom:32px}}