/* ==========================================================================
   ARM · page-specific
   Tokens, nav, buttons, questions and footer come from site.css.

   The only page whose hero moves. Storm and the homepage sit on a still
   painting; ARM's subject is a live record that keeps up on its own, and a
   breeze running through a field says that better than a still would. Same
   warm cream and soft teal as bg-2, so it is a sibling rather than a departure.
   ========================================================================== */
.arm-hero {
  position: relative;
  min-block-size: 100svh;
  display: flex;
  align-items: center;
  padding-block: 9rem 5rem;
  padding-inline: 0;
  overflow: hidden;
}
.arm-hero__video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: -1;
  /* The source grades quite pale. Saturation sits under the veil rather than over
     it, so this enriches what shows through without touching text contrast, which
     the veil governs on its own. */
  filter: saturate(1.34) contrast(1.07);
}
.arm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* Falls to nothing by 58% rather than trailing a haze to the far edge, so
       roughly the right half of the field is completely untouched. A cream wash
       does not just dim a picture the way a dark one does, it pulls every colour
       toward the paper, so anywhere it is not strictly needed it should be gone
       rather than merely thin. */
    linear-gradient(100deg,
      rgba(250, 245, 234, 0.8) 0%,
      rgba(250, 245, 234, 0.66) 28%,
      rgba(250, 245, 234, 0.26) 46%,
      rgba(250, 245, 234, 0.04) 56%,
      rgba(250, 245, 234, 0) 62%),
    linear-gradient(to bottom, rgba(250, 245, 234, 0.34) 0%, rgba(250, 245, 234, 0) 20%);
}
.arm-hero .wrap { position: relative; z-index: 1; }
.arm-mark { font-family: var(--serif); font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -0.03em; margin-block-end: 0.5rem; }
.arm-hero .label { display: block; margin-block-end: 2rem; }
.arm-hero h1 {
  font-size: clamp(1.6rem, 3.1vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  max-inline-size: 20ch;
  margin-block-end: 1.5rem;
}
.arm-hero h1 em { font-style: italic; color: var(--accent); }
.arm-hero__sub { font-size: clamp(1.02rem, 1.5vw, 1.12rem); color: var(--ink); max-inline-size: 36rem; margin-block-end: 2rem; }
.arm-hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-block-end: 1.4rem; }
.arm-hero__second { font-size: 0.95rem; color: var(--ink-2); }
.arm-hero__second a { color: var(--accent); font-weight: 500; text-underline-offset: 3px; }
.arm-hero__note { margin-block-start: 0.6rem; font-size: 0.85rem; color: var(--ink-2); max-inline-size: 32rem; }

/* A moving background is decoration. Anyone who has asked for less motion gets
   the poster frame instead, which is the same picture standing still. */
@media (prefers-reduced-motion: reduce) {
  .arm-hero__video { display: none; }
  .arm-hero { background: var(--paper-warm) url("/media/arm-breeze-poster.jpg") center / cover no-repeat; }
}

/* The poster frame runs fixed behind the whole page, so scrolling off the hero
   does not drop into flat beige the way it did. Still rather than moving: motion
   behind body copy makes it measurably harder to settle on a line, which is fine
   for four words of hero and not for four paragraphs. */
.art--arm {
  background: var(--paper-warm) url("/media/arm-breeze-poster.jpg") 55% 62% / cover no-repeat;
  filter: saturate(1.18) contrast(1.04);
}
.page { background: linear-gradient(to bottom, rgba(250,245,234,0) 0, rgba(250,245,234,0.76) 12vh, rgba(250,245,234,0.88) 40vh); }

/* ---- Problem cards. Descriptive, not alarming, so no warning colour. ---- */
.gap-cards { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.gap-cards li { padding: 1.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.gap-cards h3 { font-size: 1.15rem; margin-block-end: 0.6rem; }
.gap-cards p { color: var(--ink-2); font-size: 0.95rem; }

/* ---- Four steps, one of which you do ---- */
.arm-steps { list-style: none; margin: 0; padding: 0; }
.arm-steps > li { padding-block: 2.25rem; border-block-start: 1px solid var(--line); }
.arm-steps > li:last-child { border-block-end: 1px solid var(--line); }
@media (min-width: 900px) { .arm-steps > li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 0 2.5rem; } }
.arm-steps b { font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--line-2); }
.arm-steps h3 { font-size: 1.2rem; margin-block-end: 0.55rem; }
.arm-steps p { color: var(--ink-2); max-inline-size: 44rem; }
/* Step four is the only one the user performs after setup, so it carries the weight. */
.arm-steps > li.is-yours b { color: var(--accent); }
.arm-steps > li.is-yours h3::after {
  content: "you";
  margin-inline-start: 0.7rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: var(--accent-soft);
  padding: 0.22rem 0.45rem;
  border-radius: 4px;
  vertical-align: 0.25em;
}
@media (max-width: 899px) { .arm-steps b { display: block; margin-block-end: 0.5rem; } }

/* ---- Security ---- */
.trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.25rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.trust li { border-block-start: 2px solid var(--sea); padding-block-start: 1.15rem; }
.trust h3 { font-size: 1.05rem; margin-block-end: 0.5rem; }
.trust p { color: var(--ink-2); font-size: 0.93rem; }

/* ---- Request access ---- */
.request { display: grid; gap: 3rem; }
@media (min-width: 900px) { .request { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } }
.radios { display: grid; gap: 0.5rem; }
.radios label { display: flex; align-items: center; gap: 0.6rem; font-family: var(--sans); font-size: 0.95rem; letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer; }
.radios input { accent-color: var(--accent); inline-size: 1rem; block-size: 1rem; }
.cf-help { font-size: 0.8rem; color: var(--ink-3); }

/* ==========================================================================
   MOCK PANELS
   ARM has no UI yet, so these are concept visuals rather than screenshots, and
   both say so. They exist to show the one thing the product is meant to be
   famous for: every item takes a position on who owes whom. Colour carries it,
   orange for what you owe and teal for what is owed to you, which is the same
   trick the Storm panels use to make the argument visible before it is read.
   ========================================================================== */
.panel {
  margin-block-start: 3rem;
  max-inline-size: 46rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel__head {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
  align-items: baseline; justify-content: space-between;
  padding: 1rem 1.4rem;
  border-block-end: 1px solid var(--line);
  background: var(--paper-warm);
}
.panel__head b { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 600; }
.panel__head span { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3); }
.panel__foot {
  padding: 0.85rem 1.4rem;
  border-block-start: 1px solid var(--line);
  background: var(--paper-warm);
  font-size: 0.8rem;
  color: var(--ink-3);
}
.panel__foot em { font-family: var(--serif); font-style: italic; color: var(--ink-2); }

/* ---- the message it came out of ---- */
.extract__msg { margin: 0; padding: 1.5rem 1.4rem 1.25rem; }
.extract__msg p { font-family: var(--serif); font-size: 1.1rem; line-height: 1.45; color: var(--ink); }
.extract__msg footer {
  margin-block-start: 0.75rem;
  font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.06em; color: var(--ink-3);
}

.extract__out { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--line); }
.extract__out li,
.planner__row {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr) auto;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.95rem 1.4rem;
}
.extract__out li + li,
.planner__row + .planner__row { border-block-start: 1px solid var(--line); }

.owe {
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.25rem 0.5rem; border-radius: 4px; text-align: center;
  background: var(--accent-soft); color: var(--accent-deep);
}
.owe--them { background: rgba(61, 107, 107, 0.12); color: var(--sea); }
.extract__out span:nth-child(2),
.planner__row span:nth-child(2) { font-size: 0.95rem; }
.extract__out time,
.planner__row time { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); white-space: nowrap; }
.planner__row time.is-late { color: var(--accent-deep); }

/* ---- the planner ---- */
.planner__rows { list-style: none; margin: 0; padding: 0; }
.planner__group {
  padding: 0.9rem 1.4rem 0.5rem;
  font-family: var(--mono); font-size: 0.64rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  border-block-start: 1px solid var(--line);
}
.planner__rows > li:first-child { border-block-start: 0; }
.planner__who { font-size: 0.78rem; color: var(--ink-3); }

@media (prefers-reduced-motion: no-preference) {
  .js .extract__msg, .js .extract__out li, .js .planner__row, .js .planner__group { opacity: 0; }
  .js .panel.is-in .extract__msg { animation: row-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both 0.1s; }
  /* The two directions land separately. Seeing them arrive one at a time is the
     whole point: one message, two commitments, opposite ways round. */
  .js .panel.is-in .extract__out li { animation: row-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .js .panel.is-in .extract__out li:nth-child(1) { animation-delay: 0.75s; }
  .js .panel.is-in .extract__out li:nth-child(2) { animation-delay: 1.15s; }

  .js .panel.is-in .planner__group,
  .js .panel.is-in .planner__row { animation: row-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .js .panel.is-in .planner__rows > li:nth-child(1) { animation-delay: 0.1s; }
  .js .panel.is-in .planner__rows > li:nth-child(2) { animation-delay: 0.2s; }
  .js .panel.is-in .planner__rows > li:nth-child(3) { animation-delay: 0.32s; }
  .js .panel.is-in .planner__rows > li:nth-child(4) { animation-delay: 0.42s; }
  .js .panel.is-in .planner__rows > li:nth-child(5) { animation-delay: 0.52s; }
  .js .panel.is-in .planner__rows > li:nth-child(6) { animation-delay: 0.64s; }
  .js .panel.is-in .planner__rows > li:nth-child(7) { animation-delay: 0.74s; }
}
@keyframes row-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 620px) {
  .extract__out li, .planner__row { grid-template-columns: minmax(0, 1fr) auto; }
  .owe { grid-column: 1 / -1; justify-self: start; }
}

/* ---- Capability strip. No customer logos exist and inventing them is out, so
   this is the same visual slot with honest content. Deliberately quiet: an over
   designed strip here signals there is nothing behind it. ---- */
.capstrip { margin-block-start: 3rem; }
.capstrip p { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-block-end: 1rem; }
.capstrip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; }
.capstrip li { font-family: var(--serif); font-size: 1.05rem; color: var(--ink-2); opacity: 0.55; transition: opacity 0.2s ease; }
.capstrip li:hover { opacity: 1; }
.capstrip li small { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); vertical-align: 0.45em; margin-inline-start: 0.3rem; }

/* ---- The four things ---- */
.four { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.25rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.four li { border-block-start: 2px solid var(--ink); padding-block-start: 1.15rem; }
.four h3 { font-size: 1.15rem; margin-block-end: 0.5rem; }
.four p { color: var(--ink-2); font-size: 0.95rem; }

/* ---- The person record. The deck calls this the most important mock on the
   site, and it is right: one specific record argues the whole product better
   than any amount of description of it. ---- */
.record__top { display: flex; gap: 1rem; align-items: center; padding: 1.5rem 1.4rem 1.25rem; }
.record__ini {
  inline-size: 2.9rem; block-size: 2.9rem; flex: none;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-deep);
  font-family: var(--serif); font-size: 1.05rem;
}
.record__who h3 { font-size: 1.15rem; }
.record__who p { font-size: 0.82rem; color: var(--ink-3); margin-block-start: 0.15rem; }

.record__note { padding: 0 1.4rem 1.25rem; }
.record__note p { color: var(--ink-2); font-size: 0.95rem; }

.record__details { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0 1.4rem 1.4rem; }
.record__details span {
  font-family: var(--mono); font-size: 0.68rem;
  padding: 0.3rem 0.6rem; border-radius: 5px;
  background: rgba(61, 107, 107, 0.1); color: var(--sea);
}
.record__via {
  padding: 0.85rem 1.4rem;
  border-block: 1px solid var(--line);
  background: var(--paper-warm);
  font-size: 0.88rem; color: var(--ink-2);
}
.record__via b { font-weight: 500; color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .js .record__top, .js .record__note, .js .record__details, .js .record__via { opacity: 0; }
  .js .panel.is-in .record__top { animation: row-in 0.5s cubic-bezier(0.22,1,0.36,1) both 0.1s; }
  .js .panel.is-in .record__note { animation: row-in 0.5s cubic-bezier(0.22,1,0.36,1) both 0.3s; }
  .js .panel.is-in .record__details { animation: row-in 0.5s cubic-bezier(0.22,1,0.36,1) both 0.55s; }
  .js .panel.is-in .record__via { animation: row-in 0.5s cubic-bezier(0.22,1,0.36,1) both 0.75s; }
}

/* ---- Integrations ---- */
.integ { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.integ > li { padding: 1.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.integ h3 { font-size: 1.15rem; margin-block-end: 1rem; display: flex; align-items: baseline; gap: 0.6rem; }
.integ h3 small { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); background: var(--accent-soft); padding: 0.2rem 0.45rem; border-radius: 4px; }
.integ ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.integ ul li { font-size: 0.93rem; color: var(--ink-2); }
.integ ul li b { color: var(--ink); font-weight: 500; }
.integ__note { margin-block-start: 2rem; font-size: 0.92rem; color: var(--ink-2); }