/* strands-arm landing (docs/overrides/home.html + docs/index.md). Full bleed, 12 columns, two lights. */

/* the wrapper: undo Material's grid on this page only */
.md-main__inner:has(> .arm-home) { max-width: none; margin: 0; }
.arm-home { flex: 1 1 auto; min-width: 0; }
.arm-home .md-content__inner { margin: 0; padding: 0; }
.arm-home .md-content__inner::before { display: none; }
.arm-home > .md-content__inner > section, .arm-home .arm-s { padding: clamp(3rem, 6vw, 5.5rem) clamp(1rem, 4vw, 3rem); }
.arm-wrap { max-width: 80rem; margin: 0 auto; }

/* build-order bar, in place of the tabs */
.arm-topnav { background: var(--arm-bg); border-bottom: 1px solid var(--arm-hairline); }
.arm-topnav__inner { max-width: 80rem; margin: 0 auto; display: flex; gap: clamp(1rem, 3vw, 2.4rem); padding: 0 clamp(1rem, 4vw, 3rem); height: 2.4rem; align-items: center; overflow-x: auto; scrollbar-width: none; }
.arm-topnav a { font: 500 .78rem/1 "Space Grotesk", "Space Grotesk Fallback", system-ui, sans-serif; color: var(--md-default-fg-color--light); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; height: 100%; border-bottom: 2px solid transparent; transition: color var(--arm-t) var(--arm-ease), border-color var(--arm-t) var(--arm-ease); }
.arm-topnav a i { font: 600 .6rem/1 var(--arm-mono); color: var(--arm-steel); letter-spacing: .08em; font-style: normal; }
.arm-topnav a:hover, .arm-topnav a:focus-visible { color: var(--arm-tilt); border-bottom-color: var(--arm-tilt); }
.arm-topnav a.why { margin-left: auto; color: var(--arm-pan); }
.arm-topnav a.why:hover { color: var(--arm-tilt); }

/* 1. hero: the viewer is the page; the claim sits on it */
.arm-hero { position: relative; height: clamp(34rem, 80vh, 56rem); padding: 0 !important; background: var(--arm-bg); overflow: hidden; }
.arm-hero iframe.viewer.hero { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; border: 0; border-radius: 0; }
.arm-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,11,13,0) 0%, rgba(11,11,13,.55) 45%, rgba(11,11,13,.92) 100%); }
.arm-hero__copy { position: absolute; left: clamp(1rem, 4vw, 3rem); right: clamp(1rem, 4vw, 3rem); bottom: clamp(1.4rem, 4vh, 3rem); z-index: 2; max-width: 80rem; margin: 0 auto; pointer-events: none; }
.arm-hero__copy > * { pointer-events: auto; }
.arm-eyebrow { font: 600 .68rem/1.4 var(--arm-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--arm-steel); margin: 0 0 .9rem; display: flex; gap: .6rem; align-items: center; }
.arm-eyebrow::before { content: ""; width: 1.6rem; height: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--arm-pan) 0 50%, var(--arm-tilt) 50% 100%); }
.md-typeset h1.arm-display { font-size: clamp(2.4rem, 1.4rem + 4vw, 4.6rem); line-height: 1.02; letter-spacing: -.03em; font-weight: 700; color: var(--arm-bone); margin: 0 0 .9rem; max-width: 14ch; text-wrap: balance; }
.md-typeset h1.arm-display em { font-style: normal; color: var(--arm-tilt); }
.arm-hero .lede { font-size: clamp(.95rem, .85rem + .4vw, 1.2rem); line-height: 1.45; color: var(--md-default-fg-color); max-width: 44ch; margin: 0 0 1.4rem; }
.arm-hint { position: absolute; right: clamp(1rem, 4vw, 3rem); top: 1rem; z-index: 2; font: 500 .62rem/1 var(--arm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--arm-steel); pointer-events: none; }

/* buttons: amber fill is the primary, pan hairline the secondary */
.arm-cta { display: flex; gap: .6rem; flex-wrap: wrap; }
.md-typeset .arm-btn { display: inline-flex; align-items: center; gap: .5rem; font: 600 .8rem/1 "Space Grotesk", "Space Grotesk Fallback", system-ui, sans-serif; letter-spacing: .01em; padding: .85rem 1.25rem; border-radius: 8px; text-decoration: none; border: 1px solid transparent;
  transition: background var(--arm-t) var(--arm-ease), color var(--arm-t) var(--arm-ease), border-color var(--arm-t) var(--arm-ease), transform var(--arm-t) var(--arm-ease); }
.md-typeset .arm-btn.primary { background: var(--arm-tilt); color: #0b0b0d; }
.md-typeset .arm-btn.primary:hover, .md-typeset .arm-btn.primary:focus-visible { background: #ffc233; color: #0b0b0d; transform: translateY(-1px); }
.md-typeset .arm-btn.ghost { color: var(--arm-bone); border-color: rgba(106,140,255,.55); background: rgba(11,11,13,.5); backdrop-filter: blur(6px); }
.md-typeset .arm-btn.ghost:hover, .md-typeset .arm-btn.ghost:focus-visible { color: var(--arm-pan); border-color: var(--arm-pan); transform: translateY(-1px); }
.md-typeset .arm-btn i { font: 600 .62rem/1 var(--arm-mono); letter-spacing: .06em; font-style: normal; opacity: .75; }

/* section labels and headings on the landing */
.arm-home .md-typeset .arm-label { font: 600 .68rem/1.4 var(--arm-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--arm-steel); margin: 0 0 1rem; display: flex; gap: .6rem; align-items: center; }
.arm-home .md-typeset .arm-label::before { content: ""; width: 1.6rem; height: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--arm-pan) 0 50%, var(--arm-tilt) 50% 100%); }
.arm-home .md-typeset h2 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 1rem; padding: 0; max-width: 22ch; }
.arm-home .md-typeset h2::after { display: none; }
.arm-home .md-typeset p { font-size: .92rem; line-height: 1.6; }

/* 2. three beats: photo and words, 5/7, alternating */
.arm-beats { display: grid; gap: clamp(2.5rem, 5vw, 5rem); margin-top: 2rem; }
.arm-beat { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.arm-beat:nth-child(even) .arm-beat__img { order: 2; }
.arm-beat__img { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--arm-hairline); background: #101013; aspect-ratio: 4 / 3; }
.arm-beat__img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.92); }
.arm-beat__img::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 80px rgba(0,0,0,.45); pointer-events: none; }
.arm-beat__img figcaption { position: absolute; left: .8rem; bottom: .6rem; font: 500 .62rem/1.3 var(--arm-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--arm-bone); background: rgba(11,11,13,.7); padding: .3rem .5rem; border-radius: 4px; }
.arm-beat__n { font: 600 .68rem/1 var(--arm-mono); color: var(--arm-tilt); letter-spacing: .1em; margin-bottom: .8rem; display: block; }
.arm-home .md-typeset .arm-beat h3 { font-size: clamp(1.25rem, 1rem + .8vw, 1.7rem); line-height: 1.15; letter-spacing: -.015em; margin: 0 0 .7rem; color: var(--arm-bone); }
.arm-beat p { max-width: 48ch; color: var(--md-default-fg-color--light); }
.arm-beat p a { color: var(--arm-tilt); }

/* 3. numbers strip: four big mono figures on hairlines */
.arm-s.dark { background: #0d0d10; border-top: 1px solid var(--arm-hairline); border-bottom: 1px solid var(--arm-hairline); }
.arm-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 0; padding: 0; text-transform: none; letter-spacing: 0; color: inherit; font-size: inherit; }
.arm-strip span { display: flex; flex-direction: column; gap: .5rem; padding: 1.4rem clamp(1rem, 2.5vw, 2.4rem); border-left: 1px solid var(--arm-hairline); font: 500 .74rem/1.4 var(--arm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--arm-steel); }
.arm-strip span:first-child { border-left: 0; padding-left: 0; }
.arm-strip b { font: 600 clamp(2.2rem, 1.4rem + 3vw, 3.6rem)/1 var(--arm-mono); color: var(--arm-bone); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.arm-strip b.n-done, .arm-strip b:not([data-n]) { color: var(--arm-bone); }
.arm-strip span b + small { display: none; }
.arm-src { margin-top: 1.2rem !important; font: 500 .66rem/1.5 var(--arm-mono) !important; color: var(--arm-steel); letter-spacing: .04em; }
.arm-src a { color: var(--arm-steel); text-decoration-color: var(--arm-hairline); }

/* 4. the path: four cards, numbered, are the nav */
.arm-path { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-top: 1.5rem; }
.arm-path a { display: flex; flex-direction: column; gap: .6rem; padding: 1.2rem 1.2rem 1.3rem; border: 1px solid var(--arm-hairline); border-radius: 12px; background: #101013; color: inherit; text-decoration: none; position: relative; overflow: hidden;
  transition: border-color var(--arm-t) var(--arm-ease), transform var(--arm-t) var(--arm-ease), box-shadow var(--arm-t) var(--arm-ease); }
.arm-path a::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--arm-pan), var(--arm-tilt)); opacity: 0; transition: opacity var(--arm-t) var(--arm-ease); }
.arm-path a:hover, .arm-path a:focus-visible { border-color: rgba(255,176,0,.6); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.arm-path a:hover::before, .arm-path a:focus-visible::before { opacity: 1; }
.arm-path img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: #0b0b0d; display: block; border: 1px solid var(--arm-hairline); }
.arm-path i { font: 600 .66rem/1 var(--arm-mono); letter-spacing: .1em; color: var(--arm-tilt); font-style: normal; }
.arm-home .md-typeset .arm-path h3 { font-size: 1.1rem; margin: 0; line-height: 1.2; color: var(--arm-bone); letter-spacing: -.01em; }
.arm-path p { margin: 0; font-size: .8rem !important; color: var(--md-default-fg-color--light); }
.arm-path a > span { margin-top: auto; font: 600 .7rem/1 "Space Grotesk", "Space Grotesk Fallback", system-ui, sans-serif; color: var(--arm-tilt); }

/* 5. what you need: the table, two columns, mono figures */
.arm-need { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.arm-home .md-typeset .arm-need table:not([class]) { display: table; width: 100%; font-size: .82rem; margin: 0; }
.arm-home .md-typeset .arm-need th { font: 600 .68rem/1.4 var(--arm-mono); letter-spacing: .1em; text-transform: uppercase; }
.arm-home .md-typeset .arm-need th:last-child { color: var(--arm-tilt); }
.arm-home .md-typeset .arm-need td { font-family: "Space Grotesk", "Space Grotesk Fallback", system-ui, sans-serif; vertical-align: top; }
.arm-home .md-typeset .arm-need td code { font-size: .8em; }

/* 6. where it stands: two columns, dated */

/* signal path */
.arm-home .md-typeset pre.arm-signal { margin: 1.5rem 0 0; }
.arm-home .md-typeset pre.arm-signal > code { font-size: .74rem; line-height: 1.7; padding: 1.2rem 1.4rem; color: var(--md-default-fg-color--light); }

/* footer */
.arm-foot { border-top: 1px solid var(--arm-hairline); background: var(--arm-bg); }
.arm-foot__inner { max-width: 80rem; margin: 0 auto; padding: 2.4rem clamp(1rem, 4vw, 3rem) 2.8rem; display: grid; gap: .6rem; }
.arm-foot__mark { display: flex; align-items: center; gap: .6rem; color: var(--arm-bone); font-weight: 600; letter-spacing: .02em; }
.arm-foot__mark svg { width: 1.8rem; height: 1.8rem; }
.arm-foot p { margin: 0; color: var(--md-default-fg-color--light); font-size: .85rem; }
.arm-foot__meta { font: 500 .68rem/1.6 var(--arm-mono) !important; color: var(--arm-steel) !important; letter-spacing: .04em; }
.arm-foot__meta a { color: var(--arm-tilt); text-decoration: underline; text-decoration-color: var(--arm-tilt-dim); text-underline-offset: .18em; }  /* colour alone is 1.9:1 against the steel line */

/* the landing keeps no doc chrome */
.arm-home ~ .md-sidebar, .md-main__inner:has(> .arm-home) > .md-sidebar { display: none; }

@media (max-width: 76em) {
  .arm-path { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 60em) {
  .arm-beat, .arm-beat:nth-child(even) { grid-template-columns: 1fr; }
  .arm-beat:nth-child(even) .arm-beat__img { order: 0; }
  .arm-need { grid-template-columns: 1fr; }
  .arm-strip { grid-template-columns: repeat(2, 1fr); row-gap: 1.2rem; }
  .arm-strip span:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 44em) {
  /* phones: the copy no longer sits on top of the model. Model first at a fixed height, then the words in normal flow,
     so nothing hides under the header or falls off the bottom (at 390x844 the overlaid copy lost its eyebrow and a CTA). */
  .arm-hero { height: auto; display: flex; flex-direction: column; }
  .arm-hero iframe.viewer.hero { position: relative; inset: auto; height: 17rem; flex: none; }
  .arm-hero::after { display: none; }
  .arm-hero__copy { position: relative; left: auto; right: auto; bottom: auto; padding: 1.1rem 1rem 1.6rem; }
  .md-typeset h1.arm-display { font-size: clamp(2rem, 1.2rem + 5.5vw, 2.6rem); max-width: 12ch; }
  .arm-hero .lede { font-size: .92rem; max-width: 34ch; }
  .arm-hint { display: none; }
  .arm-path { grid-template-columns: 1fr; }
  .arm-strip span { padding: 0 0 0 1rem; }
  .arm-strip span:first-child, .arm-strip span:nth-child(3) { padding-left: 0; }
  .arm-topnav a i { display: none; }
  .arm-topnav a.why { display: none; }
  .arm-topnav__inner { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .md-typeset .arm-btn, .arm-path a, .arm-topnav a { transition: none; }
}

/* grid children may shrink below their content (a wide <pre> or table scrolls inside its cell instead of pushing the page) */
.arm-home .md-typeset pre > code { overflow-x: auto; }
.arm-home .md-typeset table:not([class]) { display: block; overflow-x: auto; }
@media (min-width: 60em) { .arm-home .md-typeset .arm-need table:not([class]) { display: table; } }

/* renders with a caption baked into the bottom of the png: frame them so the figure caption is the only caption */
.arm-beat__img img.step, .arm-path img.step { object-position: 50% 28%; transform: scale(1.16); transform-origin: 50% 35%; }

/* poster in place of the hero scene on phones / save-data (design.js hero()) */
.arm-hero__poster { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; background: var(--arm-bg); cursor: pointer; display: block; width: 100%; height: 100%; }
.arm-hero__poster img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.arm-hero__poster span { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); white-space: nowrap; padding: .5rem .9rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(11,11,13,.78); color: var(--arm-bone, #f2f2f0); font: 500 .7rem/1.3 var(--arm-mono); letter-spacing: .06em; }
.arm-hero__poster span b { display: block; font-weight: 600; color: var(--arm-tilt); }
.arm-hero__poster:focus-visible { outline: 2px solid var(--arm-tilt); outline-offset: -4px; }
@media (max-width: 60em) { .arm-hero__poster { position: relative; inset: auto; height: 17rem; flex: none; } .arm-hero iframe.viewer.hero[data-src] { display: none; } }