/* Swipe Fence public site.
   Design system is inherited from sankakutech.com: paper background, 72px grid,
   hairline rules, monospace section codes, heavy Japanese display headings and
   flat lime accents. Product-specific additions are dark "locked" surfaces and
   readable, full-size product screens.

   Breakpoints: 1024px (stack) and 620px (compact). Nothing else. */

/* ---------------------------------------------------------------- tokens */

:root {
  color-scheme: light;
  --bg: #f6f6f1;
  --paper: #ffffff;
  --ink: #16171c;
  --muted: #4a4b47;
  --subtle: #5b5c58;
  --line: #16171c;
  --soft-line: rgba(22, 23, 28, 0.24);
  --accent: #ccff00;
  --on-dark: rgba(246, 246, 241, 0.74);
  --on-dark-line: rgba(246, 246, 241, 0.28);
  --header-h: 86px;
  --gutter: 40px;
  --container-w: 1360px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(rgba(22, 23, 28, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 23, 28, 0.05) 1px, transparent 1px),
    var(--bg);
  background-size: 72px 72px;
  color: var(--ink);
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection {
  background: var(--accent);
  color: var(--ink);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

/* BudouX wraps text in <budoux-ja> and sets keep-all itself. These values keep
   the same behaviour when the script has not run yet. */
h1,
h2,
h3,
p,
li,
a,
figcaption,
budoux-ja {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: clip;
}

.page > main {
  flex: 1;
}

.container {
  width: min(100%, var(--container-w));
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: rgba(246, 246, 241, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

/* Two rows, because one row could not say what a link belonged to. The old
   header put PRODUCT (this app's own front page) next to サンカクテックラボ
   (the company site) with the same weight, so neither label told you whether
   it would keep you inside Swipe Fence or send you to sankakutech.com. The
   thin top row is now entirely the company, and the row below it is entirely
   the app, headed by the app's own name. */
.org-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 24px;
  border-bottom: 1px solid rgba(22, 23, 28, 0.25);
}

.org-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--ink);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

.triangle-mark {
  flex: none;
  width: 20px;
  height: 18px;
}

.org-links {
  display: flex;
  gap: 22px;
}

.org-links a {
  color: var(--subtle);
  font-size: 12px;
  line-height: 1.4;
  transition: color 0.18s;
}

.org-links a:hover {
  color: var(--ink);
}

.product-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.product-lockup {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  margin-right: auto;
  padding: 12px 24px;
  border-right: 1px solid var(--line);
  color: var(--ink);
  font-family: "Archivo", "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-stretch: 70%;
  font-size: 18px;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

/* The one rounded corner on the site: it is the app's icon, and squaring it
   off would misrepresent what the reader sees on their home screen. */
.product-icon {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 6px;
}

.nav-links {
  display: flex;
  order: 1;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border-left: 1px solid var(--line);
  color: var(--subtle);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  transition: background 0.18s, color 0.18s;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  background: var(--ink);
  color: var(--bg);
}

.nav-cta {
  display: inline-flex;
  order: 2;
  align-items: center;
  padding: 0 24px;
  border-left: 1px solid var(--line);
  background: var(--accent);
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.1em;
  transition: background 0.18s, color 0.18s;
}

.nav-cta:hover,
.nav-cta[aria-current="page"] {
  background: var(--ink);
  color: var(--bg);
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  align-items: center;
  justify-content: space-between;
  padding-block: 28px;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.06em;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.footer-nav a {
  color: var(--subtle);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  border-bottom: 1px solid transparent;
}

.footer-nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.footer-meta {
  width: 100%;
  padding-top: 18px;
  border-top: 1px solid var(--soft-line);
  color: var(--subtle);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
}

.apple-legal {
  width: min(100%, var(--container-w));
  margin: 0 auto;
  padding: 0 var(--gutter) 26px;
  color: var(--subtle);
  font-size: 10px;
  line-height: 1.75;
}

/* --------------------------------------------------------- shared blocks */

.kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 12px;
  color: var(--ink);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 11.5px;
  letter-spacing: 0.28em;
}

.kicker::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  background: var(--accent);
  border: 1px solid var(--line);
}

.section {
  border-bottom: 1px solid var(--line);
  /* The product page links down to #mac. Without this the fixed header lands
     on the section's own top rule, and the taller two-row header would have
     left the heading two pixels clear of it. */
  scroll-margin-top: var(--header-h);
}

.section-inner {
  padding-block: 88px 96px;
}

.section-head {
  max-width: 44rem;
  margin-bottom: 48px;
}

.section-code {
  display: block;
  margin-bottom: 18px;
  color: var(--subtle);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 11.5px;
  letter-spacing: 0.28em;
}

h1,
h2,
h3 {
  font-weight: 900;
  letter-spacing: 0.01em;
}

.section h2 {
  margin: 0;
  font-size: clamp(27px, 3.6vw, 46px);
  line-height: 1.38;
}

.section-head p {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 2.05;
}

.section.dark {
  background: var(--ink);
  color: var(--bg);
}

.section.dark .section-code,
.section.dark .section-head p,
.section.dark .figure-caption,
.section.dark .note {
  color: var(--on-dark);
}

.accent-band {
  background: var(--accent);
}

.note {
  margin: 18px 0 0;
  color: var(--subtle);
  font-size: 12.5px;
  line-height: 1.85;
}

.note a,
.section-head p a,
.trust-card a,
.contact-block p a {
  border-bottom: 1px solid currentColor;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 15px 30px;
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--bg);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-align: center;
  transition: background 0.18s, color 0.18s;
}

.button:hover {
  background: var(--accent);
  color: var(--ink);
}

.button.secondary {
  background: transparent;
  color: var(--ink);
}

.button.secondary:hover {
  background: var(--ink);
  color: var(--bg);
}

.section.dark .button {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink);
}

.section.dark .button.secondary {
  border-color: var(--on-dark-line);
  background: transparent;
  color: var(--bg);
}

.section.dark .button.secondary:hover {
  background: var(--bg);
  color: var(--ink);
}

/* App Store availability switch. The single source of truth is
   release-flags.js; markup always ships both states and this rule keeps the
   store badge hidden unless that flag says the app is live. */
.when-app-store-live {
  display: none;
}

[data-app-store="live"] .when-app-store-live {
  display: inline-flex;
}

[data-app-store="live"] .when-app-store-pending {
  display: none;
}

.release-status {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 58px;
  margin: 0;
  padding: 10px 24px;
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--bg);
}

.release-status strong {
  font-size: 15px;
  font-weight: 900;
}

.release-status small {
  color: var(--on-dark);
  font-size: 11px;
  line-height: 1.6;
}

.accent-band .release-status,
.section.dark .release-status {
  border-color: var(--accent);
}

.section.dark .release-status {
  background: transparent;
}

.app-store-link img {
  display: block;
  width: 172px;
  height: auto;
}

/* ------------------------------------------------------- device mockups */

.device-phone,
.device-laptop {
  position: relative;
  margin: 0 auto;
}

.device-phone {
  aspect-ratio: 941 / 1672;
  filter: drop-shadow(0 18px 20px rgba(22, 23, 28, 0.22));
}

.phone-screen,
.phone-hardware,
.laptop-screen,
.laptop-hardware {
  position: absolute;
  display: block;
}

.phone-screen {
  z-index: 1;
  top: 5.9%;
  left: 15.15%;
  width: 69.7%;
  height: 87.85%;
  border-radius: 9% / 4.2%;
  object-fit: cover;
  object-position: top center;
}

.phone-hardware,
.laptop-hardware {
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.device-laptop {
  aspect-ratio: 3 / 2;
  filter: drop-shadow(0 22px 22px rgba(22, 23, 28, 0.22));
}

.laptop-screen {
  z-index: 1;
  top: 11.9%;
  left: 14.7%;
  width: 70.6%;
  height: 70.7%;
  overflow: hidden;
  background: var(--paper);
}

.mac-desktop-wallpaper {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mac-app-window {
  position: absolute;
  z-index: 1;
  top: 11%;
  left: 10%;
  display: block;
  width: 80%;
  height: auto;
  border: 1px solid rgba(22, 23, 28, 0.18);
  border-radius: 1.6%;
  box-shadow: 0 14px 32px rgba(22, 23, 28, 0.3);
}

.figure-caption {
  margin: 14px 0 0;
  color: var(--subtle);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-align: center;
}

/* A real screen shown at a size where its own text stays readable. */
.screen-panel {
  margin: 0;
  border: 1px solid var(--line);
  background: var(--paper);
}

.screen-panel.compact {
  width: min(470px, 100%);
  margin-inline: auto;
}

.screen-panel img {
  display: block;
  width: 100%;
  height: auto;
}

.screen-panel figcaption {
  padding: 14px 20px;
  border-top: 1px solid var(--soft-line);
  color: var(--subtle);
  font-size: 12px;
  line-height: 1.7;
}

.section.dark .screen-panel {
  border-color: var(--on-dark-line);
}

.section.dark .screen-panel figcaption {
  border-top-color: var(--soft-line);
  color: var(--muted);
  background: var(--paper);
}

/* ------------------------------------------------------------ hero */

.hero {
  /* Distance from the edge of .container's content box to the matching edge of
     the viewport, so the hero photograph can run past the gutter and off the
     page. Below --container-w this collapses to the gutter, which is what the
     stacked layout needs on both sides.
     100vw counts the scrollbar, so on a platform with classic scrollbars this
     overshoots by half its width; .page has overflow-x: clip, which trims the
     overshoot at the viewport edge instead of producing a scrollbar. */
  --hero-bleed: calc((100vw - min(100vw, var(--container-w))) / 2 + var(--gutter));
  border-bottom: 1px solid var(--line);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: center;
  padding-block: calc(var(--header-h) + 74px) 84px;
}

.app-identity {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 32px;
}

.app-icon {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(22, 23, 28, 0.16);
}

.app-identity .kicker {
  margin: 0 0 2px;
  font-size: 10px;
  letter-spacing: 0.2em;
}

.app-name {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.hero-title {
  margin: 0;
  font-size: clamp(38px, 4.4vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1.24;
}

/* The lime accent, in the same language sankakutech.com uses in its own hero:
   one phrase of the heading is set on the accent instead of a whole panel being
   filled with it. box-decoration-break: clone keeps the padding on every
   fragment, so the band stays continuous when the phrase wraps. line-height is
   inherited so the band does not push the following lines apart. */
.hl {
  padding: 0.02em 0.26em;
  background: var(--accent);
  line-height: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero-lead {
  max-width: 34rem;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 2;
}

/* Hero visual: the photograph itself, with nothing around it. It is a grid item
   whose negative right margin carries it past the gutter to the viewport edge,
   so the picture is cropped by the page rather than framed by it. Nothing here
   assumes a device composite, so the artwork is a single <img> of any aspect
   ratio. */
.hero-visual {
  min-width: 0;
  margin: 0 calc(-1 * var(--hero-bleed)) 0 0;
}

/* Right-aligned so the cap only ever pulls the left edge in: past roughly
   1700px the column plus the bleed would otherwise scale the photograph beyond
   its 1448px original and let it dominate the copy. */
.hero-shot {
  display: block;
  width: 100%;
  max-width: 860px;
  height: auto;
  margin-left: auto;
}

/* --------------------------------------------------- section layouts */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}

.split-wide {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}

.split .section-head {
  margin-bottom: 0;
}

.split-visual {
  margin: 0;
  min-width: 0;
}

.split-visual figure {
  margin: 0;
}

.stack {
  display: grid;
  gap: 30px;
}

.split-visual .device-phone {
  width: min(300px, 100%);
}

.step-list {
  display: grid;
  counter-reset: step-list;
  gap: 1px;
  margin: 34px 0 0;
  padding: 0;
  border: 1px solid var(--soft-line);
  background: var(--soft-line);
  list-style: none;
}

.step-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  counter-increment: step-list;
  gap: 16px;
  padding: 18px 20px;
  background: var(--bg);
  font-size: 13.5px;
  line-height: 1.85;
}

.step-list li::before {
  content: counter(step-list, decimal-leading-zero);
  color: var(--subtle);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
}

.section.dark .step-list {
  border-color: var(--on-dark-line);
  background: var(--on-dark-line);
}

.section.dark .step-list li {
  background: var(--ink);
  color: var(--on-dark);
}

.section.dark .step-list li::before {
  color: var(--accent);
}

/* What the visitor can change, stated once above the mission catalogue. */
.fact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 64px 0 40px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--line);
  list-style: none;
}

.fact-card {
  min-width: 0;
  padding: 26px 26px 30px;
  background: var(--paper);
}

.fact-card h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

.fact-card p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.95;
}

/* Mission catalogue. Two columns so each screen still gets ~620px of width on
   a desktop, which is the size where its own labels stay legible. The webp
   files are pre-cropped to the content band of the capture, so the cards are
   not mostly empty iOS margin. */
.mission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--line);
  list-style: none;
}

.mission-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: var(--bg);
}

.mission-text {
  padding: 30px 30px 26px;
}

.mission-no {
  display: block;
  margin-bottom: 12px;
  color: var(--subtle);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  letter-spacing: 0.24em;
}

.mission-card h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
}

.mission-card p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.95;
}

.mission-shot {
  margin: auto 30px 30px;
  border: 1px solid var(--soft-line);
}

.mission-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* "レポート" is the name of a tab, not of one screen. Its top page, the 推移
   page reached from it, and the summary that arrives by notification are three
   different things, so each gets its own labelled card instead of sitting in a
   two-up that reads as "the report screen and the other one". The grid takes
   the full column instead of half of a .split, which is what leaves room for
   three phone screens at the same 300px the rest of the page uses. */
.report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.report-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: var(--bg);
}

.report-text {
  padding: 30px 30px 26px;
}

.report-tag {
  display: block;
  margin-bottom: 12px;
  color: var(--subtle);
  font-size: 11.5px;
  letter-spacing: 0.06em;
}

.report-card h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
}

.report-card p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.95;
}

.report-shot {
  margin: auto 30px 30px;
}

.report-shot .device-phone {
  width: min(300px, 100%);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.trust-card {
  min-width: 0;
  padding: 30px 26px 34px;
  background: var(--bg);
  transition: background 0.18s;
}

.trust-card:hover {
  background: var(--accent);
}

.trust-no {
  display: block;
  margin-bottom: 16px;
  font-family: "Archivo", "Noto Sans JP", sans-serif;
  font-size: 34px;
  font-stretch: 62%;
  font-weight: 900;
  line-height: 1;
}

.trust-card h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
}

.trust-card p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.95;
}

.cta-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 60px;
  align-items: center;
  justify-content: space-between;
  padding-block: 76px;
}

/* The measure is in em, not rem: this heading's font-size is viewport-based,
   so a root-relative box stops matching the type once the clamp reaches its
   cap and BudouX's longest phrase no longer fits on one line. 8em keeps two
   short lines at every width while staying wider than the longest phrase. */
.cta-inner h2 {
  max-width: 8em;
  margin: 0;
  font-size: clamp(27px, 3.6vw, 46px);
  line-height: 1.38;
}

/* -------------------------------------------------------- document pages */

.page-wrap {
  width: min(100%, 1000px);
  margin: 0 auto;
  padding: calc(var(--header-h) + 66px) var(--gutter) 96px;
}

.page-title {
  margin-bottom: 44px;
}

.page-title h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.34;
}

.page-title p {
  max-width: 42rem;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 2.05;
}

.doc {
  border-top: 1px solid var(--line);
}

.doc-section {
  scroll-margin-top: calc(var(--header-h) + 24px);
  padding: 40px 0;
  border-bottom: 1px solid var(--soft-line);
}

.doc-section h2 {
  max-width: 34rem;
  margin: 0;
  font-size: 21px;
  line-height: 1.6;
}

.doc-section p,
.doc-section li {
  max-width: 42rem;
  color: var(--muted);
  font-size: 14px;
  line-height: 2.05;
}

.doc-section p {
  margin: 14px 0 0;
}

.doc-section ul,
.doc-section ol {
  margin: 14px 0 0;
  padding-left: 1.3rem;
}

.doc-section li {
  margin-top: 6px;
}

.doc-section a {
  border-bottom: 1px solid currentColor;
}

.doc-lead {
  max-width: 46rem;
  margin: 0 0 8px;
  padding: 26px 30px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  font-size: 14px;
  line-height: 2.05;
}

/* Guide: instructions on the left, a real screen on the right when the step
   needs one. Steps handled entirely by Apple's own UI ship without figures. */
.guide {
  counter-reset: guide-step;
}

.guide-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  counter-increment: guide-step;
  gap: 40px;
  scroll-margin-top: calc(var(--header-h) + 24px);
  padding: 48px 0;
  border-bottom: 1px solid var(--soft-line);
}

.guide-step.has-figure {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: start;
}

.guide-step h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1.6;
}

.guide-step h2::before {
  content: "STEP " counter(guide-step);
  display: block;
  margin-bottom: 8px;
  color: var(--subtle);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  line-height: 1.4;
}

.guide-step p,
.guide-step li {
  max-width: 42rem;
  color: var(--muted);
  font-size: 14px;
  line-height: 2.05;
}

.guide-step p {
  margin: 14px 0 0;
}

.guide-step ol,
.guide-step ul {
  margin: 16px 0 0;
  padding-left: 1.3rem;
}

.guide-step li {
  margin-top: 6px;
}

.guide-step .device-phone {
  width: min(260px, 100%);
}

.guide-figure {
  margin: 0;
}

.guide-figure + .guide-figure {
  margin-top: 32px;
}

.guide-figure > img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--soft-line);
  background: var(--paper);
}

.guide-figure figcaption {
  margin-top: 12px;
  color: var(--subtle);
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}

.test-label {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  background: var(--accent);
  color: var(--ink);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.2;
}

.release-meta {
  margin: 18px 0 0;
  color: var(--subtle);
  font-size: 12px;
  line-height: 1.9;
}

.release-meta code,
.doc-section code,
.guide-step code {
  padding: 2px 6px;
  border: 1px solid var(--soft-line);
  background: var(--bg);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 11.5px;
}

.mobile-download-note {
  display: block;
  max-width: 42rem;
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: rgba(204, 255, 0, 0.24);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.85;
}

/* --------------------------------------------------------- support page */

.support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.support-panel {
  min-width: 0;
  padding: 30px 28px 34px;
  background: var(--paper);
}

.support-panel h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
}

.support-panel ul {
  margin: 16px 0 0;
  padding-left: 1.2rem;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 2;
}

.support-panel li {
  margin-top: 6px;
}

.contact-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
  gap: 48px;
  align-items: center;
  margin-top: 48px;
  padding: 44px 46px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.contact-block h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.55;
}

.contact-block p {
  max-width: 40rem;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 2;
}

.contact-block .actions {
  display: grid;
  gap: 12px;
  margin-top: 0;
}

/* ------------------------------------------------------- redirect stubs */

.redirect-card {
  width: min(100%, 720px);
  margin: 0 auto;
  padding: calc(var(--header-h) + 80px) var(--gutter) 90px;
}

.redirect-card h1 {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.4;
}

.redirect-card p {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 2;
}

/* --------------------------------------------------------- utilities */

.mobile-only {
  display: none;
}

/* --------------------------------------------------------- breakpoints */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media (max-width: 1024px) {
  :root {
    --header-h: 125px;
    --gutter: 26px;
  }

  .org-bar {
    padding: 7px 18px;
  }

  /* Two links plus the company name do not fit next to the app name once the
     nav wraps, and the products index is one tap from either of the pages the
     company row still offers. */
  .org-links a[href$="/products"] {
    display: none;
  }

  .product-lockup {
    padding: 11px 18px;
    font-size: 17px;
  }

  .nav-links {
    order: 3;
    flex: 1 0 100%;
    border-top: 1px solid var(--line);
  }

  .nav-links a {
    flex: 1;
    padding: 11px 6px;
    font-size: 10.5px;
    letter-spacing: 0.1em;
  }

  .nav-links a:first-child {
    border-left: 0;
  }

  .nav-cta {
    order: 0;
    padding: 0 20px;
  }

  .section-inner {
    padding-block: 66px 72px;
  }

  .hero-inner,
  .split,
  .split-wide,
  .contact-block,
  .guide-step.has-figure {
    grid-template-columns: minmax(0, 1fr);
  }

  /* No bottom padding: the photograph is the last thing in the stack and runs
     to both edges, so it should meet the hero's bottom rule rather than float
     above a strip of paper. */
  .hero-inner {
    gap: 48px;
    padding-block: calc(var(--header-h) + 52px) 0;
  }

  .hero-title {
    max-width: none;
  }

  .split {
    gap: 44px;
  }

  .split-visual .device-phone {
    width: min(280px, 78vw);
  }

  /* Stacked: with no column to sit in, the photograph spans the whole viewport
     under the copy. Below --container-w the bleed is exactly the gutter, so the
     same value pulls it out on both sides. */
  .hero-visual {
    margin-inline: calc(-1 * var(--hero-bleed));
  }

  .hero-shot {
    max-width: none;
  }

  .fact-grid {
    margin: 48px 0 36px;
  }

  /* One column, so each screen keeps roughly the width it had on a desktop
     instead of shrinking to a size where its own labels stop being readable.
     The cap stops a tablet-width card from blowing one phone screen up to
     650px, which would make the page pointlessly long. */
  .mission-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mission-shot {
    width: min(460px, 100%);
    margin: auto auto 30px;
  }

  /* Same reason as the mission grid: three phone screens side by side below
     this width leave each one too small for its own numbers to be read. */
  .report-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .report-shot .device-phone {
    width: min(360px, 72vw);
  }

  .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cta-inner {
    padding-block: 60px;
  }

  .cta-inner > * {
    flex: 1 0 100%;
  }

  .support-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-block {
    padding: 34px 26px;
    gap: 32px;
  }

  .guide-step .device-phone {
    width: min(260px, 72vw);
  }
}

@media (max-width: 620px) {
  :root {
    --header-h: 112px;
    --gutter: 20px;
  }

  body {
    font-size: 14.5px;
  }

  .org-bar {
    gap: 12px;
    padding: 6px 14px;
  }

  .org-brand {
    gap: 8px;
    font-size: 12px;
  }

  .org-brand .triangle-mark {
    width: 17px;
    height: 15px;
  }

  .org-links a {
    font-size: 11.5px;
  }

  .product-lockup {
    gap: 9px;
    padding: 10px 14px;
    font-size: 15px;
  }

  .product-icon {
    width: 22px;
    height: 22px;
    border-radius: 5px;
  }

  .nav-cta {
    padding: 0 15px;
    font-size: 12px;
  }

  .nav-links a {
    padding: 10px 3px;
    font-size: 9.5px;
    letter-spacing: 0.06em;
  }

  .section-inner {
    padding-block: 54px 58px;
  }

  .section-head {
    margin-bottom: 34px;
  }

  .app-identity {
    gap: 13px;
    margin-bottom: 24px;
  }

  .app-icon {
    width: 58px;
    height: 58px;
    border-radius: 13px;
  }

  .app-name {
    font-size: 20px;
  }

  .hero-title {
    font-size: clamp(31px, 8.6vw, 40px);
  }

  .hero-lead {
    margin-top: 22px;
  }

  .actions {
    display: grid;
    margin-top: 28px;
  }

  .release-status,
  .app-store-link,
  .button {
    width: 100%;
  }

  .app-store-link img {
    width: 158px;
  }

  .step-list li {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    padding: 15px 14px;
  }

  .fact-grid {
    grid-template-columns: minmax(0, 1fr);
    margin: 36px 0 28px;
  }

  .fact-card {
    padding: 22px 20px 24px;
  }

  .mission-text,
  .report-text {
    padding: 24px 20px 20px;
  }

  .report-shot {
    margin: auto 20px 26px;
  }

  /* Full-bleed inside the card: at this width every pixel of image width
     counts towards the screen staying readable. */
  .mission-shot {
    width: 100%;
    margin: auto 0 0;
    border-inline: 0;
    border-bottom: 0;
  }

  .trust-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cta-inner {
    padding-block: 48px;
  }

  .page-wrap {
    padding-bottom: 70px;
  }

  .doc-section,
  .guide-step {
    padding: 30px 0;
  }

  .guide-step h2,
  .doc-section h2 {
    font-size: 19px;
  }

  .doc-lead {
    padding: 22px 20px;
  }

  .support-panel,
  .contact-block {
    padding: 24px 20px 28px;
  }

  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }

  .actions .mobile-only {
    display: inline-flex;
  }
}