/* =========================================================================
   TradeKit Marketing — the homepage (src/index.njk)

   The homepage as an overprinted trading poster, built on the art kit
   (styles/site.css). Particle's lava motion and hairline frame meet
   Brasshands' HUD readouts, remade as trading instruments: price-level
   lines drift like a lava lamp across the stage, the mark is a
   hatched price ridge with an armed trigger, the facts are seven-segment
   readouts and the CTA sits in an order-book depth valley. js/home.js
   drives the art (the stage, the masthead fit, the depth valley);
   styles/demos.css styles the four product demos in the kit section.

   Sections, top to bottom:
     .tk-hero      copy column (one stack, one gap) + .tk-stage (the art)
     .tk-ticker    the broadcast lower third (the market list)
     .tk-readout   the facts as seven-segment instruments
     .tk-kit       section head + four .tk-feature rows, each a demo
                   framed as a .tk-screen on an offset plate
     .tk-quote     the field report, highlighter-marked
     .tk-cta       "Trade anything" in the depth valley
   ========================================================================= */

.tk {
  --ticker-h: 3.25rem;
  --axis-w: 6.25rem;
  --line-h: 6px;
  /* the stage's level + trigger lines */
}

/* The homepage's ink fills (see .tk-fill in site.css). */
.tk-ticker__label,
.tk-tag,
.tk-trigger.is-filled .tk-trigger__tag {
  background-color: var(--fill);
  color: var(--on-ink);
  color: oklch(from var(--fill) clamp(0, calc((0.6 - l) * 100000), 1) 0 0);
}

/* =========================================================================
   Hero — the copy column + the stage, the stage filling the right on wide
   screens. The copy is one stack at every width: top row, masthead,
   eyebrow, lede, actions.
   ========================================================================= */
.tk-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-inline: var(--frame);
  /* the viewport above the ticker, growing if the copy ever needs more */
  min-height: max(40rem, calc(100svh - var(--nav-h) - var(--ticker-h) - 2px));
  /* the masthead's size (home.js fits it to the column; fallback below) */
  --mast: clamp(2.75rem, 5.4vw, 6.75rem);
}

/* One rhythm: every block in the stack sits one --hero-gap from the next,
   and the type trims its line boxes to the ink (text-box: cap height to
   baseline), so each gap is the space you see, whatever the size or
   leading on either side. When the column is taller than the stack (the
   hero fills the viewport on wide screens) the stack centers in it; auto
   margins never go negative, so a short column just stacks. */
.tk-hero__copy {
  --hero-gap: max(1.75rem, var(--pad));
  display: flex;
  flex-direction: column;
  gap: var(--hero-gap);
  padding: var(--pad);
}

.tk-hero__copy>:first-child {
  margin-top: auto;
}

.tk-hero__copy>:last-child {
  margin-bottom: auto;
}

.tk-hero__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
}

/* Its top edge is the boxed word on its first line (as the top row's is
   its chip), so only the bottom trims, to the baseline. */
.tk-hero__eyebrow {
  font-size: 0.78rem;
  text-box: trim-end cap alphabetic;
}

/* The flipping word in the eyebrow, boxed in ink like a live field. */
.tk-flip {
  padding: 0.1em 0.45em;
  background: var(--ink);
  color: var(--paper);
}

.tk-hero__lede {
  max-width: 26rem;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  line-height: 1.45;
  text-wrap: pretty;
  text-box: trim-both cap alphabetic;
}

/* The button and the link share a baseline. When the link wraps under the
   button it sits one gap below, trimmed to its caps (its underline keeps
   the room beneath it). */
.tk-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--hero-gap) 1.75rem;
}

.tk-hero__actions .tk-textlink {
  text-box: trim-start cap alphabetic;
}

/* Intro: the copy rises in, staggered behind the masthead. */
.tk-hero [data-intro] {
  transition: opacity 0.7s ease, transform 0.9s var(--ease-out);
  transition-delay: var(--intro-delay, 0s);
}

.tk-hero__eyebrow {
  --intro-delay: 0.55s;
}

.tk-hero__lede {
  --intro-delay: 0.65s;
}

.tk-hero__actions {
  --intro-delay: 0.75s;
}

.tk-intro .tk-hero [data-intro] {
  opacity: 0;
  transform: translateY(0.9rem);
}

/* ----- The masthead -----
   Solid ink, between the top row and the eyebrow at every width. home.js
   fits its two lines to span the column (the size lands in --mast on the
   hero). Like the copy, it's trimmed to its ink: the first line to its cap
   height, the last to its baseline, with the clip room above tucked into
   the gap. */
.tk-masthead {
  margin-top: -0.02em;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--mast);
  line-height: 0.86;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--ink);
}

.tk-masthead__line {
  display: block;
  overflow: hidden;
  /* room for the italic's overhang and the clip */
  padding: 0.02em 0.12em 0.04em 0;
  margin-bottom: -0.04em;
}

.tk-masthead__line:first-child {
  text-box: trim-start cap alphabetic;
}

.tk-masthead__line:last-child {
  text-box: trim-end cap alphabetic;
}

.tk-masthead__line>span {
  display: inline-block;
  white-space: nowrap;
  transition: transform 1.1s var(--ease-out);
}

.tk-masthead__line:nth-child(2)>span {
  transition-delay: 0.12s;
}

.tk-masthead__italic {
  font-style: italic;
}

.tk-intro .tk-masthead__line>span {
  transform: translateY(105%);
}

/* Engines without text-box (Samsung Internet, Safari before 18.2) trim by
   hand: the copy by half its leading around the cap height, the masthead
   by Review's own metrics (at line-height 0.86 the cap height sits 0.1em
   under its top, clip room included, and the baseline 0.03em over its
   bottom). */
@supports not (text-box: trim-both cap alphabetic) {
  .tk-masthead {
    margin-block: -0.1em -0.03em;
  }

  .tk-hero__eyebrow {
    margin-bottom: calc((1cap - 1lh) / 2);
  }

  .tk-hero__lede {
    margin-block: calc((1cap - 1lh) / 2);
  }

  .tk-hero__actions .tk-textlink {
    margin-top: calc((1cap - 1lh) / 2);
  }
}

/* ----- The stage (the art) ----- */
.tk-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--paper-2);
  border-left: 1px solid var(--rule);
}

/* Price-level lines — as thin as the armed trigger, each ending at its
   price chip on the axis. home.js drifts them (translateY) and draws them
   in (scaleX); they still overprint the ridge where they cross it. */
.tk-band {
  position: absolute;
  left: 0;
  right: var(--axis-w);
  top: 0;
  height: var(--line-h);
  background: var(--band);
  mix-blend-mode: var(--overprint);
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}

.tk-ridge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  mix-blend-mode: var(--overprint);
}

.tk-ridge__area {
  fill: url(#tk-hatch);
}

.tk-ridge__hatch {
  fill: var(--ink-1);
}

.tk-ridge__line {
  fill: none;
  stroke: var(--ink-1);
  stroke-width: 7;
  stroke-linejoin: miter;
  stroke-miterlimit: 2.5;
}

.tk-ridge__dot {
  fill: var(--ink-1);
}

.tk-ridge__ring {
  fill: none;
  stroke: var(--ink-6);
  stroke-width: 2;
  opacity: 0;
}

.tk-ridge__ring.is-firing {
  animation: tk-ring 1.4s var(--ease-out) forwards;
}

.tk-ridge__ring.is-firing:nth-of-type(2) {
  animation-delay: 0.18s;
}

@keyframes tk-ring {
  0% {
    opacity: 1;
    r: 4px;
  }

  100% {
    opacity: 0;
    r: 90px;
  }
}

/* The armed trigger: a marching candy-cane line (the chart demo's armed
   trendline), with its order tag riding on top. */
.tk-trigger {
  position: absolute;
  z-index: 3;
  left: 0;
  right: var(--axis-w);
  top: 0;
  height: var(--line-h);
  margin-top: calc(var(--line-h) / -2);
  background: repeating-linear-gradient(-45deg, var(--ink) 0 4px, transparent 4px 9px);
  background-size: 12.73px 6px;
  animation: tk-march 0.6s linear infinite;
  transition: opacity 0.5s ease;
  /* its width is the chart's, which the tag has to fit */
  container: tk-trigger / inline-size;
}

.tk-stage:not(.is-live) .tk-trigger {
  opacity: 0;
}

@keyframes tk-march {
  to {
    background-position: 12.73px 0;
  }
}

.tk-trigger__tag {
  position: absolute;
  left: 1.1rem;
  bottom: 0.85rem;
}

/* A chart too narrow for the whole tag (the side-by-side hero just past
   its stacking breakpoint) drops the order, as phones do: the full tag
   is ~34ch of the mono face, plus its inset and some clearance. */
@container tk-trigger (max-width: 37.5ch) {
  .tk-trigger__tag .tk-sep,
  .tk-trigger__tag [data-trigger-order] {
    display: none;
  }
}

.tk-trigger.is-filled {
  background: var(--ink-6);
  animation: none;
}

.tk-trigger.is-filled .tk-trigger__tag {
  --fill: var(--ink-6);
  border-color: var(--fill);
}

.tk-trigger.is-filled .tk-trigger__tag .tk-sep {
  color: inherit;
}

/* Price tags on the band edges and the axis (positioned by home.js). */
.tk-tags {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.tk-stage:not(.is-live) .tk-tags,
.tk-stage:not(.is-live) .tk-axis {
  opacity: 0;
}

/* Price chips on the axis, like a chart's horizontal-line labels: each
   band's level in its own ink, the trigger in ink, the live price in
   green / red by its last tick. */
.tk-tag {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4em;
  width: var(--axis-w);
  height: 1.25rem;
  padding-inline: 0.4rem;
  --fill: var(--band, var(--ink));
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  will-change: transform;
}

.tk-tag b {
  font-weight: 700;
  letter-spacing: 0.06em;
}

.tk-tag--trigger {
  z-index: 1;
  justify-content: center;
  --fill: var(--ink);
}

.tk-tag--live {
  z-index: 2;
  justify-content: center;
  --fill: var(--ink-6);
}

.tk-tag--live.is-down {
  --fill: var(--ink-4);
}

.tk-axis {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--axis-w);
  border-left: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper-2) 82%, transparent);
  transition: opacity 0.6s ease;
}

.tk-axis__tick {
  position: absolute;
  left: 0;
  width: 6px;
  height: 1px;
  background: var(--ink);
}

.tk-axis__tick--major {
  width: 14px;
}

.tk-stage__hud {
  position: absolute;
  z-index: 5;
  top: 1.1rem;
  left: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  pointer-events: none;
  transition: opacity 0.6s ease 0.4s;
}

.tk-stage__hud .tk-label {
  padding: 0.25rem 0.4rem;
  background: var(--paper-2);
}

.tk-stage:not(.is-live) .tk-stage__hud {
  opacity: 0;
}

.tk-corner {
  position: absolute;
  z-index: 5;
  width: 14px;
  height: 14px;
  border: 0 solid var(--ink);
  pointer-events: none;
}

.tk-corner--tl {
  top: 8px;
  left: 8px;
  border-top-width: 2px;
  border-left-width: 2px;
}

.tk-corner--tr {
  top: 8px;
  right: calc(var(--axis-w) + 8px);
  border-top-width: 2px;
  border-right-width: 2px;
}

.tk-corner--bl {
  bottom: 8px;
  left: 8px;
  border-bottom-width: 2px;
  border-left-width: 2px;
}

.tk-corner--br {
  bottom: 8px;
  right: calc(var(--axis-w) + 8px);
  border-bottom-width: 2px;
  border-right-width: 2px;
}

/* Hash targets (#markets, #kit) land just below the sticky header, not
   under it. */
.tk-ticker,
.tk-kit {
  scroll-margin-top: var(--nav-h);
}

/* =========================================================================
   Ticker — a broadcast lower third (art-kit.js clones the group so the
   marquee loops seamlessly).
   ========================================================================= */
.tk-ticker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  height: var(--ticker-h);
  margin-inline: var(--frame);
}

/* Display type is set tight; give the word spaces back. */
.tk-masthead,
.tk-section-head__title,
.tk-feature__title,
.tk-quote__text,
.tk-cta__title {
  word-spacing: 0.1em;
}

.tk-ticker__label {
  --fill: var(--ink-4);
  display: flex;
  align-items: center;
  padding-inline: var(--pad);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tk-ticker__viewport {
  display: flex;
  align-items: center;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

.tk-ticker__track {
  display: flex;
  width: max-content;
  animation: tk-marquee 80s linear infinite;
}

.tk-ticker__viewport:hover .tk-ticker__track {
  animation-play-state: paused;
}

.tk-ticker__group {
  display: flex;
  align-items: center;
}

.tk-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-left: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  white-space: nowrap;
}

.tk-ticker__item::after {
  content: '>>>';
  margin-left: 0.8rem;
  color: var(--ink-4);
  font-weight: 600;
  letter-spacing: -0.06em;
}

.tk-ticker__item img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.tk-ticker__sym {
  font-weight: 600;
  letter-spacing: 0.06em;
}

.tk-ticker__name {
  color: var(--ink-soft);
}

@keyframes tk-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* =========================================================================
   Readout — the facts as seven-segment instruments (.tk-seg, site.css).
   ========================================================================= */
.tk-readout {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-inline: var(--frame);
}

.tk-readout__cell {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 17rem;
  padding: var(--pad);
  border-left: 1px solid var(--rule);
}

.tk-readout__cell:first-child {
  border-left: 0;
}

.tk-readout__cell>p {
  margin-top: auto;
  max-width: 28ch;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* =========================================================================
   Section head + the kit (features)
   ========================================================================= */
.tk-section-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem 1.5rem;
  margin-inline: var(--frame);
  padding: calc(var(--pad) * 2.4) var(--pad) var(--pad);
}

.tk-section-head .tk-chip {
  align-self: start;
}

/* Sized to share its row with the aside on one line from ~1400px (every
   MacBook at its default resolution); narrower, it wraps in balanced
   lines. */
.tk-section-head__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 6.6vw, 7rem);
  line-height: 0.86;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-wrap: balance;
}

.tk-section-head__aside {
  padding-bottom: 0.5rem;
  color: var(--ink-soft);
}

.tk-feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  margin-inline: var(--frame);
}

.tk-feature__copy {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: calc(var(--pad) * 1.4) var(--pad);
  border-right: 1px solid var(--rule);
}

.tk-feature--flip {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.tk-feature--flip .tk-feature__copy {
  order: 2;
  border-right: 0;
  border-left: 1px solid var(--rule);
}

/* The index row reads like a contents entry — the numeral, a dotted leader,
   the chip — so the numeral stays off the heading's line and the title gets
   the column's full width. Too narrow for all three, the chip wraps under. */
.tk-feature__index {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin-bottom: 0.5rem;
}

.tk-feature__index .tk-chip {
  color: var(--ink);
}

/* Striped display type in the feature's accent ink, kept small so it stays
   decoration (hence the coarse stripe mask, .tk-stripes--coarse). */
.tk-feature__num {
  flex: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 2.7vw, 2.6rem);
  line-height: 0.78;
  letter-spacing: -0.04em;
  color: var(--accent);
  /* the stripe mask covers the box, so pad it over the last glyph's overhang */
  padding: 0 0.05em 0.04em 0;
}

/* The dotted run, drawn like the blog's leaders (.blog-leader). */
.tk-feature__leader {
  flex: 1;
  min-width: 1.5rem;
  border-bottom: 2px dotted var(--rule);
}

.tk-feature__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 3.6vw, 3.5rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.tk-feature__sub {
  max-width: 34ch;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.tk-list {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--rule);
}

.tk-list li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.92rem;
  line-height: 1.45;
}

.tk-list li::before {
  content: '>';
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--ink);
  text-shadow: 0.09em 0.09em 0 var(--accent);
}

/* The media side: a dot-screen field with the demo as a framed screen,
   its accent plate printed off-register behind it. */
.tk-feature__media {
  position: relative;
  display: grid;
  place-items: center;
  padding: calc(var(--pad) * 1.6) calc(var(--pad) * 1.4);
  background-image: radial-gradient(circle, var(--ink-faint) 1.1px, transparent 1.4px);
  background-size: 12px 12px;
}

.tk-screen {
  position: relative;
  width: 100%;
  margin: 0;
  border: 1px solid var(--ink);
  background: var(--paper-2);
  box-shadow: 0.9rem 0.9rem 0 0 var(--accent);
}

.tk-screen__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 2.2rem;
  padding-inline: 0.8rem;
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tk-screen__bar>span {
  display: inline-flex;
  align-items: center;
}

.tk-screen__body {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.tk-screen__body>.demo {
  position: absolute;
  inset: 0;
}

/* The plate prints in after its screen rises. */
.tk-feature__media[data-reveal]:not(.is-in) .tk-screen {
  box-shadow: 0 0 0 0 var(--accent);
}

.tk-feature__media .tk-screen {
  transition: box-shadow 0.8s var(--ease-out) 0.35s;
}

/* =========================================================================
   Quote — the field report, highlighter-marked.
   ========================================================================= */
.tk-quote {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: var(--pad);
  margin-inline: var(--frame);
  padding: calc(var(--pad) * 2.6) var(--pad);
}

.tk-quote__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.tk-quote__body {
  margin: 0;
}

.tk-quote__text {
  margin: 0 0 1.75rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.9rem, 4.3vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Hanging punctuation: the mark sits in the margin so the text keeps its
   edge; its box is a little wider than the glyph so it clears the "I". */
.tk-quote__mark {
  display: inline-block;
  margin-left: -0.58em;
  width: 0.58em;
  color: var(--ink-3);
}

.tk-quote mark {
  --fill: var(--ink-2);
  padding-inline: 0.06em;
  background: linear-gradient(transparent 14%, var(--fill) 14%, var(--fill) 90%, transparent 90%);
  color: var(--on-ink);
  color: oklch(from var(--fill) clamp(0, calc((0.6 - l) * 100000), 1) 0 0);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* =========================================================================
   CTA — "Trade anything" in the valley of a live depth chart.
   ========================================================================= */
.tk-cta {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(36rem, 80svh, 52rem);
  margin-inline: var(--frame);
  overflow: hidden;
  text-align: center;
  /* the title sizes to its room (cqi) */
  container-type: inline-size;
}

.tk-depth {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tk-depth__bids,
.tk-depth__asks {
  mix-blend-mode: var(--overprint);
}

.tk-depth__bids {
  fill: url(#tk-hatch-bid);
}

.tk-depth__asks {
  fill: url(#tk-hatch-ask);
}

.tk-depth__bid-hatch {
  fill: var(--ink-6);
}

.tk-depth__ask-hatch {
  fill: var(--ink-4);
}

.tk-depth__bid-edge,
.tk-depth__ask-edge {
  fill: none;
  stroke-width: 3;
}

.tk-depth__bid-edge {
  stroke: var(--ink-6);
}

.tk-depth__ask-edge {
  stroke: var(--ink-4);
}

.tk-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  padding: var(--pad);
  /* lift the copy off the depth walls */
  margin-bottom: 8%;
}

.tk-cta__inner>.tk-label {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}

.tk-cta__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3.4rem, 10.5vw, 10.5rem);
  /* …but never wider than its room: js/flip-word.js measures the widest
     word it flips through (--flip-widest, in ems), so on phones the type
     shrinks until that word fits inside .tk-cta__inner's padding */
  font-size: min(clamp(3.4rem, 10.5vw, 10.5rem), (100cqi - 2 * var(--pad)) / var(--flip-widest, 1));
  line-height: 0.84;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.tk-cta__title .flip-word {
  font-style: italic;
  padding-right: 0.08em;
}

/* The rotating word ("Trade anything") in the hero eyebrow and the CTA
   title: js/flip-word.js flips it through the asset classes in the pills
   below. Inline-block so it can carry the rotateX transform and an
   animated width (the words differ in length); nowrap keeps each word
   unbroken. */
.flip-word {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
}

/* The asset classes, as a ruled grid of boxes (.tk-boxes, site.css). */
.cta-pills {
  justify-content: center;
}

.pill {
  display: block;
  padding: 0.55rem 0.9rem;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tk-cta__mid {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 0.8rem var(--pad);
  border-top: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
}

.tk-cta__mid b {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1100px) {
  .tk-readout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tk-readout__cell:nth-child(3) {
    border-left: 0;
  }

  .tk-readout__cell:nth-child(n + 3) {
    border-top: 1px solid var(--rule);
  }
}

/* The hero stacks (the copy, then the stage) on narrow screens and on any
   portrait one: it fills the screen above the ticker, so side by side on a
   portrait tablet (a 12.9" iPad Pro, a Surface Pro) its columns come out
   tall and skinny. The site's other columns don't fill the screen, so they
   keep the width breakpoint. */
@media (max-width: 860px), (orientation: portrait) {
  .tk-hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .tk-hero__copy {
    padding-block: calc(var(--pad) * 2);
  }

  .tk-stage {
    height: min(120vw, 34rem);
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
}

@media (max-width: 860px) {
  .tk {
    --axis-w: 5.5rem;
  }

  .tk-feature,
  .tk-feature--flip {
    grid-template-columns: minmax(0, 1fr);
  }

  .tk-feature__copy,
  .tk-feature--flip .tk-feature__copy {
    order: 0;
    border: 0;
    border-bottom: 1px solid var(--rule);
  }

  .tk-section-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .tk-section-head__aside {
    display: none;
  }

  .tk-quote {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {

  .tk-ticker__label,
  .tk-trigger__tag .tk-sep,
  .tk-trigger__tag [data-trigger-order] {
    display: none;
  }

  .tk-ticker {
    grid-template-columns: minmax(0, 1fr);
  }

  .tk-readout {
    grid-template-columns: minmax(0, 1fr);
  }

  .tk-readout__cell {
    min-height: 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
  }

  .tk-readout__cell:first-child {
    border-top: 0;
  }

  .tk-cta__mid span:first-child,
  .tk-cta__mid span:last-child {
    display: none;
  }

  .tk-cta__mid {
    justify-content: center;
  }
}

/* Reduced motion: the intro lands in its final state (site.css stops
   transitions and animations; home.js draws the art as one still). */
@media (prefers-reduced-motion: reduce) {

  .tk-intro .tk-hero [data-intro],
  .tk-intro .tk-masthead__line>span {
    opacity: 1;
    transform: none;
  }
}