/* Hallmark · shape: Product stage · genre: modern-minimal · theme: brand (Akari, locked by DESIGN.md) · redesign: full
 * paper: oklch(0.13 0.01 75) · accent: oklch(0.80 0.12 85) · display: Jost · body: Inter · hero: Stage, the real dashboard under the headline · nav: bar, wordmark and one action · footer: wordmark and links · signature: the real app on the first screen with a trade journaling itself on top of it
 * axes: dark and daylight alternating/geometric-light/champagne · posture: Settled · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: E, the tour and the privacy row share the ivory room; the tour is tabs over one big capture, the privacy row three short lines, so they read as different objects */
:root{
  /* landing-only tokens; the shared palette, fonts and day/night rooms live in site.css */
  --room-veil:rgba(18,14,8,.74);
  --zone-down:rgba(251,111,126,.7); --zone-up:rgba(47,211,154,.7); --zone-fill:rgba(224,185,89,.07);
  --pulse:rgba(212,169,63,.65);
  --shade-soft:rgba(0,0,0,.75);
  --ivory-1:#fbf0cc; --ivory-2:#ecd08a; --ivory-3:#d6ac4c; --ivory-ink:#3d3015;
  --sec:112px;
}
#top,#how,#tour,#privacy,#pricing{scroll-margin-top:80px}
body{overflow-x:clip;background:var(--room);color:var(--ink);font:16px/1.55 var(--f-body);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
h1,h2,h3{font-family:var(--f-display);font-weight:300;letter-spacing:-.01em;line-height:1.02;overflow-wrap:break-word;min-width:0;text-wrap:balance}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold-grad);color:var(--gold-ink);padding:12px 16px;border-radius:8px;z-index:100}
.skip:focus{left:8px}

/* buttons: the join action is the biggest thing on every screen it appears on */
.btn.ghost{border:1px solid var(--edge-2);color:var(--ink);background:var(--paper)}
.btn.ghost:hover{border-color:var(--gold-d);color:var(--ink)}
.btn.lg{min-height:56px;padding:0 32px;font-size:17px}
.textlink{display:inline-flex;align-items:center;min-height:48px;padding:0 8px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold-d);text-underline-offset:.3em}
.textlink:hover{color:var(--gold-l)}

/* a lit volume: plain paper, a warm light from above, one edge */
.lit{position:relative;background:var(--lantern),var(--paper);border:1px solid var(--edge-2);border-radius:16px}

/* nav */
header.nav{position:sticky;top:0;z-index:50;background:var(--room);border-bottom:1px solid var(--edge)}
header.nav .wrap{height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.links{display:flex;gap:32px;font-size:14px}
.links a{color:var(--ink-2);text-decoration:none}.links a:hover{color:var(--gold)}
.navcta{display:flex;gap:8px;align-items:center}
.navcta .login{color:var(--ink);text-decoration:none;font-size:14px;padding:0 12px;min-height:44px;display:inline-flex;align-items:center}
.links .mlogin,.navcta .cta-s{display:none}
.menubtn{display:none;position:relative;flex:none;width:44px;height:44px;margin-right:-12px;padding:0;background:none;border:0;border-radius:12px;color:var(--ink);cursor:pointer}
.menubtn i{position:absolute;left:12px;right:12px;height:1.5px;border-radius:2px;background:currentColor;transition:transform .28s cubic-bezier(.16,1,.3,1)}
.menubtn i:first-child{top:17px}.menubtn i:last-child{top:25px}
header.nav.open .menubtn i:first-child{transform:translateY(4px) rotate(45deg)}
header.nav.open .menubtn i:last-child{transform:translateY(-4px) rotate(-45deg)}

/* hero: the headline, the join action, then the real product, with a trade journaling itself on top of it */
.hero{padding:64px 0 var(--sec)}
.hero .wrap{display:grid;gap:56px}
.hero h1{font-size:clamp(48px,7.4vw,108px);line-height:.98;max-width:none}
.hero .sub{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:32px;margin-top:40px}
.hero .lede{font-size:clamp(18px,1.7vw,24px);line-height:1.45;max-width:28ch;color:var(--ink-2)}
.hero .ctas{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.hero .tp{flex-basis:100%;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;color:var(--ink-2);text-decoration:none}
.hero .tp svg{fill:#00b67a;flex:none}
.hero .tp:hover{color:var(--gold-l)}
.hero .copy{min-width:0}
.stage{position:relative}
.shot{min-width:0;overflow:hidden;padding:8px}
.shot img,.shot video{border-radius:8px;width:100%;height:auto}
.note{margin-top:16px;font-size:13px;color:var(--faint)}
.ticket{position:absolute;right:32px;bottom:-56px;width:min(480px,44%);overflow:hidden;box-shadow:0 24px 48px -24px var(--room)}
.ticket .thead{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--edge-2)}
.ticket .thead .l{display:flex;gap:12px;align-items:center}
.ticket .thead .sym{font-weight:600}
.side{font-size:12px;background:var(--edge-2);color:var(--gold-l);padding:4px 8px;border-radius:4px}
.ticket svg{display:block;width:100%;height:auto}
.tstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--edge-2)}
.tstats div{padding:12px 16px;border-right:1px solid var(--edge-2)}
.tstats div:last-child{border-right:0}
.tstats small{display:block;font-size:12px;color:var(--muted)}
.tstats b{display:block;margin-top:4px;font:400 15px/1.1 var(--f-mono)}
.synced{font-size:12px;color:var(--up)}
.ticket line.up{stroke:var(--up)}.ticket rect.up{fill:var(--up)}
.ticket line.dn{stroke:var(--down)}.ticket rect.dn{fill:var(--down)}
.ticket .zone-dn{stroke:var(--zone-down)}.ticket .zone-up{stroke:var(--zone-up)}.ticket .zone-mid{stroke:var(--muted)}
.ticket .zone-fill{fill:var(--zone-fill)}
.ticket .mk.solid{fill:var(--gold-l)}.ticket .mk.ring{fill:none;stroke:var(--gold-l)}

/* steps: three titles, no paragraphs */
.steps{border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);background:var(--room-veil)}
.steps .wrap{padding-top:64px;padding-bottom:64px}
.steps ol{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.steps .s{border-top:2px solid var(--gold-d);padding-top:24px}
.steps .n{display:block;font:200 clamp(48px,5vw,72px)/1 var(--f-display);color:var(--gold-d)}
.steps .s h2{margin-top:16px;font-size:clamp(22px,2vw,28px);line-height:1.2;font-weight:400}

/* tour (daylight): one big capture at a time, switched by tabs */
.tour{padding:var(--sec) 0 64px}
.tour h2{font-size:clamp(40px,5vw,76px)}
.tabs{display:inline-flex;gap:4px;margin-top:40px;padding:4px;border:1px solid var(--edge-2);border-radius:12px;background:var(--paper)}
.tabs button{min-height:44px;padding:0 24px;border:0;border-radius:8px;background:transparent;color:var(--ink-2);font:500 15px var(--f-display);cursor:pointer;transition:background-color .2s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--gold-grad);color:var(--gold-ink)}
.tabs button:active{transform:translateY(1px)}
.panel{margin-top:32px}
.panel[hidden]{display:none}
.cap{font:300 clamp(24px,2.6vw,36px)/1.15 var(--f-display);color:var(--ink);margin-bottom:24px}

/* privacy (daylight): three short lines */
.privacy{padding:64px 0 var(--sec)}
.privacy h2{font-size:clamp(32px,3.6vw,52px);margin-bottom:40px}
.privacy ol{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;border-top:2px solid var(--gold-d);padding-top:32px}
.privacy li{color:var(--muted);font-size:17px}
.privacy li b{display:block;margin-bottom:8px;color:var(--ink);font:300 clamp(24px,2.4vw,32px)/1.1 var(--f-display)}

/* pricing (dark): Pro is the one lit card */
.pricing{background:var(--room-veil);border-top:1px solid var(--edge);padding:var(--sec) 0}
.phead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px;margin-bottom:16px}
.phead h2{font-size:clamp(40px,5vw,76px)}
.pintro{color:var(--muted);max-width:64ch;margin-bottom:40px}
.billtog{display:inline-flex;border:1px solid var(--edge-2);border-radius:12px;overflow:hidden;background:var(--paper)}
.billtog button{min-height:44px;padding:0 16px;border:0;background:transparent;color:var(--ink-2);font:500 15px var(--f-display);cursor:pointer;transition:background-color .2s}
.billtog button[aria-pressed="true"]{background:var(--gold-grad);color:var(--gold-ink)}
.pricing[data-bill="mo"] [data-bill="yr"],.pricing[data-bill="yr"] [data-bill="mo"]{display:none}
/* billing switch: every character flips over the x axis in a wave across the plans ($ on the big price holds still) */
.wd{display:inline-block;white-space:nowrap}
.ch{display:inline-block;transform-origin:50% 55%;backface-visibility:hidden}
@keyframes chOut{to{transform:perspective(400px) rotateX(90deg);opacity:0}}
@keyframes chIn{from{transform:perspective(400px) rotateX(-90deg);opacity:0}to{transform:perspective(400px) rotateX(0);opacity:1}}
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;align-items:stretch}
.tier{padding:40px 32px;display:flex;flex-direction:column;gap:16px;border:1px solid var(--edge-2);background:var(--paper)}
.tier:first-child{border-radius:16px 0 0 16px}
.tier:last-child{border-radius:0 16px 16px 0}
.tier+.tier{border-left:0}
.tier.feat{background:var(--lantern),var(--day-ground);border:0;border-radius:16px;margin:-16px 0;padding:56px 32px;position:relative;z-index:1}
.tier .top{display:flex;justify-content:space-between;align-items:center;min-height:32px}
.tname{font:400 28px var(--f-display)}
.badge{font:400 13px var(--f-display);color:var(--gold-l)}
.ttag{color:var(--muted)}
.price{font:400 52px/1 var(--f-mono);font-variant-numeric:tabular-nums}
.price>span:not(.wd){font:400 15px var(--f-body);color:var(--muted)}
.pthen{font-size:14px;color:var(--muted);margin-top:8px}
.pthen b{color:var(--ink)}.save{color:var(--up)}
.tier .btn{margin:8px 0}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:12px;font-size:14px;color:var(--ink-2)}
.tier li{display:flex;gap:12px}
.tier li::before{content:"";flex:0 0 6px;height:6px;margin-top:8px;border-radius:50%;background:var(--gold)}
.tier li.carry{color:var(--muted)}.tier li.carry::before{background:transparent;border:1px solid var(--gold)}
.tier li b{color:var(--ink);font-weight:600}
.ptax{margin-top:48px;font-size:13px;color:var(--faint)}

/* band: the fully lit lantern, one line and the action */
.band{background:var(--ivory-2);color:var(--gold-ink)}
.band .wrap{padding-top:96px;padding-bottom:96px;display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between}
.band h2{flex:1 1 520px;font-size:clamp(48px,7vw,104px);line-height:.96}
.band .btn.dark{background:var(--room);color:var(--ink)}
.band .btn.dark:hover{color:var(--gold-l)}
.band a:focus-visible{outline-color:var(--gold-ink)}

/* ===== motion ===== */
/* the candle stream: one live 3D chart behind the dark rooms. Daylight rooms and lit volumes are
   opaque, so it passes behind them; the dark bands are translucent so it shows through. */
.stream{position:fixed;inset:0;pointer-events:none;z-index:0;perspective:1200px;perspective-origin:50% 50%;
  transform-style:preserve-3d;overflow:hidden;opacity:.32}
main,.sitefoot{position:relative;z-index:1}
.wall{position:absolute;left:50%;transform-style:preserve-3d}
.wall svg{display:block;overflow:visible}
.js .wall .c{opacity:0;transform:scaleY(.12);transform-origin:center;transform-box:fill-box}
.js .wall .c.on{animation:cpop .55s cubic-bezier(.16,.84,.44,1) forwards}
.js .wall .c.live{opacity:1;transform:none;animation:none}
.wall .c.live.bull .gl{animation:gpulse 1.5s ease-in-out infinite}
.wall .pl{filter:drop-shadow(0 0 9px var(--pulse))}
@keyframes cpop{0%{opacity:0;transform:scaleY(.12)}62%{opacity:1;transform:scaleY(1.14)}100%{opacity:1;transform:scaleY(1)}}
@keyframes gpulse{0%,100%{opacity:.5}50%{opacity:1}}

/* hero entrance (CSS only, so it plays and ends visible without scripting) */
.hero h1,.hero .sub,.hero .shot,.hero .ticket{animation:rise .9s cubic-bezier(.2,.7,.2,1) backwards}
.hero .sub{animation-delay:.14s}
.hero .shot,.hero .ticket{animation-delay:.14s}
@keyframes rise{from{opacity:0;transform:translateY(20px)}}

/* scroll reveals: hidden only once the script has run */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}

/* lit volumes carry a still, faint top light */
.lit::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(90% 55% at 50% 0%,var(--halo),transparent 70%);opacity:.6}

/* the hero trade plays out, then journals itself */
.js .ticket .cd{opacity:0;transform-origin:center;transform-box:fill-box}
.ticket.play .cd{animation:cpop .5s cubic-bezier(.16,.84,.44,1) forwards}
.js .ticket .mk,.js .ticket .zone{opacity:0}
.ticket.play .mk{animation:mark .6s cubic-bezier(.16,1,.3,1) forwards}
.ticket.play .zone{animation:fadein .8s ease forwards}
@keyframes mark{0%{opacity:0;transform:scale(.2)}70%{opacity:1;transform:scale(1.35)}100%{opacity:1;transform:scale(1)}}
@keyframes fadein{to{opacity:1}}
.ticket .mk{transform-origin:center;transform-box:fill-box}
.js .synced{opacity:0;transition:opacity .5s}
.js .synced.on{opacity:1}
.tstats b{transition:color .4s}

/* responsive: grids tighten first, then stack as one column; never 2 + 1 */
@media (max-width:1100px){
  :root{--sec:88px}
  .tier{padding:32px 24px}
  .tier.feat{padding:48px 24px}
  .ticket{width:min(420px,50%)}
}
@media (max-width:900px){
  .menubtn{display:inline-block}
  .js .links{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;padding:8px 24px 16px;
    background:var(--menu-bg);border-bottom:1px solid var(--edge);box-shadow:0 32px 40px -24px var(--shade-soft);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .18s ease,transform .26s cubic-bezier(.16,1,.3,1),visibility 0s .26s}
  .js header.nav.open .links{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .26s cubic-bezier(.16,1,.3,1)}
  .links a{display:flex;align-items:center;min-height:48px;font-size:17px;color:var(--ink)}
  .wrap{padding:0 24px}
  :root{--sec:72px}
  .hero{padding:48px 0 var(--sec)}
  .hero .wrap{gap:40px}
  .ticket{position:static;width:auto;margin-top:16px;box-shadow:none}
  .steps .wrap{padding-top:48px;padding-bottom:48px}
  .steps ol{grid-template-columns:minmax(0,1fr);gap:32px}
  .privacy ol{grid-template-columns:minmax(0,1fr);gap:32px}
  .tiers{grid-template-columns:minmax(0,1fr);max-width:560px;margin:0 auto;gap:16px}
  .tier,.tier:first-child,.tier:last-child{border:1px solid var(--edge-2);border-radius:16px}
  .tier.feat{margin:0;padding:40px 24px;border:0}
  .pintro{margin-left:auto;margin-right:auto;max-width:560px}
  .phead{max-width:560px;margin-left:auto;margin-right:auto}
  .ptax{max-width:560px;margin:40px auto 0}
  .band .wrap{padding-top:64px;padding-bottom:64px}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  :root{--sec:64px}
  header.nav .wrap{gap:12px}
  .brand{white-space:nowrap;font-size:15px}
  .navcta .login{display:none}
  .links{padding:8px 16px 16px}
  .links .mlogin{display:flex;margin-top:8px;border-top:1px solid var(--edge)}
  .navcta .btn{white-space:nowrap;padding:0 16px;font-size:14px}
  .hero{padding:40px 0 var(--sec)}
  .hero h1{font-size:clamp(40px,11vw,52px)}
  .hero .sub{margin-top:24px}
  .hero .ctas{width:100%}
  .hero .ctas .btn{flex:1 1 100%}
  .tabs{display:flex;width:100%}
  .tabs button{flex:1;padding:0 8px}
  .tstats b{font-size:14px}
  .tier{padding:24px 20px}
  .price{font-size:44px}
  .band .btn{width:100%}
}
@media (max-width:440px){
  .navcta .cta-l{display:none}
  .navcta .cta-s{display:inline}
}
@media (max-width:400px){
  .navcta .btn{padding:0 12px;font-size:14px}
}
@media (max-width:340px){
  .brand{font-size:0;gap:0}                       /* logo mark only on the narrowest phones */
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .reveal,.ticket .cd,.ticket .mk,.ticket .zone,.synced,.wall .c{opacity:1!important;transform:none!important}
}
.anim-paused,.anim-paused *{animation-play-state:paused!important}
.anim-paused .stream,.anim-paused .stream *{animation-play-state:running!important}