/* /flash-warp — the download page for FLASH WARP, a free Mac tool by Triangle
   Tools. Built from the home page's blocks (site.css), the vocal-chain page's
   (vocal-chain.css) and the Papit pack's download button and tables
   (papit-free.css); this only covers this page's order: download, install,
   while you work, smart tempo, the way on. Spec: squad-design-web,
   07/11/2026 (round 4: flash-warp-round4-spec.md in the session notes). */

/* the download: the MAC / WINDOWS switch, then one button. A first visit
   fills the gate (email, the button as its submit, consent); past it, and
   without JS, the button is the direct /go link. 16 / 12 / 12 / 12 / 16 / 4. */
.fw-get {
  display: grid;
  justify-items: center;
  width: 100%;
  max-inline-size: 480px;
  justify-self: center;
}
.fw-dl__icon { flex: none; width: 26px; height: 26px; color: #0a0a0a; }
.fw-get .fw-btn { margin: 0; }
/* one button that stays still: no endless pulse on this page */
.fw-get .pf-dl { animation: none; }
.fw-get .fw-os--full { margin-block-end: 16px; }

.fw-gate { display: none; width: 100%; justify-items: center; }
.has-js:not(.fw-through) .fw-gate { display: grid; }
.has-js:not(.fw-through) .fw-direct { display: none !important; }
.fw-direct + .fw-direct { margin-block-start: 12px; }
.has-js .fw-direct + .fw-direct { margin-block-start: 0; }

.fw-gate__field { display: block; width: 100%; margin-block-end: 12px; }
.fw-gate__field input {
  display: block;
  width: 100%;
  height: 46px;
  padding-inline: 16px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  font-family: inherit;
  font-size: 17px;
  text-align: center;
  color: #fff;
  transition: border-color var(--t-fast) var(--ease);
}
.fw-gate__field input::placeholder { color: var(--text-dim); opacity: 1; }
.fw-gate__field input:focus { outline: none; border-color: var(--accent); }
.fw-gate__field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fw-gate [aria-invalid="true"] { border-color: #ff8a7a; }
.fw-gate__consent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin-block-start: 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-dim);
  text-align: center;
  cursor: pointer;
}
.fw-gate__consent input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.fw-gate__consent input[aria-invalid="true"] { outline: 2px solid #ff8a7a; outline-offset: 2px; }
.fw-gate__consent a,
.fw-done a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.fw-gate__status { min-height: 20px; font-size: 14px; line-height: 20px; text-align: center; color: var(--text-dim); }
.fw-gate__status.is-error { color: #ff8a7a; }
.fw-gate .fw-btn[disabled] { cursor: progress; opacity: .85; }
.fw-member { margin-block-start: 12px; font-size: 14px; line-height: 20px; color: var(--text-dim); text-align: center; }
.fw-member a { color: var(--chalk); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.fw-done { margin-block-start: 12px; text-align: center; }
.fw-done__title { font-size: 16px; line-height: 24px; color: #fff; }
.fw-done__copy { font-size: 14px; line-height: 20px; color: var(--text-dim); }
.fw-done__copy a { color: var(--chalk); }

.fw-metas { display: grid; gap: 4px; margin-block-start: 16px; }
.has-js .fw-or { display: none; }

.fw-meta {
  font-size: 14px;
  color: var(--text-dim);
  text-align: center;
}
.fw-meta span { white-space: nowrap; }

/* a phone can't run it: said only where it matters */
.fw-phone { display: none; }

/* the sections under the download, each a closed table under its head */
.fw-install,
.fw-use { padding-block: 100px 48px; }
.fw-next { padding-block: 48px 96px; }
/* the hero ends like the sections under it: 48 + 100 between every head */
.taste.vc-top { padding-block-end: 48px; }
.fw-next .join__grid { margin-block-start: 0; }

.fw-install .pf-get,
.fw-use .pf-get { margin-block-start: 48px; }
.fw-steps { grid-template-columns: repeat(3, 1fr); }
.fw-two { grid-template-columns: repeat(2, 1fr); }
/* the third point is the one to show off: the full width, a steel edge
   drawn over the grid's 1 px line, never beside it */
.fw-star { position: relative; grid-column: 1 / -1; }
.fw-star::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: -1px;
  block-size: 1px;
  background: var(--accent);
}
.pf-get .fw-star b { color: var(--accent); }
.fw-use .pf-get li { gap: 12px; }
/* the numbers are read: text-dim, not text-dimmer (large text only) */
.pf-get em { color: var(--text-dim); }


/* the line FLASH WARP puts on screen, set in its own type (DM Mono, the
   state in Medium, the rest in Regular at 65%), at the app's 150% size */
.fw-flash {
  margin-block-start: 16px;
  font-family: var(--f-mono);
  letter-spacing: 0;
  text-align: right;
  color: var(--accent);
}
.fw-flash + .fw-flash { margin-block-start: 8px; }
.fw-flash--off { color: var(--paper); }
.fw-flash__on { font-weight: 500; font-size: 20px; }
.fw-flash__rest { font-weight: 400; font-size: 16px; opacity: .65; }
.fw-flash--hold {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--paper);
}
.fw-flash--hold + span { margin-block-start: 8px; }
.fw-seg { white-space: nowrap; }
.pf-get .fw-flash span { font-size: inherit; line-height: inherit; color: inherit; }
.pf-get .fw-flash .fw-flash__on { font-size: 20px; }
.pf-get .fw-flash .fw-flash__rest { font-size: 16px; }

/* ---- the language switch, opposite the logo: a boxed pair with each
   language's flag (Ido, 07/11/2026: the bare HE / EN was missed). The flags
   keep their own colours, an exception for these two only; the current one is
   filled and set in 500, so it isn't colour alone. ------------------------- */
.fw-lang {
  display: flex;
  direction: ltr;
  border: 1px solid var(--line-strong);
  font-size: 14px;
  letter-spacing: .095em;
}
.fw-lang a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: 12px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.fw-lang a + a { border-inline-start: 1px solid var(--line-strong); }
.fw-flag {
  flex: none;
  display: block;
  outline: 1px solid rgba(255, 255, 255, .1);
  outline-offset: -1px;
  opacity: .7;
  transition: opacity var(--t-fast) var(--ease);
}
.fw-lang a:hover { color: var(--chalk); background: rgba(255, 255, 255, .04); }
.fw-lang a:hover .fw-flag,
.fw-lang a[aria-current="page"] .fw-flag { opacity: 1; }
.fw-lang a[aria-current="page"] { color: #fff; font-weight: 500; background: rgba(255, 255, 255, .1); }
.fw-lang a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- media: the vocal-chain film frame, real UI so no dimming ---------- */
.fw-hero { aspect-ratio: 16 / 5; overflow: hidden; }
.fw-hero__still img,
.fw-hero__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.fw-hero.is-playing .fw-hero__still { display: none; }
.fw-hero__pause {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  min-width: 88px;
  min-height: 44px;
  padding-inline: 12px;
  background: var(--bg-veil);
  border: 0;
  font-size: 14px;
  letter-spacing: .095em;
  color: var(--chalk);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.fw-hero__pause:hover { color: #fff; }

.fw-device {
  aspect-ratio: auto;
  display: grid;
  place-items: center;
  padding: 44px 40px 40px; /* 12 + the tag's 20 + 12 */
  background: var(--bg-off);
}
.fw-device img { width: 100%; max-inline-size: 880px; height: auto; }
/* what it is, in the frame's corner: a Max for Live device */
.fw-device__tag {
  position: absolute;
  inset-block-start: 12px;
  right: 16px; /* the page's side: right in Hebrew, left in English (below) */
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .095em;
  color: var(--text-dim);
}
html[dir="ltr"] .fw-device__tag { right: auto; left: 16px; }

.fw-session { margin-block-start: 24px; aspect-ratio: auto; }
.fw-session img { display: block; width: 100%; height: auto; }

.fw-cap {
  margin-block-start: 12px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: var(--text-dim);
}

/* ---- MAC / WINDOWS: one state, html[data-os], two switches of one
   component: full width over the button, compact over the install steps.
   Without JS the switches hide and both sets show, each under its label. --- */
.fw-os { display: none; }
.has-js .fw-os {
  display: flex;
  direction: ltr;
  border: 1px solid var(--line-strong);
  font-size: 14px;
  letter-spacing: .095em;
}
.has-js .fw-os--full { width: 100%; }
.has-js .fw-os--compact { width: max-content; margin-block-start: 48px; }
.fw-os button {
  flex: 1;
  min-height: 44px;
  padding-inline: 16px;
  background: transparent;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.fw-os--compact button { min-width: 120px; }
.fw-os button + button { border-inline-start: 1px solid var(--line-strong); }
.fw-os button:hover { color: var(--chalk); background: rgba(255, 255, 255, .04); }
.fw-os button[aria-pressed="true"] { color: #fff; font-weight: 500; background: rgba(255, 255, 255, .1); }
.fw-os button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fw-os button:active { transition-duration: .09s; }
.fw-os-label {
  margin-block-start: 48px;
  font-size: 14px;
  letter-spacing: .095em;
  color: var(--text-dim);
}
.fw-install .fw-os-label + .pf-get,
.has-js .fw-install .fw-os ~ .pf-get { margin-block-start: 16px; }
.has-js .fw-os-label { display: none; }
.has-js:not([data-os="win"]) [data-only="win"],
.has-js[data-os="win"] [data-only="mac"] { display: none !important; }

/* ---- RECOMMENDED SETUP, under the device: three steps and what is set -- */
.fw-rec__title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: #fff;
  text-wrap: balance;
}
.fw-install .fw-rec__steps { margin-block-start: 24px; grid-template-columns: repeat(3, 1fr); }
.fw-rec__auto { grid-column: 1 / -1; }

/* ---- the English page: the same blocks, mirrored ----------------------- */
@media (min-width: 901px) {
  html[dir="ltr"] .sec-head { flex-direction: row-reverse; }
}
html[dir="ltr"] .pf-get li,
html[dir="ltr"] .fw-flash { text-align: left; }
html[dir="ltr"] .btn-join img[src*="arrow-sm"] { scale: -1 1; }
/* the bar button is RTL inside (site.css); in English it reads left to right,
   the download icon first, the way-on arrow last */
html[dir="ltr"] .btn-join--bar { direction: ltr; }
/* site.css sets the label RTL in the Hebrew face; in English it is an LTR
   line in one row, never wrapped */
html[dir="ltr"] .btn-join--bar span { direction: ltr; white-space: nowrap; }
html[dir="ltr"] .pf-dl { flex-direction: row; }
@media (max-width: 900px) {
  html[dir="ltr"] .vc-pitch__body,
  html[dir="ltr"] .join__lede { text-align: left; }
}

/* after papit-free's two-column rule */
@media (max-width: 900px) {
  .fw-steps,
  .fw-two,
  .fw-install .fw-rec__steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fw-phone {
    display: block;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-dim);
    text-align: center;
  }
  .fw-install,
  .fw-use { padding-block: 64px 32px; }
  .fw-next { padding-block: 32px 64px; }
  .fw-install .pf-get,
  .fw-use .pf-get { margin-block-start: 32px; }
  .fw-steps li,
  .fw-two li { padding: 24px 20px; }
  .pf-get .fw-flash .fw-flash__on { font-size: 16px; }
  .pf-get .fw-flash .fw-flash__rest { font-size: 13px; }
  .fw-flash--hold { font-size: 13px; line-height: 20px; }
  .fw-next .btn-join--bar { height: 55px; }
  .taste.vc-top { padding-block-end: 32px; }
  .fw-hero { aspect-ratio: 3 / 2; }
  .fw-device { padding: 44px 16px 16px; }
  .has-js .fw-os--compact, .fw-os-label { margin-block-start: 32px; }
}

/* a span inside a cell's title or text keeps that line's size and colour */
.pf-get b span,
.pf-get span span { font: inherit; color: inherit; }
.pf-get span a { color: var(--chalk); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 640px) {
  .fw-phone { margin-block-start: 16px; }
}

/* ---- the steps, compact (Ido, 08/11/2026: "much, much smaller"): one
   tight row per step, the number beside the title, the line under it.
   On the system's scale: the number as the cells above (14 mono), title
   18/24 (body), text 16/24 (the cells' text), 16 / 24 padding so every
   cell's text starts on the same edge as the cells above. ---- */
.fw-install .pf-get.fw-steps li,
.fw-install .pf-get.fw-rec__steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  align-content: start;
  column-gap: 12px;
  row-gap: 4px;
  padding: 16px 24px;
}
.fw-install .fw-steps em,
.fw-install .fw-rec__steps em { grid-row: 1 / 3; }
.fw-install .fw-steps b,
.fw-install .fw-rec__steps b { font-size: 18px; line-height: 24px; }
.fw-install .fw-steps > li > span,
.fw-install .fw-rec__steps > li > span { grid-column: 2; font-size: 16px; line-height: 24px; text-wrap: pretty; }
.fw-install .fw-steps { margin-block-start: 16px; }
.fw-install .fw-rec { margin-block: 48px 0; }
.fw-install .fw-rec__steps { margin-block-start: 16px; }

/* one key cap for every key, in a title or in a line: DM Mono 500 in a
   1 px line-strong box, 24 tall so it fills its 24 px line, never grows it */
.fw-install kbd {
  display: inline-block;
  min-inline-size: 20px;
  padding-inline: 4px;
  border: 1px solid var(--line-strong);
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  margin-block: 2px;
  text-align: center;
  vertical-align: top;
  color: #fff;
}

@media (max-width: 640px) {
  .fw-install .pf-get.fw-steps li,
  .fw-install .pf-get.fw-rec__steps li { padding: 16px 20px; }
  .fw-install .fw-rec { margin-block-start: 32px; }
}

/* step 03 of the recommended setup shows where it is in Live (Ido,
   09/11/2026): File > Save Live Set As Default Set..., drawn as outlines so
   it is sharp at every density. It sits under the line, on the text's own
   edge (right in Hebrew, left in English), 12 below it (4 row gap + 8). */
.fw-install .fw-rec__menu {
  grid-column: 2;
  justify-self: start;
  display: block;
  max-inline-size: 100%;
  height: auto;
  margin-block-start: 8px;
}