/* ==========================================================================
   Triangle Squad — design tokens
   Source: Figma "SQUAD WEBSITE (Copy)" node 4090:35 (Desktop, 1440px),
   Node 4016:122 (Desktop 002) is the earlier orange-accent variant.
   ========================================================================== */

:root {
  /* surfaces */
  --bg:          #0a0a0a;
  --bg-off:      #0b0b0a;   /* bootcamp / squad panels */
  --bg-veil:     rgba(10, 10, 10, .92);
  --surface:     #1c1d22;   /* discord card */
  --navy:        #18242e;   /* deep gradient stop: plans, triangle */

  /* rules */
  --line:        #22282c;
  --line-soft:   #171b1e;
  --line-strong: #363b40;
  --line-warm:   #d7d7d7;   /* triangle section rules */

  /* accent — steel blue, per Figma 4090:35 */
  --accent:      #9fc5d4;
  --accent-deep: #5e8e9e;
  --orange:      #ff722d;   /* only the "for producers" band */

  /* type colours */
  --cream:       #edebe6;
  --paper:       #f1f2f3;
  --chalk:       #dcdee1;
  --blue:        #abc3d7;
  --slate:       #93a7b8;
  --text:        #a9aeb4;
  --text-dim:    #8b9299;
  --text-dimmer: #6e747a;
  --text-faint:  #5a6066;
  --text-ghost:  #474c50;

  /* type families
     Both load from the Adobe Fonts kit linked in each page head. The Figma
     uses Owners Black, but only Regular/Bold are activated in the kit, so the
     display headings ask for 700 to match what is actually served. Bump to 900
     if Black is ever added — see FONTS.md. */
  --f-display: "owners", "Owners", "Archivo Black", "Arial Black", system-ui, sans-serif;
  --f-mono:    "DM Mono", ui-monospace, "SFMono-Regular", monospace;
  --f-he:      "narkiss-yair-variable", "Narkiss Yair Variable", "Heebo", "Arial Hebrew", system-ui, sans-serif;

  /* layout — the Figma frame is 1440 wide with 70px gutters (1300 content) */
  --page:   1440px;
  --gutter: 70px;

  /* motion — one easing and one clock for the whole site, so every hover,
     press and reveal moves with the same hand. The default curve leaves
     quickly and lands slowly, which is what reads as "soft" rather than
     the linear-ish ease the browser gives you for free. */
  --ease:   cubic-bezier(.22, 1, .36, 1);
  --t-fast: .26s;
  --t-mid:  .42s;
  --t-slow: .68s;
}

/* ==========================================================================
   base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: #fff;
  font-family: var(--f-he);
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* height:auto keeps the HTML width/height attributes from beating aspect-ratio
   once max-width/width constrains the box */
img, svg { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3, h4 { margin: 0; }
a        { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.shell {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Latin micro-labels: DM Mono, letterspaced, always LTR */
.mono {
  font-family: var(--f-mono);
  letter-spacing: .095em;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ==========================================================================
   section furniture
   ========================================================================== */

/* Owners display headings — 75px, tight leading, uppercase */
.display {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 75px;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--chalk);
  direction: ltr;
}

/* [ bracketed hebrew label ] */
.tag {
  font-family: var(--f-he);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 2.1px;
  color: var(--chalk);
}

/* label right / heading left, sharing a baseline band */
.sec-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.sec-head--center {
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

/* ==========================================================================
   buttons
   ========================================================================== */

/* large — 315x75, used at the foot of most sections */
.btn-join {
  position: relative;
  display: flex;
  flex-direction: row-reverse;   /* RTL page, but the arrow stays on the left */
  align-items: center;
  justify-content: flex-start;
  gap: 30px;
  width: 315px;
  height: 75px;
  padding-inline: 8px;
  /* Figma default: fill #FFF 10%, stroke #FFF 100% inside, glass + drop shadow */
  background: rgba(255, 255, 255, .1);
  border: .5px solid #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25), 0 0 11px rgba(255, 255, 255, .1);
  /* Figma "Glass" (Frost 38) has no CSS equivalent — backdrop blur is closest */
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  color: #fff;
  transition: background var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease);
}
/* Figma hover: only the fill changes, to A0C6D5 40%. The colour crossfades in
   place — an earlier build wiped it up from the bottom edge, which the
   designer read as a gimmick sitting on top of the component. */
.btn-join:hover,
.btn-join:focus-visible {
  background: rgba(160, 198, 213, .4);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3), 0 0 18px rgba(255, 255, 255, .16);
  transform: translateY(-2px);
}
/* the press answers back, and answers back fast — a slow push reads as lag */
.btn-join:active {
  transform: translateY(0) scale(.985);
  transition-duration: .09s;
}

@media (prefers-reduced-motion: reduce) {
  .btn-join:hover,
  .btn-join:focus-visible,
  .btn-join:active { transform: none; }
}
.btn-join img   { width: 40px; height: 39px; transform: rotate(-135deg); }
.btn-join span {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 1.32px;
  text-transform: uppercase;
  direction: ltr;
}

/* small — 44px tall, used in the hero and the access band */
.btn-join--sm {
  width: auto;
  height: 44px;
  gap: 10px;
  padding-inline: 18px;
  border-width: 1px;
}
.btn-join--sm img  { width: 14px; height: 13px; }
.btn-join--sm span { font-size: 20px; }

/* bar — full width of its column, label centred with the arrow beside it.
   Used at the foot of the Standard plan and as the join form's submit. */
.btn-join--bar {
  width: 100%;
  max-width: none;
  height: 55px;
  gap: 18px;
  justify-content: center;
  padding-inline: 12px;
  border-width: 1px;
  cursor: pointer;
  font: inherit;
}
.btn-join--bar img  { width: 15px; height: 14px; }
.btn-join--bar span {
  font-family: var(--f-he);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1.33px;
  text-transform: none;
  direction: rtl;
}

/* solid variant — sits on the access band, reverses to an outline on hover.
   Transparent rather than a light fill, so the revealed area is the band's own
   gradient and matches it exactly, which a painted layer never could. */
.btn-join--solid {
  background: #000;
  border: 1px solid #000;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #fff;
  transition: background var(--t-mid) var(--ease),
              color var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease);
}
.btn-join--solid:hover,
.btn-join--solid:focus-visible {
  background: transparent;
  color: #000;
  box-shadow: none;
}
.btn-join--solid img { transition: filter var(--t-mid) var(--ease); }
.btn-join--solid:hover img,
.btn-join--solid:focus-visible img { filter: invert(1); }

/* ==========================================================================
   masthead — transparent, sits over the hero
   ========================================================================== */

.masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding-block: 36px;
  transition: padding-block var(--t-slow) var(--ease);
}
/* scrim behind the bar — only once the hero is behind us */
.masthead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 156px;
  background: linear-gradient(to bottom,
              rgba(0, 0, 0, .92) 0%,
              rgba(0, 0, 0, .58) 46%,
              rgba(0, 0, 0, 0) 100%);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
  pointer-events: none;
}
/* the bar never leaves — it only tightens up and picks up its scrim once the
   hero is behind us. It used to duck away on the way down, which the designer
   read as the menu breaking off mid-scroll. */
.masthead.is-stuck          { padding-block: 22px; }
.masthead.is-stuck::before  { opacity: 1; }

.masthead__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* anchors must clear the fixed bar */
[id] { scroll-margin-top: 110px; }

.masthead__logo img {
  width: 60px;
  height: 27px;
  transition: transform var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease);
}
.masthead__logo:hover img { transform: scale(1.06); }
.masthead__logo:active img { transform: scale(.97); transition-duration: .09s; }

.nav {
  display: flex;
  gap: 30px;
  margin-inline: auto;
  direction: ltr;
}
.nav a {
  position: relative;
  font-family: var(--f-he);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #fff;
  opacity: .95;
  transition: opacity var(--t-fast) var(--ease);
}
/* a rule that opens from the middle — the link answers the pointer with a
   movement rather than only a dimming */
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-mid) var(--ease);
}
.nav a:hover { opacity: .78; }
.nav a:hover::after,
.nav a:focus-visible::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .nav a::after { transition: none; }
}

/* mobile disclosure — hidden on desktop */
.menu { display: none; }

/* ==========================================================================
   hero
   ========================================================================== */

.hero {
  position: relative;
  height: 880px;
  overflow: hidden;
  background: #000;
  /* the lockup and the tagline blend with the film behind them, and the
     isolation keeps that conversation inside the hero — without it they would
     reach past the section and difference themselves against the page */
  isolation: isolate;
}
/* The still and the film that fades in over it are the same picture, so they
   have to be the same size at every moment or the crossfade shows a jump.
   One shared geometry, and 3% of overshoot top and bottom — that is the room
   the scroll drift moves in, so it needs no scale of its own. */
.hero__bg,
.hero__video {
  position: absolute;
  inset: -3% 0;
  width: 100%;
  height: 106%;
  object-fit: cover;
  object-position: center;
}
/* the film fades in over the still once it can actually play, so there is
   never a black hole where the hero should be */
.hero__video {
  opacity: 0;
  /* short enough to read as the film simply arriving, long enough that the
     swap from the poster to the first frame is not a cut */
  transition: opacity 300ms ease;
  pointer-events: none;
}
.hero__video.is-ready { opacity: 1; }

.hero__inner {
  position: relative;
  height: 100%;
}

/* The tagline sits in difference against the film, so the frame behind it
   decides what colour it is, and it leaves by travelling up out of the hero
   rather than dissolving. The lockup stays out of it: the mark is the mark,
   and a bright frame turned it inside out. It keeps its own dim-off. */
.hero__tagline { mix-blend-mode: difference; }

.hero__lockup {
  position: absolute;
  top: 405px;
  left: var(--gutter);
  width: 654px;
}
.hero__lockup img { width: 100%; }

.hero__tagline {
  position: absolute;
  top: 455px;
  right: var(--gutter);
  width: 520px;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.2;
  text-align: right;
}

/* centred with auto margins, not translateX: the hero-lift animation ends on
   transform:none, which would otherwise wipe the centring out once it plays */
.hero__cta {
  position: absolute;
  top: 705px;
  left: 0;
  right: 0;
  width: fit-content;
  margin-inline: auto;
}

/* ==========================================================================
   bootcamp week
   ========================================================================== */

.bootcamp {
  background: var(--bg-off);
  padding-block: 49px 58px;
}
.bootcamp .display { line-height: 72px; }

.bootcamp__lede {
  margin-block-start: 28px;
  margin-inline-end: auto;
  width: 700px;
  font-weight: 700;
  font-size: 25px;
  line-height: 22.95px;
  color: var(--slate);
  text-align: right;
}
.bootcamp__lede p + p { margin-block-start: 0; }

.days {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-block-start: 28px;
}

.day {
  position: relative;
  aspect-ratio: 315 / 497;   /* photo 366 + the copy panel that opens on hover */
  color: #fff;
  outline: 1px solid transparent;
  overflow: hidden;              /* the parked copy panel never shows a corner */
  /* the card sizes its own type. Tying it to the viewport was wrong: the grid
     drops from four columns to two, so the card gets WIDER exactly where the
     viewport gets narrower, and the copy shrank in a card that had more room */
  container-type: inline-size;
  isolation: isolate;            /* the copy panel hides behind the photo */
  transition: outline-color var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease);
}
.day:hover,
.day:focus-within {
  outline-color: rgba(255, 255, 255, .45);
  transform: translateY(-6px);
}
.day:active { transform: translateY(-2px) scale(.994); transition-duration: .09s; }
.day__photo {
  position: absolute;
  inset: 0 0 26.56% 0;       /* the top 366px of the card */
  width: 100%;
  height: 73.44%;
  z-index: 2;                /* over the copy panel, which slides out below */
  object-fit: cover;
  filter: grayscale(1);
  transition: filter var(--t-slow) var(--ease);
}
.day:hover .day__photo,
.day:focus-within .day__photo { filter: none; }
.day::after {                    /* keeps the captions legible on light frames */
  content: "";
  position: absolute;
  z-index: 3;
  bottom: 26.56%;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent);
  transition: background var(--t-mid) var(--ease);
}
.day:hover::after,
.day:focus-within::after {
  background: linear-gradient(to top, rgba(94, 142, 158, .92), rgba(94, 142, 158, 0));
}
.day__date {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 4;
  font-weight: 700;
  font-size: 24px;
  font-size: clamp(15px, 7.6cqw, 24px);
  letter-spacing: 1.2px;
}
.day__caption {
  position: absolute;
  bottom: 28.5%;
  right: 13px;
  z-index: 4;
  text-align: right;
}
.day__name {
  font-weight: 700;
  font-size: 24px;
  font-size: clamp(15px, 7.6cqw, 24px);
  letter-spacing: .88px;
}
.day__name--mono,
.day__role--mono {
  font-family: var(--f-mono);
  font-weight: 500;
  direction: ltr;
}
.day__role {
  font-weight: 700;
  font-size: 20px;
  font-size: clamp(13px, 6.3cqw, 20px);
  letter-spacing: .88px;
}

/* the day copy is a hidden layer in the Figma component — it opens in the
   panel below the photo on hover */
.day__body {
  position: absolute;
  inset: 73.44% 0 0 0;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 14px 15px;
  background: #0a0a0a;
  color: var(--cream);
  font-weight: 700;
  /* The panel is a fixed share of the card and hides behind the photo, so the
     copy has to fit it: anything taller goes behind the picture rather than
     below the card. The size tracks the grid — 20px is the Figma figure, and
     it only holds when the real Narkiss Yair is serving. Heebo runs wider. */
  font-size: 20px;
  font-size: clamp(12px, 5.4cqw, 17px);
  line-height: 1.22;
  text-align: right;
  /* parked one panel-height up, which is exactly behind the photo — hover
     walks it back down so the copy comes out of the picture rather than
     appearing on top of it */
  transform: translateY(-100%);
  transition: transform var(--t-slow) var(--ease);
}
.day:hover .day__body,
.day:focus-within .day__body { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .day__body { transition: none; }
}

/* ==========================================================================
   access band
   ========================================================================== */

.access {
  height: 215px;
  background: linear-gradient(to bottom, var(--accent-deep), var(--accent));
  color: #000;
}
.access__inner {
  display: flex;
  flex-direction: row-reverse;   /* lockup right, CTA left */
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-block-start: 12px;
}
.access__lockup { width: 510px; height: 114px; }

/* ==========================================================================
   the squad
   ========================================================================== */

.squad {
  background: var(--bg-off);
  padding-block: 87px 88px;
}
.squad .display { line-height: 99.76px; color: #fff; }
.squad .tag     { color: #fff; }

.squad__grid {
  display: grid;
  grid-template-columns: 355px 489px 445px;   /* RTL: lead, body, photo */
  min-height: 436px;
  margin-block-start: 47px;
  border-block-start: 1px solid #fff;
}
.squad__lead {
  /* The four lines are broken by hand in the markup, and the third of them —
     "ישירות מאיתנו וממפיקים" — is a shade wider than the Figma's 32px leaves
     room for in a 355 column. Heebo runs wider than Narkiss Yair, the same
     gap that shows up in the guarantee box. A point off the type and ten off
     each inset is what buys the line. */
  padding: 57px 20px 0;
  border-inline: 1px solid #fff;
  font-weight: 700;
  font-size: 31px;
  line-height: 35px;
  text-align: right;
}
.squad__body {
  padding: 57px 29px 0 42px;
  font-weight: 700;
  font-size: 25px;
  line-height: 26px;
  text-align: right;
}
.squad__photo {
  align-self: start;
  margin-block-start: 27px;
  aspect-ratio: 445 / 383;
  width: 100%;
  object-fit: cover;
  border: 1px solid #fff;
}

.squad__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 75px;
  padding-inline-start: 33px;
  border: 1px solid #fff;
}
.squad__bar .btn-join { margin-block: -1px; margin-inline-start: -1px; }
.squad__mark { width: 75px; height: 33px; }

/* ==========================================================================
   what you get
   ========================================================================== */

.get {
  position: relative;
  padding-block: 87px 111px;
  background-image:
    linear-gradient(to top, var(--bg-off), #717167),
    url("get/bg.jpg");
  background-size: cover;
  background-position: center;
  background-blend-mode: darken;
}
/* soften the seam where the photo meets the black section above it */
.get::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 260px;
  background: linear-gradient(to bottom, var(--bg-off) 0%, rgba(11, 11, 10, .6) 45%, rgba(11, 11, 10, 0) 100%);
  pointer-events: none;
}
.get > .shell { position: relative; z-index: 1; }
.get .display {
  line-height: 99.76px;
  color: var(--paper);
  white-space: nowrap;
  /* 75px, matching the Figma — restored now that real Owners loads from the
     Adobe Fonts kit instead of the wider Archivo Black fallback. */
  font-size: 75px;
}
.get .tag     { color: var(--paper); }

/* the heading sits in the two cells row 1 leaves empty, not above the grid */
.get__head {
  grid-area: 1 / 3 / 2 / 5;
  align-self: start;
  padding-block-start: 0;        /* top edge level with cards 01 and 02 */
}
.get__head .tag { display: block; text-align: right; }
/* The heading is a stacked block, not the two-sided .sec-head row, so all three
   lines share an edge. .display carries direction: ltr, whose start edge is the
   left one — that is what left the English line adrift from the Hebrew. */
.get__head .display { text-align: right; }
.get__sub {
  margin-block-start: 22px;
  font-weight: 700;
  font-size: 25px;
  line-height: 22.95px;
  text-align: right;
}

.get__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 12px;
}
/* row 1 holds cards 01 + 02 (plus the heading); row 2 holds 03-05 + the photo */
.get__grid > .perk:nth-of-type(1) { grid-area: 1 / 1; }
.get__grid > .perk:nth-of-type(2) { grid-area: 1 / 2; }
.get__grid > .perk:nth-of-type(3) { grid-area: 2 / 1; }
.get__grid > .perk:nth-of-type(4) { grid-area: 2 / 2; }
.get__grid > .perk:nth-of-type(5) { grid-area: 2 / 3; }
.get__grid > .get__photo          { grid-area: 2 / 4; }

.perk {
  position: relative;
  display: flex;                 /* a bare <button> centres its content */
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  aspect-ratio: 314 / 343;
  padding: 30px 28px 20px;
  /* the Figma card is glass: a translucent fill over a blurred backdrop,
     inside a hairline white frame — the same treatment the photo beside it
     carries. No transform belongs on this element: a transformed backdrop
     stops sampling the section behind it and the glass goes flat. */
  background: rgba(217, 217, 217, .2);
  border: .5px solid rgba(242, 241, 237, .8);
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  color: inherit;
  font: inherit;
  text-align: right;
  cursor: pointer;
  transition: background var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease);
}
/* open goes dark but stays glass — a flat black fill loses the photo behind it */
.perk[aria-expanded="true"] {
  background: rgba(10, 10, 10, .62);
  border-color: rgba(242, 241, 237, .95);
}

/* the copy lives in the component's second variant — revealed on hover / tap */
.perk__body {
  position: absolute;
  inset-inline: 28px;
  bottom: 20px;
  font-weight: 700;
  font-size: 16px;
  line-height: 23px;
  color: var(--cream);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-mid) var(--ease),
              transform var(--t-slow) var(--ease);
}
.perk[aria-expanded="true"] .perk__body { opacity: 1; transform: none; }

/* the arrow gets out of the way once the copy is showing */
.perk[aria-expanded="true"] .perk__arrow { opacity: 0; transform: translateY(8px); }

/* Hover is a pointer's business. A tap leaves :hover stuck on whatever it
   landed on, so closing a card left its arrow held down by a hover state with
   nothing hovering it — the arrow simply never came back. */
@media (hover: hover) {
  .perk:hover {
    background: rgba(10, 10, 10, .62);
    border-color: rgba(242, 241, 237, .95);
  }
  .perk:hover .perk__body  { opacity: 1; transform: none; }
  .perk:hover .perk__arrow { opacity: 0; transform: translateY(8px); }
}
.perk__arrow { transition: opacity var(--t-fast) var(--ease), transform var(--t-mid) var(--ease); }
.perk__no {
  position: absolute;
  top: 19px;
  left: 25px;
  font-family: var(--f-mono);
  font-size: 32px;
  letter-spacing: 1.4px;
  color: #fff;
  direction: ltr;
}
.perk__title {
  align-self: start;             /* cross-axis start = right in RTL */
  max-width: 190px;              /* clears the number in the top-left corner */
  font-weight: 700;
  font-size: 24px;
  line-height: 22px;
  color: var(--cream);
}
/* each frame breaks the long titles in its own place */
.perk__break { display: none; }

.perk__arrow {
  position: absolute;
  bottom: 8px;
  left: 10px;
  width: 40px;
  height: 39px;
  transform: rotate(-135deg);
}
.get__photo {
  align-self: start;
  aspect-ratio: 314 / 343;
  width: 100%;
  object-fit: cover;
  border: .5px solid #f2f1ed;
}

/* ==========================================================================
   it's not for everyone
   ========================================================================== */

.fit {
  background: #000;
  padding-block: 102px 93px;
}
.fit .display { line-height: 67px; }

.fit__table {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-block-start: 138px;
}

.fit__col { position: relative; }
.fit__col--yes .fit__rows {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.fit__col--yes .fit__rows::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 0;
  background:
    linear-gradient(to bottom right, #18242e 0%, rgba(24, 36, 46, .35) 55%, rgba(24, 36, 46, 0) 85%);
  pointer-events: none;
}
.fit__col--yes .fit__row { position: relative; z-index: 2; }

.fit__colhead {
  height: 67px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 301px;
  /* an RTL block already sits at the right edge — the Figma plates are flush
     to the inner edge of each column, not centred in it */
  border: .5px solid #fff;
  border-block-end: 0;
  font-weight: 700;
  font-size: 32px;
  font-variant-numeric: tabular-nums;
}

.fit__rows {
  border-block-start: .5px solid #fff;
  border-inline: .5px solid #fff;
}

.fit__row {
  display: flex;
  align-items: center;
  gap: 30px;
  height: 74px;
  padding-inline: 21px;
  border-block-end: .5px solid #fff;
}
.fit__row img  { flex: none; width: 16px; }
.fit__row span {
  flex: 1;
  font-weight: 700;
  font-size: 24px;
  line-height: 24.75px;
  text-align: right;
}

/* the "less suited" column simply ends one row early, frame and all */
.fit__col--no .fit__rows { border-inline-start: 0; }
.fit__col--no .fit__row:last-child { border-block-end: .5px solid #fff; }

/* ==========================================================================
   14-day guarantee
   ========================================================================== */

.guarantee {
  height: 351px;
  display: flex;
  align-items: center;
  background-image: url("guarantee/bg.jpg");
  background-size: cover;
  background-position: center 30%;
}
.guarantee__box {
  display: flex;
  align-items: center;
  height: 117px;
  background: rgba(0, 0, 0, .32);
  border: 1px solid #fff;
  backdrop-filter: blur(14px) saturate(.85);
  -webkit-backdrop-filter: blur(14px) saturate(.85);
}
.guarantee__title {
  flex: none;
  padding-inline: 30px 21px;
  border-left: 1px solid #fff;
  white-space: nowrap;
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.guarantee__copy {
  flex: 1;
  padding-inline: 27px 24px;
  font-weight: 700;
  /* 32px in the Figma — Heebo runs wider than Narkiss Yair, so this is nudged
     down to hold the line. Restore 32px once the Adobe kit serves Hebrew. */
  font-size: 28px;
  line-height: 31px;
  text-align: right;
}

/* ==========================================================================
   plans
   ========================================================================== */

.plans {
  padding-block: 49px 111px;
  background: linear-gradient(to bottom, #000, var(--navy));
}
.plans .display { line-height: 67px; }
.plans .tag     { color: var(--cream); }

.plans__grid {
  display: grid;
  grid-template-columns: repeat(2, 589px);
  justify-content: center;
  gap: 30px;
  margin-block-start: 53px;
}

.plan {
  position: relative;
  /* the 799px floor the Figma carried was sized around the price block. With
     that gone the taller card sets the height and the grid stretches the other
     to match, which is what keeps the two feet on one line. */
  /* the foot is absolutely placed 44px up and stands 55 tall, so the flow copy
     has to stop clear of it with air to spare */
  padding: 27px 43px 132px;
  border: 1px solid #fff;
}
.plan--standard {
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 4px 3px rgba(255, 255, 255, .25);
}
.plan--premium { background: #000; }

.plan__name {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 2.64px;
  text-transform: uppercase;
  direction: ltr;
  color: #fff;
}

.plan__note {
  margin-block-start: 24px;
  font-weight: 700;
  font-size: 32px;
  line-height: 36.4px;
  color: var(--cream);
  text-align: right;
}
.plan__adds {
  margin-block-start: 24px;
  font-weight: 700;
  font-size: 24px;
  color: var(--blue);
  text-align: right;
}

.plan__list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--chalk);
}
.plan__list li {
  padding-block: 13px;
  border-block-end: 1px solid var(--chalk);
  font-weight: 700;
  font-size: 24px;
  text-align: right;
}
.plan__list li:last-child { border-block-end: 0; }
.plan--premium .plan__list       { border-block-start-color: var(--text-faint); }
.plan--premium .plan__list li    { border-block-end-color: var(--text-faint); }

.plan__foot {
  position: absolute;
  inset-block-end: 44px;
  inset-inline: 43px;
}
.plan__gate {
  display: grid;
  place-items: center;
  min-height: 55px;
  padding: 8px 9px;
  border: 1px solid var(--blue);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1.33px;
  text-align: center;
}

/* ==========================================================================
   join the squad — the lead form the plans now point at
   ========================================================================== */

.join {
  padding-block: 30px 96px;
}
.join .display { line-height: 67px; }
.join .tag     { color: var(--cream); }

/* label and heading share a centre line here rather than a top edge */
.join__head { align-items: center; }

.join__grid {
  display: grid;
  /* RTL: column 1 is the right-hand one — copy right, form left */
  grid-template-columns: minmax(0, 1fr) 719px;
  gap: 40px;
  margin-block-start: 62px;
}

.join__lede {
  font-weight: 700;
  font-size: 52px;
  line-height: 60px;
  text-align: right;
  color: #fff;
}

/* ---- form ---------------------------------------------------------------- */
.join__form {
  display: grid;
  align-content: start;
  gap: 31px;
}

/* the index sits on the outer edge, the label just inside it */
.join__label {
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* RTL: hugs the right edge */
  gap: 9px;
  min-height: 27px;
}
.join__label span {
  font-weight: 700;
  font-size: 20px;
  line-height: 27px;
  color: #fff;
}
.join__no {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 15px;
  font-style: normal;
  letter-spacing: 1.33px;
  color: #fff;
  direction: ltr;
}
.join__req {
  font-style: normal;
  color: #ff3b30;
}

/* a rule rather than a box — the field is the line under it */
.join__field input {
  display: block;
  width: 100%;
  height: 37px;
  margin-block-start: 8px;
  padding: 0 2px 6px;
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--chalk);
  border-radius: 0;
  color: #fff;
  font-family: var(--f-he);
  font-weight: 700;
  font-size: 18px;
  text-align: right;
  transition: border-color var(--t-fast) var(--ease);
}
.join__field input:focus { border-block-end-color: var(--accent); }

.join__foot {
  display: grid;
  gap: 20px;
}

.join__consent {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;   /* RTL: the box hugs the right edge */
  gap: 8px;
  cursor: pointer;
}
.join__consent input {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 3px 0 0;
  accent-color: var(--accent);
}
.join__consent span {
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: #fff;
}
.join__policy {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn-join.join__submit { height: 58px; }
.btn-join.join__submit:disabled { cursor: progress; opacity: .7; }

.join__status {
  min-height: 22px;
  font-weight: 700;
  font-size: 17px;
  line-height: 22px;
  text-align: right;
  color: var(--cream);
}
.join__status.is-error { color: #ff8a6a; }

.join__done {
  align-self: start;
  padding: 28px 20px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: right;
}
.join__done-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 44px;
  text-transform: uppercase;
  color: #a0c6d5;
}
.join__done-copy {
  margin-block-start: 14px;
  font-weight: 700;
  font-size: 20px;
  line-height: 27px;
  color: var(--cream);
}

/* ==========================================================================
   legal documents — /privacy and /terms
   Long-form Hebrew running text, which the rest of the site has none of. One
   measure (`--doc-measure`) holds every block to a readable line length and
   everything else hangs off the right edge of it.
   ========================================================================== */

.doc {
  --doc-measure: 820px;
  padding-block: 20px 96px;
  background: var(--bg);
}
.doc__shell { max-width: 1100px; }

.doc__mark {
  display: block;
  width: 60px;
  height: 27px;
  margin-inline: auto;
}

/* ---- masthead ------------------------------------------------------------ */
.doc__head {
  max-width: var(--doc-measure);
  margin-block-start: 72px;
  padding-block-end: 34px;
  border-block-end: 1px solid var(--line);
}
.doc__head .tag { color: var(--chalk); }

.doc__title {
  margin-block-start: 10px;
  font-size: 64px;
  line-height: 1.04;
  color: var(--chalk);
}
.doc__lede {
  margin-block-start: 16px;
  font-weight: 700;
  font-size: 22px;
  line-height: 30px;
  color: var(--cream);
}
.doc__stamp {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;   /* RTL: the pair hugs the right edge */
  gap: 10px 26px;
  margin-block-start: 18px;
  font-weight: 700;
  font-size: 16px;
  color: var(--text-dim);
}
.doc__stamp bdi {
  font-family: var(--f-mono);
  font-size: 15px;
  letter-spacing: 1.1px;
}

/* ---- running text -------------------------------------------------------- */
.doc__intro,
.doc__body { max-width: var(--doc-measure); }

.doc__intro { margin-block-start: 34px; }

.doc p {
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: var(--chalk);
  text-align: right;
}
.doc p + p,
.doc ul + p,
.doc dl + p { margin-block-start: 14px; }

.doc b { font-weight: 700; color: #fff; }

.doc a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease);
}
.doc a:hover { color: #fff; }

.doc ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.doc ul li {
  position: relative;
  padding-inline-start: 20px;
  font-size: 18px;
  line-height: 30px;
  color: var(--chalk);
  text-align: right;
}
.doc ul li + li { margin-block-start: 6px; }
/* a rule rather than a bullet, to match the plan lists' language */
.doc ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 14px;
  width: 9px;
  height: 1px;
  background: var(--accent-deep);
}

/* ---- name / value pairs -------------------------------------------------- */
.doc__facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 18px;
  margin: 16px 0 0;
  padding: 20px 22px;
  background: var(--bg-off);
  border: 1px solid var(--line);
}
.doc__facts dt {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-dim);
  white-space: nowrap;
}
.doc__facts dd {
  margin: 0;
  font-weight: 700;
  font-size: 17px;
  line-height: 24px;
  color: #fff;
}

/* ---- contents ------------------------------------------------------------ */
.doc__toc {
  max-width: var(--doc-measure);
  margin-block-start: 44px;
  padding: 26px 24px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-strong);
}
.doc__toc-title {
  font-weight: 700;
  font-size: 17px;
  color: var(--text-dim);
}
.doc__toc ol {
  columns: 2;
  column-gap: 34px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.doc__toc li {
  break-inside: avoid;
  margin-block-end: 7px;
}
.doc__toc a {
  display: flex;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: var(--chalk);
  text-decoration: none;
}
.doc__toc a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.doc__toc-n {
  flex: none;
  min-width: 22px;
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--text-dimmer);
  direction: ltr;
}

/* ---- sections ------------------------------------------------------------ */
.doc__body { margin-block-start: 12px; }

.doc__sec { padding-block-start: 44px; }

.doc__h {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 16px;
  font-weight: 700;
  font-size: 28px;
  line-height: 34px;
  color: #fff;
}
.doc__h-n {
  flex: none;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 1.2px;
  color: var(--accent);
  direction: ltr;
}

.doc__sub {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 26px 0 10px;
  font-weight: 700;
  font-size: 20px;
  line-height: 27px;
  color: var(--blue);
}
.doc__sub-n {
  flex: none;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1.1px;
  color: var(--text-dim);
  direction: ltr;
}
/* the first sub in a section already has the heading's air above it */
.doc__h + .doc__sub { margin-block-start: 0; }

/* ---- foot ---------------------------------------------------------------- */
.doc__sign {
  margin-block-start: 60px;
  padding-block-start: 26px;
  border-block-start: 1px solid var(--line);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--text-dim);
}

.doc__also { margin-block-start: 26px; }
.doc__also-link {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding-inline: 20px;
  border: 1px solid var(--line-strong);
  font-weight: 700;
  font-size: 18px;
  color: #fff !important;
  text-decoration: none !important;
  transition: background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.doc__also-link:hover {
  background: rgba(255, 255, 255, .06);
  border-color: #fff;
}

@media (max-width: 900px) {
  .doc          { padding-block-end: 64px; }
  .doc__head    { margin-block-start: 48px; }
  .doc__title   { font-size: clamp(38px, 7vw, 64px); }
  .doc__lede    { font-size: 19px; line-height: 27px; }
  .doc__toc ol  { columns: 1; }
}

@media (max-width: 640px) {
  .doc__title   { font-size: 34px; line-height: 1.06; }
  .doc p,
  .doc ul li    { font-size: 17px; line-height: 28px; }
  .doc__h       { font-size: 23px; line-height: 29px; gap: 9px; }
  .doc__sub     { font-size: 18px; }
  .doc__sec     { padding-block-start: 34px; }
  .doc__toc     { padding: 20px 16px; }
  .doc__facts   { grid-template-columns: 1fr; gap: 2px; padding: 16px; }
  .doc__facts dd + dt { margin-block-start: 12px; }
  .doc__also-link { width: 100%; justify-content: center; }
}

/* ==========================================================================
   for producers, by producers
   ========================================================================== */

.band {
  height: 159px;
  background: var(--orange);
}
.band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.band__mark   { width: 502px; height: 54px; }
.band__rights { display: flex; align-items: center; gap: 23px; }
.band__rights .globe { width: 35px; height: 35px; }
.band__rights .txt   { width: 322px; height: 23px; }

/* ==========================================================================
   in their words
   ========================================================================== */

.words {
  background: #000;
  padding-block: 100px 78px;
}
.words .display { line-height: 82.56px; }

.words__rail {
  position: relative;
  margin-block-start: 47px;
  padding-inline: 33px;
}
/* pinned to physical sides so bidi can never flip them */
.words__arrow {
  position: absolute;
  top: 50%;
  width: 21px;
  height: 21px;
  margin-block-start: -10px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: .8;
}
.words__arrow {
  transition: opacity var(--t-fast) var(--ease), transform var(--t-mid) var(--ease);
}
.words__arrow:hover { opacity: 1; transform: scale(1.14); }
.words__arrow:active { transform: scale(.92); transition-duration: .09s; }
/* both exported chevrons point down — a quarter turn each way aims them */
.words__arrow img { width: 21px; height: 12px; }
.words__arrow--left  { left: 0; }
.words__arrow--left img  { transform: rotate(90deg); }
.words__arrow--right { right: 0; }
.words__arrow--right img { transform: rotate(-90deg); }

.words__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 292px;
  gap: 16px;
  justify-content: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* the loop writes this rail's position frame by frame — a smooth scroll of
     the browser's own would sit on top of that run and fight it */
  scroll-behavior: auto;
}
.words__track::-webkit-scrollbar { display: none; }

/* The track's column is the only thing that decides how wide a clip is. It
   used to carry its own 292px as well, and the moment the rail narrowed its
   columns the clip outgrew them — it covered the gap and then some of the
   next column, which is why the films ran into each other. */
.clip {
  position: relative;
  align-self: start;
  width: 100%;
  aspect-ratio: 292 / 439;
  scroll-snap-align: center;
  overflow: hidden;
}
.clip .shot {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

/* every clip runs muted on its own; the whole frame is the sound toggle and
   the speaker mark is the invitation, standing down on the one that is loud */
.clip__play {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.clip .sound {
  position: absolute;
  bottom: 22px;
  right: 19px;
  width: 23px;
  height: 18px;
  transition: opacity var(--t-mid) var(--ease);
}
.clip.has-sound .sound { opacity: 0; }

.discord {
  width: 786px;
  margin: 86px auto 0;
}
.discord__stage {
  position: relative;
  height: 316px;
  background: var(--surface);
}
.discord__card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  /* 316 - 24 - 21(meta) - 22 = 249, exactly the tallest shot */
  padding: 24px 24px 22px;
  opacity: 0;
  visibility: hidden;
  /* visibility has to wait out the fade or the outgoing card vanishes on the
     first frame and the change reads as a cut instead of a turn */
  transition: opacity var(--t-slow) var(--ease), visibility 0s linear var(--t-slow);
}
.discord__card.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-slow) var(--ease), visibility 0s;
}
.discord__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 1.52px;
  direction: ltr;
}
.discord__meta .who   { color: var(--slate); }
.discord__meta .count { color: var(--text-faint); }
.discord__shot {
  align-self: center;
  width: var(--w, 675px);
  max-width: 100%;
  margin-inline: auto;
}
.discord__foot {
  position: relative;
  height: 40px;
  margin-block-start: 15px;
}
.discord__nav {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  direction: ltr;   /* DOM order == left-to-right, whatever the page direction */
  gap: 10px;
}
.discord__nav button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease);
}
.discord__nav button:hover { background: #16191c; border-color: var(--text-faint); transform: translateY(-2px); }
.discord__nav button:active { transform: translateY(0) scale(.94); transition-duration: .09s; }
.discord__nav img { width: 13px; height: 11px; }
.discord__rule {
  position: absolute;
  top: 19px;
  left: 0;
  width: 686px;
  height: 2px;
  background: var(--line);
}

.words__cta { margin: 34px auto 0; }

/* ==========================================================================
   triangle
   ========================================================================== */

.triangle {
  padding-block: 40px 106px;
  background: linear-gradient(to bottom, var(--navy), #000);
}
.triangle .display { line-height: 82.56px; color: #fff; }
.triangle .tag     { color: #fff; }

.triangle__grid {
  display: grid;
  grid-template-columns: 492px minmax(0, 1fr);   /* RTL: photo right, facts left */
  gap: 9px;                                      /* 799 + 9 + 492 = 1300 */
  margin-block-start: 31px;
}
.triangle__photo {
  /* Top and bottom flush with the table's own rules. It used to be cut 26px
     longer than the table and pinned to a 619 floor, so its bottom edge sat
     below the closing rule and nothing in the row lined up. */
  align-self: stretch;
  width: 100%;
  /* height:0 keeps the frame's own 984x1238 out of the row measurement — it
     used to set the row, stretch the table past its last band and leave a
     strip of nothing under the closing line. min-height then takes the row. */
  height: 0;
  min-height: 100%;
  object-fit: cover;
  border: .5px solid #f2f1ed;
}
/* the phone swaps in a landscape frame through <picture>; contents keeps the
   <img> itself as the grid item, so every rule above still applies to it.
   The <source> has to be dismissed explicitly — once the picture stops
   generating a box, the source starts claiming a grid cell of its own. */
.triangle__grid picture { display: contents; }
.triangle__grid picture source { display: none; }

.triangle__facts {
  /* every rule in this block is the same hairline — the frame used to be 2px
     and the inner rules 1.5, which read as three weights in one small table */
  border-block: 1px solid var(--line-warm);
}

.awards {
  display: grid;
  grid-template-columns: 248px 295px 256px;   /* RTL: ekum, arranger, galgalatz */
  min-height: 176px;
  border-block-end: 1px solid var(--line-warm);
}
.award {
  position: relative;
  /* the mark and its line sit as one group in the middle of the cell — they
     were pinned to the top with all the slack left under them */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 12px;
  text-align: center;
  font-weight: 700;
  font-size: 30px;
  line-height: 31px;
}
/* the dividers are inset segments in the Figma, not full-height borders */
.award::before,
.fact::before {
  content: "";
  position: absolute;
  left: 0;
  width: 1px;
  background: var(--line-warm);
}
.award::before { top: 12px; bottom: 12px; }
.award img { width: 22px; height: 21px; margin: 0 auto 17px; }

.fact {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* a <dl> carries a 1em block margin by default, which opened an 18px gap
     under every rule in the table and left a strip of nothing under the last
     band — the rules stopped answering the photo beside them */
  margin: 0;
  /* The reading edge stays where the rules end. An earlier pass set it in to
     22px for air against the photo, which left every line of copy short of the
     rule above and below it — the one thing the block cannot afford. */
  padding: 20px 5px 20px 17px;
  border-block-end: 1px solid var(--line-warm);
  text-align: right;
}
.fact::before { top: 12px; bottom: 12px; }
.fact:last-child { border-block-end: 0; }
/* the Figma bands. The last two carry the same head-and-one-line pair, and in
   the design they stand the same height — the 125 the third one used to hold
   left a strip of nothing under the closing line and ran the photo long. */
.fact:nth-of-type(1) { min-height: 186px; }
.fact:nth-of-type(2) { min-height: 105px; }
.fact:nth-of-type(3) { min-height: 105px; }
.fact dt {
  font-weight: 700;
  font-size: 30px;
  line-height: 31px;
}
.fact dd {
  margin: 12px 0 0;
  font-weight: 700;
  font-size: 25px;
  line-height: 26px;
}
.fact--tight dd { font-size: 24px; }

/* ==========================================================================
   faq
   ========================================================================== */

.faq {
  background: #000;
  padding-block: 24px 67px;
}
.faq .display { line-height: 68.64px; color: var(--cream); }

.faq__list { margin-block-start: 109px; }

.faq details {
  border-block-start: 1px solid var(--line-soft);
}
.faq details:first-child      { border-block-start-color: var(--line); }
.faq details:last-child       { border-block-end: 1px solid var(--line-soft); }

.faq summary {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 30px;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary > span:first-child {
  flex: 1;
  font-weight: 700;
  font-size: 26px;
  line-height: 33.8px;
  letter-spacing: -.26px;
  color: var(--cream);
  text-align: right;
}
.faq__icon {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
}
.faq__icon img { width: 13px; height: 13px; transition: transform var(--t-slow) var(--ease); }
.faq details[open] .faq__icon img { transform: rotate(45deg); }

.faq details > p {
  padding-block-end: 38px;
  margin-inline-end: auto;
  max-width: 570px;
  font-family: var(--f-he);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  color: #fff;
  text-align: right;
}

/* ==========================================================================
   closer
   ========================================================================== */

.closer {
  height: 590px;
  display: flex;
  align-items: center;
  background-image: url("closer/bg.jpg");
  background-size: cover;
  background-position: center;
}
.closer__box {
  position: relative;
  height: 390px;
  padding: 44px 41px 0;
  background: rgba(0, 0, 0, .22);
  border: 1px solid #fff;
  backdrop-filter: blur(16px) saturate(.85);
  -webkit-backdrop-filter: blur(16px) saturate(.85);
}
.closer__title {
  font-weight: 700;
  font-size: 128px;
  line-height: 106px;
  text-align: right;
}
.closer__sub {
  margin-block-start: 18px;
  font-weight: 700;
  font-size: 32px;
  line-height: 31px;
  text-align: right;
}
.closer__box .btn-join {
  position: absolute;
  bottom: 28px;
  left: 36px;
}

/* ==========================================================================
   footer
   ========================================================================== */

.footer {
  padding-block: 44px 30px;
  background: var(--bg);
  border-block-start: 1px solid var(--line);
}
.footer__inner {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: 62px;
}

/* ---- mark and socials ---------------------------------------------------- */
/* the page is RTL but the block reads mark-left, socials-right, so the row
   is reversed rather than the whole footer being flipped to LTR */
.footer__top {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.footer__mark {
  width: min(760px, 56%);
  height: auto;
}
.footer__social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding-block-start: 6px;
  direction: ltr;
}
.footer__social a {
  font-family: var(--f-mono);
  font-size: 20px;
  letter-spacing: 1.47px;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color var(--t-fast) var(--ease);
}
.footer__social a:hover { color: #fff; }

/* ---- documents and copyright --------------------------------------------- */
.footer__base {
  display: flex;
  flex-direction: row-reverse;   /* documents left, copyright right */
  align-items: center;
  justify-content: space-between;
  gap: 18px 30px;
  flex-wrap: wrap;
  margin-block-start: 46px;
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
}
.footer__legal a,
.footer__prefs {
  font-family: var(--f-he);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text-dimmer);
  transition: color var(--t-fast) var(--ease);
}
.footer__legal a:hover,
.footer__prefs:hover { color: #fff; }

.footer__prefs {
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.footer__copy {
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: 1.52px;
  text-transform: uppercase;
  color: var(--text-ghost);
  direction: ltr;
}

/* ---- phone: the whole block centres and the documents get a rule above ---- */
@media (max-width: 640px) {
  .footer         { padding-block: 34px 26px; }
  .footer__top    { flex-direction: column; align-items: center; gap: 30px; }
  .footer__mark   { width: min(300px, 78%); }
  .footer__social { align-items: center; gap: 16px; padding-block-start: 0; }

  .footer__base {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-block-start: 30px;
    padding-block-start: 22px;
    border-block-start: 1px solid var(--line);
  }
  .footer__legal { justify-content: center; gap: 6px 16px; }
  .footer__legal a,
  .footer__prefs { font-size: 14px; }
  .footer__copy  { font-size: 14px; }
}

/* ==========================================================================
   responsive — the Figma covers desktop only; below 1440 the fixed
   measurements collapse to a single readable column.
   ========================================================================== */

@media (max-width: 1439px) {
  :root { --gutter: 40px; }

  .display        { font-size: clamp(44px, 5.6vw, 75px); line-height: 1.08 !important; }
  .tag            { font-size: clamp(20px, 2.4vw, 32px); }

  .hero           { height: clamp(560px, 62vw, 880px); }
  .hero__lockup   { inset-block-start: 46%; width: min(653px, 62vw); }
  .hero__wordmark { width: min(551px, 52vw); height: auto; }
  .hero__bytriangle { inset-block-start: 78%; inset-inline-start: 84%; width: min(102px, 10vw); height: auto; }
  .hero__tagline  { inset-block-start: 52%; width: min(488px, 34vw); font-size: clamp(20px, 2.7vw, 36px); }
  .hero__cta      { inset-block-start: auto; inset-block-end: 14%; }

  .bootcamp__lede { width: min(700px, 62vw); font-size: clamp(18px, 1.9vw, 25px); line-height: 1.35; }
  .bootcamp__lede p + p { margin-block-start: 1.35em; }

  .squad__grid    { grid-template-columns: 1fr 1fr; }
  .squad__photo   { grid-column: 1 / -1; margin-block-start: 40px; }
  .squad__lead    { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15; }
  /* below the full frame the column is a share of the page, not 355px, and
     hand-set breaks in it land wherever they please */
  .squad__break   { display: none; }
  /* the award cells are 248/295/256 only at the full frame; anywhere narrower
     a hand-set break lands mid-phrase */
  .award__break   { display: none; }
  /* same for the credits list: its four lines are set for the 777px measure */
  .fact__break    { display: none; }
  .squad__body    { font-size: clamp(17px, 1.8vw, 25px); line-height: 1.25; }

  .get__grid      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .get__grid > .perk:nth-of-type(1),
  .get__grid > .perk:nth-of-type(2),
  .get__grid > .perk:nth-of-type(3),
  .get__grid > .perk:nth-of-type(4),
  .get__grid > .perk:nth-of-type(5),
  .get__grid > .get__photo { grid-area: auto; }
  .get__head { grid-area: auto / 1 / auto / -1; padding-block: 0 8px; }
  .get__grid > :nth-child(3) { grid-column-start: auto; }
  .get__sub       { margin-block-start: 40px; }

  .fit__colhead   { width: 100%; font-size: clamp(20px, 2.3vw, 32px); }
  .fit__row       { height: auto; min-height: 74px; padding-block: 14px; }
  .fit__row span  { font-size: clamp(16px, 1.7vw, 24px); line-height: 1.25; }
  .fit__table     { margin-block-start: 70px; }

  .guarantee__title { width: 40%; font-size: clamp(28px, 4vw, 64px); }
  .guarantee__copy  { font-size: clamp(16px, 2vw, 32px); line-height: 1.2; }

  .join           { padding-block: 26px 80px; }
  .join__grid     {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 32px;
    margin-block-start: 48px;
  }
  .join__lede     { font-size: clamp(28px, 4.2vw, 52px); line-height: 1.16; }

  .plans__grid    { grid-template-columns: 1fr 1fr; gap: 20px; }
  .plan           { min-height: 0; padding: 27px 28px 132px; }
  .plan__list li  { font-size: clamp(16px, 1.7vw, 24px); }
  .plan__note     { font-size: clamp(20px, 2.2vw, 32px); line-height: 1.15; }

  .words__track   { justify-content: flex-start; }


  .closer         { height: auto; padding-block: 80px; }
  .closer__box    { height: auto; padding-block-end: 140px; }
  .closer__title  { font-size: clamp(52px, 8.5vw, 128px); line-height: 1.02; }
  .closer__sub    { font-size: clamp(18px, 2.2vw, 32px); line-height: 1.2; }

  .footer__inner  { padding-inline: var(--gutter); }
}

/* Four days across stops working well above the phone breakpoint: by 1240px
   each card is under 280 wide and the copy panel can no longer hold its lines.
   Two up is the next honest step, and the pair is held to a sane measure so
   the cards do not balloon to the width of the screen. */
@media (max-width: 1240px) {
  .days {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 760px;
    margin-inline: auto;
  }
}

@media (max-width: 900px) {
  :root { --gutter: 20px; }

  .nav   { display: none; }
  /* Figma 4090:1440 / 4090:1444 — the closed burger is a 46px bordered square;
     opening swaps the glyph for a cross and drops the panel from that corner */
  .menu  { position: relative; display: block; margin-inline-start: auto; }
  .menu summary {
    position: relative;
    z-index: 2;
    list-style: none;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border: 1px solid #fff;
    cursor: pointer;
  }
  .menu summary::-webkit-details-marker { display: none; }
  .menu__burger { width: 16px; height: 12px; }
  .menu__close  { display: none; width: 17px; height: 17px; }
  .menu[open] summary        { border-color: transparent; }
  .menu[open] .menu__burger  { display: none; }
  .menu[open] .menu__close   { display: block; }

  /* The open panel carries its own mark (.menu__mark), inset 15px from its
     edge — so the masthead's real logo, which sits flush with the shell,
     showed as a sliver poking out past the panel's corner. It steps aside
     while the panel is up and the panel's copy stands in for it. */
  .masthead.is-menu-open .masthead__logo,
  .masthead__inner:has(.menu[open]) .masthead__logo {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-fast) var(--ease);
  }

  .menu nav {
    position: absolute;
    top: 0;
    left: 0;                               /* the panel hangs off the burger */
    z-index: 1;
    width: 354px;
    max-width: calc(100vw - 2 * var(--gutter));
    padding: 51px 15px 0;
    display: grid;
    background: rgba(10, 10, 10, .55);
    border: 1px solid #fff;
    /* the Figma fill is black 20%; over the hero photo that is unreadable, so
       the panel leans on the same glass treatment as the other panels */
    backdrop-filter: blur(18px) saturate(.9);
    -webkit-backdrop-filter: blur(18px) saturate(.9);
    text-align: left;
  }
  .menu__mark {
    position: absolute;
    top: 14px;
    right: 15px;
    width: 60px; height: 27px;
  }
  .menu nav a {
    padding: 10px 8px 12px;
    border-block-start: 1px solid #fff;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 1.1px;
    line-height: 19px;
    text-transform: uppercase;
    direction: ltr;
  }
  .menu nav a:last-child { padding-block-end: 24px; }

  .btn-join      { width: 100%; max-width: 315px; }
  /* stacked, but each half keeps the side it sits on at desktop */
  .sec-head      { flex-direction: column; align-items: stretch; gap: 14px; }
  .sec-head .tag     { text-align: right; }
  .sec-head .display { text-align: left; }
  .sec-head--center .tag,
  .sec-head--center .display { text-align: center; }

  .bootcamp      { padding-block: 40px 60px; }
  .bootcamp__lede { width: 100%; margin-block-start: 32px; }

  .access        { height: auto; padding-block: 28px; }
  .access__inner { flex-direction: column-reverse; gap: 22px; padding-block-start: 0; }
  .access__lockup { width: 100%; max-width: 510px; height: auto; }

  .squad         { padding-block: 46px; }
  .squad__grid   { grid-template-columns: 1fr; border-block-start: 0; }
  .squad__lead   { padding: 0 0 26px; border: 0; border-block-end: 1px solid #fff; }
  .squad__body   { padding: 26px 0 0; }
  .squad__bar    { flex-direction: row-reverse; height: auto; padding: 16px; gap: 16px; }
  .squad__bar .btn-join { margin: 0; }

  .get           { padding-block: 46px 60px; }
  .get__head     { grid-area: auto / 1 / auto / -1; padding-block: 0 8px; }
  .get__grid     { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .fit           { padding-block: 46px 60px; }
  .fit__table    { grid-template-columns: 1fr; gap: 34px; }
  .fit__col--yes .fit__rows,
  .fit__col--no  .fit__rows { border-inline: .5px solid #fff; }

  .guarantee     { height: auto; padding-block: 60px; }
  .guarantee__box { flex-direction: column; height: auto; padding: 22px; gap: 14px; }
  .guarantee__title { width: 100%; padding: 0; border: 0; }

  .plans         { padding-block: 46px 60px; }
  .plans__grid   { grid-template-columns: 1fr; }

  .join__grid     { grid-template-columns: 1fr; gap: 34px; }
  .join__lede br  { display: none; }

  .band          { height: auto; padding-block: 26px; }
  .band__inner   { flex-direction: column; gap: 20px; }
  .band__mark    { width: 100%; max-width: 502px; height: auto; }
  .band__rights .txt { width: min(322px, 60vw); height: auto; }

  .words         { padding-block: 46px 60px; }
  .words__arrow  { display: none; }
  .words__rail   { padding-inline: 0; }
  .words__track  { grid-auto-columns: 240px; }
  .discord       { width: 100%; }
  .discord__shot { width: 100%; }

  .triangle      { padding-block: 40px 60px; }

  .faq           { padding-block: 40px 60px; }
  .faq__list     { margin-block-start: 50px; }
  .faq summary span { font-size: 20px; line-height: 1.35; }

  .footer        { height: auto; padding-block: 26px; }
  .footer__inner { flex-direction: column-reverse; gap: 18px; text-align: center; }
  .footer__social { flex-wrap: wrap; justify-content: center; gap: 22px; }
}

/* ==========================================================================
   motion — scroll reveals
   Initial states are gated behind .has-js so the page still reads correctly
   if the script never runs, and behind prefers-reduced-motion.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* The picture takes no entrance of its own. It used to open at 1.075 and
     settle back over 1.9 seconds, which put a slow zoom on the film the moment
     it started — the still and the film both carried it, so it could not be
     lifted off one without tearing the crossfade. Now the frame is simply the
     frame, and the film plays. */
  .has-js .hero__lockup,
  .has-js .hero__tagline,
  .has-js .hero__cta,
  .has-js .masthead__inner {
    animation: hero-lift 1100ms cubic-bezier(.16, 1, .3, 1) both;
  }
  .has-js .masthead__inner { animation-delay: 120ms; }
  .has-js .hero__lockup    { animation-delay: 260ms; }
  .has-js .hero__tagline   { animation-delay: 400ms; }
  .has-js .hero__cta       { animation-delay: 540ms; }

  /* Once the copy's entrance has played, site.js takes it over and drives it
     from the scroll position instead. The animations have to be cleared for
     that: a filled animation outranks the inline styles the script writes.
     The picture behind them never had one, so it drifts from the first pixel. */
  .has-js .hero.is-settled .hero__lockup,
  .has-js .hero.is-settled .hero__tagline,
  .has-js .hero.is-settled .hero__cta,
  .has-js .hero.is-settled .hero__globe { animation: none; }

  @keyframes hero-lift {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
  }

  /* the reveal primitives */
  .has-js .rv {
    transition-delay: var(--rv-delay, 0ms);
    will-change: opacity, transform;
  }

  .has-js .rv-up {
    opacity: 0;
    transform: translateY(30px);
    transition-property: opacity, transform;
    transition-duration: 820ms;
    transition-timing-function: cubic-bezier(.16, 1, .3, 1);
  }
  .has-js .rv-up.is-in { opacity: 1; transform: none; }

  /* framed images wipe upward behind a slow settle */
  .has-js .rv-wipe {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: scale(1.07);
    transition-property: opacity, clip-path, transform;
    transition-duration: 700ms, 1100ms, 1400ms;
    transition-timing-function: cubic-bezier(.16, 1, .3, 1);
  }
  .has-js .rv-wipe.is-in {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
  }

  /* once it has played, stop paying for the compositor layer */
  .has-js .rv.is-in { will-change: auto; }

  /* textured sections bring their photo up from black */
  .has-js .tex::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bg-off);
    opacity: 1;
    transition: opacity 1400ms cubic-bezier(.16, 1, .3, 1);
    pointer-events: none;
  }
  .has-js .tex.tex-in::after { opacity: 0; }
}

/* ==========================================================================
   motion — gradient surfaces
   Flat CSS gradients band badly on dark screens. A fine grain layer breaks
   the ramp up, and a very slow drift keeps the surface from reading as dead
   colour. Both sit under the content and are inert to the pointer.
   ========================================================================== */

:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the gradient moves to its own layer so it can breathe without the copy */
.access,
.plans,
.join,
.triangle,
.band {
  position: relative;
  overflow: hidden;      /* the drift layer is oversized on purpose */
  isolation: isolate;
}
.access > .shell,
.plans > .shell,
.join > .shell,
.triangle > .shell,
.band > .shell { position: relative; z-index: 2; }

.access::before,
.plans::before,
.join::before,
.triangle::before {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: 0;
  pointer-events: none;
}
/* the layer overshoots the section by 14%, so the stops are pulled in by the
   same amount — the visible band still spans the full ramp the Figma has */
.access::before   { background: linear-gradient(to bottom, var(--accent-deep) 12%, var(--accent) 88%); }
.plans::before    { background: linear-gradient(to bottom, #000 12%, var(--navy) 88%); }
.join::before     { background: linear-gradient(to bottom, var(--navy) 12%, #000 88%); }
.triangle::before { background: linear-gradient(to bottom, var(--navy) 12%, #000 88%); }

/* the section itself keeps a flat fallback underneath */
.access   { background: var(--accent); }
.plans    { background: var(--navy); }
.join     { background: #000; }
.triangle { background: #000; }

/* grain */
.access::after,
.plans::after,
.join::after,
.triangle::after,
.band::after,
.fit__col--yes .fit__rows::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--grain);
  background-size: 140px 140px;
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
}


@media (prefers-reduced-motion: no-preference) {
  .access::before,
  .plans::before,
  .join::before,
  .triangle::before {
    animation: gradient-drift 34s ease-in-out infinite alternate;
  }
  /* the accent wash in the fit table breathes on the same clock */
  .fit__col--yes .fit__rows::before {
    animation: wash-breathe 26s ease-in-out infinite alternate;
  }

  @keyframes gradient-drift {
    from { transform: translate3d(-1.2%, 0.8%, 0) scale(1.02); }
    to   { transform: translate3d(1.2%, -0.8%, 0) scale(1.07); }
  }
  @keyframes wash-breathe {
    from { transform: translate3d(-2%, 1.5%, 0) scale(1.02); }
    to   { transform: translate3d(2%, -1.5%, 0) scale(1.1); }
  }

  /* the gradient blooms in as the section arrives */
  .has-js .rv-glow::before {
    opacity: 0;
    transition: opacity 1200ms cubic-bezier(.16, 1, .3, 1);
  }
  .has-js .rv-glow.is-in::before { opacity: 1; }
}

/* ==========================================================================
   welcome / thank-you page
   Source: Figma "SQUAD WEBSITE (Copy)" node 4090:617 (THANK YOU PAGE, 1440px)
   and node 4090:1207 (mobile, 390px). The phone rules live at the foot of
   this block rather than in the shared phone block, so the whole page reads
   in one place.
   ========================================================================== */

.welcome {
  position: relative;
  min-height: 1091px;
  padding-block: 20px 60px;
  background-image: url("welcome/bg.jpg");
  background-size: cover;
  background-position: center 22%;
  overflow: hidden;
}
.welcome__mark {
  display: block;
  width: 60px;
  height: 27px;
  margin-inline: auto;
}
.welcome__grid {
  display: grid;
  /* RTL: column 1 is the right-hand one — copy right, form left */
  grid-template-columns: minmax(0, 1fr) 553px;
  gap: 40px;
  margin-block-start: 92px;
}

/* ---- right column ------------------------------------------------------- */
.welcome__intro { justify-self: stretch; }

.welcome__stamp {
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* RTL: hugs the right edge */
  gap: 9px;
  width: max-content;
  margin: 8px 0 0 auto;          /* auto on the left pushes it right */
  padding: 6px 11px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1.52px;
  white-space: nowrap;
}
.welcome__stamp img { width: 21px; height: 21px; }

.welcome__title {
  margin-block-start: 18px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 75px;
  line-height: 62px;
  text-transform: uppercase;
  color: #a0c6d5;
  direction: ltr;
  text-align: right;
}
.welcome__lede {
  margin-block-start: 18px;
  font-weight: 700;
  font-size: 26px;
  line-height: 36.4px;
  color: var(--cream);
  text-align: right;
}

/* ---- form --------------------------------------------------------------- */
.welcome__form {
  display: grid;
  grid-template-columns: 274px 274px;   /* RTL: age, then DAW */
  gap: 8px 5px;
  width: 553px;
}
.field { grid-column: 1 / -1; }

.field {
  padding: 20px;
  background: rgba(10, 10, 10, .2);
  border: .5px solid #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.field--half { grid-column: auto; }

/* the index sits on the outer edge, the label just inside it */
.field__label {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-height: 27px;
}
.field__label span {
  font-weight: 700;
  font-size: 20px;
  line-height: 27px;
  color: #fff;
  white-space: nowrap;
}
.field__no {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1.33px;
  color: #fff;
  direction: ltr;
}
.field__hint {
  font-weight: 700;
  font-size: 17px;
  line-height: 20px;
  text-align: right;
}

.field input,
.field textarea {
  display: block;
  width: calc(100% - 13px);
  margin: 11px 1px 0 12px;
  padding: 12px 14px;
  background: #0d1114;
  border: 0;
  color: #fff;
  font-family: var(--f-he);
  font-weight: 700;
  font-size: 18px;
  text-align: right;
  border-radius: 0;
}
.field input { height: 48px; }
.field textarea { height: 80px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder {
  font-family: var(--f-mono);
  font-weight: 300;
  font-size: 15px;
  color: var(--text-ghost);
  direction: ltr;
}
.field input:not(.ph-he) { direction: ltr; }

/* the mono carries no Hebrew, so a Hebrew example fell through to whatever the
   system had and read left to right on top of it. Hebrew placeholders take the
   page's own Hebrew face, at the size the field's own text is set in. */
.field input.ph-he::placeholder {
  font-family: var(--f-he);
  font-weight: 400;
  font-size: 17px;
  direction: rtl;
}
.field input:focus,
.field textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the Figma sets the label block off-centre inside the button rather than
   centring it — 18px of air on the left, 167 on the right */
.btn-join.welcome__submit {
  grid-column: 1 / -1;
  flex-direction: row-reverse;   /* arrow left, label right */
  justify-content: flex-end;
  gap: 10px;
  width: 553px;
  max-width: none;
  height: 44px;
  padding: 0 167px 0 18px;
  margin-block-start: 0;
  border-width: .5px;
  cursor: pointer;
  font: inherit;
}
.btn-join.welcome__submit img  { width: 23px; height: 22px; }
.btn-join.welcome__submit span {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 23px;
  letter-spacing: 1.32px;
  text-transform: uppercase;
  direction: ltr;
}

/* ---- submission states ---------------------------------------------------- */
/* .welcome__form sets display:grid, which outranks the UA rule for [hidden] */
[hidden] { display: none !important; }

.welcome__status {
  grid-column: 1 / -1;
  margin-block-start: 4px;
  min-height: 22px;
  font-weight: 700;
  font-size: 17px;
  line-height: 22px;
  text-align: right;
  color: var(--cream);
}
.welcome__status.is-error { color: #ff8a6a; }

.btn-join.welcome__submit:disabled { cursor: progress; opacity: .7; }

.welcome__done {
  padding: 28px 20px;
  background: rgba(10, 10, 10, .2);
  border: .5px solid #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: right;
}
.welcome__done-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 44px;
  text-transform: uppercase;
  color: #a0c6d5;
}
.welcome__done-copy {
  margin-block-start: 14px;
  font-weight: 700;
  font-size: 20px;
  line-height: 27px;
  color: var(--cream);
}

/* ---- laptop and down: the two columns stack -------------------------------- */
@media (max-width: 1439px) {
  /* once the form is replaced by the thank-you panel the page gets short —
     hold the photo to the viewport so the footer never floats mid-screen */
  .welcome              { min-height: 100vh; min-height: 100svh; }
  .welcome__grid        { grid-template-columns: 1fr; gap: 48px; margin-block-start: 56px; }
  .welcome__title       { font-size: clamp(45px, 5.4vw, 75px); line-height: 1.05; }
  .welcome__lede        { font-size: clamp(18px, 2.2vw, 26px); line-height: 1.4; }
  .welcome__form            { width: 100%; }
  .btn-join.welcome__submit { width: 100%; padding-inline: 18px; justify-content: center; }
}

/* ---- phone — Figma 4135:340 ------------------------------------------------
   The phone frame drops the framed panel the desktop wraps each field in. A
   field here is a label row sitting straight on the photograph with a dark
   bar under it, so the form reads as a stack of inputs rather than a stack of
   cards. Nothing on this page is centred: the display line runs from the left
   because it is set LTR, the Hebrew copy hangs off the right margin.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .welcome {
    padding-block: 22px 77px;
    /* Figma 4090:1231 crops the same shoot much tighter than the desktop
       frame does; bg-mobile.jpg is that window, so cover reproduces it */
    background-image: url("welcome/bg-mobile.jpg");
    background-position: center;
  }
  .welcome__grid  { gap: 0; margin-block-start: 46px; }

  /* the icon sets the height of the badge in the Figma, so the Hebrew line
     box has to be pinned to it rather than left at the face's own leading */
  .welcome__stamp {
    margin-block-start: 0;
    line-height: 21px;
  }

  .welcome__title {
    margin-block-start: 37px;
    font-size: 41px;             /* 45 in the Figma; Archivo Black runs wider */
    line-height: 39px;
    text-align: left;            /* the face is LTR, so it hangs off the left */
  }
  .welcome__lede {
    margin-block-start: 23px;
    font-size: 18px;
    line-height: 36.4px;   /* the 1024 tier relaxes this to 1.4; 4135:340 does not */
  }

  /* the shell gutter is 16px; the Figma insets the form a further 13px */
  .welcome__form {
    grid-template-columns: 1fr;
    gap: 23px;
    margin: 28px 13px 0;
    width: auto;
  }
  .field--half { grid-column: 1 / -1; }

  /* no card, no outline — the label sits on the photograph */
  .field {
    padding: 0;
    background: none;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .field__label       { min-height: 22px; }
  .field__label span  { font-size: 16px; line-height: 22px; color: var(--cream); }
  .field__hint        { margin-block-start: 7px; font-size: 14px; line-height: 20px; }

  /* the bar carries the whole field width, and its own fill is what separates
     it from the photograph now that the panel is gone */
  .field input,
  .field textarea {
    width: 100%;
    margin: 11px 0 0;
    background: rgba(13, 17, 20, .9);
  }
  /* --text-ghost is the footer's grey and sits too close to the bar to read
     against it; 4135:340 lifts the placeholder to #717579 */
  .field input::placeholder,
  .field textarea::placeholder { color: #717579; }
  /* the Figma sets the latin fields reading from the left of the bar; only the
     Hebrew name and the experience box stay on the right */
  .field input:not(.ph-he) { text-align: left; }

  .welcome__done       { padding: 20px 15px; }
  .welcome__done-title { font-size: 30px; line-height: 34px; }
  .welcome__done-copy  { font-size: 16px; line-height: 22px; }
  .welcome__status     { font-size: 16px; }

  .btn-join.welcome__submit {
    width: 100%;
    height: 44px;
    gap: 10px;
    padding-inline: 18px;
    justify-content: center;
  }
  .btn-join.welcome__submit img  { width: 23px; height: 22px; }
  .btn-join.welcome__submit span { font-size: 16px; }
}

/* ==========================================================================
   triangle — responsive
   The desktop values are fixed pixels straight out of the Figma, so each tier
   has to release them explicitly: the row min-heights, the 492px photo column
   and the 248/295/256 award tracks all stop fitting well before 1024px.
   ========================================================================== */

/* laptop — hold the two-column layout, let both sides give */
@media (min-width: 1024px) and (max-width: 1439px) {
  .triangle__grid  { grid-template-columns: minmax(260px, 492px) minmax(0, 1fr); gap: 18px; }
  /* the table still sets the row here; the frame only fills it */
  .triangle__photo { height: 0; min-height: 100%; }

  .awards { grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 0; }
  .award  { padding: 12px 10px 22px; font-size: clamp(17px, 1.8vw, 30px); line-height: 1.18; }
  .award img { margin-block-end: 12px; }

  .fact { padding: 18px 5px 16px 14px; }
  .fact:nth-of-type(1),
  .fact:nth-of-type(2),
  .fact:nth-of-type(3) { min-height: 0; }
  .fact dt { font-size: clamp(19px, 2vw, 30px);  line-height: 1.2; }
  .fact dd { font-size: clamp(15px, 1.7vw, 25px); line-height: 1.32; margin-block-start: 9px; }
  .fact--tight dd { font-size: clamp(15px, 1.6vw, 24px); }
}

/* tablet — stack, photo above the facts */
@media (max-width: 1023px) {
  .triangle__grid  { grid-template-columns: 1fr; gap: 26px; }
  .triangle__photo {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
    max-height: 440px;
    object-position: center 28%;
  }

  .awards { grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 0; }
  .award  { padding: 12px 8px 20px; font-size: 17px; line-height: 1.22; }
  .award img { width: 18px; height: 17px; margin-block-end: 10px; }
  .award::before { top: 10px; bottom: 8px; }

  .fact { padding: 16px 4px 14px 12px; }
  .fact:nth-of-type(1),
  .fact:nth-of-type(2),
  .fact:nth-of-type(3) { min-height: 0; }
  .fact::before { top: 9px; bottom: 7px; }
  .fact dt { font-size: 20px; line-height: 1.28; }
  .fact dd { font-size: 16px; line-height: 1.45; margin-block-start: 8px; }
  .fact--tight dd { font-size: 16px; }
}

/* phone — the three awards can no longer sit side by side */
@media (max-width: 600px) {
  .awards { grid-template-columns: 1fr; }
  .award {
    padding: 16px 10px;
    border-block-end: 1px solid var(--line-warm);
    font-size: 18px;
  }
  .award:last-child  { border-block-end: 0; }
  .award::before     { content: none; }   /* separators run horizontally now */
  .award img         { margin-block-end: 8px; }

  .triangle__photo   { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   phone — Figma "SQUAD WEBSITE (Copy)" node 4090:715 (Mobile 3, 390px)
   Everything below is a transcription of that frame. The measurements are the
   Figma's own; the 390 frame maps to a 16px gutter, so anything the design
   insets further than that carries its own padding.
   ========================================================================== */

@media (max-width: 640px) {

  :root { --gutter: 16px; }

  /* ---- section furniture ------------------------------------------------ */
  .display,
  .bootcamp .display,
  .squad .display,
  .get .display,
  .fit .display,
  .plans .display,
  .words .display,
  .triangle .display,
  .faq .display {
    font-size: 36px;
    line-height: 33px !important;
    white-space: normal;
  }
  .tag { font-size: 20px; line-height: 1.35; letter-spacing: 2.1px; }

  /* on the phone frame the label sits on the same edge as the heading */
  .sec-head { gap: 2px; }
  .sec-head .tag,
  .sec-head .display { text-align: left; }
  .sec-head--center .tag,
  .sec-head--center .display { text-align: center; }

  /* ---- buttons ----------------------------------------------------------- */
  .btn-join,
  .btn-join--sm {
    width: fit-content;
    max-width: 100%;
    height: 44px;
    gap: 13px;
    padding-inline: 13px;
    border-width: 1px;
  }
  .btn-join img,
  .btn-join--sm img  { width: 14px; height: 13.5px; }
  .btn-join span,
  .btn-join--sm span { font-size: 15px; letter-spacing: 1.32px; }

  .btn-join--bar      { width: 100%; height: 50px; gap: 14px; }
  .btn-join--bar span { font-size: 16px; }

  /* ---- masthead ---------------------------------------------------------- */
  .masthead            { padding-block: 19px; }
  .masthead.is-stuck   { padding-block: 12px; }
  .masthead__inner     { align-items: center; }
  .masthead__logo img  { width: 60px; height: 27px; }

  /* ---- hero -------------------------------------------------------------- */
  .hero { height: clamp(540px, 84vh, 632px); }

  .hero__lockup {
    inset-block-start: 44.5%;
    inset-inline: 0;
    width: min(317px, calc(100% - 42px));
    margin-inline: auto;
  }
  .hero__tagline {
    inset-block-start: 54.7%;
    right: 36px;
    left: auto;
    width: 205px;
    font-size: 23px;
    line-height: 22px;
  }
  .hero__globe {
    position: absolute;
    inset-block-start: 55.9%;
    left: 35px;
    right: auto;
    width: 57px;
    height: 31px;
  }
  .hero__cta {
    inset-block-start: 81%;
    inset-block-end: auto;
  }

  /* ---- bootcamp week ------------------------------------------------------ */
  .bootcamp       { padding-block: 56px 44px; }
  .bootcamp__lede {
    width: 100%;
    margin-block-start: 18px;
    font-size: 16px;
    line-height: 21px;
    color: #fff;
  }
  .bootcamp__lede p + p { margin-block-start: 0; }

  /* the four days become a snapping rail. It rests in the Figma "bootcamp week
     hide" state — grey photos, no copy — and a tap opens one card into the
     "scroll" state: the photo takes its colour and the copy comes up. */
  .days {
    display: flex;
    direction: ltr;                  /* the Figma rail runs day 1 -> day 4 */
    gap: 12px;
    max-width: none;                 /* the two-up measure ends here */
    margin-block-start: 24px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: calc(var(--gutter) + 20px) var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: calc(var(--gutter) + 20px) var(--gutter);
    scrollbar-width: none;
  }
  .days::-webkit-scrollbar { display: none; }

  .day {
    position: relative;
    direction: rtl;
    flex: 0 0 258px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    /* a floor rather than a fixed height — flex stretches every card to the
       tallest of them, so the rail stays even and the longest day still fits */
    min-height: 360px;
    padding: 14px;
    background: #161616;
    border: 1px solid #fff;
    outline: 0;
    overflow: hidden;
    scroll-snap-align: start;
  }
  /* Hover and focus drive the desktop card; the phone has neither. Here the
     rail position is the affordance: whichever card the swipe has brought into
     the frame is the one in colour with its copy showing, one at a time.
     site.js marks it .is-active. */
  .day__photo,
  .day:hover .day__photo,
  .day:focus-within .day__photo { inset: 0; height: 100%; filter: grayscale(1); }
  .day.is-active .day__photo { filter: none; }

  .day::after,
  .day:hover::after,
  .day:focus-within::after {
    inset: 0;
    height: auto;
    background: linear-gradient(to bottom,
                rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .1) 35%, rgba(0, 0, 0, .9) 100%);
  }

  .day__date {
    top: 12px;
    right: 13px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 1.1px;
  }
  /* the photo covers the whole card here and carries a z-index of its own, so
     every part of the copy layer has to be lifted over it and over the scrim */
  .day__caption {
    position: relative;
    inset: auto;
    z-index: 4;
    margin-block-start: auto;
  }
  .day__name { font-size: 20px; line-height: 26.45px; }
  .day__role { font-size: 16px; letter-spacing: .88px; }
  .day__body {
    position: relative;
    inset: auto;
    z-index: 4;
    min-height: 0;
    display: block;
    padding: 0;
    background: none;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;           /* 16/16 in the Figma clipped its own descenders */
  }

  /* the copy rides in on the swipe rather than being there all along */
  .day__date,
  .day__caption,
  .day__body,
  .day:hover .day__body,
  .day:focus-within .day__body {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--t-mid) var(--ease),
                transform var(--t-slow) var(--ease);
  }
  .day.is-active .day__date,
  .day.is-active .day__caption,
  .day.is-active .day__body { opacity: 1; transform: none; }

  /* the date leads, then the name, then the copy — a hand's width apart */
  .day.is-active .day__caption { transition-delay: 70ms; }
  .day.is-active .day__body    { transition-delay: 140ms; }

  @media (prefers-reduced-motion: reduce) {
    .day__date,
    .day__caption,
    .day__body { transition: none; transform: none; }
  }

  /* ---- members-only access band ------------------------------------------- */
  .access        { height: auto; padding-block: 49px 29px; }
  .access__inner {
    flex-direction: column-reverse;   /* lockup above, CTA below */
    align-items: center;
    gap: 29px;
    padding-block-start: 0;
  }
  .access__lockup { width: min(342px, 100%); height: auto; }
  .access .btn-join--solid { padding-inline: 13px 6px; }

  /* ---- the squad ----------------------------------------------------------- */
  /* The body block is set in from the page gutter so the photo lands on the
     307 the Figma draws. The bar underneath it has to stand on that same line,
     so both take their inset from here rather than each carrying its own. */
  .squad        { padding-block: 29px 39px; --squad-inset: 24px; }
  .squad__grid  {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 0;
    margin-block-start: 21px;
    padding-inline: var(--squad-inset);
    border-block-start: 0;
  }
  .squad__lead  {
    padding: 0;
    border: 0;
    font-size: 23px;
    line-height: 22px;
  }
  .squad__photo {
    order: 1;                        /* Figma: photo between the lead and body */
    margin-block-start: 21px;
    aspect-ratio: 307 / 264;
  }
  .squad__body  {
    order: 2;
    padding: 0;
    margin-block-start: 23px;
    font-size: 16px;
    line-height: 20px;
  }
  .squad__mark  { display: none; }
  .squad__bar   {
    flex-direction: row;             /* the 900 tier reverses it */
    height: auto;
    margin-block-start: 23px;
    padding: 0 var(--squad-inset);
    border: 0;
    justify-content: flex-start;     /* RTL: the button sits on the right */
  }
  .squad__bar .btn-join { margin: 0; }

  /* ---- what you get -------------------------------------------------------- */
  /* Opening a card makes the section taller, and a photo sized with `cover` is
     sized to the section — so every tap rescaled the picture behind the cards.
     Here it is sized from the viewport instead and pinned to the section's top
     edge, so nothing about it depends on how tall the content is. It is cut
     tall enough to run past the bottom of the section in either state, which
     is what keeps a seam from showing where it ends.
     Desktop keeps `cover`: there the card opens inside itself and the section
     height never changes. */
  .get {
    padding-block: 33px 60px;
    background-size: cover, auto max(135svh, 1080px);
    background-position: center, center top;
    background-repeat: no-repeat, no-repeat;
  }
  .get::before { height: 160px; }
  .get__head   { align-self: stretch; padding-block: 0; text-align: center; }
  .get__head .tag { text-align: center; }
  .get__head .display { text-align: center; }
  .get__sub    {
    margin-block-start: 26px;
    font-size: 20px;
    line-height: 21px;
    text-align: center;
  }

  .get__grid  {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* the Figma cards are 346 wide inside the 390 frame, a shade in from the gutter */
    padding-inline: 6px;
    margin-block-start: 17px;
  }
  .get__photo { display: none; }

  /* Figma component 4090:1313 (default, 346x87) / 4090:1318 (open, 346x211).
     The card opens in flow rather than over itself. The 1px edge is not in the
     node's stroke data but it is in the render — white, a touch brighter along
     the bottom, and dimmer once the card goes dark. */
  /* A grid, not a wrapping flex row. The head — number, title, arrow — gets a
     row of its own that is at least the shut card's inner height, so it reads
     as centred while the card is shut and does not move at all when the body
     opens under it. As a wrapping flex row it was the whole wrapped group that
     got centred, so closing a card walked the title down the middle of the
     collapsing box and back up again. */
  .perk {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: minmax(59px, auto) auto;   /* 87 less its 14+14 */
    align-content: start;
    align-items: center;
    width: 100%;
    aspect-ratio: auto;
    min-height: 87px;
    padding-block: 14px;
    padding-inline: 23px 12px;
    border: 1px solid rgba(255, 255, 255, .48);
    transition: background var(--t-mid) var(--ease),
                border-color var(--t-mid) var(--ease);
  }
  .perk__no {
    position: static;
    grid-area: 1 / 1;              /* RTL: column one is the right-hand one */
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 1.4px;
  }
  .perk__title {
    grid-area: 1 / 2;
    align-self: center;
    max-width: none;
    margin-inline-start: 16px;
    font-size: 18px;
    line-height: 22px;
  }
  /* the desktop breaks go, the phone one comes in */
  .perk__title br { display: none; }
  .perk__title .perk__break { display: inline; }
  /* 31x30 turned -135deg, which is what fills the Figma's 43.6px square */
  .perk__arrow {
    position: static;
    grid-area: 1 / 3;
    width: 31px;
    height: 30px;
  }
  /* opening the card makes the section taller, and the photo it is painted on
     is sized to that section — so a card that snaps open snaps the picture to
     a new scale with it. Growing on a clock turns that into a drift. */
  .perk__body {
    position: static;
    inset: auto;
    grid-area: 2 / 1 / 3 / -1;
    width: 100%;
    max-height: 0;
    margin: 0;
    overflow: hidden;
    transform: translateY(10px);
    transition: max-height var(--t-slow) var(--ease),
                margin-block-start var(--t-slow) var(--ease),
                opacity var(--t-mid) var(--ease),
                transform var(--t-slow) var(--ease);
    padding-inline: 3px 8px;       /* 27 / 21 in from the card edge */
    font-weight: 400;
    font-size: 18px;
    line-height: 21px;
    opacity: 0;
  }

  /* the head holds its place, so opening changes nothing but the colour and
     the row of copy that grows underneath */
  .perk[aria-expanded="true"] {
    background: rgba(0, 0, 0, .2);
    border-color: rgba(255, 255, 255, .33);
  }
  .perk[aria-expanded="true"] .perk__body {
    max-height: 300px;
    margin-block-start: 30px;
    opacity: 1;
    transform: none;
  }
  .perk[aria-expanded="true"] .perk__arrow { display: none; }

  /* ---- it is not for everyone ---------------------------------------------- */
  .fit        { padding-block: 38px 62px; }
  .fit__table { grid-template-columns: 1fr; gap: 30px; margin-block-start: 38px; }

  .fit__colhead { width: 234px; height: 45px; font-size: 23px; }
  /* RTL: the "yes" plate is flush right, the "no" plate flush left */
  .fit__col--no .fit__colhead { margin-inline-start: auto; }

  .fit__col--yes .fit__rows,
  .fit__col--no  .fit__rows { border-inline: .5px solid #fff; }

  .fit__row {
    height: auto;
    min-height: 52px;
    gap: 10px;
    padding-block: 0;
    padding-inline: 15px;
  }
  .fit__row img  { width: 11px; }
  .fit__row span { font-size: 16px; line-height: 19px; }

  /* ---- 14-day guarantee ------------------------------------------------------ */
  .guarantee      { height: auto; padding-block: 62px 67px; }
  /* the rule under the title has to meet both edges of the box, so the box
     carries no padding of its own — each half pads its own copy instead. With
     the height free the two halves balance, which is what centres them. */
  .guarantee__box {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    height: auto;
    min-height: 177px;
    padding: 0;
    gap: 0;
  }
  .guarantee__title {
    width: 100%;
    padding: 18px 12px 14px;
    border: 0;
    border-block-end: 1px solid #fff;
    font-size: 32px;
    line-height: 36.4px;
    text-align: center;
    white-space: normal;
  }
  .guarantee__copy {
    flex: none;
    margin-block-start: 0;
    padding: 26px 14px 22px;
    font-size: 23px;
    line-height: 25px;
    text-align: center;
  }

  /* ---- plans ------------------------------------------------------------------ */
  .plans       { padding-block: 51px 61px; }
  .plans__grid { grid-template-columns: 1fr; gap: 16px; margin-block-start: 45px; }

  .plan        { min-height: 0; padding: 27px 44px 43px; }
  .plan__name  { text-align: center; }
  .plan__note  {
    margin-block-start: 28px;
    font-size: 20px;
    line-height: 23px;
    text-align: center;
  }
  .plan__adds    { margin-block-start: 30px; font-size: 16px; }
  .plan__list    { margin-block-start: 27px; }
  .plan__list li { font-size: 16px; }

  .plan__foot  { position: static; inset: auto; margin-block-start: 24px; }
  .plan__gate  { font-size: 18px; line-height: 18px; }

  /* ---- join the squad ---------------------------------------------------------- */
  .join         { padding-block: 24px 56px; }
  .join__grid   { margin-block-start: 40px; gap: 44px; }
  .join__lede   { font-size: 28px; line-height: 34px; }
  .join__consent span { font-size: 16px; line-height: 21px; }

  .join__form   { gap: 26px; }
  .join__label span  { font-size: 18px; }
  .join__field input { font-size: 17px; }
  .btn-join.join__submit { height: 50px; }

  .join__status     { font-size: 16px; }
  .join__done       { padding: 20px 15px; }
  .join__done-title { font-size: 30px; line-height: 34px; }
  .join__done-copy  { font-size: 16px; line-height: 22px; }

  /* ---- for producers, by producers --------------------------------------------- */
  .band         { height: auto; padding-block: 27px 30px; }
  .band__inner  { flex-direction: column-reverse; align-items: stretch; gap: 6px; }
  .band__mark   { width: min(317px, 100%); height: auto; margin-inline-start: auto; }
  .band__rights { justify-content: flex-start; gap: 10px; }   /* RTL: hugs right */
  .band__rights .txt   { width: min(197px, 62vw); height: auto; }
  .band__rights .globe { width: 21px; height: 21px; }

  /* ---- in their words ------------------------------------------------------------ */
  .words       { padding-block: 38px 52px; }
  .words__rail { margin-block-start: 61px; padding-inline: 33px; }

  /* The rail keeps 33px of gutter on each side and the clip fills the rest,
     so an arrow 24px in was sitting on top of the film. These stand in the
     gutter instead, and carry a taller hit area than the 21px glyph. */
  .words__arrow        { display: grid; width: 29px; height: 44px; margin-block-start: -22px; }
  .words__arrow--left  { left: 2px; }
  .words__arrow--right { right: 2px; }

  .words__track { grid-auto-columns: 292px; }

  .discord {
    width: 100%;
    margin-block-start: 28px;
    padding: 16px;
    background: #141216;
    border: 1px solid rgba(255, 255, 255, .12);
  }
  /* 18 (meta) + 12 (gap) + 120 — the tallest shot at the phone's inner width */
  .discord__stage { height: 150px; background: none; }
  .discord__card  { padding: 0; row-gap: 12px; }
  .discord__meta  { font-size: 14px; text-transform: uppercase; }
  .discord__shot  { width: 100%; }

  .discord__foot {
    height: auto;
    display: flex;
    justify-content: flex-start;   /* RTL: the pager sits on the right */
    margin-block-start: 12px;
    padding-block-start: 6px;
    border-block-start: 1px solid rgba(255, 255, 255, .1);
  }
  .discord__rule { display: none; }
  .discord__nav  { position: static; gap: 10px; }
  .discord__nav button {
    width: 34px;
    height: 30px;
    background: none;
    border-color: rgba(255, 255, 255, .28);
  }
  .discord__nav img { width: 14px; height: 12px; }

  .words__cta { margin-block-start: 32px; }

  /* ---- triangle --------------------------------------------------------------------- */
  .triangle        { padding-block: 24px 44px; }
  .triangle__grid  { grid-template-columns: 1fr; gap: 0; margin-block-start: 23px; }
  .triangle__photo {
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 358 / 197;
    object-position: center top;   /* Figma crops the landscape frame off the bottom */
  }
  .triangle__facts { margin-block-start: 12px; border-block: 0; }

  /* three separate plates with air between them, not one stack of rows
     sharing their edges — each one closes on its own top and bottom */
  .awards { grid-template-columns: 1fr; gap: 9px; min-height: 0; border-block-end: 0; }
  .award  {
    position: relative;
    display: flex;
    /* the phone lays the row out sideways — mark first, then the line — so it
       has to say so, now that the desktop cell stacks and centres its group */
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 8px 17px;
    border-block: 1px solid var(--line-warm);
    font-size: 20px;
    line-height: 20px;
    text-align: right;
  }
  /* The tablet block above stacks the awards as one run of rows and clears the
     last bottom edge so the run does not close twice. Here they are separate
     plates and that edge is the third plate's own floor — and :last-child
     outranks the plain .award rule above whichever order they are read in. */
  .award:last-child { border-block-end: 1px solid var(--line-warm); }
  .award img { flex: none; width: 13px; height: 12px; margin: 0; }
  /* the Figma draws a short tick at each end of the row, not a full rule */
  .award::before,
  .award::after {
    content: "";
    position: absolute;
    top: 5px;
    bottom: 5px;
    width: 1px;
    background: var(--line-warm);
  }
  .award::before { left: 0; }
  .award::after  { right: 0; }

  /* one gap between the rows, carried above each one — padding on both sides
     of every row doubles it everywhere and the block falls apart */
  .fact {
    min-height: 0;
    padding: 24px 0 0;
    border-block-end: 0;
  }
  .fact:first-of-type { padding-block-start: 21px; }
  .fact:last-of-type { padding-block-end: 4px; }
  .fact::before { content: none; }
  .fact dt { font-size: 20px; line-height: 1.28; }
  .fact dd,
  .fact--tight dd { margin-block-start: 0; font-size: 16px; line-height: 20px; }

  /* ---- faq ------------------------------------------------------------------------- */
  .faq       { padding-block: 44px 34px; }
  .faq__list { margin-block-start: 30px; }

  .faq summary { gap: 16px; padding-block: 16px; }
  .faq summary > span:first-child {
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0;
  }
  .faq__icon     { width: 26px; height: 26px; }
  .faq__icon img { width: 9px; height: 9px; }
  .faq details > p {
    padding-block-end: 20px;
    font-size: 16px;
    line-height: 1.5;
  }

  /* ---- closer ------------------------------------------------------------------------ */
  .closer      { height: auto; padding-block: 48px; }
  .closer__box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;     /* RTL: flex-start is the right edge */
    height: auto;
    min-height: 289px;
    padding: 25px 20px 20px;
  }
  .closer__title { width: 100%; font-size: 70px; line-height: 58px; }
  .closer__sub   { width: 100%; margin-block-start: 8px; font-size: 23px; line-height: 23px; }
  .closer__box .btn-join { position: static; margin-block-start: 17px; }

  /* ---- footer -------------------------------------------------------------------------- */
  .footer        { height: auto; padding-block: 0; }
  .footer__inner {
    flex-direction: column;
    gap: 16px;
    padding: 30px var(--gutter) 26px;
    text-align: center;
  }
  .footer__mark     { width: min(216px, 100%); height: auto; }
  .footer__social   { gap: 16px; }
  .footer__social a { font-size: 12px; letter-spacing: 1.62px; }
  .footer__copy     { font-size: 12px; letter-spacing: 1.52px; }
}

/* the hero globe is a phone-only mark */
.hero__globe { display: none; }
@media (max-width: 640px) { .hero__globe { display: block; } }

/* ==========================================================================
   /soon — pre-launch holding page
   Figma frame 1440x1195: the photo fills 1091, the standard footer sits in
   the remaining 104. Here the photo takes whatever height is left instead,
   so the footer stays on the fold at any viewport.
   ========================================================================== */

.soon {
  position: relative;
  min-height: calc(100svh - 104px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px var(--gutter) 60px;
  background: #0a0a0a url("soon/bg.jpg") center / cover no-repeat;
  text-align: center;
}

.soon__mark { width: 60px; height: 27px; flex-shrink: 0; }

/* the Figma sets this one a touch cooler than the shared --blue (#abc3d7),
   so the design's own value is kept rather than snapped to the token */
.soon__title {
  margin-block-start: 130px;
  font-size: 90px;
  line-height: 62px;
  color: #a0c6d5;
  max-width: 1095px;
}

/* not in the Figma — the gate is ours, so it borrows the form furniture
   the welcome page already established */
.soon__gate {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-block-start: 44px;
}

.soon__gate input {
  width: 260px;
  padding: 13px 18px;
  border: 1px solid #22282c;
  border-radius: 0;
  background: rgba(10, 10, 10, .55);
  backdrop-filter: blur(6px);
  color: var(--chalk);
  font-family: var(--f-mono);
  font-size: 15px;
  letter-spacing: 1.4px;
  text-align: center;
  transition: border-color var(--t-fast) var(--ease);
}

.soon__gate input::placeholder { color: var(--text-faint); }
.soon__gate input:focus {
  outline: none;
  border-color: #a0c6d5;
}

.soon__gate button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border: 1px solid #22282c;
  background: rgba(10, 10, 10, .55);
  backdrop-filter: blur(6px);
  color: var(--chalk);
  font-family: var(--f-mono);
  font-size: 15px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.soon__gate button:hover { border-color: #a0c6d5; background: rgba(10, 10, 10, .8); }
.soon__gate button img   { width: 23px; height: 22px; }

.soon__status {
  flex-basis: 100%;
  margin: 4px 0 0;
  min-height: 1.2em;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 1.2px;
  color: var(--text-dim);
}
.soon__status.is-error { color: #ff8a6a; }

@media (max-width: 900px) {
  .soon        { min-height: 100svh; padding-block-end: 40px; }
  .soon__title { margin-block-start: 90px; font-size: 58px; line-height: 46px; }
}

@media (max-width: 640px) {
  .soon__title    { margin-block-start: 70px; font-size: 40px; line-height: 34px; }
  .soon__gate     { margin-block-start: 32px; }
  .soon__gate input { width: min(260px, 100%); }
}

/* ==========================================================================
   cookie consent — vanilla-cookieconsent v3.1.0 skin
   The library ships a light default; everything below repaints it in the
   site's own tokens so the banner reads as part of the page rather than as a
   bolted-on widget. Only custom properties are set — no selectors of the
   library's are overridden, which keeps a version bump to a file swap.
   ========================================================================== */

#cc-main {
  --cc-font-family: var(--f-he);

  --cc-bg:              #101317;
  --cc-primary-color:   var(--cream);
  --cc-secondary-color: var(--text-dim);

  --cc-btn-primary-bg:                 var(--accent);
  --cc-btn-primary-color:              #0a0a0a;
  --cc-btn-primary-border-color:       var(--accent);
  --cc-btn-primary-hover-bg:           #fff;
  --cc-btn-primary-hover-color:        #0a0a0a;
  --cc-btn-primary-hover-border-color: #fff;

  --cc-btn-secondary-bg:                 #1c1d22;
  --cc-btn-secondary-color:              var(--chalk);
  --cc-btn-secondary-border-color:       var(--line-strong);
  --cc-btn-secondary-hover-bg:           #262a31;
  --cc-btn-secondary-hover-color:        #fff;
  --cc-btn-secondary-hover-border-color: var(--accent-deep);

  --cc-separator-border-color: var(--line);
  --cc-link-color:            var(--accent);

  --cc-toggle-on-bg:                    var(--accent);
  --cc-toggle-off-bg:                   #3a4046;
  --cc-toggle-on-knob-bg:               #0a0a0a;
  --cc-toggle-off-knob-bg:              #f1f2f3;
  --cc-toggle-enabled-icon-color:       #0a0a0a;
  --cc-toggle-disabled-icon-color:      #f1f2f3;
  --cc-toggle-readonly-bg:              #23282c;
  --cc-toggle-readonly-knob-bg:         var(--text-dimmer);
  --cc-toggle-readonly-knob-icon-color: #101317;

  --cc-cookie-category-block-bg:                  #171a1f;
  --cc-cookie-category-block-border:              var(--line);
  --cc-cookie-category-block-hover-bg:            #1c2027;
  --cc-cookie-category-block-hover-border:        var(--line-strong);
  --cc-cookie-category-expanded-block-bg:         transparent;
  --cc-cookie-category-expanded-block-hover-bg:   #1c2027;
  --cc-section-category-border:                   var(--line);

  --cc-footer-bg:           #0d0f12;
  --cc-footer-color:        var(--text-dimmer);
  --cc-footer-border-color: var(--line);

  --cc-overlay-bg: var(--bg-veil);

  --cc-webkit-scrollbar-bg:       #171a1f;
  --cc-webkit-scrollbar-hover-bg: var(--accent-deep);

  /* the site has no rounded corners anywhere — see the plan and soon cards */
  --cc-btn-border-radius:       0;
  --cc-modal-border-radius:     0;
  --cc-pm-toggle-border-radius: 20px;   /* the switch stays a switch */
}

/* the trigger sits in the footer's documents row — see .footer__legal */