/* Clarity, /clarity: the "Launch deck" page (docs/design/clarity/brief.md). */

@font-face{font-family:"Michroma";src:url("/assets/fonts/michroma-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---------- Tokens: Frost Ice (every text pair measured with contrast.py) ---------- */
:root{
  color-scheme:dark;
  --ground:#0A0E15;
  --glow:#132440;
  --panel:#0E1622;
  --ink:#EAF2F8;          /* 17.1 on ground, 16.0 on panel, 10.4 on the brightest bloom */
  --dim:#93A3B8;          /* 7.5 on ground, 7.1 on panel, 4.6 on the brightest bloom */
  --ice:#8FE3FF;          /* the action: buttons, links, focus */
  --ice-hi:#E9FBFF;
  --sky:#7CB4FF;          /* display only: the h1's second line, 9.1 on ground, 5.6 on the brightest bloom */
  --blue:#3F7BFF;         /* chart layers only, never words */
  --loss:#F43F5E;         /* the stop line in the chart */
  --loss-text:#FF8FA3;    /* the stop label: 5.6 on the chart's brightest light, where #F43F5E measured 3.5 */
  --on-ice:#06121C;
  --frame:rgba(143,227,255,.16);
  --frame-2:rgba(143,227,255,.26);
  --frame-3:rgba(143,227,255,.5);
  --hair:rgba(143,227,255,.09);
  --rim:rgba(143,227,255,.7);
  /* light: opaque blooms that settle into the ground (blue, then ice) */
  --b1:#193763; --b2:#152F57; --b3:#112644; --b4:#0D1A2F;
  --t1:#143B54; --t2:#102F45; --t3:#0D2436; --t4:#0B1825;
  --display:"Michroma","Eurostile","Arial",sans-serif;
  --text:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --r-1:10px; --r-2:14px; --r-3:20px;
  --ease-out:cubic-bezier(.16,.84,.3,1);
  --dur-1:200ms;
  --gutter:clamp(1rem,4vw,3rem);
  --max:84rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* hidden until clarity-gate.js says the flag is on (clarity.js adds .cl-on); off, the page gives way to the 404 */
body:not(.cl-on)>*{visibility:hidden}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--text);font-size:1rem;line-height:1.6;font-synthesis:none;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px;border-radius:6px}
abbr[title]{text-decoration:underline dotted rgba(147,163,184,.6);text-underline-offset:.25em;cursor:help}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gutter);top:-4rem;z-index:20;background:var(--ice);color:var(--on-ice);font-weight:600;padding:.75rem 1rem;border-radius:var(--r-1);text-decoration:none}
.skip:focus{top:.75rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.ico{width:1rem;height:1rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:0 1.25rem;border-radius:var(--r-1);font-weight:600;font-size:1rem;line-height:1.3;text-decoration:none;transition:background-color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.btn-ice{background:var(--ice);color:var(--on-ice)}
.btn-line{border:1px solid var(--frame-3);color:var(--ice);background:var(--ground)}
.btn-big{min-height:3.5rem;padding:0 1.75rem;font-size:1.0625rem}
@media (hover:hover){
  .btn-ice:hover{background:var(--ice-hi)}
  .btn-line:hover{border-color:var(--ice);color:var(--ice-hi)}
}

/* ---------- Site bar ---------- */
.bar{position:relative;z-index:5;border-bottom:1px solid var(--hair);background:var(--ground)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem}
.home{display:inline-flex;align-items:center;min-height:48px;margin-left:-.25rem;padding:0 .25rem;border-radius:var(--r-1)}
.home img{width:120px;height:auto}
.section{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0 .5rem;margin-right:-.5rem;font-family:var(--mono);font-size:.875rem;line-height:1.5;color:var(--ice);text-decoration:underline;text-decoration-color:rgba(143,227,255,.4);text-underline-offset:.35em;text-decoration-thickness:1px}

/* ---------- Hero: lockup, promise, way in; the deck of covers over the candle city ---------- */
.hero{position:relative;isolation:isolate;overflow:clip;display:grid;align-items:center;min-height:min(calc(100svh - 4rem),56rem);
  background:radial-gradient(72% 78% at 72% 52%,var(--b1) 0%,var(--b1) 16%,var(--b2) 34%,var(--b3) 52%,var(--b4) 70%,var(--ground) 94%)}
/* the city never runs behind the copy column: the wrap fades it in from the middle of the screen (P-vs-10) */
.city-wrap{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 50%,#000 68%);mask-image:linear-gradient(90deg,transparent 50%,#000 68%)}
.city{position:absolute;bottom:-2%;left:70%;width:max(108%,68rem);height:auto;transform:translateX(-65%)}
/* the hero settles into the ground at its foot, so the next section starts clean */
.hero::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:28%;pointer-events:none;background:linear-gradient(180deg,rgba(10,14,21,0),var(--ground))}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:2rem;width:100%;padding-top:clamp(2rem,5vw,4rem);padding-bottom:clamp(3rem,7vw,6rem)}
.hero-copy{position:relative;z-index:2;container-type:inline-size}
.lockup{width:clamp(16rem,30vw,28rem);height:auto;margin:0 0 clamp(1.25rem,2.5vw,2rem) -.25rem}
/* sized to the copy column so each line of the promise stays whole: 'Free indicators' / 'for a clearer chart';
   never under 28px (it stays the largest type on the page at every width; phones set their own size below) */
h1{font-family:var(--display);font-weight:400;font-size:clamp(1.75rem,6.6cqi,3rem);line-height:1.2;letter-spacing:0;margin:0}
h1 .l1,h1 .l2{display:block}
h1 .l2{color:var(--sky)}
.lede{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.55;color:var(--dim);margin:clamp(1rem,2vw,1.5rem) 0 0;max-width:36ch;text-wrap:pretty}
.lede strong{color:var(--ink);font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:.75rem 1rem;margin-top:clamp(1.5rem,3vw,2.25rem)}

/* The deck: the covers fanned in perspective, Trend in front. Each card is a link to its tool. The build sets --f on
   each card (its slot, 0 in front) and --fan on the stage (the outermost slot), so the fan keeps its width (24deg a side),
   depth and timing however many covers it holds. Depth blur is baked into the back cards' images (assets.py, on the
   same scale); the dimming is an overlay that lifts away on hover and focus. */
.deck{position:relative;height:clamp(18rem,40vw,36rem);perspective:1600px;perspective-origin:50% 20%}
.stage{position:absolute;left:49%;top:46%;width:min(33rem,72%);aspect-ratio:16 / 9;transform-style:preserve-3d;
  transform:translate(-50%,-40%) rotateX(16deg) rotateY(-12deg) rotateZ(-1.5deg)}
.card{--d:max(var(--f),calc(-1 * var(--f)));--step:calc(24deg / var(--fan));--dz:calc(-138px / var(--fan));--lift:0;
  --z:calc(var(--d) * var(--dz) + (1 - min(var(--d),1)) * 40px);
  position:absolute;inset:0;display:block;border-radius:var(--r-2);overflow:hidden;background:var(--panel);transform-origin:50% 215%;
  transform:rotate(calc(var(--f) * var(--step))) translate3d(0,calc((1 - min(var(--d),1)) * -9% - var(--lift) * 7%),calc(var(--z) + var(--lift) * (90px - var(--z))));
  box-shadow:0 2px 4px rgba(0,0,0,.45),0 34px 60px -14px rgba(0,0,0,.8);
  transition:transform 240ms var(--ease-out)}
.card img{width:100%;height:100%;object-fit:cover}
/* depth: each step back is a little darker */
.card::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--ground);opacity:calc(var(--d) / var(--fan) * .42);transition:opacity 240ms var(--ease-out)}
/* rim light along the top and left edges */
.card::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
  border:1px solid var(--frame);
  background:linear-gradient(90deg,transparent 4%,var(--rim) 30%,transparent 78%) top / 100% 1px no-repeat,
             linear-gradient(180deg,var(--rim),transparent 70%) left / 1px 100% no-repeat}
.card:focus-visible{--lift:1;outline:2px solid var(--ice);outline-offset:3px;border-radius:var(--r-2)}
.card:focus-visible::before{opacity:0}
@media (hover:hover){
  .card:hover{--lift:1}
  .card:hover::before{opacity:0}
}
/* on touch screens only the front card takes a tap: the back cards show slivers narrower than 44px.
   The deck is out of the keyboard and reading order (aria-hidden, tabindex -1): the names under the chart index every tool */
@media (pointer:coarse){
  .card:not(:first-child){pointer-events:none}
}

/* ---------- Which one: the layered chart and the names of the tools ---------- */
.pick{position:relative;isolation:isolate;padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(3rem,6vw,5.5rem);
  background:linear-gradient(180deg,var(--ground) 0%,rgba(10,14,21,0) 14%,rgba(10,14,21,0) 86%,var(--ground) 100%),
    radial-gradient(70% 60% at 50% 46%,var(--b2) 0%,var(--b3) 40%,var(--b4) 68%,var(--ground) 100%)}
.pick-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem}
.pick-head h2{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,.9rem + 1.3vw,2.25rem);line-height:1.2;margin:0;text-wrap:balance}
.pick-head p{margin:0;color:var(--dim);font-size:1.0625rem;line-height:1.55;max-width:42ch;text-wrap:pretty}

.board{position:relative;margin:clamp(1.5rem,3vw,2.5rem) 0 0;perspective:1800px}
/* the floor light under the screen */
.board::before{content:"";position:absolute;left:10%;right:10%;bottom:-1.5rem;height:6rem;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(143,227,255,.12) 0%,rgba(143,227,255,0) 100%)}
.screen{position:relative;border:1px solid var(--frame);border-radius:var(--r-3);padding:clamp(.5rem,1.4vw,1.1rem) clamp(.4rem,1.2vw,1rem) clamp(.4rem,1vw,.75rem);
  background:linear-gradient(180deg,#0F1B2E 0%,#0A0F18 100%);transform:rotateX(7deg);transform-origin:50% 100%;
  box-shadow:0 2px 4px rgba(0,0,0,.4),0 40px 60px -30px rgba(0,0,0,.85)}
.screen::before{content:"";position:absolute;left:6%;right:6%;top:-1px;height:1px;background:linear-gradient(90deg,rgba(143,227,255,0),rgba(143,227,255,.85),rgba(143,227,255,0))}
.board figcaption{font-family:var(--mono);font-size:.8125rem;line-height:1.5;color:var(--dim);margin-top:1rem;text-align:right}

.chart{width:100%;height:auto;overflow:visible}
.chart--phone{display:none}
.chart .cdl{transform-box:fill-box;transform-origin:50% 100%}
.chart .cdl .wick{stroke:#8FE3FF;stroke-opacity:.75;stroke-width:1.2;fill:none}
.chart .cdl.up .body{fill:#8FE3FF}
.chart .cdl.dn .body{fill:#0B1220;stroke:#8FE3FF;stroke-opacity:.9;stroke-width:1.2}
.chart .draw{fill:none;transform-box:fill-box;transform-origin:0 50%}
.chart .tag rect{fill:#0E1622;stroke:#8FE3FF;stroke-opacity:.7;stroke-width:1}
.chart .tag text{font-family:var(--display);font-size:13.5px;fill:#8FE3FF}
.chart .tag{transform-box:fill-box;transform-origin:0 100%}
.chart .lab{font-family:var(--mono);font-size:14px;fill:#93A3B8}
/* the SVG text scales with the chart: sizes are set so the rendered text stays at 11.5px or more (chart.py notes) */
.chart--phone .tag text{font-size:22px}
.chart--phone .lab{font-size:22px}
.chart .lab--ink{fill:#EAF2F8}
.chart .lab--ice{fill:#8FE3FF}
.chart .lab--loss{fill:var(--loss-text)}
.chart .bar{fill:#3F7BFF;fill-opacity:.4}
.chart .bar.poc{fill:#8FE3FF;fill-opacity:.85}
.chart .zone{fill:#8FE3FF;fill-opacity:.07;stroke:#8FE3FF;stroke-opacity:.35;stroke-width:1}
.chart .zone--loss{fill:#F43F5E;fill-opacity:.18;stroke:none}
.chart .zone--gain{fill:#8FE3FF;fill-opacity:.08;stroke:none}
.chart .dot{fill:#8FE3FF}
/* Zones: supply in the cover series' grey, demand in ice, the fair value gap in blue (as on the Zones cover) */
.chart .zn--supply{fill:#7482A0;fill-opacity:.16;stroke:#7482A0;stroke-opacity:.95}
.chart .zn--demand{fill:#8FE3FF;fill-opacity:.09;stroke:#8FE3FF;stroke-opacity:.7}
.chart .zn--fvg{fill:#3F7BFF;fill-opacity:.16;stroke:#3F7BFF;stroke-opacity:.6}
.chart .layer,.chart .candles{transition:opacity var(--dur-1) var(--ease-out)}

/* the names, grouped in trade order: the name leads, the plain question supports it */
.layers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem clamp(1rem,2.5vw,2rem);margin-top:clamp(1.75rem,3vw,2.5rem)}
.lg h3{font-size:.9375rem;font-weight:600;line-height:1.4;color:var(--dim);margin:0 0 .625rem}
.lg ul{display:grid;gap:.5rem;list-style:none;margin:0;padding:0}
.layers a{display:grid;grid-template-columns:1.125rem minmax(0,1fr);grid-template-rows:auto auto;column-gap:.625rem;row-gap:.125rem;align-items:center;align-content:start;
  min-height:3.75rem;padding:.625rem 1rem;border:1px solid var(--frame);border-radius:var(--r-2);background:var(--panel);text-decoration:none;
  transition:border-color var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.layers .sw{justify-self:center}
/* the tool's chart crop (the home strip's windows) shows on tablets and phones only, so the picker leads with art there */
.layers .lt{display:none}
.lq{grid-column:1 / -1}
.ln{font-family:var(--display);font-size:.9375rem;line-height:1.4;color:var(--ink)}
.lq{font-size:.9375rem;line-height:1.4;color:var(--dim);text-wrap:pretty}
.sw{width:14px;height:3px;border-radius:2px;flex:none;background:var(--ice)}
.sw-trend{background:var(--blue)}
.sw-levels{background:var(--ink)}
.sw-volume{height:10px;width:10px;border-radius:2px;background:var(--blue)}
.sw-structure{height:0;border-top:2px dotted var(--ink);border-radius:0;background:none}
.sw-momentum{height:8px;border-radius:0;background:linear-gradient(180deg,var(--ice),rgba(143,227,255,.15))}
.sw-liquidity{width:8px;height:8px;border-radius:50%}
.sw-zones{width:12px;height:8px;border-radius:1px;background:rgba(143,227,255,.14);box-shadow:inset 0 0 0 1.5px var(--ice)}
.sw-risk{background:linear-gradient(90deg,var(--loss) 0 50%,var(--ice) 50% 100%)}
.layers a:focus-visible{border-color:var(--ice);border-radius:var(--r-2)}
@media (hover:hover){
  .layers a:hover{border-color:var(--frame-3);background:#122034}
}
/* a name lights its own layer and dims the rest (P-vs-13: state from :has(), no script). One line per layer that
   chart.py draws; a name whose tool has no drawn layer carries no data-layer, so it dims nothing */
.pick:has(.layers a[data-layer]:is(:hover,:focus-visible)) .chart .layer,
.pick:has(.layers a[data-layer]:is(:hover,:focus-visible)) .chart .candles{opacity:.22}
.pick:has(.layers a[data-layer="trend"]:is(:hover,:focus-visible)) .chart .l-trend,
.pick:has(.layers a[data-layer="momentum"]:is(:hover,:focus-visible)) .chart .l-momentum,
.pick:has(.layers a[data-layer="levels"]:is(:hover,:focus-visible)) .chart .l-levels,
.pick:has(.layers a[data-layer="volume"]:is(:hover,:focus-visible)) .chart .l-volume,
.pick:has(.layers a[data-layer="liquidity"]:is(:hover,:focus-visible)) .chart .l-liquidity,
.pick:has(.layers a[data-layer="zones"]:is(:hover,:focus-visible)) .chart .l-zones,
.pick:has(.layers a[data-layer="structure"]:is(:hover,:focus-visible)) .chart .l-structure,
.pick:has(.layers a[data-layer="risk"]:is(:hover,:focus-visible)) .chart .l-risk{opacity:1}

/* ---------- Showcase bands ---------- */
.band{--c1:var(--b1);--c2:var(--b2);--c3:var(--b4);--bx:30%;
  position:relative;isolation:isolate;overflow:clip;scroll-margin-top:0;
  display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);align-items:center;
  min-height:clamp(24rem,34vw,34rem);padding:clamp(2.5rem,4.5vw,4.5rem) 0;
  background:radial-gradient(60% 50% at var(--bx) 50%,var(--c1) 0%,var(--c1) 22%,var(--c2) 50%,var(--c3) 76%,var(--ground) 100%)}
.band:nth-child(even){--bx:70%;grid-template-columns:minmax(0,40fr) minmax(0,60fr)}
.band:nth-child(3n+2){--c1:var(--t1);--c2:var(--t2);--c3:var(--t4)}
.band:nth-child(3n){--c1:#183564;--c2:#132B52;--c3:#0C1729}
/* the art's own light: a pre-blurred map of that cover (--glow-map, set on each band by the build) behind the art
   half only, faded out before the copy */
.band::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;width:68%;pointer-events:none;
  background:var(--glow-map) center / 100% 100% no-repeat;opacity:.8;
  --fade-y:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 72%,transparent 96%),var(--fade-y);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 72%,transparent 96%),var(--fade-y);mask-composite:intersect}
.band:nth-child(even)::before{left:auto;right:0;
  -webkit-mask-image:linear-gradient(270deg,#000 72%,transparent 96%),var(--fade-y);
  mask-image:linear-gradient(270deg,#000 72%,transparent 96%),var(--fade-y)}

.art{position:relative;margin:0;grid-row:1;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.45),0 40px 80px -20px rgba(0,0,0,.85)}
.band:nth-child(odd) .art{grid-column:1;border-radius:0 var(--r-3) var(--r-3) 0}
.band:nth-child(even) .art{grid-column:2;border-radius:var(--r-3) 0 0 var(--r-3)}
.art picture{display:block}
/* the cover without its logo row and tagline: the chart and its baked gradient name (assets.py) */
.art img{width:100%;height:auto;aspect-ratio:1276 / 508;object-fit:cover}
/* rim light on the art's top edge, brightest toward the copy */
.art::before{content:"";position:absolute;top:0;height:1px;z-index:1;pointer-events:none}
.band:nth-child(odd) .art::before{left:8%;right:2%;background:linear-gradient(90deg,transparent,var(--rim) 70%,transparent)}
.band:nth-child(even) .art::before{left:2%;right:8%;background:linear-gradient(90deg,transparent,var(--rim) 30%,transparent)}
/* hover: an ice rim ring (a 1px gradient ring, P-vs-08) */
.art::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;
  background:linear-gradient(160deg,rgba(143,227,255,.95) 0%,rgba(143,227,255,0) 38%,rgba(143,227,255,0) 70%,rgba(63,123,255,.7) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  transition:opacity var(--dur-1) var(--ease-out)}

.copy{grid-row:1;max-width:34rem;padding:0 var(--gutter) 0 clamp(2rem,4.5vw,4.5rem)}
.band:nth-child(odd) .copy{grid-column:2}
.band:nth-child(even) .copy{grid-column:1;justify-self:end;padding:0 clamp(2rem,4.5vw,4.5rem) 0 var(--gutter)}
/* where the tool sits in a trade (direction, place, plan) */
.where{display:flex;flex-wrap:wrap;gap:.375rem;margin:0}
.step,.start{display:inline-block;padding:0 .5rem;border:1px solid var(--frame-2);border-radius:999px;background:var(--ground);
  font-family:var(--mono);font-size:.8125rem;font-weight:400;line-height:1.6;color:var(--dim)}
.start{border-color:var(--frame-3);color:var(--ink)}
/* the question is the heading (the tool's name is the art's gradient title); below the h1 at every width */
.copy h2{margin:.625rem 0 0;font-size:clamp(1.625rem,.8rem + 1.5vw,2.25rem);font-weight:700;line-height:1.12;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.say{margin:1rem 0 0;font-size:1.125rem;line-height:1.6;color:var(--dim);max-width:40ch;text-wrap:pretty}
.say strong{color:var(--ink);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:1.25rem 0 0;padding:0}
.chips li{font-family:var(--mono);font-size:.8125rem;line-height:1.4;color:var(--dim);padding:.375rem .75rem;border:1px solid var(--frame);border-radius:999px;background:var(--ground)}
.copy .btn{margin-top:1.75rem}

/* ---------- Finale ---------- */
.finale{position:relative;isolation:isolate;overflow:clip;text-align:center;scroll-margin-top:0;
  padding:clamp(4rem,9vw,7.5rem) 0 clamp(12rem,24vw,20rem);
  background:radial-gradient(80% 62% at 50% 100%,var(--b1) 0%,var(--b2) 26%,var(--b3) 50%,var(--b4) 70%,var(--ground) 100%)}
/* the city lights the foot of the finale only, below the words */
.city-wrap-end{-webkit-mask-image:linear-gradient(180deg,transparent 46%,#000 72%);mask-image:linear-gradient(180deg,transparent 46%,#000 72%)}
.finale .city-end{top:auto;bottom:0;left:50%;width:max(130%,80rem);transform:translateX(-58%)}
.finale::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:18%;pointer-events:none;background:linear-gradient(180deg,rgba(10,14,21,0),var(--ground))}
.mark{width:clamp(4.5rem,7vw,6rem);height:auto;margin:0 auto 1.5rem}
.finale h2{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,.9rem + 1.3vw,2.25rem);line-height:1.2;margin:0;text-wrap:balance}
.finale .sub{margin:.75rem auto 0;max-width:44ch;color:var(--dim);font-size:1.0625rem;line-height:1.55;text-wrap:pretty}
.steps{list-style:none;margin:clamp(2rem,4vw,3rem) auto clamp(2rem,4vw,2.75rem);padding:0;max-width:68rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;text-align:left}
.steps li{background:var(--panel);border:1px solid var(--frame);border-radius:var(--r-2);padding:1.5rem 1.5rem 1.75rem}
.steps .n{display:block;font-family:var(--display);font-size:1.5rem;line-height:1;color:var(--ink);margin-bottom:1rem}
.steps h3{font-size:1.125rem;font-weight:600;line-height:1.35;margin:0 0 .375rem;color:var(--ink)}
.steps p{margin:0;font-size:1rem;line-height:1.6;color:var(--dim);text-wrap:pretty}
.steps b{color:var(--ink);font-weight:600}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--hair)}
.foot .wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:1rem;row-gap:.25rem;padding-top:2rem;padding-bottom:3rem}
.foot img{width:1.75rem;height:1.75rem;grid-row:1 / span 2}
.foot p{margin:0;font-size:.9375rem;line-height:1.5;color:var(--dim)}
.foot .legal{color:var(--ink)}
.foot nav{grid-column:3;grid-row:1 / span 2}
.foot ul{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .75rem;font-size:.9375rem;color:var(--dim);text-decoration:none}
@media (hover:hover){.foot nav a:hover{color:var(--ink)}}

/* ---------- Motion: once, ease-out, transform and opacity only; none under reduced motion ----------
   Long timing is kept for the set pieces only, the exceptions to P-mo-02 listed in the brief's "bold direction"
   amendment: the deck deal (880ms), the band swing-in (820ms) and the chart build (820ms in all, no single part over
   300ms). Everything else runs 600ms or less; hovers 300ms or less. */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  /* the deck fans out from one stack: inner cards first, the outer pair last (760ms + 120ms = 880ms, however many) */
  .card{animation:deal 760ms var(--ease-out) backwards;animation-delay:calc(var(--d) / var(--fan) * 120ms)}
  .hero-copy > *{animation:rise 480ms var(--ease-out) backwards}
  .hero-copy > :nth-child(2){animation-delay:40ms}
  .hero-copy > :nth-child(3){animation-delay:80ms}
  .hero-copy > :nth-child(4){animation-delay:120ms}

  /* the chart builds once when it scrolls in (clarity.js: .armed, then .play): candles rise, then the layers land in trade order,
     sharing a 300ms stagger window (--nl, the last layer's --n, set by chart.py), so the build stays 820ms with any number of layers */
  .board.armed:not(.play) .chart .cdl,.board.armed:not(.play) .chart .lin{opacity:0}
  .board.play .chart .cdl{animation:cdl-in 280ms var(--ease-out) backwards;animation-delay:calc(var(--i) * 2.5ms)}
  .board.play .chart--phone .cdl{animation-delay:calc(var(--i) * 5ms)}
  .board.play .chart .lin{animation:fade-in 300ms var(--ease-out) backwards;animation-delay:calc(200ms + var(--n) * 300ms / var(--nl, 6))}
  .board.play .chart .lin .draw{animation:draw-in 300ms var(--ease-out) backwards;animation-delay:calc(200ms + var(--n) * 300ms / var(--nl, 6))}
  .board.play .chart .lin .tag{animation:tag-in 260ms var(--ease-out) backwards;animation-delay:calc(260ms + var(--n) * 300ms / var(--nl, 6))}

  /* bands reveal once as they enter (clarity.js adds .is-in, then stops watching) */
  .js-motion .band .art{transition:transform 820ms var(--ease-out),opacity 700ms var(--ease-out)}
  .js-motion .band .copy{transition:transform 480ms var(--ease-out) 80ms,opacity 480ms var(--ease-out) 80ms}
  /* the art swings in from its edge and settles flat */
  .js-motion .band .art{transform-origin:0% 50%}
  .js-motion .band:nth-child(even) .art{transform-origin:100% 50%}
  .js-motion .band:not(.is-in) .art{opacity:0;transform:perspective(1400px) translateX(-6%) rotateY(16deg)}
  .js-motion .band:nth-child(even):not(.is-in) .art{transform:perspective(1400px) translateX(6%) rotateY(-16deg)}
  .js-motion .band:not(.is-in) .copy{opacity:0;transform:translateY(1.5rem)}
  @media (hover:hover){
    .art img{transition:transform 300ms var(--ease-out)}
    .band:hover .art img{transform:scale(1.04)}
    .layers a:hover{transform:translateY(-2px)}
  }
}
@media (hover:hover){
  .band:hover .art::after{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .card{transition:none}
  .card::before{transition:none}
}
@keyframes deal{from{opacity:0;transform:rotate(0deg) translate3d(0,6%,0)}}
@keyframes rise{from{opacity:0;transform:translateY(1rem)}}
@keyframes fade-in{from{opacity:0}}
@keyframes cdl-in{from{opacity:0;transform:translateY(16px) scaleY(.15)}}
@keyframes draw-in{from{transform:scaleX(0)}}
@keyframes tag-in{from{opacity:0;transform:translateY(6px) scale(.9)}}

/* wide screens: the names sit under the chart as one legend row of three groups, direction, place, plan, side by side.
   Every group is two cards tall and as many columns wide as that takes (--c, set by the build: 2 names make 1 column,
   4 make a 2 by 2 block), so the row ends square at both sides however the names split, and no group is left alone on
   a second row. Each group grows by its column count from a basis that holds its inner gaps, so every card is the same
   width; the rows inside a group share one height, and the groups stretch to the tallest. A group that would squeeze
   a card under 13rem wraps to a new row (not at 1181 or wider with today's names: the row holds 4 columns there) */
@media (min-width:1181px){
  .layers{display:flex;flex-wrap:wrap;column-gap:1.25rem;row-gap:1.5rem}
  .lg{flex:var(--c) 1 calc((var(--c) - 1) * .5rem);min-width:min(100%,calc(var(--c) * 13rem + (var(--c) - 1) * .5rem));display:flex;flex-direction:column}
  .lg h3{padding-bottom:.5rem;border-bottom:1px solid var(--frame-2)}
  .lg ul{flex:1;grid-template-columns:repeat(var(--c),minmax(0,1fr));grid-auto-rows:1fr}
  .layers a{height:100%;padding:.625rem .875rem}
}

/* ---------- Medium screens ---------- */
@media (max-width:1180px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .stage{width:min(25rem,58%)}
  /* the wide chart would draw its labels under 11px here: the square chart takes over */
  .chart--desk{display:none}
  .chart--phone{display:block}
}
/* 861 to 1280: the two hero buttons need about 33.5rem side by side and the copy column only has that from about 1220,
   with no room to spare, so they stack at one width on purpose */
@media (min-width:861px) and (max-width:1280px){
  .actions{display:grid;grid-template-columns:minmax(0,22rem)}
}
/* 861 to 1180: the square chart beside the names, so pointing at a name lights a layer you can see */
@media (min-width:861px) and (max-width:1180px){
  .pick .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(1.5rem,3.5vw,3rem);align-items:start}
  .pick-head{grid-column:1 / -1}
  .layers{grid-template-columns:minmax(0,1fr);gap:1.125rem}
}

/* ---------- Tablet and phone: one column, art full-bleed ---------- */
@media (max-width:860px){
  .hero{min-height:0;align-items:start;background:radial-gradient(120% 60% at 60% 18%,var(--b1) 0%,var(--b2) 24%,var(--b3) 48%,var(--b4) 70%,var(--ground) 100%)}
  .hero .city-wrap{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 9rem,transparent 15rem);mask-image:linear-gradient(180deg,#000 0,#000 9rem,transparent 15rem)}
  .hero .city{left:50%;top:0;bottom:auto;width:max(150%,46rem)}
  .finale .city-end{width:max(200%,46rem);transform:translateX(-60%)}
  .hero-grid{grid-template-columns:minmax(0,1fr);padding-top:0;padding-bottom:2.5rem}
  .deck{order:-1;height:clamp(14rem,56vw,25rem);margin:0 calc(-1 * var(--gutter));perspective:1000px}
  .stage{left:50%;top:50%;width:min(54%,22rem);transform:translate(-50%,-38%) rotateX(14deg) rotateY(-8deg)}
  .card{--dz:calc(-90px / var(--fan))}
  .lockup{width:clamp(14rem,62vw,20rem);margin-bottom:1rem}
  /* the promise outranks every heading below it, as two whole lines ('Free indicators' / 'for a clearer chart'):
     sized to the copy column, since the second line is about 11.1em wide (31px at 390, about 1.8 times the lede) */
  h1{font-size:clamp(1.75rem,8.6cqi,2.5rem);line-height:1.18}
  .actions .btn{flex:1 1 15rem}

  .pick-head p{font-size:1rem}
  /* the screen hugs the square chart instead of framing empty sides */
  .board{max-width:32rem;margin-left:auto;margin-right:auto}
  /* the picker leads with art: two columns of tiles, each the tool's chart crop over its name and question */
  .layers{grid-template-columns:minmax(0,1fr);gap:1.25rem}
  .lg h3{margin-bottom:.5rem}
  .lg ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:.625rem}
  .layers a{grid-template-columns:.875rem minmax(0,1fr);column-gap:.5rem;row-gap:.25rem;min-height:0;height:100%;overflow:hidden;padding:.75rem .75rem .875rem}
  .layers .lt{display:block;grid-column:1 / -1;width:calc(100% + 1.5rem);max-width:none;height:auto;aspect-ratio:376 / 175;object-fit:cover;margin:-.75rem -.75rem .5rem;border-bottom:1px solid var(--frame)}
  .ln{font-size:.875rem}
  .lq{font-size:.875rem;line-height:1.35}

  .band,.band:nth-child(even){grid-template-columns:minmax(0,1fr);min-height:0;padding:0 0 3rem;--bx:50%;
    /* the bloom sits behind the art, not under the copy (P-vs-10) */
    background:radial-gradient(110% 46% at 50% 20%,var(--c1) 0%,var(--c2) 36%,var(--c3) 70%,var(--ground) 100%)}
  .band::before,.band:nth-child(even)::before{display:none}
  .band .art,.band:nth-child(even) .art{grid-column:1;grid-row:1;border-radius:0}
  .art::before,.band:nth-child(odd) .art::before,.band:nth-child(even) .art::before{left:0;right:0;background:linear-gradient(90deg,transparent,var(--rim) 50%,transparent)}
  .copy,.band:nth-child(odd) .copy,.band:nth-child(even) .copy{grid-column:1;grid-row:2;justify-self:start;max-width:40rem;padding:1.25rem var(--gutter) 0}
  .copy .btn{width:100%}

  .steps{grid-template-columns:minmax(0,1fr)}
  .steps li{display:grid;grid-template-columns:2.5rem minmax(0,1fr);column-gap:.75rem;padding:1.25rem}
  .steps .n{grid-row:1 / span 2;margin:0;font-size:1.5rem;line-height:1.75rem}
  .steps h3,.steps p{grid-column:2}
  .finale .btn-big{width:100%}
  .finale::after{height:6%}

  .foot .wrap{grid-template-columns:auto minmax(0,1fr);padding-top:1.5rem;padding-bottom:1.5rem}
  .foot nav{grid-column:1 / -1;grid-row:auto;margin-left:-.75rem;margin-top:.5rem}
}
@media (max-width:700px){
  .screen{transform:rotateX(5deg);border-radius:var(--r-2)}
  .board figcaption{text-align:left}
  /* phones: the art is a taller crop (a chart window over the cover's name strip, about 4:3) and leads the copy;
     the chips stay on TradingView's listing */
  .art img{aspect-ratio:680 / 491}
  .chips{display:none}
  .copy .btn{margin-top:1.5rem}
}
@media (max-width:860px) and (prefers-reduced-motion:no-preference){
  .js-motion .band:not(.is-in) .art,.js-motion .band:nth-child(even):not(.is-in) .art{transform:scale(1.04)}
}