/* ==========================================================================
   THE TRAILER (the public holding page at /coming-soon/ and, in holding
   mode, /).

   Three parts: a split hero (photographs left, the product right, growing to
   fill its half), a grid of scene cards, and a split waiting-list section.

   STILL UNTIL ASKED (client, 20 Oct 2026: "too much happening and moving all
   at once"). Nothing here loops or drifts on its own any more — no blinking
   record dot, no slow zoom on the photographs, no pulsing play button, no
   bobbing badges, no film-grain flicker, no cinema bars on arrival. Motion
   happens because the visitor pressed something: the trailer, a scene card,
   a showcase.
   Everything is prefixed tr-. Nothing here restyles a shared class, so the
   home page and the rest of the public site are untouched.

   Progressive by construction: with no JavaScript every headline is fully
   visible, every video shows its poster, and every card is on screen.
   gt-trailer.js adds .tr-js to <html>, and only then do the kinetic words
   start hidden. With reduced motion the words are still revealed (the state
   change is instant, the travel is what is removed).
   ========================================================================== */

.page-trailer { background: var(--deep); }
.tr-kin .tr-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.tr-kin .tr-w > span { display: inline-block; }
.tr-js .tr-kin .tr-w > span { transform: translateY(110%) rotate(4deg); transition: transform .8s var(--ease); transition-delay: calc(var(--i) * 60ms); }
.tr-js .tr-kin.tr-in .tr-w > span { transform: none; }

/* small round buttons used by the hero and the pager */
.tr-tool {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; min-width: 42px; padding: 0;
  border-radius: 999px; cursor: pointer; color: #fff;
  background: rgba(4,35,22,.62); border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 800 12px/1 var(--mark); letter-spacing: .14em; text-transform: uppercase;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.tr-tool svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tr-tool:hover { background: var(--lime); color: var(--deep); border-color: var(--lime); }
.tr-tool-wide { padding: 0 16px 0 13px; }
.tr-tool-lt { background: #fff; color: var(--deep); border-color: rgba(7,47,30,.2); -webkit-backdrop-filter: none; backdrop-filter: none; }
.tr-tool-lt:hover { background: var(--deep); color: var(--lime); border-color: var(--deep); }

.tr-now {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 15px; border-radius: 999px;
  border: 1px solid rgba(207,249,58,.55); background: rgba(207,249,58,.1); color: var(--lime);
  font: 800 12px/1 var(--mark); letter-spacing: .14em; text-transform: uppercase;
}
.tr-rec { width: 8px; height: 8px; border-radius: 50%; background: #ff4d3d; }

/* the crossfading photographs, shared by the hero and the join section */
.tr-shot {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s var(--ease);
}
.tr-shot.is-on { opacity: 1; }
.tr-veil { position: absolute; inset: 0; pointer-events: none; }

/* ---------- HERO ---------- */
.tr-hero {
  position: relative; isolation: isolate; overflow: hidden; background: var(--deep-2);
  height: calc(100vh - 66px); height: calc(100svh - 66px); min-height: 560px; max-height: 820px;
  transition: height 1.1s var(--ease), max-height 1.1s var(--ease);
}
/* on the press the hero opens up a little, top to bottom, to the height of the screen */
.tr-hero.is-theatre { max-height: calc(100svh - 66px); height: calc(100svh - 66px); }
.tr-hero-left { position: relative; width: 42%; height: 100%; display: flex; align-items: center; overflow: hidden; }
.tr-photos { position: absolute; inset: 0; overflow: hidden; }
.tr-photos .tr-veil {
  background:
    linear-gradient(90deg, rgba(4,35,22,.55) 0%, rgba(4,35,22,.78) 75%, rgba(4,35,22,.9) 100%),
    linear-gradient(0deg, rgba(4,35,22,.92), transparent 50%);
}
.tr-hero-copy { position: relative; z-index: 2; padding: 0 clamp(24px, 4vw, 64px) 0 var(--gutter); max-width: 680px; }
.tr-h1 {
  font-family: var(--display); font-size: clamp(36px, 4.6vw, 72px); line-height: .98; letter-spacing: -.025em;
  color: #fff; margin: 20px 0 16px;
}
.tr-h1 em { font-style: normal; color: var(--lime); }
.tr-hero-copy.is-scene .tr-h1 { font-size: clamp(32px, 4vw, 60px); }
.tr-lead { color: rgba(255,255,255,.86); font-size: clamp(15px, 1.35vw, 19px); line-height: 1.55; max-width: 44ch; margin: 0; }
.tr-bignum {
  position: absolute; right: -.04em; top: .02em; z-index: 1; pointer-events: none;
  font: 400 clamp(180px, 24vw, 360px)/1 var(--display); color: transparent; -webkit-text-stroke: 2px rgba(207,249,58,.2);
  opacity: 0; transform: translateY(-8%); transition: opacity .8s var(--ease), transform 1s var(--ease);
}
.tr-bignum.on { opacity: 1; transform: none; }
/* The number is a green outline that fills with yellow like water, quickly, at
   the start of every scene. --p is the level (0 empty, 1 full) and --w slides
   the wave along; the script drives both a frame at a time. */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
.tr-bignum { --p: 0; --w: 0; -webkit-text-stroke: 3px rgba(47,162,74,.85); }
.tr-bignum::after {
  --y: calc(.9em - var(--p) * .84em);
  content: attr(data-n); position: absolute; inset: 0; -webkit-text-stroke: 0;
  background: linear-gradient(to top, #F5B800, #F5C518 55%, #FFD93D);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10Q25 0 50 10T100 10V20H0Z'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10Q25 0 50 10T100 10V20H0Z'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  -webkit-mask-size: .5em .1em, 100% 100%; mask-size: .5em .1em, 100% 100%;
  -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
  -webkit-mask-position: calc(var(--w) * .5em) calc(var(--y) - .05em), 0 calc(var(--y) + .04em);
  mask-position: calc(var(--w) * .5em) calc(var(--y) - .05em), 0 calc(var(--y) + .04em);
  opacity: calc(min(var(--p) * 40, 1));
}

/* the reasons to join, typed after the intro */
.tr-why { margin-top: 24px; padding-left: 18px; border-left: 3px solid var(--lime); max-width: 46ch; transition: border-color .5s; }
.tr-why-h { margin: 0 0 12px; font: 800 13px/1 var(--mark); letter-spacing: .18em; text-transform: uppercase; color: var(--lime); }
.tr-why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: rgba(255,255,255,.92); font-size: clamp(14px, 1.2vw, 17px); line-height: 1.4; }
.tr-why-list li { position: relative; padding-left: 20px; }
.tr-why-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.tr-js .tr-why-list li.tr-built:not(.is-typing)::before { opacity: 0; }
.tr-why-go {
  display: inline-block; margin-top: 14px; padding-bottom: 4px; color: var(--lime); text-decoration: none;
  border-bottom: 2px solid currentColor; font: 800 13px/1 var(--mark); letter-spacing: .14em; text-transform: uppercase;
}
.tr-js .tr-why-go { opacity: 0; transition: opacity .5s var(--ease); }
.tr-js .tr-why-go.on { opacity: 1; }

/* typed text: every letter is laid out from the start (so nothing reflows as it
   types) and is simply switched on */
.tr-c { opacity: 0; }
.tr-c.on { opacity: 1; }
.tr-tw { display: inline-block; white-space: nowrap; }
.tr-tw.hl { color: var(--lime); }
.tr-caret { display: inline-block; width: 0; position: relative; }
.tr-caret::after {
  content: ""; position: absolute; left: .05em; bottom: -.14em; width: .07em; height: 1em; min-width: 2px; background: var(--lime);
  animation: trBlink 1s steps(1) infinite;
}
@keyframes trBlink { 50% { opacity: 0; } }
/* wiped: the words lift away in a ripple */
.tr-hero-copy.is-out .tr-tw {
  opacity: 0; transform: translateY(-.4em); filter: blur(6px);
  transition: opacity .45s var(--ease), transform .5s var(--ease), filter .45s var(--ease);
  transition-delay: calc(var(--b, 0) * 60ms + var(--w, 0) * 12ms);
}
.tr-hero-copy.is-out .tr-now, .tr-hero-copy.is-out .tr-why-go, .tr-hero-copy.is-out .tr-why-list li::before {
  opacity: 0; transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.tr-hero-copy.is-out .tr-now { transform: translateY(-8px); }
.tr-hero-copy.is-out .tr-why { border-color: transparent; }

/* right half: the product. Framed and waiting; a hand presses it; it fills the hero. */
.tr-hero-right {
  position: absolute; top: 0; bottom: 0; left: 42%; right: 0; z-index: 3; overflow: hidden; background: var(--deep-2);
  transition: left 1.1s var(--ease); container-type: size;
}
/* the press: the product takes the whole hero, left and right */
.tr-hero.is-theatre .tr-hero-right { left: 0; }
.tr-pane-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(55% 50% at 50% 46%, rgba(207,249,58,.2), transparent 70%),
    radial-gradient(80% 60% at 100% 100%, rgba(42,115,55,.5), transparent 70%);
}
/* The recording is never cropped or enlarged: the box always holds the clip's own
   16:10 shape, so all of the page is on show. Framed it sits small in the pane;
   on the press it fills the hero, as wide as its height allows. */
.tr-stagebox {
  --w: min(100cqw, 160cqh);
  position: absolute; overflow: hidden; background: #061a11; border-radius: 0;
  left: calc((100cqw - var(--w)) / 2); right: calc((100cqw - var(--w)) / 2);
  top: calc((100cqh - var(--w) / 1.6) / 2); bottom: calc((100cqh - var(--w) / 1.6) / 2);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.16), 0 0 70px -12px rgba(207,249,58,.24);
  transition: left 1.1s var(--ease), right 1.1s var(--ease), top 1.1s var(--ease), bottom 1.1s var(--ease);
}
.tr-stagebox.is-framed { --w: min(76cqw, 118cqh); border-radius: 14px; }
.tr-vid {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%;
  opacity: 0; background: #061a11; transition: opacity .7s var(--ease);
}
.tr-vid.is-on { opacity: 1; }

/* The framed product is the play button. It waits, still — no pulse — and
   answers the pointer instead: the frame lifts, the badge grows, the footage
   behind it brightens. */
.tr-stagebox { cursor: pointer; }
.tr-stagebox:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
/* At rest the screen behind the badge is a cover: softened and dimmed so
   the badge reads first. Pointing at it brings the screen into focus. */
.tr-stagebox::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(70% 70% at 50% 50%, rgba(4,35,22,.55), rgba(4,35,22,.8));
  -webkit-backdrop-filter: blur(4px) saturate(.8); backdrop-filter: blur(4px) saturate(.8);
  transition: opacity .45s var(--ease), -webkit-backdrop-filter .45s var(--ease), backdrop-filter .45s var(--ease);
}
.tr-stagebox:not(.is-framed)::after { opacity: 0; }
.tr-play {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 84px; height: 84px; margin: -66px 0 0 -42px; border-radius: 50%;
  background: var(--lime); display: grid; place-items: center;
  box-shadow: 0 0 0 10px rgba(207,249,58,.18), 0 20px 40px -10px rgba(0,0,0,.6);
  transition: opacity .35s var(--ease), transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s var(--ease);
}
.tr-play svg { width: 34px; height: 34px; fill: var(--deep); margin-left: 5px; }
.tr-play-label {
  position: absolute; left: 50%; top: 50%; z-index: 2; margin-top: 32px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px; white-space: nowrap; text-align: center; pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.tr-play-label { padding: 10px 18px 11px; border-radius: 16px; background: rgba(4,35,22,.88); border: 1px solid rgba(207,249,58,.35);
  box-shadow: 0 16px 34px -14px rgba(0,0,0,.8); }
.tr-play-label b { font: 400 clamp(17px, 1.6vw, 22px)/1 var(--display); color: #fff; }
.tr-play-label small { font: 800 11px/1 var(--mark); letter-spacing: .16em; text-transform: uppercase; color: var(--lime); }
.tr-stagebox.is-framed:hover::after, .tr-stagebox.is-framed:focus-visible::after {
  background: radial-gradient(70% 70% at 50% 50%, rgba(4,35,22,.3), rgba(4,35,22,.6));
  -webkit-backdrop-filter: blur(0) saturate(1); backdrop-filter: blur(0) saturate(1); }
.tr-stagebox.is-framed:hover .tr-play { transform: scale(1.1); box-shadow: 0 0 0 16px rgba(207,249,58,.22), 0 26px 50px -12px rgba(0,0,0,.7); }
.tr-stagebox.is-framed:hover .tr-play-label { transform: translate(-50%, 4px); }
.tr-stagebox:not(.is-framed) .tr-play, .tr-stagebox:not(.is-framed) .tr-play-label { opacity: 0; transform: scale(.6); }
.tr-stagebox:not(.is-framed) .tr-play-label { transform: translate(-50%, 10px); }
/* Mid-trailer, between scenes, the badge is a pause that has not happened:
   it says "watching" rather than inviting a first press. */
.tr-hero:not(.is-idle) .tr-play-label { opacity: 0; }

/* the scene title already sits on the left; the tag would only cover the footage */
.tr-cap {
  position: absolute; left: 12px; bottom: 12px; display: none; align-items: center; gap: 10px;
  padding: 7px 14px 7px 8px; border-radius: 999px; color: #fff; background: rgba(4,35,22,.74); border: 1px solid rgba(207,249,58,.4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 400 clamp(12px, 1.05vw, 15px)/1 var(--display); letter-spacing: -.01em; transition: opacity .5s var(--ease) .6s;
}
.tr-cap b { font: 800 12px/1 var(--score); letter-spacing: .06em; color: var(--deep); background: var(--lime); border-radius: 999px; padding: 6px 9px; }
.tr-stagebox.is-framed .tr-cap { opacity: 0; transition-delay: 0s; }

.tr-float {
  position: absolute; z-index: 4; padding: 9px 15px; border-radius: 999px; pointer-events: none;
  background: var(--lime); color: var(--deep); font: 900 13px/1 var(--mark); letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.6);
  opacity: 0; transition: opacity .5s var(--ease);
}
.tr-stagebox.is-framed ~ .tr-float { opacity: 1; }
.tr-float.f1 { top: 12%; right: 9%; }
.tr-float.f3 { bottom: 13%; right: 6%; }

.tr-tools { position: absolute; top: 18px; right: 18px; z-index: 6; display: flex; gap: 8px; }
.tr-tool .i-play { fill: currentColor; stroke: none; }
[data-pause] .i-play, [data-pause][aria-pressed="true"] .i-pause { display: none; }
[data-pause][aria-pressed="true"] .i-play { display: block; }
/* At rest the big play button is the only control; the trailer's own
   buttons appear once it is running, with a Stop to bring it back to rest. */
.tr-hero.is-idle .tr-tools { display: none; }


/* fourteen steps along the foot of the hero: where we are, and a way to jump */
.tr-steps { position: absolute; left: var(--gutter); right: clamp(16px, 2.4vw, 34px); bottom: 10px; z-index: 6; display: flex; gap: 6px; }
.tr-step { flex: 1; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.tr-step::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 7px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--lime) calc(var(--p, 0) * 100%), rgba(4,35,22,.55) 0);
  box-shadow: 0 0 0 1px rgba(255,255,255,.34); transition: height .2s var(--ease), bottom .2s var(--ease);
}
.tr-step:hover::before, .tr-step:focus-visible::before { height: 8px; bottom: 5px; background: linear-gradient(90deg, var(--lime) calc(var(--p, 0) * 100%), rgba(207,249,58,.45) 0); }
.tr-step:focus-visible { outline: none; }
/* Each marker names its scene when the pointer finds it: a way to pick one
   at leisure, not just a progress bar. */
.tr-step::after {
  content: attr(data-tag); position: absolute; left: 50%; bottom: 24px; transform: translate(-50%, 6px);
  padding: 7px 12px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  background: var(--lime); color: var(--deep); font: 800 11px/1 var(--mark); letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.6); opacity: 0; transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.tr-step:first-child::after { left: 0; transform: translate(0, 6px); }
.tr-step:last-child::after { left: auto; right: 0; transform: translate(0, 6px); }
.tr-step:hover::after, .tr-step:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.tr-step:first-child:hover::after, .tr-step:first-child:focus-visible::after,
.tr-step:last-child:hover::after, .tr-step:last-child:focus-visible::after { transform: none; }

/* a little grain, standing still */
.tr-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- SCENE CARDS: one big card and seven small; pick one and it takes the big place ---------- */
.tr-cards { background: var(--cream-2); }
.tr-cards > .wrap { max-width: min(1640px, 100%); }
.tr-cards { padding: clamp(24px, 3vw, 44px) clamp(16px, 2.4vw, 40px) clamp(36px, 4vw, 64px); }
.tr-cards-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.tr-cards-title { position: relative; padding-left: clamp(46px, 5vw, 72px); }
.tr-spark { position: absolute; left: 0; top: 4px; width: clamp(40px, 4.4vw, 62px); fill: none; stroke: var(--lime); stroke-width: 4; stroke-linecap: round; }
.tr-cards-h { margin: 0; font: 400 clamp(36px, 4.6vw, 72px)/.92 var(--display); letter-spacing: -.02em; text-transform: uppercase; color: var(--deep); }
.tr-cards-h em { display: block; font-style: normal; color: var(--lime); text-shadow: 0 2px 0 rgba(7,47,30,.16); }
.tr-cards-sub { margin: 10px 0 0; font: 600 clamp(17px, 1.7vw, 24px)/1.2 var(--body); color: var(--deep); }
.tr-cards-side { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); padding-top: 12px; }
.tr-pager { display: flex; align-items: center; gap: 14px; background: #fff; padding: 8px; border-radius: 999px; box-shadow: 0 10px 26px -16px rgba(7,47,30,.5); }
.tr-pager .tr-tool { border: 0; }
.tr-dots { display: inline-flex; gap: 6px; }
.tr-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: rgba(7,47,30,.2); transition: width .35s var(--ease), background .35s var(--ease); }
.tr-dots button.is-on { width: 22px; background: var(--forest); }
.tr-note { position: relative; margin: 0; font: italic 400 clamp(17px, 1.6vw, 22px)/1.25 var(--display); color: var(--deep); transform: rotate(-5deg); padding-bottom: 12px; }
.tr-note svg { position: absolute; left: 4px; bottom: -2px; width: 82%; height: 12px; fill: none; stroke: var(--lime); stroke-width: 3; stroke-linecap: round; }

.tr-grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 22px; }
.tr-card {
  position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden; cursor: pointer; font: inherit; color: var(--ink);
  background: #fff; border: 1px solid rgba(15,46,34,.1); border-radius: 22px;
  box-shadow: 0 1px 0 rgba(15,46,34,.04), 0 18px 34px -26px rgba(7,47,30,.55);
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease), background-color .5s var(--ease);
}
.tr-card[data-slot="x"] { display: none; }
.tr-card[data-slot="0"] { grid-area: 1 / 1 / 2 / 7; }
.tr-card[data-slot="1"] { grid-area: 1 / 7 / 2 / 9; }
.tr-card[data-slot="2"] { grid-area: 1 / 9 / 2 / 11; }
.tr-card[data-slot="3"] { grid-area: 1 / 11 / 2 / 13; }
.tr-card[data-slot="4"] { grid-area: 2 / 1 / 3 / 4; }
.tr-card[data-slot="5"] { grid-area: 2 / 4 / 3 / 7; }
.tr-card[data-slot="6"] { grid-area: 2 / 7 / 3 / 10; }
.tr-card[data-slot="7"] { grid-area: 2 / 10 / 3 / 13; }
.tr-card.is-leaving { position: absolute; z-index: 3; margin: 0; pointer-events: none; }
.tr-card:not(.is-big):hover { border-color: var(--forest); box-shadow: 0 30px 44px -26px rgba(7,47,30,.6); }
.tr-card:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; }

.tr-card-body { display: flex; flex-direction: column; gap: 8px; padding: clamp(14px, 1.3vw, 22px) clamp(14px, 1.3vw, 22px) 12px; }
.tr-card-top { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 4px; }
.tr-card-num { flex: none; padding: 8px 12px; border-radius: 999px; font-style: normal; background: var(--lime); color: var(--deep); font: 900 15px/1 var(--score); letter-spacing: .04em; }
.tr-card-top small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 8px 14px; border-radius: 999px; background: rgba(7,47,30,.07); color: var(--deep); font: 800 11.5px/1 var(--mark); letter-spacing: .1em; text-transform: uppercase; }
.tr-card-body b { font: 400 clamp(16px, 1.25vw, 20px)/1.1 var(--display); overflow-wrap: break-word; hyphens: manual; letter-spacing: -.012em; color: var(--deep); }
.tr-card-body b em { font-style: normal; }
.tr-card-blurb { font-size: clamp(13px, 1vw, 15px); line-height: 1.45; color: var(--muted); }
.tr-card-line { display: none; width: 90px; height: 8px; margin-top: 14px; fill: none; stroke: var(--lime); stroke-width: 2.6; stroke-linecap: round; }
.tr-card-media { position: relative; display: block; margin: auto 14px 14px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; background: #061a11; box-shadow: 0 0 0 1px rgba(7,47,30,.08); }
.tr-card-media img, .tr-card-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.tr-card:not(.is-big):hover .tr-card-media img, .tr-card:not(.is-big):hover .tr-card-media video { transform: scale(1.04); transition: transform .8s var(--ease); }

/* the big card: dark green, words left, the product right */
.tr-card.is-big { flex-direction: row; align-items: stretch; background: var(--deep); border-color: var(--deep); box-shadow: 0 34px 60px -34px rgba(4,35,22,.85); cursor: pointer; }
.tr-card.is-big .tr-card-body { flex: 0 0 42%; min-width: 0; justify-content: center; gap: 14px; padding: clamp(22px, 2.6vw, 44px) clamp(8px, 1vw, 16px) clamp(22px, 2.6vw, 44px) clamp(22px, 2.6vw, 44px); }
.tr-card.is-big .tr-card-top small { background: rgba(207,249,58,.14); color: var(--lime); }
.tr-card.is-big .tr-card-body b { font-size: clamp(28px, 3vw, 50px); line-height: 1; color: #fff; }
.tr-card.is-big .tr-card-body b em { color: var(--lime); display: block; }
.tr-card.is-big .tr-card-blurb { font-size: clamp(15px, 1.25vw, 19px); color: rgba(255,255,255,.86); }
.tr-card.is-big .tr-card-line { display: block; }
.tr-card.is-big .tr-card-media { flex: 1; margin: clamp(14px, 1.6vw, 26px); margin-left: 0; aspect-ratio: auto; min-height: 0; border-radius: 16px; box-shadow: 0 0 0 1px rgba(207,249,58,.25); }

@media (max-width: 1000px) {
  .tr-grid { gap: 14px; }
  .tr-card[data-slot="0"] { grid-area: 1 / 1 / 2 / 13; }
  .tr-card[data-slot="1"] { grid-area: 2 / 1 / 3 / 7; }
  .tr-card[data-slot="2"] { grid-area: 2 / 7 / 3 / 13; }
  .tr-card[data-slot="3"] { grid-area: 3 / 1 / 4 / 7; }
  .tr-card[data-slot="4"] { grid-area: 3 / 7 / 4 / 13; }
  .tr-card[data-slot="5"], .tr-card[data-slot="6"], .tr-card[data-slot="7"] { display: none; }
  .tr-card.is-big .tr-card-body { flex-basis: 44%; }
}
@media (max-width: 640px) {
  .tr-card.is-big { flex-direction: column; }
  .tr-card.is-big .tr-card-body { flex: none; padding: 20px 20px 12px; }
  .tr-card.is-big .tr-card-media { margin: 0 14px 14px; aspect-ratio: 16 / 10; flex: none; }
  .tr-card-blurb { display: none; }
  .tr-card.is-big .tr-card-blurb { display: block; }
  .tr-card-body { padding: 12px 12px 8px; }
  .tr-card-top small { display: none; }
  .tr-card.is-big .tr-card-top small { display: block; }
  .tr-card-media { margin: auto 8px 8px; }
  .tr-cards-side { width: 100%; justify-content: space-between; }
  .tr-dots { display: none; }
}

/* ---------- JOIN: photographs left, the form right (after the client's design) ---------- */
.tr-join { display: grid; grid-template-columns: 1fr 1fr; min-height: min(calc(100svh - 66px), 880px); background: var(--cream-2); }
.tr-join-left { position: relative; overflow: hidden; min-height: 520px; }
.tr-join-left .tr-veil { background: linear-gradient(180deg, rgba(4,35,22,.66), rgba(4,35,22,0) 38%, rgba(4,35,22,0) 58%, rgba(4,35,22,.88)); }
.tr-join-quote { position: absolute; z-index: 2; left: var(--gutter); right: 40px; top: clamp(32px, 6vw, 76px); color: #fff; }
.tr-join-big { font: 400 clamp(38px, 5vw, 76px)/.96 var(--display); letter-spacing: -.028em; margin: 0 0 12px; color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.tr-join-big em { font-style: normal; display: block; color: #F5C518; }
.tr-join-small { margin: 0; font-size: clamp(16px, 1.5vw, 21px); color: rgba(255,255,255,.92); }
.tr-join-perks {
  position: absolute; z-index: 2; left: var(--gutter); right: 32px; bottom: clamp(26px, 4vw, 48px); margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; color: rgba(255,255,255,.82); font-size: 13px; line-height: 1.35;
}
.tr-join-perks li { display: flex; align-items: flex-start; gap: 11px; }
.tr-join-perks svg { flex: none; width: 30px; height: 30px; fill: none; stroke: #F5C518; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tr-join-perks b { display: block; color: #fff; font-weight: 700; font-size: 14px; margin-bottom: 2px; }

.tr-join-right {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: 76px clamp(20px, 4.5vw, 64px) 22px; gap: 16px; overflow: hidden;
  background: radial-gradient(70% 50% at 0% 0%, rgba(207,249,58,.22), transparent 70%), var(--cream-2);
}
/* the brush swoosh at the right edge */
.tr-join-right::before {
  content: ""; position: absolute; right: -90px; top: 16%; width: 210px; height: 56%; border-radius: 60% 0 0 70% / 40% 0 0 60%;
  background: var(--deep); box-shadow: -14px 22px 0 -6px #F5C518; opacity: .95; pointer-events: none; transform: rotate(-4deg);
}
.tr-join-in {
  position: relative; z-index: 2; width: 100%; max-width: 640px; padding: clamp(22px, 2.4vw, 34px) clamp(22px, 2.6vw, 38px); border-radius: 28px;
  background: #fff; box-shadow: 0 40px 70px -36px rgba(7,47,30,.45), 0 0 0 1px rgba(7,47,30,.06);
}
.tr-pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 12px; border-radius: 999px;
  background: #d6f0da; color: var(--forest); font: 800 12px/1 var(--mark); letter-spacing: .1em; text-transform: uppercase;
}
.tr-pill svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tr-join-h { font: 400 clamp(32px, 3.5vw, 52px)/1.02 var(--display); letter-spacing: -.028em; color: var(--deep); margin: 14px 0 10px; text-wrap: balance; }
.tr-join-h em { font-style: normal; color: #F5B800; display: inline-block; }
.tr-join-sub { margin: 0 0 18px; color: var(--ink); font-size: 17px; line-height: 1.45; max-width: 34ch; }

.tr-formcard { position: relative; }
.tr-form { display: grid; gap: 12px; }
.tr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tr-f { position: relative; }
.tr-fi { position: absolute; z-index: 1; left: 18px; top: 50%; width: 22px; height: 22px; margin-top: -11px; pointer-events: none; fill: none; stroke: var(--forest); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tr-chev { position: absolute; right: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; pointer-events: none; fill: none; stroke: var(--deep); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tr-f input, .tr-f select {
  width: 100%; height: 58px; padding: 0 16px 0 54px; border-radius: 14px; margin: 0;
  background: #fff; color: var(--ink); border: 1.5px solid rgba(15,46,34,.16);
  font: 500 16px/1.2 var(--body); transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.tr-f input { padding-top: 0; }
.tr-f select { appearance: none; -webkit-appearance: none; height: 62px; padding: 24px 44px 0 54px; cursor: pointer; color: var(--ink); }
.tr-f select:has(option[value=""]:checked) { color: var(--muted); }
.tr-f input:hover, .tr-f select:hover { border-color: rgba(15,46,34,.36); }
.tr-f input:focus, .tr-f select:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 4px rgba(207,249,58,.55); }
.tr-f label {
  position: absolute; left: 54px; top: 20px; pointer-events: none; color: var(--muted);
  font: 500 15.5px/1 var(--body); transition: top .2s var(--ease), font-size .2s var(--ease), color .2s var(--ease);
}
.tr-f label em { font-style: normal; opacity: .65; font-weight: 500; }
.tr-f input:focus + label, .tr-f input:not(:placeholder-shown) + label { top: 11px; font: 800 10.5px/1 var(--mark); letter-spacing: .14em; text-transform: uppercase; color: var(--forest); }
.tr-f select + label { top: 11px; color: var(--deep); font: 600 14px/1.2 var(--body); }
.tr-submit {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 58px; margin-top: 4px;
  border: 0; border-radius: 999px; cursor: pointer; background: #0b5a37; color: #fff;
  font: 800 18px/1 var(--body); letter-spacing: 0;
  box-shadow: 0 16px 28px -16px rgba(7,47,30,.9);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.tr-submit svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.tr-submit:hover { background: var(--deep); color: var(--lime); }
.tr-submit:hover svg { transform: translateX(5px); }
.tr-submit:active { transform: translateY(1px); }
.tr-submit:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.tr-formcard .gtf-done h3 { color: var(--ink); }
.tr-formcard .gtf-done p { color: var(--muted); opacity: 1; }
.tr-formcard .gtf-done { padding: 30px 0 34px; }
.tr-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 16px 0 0; padding: 0; color: var(--deep); font-size: 13.5px; }
.tr-trust li { display: inline-flex; align-items: center; gap: 8px; }
.tr-trust li::before {
  content: ""; width: 15px; height: 15px; border-radius: 50%; background: var(--forest) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 12.5 4 4 8-9'/></svg>") center / 10px no-repeat;
}
.tr-join-foot { position: relative; z-index: 2; width: 100%; max-width: 640px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tr-codes { display: inline-flex; align-items: center; gap: 16px; padding: 12px 26px; border-radius: 999px; background: rgba(7,47,30,.07); }
.tr-codes b { font: 900 17px/1 var(--score); letter-spacing: .06em; color: var(--deep); }
.tr-codes i { width: 1px; height: 22px; background: rgba(7,47,30,.25); }
.tr-mate { font: 400 22px/1 var(--display); color: var(--deep); font-style: italic; border-bottom: 3px solid #F5C518; padding-bottom: 4px; }

/* ---------- RESPONSIVE ---------- */
@media (min-width: 901px) and (max-height: 780px) {
  .tr-h1 { font-size: clamp(32px, 4vw, 56px); margin: 14px 0 12px; }
  .tr-hero-copy.is-scene .tr-h1 { font-size: clamp(30px, 3.6vw, 52px); }
  .tr-lead { font-size: 15px; }
  .tr-why { margin-top: 16px; }
}
@media (max-width: 900px) {
  /* one screen: the words on top, the product under them, the step bar at the foot */
  .tr-hero { height: calc(100vh - 66px); height: calc(100svh - 66px); max-height: none; min-height: 620px; display: flex; flex-direction: column; }
  .tr-hero-left { width: 100%; height: auto; flex: 0 0 56%; min-height: 0; }
  .tr-hero-copy { padding-right: var(--gutter); }
  .tr-h1 { font-size: clamp(30px, 8.6vw, 44px); margin: 14px 0 10px; }
  .tr-hero-copy.is-scene .tr-h1 { font-size: clamp(28px, 8vw, 40px); }
  .tr-lead { font-size: 14.5px; line-height: 1.5; }
  .tr-why { margin-top: 14px; }
  .tr-why-h { margin-bottom: 8px; }
  .tr-why-list { font-size: 13.5px; gap: 5px; }
  .tr-bignum { font-size: 150px; }
  .tr-hero-right { position: relative; left: auto; flex: 1; min-height: 0; }
  .tr-tools { top: 10px; right: 10px; }
  .tr-tool { height: 38px; min-width: 38px; }
  .tr-play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .tr-play svg { width: 26px; height: 26px; }
  .tr-float { display: none; }
  .tr-steps { bottom: 6px; }
  .tr-join { grid-template-columns: 1fr; }
  .tr-join-left { min-height: 62svh; }
  .tr-join-perks { grid-template-columns: 1fr; gap: 10px; }
  .tr-join-perks span { font-size: 12.5px; }
}
@media (max-width: 640px) {
  .tr-row { grid-template-columns: 1fr; }
  .tr-join-right::before { display: none; }
  .tr-join-right { padding-top: 24px; }
  .tr-join-foot { justify-content: center; flex-wrap: wrap; }
}

/* ---------- REDUCED MOTION / SAVE-DATA: still, but complete ---------- */
@media (prefers-reduced-motion: reduce) {
  .tr-hero::after, .tr-letterbox, .tr-float, .tr-rec, .tr-play, .tr-caret::after { animation: none; }
  .tr-letterbox { display: none; }
  .tr-shot.is-on { animation: none; transform: none; }
  .tr-stagebox { transition: none; }
  .tr-js .tr-kin .tr-w > span { transform: none; transition: none; }
}

/* ---------- ON AIR ----------
   The product films show GoodTip's own menu, which is deep green. While a
   film is playing (or about to) the page's real bar turns lime, so the two
   can never be mistaken for one another. The switch is instant on purpose. */
body:is(.tr-on-air, .tr-peek-open) .nav,
body:is(.tr-on-air, .tr-peek-open) .nav.scrolled { background: var(--lime); border-bottom-color: rgba(7,47,30,.35); box-shadow: 0 6px 22px rgba(4,35,22,.35); transition: none; }
body:is(.tr-on-air, .tr-peek-open) .nav .wordmark,
body:is(.tr-on-air, .tr-peek-open) .nav .wordmark span,
body:is(.tr-on-air, .tr-peek-open) .nav .wordmark .dot { color: var(--deep); }
body:is(.tr-on-air, .tr-peek-open) .nav .nav-links a { color: var(--deep); opacity: 1; font-weight: 700; }
body:is(.tr-on-air, .tr-peek-open) .nav .nav-links a:hover,
body:is(.tr-on-air, .tr-peek-open) .nav .nav-links a:focus-visible { background: rgba(7,47,30,.12); color: var(--deep); }
body:is(.tr-on-air, .tr-peek-open) .nav .nav-links a .nav-ic { color: var(--deep); opacity: 1; }
body:is(.tr-on-air, .tr-peek-open) .nav .nav-links a[aria-current="page"]::after { background: var(--deep); }
body:is(.tr-on-air, .tr-peek-open) .nav .nav-sep { background: rgba(7,47,30,.3); }
body:is(.tr-on-air, .tr-peek-open) .nav .nav-links .btn-nav { background: var(--deep); color: var(--lime) !important; }
body:is(.tr-on-air, .tr-peek-open) .nav .nav-links .btn-nav .nav-ic { color: var(--lime); }
body:is(.tr-on-air, .tr-peek-open) .nav .nav-toggle span { background: var(--deep); }
@media (max-width: 1120px) {
  body:is(.tr-on-air, .tr-peek-open) .nav .nav-links { background: var(--lime); border-bottom-color: rgba(7,47,30,.35); }
  body:is(.tr-on-air, .tr-peek-open) .nav .nav-links a { border-bottom-color: rgba(7,47,30,.2); }
}

/* ---------- THE SHOWCASES ----------
   A full-screen sheet that slides under the menu bar (which turns lime while one is open,
   the same "on air" bar as when the hero plays). Copy on the left, the tour in
   a browser frame on the right, three captioned stills under them. It scrolls
   inside itself; the page behind is locked. */
html.tr-peek-lock { overflow: hidden; }
.tr-peek {
  position: fixed; z-index: 90; inset: 0; padding-top: 66px; overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(120% 90% at 85% 0%, #0d4a2e 0, var(--deep) 45%, var(--deep-2) 100%); color: #fff;
  outline: none;
}
.tr-peek[hidden] { display: none; }
.tr-peek-in { max-width: 1480px; margin: 0 auto; padding: clamp(16px, 2vw, 28px) clamp(16px, 3vw, 48px) clamp(36px, 4vw, 64px); }
.tr-peek.is-in .tr-peek-copy > *, .tr-peek.is-in .tr-frame, .tr-peek.is-in .tr-peek-shots figure {
  animation: trPeekIn .7s var(--ease) both;
}
.tr-peek.is-in .tr-peek-copy > *:nth-child(2) { animation-delay: .06s; }
.tr-peek.is-in .tr-peek-copy > *:nth-child(3) { animation-delay: .12s; }
.tr-peek.is-in .tr-peek-copy > *:nth-child(4) { animation-delay: .18s; }
.tr-peek.is-in .tr-peek-copy > *:nth-child(5) { animation-delay: .24s; }
.tr-peek.is-in .tr-frame { animation-delay: .1s; }
.tr-peek.is-in .tr-peek-shots figure:nth-child(2) { animation-delay: .12s; }
.tr-peek.is-in .tr-peek-shots figure:nth-child(3) { animation-delay: .24s; }
@keyframes trPeekIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.tr-peek-bar { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(14px, 2vw, 26px); }
.tr-peek-k { flex: 1; display: inline-flex; align-items: center; gap: 10px; font: 800 12px/1 var(--mark); letter-spacing: .16em; text-transform: uppercase; color: var(--lime); white-space: nowrap; }
.tr-peek-x {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 12px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.3); background: transparent; color: #fff; font: 800 13px/1 var(--body);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.tr-peek-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.tr-peek-x:hover { background: #fff; color: var(--deep); border-color: #fff; }
.tr-peek a:focus-visible, .tr-peek button:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

.tr-peek-body { display: grid; grid-template-columns: minmax(300px, 5fr) minmax(0, 8fr); gap: clamp(24px, 3.4vw, 60px); align-items: center; }
.tr-peek-copy .tr-pill { background: rgba(207,249,58,.14); color: var(--lime); }
.tr-peek-h { font: 400 clamp(34px, 4.2vw, 68px)/1 var(--display); letter-spacing: -.028em; margin: 18px 0 14px; text-wrap: balance; color: #fff; }
.tr-peek-sub { margin: 0 0 22px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: rgba(255,255,255,.86); max-width: 40ch; }
.tr-peek-points { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.tr-peek-points li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.4; color: #fff; }
.tr-peek-points svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--lime); fill: none; stroke: var(--deep); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; margin-top: -1px; }
.tr-peek-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; }
.tr-peek-cta .tr-submit { width: auto; padding: 0 30px; background: var(--lime); color: var(--deep); box-shadow: 0 16px 30px -16px rgba(0,0,0,.6); margin: 0; }
.tr-peek-cta .tr-submit:hover { background: #fff; color: var(--deep); }
.tr-peek-live { color: rgba(255,255,255,.7); font-size: 14px; text-underline-offset: 4px; }
.tr-peek-live:hover { color: var(--lime); }

.tr-peek-stage { margin: 0; min-width: 0; }
.tr-frame {
  border-radius: 16px; overflow: hidden; background: #061a11;
  box-shadow: 0 50px 90px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.12), 0 0 0 10px rgba(207,249,58,.05);
}
.tr-frame-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: #0b2a1c; }
.tr-frame-bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.22); }
.tr-frame-bar i:first-child { background: #ff6159; } .tr-frame-bar i:nth-child(2) { background: #ffbd2e; } .tr-frame-bar i:nth-child(3) { background: #28c940; }
.tr-frame-bar span { margin-left: 12px; flex: 0 1 60%; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.72); font: 600 12px/1 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-frame-screen { aspect-ratio: 16 / 10; background: #061a11; }
.tr-frame-screen video { display: block; width: 100%; height: 100%; object-fit: cover; }

.tr-peek-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 24px); margin-top: clamp(28px, 3.4vw, 52px); }
.tr-peek-shots figure { margin: 0; border-radius: 14px; overflow: hidden; background: #0b2a1c; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 24px 40px -26px rgba(0,0,0,.7); }
.tr-peek-shots img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.tr-peek-shots figcaption { padding: 12px 16px 14px; font: 800 12px/1.3 var(--mark); letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }

.tr-peek-pn { display: flex; justify-content: space-between; gap: 12px; margin-top: clamp(24px, 3vw, 40px); }
.tr-peek-pn a {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; text-decoration: none;
  border: 1.5px solid rgba(255,255,255,.26); color: #fff; font: 800 14px/1 var(--body); transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.tr-peek-pn a:hover { background: var(--lime); border-color: var(--lime); color: var(--deep); }
.tr-peek-pn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1000px) {
  .tr-peek-body { grid-template-columns: 1fr; }
  .tr-peek-stage { order: -1; }
  .tr-peek-sub { max-width: none; }
}
@media (max-width: 640px) {
  .tr-peek-bar { gap: 10px; }
  .tr-peek-k { white-space: normal; line-height: 1.3; }
  .tr-peek-x span { display: none; } .tr-peek-x { padding: 0 12px; }
  .tr-peek-shots { grid-template-columns: 1fr; }
  .tr-peek-cta .tr-submit { width: 100%; }
  .tr-frame-bar span { flex-basis: 78%; }
}