/* Seige homepage. One system: graphite ground, warm paper for the privacy
   chapter, Seige coral for action and sage for the account. DM Sans
   throughout; display sizes are set tight but never touching. */
.seige-home {
  --bg: #101113;
  --surface: #17181c;
  --surface-2: #1d1f23;
  --line: #ffffff1c;
  --line-strong: #ffffff30;
  --text: #f4f2ed;
  --muted: #b3b8b4;
  --faint: #8d938f;
  --sage: #a8bab5;
  --sage-deep: #2b4237;
  --paper: #ebe7df;
  --paper-2: #f5f2ec;
  --ink: #1c2420;
  --header-h: 96px;
  background: var(--bg);
  color: var(--text);
  font-family: "DM Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Glide to the section a header link names; jump when motion is reduced. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
.wrap {
  width: min(1280px, calc(100% - 96px));
  margin-inline: auto;
}
.seige-home :focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 4px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 20px;
  top: 0;
  z-index: 20;
  transform: translateY(-120%);
  padding: 14px 16px;
  background: var(--text);
  color: var(--bg);
}
.skip-link:focus {
  transform: none;
}

/* Header. It stays at the top while the page scrolls, so Log in and the
   section links are always one click away. The top --header-tuck pixels
   slide out of view when it sticks, which shortens it without changing the
   layout. Where scroll-driven animation is supported, its backdrop and
   hairline appear only once the page has moved. */
.home-header {
  --header-tuck: 26px;
  position: sticky;
  top: calc(-1 * var(--header-tuck));
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: var(--header-h);
  padding: var(--header-tuck) max(48px, calc((100% - 1280px) / 2)) 0;
  background: var(--bg);
}
@supports (animation-timeline: scroll()) {
  .home-header {
    background: transparent;
    animation: header-stuck linear both;
    animation-timeline: scroll();
    animation-range: 0 72px;
  }
}
@keyframes header-stuck {
  to {
    background: #101113e0;
    box-shadow: 0 1px 0 var(--line);
    backdrop-filter: blur(14px) saturate(1.3);
  }
}
/* The same look where scroll timelines are missing: home.js sets
   data-scrolled from an observer. Without the script it stays opaque. */
.home-header[data-scrolled="false"] {
  background: transparent;
}
.home-header[data-scrolled="true"] {
  background: #101113e0;
  box-shadow: 0 1px 0 var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}
@media (prefers-reduced-motion: no-preference) {
  .home-header[data-scrolled] {
    transition:
      background-color 240ms,
      box-shadow 240ms;
  }
}
.scroll-top-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 72px;
  pointer-events: none;
  visibility: hidden;
}
html:has(.seige-home) {
  scroll-padding-top: 86px;
}
.seige-home main {
  overflow-x: clip;
}
.seige-home .home-link.seige-brand,
.seige-home .home-link.seige-brand:visited {
  color: var(--coral);
}
.seige-home .seige-brand .logo-wall {
  fill: var(--coral);
}
.home-nav {
  display: flex;
  gap: 36px;
}
.home-nav a,
.header-login {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 17px;
  font-weight: 500;
  color: #e9e8e3;
}
.home-nav a:hover {
  color: var(--coral);
}
.header-login {
  gap: 10px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
}
.header-login:hover {
  border-color: #ff8f7380;
  background: #ff8f7312;
}
.mobile-menu {
  display: none;
  position: relative;
}
.mobile-menu summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
  list-style: none;
}
.mobile-menu summary::-webkit-details-marker {
  display: none;
}
.mobile-menu nav {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  display: grid;
  min-width: 200px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 18px 40px #0008;
}
.mobile-menu nav a {
  padding: 12px;
  border-radius: 8px;
  font-size: 17px;
}
.mobile-menu nav a:hover {
  background: #ffffff0d;
}

/* Buttons and links. ↗ leaves seige.ai; → stays on it. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  transition:
    background 160ms,
    color 160ms;
}
.button-primary {
  color: #2a170f;
  background: var(--coral);
}
.button-primary:hover {
  color: #2a170f;
  background: #ffae98;
}
.button-quiet {
  color: var(--text);
  background: #ffffff0f;
  box-shadow: inset 0 0 0 1px var(--line);
}
.button-quiet:hover {
  color: var(--text);
  background: #ffffff1a;
}
.button-light {
  color: var(--ink);
  background: var(--paper);
}
.button-light:hover {
  color: var(--ink);
  background: #fff;
}
.text-link,
.inline-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 17px;
  font-weight: 500;
}
.button span[aria-hidden="true"],
.header-login span[aria-hidden="true"],
.text-link span[aria-hidden="true"],
.inline-link span[aria-hidden="true"],
.builder-guide span[aria-hidden="true"] {
  display: inline-block;
  line-height: 1;
  transition: translate 160ms;
}
.button:hover span[aria-hidden="true"],
.text-link:hover span[aria-hidden="true"],
.inline-link:hover span[aria-hidden="true"] {
  translate: 2px 0;
}

/* Headings are set in Archivo, the face of the Seige wordmark: heavy,
   tight and plain. No accent colours inside a heading. */
.section-head h2,
.home-hero h1,
.home-closing h2,
.builder-heading h2,
.questions h2 {
  margin: 0;
  font-family: Archivo, "DM Sans", sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.section-head h2 {
  max-width: 15em;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.04;
}
.section-head p {
  max-width: 620px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Hero: the promise on the left, the moment it is kept on the right. Always
   fits the viewport it is shown in. */
.home-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 88px);
  min-height: calc(100svh - var(--header-h));
  padding-block: clamp(8px, 2svh, 24px) clamp(24px, 5svh, 56px);
}
.home-hero h1 {
  max-width: 9.5em;
  font-size: clamp(48px, min(6.2vw, 11svh), 104px);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.045em;
}
/* One sentence per line, so "The" never strands at the end of the first. */
.home-hero h1 span {
  display: block;
  text-wrap: balance;
}
.hero-description {
  max-width: 520px;
  margin: clamp(18px, 3.4svh, 34px) 0 0;
  color: #d2d5d2;
  font-size: clamp(17px, min(1.5vw, 2.6svh), 20px);
  line-height: 1.55;
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(20px, 4svh, 36px);
}
.hero-note {
  margin: 14px 0 0;
  color: var(--faint);
  font-size: 14px;
}

/* The hero figure: apps standing on the account that holds their data,
   drawn as the Seige wall. Once, on load, each app's line drops into its
   own folder. */
.plug {
  --drop: 44px;
  position: relative;
  isolation: isolate;
  margin: 0;
}
/* One light in the hero, falling from above onto the account's wall. It is
   the only lit thing on the page, so the eye lands where the data lives. */
.plug::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -30%;
  right: -30%;
  top: -340px;
  height: calc(100% + 340px);
  background: conic-gradient(
    from 148deg at 50% 0%,
    #f3f1ec00 0deg,
    #f3f1ec10 18deg,
    #f3f1ec21 32deg,
    #f3f1ec10 46deg,
    #f3f1ec00 64deg,
    #f3f1ec00
  );
  -webkit-mask: linear-gradient(#0000, #000 45%, #000 70%, #0000);
  mask: linear-gradient(#0000, #000 45%, #000 70%, #0000);
  filter: blur(10px);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .plug::before {
    animation: plug-light 1.4s 150ms ease-out both;
  }
}
@keyframes plug-light {
  from {
    opacity: 0;
    scale: 0.6 1;
  }
}
.plug svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.plug ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.plug-apps,
.plug-folders {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.plug-apps {
  position: relative;
  z-index: 1;
}
.plug-apps li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 10px;
  /* Dashed, like the other illustration controls, so the example apps do
     not read as buttons. */
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--surface-2);
  cursor: default;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
/* The wire runs from the app, over the wall, into its folder. A short beam
   travels down it now and then, and the folder answers when it lands: what an
   app saves goes into its own folder and nowhere else. */
.plug-apps li {
  --wire: calc(var(--drop) + var(--wall-depth) + 22px);
}
.plug-apps li::after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(50% - 1px);
  height: var(--wire);
  border-left: 2px dotted #ff8f738c;
  transform-origin: top;
}
.plug-apps li::before {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(50% - 1px);
  width: 2px;
  height: 30px;
  border-radius: 2px;
  background: linear-gradient(#ff8f7300, var(--coral) 60%, #ffe3d9);
  box-shadow: 0 6px 10px #ff8f7366;
  opacity: 0;
  pointer-events: none;
}
.plug-account {
  display: grid;
  gap: 12px;
  margin-top: var(--drop);
  padding: calc(var(--wall-depth) + 22px) 20px 18px;
  border-radius: 0 0 18px 18px;
  /* The battlements catch the light from above. */
  background:
    radial-gradient(70% 38% at 50% 0%, #f3f1ec14, #f3f1ec00),
    var(--surface);
  color: var(--muted);
  font-size: 14px;
  -webkit-mask: var(--wall-top);
  mask: var(--wall-top);
}
.plug-folders li,
.plug-ai {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 11px 12px;
  border-radius: 10px;
  background: #ff8f7317;
  box-shadow: inset 0 0 0 1px #ff8f7352;
  color: var(--text);
  font-weight: 500;
}
/* Each folder carries a lock: its contents are stored encrypted. */
.plug-folders li::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: auto;
  background: var(--faint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='11' rx='3'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='11' rx='3'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.plug-folders svg {
  color: var(--coral);
}
.plug-ai {
  background: #ffffff08;
  box-shadow: inset 0 0 0 1px var(--line);
}
.plug-ai svg {
  color: var(--coral);
}
.plug em {
  margin-left: auto;
  color: var(--faint);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  text-align: right;
}
.plug-builtins {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.plug-builtins li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px;
  border-radius: 10px;
  background: #ffffff08;
}
.plug-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-weight: 600;
}
.plug figcaption,
.consent figcaption {
  margin-top: 14px;
  color: var(--faint);
  font-size: 13px;
}
.plug figcaption {
  text-align: right;
}
/* On load each wire drops into its folder and the folder fills. After that,
   a beam runs down one wire every three seconds, and its folder lights as it
   lands. The beam and the landing share one period and one delay, so they
   stay in step. With reduced motion the figure is drawn complete and still. */
@media (prefers-reduced-motion: no-preference) {
  .plug-apps li::after {
    animation: plug-drop 520ms cubic-bezier(0.3, 0.7, 0.4, 1) both;
  }
  .plug-apps li::before {
    animation: plug-beam 9s linear infinite;
  }
  .plug-folders li {
    animation:
      plug-fill 420ms ease-out both,
      plug-land 9s linear infinite;
  }
  .plug-folders li::after {
    animation: plug-lock 9s linear infinite;
  }
  .plug-apps li:nth-child(1)::after {
    animation-delay: 500ms;
  }
  .plug-apps li:nth-child(2)::after {
    animation-delay: 850ms;
  }
  .plug-apps li:nth-child(3)::after {
    animation-delay: 1200ms;
  }
  .plug-apps li:nth-child(1)::before,
  .plug-folders li:nth-child(1)::after {
    animation-delay: 2.2s;
  }
  .plug-apps li:nth-child(2)::before,
  .plug-folders li:nth-child(2)::after {
    animation-delay: 5.2s;
  }
  .plug-apps li:nth-child(3)::before,
  .plug-folders li:nth-child(3)::after {
    animation-delay: 8.2s;
  }
  .plug-folders li:nth-child(1) {
    animation-delay: 950ms, 2.2s;
  }
  .plug-folders li:nth-child(2) {
    animation-delay: 1300ms, 5.2s;
  }
  .plug-folders li:nth-child(3) {
    animation-delay: 1650ms, 8.2s;
  }
}
@keyframes plug-drop {
  from {
    scale: 1 0;
  }
}
@keyframes plug-fill {
  from {
    background: #ffffff05;
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--faint);
  }
}
/* 9 s period: the beam travels for the first 0.8 s (9 %) and lands. */
@keyframes plug-beam {
  0% {
    opacity: 0;
    translate: 0 -10px;
  }
  1.5% {
    opacity: 1;
  }
  8.5% {
    opacity: 1;
  }
  9%,
  100% {
    opacity: 0;
    translate: 0 calc(var(--wire) - 20px);
  }
}
@keyframes plug-land {
  0%,
  8.5%,
  30%,
  100% {
    background: #ff8f7317;
    box-shadow: inset 0 0 0 1px #ff8f7352;
  }
  10%,
  16% {
    background: #ff8f7329;
    box-shadow:
      inset 0 0 0 1px var(--coral),
      0 0 0 4px #ff8f731a;
  }
}
@keyframes plug-lock {
  0%,
  8.5%,
  30%,
  100% {
    background: var(--faint);
  }
  10%,
  16% {
    background: var(--coral);
  }
}

/* The app-connection window, copied from the real one, beside the step it
   illustrates. */
.consent {
  margin: 0;
}
.consent-card {
  position: relative;
  z-index: 1;
  padding: 24px 24px 20px;
  border-radius: 18px;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  box-shadow:
    0 40px 90px #000a,
    0 0 0 1px #ffffff14;
}
.consent-card p {
  margin: 0 0 10px;
}
.consent-top {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #5d6660;
  font-size: 12px;
}
.consent-mark {
  display: inline-flex;
  color: #b2492e;
  font-size: 11px;
}
.consent-mark .logo-wall {
  display: none;
}
.consent-mark .logo-word {
  font-family: Archivo, sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.03em;
}
.consent-card .consent-title {
  margin: 14px 0 2px;
  font-family: Archivo, "DM Sans", sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.consent-origin {
  color: #5d6660;
  font-family: ui-monospace, monospace;
  font-size: 12px;
}
.consent-field {
  display: grid;
  gap: 4px;
  margin: 14px 0 8px;
}
.consent-field span {
  color: #5d6660;
  font-size: 12px;
}
.consent-field b {
  padding: 9px 12px;
  border: 1px solid #cfc8bb;
  border-radius: 8px;
  background: #fff;
  font-weight: 500;
}
.consent-card .consent-hint,
.consent-card .consent-foot {
  color: #5d6660;
  font-size: 13px;
}
.consent-foot {
  padding-top: 10px;
  border-top: 1px solid #ddd6ca;
}
.consent-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
}
.consent-allow {
  padding: 10px 14px;
  white-space: nowrap;
  border-radius: 9px;
  color: #fff;
  background: #2b4237;
}
/* The card is a picture of the window, not a working one: it is hidden from
   assistive technology, cannot be focused or clicked, is labelled as an
   illustration, and its buttons are drawn as flat outlines rather than as
   controls. */
.consent-card {
  cursor: default;
  user-select: none;
  pointer-events: none;
}
.illustration-tag {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px dashed #b9b1a3;
  border-radius: 999px;
  color: #5d6660;
  font-size: 12px;
  font-weight: 500;
}
.consent-card .consent-field b {
  border-style: dashed;
  background: transparent;
}
.consent-actions {
  color: #7a817c;
}
.consent-actions span {
  padding: 9px 13px;
  border: 1px dashed #b9b1a3;
  border-radius: 9px;
}
.consent-actions .consent-allow {
  color: #2b4237;
  background: transparent;
  border-color: #2b423780;
}
/* Built-in apps: the showcase beside its heading. */
/* Apps from the directory, stacked like a dock: the link says where it
   goes by showing what is there. */
.directory-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  margin-top: 32px;
  padding: 8px 18px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff06;
  font-size: 17px;
  font-weight: 500;
  transition:
    border-color 160ms,
    background 160ms;
}
.directory-link:hover {
  border-color: var(--line-strong);
  background: #ffffff0d;
  color: var(--text);
}
.directory-icons {
  display: flex;
}
.directory-icons img {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  box-shadow: 0 0 0 2px var(--bg);
  transition: translate 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.directory-icons img + img {
  margin-left: -10px;
}
.directory-link:hover .directory-icons img {
  translate: 0 -3px;
}
.directory-link:hover .directory-icons img:nth-child(2) {
  transition-delay: 30ms;
}
.directory-link:hover .directory-icons img:nth-child(3) {
  transition-delay: 60ms;
}
.directory-link:hover .directory-icons img:nth-child(4) {
  transition-delay: 90ms;
}
.directory-link:hover .directory-icons img:nth-child(5) {
  transition-delay: 120ms;
}
.directory-label span {
  display: inline-block;
  margin-left: 4px;
  transition: translate 160ms;
}
.directory-link:hover .directory-label span {
  translate: 2px 0;
}
@media (prefers-reduced-motion: reduce) {
  .directory-icons img,
  .directory-label span {
    transition: none;
  }
}
.apps {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 40px clamp(32px, 5vw, 80px);
  padding-block: clamp(80px, 10vw, 140px);
  border-top: 1px solid var(--line);
}

/* How an app uses the account: a real sequence, so it is numbered. On wide
   screens the app-connection window stays in view while the three steps
   scroll past it, and the part of the window each step describes is marked
   as that step reaches the middle of the screen (a sticky-scroll walkthrough,
   driven by CSS scroll timelines; without them the window and steps are
   simply shown together). */
.how {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(48px, 7vw, 120px);
  /* The bottom space belongs to the last row, so the window stays in view
     until the section ends. */
  padding-top: clamp(80px, 10vw, 140px);
  border-top: 1px solid var(--line);
}
.how-intro {
  grid-column: 1;
}
.how .consent {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) - 26px + 32px);
}
.how-steps {
  --rail: 15px;
  position: relative;
  grid-column: 1;
  display: grid;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
/* The rail joins the three steps; its coral fill follows the reader. */
.how-steps::before,
.how-steps::after {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: var(--rail);
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--line-strong);
}
.how-steps::after {
  background: var(--coral);
  transform-origin: top;
  scale: 1 0;
}
.how-steps li {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--rail) * 2) minmax(0, 1fr);
  column-gap: 24px;
  align-content: start;
  padding-bottom: 40px;
  counter-increment: step;
}
.how-steps li:last-child {
  padding-bottom: 0;
}
.how-steps li::before {
  content: counter(step);
  position: relative;
  z-index: 1;
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: calc(var(--rail) * 2);
  height: calc(var(--rail) * 2);
  border: 2px solid var(--coral);
  border-radius: 50%;
  background: var(--bg);
  color: var(--coral);
  font-family: Archivo, "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 800;
}
.how-steps h3 {
  margin: 2px 0 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.how-steps p {
  max-width: 34em;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}
.how-note {
  grid-column: 1;
  max-width: 44em;
  margin: 48px 0 clamp(80px, 10vw, 140px);
  padding-left: calc(var(--rail, 15px) * 2 + 24px);
  color: var(--faint);
  font-size: 15px;
  line-height: 1.6;
}
/* The account the connection lands in: the new folder, beneath the wall. */
.consent-result {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding: calc(var(--wall-depth) + 14px) 14px 14px;
  border-radius: 0 0 16px 16px;
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
  -webkit-mask: var(--wall-top);
  mask: var(--wall-top);
}
.consent-result span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #ffffff08;
  box-shadow: inset 0 0 0 1px var(--line);
}
.consent-result .result-folder {
  background: #ff8f7317;
  box-shadow: inset 0 0 0 1px #ff8f7352;
}
.consent-result svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--coral);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.consent-part {
  margin-inline: -10px;
  padding: 6px 10px;
  border-radius: 12px;
}
.consent-part.consent-actions {
  margin: 6px -8px -8px;
  padding: 8px;
}
@supports (animation-timeline: view()) and (timeline-scope: --how) {
  @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .how {
      timeline-scope: --how-steps, --how-1, --how-2, --how-3;
    }
    .how-steps {
      view-timeline: --how-steps block;
    }
    /* Room for each step to hold the reading line while the window waits. */
    .how-steps li:not(:last-child) {
      min-height: min(34svh, 300px);
    }
    .how-steps li:nth-child(1) {
      view-timeline: --how-1 block;
    }
    .how-steps li:nth-child(2) {
      view-timeline: --how-2 block;
    }
    .how-steps li:nth-child(3) {
      view-timeline: --how-3 block;
    }
    .how-steps::after {
      animation: how-rail linear both;
      animation-timeline: --how-steps;
      /* Full when the third step's heading reaches the reading line. */
      animation-range: cover 55vh cover calc(60vh + 2 * min(34svh, 300px));
    }
    .how-steps li > *,
    .how-steps li::before {
      animation: how-step linear both;
    }
    /* A step is in focus while its heading crosses the reading line, between
       half and a quarter of the way down the screen. */
    .how-steps li > *,
    .how-steps li::before,
    .consent-part,
    .consent-result .result-folder {
      animation-range: cover 45vh cover 80vh;
    }
    .how-steps li:nth-child(1) > *,
    .how-steps li:nth-child(1)::before,
    .consent-ask {
      animation-timeline: --how-1;
    }
    .how-steps li:nth-child(2) > *,
    .how-steps li:nth-child(2)::before,
    .consent-folder {
      animation-timeline: --how-2;
    }
    .how-steps li:nth-child(3) > *,
    .how-steps li:nth-child(3)::before,
    .consent-actions,
    .consent-result .result-folder {
      animation-timeline: --how-3;
    }
    .consent-part {
      animation-name: how-mark;
      animation-timing-function: linear;
      animation-fill-mode: both;
    }
    .consent-result .result-folder {
      animation-name: how-land;
      animation-timing-function: linear;
      animation-fill-mode: both;
    }
    .how-steps li::before {
      animation-name: how-marker;
    }
  }
}
/* The same walkthrough where scroll timelines are missing. home.js names
   the step being read (data-step) and the last step reached (data-reached);
   the marks fade between steps, and the rail fills one segment at a time. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .how[data-walkthrough] .how-steps li:not(:last-child) {
    min-height: min(34svh, 300px);
  }
  .how[data-walkthrough] .how-steps li > * {
    opacity: 0.7;
    transition: opacity 300ms;
  }
  .how[data-walkthrough] .how-steps li::before {
    transition:
      background-color 300ms,
      color 300ms;
  }
  .how[data-walkthrough] .consent-part,
  .how[data-walkthrough] .consent-result .result-folder {
    transition:
      background-color 300ms,
      box-shadow 300ms;
  }
  .how[data-step="1"] .how-steps li:nth-child(1) > *,
  .how[data-step="2"] .how-steps li:nth-child(2) > *,
  .how[data-step="3"] .how-steps li:nth-child(3) > * {
    opacity: 1;
  }
  .how[data-step="1"] .how-steps li:nth-child(1)::before,
  .how[data-step="2"] .how-steps li:nth-child(2)::before,
  .how[data-step="3"] .how-steps li:nth-child(3)::before {
    background: var(--coral);
    color: #2a170f;
  }
  .how[data-step="1"] .consent-ask,
  .how[data-step="2"] .consent-folder,
  .how[data-step="3"] .consent-actions {
    background: #2b42370f;
    box-shadow: 0 0 0 1px #2b423759;
  }
  .how[data-step="3"] .consent-result .result-folder {
    background: #ff8f7329;
    box-shadow:
      inset 0 0 0 1px var(--coral),
      0 0 0 4px #ff8f731a;
  }
  /* Rail segments: from each marker down to the next step, and below the
     last marker to the rail's end. */
  .how[data-walkthrough] .how-steps li::after {
    content: "";
    position: absolute;
    top: calc(var(--rail) * 2);
    bottom: 0;
    left: var(--rail);
    width: 2px;
    margin-left: -1px;
    background: var(--coral);
    transform-origin: top;
    scale: 1 0;
    transition: scale 450ms ease-out;
  }
  .how[data-walkthrough] .how-steps li:last-child::after {
    bottom: 16px;
    transition-delay: 300ms;
  }
  .how[data-reached="2"] .how-steps li:nth-child(1)::after,
  .how[data-reached="3"] .how-steps li::after {
    scale: 1 1;
  }
  .how[data-reached="3"] .how-steps li:nth-child(2)::after {
    transition-delay: 0ms;
  }
}
@keyframes how-rail {
  to {
    scale: 1 1;
  }
}
@keyframes how-step {
  0%,
  100% {
    opacity: 0.7;
  }
  14%,
  86% {
    opacity: 1;
  }
}
@keyframes how-marker {
  0%,
  100% {
    background: var(--bg);
    color: var(--coral);
  }
  14%,
  86% {
    background: var(--coral);
    color: #2a170f;
  }
}
@keyframes how-mark {
  0%,
  100% {
    background: #2b423700;
    box-shadow: 0 0 0 1px #2b423700;
  }
  14%,
  86% {
    background: #2b42370f;
    box-shadow: 0 0 0 1px #2b423759;
  }
}
@keyframes how-land {
  0%,
  100% {
    background: #ff8f7317;
    box-shadow: inset 0 0 0 1px #ff8f7352;
  }
  14%,
  86% {
    background: #ff8f7329;
    box-shadow:
      inset 0 0 0 1px var(--coral),
      0 0 0 4px #ff8f731a;
  }
}

/* Questions */
.questions {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
  gap: 24px 64px;
  padding-block: clamp(80px, 10vw, 130px);
  border-top: 1px solid var(--line);
}
.questions h2 {
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.04;
}
.question-list details {
  border-bottom: 1px solid var(--line);
}
.question-list details:first-child {
  border-top: 1px solid var(--line);
}
.question-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 64px;
  padding-block: 14px;
  font-size: 19px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.question-list summary::-webkit-details-marker {
  display: none;
}
.question-list summary::after {
  content: "+";
  flex: none;
  color: var(--coral);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}
.question-list details[open] summary::after {
  content: "−";
}
.question-list summary:hover {
  color: var(--coral);
}
.question-list p {
  max-width: 680px;
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

/* The app showcase. Native radios work without script; home.js advances
   them when a tab's progress line finishes. */
.showcase {
  position: relative;
  display: grid;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.preview-choice {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.app-dock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff06;
}
.app-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 12px;
  overflow: hidden;
  border-radius: 11px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 200ms,
    color 200ms;
}
.app-tab img {
  width: 26px;
  height: 26px;
}
.app-tab:hover {
  color: var(--text);
  background: #ffffff0a;
}
.tab-progress {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
}
#preview-mail:checked ~ .app-dock [for="preview-mail"],
#preview-notes:checked ~ .app-dock [for="preview-notes"],
#preview-files:checked ~ .app-dock [for="preview-files"],
#preview-ada:checked ~ .app-dock [for="preview-ada"] {
  color: var(--text);
}
#preview-mail:checked ~ .app-dock [for="preview-mail"]:hover,
#preview-notes:checked ~ .app-dock [for="preview-notes"]:hover,
#preview-files:checked ~ .app-dock [for="preview-files"]:hover,
#preview-ada:checked ~ .app-dock [for="preview-ada"]:hover {
  background: none;
}
/* One selection pill slides to the chosen tab, so switching apps reads as
   moving along the dock rather than a jump. */
.app-dock,
.sdk-steps {
  position: relative;
  --tab: 0;
}
.app-dock::before,
.sdk-steps::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: calc((100% - 12px - (var(--tabs) - 1) * 6px) / var(--tabs));
  border-radius: 11px;
  background: #ffffff12;
  box-shadow: inset 0 0 0 1px var(--line);
  translate: calc(var(--tab) * (100% + 6px)) 0;
  transition: translate 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.app-dock {
  --tabs: 4;
}
.sdk-steps {
  --tabs: 3;
}
#preview-notes:checked ~ .app-dock,
#sdk-files:checked ~ .sdk-steps {
  --tab: 1;
}
#preview-files:checked ~ .app-dock,
#sdk-ai:checked ~ .sdk-steps {
  --tab: 2;
}
#preview-ada:checked ~ .app-dock {
  --tab: 3;
}
@media (prefers-reduced-motion: reduce) {
  .app-dock::before,
  .sdk-steps::before {
    transition: none;
  }
}
#preview-mail:focus-visible ~ .app-dock [for="preview-mail"],
#preview-notes:focus-visible ~ .app-dock [for="preview-notes"],
#preview-files:focus-visible ~ .app-dock [for="preview-files"],
#preview-ada:focus-visible ~ .app-dock [for="preview-ada"] {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .showcase[data-autoplay]
    #preview-mail:checked
    ~ .app-dock
    [for="preview-mail"]
    .tab-progress,
  .showcase[data-autoplay]
    #preview-notes:checked
    ~ .app-dock
    [for="preview-notes"]
    .tab-progress,
  .showcase[data-autoplay]
    #preview-files:checked
    ~ .app-dock
    [for="preview-files"]
    .tab-progress,
  .showcase[data-autoplay]
    #preview-ada:checked
    ~ .app-dock
    [for="preview-ada"]
    .tab-progress {
    animation: tab-progress 5s linear forwards;
    animation-play-state: var(--progress-state, running);
  }
  /* Pointing at the showcase or moving through it by keyboard holds the
     current app. */
  .showcase:hover,
  .showcase:has(:focus-visible) {
    --progress-state: paused;
  }
}
@keyframes tab-progress {
  to {
    transform: scaleX(1);
  }
}
.preview-window {
  position: relative;
  height: clamp(260px, 44svh, 470px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow:
    0 30px 80px #0008,
    inset 0 1px 0 #ffffff10;
}
.window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  color: var(--faint);
  font-size: 12px;
}
.window-dots {
  display: flex;
  gap: 6px;
}
.window-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffffff1f;
}
.app-preview {
  position: absolute;
  inset: 38px 0 0;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 420ms ease,
    transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s 420ms;
}
#preview-mail:checked ~ .preview-window .mail-preview,
#preview-notes:checked ~ .preview-window .notes-preview,
#preview-files:checked ~ .preview-window .files-preview,
#preview-ada:checked ~ .preview-window .ada-preview {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 420ms ease,
    transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s;
}
/* Reduced motion switches apps instantly, whatever state rule applies. */
@media (prefers-reduced-motion: reduce) {
  .preview-window .app-preview {
    transform: none !important;
    transition: none !important;
  }
}
.preview-sidebar {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 16px 10px;
  border-right: 1px solid var(--line);
  background: #ffffff04;
}
.sidebar-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--faint);
  font-size: 13px;
}
.sidebar-item.selected {
  color: #ffd2c4;
  background: #ff8f7314;
}
.sidebar-item b {
  font-weight: 500;
}
.preview-body {
  min-width: 0;
  padding: clamp(18px, 3svh, 28px) clamp(18px, 2.4vw, 32px);
  overflow: hidden;
  font-size: 15px;
  line-height: 1.5;
}
.preview-body h2 {
  margin: 0 0 8px;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.025em;
}
.preview-body p {
  margin: 0 0 12px;
  color: #d6d8d4;
}
.preview-body .mail-sender {
  color: var(--muted);
  font-size: 14px;
}
.mail-sender strong {
  margin-right: 6px;
  color: var(--text);
}
.preview-body .encrypted-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 99px;
  background: #a8bab51a;
  color: #cfe0d6;
  font-size: 13px;
}
.encrypted-badge svg,
.strip-lock,
.strip-parts svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ada-note {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff07;
}
.ada-note div {
  display: grid;
  gap: 2px;
}
.ada-note span {
  color: var(--muted);
  font-size: 14px;
}
.note-paper {
  background: var(--paper-2);
  color: var(--ink);
}
.note-paper h2 {
  color: var(--ink);
}
.preview-body .note-sub {
  color: #5b665f;
}
.note-art {
  position: relative;
  height: clamp(48px, 9svh, 84px);
  margin: 8px 0 14px;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(#e2c9ad 55%, #7f938c 55%);
}
.note-art i {
  position: absolute;
  right: 18%;
  top: 22%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f4e3c8;
}
.checklist {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
.checklist li {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #3b4540;
}
.checklist li::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  border: 1.5px solid #7d8a83;
  border-radius: 4px;
}
.checklist .done::before {
  border-color: #5d7a69;
  background: #5d7a69
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8l3 3 5-6' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}
.folder-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.folder-row span {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff06;
  font-size: 13px;
}
.file-rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.file-rows li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.file-rows b {
  width: 34px;
  padding: 2px 0;
  border-radius: 5px;
  background: #ffffff10;
  color: var(--sage);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.preview-body .chat-question {
  width: fit-content;
  margin-left: auto;
  padding: 10px 14px;
  border-radius: 14px 14px 4px 14px;
  background: #ff8f7322;
  color: #ffe2d8;
}
.chat-answer {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}
.chat-answer ul {
  margin: 6px 0 10px;
  padding-left: 18px;
  color: #d6d8d4;
}
.source-chip,
.reply-sources span {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 99px;
  background: #ffffff10;
  color: var(--muted);
  font-size: 12px;
}
.account-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 16px;
  border: 1px solid #a8bab52e;
  border-radius: 14px;
  background: #a8bab50c;
  color: #d8e3dd;
  font-size: 15px;
}
.strip-lock {
  width: 18px;
  height: 18px;
  color: var(--sage);
}
.strip-title {
  font-weight: 500;
}
.strip-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
.strip-parts li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 99px;
  background: #ffffff0c;
  color: #c9d6cf;
  font-size: 13px;
}

/* Privacy: the warm paper chapter. */
/* The privacy chapter is a stretch of the Seige wall: crenellated along its
   top and bottom edges. The body overlaps each merlon strip by 1px so no
   hairline shows on fractional display scales. */
.privacy {
  --wall-both:
    linear-gradient(#000 0 0) center / 100%
      calc(100% - 2 * var(--wall-depth) + 2px) no-repeat,
    repeating-linear-gradient(
        90deg,
        #000 0 var(--wall-merlon),
        transparent var(--wall-merlon) calc(var(--wall-merlon) * 2)
      )
      top / 100% var(--wall-depth) no-repeat,
    repeating-linear-gradient(
        90deg,
        #000 0 var(--wall-merlon),
        transparent var(--wall-merlon) calc(var(--wall-merlon) * 2)
      )
      bottom / 100% var(--wall-depth) no-repeat;
  padding-block: calc(clamp(90px, 11vw, 140px) + var(--wall-depth));
  background: var(--paper);
  color: var(--ink);
  -webkit-mask: var(--wall-both);
  mask: var(--wall-both);
}
.privacy .section-head h2 {
  color: var(--ink);
}
.privacy .section-head h2 span {
  color: #5f7869;
}
.privacy .section-head p {
  color: #46514b;
}
/* A bento of the four protections. Each tile pairs its claim with a small
   picture of the mechanism: who can open which folder, the same message on
   the device and on the server, what the server records, and how keys are
   combined. Rows share a height; nothing is stretched to fill. */
.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin-top: 48px;
}
.tile {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 36px);
  border: 1px solid #d8d1c3;
  border-radius: 24px;
  background: var(--paper-2);
}
.tile h3 {
  margin: 0;
  font-size: clamp(22px, 1.9vw, 26px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.tile p {
  margin: 12px 0 0;
  color: #4b5650;
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
}
.tile-firewall {
  grid-column: span 7;
  border: 0;
  background:
    radial-gradient(120% 80% at 100% 0%, #ff8f731c, transparent 60%),
    var(--sage-deep);
  color: #eef3ef;
}
.tile-firewall h3 {
  font-size: clamp(28px, 2.7vw, 38px);
}
.tile-firewall p {
  max-width: 520px;
  color: #c4d3ca;
  font-size: 18px;
}
.tile-encrypted {
  grid-column: span 5;
}
.tile-keep,
.tile-quantum {
  grid-column: span 6;
}
.tile .text-link {
  margin-top: 8px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: #2b423766;
  text-underline-offset: 5px;
}
.tile .text-link:hover {
  color: #a4422d;
  text-decoration-color: currentColor;
}
.access-list {
  display: grid;
  gap: 10px;
  margin: auto 0 0;
  padding: 28px 0 0;
  list-style: none;
}
.access-list li {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid #ffffff1c;
  border-radius: 14px;
  background: #ffffff0b;
}
.access-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #ffffff14;
  color: #f4ecdc;
}
.access-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.access-who {
  display: grid;
  color: #9fb4a8;
}
.access-who b {
  color: #f1f5f2;
  font:
    500 16px "DM Sans",
    sans-serif;
}
.access-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 500;
}
.access-state::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.access-state.allowed {
  background: #a8d6b326;
  color: #c8ecd2;
}
.access-state.allowed::before {
  background: #8fd3a2;
}
.access-state.blocked {
  background: #ff8f7322;
  color: #ffc9b9;
}
.access-state.blocked::before {
  background: var(--coral);
}
/* The same message, as the device holds it and as Seige stores it. */
.cipher-demo {
  display: grid;
  gap: 0;
  margin-top: auto;
  padding-top: 28px;
}
.tile .cipher-row {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #ddd6ca;
  border-radius: 14px;
  background: #fffdf8;
  color: var(--ink);
}
.tile .cipher-stored {
  position: relative;
  margin-top: 26px;
  border-color: #e4cfc4;
  background: #f7ece6;
}
/* The arrow between the two copies: encryption happens on the way out. */
.cipher-stored::before {
  content: "Encrypted in your browser";
  position: absolute;
  left: 16px;
  top: -23px;
  padding-left: 18px;
  color: #5b665f;
  font-size: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a4422d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v11M4 9l4 4 4-4'/%3E%3C/svg%3E")
    left center / 13px no-repeat;
}
.cipher-where {
  color: #5b665f;
  font-size: 12px;
  font-weight: 600;
}
.cipher-row code {
  font:
    14px/1.5 ui-monospace,
    SFMono-Regular,
    monospace;
  overflow-wrap: anywhere;
}
.cipher-text {
  color: #a4422d;
}
/* What the server records for an upload, and what it cannot read. In a
   narrow tile the four fields sit two by two. */
.tile-keep {
  container-type: inline-size;
}
.server-view {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
  margin: auto 0 0;
  padding-top: 28px;
}
.server-view div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #ddd6ca;
  border-right-width: 0;
  background: #fffdf8;
}
.server-view div:first-child {
  border-radius: 12px 0 0 12px;
}
.server-view div:last-child {
  border-right-width: 1px;
  border-radius: 0 12px 12px 0;
}
.server-view dt {
  color: #5b665f;
  font-size: 12px;
}
.server-view dd {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font:
    14px ui-monospace,
    SFMono-Regular,
    monospace;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.server-view .server-sealed {
  border-color: #e4cfc4;
  background: #f7ece6;
}
.server-view .server-sealed dd {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #a4422d;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
}
.server-view .server-sealed dd::before {
  content: "";
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='11' rx='3'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='11' rx='3'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
@container (max-width: 520px) {
  .server-view {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .server-view div,
  .server-view div:first-child,
  .server-view div:last-child {
    border-width: 1px;
    border-radius: 10px;
  }
}
/* Each key is two algorithms joined: one post-quantum, one established. */
.key-mix {
  display: grid;
  gap: 8px;
  margin: auto 0 0;
  padding: 28px 0 4px;
  list-style: none;
}
.key-mix li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #4b5650;
  font-size: 15px;
}
.key-mix span {
  padding: 6px 10px;
  border: 1px solid #ddd6ca;
  border-radius: 9px;
  background: #fffdf8;
  color: var(--ink);
  font:
    600 14px ui-monospace,
    SFMono-Regular,
    monospace;
}
.key-mix span:first-child {
  border-color: #b9cbbf;
  background: #e5eee7;
}
.key-mix i {
  color: #7a817c;
  font-style: normal;
}
.key-mix b {
  margin-left: 4px;
  font-weight: 500;
}

/* Ada: one assistant at the centre of the account. */
.ada {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  padding-block: clamp(90px, 11vw, 140px);
}
.ada .section-head .text-link {
  margin-top: 18px;
}
.ada-stage {
  display: grid;
  justify-items: center;
  gap: 28px;
}
.ada-orbit {
  position: relative;
  width: min(440px, 100%);
  aspect-ratio: 1;
}
.orbit-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.orbit-ring {
  fill: none;
  stroke: #ffffff12;
  stroke-dasharray: 3 7;
}
.orbit-route {
  fill: none;
  stroke: #a8bab530;
  stroke-width: 1.2;
}
.ada-core {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff8f7330, #ff8f7300 70%);
  font-weight: 600;
}
.node {
  position: absolute;
  translate: -50% -50%;
  display: grid;
  justify-items: center;
  gap: 6px;
  color: #d4dbd7;
  font-size: 14px;
  white-space: nowrap;
}
.node img,
.node svg {
  width: 50px;
  height: 50px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.node svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.node-memory svg {
  color: var(--sage);
}
.node-app svg {
  color: #f0d8c9;
}
.n1 {
  left: 50%;
  top: 12.5%;
}
.n2 {
  left: 82.5%;
  top: 31.25%;
}
.n3 {
  left: 82.5%;
  top: 68.75%;
}
.n4 {
  left: 50%;
  top: 87.5%;
}
.n5 {
  left: 17.5%;
  top: 68.75%;
}
.n6 {
  left: 17.5%;
  top: 31.25%;
}
.pulse {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 12px var(--coral);
  translate: -50% -50%;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .pulse {
    animation: 3.6s ease-in infinite;
  }
  .p1 {
    animation-name: pulse-1;
  }
  .p2 {
    animation-name: pulse-2;
    animation-delay: 0.6s;
  }
  .p3 {
    animation-name: pulse-3;
    animation-delay: 1.2s;
  }
  .p4 {
    animation-name: pulse-4;
    animation-delay: 1.8s;
  }
  .p5 {
    animation-name: pulse-5;
    animation-delay: 2.4s;
  }
  .p6 {
    animation-name: pulse-6;
    animation-delay: 3s;
  }
  .ada-core {
    animation: core-breathe 3.6s ease-in-out infinite;
  }
}
/* Pulses run from each source to Ada along the drawn routes. */
@keyframes pulse-1 {
  0% {
    left: 50%;
    top: 19%;
    opacity: 0;
  }
  15%,
  80% {
    opacity: 1;
  }
  100% {
    left: 50%;
    top: 42%;
    opacity: 0;
  }
}
@keyframes pulse-2 {
  0% {
    left: 77%;
    top: 34.5%;
    opacity: 0;
  }
  15%,
  80% {
    opacity: 1;
  }
  100% {
    left: 57%;
    top: 46%;
    opacity: 0;
  }
}
@keyframes pulse-3 {
  0% {
    left: 77%;
    top: 65.5%;
    opacity: 0;
  }
  15%,
  80% {
    opacity: 1;
  }
  100% {
    left: 57%;
    top: 54%;
    opacity: 0;
  }
}
@keyframes pulse-4 {
  0% {
    left: 50%;
    top: 81%;
    opacity: 0;
  }
  15%,
  80% {
    opacity: 1;
  }
  100% {
    left: 50%;
    top: 58%;
    opacity: 0;
  }
}
@keyframes pulse-5 {
  0% {
    left: 23%;
    top: 65.5%;
    opacity: 0;
  }
  15%,
  80% {
    opacity: 1;
  }
  100% {
    left: 43%;
    top: 54%;
    opacity: 0;
  }
}
@keyframes pulse-6 {
  0% {
    left: 23%;
    top: 34.5%;
    opacity: 0;
  }
  15%,
  80% {
    opacity: 1;
  }
  100% {
    left: 43%;
    top: 46%;
    opacity: 0;
  }
}
@keyframes core-breathe {
  50% {
    box-shadow: 0 0 60px 6px #ff8f7322;
  }
}
.ada-example {
  width: min(520px, 100%);
  margin: 0;
}
.ada-example blockquote {
  width: fit-content;
  max-width: 90%;
  margin: 0 0 12px auto;
  padding: 12px 16px;
  border-radius: 16px 16px 4px 16px;
  background: #ff8f7322;
  color: #ffe2d8;
  font-size: 17px;
}
.ada-reply {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.ada-reply strong {
  font-size: 16px;
}
.ada-reply p {
  margin: 8px 0 14px;
  color: #d2d6d2;
  font-size: 16px;
  line-height: 1.55;
}
.reply-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ada-example figcaption {
  margin-top: 12px;
  color: var(--faint);
  font-size: 13px;
}

/* Builders */
.builder-section {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 40px 64px;
  padding-block: clamp(80px, 10vw, 130px);
  border-top: 1px solid var(--line);
  align-items: start;
}
.builder-heading {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: start;
  gap: 24px 64px;
}
.builder-heading h2 {
  max-width: 14em;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.04;
}
.builder-heading p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.55;
}
.builder-benefits {
  display: grid;
  gap: 12px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
  font-size: 18px;
}
.builder-benefits li {
  display: flex;
  gap: 12px;
}
.builder-benefits li::before {
  content: "✓";
  color: var(--sage);
}
.builder-guide {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 12px;
  color: #d0d8d2;
  font-size: 17px;
}
.code-window {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.sdk-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.sdk-steps label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
}
.sdk-step-number {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: 12px;
}
#sdk-sqlite:checked ~ .sdk-steps [for="sdk-sqlite"],
#sdk-files:checked ~ .sdk-steps [for="sdk-files"],
#sdk-ai:checked ~ .sdk-steps [for="sdk-ai"] {
  color: var(--text);
}
.sdk-steps label {
  position: relative;
}
#sdk-sqlite:focus-visible ~ .sdk-steps [for="sdk-sqlite"],
#sdk-files:focus-visible ~ .sdk-steps [for="sdk-files"],
#sdk-ai:focus-visible ~ .sdk-steps [for="sdk-ai"] {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}
.code-window-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 0;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: var(--surface-2);
  color: var(--faint);
  font:
    13px ui-monospace,
    monospace;
}
.code-filename {
  color: var(--muted);
}
/* The example sits in an editor frame: file name above, code below, the
   lines for the chosen step marked. */
.code-window pre {
  margin: 0;
  padding: 16px 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 0 0 16px 16px;
  background: #0c0d0f;
  color: #e6e8e3;
  font:
    15px/1.85 ui-monospace,
    monospace;
  box-shadow: 0 30px 70px #0007;
}
.code-window pre > code {
  display: block;
  width: max-content;
  min-width: 100%;
  padding-inline: 18px;
}
.code-keyword {
  color: #c8d2cd;
}
.code-method {
  color: #ff9e85;
}
.code-string {
  color: #c4dcbd;
}
.sdk-line {
  display: inline-block;
  min-width: calc(100% + 36px);
  margin-inline: -18px;
  padding: 0 18px 0 28px;
  border-left: 2px solid transparent;
  transition:
    background 200ms,
    border-color 200ms;
}
#sdk-sqlite:checked ~ pre .sdk-sqlite-line,
#sdk-files:checked ~ pre .sdk-files-line,
#sdk-ai:checked ~ pre .sdk-ai-line {
  border-left-color: #c3ddc6;
  background: linear-gradient(90deg, #a0c2a42b, #a0c2a40a);
}
.sdk-write {
  color: #fff4e9;
  font-weight: 600;
}
.sdk-explanation {
  min-height: 52px;
  margin: 18px 0;
  color: #c5d8c8;
  font-size: 18px;
  line-height: 1.5;
}
.sdk-explanation span {
  display: none;
}
#sdk-sqlite:checked ~ .sdk-explanation .sdk-sqlite-copy,
#sdk-files:checked ~ .sdk-explanation .sdk-files-copy,
#sdk-ai:checked ~ .sdk-explanation .sdk-ai-copy {
  display: inline;
}
.code-window-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 16px;
}
.code-window-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -12px;
  color: #ffc4b3;
}

/* Task guides under the SDK example: plain links an agent can follow. */
.guide-links {
  grid-column: 1 / -1;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.guide-links h3 {
  margin: 0 0 12px;
  color: var(--faint);
  font-size: 15px;
  font-weight: 500;
}
.guide-links ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.guide-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 17px;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 5px;
}
.guide-links a:hover {
  text-decoration-color: var(--coral);
}

/* Closing and footer */
.home-closing {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding-block: clamp(90px, 12vw, 160px);
  text-align: center;
}
.home-closing h2 {
  max-width: 12em;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1;
}
.home-closing p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.55;
}
.closing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 22px;
}
.closing-actions .inline-link {
  min-height: 52px;
}
/* Tablet: the hero stacks and still fits one screen. */
@media (max-width: 1023px) {
  .wrap {
    width: calc(100% - 64px);
  }
  .home-header {
    padding-inline: 32px;
  }
  .home-nav {
    gap: 24px;
  }
  .home-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(18px, 3svh, 32px);
  }
  .home-hero h1 {
    max-width: none;
    font-size: clamp(44px, min(8.4vw, 7.4svh), 88px);
  }
  .hero-description {
    max-width: 640px;
    margin-top: clamp(16px, 3svh, 30px);
  }
  .plug {
    width: min(100%, 640px);
  }
  .plug figcaption {
    display: none;
  }
  .how {
    grid-template-columns: minmax(0, 1fr);
  }
  .how .consent {
    grid-column: 1;
    grid-row: auto;
    position: static;
    width: min(100%, 440px);
    margin-top: 40px;
  }
  .apps,
  .questions {
    grid-template-columns: 1fr;
  }
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tile-firewall {
    grid-column: span 2;
  }
  .tile-encrypted,
  .tile-keep,
  .tile-quantum {
    grid-column: span 1;
  }
  .tile-quantum {
    grid-column: span 2;
  }
  .ada,
  .builder-section,
  .builder-heading {
    grid-template-columns: 1fr;
  }
  .guide-links ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Narrow desktops and tablets: the strip's parts move under its title. */
@media (min-width: 701px) and (max-width: 1279px) {
  .strip-parts {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* Phones */
@media (max-width: 700px) {
  .seige-home {
    --header-h: 76px;
  }
  .wrap {
    width: calc(100% - 40px);
  }
  .home-header {
    --header-tuck: 14px;
    padding-inline: 20px;
  }
  .home-nav,
  .header-login {
    display: none;
  }
  .mobile-menu {
    display: block;
  }
  .home-hero {
    gap: 18px;
    padding-bottom: 20px;
  }
  .home-hero h1 {
    font-size: clamp(38px, min(11.6vw, 6.6svh), 60px);
  }
  .hero-note {
    margin-top: 10px;
    font-size: 13px;
  }
  /* On a phone the figure keeps the apps, their folders and the AI line. */
  .plug {
    --drop: 22px;
  }
  .plug-apps,
  .plug-folders {
    gap: 8px;
  }
  .plug-apps li {
    min-height: 44px;
    padding: 8px 6px;
    font-size: 13px;
  }
  .plug-apps svg,
  .plug-builtins {
    display: none;
  }
  .plug-account {
    gap: 6px;
    padding: calc(var(--wall-depth) + 12px) 12px 10px;
  }
  .plug-folders li,
  .plug-ai {
    padding: 9px 8px;
    font-size: 13px;
  }
  .plug-folders li {
    gap: 6px;
  }
  .plug-title {
    padding-top: 10px;
    font-size: 13px;
  }
  .plug em {
    font-size: 12px;
  }
  .plug-apps li {
    --wire: calc(var(--drop) + var(--wall-depth) + 12px);
  }
  .consent-card {
    padding: 18px 16px 16px;
  }
  .how-steps {
    margin-top: 40px;
  }
  .how-steps li {
    column-gap: 16px;
    padding-bottom: 32px;
  }
  .how-note {
    padding-left: 0;
  }
  .guide-links ul {
    grid-template-columns: 1fr;
  }
  .question-list summary {
    font-size: 17px;
  }
  .hero-description {
    margin-top: 8px;
    font-size: clamp(15px, min(4vw, 2.2svh), 17px);
  }
  .hero-actions {
    margin-top: 18px;
  }
  .hero-actions .button {
    flex: 1 1 auto;
    white-space: nowrap;
    min-height: 48px;
    padding: 0 14px;
    font-size: 15px;
  }
  .app-tab {
    flex-direction: column;
    gap: 2px;
    min-height: 54px;
    font-size: 12px;
  }
  .app-tab img {
    width: 22px;
    height: 22px;
  }
  .app-preview {
    grid-template-columns: 1fr;
  }
  .preview-sidebar,
  .note-art {
    display: none;
  }
  .preview-window {
    min-height: clamp(150px, 22svh, 300px);
  }
  .account-strip {
    flex-wrap: nowrap;
    font-size: 14px;
  }
  .strip-parts {
    display: none;
  }
  .section-head h2 {
    font-size: clamp(34px, 9.4vw, 46px);
  }
  .bento {
    grid-template-columns: 1fr;
  }
  .tile-firewall,
  .tile-quantum,
  .tile-encrypted,
  .tile-keep {
    grid-column: auto;
  }
  .access-list li {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px 12px;
  }
  .access-icon {
    width: 36px;
    height: 36px;
  }
  .access-state {
    gap: 6px;
    padding: 5px 10px;
    font-size: 13px;
  }
  .builder-benefits {
    font-size: 17px;
  }
  .code-window pre {
    font-size: 14px;
  }
}
@media (max-width: 360px) {
  .hero-actions {
    gap: 8px;
  }
  .hero-actions .button {
    gap: 6px;
    padding: 0 10px;
    font-size: 14px;
    white-space: nowrap;
  }
}
@media (max-width: 380px) {
  .plug em {
    display: none;
  }
}
@media (max-width: 420px) {
  .directory-icons img:nth-child(n + 4) {
    display: none;
  }
}