/* Swipe Fence public site.
   Design system follows sankakutech.com: a cool grey "desk" with white work
   surfaces, soft shadows, rounded panels and pill buttons. Swipe Fence's own
   colour is the blue-to-cyan ring of its app icon; dark "locked" sections use
   the same ink as the company site.

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

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

:root {
  --font: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
  color-scheme: light;
  --bg: #eceef3;
  --bg-2: #e2e5ed;
  --paper: #ffffff;
  --ink: #15182b;
  --ink-2: #1f2340;
  --muted: #545970;
  --subtle: #6a6f87;
  --line: rgba(21, 24, 43, 0.1);
  --soft-line: rgba(21, 24, 43, 0.14);
  --accent: #3a64f6;
  --accent-2: #2fd3ea;
  --accent-grad: linear-gradient(120deg, #3a64f6 0%, #2fd3ea 100%);
  --accent-tint: #e6ecff;
  --on-dark: rgba(236, 238, 243, 0.78);
  --on-dark-line: rgba(236, 238, 243, 0.18);
  --shadow: 0 1px 0 rgba(21, 24, 43, 0.04), 0 28px 56px -30px rgba(21, 24, 43, 0.42);
  --shadow-lift: 0 1px 0 rgba(21, 24, 43, 0.04), 0 44px 80px -34px rgba(21, 24, 43, 0.55);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --radius: 24px;
  --header-h: 112px;
  --gutter: 40px;
  --container-w: 1280px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.9;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

img {
  max-width: 100%;
}

/* The build inserts <wbr> between Japanese phrases (scripts/site/phrases.py);
   keep-all makes the browser break only there. */
h1,
h2,
h3,
p,
li,
a,
figcaption,
[data-bd] {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

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

.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;
  padding: 10px 16px 0;
  background: linear-gradient(rgba(236, 238, 243, 0.92), rgba(236, 238, 243, 0.78));
  box-shadow: 0 1px 0 var(--line);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
}

/* Two rows, because one row could not say what a link belonged to. The thin
   top row is 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: 2px 10px 8px;
}

.org-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  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: 14px;
  height: 13px;
}

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

.org-links a {
  color: var(--subtle);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  transition: color 0.2s;
}

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

.product-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 1px var(--line);
}

.product-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-right: auto;
  padding: 4px 14px 4px 6px;
  color: var(--ink);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

/* The app's own icon keeps its own corner radius. */
.product-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 7px;
}

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

.nav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background 0.2s, color 0.2s;
}

.nav-links a:hover {
  background: var(--bg);
  color: var(--ink);
}

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

.nav-cta {
  display: inline-flex;
  order: 2;
  align-items: center;
  min-height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background 0.2s, box-shadow 0.3s;
}

.nav-cta:hover,
.nav-cta[aria-current="page"] {
  background: var(--accent);
  box-shadow: 0 10px 22px -12px rgba(58, 100, 246, 0.9);
}

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

.site-footer {
  margin-top: 24px;
  background: transparent;
}

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

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

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

.footer-nav a {
  color: var(--subtle);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}

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

.footer-meta {
  width: 100%;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--subtle);
  font-size: 12px;
  letter-spacing: 0.04em;
}

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

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

.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.kicker::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-grad);
}

.section {
  position: relative;
  /* The product page links down to #mac. */
  scroll-margin-top: var(--header-h);
}

.section-inner {
  padding-block: 100px 108px;
}

.section-head {
  max-width: 46rem;
  margin-bottom: 52px;
}

.section-code {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

.section-code::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-grad);
}

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

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

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

/* Dark "locked" sections: a rounded ink panel floating on the desk. */
.section.dark {
  margin: 0 16px;
  border-radius: 36px;
  background:
    radial-gradient(60% 70% at 85% 10%, rgba(58, 100, 246, 0.35), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(47, 211, 234, 0.16), transparent 70%),
    var(--ink);
  color: #f2f3f8;
  overflow: hidden;
}

.section.dark .section-code {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 1px var(--on-dark-line);
  color: var(--on-dark);
}

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

.accent-band {
  margin: 0 16px;
  border-radius: 36px;
  background: var(--accent-grad);
  color: #fff;
  overflow: hidden;
}

.accent-band .section-code {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: none;
  color: #fff;
}

.accent-band .section-code::before {
  background: #fff;
}

.accent-band .note {
  color: rgba(255, 255, 255, 0.86);
}

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

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

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 14px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-align: center;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.2s;
}

.button:hover {
  background: var(--accent);
  box-shadow: 0 16px 30px -16px rgba(58, 100, 246, 0.9);
  transform: translateY(-2px);
}

.button.secondary {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--soft-line);
  color: var(--ink);
}

.button.secondary:hover {
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--ink);
  color: var(--ink);
}

.section.dark .button {
  background: #fff;
  color: var(--ink);
}

.section.dark .button:hover {
  background: var(--accent-2);
}

.section.dark .button.secondary {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--on-dark-line);
  color: #fff;
}

.section.dark .button.secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1.5px #fff;
}

.app-store-link {
  display: inline-block;
  border-radius: 12px;
  transition: transform 0.4s var(--ease), filter 0.4s;
}

.app-store-link:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 14px 18px rgba(21, 24, 43, 0.28));
}

.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 26px 30px rgba(21, 24, 43, 0.28));
  transition: transform 0.9s var(--ease);
}

.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 30px 34px rgba(0, 0, 0, 0.35));
}

.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(21, 24, 43, 0.18);
  border-radius: 1.6%;
  box-shadow: 0 14px 32px rgba(21, 24, 43, 0.3);
}

.figure-caption {
  margin: 16px 0 0;
  color: var(--subtle);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

/* A real screen shown at a size where its own text stays readable. */
.screen-panel {
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.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(--line);
  color: var(--subtle);
  font-size: 12.5px;
  line-height: 1.7;
}

.section.dark .screen-panel {
  box-shadow: 0 0 0 1px var(--on-dark-line), 0 40px 70px -30px rgba(0, 0, 0, 0.6);
}

.section.dark .screen-panel figcaption {
  border-top-color: var(--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. .page has overflow-x: clip, which trims any overshoot. */
  --hero-bleed: calc((100vw - min(100vw, var(--container-w))) / 2 + var(--gutter));
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: -10vw;
  top: 8vh;
  width: min(62vw, 900px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(47, 211, 234, 0.28), rgba(58, 100, 246, 0.16) 55%, transparent 72%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  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: 30px;
}

.app-icon {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  box-shadow: 0 16px 30px -12px rgba(21, 24, 43, 0.4);
}

.app-identity .kicker {
  margin: 0 0 2px;
  font-size: 12px;
}

.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.02em;
  line-height: 1.26;
}

/* The one highlighted phrase takes the app's ring colours. */
.hl {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

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

/* Hero visual: the photograph itself. Its negative right margin carries it past
   the gutter to the viewport edge, so the picture is cropped by the page. */
.hero-visual {
  min-width: 0;
  margin: 0 calc(-1 * var(--hero-bleed)) 0 0;
}

.hero-shot {
  display: block;
  width: 100%;
  max-width: 860px;
  height: auto;
  margin-left: auto;
  border-radius: 28px 0 0 28px;
  box-shadow: var(--shadow-lift);
  transition: transform 0.9s var(--ease);
}

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

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  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: 10px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.step-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  counter-increment: step-list;
  gap: 14px;
  align-items: start;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line);
  font-size: 14px;
  line-height: 1.85;
}

.step-list li::before {
  content: counter(step-list);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.section.dark .step-list li {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 1px var(--on-dark-line);
  color: var(--on-dark);
}

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

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

.fact-card {
  min-width: 0;
  padding: 28px 28px 30px;
  border-radius: 22px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

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

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

/* Mission catalogue. Two columns so each screen still gets ~600px of width on
   a desktop, which is the size where its own labels stay legible. */
.mission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mission-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border-radius: 26px;
  background: var(--paper);
  box-shadow: var(--shadow);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.mission-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
}

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

.mission-no {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  margin-bottom: 14px;
  padding: 0 8px;
  border-radius: 11px;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
}

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

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

.mission-shot {
  margin: auto 30px 30px;
  overflow: hidden;
  border-radius: 18px;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--line);
}

.mission-shot img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.9s var(--ease);
}

.mission-card:hover .mission-shot img {
  transform: scale(1.03);
}

/* "レポート" is the name of a tab, not of one screen, so each page of it gets
   its own labelled card. */
.report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.report-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-radius: 26px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

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

.report-tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

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

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

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

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

.report-card:hover .device-phone {
  transform: translateY(-8px);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.trust-card {
  min-width: 0;
  padding: 30px 26px 32px;
  border-radius: 22px;
  background: var(--paper);
  box-shadow: var(--shadow);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.trust-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.trust-no {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: var(--accent-grad);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

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

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

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

/* The measure is in em: this heading's font-size is viewport-based. */
.cta-inner h2 {
  max-width: 8em;
  margin: 0;
  font-size: clamp(27px, 3.6vw, 48px);
  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: 40px;
}

.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: 15px;
  line-height: 2.05;
}

.doc {
  padding: 8px 40px;
  border-radius: 28px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

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

.doc-section:last-child {
  border-bottom: 0;
}

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

.doc-section p,
.doc-section li {
  max-width: 44rem;
  color: var(--muted);
  font-size: 14.5px;
  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: 1.5px solid currentColor;
  font-weight: 700;
}

.doc-lead {
  max-width: 46rem;
  margin: 0 0 20px;
  padding: 24px 28px;
  border-radius: 20px;
  background: var(--accent-tint);
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 2.05;
}

.doc-section code {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--bg);
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
}

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

.support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.support-panel {
  min-width: 0;
  padding: 30px 28px 32px;
  border-radius: 22px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

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

.support-panel ul {
  margin: 14px 0 0;
  padding-left: 1.2rem;
  color: var(--muted);
  font-size: 14px;
  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: 40px;
  padding: 44px 46px;
  border-radius: 28px;
  background: var(--ink);
  color: #f2f3f8;
}

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

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

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

.contact-block .button {
  background: #fff;
  color: var(--ink);
}

.contact-block .button:hover {
  background: var(--accent-2);
}

.contact-block .button.secondary {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--on-dark-line);
  color: #fff;
}

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

.mobile-only {
  display: none;
}

/* Scroll reveal, applied by screen-block.js. Content stays visible without JS. */
html[data-reveal-ready] [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}

html[data-reveal-ready] [data-reveal][data-in] {
  opacity: 1;
  transform: none;
}

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

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

  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }

  html[data-reveal-ready] [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

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

  .site-header {
    padding: 8px 10px 0;
  }

  .org-bar {
    padding: 2px 8px 6px;
  }

  /* The products index is one tap from either of the pages the company row
     still offers. */
  .org-links a[href$="/products"] {
    display: none;
  }

  .product-bar {
    border-radius: 24px;
  }

  .product-lockup {
    padding: 4px 12px 4px 4px;
    font-size: 16px;
  }

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

  .nav-links a {
    flex: 1;
    padding: 0 6px;
    font-size: 12.5px;
  }

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

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

  .section.dark,
  .accent-band {
    margin: 0 10px;
    border-radius: 28px;
  }

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

  /* No bottom padding: the photograph is the last thing in the stack. */
  .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: the photograph spans the whole viewport under the copy. */
  .hero-visual {
    margin-inline: calc(-1 * var(--hero-bleed));
  }

  .hero-shot {
    max-width: none;
    border-radius: 0;
  }

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

  /* One column, so each screen keeps roughly the width it had on a desktop. */
  .mission-grid {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .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;
  }

  .doc {
    padding: 4px 28px;
  }
}

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

  body {
    font-size: 14.5px;
  }

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

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

  .org-brand .triangle-mark {
    width: 12px;
    height: 11px;
  }

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

  .product-lockup {
    gap: 8px;
    padding: 2px 10px 2px 2px;
    font-size: 15px;
  }

  .product-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
  }

  .nav-cta {
    min-height: 36px;
    padding: 0 14px;
    font-size: 12.5px;
  }

  .nav-links a {
    min-height: 34px;
    padding: 0 3px;
    font-size: 11px;
    letter-spacing: 0.02em;
  }

  .section-inner {
    padding-block: 56px 60px;
  }

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

  .section.dark,
  .accent-band {
    margin: 0 6px;
    border-radius: 24px;
  }

  .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;
  }

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

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

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

  .step-list li::before {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 12px;
  }

  .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-radius: 0;
    box-shadow: none;
    border-top: 1px solid var(--line);
  }

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

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

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

  .doc {
    padding: 0 14px;
    border-radius: 22px;
  }

  .doc-section {
    padding: 28px 0;
  }

  .doc-section h2 {
    font-size: 17px;
  }

  .doc-lead {
    padding: 20px;
  }

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

  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }

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

/* ------------------------------------------------ documents, not cards */

/* Groups of items are drawn as one document on the desk: a title bar with
   three dots, then cells divided by hairlines. The individual items are no
   longer separate floating cards. */
.fact-grid,
.mission-grid,
.report-grid,
.trust-grid,
.support-grid {
  gap: 1px;
  overflow: hidden;
  border-radius: 18px;
  background: var(--line);
  box-shadow: var(--shadow-lift);
}

.fact-grid::before,
.mission-grid::before,
.report-grid::before,
.trust-grid::before,
.support-grid::before {
  content: "";
  grid-column: 1 / -1;
  height: 34px;
  background:
    radial-gradient(circle at 18px 17px, #d6d9e3 4.5px, transparent 5px),
    radial-gradient(circle at 34px 17px, #d6d9e3 4.5px, transparent 5px),
    radial-gradient(circle at 50px 17px, #d6d9e3 4.5px, transparent 5px),
    #f4f5f8;
}

.fact-card,
.mission-card,
.report-card,
.trust-card,
.support-panel {
  border-radius: 0;
  box-shadow: none;
}

.mission-card:hover,
.trust-card:hover {
  transform: none;
  box-shadow: none;
  background: #fbfbfd;
}

.trust-no {
  background: var(--ink);
}